syncfusion-react-chat-ui

Syncfusion React 中的 Syncfusion React Chat-UI

组件概览

Chat-UI 组件提供完整的对话界面，支持实时消息、文件附件、用户状态和丰富的自定义选项。本指南将引导你为客户支持、团队协作和交互式应用实现聊天界面。

主要功能

Chat-UI 组件是一个交互式消息界面，具有以下功能：

• 丰富的消息支持： 文本、Markdown、格式化内容
• 用户管理： 多用户对话、状态、头像
• 文件附件： 上传、预览、下载及限制
• 事件系统： 生命周期、交互和附件事件
• 模板： 可自定义消息、建议和页脚 UI
• 国际化： 多语言和 RTL 支持

文档导航

入门

📄 阅读： references/getting-started.md

• 安装软件包
• 初始化基本组件
• CSS 主题和导入

消息管理

📄 阅读： references/message-management.md

• 添加和更新消息
• 自动滚动到最新消息
• 渐进式消息加载（按需加载）
• 消息配置（置顶、回复、转发）
• 消息状态跟踪
• 自定义消息工具栏

用户配置

📄 阅读： references/user-configuration.md

• 设置用户模型
• 自定义头像
• 用户状态
• 自定义 CSS 类

事件和交互

📄 阅读： references/events-and-interactions.md

• 组件生命周期事件
• 消息发送事件
• 用户输入事件（包含完整事件参数）
• 附件上传和点击事件
• 工具栏点击事件

模板系统

📄 阅读： references/templating-system.md

• 空聊天模板
• 自定义消息渲染
• 时间分隔模板
• 输入指示器模板
• 建议模板
• 自定义页脚模板

文件附件

📄 阅读： references/file-attachments.md

• 启用附件支持
• 配置上传端点
• 文件类型和大小限制
• 拖放支持
• 附件模板（预览和页脚）
• 处理附件点击事件

标题自定义

📄 阅读： references/header-customization.md

• 标题可见性和文本
• 标题图标样式
• 工具栏配置
• 工具栏项类型和事件

外观和样式

📄 阅读： references/appearance-styling.md

• 紧凑模式布局，适用于密集对话
• 占位文本配置
• 自定义宽度和高度
• 应用 CSS 类
• 组件级样式设置

时间戳和时间分隔

📄 阅读： references/timestamp-and-timebreaks.md

• 显示/隐藏时间戳
• 自定义时间戳格式
• 时间分隔符
• 按日期整理

输入指示器

📄 阅读： references/typing-indicator.md

• 显示/隐藏输入指示器
• 显示多位用户的输入状态
• 自定义输入指示器模板

提及集成

📄 阅读： references/mention-integration.md

• 配置可提及的用户
• 自定义提及触发字符
• 在消息中预设提及
• 提及选择事件

全球化和 RTL

📄 阅读： references/globalization-rtl.md

• 本地化和语言支持
• 从右向左（RTL）布局
• 输入指示器本地化

快速入门示例

import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const currentUserModel: UserModel = {
        id: "user1",
        user: "Albert"
    };

    const otherUserModel: UserModel = {
        id: "user2",
        user: "Michale Suyama"
    };

    return (
        <ChatUIComponent user={currentUserModel} headerText="Chat Support">
            <MessagesDirective>
                <MessageDirective text="Hello, how can I help?" author={currentUserModel} />
                <MessageDirective text="I need assistance with my order." author={otherUserModel} />
            </MessagesDirective>
        </ChatUIComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

常见模式

创建支持聊天界面

<ChatUIComponent 
  user={currentUser}
  headerText="Support Chat"
  enableAttachments={true}
  showTimeStamp={true}
  showHeader={true}
  messageToolbarSettings={{ items: ['Copy', 'Reply', 'Delete'] }}
>
  <MessagesDirective>
    {/* messages populate here */}
  </MessagesDirective>
</ChatUIComponent>

动态添加消息

const chatRef = useRef<ChatUIComponent>(null);

const addNewMessage = () => {
  chatRef.current.addMessage({
    author: userModel,
    text: "Your message here",
    timeStamp: new Date()
  });
};

配置多个模板

实现 messageTemplate、emptyChatTemplate、timeBreakTemplate 和 suggestionTemplate，实现全面自定义。

主要属性

属性	类型	用途
user	UserModel	当前登录用户
messages	MessageModel[]	初始消息列表
headerText	string	标题
placeholder	string	输入框提示
enableAttachments	boolean	支持文件上传
showTimeStamp	boolean	显示消息时间戳
showHeader	boolean	显示标题区域
showFooter	boolean	显示输入框底部区域
autoScrollToBottom	boolean	自动滚动至最新消息
loadOnDemand	boolean	渐进式加载消息
enableCompactMode	boolean	左对齐紧凑布局
enableRtl	boolean	从右向左布局
locale	string	语言/区域代码

常见用例

用例 1：客户支持聊天

• 多名支持人员处理客户咨询
• 支持上传截图等文件并自动滚动
• 显示输入指示器，表明支持人员正在响应
• 渐进式加载较长的对话历史
• 显示输入指示器，表明支持人员正在响应

用例 2：团队协作

• 使用 @ 提及团队成员
• 在群组对话中使用紧凑模式
• 固定重要讨论
• 转发消息以供参考
• 编辑和删除消息

用例 3：多语言聊天应用

• 支持阿拉伯语/希伯来语等从右向左的文本
• 本地化 UI 字符串
• 支持多种区域设置

---

如需完整示例和高级场景，请查看上方的各个参考文件。