react search

Reaccionar-Buscar

React-Search es un widget de interfaz de usuario para agregar búsqueda semántica impulsada por Vectara a sus aplicaciones React con unas pocas líneas de código.

Consejo

¿Buscas algo más? Pruebe con otro proyecto de código abierto:

• React-Chatbot : agregue un widget de chatbot compacto con tecnología Vectara a sus aplicaciones React.
• Create-UI : la forma más rápida de generar una base de código de React funcional para una variedad de UI de búsqueda generativa y semántica.
• Respuesta de Vectara : aplicación de demostración para búsqueda semántica resumida con opciones de configuración avanzadas.
• Vectara Ingest : plantillas de muestra y rastreadores para extraer datos de muchas fuentes de datos populares.

Manifestación

¡Pruebe la demostración!

interfaz de usuario

La entrada de búsqueda se ve así:

Cuando el usuario hace clic en la entrada de búsqueda, recibe un mensaje de búsqueda como este:

Los resultados de la búsqueda se ven así:

Úselo en su aplicación

Utilice el componente de búsqueda directamente

Instalar reaccionar-búsqueda:

npm install --save @vectara/react-search

Luego úselo en su aplicación de esta manera:

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

Opciones de configuración

customerId (obligatorio)

Cada cuenta de Vectara está asociada con una identificación de cliente. Puede encontrar su ID de cliente iniciando sesión en Vectara Console y abriendo el menú desplegable de su cuenta en la esquina superior derecha.

corpusId (obligatorio)

Después de crear un corpus, puede encontrar su ID navegando hasta el corpus y mirando en la esquina superior izquierda, junto al nombre del corpus.

apiKey (obligatorio)

Las claves API permiten que las aplicaciones accedan a datos dentro de los corpus. Aprenda a crear una clave API de QueryService .

apiUrl (opcional)

De forma predeterminada, React-Search envía solicitudes de consulta a los servidores de Vectara. Si desea utilizar un servidor proxy, puede configurar esta opción con la URL de su proxy.

placeholder (opcional)

Configure el texto del marcador de posición en la entrada del modo de búsqueda.

isDeepLinkable (opcional)

El valor predeterminado es false . Configure esta opción si desea conservar una consulta de búsqueda en un parámetro de URL. Esto permitirá a los usuarios compartir o marcar la URL como favorita. Al cargar la URL se abrirá automáticamente el modo de búsqueda y se buscará la consulta almacenada en la URL.

openResultsInNewTab (opcional)

El valor predeterminado es false . Configure esta opción si desea que un resultado de búsqueda se abra en una nueva pestaña.

zIndex (opcional)

Defina el índice z del modal de búsqueda.

onToggleSummary (opcional)

Acepta una devolución de llamada que recibirá un argumento booleano que indica si la opción "Resumir resultados de búsqueda" está habilitada.

isSummaryToggleVisible (opcional)

Si los usuarios podrán resumir los resultados de la búsqueda o no.

isSummaryToggleInitiallyEnabled (opcional)

Si los usuarios pueden alternar el resumen, si la alternancia debería estar habilitada de forma predeterminada.

rerankingConfiguration (opcional)

Especifica un reordenador de resultados de búsqueda que se utilizará, junto con su configuración. Para obtener más información, consulte nuestros documentos sobre reclasificación.

Potencia tu propia interfaz de usuario de búsqueda con el gancho useSearch

Instalar reaccionar-búsqueda:

npm install --save @vectara/react-search

Luego use el gancho useSearch en su aplicación de esta manera:

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

Los valores devueltos por el gancho pueden pasarse a sus componentes personalizados como accesorios o usarse de la forma que desee.

Valores de gancho

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

Esto se utiliza para enviar un mensaje a la API de búsqueda. Cuando la búsqueda tiene éxito, se devuelve un objeto que consta de una matriz de resultados de búsqueda y un resumen opcional. Cada resultado de búsqueda es un objeto DeserializedSearchResult . Puede encontrar más información sobre los tipos aquí.

está cargando: boolean

Un valor booleano que indica si una solicitud de búsqueda aún está pendiente o no.

Uso con marcos SSR

El uso de React-Search con marcos SSR puede requerir infraestructura adicional. Aquí hay algunos errores comunes:

Siguiente.js

React-Search ofrece una variante de ReactSearchNext que es compatible con Next.js. Acepta los mismos accesorios que ReactSearch .

Se puede importar como:

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

Además de utilizar este componente compatible con Next.js, también deberá utilizar la directiva "use client" en el archivo que importa ReactSearchNext .

Configura tus datos de búsqueda

React-Search extrae datos de su corpus Vectara. Para configurar esto:

1. Crea una cuenta Vectara gratuita.
2. Cree un corpus y agréguele datos.
3. Cree una clave API de QueryService .

Consejo profesional: después de crear una clave API, navegue hasta su corpus y haga clic en la pestaña "Control de acceso". Busque su clave API en la parte inferior y seleccione la opción "Copiar todo" para copiar su ID de cliente, ID de corpus y clave API. Esto le brinda todos los datos que necesita para configurar su instancia <ReactSearch /> .

Cómo utilizar metadatos

Vectara le permite definir metadatos en sus documentos. React-Search se comporta de manera diferente según la presencia de campos de metadatos específicos:

• title : si este campo está definido, se representará como el título de un resultado de búsqueda. Normalmente, esto es algo así como el título del documento o página web.
• url : si este campo está definido, React-Search mostrará el resultado de la búsqueda como un enlace a la URL definida.

Mantenimiento

Esta base de código viene con un entorno de desarrollo para facilitar mejoras y corrección de errores. Permite a los mantenedores iterar rápidamente el código y verificar los cambios al instante.

Ejecutando el entorno de desarrollo

Desde el directorio raíz, ejecute:

 npm install

Esto instalará todas las dependencias necesarias para construir el componente y ejecutar el entorno de desarrollo. Una vez que esto se complete, ejecute:

 npm run docs

Esto activa una aplicación que se ejecuta en http://localhost:8080/ . Sus últimos cambios se reflejarán aquí.

Realizar cambios en el componente

Una vez que el entorno de desarrollo se esté ejecutando, cualquier cambio realizado en los archivos .ts y .tsx en el directorio /src desencadenará una reconstrucción del componente y una recarga de la página web.

Además, cualquier cambio en el código fuente de la aplicación de desarrollo en /docs/index.tsx también activará una reconstrucción y recarga.

Licencia

Vectara React-Search es un software de código abierto con licencia Apache 2.0.

Este repositorio contiene código de muestra que puede ayudarle a crear interfaces de usuario impulsadas por Vectara y tiene la licencia Apache 2.0. A menos que lo exija la ley aplicable o se acuerde por escrito, el software distribuido bajo la Licencia se distribuye "TAL CUAL", SIN GARANTÍAS NI CONDICIONES DE NINGÚN TIPO, ya sean expresas o implícitas. Consulte la Licencia para conocer el idioma específico que rige los permisos y limitaciones de la Licencia.