syncfusion-javascript-inline-ai-assist

Syncfusion JavaScript Inline AI Assist 组件

概述

Inline AI Assist 是一款基于弹出窗口的 AI 组件，旨在提供上下文相关的 AI 助手功能，并相对于 UI 元素显示。它通过紧凑的弹出界面提供智能文本处理、内容转换和 AI 驱动的建议，并包含命令快捷方式、响应操作和可自定义的工作流。

Inline AI Assist 组件提供：

• 相对于元素的弹出窗口：使用 relateTo 属性，相对于任意元素定位 AI 助手弹出窗口
• 命令操作弹出窗口：AI 命令快捷方式（总结、缩短、翻译等）
• 响应操作：用于 AI 生成响应的接受/拒绝工作流
• 内联工具栏：包含发送按钮和自定义项的紧凑工具栏
• 提示词管理：提示词文本、占位符和提示词-响应集合
• AI 服务集成：内置支持 OpenAI、Gemini、Ollama、LiteLLM
• 响应流式传输：实时流式传输 AI 输出响应
• 模板：使用自定义提示词输入 UI 自定义编辑器区域
• 方法：显示/隐藏弹出窗口、添加响应、以编程方式执行提示词
• 事件：created、open、close、promptRequest，用于生命周期管理
• 语音转文本：通过浏览器的 Web Speech API 内置语音输入，可通过 speechToTextSettings（enable、lang、allowInterimResults、buttonSettings、tooltipSettings）进行配置，并提供生命周期事件（onStart、onStop、transcriptChanged、onError）；识别出的语音会传入 promptRequest 事件
• 全球化：支持 RTL 和本地化，适用于国际化应用

---

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装软件包和依赖项（@syncfusion/ej2-interactive-chat）
• CSS 导入和主题配置
• 基本的 Inline AI Assist 初始化
• 用于指定元素目标的 relateTo 属性
• 首次渲染和提示词处理
• promptRequest 事件基础知识
• 宽度、高度和 z-index 配置

Inline Assist 配置

📄 阅读： references/inline-assist-configuration.md

• 设置提示词文本（prompt 属性）
• 提示词占位符（placeholder 属性）
• 提示词-响应集合（prompts 属性）
• 弹出窗口尺寸（popupWidth、popupHeight）
• z-index 配置（zIndex）
• 目标容器（用于自定义 DOM 追加的 target 属性）
• CSS 类自定义（cssClass）
• 启用流式响应（enableStreaming）
• 响应显示模式（responseMode：Popup/Inline 模式）
• 启用持久化和 RTL 支持

命令设置（快捷操作）

📄 阅读： references/command-settings.md

• 命令项概述（快捷操作弹出窗口）
• 配置命令项数组（commandSettings.commands）
• 命令属性（id、label、prompt、iconCss、disabled）
• 对命令分组（groupBy）
• 工具提示配置
• 命令弹出窗口尺寸（popupWidth、popupHeight）
• 用于命令操作的 itemSelect 事件

内联工具栏设置

📄 阅读： references/inline-toolbar-settings.md

• 内置工具栏项（发送按钮）
• 自定义工具栏项配置
• 工具栏项属性（id、iconCss、align、template、disabled）
• 工具栏位置（toolbarPosition：Inline/Bottom）
• 用于工具栏操作的 itemClick 事件
• 禁用/隐藏工具栏项

响应设置（接受/拒绝操作）

📄 阅读： references/response-settings.md

• 内置响应项（接受/拒绝）
• 自定义响应操作项
• 响应项属性（id、label、iconCss）
• 用于响应操作的 itemSelect 事件
• 接受/拒绝处理模式
• 自定义响应弹出窗口外观

AI 服务集成

📄 阅读： references/ai-service-integrations.md

• promptRequest 事件详细指南
• OpenAI 和 Azure OpenAI 集成模式
• Google Gemini 集成
• Ollama LLM 本地模型集成
• LiteLLM 代理服务集成
• 响应格式化和错误处理
• 流式与标准响应模式

模板

📄 阅读： references/templates.md

• 编辑器模板（editorTemplate）——自定义提示词输入界面
• 响应模板（responseTemplate）——自定义 AI 响应渲染
• 自定义页脚/提示词区域设计
• 模板上下文和数据绑定
• 使用自定义界面的 executePrompt() 方法
• 响应中的语法高亮和 Markdown 渲染
• 模板渲染模式

方法

📄 阅读： references/methods.md

• addResponse()——向弹出窗口添加 AI 响应
• showPopup()——显示 AI 助手弹出窗口
• hidePopup()——关闭弹出窗口
• showCommandPopup()——以编程方式打开命令弹出窗口
• hideCommandPopup()——关闭命令弹出窗口
• executePrompt()——以编程方式触发提示词
• destroy()——清理组件
• 标准框架方法（appendTo、dataBind、refresh 等）

事件和全球化

📄 阅读： references/events-and-globalization.md

• created 事件——组件初始化完成
• open 事件——弹出窗口已打开
• close 事件——弹出窗口已关闭
• promptRequest 事件——处理 AI 提示词请求
• UI 文本本地化（L10n）
• RTL 支持（enableRtl）
• 区域设置配置

语音转文本

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

• 通过 speechToTextSettings.enable 启用语音输入（使用浏览器的 Web Speech API）
• 使用 speechToTextSettings.lang 配置语音识别语言（例如：en-US、es-ES、fr-FR）
• 使用 speechToTextSettings.buttonSettings（content、stopContent、iconCss、stopIconCss）自定义麦克风按钮
• 使用 speechToTextSettings.allowInterimResults 实时显示临时转录结果
• 使用 speechToTextSettings.tooltipSettings（content、stopContent、position）自定义麦克风按钮的工具提示
• 语音转文本生命周期事件：onStart、onStop、transcriptChanged、onError
• 麦克风权限、浏览器兼容性（Speech Recognition API）和功能检测

---

快速入门示例

基本内嵌式 AI 助手及摘要按钮

import { InlineAIAssist } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize Inline AI Assist
let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#summarizeBtn',
    placeholder: 'Ask AI to help...',
    promptRequest: (args) => {
        // Connect to your AI service
        setTimeout(() => {
            let response = 'AI-generated summary of the content...';
            inlineAssist.addResponse(response);
        }, 1000);
    },
    responseSettings: {
        itemSelect: (args) => {
            if (args.command.label === 'Accept') {
                // Apply the AI response to your content
                document.getElementById('content').innerHTML = args.response;
                inlineAssist.hidePopup();
            } else if (args.command.label === 'Discard') {
                // Reject the response
                inlineAssist.hidePopup();
            }
        }
    }
});

inlineAssist.appendTo('#inlineAssist');

// Show popup on button click
document.getElementById('summarizeBtn').addEventListener('click', () => {
    inlineAssist.showPopup();
});

<button id="summarizeBtn" class="e-btn e-primary">Summarize</button>
<div id="content" contenteditable="true">
    Your content here...
</div>
<div id="inlineAssist"></div>

---

常见模式

模式 1：快速命令操作

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#improveBtn',
    commandSettings: {
        commands: [
            { label: 'Summarize', prompt: 'Summarize this content', iconCss: 'e-icons e-collapse-2' },
            { label: 'Shorten', prompt: 'Make this shorter', iconCss: 'e-icons e-shorten' },
            { label: 'Translate', prompt: 'Translate to Spanish', iconCss: 'e-icons e-translate' },
            { label: 'Make Professional', prompt: 'Rewrite professionally', iconCss: 'e-icons e-elaborate' }
        ]
    },
    promptRequest: (args) => {
        // Handle different commands
        callAIService(args.prompt);
    }
});

模式 2：接受/拒绝工作流

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#editor',
    promptRequest: (args) => {
        // Get AI response
        getAIResponse(args.prompt).then(response => {
            inlineAssist.addResponse(response);
        });
    },
    responseSettings: {
        itemSelect: (args) => {
            if (args.command.label === 'Accept') {
                // Apply changes
                applyChanges(inlineAssist.prompts[inlineAssist.prompts.length - 1].response);
                inlineAssist.hidePopup();
            } else if (args.command.label === 'Discard') {
                // Discard changes
                inlineAssist.hidePopup();
            }
        }
    }
});

模式 3：流式响应

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#generateBtn',
    enableStreaming: true,
    promptRequest: (args) => {
        // Stream response from AI service
        streamAIResponse(args.prompt, (chunk) => {
            inlineAssist.addResponse(chunk);
        });
    }
});

模式 4：自定义编辑器模板

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#customBtn',
    editorTemplate: () => {
        return `
            <div class="custom-editor">
                <textarea id="customPrompt" placeholder="Type your request..."></textarea>
                <button id="sendBtn" class="e-btn">Generate</button>
            </div>
        `;
    }
});

document.addEventListener('click', (e) => {
    if (e.target.id === 'sendBtn') {
        const textarea = document.getElementById('customPrompt');
        inlineAssist.executePrompt(textarea.value);
    }
});

模式 5：使用语音转文本进行语音输入

import { InlineAIAssist, InlinePromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let inlineAIAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#summarizeBtn',
    // Enables voice input through the browser's Web Speech API
    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'
        }
    },
    promptRequest: (args: InlinePromptRequestEventArgs) => {
        // Both typed and voice-recognized input flow through this event
        setTimeout(() => {
            inlineAIAssist.addResponse('For real-time processing, connect the Inline AI Assist component to your preferred AI service.');
        }, 1000);
    }
});

inlineAIAssist.appendTo('#inlineAssist');

const summarizeBtn: HTMLElement = document.querySelector('#summarizeBtn') as HTMLElement;
if (summarizeBtn) {
    summarizeBtn.addEventListener('click', () => {
        inlineAIAssist.dataBind();
        inlineAIAssist.showPopup();
    });
}

---

关键属性

核心配置

• relateTo（string）：用于确定弹出窗口相对位置的元素 CSS 选择器
• placeholder（string）：提示词输入框的占位文本（默认值：'Ask or generate AI content..'）
• prompt（string）：预设提示词文本
• prompts（InlinePromptModel[]）：提示词-响应对集合
• popupWidth（string | number）：弹出窗口宽度（默认值：'400px'）
• popupHeight（string | number）：弹出窗口高度（默认值：'auto'）
• zIndex（number）：弹出窗口定位的 Z-index（默认值：1000）

功能配置

• commandSettings (CommandSettingsModel)：快捷命令操作配置
• inlineToolbarSettings (InlineToolbarSettingsModel)：页脚工具栏配置
• responseSettings (ResponseSettingsModel)：接受／拒绝操作配置
• editorTemplate (string | Function)：自定义编辑器区域模板
• enableStreaming (boolean)：启用流式响应（默认值：false）
• speechToTextSettings (SpeechToTextSettingsModel)：通过浏览器的 Web Speech API 提供内置语音输入；支持 enable、lang、allowInterimResults、buttonSettings、tooltipSettings 和生命周期事件处理程序（onStart、onStop、transcriptChanged、onError）

样式与行为

• cssClass (string)：根元素的自定义 CSS 类
• enableRtl (boolean)：启用从右向左模式
• locale (string)：本地化区域代码（默认值：'en-US'）
• enablePersistence (boolean)：在页面重新加载后保留状态

---

常见用例

用例 1：内容摘要器

在文本内容旁添加“总结”按钮，打开 AI 助手弹出窗口，以便快速总结并通过接受／拒绝工作流进行处理。

用例 2：增强文本编辑器

通过弹出窗口界面，将 AI 驱动的文本优化命令（语法、语气、长度）集成到现有文本编辑器中。

用例 3：翻译工具

提供即时翻译弹出窗口，支持语言选择命令，并可在应用前预览结果。

用例 4：内容生成器

为内容为空的字段生成 AI 内容，并提供适用于不同内容类型（正式、随意、技术）的命令快捷方式。

用例 5：代码助手

添加 AI 辅助功能，用于生成、解释或优化代码，并将弹出窗口定位在代码块旁。

---