React AntDesign 聊天机器人 阿里ChatUI使用

使用阿里的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		导航栏渲染函数，会覆盖 navbar
loadMoreText	string		加载更多文案
renderBeforeMessageList	function		在消息列表上面的渲染函数
messagesRef	object		消息列表 ref
onRefresh	function		下拉加载回调
onScroll	function		滚动消息列表回调
messages	array	[]	消息列表
renderMessageContent	function		消息内容渲染函数
quickReplies	array		快捷短语列表
quickRepliesVisible	boolean		快捷短语是否可见
onQuickReplyClick	function		点击快速回复回调
onQuickReplyScroll	function		快捷短语的滚动回调
renderQuickReplies	function		快捷短语渲染函数，会覆盖 quickReplies
composerRef	object		输入区 ref
text	string	''	输入框初始内容
placeholder	string	'请输入...'	输入框占位符
onInputFocus	function		输入框聚焦回调
onInputChange	function		输入框更新回调
onInputBlur	function		输入框失去焦点回调
onSend	function		发送消息回调
onImageSend	function		输入框粘贴图片后的回调
inputType	enum: text | voice	text	输入方式
onInputTypeChange	function		输入方式切换回调
recorder	object	{}	语音输入配置
toolbar	array	[]	工具栏配置
onToolbarClick	function		工具栏点击回调
onAccessoryToggle	function		工具栏打开/关闭回调
rightAction	object		输入框右边图标按钮配置
Composer	element		输入组件

先复制一份ChatUI的Props，先来介绍一下Composer

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();
    const inputRef = React.useRef(null);
    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"
                       className={style.InputForm}
                       style={{marginBottom:0}}
                   >
                       <Search
                           ref={inputRef}
                           className={style.InputForm}
                           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);

    };

navbar

组件用于使用Chat可用的header位置的渲染信息。看一下描述

收入参数是object。object？？？？？是什么样的对象呢，从官方例子里只有title

navbar={{ title: '智能助理' }}

当然对于object肯定还有别的参数，具体的属性名字文档并没有提供，。我们只能通过看代码来解决了。自己找了一下，发现了其他参数名

logo：由于中间显示图标，输入后会覆盖title

leftContent：导航栏左侧内容渲染，其中包括icon与onclick。icon直接输入文档实例中展示的名字ChatUI。onclick是点击图标后的点击事件。

2021.12.8

 right侧可以直接使用type是typing来进行打印“输入样式”

在安装的node_modul中找到chatUI的核心包，里面hooks是useXXXX方法，其中userMessages里的

可以使用deleteMsg（'id'）来删除右侧的“输入样式”内容 

to be continue......