100 lines
2.3 KiB
Text
100 lines
2.3 KiB
Text
---
|
|
title: Hybrid Mode
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
:::info
|
|
Currently Hybrid Mode is only available when using the React usage approach. Hybrid Mode is not available in the JavaScript-only (vanilla) integration.
|
|
:::
|
|
|
|
## 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][1] packages installed
|
|
- Sidepanel Component package installed
|
|
|
|
The Sidepanel Component package can be installed as follows:
|
|
|
|
<Tabs>
|
|
<TabItem value="npm">
|
|
|
|
```bash
|
|
npm install @docsearch/sidepanel
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="yarn">
|
|
|
|
```bash
|
|
yarn add @docsearch/sidepanel
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="pnpm">
|
|
|
|
```bash
|
|
pnpm add @docsearch/sidepanel
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="bun">
|
|
|
|
```bash
|
|
bun add @docsearch/sidepanel
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
> Or using your package manager of choice
|
|
|
|
## Implementation
|
|
|
|
Once everything is installed, you can set up Hybrid Mode as such:
|
|
|
|
```tsx
|
|
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.
|
|
|
|
[1]: ../docsearch#installation
|