syncfusion-javascript-inline-ai-assist

Syncfusion JavaScript インライン AI Assist コンポーネント

概要

Inline AI Assist は、UI 要素に合わせて表示される、コンテキストに応じた AI 支援を提供するポップアップベースの AI コンポーネントです。コンパクトなポップアップインターフェイスを通じて、インテリジェントなテキスト処理、コンテンツ変換、AI を活用した提案を、コマンドショートカット、応答アクション、カスタマイズ可能なワークフローとともに提供します。

Inline AI Assist コンポーネントの機能は次のとおりです。

• 要素相対型ポップアップ：relateTo プロパティを使用して、任意の要素を基準に AI Assist ポップアップを配置します
• コマンドアクションポップアップ：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 の設定

インラインアシストの設定

📄 参照： references/inline-assist-configuration.md

• プロンプトテキストの設定（prompt プロパティ）
• プロンプトのプレースホルダー（placeholder プロパティ）
• プロンプトと応答のコレクション（prompts プロパティ）
• ポップアップの寸法（popupWidth、popupHeight）
• z-index の設定（zIndex）
• 対象コンテナー（カスタム DOM への追加に使用する target プロパティ）
• CSS クラスのカスタマイズ（cssClass）
• ストリーミング応答の有効化（enableStreaming）
• 応答の表示モード（responseMode：ポップアップ／インラインモード）
• 永続化と 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：インライン／下部）
• ツールバーアクション用の 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）- カスタムプロンプト入力 UI
• 応答テンプレート（responseTemplate）- カスタム AI 応答のレンダリング
• カスタムフッター／プロンプト領域のデザイン
• テンプレートのコンテキストとデータバインディング
• カスタム UI での 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 インデックス（デフォルト：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 で支援します。

---