在 React 中构建 AI 对话界面时，用…

适用于使用 Syncfusion React AI AssistView 组件搭建 AI 对话式交互界面的场景。

适用场景

解决思路

1. 安装 @syncfusion/ej2-react-interactive-chat 包，引入 CSS 主题，创建基础组件并渲染到 DOM，参考 getting-started.md 完成首个可运行示例。
2. 在 configuration-essentials.md 中配置初始 prompt 文本与占位符、promptSuggestions 与建议标题、用户与 AI 头像图标、清除按钮可见性、滚动到底部开关，并通过 refs 管理组件实例；同时设置组件高度与宽度、应用自定义 CSS 类、控制 header 可见性、配置全球化（locale、RTL）以及启用跨会话状态持久化。
3. 在 conversation-management.md 中初始化预置会话数据、以字符串或对象格式添加响应、访问与管理会话历史、使用 PromptModel 数据结构、在响应中渲染 markdown，并持久化与恢复会话。
4. 在 events-and-interactions.md 中处理组件生命周期（created）、promptRequest、promptChanged 事件，访问 PromptChangedEventArgs 与 PromptRequestEventArgs 详细参数，以编程方式取消 prompt 提交，处理长时间操作的停止响应事件，动态修改建议与工具栏项，并通过事件处理器集成 AI 服务。
5. 在 toolbar-customization.md 中配置 header、footer、response、prompt 四类工具栏，添加自定义工具栏项，控制 Inline 与 Bottom 定位，自定义图标，处理点击事件，配置 ToolbarItemModel 的全部属性（align、cssClass、disabled、tabIndex、template、type、visible），创建自定义工具栏项模板，动态控制可见性与启用状态，设置键盘导航的 tab 顺序，管理附件按钮行为，并启用多响应重新生成及上一/下一响应导航。
6. 在 file-attachments.md 中启用附件支持，配置上传端点（saveUrl、removeUrl），限制文件类型（allowedFileType）、大小（maxFileSize）与数量（maximumCount），通过 attachedFiles 数组（FileInfo 接口）访问附件，处理附件生命周期事件（beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoved），上传前校验文件，初始化时预附加文件，处理服务端文件逻辑，并使用 attachmentTemplate 自定义附件模板。
7. 在 custom-views.md 中创建 Assist 与 Custom 多视图，设置视图名称与图标，定义各视图模板，配置 activeView 设置初始视图，以编程方式切换视图，跨会话持久化当前视图，根据用户角色或状态条件化设置初始视图，并展示并排内容面板。
8. 在 templating-system.md 中自定义 banner 模板（欢迎内容）、promptItemTemplate（用户消息）、responseItemTemplate（AI 响应）、suggestionItemTemplate 与 footerTemplate，并访问模板上下文数据。
9. 在 ai-integration-setup.md 中集成 Azure OpenAI、OpenAI、Gemini、Claude，配置 API 凭证与认证，处理实时 prompt 处理，流式返回响应以实现实时打字效果，使用 marked 库解析 markdown 响应，处理错误与限流，并注意 API key 安全。
10. 在 generative-ui.md 中使用 registerToolUI() 方法注册自定义工具，配置工具模板与渲染处理器，通过 blocks 属性添加图表、卡片等交互元素，在单个 AI 响应中渲染多个工具，配置 AI 系统提示以生成结构化 JSON，并将生成式 UI blocks 与 AI 服务集成。
11. 在 speech-capabilities.md 中启用语音转文本（语音输入），配置识别语言，处理说话时的临时转录，通过 Web Speech API 实现文本转语音（语音输出），将 AI 响应转换为语音音频，使用 textToSpeechSettings（language、speechPitch、speechRate、volume、voice）自定义 TTS，自定义按钮标签与图标，处理语音事件（start、stop、transcript、error），并注意浏览器兼容性。
12. 在 chain-of-thoughts.md 中使用思考块可视化 AI 推理过程，配置带阶段与状态更新的思考块，添加多阶段推理工作流（completed、inprogress、failed），自定义思考块模板，添加带徽章与提示的 inline 上下文项，处理 editableContextClicked 事件实现交互式上下文，配置阶段级 item 模板，并流式输出思考块以实时展示推理。
13. 在 methods-and-apis.md 中使用 addPromptResponse() 方法、通过 executePrompt() 动态执行 prompt、以编程方式滚动到底部、通过 refs 访问组件实例、管理组件状态，并参考常见模式与注意事项。
14. 按常见模式组合使用：基础聊天加建议、AI 服务集成、多视图仪表盘、语音聊天、带附件 prompt、思维链推理。
15. 使用关键 props：promptRequest、prompt、promptPlaceholder、promptSuggestions、prompts 作为基础；promptIconCss、responseIconCss、showClearButton、showHeader、enableScrollToBottom、height、width、cssClass、activeView 用于定制；bannerTemplate、promptItemTemplate、responseItemTemplate、promptSuggestionItemTemplate、footerTemplate 用于模板；enableAttachments、attachmentSettings、speechToTextSettings、textToSpeechSettings、toolbarSettings、footerToolbarSettings、responseToolbarSettings、promptToolbarSettings、blockTemplate、itemTemplate、locale、enableRtl、enablePersistence 用于高级配置；blocks 与 registerToolUI() 用于生成式 UI；created、promptRequest、promptChanged、stopRespondingClick、beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoved、editableContextClicked 用于事件。

适用边界 · 注意事项

• 项目未使用 Syncfusion React 组件或不愿引入 @syncfusion/ej2-react-interactive-chat 依赖时。
• 需要非 React 框架（如 Vue、Angular、原生 JS）实现对话界面时。
• 无法接受 Syncfusion 许可或商业授权约束时。