Busca na web
A contrapartida da pesquisa para a Lista de Tarefas: onde esse loga o trabalho que um agente fez, este loga onde ele foi. Cada passo é uma consulta que ele correu ou uma página que ele abriu, e um passo que encontrou algo se ramifica mais uma vez em suas fontes, mostrado como marcas de sites sobrepostas, de modo que um tópico Reddit lê como um sem ninguém analisar um domínio.
Em uma conversa
O envio da mensagem inicia a trilha, o fluxo de fontes sob o turno do usuário e a resposta aguarda onCompletePartilha a sua revelação, a sua borda de recorte e o seu guia curvo com a Lista de Tarefas, para que os dois possam sentar-se numa única linha sem se parecerem com dois produtos diferentes.
Instalação
A Web Search faz parte do BoardUI Pro.
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Fontes
Dê um passo sources e ele ramifica mais uma vez, em uma linha de fontes carregando as marcas como uma pilha sobreposta. Uma tabela de cinco URLs é a coisa mais pesada que pode aparecer em um thread e ninguém o lê no meio do run; o que um leitor quer de relance é onde o agente olhou, que as marcas reconhecíveis respondem instantaneamente. Cada um carrega seu título e domínio no hover, levanta livre de seus vizinhos, e se torna um link quando você passa um hrefPassados seis, o resto entra em colapso.
{ label: "Component library pricing", meta: "5 results", sources: [ { title: "Tailwind UI vs building your own", domain: "www.reddit.com", brand: "reddit", href: "…" }, { title: "We shipped our design system in 6 weeks", domain: "www.linkedin.com", brand: "linkedin" }, { title: "shadcn/ui — the registry model", domain: "github.com", brand: "github" }, ],}Marcas de locais
brand desenha o logotipo real de um site a partir da mesma marca 24 que define o uso dos botões sociais, na cor do próprio site. O punhado cuja cor da marca é preta pega a cor do texto e inverte com o tema, que é o que as suas próprias diretrizes pedem. ícone.
// Any of the 24 marks the design system already draws.{ label: "Searched Reddit for", query: "component library", brand: "reddit" }{ label: "Searched X for", query: "design tokens", brand: "x" }{ label: "Checked the repo", brand: "github" }
// Anything else takes a plain icon instead.{ label: "Ran 3 searches", icon: RiSearchLine }Deslocamento
Uma pesquisa que atinge o cache e que arrasta cinco páginas não leva o mesmo tempo, e um log que marcha em um tempo fixo lê como uma lista sendo impressa em vez de como trabalho acontecendo. Dê um passo dwell e a trilha fica lá por muito mais tempo, brilhando o tempo todo, antes que o próximo caia. Um passo com fontes se divide em dois: o passo, então suas Fontes remam uma batida mais tarde.
Enquanto a pesquisa corre, um indicador do Agent Thinking fica na cauda da trilha e se move para baixo conforme cada passo pousa, de modo que o log sempre termina no que está sendo trabalhado em vez da última coisa terminada. Sai quando a execução terminar. Passe working para a remarcar, ou false Para largar isso.
const steps = [ { label: "Ran 3 searches", icon: RiSearchLine, heading: true, dwell: 2200 }, { label: "Searching for what teams pay for", meta: "5 results", dwell: 2400, sources }, { label: "Searched X for", query: "design system pricing", brand: "x", dwell: 1900 },];Impulsioná-lo de eventos reais
Os poços ainda são um substituto para a latência real. Uma vez que você tem uma transmissão ao vivo, passe revealed e avançá-la conforme cada consulta resolve; o temporizador interno desliga e cada animação permanece o mesmo. Conta linhas, então um passo carregando fontes é duas delas.
// One unit per row, so a step that found sources is two: the step,// then its Sources row a beat later. Advance it as each query resolves// and the internal timer stays out of the way.<WebSearch steps={steps} revealed={rowsSeen} />