// crm-chat.jsx — AI Chat Assistant (floating panel) const { useState, useEffect, useRef } = React; // ── Minimal markdown renderer ────────────────────────────── function inlineMarkdown(text) { const parts = []; const rx = /\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`/g; let last = 0, m, k = 0; while ((m = rx.exec(text)) !== null) { if (m.index > last) parts.push(text.slice(last, m.index)); if (m[1]) parts.push({m[1]}); else if (m[2]) parts.push({m[2]}); else if (m[3]) parts.push( {m[3]} ); last = m.index + m[0].length; } if (last < text.length) parts.push(text.slice(last)); return parts.length === 0 ? '' : parts.length === 1 && typeof parts[0] === 'string' ? parts[0] : parts; } function MarkdownBlock({ text }) { if (!text) return null; const lines = text.split('\n'); const out = []; let i = 0; while (i < lines.length) { const line = lines[i]; if (!line.trim()) { i++; continue; } if (line.startsWith('### ')) { out.push(
{inlineMarkdown(line.slice(4))}
); i++; continue; } if (line.startsWith('## ') || line.startsWith('# ')) { const lvl = line.startsWith('# ') && !line.startsWith('## ') ? 1 : 2; out.push(
{inlineMarkdown(line.replace(/^#{1,3} /,''))}
); i++; continue; } if (/^[-•*]\s/.test(line)) { const items = []; while (i < lines.length && /^[-•*]\s/.test(lines[i])) items.push(
  • {inlineMarkdown(lines[i++].slice(2))}
    • ); out.push(); continue; } if (/^\d+\.\s/.test(line)) { const items = []; while (i < lines.length && /^\d+\.\s/.test(lines[i])) items.push(
  • {inlineMarkdown(lines[i++].replace(/^\d+\.\s/,''))}
    • ); out.push(
      {items}
    ); continue; } out.push(

    {inlineMarkdown(line)}

    ); i++; } return
    {out}
    ; } // ── FloatingChat component ───────────────────────────────── function FloatingChat({ user }) { const GREETING = { role:'assistant', done:true, content:`Hi ${user.name.split(' ')[0]}! I'm your CRM assistant. I can answer questions about leads, accounts, pipeline, revenue, tickets, and more. What would you like to know?`, }; const [open, setOpen] = useState(false); const [messages, setMessages] = useState([GREETING]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [unread, setUnread] = useState(0); const [typeText, setTypeText] = useState(''); // currently animating text const [typeFull, setTypeFull] = useState(''); // full target text const [typeTools, setTypeTools] = useState([]); const bottomRef = useRef(); const inputRef = useRef(); const timerRef = useRef(); // Auto-scroll useEffect(() => { bottomRef.current?.scrollIntoView({ behavior:'smooth' }); }, [messages, typeText, loading]); // Focus input when opened useEffect(() => { if (open) { setUnread(0); setTimeout(() => inputRef.current?.focus(), 100); } }, [open]); // Typewriter effect useEffect(() => { if (!typeFull) return; clearInterval(timerRef.current); let idx = 0; timerRef.current = setInterval(() => { idx += 4; if (idx >= typeFull.length) { clearInterval(timerRef.current); setMessages(prev => [...prev, { role:'assistant', done:true, content:typeFull, tools:typeTools }]); setTypeText(''); setTypeFull(''); setTypeTools([]); } else { setTypeText(typeFull.slice(0, idx)); } }, 18); return () => clearInterval(timerRef.current); }, [typeFull]); const send = async () => { const text = input.trim(); if (!text || loading || typeFull) return; const userMsg = { role:'user', done:true, content:text }; const newMsgs = [...messages, userMsg]; setMessages(newMsgs); setInput(''); setLoading(true); try { // Build history (skip greeting at index 0) const history = newMsgs .filter((m, i) => i > 0 && m.done) .map(m => ({ role: m.role, content: m.content })); const res = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type':'application/json' }, body: JSON.stringify({ messages: history }), }); let data; try { data = await res.json(); } catch { throw new Error(`Server error (${res.status}) — check API key and server logs`); } if (!res.ok) throw new Error(data?.error || `Error ${res.status}`); setLoading(false); setTypeTools(data.toolsUsed || []); setTypeFull(data.reply || 'Sorry, I could not generate a response.'); if (!open) setUnread(u => u + 1); } catch (e) { setLoading(false); setMessages(prev => [...prev, { role:'assistant', done:true, error:true, content:`Sorry, I ran into an error: ${e.message}` }]); } }; const clearChat = () => { clearInterval(timerRef.current); setMessages([GREETING]); setTypeText(''); setTypeFull(''); setInput(''); setLoading(false); }; const busy = loading || !!typeFull; // Suggested prompts for empty chat const suggestions = [ 'Summarize the pipeline', "What's the revenue forecast?", 'Show overdue follow-ups', 'Who are the top performers?', ]; return ( <> {/* ── Chat panel ── */} {open && (
    {/* Header */}
    🤖
    CRM Assistant
    Powered by Claude · asks your live data
    {/* Messages area */}
    {messages.map((msg, idx) => (
    {msg.role === 'assistant' && (
    🤖
    )}
    {msg.role === 'user' ? msg.content : } {msg.tools?.length > 0 && (
    🔍 {msg.tools.map(t => t.replace('get_','').replace(/_/g,' ')).join(', ')}
    )}
    ))} {/* Typewriter bubble */} {typeText && (
    🤖
    ▍
    )} {/* Thinking dots */} {loading && !typeText && (
    🤖
    {[0,.22,.44].map((d,i) => (
    ))}
    )}
    {/* Suggestions (first message only) */} {messages.length === 1 && !loading && (
    {suggestions.map(s => ( ))}
    )} {/* Input row */}