Hybrid Mode

Introduction

Sidepanel can run alongside the DocSearch Modal through what we call "Hybrid Mode." When a user initiates an Ask AI action from within the DocSearch Modal, such as submitting a prompt or selecting an AI-related suggestion, the interface automatically transitions into the Sidepanel for the continuation of the conversation.

Set up

To set up the Hybrid Mode experience, you will need the following:

• DocSearch Modal packages installed
• Sidepanel Component package installed

The needed packages can be installed as follows:

npm

npm install @docsearch/css @docsearch/modal @docsearch/sidepanel

# Or if using JS based packages

npm install @docsearch/css @docsearch/js @docsearch/sidepanel-js

yarn

yarn add @docsearch/css @docsearch/modal @docsearch/sidepanel

# Or if using JS based packages

yarn add @docsearch/css @docsearch/js @docsearch/sidepanel-js

pnpm

pnpm add @docsearch/css @docsearch/modal @docsearch/sidepanel

# Or if using JS based packages

pnpm add @docsearch/css @docsearch/js @docsearch/sidepanel-js

bun

bun add @docsearch/css @docsearch/modal @docsearch/sidepanel

# Or if using JS based packages

bun add @docsearch/css @docsearch/js @docsearch/sidepanel-js

Or using your package manager of choice

Implementation

Once everything is installed, you can set up Hybrid Mode as such:

React

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>
  );
}

There is no manual opt-in for Hybrid Mode to work. When both the Modal and Sidepanel are rendered inside the same <DocSearch> context, Hybrid Mode is enabled automatically. No additional configuration is required.

JavaScript

<div id="docsearch"></div>
<div id="sidepanel"></div>

import docsearch from '@docsearch/js';
import sidepanel from '@docsearch/sidepanel-js';

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

let docsearchInstance = undefined;
let sidepanelInstance = undefined;

sidepanelInstance = sidepanel({
  container: "#sidepanel",
  indexName: "YOUR_INDEX_NAME",
  appId: "YOUR_APP_ID",
  apiKey: "YOUR_SEARCH_API_KEY",
  assistantId: "YOUR_ASSISTANT_ID",
  onOpen: () => {
    docsearchInstance?.close();
  }
});

docsearchInstance = docsearch({
  container: "#docsearch",
  indexName: "YOUR_INDEX_NAME",
  appId: "YOUR_APP_ID",
  apiKey: "YOUR_SEARCH_API_KEY",
  askAi: "YOUR_ASSISTANT_ID",  // Or configuration object
  interceptAskAiEvent: (initialMessage) => {
    docsearchInstance?.close();
    sidepanelInstance.open(initialMessage);
    return true;
  },
  onOpen: () => {
    sidepanelInstance?.close();
  }
});