Premiers pas avec Sidepanel

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

info

Sidepanel est disponible à partir de la version >= 4.4

Introduction

DocSearch Sidepanel est une nouvelle expérience distincte de l'expérience DocSearch Modal. Sidepanel est entièrement conçu pour une utilisation avec Ask AI et peut être utilisé de manière autonome ou en mode hybride avec la Modal.

Installation

Pour commencer avec Sidepanel, vous devez d'abord installer les packages nécessaires :

npm

npm install @docsearch/react @docsearch/css

# Or if using JS based package

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

yarn

yarn add @docsearch/react @docsearch/css

# Or if using JS based package

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

pnpm

pnpm add @docsearch/react @docsearch/css

# Or if using JS based package

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

bun

bun add @docsearch/react @docsearch/css

# Or if using JS based package

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

Ou avec votre gestionnaire de packages préféré

Sans gestionnaire de packages

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/sidepanel.css" />

<script src="https://cdn.jsdelivr.net/npm/@docsearch/sidepanel-js"></script>

Mise en œuvre

L'implémentation la plus simple de Sidepanel serait la suivante :

React

import { DocSearchSidepanel } from '@docsearch/react/sidepanel';

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

function App() {
  return (
    <DocSearchSidepanel
      appId='YOUR_APP_ID'
      apiKey='YOUR_SEARCH_API_KEY'
      assistantId='YOUR_ASSISTANT_ID'
      indexName='YOUR_INDEX_NAME'
    />
  );
}

JavaScript

You will need a container DOM node to render the Sidepanel into:

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

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

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

sidepanel({
  container: '#docsearch-sidepanel',
  indexName: 'YOUR_INDEX_NAME',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  assistantId: 'YOUR_ASSISTANT_ID',
});

Ceci représente la forme la plus basique d'implémentation. Pour découvrir d'autres méthodes d'implémentation, consultez nos cas d'usage avancés.

Pour en savoir plus sur les différentes options de configuration de Sidepanel, reportez-vous à notre référence API de Sidepanel