syncfusion-angular-inline-ai-assist

Syncfusion Angular Inline AI Assist 组件

组件概述

Inline AI Assist 组件提供智能文本处理功能，帮助提升用户效率。它借助先进的自然语言处理技术，在 Angular 应用中直接提供 AI 驱动的文本建议、内容生成和编辑功能。

主要功能：

• 响应模式 — 以弹出式（浮动）或内联（原位）方式显示响应，并可配置尺寸
• 命令系统 — 预定义 AI 操作，支持图标、分组和自定义命令项
• 响应操作 — 自定义响应工具栏项，用于接受/拒绝工作流
• 模板系统 — 灵活的编辑器和响应模板，可自定义布局
• 事件与交互 — 提供完善的生命周期事件（创建、打开、关闭）和用户交互事件
• 语音转文本 — 内置麦克风按钮，由 Web Speech API 驱动，可配置语言、临时结果、按钮/工具提示设置，以及四个生命周期事件（onStart、onStop、transcriptChanged、onError）
• 工具栏配置 — 内联工具栏支持自定义项、位置和对齐方式
• 方法 — 以编程方式添加提示词、更新响应、打开/关闭弹出窗口并控制行为
• 全球化 — 支持多语言、RTL 和基于区域设置的格式
• 可自定义 UI — 支持 CSS 类、z-index 控制、弹出窗口尺寸和主题集成

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• Angular 环境配置
• 基本组件实现
• CSS 导入和主题设置
• 使用 relateTo 和 target 属性进行初始配置

核心配置

📄 阅读： references/core-configuration.md

• 提示词文本和占位符配置
• 提示词/响应集合管理
• 响应显示模式（弹出式与内联）
• 弹出窗口尺寸（宽度、高度、z-index）
• CSS 自定义和样式设置

命令和响应

📄 阅读： references/commands-and-responses.md

• 命令设置和命令项
• 添加带分组的预设 AI 操作
• 响应设置和响应项
• 内置接受/拒绝操作
• 自定义响应工具栏项和事件处理

模板和工具栏

📄 阅读： references/templates-and-toolbars.md

• 编辑器模板自定义
• 响应模板布局
• 内联工具栏配置和项
• 工具栏位置、对齐方式和样式
• 工具栏中的 Tab 键导航

事件和方法

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

• 生命周期事件（创建、打开、关闭）
• 提示词请求事件处理
• 组件方法（addResponse、executePrompt、showPopup、hidePopup）
• 事件参数和回调模式

语音转文本

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

• 使用 speechToTextSettings.enable 启用内置麦克风按钮
• 使用 lang 配置识别语言（BCP-47 代码，如 en-US、es-ES、fr-FR）
• 通过 buttonSettings（content、stopContent、iconCss、stopIconCss）自定义麦克风按钮
• 使用 allowInterimResults 显示实时转录
• 使用 tooltipSettings 自定义麦克风工具提示
• 使用 onStart、onStop、transcriptChanged 和 onError 响应识别生命周期
• Web Speech API 浏览器兼容性说明

本地化和样式

📄 阅读： references/localization-and-styling.md

• 本地化和多语言支持
• 从右向左（RTL）文本方向
• 自定义 CSS 类样式
• 主题集成
• 文本内容自定义

快速入门示例

import { Component, ViewChild } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';

@Component({
    imports: [InlineAIAssistModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div id="container" style="height: 350px; width: 650px;">
            <button id="summarizeBtn" class="e-btn e-primary" (click)="onClick()">Content Summarize</button>
            <div id="editableText" contenteditable="true">
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity.</p>
            </div>
            <ejs-inlineaiassist id="inlineAssist" #inlineAssistComponent
                [relateTo]="'#summarizeBtn'"
                [responseSettings]="responseSetting"
                popupWidth="500px"
                (promptRequest)="onPromptRequest($event)">
            </ejs-inlineaiassist>
        </div>
    `,
    styles: [`#editableText { width: 100%; min-height: 120px; padding: 12px; border: 1px solid; }`]
})
export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement;
            if (editable && this.inlineAssistComponent.prompts.length > 0) {
                const lastResponse = this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1].response;
                editable.innerHTML = '<p>' + lastResponse + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect: this.itemSelect
    }

    onClick(): void {
        this.inlineAssistComponent.showPopup();
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
            let response = 'Connect this component to OpenAI or Azure AI services for real-time prompt processing.';
            this.inlineAssistComponent.addResponse(response);
        }, 1000);
    };
}

常见模式

模式 1：通过选择项处理响应

// Handle accept/reject responses
public itemSelect = (args: ResponseItemSelectEventArgs) => {
    if (args.command.label === 'Accept') {
        // Apply the AI response to your content
        const content = this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1].response;
        this.applyResponse(content);
        this.inlineAssistComponent.hidePopup();
    } else if (args.command.label === 'Discard') {
        this.inlineAssistComponent.hidePopup();
    }
}

模式 2：执行预定义提示词

// Execute a specific prompt with custom command
public executeCommand(prompt: string) => {
    this.inlineAssistComponent.showPopup();
    this.inlineAssistComponent.executePrompt(prompt);
}

// Example usage: Summarize, Translate, or Make Professional
this.executeCommand('Summarize the content');

模式 3：通过命令组进行组织

// Organize commands into logical groups
public commandSetting: CommandSettingsModel = {
    commands: [
        { label: 'Summarize', prompt: 'Summarize...', groupBy: 'Improve content' },
        { label: 'Shorten', prompt: 'Shorten...', groupBy: 'Improve content' },
        { label: 'Translate', prompt: 'Translate...', groupBy: 'Edit content' },
    ]
}

模式 4：内联模式与弹出模式

// Toggle between response display modes
public responseMode: string = 'Popup'; // or 'Inline'

// Use Inline for seamless in-place editing
// Use Popup for review-based workflows

模式 5：通过语音驱动提示词并进行语音转文本

1. 设置 speechToTextSettings = { enable: true }，启用麦克风按钮
2. 将 lang 设置为面向目标用户群的 BCP-47 代码（'en-US'、'es-ES'、'fr-FR'）
3. 设置 allowInterimResults: true，在用户说话时流式传输部分转录文本
4. 通过 buttonSettings（闲置/录音状态下的文本和图标）自定义按钮，并通过 tooltipSettings 自定义工具提示
5. 使用 onStart / onStop 控制录音指示器，并使用 transcriptChanged 显示实时转录文本
6. 始终处理 onError，以应对权限被拒、没有麦克风和浏览器不受支持的情况

关键属性与配置

属性	用途	示例
relateTo	相对于 DOM 元素定位	[relateTo]="'#button'"
target	在 DOM 中的追加位置	[target]="'#container'"
responseMode	显示模式（弹出/内联）	[responseMode]="'Popup'"
popupWidth / popupHeight	弹出窗口尺寸	popupWidth="500px"
placeholder	提示词文本区域占位符	[placeholder]="'Ask AI...'"
cssClass	自定义 CSS 样式	[cssClass]="'custom'"
enableStreaming	实时流式传输响应	[enableStreaming]="true"
enablePersistence	重新加载后保留状态	[enablePersistence]="true"
commandSettings	预定义 AI 命令	[commandSettings]="cmdSettings"
responseSettings	响应操作项	[responseSettings]="respSettings"
inlineToolbarSettings	内联工具栏项	[inlineToolbarSettings]="toolbar"
editorTemplate	自定义提示词输入模板	[editorTemplate]="template"
responseTemplate	自定义响应显示模板	[responseTemplate]="template"
speechToTextSettings	内置语音转文本（Web Speech API）	[speechToTextSettings]="sttSettings"
locale	语言/本地化设置	[locale]="'de'"
enableRtl	从右向左的文本方向	[enableRtl]="true"

常见用例

1. 文本摘要：创建一个按钮，通过 AI 触发内容摘要
2. 语法与文风：通过语法和文风建议帮助用户改进写作
3. 内容翻译：添加多种语言的快速翻译选项
4. 代码生成：根据描述协助用户生成代码片段
5. 撰写电子邮件：通过 AI 建议和改写功能提升电子邮件写作体验
6. 文档优化：通过 AI 编辑提高文档质量
7. 无障碍支持：为有无障碍需求的用户提供 AI 辅助
8. 多语言支持：通过本地化 AI 辅助支持面向全球用户的应用
9. 语音驱动提示词：添加内置的 speechToTextSettings 麦克风按钮，让用户通过 Web Speech API 口述提示词，并可配置语言、按钮/工具提示以及 onStart / onStop / transcriptChanged / onError 事件
10. 实时转录界面：将 allowInterimResults: true 与 transcriptChanged 事件结合，在最终转录文本提交到提示词编辑器之前，实时显示临时转录文本