syncfusion-angular-inline-ai-assist

Syncfusion Angular Inline AI Assist 组件为 Angular 应用提供智能文本处理能力，可在应用内直接进行 AI 驱动的文本建议、内容生成与编辑。

用途

该组件适用于在 Angular 界面中嵌入 AI 文本处理，例如文本摘要、语法与风格改进、内容翻译、代码片段生成、邮件撰写、文档编辑等场景。它通过自然语言处理增强用户生产力，并可与外部 AI 服务配合使用。

主要能力

• 响应模式：支持 Popup（浮动）与 Inline（就地）两种响应显示模式，并可配置尺寸。
• 命令系统：提供带图标、分组和自定义命令项的预定义 AI 操作。
• 响应操作：可自定义响应工具栏项，用于接受/拒绝等工作流。
• 模板系统：支持编辑器模板与响应模板，实现自定义布局。
• 事件与交互：提供生命周期事件（created、open、close）及用户交互事件。
• 语音转文字：内置麦克风按钮，基于 Web Speech API，可配置语言、临时结果、按钮/工具提示设置，并支持 onStart、onStop、transcriptChanged、onError 四个生命周期事件。
• 工具栏配置：内联工具栏支持自定义项、定位与对齐。
• 方法：可通过编程方式添加提示、更新响应、打开/关闭弹窗并控制行为。
• 全球化：支持多语言、RTL（从右到左）文本方向及基于区域设置的格式化。
• 可定制 UI：支持 CSS 类、z-index 控制、弹窗尺寸与主题集成。

使用方式

需安装并配置 Angular 环境与相关包，导入 CSS 与主题，并在组件中使用 relateTo 与 target 等属性进行初始配置。核心配置包括提示文本与占位符、提示/响应集合管理、响应显示模式、弹窗尺寸与 z-index、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);
    };
}

语音转文字：通过 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 的浏览器兼容性，并处理权限拒绝、无麦克风及不支持浏览器等错误。

适用场景

文本摘要、语法与风格改进、内容翻译、代码生成、邮件撰写、文档增强、无障碍支持、多语言支持、语音驱动提示以及结合 allowInterimResults 与 transcriptChanged 的实时转写界面。

限制

资料中的默认 promptRequest 示例返回占位文本，实际 AI 处理需自行连接 OpenAI 或 Azure AI 等服务；语音转文字依赖 Web Speech API，存在浏览器兼容性限制。其余收费、价格、平台等信息暂未提供。