// Floating chat widget — bilingual + quick-action prompts function ChatWidget({ open, onClose }) { const { t, lang } = useLang(); const cw = t.chatWidget; const [messages, setMessages] = React.useState([{ from: 'ai', text: cw.greeting }]); const [input, setInput] = React.useState(''); const [sending, setSending] = React.useState(false); const [showQuick, setShowQuick] = React.useState(true); const scrollRef = React.useRef(null); // Reset greeting when language flips and conversation is fresh React.useEffect(() => { setMessages(m => m.length <= 1 ? [{ from: 'ai', text: cw.greeting }] : m); }, [lang]); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, open]); const systemPrompt = lang === 'es' ? `Eres el asistente de IA de Sunblocker, un negocio de polarizado de ventanas en el área metro de NYC, dirigido por Ivan Vasquez (17 años de experiencia). Hablas en español natural y boricua, cálido y directo, sin jerga innecesaria. NUNCA digas que eres "el gemelo de Ivan" — solo eres el asistente que ayuda a agendar trabajos para Sunblocker. Mantén respuestas CORTAS (2-3 oraciones máximo). Si describen un problema de polarizado, haz UNA pregunta útil de seguimiento. Para CARROS específicamente, guíalos paso a paso pidiendo: (1) año, marca y modelo, (2) qué ventanas quieren polarizadas (laterales delanteras, laterales traseras, trasera, parabrisas, todas), (3) tono que prefieren (5%, 20%, 35%, 50% — VLT). Avísale del límite legal: en NY las laterales delanteras requieren mínimo 70% VLT. Para CASAS pregunta: cuarto, dirección que da al sol, problema (calor, brillo, privacidad, UV). Para LOCALES pregunta: pies cuadrados de cristal, meta (calor, seguridad, branding, privacidad). Precios aproximados: Carbón 35 desde $8/pie², Cerámica 70 desde $12/pie², Espectralmente selectiva desde $18/pie². Cuando tengas suficiente info, ofrece preparar un estimado para que Ivan lo revise desde su celular.` : `You are the Sunblocker AI assistant — a window-tinting business serving the NYC metro area, run by Ivan Vasquez (17 years experience). You speak warmly and plainly, no jargon unless asked. NEVER say you are "Ivan's twin" — you are simply the assistant that helps book jobs for Sunblocker. Keep replies SHORT (2-3 sentences max). If they describe a tinting problem, ask ONE helpful follow-up question. For CARS specifically, guide them step-by-step asking for: (1) year, make, model, (2) which windows they want tinted (front sides, rear sides, back, windshield, all around), (3) shade preference (5%, 20%, 35%, 50% — VLT). Heads-up about the legal limit: in NY, front-side windows require 70% VLT minimum. For HOMES ask: room, sun direction, problem (heat, glare, privacy, UV). For STOREFRONTS ask: square footage of glass, goal (heat, security, branding, privacy). Ballpark pricing: Carbon 35 from $8/sqft, Ceramic 70 from $12/sqft, Spectrally-selective from $18/sqft. When you have enough info, offer to draft an estimate for Ivan to review on his phone.`; const send = async (overrideText) => { const text = (overrideText ?? input).trim(); if (!text || sending) return; setShowQuick(false); setInput(''); setMessages(m => [...m, { from: 'cust', text }]); setSending(true); try { const reply = await window.claude.complete({ messages: [{ role: 'user', content: `${systemPrompt}\n\nCustomer said: "${text}"` }] }); setMessages(m => [...m, { from: 'ai', text: reply }]); } catch (e) { setMessages(m => [...m, { from: 'ai', text: cw.error }]); } finally { setSending(false); } }; const handleQuick = (qa) => { setMessages(m => [...m, { from: 'cust', text: qa.label }]); setShowQuick(false); setMessages(m => [...m, { from: 'ai', text: qa.prompt }]); }; if (!open) return null; return (

e.stopPropagation()}>

{cw.headerName}

{cw.headerSub}

{messages.map((m, i) => (

{m.from === 'ai' && (

)}

{m.text}

))} {sending && (

)} {showQuick && messages.length === 1 && (

{cw.quickActionsLabel}

{cw.quickActions.map(qa => ( ))}

)}

); } Object.assign(window, { ChatWidget });