syncfusion-react-inline-ai-assist

Syncfusion React Syncfusion React Inline AI Assist コンポーネント

コンポーネントの概要

Inline AI Assist コンポーネントは、React アプリケーションにインテリジェントなテキスト処理機能を提供します。AI を活用した提案、コンテンツ生成、複数の AI サービス連携に対応した対話型のプロンプトと応答のワークフローを実現します。

主な機能

• 複数の AI サービスとの連携：OpenAI、Google Gemini、Lite-LLM、Ollama に接続し、柔軟な AI バックエンドを選択できます
• リアルタイムの応答ストリーミング：enableStreaming を有効にすると、コンテンツ生成中に応答が段階的に更新されます
• コマンドと応答のアクション：事前定義したコマンドを設定して AI タスクをすばやく実行し、カスタム応答アクションを指定できます
• インラインツールバー：アイコン、ボタン、区切り線を含むカスタムツールバー項目を追加して、ユーザー操作を拡張できます
• インラインモードとポップアップモード：AI の応答を既存のコンテンツ内、またはフローティングポップアップウィンドウに表示できます
• 柔軟なテンプレートのカスタマイズ：文字列、関数、JSX テンプレートを使用して、プロンプト入力と応答表示をカスタマイズできます
• 組み込みの音声テキスト変換：speechToTextSettings を使用して Web Speech API のマイクボタンを有効にできます。言語、中間結果、カスタムラベル／アイコン、ツールチップ、ライフサイクルイベントを設定できます
• 国際化（i18n）と RTL：複数の言語と右から左へのテキスト方向に対応しています
• イベント処理：created、promptRequest、open、close などのライフサイクルイベントにより、細かく制御できます
• パブリックメソッド：addResponse()、executePrompt()、showPopup() などを使用して、プログラムから操作できます
• プロンプト履歴：永続的な履歴管理により、プロンプトと応答の会話を追跡できます
• アクセシビリティとテーマ：Material、Bootstrap、Fluent、Tailwind CSS のテーマに対応しています

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• npm によるインストール
• CSS テーマのインポート（Material、Bootstrap、Fluent、Tailwind）
• コンポーネントのレンダリング
• cssClass プロパティによるカスタムスタイル設定
• 最初のサンプルの実行

テンプレートのカスタマイズ

📄 参照先： references/template-customization.md

• editorTemplate プロパティ：プロンプト入力領域をカスタマイズします
• responseTemplate プロパティ：応答表示をカスタマイズします
• 文字列テンプレート、関数テンプレート、JSX.Element テンプレート
• リッチテキストエディターとの連携
• カスタム音声入力との連携（editorTemplate 内）
• コードの構文強調表示
• Markdown のレンダリング

音声テキスト変換

📄 参照先： references/speech-to-text.md

• speechToTextSettings.enable を使用して組み込みの音声テキスト変換を有効にします
• lang プロパティ（en-US、es-ES、fr-FR など）で認識言語を設定します
• buttonSettings（content、stopContent、iconCss、stopIconCss）でマイクボタンをカスタマイズします
• allowInterimResults: true を設定して部分的な文字起こし結果をリアルタイムでストリーミングします
• tooltipSettings（content、stopContent）で待機中／録音中のツールチップをカスタマイズします
• onStart、onStop、transcriptChanged、onError を使用して認識のライフサイクルを処理します
• SpeechToTextSettingsModel と Web Speech API を使用して、クロスブラウザーの音声入力を実現します
• 録音状態、ライブ文字起こし、エラーを表示する、アクセシブルなステータスパネルを作成します

国際化（i18n）と RTL

📄 参照先： references/internationalization.md

• locale プロパティ：言語と地域に応じた書式を設定します
• enableRtl プロパティ：右から左へのテキスト方向を有効にします
• 利用可能なロケールコードと設定方法
• アラビア語、ヘブライ語、ペルシア語への対応
• 多言語アプリケーション
• ブラウザーの言語検出
• カスタムローカライズ文字列

位置とターゲットの指定

📄 参照: references/positioning-and-targeting.md

• relateTo プロパティ：DOM 要素を基準とした位置を指定します
• target プロパティ：コンポーネントを追加する場所を指定します
• responseMode プロパティ：インライン表示とポップアップ表示を切り替えます
• 実践的な位置指定のシナリオ

コマンド設定

📄 参照: references/command-settings.md

• クイックアクション用のコマンド項目を設定します
• コマンドのプロパティ：id、label、iconCss、disabled、prompt、tooltip
• groupBy プロパティでコマンドをグループ化します
• itemSelect イベントを処理します
• ポップアップのサイズを設定します

応答設定

📄 参照: references/response-settings.md

• 組み込みの応答項目（accept、reject）
• カスタム応答アクションの追加
• 応答項目のプロパティと設定
• groupBy で応答項目をグループ化します
• 応答の itemSelect イベントを処理します

インラインツールバーのカスタマイズ

📄 参照: references/inline-toolbar.md

• ツールバー項目（ボタン、区切り線、入力欄）を設定します
• 組み込み項目とカスタム項目
• 項目のプロパティ：text、iconCss、type、visible、disabled、align
• tabIndex による Tab キーでの移動
• カスタム項目テンプレート
• ツールバーの位置：インラインまたは下部
• イベント引数一式を使った itemClick イベントの処理

イベント

📄 参照: references/events.md

• created イベント：コンポーネントのレンダリング完了
• promptRequest イベント：ユーザーがプロンプトを送信
• open イベント：ポップアップを開いたとき
• close イベント：ポップアップを閉じたとき
• イベントハンドラーのパターンと例

メソッド

📄 参照: references/methods.md

• addResponse(response)：AI の応答をコンポーネントに追加します
• executePrompt(prompt)：プロンプトを動的に実行します
• showPopup(coordinates)：ポップアップを開きます
• hidePopup()：ポップアップを閉じます
• showCommandPopup()：コマンドアクションを表示します
• hideCommandPopup()：コマンドアクションを非表示にします

AI サービスとの連携

📄 参照: references/ai-integrations.md

• enableStreaming プロパティ：リアルタイムで応答をストリーミングします
• ストリーミングを使った OpenAI API との連携
• ストリーミングを使った Google Gemini AI との連携
• Lite-LLM サービスとの連携
• ストリーミングを使った Ollama のローカル LLM との連携
• API 認証情報の設定
• プロンプトの処理と応答のストリーミング
• パフォーマンスの最適化とエラー処理

クイックスタート

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import React from 'react';

function App() {
    const assistRef = React.useRef(null);

    const handlePromptRequest = () => {
        // Simulate AI response
        setTimeout(() => {
            const response = 'Your AI-generated response here';
            assistRef.current?.addResponse(response);
        }, 1000);
    };

    const handleShowPopup = () => {
        assistRef.current?.showPopup();
    };

    return (
        <div>
            <button onClick={handleShowPopup} className="e-btn e-primary">
                Ask AI
            </button>
            <InlineAIAssistComponent
                id="inlineAssist"
                ref={assistRef}
                relateTo="button"
                promptRequest={handlePromptRequest}
                popupWidth="500px"
            />
        </div>
    );
}

export default App;

よく使われるパターン

パターン 1：AI を活用したテキスト編集

コンポーネントを contentEditable div と組み合わせて、編集中に AI による提案を利用できるようにします。

const handleResponseItemSelect = (args) => {
    if (args.command.label === 'Accept') {
        const lastResponse = assistRef.current.prompts?.[assistRef.current.prompts.length - 1]?.response;
        if (lastResponse && editableRef.current) {
            editableRef.current.innerHTML = lastResponse;
        }
    }
};

<InlineAIAssistComponent
    responseSettings={{
        itemSelect: handleResponseItemSelect
    }}
/>

パターン 2：コマンドベースのアクション

よく使う AI タスク用の定義済みコマンドを設定します。

const commandSettings = {
    commands: [
        { id: 'summarize', label: 'Summarize', iconCss: 'e-icons e-compress', prompt: 'Summarize this text' },
        { id: 'expand', label: 'Expand', iconCss: 'e-icons e-expand', prompt: 'Expand this text' },
        { id: 'fix', label: 'Fix Grammar', iconCss: 'e-icons e-check-box', prompt: 'Fix grammar and spelling' }
    ]
};

<InlineAIAssistComponent commandSettings={commandSettings} />

パターン 3：カスタムツールバーアクション

カスタムのツールバー項目を追加して、コンポーネントのメソッドを呼び出します。

const handleToolbarItemClick = (args) => {
    if (args.item.id === 'customAction') {
        assistRef.current?.executePrompt('User-defined prompt');
    }
};

const inlineToolbarSettings = {
    items: [
        { id: 'customAction', text: 'Custom', iconCss: 'e-icons e-settings' }
    ],
    itemClick: handleToolbarItemClick
};

パターン 4：応答の表示モード

インライン編集とポップアップ応答を切り替えます。

// Inline mode: Response appears inline
<InlineAIAssistComponent responseMode="Inline" />

// Popup mode: Response in floating popup
<InlineAIAssistComponent responseMode="Popup" popupWidth="400px" />

パターン 5：ライフサイクル管理

イベントを使ってコンポーネントの状態を調整します。

const handleCreated = () => {
    console.log('Component initialized');
};

const handlePromptRequest = (args) => {
    console.log('Prompt submitted:', args.prompt);
};

<InlineAIAssistComponent
    created={handleCreated}
    promptRequest={handlePromptRequest}
    open={() => console.log('Popup opened')}
    close={() => console.log('Popup closed')}
/>

パターン 6：音声操作のインラインアシスタント

組み込みの Web Speech API マイクボタンを有効にして、ユーザーがプロンプトを音声入力できるようにします。

const 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'
    },
    tooltipSettings: {
        content: 'Click to start recording',
        stopContent: 'Click to stop recording'
    }
};

<InlineAIAssistComponent speechToTextSettings={speechToTextSettings} />

• 認識の開始時に onStart が、終了時に onStop が呼び出されます
• transcriptChanged は中間および最終の文字起こし結果をステータスパネルに逐次送信します
• onError はブラウザー、ネットワーク、マイクのエラーをユーザーに通知します
• 認識されたプロンプトは標準の promptRequest イベントに渡されるため、既存の AI サービスハンドラーは変更せずに引き続き動作します

主要な設定プロパティ

プロパティ	型	デフォルト	用途
editorTemplate	string | function | JSX.Element	''	カスタムのプロンプト入力テンプレート
responseTemplate	string | function | JSX.Element	''	カスタムの応答表示テンプレート
enableStreaming	boolean	false	リアルタイムの応答ストリーミングを有効にします
locale	string	'en-US'	言語と地域に応じた書式設定
enableRtl	boolean	false	右から左へのテキスト表示を有効にします
enablePersistence	boolean	false	再読み込み後もコンポーネントの状態を保持します
cssClass	string	''	スタイル設定用のカスタム CSS クラス
relateTo	string | HTMLElement	-	要素を基準にコンポーネントを配置します
target	string | HTMLElement	'body'	追加先を指定します
responseMode	string	'Popup'	'Inline' または 'Popup'
popupWidth	string | number	'400px'	ポップアップの幅（CSS 値）
popupHeight	string | number	'auto'	ポップアップの高さ
zIndex	number	1000	ポップアップの z-index
placeholder	string	'Ask or generate AI content..'	プロンプト用テキストエリアのプレースホルダー
prompt	string	''	デフォルトのプロンプトテキスト
prompts	array	[]	プロンプトと応答のコレクション
commandSettings	CommandSettingsModel	null	コマンド設定
responseSettings	ResponseSettingsModel	null	応答アクションの設定
inlineToolbarSettings	InlineToolbarSettingsModel	null	ツールバーのカスタマイズ
speechToTextSettings	SpeechToTextSettingsModel	null	組み込みの Web Speech API マイクボタン（enable、lang、allowInterimResults、buttonSettings、tooltipSettings、onStart、onStop、transcriptChanged、onError）

完全な例や高度なシナリオについては、上記の各リファレンスファイルをご覧ください。