syncfusion-vue-inline-ai-assist

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

Inline AI Assist コンポーネントは、AI を活用した機能をアプリケーションに直接統合するために設計された、強力な Syncfusion Vue コントロールです。リアルタイムの応答ストリーミング、カスタマイズ可能なプロンプト、コマンドポップアップ、応答アクションによるインテリジェントなテキスト処理機能を提供します。このコンポーネントにより、ユーザーは直感的なポップアップベースのインターフェイスを通じて、AI サービスをシームレスに利用できます。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• コンポーネントの基本的な統合
• CSS テーマのインポートと設定
• 基本的なサンプルの実行

プロンプトの設定

📄 参照： references/prompt-configuration.md

• プロンプトテキストの設定と管理
• プロンプトと応答のコレクションの操作
• プロンプトリクエストイベントの処理
• 応答を伴う動的なプロンプトの処理

コマンドの設定とカスタマイズ

📄 参照： references/command-settings.md

• コマンドアクション項目の設定
• コマンドグループと整理方法の設定
• アイコン、ツールチップ、無効状態の追加
• コマンド選択イベントの処理

インラインツールバーの設定

📄 参照： references/inline-toolbar-settings.md

• インラインツールバーの項目、位置（toolbarPosition）、動作を設定します
• itemClick イベントでツールバー項目のクリックを処理し、応答やエディターのアクションを実行します

音声テキスト変換

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

• speechToTextSettings を使用して、ブラウザーの Web Speech API による音声入力を有効にします
• 言語（lang）、中間結果（allowInterimResults）、ボタン、ツールチップの設定を行います
• 認識のライフサイクルイベント（onStart、onStop、transcriptChanged、onError）を処理します
• ブラウザーの互換性と HTTPS の要件を確認します

応答の設定とアクション

📄 参照： references/response-settings.md

• 組み込みの応答項目（承認／破棄）
• カスタム応答アクションの追加
• 応答項目のグループ化とカスタマイズ
• 応答アクションイベントの処理

イベントとメソッド

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

• コンポーネントのライフサイクルイベント（created イベント）
• プロンプトリクエストと応答イベントの処理
• パブリックメソッド：addResponse()、showPopup()、hidePopup() など
• イベント引数のパターンと使い方

テンプレートとローカライズ

📄 参照： references/templates-and-localization.md

• フッター領域のエディターテンプレートのカスタマイズ
• 応答テンプレートのカスタマイズオプション
• 複数の言語に対応するローカライズの設定
• RTL サポートと文化的な適応

高度なパターン

📄 参照： references/advanced-patterns.md

• relateTo プロパティを使用したコンポーネントの配置
• ポップアップのサイズと寸法の設定
• contenteditable div との統合
• 一般的なワークフローとエッジケースの処理

クイックスタートの例

Vue で Inline AI Assist を使い始めるための最小限の例を示します。

<template>
  <div style="height: 350px; width: 650px; margin: 0 auto;">
    <br />
    <button @click="showPopup">Open Inline AI Assist</button>
    <div id="editableText" contenteditable="true" 
         style="min-height:80px; border:1px solid #ccc; padding:8px; margin-top:8px;">
      Editable content goes here.
    </div>
    <ejs-inlineaiassist 
      prompt="What are the benefits of AI?" 
      relate-to="#btn"
      popup-width="500px"
      :prompt-request="onPromptRequest"
      :response-settings="responseSettings"
      ref="inlineAiAssist">
    </ejs-inlineaiassist>
  </div>
</template>

<script setup>
import { InlineAIAssistComponent as EjsInlineaiassist } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";

let inlineAiAssist = ref(null);

const responseSettings = {
  itemSelect: (args) => {
    if (args.command.label === 'Accept') {
      const editable = document.getElementById('editableText');
      if (editable && inlineAiAssist.value?.prompts) {
        const lastResponse = inlineAiAssist.value.prompts[inlineAiAssist.value.prompts.length - 1].response;
        editable.innerHTML = '<p>' + lastResponse + '</p>';
      }
      inlineAiAssist.value?.hidePopup();
    } else if (args.command.label === 'Discard') {
      inlineAiAssist.value?.hidePopup();
    }
  }
};

const onPromptRequest = () => {
  setTimeout(() => {
    const defaultResponse = 'Connect to your AI service (OpenAI, Azure, etc.) to get real responses.';
    inlineAiAssist.value?.addResponse(defaultResponse);
  }, 1000);
};

const showPopup = () => {
  inlineAiAssist.value?.showPopup();
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/inline-ai-assist/index.css";
</style>

一般的なパターン

パターン 1：応答ハンドラーを使用した基本的なプロンプト

<ejs-inlineaiassist 
  prompt="Summarize this text"
  :prompt-request="handlePrompt"
  :response-settings="responseSettings">
</ejs-inlineaiassist>

prompt-request イベントを通じて、コンポーネントにプロンプトを表示させ、応答を処理します。

パターン 2：グループ化した複数のコマンド

const commandSettings = {
  commands: [
    { label: 'Summarize', prompt: 'Summarize', groupBy: 'Improve', iconCss: 'e-icons e-collapse-2' },
    { label: 'Shorten', prompt: 'Shorten', groupBy: 'Improve', iconCss: 'e-icons e-shorten' },
    { label: 'Translate', prompt: 'Translate', groupBy: 'Edit', iconCss: 'e-icons e-translate' }
  ],
  itemSelect: (args) => {
    // Handle command selection
  }
};

コマンドは視覚的にグループ化され、ユーザーはポップアップからアクションを選択します。

パターン 3：カスタム応答アクション

const responseSettings = {
  items: [
    { label: 'Regenerate', iconCss: 'e-icons e-refresh', groupBy: 'Actions' },
    { label: 'Copy', iconCss: 'e-icons e-copy', groupBy: 'Actions' },
    { label: 'Accept' },
    { label: 'Discard' }
  ],
  itemSelect: (args) => {
    // Handle response action
  }
};

組み込みおよびカスタムのアクション項目を使用して、応答ポップアップをカスタマイズします。