syncfusion-react-inline-ai-assist

Syncfusion React Syncfusion React 内联 AI 助手组件

组件概览

内联 AI 助手组件为 React 应用提供智能文本处理功能。它支持 AI 驱动的建议、内容生成，以及交互式提示词-响应工作流，并可集成多种 AI 服务。

主要功能

• 多 AI 服务集成：连接 OpenAI、Google Gemini、Lite-LLM 和 Ollama，灵活选择 AI 后端
• 实时响应流式传输：启用 enableStreaming，在内容生成期间逐步更新响应
• 命令和响应操作：配置预定义命令以快速执行 AI 任务，并设置自定义响应操作
• 内联工具栏：添加带图标、按钮和分隔符的自定义工具栏项，提升用户交互体验
• 内联和弹出窗口模式：将 AI 响应与现有内容一起内联显示，或显示在浮动弹出窗口中
• 灵活的模板自定义：使用字符串、函数或 JSX 模板自定义提示词输入和响应显示
• 内置语音转文本：通过 speechToTextSettings 启用 Web Speech API 麦克风按钮，并配置语言、中间结果、自定义标签/图标、工具提示和生命周期事件
• 国际化（i18n）和 RTL：支持多种语言和从右向左的文本方向
• 事件处理：通过 created、promptRequest、open 和 close 等生命周期事件实现精准控制
• 公共方法：通过 addResponse()、executePrompt()、showPopup() 等方法以编程方式访问
• 提示词历史记录：跟踪提示词-响应对话，并持久化管理历史记录
• 无障碍支持和主题：兼容 Material、Bootstrap、Fluent 和 Tailwind CSS 主题

文档和导航指南

入门指南

📄 阅读： references/getting-started.md

• 通过 npm 安装
• CSS 主题导入（Material、Bootstrap、Fluent、Tailwind）
• 渲染组件
• 使用 cssClass 属性自定义样式
• 运行首个示例

模板自定义

📄 阅读： references/template-customization.md

• editorTemplate 属性：自定义提示词输入区域
• responseTemplate 属性：自定义响应显示
• 字符串模板、函数模板、JSX.Element 模板
• 富文本编辑器集成
• 自定义语音输入集成（在 editorTemplate 中）- 代码语法高亮
• Markdown 渲染

语音转文本

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

• 通过 speechToTextSettings.enable 启用内置语音转文本
• 使用 lang 属性配置识别语言（en-US、es-ES、fr-FR 等）
• 使用 buttonSettings（content、stopContent、iconCss、stopIconCss）自定义麦克风按钮
• 设置 allowInterimResults: true，实时流式传输部分转录内容
• 使用 tooltipSettings（content、stopContent）自定义空闲/录音状态的工具提示
• 通过 onStart、onStop、transcriptChanged 和 onError 处理识别生命周期
• 使用 SpeechToTextSettingsModel 和 Web Speech API 实现跨浏览器语音输入
• 构建无障碍状态面板，显示录音状态、实时转录内容和错误

国际化（i18n）和 RTL

📄 阅读： references/internationalization.md

• locale 属性：设置语言和区域格式
• enableRtl 属性：启用从右向左的文本方向
• 可用的区域设置代码及配置方法
• 支持阿拉伯语、希伯来语、波斯语
• 多语言应用
• 浏览器语言检测
• 自定义本地化字符串

定位和目标

📄 阅读： references/positioning-and-targeting.md

• relateTo 属性：相对于 DOM 元素定位
• target 属性：指定组件的插入位置
• responseMode 属性：内联与弹出显示模式
• 实用定位场景

命令设置

📄 阅读： references/command-settings.md

• 配置用于快速操作的命令项
• 命令属性：id、label、iconCss、disabled、prompt、tooltip
• 使用 groupBy 属性对命令分组
• 处理 itemSelect 事件
• 设置弹出窗口尺寸

响应设置

📄 阅读： references/response-settings.md

• 内置响应项（accept、reject）
• 添加自定义响应操作
• 响应项属性和配置
• 使用 groupBy 对响应项分组
• 处理响应 itemSelect 事件

内联工具栏自定义

📄 阅读： references/inline-toolbar.md

• 配置工具栏项（按钮、分隔符、输入框）
• 内置项和自定义项
• 项属性：text、iconCss、type、visible、disabled、align
• 使用 tabIndex 通过 Tab 键导航
• 自定义项模板
• 工具栏定位：内联或底部
• 使用完整事件参数处理 itemClick 事件

事件

📄 阅读： references/events.md

• created 事件：组件渲染完成
• promptRequest 事件：用户提交提示词
• open 事件：弹出窗口打开
• close 事件：弹出窗口关闭
• 事件处理程序模式和示例

方法

📄 阅读： references/methods.md

• addResponse(response)：向组件添加 AI 响应
• executePrompt(prompt)：动态执行提示词
• showPopup(coordinates)：打开弹出窗口
• hidePopup()：关闭弹出窗口
• showCommandPopup()：显示命令操作
• hideCommandPopup()：隐藏命令操作

AI 服务集成

📄 阅读： references/ai-integrations.md

• enableStreaming 属性：实时响应流式传输
• 集成 OpenAI API 并启用流式传输
• 集成 Google Gemini AI 并启用流式传输
• 集成 Lite-LLM 服务
• 集成 Ollama 本地 LLM 并启用流式传输
• API 凭据设置
• 提示词处理和响应流式传输
• 性能优化和错误处理

快速入门

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import React from 'react';

function App() {
    const assistRef = React.useRef(null);

    const handlePromptRequest = () => {
        // Simulate AI response
        setTimeout(() => {
            const response = 'Your AI-generated response here';
            assistRef.current?.addResponse(response);
        }, 1000);
    };

    const handleShowPopup = () => {
        assistRef.current?.showPopup();
    };

    return (
        <div>
            <button onClick={handleShowPopup} className="e-btn e-primary">
                Ask AI
            </button>
            <InlineAIAssistComponent
                id="inlineAssist"
                ref={assistRef}
                relateTo="button"
                promptRequest={handlePromptRequest}
                popupWidth="500px"
            />
        </div>
    );
}

export default App;

常见模式

模式 1：AI 辅助文本编辑

将组件与 contentEditable div 结合，在编辑时启用 AI 驱动的建议：

const handleResponseItemSelect = (args) => {
    if (args.command.label === 'Accept') {
        const lastResponse = assistRef.current.prompts?.[assistRef.current.prompts.length - 1]?.response;
        if (lastResponse && editableRef.current) {
            editableRef.current.innerHTML = lastResponse;
        }
    }
};

<InlineAIAssistComponent
    responseSettings={{
        itemSelect: handleResponseItemSelect
    }}
/>

模式 2：基于命令的操作

为常见的 AI 任务设置预定义命令：

const commandSettings = {
    commands: [
        { id: 'summarize', label: 'Summarize', iconCss: 'e-icons e-compress', prompt: 'Summarize this text' },
        { id: 'expand', label: 'Expand', iconCss: 'e-icons e-expand', prompt: 'Expand this text' },
        { id: 'fix', label: 'Fix Grammar', iconCss: 'e-icons e-check-box', prompt: 'Fix grammar and spelling' }
    ]
};

<InlineAIAssistComponent commandSettings={commandSettings} />

模式 3：自定义工具栏操作

添加自定义工具栏项以触发组件方法：

const handleToolbarItemClick = (args) => {
    if (args.item.id === 'customAction') {
        assistRef.current?.executePrompt('User-defined prompt');
    }
};

const inlineToolbarSettings = {
    items: [
        { id: 'customAction', text: 'Custom', iconCss: 'e-icons e-settings' }
    ],
    itemClick: handleToolbarItemClick
};

模式 4：响应显示模式

在内联编辑和弹出响应之间切换：

// Inline mode: Response appears inline
<InlineAIAssistComponent responseMode="Inline" />

// Popup mode: Response in floating popup
<InlineAIAssistComponent responseMode="Popup" popupWidth="400px" />

模式 5：生命周期管理

使用事件协调组件状态：

const handleCreated = () => {
    console.log('Component initialized');
};

const handlePromptRequest = (args) => {
    console.log('Prompt submitted:', args.prompt);
};

<InlineAIAssistComponent
    created={handleCreated}
    promptRequest={handlePromptRequest}
    open={() => console.log('Popup opened')}
    close={() => console.log('Popup closed')}
/>

模式 6：语音驱动的内联助手

启用内置的 Web Speech API 麦克风按钮，让用户口述提示词：

const speechToTextSettings = {
    enable: true,
    lang: 'en-US',
    allowInterimResults: true,
    buttonSettings: {
        content: 'Start Recording',
        stopContent: 'Stop Recording',
        iconCss: 'e-icons e-microphone',
        stopIconCss: 'e-icons e-microphone-off'
    },
    tooltipSettings: {
        content: 'Click to start recording',
        stopContent: 'Click to stop recording'
    }
};

<InlineAIAssistComponent speechToTextSettings={speechToTextSettings} />

• 识别开始时触发 onStart，结束时触发 onStop
• transcriptChanged 会将中间识别结果和最终转录内容实时发送到状态面板
• onError 会向用户显示浏览器、网络或麦克风错误
• 识别出的提示词会注入标准的 promptRequest 事件，因此现有的 AI 服务处理程序无需更改即可继续工作

关键配置属性

属性	类型	默认值	用途
editorTemplate	string | function | JSX.Element	''	自定义提示词输入模板
responseTemplate	string | function | JSX.Element	''	自定义响应显示模板
enableStreaming	boolean	false	启用实时响应流式传输
locale	string	'en-US'	语言和区域格式
enableRtl	boolean	false	启用从右到左的文本方向
enablePersistence	boolean	false	在重新加载后保留组件状态
cssClass	string	''	用于设置样式的自定义 CSS 类
relateTo	string | HTMLElement	-	相对于元素定位组件
target	string | HTMLElement	'body'	指定追加目标
responseMode	string	'Popup'	'Inline' 或 'Popup'
popupWidth	string | number	'400px'	弹出窗口宽度（CSS 值）
popupHeight	string | number	'auto'	弹出窗口高度
zIndex	number	1000	弹出窗口的 z-index
placeholder	string	'Ask or generate AI content..'	提示词文本区域占位符
prompt	string	''	默认提示词文本
prompts	array	[]	提示词-响应集合
commandSettings	CommandSettingsModel	null	命令配置
responseSettings	ResponseSettingsModel	null	响应操作配置
inlineToolbarSettings	InlineToolbarSettingsModel	null	工具栏自定义设置
speechToTextSettings	SpeechToTextSettingsModel	null	内置 Web Speech API 麦克风按钮（enable、lang、allowInterimResults、buttonSettings、tooltipSettings、onStart、onStop、transcriptChanged、onError）

如需查看完整示例和高级场景，请参阅上方的各个参考文件。