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

サイドパネル API リファレンス

非公式ベータ版翻訳

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

appId​

type: string | 必須

AlgoliaアプリケーションIDです。

apiKey​

type: string | 必須

Algolia Search APIキーです。

assistantId​

type: string | 必須

使用するAsk AIアシスタントのIDです。

indexName​

type: string | 必須

Ask AIサービスで使用するインデックスの名前です。

agentStudio​

type: boolean | オプション | 実験的

実験的

agentStudio は現在実験的なプロパティです。安定版リリース 5.0.0 での提供を予定しています。

agentStudio が true の場合、Ask AI チャットは Ask AI バックエンドの代わりに Algolia の Agent Studio をチャットバックエンドとして使用します。Agent Studio の設定方法についての詳細は、専用の ドキュメントページ でご確認いただけます。

searchParameters​

type: AskAiSearchParameters | Record<string, Omit<AskAiSearchParameters, 'facetFilters'>> | オプション

Ask AIまたはAgent Studioの検索範囲を限定する追加の検索パラメータです。

  • agentStudioが省略されているかfalseの場合、facetFilters、filters、attributesToRetrieve、restrictSearchableAttributes、distinctなどのフラットなオブジェクトを渡します。

  • agentStudioがtrueの場合、searchParametersはインデックス名でキー指定する必要があり、filters、attributesToRetrieve、restrictSearchableAttributes、distinctをサポートします。

<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  searchParameters={{
    facetFilters: ['language:en'],
    distinct: true,
  }}
/>
<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  agentStudio={true}
  searchParameters={{
    YOUR_INDEX_NAME: {
      filters: 'type:content AND language:en',
      attributesToRetrieve: ['title', 'content', 'url'],
      restrictSearchableAttributes: ['title', 'content'],
      distinct: 'url',
    },
  }}
/>

variant​

type: 'floating' | 'inline' | default: 'floating' | オプション

サイドパネルの配置バリアントです。

  • inline：開いたときにページのコンテンツを押し出します。

  • floating：ページ上の他のすべてのコンテンツの上に配置されます。

side​

type: 'right' | 'left' | default: 'right' | オプション

パネルが表示されるページの側面です。

width​

type: number | string | default: '360px' | オプション

デフォルト状態でのサイドパネルの幅（pxまたは任意のCSS幅）です。

expandedWidth​

type: number | string | default: '580px' | オプション

拡張状態でのサイドパネルの幅（pxまたは任意のCSS幅）です。

suggestedQuestions​

type: boolean | default: false | オプション

新規会話画面で提案された質問を表示します。

提案された質問の設定方法の詳細は Algolia ドキュメントをご覧ください。

keyboardShortcuts​

type: { 'Ctrl/Cmd+I': boolean } | オプション

キーボードショートカットの設定です。特定のショートカットを有効/無効にできます。

デフォルト動作:​

  • Ctrl/Cmd+I - サイドパネルを開閉します

インターフェース:​

interface SidepanelShortcuts {
  'Ctrl/Cmd+I'?: boolean; // default: true
}

theme​

type: 'light' | 'dark' | default: 'light' | オプション

portalContainer (React専用)​

type: Element | DocumentFragment | default: document.body | オプション

パネルをポータルする先のコンテナ要素です。カスタムDOMノードにサイドパネルをレンダリングする必要がある場合に使用します。

警告

このプロパティはReactベースのSidepanelバージョンでのみ利用可能です。@docsearch/sidepanel-jsパッケージを使用する場合は、代わりにcontainerオプションを使用してください。

// assume you have a dedicated DOM node in your HTML
<div id="sidepanel-root" />

const portalEl = document.getElementById('sidepanel-root');

<Sidepanel
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  indexName="YOUR_INDEX_NAME"
  // Render the Sidepanel inside of #sidepanel-root instead of document.body
  portalContainer={portalEl}
/>