Raciocínio

Bloco de raciocínio que escreve, conta o tempo e se recolhe no fim.

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

Exemplo

Compare três bibliotecas de componentes para mim.

O usuário quer comparar três bibliotecas de componentes. Primeiro listo os critérios: peso, acessibilidade e licença. Depois cruzo os dados das fontes e monto uma tabela curta com a recomendação final.

Raciocínio colapsável

O pensamento do agente chega palavra a palavra e se recolhe quando termina.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-thinking" role="group" aria-label="Demonstração: raciocínio do agente">
    <div class="u-ai-ask">Compare três bibliotecas de componentes para mim.</div>
    <div class="u-ai-tile u-ai-think">
      <button class="u-ai-think__head" type="button" aria-expanded="true">
        <svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>
        <span><span class="u-ai-think__label">Pensou por</span> <span class="u-ai-think__time">4s</span></span>
        <svg class="u-ai-ico u-ai-think__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <div class="u-ai-think__body" data-open="true"><div class="u-ai-think__inner">
        <p class="u-ai-think__text">O usuário quer comparar três bibliotecas de componentes. Primeiro listo os critérios: peso, acessibilidade e licença. Depois cruzo os dados das fontes e monto uma tabela curta com a recomendação final.</p>
      </div></div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Raciocínio colapsável</h3>
    <p class="u-ai-card__desc">O pensamento do agente chega palavra a palavra e se recolhe quando termina.</p>
  </div>
</article>

Instalação

Raciocínio 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-thinking

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-think`	O bloco.
`.u-ai-think__head`	Botão que abre e fecha, com o tempo em __time.
`.u-ai-think__body[data-open]`	Corpo, com __inner e __text.

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ê.
cabeçalho	`aria-expanded`	Aberto ou recolhido. Clicar alterna.

Teclado

Tecla	Faz
Tab	foca o cabeçalho e pausa a animação
Enter ou Espaço	abre e recolhe

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.