syncfusion-react-ai-assistview

用途

Syncfusion React AI AssistView 是一个用于构建 AI 驱动对话界面的交互式聊天组件，帮助开发者在 React 应用中实现提示—响应式对话、历史管理、流式输出与多种交互扩展。

主要能力

提示与响应管理：自动收集对话历史，管理提示与响应数据。
实时流式输出：按字符流式呈现 AI 响应，实现实时打字效果。
思维链（Chain of Thoughts）：通过思考块可视化 AI 推理过程，支持多阶段工作流（completed、inprogress、failed）与状态更新。
模板系统：可自定义横幅、提示项、响应项、建议项、页脚、加载动画等 UI 元素。
多视图支持：在对话视图与自定义内容视图之间切换。
语音集成：内置语音转文本（语音输入）与文本转语音（语音输出）。
文件附件：支持上传文件并随提示提交。
可配置工具栏：支持 header、footer、response、prompt 四类工具栏。
遥测追踪：追踪 AI 交互指标（时长、工具调用、token、模型信息等），并在每条响应上提供内置报告提示框。
提及（Mentions）：通过触发字符（如 @、/）引用数据源中的条目，支持过滤、高亮与自定义模板。
AI 服务集成：可直接集成 OpenAI、Azure OpenAI、Gemini、Claude 等服务。
事件驱动架构：提供提示提交、变更与组件生命周期等事件钩子。

其他特性

Markdown 支持：将 AI 响应渲染为格式化 HTML。
会话历史：自动追踪所有提示与响应。
建议系统：展示提示建议引导用户。
头像自定义：自定义用户与 AI 图标/头像。
滚动管理：自动滚动或手动滚动到底部按钮。
清除功能：清除当前提示或整个会话。
重新生成响应：为已有提示请求替代响应，无需重新提交。
响应式设计：适配桌面与移动端布局。

使用方式

核心使用流程如下：

安装 @syncfusion/ej2-react-interactive-chat 包。
引入 CSS 主题样式。
初始化 AIAssistViewComponent 组件。
通过 promptRequest 事件处理用户提交的提示。
在事件处理器中调用 addPromptResponse() 添加响应。

示例代码：

import { AIAssistViewComponent, PromptRequestEventArgs, TelemetrySettingsModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    
    // Enable the built-in telemetry button on every response toolbar
    const telemetrySettings: TelemetrySettingsModel = { enable: true };
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let defaultResponse = 'For real-time AI processing, connect to your preferred service (OpenAI, Azure OpenAI, etc.).';
            assistInstance.current.addPromptResponse(defaultResponse);
        }, 1000);
    };
  
    return (
        <AIAssistViewComponent 
            id="aiAssistView" 
            ref={assistInstance} 
            promptRequest={onPromptRequest}
            prompt={'Welcome! How can I help?'}
            promptSuggestions={['Ask about features', 'Get started guide']}
            telemetrySettings={telemetrySettings}
        />
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

常用配置项

promptRequest：用户提交提示时的事件处理器。
prompt：提示输入框的初始/默认文本。
promptPlaceholder：输入区占位文本。
promptSuggestions：建议提示数组。
prompts：预配置的会话数据。
promptIconCss / responseIconCss：用户与 AI 头像 CSS 类。
showClearButton（默认 false）、showHeader（默认 true）、enableScrollToBottom（默认 true）。
height / width（默认 '100%'）。
cssClass、activeView（默认 0）。
模板属性：bannerTemplate、promptItemTemplate、responseItemTemplate、responseAnimationTemplate、promptSuggestionItemTemplate 等。

常见使用模式

资料列举了以下模式：基础聊天与建议、AI 服务集成、多视图仪表盘、语音聊天、带文件附件的提示、思维链推理、启用遥测的 AI 助手、提及驱动的提示编辑器、自定义响应加载动画。

适用场景

适用于需要在 React 应用中构建 AI 对话界面、并希望集成实时流式输出、思维链展示、语音交互、文件附件、遥测指标或 @ 提及等能力的开发者，包括聊天助手、多视图 AI 面板、语音助手等场景。

限制

资料未提供关于收费、价格、平台支持范围、浏览器兼容性细节或性能限制的明确说明，相关内容暂未提供。部分功能（如多阶段思维链状态、遥测指标过滤器、提及数据源类型等）的具体行为需参考对应的 references 文档。