"use client"; import Image from "next/image"; import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { ArrowLeft, CalendarClock, Check, CheckCheck, CheckCircle2, Clock3, CreditCard, ExternalLink, FileText, Flame, Grid2x2, Info, Eye, LogIn, MessageCircle, MessageSquarePlus, Package, Paperclip, Pencil, Reply, RotateCcw, Search, Send, Settings, ShoppingCart, Smile, StickyNote, Store, Tag, Ticket, Trash2, User, UserPlus, Users, X, Zap, } from "lucide-react"; import AtivarAvisos from "@/components/chats/ativar-avisos"; import ChaveDoAtendimento from "@/components/chats/chave-do-atendimento"; import ConfiguracoesDoChats from "@/components/chats/configuracoes"; import PainelDeEmojis from "@/components/chats/emojis"; import EditorDeRespostas, { type RespostaPronta } from "@/components/chats/respostas-prontas"; import { prepararSom, tocarSomDeMensagem } from "@/components/chats/som"; import { getSupabaseClient } from "@/lib/supabase"; /* Chats Ktalogu. Uma tela so para conversar: o trilho escolhe com quem (a loja online ou a equipe), a lista escolhe qual conversa, o meio e a conversa e a direita e o contexto — o pedido, os arquivos que ja passaram por ali, os links. Tres decisoes mudam a sensacao de uso: - o que ja foi visto fica guardado, entao trocar de aba ou voltar para uma conversa e instantaneo: a tela antiga aparece na hora e so depois se atualiza sozinha; - a mensagem enviada aparece no mesmo instante, com um relogio no lugar da confirmacao ate o servidor responder; - mensagem que chega em outra conversa vira aviso no canto, com som, como em qualquer aplicativo de mensagem. */ type Conversa = { id: string; kind: string; nome: string; detalhe: string; avatar: string | null; orderId: string | null; quoteId: string | null; clientId: string | null; artStatus: string | null; ultimaMensagemEm: string | null; ultimaMensagem: string | null; ultimoAutor: string | null; encerrada: boolean; visitas: number; estagio: string | null; responsavel: string | null; responsavelNome: string | null; etiquetas: string[]; retomarEm?: string | null; retomarNota?: string | null; /* Só aparece na busca: o pedaço da mensagem onde o termo foi achado. */ trecho?: string | null; naoLidas: number; }; /* O produto ou o cupom que viaja dentro da mensagem. */ type Cartao = { tipo: "produto" | "cupom"; titulo?: string | null; subtitulo?: string | null; imagem?: string | null; preco?: number | null; link?: string | null; codigo?: string | null; }; type Mensagem = { id: string; author_type: string; author_id: string | null; sender_name: string | null; body: string | null; card?: Cartao | null; attachment_url: string | null; attachment_name: string | null; attachment_kind: string | null; reply_to?: string | null; respondendo?: { id: string; quem: string; resumo: string } | null; edited_at?: string | null; internal?: boolean; is_art: boolean; art_status: string | null; art_decision_note: string | null; created_at: string; deleted_at: string | null; lida_pelo_outro: string | null; /* So existe na tela: a mensagem que ainda esta a caminho do servidor. */ pendente?: boolean; }; type CabecalhoDaConversa = { id: string; kind: string; contato: string; detalhe: string; avatar: string | null; orderId: string | null; quoteId: string | null; clientId: string | null; pedido: { id: string; number: number; status: string | null; total_amount: number | null; art_status: string | null; } | null; orcamento: { id: string; number: number; status: string | null; total: number | null } | null; podeResponder: boolean; encerrada: boolean; encerradaPor: string | null; encerradaEm: string | null; visitas: number; primeiraVisita: string | null; ultimaVisita: string | null; chaveDoVisitante: string | null; estagio: string | null; responsavel: string | null; responsavelNome: string | null; etiquetas: string[]; retomarEm: string | null; retomarNota: string | null; }; type Colega = { id: string; nome: string; email: string; cargo: string }; /* Quem está sentado no balcão agora. */ type Eu = { id: string; nome: string; email: string; avatar: string | null; papel: string; ehDono: boolean; loja: string | null; logoDaLoja: string | null; podeResponder: boolean; podeConfigurar: boolean; }; type AvisoNaTela = { id: string; threadId: string; quem: string; texto: string }; type Visitante = { chave: string; nome: string | null; pagina: string; caminho: string | null; produtoId: string | null; produto: string | null; preco: number | null; imagem: string | null; threadId: string | null; clienteId: string | null; chegouPor: string | null; carrinhoItens: number; carrinhoTotal: number; voltasNoProduto: number; minutosNaLoja: number; paginasVistas: number; temperatura: string; motivo: string; desde: string; visto: string; }; /* Um passo do caminho que a pessoa fez na loja. */ type PassoDaRota = { id: string; tipo: string; titulo: string | null; caminho: string | null; produtoId: string | null; produto: string | null; preco: number | null; imagem: string | null; quantidade: number | null; valor: number | null; detalhe: string | null; em: string; }; type ResumoDaRota = { chegouPor: string | null; minutos: number; paginas: number; carrinhoItens: number; carrinhoTotal: number; primeiraVez: string | null; ultimaVez: string | null; ehCliente: boolean; }; type PlacarDoDia = { entraram: number; falaram: number; compraram: number }; type Decisao = { titulo: string; texto: string; confirmar: string; tom?: "perigo" | "normal"; aoConfirmar: () => void | Promise; }; const DIA_EM_MS = 24 * 60 * 60 * 1000; const INTERVALO_DE_AGRUPAMENTO_MS = 5 * 60 * 1000; const TAMANHO_MAXIMO = 8 * 1024 * 1024; const TEMPO_DO_AVISO_MS = 7000; const STATUS_DO_PEDIDO: Record = { pending_production: "Aguardando produção", in_production: "Em produção", finished: "Pronto", delivered: "Entregue", canceled: "Cancelado", }; const STATUS_DO_ORCAMENTO: Record = { draft: "Rascunho", sent: "Enviado ao cliente", approved: "Aprovado", rejected: "Recusado", production: "Em produção", delivered: "Entregue", }; const ARTE: Record = { pending: "Arte aguardando o cliente", approved: "Arte aprovada", rejected: "Arte reprovada", }; /* Funil dentro da propria conversa. Nao e um CRM a parte: e a mesma conversa carregando em que pe esta. Cinco estados dao conta do que acontece numa grafica — o resto e enfeite que ninguem mantem atualizado. */ const ESTAGIOS: { chave: string; rotulo: string }[] = [ { chave: "novo", rotulo: "Novo" }, { chave: "atendendo", rotulo: "Atendendo" }, { chave: "negociando", rotulo: "Negociando" }, { chave: "fechado", rotulo: "Fechado" }, { chave: "perdido", rotulo: "Perdido" }, ]; const TEMPERATURAS: Record = { quente: "Quente", morno: "Morno", frio: "Frio", }; /* As ações rápidas da barra "/". Quem atende não pode largar a conversa para procurar o preço de um produto em outra aba, nem decorar o código do cupom da semana. Digitando "/" tudo o que a loja tem chega na conversa: o produto com foto, o cupom com o código, a frase que já foi escrita mil vezes. */ type Comando = { chave: "produto" | "cupom" | "resposta" | "orcamento" | "cliente" | "nota" | "loja" | "encerrar"; rotulo: string; dica: string; icone: ReactNode; /* Alguns comandos abrem uma lista; outros agem na hora. */ imediato?: boolean; }; const COMANDOS: Comando[] = [ { chave: "produto", rotulo: "Produto", dica: "manda a foto e o preço", icone: }, { chave: "cupom", rotulo: "Cupom", dica: "oferece um desconto que está valendo", icone: }, { chave: "resposta", rotulo: "Resposta pronta", dica: "as frases que você salvou", icone: }, { chave: "orcamento", rotulo: "Virar orçamento", dica: "abre um rascunho com o cliente e o produto", icone: , imediato: true, }, { chave: "cliente", rotulo: "Virar cliente", dica: "dá ficha para quem ainda é visitante", icone: , imediato: true, }, { chave: "nota", rotulo: "Recado interno", dica: "só a equipe lê — o cliente não vê", icone: , imediato: true, }, { chave: "loja", rotulo: "Link da loja", dica: "manda o endereço da vitrine", icone: , imediato: true }, { chave: "encerrar", rotulo: "Encerrar atendimento", dica: "fecha esta conversa", icone: , imediato: true, }, ]; /* O texto que acompanha o cupom: quem recebe precisa saber quanto vale e até quando, sem abrir nada. */ function condicoesDoCupom(cupom: { tipo: string; valor: number; minimo: number | null; vence: string | null }) { const desconto = cupom.tipo === "free_shipping" ? "Frete grátis" : cupom.tipo === "percent" ? `${String(cupom.valor).replace(".", ",")}% de desconto` : `${dinheiro(cupom.valor)} de desconto`; const minimo = cupom.minimo ? ` em compras a partir de ${dinheiro(cupom.minimo)}` : ""; const validade = cupom.vence ? ` · vale até ${new Date(cupom.vence).toLocaleDateString("pt-BR")}` : ""; return `${desconto}${minimo}${validade}`; } /* Cada passo da rota tem um icone e um jeito de ser lido em voz alta. */ function iconeDoPasso(tipo: string) { if (tipo === "entrou") return ; if (tipo === "produto") return ; if (tipo === "busca") return ; if (tipo === "carrinho") return ; if (tipo === "checkout") return ; if (tipo === "compra") return ; if (tipo === "mensagem") return ; return ; } function detalheDoPasso(passo: PassoDaRota) { if (passo.tipo === "carrinho") { const quantos = Number(passo.quantidade || 1); return `${quantos} ${quantos === 1 ? "item" : "itens"} · ${dinheiro(passo.valor)}`; } if (passo.tipo === "checkout" || passo.tipo === "compra") return passo.valor ? dinheiro(passo.valor) : null; if (passo.tipo === "mensagem") return passo.titulo ? `“${passo.titulo}”` : null; if (passo.tipo === "entrou") return passo.detalhe ? `veio do ${passo.detalhe}` : passo.caminho; if (passo.tipo === "produto") return null; return passo.caminho; } function tituloDoPasso(passo: PassoDaRota) { if (passo.tipo === "entrou") return "Entrou na loja"; if (passo.tipo === "produto") return passo.produto || passo.titulo || "Viu um produto"; if (passo.tipo === "busca") return `Buscou “${passo.detalhe || passo.titulo || ""}”`; if (passo.tipo === "carrinho") return "Colocou no carrinho"; if (passo.tipo === "checkout") return "Abriu o checkout"; if (passo.tipo === "compra") return "Comprou"; if (passo.tipo === "mensagem") return passo.detalhe || "Falou no chat"; return passo.titulo || passo.caminho || "Outra página"; } /* O rosto de quem ainda não tem rosto. Visitante não fez cadastro, não subiu foto e muitas vezes nem disse o nome: as iniciais viravam um "VI" sem sentido, e usar a foto do produto no lugar da pessoa confundia as duas coisas — parecia que o cliente se chamava "caneca". O bonequinho diz o que é: alguém, ainda sem nome. */ function bonequinho(tamanho = 19) { return ; } function iniciais(nome?: string | null) { const partes = String(nome || "").trim().split(/\s+/).filter(Boolean); if (!partes.length) return "?"; if (partes.length === 1) return partes[0].slice(0, 2).toUpperCase(); return (partes[0][0] + partes[partes.length - 1][0]).toUpperCase(); } function hora(iso: string) { return new Date(iso).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }); } function rotuloDoDia(iso: string) { const data = new Date(iso); const zerar = (valor: Date) => new Date(valor.getFullYear(), valor.getMonth(), valor.getDate()).getTime(); const diferenca = Math.round((zerar(new Date()) - zerar(data)) / DIA_EM_MS); if (diferenca === 0) return "Hoje"; if (diferenca === 1) return "Ontem"; return data.toLocaleDateString("pt-BR", { day: "2-digit", month: "long", year: "numeric" }); } /* Há quanto tempo a pessoa está esperando. "18:42" não cobra ninguém; "há 40 min" cobra. É a diferença entre uma lista que informa e uma que faz alguém responder. */ function esperaEmPalavras(iso?: string | null) { if (!iso) return ""; const minutos = Math.floor((Date.now() - new Date(iso).getTime()) / 60000); if (Number.isNaN(minutos) || minutos < 1) return "agora"; if (minutos < 60) return `há ${minutos} min`; const horas = Math.floor(minutos / 60); if (horas < 24) return `há ${horas}h`; const dias = Math.floor(horas / 24); return dias === 1 ? "há 1 dia" : `há ${dias} dias`; } /* Na lista, a hora so ajuda no que e de hoje; o resto quer saber o dia. */ function quandoNaLista(iso?: string | null) { if (!iso) return ""; const data = new Date(iso); if (Number.isNaN(data.getTime())) return ""; if (new Date().toDateString() === data.toDateString()) return hora(iso); if (new Date(Date.now() - DIA_EM_MS).toDateString() === data.toDateString()) return "Ontem"; return data.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }); } function dinheiro(valor?: number | null) { return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(Number(valor || 0)); } /* O que o cliente cola como endereco tem que virar link clicavel — copiar e colar na barra do navegador e trabalho que a tela pode poupar. */ function comLinks(texto: string) { const partes = texto.split(/(https?:\/\/[^\s]+)/g); return partes.map((parte, indice) => /^https?:\/\//.test(parte) ? ( {parte} ) : ( {parte} ) ); } export default function ChatsApp() { const [aba, setAba] = useState<"loja" | "equipe">("loja"); /* Dentro da Loja Online sao duas perguntas: quem esta esperando resposta e quem esta na loja agora. A segunda fica sempre a vista — e o movimento da vitrine, nao adianta escondido atras de um clique. */ const [subAba, setSubAba] = useState<"conversas" | "visitantes">("conversas"); const [conversas, setConversas] = useState([]); const [naoLidasPorAba, setNaoLidasPorAba] = useState<{ loja: number; equipe: number }>({ loja: 0, equipe: 0 }); const [busca, setBusca] = useState(""); const [situacao, setSituacao] = useState<"abertas" | "encerradas" | "esperando">("abertas"); /* Quantas conversas estao devendo resposta: e o numero da aba Esperando. */ const [esperando, setEsperando] = useState(0); const [abertaId, setAbertaId] = useState(null); const [cabecalho, setCabecalho] = useState(null); const [mensagens, setMensagens] = useState([]); const [meuId, setMeuId] = useState(null); const [lojaIds, setLojaIds] = useState([]); const [carregandoFio, setCarregandoFio] = useState(false); const [texto, setTexto] = useState(""); const [arquivo, setArquivo] = useState(null); const [comoArte, setComoArte] = useState(false); const [enviando, setEnviando] = useState(false); const [erro, setErro] = useState(null); const [menuAberto, setMenuAberto] = useState(null); const [fotoAberta, setFotoAberta] = useState<{ url: string; nome?: string | null } | null>(null); const [painelAberto, setPainelAberto] = useState(false); const [equipe, setEquipe] = useState([]); const [listaDeContatos, setListaDeContatos] = useState(false); const [avisos, setAvisos] = useState([]); const [visitantes, setVisitantes] = useState([]); const [visitanteAberto, setVisitanteAberto] = useState(null); const [abordagem, setAbordagem] = useState(""); const [abordando, setAbordando] = useState(false); const [dia, setDia] = useState({ entraram: 0, falaram: 0, compraram: 0 }); const [rota, setRota] = useState([]); const [resumoDaRota, setResumoDaRota] = useState(null); const [mudandoEstagio, setMudandoEstagio] = useState(false); /* Ações rápidas: a barra "/" abre a lista, e o comando escolhido vira uma segunda lista (produtos, cupons, frases) filtrada pelo que se digita. */ const [atalhoAberto, setAtalhoAberto] = useState(false); const [comando, setComando] = useState(null); const [itensDoAtalho, setItensDoAtalho] = useState[]>([]); const [carregandoAtalho, setCarregandoAtalho] = useState(false); const [indiceDoAtalho, setIndiceDoAtalho] = useState(0); const [respostasSugeridas, setRespostasSugeridas] = useState(false); const [editandoRespostas, setEditandoRespostas] = useState(false); const [emojisAbertos, setEmojisAbertos] = useState(false); /* Quem está no balcão, as configurações e o que a conversa aberta permite. */ const [eu, setEu] = useState(null); const [configAberta, setConfigAberta] = useState(false); const [citando, setCitando] = useState(null); const [editando, setEditando] = useState(null); const [notaInterna, setNotaInterna] = useState(false); const [temMais, setTemMais] = useState(true); const [carregandoAntigas, setCarregandoAntigas] = useState(false); const [equipeDaLoja, setEquipeDaLoja] = useState([]); const [digitando, setDigitando] = useState(null); /* Pergunta de sim ou nao com a cara da casa: o alerta do navegador e feio, trava a pagina e nao da para escrever direito. */ const [decisao, setDecisao] = useState(null); const fimDoFio = useRef(null); const campoDeArquivo = useRef(null); const abertaRef = useRef(null); abertaRef.current = abertaId; const visitanteAbertoRef = useRef(null); visitanteAbertoRef.current = visitanteAberto?.chave || null; /* O canal da conversa aberta, guardado para avisar que estou digitando. */ const canalDoFio = useRef["channel"]> | null>(null); const ultimoAvisoDeDigitacao = useRef(0); /* O que ja foi carregado nao se joga fora: e o que faz a volta ser instantanea. */ const cacheDeConversas = useRef>({}); const cacheDeMensagens = useRef>({}); const cacheDeCabecalhos = useRef>({}); useEffect(() => { prepararSom(); }, []); /* ---------------- lista ---------------- */ const carregarConversas = useCallback(async () => { try { const resposta = await fetch( `/api/chats/threads?aba=${aba}&situacao=${situacao}&busca=${encodeURIComponent(busca)}`, { cache: "no-store" } ); const dados = (await resposta.json().catch(() => null)) as | { conversas?: Conversa[]; naoLidas?: { loja: number; equipe: number }; esperando?: number; lojaIds?: string[]; meuId?: string; } | null; const lista = Array.isArray(dados?.conversas) ? dados.conversas : []; if (!busca) cacheDeConversas.current[`${aba}:${situacao}`] = lista; setConversas(lista); if (dados?.naoLidas) setNaoLidasPorAba(dados.naoLidas); if (typeof dados?.esperando === "number") setEsperando(dados.esperando); if (Array.isArray(dados?.lojaIds)) { setLojaIds((antes) => antes.join(",") === dados.lojaIds!.join(",") ? antes : (dados.lojaIds as string[]) ); } if (dados?.meuId) setMeuId((antes) => antes || dados.meuId || null); } catch { /* Fica o que ja estava na tela: sumir com a lista por causa de uma consulta que falhou seria pior do que mostrar algo de um minuto atras. */ } }, [aba, busca, situacao]); useEffect(() => { const atraso = window.setTimeout(() => void carregarConversas(), busca ? 260 : 0); return () => window.clearTimeout(atraso); }, [carregarConversas, busca]); useEffect(() => { const relogio = window.setInterval(() => void carregarConversas(), 20000); return () => window.clearInterval(relogio); }, [carregarConversas]); useEffect(() => { if (aba !== "equipe" || equipe.length) return; void (async () => { try { const resposta = await fetch("/api/chats/contatos", { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as { equipe?: Colega[] } | null; setEquipe(Array.isArray(dados?.equipe) ? dados.equipe : []); } catch { setEquipe([]); } })(); }, [aba, equipe.length]); const carregarVisitantes = useCallback(async () => { try { const resposta = await fetch("/api/chats/visitantes", { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as | { visitantes?: Visitante[]; dia?: PlacarDoDia } | null; const lista = Array.isArray(dados?.visitantes) ? dados.visitantes : []; setVisitantes(lista); if (dados?.dia) setDia(dados.dia); /* A ficha aberta acompanha a lista: se a pessoa mudou de pagina, o cartao do meio muda junto, sem precisar clicar de novo. */ setVisitanteAberto((antes) => (antes ? lista.find((item) => item.chave === antes.chave) || antes : antes)); } catch { /* Fica a lista anterior: presenca some sozinha na proxima volta. */ } }, []); useEffect(() => { if (aba !== "loja") return; void carregarVisitantes(); /* Presenca envelhece rapido: a cada 15 segundos a lista se corrige — e o contador da sub-aba continua certo mesmo quem estando nas conversas. */ const relogio = window.setInterval(() => void carregarVisitantes(), 15000); return () => window.clearInterval(relogio); }, [aba, carregarVisitantes]); /* A rota da pessoa na loja. Vale para quem esta navegando agora e para quem ja falou: dentro da conversa o painel da direita mostra o mesmo caminho, porque a pergunta "por que ele esta perguntando isso?" se responde olhando por onde ele passou. */ const carregarRota = useCallback(async (alvo: { chave?: string | null; conversa?: string | null }) => { const parametros = alvo.chave ? `chave=${encodeURIComponent(alvo.chave)}` : alvo.conversa ? `conversa=${encodeURIComponent(alvo.conversa)}` : ""; if (!parametros) { setRota([]); setResumoDaRota(null); return; } try { const resposta = await fetch(`/api/chats/rota?${parametros}`, { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as | { rota?: PassoDaRota[]; resumo?: ResumoDaRota | null } | null; setRota(Array.isArray(dados?.rota) ? dados.rota : []); setResumoDaRota(dados?.resumo || null); } catch { setRota([]); setResumoDaRota(null); } }, []); const abrirConversa = useCallback((threadId: string) => { if (threadId === abertaRef.current) return; setErro(null); setTexto(""); setArquivo(null); abertaRef.current = threadId; /* Mostra o que ja se sabe antes de perguntar de novo. */ const guardadas = cacheDeMensagens.current[threadId]; const guardado = cacheDeCabecalhos.current[threadId]; setMensagens(guardadas || []); setCabecalho(guardado || null); setCarregandoFio(!guardadas); setAbertaId(threadId); setConversas((antes) => antes.map((item) => (item.id === threadId ? { ...item, naoLidas: 0 } : item))); if (guardadas?.length) window.setTimeout(() => fimDoFio.current?.scrollIntoView({ block: "end" }), 30); }, []); function trocarDeAba(nova: "loja" | "equipe") { if (nova === aba) return; setAba(nova); setAbertaId(null); abertaRef.current = null; setBusca(""); setVisitanteAberto(null); if (nova === "equipe") setSubAba("conversas"); /* A lista antiga volta na hora; a consulta corrige depois, se mudou algo. */ setConversas(cacheDeConversas.current[`${nova}:${situacao}`] || []); } /* Trocar de sub-aba nao e trocar de assunto: a conversa aberta continua onde estava, so a lista da esquerda muda de pergunta. */ function trocarDeSubAba(nova: "conversas" | "visitantes") { if (nova === subAba) return; setSubAba(nova); setBusca(""); if (nova === "conversas") setVisitanteAberto(null); else { setAbertaId(null); abertaRef.current = null; } } /* ---------------- fio ---------------- */ const carregarFio = useCallback( async (threadId: string, opcoes: { rolar?: boolean; soMensagens?: boolean } = {}) => { try { const endereco = `/api/chats/threads/${threadId}/mensagens${opcoes.soMensagens ? "?so=mensagens" : ""}`; const resposta = await fetch(endereco, { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as | { conversa?: CabecalhoDaConversa; mensagens?: Mensagem[]; meuId?: string } | null; if (abertaRef.current !== threadId) return; const lista = Array.isArray(dados?.mensagens) ? dados.mensagens : []; cacheDeMensagens.current[threadId] = lista; setMensagens(lista); if (dados?.conversa) { cacheDeCabecalhos.current[threadId] = dados.conversa; setCabecalho(dados.conversa); } if (dados?.meuId) setMeuId(dados.meuId); if (opcoes.rolar) window.setTimeout(() => fimDoFio.current?.scrollIntoView({ block: "end" }), 40); } finally { setCarregandoFio(false); } }, [] ); useEffect(() => { if (!abertaId) { setCabecalho(null); setMensagens([]); return; } void carregarFio(abertaId, { rolar: true, soMensagens: Boolean(cacheDeCabecalhos.current[abertaId]) }); /* Rede de seguranca: se o aviso ao vivo nao chegar, a conversa se atualiza sozinha. */ const relogio = window.setInterval(() => void carregarFio(abertaId, { soMensagens: true }), 12000); return () => window.clearInterval(relogio); }, [abertaId, carregarFio]); /* Conversa apontada no endereco: veio de um aviso do sino, de um push ou de um link colado. */ useEffect(() => { const alvo = new URLSearchParams(window.location.search).get("conversa"); if (alvo) abrirConversa(alvo); }, [abrirConversa]); /* ---------------- avisos ao vivo ---------------- */ const mostrarAviso = useCallback((aviso: AvisoNaTela) => { setAvisos((antes) => [...antes.filter((item) => item.threadId !== aviso.threadId), aviso].slice(-3)); window.setTimeout(() => { setAvisos((antes) => antes.filter((item) => item.id !== aviso.id)); }, TEMPO_DO_AVISO_MS); }, []); /* A rota acompanha o que esta aberto: a ficha do visitante ou a conversa. */ const chaveEmFoco = visitanteAberto?.chave || null; useEffect(() => { if (chaveEmFoco) { void carregarRota({ chave: chaveEmFoco }); return; } if (abertaId) { void carregarRota({ conversa: abertaId }); return; } setRota([]); setResumoDaRota(null); }, [chaveEmFoco, abertaId, carregarRota]); /* Movimento da vitrine, ao vivo. A pessoa trocou de pagina e o cartao dela ja muda aqui — sem esperar a volta do relogio. E o que separa "ver o movimento" de "ler um relatorio de quinze segundos atras". */ useEffect(() => { if (!lojaIds.length) return; const supabase = getSupabaseClient(); const inscritos = lojaIds.map((id) => { const canal = supabase.channel(`loja-movimento-${id}`); canal.on("broadcast", { event: "movimento" }, ({ payload }) => { const dados = (payload || {}) as { chave?: string }; void carregarVisitantes(); if (dados.chave && dados.chave === visitanteAbertoRef.current) { void carregarRota({ chave: dados.chave }); } }); canal.subscribe(); return canal; }); return () => { inscritos.forEach((canal) => void supabase.removeChannel(canal)); }; }, [lojaIds, carregarVisitantes, carregarRota]); /* Canal da conversa aberta: o que chega aqui entra direto no fio. */ useEffect(() => { if (!abertaId) return; const supabase = getSupabaseClient(); const canal = supabase.channel(`chat-${abertaId}`); let apagarAviso: number | undefined; canal.on("broadcast", { event: "novidade" }, () => { void carregarFio(abertaId, { rolar: true, soMensagens: true }); void carregarConversas(); setDigitando(null); }); /* "Digitando…" Custa uma mensagem solta no mesmo canal e muda a espera: quem vê o outro escrevendo espera; quem vê a tela parada acha que foi ignorado e vai perguntar no WhatsApp. */ canal.on("broadcast", { event: "digitando" }, ({ payload }) => { const quem = String((payload as { quem?: string })?.quem || "").trim(); if (!quem) return; setDigitando(quem); window.clearTimeout(apagarAviso); apagarAviso = window.setTimeout(() => setDigitando(null), 4000); }); canal.subscribe(); canalDoFio.current = canal; return () => { window.clearTimeout(apagarAviso); canalDoFio.current = null; setDigitando(null); void supabase.removeChannel(canal); }; }, [abertaId, carregarFio, carregarConversas]); /* Canais da loja e da pessoa: e por aqui que se sabe de mensagem chegando em OUTRA conversa. Sem isso, so quem estivesse com o fio certo aberto ficaria sabendo — e a pessoa passaria a tarde sem ver que alguem chamou. */ useEffect(() => { if (!lojaIds.length && !meuId) return; const supabase = getSupabaseClient(); /* A loja pode ter mais de um dono de dados (dono e empresa): ouve todos, senao o funcionario ficaria surdo para o que chega no canal da empresa. */ const nomes = [ ...lojaIds.map((id) => `chat-loja-${id}`), meuId ? `chat-pessoa-${meuId}` : null, ].filter(Boolean) as string[]; const inscritos = nomes.map((nome) => { const canal = supabase.channel(nome); canal.on("broadcast", { event: "novidade" }, ({ payload }) => { const dados = (payload || {}) as { threadId?: string; autorNome?: string; resumo?: string }; if (!dados.threadId || dados.threadId === abertaRef.current) return; void carregarConversas(); void tocarSomDeMensagem(); mostrarAviso({ id: `${dados.threadId}-${Date.now()}`, threadId: dados.threadId, quem: dados.autorNome || "Nova mensagem", texto: dados.resumo || "Mandou uma mensagem", }); }); canal.subscribe(); return canal; }); return () => { inscritos.forEach((canal) => void supabase.removeChannel(canal)); }; }, [lojaIds, meuId, carregarConversas, mostrarAviso]); /* Marca de presenca. O sino do sistema fica em outra aba e nao tem como saber se a pessoa esta aqui. Esta marca no armazenamento do navegador e o recado: "estou com o Chats aberto, nao toque o sino de novo". */ useEffect(() => { const marcar = () => { if (document.visibilityState !== "visible") return; try { window.localStorage.setItem("ktl:chats-ativo", String(Date.now())); } catch { /* Navegador sem armazenamento: o sino toca duas vezes, e so. */ } }; marcar(); const relogio = window.setInterval(marcar, 5000); document.addEventListener("visibilitychange", marcar); return () => { window.clearInterval(relogio); document.removeEventListener("visibilitychange", marcar); }; }, []); useEffect(() => { if (!menuAberto) return; const fechar = () => setMenuAberto(null); window.addEventListener("click", fechar); return () => window.removeEventListener("click", fechar); }, [menuAberto]); /* Clicar fora fecha os emojis e o menu da barra: painel que só fecha no botão acaba esquecido aberto por cima da conversa. */ useEffect(() => { if (!emojisAbertos && !atalhoAberto && !comando) return; const fechar = () => { setEmojisAbertos(false); if (atalhoAberto && !comando) setAtalhoAberto(false); }; window.addEventListener("click", fechar); return () => window.removeEventListener("click", fechar); }, [emojisAbertos, atalhoAberto, comando]); useEffect(() => { if (!fotoAberta) return; const aoTeclar = (evento: KeyboardEvent) => { if (evento.key === "Escape") setFotoAberta(null); }; window.addEventListener("keydown", aoTeclar); return () => window.removeEventListener("keydown", aoTeclar); }, [fotoAberta]); /* ---------------- escrever ---------------- */ async function enviar() { /* Editando, o mesmo botão salva a correção em vez de mandar outra. */ if (editando) { await salvarEdicao(); return; } if (!abertaId || enviando || (!texto.trim() && !arquivo)) return; if (arquivo && arquivo.size > TAMANHO_MAXIMO) { setErro("Arquivo maior que 8 MB."); return; } const conversaId = abertaId; const corpo = texto.trim(); const anexo = arquivo; const arte = comoArte; const citada = citando; const interna = notaInterna; /* A mensagem entra na tela antes de existir no banco: quem escreveu ja sabe o que escreveu, esperar o servidor para ver o proprio texto e que era estranho. Se der errado, o balao sai e o texto volta para o campo. */ const provisoria: Mensagem = { id: `enviando-${Date.now()}`, author_type: cabecalho?.kind === "team" ? "team" : "store", author_id: meuId, sender_name: "Você", body: corpo || null, attachment_url: anexo && anexo.type.startsWith("image/") ? URL.createObjectURL(anexo) : null, attachment_name: anexo?.name || null, attachment_kind: anexo ? (anexo.type.startsWith("image/") ? "image" : "file") : null, is_art: Boolean(anexo && arte && anexo.type.startsWith("image/")), art_status: null, art_decision_note: null, internal: interna, reply_to: citada?.id || null, respondendo: citada ? { id: citada.id, quem: citada.sender_name || "Mensagem", resumo: String(citada.body || "").slice(0, 120) || "Mensagem", } : null, created_at: new Date().toISOString(), deleted_at: null, lida_pelo_outro: null, pendente: true, }; setMensagens((antes) => [...antes, provisoria]); setTexto(""); setArquivo(null); setComoArte(false); setCitando(null); setNotaInterna(false); fecharAtalhos(); setEmojisAbertos(false); if (campoDeArquivo.current) campoDeArquivo.current.value = ""; window.setTimeout(() => fimDoFio.current?.scrollIntoView({ block: "end" }), 20); setEnviando(true); setErro(null); try { const dados = new FormData(); dados.set("body", corpo); if (anexo) dados.set("file", anexo); if (anexo && arte) dados.set("is_art", "true"); if (citada) dados.set("reply_to", citada.id); if (interna) dados.set("internal", "true"); const resposta = await fetch(`/api/chats/threads/${conversaId}/mensagens`, { method: "POST", body: dados }); const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null; if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível enviar."); await carregarFio(conversaId, { rolar: true, soMensagens: true }); void carregarConversas(); } catch (falha) { setMensagens((antes) => antes.filter((mensagem) => mensagem.id !== provisoria.id)); setTexto(corpo); setErro(falha instanceof Error ? falha.message : "Não foi possível enviar."); } finally { setEnviando(false); } } /* Quem está no balcão: sem isto ninguém sabe se quem responde é o dono ou o funcionário que ficou logado na máquina. */ useEffect(() => { void (async () => { try { const resposta = await fetch("/api/chats/eu", { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as { eu?: Eu } | null; if (dados?.eu) setEu(dados.eu); } catch { /* Sem a ficha, a tela continua funcionando — só sem o rosto. */ } })(); }, []); /* A equipe da loja, para transferir o atendimento. */ useEffect(() => { if (equipeDaLoja.length) return; void (async () => { try { const resposta = await fetch("/api/chats/contatos", { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as { equipe?: Colega[] } | null; setEquipeDaLoja(Array.isArray(dados?.equipe) ? dados.equipe : []); } catch { setEquipeDaLoja([]); } })(); }, [equipeDaLoja.length]); /* O começo da conversa. A tela abre pelo fim, que é o que interessa; quem precisa do combinado de três meses atrás pede mais e ele vem, sem recarregar nada. */ async function carregarAntigas() { if (!abertaId || carregandoAntigas || !mensagens.length) return; setCarregandoAntigas(true); try { const primeira = mensagens[0]; const resposta = await fetch( `/api/chats/threads/${abertaId}/mensagens?antes=${encodeURIComponent(primeira.created_at)}`, { cache: "no-store" } ); const dados = (await resposta.json().catch(() => null)) as | { mensagens?: Mensagem[]; temMais?: boolean } | null; const antigas = Array.isArray(dados?.mensagens) ? dados.mensagens : []; if (!antigas.length) { setTemMais(false); return; } setMensagens((antes) => { const juntas = [...antigas, ...antes]; cacheDeMensagens.current[abertaId] = juntas; return juntas; }); setTemMais(Boolean(dados?.temMais)); } finally { setCarregandoAntigas(false); } } /* Corrigir o que se escreveu, em vez de apagar e reescrever: some a dúvida do outro lado sobre o que estava ali antes. */ async function salvarEdicao() { if (!abertaId || !editando) return; const novoTexto = texto.trim(); if (!novoTexto) return; setEnviando(true); setErro(null); try { const resposta = await fetch(`/api/chats/threads/${abertaId}/mensagens`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ messageId: editando.id, body: novoTexto }), }); if (!resposta.ok) { throw new Error((await resposta.json().catch(() => null))?.error || "Não foi possível editar."); } setEditando(null); setTexto(""); await carregarFio(abertaId, { soMensagens: true }); void carregarConversas(); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível editar."); } finally { setEnviando(false); } } /* Da conversa para o negócio. Dois cliques que existiam só na cabeça de quem atende: o visitante vira ficha de cliente, e o papo vira orçamento com o produto que ele estava olhando. Sem isso, o atendente sai da conversa para digitar tudo de novo — e é aí que a venda esfria. */ async function virarNegocio(acao: "cliente" | "orcamento") { if (!abertaId) return; setErro(null); try { const resposta = await fetch("/api/chats/negocio", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ threadId: abertaId, acao }), }); const retorno = (await resposta.json().catch(() => null)) as | { clienteId?: string; quoteId?: string; numero?: number; error?: string } | null; if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível."); delete cacheDeCabecalhos.current[abertaId]; await carregarFio(abertaId, {}); void carregarConversas(); if (acao === "orcamento" && retorno?.quoteId) { window.open(`/dashboard/quotes/${retorno.quoteId}`, "_blank", "noreferrer"); } } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível."); } } /* Marcar o dia de voltar. Às 9h da manhã seguinte, e não à meia-noite: lembrete que chega enquanto a gráfica está fechada é lembrete perdido. */ async function marcarRetomar(dias: number | null) { if (!abertaId) return; let quando = ""; if (dias !== null) { const dia = new Date(); dia.setDate(dia.getDate() + dias); dia.setHours(9, 0, 0, 0); quando = dia.toISOString(); } await mudarConversa({ retomarEm: quando, retomarNota: quando ? `Retomar ${cabecalho?.contato || "esta conversa"}` : "", }); } /* Responsável e etiquetas: o combinado fica à vista, e não no boca a boca. */ async function mudarConversa(mudanca: Record) { if (!abertaId) return; try { const resposta = await fetch(`/api/chats/threads/${abertaId}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(mudanca), }); if (!resposta.ok) throw new Error("Não foi possível salvar."); delete cacheDeCabecalhos.current[abertaId]; await carregarFio(abertaId, {}); void carregarConversas(); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível salvar."); } } /* ---------------- ações rápidas ---------------- */ const carregarAtalho = useCallback(async (tipo: string, busca: string) => { setCarregandoAtalho(true); try { const resposta = await fetch(`/api/chats/atalhos?tipo=${tipo}&busca=${encodeURIComponent(busca)}`, { cache: "no-store", }); const dados = (await resposta.json().catch(() => null)) as | { itens?: Record[]; sugeridas?: boolean } | null; setItensDoAtalho(Array.isArray(dados?.itens) ? dados.itens : []); setRespostasSugeridas(Boolean(dados?.sugeridas)); setIndiceDoAtalho(0); } catch { setItensDoAtalho([]); } finally { setCarregandoAtalho(false); } }, []); /* Enquanto um comando está aberto, o que se digita é a busca dele. */ useEffect(() => { if (!comando || comando === "loja" || comando === "encerrar") return; const atraso = window.setTimeout(() => void carregarAtalho(comando, texto), texto ? 200 : 0); return () => window.clearTimeout(atraso); }, [comando, texto, carregarAtalho]); const comandosFiltrados = useMemo(() => { const termo = texto.startsWith("/") ? texto.slice(1).toLowerCase().trim() : ""; if (!termo) return COMANDOS; return COMANDOS.filter( (item) => item.chave.includes(termo) || item.rotulo.toLowerCase().includes(termo) ); }, [texto]); const listaDoAtalho: Record[] = comando ? itensDoAtalho : (comandosFiltrados as unknown as Record[]); function fecharAtalhos() { setAtalhoAberto(false); setComando(null); setItensDoAtalho([]); setIndiceDoAtalho(0); } /* Avisa o outro lado, no máximo uma vez a cada dois segundos: o recado é "estou aqui escrevendo", e não um telegrama por tecla. */ function avisarQueEstouDigitando() { if (!canalDoFio.current || notaInterna) return; const agora = Date.now(); if (agora - ultimoAvisoDeDigitacao.current < 2000) return; ultimoAvisoDeDigitacao.current = agora; void canalDoFio.current.send({ type: "broadcast", event: "digitando", payload: { quem: eu?.nome || "A loja" }, }); } function digitou(valor: string) { setTexto(valor); if (valor.trim()) avisarQueEstouDigitando(); if (comando) return; /* A barra só abre o menu quando é a primeira coisa da mensagem: "e/ou" no meio de uma frase não pode virar comando. */ if (valor.startsWith("/") && !valor.includes(" ")) { setAtalhoAberto(true); setIndiceDoAtalho(0); } else { setAtalhoAberto(false); } } async function escolherComando(escolhido: Comando) { if (escolhido.chave === "encerrar") { fecharAtalhos(); setTexto(""); pedirParaEncerrar(); return; } if (escolhido.chave === "nota") { /* O recado interno usa o mesmo campo, com outra cara: quem está escrevendo precisa ver, o tempo todo, que isso não vai para o cliente. */ fecharAtalhos(); setTexto(""); setNotaInterna(true); return; } if (escolhido.chave === "orcamento" || escolhido.chave === "cliente") { fecharAtalhos(); setTexto(""); await virarNegocio(escolhido.chave); return; } if (escolhido.chave === "loja") { fecharAtalhos(); setTexto(""); try { const resposta = await fetch("/api/chats/atalhos?tipo=loja", { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as { link?: string | null } | null; if (dados?.link) setTexto(`Nossa loja: ${dados.link}`); else setErro("A loja ainda não tem endereço público."); } catch { setErro("Não consegui pegar o endereço da loja."); } return; } setComando(escolhido.chave); setTexto(""); setItensDoAtalho([]); setIndiceDoAtalho(0); } /* A frase pronta com os dados desta conversa. Sem isto, a pessoa colava "Oi! Seu pedido está pronto" e voltava para escrever o nome na mão toda vez — o que faz parar de usar o atalho e escrever tudo de novo. O que não se sabe preencher some da frase, em vez de ir "{pedido}" para o cliente. */ function comOsDados(frase: string) { const primeiroNome = String(cabecalho?.contato || "").trim().split(/\s+/)[0] || ""; const pedido = cabecalho?.pedido ? `#${cabecalho.pedido.number}` : ""; const orcamento = cabecalho?.orcamento ? `#${cabecalho.orcamento.number}` : ""; return frase .replace(/\{nome\}/gi, primeiroNome) .replace(/\{pedido\}/gi, pedido || orcamento) .replace(/\{orcamento\}/gi, orcamento) .replace(/\{loja\}/gi, eu?.loja || "") .replace(/\{atendente\}/gi, String(eu?.nome || "").split(/\s+/)[0] || "") /* Sobrou marcador que esta conversa não sabe preencher: sai da frase, com os espaços em volta, para não virar "Seu pedido está pronto". */ .replace(/\s*\{[a-zà-ú]+\}\s*/gi, " ") .replace(/\s{2,}/g, " ") .trim(); } async function escolherItem(item: Record) { if (comando === "produto") { const cartao: Cartao = { tipo: "produto", titulo: String(item.nome || ""), imagem: (item.imagem as string) || null, preco: item.preco === null || item.preco === undefined ? null : Number(item.preco), link: (item.link as string) || null, }; fecharAtalhos(); setTexto(""); await enviarCartao(cartao, ""); return; } if (comando === "cupom") { const condicoes = condicoesDoCupom({ tipo: String(item.tipo || ""), valor: Number(item.valor || 0), minimo: item.minimo === null || item.minimo === undefined ? null : Number(item.minimo), vence: (item.vence as string) || null, }); const cartao: Cartao = { tipo: "cupom", titulo: String(item.codigo || ""), codigo: String(item.codigo || ""), subtitulo: condicoes, }; fecharAtalhos(); setTexto(""); await enviarCartao(cartao, `Use o cupom ${item.codigo} e ganhe ${condicoes.split(" · ")[0]}.`); return; } if (comando === "resposta") { /* Resposta pronta não vai sozinha: cai no campo já com os dados desta conversa no lugar, para a pessoa ler antes de mandar. */ fecharAtalhos(); setTexto(comOsDados(String(item.texto || ""))); return; } await escolherComando(item as unknown as Comando); } async function enviarCartao(cartao: Cartao, corpo: string) { if (!abertaId || enviando) return; const conversaId = abertaId; const provisoria: Mensagem = { id: `enviando-${Date.now()}`, author_type: cabecalho?.kind === "team" ? "team" : "store", author_id: meuId, sender_name: "Você", body: corpo || null, card: cartao, attachment_url: null, attachment_name: null, attachment_kind: null, is_art: false, art_status: null, art_decision_note: null, created_at: new Date().toISOString(), deleted_at: null, lida_pelo_outro: null, pendente: true, }; setMensagens((antes) => [...antes, provisoria]); window.setTimeout(() => fimDoFio.current?.scrollIntoView({ block: "end" }), 20); setEnviando(true); setErro(null); try { const dados = new FormData(); dados.set("body", corpo); dados.set("card", JSON.stringify(cartao)); const resposta = await fetch(`/api/chats/threads/${conversaId}/mensagens`, { method: "POST", body: dados }); const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null; if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível enviar."); await carregarFio(conversaId, { rolar: true, soMensagens: true }); void carregarConversas(); } catch (falha) { setMensagens((antes) => antes.filter((mensagem) => mensagem.id !== provisoria.id)); setErro(falha instanceof Error ? falha.message : "Não foi possível enviar."); } finally { setEnviando(false); } } async function salvarRespostas(lista: RespostaPronta[]) { const resposta = await fetch("/api/chats/atalhos", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ respostas: lista }), }); if (!resposta.ok) { const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null; throw new Error(retorno?.error || "Não consegui salvar."); } if (comando === "resposta") await carregarAtalho("resposta", ""); } function pedirParaApagar(messageId: string) { setMenuAberto(null); setDecisao({ titulo: "Apagar esta mensagem?", texto: "Ela some para os dois lados e fica só o aviso de que foi apagada. Não dá para desfazer.", confirmar: "Apagar para todos", tom: "perigo", aoConfirmar: () => apagar(messageId), }); } async function apagar(messageId: string) { if (!abertaId) return; try { const resposta = await fetch( `/api/chats/threads/${abertaId}/mensagens?messageId=${encodeURIComponent(messageId)}`, { method: "DELETE" } ); const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null; if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível apagar."); await carregarFio(abertaId, { soMensagens: true }); void carregarConversas(); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível apagar."); } } function pedirParaEncerrar() { setDecisao({ titulo: "Encerrar este atendimento?", texto: "A conversa sai da lista de abertas, sem apagar nada. Se a pessoa escrever de novo, ela volta sozinha e conta como uma nova visita.", confirmar: "Encerrar", aoConfirmar: () => encerrarAtendimento(true), }); } async function encerrarAtendimento(encerrar: boolean) { if (!abertaId) return; try { const resposta = await fetch(`/api/chats/threads/${abertaId}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ encerrar }), }); const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null; if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível encerrar."); delete cacheDeCabecalhos.current[abertaId]; if (encerrar) { setAbertaId(null); abertaRef.current = null; } else { await carregarFio(abertaId, {}); } await carregarConversas(); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível encerrar."); } } async function puxarConversa() { const alvo = visitanteAberto; const mensagem = abordagem.trim(); if (!alvo || !mensagem || abordando) return; setAbordando(true); setErro(null); try { const resposta = await fetch("/api/chats/visitantes", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ chave: alvo.chave, mensagem }), }); const retorno = (await resposta.json().catch(() => null)) as { threadId?: string; error?: string } | null; if (!resposta.ok || !retorno?.threadId) throw new Error(retorno?.error || "Não foi possível falar agora."); setAbordagem(""); setVisitanteAberto(null); setAba("loja"); /* A abordagem virou conversa: e nas conversas que ela vive daqui para a frente. */ setSubAba("conversas"); await carregarConversas(); abrirConversa(retorno.threadId); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível falar agora."); } finally { setAbordando(false); } } /* Em que pe esta esta conversa. E o funil sem tela de funil: a etiqueta mora na propria conversa e todo mundo ve a mesma coisa. */ async function mudarEstagio(novo: string) { if (!abertaId || mudandoEstagio) return; const anterior = cabecalho?.estagio || null; const valor = anterior === novo ? "" : novo; setMudandoEstagio(true); setCabecalho((antes) => (antes ? { ...antes, estagio: valor || null } : antes)); try { const resposta = await fetch(`/api/chats/threads/${abertaId}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ estagio: valor }), }); if (!resposta.ok) throw new Error("Não foi possível salvar."); const guardado = cacheDeCabecalhos.current[abertaId]; if (guardado) cacheDeCabecalhos.current[abertaId] = { ...guardado, estagio: valor || null }; setConversas((antes) => antes.map((item) => (item.id === abertaId ? { ...item, estagio: valor || null } : item)) ); } catch { setCabecalho((antes) => (antes ? { ...antes, estagio: anterior } : antes)); } finally { setMudandoEstagio(false); } } async function abrirConversaComColega(membroId: string) { setListaDeContatos(false); try { const resposta = await fetch("/api/chats/threads", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ membroId }), }); const retorno = (await resposta.json().catch(() => null)) as { threadId?: string; error?: string } | null; if (!resposta.ok || !retorno?.threadId) throw new Error(retorno?.error || "Não foi possível abrir."); await carregarConversas(); abrirConversa(retorno.threadId); } catch (falha) { setErro(falha instanceof Error ? falha.message : "Não foi possível abrir."); } } /* ---------------- contexto ---------------- */ const arquivosDaConversa = useMemo( () => mensagens.filter((mensagem) => mensagem.attachment_url && !mensagem.deleted_at && !mensagem.pendente), [mensagens] ); const linksDaConversa = useMemo(() => { const encontrados: string[] = []; mensagens.forEach((mensagem) => { const achados = String(mensagem.body || "").match(/https?:\/\/[^\s]+/g) || []; achados.forEach((link) => { if (!encontrados.includes(link)) encontrados.push(link); }); }); return encontrados.slice(0, 12); }, [mensagens]); const ehMinha = useCallback( (mensagem: Mensagem) => cabecalho?.kind === "team" ? mensagem.author_id === meuId : mensagem.author_type !== "client", [cabecalho?.kind, meuId] ); let ultimoDia = ""; /* A linha do tempo da visita. Aparece nos dois lugares — na ficha de quem esta na loja agora e no painel de qualquer conversa — porque a pergunta e a mesma: por onde essa pessoa passou antes de falar comigo? Quando nao ha rota, o painel diz isso com todas as letras, em vez de sumir e deixar a duvida no ar. */ const linhaDoTempo = (
Rota na loja
{resumoDaRota ? (
{resumoDaRota.chegouPor ? (
Chegou por
{resumoDaRota.chegouPor}
) : null}
Na loja
{resumoDaRota.minutos} min · {resumoDaRota.paginas}{" "} {resumoDaRota.paginas === 1 ? "página" : "páginas"}
{resumoDaRota.carrinhoItens > 0 ? (
Carrinho
{resumoDaRota.carrinhoItens}{" "} {resumoDaRota.carrinhoItens === 1 ? "item" : "itens"} · {dinheiro(resumoDaRota.carrinhoTotal)}
) : null}
) : null} {rota.length === 0 ? (

Sem navegação registrada. A rota aparece quando a pessoa entra pela loja online com o chat ligado.

) : (
    {rota.map((passo) => { const detalhe = detalheDoPasso(passo); return (
  1. {iconeDoPasso(passo.tipo)}
    {tituloDoPasso(passo)} {hora(passo.em)}
    {passo.tipo === "produto" && passo.imagem ? (
    {passo.produto {passo.preco ? dinheiro(passo.preco) : "abriu a página do produto"}
    ) : null} {detalhe ?
    {detalhe}
    : null}
    2. ); })}
)}
); return (
{/* ---------------- trilho ---------------- */} {/* ---------------- lista ---------------- */}
{aba === "loja" ? "Loja Online" : "Equipe"}
{aba === "equipe" ? "Conversas internas da sua empresa" : subAba === "conversas" ? "Quem já falou com a loja" : visitantes.length ? `${visitantes.length} ${visitantes.length === 1 ? "pessoa navegando agora" : "pessoas navegando agora"}` : "Ninguém navegando neste instante"}
{aba === "equipe" ? ( ) : null}
{/* Conversas e Visitantes. Sao os dois estados da mesma pessoa: a que ja falou e a que ainda esta olhando. Ficam lado a lado porque a graca e justamente passar de uma para a outra — e a de visitantes fica sempre a vista, com o ponto vivo, porque movimento de vitrine escondido nao serve de nada. */} {aba === "loja" ? (
) : null} {/* O placar do dia: se o atendimento da loja online esta valendo a pena se le em tres numeros, nao em um relatorio. */} {aba === "loja" && subAba === "visitantes" ? (
{dia.entraram} entraram
{dia.falaram} falaram
{dia.compraram} compraram
) : null} {/* Encerradas somem do trabalho do dia, mas ficam a um clique. Presenca nao encerra: quem saiu da loja some sozinho. */} {aba === "loja" ? : null} {listaDeContatos && aba === "equipe" ? (
{equipe.length === 0 ? (
Ninguém mais na equipe ainda.
) : ( equipe.map((colega) => ( )) )}
) : null}
{subAba === "visitantes" ? ( visitantes.length === 0 ? (
Ninguém na loja neste instante. Quem abrir a loja aparece aqui em poucos segundos, com a foto do produto que está olhando.
) : ( visitantes.map((visitante) => ( )) ) ) : conversas.length === 0 ? (
{busca ? "Nada encontrado com esse termo." : aba === "loja" ? "Nenhuma conversa ainda. Elas começam quando você ou o cliente escrevem dentro de um pedido." : "Nenhuma conversa interna. Toque no ícone acima para falar com alguém da equipe."}
) : ( conversas.map((conversa) => ( )) )}
{/* ---------------- fio ---------------- */}
{subAba === "visitantes" ? ( visitanteAberto ? ( /* A ficha do visitante e uma conversa que ainda nao comecou. Por isso ela usa a mesma casca: o mesmo cabecalho, o mesmo fundo de papel, o mesmo campo de escrever embaixo. O que muda e o conteudo — no lugar dos baloes, o que a pessoa esta vendo agora. */ <>
{bonequinho(18)}
{visitanteAberto.nome || "Visitante"} {TEMPERATURAS[visitanteAberto.temperatura] || "Frio"}
Na loja há {visitanteAberto.minutosNaLoja} min · {visitanteAberto.paginasVistas}{" "} {visitanteAberto.paginasVistas === 1 ? "página" : "páginas"} {visitanteAberto.chegouPor ? ` · veio do ${visitanteAberto.chegouPor}` : ""}
{visitanteAberto.threadId ? ( ) : null}
{visitanteAberto.imagem ? ( {visitanteAberto.produto ) : ( )} vendo agora
{visitanteAberto.produto || visitanteAberto.pagina}
{visitanteAberto.preco ? (
{dinheiro(visitanteAberto.preco)}
) : (
{visitanteAberto.caminho || "Navegando pela loja"}
)} {visitanteAberto.voltasNoProduto > 1 ? (
{visitanteAberto.voltasNoProduto}ª vez neste produto hoje
) : null} {visitanteAberto.carrinhoItens > 0 ? (
{visitanteAberto.carrinhoItens}{" "} {visitanteAberto.carrinhoItens === 1 ? "item no carrinho" : "itens no carrinho"} ·{" "} {dinheiro(visitanteAberto.carrinhoTotal)}
) : null}
{TEMPERATURAS[visitanteAberto.temperatura] || "Frio"} — {visitanteAberto.motivo}.
{/* Atalhos de abordagem: o que trava a pessoa do balcao e a primeira frase, e frase generica soa como robo. */}
{[ visitanteAberto.produto ? `Oi! Vi que você está olhando ${visitanteAberto.produto}. Posso ajudar em alguma dúvida?` : "Oi! Precisa de ajuda para escolher? Estou por aqui.", visitanteAberto.carrinhoItens > 0 ? "Vi que você montou o carrinho. Quer que eu confira o prazo de entrega antes de fechar?" : "Quer que eu faça um preço para quantidade maior?", "Tem alguma dúvida sobre prazo de produção?", ].map((frase) => ( ))}
{erro ?
{erro}
: null}