syncfusion-vue-ai-assistview

Syncfusion Vue AI AssistView 组件

AI AssistView 组件为在 Vue 中构建 AI 驱动的应用提供了现代化的对话界面。用户可以通过简洁的聊天式界面提交提示词并接收 AI 响应，同时支持 Markdown 渲染、自定义建议以及与 AI 服务无缝集成。

组件概览

AI AssistView 组件提供：

• 提示词输入区域，支持自定义占位文本和初始文本
• 对话历史记录，自动滚动到最新消息
• 建议标签，引导用户进行交互
• 用户和 AI 响应的自定义头像
• Markdown 渲染，用于格式化 AI 响应
• 事件系统，用于处理提示词和响应
• 模板支持，用于自定义横幅和布局设计
• 遥测跟踪，用于记录 AI 交互指标（时长、令牌数、工具调用次数、模型信息）
• 提示词编辑器中的提及功能，用于引用已配置项（Agent、命令等）
• 主题集成，支持 Syncfusion 的 Material、Bootstrap 和 Tailwind 主题

导航指南

请选择与您的任务相符的参考资料：

入门指南

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-vue-interactive-chat
• 使用 Vue-CLI 设置 Vue 2 项目
• 注册组件
• 导入 CSS 主题
• 运行您的第一个 AI AssistView 应用

配置提示词和响应

📄 阅读： references/prompt-configuration.md

• 使用 prompt 属性设置初始提示词文本
• 使用 promptPlaceholder 自定义占位文本
• 使用 prompts 集合管理对话历史记录
• 存储用户查询和 AI 响应
• 清除对话历史记录

添加建议和引导

📄 阅读： references/prompt-suggestions.md

• 使用 promptSuggestions 配置建议标签
• 使用 promptSuggestionsHeader 自定义建议标题
• 根据上下文动态更新建议
• 创建特定任务的建议流程
• 通过智能建议改善用户体验

自定义外观

📄 阅读： references/customizing-appearance.md

• 使用 promptIconCss 自定义用户头像图标
• 使用 responseIconCss 更改 AI 响应头像
• 使用 showClearButton 显示或隐藏清除按钮
• 使用主题设置组件样式（material3、bootstrap、tailwind）
• 应用自定义 CSS 类

处理事件

📄 阅读： references/events.md

• 全部 9 个组件事件（created、promptRequest、promptChanged、beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoving、attachmentRemoved、attachmentClick、mentionSelect）
• 使用 addPromptResponse 异步处理提示词
• 实现自定义事件处理程序
• 管理事件参数和属性
• AI 服务调用的 Async/await 模式
• 在事件回调中进行错误处理

使用模板

📄 阅读： references/templates.md

• 创建自定义横幅模板
• 使用模板语法
• 自定义模板上下文和变量
• 使用 CSS 设置模板内容样式
• 根据状态动态渲染模板
• 模板最佳实践和模式

模板与自定义

📄 阅读： references/templates-and-customization.md

• 使用 bannerTemplate 自定义横幅模板
• 使用 footerTemplate 自定义页脚模板
• 使用 promptItemTemplate 自定义提示词项
• 使用 promptSuggestionItemTemplate 设置提示词建议项的样式
• 使用 responseItemTemplate 自定义响应项
• 使用 responseAnimationTemplate 自定义响应加载器
• 使用 promptToolbarSettings 配置提示词工具栏
• 使用 responseToolbarSettings 配置响应工具栏
• 使用 views 属性设置多个视图
• 高级模板模式与最佳实践

思维链与推理区块

📄 阅读： references/chain-of-thoughts.md

• 使用 AssistThinking 模块启用思考区块
• 使用思考区块可视化 AI 推理过程
• 配置带状态指示器的阶段（completed、inprogress、failed）
• 添加带可编辑徽章的内联上下文项
• 使用模板自定义思考区块
• 配置时间线阶段项模板
• 实时流式传输推理区块

生成式 UI 与动态组件

📄 阅读： references/generative-ui.md

• 使用 registerToolUI 方法注册自定义工具
• 在 AI 响应中创建交互式 UI 组件
• 配置工具模板和处理函数
• 通过 addPromptResponse 将工具区块添加到响应中
• 集成动态仪表、卡片和自定义工具
• 配置 AI 服务以生成结构化 JSON 响应
• 工具属性与组件交互模式

Markdown 与富内容渲染

📄 阅读： references/markdown-and-responses.md

• 在 AI 响应中渲染 Markdown
• 支持的 Markdown 语法（粗体、斜体、标题、列表、代码块）
• 流式传输 Markdown 内容
• HTML 响应渲染
• 提升可读性的格式设置技巧
• 边缘情况与故障排除

高级功能与 AI 集成

📄 阅读： references/advanced-features.md

• 使用 enableScrollToBottom 启用滚动到底部指示器
• 使用 toolbarSettings 配置工具栏
• 高级样式设置技巧
• RTL（从右到左）支持
• 性能优化
• 处理较长的对话

连接到 AI 服务

📄 阅读： references/ai-integration.md

• 与 OpenAI、Gemini、Claude 或其他 AI API 集成
• 安全管理 API 凭据
• 实时响应与模拟响应模式
• 以编程方式添加响应
• 错误处理与重试逻辑
• 速率限制与超时管理

组件方法

📄 阅读： references/methods.md

• addPromptResponse() - 为提示词添加 AI 响应
• executePrompt() - 以编程方式触发提示词
• scrollToBottom() - 滚动到最新消息
• 方法签名与参数
• 使用 isFinalUpdate 流式传输响应
• 最佳实践与常见模式

语音转文本集成

📄 阅读： references/speech-to-text.md

• 使用 speechToTextSettings 启用语音输入
• 配置麦克风按钮和工具提示
• 语言支持与临时结果
• 语音识别事件（onStart、onStop、transcriptChanged、onError）
• 浏览器兼容性与权限
• 实时转录文本显示

文本转语音

📄 阅读： references/text-to-speech.md

• 使用 e-assist-audio 工具栏项启用音频播放
• 使用 Web Speech API 内置文本转语音功能
• 使用 textToSpeechSettings 自定义语音（语言、音调、速率、音量）
• 配置语音选择与语言支持
• 浏览器兼容性与语音可用性
• 处理音频播放控件与状态反馈

文件附件

📄 阅读： references/attachments.md

• 使用 enableAttachments 属性启用文件上传
• 配置 attachmentSettings（saveUrl、removeUrl、文件限制）
• 文件验证（allowedFileTypes、maxFileSize、maximumCount）
• 附件事件（beforeUpload、uploadSuccess、uploadFailure、removing、removed、click）- 在提示词中使用附加文件
• 自定义附件模板（attachmentTemplate）
• 上传安全与最佳实践

多视图导航

📄 阅读： references/views-and-navigation.md

• 使用 views 属性配置多个视图
• 使用 activeView 属性切换活动视图
• AssistViewModel 结构与属性
• 自定义视图模板
• 动态视图管理
• 视图类型：Assist 或 Custom

工具栏配置

📄 阅读： references/toolbar-configuration.md

• 使用 promptToolbarSettings 配置提示词工具栏
• 使用 responseToolbarSettings 配置响应工具栏
• 使用 footerToolbarSettings 配置页脚工具栏
• ToolbarItemModel 属性（text、icon、align、tooltip 等）
• 工具栏位置（Bottom、Inline）
• 使用 align（Left / Center / Right）设置工具栏项目对齐方式
• 常见工具栏操作与模式

流式响应

📄 阅读： references/streaming-responses.md

• 使用 enableStreaming 属性启用流式传输
• 实现逐字符或按块流式传输
• 渐进式响应渲染
• 与 OpenAI 及其他 API 集成
• 流错误处理
• 用户控制流式传输速度

遥测与 AI 指标

📄 阅读： references/telemetry.md

• 使用 telemetrySettings.enable 启用遥测
• 使用 telemetrySettings.metrics 配置捕获的指标
• 使用 telemetrySettings.beforeReport 拦截报告
• 通过 addPromptResponse(response, isFinal, telemetryData) 传递模型/令牌数据
• 通过 customAttributes 提供自定义键值对
• 遥测按钮行为、时长格式化和重新生成流程

提示词编辑器中的提及

📄 阅读： references/mentions.md

• 配置 mentions 属性（触发字符、数据源、字段、查询、筛选器、模板、弹出窗口大小）
• 使用 mentionSelect 事件执行自定义操作
• 使用 displayTemplate / itemTemplate / noRecordsTemplate 自定义渲染
• 切换 showMentionChar，使用 @ 风格或 / 风格的命令提及

标题、区域设置与尺寸

📄 阅读： references/header-locale-sizing.md

• 使用 showHeader 属性控制标题栏显示
• 使用 locale 属性进行国际化（支持 13 种以上语言）
• 使用 height 和 width 属性设置响应式尺寸
• 使用 enablePersistence 持久化状态
• 响应式布局模式
• 全屏和对话框实现

快速入门示例

下面是一个使用 Composition API 的最小配置：

<template>
  <div id="container" style="height: 500px; width: 700px;">
    <ejs-aiassistview
      id="aiAssistView"
      ref="aiassist"
      prompt="How can I help you today?"
      :prompt-suggestions="suggestions"
      :prompt-request="onPromptRequest"
    />
  </div>
</template>

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

const aiassist = ref(null);

const suggestions = [
  "What is AI?",
  "How do I get started?",
  "Tell me a joke"
];

const onPromptRequest = (args) => {
  setTimeout(() => {
    const response = `You asked: "${args.prompt}". 
    To connect real AI, use the OpenAI API or similar service with your API key.`;
    aiassist.value.addPromptResponse(response);
  }, 1000);
};
</script>

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

常见模式

模式 1：基础 AI 聊天机器人

使用 promptRequest 事件处理用户输入并调用 AI API：

const onPromptRequest = async (args) => {
  try {
    const response = await fetch('https://api.openai.com/v1/completions', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${apiKey}` },
      body: JSON.stringify({ prompt: args.prompt, max_tokens: 150 })
    });
    const data = await response.json();
    aiassist.value.addPromptResponse(data.choices[0].text);
  } catch (error) {
    aiassist.value.addPromptResponse('Error: Could not process request');
  }
};

模式 2：预配置建议

创建特定领域的建议流程来引导用户：

const suggestions = [
  "Show me productivity tips",
  "How do I code in Vue?",
  "Best practices for debugging"
];

模式 3：对话历史

访问并管理对话历史：

// Get all prompts and responses
const history = aiassist.value.ej2Instances.prompts;

// Clear conversation
aiassist.value.ej2Instances.prompts = [];