构建交互式聊天界面：react-chat-element 实战小计

react聊天组件库：react-chat-elements

需求场景：用户可以通过多元的用户交互方式，如文件、图片、声音以及文字等输入相关信息，AI给出对应的回答

react-chat-element介绍

react-chat-elements 是一个专为React开发者设计的聊天组件库，旨在简化聊天界面的开发过程，适用于构建社交应用、客户支持系统、企业内部沟通工具等多种应用场景。
技术特点

• 基于React框架，充分利用了React的组件化开发优势。
  
• 组件高度可定制，能够满足不同场景下的需求。
  
• 支持文本、图片、文件、位置、视频、音频等多种消息类型。
  
• 响应式设计，确保在移动端和桌面端都能良好显示
  

安装

1. npm install react-chat-elements --save
3. yarn add react-chat-elements

复制代码

常用组件

MessageBox

MessageBox 组件涵盖了文本、图片、地理位置等多种类型的消息展示

1. import { MessageBox } from "react-chat-elements"
3. <MessageBox
4.   position={"left"}
5.   type={"text"}
6.   text={自定义组件}
7.   className="custom-class"
8. />;
10. <MessageBox
11.   position='left'
12.   title='Burhan'
13.   type='text'
14.   text="Hi there !"
15.   date={new Date()}
16.   replyButton={true}
17. />

复制代码

MessageBox Props

以下列举出了该项目实现过程中所用到的一些组件配置：
propsdefaulttypedescriptionpositionnone ("left" | "right")string消息的位置，左侧还是右侧typenone ("text" | "photo" | "file" | "audio" | ... )string
消息的类型，更多参考messagetype-listtextnoneReact Node | string
消息的内容，不局限于string，也可以是一个自定义组件，提供了丰富的扩展空间avatarnonestring消息的头像，一般为一个图片的在线链接datanoneobject
当消息类型为非text(file, photo...)时的详细信息，例如：文件的名称、扩展、大小、uri链接状态等classNamenonestring
自定义类名Text Message

最基础的文本消息组件，但是可以通过定义text丰富消息的展示形式，例如本次需求中的文本包含 CSS动画效果以及简单的交互（确认与取消）

1. import { MessageBox } from "react-chat-elements"
3. <MessageBox
4.   position={"left"}
5.   type={"text"}
6.   text={自定义组件}
7.   className="custom-class"
8. />

复制代码

Photo Message

图片消息，在基础的消息组件上增加了点击放大功能

1. import { MessageBox } from "react-chat-elements"
3. <MessageBox
4.   position={"left"}
5.   type={"text"}
6.   text={自定义组件}
7.   className="custom-class"
8. />      const handleOpenImg = (e) => {  if (e?.target?.tagName === 'IMG') {      const overlay = document.getElementById('img-overlay');      const overlayImg = document.getElementById('overlay-img');      const src = e?.target?.src;      overlay.style.display = 'flex';      overlayImg.src = src;      overlay?.addEventListener('click', function () {        overlay.style.display = 'none';      });   } };

复制代码

 
File Message

文件消息，需求需要自定义file的icon、增加展示信息并且提供点击下载功能，所以通过定义上文提到的自定义class， text 属性以及 onDownload 实现

1. import { MessageBox } from "react-chat-elements"
3. <MessageBox
4.   position={"left"}
5.   type={"text"}
6.   text={自定义组件}
7.   className="custom-class"
8. />;
10. <MessageBox
11.   position='left'
12.   title='Burhan'
13.   type='text'
14.   text="Hi there !"
15.   date={new Date()}
16.   replyButton={true}
17. />      const handleDownLoad = (e) => {    // 执行下载逻辑}

复制代码

使用总结

优点

• 集成方便，熟悉react的同学非常容易上手
  
• 可定制程度高
  

不足之处

• 无法自定义Avatar，与前面提到的定制程度高有些冲突，但是目前确实还没有找到能够将图像的在线链接替换为 reactNode 的方法，如果有哪位大佬有思路望不吝赐教
  

todo

• 适配移动端 
  
• 请求message的时机优化，自动滚动至底部（对话中存在图片消息，图片加载时间如何解决）
  

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！