鴻蒙實戰(zhàn)開發(fā)ArkTS運用：【ai聊天框】

簡介

用一個ArkTS編寫的HarmonyOS原生聊天UI框架，提供了開箱即用的聊天對話組件。

接口和屬性列表

接口列表

屬性列表

使用示例

這里演示簡單的調(diào)用ChatUI組件

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

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Chat({
          title:'demo chatbot',
          welcomeMessage: '我是你的測試bot',
          onSendMessage: (ctl, message) = > {
            //發(fā)送用戶消息
            ctl.postMessage(message)
            //顯示回復(fù)等待動畫
            ctl.setTyping(true)
            //3秒后發(fā)送chatbot響應(yīng)消息
            setTimeout(() = > {
              ctl.postMessage(new ChatMessage(ChatRole.Assistant, '這是一條測試回復(fù)'))
            }, 3000)
          }
        })
      }
    }
    .height('100%')
  }
}

深度定制聊天UI。替換輸入?yún)^(qū)域為你自己的輸入組件，替換頭像，文本顏色等。

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) = > {
            //發(fā)送用戶消息
            ctl.postMessage(message)
            this.userInput = ''
            //顯示回復(fù)等待動畫
            ctl.setTyping(true)
            //3秒后發(fā)送chatbot響應(yīng)消息
            setTimeout(() = > {
              ctl.postMessage(new ChatMessage(ChatRole.Assistant, '這是一條測試回復(fù)'),false)
            }, 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(); // 獲取傳遞過來的參數(shù)對象
    if(params) {
      this.needBackButton = params['needBackButton']
    }
  }
}

審核編輯 黃宇