Chamada de ferramenta

Ferramenta rodando com passos que passam de pendente a concluído.

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

Exemplo

buscar_clientessegmento: "agro" Concluído

Validar parâmetros0,3s
Consultar a base0,5s
Filtrar resultados0,4s
Montar resposta0,2s

Chamada de ferramenta

Estados pendente, rodando e concluído, com a lista de passos avançando um a um.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-tool" role="group" aria-label="Demonstração: chamada de ferramenta">
    <div class="u-ai-tile u-ai-tool">
      <div class="u-ai-tool__head">
        <span class="u-ai-tool__icon"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6l6 6-6 6M12 18h8"/></svg></span>
        <span class="u-ai-tool__name"><span>buscar_clientes</span><small>segmento: "agro"</small></span>
        <span class="u-ai-badge" data-state="done"><span class="u-ai-spin"></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-badge__l">Concluído</span></span>
      </div>
      <ul class="u-ai-steps">
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Validar parâmetros<span class="u-ai-step__t">0,3s</span></li>
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Consultar a base<span class="u-ai-step__t">0,5s</span></li>
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Filtrar resultados<span class="u-ai-step__t">0,4s</span></li>
        <li class="u-ai-step" data-state="done"><span class="u-ai-step__st"><i class="pend"></i><i class="u-ai-spin run"></i><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Montar resposta<span class="u-ai-step__t">0,2s</span></li>
      </ul>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Chamada de ferramenta</h3>
    <p class="u-ai-card__desc">Estados pendente, rodando e concluído, com a lista de passos avançando um a um.</p>
  </div>
</article>

Instalação

Chamada de ferramenta 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-tool

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-tool`	O bloco, com __head e __name.
`.u-ai-badge[data-state]`	running ou done.
`ul.u-ai-steps > li.u-ai-step[data-state]`	running ou done. Sem `data-state` é pendente.

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ê.
passos	`data-state`	O estado é atributo, lido também pelo CSS.

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.