赞
踩
ChatUI ,是一个ArkTS编写的HarmonyOS原生聊天UI框架,提供了开箱即用的聊天对话组件。
ohpm install @changwei/chatui
OpenHarmony ohpm 环境配置等更多内容。
接口列表
接口 | 参数 | 功能 |
---|---|---|
setTyping(isTyping) | isTyping:布尔值 | 显示/隐藏消息加载动画 |
postMessage(msg,clearInput) | msg:ChatMessage类型 clearInput: boolean类型。 | 在对话界面中显示消息 指示展示消息时是否清空输入框内容,默认清除。 |
submitUserInput(userIputText) | userIputText:string类型。 | 触发Chat组件用户发送消息事件 |
onSendMessage(callback) | callback:(ctl,message)=>void | 用户发送输入消息回调事件 |
onClear(callback) | callback:(event)=>void | 用户清空聊天记录回调事件 |
属性列表
属性 | 描述 |
---|---|
messages | 聊天消息列表,IChatDataSource类型。支持懒加载显示的数据源 |
botAvatar | chatbot头像(可选)。Resource类型 |
userAvatar | 我的头像(可选)。Resource类型 |
title | 标题栏标题。string类型 |
needTitleBar | 是否显示标题栏。boolean类型 |
welcomeMessage | chatbot默认欢迎语。string类型 |
botMessageBackgroundColor | chatbot消息的背景颜色。string类型 |
botMessageTextColor | chatbot消息的文本颜色。string类型 |
userMessageBackgroundColor | 用户消息的背景颜色。string类型 |
userMessageTextColor | 用户消息的文本颜色。string类型 |
messageFontSize | 消息文本的字体大小。number类型 |
needBackButton | 是否显示顶部返回按钮。点击返回导航上一页。boolean类型 |
needInputControl | 是否需要底部输入区域。 boolean类型 |
InputControl | 底部输入区域,@BuilderParams类型。该区域可自定义为你自己的布局 |
controller | 自定义输入控制器,自定义输入区时必填。[ChatController](chatui/src/main/ets/components/Chat.ets · Codex/ChatUI - Gitee.com)类型 |
backIcon | 返回按钮图标。Resource类型 |
clearChatIcon | 清楚聊天按钮图标。Resource类型 |
submitButtonText | 提交消息按钮文本。string类型 |
inputTextPlaceHolder | 输入框提示文本。string类型 |
inputTextPlaceHolderColor | 输入框提示文本的颜色。string类型 |
inputTextColor | 输入文本的颜色。string类型 |
needSubmitButton | 是否显示提交消息按钮。boolean类型 |
useMarkdown | 是否渲染markdown消息。boolean类型 |
- 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%')
- }
- }
- 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']
- }
- }
- }
Chat({useMarkdown:true})
markdown消息效果请看上面的demo gif
在下述版本验证通过: DevEco Studio: 4.0.0.600, SDK: API9
使用过程中发现任何问题都可以提Issue 给我 。
本项目基于 MIT ,请自由地享受和参与开源。
随着鸿蒙开发越来越火热,我了解到现在有很多小伙伴想入行鸿蒙,但又不知道学习哪些鸿蒙开发技术?所以我给大家整理了一份鸿蒙Next全套VIP学习资料
资料包含了:【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。
有需要的小伙伴自行领取:获取完整版方式请点击→《 鸿蒙Next全套VIP学习资料》
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。