Chat de mensagem
Componente de mensagens transversal — anatomia da lista de conversas, janela de chat e tipos de mensagem.
A conversa abre como painel lateral sobre a tela atual: só a thread ativa, sem a lista de conversas. O botão de expandir leva à tela cheia (página Messages, abaixo).
A mesma conversa vive como drawer contextual, na página Messages ou no mobile. Lista de conversas à esquerda (com não lidos) e a thread comprador ↔ fornecedor à direita. O composer reaproveita o do Genius, sem as funções de IA (sem @ contexto, busca web ou modo voz).
Boas Práticas
O Chat/Mensagens é a comunicação contextual do ME — atrelada ao registro, no drawer ou na página dedicada.
Anatomia
O chat tem três zonas funcionais — trigger na navegação, lista de conversas e janela de conversa ativa.
Trigger / Entrada
Acesso ao chat — pelo nav global Messages ou pelo ícone de chat na linha (ex.: index de Fornecedores).
Componentes
- Item Messages na navegação global
- Ícone de chat na linha da entidade (abre a drawer)
- Badge com contagem de não lidos
Regras
- Badge de contagem visível quando há mensagens não lidas
- Ícone de chat na linha abre a conversa como drawer contextual
- O nav Messages abre a página dedicada (two-pane)
Lista de conversas
Painel com todas as conversas ativas — coluna esquerda na página, drawer no mobile.
Componentes
- Item de conversa (avatar + nome prefixado com @ + última mensagem + timestamp)
- Badge de não lidos por conversa
- Busca, filtro e novo (+)
Regras
- Ordenadas por atividade mais recente (última mensagem)
- Nome da conversa prefixado com @ (ex.: @A & E Tecnical Ltda)
- Conversa ativa destacada com fundo diferenciado
Janela de conversa
Thread de mensagens da conversa selecionada — idêntica na drawer e na página.
Componentes
- Header: contato + participantes (+N) + busca + expandir + fechar
- Thread com scroll (linhas de sistema + bolhas)
- Composer reaproveitado do Genius (textarea + ações)
Regras
- Mensagens próprias à direita, mensagens recebidas à esquerda
- Linhas de sistema abrem a thread ("conversa privada", "Início da conversa · data")
- Recibo de leitura com duplo-check (enviado · entregue · lido)
- Botão expandir leva da drawer para a página Messages
- Scroll automático para a mensagem mais recente ao abrir
Superfícies
A mesma conversa vive em três superfícies — muda o container, não o conteúdo.
Drawer contextual
Abre à direita, sobre a página atual (ex.: pelo ícone de chat na linha de Fornecedores). Uma conversa, sem tirar o usuário do contexto.
- Header com contato, participantes (+N), expandir e fechar
- Expandir leva à página Messages
- Mesma janela de conversa da página — só muda o container
Página Messages (dedicada)
Acessada pelo item Messages do nav global. Layout two-pane: lista de conversas à esquerda, conversa à direita.
- Lista com busca, filtro e novo (+)
- Conversa ativa destacada na lista
- Mesma janela de conversa da drawer, em tela cheia
Mobile
No mobile a lista de conversas vira um drawer — a experiência é basicamente a drawer do desktop.
- Lista de conversas como drawer sobreposto
- Uma conversa por vez, em tela cheia
Composer
O composer do chat reaproveita o do Genius — a mesma textarea e barra de ações. Como o chat é uma conversa humano ↔ fornecedor (sem agente), as funções de IA ficam de fora: modo voz, adicionar contexto (@) e busca web.
Anexar
Imagem, vídeo, áudio ou arquivo.
Gravar áudio
Clipe de áudio pontual — sem ativar modo voz.
Enviar
Envia a mensagem; substitui o mic quando há texto digitado.
Mencionar / adicionar contexto
Exclusivo do Genius — contextualiza o agente com entidades do ME.
Modo voz
Exclusivo do Genius — conversa por voz com o agente.
Busca web
Exclusivo do Genius — fontes externas na resposta do agente.
Mensagens
Quatro tipos de mensagem suportados. Cada um tem apresentação visual distinta na thread.
Mensagem de texto sem formatação
PDF, imagem, planilha — com ícone e nome do arquivo
Imagem exibida diretamente na thread
Clipe de áudio gravado pelo mic do composer (pontual, sem modo voz)
Evento automático — "conversa privada", "Início da conversa · data"
Estados da mensagem
Tipo é o que a mensagem carrega; estado é onde ela está no caminho até ser lida. O ícone ao lado da hora conta essa história — o remetente nunca fica na dúvida se chegou. O estado é sempre visível.
Da saída à leitura, cada mensagem enviada mostra seu estado; a falha oferece Reenviar sem reescrever.
Enviando
A mensagem saiu mas o servidor ainda não confirmou — relógio discreto. Some assim que o envio confirma.
Enviada
O servidor recebeu — um check cinza. Garante que não se perdeu, mesmo que o destinatário ainda não tenha visto.
Lida
O destinatário abriu a conversa — check duplo azul. Fecha o ciclo: a pessoa sabe que foi visto.
Falha
O envio não completou — ícone de erro com "Reenviar" à mão. Uma saída imediata, sem reescrever a mensagem.
Checklist
Antes de entregar o handoff
- Badge de não lidos está visível no trigger da navegação?
- Lista de conversas ordena por atividade mais recente?
- Mensagens próprias estão à direita, recebidas à esquerda?
- Scroll automático vai para a mensagem mais recente ao abrir?
- Status de entrega está mapeado (enviado, entregue, lido)?
- Campo de input permite enviar arquivo/anexo?
- Estado de loading ao enviar mensagem foi mapeado?