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

Exemples et extensions

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 →

Ces exemples sont interactifs. Cliquez sur un bouton pour ouvrir la modale et tester une requête.

Recherche basique par mot-clé​

Utilisez l'expérience par défaut avec vos identifiants d'index. Idéal pour les documentations classiques, blogs et tout site disposant d'un index compatible DocSearch.

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  insights={true}
  translations={{ button: { buttonText: 'keyword search (demo)' } }}
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Ask AI : réponses assistées par IA​

Ajoutez algolia askai pour obtenir des réponses synthétisées basées sur votre contenu indexé. Vous pouvez délimiter le contexte LLM en utilisant des searchParameters tels que facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes et distinct.

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  askAi={{
    assistantId: 'askAIDemo',
    searchParameters: {
      facetFilters: ['language:en'],
    },
  }}
  insights={true}
  translations={{ button: { buttonText: 'search with askai (demo)' } }}
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Panneau latéral : chat IA persistant​

Le panneau latéral offre une interface de chat persistante ancrée sur le côté de la page, idéale pour les sites de documentation où les utilisateurs souhaitent poser des questions complémentaires sans perdre leur place. Recherchez le bouton en bas à droite de l'écran pour tester la démonstration.

<DocSearchSidepanel
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  assistantId="askAIDemo"
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

API composable : DocSearchButton + DocSearchModal​

Utilisez l'API composable pour afficher le bouton et la modale comme composants distincts. Cela vous donne un contrôle explicite sur l'emplacement de rendu de chaque élément et sur le moment où le code de la modale est chargé.

import { DocSearch } from '@docsearch/core';
import { DocSearchButton, DocSearchModal } from '@docsearch/modal';

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

<DocSearch>
  <DocSearchButton translations={{ buttonText: 'Composable search (demo)' }} />
  <DocSearchModal
    appId="PMZUYBQDAK"
    indexName="docsearch"
    apiKey="a00716d83c64f6c61905c078b7d5ab66"
    askAi={{
      assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
      agentStudio: true,
    }}
  />
</DocSearch>;

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Rendu personnalisé des résultats (hitComponent)​

Remplacez le balisage par défaut des résultats pour correspondre à votre identité visuelle. Voici un exemple minimal de composant personnalisé.

function CustomHit({ hit }) {
  // render a compact, branded hit card
  return (
    <a
      href={hit.url}
      style={{ display: 'block', padding: '12px 16px', textDecoration: 'none' }}
    >
      <div style={{ display: 'flex', gap: 12 }}>
        <div
          style={{
            width: 40,
            height: 40,
            backgroundColor: '#e3f2fd',
            borderRadius: 6,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontWeight: 600,
            color: '#1976d2',
          }}
        >
          {hit.type?.toUpperCase?.() || 'DOC'}
        </div>
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              fontWeight: 600,
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {hit.hierarchy?.lvl1 || 'untitled'}
          </div>
          {hit.hierarchy?.lvl2 && (
            <div
              style={{
                color: '#666',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {hit.hierarchy.lvl2}
            </div>
          )}
          {hit.content && (
            <div style={{ color: '#888', marginTop: 4 }}>{hit.content}</div>
          )}
        </div>
      </div>
    </a>
  );
}

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={CustomHit}
  insights={true}
  translations={{ button: { buttonText: 'custom hits (demo)' } }}
/>;

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Ouvrir les liens dans de nouveaux onglets​

Par défaut, DocSearch ouvre les liens des résultats dans la fenêtre actuelle. Pour ouvrir les résultats dans de nouveaux onglets, vous devez utiliser à la fois un hitComponent personnalisé et la prop navigator afin de gérer de manière cohérente la navigation par clic et au clavier.

// Custom hit component with target="_blank"
function HitWithNewTab({ hit, children }) {
  return (
    <a href={hit.url} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
}

// Navigator configuration to handle keyboard navigation
const newTabNavigator = {
  navigate: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewTab: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewWindow: ({ itemUrl }) => window.open(itemUrl, '_blank'),
};

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={HitWithNewTab}
  navigator={newTabNavigator}
  insights={true}
  translations={{ button: { buttonText: 'open in new tabs (demo)' } }}
/>;

avertissement

Remarque : Utiliser uniquement hitComponent avec target="_blank" fonctionne pour les clics souris, mais la navigation clavier (flèches + Entrée) nécessite la prop navigator pour ouvrir systématiquement les liens dans de nouveaux onglets.

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Adaptez la structure de vos données avec transformItems​

DocSearch ne se limite pas aux enregistrements standard. Utilisez transformItems pour adapter n'importe quelle structure de données au format interne attendu. Cela permet de créer des recherches pour applications, centres d'aide, journaux de modifications ou tout contenu personnalisé.

L'extrait ci-dessous transforme un enregistrement non standard au format interne. Testez-le en direct :

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="crawler_doc"
  askAi={{ assistantId: 'askAIDemo' }}
  searchParameters={{
    attributesToRetrieve: ['*'],
    attributesToSnippet: ['*'],
    hitsPerPage: 20,
  }}
  transformItems={(items) =>
    items.map((item) => ({
      objectID: item.objectID,
      content: item.content ?? '',
      url: item.domain + item.path,
      hierarchy: {
        lvl0: (item.breadcrumb || []).join(' > ') ?? '',
        lvl1: item.h1 ?? '',
        lvl2: item.h2 ?? '',
        lvl3: null,
        lvl4: null,
        lvl5: null,
        lvl6: null,
      },
      url_without_anchor: item.domain + item.path,
      type: 'content',
      anchor: null,
      _highlightResult: item._highlightResult,
      _snippetResult: item._snippetResult,
    }))
  }
  insights={true}
  translations={{ button: { buttonText: 'transform items (demo)' } }}
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Conseils​

  • Instrumentation : activez insights pour envoyer des analyses d'utilisation et optimiser la pertinence.

  • Délimitation Ask AI : utilisez facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes et distinct pour contrôler le contexte IA et améliorer la qualité des réponses.

  • Personnalisation : exploitez hitComponent, transformItems et translations pour intégrer DocSearch naturellement à toute interface produit.