Aller au contenu principal
Version : Stable (v4.x)

Référence de l'API 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 →

avertissement
Ask AI is being migrated from a standalone DocSearch feature into Algolia's Agent Studio. DocSearch v5 will fully support Agent Studio and transition to using it. A more detailed migration guide will be published before the DocSearch v5 release.

appId​

type: string | requis

Votre identifiant d'application Algolia.

apiKey​

type: string | requis

Votre clé API de recherche Algolia.

assistantId​

type: string | requis

L'identifiant de l'assistant Ask AI à utiliser.

indexName​

type: string | requis

Le nom de l'index à utiliser avec le service Ask AI.

agentStudio​

type: boolean | optionnel | expérimental

Expérimental

agentStudio est actuellement une propriété expérimentale. Elle est prévue pour devenir stable dans la version 5.0.0.

Si agentStudio est true, le chat Ask AI utilisera Agent Studio d'Algolia comme backend de discussion à la place du backend Ask AI. Pour en savoir plus sur la configuration d'Agent Studio, consultez leur page de documentation dédiée.

searchParameters​

type: AskAiSearchParameters | Record<string, Omit<AskAiSearchParameters, 'facetFilters'>> | optionnel

Paramètres de recherche supplémentaires utilisés pour délimiter la récupération par Ask AI ou Agent Studio.

  • Lorsque agentStudio est omis ou false, passez un objet plat tel que facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes et distinct.

  • Lorsque agentStudio est true, searchParameters doit être indexé par nom d'index et prend en charge filters, attributesToRetrieve, restrictSearchableAttributes et distinct.

<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  searchParameters={{
    facetFilters: ['language:en'],
    distinct: true,
  }}
/>
<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  agentStudio={true}
  searchParameters={{
    YOUR_INDEX_NAME: {
      filters: 'type:content AND language:en',
      attributesToRetrieve: ['title', 'content', 'url'],
      restrictSearchableAttributes: ['title', 'content'],
      distinct: 'url',
    },
  }}
/>

variant​

type: 'floating' | 'inline' | default: 'floating' | optionnel

Variante de positionnement du Sidepanel.

  • inline repousse le contenu de la page lorsqu'il est ouvert.

  • floating se positionne au-dessus de tout autre contenu de la page.

side​

type: 'right' | 'left' | default: 'right' | optionnel

Côté de la page d'où le panneau sera déployé.

width​

type: number | string | default: '360px' | optionnel

Width of the Sidepanel (px or any CSS width) while in its default state.

expandedWidth​

type: number | string | default: '580px' | optionnel

Width of the Sidepanel (px or any CSS width) while in its expanded state.

suggestedQuestions​

type: boolean | default: false | optionnel

Active l'affichage des questions suggérées sur l'écran de nouvelle conversation.

Plus d'informations sur la configuration des questions suggérées sont disponibles dans la documentation Algolia

keyboardShortcuts​

type: { 'Ctrl/Cmd+I': boolean } | optionnel

Configuration des raccourcis clavier. Permet d'activer ou désactiver des raccourcis spécifiques.

Default behavior​

  • Ctrl/Cmd+I - Ouvre et ferme le Sidepanel

Interface​

interface SidepanelShortcuts {
  'Ctrl/Cmd+I'?: boolean; // default: true
}

theme​

type: 'light' | 'dark' | default: 'light' | optionnel

portalContainer (React uniquement)​

type: Element | DocumentFragment | default: document.body | optionnel

L'élément conteneur où le panneau doit être porté. Utilisez ceci lorsque vous avez besoin que le Sidepanel s'affiche dans un nœud DOM personnalisé.

avertissement

Cette prop n'existe que dans les versions React du Sidepanel. Si vous utilisez le package @docsearch/sidepanel-js, utilisez plutôt l'option container.

// assume you have a dedicated DOM node in your HTML
<div id="sidepanel-root" />

const portalEl = document.getElementById('sidepanel-root');

<Sidepanel
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  indexName="YOUR_INDEX_NAME"
  // Render the Sidepanel inside of #sidepanel-root instead of document.body
  portalContainer={portalEl}
/>