Conversa

Pergunta, resposta chegando aos poucos e as ações de copiar, refazer e curtir.

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

Exemplo

Resuma o relatório do mês.

A receita cresceu 12% sobre o mês anterior, puxada pelos planos anuais. O custo de suporte caiu e o churn ficou estável em 2%. Recomendo manter o ritmo e revisar os preços no próximo trimestre.

Conversa com o agente

Bolha do usuário, resposta em streaming e ações de copiar, refazer e curtir ao final.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-chat" role="group" aria-label="Demonstração: conversa com o agente">
    <div class="u-ai-chat">
      <div class="u-ai-ask u-ai-x">Resuma o relatório do mês.</div>
      <div class="u-ai-reply">
        <span class="u-ai-reply__av"><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>
        <div class="u-ai-reply__body">
          <span class="u-ai-dots u-ai-reply__typing" aria-hidden="true" hidden><i></i><i></i><i></i></span>
          <p class="u-ai-reply__text">A receita cresceu 12% sobre o mês anterior, puxada pelos planos anuais. O custo de suporte caiu e o churn ficou estável em 2%. Recomendo manter o ritmo e revisar os preços no próximo trimestre.</p>
          <div class="u-ai-acts">
            <button class="u-ai-act u-ai-x" type="button" data-act="copy" aria-label="Copiar resposta"><svg class="u-ai-ico cp" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h8"/></svg><svg class="u-ai-ico ok" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width:2.2"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button>
            <button class="u-ai-act u-ai-x" type="button" data-act="redo" aria-label="Refazer resposta"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 0 0-14.5-3.5M4 4v4h4M4 13a8 8 0 0 0 14.5 3.5M20 20v-4h-4"/></svg></button>
            <button class="u-ai-act u-ai-x" type="button" data-act="like" aria-pressed="false" aria-label="Curtir resposta"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 11v9H4v-9zM7 11l4-8c1.5 0 2.5 1 2.2 2.5L12.7 9H19a2 2 0 0 1 2 2.4l-1.3 6.6A2 2 0 0 1 17.7 20H7"/></svg></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Conversa com o agente</h3>
    <p class="u-ai-card__desc">Bolha do usuário, resposta em streaming e ações de copiar, refazer e curtir ao final.</p>
  </div>
</article>

Instalação

Conversa 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-chat

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-ask`	Balão da pergunta.
`.u-ai-reply`	Resposta: __av (avatar), __body, __text, __typing.
`.u-ai-acts > button.u-ai-act`	Ações, com `data-act` copy, redo ou like.

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ê.
botão like	`aria-pressed`	Alterna curtido.

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.