syncfusion-aspnetcore-ai-assistview

Syncfusion ASP.NET Core AI AssistView コントロール

概要

Syncfusion AI AssistView は、ASP.NET Core アプリケーションで AI を活用した支援インターフェイスを構築するための包括的なコンポーネントです。次の機能をサポートします。

• カスタムヘッダーを使用したプロンプト候補の設定
• Markdown レンダリングに対応したプロンプトと応答のコレクション
• 検証とサイズ制限に対応したファイル添付
• UI を完全に制御するためのカスタムビューとテンプレート
• リアルタイムの対話を実現するイベント駆動型アーキテクチャ
• ヘッダー領域とフッター領域のツールバーのカスタマイズ
• プロンプトと応答のアイコンのカスタマイズ

主な機能

• プロンプト候補：あらかじめ定義した候補でユーザーをガイドします
• Markdown サポート：組み込みの Markdown コンバーターで書式付きコンテンツをレンダリングします
• カスタムテンプレート：バナー、プロンプト、応答、候補をカスタマイズします
• ファイル添付：ユーザーがプロンプトにファイルを添付できるようにします
• 複数のビュー：Assist ビューと Custom ビューの種類をサポートします
• ツールバーのカスタマイズ：ヘッダーとフッターのツールバー項目をカスタマイズします
• アイコンのカスタマイズ：プロンプトと応答のアバターをパーソナライズします
• 応答の停止：応答停止ボタンで処理中の AI 応答をキャンセルします
• ヘッダーの表示設定：showHeader を使用してヘッダーバーを表示または非表示にします
• 役立つフィードバック：PromptModel.isResponseHelpful を使用して応答が役立ったことを示します
• イベント駆動型：完全な制御を可能にするイベントライフサイクル全体を備えています
• メソッド：プロンプトの動的な実行と応答の管理に対応します
• 応答の再生成：再送信せずに既存のプロンプトに対する別の AI 応答を要求します
• 思考機能：思考の連鎖ブロックを通じて、AI の推論段階とワークフローを可視化します
• 生成 UI：AI 応答内に動的な対話型ツールと UI 要素をレンダリングします
• テキスト読み上げ：カスタマイズ可能な音声設定で AI 応答を音声に変換します
• 音声テキスト変換：デバイスのマイクを使って話し言葉をテキストに変換し、音声でプロンプトを入力できるようにします

ナビゲーションガイド

はじめに

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

• インストールと NuGet パッケージのセットアップ
• TagHelper の登録と設定
• CSS／スクリプトリソースのリンク
• 基本的なコントロールの初期化
• プロンプト候補と応答の設定

プロンプトと応答の設定

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

• プロンプトテキストとプレースホルダーの設定
• プロンプトと応答のコレクションの初期化
• Markdown 応答のレンダリング
• ヘッダー付きのプロンプト候補
• アバターのカスタマイズ（プロンプトと応答のアイコン）
• クリアボタンと最下部へのスクロール機能
• ヘッダーバーの表示または非表示（showHeader）
• 応答が役立ったことを示す（PromptModel.isResponseHelpful）

外観とスタイル

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

• 幅と高さの設定
• CSS クラスのカスタマイズ
• カスタムスタイルとテーマ設定
• コンポーネントコンテナーのスタイル設定

イベントの処理

📄 参照先： references/events-handling.md

• 初期化時の Created イベント
• プロンプトを処理する PromptRequest イベント（cancel、attachedFiles、promptSuggestions を含む）
• テキスト変更時の PromptChanged イベント（value、previousValue を含む）
• 処理中の応答をキャンセルする StopRespondingClick イベント
• 添付ファイルのイベント（アップロード、成功、失敗、削除、クリック）

メソッドと API の使用

📄 参照先： references/methods-and-apis.md

• 文字列とオブジェクトの応答に対応する addPromptResponse() メソッド
• プロンプトを動的に実行する executePrompt() メソッド
• 公開メソッドのシグネチャと使用パターン

テンプレートとカスタムビュー

📄 参照: references/templates-and-views.md

• ウェルカムメッセージ用のバナーテンプレート
• カスタムプロンプト描画用のプロンプト項目テンプレート
• 応答をカスタマイズする応答項目テンプレート
• 提案項目テンプレート
• カスタムアクション用のフッターテンプレート
• カスタムビューの種類とアクティブビューの設定

ツールバーの設定

📄 参照: references/toolbar-and-items.md

• フッターツールバー項目と配置
• アイコン付きのヘッダーツールバーの設定
• 項目の種類（Button、Separator、Input）
• 項目の配置、表示状態、無効状態
• ツールチップのテキストと CSS クラス
• プロンプトと応答用の組み込みツールバー項目
• テンプレートとイベントを使ったカスタムツールバー項目
• ToolbarItemClickedEventArgs — item、dataIndex、cancel、event、name
• プロンプトと応答のツールバー項目用のitemClickedイベント
• 別の応答に移動して応答を再生成

ファイル添付

📄 参照: references/file-attachments.md

• ファイル添付の有効化
• 保存 URL と削除 URL の設定
• ファイル形式の制限（allowedFileTypes）
• 最大ファイルサイズの設定
• 添付ファイル数の上限
• カスタム添付テンプレート（attachmentTemplate）
• プロンプト内の添付ファイルの事前読み込み（PromptModel.attachedFiles）

応答の高度な機能

思考機能

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

• AI の推論段階の可視化（思考ブロック、ステージ、ステータス更新）
• blockType、title、content、collapsed状態を使った思考ブロックの設定
• 完了状態（completed、inprogress、failed）を指定したステージの追加
• クリック可能なバッジ付きのステージ内インラインコンテキスト項目
• カスタムコンテキストアクション用のeditableContextClickedイベント
• ブロックテンプレートと項目テンプレートのカスタマイズ

生成 UI

📄 参照: references/generative-ui.md

• registerToolUIメソッドを使ったカスタムツールの登録
• 動的な UI 描画用のツールテンプレートとハンドラー
• blocksプロパティを使ったプロンプト応答へのツールの追加
• 生成応答用の AI サービスシステムプロンプトの設定
• インタラクティブなコンポーネント用のtoolNameとpropsを持つツールブロック

テキスト読み上げ

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

• *e-assist-audio*アイコンを使った組み込みテキスト読み上げ機能の有効化
• AI 応答の音声化（Web Speech API）
• e-aiassistview-textToSpeechSettingsタグヘルパーを使った音声設定
• 音声のカスタマイズプロパティ（language、speechPitch、speechRate、volume、voice）

音声認識

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

• 音声入力用の組み込み音声認識機能の有効化
• Web Speech APIを使った音声のテキスト変換
• e-aiassistview-speechToTextSettingsタグヘルパーを使った音声認識の設定
• 音声認識プロパティ（language、buttonSettings、tooltipSettings、allowInterimResults）
• 音声イベント（onStart、onStop、transcriptChanged、onError）の処理
• 中間結果に対応したリアルタイム文字起こし

クイックスタート

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

よく使われるパターン

パターン 1：プロンプト提案の追加

@using Syncfusion.EJ2.InteractiveChat;

@{
    var suggestions = new string[] { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        promptSuggestions="@suggestions" 
        promptRequest="onPromptRequest" 
        created="onCreated">
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            assistObj.addPromptResponse('Response for: ' + args.prompt);
        }, 2000);
    }
</script>

パターン 2：Markdown 応答の描画

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
   var markdownData = new[]
    {
        new {
            prompt = "What is Markdown?",
            response = "# Markdown Guide\n\nMarkdown is a lightweight markup language:\n\n- **Headers:** Use `#`, `##`, `###`\n- **Bold:** `**text**` for bold\n- **Lists:** Use `-` for bullet points",
            suggestions = new string[] {"How do I use bold?"}
        }
    };
    var promptsJson = JsonSerializer.Serialize(markdownData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        prompts="@markdownData" 
        promptRequest="onPromptRequest" 
        created="onCreated">
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            if (foundPrompt) {
                assistObj.addPromptResponse(foundPrompt.response);
            }
        }, 2000);
    }
</script>

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

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        enableAttachments="true" 
        promptRequest="onPromptRequest" 
        created="onCreated">
        <e-aiassistview-attachmentsettings 
            [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save") 
            [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove")>
        </e-aiassistview-attachmentsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            assistObj.addPromptResponse('Processing your prompt with attachments');
        }, 2000);
    }
</script>