syncfusion-angular-chat-ui

用途

Syncfusion Angular Chat UI 组件用于在 Angular 应用中实现完整的对话界面，适合需要消息收发、实时会话、文件附件、机器人或 AI 服务集成的场景。

主要能力

消息管理：配置文本、富模板、媒体、回复、置顶和转发。
用户系统：定义当前用户、在线状态、头像及自定义样式和提及。
外观控制：自定义宽度、高度、占位符、CSS 类、紧凑模式和快捷建议。
页眉与页脚：控制可见性、标题、图标、自定义模板，以及带操作项的页眉工具栏。
事件与交互：处理消息发送、输入中提示、工具栏操作（复制、回复、置顶、删除）。
模板：自定义空聊天、消息、时间分隔、输入中提示和建议项。
文件附件：支持上传，可限制类型和大小、拖放、自定义路径，以及附件点击事件。
方法：以编程方式添加或更新消息、滚动到底部、滚动到指定消息、聚焦输入框。
全球化：支持多语言（i18n）、RTL 文本方向和基于区域设置的格式化。
高级功能：按需加载、状态持久化、提及、消息状态、时间分隔和机器人集成。

使用方式

安装：

npm install @syncfusion/ej2-angular-interactive-chat

在 src/styles.css 中导入 CSS：

@import "../node_modules/@syncfusion/ej2-material3-theme/styles/chat-ui/index.css";

最小示例：

import { Component } from '@angular/core';
import { ChatUIModule } from '@syncfusion/ej2-angular-interactive-chat';
import { UserModel } from '@syncfusion/ej2-interactive-chat';

@Component({
  imports: [ChatUIModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="chatui" ejs-chatui 
         [user]="currentUserModel" 
         headerText="TeamSync Professionals">
      <e-messages>
        <e-message text="Hi, how are you?" [author]="currentUserModel"></e-message>
        <e-message text="Great! How can I help?" [author]="michaleUserModel"></e-message>
      </e-messages>
    </div>
  `,
  styles: [`
    #chatui {
      height: 500px;
      width: 100%;
    }
  `]
})
export class AppComponent {
  public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
  public michaleUserModel: UserModel = { user: 'Michale', id: 'user2' };
}

核心组件与属性：

<ejs-chatui>：主聊天容器。
[user]：当前用户模型（UserModel）。
[messages]：消息集合。
headerText：页眉标题。
[headerToolbar]：带自定义操作的页眉工具栏。
[height] / [width]：尺寸。
[enableAttachments]：文件上传支持。
[enablePersistence]：跨会话状态持久化。
[enableRtl]：从右到左布局。
[attachmentSettings]：文件上传配置。
[messageToolbarSettings]：消息级工具栏。
[suggestions]：快捷回复建议。
[suggestionTemplate]：自定义建议渲染。

消息元素 <e-message> 属性：

text：消息内容。
[author]：发送消息的用户。
[timeStamp]：消息时间戳。
[timeStampFormat]：自定义时间戳格式。
[isPinned]：置顶重要性。
[replyTo]：线程上下文（MessageReplyModel）。
[isForwarded]：转发指示。
[attachedFile]：预填充文件附件（FileInfo）。
[status]：消息投递状态（MessageStatusModel）。
[mentionUsers]：消息中提及的用户。

用户模型属性：

id：唯一用户标识符。
user：显示名称。
avatarUrl：头像图片。
avatarBgColor：头像背景色。
statusIconCss：在线状态图标。

适用场景

客服聊天：配置支持团队名称页眉，启用文件附件用于截图或文档，使用消息状态跟踪投递，集成 Dialogflow 提供 AI 回复。
团队消息应用：多用户及在线状态，使用 @提及提醒队友，置顶重要决定或公告，使用时间戳格式支持时区。
AI 助手：集成 Microsoft Bot Framework 或 Dialogflow，机器人回复时显示输入中提示，用 suggestions 数组提供快捷回复，处理机器人特定消息格式。
加载性能：对 1000+ 消息会话启用按需加载，实现平滑滚动，使用紧凑模式减少垂直空间，懒加载附件和媒体。
国际化（i18n）：提供本地化输入中提示（“X is typing”），为阿拉伯语、希伯来语、波斯语用户启用 RTL，按区域设置自定义日期时间格式，翻译按钮标签和占位符。

限制

资料未提供收费、价格、平台兼容性、性能指标或效果保证等信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制