---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 55
titulo: "Chat — `estável` (F7.3, 2026-08-15) · CH1–CH14 · arquétipo A23"
sequencia: 61 de 98
bytes_do_corpo: 9448
md5_do_corpo: 607b9f00221cb286a02849cd6d9831d7
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 55. 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.md` e **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 do `estudo-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-live` polite implícito, `aria-atomic` false, região nomeada por
> `aria-labelledby`, e o campo de entrada relacionado por `aria-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.html` traziam 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.*