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

npm install react-chat-elements --save

yarn add react-chat-elements

import { MessageBox } from "react-chat-elements";

import { MessageBox } from "react-chat-elements"

自定义组件

}
className=”custom-class”
/>

Photo Message

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

import { MessageBox } from "react-chat-elements"


      
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";


          
****.pdf
          

            
592.5kb
            
2024.10.06
          
        >}
  data={{
    uri: "https://www.sample-videos.com/pdf/Sample-pdf-5mb.pdf"
  }}
  onDownload={handleDownLoad}
/>
      
const handleDownLoad = (e) => {
    // 执行下载逻辑
}

使用总结

优点

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

不足之处

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

todo

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