Cas d'utilisation avancés

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 →

Introduction

Ce guide présente des implémentations et cas d'utilisation avancés pour le Sidepanel. Les exemples ci-dessous supposent que vous utilisez le package React Sidepanel, disponible via @docsearch/sidepanel. Le package @docsearch/sidepanel peut être installé comme suit :

npm

npm install @docsearch/sidepanel

yarn

yarn add @docsearch/sidepanel

pnpm

pnpm add @docsearch/sidepanel

bun

bun add @docsearch/sidepanel

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

Implémentation complexe

Voici un exemple d'implémentation plus complexe utilisant searchParameters, une variant différente et des traductions.

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

Importation dynamique

Le Sidepanel est conçu pour permettre l'importation dynamique de ses composants afin de réduire la taille du bundle. Voici un bref exemple :

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

Mode hybride

Le mode hybride permet de combiner le Sidepanel et la DocSearch Modal originale dans une expérience unifiée.

Vous pouvez déclencher la Modal pour la recherche et le Sidepanel pour une assistance propulsée par l'IA.

Pour en savoir plus, consultez le guide du mode hybride.