Saltar al contenido principal
Versión: Estable (v4.x)

Referencia de la API de Sidepanel

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

appId​

type: string | requerido

Tu ID de aplicación de Algolia.

apiKey​

type: string | requerido

Tu clave de la API de búsqueda de Algolia.

assistantId​

type: string | requerido

El ID del asistente de Ask AI que se utilizará.

indexName​

type: string | requerido

El nombre del índice que se utilizará con el servicio Ask AI.

agentStudio​

type: boolean | opcional | experimental

Experimental

agentStudio es actualmente una propiedad experimental. Está previsto que sea estable en la versión 5.0.0.

Si agentStudio es verdadero, el chat de Ask AI usará Agent Studio de Algolia como backend del chat en lugar del backend de Ask AI. Puedes obtener más información sobre cómo configurar Agent Studio en su página de documentación dedicada.

searchParameters​

variant​

type: 'floating' | 'inline' | default: 'floating' | opcional

Variante de posicionamiento del Sidepanel.

  • inline: desplaza el contenido de la página al abrirse.

  • floating: se superpone sobre todo el contenido de la página.

side​

type: 'right' | 'left' | default: 'right' | opcional

Lado de la página desde donde se desplegará el panel.

width​

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

Ancho del Sidepanel (px o cualquier medida CSS) en su estado predeterminado.

expandedWidth​

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

Ancho del Sidepanel (px o cualquier medida CSS) en su estado expandido.

suggestedQuestions​

type: boolean | default: false | opcional

Habilita mostrar preguntas sugeridas en la pantalla de nueva conversación.

Más información sobre cómo configurar Preguntas Sugeridas está disponible en la documentación de Algolia

keyboardShortcuts​

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

Configuración de atajos de teclado. Permite habilitar/deshabilitar atajos específicos.

Comportamiento predeterminado:​

  • Ctrl/Cmd+I: abre y cierra el Sidepanel

Interfaz:​

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

theme​

type: 'light' | 'dark' | default: 'light' | opcional

portalContainer (solo React)​

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

Elemento contenedor donde se debe renderizar el panel. Úsalo cuando necesites que el Sidepanel se muestre en un nodo DOM personalizado.

advertencia

Esta prop solo existe en las versiones de Sidepanel basadas en React. Si usas el paquete @docsearch/sidepanel-js, emplea la opción container en su lugar.

// 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}
/>