Componentes
94. Mensageria de atendimento
estável
seed-componentes.md v2.00 · §94seção 179 de 18494-mensageria-de-atendimento-estavel-decidida-em-9.md · MD5 1486610aTítulo completo no canon: Mensageria de atendimento — estável (decidida em 9 de 10 perguntas em 2026-10-10; a Q10, veto geral, ficou sem observação de veto na folha de 2026-10-10 gravada às 11:22Z; marcador da sessão, exposto a veto, MANIFESTO §302) · MS1–MS40 · irmã do §55 (chat com assistente) · pedidos PC-2026-0007 (LC-15, LC-16), PC-2026-0010 (LC-19) e PC-2026-0017 · tela de referência tela-mensageria.html e instrumento suite-mensageria.mjs (ver 94.12)
Contexto para leitor novo. O DS tem um chat com assistente (§55, CH1–CH14). O SEED Chat é outra coisa: uma conversa entre pessoas, com lista de conversas e atendente. O decisor mandou o DS seguir o produto, e não o contrário (MANIFESTO §241, verbatim: "quando formos construir algum chat para o ERP, vamos usar o SEED Chat como modelo, não o contrario."). Esta seção nasceu do estudo G9-11 (2026-09-24, base
767babd), arquivado em09-pesquisa/2026-09-24-grupo-9/lc-chat/(propostaPROPOSTA-CANON.md, pranchaprancha.html, fontes datadas emPESQUISA.md, pares de contraste empares-medidos.md, relatóriorelatorios/G9-11-RELATORIO.md). Prefixo MS (medido em 2026-10-10: 0 ocorrências de**MS<n>**noseed-componentes.mdantes desta seção). Siglas: LC linha de lacuna de cobertura do roadmap · PC pedido de cobertura · CH decisões do §55 · MA do §93 (material) · SH do §46 (shell) · CP doseed-composicao.md· SC critério de sucesso do WCAG · AX árvore de acessibilidade · RC régua de contraste por pixel (§93).Veredito dele, verbatim (colado no chat em 2026-10-10 ~01:47Z, sobre a prancha de 2026-09-24): "Q1 a, Q2 c, Q3 b, Q4 a, Q5 a, Q6 a, Q7 a, Q8 a, Q9 a, Q10 sem resposta". O que cada letra significa está na
prancha-fonte.htmlda pasta do estudo (linhas 233–355); a tabela abaixo as traduz.
Q pergunta opção dele o que ela diz Q1 o princípio entra como primeira regra a sim, com o limite: anatomia do WhatsApp, aparência do DS, acessibilidade vence Q2 painel lateral direito c fixo em janela larga (≥ 1560 px), sobrepõe abaixo disso Q3 lista de conversas b opaca, pelo MA3 Q4 cabeçalho da conversa a vidro (barra superior do MA1) Q5 tique de "lida" a só muda a cor (como o WhatsApp e o SEED Chat) Q6 o que separa o balão do papel a sombra Q7 divisor de data a pílula Q8 transcrição do áudio a sempre visível sob o áudio Q9 marca de posição do áudio a pino redondo na posição Q10 veto geral — sem resposta Q10: sem veto (folha de 2026-10-10, gravada às 11:22Z, MANIFESTO §302). Tudo o que a prancha mostrou sem pergunta própria (item da lista, cabeçalho, mídia, composer com sugestão da IA, celular) entrou aqui como proposta exposta ao veto geral; cada regra nessa situação leva a marca (veto geral · Q10 sem veto). A folha dele não trouxe observação de veto sobre a Q10: as regras marcadas ficam como decisão da sessão, expostas a veto, e o título da seção passou a
estável(o mesmo marcador do §95).
94.1 Princípio e fronteira#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS1 (Q1 a) | Anatomia e interação seguem o WhatsApp; a aparência é do DS; a acessibilidade vence onde os dois divergem. Onde fica cada coisa, o que cada gesto faz e a ordem das informações vêm do WhatsApp; cor, fonte, raio, sombra, material e ícone vêm dos tokens. Nunca o logotipo, o verde de identidade nem o papel de parede do WhatsApp | Regra do decisor para o chat (PC-2026-0017, verbatim: "a regra principal do chat é que seu layout deve parecer o maximo com o whatsapp, pois o proposito é evitar atrito com o usuário"); a página de marca da Meta regula nome e logotipo, não a anatomia | copiar a aparência (fere a marca SEED e a da Meta) · ignorar o WhatsApp (custo de aprender para quem já opera o WhatsApp todo dia) |
| MS2 (veto geral · Q10 sem veto) | O DS dá a FORMA; o produto dá o conteúdo. Abas do painel, ações do ERP, regras de fila e atribuição e o que a IA diz são do produto. O §55 continua valendo aqui no que cobre: CH4 (histórico role="log"), CH5, CH6, CH7 (estendido pela MS14), CH8, CH9, CH11 (com a exceção do celular, MS34) e CH13 |
Mesma divisão da triagem (MANIFESTO §235.1: "o conteúdo das abas Cliente/Ações/Íris fica fora do DS como decisão de produto") | seção nova que repete o §55 (duas verdades) |
94.2 A forma TELA#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS3 (veto geral · Q10 sem veto) | Três lugares, sempre nos mesmos lugares: rail (§46) · lista de conversas (padrão 30 % da largura útil, redimensionável entre 22 % e 45 %, recolhível) · conversa com o resto. A conversa é a protagonista | WhatsApp Web e SEED Chat (Conversas.tsx:175-199) |
três colunas sempre abertas (a conversa caía a 44 % da tela) |
| MS4 (veto geral · Q10 sem veto) | Uma casca, uma peça: o rail flutua sobre o canvas; lista e conversa vivem na MESMA peça de conteúdo (CP1/CP17), separadas por borda | SEED Chat (CHAT-054) e o gate de 2026-08-15 do DS | lista e conversa como peças soltas sem motivo de material |
| MS5 (Q2 c) | Painel lateral direito do contato: fechado por padrão; abre pelo ⓘ do cabeçalho (aria-pressed); 420 px; abas (§34) com a aba sem conteúdo desabilitada e o motivo no título; recolhe por » (CH2), nunca ×; fechado = inert. SH62b = a; aplicado na leva 45): o comportamento é a regra do §31.4 — empurra a conversa enquanto ela fica ≥ 640 px e sobrepõe abaixo disso (medido em 2026-10-24: a 1700 px empurra; a 1440 e a 1100 px a conversa de 927 e 689 px não encolhe e o painel sobrepõe); e, quando cobre, nasce abaixo do cabeçalho da conversa (64 px), com o ⓘ ligado visível e clicável (SH60 = a, PL9; antes o ⓘ ficava sob o painel nas 3 larguras medidas). Fronteira com o §55: SH62b = a, SH62d = b) não há mais fronteira de comportamento: o painel do assistente (CH3) e o painel do contato seguem a MESMA regra do §31.4; a diferença entre as duas formas fica na peça (PAINEL sobre a tela viva × TELA de atendimento) |
Pedido do decisor ("uma tela sobreposta ou fixa abra na lateral direita", §235.1); Zendesk; WhatsApp Web encolhe a conversa; a conta da largura está na prancha | sempre sobreposto (Q2 a — esconde a conversa em tela larga sem necessidade) · sempre fixo (Q2 b — a conversa fica com ≈ 500 px numa tela de 1440) |
94.3 O item da lista de conversas#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS6 (veto geral · Q10 sem veto) | Anatomia: 76 px; avatar 40 px neutro (§32 AV2/AV3); linha 1 = nome (titulo-secao 16 px, peso 500) + hora (12 px mono: HH:mm hoje, "ontem", dia da semana na semana, dd/MM antes); linha 2 = prévia (14 px, 400) com o tique quando a última mensagem é nossa e ícone + rótulo quando é mídia ("Áudio · 0:13") + estado à direita (fila · encerrada · atendente) + contagem de não lidas |
WhatsApp Web 76 px (avatar 48); SEED Chat ItemDaLista.tsx:74-158 |
avatar 48 (não é degrau do §32) · item de 96 px (2,5 conversas numa tela de 674 px) |
| MS7 (veto geral · Q10 sem veto) | Não lida por PESO + contagem + cor da hora, nunca só cor (nome 600, prévia 500, hora text-brand-strong 700, contagem em pílula action-primary de 20 px, "99+" acima de 99) |
§28 LS5 | só cor da hora (reprova a SC 1.4.1) |
| MS8 (veto geral · Q10 sem veto) | Selecionado: surface-subtle + barra de 3 px em text-brand + aria-current |
surface-subtle mede 1,11 contra o branco e some no cinza (medição do produto, 2026-09-24); a barra é a do SH5, por analogia |
só o fundo |
| MS9 (veto geral · Q10 sem veto) | O item é alvo acessível (Enter e Espaço abrem) e tem menu de contexto (§35) | SEED Chat ItemDaLista.tsx:67-72 |
div clicável sem teclado |
94.4 O cabeçalho da conversa#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS10 (veto geral · Q10 sem veto) | 64 px: [← no celular] · avatar 40 · nome (16 px, 500) · subtítulo de 12 px (código humano · telefone · número · "atendida por …") · ações como ícones de 40 px com aria-label (assumir ou atribuir, analisar, ⓘ, ⋮, fechar a conversa). No celular só ⓘ e ⋮; o resto vai para o menu |
WhatsApp 64 px; SEED Chat CabecalhoDaConversa.tsx:81-157; a 390 px cinco botões espremem o contexto |
125 px com ações em botões de texto |
94.5 O fio#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS11 (veto geral · Q10 sem veto) | Papel de parede = surface-subtle liso — sem rabiscos de terceiro |
Canvas do CP1; o papel do WhatsApp não se copia (MS1) | rabiscos do WhatsApp · grafismo da marca (não pedido; exigiria o gerador gen-detalhe.py) |
| MS12 (Q6 a) | Balão: enviado surface-brand-subtle, recebido surface-raised, os dois com text-primary 14 px / 1,5 / 400; raio radius-4 com o canto do autor em radius-1 no primeiro do grupo; largura máxima 60 % (janela larga) · 70 % (média) · 85 % (estreita). O que separa o balão do papel é a SOMBRA (--seed-shadow-raised), como o WhatsApp e o SEED Chat (BalaoDeMensagem.tsx:347-357) |
§55.5; medido: balão × papel = 1,01 (enviado) e 1,09 (recebido) no claro — a cor não separa, e o anel (alternativa) mede 1,21 no recebido (pares-medidos.md) |
anel, nunca sombra (Q6 b — o texto do seed-composicao.md até aqui) · balão turquesa cheio com texto branco (vira o elemento mais saturado da tela) |
| MS13 (veto geral · Q10 sem veto) | Agrupamento: mensagens seguidas do mesmo autor a 2 px; troca de autor a sp-2; o nome de quem enviou (11 px, 600) só no primeiro balão do grupo — e o autor e a hora no texto acessível de TODOS (CH6). Nota: 2 px não tem token de espaço (--seed-sp-* começa em 4 px, com sp-1-5 = 6 px) — ver 94.13 |
SEED Chat; CH6 | sp-2/sp-4 do seed-composicao (espaça o dobro do WhatsApp) |
MS14 (Q5 a, cor trocada para azul em 2026-10-10; o azul feedback-info-text CONFIRMADO por ele na folha 3, G5 = ok, gravada 2026-10-10 14:45:59Z) |
Meta no balão, canto inferior direito: [Editada] · hora (11 px mono, text-muted) · estado. Estado = CH7 estendido: enviando (relógio) · enviada (um tique) · entregue (dois tiques) · lida (dois tiques em AZUL: feedback-info-text; a forma é a mesma do entregue) · falhou (alerta + "Tentar de novo", exceto quando o motivo é permanente: sem a ação e com o texto do que fazer, CH7); dois rótulos de falha (folha de 2026-10-10, PC-2026-0044-ROTULOS = b): "Não enviada" (não saiu do nosso lado) e "Não entregue" (saiu, mas não chegou ao cliente), cada um com a microcópia por código de erro (MC3, MC9, MC10, MC12); "Não entregue" só existe quando o retorno de entrega da Meta chega ao produto [não conferido]; rótulo em title e em texto só para leitor de tela. Observação dele sobre a Q5, verbatim (folha de 2026-10-10, gravada às 11:22Z): "as mensagens lidas devem ser representadas igual o whatsapp, mude os 2 traços para a cor azul (escolha o tom de azul melhor na nossa DS)". Escolha da sessão, confirmada por ele (folha 3, G5 = ok): o azul é feedback-info-text (azul-700 #006783 no claro, azul-200 #96E0FD no escuro) — a família de INFO é o único papel de azul na interface (seed-tokens.json, azul-300 "familia de INFO"). A conta (razão de contraste WCAG, medida em 2026-10-10 por script sobre os valores do seed-tokens.css v1.35): contra o balão enviado (surface-brand-subtle #E8FBF7 / #1A3833) e o recebido (surface-raised #FFFFFF / #1D272D): claro 5,99 e 6,43; escuro 8,67 e 10,42 — os quatro passam o 3,0 do SC 1.4.11 (ícone) e até o 4,5 de texto. O "entregue" (text-muted) mede 5,23 e 5,61 no claro, 5,66 e 6,80 no escuro. Candidatos medidos e descartados: feedback-info-solid (azul-500 #0099C1 / azul-300 #53C2E9) mede 3,09 e 3,32 no claro (passa o 3,0 por 0,09, margem fina); azul-400 #01B3E0 mede 2,30 e 2,46 no claro (reprova); text-brand (o verde do tique anterior) 4,28 e 4,60. Exceção "só cor" — estreitou, NÃO sumiu: a luminância relativa do tique lida × entregue é 0,113 × 0,137 no claro (razão 1,15:1) e 0,669 × 0,419 no escuro (1,50:1) — em escala de cinza o par continua quase igual no claro. O que mudou é que a diferença deixou de ser só de luminosidade e passou a ser de MATIZ (cinza-turquesa × azul, a distância de matiz que o DS tem), como no WhatsApp. Por isso a SC 1.4.1 segue atendida por outro meio para esse par: nome acessível distinto ("Lida" × "Entregue") e title; a distinção visual em escala de cinza [não conferido] em tela real (a conta é de luminância, não de captura). Nenhum azul do DS separa os dois em cinza e passa o 3,0 nos quatro fundos com folga; a opção que separaria mais no claro é feedback-info-solid (razão 1,69:1, margem fina) e exigiria um token semântico novo por tema (claro azul-500, escuro azul-200), que não existe e NÃO foi criado. Medido (antes, text-brand): 5,23 (entregue) × 4,28 (lida) no claro, 5,66 × 6,92 no escuro |
WhatsApp; SC 1.4.1; pares-medidos.md |
tique lida em text-brand (verde, a escolha Q5 a, trocada por pedido dele em 2026-10-10) · cor + forma, os dois tiques com pastilha cheia (Q5 b — custo: uma classe no SEED Chat; guardado como caminho de volta se a exceção incomodar) |
| MS15 (Q7 a) | Divisor de data = PÍLULA de 24 px (radius-3, surface-raised, 12 px text-muted), como o produto e o WhatsApp. Rótulos "hoje", "ontem", dia da semana, data. Divisor de não lidas ("N mensagens não lidas") em faixa de largura inteira |
PainelDeMensagens.tsx:251-252; contraste do rótulo 5,16 claro · 7,63 escuro |
trilha horizontal com rótulo centrado (Q7 b — o texto do seed-composicao.md até aqui) |
| MS16 (veto geral · Q10 sem veto) | Ações por mensagem no sobrevoo e no foco: reagir · editar (só texto nosso, até 15 min) · responder — botões redondos de 32 px (≥ 24 px, SC 2.5.8) do lado de fora do balão | SEED Chat BalaoDeMensagem.tsx:316-345 |
ações só no clique direito (invisíveis para teclado) |
| MS17 (veto geral · Q10 sem veto) | Reação: pílula abaixo do balão, emoji + contagem quando > 1 | WhatsApp; SEED Chat :114-133 |
— |
| MS18 (veto geral · Q10 sem veto) | Resposta citada: dentro do balão, faixa de 3 px em text-brand + autor + até 2 linhas do trecho |
WhatsApp; MensagemCitada.tsx |
— |
| MS19 (veto geral · Q10 sem veto) | Apagada: texto em itálico text-muted com ícone do DS (não emoji); editada: "Editada" na meta abre o histórico |
WhatsApp; SEED Chat mostra 🚫 (ajuste: ícone do set, §45) | esconder o balão apagado (perde o rastro) |
| MS20 (veto geral · Q10 sem veto) | Voltar ao fim: botão flutuante de 40 px no canto inferior direito do fio, com a contagem de novas | SEED Chat PainelDeMensagens.tsx:287-291 |
— |
94.6 Mídia na conversa (LC-16 — revisão do CH14)#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS21 (veto geral · Q10 sem veto) | Imagem: miniatura até min(20rem, 100%), radius-3, carga preguiçosa; abre no visualizador ÚNICO do fio; texto alternativo "Imagem enviada/recebida"; legenda abaixo |
SEED Chat (B4, B17, CHAT-051) | um visualizador por balão · largura fixa em px (vazava em tela estreita, CHAT-051) |
| MS22 (veto geral · Q10 sem veto) | Álbum: grade 2 × 2, "+N" na quarta, rótulo "Álbum com N fotos" | PC-2026-0017 (sem canon no produto) — proposta | uma imagem por balão |
| MS23 (veto geral · Q10 sem veto) | Vídeo: player nativo com controles, preload="metadata", até min(20rem, 100%); duração em etiqueta sobre a miniatura |
SEED Chat | autoplay |
| MS24 (veto geral · Q10 sem veto) | Documento: cartão de 256 px (ícone em círculo surface-brand-subtle, nome truncado, extensão); PDF abre a pré-visualização no visualizador único do fio; os demais em nova guia; nunca visualizador de terceiro |
CHAT-052 (dado do cliente não sai sem autorização) | Google Docs Viewer e afins |
| MS25 (veto geral · Q10 sem veto) | Localização e contato: o mesmo cartão; localização abre o mapa em nova guia | SEED Chat :239-282 |
mapa embutido (custo e rastreio de terceiro) |
| MS26 (veto geral · Q10 sem veto) | Figurinha: imagem de até 150 px sem balão, meta fora | WhatsApp; SEED Chat :162-167 |
figurinha dentro de balão |
| MS27 (veto geral · Q10 sem veto) | Prévia de link: cartão acima do texto (ordem do WhatsApp) | CHAT-053 | — |
| MS28 (veto geral · Q10 sem veto) | Menu de opções de fornecedor (lista e botões do WhatsApp Business) mostrado como lista numerada de verdade (<ol>) |
PC-2026-0017 | texto corrido com números digitados |
| MS29 (veto geral · Q10 sem veto) | Grupo: autor acima de cada balão recebido (11 px, 600, text-secondary) — proposta para o piloto de grupos do produto |
PC-2026-0017 | cor por autor (exige paleta categórica sem canon aqui) |
| MS30 (veto geral · Q10 sem veto) | Mídia que ainda não chegou é estado declarado ("carregando…" ou "indisponível"), nunca balão vazio | Achado da rodada: o SEED Chat devolve null para documento sem URL (BalaoDeMensagem.tsx:203) |
balão vazio silencioso |
94.7 Áudio#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS31 (veto geral · Q10 sem veto) | Player próprio: play/pausa de 36 px (action-primary, rótulo "Ouvir áudio"/"Pausar áudio"); forma de onda medida do arquivo — se não der para medir, barra lisa com o motivo no título, nunca onda inventada; posição como role="slider" com setas de 5 %; tempo em 11 px mono; velocidade 1x → 1,5x → 2x num botão de 28 px com rótulo; avatar de quem enviou com microfone; o arquivo só baixa quando o balão entra na tela |
SEED Chat PlayerDeAudio.tsx (V-CHAT-23, pedido de velocidade de 2026-09-15) |
player nativo do navegador (muda por navegador, sem velocidade) |
| MS32 (Q9 a) | Marca de posição = PINO redondo de 12 px em action-primary na posição, com anel da cor do balão. O estado (tocado × não tocado) deixa de depender do par de cores das barras |
SC 1.4.11; medido: tocada × não tocada 3,09 claro · 3,58 escuro (passa por 0,09 no claro); não tocada × balão recebido 1,49; pino × balão 4,60 claro · 8,31 escuro | só a cor das barras (Q9 b — produto até aqui) |
| MS33 (Q8 a) | Transcrição SEMPRE VISÍVEL sob o áudio: texto gravado, rotulado "Transcrição automática", em text-secondary (7,75 claro · 8,11 escuro); falhou → "Transcrição indisponível"; vazia = áudio sem fala. O atendente lê sem clicar |
SC 1.2.1 aceita as duas formas; o produto mostra sempre | recolhida atrás de "Ver transcrição" (Q8 b — como o WhatsApp; custo: um botão e um estado) · nenhuma alternativa em texto (reprova a SC 1.2.1) |
94.8 A caixa de escrever na mensageria#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS34 (veto geral · Q10 sem veto) | Composer = CH8 (contêiner radius-6, foco no contêiner) na ordem do WhatsApp: emoji · anexo · [IA] · campo · microfone que vira enviar quando há texto (redondo, 40 px, em metal — MA2). Desktop: Enter envia, Shift+Enter quebra (CH11); celular: Enter quebra e só o botão envia — exceção ao CH11, porque o teclado virtual não tem Shift+Enter |
veredito do SEED Chat (Q6a, 2026-09-14); CampoDeMensagem.tsx:58-225 |
Enter enviando no celular |
| MS35 (veto geral · Q10 sem veto) | Sugestão da IA inline: linha DENTRO do contêiner, acima do campo (CH13, forma linha), rótulo "Sugestões da IA" e chips; o que a IA sugere só o atendente vê | modo "sussurro" do estudo E1; SugestoesDaIA.tsx |
bloco de três cartões acima do composer |
| MS36 (veto geral · Q10 sem veto) | Respostas rápidas por "/": a lista é sugestão; Enter continua enviando o que foi digitado | CampoDeMensagem.tsx:104 |
"/" que bloqueia o envio |
94.9 No celular#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS37 (veto geral · Q10 sem veto) | Pilha: lista → conversa (← volta) → painel em folha de tela inteira (← volta, porque é voltar e não descartar). A barra de abas do aplicativo é a do §95 | SEED Chat Conversas.tsx:127-148, PainelDaConversa.tsx:47-58 |
painel sobreposto parcial a 390 px |
94.10 Material da forma TELA (LC-19)#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| MS38 (veto geral · Q10 sem veto) | Rail em metal, botão de enviar em metal, casca com luz (uma por tela), fio, diálogos e menus opacos — como o §93 já manda e o SEED Chat aplicou | CHAT-074 (itens expostos a veto, sem veto); MA2, MA3, MA4 | — |
| MS39 (Q3 b) | A lista de conversas é OPACA, pelo MA3 (lista densa fica opaca) | Medido: sem vão, o vidro da lista muda de forma visível só 0,29 % dos pixels no claro e 1,45 % no escuro — é marcação de papel, não efeito | vidro sem vão, como o SEED Chat hoje (Q3 a) · vidro como peça própria, com vão sobre o canvas com luz (Q3 c — custo: mudança de layout no SEED Chat) |
| MS40 (Q4 a) | O cabeçalho da conversa é de VIDRO (barra superior do MA1), como o SEED Chat. O vidro só se vê quando o fio rola por baixo dele (medido: 6,79 % dos pixels no claro e 8,40 % no escuro mudam de forma visível nessa condição); sem o fio por baixo ele é marcação de papel, como a lista da MS39 era | MA1 | opaco (Q4 b) |
94.11 Números medidos (com a origem)#
| o quê | número | origem |
|---|---|---|
| item da lista | 76 px | SEED Chat · WhatsApp Web |
| avatar do item e do cabeçalho | 40 px | §32 AV3 |
| cabeçalho da conversa · da lista · do painel | 64 px | SEED Chat · WhatsApp Web |
| painel lateral | 420 px | §55.5 · SEED Chat |
| limiar fixo × sobreposto do painel | --seed-side-panel-content-min) pela regra do §31.4 |
Q2 c (prancha); supersede SH62b = a (folha 11) |
| busca | 40 px, pílula | SEED Chat · WhatsApp Web |
| divisor de data | 24 px | SEED Chat · WhatsApp Web |
| largura máxima do balão | 60 / 70 / 85 % | SEED Chat (WhatsApp Web: 56 %) |
| play do áudio · velocidade · ação por mensagem | 36 · 28 · 32 px | SEED Chat |
| pior pixel de texto na prancha | 4,60 claro · 5,33 escuro | régua RC, 2026-09-24 12:59 UTC |
| pares normativos de contraste que passam | 14 de 18 | pares-medidos.md — os 4 que reprovam são as barras do áudio SEM o pino (onda não tocada em border-default/border-strong sobre o balão); o pino (MS32) é o mecanismo que resolve |
94.12 Testes (nascem com a seção)#
- Estados de envio — cinco estados, cada um com nome acessível distinto; "lida" difere de "entregue" por MATIZ (azul × cinza-turquesa, MS14), com luminância quase igual no claro — o teste confere o nome acessível e o contraste do azul (≥ 3,0 nos quatro fundos), não a escala de cinza.
- Não lida difere de lida em escala de cinza (peso + contagem).
- Histórico é
role="log",aria-atomic="false", semaria-liveexplícito (CH4); campo comaria-controls. - Cada balão tem autor e hora no texto acessível, também os agrupados (CH6).
- Painel fechado é
inerte fora da ordem de Tab; recolher por»no desktop e ← no celular;fixo a ≥ 1560 px e sobreposto abaixo(histórico) — empurra a conversa enquanto ela fica ≥ 640 px e sobrepõe abaixo disso, nascendo abaixo do cabeçalho (MS5 e §31.4, leva 45). - Áudio: slider responde às setas; sem onda medida, barra lisa com motivo (nunca onda inventada); pino presente; transcrição presente no DOM e visível (MS33).
- Alvos das ações por mensagem, velocidade e play ≥ 24 × 24 px (SC 2.5.8).
- Régua RC nos dois temas na tela de referência da forma TELA, com o tema no
<html>. - Mídia sem URL mostra estado declarado (MS30).
Estes testes têm instrumento: 06-validacao/suites/suite-mensageria.mjs (T1–T9 e F1–F6, 29 de 29 na tela de referência; o teste 8 é a guarda-material.py). O que a prancha mediu segue em 94.11.
94.13 O que falta ao DS para esta seção ter instrumento (pendências a nascer, sem código)#
- Token de 2 px de espaço (o ritmo do agrupamento, MS13): o SEED Chat usa
mt-0.5do Tailwind, sem token; a prancha usou 2 px literal. - Derivados de material não refazem em tema por contêiner:
--seed-mat-glassé declarado só no:root(10-publicacao/r/seed-tokens.css, medido em 2026-09-24 na linha 914); num contêiner comdata-theme="dark"o vidro continua claro. A tela de referência da forma TELA tem de pôr o tema no<html>. - Tela de referência da forma TELA (
tela-mensageria.htmlou variante dogen-tela-chat.py) com gerador — é onde a régua RC e os testes 94.12 passam a morar. Cumprido na leva 36: nasceutela-mensageria.html(geradorgen-tela-mensageria.py), variante própria; atela-chat(forma PAINEL, §55) segue intocada.
94.14 O que a seção NÃO cobre, e o que ela muda em outros textos#
nao_cobre: menção a pessoa (@), thread, a gravação do áudio no composer (o GravadorDeAudio.tsx do produto não foi lido no estudo — [não conferido]), chamada de voz e vídeo, enquete, pagamento, catálogo, status; o conteúdo das abas do painel.
Supersede parcial do CH14 (§55.1). O CH14 dizia: anexo, gravação de áudio, menção a pessoa, thread e reação "não entram nesta versão". A partir desta seção: anexo (mídia), áudio (player e transcrição) e reação passam à §94 (MS17, MS21–MS33); menção, thread e gravação de áudio continuam fora. Motivo: o "caso real" que o CH14 esperava existe — o SEED Chat em produção.
Supersedes pedidos ao seed-composicao.md (linha "Chat / mensageria"; o texto daquele arquivo foi editado na leva 36 (LC-37) e já segue esta tabela):
| ponto | hoje no seed-composicao.md |
passa a |
|---|---|---|
| raio do balão | radius-lg na mensagem |
radius-4, com o canto do autor em radius-1 — contradição interna medida: o §55.5 mediu 8 px (radius-4); radius-lg = radius-6 = 12 px |
| separação do balão (Q6 a) | "mensagem alheia: surface-raised com anel — nunca sombra" |
sombra (--seed-shadow-raised), MS12 |
| agrupador por dia (Q7 a) | "TRILHA horizontal com rótulo centrado" | pílula, MS15 |
| ritmo | sp-2 entre mensagens do mesmo autor · sp-4 entre blocos |
2 px · sp-2, MS13 (falta o token de 2 px) |