// ============================================================ // Mensagens.jsx v18 — Evolution API · redesign profissional // ============================================================ // v6: scroll fixado (flex:1+minHeight:0), lookup de nome via Supabase, // painel lateral de detalhes do cliente (projetos, fin., reuniões). // v7: helpers LID/phone, loadContacts (agenda celular), loadMessages // multi-format, disconnect via DELETE, auto-refresh 15s. // v8: sendMessage usa getPhoneFromChat (fix LID), setSendError inline, // contacts map aplicado em resolveName, compose desabilitado p/ LID. // v9: fix null key (React 195 erros), guard loadMessages JID nulo, // parse amigável de erro 400 (número não existe no WhatsApp). // v10-v13: multi-format findMessages, sort timestamp, finalizados, beta banner. // v14: fix login CSS (adicionado em colors_and_type.css), dedup por telefone // em loadChats (remove @lid duplicado), loadMessages combina 2 JIDs + // 3 formatos de query + deduplica por key.id, limit↑100. // v15-v17: MediaLoader (lazy load mídia), GroupPanel, sendMedia (📎), // fix toggleFinalizar, fix loadContacts @lid, fix loadMessages filter. // v18: getMediaType() — detecta tipo de mídia em 3 camadas (msg.message, // msg.messageType root-level, msg.mediaType) para cobrir todas as // versões da Evolution API. Resolve [mídia] exibido ao invés da mídia real. // ============================================================ /* global React, ICONS */ const EVOAPI_DEFAULTS = { url: 'https://evolution-api-production-f5fdd.up.railway.app', key: '1613f5f4985f23401ca09e34341376b26b8ee20946aaeaa898bd8a668d7d2b22' }; const EVOAPI_STORAGE_KEY = 'inbrivvo.evoapi'; const AUTO_STORAGE_KEY = 'inbrivvo.evoauto'; function getEvoCfg() { try { const s = JSON.parse(localStorage.getItem(EVOAPI_STORAGE_KEY) || '{}'); return { ...EVOAPI_DEFAULTS, ...s }; } catch { return EVOAPI_DEFAULTS; } } function getAutoConfig() { try { return JSON.parse(localStorage.getItem(AUTO_STORAGE_KEY) || '{}'); } catch { return {}; } } function getInstanceName(userId) { if (!userId) return 'inbrivvo-default'; return 'inbrivvo-' + userId.replace(/-/g, '').slice(0, 16); } async function evoFetch(method, endpoint, body) { const { url, key } = getEvoCfg(); if (!url || !key) throw new Error('EVO_NOT_CONFIGURED'); const opts = { method, headers: { apikey: key, 'Content-Type': 'application/json' } }; if (body !== undefined) opts.body = JSON.stringify(body); const r = await fetch(`${url}${endpoint}`, opts); if (!r.ok) { const t = await r.text(); throw new Error(t || String(r.status)); } return r.json().catch(() => ({})); } const evoGet = ep => evoFetch('GET', ep); const evoPost = (ep, b) => evoFetch('POST', ep, b); // ─── Helpers ─────────────────────────────────────────────────── function fmtPhoneDisplay(raw = '') { const n = raw.replace(/\D/g, ''); const local = n.startsWith('55') ? n.slice(2) : n; if (local.length === 11) return `(${local.slice(0,2)}) ${local[2]} ${local.slice(3,7)}-${local.slice(7)}`; if (local.length === 10) return `(${local.slice(0,2)}) ${local.slice(2,6)}-${local.slice(6)}`; if (n.length > 8) return `+${n.slice(0,2)} ${n.slice(2,4)} ${n.slice(4,8)}-${n.slice(8)}`; return raw || ''; } function fmtPhone(p = '') { let n = p.replace(/\D/g, ''); if ((n.length === 11 || n.length === 10) && !n.startsWith('55')) n = '55' + n; return n; } function isRealName(s) { if (!s) return false; const t = s.trim(); if (!t || t.length < 2) return false; if (t.includes('@')) return false; if (/^[a-f0-9]{16,}$/i.test(t)) return false; if (/^[a-z0-9]{10,}$/.test(t)) return false; if (/^\+?[\d\s\-\(\)]{7,}$/.test(t)) return false; return true; } function chatDisplayName(c, override) { if (override) return override; // Agenda do celular (contacts map passado pelo ConversasTab) if (c._contactName) return c._contactName; if (isRealName(c.name)) return c.name.trim(); if (isRealName(c.pushName)) return c.pushName.trim(); if (isRealName(c.notify)) return c.notify.trim(); if (isRealName(c.verifiedBizName)) return c.verifiedBizName.trim(); const jid = c.id || c.remoteJid || ''; if (jid.includes('@')) { const [part, domain] = jid.split('@'); if (/^\d{7,}$/.test(part)) return fmtPhoneDisplay(part); if (domain === 'g.us') return part.includes('-') ? 'Grupo' : `Grupo ${part.slice(0,6)}`; if (domain === 'broadcast') return 'Status'; if (domain === 'newsletter') return 'Canal WA'; if (domain === 'lid') return 'Contato'; } return 'Contato'; } function isGroup(c) { return (c.id || '').includes('@g.us'); } // Retorna o número de telefone numérico do chat, ou null se LID/grupo function getPhoneFromChat(c) { const candidates = [c.id || '', c.remoteJid || '']; for (const j of candidates) { const part = j.split('@')[0]; if (/^\d{7,}$/.test(part)) return part; } return null; } // Verifica se é um contato LID (identificador criptografado do WhatsApp) function isLidChat(c) { return (c.id || '').endsWith('@lid') && !getPhoneFromChat(c); } function chatInitials(name = '') { const clean = name.replace(/^\+/, '').replace(/[\(\)\-\s]/g, ''); const w = name.trim().split(/\s+/); if (w.length >= 2 && !/^\d/.test(w[0])) return (w[0][0] + w[w.length-1][0]).toUpperCase(); return clean.slice(0,2).toUpperCase() || '?'; } const AVATAR_PALETTE = ['#5B8DEF','#9B5DE5','#F15BB5','#00BBF9','#00C9A7','#FF6B6B','#FFA94D','#3A86FF','#8338EC','#06D6A0']; function avatarColor(str = '') { let h = 0; for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0; return AVATAR_PALETTE[h % AVATAR_PALETTE.length]; } function fmtTime(ts) { if (!ts) return ''; const d = new Date(typeof ts === 'number' && ts < 1e12 ? ts * 1000 : ts); if (isNaN(d)) return ''; const now = new Date(); const diff = now - d; if (diff < 60000) return 'agora'; if (diff < 3600000) return `${Math.floor(diff/60000)}min`; if (d.toDateString() === now.toDateString()) return d.toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' }); const yest = new Date(now); yest.setDate(now.getDate()-1); if (d.toDateString() === yest.toDateString()) return 'ontem'; return d.toLocaleDateString('pt-BR', { day:'2-digit', month:'2-digit' }); } function lastMsgPreview(c) { const m = c.lastMessage?.message; if (!m) return ''; return m.conversation || m.extendedTextMessage?.text || (m.imageMessage && 'Foto') || (m.audioMessage && 'Mensagem de áudio') || (m.pttMessage && 'Mensagem de áudio') || (m.videoMessage && 'Vídeo') || (m.documentMessage && (m.documentMessage.fileName || 'Documento')) || (m.stickerMessage && 'Sticker') || (m.locationMessage && 'Localização') || ''; } function msgText(m) { const msg = m?.message; if (!msg) return '[mensagem]'; return msg.conversation || msg.extendedTextMessage?.text || (msg.imageMessage && ('Foto' + (msg.imageMessage.caption ? ': '+msg.imageMessage.caption : ''))) || (msg.audioMessage || msg.pttMessage ? 'Mensagem de áudio' : null) || (msg.videoMessage && ('Vídeo' + (msg.videoMessage.caption ? ': '+msg.videoMessage.caption : ''))) || (msg.documentMessage && (msg.documentMessage.fileName || 'Documento')) || (msg.stickerMessage && 'Sticker') || (msg.locationMessage && 'Localização') || (msg.contactMessage && (msg.contactMessage.displayName || 'Contato')) || '[mídia]'; } // ─── Ícone inline ────────────────────────────────────────────── function IcoSvg({ name, size = 14, color = 'currentColor', strokeWidth = 1.75 }) { if (!ICONS || !ICONS[name]) return null; const d = ICONS[name]; return ( {(Array.isArray(d) ? d : [d]).map((path, i) => )} ); } // ─── Avatar ──────────────────────────────────────────────────── function WaAvatar({ name, size = 40, src, style: extraStyle }) { const [imgErr, setImgErr] = React.useState(false); if (src && !imgErr) { return ( {name} setImgErr(true)} style={{ width:size, height:size, borderRadius:'50%', objectFit:'cover', flexShrink:0, ...extraStyle }} /> ); } const bg = avatarColor(name); const fz = Math.round(size * 0.36); return (
{chatInitials(name)}
); } // ─── Chat Item ───────────────────────────────────────────────── function ChatItem({ chat, selected, profilePic, nameOverride, onClick }) { const name = chatDisplayName(chat, nameOverride); const preview = lastMsgPreview(chat); const ts = chat.lastMessage?.messageTimestamp || chat.updatedAt; const unread = (chat.unreadCount || 0) > 0; return (
{name} {fmtTime(ts)}
{preview || 'Sem mensagens'} {unread && (
{chat.unreadCount > 9 ? '9+' : chat.unreadCount}
)}
); } // ─── Lazy media loader via Evolution API ─────────────────────── function MediaLoader({ msg, instanceName, type }) { const [state, setState] = React.useState('idle'); // idle|loading|loaded|error const [src, setSrc] = React.useState(null); async function load() { setState('loading'); try { const { url, key } = getEvoCfg(); const resp = await fetch(`${url}/chat/getBase64FromMediaMessage/${instanceName}`, { method: 'POST', headers: { apikey: key, 'Content-Type': 'application/json' }, body: JSON.stringify({ message: { key: msg.key, message: msg.message }, convertToMp4: false }), }); if (!resp.ok) throw new Error('HTTP ' + resp.status); const data = await resp.json(); const b64 = data?.base64 || data?.data || ''; if (!b64) throw new Error('no_data'); const mime = getMime(); setSrc(`data:${mime};base64,${b64}`); setState('loaded'); } catch { setState('error'); } } function getMime() { const m = msg.message; if (type === 'image') return m?.imageMessage?.mimetype || 'image/jpeg'; if (type === 'audio') return m?.audioMessage?.mimetype || m?.pttMessage?.mimetype || 'audio/ogg; codecs=opus'; if (type === 'video') return m?.videoMessage?.mimetype || 'video/mp4'; if (type === 'doc') return m?.documentMessage?.mimetype || 'application/octet-stream'; return 'application/octet-stream'; } const thumb = msg.message?.imageMessage?.jpegThumbnail; const filename = msg.message?.documentMessage?.fileName || 'Documento'; const btnStyle = { background:'rgba(255,255,255,.15)', border:'1px solid rgba(255,255,255,.2)', borderRadius:8, padding:'7px 12px', cursor:'pointer', color:'inherit', fontSize:12, fontFamily:'inherit', display:'inline-flex', alignItems:'center', gap:6 }; // ── Imagem ── if (type === 'image') { if (state === 'idle') { if (thumb) return (
📷 Ver foto
); return ; } if (state === 'loading') return Carregando…; if (state === 'error') return 📷 Foto (erro); return window.open(src,'_blank')} />; } // ── Áudio / PTT ── if (type === 'audio') { if (state === 'idle') return ; if (state === 'loading') return Carregando áudio…; if (state === 'error') return 🎵 Áudio (erro); return