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

一、练习内容

在这个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%');
  }
}

三、案例阐述

运行这个代码后，我们将看到一个功能更为丰富的AI智能对话框界面：

文本聊天：用户可以输入文本消息，并实时显示在聊天区域。AI会模拟回复，并在回复中包含一个可点击的按钮。

图片消息：AI在回复用户后，会等待3秒钟，然后发送一张图片消息到聊天区域。注意，这里的图片路径需要替换为实际存在的图片路径。

按钮动作：AI的回复中包含一个“点击我”的按钮。当用户点击这个按钮时，会触发一个动作，向聊天区域添加一条新的消息，表明按钮已被点击。

时间戳：每条消息都会显示发送的时间戳，以便用户了解消息的发送时间。

这个DEMO展示了如何使用ArkTS和扩展后的ChatUI框架（或类似功能的库）在HarmonyOS NEXT上创建一个功能丰富的AI智能对话框。我们可以根据需要进一步定制和扩展这个对话框的功能，比如添加更多的AI回复逻辑、支持语音消息、视频通话等。