ChatUI 主要分为 ChatUI 和 ChatPro 两部分（两套ui框架） 。
ChatUI 更适合手机应用
ChatPro 更适合浏览器页面对话（客服 虽然ChatUI对项目框架做了自适应尺寸 多端应用考虑较多 现实操作起来麻烦）
ChatUI 只支持React
不支持vue和小程序 （我在uni-app里尝试过使用 但不建议）因为ChatUI 框架本身使用的React 框架所以这就解释了为啥只按照要求使用React来引入ChatUI。
引入项目
import React, { useEffect, useRef } from 'react';
export default () => {
const wrapper = useRef();
useEffect(() => {
const bot = new window.ChatSDK({
root: wrapper.current,
// 注册组件 仅在组件内使用
components: {},
config: {
// 机器人头像
robot: {
avatar: '//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg',
},
// 用户头像
user: {
avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg',
},
//（可选）配置按钮文案
loadMoreText: '查看历史对话',
// 反馈点赞
feedback: {
// 点赞后出的文本
textOfGood: '谢谢您给我的赞，我会继续努力。',
// 点踩后出的文本
textOfBad: '',
// 点踩后是否显示反馈表单
needFeedback: true,
// 不满意原因列表
options: [
{
// 选项值
value: '1',
},
{
value: '2',
},
{
value: '3',
},
],
},
//快捷短语
quickReplies: [
{ name: '张三', type: 'text', },
{ name: '李四' },
{ name: '王五',isNew: true, }
],
}
//输入框占位符
placeholder: '请输入你的问题....',
},
//通讯请求（问答 反馈 历史 上传文件等）
requests: {
//问答
send: function (msg) {},
//历史配置接口
history: function () {},
//点赞 踩赞
evaluate(data) {},
//反馈
feedback(data) {},
}
//上传图片 文件等
handlers: {}
});
bot.run();
}, []);
// 注意 wrapper 的高度
return <div style={{ height: '100%' }} ref={wrapper} />;
}requests 通讯请求（问答 反馈 历史 上传文件）
对话
项目中给我们封装的请求我不太喜欢 我使用的是Axios中文文档 | Axios中文网（axios）
requests: {
/*
*
* 问答接口
* @param {object} msg - 消息
* @param {string} msg.type - 消息类型
* @param {string} msg.content - 消息内容
* @return {object}
*/
send: function (msg) {
// 发送文本消息时
if (msg.type === 'text') {
const payload = {
query: XXXX,
}
//post请求
return axios.post('/XXX', payload, {
headers: {
'Content-Type': 'application/json',
},
})
.then(response => {
return (
{
//消息类型：text普通消息 默认文本
type: 'text',
//消息内容
content: {
text: response.data.output
}
}
);
})
.catch(error => {
// 请求出错，处理错误
console.error(error);
// 返回错误信息或执行其他操作
throw error;
});
}
// ... 其它消息类型的处理
},
},反馈（点赞功能）
不管点赞还是踩赞都是这一个接口 可以根据变量来区别传递内容（好/坏）
evaluate(data) {
return axios.post('/xxx',{messageId:xxx,}).then(res => {
// 反馈文本（可以不管或antd轻提示）
})
},历史
历史的注意点在于 返回的结果 分清楚左右 时间处理问题等
//请求
requests: {
/**
*
* 问答接口
* @param {object} msg - 消息
* @param {string} msg.type - 消息类型
* @param {string} msg.content - 消息内容
* @return {object}
*/
// 历史配置接口
history: function () {
return axios.post('/XXX').then(res => {
const historylist = res.data.historylist
// *map需要返回值 记得暴露
let list = historylist.map(item => {
if (item.position == "left") {
return {
//回复类型（文本样式）自己制作的组件
"type": 'TestQuestion',
//卡片
"code": 'knowledge',
"_id": "msg_1",
"position": item.position,
//文本内容
"content": {
//文本
"text": item.text
},
//时间处理
"createdAt": item.datetime
}
} else {
return {
"_id": "msg_1",
"type": "text",
"position": item.position,
"content": {
"text": item.text
},
//时间处理 拿到的是时间戳（具体的数值）
"createdAt": item.datetime
}
}
})
return {
list: list,
"noMore": true
}
}
).catch(
// message.success("正在加载....")
)
},
},上传（图片 文件）
//上传图片 文件等
handlers: {
onToolbarClick(item, ctx) {
//如果点的是"相册"
if (item.type === 'image') {
ctx.util.chooseImage({
multiple: true, // 是否可多选
success(e) {
if (e.files) { // 如果有 h5 上传的图
const file = e.files[0];
//文件流上传
const formData = new FormData();
formData.append("file", file)
//先展示图片
ctx.appendMessage({
type: 'image',
content: {
picUrl: URL.createObjectURL(file)
},
position: 'right'
});
return axios.post('/XXX', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
ctx.postMessage({
type: 'text',
content: {
text: res.data
},
quiet: true // 不展示
});
})
} else if (e.files) { // 如果有 app 上传的图
// ..与上面类似
}
},
});
}
}
}图标
框架中有些ui图标缺失仔细查看使用的是 iconfont-阿里巴巴矢量图标库 其中的一种引用方式（ChatUI框架是阿里达摩院创作）可根据F12找到相关图标代码路径 然后在indext文件引入
<!-- chatui pro 组件icon资源丢失，底层代码是引入内部阿里的阿里适量需使用Symbol引入链接 -->
例如：
<script src="https://at.alicdn.com/t/c/font_4148071_nlz31z9a4y.js"></script>封装组件（根据自己需求制作卡片）
参考Markdown 对话展示方式 那个就是自己写的组件（卡片）因为此组件只是将传递数据比较简单没做别的操作（使用的是函数组件）
注册卡片（组件）
使用以前要注册（引入组件）
一定要注意 ChatUI是用React开发的就意味着 只要将此UI框架引入我们的React项目就会有两个React版本（我们项目一个，ChatUI框架内核一个）ChatUI框架是用17^版本 我们要么保持一至 要么使用 class组件 否则项目会出现报错。
class组件官方正在弃用 只是在大力推广函数式组件
components: {
"TestQuestion": Testquestion,
},使用卡片
return {
//使用卡片（组件）
type: 'Testquestion',
content: {
//给卡片传递的数据（文本）
text: res.data,
}
}Markdown 对话展示方式
使用React自带markdown组件需要自己安装（下面代码没有使用css说明使用了安装库只需要把文本传入组件即可）由于react自带的markdown功能没有那么全 需要自己去找合适库不一定要用React自带的。文章来源：https://www.toymoban.com/news/detail-846560.html
文章属于回忆录
ChatUI用户群”群的钉钉群号： 32174470文章来源地址https://www.toymoban.com/news/detail-846560.html
到了这里，关于ChatUI 快速构建聊天 机器人为例：的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
