syncfusion-react-ai-assistview

Syncfusion React AI AssistView コンポーネント

コンポーネントの概要

Syncfusion React AI AssistView コンポーネントは、AI を活用した対話型インターフェースを構築するために設計された、包括的なインタラクティブチャットコンポーネントです。次の機能を備えています。

主な機能

• プロンプトと応答の管理：データを自動収集し、会話履歴を管理します
• リアルタイムストリーミング：AI の応答を1文字ずつストリーミングし、入力中のようなライブ表示を実現します
• 思考の連鎖：複数段階のワークフローをサポートする思考ブロックを通じて、AI の推論プロセスを可視化します
• テンプレートシステム：すべての UI 要素（バナー、プロンプト項目、応答、候補、フッター）をカスタマイズできます
• 複数ビューのサポート：会話アシストビューとカスタムコンテンツビューを切り替えられます
• 音声連携：音声入力用の音声テキスト変換と、音声出力用のテキスト読み上げを標準搭載しています
• ファイル添付：ファイルをアップロードし、プロンプトに含められます
• 高度なツールバー：ヘッダー、フッター、応答、プロンプト用のツールバーを設定できます
• テレメトリ追跡：AI のやり取りに関する指標（所要時間、ツール呼び出し、トークン、モデル情報）を追跡し、各応答に標準搭載のレポートツールチップを表示します
• メンション：トリガー文字（@、/）を使用して、設定済みのデータソースから項目を参照できます。フィルタリング、ハイライト表示、カスタマイズ可能なテンプレートに対応しています
• AI サービスとの連携：OpenAI、Azure OpenAI、その他の AI サービスと直接連携します
• イベント駆動型アーキテクチャ：プロンプトの送信や変更、コンポーネントのライフサイクルに対応するフックを備えています

主な特徴

• Markdown のサポート：Markdown を解析し、AI の応答を整形済み HTML として表示します
• 会話履歴：すべてのプロンプトと応答を自動的に追跡します
• 候補システム：ユーザーをガイドする便利なプロンプト候補を表示します
• アバターのカスタマイズ：ユーザーと AI のアイコンやアバターをカスタマイズできます
• スクロール管理：自動スクロール、または最下部への手動スクロールボタンを利用できます
• クリア機能：現在のプロンプト、または会話全体をクリアできます
• 応答の再生成：クエリを再送信せずに、既存のプロンプトに対する別の AI 応答を要求できます
• レスポンシブデザイン：レスポンシブレイアウトにより、デスクトップとモバイルの両方で動作します
• テレメトリレポート：各応答のツールバーにテレメトリボタンを標準搭載し、指標の設定、beforeReport によるレポートのカスタマイズ、カスタム属性のサポート、応答ごとのトークンとモデルの追跡に対応しています
• プロンプトエディターでのメンション：トリガー文字の設定、ローカルまたはリモートのデータソース、フィールドマッピング、フィルタータイプ、ハイライト表示、ポップアップサイズ、表示・項目・レコードなしの場合のテンプレート、カスタム処理用の mentionSelect イベントに対応しています

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

はじめに

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

• @syncfusion/ej2-react-interactive-chat パッケージをインストールします
• CSS テーマをインポートします
• 基本的なコンポーネントの初期化を行います
• コンポーネントを DOM にレンダリングします
• 初めて動作する関数コンポーネントの例を確認します

設定の基本

📄 参照先： references/configuration-essentials.md

• 初期プロンプトのテキストとプレースホルダーを設定します
• プロンプト候補と候補のヘッダーを設定します
• ユーザーと AI のアバターアイコンをカスタマイズします
• クリアボタンの表示を制御します
• 最下部へのスクロール機能を有効または無効にします
• refs を使ってコンポーネントのインスタンスを管理します
• コンポーネントのサイズ（高さと幅）を設定します
• スタイル設定用のカスタム CSS クラスを適用します
• ヘッダーの表示を制御します
• グローバル化（ロケール、RTL サポート）を設定します
• セッションをまたいだ状態の永続化を有効にします

会話の管理

📄 参照先： references/conversation-management.md

• 事前設定済みの会話データを使って初期化します
• 文字列形式またはオブジェクト形式で応答を追加します
• 会話履歴にアクセスして管理します
• PromptModel のデータ構造を扱います
• 応答に Markdown をレンダリングします
• 会話を保存して復元します

イベントとインタラクション

📄 参照： references/events-and-interactions.md

• コンポーネントのライフサイクル（created event）を処理します
• プロンプトの送信（promptRequest event）に応答します
• プロンプトテキストの変更（promptChanged event）を追跡します
• 詳細なイベント引数（PromptChangedEventArgs、PromptRequestEventArgs）にアクセスします
• プログラムからプロンプトの送信をキャンセルします
• 長時間の操作で応答停止イベントを処理します
• 候補とツールバー項目を動的に変更します
• イベント駆動型ワークフローを実装します
• イベントハンドラーを通じて AI サービスと連携します

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

📄 参照： references/toolbar-customization.md

• 4 種類のツールバー（header、footer、response、prompt）を設定します
• カスタムツールバー項目を追加します
• ツールバーの配置（Inline または Bottom）を制御します
• ツールバーのアイコンをカスタマイズします
• 項目のクリックイベントを処理します
• すべての ToolbarItemModel プロパティ（align、cssClass、disabled、tabIndex、template、type、visible）を設定します
• カスタムツールバー項目テンプレートを作成します
• 項目の表示状態と有効状態を動的に制御します
• キーボード操作用のタブ順序を設定します
• 添付ボタンの動作を管理します
• 複数の AI 生成応答に対する応答再生成機能を有効にします
• 前へ／次へボタンで再生成された応答を切り替えます

ファイル添付

📄 参照： references/file-attachments.md

• ファイル添付のサポートを有効にします
• アップロードエンドポイント（saveUrl、removeUrl）を設定します
• ファイル形式（allowedFileType）を制限します
• ファイルサイズの上限（maxFileSize）を設定します
• 添付ファイルの数（maximumCount）を制限します
• attachedFiles 配列（FileInfo インターフェース）から添付ファイルにアクセスします
• 添付ファイルのライフサイクルイベント（beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoved、attachmentRemoving）を処理します
• アップロード前にファイルを検証します
• 添付済みファイルを含むプロンプトを初期化します
• サーバー側でのファイル処理を行います
• カスタム添付テンプレート（attachmentTemplate）

カスタムビュー

📄 参照： references/custom-views.md

• 複数のビュー（Assist 型と Custom 型）を作成します
• ビュー名とアイコンを設定します
• ビューごとのテンプレートを定義します
• activeView プロパティを設定して初期ビューを指定します
• プログラムからビューを切り替えます
• セッションをまたいでアクティブなビューを保持します
• ユーザーの役割や状態に基づいて初期ビューを条件付きで設定します
• コンテンツパネルを横並びで表示します
• マルチビューのレイアウトのユースケース

テンプレートシステム

📄 参照： references/templating-system.md

• バナーテンプレート（ウェルカムコンテンツ）をカスタマイズします
• プロンプト項目テンプレート（ユーザーメッセージの表示）を作成します
• 応答項目テンプレート（AI 応答の表示）を設計します
• 応答の生成中に responseAnimationTemplate を使用してカスタムローディングアニメーションを表示します
• 候補項目テンプレートを作成します
• カスタムフッターテンプレートを作成します
• テンプレートのコンテキストデータにアクセスします

AI サービスとの連携

📄 参照： references/ai-integration-setup.md

• Azure OpenAI、OpenAI、Gemini、Claude と連携します
• API 認証情報と認証を設定します
• リアルタイムのプロンプト処理を行います
• ライブ入力エフェクト用に応答をストリーミングします
• marked ライブラリで Markdown の応答を解析します
• エラー処理とレート制限に対応します
• API キーに関するセキュリティ上の考慮事項

生成 UI

📄 参照： references/generative-ui.md

• registerToolUI() メソッドでカスタムツールを登録します
• レンダリング用のツールテンプレートとハンドラーを設定します
• blocks プロパティを通じてインタラクティブな要素（グラフ、カード、カスタムツール）を追加します
• 1 つの AI 応答内に複数のツールをレンダリングします
• 構造化 JSON 生成用に AI のシステムプロンプトを設定します
• 生成 UI ブロックを AI サービスと連携します

音声機能

📄 読む： references/speech-capabilities.md

• 音声入力として音声認識を有効にする
• 音声認識の言語を設定する
• 発話中の中間書き起こしを処理する
• Web Speech API を使用してテキスト読み上げ（音声出力）を実装する
• AI の応答を音声に変換する
• textToSpeechSettings（language、speechPitch、speechRate、volume、voice）で TTS をカスタマイズする
• ボタンのラベルとアイコンをカスタマイズする
• 音声イベント（start、stop、transcript、error）を処理する
• ブラウザーの互換性に関する注意事項

思考の連鎖

📄 読む： references/chain-of-thoughts.md

• 思考ブロックで AI の推論プロセスを可視化する
• ステージとステータス更新を使用して思考ブロックを設定する
• 複数段階の推論ワークフロー（completed、inprogress、failed）を追加する
• 思考ブロックのテンプレートをカスタマイズする
• バッジとツールチップ付きのインラインコンテキスト項目を追加する
• インタラクティブなコンテキストに対する editableContextClicked イベントを処理する
• ステージレベルの項目テンプレートを設定する
• リアルタイムの推論可視化のために思考ブロックをストリーミングする

メソッドと API

📄 読む： references/methods-and-apis.md

• addPromptResponse() メソッドを使用する
• executePrompt() でプロンプトを動的に実行する
• プログラムから最下部までスクロールする
• refs からコンポーネントのインスタンスにアクセスする
• コンポーネントの状態を管理する
• 一般的なパターンと注意点

テレメトリ

📄 読む： references/telemetry.md

• telemetrySettings.enable でテレメトリの追跡を有効にする
• すべての応答ツールバーに組み込みのテレメトリボタンを表示し、ホバー時にレポートのツールチップを表示する
• metrics フィルターを設定して、ツールチップ内の行を制限および並べ替える（status、duration、toolCalls、streamingChunks、model、inputTokens、outputTokens、totalTokens、reasoningTokens、cachedInputTokens）
• beforeReport イベントでレポートを受け取り、内容を変更したり、customAttributes を追加したり、null を返して非表示にしたりする
• TelemetryData（model、input/output tokens、reasoning/cached tokens）を addPromptResponse() に渡して、AI の使用状況の詳細をレポートに統合する
• TelemetryData.customAttributes でドメイン固有のメトリクスを表示する（metrics フィルターに関係なく常に表示されます）
• 自動計測されるメトリクスと外部から指定されるメトリクス、およびその表示の優先順位を理解する
• TelemetrySettingsModel、TelemetryData、TelemetryReport の型を使用する

メンション

📄 読む： references/mentions.md

• mentions プロパティ（メンション設定の配列）を使用して、プロンプトエディターでメンションを有効にする
• @ や / などのトリガー文字（mentionChar）を設定する。同じコンポーネントに複数のメンション設定を追加できます
• ローカル配列（string/object/number/boolean）または Syncfusion DataManager をデータソースとして指定し、ローカルデータやリモートデータを扱う
• fields プロパティでオブジェクト形式のデータソースをマッピングする（デフォルトは { text: 'text', value: 'id' }）
• query プロパティ（@syncfusion/ej2-data の Query）で追加のデータ操作を適用する
• 入力されたテキストの照合方法を filterType（Contains、StartsWith、EndsWith）で選択する
• highlight で一致したテキストを強調表示し、showMentionChar でトリガー文字を表示するかどうかを制御する
• displayTemplate でプロンプト内のメンションをカスタマイズし、itemTemplate で候補項目をカスタマイズする
• popupWidth / popupHeight でポップアップのサイズを指定し、noRecordsTemplate で空の状態をカスタマイズする
• mentionSelect イベントでメンションの選択を処理し、選択された項目のデータにアクセスする

---

クイックスタートの例

import { AIAssistViewComponent, PromptRequestEventArgs, TelemetrySettingsModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    
    // Enable the built-in telemetry button on every response toolbar
    const telemetrySettings: TelemetrySettingsModel = { enable: true };
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let defaultResponse = 'For real-time AI processing, connect to your preferred service (OpenAI, Azure OpenAI, etc.).';
            assistInstance.current.addPromptResponse(defaultResponse);
        }, 1000);
    };
  
    return (
        <AIAssistViewComponent 
            id="aiAssistView" 
            ref={assistInstance} 
            promptRequest={onPromptRequest}
            prompt={'Welcome! How can I help?'}
            promptSuggestions={['Ask about features', 'Get started guide']}
            telemetrySettings={telemetrySettings}
        />
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

---

一般的なパターン

パターン 1：候補を使った基本的なチャット

事前に定義した候補を使って、シンプルな会話インターフェースを作成します。

• プロンプト候補を有効にして、ユーザーの操作をガイドする
• promptRequest イベントを処理し、シンプルな応答を返す
• 会話履歴を自動的に表示する

パターン 2：AI サービスとの連携

実際の AI サービスに接続して、インテリジェントな応答を実現します。

• promptRequest イベントを使ってユーザー入力を取得します
• プロンプトテキストを使って AI API を呼び出します
• ライブ感を演出するため、応答を 1 文字ずつストリーミングします
• Markdown の応答を解析し、書式付きで表示します

パターン 3：マルチビューのダッシュボード

チャットと補足コンテンツを組み合わせます。

• 会話用に Assist ビューを作成します
• 設定やサイドバー用に Custom ビューを追加します
• ユーザーの操作に応じて activeView を切り替えます
• ビュー間でデータを共有します

パターン 4：音声対応チャット

音声でハンズフリーのやり取りを実現します。

• 音声を取得するために speechToTextSettings を有効にします
• 応答音声用に Text-to-Speech を設定します
• 音声コントロールボタンにツールバーを使用します
• ステータスをフィードバックするため、音声イベントを処理します

パターン 5：ファイル添付プロンプト

プロンプトにファイルをアップロードできるようにします。

• enableAttachments プロパティで添付ファイルを有効にします
• 添付ファイルのエンドポイントとファイル制限を設定します
• ファイルデータをプロンプトのコンテキストに含めます
• ファイルをバックエンド API に送信します

パターン 6：思考の連鎖による推論

AI の段階的な推論プロセスを可視化します。

• 思考ブロックをサポートするため、AssistThinking モジュールを挿入します
• 複数の推論ステージを含む思考ブロックを作成します
• リアルタイムの進捗状況には、ステータス更新（completed、inprogress、failed）を使用します
• テキスト応答とともに思考ブロックをストリーミングします
• コンテキスト項目を追加し、参照されたツールやファイルを強調表示します
• ブロックとステージのテンプレートをカスタマイズし、ブランドに合わせたスタイルにします

パターン 7：テレメトリ対応 AI アシスタント

組み込みツールチップに、応答ごとの AI メトリクスを表示します。

• telemetrySettings={{ enable: true }} を設定すると、各応答にテレメトリボタンが表示されます
• telemetrySettings.metrics で取得するメトリクスを制限し、ツールチップでの表示順を固定します
• TelemetryData を addPromptResponse() に渡し、モデル、トークン、推論、キャッシュの使用状況をレポートにまとめます
• beforeReport コールバックを使って customAttributes（region、tenant、sessionId、feature）を追加するか、レポートを抑制するために null を返します
• status と duration は常に保持されます。customAttributes は metrics フィルターに関係なく常に表示されます

パターン 8：メンションで操作するプロンプトコンポーザー

プロンプト内からエージェントやスラッシュコマンドを参照できるようにします。

• それぞれに独自の mentionChar（例：エージェントには @、コマンドには /）を設定した項目の配列を mentions に指定します
• dataSource を使ってローカルまたはリモートのデータを指定し、fields: { text, value } でフィールドをマッピングします
• filterType、highlight、showMentionChar、popupWidth、popupHeight を使って候補ポップアップを調整します
• displayTemplate、itemTemplate、noRecordsTemplate で表示をカスタマイズします
• mentionSelect イベントで選択に応じた処理を行い、ルーティング、分析、または後続の AI コンテキストに活用します

パターン 9：カスタム応答読み込みアニメーション

デフォルトの入力中インジケーターを、ブランドに合わせたアニメーションに置き換えます。

• 応答の生成中に表示するには、関数、文字列、または JSX 要素を responseAnimationTemplate に渡します
• テンプレートはユーザーがプロンプトを送信するとすぐに表示され、addPromptResponse()（またはキャンセル）が完了すると自動的に削除されます
• ブランドに合わせた CSS と組み合わせて、パルスグリッド、スピナー、ステージラベル（例：「ナレッジベースを検索中…」）、またはスケルトンプレースホルダーを表示します

---

主なプロパティと設定

必須プロパティ

• promptRequest：ユーザーがプロンプトを送信したときのイベントハンドラー
• prompt：プロンプト入力の初期テキスト／デフォルトテキスト
• promptPlaceholder：入力エリアのプレースホルダーテキスト
• promptSuggestions：提案するプロンプトの配列
• prompts：事前設定された会話データ

カスタマイズ用プロパティ

• promptIconCss：ユーザーアバターの CSS クラス
• responseIconCss：AI アバターの CSS クラス
• showClearButton：クリアボタンの表示／非表示（デフォルト：false）
• showHeader：コンポーネントヘッダーの表示／非表示（デフォルト：true）
• enableScrollToBottom：最下部へスクロールするボタンの表示（デフォルト：true）
• height：コンポーネントの高さ（string | number、デフォルト：'100%'）
• width：コンポーネントの幅（string | number、デフォルト：'100%'）
• cssClass：スタイル設定用のカスタム CSS クラス
• activeView：現在表示されているビューのインデックス（number、デフォルト：0）

テンプレート用プロパティ

• bannerTemplate：ウェルカムバナーのコンテンツ
• promptItemTemplate：ユーザーメッセージの表示
• responseItemTemplate：AI の応答の表示
• responseAnimationTemplate：応答の生成中に、応答の代わりに表示するカスタムの読み込みインジケーター／アニメーション（応答が追加されるか、リクエストがキャンセルされると自動的に削除されます）
• promptSuggestionItemTemplate：候補のスタイル設定
• footerTemplate：カスタムのプロンプト入力領域

高度なプロパティ

• enableAttachments：ファイルのアップロードを有効化（デフォルト：false）
• attachmentSettings：ファイルアップロードの設定
• speechToTextSettings：音声入力の設定
• textToSpeechSettings：テキスト読み上げの設定
• toolbarSettings：ヘッダーツールバーの設定
• footerToolbarSettings：フッターツールバーの設定
• responseToolbarSettings：応答アクションツールバー
• promptToolbarSettings：プロンプトツールバーの設定
• blockTemplate：思考ブロックやその他の応答ブロック用のカスタムテンプレート
• itemTemplate：思考ブロック内の個別ステージ用のカスタムテンプレート
• locale：ローカライズ／グローバル化の設定（デフォルト：'en-US'）
• enableRtl：右から左への表示を有効化（デフォルト：false）
• enablePersistence：状態の永続化を有効化（デフォルト：false）

テレメトリ用プロパティ

• telemetrySettings：enable フラグ、metrics フィルター、beforeReport コールバックを含むテレメトリ設定オブジェクト（TelemetrySettingsModel）

メンション用プロパティ

• mentions：メンション設定の配列。各エントリで mentionChar、dataSource、fields、query、filterType、highlight、showMentionChar、popupWidth、popupHeight、displayTemplate、itemTemplate、noRecordsTemplate を設定します。

生成 UI 用プロパティ

• blocks：応答内に動的な UI 要素を描画する応答ブロック（TextBlock、ToolBlock、ThinkingBlock）の配列
• registerToolUI()：AI 応答内にインタラクティブなコンポーネント（グラフ、カード、カスタムツール）を描画するためのカスタムツールテンプレートを登録する公開メソッド

イベント用プロパティ

• created：コンポーネントのライフサイクルイベント
• promptRequest：プロンプト送信イベント
• promptChanged：プロンプトテキスト変更イベント
• stopRespondingClick：停止ボタンのクリックイベント
• beforeAttachmentUpload：ファイルアップロード前のイベント
• attachmentUploadSuccess：ファイルアップロード成功イベント
• attachmentUploadFailure：ファイルアップロード失敗イベント
• attachmentRemoved：ファイル削除後のイベント
• attachmentRemoving：ファイル削除前のイベント（args.cancel を使って、削除の確認、記録、キャンセルができます）
• editableContextClicked：思考ブロック内のインラインコンテキスト項目をユーザーがクリックしたときに発生します
• mentionSelect：ユーザーがメンション候補ポップアップから項目を選択したときに発生します（選択された項目のデータは args.itemData で受け取ります）- editableContextClicked：思考ブロック内のインラインコンテキスト項目をユーザーがクリックしたときに発生します

---

一般的なユースケース

AI 連携チャットボット

OpenAI または Azure サービスに接続するカスタマーサービス用チャットボットを作成します：

1. 候補を設定してコンポーネントを準備します
2. promptRequest を処理して AI API に送信します
3. 応答をストリーミングしてリアルタイムにフィードバックします
4. テンプレートを使ってブランドに合わせた外観にします

音声対応アシスタント

ハンズフリーで音声による対話を作成します：

1. speechToTextSettings を有効にします
2. テキスト読み上げツールバーボタンを設定します
3. 音声イベントを処理してステータスを管理します
4. 音声の取り込み中に視覚的なフィードバックを表示します

ファイル分析チャット

ユーザーがファイルをアップロードして内容について話し合えるようにします。

1. 添付ファイルを有効にします
2. ファイルの制限（種類、サイズ、数）を設定します
3. プロンプトとともにファイルをバックエンドに送信します
4. 会話内にファイル情報を表示します

マルチ機能ダッシュボード

チャットを設定やコンテンツと組み合わせます。

1. 複数のビュー（Assist と Custom）を作成します
2. カスタムビューのコンテンツにテンプレートを使用します
3. ビュー切り替えロジックを実装します
4. ビュー間で会話の状態を共有します

思考機能を備えた推論アシスタント

複雑なタスクに対する AI の推論プロセスを紹介します。

1. 思考ブロックをサポートするために AssistThinking モジュールを組み込みます
2. 複数の段階で思考ブロックを設定します
3. ステータスの更新（inprogress → completed）とともにブロックをストリーミングします
4. 段階内にコンテキスト項目（ツール、ファイル、検索結果）を追加します
5. 透明性の高い推論表示のためにブロックテンプレートをカスタマイズします
6. 対話型の探索に対応するため、editableContextClicked を処理します

動的なインタラクティブツールを使ったジェネレーティブ UI

AI の応答内に動的なインタラクティブコンポーネントやカスタムツールを表示します。

1. registerToolUI() を使ってカスタムツール（チャート、カード、フォーム）を登録します
2. レスポンシブな UI 表示のためにツールテンプレートを設定します
3. TextBlock と ToolBlock を組み合わせた blocks 配列を定義します
4. 構造化された JSON を生成するように AI のシステムプロンプトを設定します
5. addPromptResponse() の呼び出しでツールブロックを送信します
6. AI が生成した UI 要素を使って、豊かでインタラクティブな体験を作成します

テレメトリ機能を備えた AI アシスタント

応答ごとの AI インタラクション指標を追跡して表示します。

1. telemetrySettings={{ enable: true }} を設定し、すべての応答ツールバーにテレメトリボタンを表示します
2. telemetrySettings.metrics で取得する指標を制限し、ツールチップ内での表示順序を固定します
3. TelemetryData を addPromptResponse() に渡して、モデル、トークン、推論、キャッシュの使用状況をレポートに統合します
4. beforeReport コールバックを使って customAttributes（region、tenant、sessionId、feature）を追加するか、null を返してレポートを抑制します
5. TelemetryData.customAttributes を介してドメイン固有の指標を表示します（metrics フィルターに関係なく常に表示されます）
6. totalTokens の自動計算、期間の書式設定（小数点以下 2 桁の ms / s）、再生成フローのセマンティクスを再利用します

メンションによるプロンプト作成

プロンプト内からエージェント、スラッシュコマンド、または任意のデータソースを参照します。

1. mentions プロパティをメンション設定の配列として設定し、各設定に独自の mentionChar（@、/ など）を指定します
2. dataSource（ローカル配列または Syncfusion DataManager）を指定し、fields: { text, value } でフィールドをマッピングします
3. filterType（Contains、StartsWith、EndsWith）で一致条件を調整し、視覚的なフィードバックを得るために highlight を有効にします
4. displayTemplate、itemTemplate、noRecordsTemplate、popupWidth、popupHeight で外観をカスタマイズします
5. 挿入されたメンションにトリガー文字を含めるかどうかを showMentionChar で制御します
6. query プロパティ（@syncfusion/ej2-data から）で追加のデータ操作を適用します
7. mentionSelect イベントを処理し、ユーザーの選択に応じて動作します（ルーティング、分析、後続の AI コンテキストなど）

カスタム応答読み込みアニメーション

応答の生成中に、既定のタイピングインジケーターをブランドに合わせたアニメーションに置き換えます。

1. 読み込み UI を返す responseAnimationContent 関数（または文字列／JSX）を定義します
2. <AIAssistViewComponent responseAnimationTemplate={responseAnimationContent} /> に渡します
3. プロンプトの送信後（または executePrompt の実行後）にアニメーションがすぐに表示され、addPromptResponse() が解決すると自動的に削除されます
4. CSS でアニメーションのスタイルを設定します。よくあるパターンには、パルスグリッド、スピナー、ステージラベル、スケルトンプレースホルダーなどがあります

---