// IA — 3-column intelligence center
// =================== LEFT ===================
const IA_NAV = [
{ id: 'hot', icon: 'flame', label: 'Leads quentes', prompt: 'Me liste os leads quentes em ordem de prioridade de fechamento e o que fazer com cada um.' },
{ id: 'crm', icon: 'trending', label: 'Análise do CRM', prompt: 'Faça uma análise completa do meu funil CRM: identifique os principais bottlenecks e oportunidades.' },
{ id: 'msgs', icon: 'msgs', label: 'Mensagens', prompt: 'Resuma o estado das minhas conversas de WhatsApp. Quais contatos precisam de atenção urgente?' },
{ id: 'report', icon: 'chart', label: 'Relatórios', prompt: 'Gere um relatório de vendas da semana atual com as principais métricas do funil.' },
{ id: 'agenda', icon: 'cal', label: 'Agenda', prompt: 'Organize minha agenda: quais leads priorizar para contato hoje e em qual horário.' },
{ id: 'auto', icon: 'flow', label: 'Automações', prompt: 'Sugira automações de WhatsApp para melhorar meu funil: follow-ups, boas-vindas e reativação.' },
];
function IALeft({ search, onSearch, conversations, activeId, onSelectConv, onNewConversation, onSend, onClose, onDeleteConv }) {
const [showSearch, setShowSearch] = React.useState(false);
const [confirmId, setConfirmId] = React.useState(null);
const searchRef = React.useRef(null);
React.useEffect(() => {
if (showSearch) searchRef.current?.focus();
else onSearch('');
}, [showSearch]);
const filtered = (conversations || []).filter(c =>
!search || c.title.toLowerCase().includes(search.toLowerCase())
);
return (
{/* Topbar */}
{/* Search input (toggleable) */}
{showSearch && (
)}
{/* Nova conversa */}
Nova conversa
{/* Menu de atalhos */}
{IA_NAV.map(item => (
onSend(item.prompt)}>
{item.label}
))}
{/* Histórico */}
Recente
{filtered.length > 0
? filtered.map(conv => (
onSelectConv(conv.id)}>
{conv.title}
{conv.time}
{ e.stopPropagation(); setConfirmId(conv.id); }}>
))
:
{search ? 'Nenhum resultado.' : 'Nenhuma conversa ainda.'}
}
{/* Modal de confirmação de exclusão */}
{confirmId && (
setConfirmId(null)}>
e.stopPropagation()}>
Apagar conversa?
Essa ação não pode ser desfeita.
setConfirmId(null)}>Cancelar
{ onDeleteConv(confirmId); setConfirmId(null); }}>Apagar
)}
);
}
// =================== CENTER ===================
function AiOrb({ size = 36, animated = true }) {
return (
);
}
function ChatHead({ leftOpen, onToggleLeft }) {
if (leftOpen) return null;
return (
);
}
// rich block renderers
function renderInline(text) {
return text.split(/\*\*([^*]+)\*\*/g).map((p, i) => i % 2 ? {p} : p);
}
function TextBlock({ text, refs }) {
if (window.HorosRichText) return
{lines.map((line, li) => {
if (!line.trim()) return
;
const isBullet = /^[-•]\s/.test(line.trimStart());
const raw = isBullet ? line.replace(/^[\s\-•]+/, '') : line;
if (isBullet) return (
{renderInline(raw)}
);
return
{renderInline(raw)}
;
})}
{o.avatar ? (
{o.avatar.initials}
) : (
)}
{o.name}
{o.meta}
{o.action.secondary} }
);
}
function OppCards({ items }) {
return (
{items.map((o, i) =>
);
}
function PriorityTable({ items }) {
return (
#
Cliente
Motivo
Próx. janela
Score
{items.map(it => (
{it.rank}
{it.reason} {it.when}
{it.score}
))}
);
}
function Callout({ block }) {
const tones = {
hot: { color: '#ff5a4e', bg: 'rgba(255,90,78,0.10)', border: 'rgba(255,90,78,0.28)' },
warn: { color: '#f5b544', bg: 'rgba(245,181,68,0.10)', border: 'rgba(245,181,68,0.28)' },
ok: { color: '#34d399', bg: 'rgba(52,211,153,0.10)', border: 'rgba(52,211,153,0.28)' },
};
const m = tones[block.tone] || tones.hot;
return (
{block.title}
{block.body}
{block.action && (
)}
);
}
function MiniChart({ block }) {
const { bars, labels, peakIdx, title, note } = block;
const max = Math.max(...bars);
return (
{title}
{bars.map((v, i) => (
{i === peakIdx && {v}% }
{labels[i]}
))}
);
}
function AudioPlayer({ src }) {
const [playing, setPlaying] = React.useState(false);
const [current, setCurrent] = React.useState(0);
const [dur, setDur] = React.useState(0);
const aRef = React.useRef(null);
const toggle = () => {
const a = aRef.current; if (!a) return;
if (playing) { a.pause(); setPlaying(false); }
else { a.play().then(() => setPlaying(true)).catch(() => {}); }
};
const fmt = s => { if (!s || isNaN(s)) return '0:00'; return `${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,'0')}`; };
const progress = dur > 0 ? current / dur : 0;
const BARS = Array.from({ length: 28 }, (_, i) => 20 + Math.abs(Math.sin(i*0.9)*40 + Math.cos(i*1.7)*20));
return (
setCurrent(aRef.current?.currentTime || 0)}
onLoadedMetadata={() => setDur(aRef.current?.duration || 0)}
onEnded={() => { setPlaying(false); setCurrent(0); }} />
{playing
?
{BARS.map((h, i) => (
))}
{fmt(playing ? current : dur)}
);
}
function IaMsgFile({ block }) {
const ext = (block.name || 'arquivo').split('.').pop().toUpperCase().slice(0, 6);
return (
);
}
function AiBlocks({ blocks }) {
return (
<>
{(blocks || []).map((b, i) => {
if (b.kind === 'image') return {t}
: <>{t}
{lab.prev !== null && {inner(lab.prev)} }
{inner(lab.cur)}
);
}
// Mascote grande da tela vazia: clique → reage
const IA_MASCOT_REACTIONS = ['happy', 'wink', 'excited', 'surprised', 'confident'];
function IAEmptyMascot() {
const ref = React.useRef(null);
React.useEffect(() => {
const t = setTimeout(() => ref.current?.react?.('wink', 1300), 700);
return () => clearTimeout(t);
}, []);
return (
ref.current?.react?.(IA_MASCOT_REACTIONS[Math.floor(Math.random() * IA_MASCOT_REACTIONS.length)], 1600)}>
);
}
function TypingIndicator() {
return (
);
}
function ChatBody({ thread, loading }) {
const endRef = React.useRef(null);
// Quando a resposta chega, o orbe ainda mostra "Pronto" (~1,1 s) antes da resposta aparecer
const [resolving, setResolving] = React.useState(false);
const prevLoading = React.useRef(loading);
React.useEffect(() => {
const was = prevLoading.current;
prevLoading.current = loading;
if (was && !loading) {
setResolving(true);
const t = setTimeout(() => setResolving(false), 1150);
return () => clearTimeout(t);
}
if (loading) setResolving(false);
}, [loading]);
const hideLast = resolving && thread.length > 0 && thread[thread.length - 1].from === 'ai';
const shown = hideLast ? thread.slice(0, -1) : thread;
React.useEffect(() => {
endRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [shown.length, loading, resolving]);
if (!thread.length && !loading) {
return (
Sempre por perto, pra te ajudar.
Pergunte sobre seus leads, funil, prioridades ou peça um resumo do dia.
);
}
return (
{shown.map((m, i) => (
{m.from === 'user'
?
:
}
{m.time}
))}
{(loading || resolving) &&
}
{children}
);
}
function SuggestionList({ className = '', orientation = 'horizontal', ...props }) {
return
;
}
function nxHighlight(text, terms) {
const list = (Array.isArray(terms) ? terms : [terms]).filter(Boolean);
if (!list.length) return text;
const esc = list.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
const re = new RegExp(`(${esc.join('|')})`, 'gi');
return text.split(re).map((part, i) =>
esc.some(e => new RegExp(`^${e}$`, 'i').test(part))
? {part}
: {part} );
}
function Suggestion({ className = '', value, variant = 'filled', highlight, onClick, children, active, ...props }) {
const { onSelect } = React.useContext(NxSuggestionsCtx);
const text = value ?? (typeof children === 'string' ? children : '');
const rendered = highlight && typeof children === 'string' ? nxHighlight(children, highlight) : children;
return (
{ onClick && onClick(e); if (text && onSelect) onSelect(text); }} {...props}>
{rendered}
);
}
const NX_FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const NxPanelCtx = React.createContext(null);
// Painel que sai de trás do campo de mensagem. Esc fecha, Tab fica preso dentro, foca o 1º item ao abrir.
function SuggestionPanel({ className = '', open = true, onOpenChange, children, ...props }) {
const ref = React.useRef(null);
const [mounted, setMounted] = React.useState(open);
React.useEffect(() => { if (open) setMounted(true); }, [open]);
React.useEffect(() => {
if (!open) return;
const k = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onOpenChange && onOpenChange(false); } };
window.addEventListener('keydown', k);
return () => window.removeEventListener('keydown', k);
}, [open, onOpenChange]);
React.useEffect(() => {
if (!open || !ref.current) return;
const f = ref.current.querySelectorAll(NX_FOCUSABLE);
const first = Array.from(f).find(el => el.dataset.slot === 'suggestion') || f[0];
if (first) first.focus({ preventScroll: true });
}, [open, mounted]);
const onKeyDown = (e) => {
if (e.key !== 'Tab' || !ref.current) return;
const f = Array.from(ref.current.querySelectorAll(NX_FOCUSABLE));
if (!f.length) return;
const first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
};
if (!mounted) return null;
return (
{ if (e.animationName === 'nxPanelOut' && !open) setMounted(false); }} {...props}>
{children}
);
}
function SuggestionPanelHeader({ className = '', ...props }) { return
; }
function SuggestionPanelTitle({ className = '', ...props }) { return
; }
function SuggestionPanelClose({ className = '', onClick, ...props }) {
const ctx = React.useContext(NxPanelCtx);
return (
{ ctx && ctx.onOpenChange && ctx.onOpenChange(false); onClick && onClick(e); }} {...props} />
);
}
function SuggestionPanelContent({ className = '', ...props }) { return
; }
// Uso na tela de IA: chips de tema abaixo do campo; o tema abre o painel (atrás do campo) com as perguntas.
// Temas mudam com o ramo da empresa (workspaces.segment): ex.: "Financiamento" só no imobiliário.
const iaGroupsOf = (segment) => (window.iaSuggestionGroups ? window.iaSuggestionGroups(segment) : (window.IA_SUGGESTION_GROUPS || []));
function IASuggestionPanel({ groupId, open, onClose, onPick, disabled }) {
const segment = window.useHorosSegment ? window.useHorosSegment() : 'imobiliario';
const group = iaGroupsOf(segment).find(g => g.id === groupId);
if (!group) return null;
return (
{ if (!o) onClose(); }}>
{group.items.map(q => (
{q}
))}
);
}
function IASuggestionRow({ openId, onToggle, disabled }) {
const segment = window.useHorosSegment ? window.useHorosSegment() : 'imobiliario';
const groups = iaGroupsOf(segment);
return (
{groups.map(g => (
onToggle(g.id)}>
))}
);
}
function ChatInput({ draft, setDraft, onSend, loading }) {
const [pending, setPending] = React.useState(null);
const [recording, setRecording] = React.useState(false);
const [transcript, setTranscript] = React.useState('');
const [attachOpen, setAttachOpen] = React.useState(false);
const recognitionRef = React.useRef(null);
const recordingRef = React.useRef(false);
const photoRef = React.useRef(null);
const docRef = React.useRef(null);
const attachRef = React.useRef(null);
const inputRef = React.useRef(null);
const [sgOpen, setSgOpen] = React.useState(null); // tema aberto no painel de sugestões
const [sgLast, setSgLast] = React.useState(null); // último tema (mantém o painel durante a animação de saída)
const toggleSg = (id) => { setSgOpen(o => o === id ? null : id); setSgLast(id); };
const closeSg = () => { setSgOpen(null); requestAnimationFrame(() => inputRef.current?.focus()); };
const pickSg = (text) => { setDraft(text); closeSg(); };
React.useEffect(() => { recordingRef.current = recording; }, [recording]);
React.useEffect(() => {
if (!attachOpen) return;
const h = e => { if (!attachRef.current?.contains(e.target)) setAttachOpen(false); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [attachOpen]);
const handleKey = e => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit(); }
};
function handleSubmit() {
if (loading) return;
if (pending) {
const caption = draft.trim();
const kindLabel = pending.kind === 'image' ? 'Imagem' : 'Arquivo';
onSend({
text: caption || `${kindLabel}: ${pending.file.name}`,
blocks: [
{ kind: pending.kind, url: pending.url, name: pending.file.name },
...(caption ? [{ kind: 'text', text: caption }] : []),
],
fileData: pending.base64 ? { base64: pending.base64, mimeType: pending.mimeType, name: pending.file.name } : null,
});
setDraft('');
setPending(null);
return;
}
const text = draft.trim();
if (!text) return;
setDraft('');
onSend(text);
}
function handleFile(e, forceKind) {
const file = e.target.files?.[0];
if (!file) return;
const kind = forceKind === 'file' ? 'file' : file.type.startsWith('image/') ? 'image' : 'file';
const url = URL.createObjectURL(file);
const reader = new FileReader();
reader.onload = ev => {
const base64 = ev.target.result.split(',')[1];
setPending({ file, url, kind, base64, mimeType: file.type });
};
reader.readAsDataURL(file);
e.target.value = '';
setAttachOpen(false);
}
function startRecording() {
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SR) { alert('Reconhecimento de voz não disponível neste navegador. Use Chrome ou Edge.'); return; }
const recognition = new SR();
recognition.lang = 'pt-BR';
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = event => {
let text = '';
for (let i = 0; i < event.results.length; i++) text += event.results[i][0].transcript;
setTranscript(text);
};
recognition.onerror = e => {
if (e.error !== 'aborted') { recordingRef.current = false; setRecording(false); setTranscript(''); }
};
recognition.onend = () => {
if (recordingRef.current) { try { recognition.start(); } catch {} }
};
recognition.start();
recognitionRef.current = recognition;
setRecording(true);
setTranscript('');
}
function cancelRecording() {
recordingRef.current = false;
recognitionRef.current?.abort();
recognitionRef.current = null;
setRecording(false);
setTranscript('');
}
function sendTranscript() {
recordingRef.current = false;
recognitionRef.current?.stop();
recognitionRef.current = null;
const text = transcript.trim();
setRecording(false);
setTranscript('');
if (text) onSend(text);
}
const canSend = !loading && (draft.trim() || pending);
if (recording) {
return (
{transcript
?
{transcript}
:
}
{Array.from({ length: 14 }, (_, i) => (
))}
);
}
return (
{pending && (
{pending.kind === 'image' &&
}
{pending.kind === 'video' &&
}
{pending.kind === 'file' && (
)}
setPending(null)}>
)}
Insights IA
{loadingInsights
? carregando…
:
{shownInsights.map((ins, i) => {
const m = insightMeta[ins.kind] || insightMeta.money;
return (
{ins.title}
{ins.value}
{ins.sub}
);
})}
Ações sugeridas
{shownActions.map((a, i) => (
a.prompt && onSend && onSend(a.prompt)}>
{a.label}
{a.meta}
))}
Resumo do dia
Hoje · {dateStr}
{shownDaySummary.map((d, i) => (
{d.value}
{d.label}
))}
);
}
function lsGet(key, fallback) {
try { const v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; } catch { return fallback; }
}
function lsSave(key, val) {
try { localStorage.setItem(key, JSON.stringify(val)); } catch {}
}
// =================== PAGE ===================
function IAPage() {
// Chaves por usuário — impede vazamento de histórico entre contas no mesmo browser
const _iaUid = (window.HOROS_USER && window.HOROS_USER.id) || 'anon';
const LS_CONVS = `horos-ia-conversations-${_iaUid}`;
const LS_THREAD = `horos-ia-thread-${_iaUid}`;
const LS_HISTORY = `horos-ia-history-${_iaUid}`;
const LS_ACTIVE = `horos-ia-active-${_iaUid}`;
const [search, setSearch] = React.useState('');
const [thread, setThread] = React.useState(() => lsGet(LS_THREAD, []));
const [history, setHistory] = React.useState(() => lsGet(LS_HISTORY, []));
const [loading, setLoading] = React.useState(false);
const [draft, setDraft] = React.useState('');
// A conversa atual fica SEMPRE no histórico (desde a 1ª mensagem), marcada como ativa
const [conversations, setConversations] = React.useState(() => {
const list = lsGet(LS_CONVS, []);
const act = lsGet(LS_ACTIVE, null);
const th = lsGet(LS_THREAD, []);
if (th.length && !(act && list.some(c => c.id === act))) {
// conversa aberta de antes desta versão: entra no histórico
const firstUser = th.find(m => m.from === 'user');
const id = `conv-${Date.now()}`;
lsSave(LS_ACTIVE, id);
return [{ id, title: (firstUser?.blocks?.[0]?.text || 'Conversa').slice(0, 44), time: firstUser?.time || '', thread: th, history: lsGet(LS_HISTORY, []) }, ...list];
}
return list;
});
const [activeConvId, setActiveConvId] = React.useState(() => {
const act = lsGet(LS_ACTIVE, null);
return act && lsGet(LS_THREAD, []).length ? act : null;
});
const [leftOpen, setLeftOpen] = React.useState(true);
const activeRef = React.useRef(activeConvId);
activeRef.current = activeConvId;
React.useEffect(() => { lsSave(LS_CONVS, conversations); }, [conversations]);
React.useEffect(() => { lsSave(LS_THREAD, thread); }, [thread]);
React.useEffect(() => { lsSave(LS_HISTORY, history); }, [history]);
React.useEffect(() => { lsSave(LS_ACTIVE, activeConvId); }, [activeConvId]);
React.useEffect(() => { localStorage.setItem('horos-tour-visited-ia', '1'); window.dispatchEvent(new CustomEvent('horos:tour-check', { detail: { step: 'ia' } })); }, []);
// Mantém a conversa ativa do histórico igual ao que está na tela
React.useEffect(() => {
if (!activeConvId || !thread.length) return;
setConversations(prev => prev.map(c => c.id === activeConvId ? { ...c, thread, history } : c));
}, [thread, history, activeConvId]);
function fmtNow() {
const d = new Date();
return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}
function handleNewConversation() {
setThread([]);
setHistory([]);
setActiveConvId(null);
setDraft('');
lsSave(LS_THREAD, []);
lsSave(LS_HISTORY, []);
}
function handleDeleteConv(id) {
setConversations(prev => prev.filter(c => c.id !== id));
if (activeConvId === id) {
setThread([]);
setHistory([]);
setActiveConvId(null);
}
}
function handleSelectConv(id) {
if (id === activeConvId) return;
const conv = conversations.find(c => c.id === id);
if (!conv) return;
setThread(conv.thread || []);
setHistory(conv.history || []);
setActiveConvId(id);
}
async function handleSend(input) {
const isObj = input !== null && typeof input === 'object';
const apiText = isObj ? input.text : input;
const extraBlocks = isObj ? (input.blocks || []) : [];
const fileData = isObj ? (input.fileData || null) : null;
if (!apiText?.trim() && !extraBlocks.length) return;
if (loading) return;
const userMsg = {
from: 'user',
time: fmtNow(),
blocks: [...extraBlocks, ...(apiText?.trim() ? [{ kind: 'text', text: apiText.trim() }] : [])],
};
// 1ª mensagem: a conversa já entra no histórico, selecionada; nas seguintes sobe para o topo
let convId = activeConvId;
if (!convId) {
convId = `conv-${Date.now()}`;
const title = (apiText?.trim() || extraBlocks.map(b => b.name || b.kind).join(', ') || 'Conversa').slice(0, 44);
setConversations(prev => [{ id: convId, title, time: userMsg.time, thread: [userMsg], history }, ...prev]);
setActiveConvId(convId);
} else {
setConversations(prev => {
const c = prev.find(x => x.id === convId);
return c ? [{ ...c, time: userMsg.time }, ...prev.filter(x => x.id !== convId)] : prev;
});
}
setThread(prev => [...prev, userMsg]);
setLoading(true);
const msgForApi = apiText?.trim() || extraBlocks.map(b => b.name || b.kind).join(', ');
// Resposta vai para a conversa certa mesmo se a pessoa trocou de conversa enquanto esperava
const deliver = (aiMsg, hist) => {
if (activeRef.current === convId) {
setThread(prev => [...prev, aiMsg]);
if (hist) setHistory(prev => [...prev, ...hist]);
} else {
setConversations(prev => prev.map(c => c.id === convId
? { ...c, thread: [...(c.thread || []), aiMsg], history: hist ? [...(c.history || []), ...hist] : c.history }
: c));
}
};
try {
const token = window.horosToken ? await window.horosToken() : (window.HOROS_SESSION || {}).access_token;
const res = await fetch('/api/intelligence/broker-chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
body: JSON.stringify({ message: msgForApi, history, fileData }),
});
const data = await res.json();
const aiText = data.ok && data.text ? data.text : 'Desculpe, ocorreu um erro. Tente novamente.';
deliver({ from: 'ai', time: fmtNow(), blocks: [{ kind: 'text', text: aiText, refs: data.refs || [] }] },
[{ role: 'user', content: msgForApi }, { role: 'assistant', content: aiText }]);
} catch {
deliver({ from: 'ai', time: fmtNow(), blocks: [{ kind: 'text', text: 'Não consegui conectar com o servidor. Verifique sua conexão.' }] }, null);
} finally {
setLoading(false);
}
}
const gridCols = leftOpen ? '296px minmax(0,1fr)' : 'minmax(0,1fr)';
return (
{leftOpen && (
setLeftOpen(false)}
onDeleteConv={handleDeleteConv}
/>
)}
setLeftOpen(true)}
/>
);
}
window.IAPage = IAPage;