メインコンテンツへスキップ
バージョン: 安定版 (v4.x)

ハイブリッドモード

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

情報

現在、ハイブリッドモードは React 使用アプローチでのみ利用可能です。JavaScript のみ（バニラ）の統合では利用できません。

はじめに​

サイドパネルは「ハイブリッドモード」と呼ばれる方法で DocSearch モーダルと併用できます。ユーザーが DocSearch モーダル内でプロンプト送信や AI 関連サジェスト選択などの Ask AI アクションを開始すると、インターフェースが自動的にサイドパネルに切り替わり、会話を継続します。

セットアップ​

ハイブリッドモードを設定するには、以下が必要です：

  • DocSearch モーダル パッケージがインストール済みであること

  • サイドパネルコンポーネントパッケージがインストール済みであること

サイドパネルコンポーネントパッケージは以下の方法でインストールできます：

npm install @docsearch/sidepanel

またはお好みのパッケージマネージャーを使用して

実装方法​

すべてのインストールが完了したら、以下のようにハイブリッドモードを設定します：

import { DocSearch } from '@docsearch/core';
import { DocSearchButton, DocSearchModal } from '@docsearch/modal';
import { SidepanelButton, Sidepanel } from '@docsearch/sidepanel';

import '@docsearch/css/dist/style.css';
import '@docsearch/css/dist/sidepanel.css';

function HybridMode() {
  return (
    <DocSearch>
      <DocSearchButton />
      <DocSearchModal
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        askAi="YOUR_ASSISTANT_ID" // Or configuration object
      />

      <SidepanelButton />
      <Sidepanel
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        assistantId="YOUR_ASSISTANT_ID"
      />
    </DocSearch>
  );
}

ハイブリッドモードを有効化する手動操作は不要です。モーダルとサイドパネルの両方が同じ <DocSearch> コンテキスト内でレンダリングされると、ハイブリッドモードが自動的に有効になります。追加設定は必要ありません。