用途
Syncfusion JavaScript AI AssistView 是一个交互式聊天组件,用于构建 AI 驱动的对话界面。它面向需要在 Web 应用中嵌入 AI 助手、聊天 UI 或会话式 AI 组件的开发者,提供提示与响应的展示、AI 服务对接以及丰富的交互扩展能力。
主要能力
- 提示-响应系统:展示用户提示与 AI 回复的对话内容。
- AI 服务集成:内置对 OpenAI、Azure OpenAI、Google Gemini、Ollama、LiteLLM 代理服务以及 MCP Server(Model Context Protocol)的支持,也支持自定义 AI 服务集成模式。
- 工具栏自定义:支持头部、底部、提示、响应工具栏,可添加自定义项(文本、图标、提示、对齐、模板),并处理工具栏项点击事件。内置发送、附件等工具栏项。
- 文件附件:可上传并附加文件到提示中,支持允许类型、大小限制、最大数量、上传/移除地址配置,以及上传相关事件与自定义附件模板。
- 语音功能:语音转文字输入(基于浏览器语音识别)与文字转语音输出(基于浏览器 SpeechSynthesisUtterance)。
- 自定义视图:支持 Assist 与 Custom 两种视图类型,可配置视图名称、图标、模板与活动视图切换。
- 模板:可自定义横幅、提示项、响应项、建议项与底部输入区模板。
- Markdown 支持:自动将响应中的 Markdown 转换为 HTML。
- 流式响应:支持实时流式输出 AI 回复。
- 思维链(Chain of Thoughts):通过可注入的 AssistThinking 模块,提供可折叠的思考/推理块,支持阶段(stages)状态更新(completed、inprogress、failed)与流式推理进度展示,以及可点击的上下文徽章。
- 生成式 UI:通过 blocks 与 registerToolUI 在 AI 回复中渲染交互式工具与动态 UI(卡片、图表、表单、自定义组件),支持多步生成流程。
- 响应重新生成:通过内置的 e-assist-regenerate 工具栏项请求替代回复,并支持在已保存回复之间自动前后导航(regeneratedResponses)。
- 无障碍:符合 WCAG,支持键盘导航与 ARIA。
使用方式
组件通过 npm 包 @syncfusion/ej2-interactive-chat 引入,需导入相应 CSS 与主题。基本用法是创建 AIAssistView 实例,配置 promptSuggestions 等属性,并在 promptRequest 事件中对接 AI 服务,然后调用 addPromptResponse 添加回复,最后通过 appendTo 渲染到 DOM。
常用方法包括 addPromptResponse()、executePrompt()、scrollToBottom()、refresh()。常用事件包括 created、promptRequest、promptChanged、stopRespondingClick,以及附件相关事件(beforeAttachmentUpload、attachmentUploadSuccess 等)。
配置项涵盖:prompt、promptPlaceholder、promptIconCss、responseIconCss、prompts、promptSuggestions、promptSuggestionsHeader、showClearButton、showHeader、enableScrollToBottom、enableStreaming、cssClass、width、height、enableRtl、locale、persistence 等。
适用场景
适用于需要在 Web 应用中嵌入 AI 助手对话界面、聊天式 AI 交互、带文件附件的 AI 提示、带语音输入输出的对话、需要展示推理过程或生成式交互 UI 的 AI 应用等场景。
限制
资料未提供具体的收费、价格、平台兼容范围、性能指标或效果保证等信息,暂未提供。语音功能依赖浏览器能力,具体兼容性需参考浏览器支持情况。