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

高度なユースケース

非公式ベータ版翻訳

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

はじめに​

このガイドでは、Sidepanelの高度な実装方法とユースケースについて説明します。以下の例では、@docsearch/sidepanelから利用可能なSidepanel Reactパッケージを使用していることを前提としています。@docsearch/sidepanelパッケージは次のようにインストールできます：

npm install @docsearch/sidepanel

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

複雑な実装例​

以下は、searchParametersの設定、異なるvariantの使用、および翻訳機能を含むより高度な実装例です。

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

function App() {
  return (
    <DocSearch>
      <SidepanelButton
        translations={{
          buttonAriaLabel: 'Open Ask AI Sidepanel',
        }}
      />
      <Sidepanel
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        assistantId="YOUR_ASSISTANT_ID"
        variant="inline"
        searchParameters={{
          facetFilters: ['language:en'],
          distinct: false,
        }}
        translations={{
          header: {
            title: 'Ask our assistant',
          },
          promptForm: {
            promptPlaceholderText: 'e.g. How do I migrate my DB?',
          },
        }}
      />
    </DocSearch>
  );
}

動的インポート​

Sidepanelはバンドルサイズを削減できるようコンポーネントの動的インポートをサポートしています。以下にその実装方法の簡単な例を示します：

import { DocSearch } from '@docsearch/core';
import { SidepanelButton } from '@docsearch/sidepanel/button';
import type { Sidepanel as SidepanelType} from '@docsearch/sidepanel/sidepanel';
import { useState } from 'react';

let Sidepanel: typeof SidepanelType | null = null;

async function importSidepanelIfNeeded() {
  if (Sidepanel) {
    return;
  }

  const { Sidepanel: Panel } = await import('@docsearch/sidepanel/sidepanel');

  Sidepanel = Panel;
}

export default function DynamicSidepanel() {
  const [sidepanelLoaded, setSidepanelLoaded] = useState(false);

  const loadSidepanel = () => {
    importSidepanelIfNeeded().then(() => {
      setSidepanelLoaded(true);
    });
  };

  return (
    <DocSearch>
      <SidepanelButton onClick={loadSidepanel} />
      {sidepanelLoaded && Sidepanel && (
        <Sidepanel
          indexName="YOUR_INDEX_NAME"
          appId="YOUR_APP_ID"
          apiKey="YOUR_SEARCH_API_KEY"
          assistantId="YOUR_ASSISTANT_ID"
        />
      )}
    </DocSearch>
  );
}

ハイブリッドモード​

ハイブリッドモードでは、Sidepanelと従来のDocSearch Modalを統合したエクスペリエンスを実現できます。

検索にはModalを、AI支援機能にはSidepanelをそれぞれ起動できます。

詳細はハイブリッドモードガイドでご確認ください。