react-chat-widget API详解：掌握消息管理与交互控制的10个实用方法
项目地址: https://gitcode.com/gh_mirrors/re/react-chat-widget react-chat-widget 是一款专为 React 应用打造的高效聊天组件，提供了丰富的 API 接口来实现消息管理与交互控制。本文将详细介绍 10 个最实用的 API 方法，帮助开发者快速掌握组件的核心功能，轻松构建功能完善的聊天界面。
一、消息发送与管理
1. addUserMessage：发送用户消息
功能：向聊天窗口添加用户发送的消息
语法：
addUserMessage(text: string): void;
addUserMessage(text: string, id: string): void;
参数：
text：消息内容字符串id（可选）：消息唯一标识符
使用场景：用户输入消息后调用，可配合表单提交事件使用。该方法定义在 index.d.ts 文件中，实际调度逻辑位于 src/store/dispatcher.ts。
2. addResponseMessage：添加回复消息
功能：添加机器人或系统回复消息
语法：
addResponseMessage(text: string): void;
addResponseMessage(text: string, id: string): void;
使用场景：收到后端响应后调用，常用于展示 AI 回复或客服消息。
3. addLinkSnippet：添加链接卡片
功能：在聊天窗口中插入带有标题的链接卡片
语法：
addLinkSnippet(link: { link: string, title: string, target?: string }): void;
addLinkSnippet(link: { link: string, title: string, target?: string }, id: string): void;
参数：
link：包含link（URL）、title（显示文本）和target（打开方式）的对象
使用场景：需要展示网页链接、文档地址等可点击内容时使用，卡片渲染逻辑在 src/utils/messages.ts 中实现。
二、界面交互控制
4. toggleWidget：切换聊天窗口显示状态
功能：打开/关闭聊天窗口
语法：
toggleWidget(): void;
使用场景：点击聊天图标时触发，状态管理通过 src/store/reducers/behaviorReducer.ts 实现。
5. setBadgeCount：设置未读消息数
功能：更新聊天图标上的未读消息数量提示
语法：
setBadgeCount(count: number): void;
参数：
count：未读消息数量，设为 0 可隐藏提示
使用场景：新消息到达时调用，提示用户有未读内容。
三、消息状态控制
6. toggleMsgLoader：显示/隐藏加载状态
功能：切换消息加载指示器
语法：
toggleMsgLoader(): void;
使用场景：发送消息后等待响应时显示加载动画，响应到达后隐藏。加载组件定义在 src/components/Widget/components/Conversation/components/Messages/components/Loader/index.tsx。
7. markAllAsRead：标记所有消息为已读
功能：将所有未读消息标记为已读状态
语法：
markAllAsRead(): void;
使用场景：用户查看聊天历史时调用，可清除未读提示。
四、高级操作
8. renderCustomComponent：渲染自定义组件
功能：在聊天窗口中插入自定义 React 组件
语法：
renderCustomComponent(component: ElementType, props: any): void;
renderCustomComponent(component: ElementType, props: any, showAvatar: boolean): void;
renderCustomComponent(component: ElementType, props: any, showAvatar: boolean, id: string): void;
参数：
component：React 组件类型props：组件属性对象showAvatar（可选）：是否显示头像
使用场景：需要展示复杂内容（如表单、图表）时使用，实现逻辑位于 src/utils/messages.ts 中的 createComponentMessage 函数。
9. setQuickButtons：添加快捷回复按钮
功能：在输入框下方显示快捷回复按钮
语法：
setQuickButtons(buttons: Array<{ label: string, value: string | number }>): void;
参数：
buttons：包含label（显示文本）和value（点击值）的按钮数组
使用场景：提供预设回复选项，提升用户输入效率。按钮组件定义在 src/components/Widget/components/Conversation/components/QuickButtons/components/QuickButton/index.tsx。
10. dropMessages：清空聊天记录
功能：删除所有聊天消息
语法：
dropMessages(): void;
使用场景：用户触发"清除聊天"操作时调用，消息清除逻辑通过 src/store/reducers/messagesReducer.ts 实现。
五、安装与使用
要开始使用 react-chat-widget，请先克隆仓库：
git clone https://gitcode.com/gh_mirrors/re/react-chat-widget
cd react-chat-widget
npm install
导入 API 方法到你的 React 组件：
import { addUserMessage, addResponseMessage } from 'react-chat-widget';
// 发送用户消息
addUserMessage('Hello, how can I help?');
// 添加回复消息
addResponseMessage('Hi there! This is an automated response.');
六、总结
react-chat-widget 提供了简洁而强大的 API 接口，涵盖了从消息管理到界面控制的全方位功能。通过本文介绍的 10 个核心方法，开发者可以快速实现聊天窗口的基础交互与高级定制。更多 API 细节可查阅项目类型定义文件 index.d.ts 和状态管理模块 src/store/dispatcher.ts。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
