syncfusion-angular-inline-ai-assist

Syncfusion Angular インライン AI アシストコンポーネント

コンポーネントの概要

インライン AI アシストコンポーネントは、ユーザーの生産性を高めるインテリジェントなテキスト処理機能を提供します。高度な自然言語処理を活用し、Angular アプリケーション内で AI を活用したテキスト候補の提示、コンテンツの生成、編集機能を直接利用できます。

主な機能：

• 応答モード - サイズを設定でき、ポップアップ（フローティング）またはインライン（その場）の応答表示に対応
• コマンドシステム - アイコン、グループ化、カスタムコマンド項目に対応した、事前定義済みの AI 操作
• 応答アクション - 承認／拒否のワークフローに対応するカスタム応答ツールバー項目
• テンプレートシステム - カスタムレイアウト用の柔軟なエディターおよび応答テンプレート
• イベントとインタラクション - ライフサイクル（作成、開く、閉じる）とユーザー操作に対応する包括的なイベント
• 音声テキスト変換 - Web Speech API を利用したマイクボタンを内蔵。言語、途中結果、ボタン／ツールチップの設定と、4 つのライフサイクルイベント（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 を使用した音声認識言語の設定（en-US、es-ES、fr-FR などの BCP-47 コード）
• 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. リアルタイムの文字起こし UI：allowInterimResults: true と transcriptChanged イベントを組み合わせると、最終的な文字起こし結果がプロンプトエディターに確定される前に、途中までの文字起こし結果をリアルタイムに表示できます