144 lines
3.1 KiB
Text
144 lines
3.1 KiB
Text
---
|
|
title: Advanced use cases
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
## Introduction
|
|
|
|
This guide will cover some advanced implementations/use cases for the Sidepanel. The examples below assume you're using the Sidepanel React package,
|
|
available from `@docsearch/sidepanel`. The `@docsearch/sidepanel` 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
|
|
|
|
## Complex implementation
|
|
|
|
Below is an example of a more complex implementation with `searchParameters`, a different `variant`, and some translations.
|
|
|
|
```tsx
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Dynamic importing
|
|
|
|
Sidepanel is built in a way that allows for dynamic importing of its components to help reduce bundle size. Below is a brief example of how to do so:
|
|
|
|
```tsx
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Hybrid Mode
|
|
|
|
Hybrid Mode allows you to combine the Sidepanel and the original DocSearch Modal in one integrated experience.
|
|
|
|
You can trigger the Modal for search and the Sidepanel for AI-powered assistance.
|
|
|
|
Learn more in the [Hybrid Mode guide][1].
|
|
|
|
[1]: ./hybrid
|