混合模式

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

目前混合模式仅在 React 使用方式下可用，纯 JavaScript（无框架）集成暂不支持此功能。

简介

通过"混合模式"，侧边面板可与 DocSearch 模态框协同运行。当用户在 DocSearch 模态框内发起 Ask AI 操作（如提交提示或选择 AI 相关建议）时，界面将自动切换至侧边面板以继续对话。

设置方法

要配置混合模式体验，需满足以下条件：

• 已安装 DocSearch 模态框 包

• 已安装侧边面板组件包

侧边面板组件包可通过以下方式安装：

npm

npm install @docsearch/sidepanel

yarn

yarn add @docsearch/sidepanel

pnpm

pnpm add @docsearch/sidepanel

bun

bun add @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> 上下文内渲染时，系统将自动激活混合模式，无需额外配置。