Mídias e Documentos

Implementado em: 2026-04-02 Status: Ativo

---

Resumo

O painel lateral direito do chat exibe todas as mídias e documentos compartilhados na conversa, organizados por tipo. Ao clicar em qualquer item, o chat rola até a mensagem original mostrando o contexto completo — diferencial exclusivo em relação ao WhatsApp Web.

---

API

GET /messages/:ticketId/média

Retorna mensagens com mídia de um ticket (inclui histórico de tickets anteriores do mesmo contato).

Response:

{
  "media": [
    {
      "id": 123,
      "mediaUrl": "http://localhost:8080/public/company1/image_2026.jpg",
      "mediaType": "image",
      "body": "Legenda da imagem",
      "fromMe": false,
      "createdAt": "2026-04-02T15:23:00Z",
      "ticketId": 45
    }
  ],
  "total": 15
}

Filtro: mediaUrl IS NOT NULL AND isDeleted = false Limite: 100 itens Ordem: createdAt DESC

---

Frontend

Componente: MediaDocumentsSection

Localização: frontend/src/components/chat/contact-panel.tsx

Estrutura:

1. Header — "Mídias e documentos" + contagem total + seta expansível
2. Abas — Todos | Fotos | Vídeos | Áudio | Docs (com contagem cada)
3. Grid/Lista — renderização por tipo:
   • Fotos: grid 3 colunas, thumbnails, data no hover
   • Vídeos: grid com ícone play
   • Áudios: lista com ícone microfone verde
   • Documentos: lista com ícone arquivo azul + nome + download

Scroll para Contexto (diferencial)

Ao clicar em qualquer mídia:

onScrollToMessage={(messageId) => {
  const el = document.getElementById(`msg-${messageId}`)
  if (el) {
    el.scrollIntoView({ behavior: "smooth", block: "center" })
    el.style.background = "rgba(30,127,212,0.12)"  // highlight azul
    setTimeout(() => { el.style.background = "" }, 2000)  // remove após 2s
  }
}}

Pré-requisito: Cada mensagem no chat-window tem id="msg-{id}" e data-message-id.

Categorização de mídia

function getMediaCategory(mediaType: string): string {
  if (mediaType.includes("image")) return "images"
  if (mediaType.includes("video")) return "videos"
  if (mediaType.includes("audio") || mediaType === "ptt") return "audio"
  return "documents"
}

---

Comparação: ConvertaFlow vs WhatsApp Web

Aspecto	WhatsApp Web	ConvertaFlow
Ver mídias	Sim	Sim
Filtrar por tipo	Sim (3 abas)	Sim (5 abas com contagem)
Clicar na mídia	Abre mídia isolada	Scroll até mensagem no chat
Ver contexto	Não	Sim — mensagens antes e depois
Highlight visual	Não	Sim — azul temporário 2s

---

Arquivos

Arquivo	Função
backend/src/controllers/MessageController.ts	Método listMedia()
backend/src/routes/messageRoutes.ts	Rota GET /messages/:ticketId/média
frontend/src/components/chat/contact-panel.tsx	MediaDocumentsSection component
frontend/src/components/chat/chat-window.tsx	id="msg-{id}" em cada mensagem
frontend/src/app/(dashboard)/chat/page.tsx	onScrollToMessage callback