syncfusion-javascript-ai-assistview

Syncfusion JavaScript AI AssistView コンポーネント

概要

AI AssistView は、プロンプト、応答、候補、カスタムツールバー、ファイル添付、音声機能、AI サービス連携に対応した、AI を活用する会話型インターフェイスを構築するためのインタラクティブなチャットコンポーネントです。

AI AssistView コンポーネントには、次の機能があります。

• プロンプトと応答のシステム：ユーザーのプロンプトと AI の応答を含む会話を表示します
• AI サービス連携：主要な AI プロバイダー（OpenAI、Gemini、Ollama など）を標準でサポートします
• ツールバーのカスタマイズ：カスタム項目を含むヘッダー、フッター、プロンプト、応答のツールバー
• ファイル添付：ファイルをアップロードしてプロンプトに添付します
• 音声機能：音声からテキストへの入力とテキストから音声への出力
• カスタムビュー：テンプレートを使用した複数のビューモード（Assist、Custom）
• テンプレート：バナー、プロンプト項目、応答項目、候補、フッターをカスタマイズします
• Markdown サポート：応答を Markdown から HTML に自動変換します
• ストリーミング応答：AI の出力をリアルタイムでストリーミングします
• 思考の連鎖：AssistThinking モジュールを介した、ステージごとのストリーミング可能なステータス更新を含む、折りたたみ可能な思考・推論ブロック
• 生成 UI：blocks と registerToolUI を介して、AI の応答内にインタラクティブなツールや動的 UI（カード、グラフ、フォーム、カスタムコンポーネント）をレンダリングします
• 応答の再生成：組み込みの e-assist-regenerate ツールバー項目を介して、既存のプロンプトに対する別の AI 応答をリクエストします。保存済みの応答間は自動的に前後へ移動できます（regeneratedResponses）
• テレメトリ：AI インタラクションの指標（status、duration、toolCalls、streamingChunks、model、inputTokens、outputTokens、totalTokens、reasoningTokens、cachedInputTokens、およびカスタム属性）を追跡し、ホバー時にレポートを表示する応答ごとのツールバーボタンをレンダリングするテレメトリ機能を標準搭載しています。telemetrySettings（enable、metrics、beforeReport）で完全に設定できます
• メンション：ローカルまたはリモートのデータソース（DataManager）に基づいて、プロンプトエディターにメンショントリガー（例：@ または /）を挿入します。設定可能なフィールド、query、filterType（Contains／StartsWith／EndsWith）、一致箇所の強調表示、ポップアップのサイズ、カスタム項目・表示・レコードなしのテンプレートに対応します。mentionSelect イベントを介して項目を選択できます
• 応答アニメーション：AI の応答生成中に表示するカスタムローディングインジケーターまたはアニメーションです。responseAnimationTemplate プロパティ（HTML を返す文字列または関数）で設定し、addPromptResponse が呼び出され、promptRequest が返す Promise が解決するまで表示されます
• アクセシビリティ：キーボードナビゲーションと ARIA サポートによる WCAG 準拠

---

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

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールと依存関係（@syncfusion/ej2-interactive-chat）
• CSS のインポートとテーマ設定
• AI AssistView の基本的な初期化
• プロンプトと応答を使った最初のレンダリング
• AI 連携のための promptRequest イベント処理
• 幅、高さ、ロケール、永続化の設定

Assist View の設定

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

• プロンプトテキストとプレースホルダーの設定（prompt、promptPlaceholder）
• プロンプトと応答のアイコンのカスタマイズ（promptIconCss、responseIconCss）
• プロンプトと応答のコレクション（PromptModel[] を含む prompts プロパティ）
• プロンプト候補の追加（promptSuggestions、promptSuggestionsHeader）
• クリアボタンとヘッダーの表示／非表示（showClearButton、showHeader）
• 下部へのスクロール機能の有効化（enableScrollToBottom）
• 組み込みコンバーターによる Markdown 応答のレンダリング
• 応答のストリーミング（enableStreaming）

AI サービスとの連携

📄 参照: references/ai-integrations.md

• API のセットアップを含む OpenAI および Azure OpenAI との連携
• Google Gemini との連携と設定
• Ollama の LLM ローカルモデルとの連携
• LiteLLM プロキシサービスとの連携
• Model Context Protocol 用 MCP サーバーとの連携
• カスタム AI サービスとの連携パターン
• promptRequest イベントのベストプラクティス
• エラー処理とレスポンスのフォーマット

思考の連鎖（思考ブロック）

📄 参照: references/chain-of-thoughts.md

• インジェクション可能な AssistThinking モジュールを使用して推論の可視化を有効にする（AIAssistView.Inject(AssistThinking)）
• レスポンスブロックの種類：blocks 配列内の thinking、text、tool ブロック
• 思考ブロックの設定（blockType、title、content、isActive、collapsed、collapsible、stages）
• Timeline ベースの描画による推論ステージ（ThinkingStage）の追加
• ストリーミング中の推論の進行状況を示すステージステータスインジケーター（completed、inprogress、failed）
• {index} プレースホルダーを使用した、クリック可能なインラインコンテキストバッジ（editableContext、ThinkingContextItem）
• editableContextClicked イベントの処理
• カスタム思考ブロックの描画（blockTemplate）とステージ項目の描画（itemTemplate）

生成 UI

📄 参照: references/generative-ui.md

• registerToolUI({ toolName, template, handler? }) によるカスタムツールの登録
• ツールテンプレート（文字列または関数）とインタラクションハンドラーの設定
• addPromptResponse を介してレスポンスに tool ブロック（blockType: 'tool'、toolName、props）を追加
• 1 つのレスポンス内で text ブロックと tool ブロックを組み合わせる
• 生成 UI 用に構造化された blocks JSON を返すよう、AI サービスのシステムプロンプトを設定する
• 複数ステップの生成フロー：ツールの状態を取得し、executePrompt で後続のレスポンスをトリガーする

ツールバーの設定

📄 参照: references/toolbar-configuration.md

• ヘッダーツールバーの設定（toolbarSettings）
• フッターツールバーの設定（footerToolbarSettings、ツールバーの配置：Inline／Bottom）
• レスポンスツールバー項目（responseToolbarSettings、いいね／よくないね／コピー／更新）
• プロンプトツールバー項目（promptToolbarSettings）
• カスタムツールバー項目（テキスト、アイコン、ツールチップ、配置、テンプレート）
• ツールバー項目のクリックイベント（ToolbarItemClickedEventArgs）
• 組み込みツールバー項目（送信、添付ファイル）
• 組み込みの e-assist-regenerate レスポンスツールバー項目を使用したレスポンスの再生成
• regeneratedResponses（PromptModel）による別のレスポンスの事前読み込みと、自動で表示される前／次のナビゲーション UI

カスタムビュー

📄 参照: references/custom-views.md

• カスタムビューの追加（AssistViewModel[] を指定する views プロパティ）
• ビューの種類：Assist と Custom（AssistViewType 列挙型）
• ビュー名とアイコンの設定（name、iconCss）
• ビューテンプレート（カスタムコンテンツ用の viewTemplate）
• アクティブビューの管理（activeView プロパティ）
• プログラムによるビューの切り替え

テンプレート

📄 参照: references/templates.md

• ウェルカムメッセージ用のバナーテンプレート（bannerTemplate）
• プロンプト項目テンプレートのカスタマイズ（promptItemTemplate）
• レスポンス項目テンプレートの書式設定（responseItemTemplate）
• プロンプト候補項目テンプレート（promptSuggestionItemTemplate）
• カスタム入力エリア用のフッターテンプレート（footerTemplate）
• テンプレートのコンテキストとデータバインディング
• テンプレートのカスタマイズ例

ファイル添付

📄 参照: references/file-attachments.md

• 添付ファイルの有効化（enableAttachments）
• 添付ファイルの設定（許可する種類、サイズ制限、最大数を指定するattachmentSettings）
• アップロードの設定（saveUrl、removeUrl）
• プロンプト内の添付ファイル（PromptModel.attachedFiles）
• 添付ファイルのイベント（beforeUpload、success、failure、removed）
• ファイルのプレビューとクリック処理
• カスタム添付ファイルテンプレート（attachmentTemplate）

音声テキスト変換

📄 参照: references/speech-to-text.md

• 音声テキスト変換の設定（speechToTextSettings）
• ブラウザーの音声認識のセットアップ
• 言語とロケールの設定
• ボタンとツールチップのカスタマイズ
• 中間結果と文字起こしの処理
• マイクの権限とエラー処理

テキスト読み上げ

📄 参照: references/text-to-speech.md

• 応答ツールバーの項目e-assist-audioを使った組み込みテキスト読み上げの有効化
• 音声合成の設定（textToSpeechSettings）
• language、speechPitch、speechRate、volume、voice、inputTextのカスタマイズ
• ブラウザーのSpeechSynthesisUtteranceインターフェースを使ったAIの応答の読み上げ
• ブラウザーの互換性と機能検出

外観のカスタマイズ

📄 参照: references/appearance.md

• CSSクラスのカスタマイズ（cssClass）
• 幅と高さの設定
• RTLのサポート（enableRtl）
• Syncfusionテーマを使ったテーマのカスタマイズ
• カスタムスタイルの例
• レスポンシブデザインのパターン

メソッドとイベント

📄 参照: references/methods-and-events.md

• メソッド：addPromptResponse()（2番目の引数にTelemetryDataを任意で指定）、executePrompt()、scrollToBottom()、refresh()
• イベント：created、promptRequest、promptChanged、stopRespondingClick
• 添付ファイルのイベント：beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoving（削除前フック）、attachmentRemoved、attachmentClick
• イベント引数のインターフェースと使用パターン
• メソッドの使用例

テレメトリー

📄 参照: references/telemetry.md

• telemetrySettings.enableによるテレメトリーの有効化
• 応答ごとの組み込みテレメトリーボタン（所要時間を表示）と、ホバー時のツールチップレポート
• telemetrySettings.metricsとTelemetryMetric型（status、duration、toolCalls、streamingChunks、model、inputTokens、outputTokens、totalTokens、reasoningTokens、cachedInputTokens）による収集メトリクスの設定。配列の順序がツールチップの表示順になります
• TelemetryReportを使うtelemetrySettings.beforeReportイベントによるレポートのカスタマイズまたは抑制
• addPromptResponseのTelemetryDataパラメーターによるAIの使用状況データの受け渡し（model、inputTokens、outputTokens、reasoningTokens、cachedInputTokens、customAttributes）
• カスタム属性（region、tenant、sessionId、featureなど）をツールチップ内の個別の行として表示
• 主な動作：ターンの追跡、無効状態のテレメトリーボタン、所要時間のフォーマット、自動的なtotalTokens、メトリクスフィルターの優先順位、再生成のフロー

メンション

📄 参照: references/mentions.md

• mentions配列によるメンショントリガー文字（@や/などのmentionChar）の設定
• メンション項目のデータソース：ローカルコレクションまたはDataManager（ローカル／リモート）
• フィールドマッピング（fields.text、fields.value、fields.iconCss）と追加のデータ操作（query）
• フィルタリングと照合：filterType（Contains／StartsWith／EndsWith）とhighlight
• 選択したメンションの表示：showMentionCharとdisplayTemplate
• ポップアップのカスタマイズ：popupWidth、popupHeight、itemTemplate、noRecordsTemplate
• mentionSelectイベントによるユーザー選択の処理

---

クイックスタート

基本的なAI AssistView

import { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize AI AssistView
const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I get started?',
        'What are the key features?'
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        // Handle prompt request - integrate with AI service here
        setTimeout(() => {
            const response = 'This is the AI response to: ' + args.prompt;
            aiAssistView.addPromptResponse(response);
        }, 1000);
    }
});

// Render to DOM
aiAssistView.appendTo('#aiAssistView');

HTML構造

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/fluent2.css" rel="stylesheet" />
</head>
<body>
    <div id='container' style="height: 400px; width: 700px;">
        <div id="aiAssistView"></div>
    </div>
</body>
</html>

CSSのインポート

@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/ai-assistview/index.css";

---

一般的なパターン

パターン 1：OpenAI の統合

const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: ['Explain AI', 'Code example', 'Best practices'],
    promptRequest: async (args: PromptRequestEventArgs) => {
        try {
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${OPENAI_API_KEY}`
                },
                body: JSON.stringify({
                    model: 'gpt-4',
                    messages: [{ role: 'user', content: args.prompt }]
                })
            });
            
            const data = await response.json();
            const aiResponse = data.choices[0].message.content;
            aiAssistView.addPromptResponse(aiResponse);
        } catch (error) {
            aiAssistView.addPromptResponse('Error: ' + error.message);
        }
    }
});

パターン 2：ストリーミングによる Markdown レスポンス

const aiAssistView: AIAssistView = new AIAssistView({
    enableStreaming: true,
    promptRequest: (args: PromptRequestEventArgs) => {
        // Simulate streaming response
        const markdownResponse = `# Response\n\nThis is **bold** and *italic* text.\n\n- Item 1\n- Item 2\n\`\`\`javascript\nconst x = 10;\n\`\`\``;
        
        let index = 0;
        const interval = setInterval(() => {
            if (index < markdownResponse.length) {
                const chunk = markdownResponse.slice(0, index + 5);
                aiAssistView.addPromptResponse(chunk, false);
                index += 5;
            } else {
                clearInterval(interval);
                aiAssistView.addPromptResponse(markdownResponse, true);
            }
        }, 50);
    }
});

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

const aiAssistView: AIAssistView = new AIAssistView({
    responseToolbarSettings: {
        items: [
            { type: 'Button', iconCss: 'e-icons e-copy', tooltip: 'Copy' },
            { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' },
            { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Dislike' }
        ],
        itemClicked: (args: ToolbarItemClickedEventArgs) => {
            if (args.item.iconCss.includes('copy')) {
                // Copy response to clipboard
                const responseText = aiAssistView.prompts[args.dataIndex].response;
                navigator.clipboard.writeText(responseText);
            } else if (args.item.iconCss.includes('like')) {
                console.log('User liked the response');
            }
        }
    }
});

パターン 4：思考の連鎖（ストリーミング推論）

import { AIAssistView, AssistThinking, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';

AIAssistView.Inject(AssistThinking);

const aiAssistView: AIAssistView = new AIAssistView({
    promptRequest: (args: PromptRequestEventArgs) => {
        // Show an in-progress reasoning stage first
        aiAssistView.addPromptResponse({
            blocks: [{
                blockType: 'thinking',
                title: 'Understanding your request',
                isActive: true,
                collapsed: false,
                stages: [
                    { id: 'step1', status: 'inprogress', content: 'Analyzing the request…' }
                ]
            }]
        }, false); // isFinalUpdate: false while streaming

        // Later, mark the stage complete and append the final response
        setTimeout(() => {
            aiAssistView.addPromptResponse({
                blocks: [{
                    blockType: 'thinking',
                    title: 'Understanding your request',
                    isActive: false,
                    collapsed: true,
                    stages: [
                        { id: 'step1', status: 'completed', content: 'Analyzed the request.' }
                    ]
                }],
                response: 'Here is the final answer based on my reasoning.'
            }, true); // isFinalUpdate: true
        }, 1000);
    }
});

パターン 5：生成 UI（インタラクティブなツールカード）

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';

const aiAssistView: AIAssistView = new AIAssistView({
    promptRequest: onPromptRequest
});

// Register a tool BEFORE it's referenced in any response; toolName must be unique
aiAssistView.registerToolUI({
    toolName: 'weather-card',
    template: (props: any) => `
        <div class="e-card">
            <div class="e-card-header-title">${props.location}</div>
            <div class="e-card-sub-title">${props.temperature}</div>
        </div>
    `
});

function onPromptRequest(args: any) {
    setTimeout(() => {
        // Mix text and tool blocks in a single response
        aiAssistView.addPromptResponse({
            blocks: [
                { blockType: 'text', content: 'Here is the forecast:' },
                { blockType: 'tool', toolName: 'weather-card', props: { location: 'New York', temperature: '1°C / -4°C' } }
            ]
        });
    }, 1000);
}

aiAssistView.appendTo('#aiAssistView');

パターン 6：ファイル添付

const aiAssistView: AIAssistView = new AIAssistView({
    enableAttachments: true,
    attachmentSettings: {
        allowedFileTypes: '.pdf,.docx,.txt,.jpg,.png',
        maxFileSize: 5242880, // 5MB
        maximumCount: 3,
        saveUrl: 'https://your-api.com/upload',
        removeUrl: 'https://your-api.com/remove'
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        console.log('Attached files:', args.attachedFiles);
        // Process prompt with attached files
        aiAssistView.addPromptResponse('Received your prompt with attachments');
    }
});

パターン 7：レスポンスの再生成

import { AIAssistView, PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-interactive-chat';

let promptsData: PromptModel[] = [
    { prompt: "What is AI?", response: "AI stands for Artificial Intelligence..." }
];

const regenerateResponses: string[] = [
    "AI, or Artificial Intelligence, refers to the simulation of human intelligence in machines.",
    "Artificial Intelligence is the development of computer systems that perform human-like tasks."
];

const aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    responseToolbarSettings: {
        // e-assist-regenerate enables the built-in regenerate button
        items: [
            { type: 'Button', iconCss: 'e-icons e-assist-copy', tooltip: 'Copy' },
            { type: 'Button', iconCss: 'e-icons e-assist-regenerate', tooltip: 'Regenerate' }
        ]
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        // Regenerate re-fires promptRequest with the existing prompt text
        setTimeout(() => {
            const response = regenerateResponses[Math.floor(Math.random() * regenerateResponses.length)];
            aiAssistView.addPromptResponse(response);
        }, 1000);
    }
});

パターン 8：テキスト読み上げ

import { AIAssistView, PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-interactive-chat';

const promptsData: PromptModel[] = [
    { prompt: "What is AI?", response: "AI stands for Artificial Intelligence..." }
];

const aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    responseToolbarSettings: {
        // e-assist-audio enables the built-in Read Aloud button
        items: [
            { type: 'Button', iconCss: 'e-icons e-assist-audio', tooltip: 'Read Aloud' },
            { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' }
        ]
    },
    textToSpeechSettings: {
        language: 'en-US',
        speechPitch: 1,
        speechRate: 1,
        volume: 1
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('This response can be read aloud via the toolbar.');
        }, 1000);
    }
});

パターン 9：テレメトリ（AI インタラクション指標の追跡）

import { AIAssistView, PromptRequestEventArgs, TelemetryData, TelemetryMetric } from '@syncfusion/ej2-interactive-chat';

// Enable telemetry and limit the report to a specific set/order of metrics
const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I set achievable goals at work?',
        'Why do people fly in their dreams?'
    ],
    telemetrySettings: {
        enable: true,
        metrics: ['status', 'duration', 'model', 'inputTokens', 'outputTokens', 'totalTokens'] as TelemetryMetric[]
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service.';
            // Attach AI usage details via the TelemetryData argument of addPromptResponse
            const telemetryData: TelemetryData = {
                model: 'gpt-4o',
                inputTokens: 128,
                outputTokens: 512,
                customAttributes: { region: 'us-east-1', tenant: 'acme' }
            };
            aiAssistView.addPromptResponse(defaultResponse, true, telemetryData);
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

パターン 10：beforeReport によるテレメトリレポートのカスタマイズ

import { AIAssistView, PromptRequestEventArgs, TelemetryReport } from '@syncfusion/ej2-interactive-chat';

const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I set achievable goals at work?',
        'Why do people fly in their dreams?'
    ],
    telemetrySettings: {
        enable: true,
        // Return the report (modified or not) to deliver it, or null to suppress it
        beforeReport: (report: TelemetryReport): TelemetryReport | null => {
            report.customAttributes = { region: 'us-east-1', tenant: 'acme', beta: true };
            return report;
        }
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('Response with custom telemetry attributes.');
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

パターン 11：プロンプトエディターでのメンション

import { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';

const agents: any[] = [
    { id: 'TechSupport', name: 'TechSupport' },
    { id: 'HRAssistant', name: 'HRAssistant' },
    { id: 'KnowledgeBase', name: 'KnowledgeBase' }
];

const aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: "Type '@' to mention an agent...",
    mentions: [
        {
            mentionChar: '@',
            dataSource: agents,
            fields: { text: 'name', value: 'id' },
            filterType: 'StartsWith',
            highlight: true,
            popupWidth: '250px',
            popupHeight: '200px'
        }
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('Processed mention from prompt: ' + args.prompt);
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

パターン 12：複数のメンショントリガー（エージェントとコマンド）

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';

const agents: any[] = [
    { id: 'TechSupport', name: 'TechSupport', iconCss: 'e-icons e-comment-status' },
    { id: 'HRAssistant', name: 'HRAssistant', iconCss: 'e-icons e-people' }
];

const commands: any[] = [
    { id: 'table', name: '/table', description: 'Answer as a markdown table' },
    { id: 'rewrite', name: '/rewrite', description: 'Rewrite for clarity' }
];

const aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: "Type '@' for agents or '/' for commands...",
    mentions: [
        {
            mentionChar: '@',
            dataSource: agents,
            fields: { text: 'name', value: 'id', iconCss: 'iconCss' }
        },
        {
            mentionChar: '/',
            dataSource: commands,
            showMentionChar: false,
            fields: { text: 'name', value: 'id' },
            itemTemplate:
                '<div class="listItems">' +
                    '<span class="commandName">${name}</span>' +
                    '<span class="commandDesc">${description}</span>' +
                '</div>'
        }
    ],
    promptRequest: () => {
        setTimeout(() => aiAssistView.addPromptResponse('Mention processed.'), 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

パターン 13：レスポンスアニメーションテンプレート（読み込みインジケーター）

import { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const aiAssistView: AIAssistView = new AIAssistView({
    responseAnimationTemplate: responseAnimationContent,
    // Returning a Promise keeps the animation visible until the response is added
    promptRequest: (args: PromptRequestEventArgs) => {
        return new Promise<void>((resolve: () => void) => {
            setTimeout(() => {
                const defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services.';
                aiAssistView.addPromptResponse(defaultResponse);
                resolve();
            }, 2000);
        });
    }
});

aiAssistView.appendTo('#aiAssistView');

function responseAnimationContent() {
    return `<div class="assistview-loading-status">
                <div class="assistview-grid-icon">
                    <span></span><span></span><span></span>
                    <span></span><span></span><span></span>
                    <span></span><span></span><span></span>
                </div>
                <span class="assistview-loading-label">Generating</span>
            </div>`;
}

パターン 14：ツールバー項目の配置

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Use the `align` property on a toolbar item to position it within the toolbar
// (supported values: 'Left', 'Center', 'Right'; default is 'Left').
const aiAssistView: AIAssistView = new AIAssistView({
    toolbarSettings: {
        items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ],
    },
    promptRequest: () => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services.');
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

---

主要プロパティのクイックリファレンス

プロパティ	型	説明
prompts	PromptModel[]	プロンプトとレスポンスのペアのコレクション
promptSuggestions	string[]	提案プロンプトの配列
promptRequest	Event	ユーザーがプロンプトを送信したときに発生するイベント
enableStreaming	boolean	レスポンスのストリーミングを有効にします
enableAttachments	boolean	ファイル添付機能を有効にします
views	AssistViewModel[]	カスタムビューの構成
toolbarSettings	ToolbarSettingsModel	ヘッダーツールバーの構成
footerToolbarSettings	FooterToolbarSettingsModel	フッターツールバーの構成
responseToolbarSettings	ResponseToolbarSettingsModel	レスポンスツールバーの構成
promptToolbarSettings	PromptToolbarSettingsModel	プロンプトツールバーの構成
bannerTemplate	string | Function	カスタムバナーテンプレート
promptItemTemplate	string | Function	カスタムプロンプト項目テンプレート
responseItemTemplate	string | Function	カスタムレスポンス項目テンプレート
responseAnimationTemplate	string | Function	レスポンスの生成中に表示されるカスタム読み込みインジケーターまたはアニメーション。addPromptResponse が呼び出され、promptRequest が返す Promise が解決されるまで表示されます
speechToTextSettings	SpeechToTextSettingsModel	音声テキスト変換の構成
textToSpeechSettings	TextToSpeechSettingsModel	テキスト読み上げの構成（language、speechPitch、speechRate、volume、voice、inputText）
blockTemplate	string | Function	思考ブロックを描画するためのカスタムテンプレート
itemTemplate	string | Function	個々の思考段階項目のカスタムテンプレート
editableContextClicked	Event	クリック可能なインラインコンテキストバッジがクリックされたときに発生します
registerToolUI	Method	生成 UI ツール（toolName、template、省略可能な handler）を登録し、tool ブロックを介して描画できるようにします
telemetrySettings	TelemetrySettingsModel	AI インタラクションのテレメトリ（enable、metrics、beforeReport）を構成し、レスポンスごとにホバー時のツールチップレポートを表示する組み込みテレメトリボタンを描画します
addPromptResponse(response, isFinalUpdate?, telemetryData?)	Method	レスポンスを追加します。テレメトリが有効な場合、省略可能な TelemetryData 引数で、レポートに含める model、inputTokens、outputTokens、reasoningTokens、cachedInputTokens、customAttributes を指定します
mentions	MentionSettingsModel[]	プロンプトエディターでのメンション機能を構成します：mentionChar、dataSource、fields、query、filterType、highlight、showMentionChar、popupWidth、popupHeight、displayTemplate、itemTemplate、noRecordsTemplate
mentionSelect	Event	ユーザーがメンション候補ポップアップから項目を選択したときに発生します（イベント引数から選択された itemData を参照できます）