Chat e WhatsApp

Visao geral

O frontend conversa com o backend por HTTP e Socket.IO.

HTTP e usado para:

listar chats;
carregar mensagens;
enviar mensagens;
assumir/liberar/transferir/fechar atendimento;
baixar midia;
consultar status.

As chamadas HTTP do chat ficam centralizadas em:

src/modules/chat/services/whatsappChatService.js

Esse service usa src/shared/services/apiClient.js, entao herda parse de resposta, tratamento padronizado de erro e Bearer Token via interceptor global.

Socket.IO e usado para:

receber QR Code;
receber status do WhatsApp;
receber novas mensagens em tempo real.

Socket.IO

Namespace:

/whatsapp

Arquivo compartilhado:

src/shared/hooks/useWhatsappSocket.js

Tela administrativa:

src/modules/management/pages/WhatsappAdminPage.jsx

Autenticacao no socket

O token JWT e enviado no handshake:

io(WHATSAPP_SOCKET_URL, {
  auth: {
    token: getAuthToken()
  }
});

Sem token valido, o backend recusa a conexao.

QR Code

O QR Code aparece na tela /admin/whatsapp.

Fluxo:

Backend emite evento qr
Frontend recebe qr
Frontend renderiza imagem para pareamento do WhatsApp

Mensagens em tempo real

Quando o backend recebe mensagem pelo WhatsApp, ele emite:

message

O hook useWhatsappSocket armazena a ultima mensagem recebida para o chat atualizar a conversa.

Hook de chat

Arquivo:

src/modules/chat/hooks/useChat.js

Responsavel por:

normalizar chats e mensagens para a UI;
manter conversa ativa, rascunho e anexos;
aplicar permissao visual de fila/area/perfil;
impedir resposta quando o atendimento nao esta assumido;
impedir nova mensagem quando aguarda resposta do cliente;
orquestrar assumir, liberar, fechar e transferir atendimento;
hidratar midia sob demanda;
gerenciar envio de midia via FormData.

O hook mantem regra de tela e estado local. A borda HTTP fica em whatsappChatService.js.

Envio de midia

O operador pode enviar imagens, audios, videos e documentos pelo chat.

Fluxo:

Operador clica no clipe e seleciona o arquivo.
Preview aparece instantaneamente via blob URL (sem upload ainda).
Ao enviar, useChat monta um FormData com file, to, senderName e caption (opcional).
Chamada para POST /whatsapp/send-media em whatsappChatService.js.
Mensagem aparece no chat imediatamente (blob URL); Socket.IO substitui pela URL definitiva do servidor.

Tipos aceitos: imagem (5 MB), audio/video (16 MB), documento PDF/docx/xlsx (100 MB).

Observacao

Mesmo com Socket.IO, as acoes sensiveis continuam acontecendo por HTTP protegido com Bearer token.