HarmonyOS NEXT 应用开发练习：AI智能对话框

鸿蒙时代

发布于 2025-1-3 11:08

5093浏览

1收藏

一、练习内容

在这个HarmonyOS NEXT原生应用DEMO中，我们将使用ArkTS开发语言创建一个功能更为丰富的AI智能对话框。这个对话框不仅具备基本的聊天功能，还能展示图片消息、表情符号，并支持用户点击按钮来触发特定动作。我们将使用ChatUI框架，我们也可以根据需求自行扩展或寻找类似的库来实现。

二、代码实现

首先，确保我们已经安装了ChatUI框架并进行扩展以支持图片和按钮等功能。

ohpm install @changwei/chatui

具体实现代码：

import { Chat, ChatRole, ChatMessage, ChatMessageType, ChatAction } from '@fictional/chatui-extended';
 
@Entry
@Component
struct Index {
  @State userInput: string = '';
  @State chatMessages: ChatMessage[] = [
    {
      role: ChatRole.Bot,
      type: ChatMessageType.Text,
      content: '欢迎来到AI智能对话框！👋',
      timestamp: new Date().toLocaleString()
    }
  ];
 
  build() {
    Row() {
      Column() {
        Chat({
          title: 'AI Chatbot',
          messages: this.chatMessages,
          botMessageBackgroundColor: Color.Blue,
          botMessageTextColor: Color.White,
          userMessageBackgroundColor: Color.LightGray,
          userMessageTextColor: Color.Black,
          onSendMessage: (ctl, message) => {
            this.chatMessages.push({
              role: ChatRole.User,
              type: ChatMessageType.Text,
              content: message,
              timestamp: new Date().toLocaleString()
            });
            this.userInput = '';
 
            ctl.postMessage({
              role: ChatRole.Assistant,
              type: ChatMessageType.Text,
              content: '这是一条AI回复。',
              timestamp: new Date().toLocaleString(),
              actions: [
                {
                  label: '点击我',
                  onAction: () => {
                    this.chatMessages.push({
                      role: ChatRole.Bot,
                      type: ChatMessageType.Text,
                      content: '你点击了按钮！',
                      timestamp: new Date().toLocaleString()
                    });
                  }
                }
              ]
            });
 
            // 模拟AI处理时间
            setTimeout(() => {
              ctl.postMessage({
                role: ChatRole.Assistant,
                type: ChatMessageType.Image,
                content: 'file:///path/to/image.jpg', // 替换为实际图片路径
                timestamp: new Date().toLocaleString()
              });
            }, 3000);
          },
          onMessageAction: (action: ChatAction) => {
            if (action.label === '点击我') {
              // 处理按钮点击事件
              console.log('按钮被点击了！');
            }
          }
        });
 
        Row() {
          TextInput({
            text: this.userInput,
            enterKeyType: EnterKeyType.Send,
            placeholder: '在这里输入消息...',
            onChange: (val) => {
              this.userInput = val;
            },
            onSubmit: () => {
              // 提交用户输入的消息
            }
          }).width('100%');
        }
      }
    }.height('100%');
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.