react search

Pesquisa de reação

React-Search é um widget de UI para adicionar pesquisa semântica baseada em Vectara aos seus aplicativos React com algumas linhas de código.

Dica

Procurando por outra coisa? Experimente outro projeto de código aberto:

• React-Chatbot : Adicione um widget de chatbot compacto com tecnologia Vectara aos seus aplicativos React.
• Create-UI : A maneira mais rápida de gerar uma base de código React funcional para uma variedade de UIs de pesquisa generativa e semântica.
• Resposta Vectara : aplicativo de demonstração para pesquisa semântica resumida com opções de configuração avançadas.
• Vectara Ingest : modelos de amostra e rastreadores para extrair dados de muitas fontes de dados populares.

Demonstração

Experimente a demonstração!

IU

A entrada de pesquisa é semelhante a esta:

Quando o usuário clica na entrada de pesquisa, ele recebe um prompt de pesquisa como este:

Os resultados da pesquisa são assim:

Use-o em sua aplicação

Use o componente de pesquisa diretamente

Instale o React-Search:

npm install --save @vectara/react-search

Em seguida, use-o em seu aplicativo assim:

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

Opções de configuração

customerId (obrigatório)

Cada conta Vectara está associada a um ID de cliente. Você pode encontrar seu ID de cliente fazendo login no Vectara Console e abrindo o menu suspenso de sua conta no canto superior direito.

corpusId (obrigatório)

Depois de criar um corpus, você pode encontrar seu ID navegando até o corpus e olhando no canto superior esquerdo, próximo ao nome do corpus.

apiKey (obrigatório)

As chaves de API permitem que os aplicativos acessem dados dentro dos corpora. Saiba como criar uma chave de API QueryService .

apiUrl (opcional)

Por padrão, o React-Search envia solicitações de consulta aos servidores Vectara. Se quiser usar um servidor proxy, você pode configurar esta opção com a URL do seu proxy.

placeholder (opcional)

Configure o texto do espaço reservado na entrada do modal de pesquisa.

isDeepLinkable (opcional)

O padrão é false . Defina esta opção se desejar persistir uma consulta de pesquisa para um parâmetro de URL. Isso permitirá que os usuários compartilhem ou marquem o URL. Carregar o URL abrirá automaticamente o modal de pesquisa e procurará a consulta armazenada no URL.

openResultsInNewTab (opcional)

O padrão é false . Defina esta opção se desejar que um resultado de pesquisa seja aberto em uma nova guia.

zIndex (opcional)

Defina o índice z do modal de pesquisa.

onToggleSummary (opcional)

Aceita um retorno de chamada que receberá um argumento booleano indicando se a alternância "Resumir resultados da pesquisa" está habilitada.

isSummaryToggleVisible (opcional)

Se os usuários serão capazes de resumir os resultados da pesquisa ou não.

isSummaryToggleInitiallyEnabled (opcional)

Se os usuários puderem alternar o resumo, se a alternância deve ser habilitada por padrão.

rerankingConfiguration (opcional)

Especifica um reclassificador de resultados de pesquisa a ser usado, juntamente com sua configuração. Para obter mais informações, consulte nossos documentos sobre reclassificação.

Potencialize sua própria interface de pesquisa com o gancho useSearch

Instale o React-Search:

npm install --save @vectara/react-search

Em seguida, use o gancho useSearch em seu aplicativo assim:

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

Os valores retornados pelo gancho podem ser passados ​​para seus componentes personalizados como adereços ou usados ​​da maneira que você desejar.

Valores de gancho

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

Isso é usado para enviar uma mensagem para a API de pesquisa. Quando a pesquisa for bem-sucedida, um objeto que consiste em uma matriz de resultados de pesquisa e um resumo opcional será retornado. Cada resultado da pesquisa é um objeto DeserializedSearchResult . Mais informações sobre os tipos podem ser encontradas aqui.

isLoading: boolean

Um valor booleano que indica se uma solicitação de pesquisa ainda está pendente ou não

Uso com estruturas SSR

O uso do React-Search com estruturas SSR pode exigir infraestrutura adicional. Aqui estão algumas dicas comuns:

Próximo.js

React-Search oferece uma variante ReactSearchNext compatível com Next.js. Ele aceita os mesmos adereços que ReactSearch aceita.

Pode ser importado como:

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

Além de usar este componente compatível com Next.js, você também precisará usar a diretiva "use client" no arquivo que importa ReactSearchNext .

Configure seus dados de pesquisa

React-Search extrai dados do seu corpus Vectara. Para configurar isso:

1. Crie uma conta Vectara gratuita.
2. Crie um corpus e adicione dados a ele.
3. Crie uma chave de API QueryService .

Dica profissional: depois de criar uma chave API, navegue até seu corpus e clique na guia “Controle de acesso”. Encontre sua chave de API na parte inferior e selecione a opção "Copiar tudo" para copiar seu ID de cliente, ID de corpus e chave de API. Isso fornece todos os dados necessários para configurar sua instância <ReactSearch /> .

Como usar metadados

Vectara permite definir metadados em seus documentos. O React-Search se comporta de maneira diferente com base na presença de campos de metadados específicos:

• title : Se este campo for definido, ele será renderizado como o título de um resultado de pesquisa. Normalmente é algo como o título do documento ou página da web.
• url : se este campo for definido, o React-Search renderizará o resultado da pesquisa como um link para o URL definido.

Manutenção

Esta base de código vem com um ambiente de desenvolvimento para facilitar melhorias e correções de bugs. Ele permite que os mantenedores iterem rapidamente no código e verifiquem as alterações instantaneamente.

Executando o ambiente de desenvolvimento

No diretório raiz, execute:

 npm install

Isso instalará todas as dependências necessárias para construir o componente e executar o ambiente de desenvolvimento. Quando isso for concluído, execute:

 npm run docs

Isso ativa um aplicativo em execução em http://localhost:8080/ . Suas últimas alterações serão refletidas aqui.

Fazendo alterações no componente

Assim que o ambiente de desenvolvimento estiver em execução, quaisquer alterações feitas nos arquivos .ts e .tsx no diretório /src acionarão uma reconstrução do componente e um recarregamento da página da web.

Além disso, quaisquer alterações no código-fonte do aplicativo de desenvolvimento em /docs/index.tsx também acionarão uma reconstrução e recarga.

Licença

Vectara React-Search é um software de código aberto licenciado sob a licença Apache 2.0.

Este repositório contém código de amostra que pode ajudá-lo a construir UIs com tecnologia Vectara e é licenciado sob a licença Apache 2.0. A menos que exigido pela lei aplicável ou acordado por escrito, o software distribuído sob a Licença é distribuído "COMO ESTÁ", SEM GARANTIAS OU CONDIÇÕES DE QUALQUER TIPO, expressas ou implícitas. Consulte a Licença para saber o idioma específico que rege as permissões e limitações da Licença.