ArkTS编写的HarmonyOS原生聊天UI框架

简介

ChatUI，是一个ArkTS编写的HarmonyOS原生聊天UI框架，提供了开箱即用的聊天对话组件。

下载安装

ohpm install @changwei/chatui

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

接口和属性列表

接口列表

属性列表

使用示例

这里演示简单的调用ChatUI组件

import { Chat, ChatRole, ChatMessage } from '@changwei/chatui'

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Chat({
          title:'demo chatbot',
          welcomeMessage: '我是你的测试bot',
          onSendMessage: (ctl, message) => {
            //发送用户消息
            ctl.postMessage(message)
            //显示回复等待动画
            ctl.setTyping(true)
            //3秒后发送chatbot响应消息
            setTimeout(() => {
              ctl.postMessage(new ChatMessage({
                role: ChatRole.Assistant,
                content: '这是一条测试回复'
              }))
              // 图片消息
              ctl.postMessage(new ChatMessage({
                role:ChatRole.Assistant,
                picurl:"https://foruda.gitee.com/avatar/1709712450038093632/8548349_changweizhang_1709712449.png"
              }));
            }, 3000)
          }
        })
      }
}
.height('100%')
}
}

深度定制聊天UI。替换输入区域为你自己的输入组件，替换头像，文本颜色等。

import { Chat, ChatRole, ChatMessage } from '@changwei/chatui'
import { ChatController } from '@changwei/chatui'
import router from '@ohos.router';

@Entry
@Component
struct CustomInput {
  @State userInput: string = ''
  @State needBackButton: boolean = false
  chatController = new ChatController()

  build() {
    Row() {
      Column() {
        Chat({
          title: 'demo chatbot',
          needTitleBar: true,
          welcomeMessage: '我是你的测试bot',
          botMessageBackgroundColor: Color.Brown,
          botMessageTextColor: Color.White,
          userMessageBackgroundColor: Color.Green,
          userMessageTextColor: Color.White,
          botAvatar:$r('app.media.chat'),
          messageFontSize: 20,
          userInput: this.userInput,
          controller: this.chatController,
          needBackButton:this.needBackButton,
          onSendMessage: (ctl, message) => {
            //发送用户消息
            ctl.postMessage(message)
            this.userInput = ''
            //显示回复等待动画
            ctl.setTyping(true)
            //3秒后发送chatbot响应消息
            setTimeout(() => {
              ctl.postMessage(new ChatMessage({role:ChatRole.Assistant, content:'这是一条测试回复'}))
            }, 3000)
          }
        })
        {
          Row() {
            Button() {
              Image($r('app.media.app_icon'))
            }
            .backgroundColor('#')
              .height('40')
              .width('40')
              .margin(5)
            
            TextInput({
              text: this.userInput
            })
              .enterKeyType(EnterKeyType.Send)
              .fontColor(Color.White)
              .backgroundColor(Color.Blue)
              .width('80%')
              .onChange((val) => {
                this.userInput = val
              })
              .onSubmit((ss) => {
                this.chatController.submitUserInput(this.userInput)
              })

          }
        }

      }
    }
    .height('100%')
  }

    aboutToAppear() {
      const params = router.getParams(); // 获取传递过来的参数对象
      if(params) {
        this.needBackButton = params['needBackButton']
      }
    }
}

使用Markdown格式显示消息

 Chat({useMarkdown:true})

markdown消息效果请看上面的demo gif

约束与限制

在下述版本验证通过： DevEco Studio: 4.0.0.600, SDK: API9