syncfusion-vue-chat-ui

Syncfusion Vue 聊天 UI 组件

Syncfusion Vue 聊天 UI 组件提供了现代化、功能丰富的界面，可用于构建对话应用。它支持实时消息、用户头像、输入指示器、文件附件、消息回复、提及、时间戳和机器人集成。

组件概览

Vue 聊天 UI 组件（ejs-chatui）提供：

• 消息管理：添加、更新和显示包含丰富元数据（作者、时间戳、状态）的消息
• 用户系统：定义当前用户和其他参与者，并配置头像、姓名和状态指示器
• 交互功能：消息回复、置顶、转发、工具栏操作和 @提及
• 文件附件：上传、预览和显示文件，并支持拖放
• 模板：自定义消息、建议、空状态、输入指示器、附件和时间分隔符
• 事件：处理消息发送、用户输入、附件上传、提及选择和工具栏点击
• 无障碍功能：内置 WCAG 合规支持、键盘导航和 RTL 支持
• 机器人集成：连接 Microsoft Bot Framework 和 Dialogflow

包：@syncfusion/ej2-vue-interactive-chat
Vue 支持：Vue 3 依赖项：Base、Inputs、Navigations、Buttons、Popups、Dropdowns、Splitbuttons

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和包设置（@syncfusion/ej2-vue-interactive-chat）
• 基本聊天 UI 实现
• CSS 导入和 Material3 主题配置
• 组件注册和首次渲染
• 使用 <e-messages> 和 <e-message> 指令定义消息
• 设置当前用户

消息配置

📄 阅读： references/messages.md

• 消息模型结构（文本、作者、时间戳、ID）
• 使用 <e-message> 选择器添加消息
• 消息属性：isPinned、isForwarded、replyTo
• 使用图标和工具提示显示消息状态
• 消息中的附件
• 在消息文本中提及用户
• 用于跟踪和更新的消息 ID

用户与头像

📄 阅读： references/users.md

• 用户模型配置（id、user、avatarUrl）
• 当前用户与其他参与者
• 头像显示（URL 或姓名首字母回退显示）
• 自定义头像背景颜色
• 使用 cssClass 设置状态图标
• 正在输入的用户列表和指示器
• 自定义用户 CSS 类

外观与样式

📄 阅读： references/appearance.md

• 组件尺寸（高度、宽度）
• 使用 cssClass 属性自定义 CSS 类
• RTL（从右到左）支持
• 紧凑模式布局（所有消息均左对齐）
• 无消息时显示空聊天模板
• 页面重新加载后保留设置
• 使用 Material3、Bootstrap、Fabric 设置主题

页眉与页脚配置

📄 阅读： references/header-footer.md

• 配置页眉文本和图标
• 页眉工具栏设置和项目
• 工具栏项目配置（文本、图标、工具提示、对齐方式）
• 使用 showHeader 属性显示或隐藏页眉
• 使用 showFooter 属性显示或隐藏页脚
• 自定义页脚模板
• 输入文本区域的占位文本
• 工具栏项目点击事件

时间戳与时间分隔符

📄 阅读： references/timestamps-timebreaks.md

• 使用 showTimeStamp 显示或隐藏时间戳
• 自定义时间戳格式
• 按日期分组的时间分隔符
• 自定义时间分隔符模板
• 本地化和特定区域设置格式
• 按消息设置时间戳格式

高级功能

📄 阅读： references/advanced-features.md

• 使用触发字符的 @提及 功能
• 提及用户列表和建议弹窗
• 文件附件配置（saveUrl、允许的类型、最大大小）
• 拖放附件
• 消息工具栏（回复、置顶、删除、复制、转发）
• 消息工具栏自定义和事件
• 按需加载消息历史记录
• 新消息到达时自动滚动到底部
• 在输入文本区域上方显示建议

模板

📄 阅读： references/templates.md

• 用于自定义消息渲染的消息模板
• 用于建议项的建议模板
• 用于输入状态指示器的输入用户模板
• 无消息状态下的空聊天模板
• 用于自定义页脚的页脚模板
• 用于在页脚中显示文件的附件模板
• 用于附件预览的预览模板
• 用于日期分隔符的时间分隔模板
• 模板上下文数据（消息、索引、建议）

事件和方法

📄 阅读： references/events-methods.md

• created 事件（组件初始化）
• messageSend 事件（发送消息前）
• userTyping 事件（输入状态指示器）
• mentionSelect 事件（选择提及项）
• 附件事件（beforeUpload、success、failure、removed）
• 工具栏项点击事件（页眉和消息工具栏）
• addMessage() 方法，用于追加消息
• updateMessage() 方法，用于修改消息
• scrollToBottom() 方法，用于导航
• scrollToMessage() 方法，用于滚动到指定消息
• focus() 方法，用于聚焦输入文本区域

Bot 集成

📄 阅读： references/bot-integrations.md

• 与 Microsoft Bot Framework 集成
• 与 Google Dialogflow 集成
• Bot 消息处理和响应
• 连接到 Bot 服务
• Bot 对话流程示例
• 处理由 Bot 发起的消息

快速入门

基本聊天 UI

<template>
  <div id="container" style="height: 400px; width: 500px;">
    <ejs-chatui :user="currentUser">
      <e-messages>
        <e-message 
          :author="currentUser" 
          text="Hello! How can I help you today?"
        ></e-message>
        <e-message 
          :author="supportUser" 
          text="Hi! I need assistance with my order."
        ></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script setup>
import { 
  ChatUIComponent as EjsChatui, 
  MessagesDirective as EMessages, 
  MessageDirective as EMessage 
} from "@syncfusion/ej2-vue-interactive-chat";

const currentUser = {
  id: "user1",
  user: "Albert",
  avatarUrl: "./albert.png"
};

const supportUser = {
  id: "user2",
  user: "Support Agent",
  avatarUrl: "./support.png"
};
</script>

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

常见模式

动态消息处理

<script setup>
import { ref } from 'vue';
import { ChatUIComponent as EjsChatui } from "@syncfusion/ej2-vue-interactive-chat";

const chatRef = ref(null);

// Add message dynamically
const sendMessage = (text) => {
  chatRef.value.addMessage({
    text: text,
    author: currentUser,
    timestamp: new Date()
  });
};

// Handle message send event
const onMessageSend = (args) => {
  console.log('Message sent:', args.message);
  // Send to backend or bot service
};
</script>

<template>
  <ejs-chatui 
    ref="chatRef"
    :user="currentUser"
    :messageSend="onMessageSend"
  ></ejs-chatui>
</template>

消息回复和线程

<e-message 
  :author="currentUser" 
  text="I've completed the review."
  :replyTo="{
    messageID: 'msg-123',
    text: 'Can you review the document?',
    user: otherUser,
    timestamp: new Date('2026-03-27T10:00:00')
  }"
></e-message>

文件附件

<ejs-chatui 
  :user="currentUser"
  :enableAttachments="true"
  :attachmentSettings="{
    saveUrl: 'https://api.example.com/upload',
    allowedFileTypes: '.jpg,.png,.pdf,.docx',
    maxFileSize: 5242880,
    maximumCount: 3
  }"
  :beforeAttachmentUpload="handleBeforeUpload"
  :attachmentUploadSuccess="handleUploadSuccess"
></ejs-chatui>

@提及

<ejs-chatui 
  :user="currentUser"
  mentionTriggerChar="@"
  :mentionUsers="[
    { id: 'u1', user: 'Alice' },
    { id: 'u2', user: 'Bob' },
    { id: 'u3', user: 'Charlie' }
  ]"
  :mentionSelect="handleMentionSelect"
></ejs-chatui>