FEAT: Agora é possível enviar media utilizando a meta API #1

Merged
rafael.lopes merged 2 commits from feat/send-media into dev 2026-07-22 17:49:46 -03:00
3 changed files with 37 additions and 36 deletions
Showing only changes of commit a6a88ab0c1 - Show all commits

View File

@ -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}

View File

@ -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 {
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),
media,
});
}
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,
);
}

View File

@ -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.',
});
}