react search

Reagieren-Suche

React-Search ist ein UI-Widget zum Hinzufügen einer Vectara-basierten semantischen Suche zu Ihren React-Apps mit wenigen Codezeilen.

Tipp

Suchen Sie etwas anderes? Versuchen Sie es mit einem anderen Open-Source-Projekt:

• React-Chatbot : Fügen Sie Ihren React-Apps einen kompakten Chatbot-Widget-Chat mit Vectara-Unterstützung hinzu.
• Create-UI : Der schnellste Weg, eine funktionierende React-Codebasis für eine Reihe generativer und semantischer Such-UIs zu generieren.
• Vectara-Antwort : Demo-App für die zusammengefasste semantische Suche mit erweiterten Konfigurationsoptionen.
• Vectara Ingest : Beispielvorlagen und Crawler zum Abrufen von Daten aus vielen beliebten Datenquellen.

Demo

Probieren Sie die Demo aus!

Benutzeroberfläche

Die Sucheingabe sieht so aus:

Wenn der Benutzer auf die Sucheingabe klickt, erhält er eine Suchaufforderung wie diese:

Suchergebnisse sehen so aus:

Verwenden Sie es in Ihrer Bewerbung

Nutzen Sie direkt die Suchkomponente

Installieren Sie React-Search:

npm install --save @vectara/react-search

Dann verwenden Sie es in Ihrer Anwendung wie folgt:

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

Konfigurationsoptionen

customerId (erforderlich)

Jedem Vectara-Konto ist eine Kunden-ID zugeordnet. Sie finden Ihre Kunden-ID, indem Sie sich bei der Vectara-Konsole anmelden und oben rechts das Dropdown-Menü für Ihr Konto öffnen.

corpusId (erforderlich)

Nachdem Sie ein Korpus erstellt haben, können Sie dessen ID finden, indem Sie zum Korpus navigieren und in der oberen linken Ecke neben dem Korpusnamen nachsehen.

apiKey (erforderlich)

API-Schlüssel ermöglichen Anwendungen den Zugriff auf Daten innerhalb von Korpora. Erfahren Sie, wie Sie einen QueryService- API-Schlüssel erstellen.

apiUrl (optional)

Standardmäßig sendet React-Search Abfrageanfragen an die Vectara-Server. Wenn Sie einen Proxyserver verwenden möchten, können Sie diese Option mit der URL Ihres Proxys konfigurieren.

placeholder (optional)

Konfigurieren Sie den Platzhaltertext in der Eingabe des Suchmodals.

isDeepLinkable (optional)

Der Standardwert ist false . Legen Sie diese Option fest, wenn Sie eine Suchabfrage für einen URL-Parameter beibehalten möchten. Dadurch können Benutzer die URL teilen oder mit einem Lesezeichen versehen. Durch das Laden der URL wird automatisch das Suchmodal geöffnet und nach der in der URL gespeicherten Abfrage gesucht.

openResultsInNewTab (optional)

Der Standardwert ist false . Legen Sie diese Option fest, wenn ein Suchergebnis in einem neuen Tab geöffnet werden soll.

zIndex (optional)

Definieren Sie den Z-Index des Suchmodals.

onToggleSummary (optional)

Akzeptiert einen Rückruf, der ein boolesches Argument empfängt, das angibt, ob der Schalter „Suchergebnisse zusammenfassen“ aktiviert ist.

isSummaryToggleVisible (optional)

Ob Benutzer Suchergebnisse zusammenfassen können oder nicht.

isSummaryToggleInitiallyEnabled (optional)

Wenn Benutzer die Zusammenfassung umschalten können, wird angegeben, ob die Umschaltung standardmäßig aktiviert sein soll.

rerankingConfiguration (optional)

Gibt einen zu verwendenden Reranker für Suchergebnisse sowie dessen Konfiguration an. Weitere Informationen finden Sie in unseren Dokumenten zum Reranking.

Verstärken Sie Ihre eigene Such-Benutzeroberfläche mit dem useSearch-Hook

Installieren Sie React-Search:

npm install --save @vectara/react-search

Verwenden Sie dann den useSearch Hook in Ihrer Anwendung wie folgt:

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

Die vom Hook zurückgegebenen Werte können als Requisiten an Ihre benutzerdefinierten Komponenten weitergegeben oder auf beliebige Weise verwendet werden.

Hook-Werte

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

Dies wird verwendet, um eine Nachricht an die Such-API zu senden. Wenn die Suche erfolgreich ist, wird ein Objekt zurückgegeben, das aus einem Array von Suchergebnissen und einer optionalen Zusammenfassung besteht. Jedes Suchergebnis ist ein DeserializedSearchResult Objekt. Weitere Informationen zu den Typen finden Sie hier.

isLoading: boolean

Ein boolescher Wert, der angibt, ob eine Suchanfrage noch aussteht

Verwendung mit SSR-Frameworks

Die Verwendung von React-Search mit SSR-Frameworks erfordert möglicherweise zusätzliche Infrastruktur. Hier sind einige häufige Fallstricke:

Next.js

React-Search bietet eine ReactSearchNext Variante, die mit Next.js kompatibel ist. Es akzeptiert die gleichen Requisiten wie ReactSearch .

Es kann importiert werden als:

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

Zusätzlich zur Verwendung dieser Next.js-kompatiblen Komponente müssen Sie auch die Anweisung "use client" in der Datei verwenden, die ReactSearchNext importiert.

Richten Sie Ihre Suchdaten ein

React-Search ruft Daten aus Ihrem Vectara-Korpus ab. So richten Sie dies ein:

1. Erstellen Sie ein kostenloses Vectara-Konto.
2. Erstellen Sie einen Korpus und fügen Sie Daten hinzu.
3. Erstellen Sie einen QueryService- API-Schlüssel.

Profi-Tipp: Nachdem Sie einen API-Schlüssel erstellt haben, navigieren Sie zu Ihrem Korpus und klicken Sie auf die Registerkarte „Zugriffskontrolle“. Suchen Sie unten nach Ihrem API-Schlüssel und wählen Sie die Option „Alle kopieren“, um Ihre Kunden-ID, Korpus-ID und Ihren API-Schlüssel zu kopieren. Dadurch erhalten Sie alle Daten, die Sie zum Konfigurieren Ihrer <ReactSearch /> Instanz benötigen.

So verwenden Sie Metadaten

Mit Vectara können Sie Metadaten für Ihre Dokumente definieren. React-Search verhält sich je nach Vorhandensein bestimmter Metadatenfelder unterschiedlich:

• title : Wenn dieses Feld definiert ist, wird es als Titel eines Suchergebnisses gerendert. Typischerweise ist dies so etwas wie der Titel des Dokuments oder der Webseite.
• url : Wenn dieses Feld definiert ist, stellt React-Search das Suchergebnis als Link zur definierten URL dar.

Wartung

Diese Codebasis verfügt über eine Entwicklungsumgebung, um Verbesserungen und Fehlerbehebungen zu ermöglichen. Es ermöglicht Betreuern, den Code schnell zu iterieren und Änderungen sofort zu überprüfen.

Ausführen der Entwicklungsumgebung

Führen Sie im Stammverzeichnis Folgendes aus:

 npm install

Dadurch werden alle Abhängigkeiten installiert, die zum Erstellen der Komponente und zum Ausführen der Entwicklungsumgebung erforderlich sind. Sobald dies abgeschlossen ist, führen Sie Folgendes aus:

 npm run docs

Dadurch wird eine Anwendung gestartet, die unter http://localhost:8080/ ausgeführt wird. Ihre letzten Änderungen werden hier angezeigt.

Änderungen an der Komponente vornehmen

Sobald die Entwicklungsumgebung ausgeführt wird, lösen alle an den .ts- und .tsx-Dateien im Verzeichnis /src vorgenommenen Änderungen eine Neuerstellung der Komponente und ein Neuladen der Webseite aus.

Darüber hinaus lösen alle Änderungen am Quellcode der Entwicklungs-App unter /docs/index.tsx auch einen Neuaufbau und ein Neuladen aus.

Lizenz

Vectara React-Search ist eine Open-Source-Software, die unter der Apache 2.0-Lizenz lizenziert ist.

Dieses Repository enthält Beispielcode, der Ihnen beim Erstellen von Vectara-basierten Benutzeroberflächen helfen kann, und ist unter der Apache 2.0-Lizenz lizenziert. Sofern nicht durch geltendes Recht vorgeschrieben oder schriftlich vereinbart, wird die im Rahmen der Lizenz vertriebene Software „WIE BESEHEN“ und OHNE GEWÄHRLEISTUNGEN ODER BEDINGUNGEN JEGLICHER ART, weder ausdrücklich noch stillschweigend, vertrieben. Die spezifische Sprache, die die Berechtigungen und Einschränkungen im Rahmen der Lizenz regelt, finden Sie in der Lizenz.