React AntDesign 聊天机器人 阿里ChatUI使用-CSDN博客
React AntDesign 聊天机器人 阿里ChatUI使用
最新推荐文章于 2024-03-31 09:39:00 发布
runrun117 阅读量6.7k 收藏 17 点赞数 5 分类专栏： 前端 文章标签： ant design chatUI react 问答机器人
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。
本文链接：
https://blog.csdn.net/runrun117/article/details/118223631
版权
专栏收录该内容
66 篇文章
0 订阅
订阅专栏
使用阿里的antDesignPro开发了前端项目，现在根据需求进行了客户对话框的开发，找了三个组件。
【React】基于Antd 制作的纯前端客服机器人_不忘初心，坚定道路！-CSDN博客_react 客服
Hello from React-chatbot-kit | React-chatbot-kit
最后发现阿里开源的ChatUI组件好看，有“比较”前的组件文档。所以就开始根据ChatUI开发。当然以上才材料也有很多借鉴的地方，三个组件可以根据需求自己融汇贯通，相互融合来用。
ChatUI官网
ChatUI
。基本使用情况按照官方使用的直接在React项目中配置就可以
ChatUI的基本组成如图。这个我认为挺重要的，出处是
阿里 ChatUI 开源：让对话美而简单_web前端开发-CSDN博客
，我认为是阿里的人写的。
在官方的文档中没有详细的对“Chat对话容器”组件构成的构成有详细的介绍，所以下面的图的名字其实也决定了各个属性的名字。
官方的Props描述相比与ant design 组件的描述也是否的简单。示例也就第一个，所以每个属性的使用得自己去摸索。
问题
1、根据官方文档，引入ChatUI后，发现官方提供的SVG小图标没有显示出来。如图
橘黄色的地方应该有图标 的但是没有。仔细翻一下官方的“快速上手”中有一句话：
原来需要单独引用一下这个js文件。但是在react中如何使用这个html标签呢，。自己可以试一下自己的方法，。我是直接将这个文件下载下来，放到项目中，之后直接引用。这也是script的使用方法。引用之后的效果就是这个。
为啥不能直接将图标的文件放到整个npm包里呢，，，我有点不能理解。
使用
参数
类型
默认值
说明
wideBreakpoint
string
宽屏断点
navbar
object
导航栏配置
renderNavbar
function
导航栏渲染函数，会覆盖 
loadMoreText
加载更多文案
renderBeforeMessageList
在消息列表上面的渲染函数
messagesRef
消息列表 ref
onRefresh
下拉加载回调
onScroll
滚动消息列表回调
messages
array
[]
消息列表
renderMessageContent
消息内容渲染函数
quickReplies
快捷短语列表
quickRepliesVisible
boolean
快捷短语是否可见
onQuickReplyClick
点击快速回复回调
onQuickReplyScroll
快捷短语的滚动回调
renderQuickReplies
快捷短语渲染函数，会覆盖 
composerRef
输入区 ref
text
''
输入框初始内容
placeholder
'请输入...'
输入框占位符
onInputFocus
输入框聚焦回调
onInputChange
输入框更新回调
onInputBlur
输入框失去焦点回调
onSend
发送消息回调
onImageSend
输入框粘贴图片后的回调
inputType
enum: 
 | 
voice
输入方式
onInputTypeChange
输入方式切换回调
recorder
{}
语音输入配置
toolbar
工具栏配置
onToolbarClick
工具栏点击回调
onAccessoryToggle
工具栏打开/关闭回调
rightAction
输入框右边图标按钮配置
Composer
element
输入组件
先复制一份ChatUI的Props，先来介绍一下Composer
这个是最上面图中的输入框和输入按钮的部分，使用这个属性后，会覆盖chat控件，要求输入的属性是element，这个其实是比较好理解的，就是
，但是自己来进行输入框画的时候，我遇到一个问题就是自己定义的input的没有办法在输入完成后自动再次获取input输入焦点，导致输入完-》回车-》鼠标再次选择input-》输入完...........。找了找原因是因为每次执行完
appendMsg
后，整个组件又进行了一次构造。（我是通过在整个组件函数开始的位置进行console.log，每次appendMsg后，都会重新执行console，而使用input重新获取焦点，必须通过
const inputRef = React.useRef(null);
导致每次input后，重新执行这个方法，永远获取不到input焦点）我也不知道自己结论是否是正确的。就因为我发获取input焦点，所以放弃了composer自定的想法。
贴一下不用的代码，可能之后使用Form表单会使用到，此代码与本次ChatUI讨论无关
//自定义的输入框内容。不适用于这个。在每次发送请求的时候，都会重新刷新整个空间，导致声明的文本框无法获取到对应的ref映射，从而在对话的时候无法获取到输入框焦点
const formRef = React.createRef();
function inputDiv() {
return (
<div style={
{display:'flex'}}>
{/*<Input style={
{display:'flex'}} className={styles.footInput} placeholder={'有问题，找小财'} onChange ={event => handleInputName(event)} />*/}
{/*<Button onClick={()=>onCommit()}>提交</Button>*/}
<Form
ref={formRef}
name="basic"
className={style.InputForm}
>
<Form.Item
name="info"
style={
{marginBottom:0}}
<Search
ref={inputRef}
placeholder="请输入员工姓名或邮箱前缀"
enterButton="发送"
onSearch={onCommit}
onChange={(value) => handleInputName(value.target.value)}
// className={styles.searchTop}
/>
</Form.Item>
</Form>
</div>
const handleInputName = (value)=>{//输入过程中变化的信息时展示的，
console.log('输入的信息=',value);
// setInputValue(value);
};
const onCommit = (value) =>{//点击回车时调用的
handleSend('text',"123");
console.log('1');
// console.log('value输入框的信息的是=',value);
// formRef.current.resetFields();//重置输入框
// console.log('输入框自己的 rel==inputRef==',inputRef);
组件用于使用Chat可用的header位置的渲染信息。看一下描述
收入参数是object。object？？？？？是什么样的对象呢，从官方例子里只有title
navbar={
{ title: '智能助理' }}
当然对于object肯定还有别的参数，具体的属性名字文档并没有提供，。我们只能通过看代码来解决了。自己找了一下，发现了其他参数名
logo：由于中间显示图标，输入后会覆盖title
leftContent：导航栏左侧内容渲染，其中包括icon与onclick。icon直接输入文档实例中展示的名字
。onclick是点击图标后的点击事件。
2021.12.8
 right侧可以直接使用type是typing来进行打印“输入样式”
在安装的node_modul中找到chatUI的核心包，里面hooks是useXXXX方法，其中userMessages里的
可以使用deleteMsg（'id'）来删除右侧的“输入样式”内容 
to be continue......
优惠劵
关注
点赞
觉得还不错?
一键收藏
知道了
评论
使用阿里的antDesignPro开发了前端项目，现在根据需求进行了客户对话框的开发，找了三个组件。https://blog.csdn.net/yehuozhili/article/details/108552890https://fredrikoseberg.github.io/react-chatbot-kit-docs/#tutorials最后发现阿里开源的ChatUI组件好看，有“比较”前的组件文档。所以就开始根据ChatUI开发。当然以上才材料也有很多借鉴的地方，三个组件可以根据需求自
复制链接
扫一扫
专栏目录
-app:
聊天机器人
演示
05-31
创建
React
应用程序入门
这个项目是用引导的。
可用脚本
在项目目录中，您可以运行：
yarn start
在开发模式下运行应用程序。 打开在浏览器中查看。
如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。
yarn test
在交互式观察模式下启动测试运行器。 有关更多信息，请参见关于的部分。
yarn b
ui
ld
将用于生产的应用程序构建到b
ld文件夹。 它在生产模式下正确地捆绑了
并优化了构建以获得最佳性能。
构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！
有关更多信息，请参阅有关的部分。
yarn eject
注意：这是一种单向操作。 一旦eject ，就回不去了！
如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。
相反，它会将所有配置文件和可传递依赖
chat
bot:用
制作的
04-14
Create
App入门
该项目是通过引导的。
在项目目录中，可以运行：
在开发模式下运行应用程序。 打开在浏览器中查看它。
如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。
在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
构建生产到应用程序b
ld文件夹。 它在生产模式下正确捆绑了
，并优化了构建以获得最佳性能。
生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
有关更多信息，请参见关于的部分。
注意：这是单向操作。 eject ，您将无法返回！
如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
相反，它将所有配置文件和传递依赖项（webpac
4 条评论
您还未登录，请先
登录
后发表或查看评论
搞定一个大模型对话效果
jacoby_fire的博客
01-25
561
最近AI盛行，关注几个大模型网站都能发现，跟AI对话的时候，返回的文本是逐字展示的，就给人一种AI边解析边返回的感觉（不知道是为了装X还是真的需要这样）。第一个：用个定时器，把时差设置为变量delay，每次都随机生成delay，固定展示三个字符，直到展示完全。简单来讲就是，速度不固定，每次展示长度固定。由于我这边后端返回是一次性返回所有回复，而天煞的产品经理要求做出逐字展示效果，于是我只能纯前端控制展示。整体实现并不难，但要做好每个细节还是需要一点思考的，ok，，我要拿去装逼了，拜拜！
如何引入
Chat
UI
实现类似
gpt智能客服
m0_66288747的博客
01-03
655
gpt智能客服。
阿里
开源：让对话美而简单
web前端开发
10-01
4457
作者 |孙辉背景对话式交互一直存在于我们的日常生活中，工作时
的钉钉，联系朋友
的微信，都属于对话式交互应用。随着技术的发展，我们正在经历从「移动互联网时代」走向「人工智能时代」的...
工具
记录与比较
龙井茶的Sky
03-28
566
caht
相关工具可谓是层出不穷，方便了我们
各个大模型。这里我把我知道的整理下列出来，顺便做一比较。
:会话式
设计语言和
03-16
会话式
网址：
English |
特征
:smiling_face_with_sunglasses: 最佳实践：根据我们对Alime
bot的经验，进行聊天交互的最佳实践
:shield: TypeScript ：用具有可预测的静态类型的TypeScript编写
:mobile_phone: 响应式：响应式设计可自​​动适应任何设备
:wheelchair_symbol: 可访问性：可访问性支持并获得可访问性研究协会的认证
:artist_palette: 主题化：强大的主题定制的每一个细节
:globe_showing_Europe-Africa: 国际：对数十种语言的国际化支持
环境支援
现代浏览器（支持）
Internet Explorer 11（带有和 /
边缘
火狐浏览器
Chrome合金
苹果浏览器
iOS Safari
Android WebView
16岁以上
31岁以上
49岁以上
9.1+
9.3+
6+
安装
npm install @
/core --save
搭建一个AI对话
机器人
——前端
纪录
qq_24357165的博客
7892
的接入
经验整理。
是一个适用于
项目的
前端解决方案，包含丰富的对话组件，支持 PC/移动端样式响应式。
简单，体积不算重，兼容性良好。不过文档及社区维护这块有提升的空间。
关于可信的
风轻扬
08-12
232
前天在网易数帆北京峰会上，我们正式发布了可信
BI产品，就是通过对话就可以看数（对话即数据分析，网易数帆
BI做到了）。这种产品好几家都在做，我们也不算最早宣传的，但我感觉我们是把可信度做到最高的。大家都知道大模型将带来
交互范式，比尔说过这话。这当然是方向，我之前也写过专门的文章（
GPT让现在的软件都土掉渣了），但做起来并不容易，关键是要做到可信。大家知道大模型技术...
gpt实现智能客服
kabudada的博客
03-29
2132
背景：
\ts\
ant
d pro\alibaba-
\openai-api。注意接口的messages字段我将上文也一起传过去了，为了它能回答问题的时候，回顾上下文。1.引入
进行页面开发。2.调用openAI的api。
探索
：构建交互式聊天应用的高效框架
最新发布
gitblog_00043的博客
03-31
420
项目地址:https://gitcode.com/stridercheng/
项目简介
是一个由前端开发者stridercheng开发的开源项目，旨在为开发者提供一个简单、可扩展的聊天界面框架。它允许快速搭建各种类型的聊天应用程序，无论是实时通讯、社交平台还是企业级协作工具，
都能助你轻松实现。
技术分析
...
一个用于构建聊天
组件库
04-30
:speak-no-evil_monkey:
聊天
用于构建聊天
组件库。
赞助
由赞助：
自动滚动到底部
超级好用
多用户分组（在演示中试用）
请记住，该项目仍处于开发的早期阶段。 如果您遇到错误或有功能请求，请在创建问题和/或向我发送鸣叫。
npm install
--save
基本用法
import {
Feed , Message } from '
'
// Your code stuff...
render ( ) {
// Your JSX...
<
Feed
messages = { this . state . messages } // Array: list of message objects
isTyping = { this .
-kit-
：在几分钟内
组件构建自己的聊天
scope的
Kit是用于开发Web聊天应用程序的开源
工具包
02-03
Kit
在几分钟内
工具包。
厌倦了粘性滚动条的困扰，可编辑的内容，响应能力，CSS hacks ...？ 我们的套件适合您！ 。
套件使聊天
的开发速度大大提高
纱线。
yarn add @
scope/
npm。
样式。
-kit-styles
用法
ESM
import styles from " @
-kit-styles/dist/default/styles.min.css " ;
MainContainer ,
Container
的聊天
组件
05-19
最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！
相反，它将所有配置文件和传递依赖项（webpack
07-19
前端的
，可进行二次开发。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
Design
手动设置表单的值操作
01-22
1.设置表单的值
this.props.form.setFieldsValue({ name:”张三”, });
2.清空表单的值 ...补充知识：
d表单赋值，用于修改弹框 1、
getFieldDecorator的initialValue
2、在state里定义一个
d-landing-page:
Ant
制作的登录页面
05-28
设计登陆页面
我尝试
重新创建引导登录页面。 您可以在查看现场演示。
原始设计属于 。
自搭的
design
脚手架
06-06
@4.2.4 实现的webpack配置项 jsx、es6语法解析 开发服务 webpack-dev-server html模板，会自动引入打包的js less配置 css配置：打包压缩、自动添加浏览器前缀 图片字体等资源加载
(不需要可以 ...
详解
of
的安装和
方法
10-17
主要介绍了详解
方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
模版
是一个基于
组件库，可以帮助开发者快速构建美观、易用的 Web 应用程序。如果你需要
，可以
官方提供的 Create
App 模板来创建一个基于
的项目，具体步骤如下：
1. 首先，你需要安装 Node.js，可以到官网下载安装包进行安装。
2. 打开终端，
以下命令来安装 Create
App：
```
npm install -g create-
-app
3. 创建一个新的
项目：
npx create-
-app my-app --template
其中，my-app 是你的项目名称，--template
表示
的模板来创建项目。
4. 进入项目目录，并启动开发服务器：
cd my-app
npm start
5. 打开浏览器，访问 http://localhost:3000，即可看到一个基于
的网站。
这样，你就可以开始在项目中
组件了。如果需要了解更多关于
方法，可以参考
官方文档。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
CSDN认证博客专家
CSDN认证企业博客
码龄10年
暂无认证
143
原创
6万+
周排名
2万+
总排名
88万+
访问
等级
4791
积分
62
粉丝
152
获赞
60
485
私信
热门文章
撸一撸ArrayList源码
375882
Mysql存储大数据字符串
42629
Myeclipse导入项目提示已存在（Some projects cannot be imported because they already exist in the workspace)
31338
Java VS C/C++ 运行速度的对比
27462
排序算法之 堆排序 及其时间复杂度和空间复杂度
20781
分类专栏
66篇
2篇
window.open
1篇
redis
服务器
微服务
4篇
docker
神经网络
C# winform 编程总结
文字
Android知识
79篇
Java知识
61篇
网络知识
5篇
数据挖掘
算法
11篇
面试
数据结构
数据库
React Native
Java Web
12篇
操作系统
金融
JavaEE框架
8篇
C# Winform
数据清洗、过滤、消噪
杂论
Linux
3篇
MyBatis
项目
16篇
分布式
最新评论
墨茵:
解决了我1/10 的问题, 不错, 好文章, 他这个项目缺的东西太多了, 文档太多问题, 也好多个月没有维护了, 还有例如在ios浏览器打开, 输入后出现滚动条问题, 等等, 太多问题了
Joker 111111:
svg那个怎么弄的
umi 动态加载组件 dynamic 自定义loading图片
m0_38114965:
把官方文档复制一遍意义在哪里
迷途小灯塔:
学到了，之前想存储base64位的字符串，结果报too long，当时text还够用，当图片一复杂，结果有报too long，改了mediumtext，终于好了。
goddnscsdn:
按照这文章的说法,通过通译跟老外聊天比自己直接说英语快很多.....
当然这编文章里的前提条件是不会英语. 所以手势交流必定输给通译转达...
真特么奇葩理论...
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
nginx location 与 proxy的配置
vscode配置与注意事项
父容器中设置子容器居中
2024年
2023年
2022年
2021年
50篇
2020年
20篇
2019年
34篇
2018年
174篇
目录
评论 
被折叠的 
 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额
3.43
前往充值 >
需支付：
10.00
取消
确定
下一步
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值