构建交互式聊天界面：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

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

props	default	type	description
position	none ("left" | "right")	string	消息的位置，左侧还是右侧
type	none ("text" | "photo" | "file" | "audio" | ... )	string	消息的类型，更多参考messagetype-list
text	none	React Node | string	消息的内容，不局限于string，也可以是一个自定义组件，提供了丰富的扩展空间
avatar	none	string	消息的头像，一般为一个图片的在线链接
data	none	object	当消息类型为非text(file, photo...)时的详细信息，例如：文件的名称、扩展、大小、uri链接状态等
className	none	string	自定义类名

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的时机优化，自动滚动至底部（对话中存在图片消息，图片加载时间如何解决）