// Floating AI assistant — bubble at bottom-right, expands to a slide-in chat panel. // Used everywhere in the CRM except the full /#/ai screen. // Talks to /api/ai/chat (same endpoint as the main AI asistent). function FloatingAiAssistant() { const [open, setOpen] = React.useState(false); const [messages, setMessages] = React.useState(() => { try { return JSON.parse(localStorage.getItem('dd_ai_floater_msgs') || '[]'); } catch { return []; } }); const [input, setInput] = React.useState(''); const [files, setFiles] = React.useState([]); const [dragging, setDragging] = React.useState(false); const [sending, setSending] = React.useState(false); const [sendingStartedAt, setSendingStartedAt] = React.useState(null); const [model, setModel] = React.useState('auto'); const [convoId, setConvoId] = React.useState(() => { const v = localStorage.getItem('dd_ai_floater_convo'); return v ? Number(v) : null; }); const [context, setContext] = React.useState(null); const [route, setRoute] = React.useState(() => window.location.hash.replace(/^#\/?/, '').split('?')[0] || 'dashboard'); const scrollRef = React.useRef(null); const textareaRef = React.useRef(null); // Follow hash changes so we hide on /#/ai, /#/login, etc. React.useEffect(() => { const onHash = () => setRoute(window.location.hash.replace(/^#\/?/, '').split('?')[0] || 'dashboard'); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); // Persist messages + convo id so the quick chat survives page reloads / route changes React.useEffect(() => { try { localStorage.setItem('dd_ai_floater_msgs', JSON.stringify(messages.slice(-30))); } catch {} }, [messages]); React.useEffect(() => { if (convoId) localStorage.setItem('dd_ai_floater_convo', String(convoId)); }, [convoId]); // Load AI context when panel first opens. React.useEffect(() => { if (open && !context) { fetch('/api/ai/context', { credentials: 'same-origin' }) .then(r => r.json()) .then(j => { if (j && j.ok) setContext(j); }) .catch(() => {}); } }, [open, context]); // Auto-scroll on new messages / sending state React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, sending, open]); // Focus textarea on open React.useEffect(() => { if (open) setTimeout(() => textareaRef.current && textareaRef.current.focus(), 50); }, [open]); // Esc closes the panel React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open]); // Gating — don't render at all when: const session = window.currentSession; if (!session) return null; // not logged in if (route === 'ai') return null; // already on full AI screen if (route === 'login' || route === '2fa') return null; // auth flow if (window.hasPerm && !window.hasPerm('ai.view')) return null; async function send(text) { const t = (text ?? input).trim(); const hasFiles = files.length > 0; if ((!t && !hasFiles) || sending) return; let blocks = [], uiFiles = []; if (hasFiles) { try { ({ blocks, uiFiles } = await filesToAnthropicBlocks(files)); } catch (e) { alert(e.message); return; } } const userMsg = { role: 'user', content: buildUserContent(t, blocks), _ui_files: uiFiles }; const next = [...messages, userMsg]; setMessages(next); setInput(''); setFiles([]); setSending(true); setSendingStartedAt(Date.now()); try { const wire = next.map(m => ({ role: m.role, content: m.content })); const r = await fetch('/api/ai/chat', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: wire, model, conversation_id: convoId }), }); const b = await r.json().catch(() => ({})); setSending(false); setSendingStartedAt(null); if (r.ok && b.ok) { setMessages([...next, { role: 'assistant', content: b.text, _meta: { model: b.model, auto_picked: b.auto_picked, tools: b.tools_used || [], skills_loaded: b.skills_loaded || [], navigate_to: b.navigate_to || null, input_tokens: b.usage?.input_tokens, output_tokens: b.usage?.output_tokens, duration_ms: b.duration_ms, }, }]); setConvoId(b.conversation_id); // If AI triggered a navigation tool, redirect after a short delay // so the user can see the assistant's reply first. if (b.navigate_to && b.navigate_to.href) { setTimeout(() => { window.location.hash = b.navigate_to.href.replace(/^#/, ''); setOpen(false); // Tiny toast so the user knows AI caused the nav try { const el = document.createElement('div'); el.className = 'ai-nav-toast'; el.innerHTML = `✨ Otvorené z AI asistenta: ${(b.navigate_to.label || '').replace(/`; document.body.appendChild(el); setTimeout(() => el.classList.add('fade'), 2500); setTimeout(() => el.remove(), 3200); } catch {} }, 900); } } else { const msg = b.message || b.error || 'Chyba pri volaní AI.'; setMessages([...next, { role: 'assistant', content: `⚠️ ${msg}`, _error: true }]); } } catch (e) { setSending(false); setSendingStartedAt(null); setMessages([...next, { role: 'assistant', content: '⚠️ Sieťová chyba.', _error: true }]); } } function newChat() { setMessages([]); setConvoId(null); localStorage.removeItem('dd_ai_floater_msgs'); localStorage.removeItem('dd_ai_floater_convo'); } function openFull() { setOpen(false); // If we have a live convo, open it in the full screen if (convoId) sessionStorage.setItem('ai_open_convo', String(convoId)); window.location.hash = '#/ai'; } const modelShort = (m) => { if (!m || m === 'auto') return 'Auto'; if (/haiku/i.test(m)) return 'Haiku'; if (/sonnet/i.test(m)) return 'Sonnet'; if (/opus/i.test(m)) return 'Opus'; return m; }; return ( <> {/* Floating launcher bubble — sun icon with animated rays */} {!open && ( )} {/* Chat panel */} {open && ( <>
setOpen(false)}/>
{/* Header */}
Rýchly AI asistent
{context ? <>{context.skills.length > 0 ? `${context.skills.length} skillov · ` : ''}{context.tools_count} nástrojov · {Object.values(context.integrations).filter(Boolean).length}/{Object.keys(context.integrations).length} integrácií : 'Načítavam…'}
{/* Messages */}
{messages.length === 0 ? (
Opýtaj sa čokoľvek — napr. „koľko nevybavených objednávok?", „posledné faktúry zo SF", alebo „ktoré produkty sú vypredané?"
{[ 'Dnešné objednávky', 'Vypredané produkty', 'Posledné 3 faktúry', 'Alarmy z GoodWe', ].map(q => ( ))}
) : ( messages.map((m, i) => ) )} {sending && (
)}
{/* Input */}
{ e.preventDefault(); setDragging(true); }} onDragLeave={e => { e.preventDefault(); setDragging(false); }} onDrop={e => { e.preventDefault(); setDragging(false); const dropped = Array.from(e.dataTransfer?.files || []); if (dropped.length) setFiles(prev => [...prev, ...dropped].slice(0, AI_MAX_FILES)); }} > {files.length > 0 && ( setFiles(prev => prev.filter((_, j) => j !== i))}/> )}