react search

Réagir-Recherche

React-Search est un widget d'interface utilisateur permettant d'ajouter une recherche sémantique basée sur Vectara à vos applications React avec quelques lignes de code.

Conseil

Vous cherchez autre chose ? Essayez un autre projet open source :

• React-Chatbot : ajoutez un widget de chatbot compact alimenté par Vectara à vos applications React.
• Create-UI : Le moyen le plus rapide de générer une base de code React fonctionnelle pour une gamme d'interfaces utilisateur de recherche générative et sémantique.
• Réponse Vectara : Application de démonstration pour la recherche sémantique résumée avec des options de configuration avancées.
• Vectara Ingest : exemples de modèles et de robots d'exploration pour extraire des données de nombreuses sources de données populaires.

Démo

Essayez la démo !

Interface utilisateur

L'entrée de recherche ressemble à ceci :

Lorsque l'utilisateur clique sur l'entrée de recherche, il obtient une invite de recherche comme celle-ci :

Les résultats de la recherche ressemblent à ceci :

Utilisez-le dans votre application

Utiliser directement le composant de recherche

Installez React-Search :

npm install --save @vectara/react-search

Utilisez-le ensuite dans votre application comme ceci :

 import { ReactSearch } from "@vectara/react-search" ;

/* snip */

< ReactSearch
  customerId = "CUSTOMER_ID"
  corpusId = "CORPUS_ID"
  apiKey = "API_KEY"
  placeholder = "Search" // Optional search input placeholder
  isDeepLinkable = { true } // Optional boolean determining if search results will be deep-linked
  openResultsInNewTab = { true } // Optional boolean determining if links will open in a new tab
  zIndex = { 1000 } // Optional number assigned to the z-index of the search modal
  isSummaryToggleVisible = { true } // Optional boolean determining if users can summarize search results
  rerankingConfiguration = { {
    rerankerId : 272725718
  } }
/ > ; 

Options de configuration

customerId (obligatoire)

Chaque compte Vectara est associé à un identifiant client. Vous pouvez trouver votre identifiant client en vous connectant à la console Vectara et en ouvrant la liste déroulante de votre compte dans le coin supérieur droit.

corpusId (obligatoire)

Après avoir créé un corpus, vous pouvez trouver son identifiant en accédant au corpus et en regardant dans le coin supérieur gauche, à côté du nom du corpus.

apiKey (obligatoire)

Les clés API permettent aux applications d’accéder aux données contenues dans les corpus. Découvrez comment créer une clé API QueryService .

apiUrl (facultatif)

Par défaut, React-Search envoie des requêtes de requête aux serveurs Vectara. Si vous souhaitez utiliser un serveur proxy, vous pouvez configurer cette option avec l'URL de votre proxy.

placeholder (facultatif)

Configurez le texte d'espace réservé dans l'entrée du modal de recherche.

isDeepLinkable (facultatif)

La valeur par défaut est false . Définissez cette option si vous souhaitez conserver une requête de recherche dans un paramètre d'URL. Cela permettra aux utilisateurs de partager ou de mettre l’URL dans leurs favoris. Le chargement de l'URL ouvrira automatiquement le modal de recherche et recherchera la requête stockée dans l'URL.

openResultsInNewTab (facultatif)

La valeur par défaut est false . Définissez cette option si vous souhaitez qu'un résultat de recherche s'ouvre dans un nouvel onglet.

zIndex (facultatif)

Définissez le z-index du modal de recherche.

onToggleSummary (facultatif)

Accepte un rappel qui recevra un argument booléen indiquant si la bascule « Résumer les résultats de la recherche » est activée.

isSummaryToggleVisible (facultatif)

Si les utilisateurs pourront ou non résumer les résultats de la recherche.

isSummaryToggleInitiallyEnabled (facultatif)

Si les utilisateurs peuvent activer/désactiver le résumé, indiquez si la bascule doit être activée par défaut.

rerankingConfiguration (facultatif)

Spécifie un reclassement des résultats de recherche à utiliser, ainsi que sa configuration. Pour plus d'informations, consultez nos documents sur le reclassement.

Alimentez votre propre interface utilisateur de recherche avec le hook useSearch

Installez React-Search :

npm install --save @vectara/react-search

Utilisez ensuite le hook useSearch dans votre application comme ceci :

 import { useSearch } from "@vectara/react-search/lib/useSearch" ;

/* snip */

const { fetchSearchResults , isLoading } = useSearch (
  "CUSTOMER_ID" ,
  "CORPUS_ID" ,
  "API_KEY" ,
  "API_URL" , // optional
  { rerankerId : 12345 } // optional
) ;

Les valeurs renvoyées par le hook peuvent être transmises à vos composants personnalisés en tant qu'accessoires ou utilisées comme vous le souhaitez.

Valeurs du crochet

fetchSearchResults : async (query: string, summarize: boolean) => Promise<{ searchResults: DeserializedSearchResult[]; summary?: string }>

Ceci est utilisé pour envoyer un message à l'API de recherche. Lorsque la recherche réussit, un objet composé d'un tableau de résultats de recherche et d'un résumé facultatif est renvoyé. Chaque résultat de recherche est un objet DeserializedSearchResult . Plus d’informations sur les types peuvent être trouvées ici.

isLoading : boolean

Une valeur booléenne indiquant si une demande de recherche est toujours en attente ou non

Utilisation avec les frameworks SSR

L'utilisation de React-Search avec les frameworks SSR peut nécessiter une infrastructure supplémentaire. Voici quelques pièges courants :

Suivant.js

React-Search propose une variante ReactSearchNext compatible avec Next.js. Il accepte les mêmes accessoires que ReactSearch .

Il peut être importé sous la forme :

 import { ReactSearchNext } from "@vectara/react-search/lib/ReactSearchNext" ;

En plus d'utiliser ce composant compatible Next.js, vous devrez également utiliser la directive "use client" dans le fichier qui importe ReactSearchNext .

Configurez vos données de recherche

React-Search extrait les données de votre corpus Vectara. Pour configurer cela :

1. Créez un compte Vectara gratuit.
2. Créez un corpus et ajoutez-y des données.
3. Créez une clé API QueryService .

Conseil de pro : après avoir créé une clé API, accédez à votre corpus et cliquez sur l'onglet "Contrôle d'accès". Recherchez votre clé API en bas et sélectionnez l'option « Copier tout » pour copier votre identifiant client, votre identifiant de corpus et votre clé API. Cela vous donne toutes les données dont vous avez besoin pour configurer votre instance <ReactSearch /> .

Comment utiliser les métadonnées

Vectara vous permet de définir des métadonnées sur vos documents. React-Search se comporte différemment en fonction de la présence de champs de métadonnées spécifiques :

• title : Si ce champ est défini, il sera rendu comme le titre d'un résultat de recherche. Il s'agit généralement du titre du document ou de la page Web.
• url : Si ce champ est défini, React-Search affichera le résultat de la recherche sous forme de lien vers l'URL définie.

Entretien

Cette base de code est livrée avec un environnement de développement pour faciliter les améliorations et les corrections de bugs. Il permet aux responsables d'itérer rapidement sur le code et de vérifier instantanément les modifications.

Exécution de l'environnement de développement

Depuis le répertoire racine, exécutez :

 npm install

Cela installera toutes les dépendances nécessaires à la création du composant et à l'exécution de l'environnement de développement. Une fois cette opération terminée, exécutez :

 npm run docs

Cela lance une application exécutée sur http://localhost:8080/ . Vos dernières modifications seront reflétées ici.

Apporter des modifications au composant

Une fois l'environnement de développement exécuté, toute modification apportée aux fichiers .ts et .tsx dans le répertoire /src déclenchera une reconstruction du composant et un rechargement de la page Web.

De plus, toute modification apportée au code source de l'application de développement dans /docs/index.tsx déclenchera également une reconstruction + un rechargement.

Licence

Vectara React-Search est un logiciel open source sous licence Apache 2.0.

Ce référentiel contient des exemples de code qui peuvent vous aider à créer des interfaces utilisateur optimisées par Vectara et est sous licence Apache 2.0. Sauf disposition contraire de la loi applicable ou accord écrit, le logiciel distribué sous la licence est distribué « EN L'ÉTAT », SANS GARANTIE OU CONDITION D'AUCUNE SORTE, expresse ou implicite. Consultez la licence pour connaître la langue spécifique régissant les autorisations et les limitations en vertu de la licence.