From a6a88ab0c17a87e61a2c5f312e94ade53a4ee74f Mon Sep 17 00:00:00 2001
From: Rafael Lopes <rafael.lopes@sothis.com.br>
Date: Wed, 22 Jul 2026 16:47:44 -0300
Subject: [PATCH] =?UTF-8?q?FEAT:=20Envia=20m=C3=ADdia=20via=20POST=20/what?=
 =?UTF-8?q?sapp/send-media=20com=20FormData?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/chat/components/ChatWindow.jsx    |  4 +-
 src/modules/chat/hooks/useChat.js             | 61 ++++++++-----------
 .../chat/services/whatsappChatService.js      |  8 +++
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/modules/chat/components/ChatWindow.jsx b/src/modules/chat/components/ChatWindow.jsx
index 0bba7b6..dbd26c7 100644
--- a/src/modules/chat/components/ChatWindow.jsx
+++ b/src/modules/chat/components/ChatWindow.jsx
@@ -188,7 +188,7 @@ function MediaRenderer({ message, isAgent }) {
 
 function AttachmentPreview({ file, onRemove }) {
   if (!file) return null;
-  const mediaUrl = getMediaUrl({ data: file.data, mimetype: file.type });
+  const mediaUrl = file.previewUrl || '';
 
   return (
     <div
@@ -203,7 +203,7 @@ function AttachmentPreview({ file, onRemove }) {
         background: '#fff',
       }}
     >
-      {file.type?.startsWith('image/') ? (
+      {file.type?.startsWith('image/') && mediaUrl ? (
         <img
           src={mediaUrl}
           alt={file.name}
diff --git a/src/modules/chat/hooks/useChat.js b/src/modules/chat/hooks/useChat.js
index d7a993b..c77e41d 100644
--- a/src/modules/chat/hooks/useChat.js
+++ b/src/modules/chat/hooks/useChat.js
@@ -16,11 +16,12 @@ import {
   listWhatsappChats,
   listWhatsappMessages,
   releaseWhatsappChat,
+  sendWhatsappMedia,
   sendWhatsappMessage,
   transferWhatsappChat,
 } from '../services/whatsappChatService';
 
-const MAX_ATTACHMENT_SIZE_BYTES = 15 * 1024 * 1024;
+const MAX_ATTACHMENT_SIZE_BYTES = 100 * 1024 * 1024;
 
 function getPresenceByUserId(presenceList, userId) {
   return presenceList.find((presence) => Number(presence.user_id) === Number(userId)) || null;
@@ -165,17 +166,6 @@ function dedupeMessages(messages) {
   return messages.reduce((acc, message) => mergeMessageList(acc, message), []);
 }
 
-function fileToBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const result = String(reader.result || '');
-      resolve(result.includes(',') ? result.split(',')[1] : result);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
 
 function normalizeComparableContact(contact) {
   return {
@@ -581,23 +571,23 @@ export function useChat() {
     }));
   }
 
-  async function attachFile(file) {
+  function attachFile(file) {
     if (!file) return;
     if (file.size > MAX_ATTACHMENT_SIZE_BYTES) {
-      setApiError('Arquivo muito grande. Envie uma mídia de até 15 MB.');
+      setApiError('Arquivo muito grande. O limite máximo é 100 MB.');
       return;
     }
-
-    const data = await fileToBase64(file);
     setAttachedFile({
       name: file.name,
       type: file.type || 'application/octet-stream',
-      data,
+      previewUrl: URL.createObjectURL(file),
+      rawFile: file,
     });
     setApiError(null);
   }
 
   function removeAttachedFile() {
+    if (attachedFile?.previewUrl) URL.revokeObjectURL(attachedFile.previewUrl);
     setAttachedFile(null);
   }
 
@@ -763,28 +753,23 @@ export function useChat() {
       return;
     }
 
-    const media = attachedFile
-      ? {
-          data: attachedFile.data,
-          mimetype: attachedFile.type,
-          filename: attachedFile.name,
-        }
-      : null;
+    const fileToSend = attachedFile || null;
     const newMessage = {
       id: `temp-${Date.now()}`,
       chatId: contactId,
       sender: 'agent',
       text: trimmed,
       timestamp: Math.floor(Date.now() / 1000),
-      hasMedia: Boolean(media),
-      media,
+      hasMedia: Boolean(fileToSend),
+      mediaUrl: fileToSend?.previewUrl || null,
+      mediaMimeType: fileToSend?.type || null,
     };
 
     setMessagesByContact((current) => ({
       ...current,
       [contactId]: mergeMessageList(current[contactId] || [], newMessage),
     }));
-    updateContactPreview(contactId, trimmed || '[Mídia]', media);
+    updateContactPreview(contactId, trimmed || '[Mídia]', fileToSend ? { filename: fileToSend.name } : null);
     if (contactId === activeContactId) {
       setDraft('');
     }
@@ -793,12 +778,20 @@ export function useChat() {
     if (!contactId) return;
 
     try {
-      await sendWhatsappMessage({
-        to: contactId,
-        message: trimmed,
-        senderName: getUserDisplayName(currentUser),
-        media,
-      });
+      if (fileToSend) {
+        const form = new FormData();
+        form.append('file', fileToSend.rawFile, fileToSend.name);
+        form.append('to', contactId);
+        form.append('senderName', getUserDisplayName(currentUser));
+        if (trimmed) form.append('caption', trimmed);
+        await sendWhatsappMedia(form);
+      } else {
+        await sendWhatsappMessage({
+          to: contactId,
+          message: trimmed,
+          senderName: getUserDisplayName(currentUser),
+        });
+      }
 
       setApiError(null);
       updateContact(contactId, (contact) => ({
@@ -810,7 +803,7 @@ export function useChat() {
     } catch (error) {
       setApiError(
         error.status === 413
-          ? 'Arquivo muito grande para envio. Tente uma midia menor.'
+          ? 'Arquivo muito grande para envio. Tente uma mídia menor.'
           : error.message,
       );
     }
diff --git a/src/modules/chat/services/whatsappChatService.js b/src/modules/chat/services/whatsappChatService.js
index c376d2b..ef20004 100644
--- a/src/modules/chat/services/whatsappChatService.js
+++ b/src/modules/chat/services/whatsappChatService.js
@@ -56,3 +56,11 @@ export function transferWhatsappChat(payload) {
     fallbackMessage: 'Nao foi possivel transferir o atendimento.',
   });
 }
+
+export function sendWhatsappMedia(formData) {
+  return apiRequest('/whatsapp/send-media', {
+    method: 'POST',
+    body: formData,
+    fallbackMessage: 'Não foi possível enviar a mídia.',
+  });
+}