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

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

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

react-chat-element介绍

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

技术特点

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

安装

npm install react-chat-elements --save  yarn add react-chat-elements

常用组件

MessageBox

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

import { MessageBox } from "react-chat-elements";  <MessageBox   position='left'   title='Burhan'   type='text'   text="Hi there !"   date={new Date()}   replyButton={true} />

MessageBox Props

以下列举出了该项目实现过程中所用到的一些组件配置：

Text Message

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

import { MessageBox } from "react-chat-elements"  <MessageBox   position={"left"}   type={"text"}   text={<div>自定义组件</div>}   className="custom-class" />

Photo Message

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

import { MessageBox } from "react-chat-elements"  <MessageBox   position={"left"}   type={"photo"}   data={{       uri: "https://picsum.photos/200/200",   }}   onOpen={handleOpenImg} />        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 实现

import { MessageBox } from "react-chat-elements";  <MessageBox   position={"left"}   type={"file"}   text={<>           <div className="file-name">****.pdf</div>           <div className="file-info">             <div className="size">592.5kb</div>             <div className="date">2024.10.06</div>           </div>         </>}   data={{     uri: "https://www.sample-videos.com/pdf/Sample-pdf-5mb.pdf"   }}   onDownload={handleDownLoad} />        const handleDownLoad = (e) => {     // 执行下载逻辑 }

使用总结

优点

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

不足之处

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

todo

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