Componentes
55. Chat
seed-componentes.md v1.43 · §55seção 61 de 9855-chat-estavel-f7-3-2026-08-15-ch1-ch14-arquetipo.md · MD5 607b9f00Título completo no canon: Chat — estável (F7.3, 2026-08-15) · CH1–CH14 · arquétipo A23
Contexto para leitor novo. O A23 (chat/mensageria) estava marcado como AUSENTE no
mapa-cobertura-ds.mde DENTRO do escopo pela decisão D5 do Rafael de 2026-08-15: "vamos ter construção de app de chat, mesmo que não fique dentro do ERP (…) estamos criando DS para suprir templates, blocos que padronizam o uso para qualquer tipo de criação". Esta é a primeira spec do projeto escrita a partir de LEITURA VISUAL — os dispositivos C41–C49 da §13 doestudo-clickup-completo.md, observados navegando no produto de referência — e não de extração de valores. A distinção importa: onde o número for necessário, ele será medido na produção do gabarito, e a spec diz apenas a relação.Base normativa (rodada de 2026-08-15): ARIA23 do W3C (
role="log"para atualização sequencial:aria-livepolite implícito,aria-atomicfalse, região nomeada poraria-labelledby, e o campo de entrada relacionado poraria-controls) · MDN log role (aria-atomic="true"só quando o usuário precisa ouvir a região inteira a cada mudança) · Sara Soueidan (live region é último recurso, não primeiro — onde houver alternativa estrutural, ela vence).
55.1 O bloco#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| CH1 | O chat tem duas formas declaradas: PAINEL (peça lateral que encosta e recolhe, sobre a tela viva) e TELA (arquétipo próprio, ocupando a região de conteúdo). A mesma conversa cabe nas duas | Observado nas duas formas no produto de referência, com o mesmo conteúdo. Painel serve "perguntar sobre isto"; tela serve "trabalhar aqui dentro" | Só modal (perde o contexto de origem) · só tela (obriga a sair do trabalho para perguntar) |
| CH2 | Na forma PAINEL, o fechamento é recolhimento lateral (»), nunca ×, e o painel volta ao mesmo estado |
O gesto promete volta; × promete descarte. Painel que preserva conversa não pode usar o símbolo de fechar |
× (mente sobre o que acontece) |
| CH3 | O painel é peça no vocabulário do CP2 — separa-se do canvas pelo par sombra+anel (CP17) e não empurra o conteúdo: sobrepõe-se a ele | É peça lateral, não coluna do shell; se empurrasse, mudaria o layout da tela de trabalho a cada abertura | Coluna do miolo (reflui a tela toda) |
55.2 O histórico#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| CH4 | A área de mensagens é role="log", nomeada por aria-labelledby, com aria-atomic="false" |
ARIA23: é o papel desenhado para atualização sequencial em que o novo entra no fim. O aria-live polite é implícito — declarar assertive interromperia a leitura a cada mensagem |
aria-live="assertive" (interrompe) · role="feed" (é para conteúdo infinito paginado, não para conversa) · nenhuma live region (a mensagem chega em silêncio) |
| CH5 | Mensagem própria e alheia diferem por ALINHAMENTO E SUPERFÍCIE, nunca só por cor | Regra dos três sinais, herdada: o grayscale tem de sobreviver. E quem usa leitor de tela precisa do autor no texto, não na tinta | Só cor de balão |
| CH6 | Cada mensagem declara autor e hora no texto acessível, ainda que a hora seja visualmente discreta e o autor seja omitido em mensagens consecutivas do mesmo autor | Agrupar visualmente é bom; agrupar no nome acessível apaga a autoria da terceira mensagem em diante | Autor só no primeiro balão do grupo, inclusive para AT |
| CH7 | Estado de envio é do sistema, não decoração: enviando · enviada · falhou, com a falha trazendo ação de repetir. Chip na taxonomia do §22 | Mensagem que falhou e parece enviada é perda de informação silenciosa | Ícone sem rótulo · falha sem ação |
55.3 O composer — o achado que obriga spec própria#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| CH8 | O composer é um CONTÊINER, não um campo. Ele tem borda, raio maior que o dos demais controles, e hospeda dentro de si: o chip de escopo, a área de digitação e um rodapé de ações em três zonas (entrada à esquerda, modelo/modo à direita, enviar) | Observado (C43/C46): o input é uma parte do componente, não o componente. O nosso §8 Campo assume input com rótulo e mensagem e não cabe aqui — daí a spec própria |
Tratar como variante do §8 (o rodapé não teria onde morar) |
| CH9 | O foco pinta o CONTÊINER inteiro, não a linha de digitação | Se só a linha acender, o usuário de teclado não sabe que as ações do rodapé fazem parte do mesmo alvo | Anel só no textarea |
| CH10 | O escopo da conversa é um CHIP DENTRO do composer, visível e removível — nunca implícito | Observado (C47). "O assistente provavelmente está olhando minha lista" e "está olhando ESTA lista, e eu posso tirar" são estados diferentes, e só o segundo é verificável pelo usuário | Escopo no cabeçalho (some ao rolar) · escopo implícito |
| CH11 | O campo relaciona-se ao histórico por aria-controls, e o envio é por Enter, com Shift+Enter para quebra de linha — as duas teclas anunciadas na descrição do campo |
ARIA23 recomenda a relação explícita; e a convenção de Enter/Shift+Enter é forte demais para ser reinventada, mas fraca demais para ser adivinhada por quem nunca usou | Enter como quebra e botão como único envio |
55.4 O estado vazio e as sugestões#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| CH12 | O vazio do chat traz identidade, modo e sugestões — não é um "nenhuma mensagem". As sugestões citam o objeto de contexto pelo nome | Observado (C46): é a prova, antes da primeira mensagem, de que o assistente sabe onde está. Barato de fazer, caro de omitir | Vazio genérico · sugestões descontextualizadas |
| CH13 | A sugestão muda de FORMA conforme o bloco que a hospeda: cartão na TELA, linha no PAINEL. O conteúdo é o mesmo | Observado (C44/C45), e é a leitura mais útil da rodada: cartão pede largura, linha sobrevive em 400px. É o CP27 aparecendo como troca de componente, não só de espaçamento | Cartão nos dois (quebra no painel) · linha nos dois (desperdiça a tela) |
| CH14 | Fronteiras declaradas: anexo, gravação de áudio, menção a pessoa, thread e reação não entram nesta versão. Cada um traz norma própria (upload, mídia com controle, aria-activedescendant no menu de menção) e entra com pesquisa dedicada |
Especificar sem caso real foi o que produziu, em outras seções, spec que ninguém consome | Prever tudo agora |
O que esta spec NÃO decidiu de saída, e por quê: nenhum valor numérico foi escrito antes da produção. A §13 do estudo é leitura de COMPOSIÇÃO, e tratar estimativa visual como medida seria repetir, ao contrário, o erro que originou aquela seção.
55.5 Números — MEDIDOS na produção do gabarito (2026-08-15)#
Todos extraídos por render do tela-chat.html, não estimados:
| O quê | Medido | Consequência |
|---|---|---|
| Largura do painel | 420px | acima de 380px o balão respira; abaixo, a mensagem de três linhas vira cinco |
| O painel SOBREPÕE | provado | a largura da tabela atrás é idêntica com o painel aberto e recolhido — o CH3 deixa de ser promessa |
| Raio do composer | 12px (radius-6) |
maior que o do balão (8px) e que o do botão (6px): o contêiner tem o raio mais alto da tela, como manda o CH8 |
| Borda do composer | 1px | a borda pertence ao contêiner, não ao campo interno |
| Raio do balão | 8px (radius-4), com o canto do lado do autor em 2px |
o canto "mordido" marca a origem sem usar cor |
| Raio do chip de escopo | pílula | escopo é estado, não controle de contorno |
| Altura do composer | 144px com escopo e rodapé | é o custo real de o composer ser contêiner, e ele precisa caber no painel de 420px |
role do histórico |
log, aria-atomic="false", sem aria-live explícito |
o polite é implícito do papel — declará-lo seria redundância que atrapalha auditoria |
aria-controls do campo |
aponta para o log | técnica ARIA23 cumprida |
| CH13, a troca de forma | display vai de block para grid e a altura do item de 38px para 86px quando o contêiner passa de 560px |
a sugestão troca de COMPONENTE, não de espaçamento — é o CP27 no seu caso mais forte |
Errata prevista: estes números entram como rascunho junto com a spec e só se tornam contrato
no gate visual. Se o gate mudar a largura do painel, a tabela acima é reescrita por supersede
formal — não por edição silenciosa.
PROMOÇÃO DO §56 — 2026-08-16, segunda rodada de gate. O primeiro gate desta seção foi feito sobre o arquivo ERRADO: as versões v0.1 e v0.2 do
tela-detalhe.htmltraziam o mesmo selo, e o Rafael abriu a antiga — onde os comentários eram seção estática, sem ação. Corrigido o selo (v0.2) e refeito o gate, o veredito foi "tudo ok, continue". A lição virou regra permanente, registrada na v8.9 do MANIFESTO: mudança de conteúdo do artefato sobe a versão do preview — o MD5 confere identidade, o selo comunica identidade.