/* ================================================================ Khronus — Atendimentos (WhatsApp) Tudo dentro de uma IIFE: os .jsx do Khronus são carregados como script global no navegador (sem bundler), então dois arquivos declarando a mesma const no escopo de topo derrubam o app inteiro. Quem fala com o WhatsApp é a extensão-ponte, rodando na aba do WhatsApp Web. Esta tela nunca toca no WhatsApp: ela lê o banco e, pra enviar, escreve na fila que a ponte consome. É isso que permite escrever aqui mesmo com o WhatsApp Web fechado. Fase 1: lista com filtros, thread e indicador de ponte. Fase 4: mídia nos dois sentidos. Fases 5 a 8: tags, vínculo com cliente, biblioteca de mensagens prontas, negociação e analytics — em abas internas, porque são periféricos ao fluxo do dia, que é atender a conversa. ================================================================ */ (function () { const { useState, useEffect, useMemo, useRef } = React; const { LucideIcon, Btn, Badge, TopBar, IniciaisAvatar, useEscapeToClose, CardKPI, fmtBRL } = window; /* As cinco etapas fixas que moravam aqui viraram etiquetas comuns, guardadas no banco e editáveis pelo usuário. O que sobrou com o nome "etapa" na tela é a etapa do FUNIL, que são as colunas de negociação. Ver BotaoTagsEtapa. */ const STATUS_NEGOCIACAO = [ { id: 'pendente', label: 'Em aberto', cor: '#eaaa41' }, { id: 'ganha', label: 'Fechada', cor: '#4ade80' }, { id: 'perdida', label: 'Perdida', cor: '#f87171' }, ]; const STATUS_POR_ID = Object.fromEntries(STATUS_NEGOCIACAO.map(s => [s.id, s])); const TIPOS_MENSAGEM = [ { id: 'texto', label: 'Texto', icon: 'message-square' }, { id: 'imagem', label: 'Imagem', icon: 'image' }, { id: 'video', label: 'Vídeo', icon: 'video' }, { id: 'audio', label: 'Áudio', icon: 'mic' }, { id: 'documento', label: 'Documento', icon: 'file' }, { id: 'pix', label: 'Pix', icon: 'qr-code' }, { id: 'link', label: 'Link com banner', icon: 'link' }, ]; const CORES_COLUNA = ['#60a5fa', '#eaaa41', '#a78bfa', '#f472b6', '#4ade80', 'var(--clr-neg)', '#fb923c', '#34d399', '#94a3b8']; /* Biblioteca NÃO é aba: é painel lateral que abre ao lado da conversa. O ponto dela é mandar uma mensagem pronta sem sair de onde você está — virar aba obrigaria a ir e voltar, que é exatamente o atrito que ela existe pra remover. */ const ABAS = [ { id: 'caixa', label: 'Caixa de entrada', icon: 'inbox' }, { id: 'negociacoes', label: 'Negociações', icon: 'handshake' }, { id: 'analytics', label: 'Relatórios', icon: 'bar-chart-3' }, ]; const LARGURA_BIBLIOTECA_PADRAO = 340; // A ponte pinga a cada 30s. 90s dá folga pra uma batida perdida sem // acusar offline à toa, e ainda avisa rápido quando cai de verdade. const LIMITE_PONTE_OFFLINE_MS = 90000; const INTERVALO_RECARGA_MS = 15000; /* Variáveis de mensagem pronta. Mesma ideia do MQV: o texto guarda [[nome]] e a resolução acontece no envio, com o contato em mãos. Variável desconhecida fica intacta em vez de virar "undefined" — melhor o atendente ver o defeito do que o cliente. */ const VARIAVEIS = [ { chave: 'nome', descricao: 'Primeiro nome do contato' }, { chave: 'nomecompleto',descricao: 'Nome completo do contato' }, { chave: 'saudacao', descricao: 'Bom dia / Boa tarde / Boa noite' }, ]; function saudacaoAgora() { const h = new Date().getHours(); if (h < 12) return 'Bom dia'; if (h < 18) return 'Boa tarde'; return 'Boa noite'; } function resolverVariaveis(texto, contato) { if (!texto) return ''; const valores = { nome: (contato?.nome || '').split(' ')[0] || '', nomecompleto: contato?.nome || '', saudacao: saudacaoAgora(), }; return texto.replace(/\[\[([a-zA-Z0-9_]+)\]\]/g, (inteiro, chave) => { const v = valores[chave]; return (v === undefined || v === '') ? inteiro : v; }); } /* Converte um Modelo (mensagem pronta) no formato que a fila de envio entende. Pix vira texto formatado (o WhatsApp não tem bolha nativa de pix); link com banner vira imagem com o link na legenda. Usado tanto pra "usar mensagem" quanto pra cada passo de um Script. */ function montarPassoEnvio(m, contato) { if (m.tipo === 'pix') { const linhas = []; if (m.conteudo) linhas.push(resolverVariaveis(m.conteudo, contato)); linhas.push(''); linhas.push(`Chave Pix: ${m.pix_chave || ''}`); if (m.pix_titular) linhas.push(`Titular: ${m.pix_titular}`); if (m.pix_valor) { linhas.push(`Valor: ${(Number(m.pix_valor) || 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}`); } return { tipo: 'texto', corpo: linhas.join('\n').trim(), midiaUrl: null }; } if (m.tipo === 'link') { const texto = `${resolverVariaveis(m.conteudo, contato)}\n${m.link_url || ''}`.trim(); return m.link_banner_url ? { tipo: 'imagem', corpo: texto, midiaUrl: m.link_banner_url } : { tipo: 'texto', corpo: texto, midiaUrl: null }; } if (m.tipo && m.tipo !== 'texto') { return { tipo: m.tipo, corpo: resolverVariaveis(m.conteudo, contato) || null, midiaUrl: m.midia_url || null }; } return { tipo: 'texto', corpo: resolverVariaveis(m.conteudo, contato), midiaUrl: null }; } /* Miniatura do que VOCÊ está mandando. Precisa ser gerada aqui porque o arquivo de saída é apagado da nuvem assim que o WhatsApp confirma a entrega: sem miniatura, a bolha enviada ficaria só com o nome do arquivo, e você não veria a foto que acabou de mandar. 320px na aresta maior com JPEG a 60% dá uns 15 kB, mesma ordem da miniatura que o WhatsApp entrega. Aresta MAIOR, não a largura: com largura, uma foto em pé de 1000x4000 passaria sem redução. */ async function gerarMiniatura(file) { if (!file?.type?.startsWith('image/')) return null; try { const bitmap = await createImageBitmap(file); const escala = Math.min(1, 320 / Math.max(bitmap.width, bitmap.height)); const largura = Math.max(1, Math.round(bitmap.width * escala)); const altura = Math.max(1, Math.round(bitmap.height * escala)); const tela = document.createElement('canvas'); tela.width = largura; tela.height = altura; tela.getContext('2d').drawImage(bitmap, 0, 0, largura, altura); bitmap.close?.(); return tela.toDataURL('image/jpeg', 0.6); } catch (_) { // Ficar sem prévia é aceitável. Travar o envio por causa dela não. return null; } } /* ── Helpers ─────────────────────────────────────────────────*/ function formatarTelefone(tel) { if (!tel) return ''; const d = String(tel).replace(/\D/g, ''); // 55 + DDD (2) + 9 dígitos if (d.length === 13 && d.startsWith('55')) { return `(${d.slice(2, 4)}) ${d.slice(4, 9)}-${d.slice(9)}`; } if (d.length === 12 && d.startsWith('55')) { return `(${d.slice(2, 4)}) ${d.slice(4, 8)}-${d.slice(8)}`; } return tel; } /* Como chamar a conversa na tela. Desde a migração do WhatsApp pro LID, contato pode não ter telefone conhecido — nesse caso mostrar o identificador interno seria pior que nada, então cai num rótulo honesto em vez de um número que não é número. */ function rotuloContato(c) { if (!c) return ''; if (c.nome) return c.nome; if (c.is_grupo) return 'Grupo sem nome'; if (c.telefone) return formatarTelefone(c.telefone); return 'Contato sem número'; } /* ── Avatar do contato ─────────────────────────────────────── Diferente do IniciaisAvatar de shared.jsx: aquele é pra gente do TIME, com fotos fixas por nome (Felipe, Amanda…) — usar ele aqui faria um contato chamado "Felipe" ganhar a foto do Felipe de verdade. Este é local, mostra a foto de perfil que a ponte busca no WhatsApp, com as iniciais como fallback. */ function IniciaisContato({ nome, cor, size, isGrupo }) { if (isGrupo) { return (
); } if (!nome) { return (
); } const iniciais = nome.trim().split(/\s+/).map(p => p[0]).slice(0, 2).join('').toUpperCase(); return (
{iniciais}
); } function AvatarContato({ contato, cor, size = 36 }) { const [erro, setErro] = useState(false); if (contato?.avatar_url && !erro) { return ( setErro(true)} style={{ width: size, height: size, borderRadius: '50%', flexShrink: 0, objectFit: 'cover', border: `1.5px solid ${cor || '#94a3b8'}` }} /> ); } return ; } /* ── Valor em reais, com máscara ────────────────────────────── Guarda e devolve em REAIS (número), igual ao resto do app — só a exibição vira centavos-pra-moeda enquanto a pessoa digita, do jeito que qualquer app de banco brasileiro faz. */ function formatarCentavos(centavos) { return ((Number(centavos) || 0) / 100).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', }); } function CampoValorBRL({ valor, onChange, style }) { const centavos = Math.round((Number(valor) || 0) * 100); return ( { const digitos = e.target.value.replace(/\D/g, ''); onChange((digitos ? parseInt(digitos, 10) : 0) / 100); }} placeholder="R$ 0,00" /> ); } function horaCurta(iso) { if (!iso) return ''; const d = new Date(iso); return d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }); } function diaRelativo(iso) { if (!iso) return ''; const d = new Date(iso); const hoje = new Date(); const ontem = new Date(); ontem.setDate(ontem.getDate() - 1); const mesmoDia = (a, b) => a.toDateString() === b.toDateString(); if (mesmoDia(d, hoje)) return horaCurta(iso); if (mesmoDia(d, ontem)) return 'Ontem'; return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' }); } function dataCompleta(iso) { if (!iso) return ''; return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric', }); } /* ── Indicador da ponte ──────────────────────────────────────*/ function IndicadorPonte({ status }) { const online = status?.online; const detalhe = status?.detalhe || ''; // A ponte conta no 'detalhe' o que está fazendo. Isso evita dois // problemas: tela parada sem explicação durante a varredura, e o // pior de todos, dizer "ativa" quando ela subiu mas travou. const falhou = online && detalhe.startsWith('falha:'); const trabalhando = online && detalhe.startsWith('recuperando'); const cor = (!online || falhou) ? 'var(--clr-neg)' : trabalhando ? 'var(--accent)' : 'var(--clr-pos)'; /* Quanto tempo parada. Isso muda o diagnóstico: minutos parada é WhatsApp Web fechado agora; horas ou dias parada com a aba aberta é a extensão que caiu (normalmente login vencido), e aí dizer só "abra o WhatsApp Web" manda a pessoa pro lugar errado. */ const paradaHaMs = status?.ultimo_ping ? Date.now() - new Date(status.ultimo_ping).getTime() : null; const horasParada = paradaHaMs != null ? paradaHaMs / 3600000 : null; const caiuFaz = horasParada == null ? null : horasParada >= 48 ? `${Math.round(horasParada / 24)} dias` : horasParada >= 1.5 ? `${Math.round(horasParada)} horas` : `${Math.max(1, Math.round(paradaHaMs / 60000))} min`; // Parada há mais de uma hora não é aba fechada por um instante. const provavelExtensao = !online && horasParada != null && horasParada >= 1; const texto = !online ? (provavelExtensao ? `Ponte parada faz ${caiuFaz}` : 'Ponte offline. Abra o WhatsApp Web') : falhou ? 'Ponte com problema' : trabalhando ? detalhe : 'Ponte ativa'; const explicacao = falhou ? detalhe.replace(/^falha: /, '') : online ? 'A aba do WhatsApp Web está aberta e sincronizando.' : provavelExtensao ? `Sem sinal da extensão faz ${caiuFaz}. Se o WhatsApp Web está aberto, o mais comum é o login da extensão ter vencido: abra as opções dela e entre de novo. Um "!" vermelho no ícone confirma isso.` : 'Sem a aba do WhatsApp Web aberta, nada entra e nada sai. O que você escrever fica na fila.'; return (
{texto}
); } /* ── Botão de tags + etapa, no cabeçalho da conversa ────────── As duas coisas moraram numa faixa própria embaixo do nome; virou um popover só, disparado por um botão na mesma linha do nome — tira a faixa fixa e some por padrão, só aparece quando pedida. */ /* Paleta usada tanto por etiqueta quanto por etapa do funil: as duas coisas aparecem lado a lado na tela, então compartilhar a paleta é o que evita um verde aqui brigar com outro verde ali. */ function PaletaCores({ valor, onEscolher }) { return (
{CORES_COLUNA.map(cor => (
); } /* ── Etiquetas e etapa do funil ────────────────────────────── As cinco etapas fixas que existiam aqui (Lead novo, Em conversa, Negociando, Cliente, Perdido) viraram etiquetas comuns: mesma coisa que qualquer outra etiqueta, criável e colorível por você. Ter dois sistemas de rotulagem lado a lado era só confusão, e o fixo obrigava mexer no código pra acrescentar um estado novo. No lugar de "Etapa" entra a etapa do FUNIL, que é onde a negociação está (Proposta enviada, Follow-up 01...). Essa é a mesma lista do kanban, então mover por aqui e arrastar lá são a mesma ação. */ function BotaoTagsEtapa({ contato, tags, tagsAtivas, onAlternarTag, colunas, negociacao, onMoverColuna, onCriarTag, onMudarCorTag }) { const [aberto, setAberto] = useState(false); const [criando, setCriando] = useState(false); const [nomeNovo, setNomeNovo] = useState(''); const [corNova, setCorNova] = useState(CORES_COLUNA[0]); const [editandoCor, setEditandoCor] = useState(null); const ref = useRef(null); useEffect(() => { if (!aberto) return; function fechar(ev) { if (ref.current && !ref.current.contains(ev.target)) setAberto(false); } document.addEventListener('mousedown', fechar); return () => document.removeEventListener('mousedown', fechar); }, [aberto]); async function salvarNova() { const nome = nomeNovo.trim(); if (!nome) return; await onCriarTag(nome, corNova); setNomeNovo(''); setCriando(false); } return (
{aberto && (
Etapa do funil
{negociacao ? (
{colunas.map(c => ( ))}
) : ( /* Sem negociação aberta não existe etapa: a etapa É a posição da negociação no funil. Dizer isso é melhor que mostrar botões que não fariam nada. */ Aparece depois que você abrir uma negociação. )}
Etiquetas
{criando && (
setNomeNovo(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') salvarNova(); }} style={{ ...estiloCampo, marginBottom: 7 }} />
)}
{tags.length === 0 ? ( Nenhuma etiqueta criada ainda. ) : tags.map(t => { const ativa = tagsAtivas.includes(t.id); return ( {/* A bolinha muda a cor da etiqueta em si, em todo lugar. Fica separada do nome pra clicar na etiqueta continuar sendo aplicar, não editar. */} ); })}
{editandoCor && (
Cor de “{tags.find(t => t.id === editandoCor)?.nome}”
t.id === editandoCor)?.cor} onEscolher={cor => { onMudarCorTag(editandoCor, cor); setEditandoCor(null); }} />
)}
)}
); } /* ── Item da lista de conversas ──────────────────────────────*/ // Arquivar mora só no cabeçalho da conversa, não aqui na lista: um // botão que aparece ao passar o mouse sobre cada linha vira clique // acidental no meio de uma lista que se percorre rápido. function ItemConversa({ contato, ativo, onClick, etiqueta }) { const [hov, setHov] = useState(false); // A cor da linha vem da primeira etiqueta do contato. Antes vinha // da etapa fixa, que deixou de existir. const etapa = etiqueta || null; const naoLidas = contato.nao_lidas || 0; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ display: 'flex', gap: 10, padding: '10px 12px', cursor: 'pointer', borderRadius: 'var(--r-md)', alignItems: 'center', background: ativo ? 'rgba(234,170,65,.12)' : hov ? 'var(--app-surface-3)' : 'transparent', border: `1px solid ${ativo ? 'rgba(234,170,65,.35)' : 'transparent'}`, transition: 'background 130ms' }}>
{rotuloContato(contato)} {diaRelativo(contato.ultima_msg_em)}
{/* "Você:" na frente quando a última foi nossa, igual ao WhatsApp. Sem isso, olhando a lista não dá pra saber se a bola está com você ou com o cliente — que é a única pergunta que importa numa lista de atendimento. */} {contato.previa_direcao === 'saida' && ( Você: )} {contato.previa || (contato.telefone ? formatarTelefone(contato.telefone) : '')} {etapa && ( )} {naoLidas > 0 && ( {naoLidas} )}
); } /* ── Anexo ─────────────────────────────────────────────────── O armazenamento é privado (é foto e documento de cliente real), então a tela não tem uma URL fixa: pede uma URL assinada de curta duração na hora de mostrar. */ const TIPOS_COM_ARQUIVO = new Set(['imagem', 'audio', 'video', 'documento', 'figurinha']); /* Visualizador de imagem. Abrir em aba nova tira a pessoa da conversa; aqui a imagem cresce por cima e o Esc devolve o lugar de onde ela saiu — mesmo comportamento do WhatsApp Web. */ function Lightbox({ url, onClose }) { useEscapeToClose(onClose); if (!url) return null; return (
e.stopPropagation()} title="Baixar" style={{ position: 'absolute', top: 18, right: 62, width: 34, height: 34, borderRadius: 'var(--r-sm)', background: 'rgba(255,255,255,.1)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> e.stopPropagation()} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 'var(--r-sm)', cursor: 'default' }} />
); } const ROTULO_MIDIA = { imagem: 'Foto', figurinha: 'Figurinha', audio: 'Áudio', video: 'Vídeo', documento: 'Documento' }; const ACAO_MIDIA = { imagem: 'Ver foto', figurinha: 'Ver figurinha', audio: 'Ouvir', video: 'Assistir', documento: 'Baixar' }; const ICONE_MIDIA = { imagem: 'image', figurinha: 'sticker', audio: 'mic', video: 'video', documento: 'file' }; /* ── Anexo ─────────────────────────────────────────────────── O arquivo não está na nuvem, e isso é a escolha certa: quem guarda mídia de WhatsApp é o WhatsApp. O que vem do banco é a miniatura que ele entrega junto da mensagem; o arquivo em tamanho real é buscado na hora em que você abre, pela extensão, e fica guardado neste navegador pra não ser buscado de novo. Três estados de falha, tratados separado porque a saída é diferente em cada um: extensão não instalada (instalar), WhatsApp Web fechado (abrir a aba) e arquivo que não veio (tentar de novo). Um "não consegui abrir o arquivo" genérico faria você mexer na coisa errada. */ function Anexo({ msg, onAbrirImagem }) { const [url, setUrl] = useState(null); const [carregando, setCarregando] = useState(false); const [erro, setErro] = useState(null); // Áudio só toca sozinho quando FOI VOCÊ que clicou. Sem esta // distinção, abrir uma conversa com cinco áudios já ouvidos // dispararia os cinco ao mesmo tempo, porque eles vêm do cache // sem passar por clique nenhum. const pediu = useRef(false); const ehImagem = msg.tipo === 'imagem' || msg.tipo === 'figurinha'; const legado = !!msg.midia_url; // Arquivo antigo, da época em que toda mídia subia pra nuvem. // Continua sendo servido de lá enquanto existir. Mídia nova não // passa mais por aqui. useEffect(() => { let vivo = true; if (!legado) return; window.db.storage.from('whatsapp-midia') .createSignedUrl(msg.midia_url, 3600) .then(({ data, error }) => { if (!vivo) return; if (error || !data?.signedUrl) return setErro('arquivo antigo não está mais lá'); setUrl(data.signedUrl); }); return () => { vivo = false; }; }, [msg.midia_url]); async function carregar(porClique) { if (carregando || url) return; if (porClique) pediu.current = true; setCarregando(true); setErro(null); const r = await window.khronusMidia.obter(msg.wa_message_id); setCarregando(false); if (r.erro) return setErro(r.erro); setUrl(r.url); } // Já buscado antes nesta máquina: aparece sozinho, sem pedir // clique. Não dispara busca nenhuma, só olha o que já está aqui. useEffect(() => { let vivo = true; if (legado || !msg.wa_message_id) return; window.khronusMidia?.jaTenho(msg.wa_message_id).then((tem) => { if (vivo && tem) carregar(); }); return () => { vivo = false; }; }, [msg.wa_message_id]); /* ── com o arquivo em mãos ── */ if (url) { if (ehImagem) { return ( {msg.tipo} onAbrirImagem?.(url)} style={{ maxWidth: '100%', maxHeight: 320, borderRadius: 'var(--r-sm)', display: 'block', cursor: 'zoom-in', marginBottom: msg.corpo ? 6 : 0 }} /> ); } if (msg.tipo === 'audio') { return