syncfusion-aspnetcore-inline-ai-assist

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

概要

Inline AI Assist は、次のようなインテリジェントなテキスト処理機能を提供する Syncfusion ASP.NET Core コントロールです。

• リアルタイムのプロンプト処理：AI サービス（OpenAI、Azure Cognitive Services）に接続
• 複数の応答モード：インライン（その場で更新）またはポップアップ（フローティングダイアログ）
• コマンドポップアップ：組み込みおよびカスタムのコマンド項目
• 応答アクション項目：ユーザーからのフィードバックとコンテンツの採用
• イベントライフサイクル：created、promptRequest、open、close
• パブリックメソッド：addResponse、executePrompt、showPopup、hidePopup、showCommandPopup、hideCommandPopup
• テンプレートのサポート：カスタムエディターテンプレートと応答テンプレート
• グローバリゼーション：ローカライズ（L10n）と RTL のサポート

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

はじめに

📄 参照： references/getting-started.md

• 前提条件とシステム要件
• Razor ページを使用した ASP.NET Core プロジェクトのセットアップ
• NuGet パッケージのインストール（Syncfusion.EJ2.AspNet.Core）
• _ViewImports.cshtml でのタグヘルパー設定
• スクリプトとスタイルシートのリソース設定
• 基本的なコントロールのレンダリングと初回実行

配置と応答モード

📄 参照： references/positioning-and-modes.md

• relateTo プロパティの設定（要素に対する相対位置）
• target プロパティの設定（コントロールを追加する場所）
• ResponseMode プロパティ：インラインモードとポップアップモード
• モードの動的な切り替え
• ユースケースを含む配置の詳細な例

コマンドの設定

📄 参照： references/command-configuration.md

• CommandSettings とコマンド項目
• コマンドのプロパティ（id、label、prompt、iconCss、disabled、groupBy、tooltip）
• PopupWidth と PopupHeight の設定
• コマンドのグループ化と整理
• ItemSelect イベントの処理
• 高度なコマンドのシナリオ

イベントとハンドラー

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

• created イベント（コントロールのレンダリング完了）
• promptRequest イベント（非同期処理を含む）
• open イベント（ポップアップを開いたとき）
• close イベント（ポップアップを閉じたとき）
• イベントのフローとライフサイクル
• イベントハンドラーのベストプラクティス

パブリックメソッドと API

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

• addResponse() - プログラムによる応答の追加
• executePrompt() - プロンプトの動的な実行
• showPopup() - オプションの位置指定によるポップアップの表示
• hidePopup() - ポップアップを閉じる
• showCommandPopup() - コマンドメニューの表示
• hideCommandPopup() - コマンドメニューを非表示にする

Inline Assist の機能

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

• Prompt プロパティの設定
• Prompts コレクション（履歴の管理）
• プレースホルダーテキストのカスタマイズ
• Z-index プロパティ
• ポップアップの幅と高さの設定
• カスタムスタイル用の CssClass
• プロンプトと応答のコレクションの管理

応答の設定とテンプレート

📄 参照： references/response-settings-templates.md

• ResponseSettings の設定
• 組み込みの応答項目（採用／却下）
• カスタム応答項目とグループ化
• フッターをカスタマイズする EditorTemplate
• 応答項目用の ResponseTemplate
• テンプレートの構文とコンテキスト変数
• ItemSelect イベントの処理

高度な機能

📄 参照： references/advanced-features.md

• パブリックメソッド（addResponse、executePrompt、showPopup、hidePopup、showCommandPopup、hideCommandPopup）
• インラインツールバーの設定と配置
• ツールバー項目（type、text、iconCss、alignment、tooltip）
• キーボードナビゲーション用の TabIndex
• グローバリゼーション：L10n とローカライズ
• RTL（enableRtl プロパティ）
• アクセシビリティ機能

クイックスタートの例

@using Syncfusion.EJ2.InteractiveChat;

<style>
    #editableText {
        width: 100%;
        min-height: 120px;
        max-height: 300px;
        overflow-y: auto;
        font-size: 16px;
        padding: 12px;
        border-radius: 4px;
        border: 1px solid;
    }
</style>

<div class="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" onclick="onSummarizeClick()">Summarize</button>
    <div id="editableText" contenteditable="true">
        <p>Add your content here for AI processing...</p>
    </div>
    
    <ejs-inlineaiassist id="defaultInlineAssist" 
        relateTo="#summarizeBtn" 
        created="onCreated" 
        promptRequest="onPromptRequest">
        <e-inlineaiassist-responsesettings itemSelect="onItemSelect"></e-inlineaiassist-responsesettings>
    </ejs-inlineaiassist>
</div>

<script>
    var inlineAssist;
    
    function onCreated() {
        inlineAssist = this;
    }
    
    function onPromptRequest(args) {
        setTimeout(function () {
            var response = 'Connect to your AI service for real processing...';
            inlineAssist.addResponse(response);
        }, 1000);
    }
    
    function onItemSelect(args) {
        if (args.command.label === 'Accept') {
            document.getElementById('editableText').innerHTML = 
                '<p>' + inlineAssist.prompts[inlineAssist.prompts.length - 1].response + '</p>';
            inlineAssist.hidePopup();
        }
    }
    
    function onSummarizeClick() {
        if (inlineAssist) {
            inlineAssist.showPopup();
        }
    }
</script>

よくあるパターン

1. インラインモードとポップアップモードの設定

<ejs-inlineaiassist id="assist1" responseMode="Popup" relateTo="#btn"></ejs-inlineaiassist>


<ejs-inlineaiassist id="assist2" responseMode="Inline" relateTo="#btn"></ejs-inlineaiassist>

2. コマンドポップアップの追加

<ejs-inlineaiassist id="assist3" relateTo="#btn">
    <e-inlineaiassist-commandsettings 
        commands="commandsData" 
        popupWidth="250px" 
        popupHeight="200px"
        itemSelect="onCommandSelect">
    </e-inlineaiassist-commandsettings>
</ejs-inlineaiassist>

3. イベントの処理

<ejs-inlineaiassist id="assist4" 
    created="onCreated"
    promptRequest="onPromptRequest" 
    open="onOpen" 
    close="onClose">
</ejs-inlineaiassist>

4. パブリックメソッドの使用

// Show popup at current position
inlineAssist.showPopup();

// Execute prompt dynamically
inlineAssist.executePrompt('Your prompt text');

// Add response programmatically
inlineAssist.addResponse('Response text');

// Hide popup
inlineAssist.hidePopup();

主要なプロパティ

プロパティ	目的	例
relateTo	DOM 要素を基準に位置を制御します	relateTo="#btn" または relateTo=".container"
target	DOM 内でコントロールを追加する場所を指定します	target="#container"
responseMode	レスポンスの表示モードです	responseMode="Popup" または "Inline"
prompt	デフォルトのプロンプトテキストです	prompt="What are benefits?"
popupWidth	幅を制御します	popupWidth="400px"
popupHeight	高さを制御します	popupHeight="auto"
placeholder	テキストエリアのプレースホルダーテキストです	placeholder="Type prompt here..."
zIndex	重なり順を設定します	zIndex="4000"
enableRtl	右から左へのレイアウトを有効にします	enableRtl="true"
locale	ローカライズする言語です	locale="de"
cssClass	カスタム CSS クラスです	cssClass="custom-class"

よくあるユースケース

1. コンテンツ要約ツール

   • テキストエディターの近くにボタンを配置します
   • 完全なインターフェースには Popup モードを使用します
   • 承認／拒否のレスポンス項目を追加します
   • promptRequest を要約 API に接続します

2. インラインテキスト候補

   • インプレース更新には Inline モードを使用します
   • UI の占有領域を最小限に抑えます
   • すばやく受け入れられるワークフローを実現します
   • リアルタイムのフィードバックを得るため、レスポンスをストリーミングします

3. 複数コマンドのワークフロー

   • すばやく操作できるよう、コマンドポップアップを表示します
   • コマンドをカテゴリ別（改善、編集）にグループ化します
   • 各コマンドの promptRequest を個別に処理します
   • コマンドごとに動的にレスポンスを処理します

4. アクセシビリティを重視した実装

   • アラビア語／ヘブライ語のコンテンツでは RTL を有効にします
   • 複数の言語にはローカライズを使用します
   • tabIndex でタブナビゲーションを設定します
   • セマンティックテンプレートを使用します

---