构建交互式聊天界面：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"}
type={"text"}
text={自定义组件}
className="custom-class"
/>;
<MessageBox
position='left'
title='Burhan'
type='text'
text="Hi there !"
date={new Date()}
replyButton={true}
/>
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动画效果以及简单的交互（确认与取消）
import { MessageBox } from "react-chat-elements"
<MessageBox
position={"left"}
type={"text"}
text={自定义组件}
className="custom-class"
/>Photo Message
图片消息，在基础的消息组件上增加了点击放大功能
import { MessageBox } from "react-chat-elements"
<MessageBox
position={"left"}
type={"text"}
text={自定义组件}
className="custom-class"
/> 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={"text"}
text={自定义组件}
className="custom-class"
/>;
<MessageBox
position='left'
title='Burhan'
type='text'
text="Hi there !"
date={new Date()}
replyButton={true}
/> const handleDownLoad = (e) => { // 执行下载逻辑}使用总结
优点
[*]集成方便，熟悉react的同学非常容易上手
[*]可定制程度高
不足之处
[*]无法自定义Avatar，与前面提到的定制程度高有些冲突，但是目前确实还没有找到能够将图像的在线链接替换为 reactNode 的方法，如果有哪位大佬有思路望不吝赐教
todo
[*]适配移动端
[*]请求message的时机优化，自动滚动至底部（对话中存在图片消息，图片加载时间如何解决）
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]