Busca na web

Consultas que aparecem uma a uma e as fontes que chegam em seguida.

data-u="ai-search"Demonstração

Exemplo

Correu 3 pesquisas

preço de planos de IA
comparativo de bibliotecas
como medir janela de contexto

exemplo.com docs.exemplo.com.br blog.exemplo.org

Concluído em 2,9s

Busca na web

Consultas do agente e fontes consultadas, exibidas em tempo real com contador de tempo.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-search" role="group" aria-label="Demonstração: busca na web do agente">
    <div class="u-ai-tile u-ai-search">
      <div class="u-ai-search__head"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>Correu 3 pesquisas</div>
      <ul class="u-ai-search__qs">
        <li class="u-ai-search__q u-ai-x"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg><span>preço de planos de IA</span></li>
        <li class="u-ai-search__q u-ai-x"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg><span>comparativo de bibliotecas</span></li>
        <li class="u-ai-search__q u-ai-x"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg><span>como medir janela de contexto</span></li>
      </ul>
      <div class="u-ai-search__srcs">
        <span class="u-ai-src u-ai-x"><i style="background:var(--c1)"></i>exemplo.com</span>
        <span class="u-ai-src u-ai-x"><i style="background:var(--c2)"></i>docs.exemplo.com.br</span>
        <span class="u-ai-src u-ai-x"><i style="background:var(--c3)"></i>blog.exemplo.org</span>
      </div>
      <div class="u-ai-search__status" data-state="done">
        <span class="u-ai-dots" aria-hidden="true"><i></i><i></i><i></i></span>
        <svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
        <span class="u-ai-search__label u-ai-mono">Concluído em 2,9s</span>
      </div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Busca na web</h3>
    <p class="u-ai-card__desc">Consultas do agente e fontes consultadas, exibidas em tempo real com contador de tempo.</p>
  </div>
</article>

Instalação

Busca na web vem no pacote completo, junto com a skill:

curl -fsSL unslop.leallabs.dev/i | sh

O HTML do exemplo, pra colar:

curl -fsSL unslop.leallabs.dev/i | sh -s add ai-search

Usa O bloco é só o HTML. O CSS e o JS vêm de unslop.css e unslop.js do pacote completo.

Classes e variantes

Classe	O que faz
`.u-ai-search`	O bloco: __head, __qs com __q, __srcs com .`u-ai-src`.
`.u-ai-search__status[data-state]`	Linha de status.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
.`u-ai-`card__panel	`role="group"` e `aria-label`	Diz que é uma demonstração e do quê.
status	`data-state`	Muda do buscando ao pronto.

Teclado

Tecla	Faz
Tab	entra no card e pausa a animação enquanto o foco está lá

Movimento

Toca sozinho quando entra na tela, por até 3 ciclos, e para no estado final. Ponteiro em cima ou foco dentro pausam. Com movimento reduzido, mostra direto o estado final.

Eventos e API

Nenhum evento público. Pra um chat de verdade, copie a marcação e ligue o seu estado, sem depender do data-u pra lógica.