// Chat flutuante pra lançamento rápido por texto ou voz. // Usuário fala/digita "R$ 15 no pastel, 20 no Uber" → IA parseia → confirma → grava. // Web Speech API (sem servidor) pra captura de voz em pt-BR. // Quando `embedded=true`, renderiza fullscreen sem FAB (modo "chat-only" via URL ?chat) function QuickEntryChat({ ws, setWs, accent, embedded = false, isPro = false, showUpgrade, userId }) { const [open, setOpen] = React.useState(embedded); const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const [recording, setRecording] = React.useState(false); const recognitionRef = React.useRef(null); const scrollRef = React.useRef(null); const inputRef = React.useRef(null); const fileInputRef = React.useRef(null); // Auto-scroll a cada mensagem nova React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, loading]); // Foca o input quando abre React.useEffect(() => { if (open && inputRef.current && !recording) { setTimeout(() => inputRef.current?.focus(), 80); } }, [open, recording]); // Atalho: Esc fecha o chat React.useEffect(() => { const fn = e => { if (e.key === "Escape" && open && !recording) setOpen(false); }; window.addEventListener("keydown", fn); return () => window.removeEventListener("keydown", fn); }, [open, recording]); // Voz — Web Speech API (Chrome/Edge têm suporte nativo) const startRecording = () => { const SR = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SR) { alert("Seu navegador não suporta reconhecimento de voz. Use Chrome ou Edge — ou digite a mensagem."); return; } const rec = new SR(); rec.lang = "pt-BR"; rec.interimResults = true; rec.continuous = false; rec.onresult = (e) => { let transcript = ""; for (let i = e.resultIndex; i < e.results.length; i++) transcript += e.results[i][0].transcript; setInput(transcript); }; rec.onend = () => setRecording(false); rec.onerror = (e) => { console.error("[Voz] erro:", e.error); setRecording(false); }; rec.start(); recognitionRef.current = rec; setRecording(true); }; const stopRecording = () => { if (recognitionRef.current) recognitionRef.current.stop(); }; // Envia mensagem → IA parseia → mostra preview const handleSubmit = async () => { const text = input.trim(); if (!text || loading) return; // Free: limite de 10 msgs/dia if (!isPro && userId) { const used = window.PlanilhaPlan.getChatMessagesToday(userId); const limit = window.PlanilhaPlan.FREE_LIMITS.chatMessagesPerDay; if (used >= limit) { if (showUpgrade) showUpgrade(`Você usou suas ${limit} mensagens grátis de hoje. No Pro são ilimitadas.`); return; } window.PlanilhaPlan.incrementChatMessages(userId); } setMessages(prev => [...prev, { role: "user", text, ts: new Date() }]); setInput(""); setLoading(true); try { const result = await aiParseQuickEntry(text, ws); const txs = result.transactions || []; if (isHighConfidence(txs)) { // Auto-confirm: lança direto e mostra toast com undo const { undo, count } = autoSaveTxs(txs); const totalValue = txs.reduce((s, t) => s + (Number(t.value) || 0), 0); const summary = count === 1 ? `✓ Lançado: ${txs[0].desc} · R$ ${totalValue.toFixed(2).replace(".", ",")}` : `✓ Lançados ${count} itens · total R$ ${totalValue.toFixed(2).replace(".", ",")}`; setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: summary, status: "saved", txs, }]); if (window.toast) { window.toast({ message: summary, action: { label: "Desfazer", onClick: undo }, duration: 8000, }); } } else if (txs.length > 0) { // Baixa confiança (valor zero, descrição vazia): cai no preview pro user revisar setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: "Identifiquei mas faltou detalhe — confere antes de confirmar:", txs, status: "preview", }]); } else { setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: "Não consegui identificar nenhum lançamento aqui. Tenta algo como: 'gastei 15 no pastel', '20 no Uber', 'recebi 100 da Maria'.", }]); } } catch (e) { console.error("[Chat IA] erro:", e); setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: `Erro: ${e?.message || e}`, isError: true }]); } finally { setLoading(false); } }; // Foto: usuário tira/escolhe → IA vision extrai → preview (mesmo fluxo de texto) const handleImagePicked = async (e) => { const file = e.target.files?.[0]; if (e.target) e.target.value = ""; // permite escolher mesma foto de novo if (!file || loading) return; // Pro-only — foto via IA vision custa 3-5x mais que texto if (!isPro) { if (showUpgrade) showUpgrade("Anexar foto de notas/recibos é um recurso Pro. Faça upgrade pra usar."); return; } // Limite de chat ainda vale (mesmo bucket) if (userId) { const used = window.PlanilhaPlan.getChatMessagesToday(userId); const limit = window.PlanilhaPlan.FREE_LIMITS.chatMessagesPerDay; // Pro: ilimitado, mas pra defesa em depth, só conta se algum bucket existir if (!isPro && used >= limit) { if (showUpgrade) showUpgrade(`Você usou suas ${limit} mensagens grátis de hoje. No Pro são ilimitadas.`); return; } window.PlanilhaPlan.incrementChatMessages(userId); } // Thumbnail imediato (URL.createObjectURL evita re-encode em base64 pra exibir) const thumbUrl = URL.createObjectURL(file); setMessages(prev => [...prev, { role: "user", ts: new Date(), text: "📷 Foto anexada", imageThumbUrl: thumbUrl, }]); setLoading(true); try { const result = await aiParseImage(file, ws); const txs = result.transactions || []; if (isHighConfidence(txs)) { // Auto-confirm: lança direto e mostra toast com undo const { undo, count } = autoSaveTxs(txs); const totalValue = txs.reduce((s, t) => s + (Number(t.value) || 0), 0); const summary = count === 1 ? `✓ Lançado da foto: ${txs[0].desc} · R$ ${totalValue.toFixed(2).replace(".", ",")}` : `✓ Lançados ${count} itens da foto · total R$ ${totalValue.toFixed(2).replace(".", ",")}`; setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: summary, status: "saved", txs, }]); if (window.toast) { window.toast({ message: summary, action: { label: "Desfazer", onClick: undo }, duration: 8000, }); } } else if (txs.length > 0) { setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: "Identifiquei mas faltou detalhe — confere antes de confirmar:", txs, status: "preview", }]); } else { setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: "Não consegui extrair dados claros dessa foto. Tenta uma foto mais nítida ou digita manualmente o que gastou.", }]); } } catch (err) { console.error("[Chat IA foto] erro:", err); setMessages(prev => [...prev, { role: "ai", ts: new Date(), text: `Erro ao analisar foto: ${err?.message || err}`, isError: true, }]); } finally { setLoading(false); } }; // Helper: cria UI objects e separa entradas/saídas. Reutilizado por // autoSaveTxs (fluxo novo com auto-confirm) e confirmTxs (fallback preview). const buildTxnsToSave = (txsToSave) => { const newOut = []; const newIn = []; const today = new Date().toISOString().slice(0, 10); txsToSave.forEach(t => { const ui = { id: crypto.randomUUID(), date: t.date || today, desc: (t.desc || "").trim() || "Lançamento rápido", value: Number(t.value) || 0, status: t.type === "income" ? "RECEBIDO" : "PAGO", payment: t.payment || "Pix", category: (t.category || (t.type === "income" ? "OUTRAS RECEITAS" : "OUTROS")).toUpperCase(), subcategory: t.subcategory || "", who: "", }; if (t.type === "income") newIn.push(ui); else newOut.push(ui); }); return { newOut, newIn }; }; // Auto-save sem perguntar (fluxo novo). Lança direto, mostra toast com undo. // Retorna { ids } pra undo conseguir reverter. const autoSaveTxs = (txsToSave) => { const { newOut, newIn } = buildTxnsToSave(txsToSave); const outIds = newOut.map(t => t.id); const inIds = newIn.map(t => t.id); setWs(prev => ({ ...prev, transactions: [...newOut, ...(prev.transactions || [])], receitas: [...newIn, ...(prev.receitas || [])], })); // Undo: remove pelos IDs salvos const undo = () => { setWs(prev => ({ ...prev, transactions: (prev.transactions || []).filter(t => !outIds.includes(t.id)), receitas: (prev.receitas || []).filter(r => !inIds.includes(r.id)), })); }; return { undo, count: txsToSave.length }; }; // Confirma e grava no workspace (fluxo antigo — usado quando IA não tem // confiança alta e cai no preview, ou foto que precisa revisão). const confirmTxs = (msgIndex, txsToSave) => { const { newOut, newIn } = buildTxnsToSave(txsToSave); setWs(prev => ({ ...prev, transactions: [...newOut, ...(prev.transactions || [])], receitas: [...newIn, ...(prev.receitas || [])], })); setMessages(prev => prev.map((m, i) => i === msgIndex ? { ...m, status: "saved" } : m)); }; // Decide se a IA acertou o suficiente pra auto-confirmar: // todos os txs precisam ter valor > 0 e descrição não vazia const isHighConfidence = (txs) => { if (!Array.isArray(txs) || txs.length === 0) return false; return txs.every(t => Number(t.value) > 0 && (t.desc || "").trim().length > 0); }; const cancelTxs = (msgIndex) => { setMessages(prev => prev.map((m, i) => i === msgIndex ? { ...m, status: "cancelled" } : m)); }; // Ajusta valor / desc / categoria de um item específico do preview const editTx = (msgIndex, txIndex, field, value) => { setMessages(prev => prev.map((m, i) => { if (i !== msgIndex) return m; const newTxs = m.txs.map((t, ti) => ti === txIndex ? { ...t, [field]: value } : t); return { ...m, txs: newTxs }; })); }; const removeTx = (msgIndex, txIndex) => { setMessages(prev => prev.map((m, i) => { if (i !== msgIndex) return m; const newTxs = m.txs.filter((_, ti) => ti !== txIndex); if (newTxs.length === 0) return { ...m, status: "cancelled" }; return { ...m, txs: newTxs }; })); }; const onKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }; // ============ UI ============ // FAB fechado (só no modo flutuante) if (!open && !embedded) { return ( ); } // Painel — flutuante (canto inferior direito) ou embedded (fullscreen) const containerStyle = embedded ? { position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--surface-1)", overflow: "hidden", } : { position: "fixed", bottom: 22, right: 22, zIndex: 9000, width: 400, maxWidth: "calc(100vw - 24px)", height: 580, maxHeight: "calc(100vh - 40px)", display: "flex", flexDirection: "column", background: "var(--surface-1)", border: "1px solid var(--border)", borderRadius: 24, boxShadow: "var(--shadow-lg)", overflow: "hidden", }; return (
{/* Cabeçalho */}
Lançamento rápido
Fala ou escreve · IA registra
{!embedded && ( )}
{/* Histórico */}
{messages.length === 0 && (
Manda do seu jeito
{[ "gastei 15 no pastel", "20 no Uber e 80 no mercado", "recebi 1500 do salário", ].map((ex, i) => (
“{ex}”
))}
microfone também funciona — Chrome/Edge
)} {messages.map((m, i) => ( confirmTxs(i, m.txs)} onCancel={() => cancelTxs(i)} onEdit={(ti, f, v) => editTx(i, ti, f, v)} onRemove={(ti) => removeTx(i, ti)} /> ))} {loading && (
)}
{/* Input */}