syncfusion-react-chat-ui

用途

Syncfusion React Chat UI 是一个交互式消息界面组件，用于在 Syncfusion React（包名 @syncfusion/ej2-react-interactive-chat）中构建会话式聊天界面。该技能用于创建和自定义消息界面，包括聊天设置、消息渲染、文件附件、用户状态与界面模板等，可应用于客户支持、团队协作和交互式应用程序。

主要能力

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

使用方式（文档导航主题）

快速入门：包安装、组件基本初始化、CSS 主题与导入。
消息管理：添加与更新消息、自动滚动到最新消息、按需渐进加载消息、消息配置（置顶、回复、转发）、消息状态跟踪、消息工具栏自定义。
用户配置：用户模型设置、头像自定义、用户在线状态、CSS 类自定义。
事件与交互：组件生命周期事件、消息发送事件、用户输入事件（含完整事件参数）、附件上传与点击事件、工具栏点击事件。
模板系统：空聊天模板、消息自定义渲染、时间分隔模板、输入指示器模板、建议模板、页脚模板自定义。
文件附件：启用附件支持、配置上传端点、文件类型与大小限制、拖放支持、附件模板（预览与页脚）、处理附件点击事件。
头部自定义：头部可见性与文本、头部图标样式、工具栏配置、工具栏项类型与事件。
外观与样式：紧凑模式布局、占位符文本配置、宽高自定义、CSS 类应用、组件级样式。
时间戳与时间分隔：显示/隐藏时间戳、时间戳格式自定义、时间分隔符、按日期组织。
输入指示器：显示/隐藏输入指示器、多用户输入显示、输入指示器模板自定义。
提及集成：配置可提及用户、自定义提及触发字符、消息中预定义提及、提及选择事件。
全球化与 RTL：本地化与语言支持、从右到左（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'));

主要属性

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）：语言/文化代码。

常见模式

支持聊天界面：设置 user、headerText、enableAttachments、showTimeStamp、showHeader 以及 messageToolbarSettings（如 ['Copy', 'Reply', 'Delete']），并在 MessagesDirective 中填充消息。
动态添加消息：通过 ref 调用 chatRef.current.addMessage({ author, text, timeStamp })。
配置多个模板：实现 messageTemplate、emptyChatTemplate、timeBreakTemplate 和 suggestionTemplate 以实现完整自定义。

适用场景（资料列出的用例）

客户支持聊天：多个支持人员处理客户咨询、截图文件附件与自动滚动、输入指示器、长会话历史的渐进加载。
团队协作：使用 @ 提及成员、群组会话的紧凑模式、置顶重要讨论、转发消息、消息编辑与删除。
多语言聊天应用：面向阿拉伯语/希伯来语的 RTL 支持、本地化 UI 字符串、多文化支持。

限制

资料未提供该组件的收费、价格、平台兼容性、性能指标或与第三方服务的集成限制；这些信息暂未提供。具体实现细节需参考各主题对应的参考文档。