Casos de uso avanzados

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 →

Introducción

Esta guía cubrirá implementaciones y casos de uso avanzados para el Sidepanel. Los siguientes ejemplos asumen que estás usando el paquete React de Sidepanel, disponible en @docsearch/sidepanel. Puedes instalar el paquete @docsearch/sidepanel de la siguiente manera:

npm

npm install @docsearch/sidepanel

yarn

yarn add @docsearch/sidepanel

pnpm

pnpm add @docsearch/sidepanel

bun

bun add @docsearch/sidepanel

O utilizando tu gestor de paquetes preferido

Implementación compleja

A continuación se muestra un ejemplo de implementación más compleja con searchParameters, una variant diferente y algunas traducciones.

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

Importación dinámica

Sidepanel está construido para permitir la importación dinámica de sus componentes y ayudar a reducir el tamaño del bundle. Aquí tienes un breve ejemplo de cómo hacerlo:

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

Modo híbrido

El modo híbrido te permite combinar el Sidepanel y el Modal original de DocSearch en una experiencia integrada.

Puedes activar el Modal para búsquedas y el Sidepanel para asistencia con IA.

Más información en la guía del modo híbrido.