); } function Spinner({ accent }: { accent: string }) { return (

); } function ArrowUpIcon() { return ( ); } function MicIcon() { return ( ); } function DotsIcon() { return ( ); } function PoweredMark({ logoUrl }: { logoUrl?: string | null }) { if (logoUrl) { return (

); } return ( ); } function brandingDisplayParts(mode?: 'logo_text' | 'logo_only' | 'text_only') { if (mode === 'logo_only') { return { showLogo: true, showText: false }; } if (mode === 'text_only') { return { showLogo: false, showText: true }; } return { showLogo: true, showText: true }; } /** * Mint a fresh `(userId, assistantId)` pair for one turn. Hoisted out * of the component so the impure Date.now() call doesn't trip * react-hooks/purity inside the render body. */ function nextTurnIds(): { userId: string; assistantId: string } { const stamp = Date.now(); return { userId: `m-${stamp}-u`, assistantId: `m-${stamp}-a`, }; } /** * Browser-native voice input. Web Speech API is unprefixed in modern * Chromium and Safari; older Safari + iOS still need webkit. Returns * undefined on engines that don't expose either, so the mic button * can fall back to disabled. */ type SpeechRecognitionCtor = new () => { lang: string; continuous: boolean; interimResults: boolean; onresult: ((e: SpeechRecognitionResultEvent) => void) | null; onerror: ((e: Event) => void) | null; onend: (() => void) | null; start: () => void; stop: () => void; }; type SpeechRecognitionResultEvent = { results: ArrayLike<{ 0: { transcript: string }; isFinal: boolean; length: number; }>; resultIndex: number; }; function getSpeechRecognition(): SpeechRecognitionCtor | undefined { const w = window as unknown as { SpeechRecognition?: SpeechRecognitionCtor; webkitSpeechRecognition?: SpeechRecognitionCtor; }; return w.SpeechRecognition ?? w.webkitSpeechRecognition; } const menuItemBase = { display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '8px 12px', fontSize: 13, color: '#0f172a', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' as const, textDecoration: 'none', fontFamily: 'inherit', }; /** * Soft synthetic chime played on the first unread message of a session. * Web Audio API beep instead of bundling an mp3/ogg so we stay inside * the ≤50KB gz widget budget. Honours `prefers-reduced-motion` (treats * it as a proxy for "don't surprise me with sounds") and silently * no-ops on engines without AudioContext (older Safari, headless tests). */ function playChime(): void { try { const reduceMotion = window.matchMedia?.( '(prefers-reduced-motion: reduce)', ).matches; if (reduceMotion) { return; } const Ctor = (window as unknown as { AudioContext?: typeof AudioContext }) .AudioContext ?? ( window as unknown as { webkitAudioContext?: typeof AudioContext; } ).webkitAudioContext; if (!Ctor) { return; } const ctx = new Ctor(); const now = ctx.currentTime; const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; // Two soft tones (~C6 → E6) so it reads as "ding" not "beep". osc.frequency.setValueAtTime(880, now); osc.frequency.exponentialRampToValueAtTime(1318, now + 0.12); gain.gain.setValueAtTime(0.0001, now); gain.gain.exponentialRampToValueAtTime(0.18, now + 0.02); gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.42); osc.connect(gain).connect(ctx.destination); osc.start(now); osc.stop(now + 0.45); // Release the context so the page doesn't keep an audio // process alive after the chime ends. window.setTimeout(() => { try { ctx.close(); } catch { // best-effort cleanup } }, 600); } catch { // Audio is non-essential — never surface failures to the visitor. } } export function Bar({ api, state, error, demo = false }: Props) { const [open, setOpen] = useState(state.open); const [menuOpen, setMenuOpen] = useState(false); const [input, setInput] = useState(''); const [recording, setRecording] = useState(false); const [voiceSupported] = useState( () => getSpeechRecognition() !== undefined, ); // Captured the last voice-input error so the mic button can surface // a one-line hint to the visitor. Buyer JFOC reported the mic // failing silently in Brave because Brave's "Block fingerprinting" // shield gates Web Speech API even after the visitor grants the // browser-level microphone permission. We can't auto-detect Brave // reliably (UA is Chromium), but we can map the SpeechRecognition // error code into a precise piece of advice. const [voiceError, setVoiceError] = useState< null | 'not-allowed' | 'service-not-allowed' | 'no-speech' | 'other' >(null); const inputRef = useRef(null); const menuWrapRef = useRef(null); const lastTypingFireRef = useRef(0); const recognitionRef = useRef | null>( null, ); // Plays the chime at most once per session — repeat unreads while // minimised still bump the badge but stay silent so we don't nag. const chimedThisSessionRef = useRef(false); // Fire the chime the first time `unreadCount` crosses 0 → 1 while // the bar is closed. Side effect only — we don't mutate the store // here, just play audio. useEffect(() => { if ( state.unreadCount > 0 && !state.open && !chimedThisSessionRef.current ) { chimedThisSessionRef.current = true; playChime(); } }, [state.unreadCount, state.open]); const theme = readTheme( state.agent?.theme as Record | null, ); const accent = theme.primary; const launcherLabel = localizedLauncherLabel(theme.launcher_label); const radius = Math.max(12, Math.min(28, Number(theme.radius))); const pos = positionStyles(theme.position); const scheme = resolveScheme(theme.color_scheme); const sizeDims = launcherDims(theme.launcher_size); // Mobile-safe responsive bar width. Operator picks a max (320–800); // on small screens we cap at viewport minus 32px gutter so the bar // never overflows or gets clipped at the right/left edge — buyer // 2026-05-22 reported the bar cropping in bottom-right/left on // mobile. const barWidthCss = `min(${Number(theme.bar_width) || 560}px, calc(100vw - 32px))`; const starterPosition: 'top' | 'bottom' = theme.starter_prompts_position === 'bottom' ? 'bottom' : 'top'; // Single source of truth for the scheme-aware surface colours. // Pre-fix every panel surface was hard-coded white — toggling // theme.color_scheme to "dark" didn't change anything visible. const palette = scheme === 'dark' ? { surface: '#0f172a', surfaceMuted: '#1e293b', text: '#e2e8f0', textMuted: '#94a3b8', border: '#1f2937', } : { surface: '#ffffff', surfaceMuted: '#f8fafc', text: '#0f172a', textMuted: '#64748b', border: '#f1f5f9', }; const isStreaming = state.messages.some((m) => m.pending === true); const hasMessages = state.messages.length > 0; const showSend = input.trim().length > 0; const branding = state.init?.branding; // Persona display-name override: when the admin set a Persona name // ("Aria", "Angela", etc.) in agents/{id}/customize, that's the // identity the visitor should see in the panel header — not the // generic "AI assistant" placeholder. Falls back to the localized // default for legacy agents with no persona configured. const personaName = (() => { const persona = state.init?.agent.persona; if (persona && typeof persona === 'object' && 'name' in persona) { const name = (persona as { name?: unknown }).name; if (typeof name === 'string' && name.trim() !== '') { return name.trim(); } } return null; })(); // Client report 2026-05-23: buyer set Agent → Basics → Name = "Kaia" // but the widget header rendered "AI assistant" because they never // touched the separate Settings → Widget → Persona → Display name // field. The two-fields-for-the-same-thing is confusing; until the // form is unified, fall back to the agent's primary name so the // visitor sees what the buyer configured first. const agentName = (() => { const name = state.init?.agent.name; return typeof name === 'string' && name.trim() !== '' ? name.trim() : null; })(); const panelTitle = state.isHumanHandling ? tr('Live support') : (personaName ?? agentName ?? tr('AI assistant')); // Single source of truth for "visitor wants a human". Used by the // always-visible header button + the LLM-emitted escalation_button // block + the in-message lead form's "Talk to a human" path. The // server always queues the request now (it sends a Reverb ping + // a DB notification + email to every available operator) and tells // us how long to wait via `wait_timeout_seconds`. We keep the // banner in "Connecting…" until that deadline; after that the // widget locally flips to `offline_no_operators` so the visitor // can leave an email instead of staring at a spinner. const requestHumanHandoff = () => { const jwt = state.init?.jwt; if (!jwt) { return; } if (state.isHumanHandling) { return; } const now = Date.now(); store.set({ handoffStatus: 'queued', humanRequestedAt: new Date(now).toISOString(), // Optimistic 120s deadline; replaced by the server's value // as soon as the response lands. handoffWaitTimeoutAt: now + 120 * 1000, }); api.requestHuman(jwt) .then((out) => { // After-hours short-circuit: server already knows we're // closed, no point spinning a timer. if (out.status === 'offline_after_hours') { store.set({ handoffStatus: 'offline_after_hours', nextOpenAt: out.next_open_at, humanRequestedAt: null, handoffWaitTimeoutAt: null, }); return; } const waitSeconds = out.wait_timeout_seconds ?? 120; store.set({ handoffStatus: 'queued', nextOpenAt: out.next_open_at, humanRequestedAt: out.human_requested_at ?? new Date(now).toISOString(), handoffWaitTimeoutAt: Date.now() + waitSeconds * 1000, }); }) .catch(() => { // Stay optimistic on network failure — the 120s timer // we already set above gives the visitor a fair shot // at the operator hearing about it. }); // No lead-form pop here. The lead capture happens only AFTER // the wait window elapses (HandoffBanner's offline fallback // surfaces its own email field). Pre-fix this opened the form // simultaneously which buried the "connecting…" banner. }; // Drive the wait → offline transition. After the deadline lapses // with no operator claim, flip `handoffStatus` locally so the // banner shows the "no one's around, leave email" copy. useEffect(() => { if ( state.handoffWaitTimeoutAt === null || state.handoffStatus !== 'queued' || state.isHumanHandling ) { return; } const remaining = state.handoffWaitTimeoutAt - Date.now(); if (remaining <= 0) { store.set({ handoffStatus: 'offline_no_operators', handoffWaitTimeoutAt: null, humanRequestedAt: null, leadFormOpen: true, }); return; } const id = window.setTimeout(() => { // Recheck state at fire time — a claim may have landed // mid-wait, in which case the effect's cleanup already // re-ran and this branch never executes. if ( store.get().handoffStatus === 'queued' && !store.get().isHumanHandling ) { store.set({ handoffStatus: 'offline_no_operators', handoffWaitTimeoutAt: null, humanRequestedAt: null, leadFormOpen: true, }); } }, remaining); return () => window.clearTimeout(id); }, [ state.handoffWaitTimeoutAt, state.handoffStatus, state.isHumanHandling, ]); // Operator claimed → cancel the timer, clear the deadline. useEffect(() => { if (state.isHumanHandling && state.handoffWaitTimeoutAt !== null) { store.set({ handoffWaitTimeoutAt: null }); } }, [state.isHumanHandling, state.handoffWaitTimeoutAt]); // Close the menu on outside click. The widget renders inside an // open shadow root, so the document-level event has its `target` // retargeted to the shadow host — `Element.contains(e.target)` // returns false for clicks on actual buttons inside the menu, and // the dropdown would close before the click registered. Walking // `composedPath()` crosses the shadow boundary and gives us the // real ancestor chain, including the menu's children. useEffect(() => { if (!menuOpen) { return; } const onPointer = (e: MouseEvent | TouchEvent) => { const wrap = menuWrapRef.current; if (!wrap) { return; } const path = typeof e.composedPath === 'function' ? (e.composedPath() as EventTarget[]) : []; if (!path.includes(wrap)) { setMenuOpen(false); } }; document.addEventListener('mousedown', onPointer); document.addEventListener('touchstart', onPointer); return () => { document.removeEventListener('mousedown', onPointer); document.removeEventListener('touchstart', onPointer); }; }, [menuOpen]); /** * Stream the assistant's reply into an existing bubble, with up * to three transparent retry attempts (0ms, 800ms, 1800ms backoff * between attempts). The visitor sees a single "thinking…" state * across all attempts; only when all three fail do we mark the * bubble as errored and show the manual Retry pill. * * Why retry: Cloudflare Workers AI free tier hits transient rate * limits and connection blips fairly often, and most resolve in * 1–2 seconds. Retrying inline beats showing the visitor an error * for something that would have worked on its own. */ const streamReply = async (message: string, assistantId: string) => { if (!state.init) { return; } let pageContext: unknown; try { pageContext = extractPageContext(); } catch { pageContext = undefined; } const attemptDelays = [0, 800, 1800]; // Terminal server-error codes: retrying never helps. Surface // the server-provided message immediately so the visitor sees // an actionable hint ("Monthly limit reached", "Origin not // allowed for this agent", "Please refresh") instead of a // generic "Sorry" after three pointless retries. const TERMINAL_CODES = new Set([ 'agent_not_found', 'conversation_not_found', 'invalid_token', 'missing_token', 'message_quota_exceeded', 'origin_forbidden', 'http_failed', 'stream_failed', ]); let lastErrorCode: string | null = null; let lastErrorMessage: string | null = null; for (let attempt = 0; attempt < attemptDelays.length; attempt++) { if (attempt > 0) { await new Promise((resolve) => window.setTimeout(resolve, attemptDelays[attempt]), ); // Wipe whatever partial content the prior attempt // produced. Same bubble id, fresh canvas. store.resetMessageForRetry(assistantId); } let attemptDone = false; let attemptError = false; let attemptTerminal = false; try { await api.streamMessage( state.init.jwt, message, { onToken: (tok) => store.appendToken(assistantId, tok), onBlock: (block) => { store.appendBlock(assistantId, block); }, onStage: (event) => { const s = event.s; if (s === 'searching' || s === 'thinking') { store.set({ currentStage: s }); } }, onToolCall: () => {}, onDone: (payload) => { store.finalizeMessage( assistantId, payload.text, payload.citations, ); const ctas = payload.ctas && payload.ctas.length > 0 ? payload.ctas : payload.cta ? [payload.cta] : []; if (ctas.length > 0) { store.set({ activeCta: ctas[0], activeCtas: ctas, }); } if (payload.lead_prompt) { store.set({ leadFormOpen: true }); } attemptDone = true; }, onError: (err) => { attemptError = true; lastErrorCode = err.code ?? null; lastErrorMessage = err.message ?? null; if (lastErrorCode && TERMINAL_CODES.has(lastErrorCode)) { attemptTerminal = true; } }, }, pageContext, ); } catch (err) { attemptError = true; lastErrorCode = lastErrorCode ?? 'network_failed'; lastErrorMessage = lastErrorMessage ?? (err instanceof Error ? err.message : null); } if (attemptDone) { return; } if (!attemptError) { // Stream ended cleanly with no done event (visitor // navigated, etc.). Don't retry — likely intentional. return; } if (attemptTerminal) { // Terminal — don't burn two more pointless retries. break; } } const display = lastErrorMessage && lastErrorMessage.trim() !== '' ? lastErrorMessage : 'Sorry — something went wrong.'; store.failMessage(assistantId, display); }; const sendTurn = async (message: string) => { if (!state.init) { return; } const { userId, assistantId } = nextTurnIds(); store.addMessage({ id: userId, role: 'user', content: message }); store.addMessage({ id: assistantId, role: 'assistant', content: '', pending: true, }); // Clear any leftover stage label from the prior turn so this // bubble starts in the unbranded "thinking…" state until the // server emits the first stage hint. store.set({ currentStage: null }); await streamReply(message, assistantId); }; const ask = (message: string) => sendTurn(message); /** * Manual retry from the failed-bubble pill. We do NOT re-add the * user's original message — that bubble already exists in the * thread, and re-adding would produce a visible duplicate (the * exact bug visitors reported). Drop the errored assistant * bubble, mount a fresh one with a new id (so the typewriter * captures pending=true at mount and animates), then re-stream. */ const retry = (failedAssistantId: string) => { const idx = state.messages.findIndex((m) => m.id === failedAssistantId); if (idx < 1) { return; } const prior = state.messages[idx - 1]; if (prior.role !== 'user') { return; } store.removeMessage(failedAssistantId); const { assistantId } = nextTurnIds(); store.addMessage({ id: assistantId, role: 'assistant', content: '', pending: true, }); void streamReply(prior.content, assistantId); }; const submit = (e: Event) => { e.preventDefault(); // If the mic is live, end the session before sending so it // doesn't keep trying to fill an input that's already cleared. if (recording) { stopVoice(); } const v = input.trim(); if (!v || !state.initialized) { return; } setInput(''); void sendTurn(v); }; const closeBar = () => { setOpen(false); store.set({ open: false }); setMenuOpen(false); }; const startVoice = () => { const Ctor = getSpeechRecognition(); if (!Ctor) { return; } // Snapshot whatever the visitor has already typed/dictated so // the new session APPENDS to it instead of replacing — this is // what makes re-dictate-after-stop work the way visitors expect. const baseText = input; const separator = baseText.length === 0 || baseText.endsWith(' ') ? '' : ' '; try { const recognition = new Ctor(); const lang = state.init?.agent.language_default ?? 'en'; // Web Speech accepts "en" but works better with a region; // crude mapping for the most common defaults. recognition.lang = lang.includes('-') ? lang : `${lang}-${lang === 'en' ? 'US' : lang.toUpperCase()}`; recognition.continuous = false; recognition.interimResults = true; recognition.onresult = (e) => { let transcript = ''; for (let i = 0; i < e.results.length; i++) { transcript += e.results[i][0].transcript; } setInput(baseText + separator + transcript); // Successful capture clears any prior hint state. setVoiceError(null); }; recognition.onerror = (e) => { // The SpeechRecognitionErrorEvent isn't in lib.dom for // older TS targets — pull `error` defensively. const code = (e as unknown as { error?: string }).error; if (code === 'not-allowed') { setVoiceError('not-allowed'); } else if (code === 'service-not-allowed') { setVoiceError('service-not-allowed'); } else if (code === 'no-speech' || code === 'aborted') { setVoiceError('no-speech'); } else if (code) { setVoiceError('other'); } setRecording(false); recognitionRef.current = null; }; recognition.onend = () => { setRecording(false); recognitionRef.current = null; }; recognition.start(); recognitionRef.current = recognition; setRecording(true); setVoiceError(null); } catch { // Synchronous throw from .start() — fired by browsers that // disable Web Speech entirely (Brave Shields can do this // before the recogniser even fires onerror). Treat as a // permission-class error so the visitor sees the same // actionable hint. setRecording(false); recognitionRef.current = null; setVoiceError('service-not-allowed'); } }; const stopVoice = () => { const r = recognitionRef.current; if (r) { try { r.stop(); } catch { // Already stopped — nothing to do. } } recognitionRef.current = null; setRecording(false); }; const toggleVoice = () => { if (recording) { stopVoice(); } else { startVoice(); } }; const clearThread = () => { store.clearMessages(); setMenuOpen(false); // Best-effort server-side: persist the clear so /init doesn't // re-hydrate the old thread on the next page load. Swallow // errors — the local wipe already happened, and the user will // see the old thread back on reload but can clear again. const jwt = state.init?.jwt; if (jwt) { api.clearConversation(jwt).catch(() => {}); } }; // Closed state — small floating orb the visitor can click to bring // the pill back. Only reachable after they explicitly chose Close // from the menu. if (!open) { const unreadBadge = state.unreadCount > 0; const badgeText = state.unreadCount > 9 ? '9+' : String(state.unreadCount); const reopenAria = unreadBadge ? tr(':n new message — open chat', { n: String(state.unreadCount), }) : launcherLabel; return (

); } // Pre-chat gate — when the agent has `require_lead_before_chat` // on and the visitor hasn't been captured for this conversation // yet, the chat surface is hidden behind a Name + Email form. // Submitting flips `leadCaptured` and the chat panel unlocks on // the same mount (no reload). The launcher pill is suppressed // because typing into a hidden chat would be a dead end. const gateOn = state.agent?.require_lead_before_chat === true && !state.leadCaptured; if (gateOn && state.init) { return (

); } return (

{/* Answer panel — only mounted once a conversation exists. max-height + flex column so the header stays visible even when the message thread + an inline LeadForm + the composer push the total content past the viewport. Without this the panel grew unbounded and the top (header / Close button) scrolled off-screen when the lead form opened — buyer report 2026-05-18 (Lithuanian customer). */} {hasMessages && (

{theme.header_logo_url && ( )} {panelTitle}

{demo && ( {tr('Demo')} )} {state.isHumanHandling && ( {tr('Live agent')} )} {!state.isHumanHandling && !state.humanRequestedAt && ( )}

{error && (

{error}

)} { const jwt = state.init?.jwt; if (!jwt) { return { ok: false }; } try { const result = await api.applyCoupon( jwt, code, ); return { ok: true, ...result }; } catch (e) { return { ok: false, message: e instanceof Error ? e.message : 'apply_failed', }; } }} onStartCheckout={async (body) => { const jwt = state.init?.jwt; if (!jwt) { return { error: { code: 'missing_token', message: 'Chat not initialized. Refresh the page.', }, }; } return api.createCheckout(jwt, body); }} /> {(state.humanRequestedAt || state.operator || state.handoffStatus) && ( )} {state.operatorTyping && state.isHumanHandling && ( )} {state.ratingPromptVisible && state.init && ( { api.signalSatisfaction( state.init!.jwt, rating, comment, ); store.set({ ratingSubmitted: true, }); }} onDismiss={() => store.set({ ratingPromptVisible: false }) } /> )} {state.init && (() => { const ctas = state.activeCtas.length > 0 ? state.activeCtas : state.activeCta ? [state.activeCta] : []; if (ctas.length === 0) { return null; } return (

{ctas.map((cta, i) => ( ))}

); })()}

{state.leadFormOpen && !state.leadCaptured && state.init && ( )} {state.leadCaptured && (

✓ Thanks — we'll get back to you soon.

)} {branding?.show && ( {brandingDisplayParts(branding.display_mode) .showLogo && branding.logo_url ? ( ) : null} {brandingDisplayParts(branding.display_mode) .showText ? branding.label : null} )}

)} {/* * Demo pill — sits just above the launcher pill while no * conversation has started, so anyone landing on the marketing * site immediately understands this is a sandbox agent, not a * live tracking widget. Once messages exist the answer panel * header carries its own DEMO badge so we drop this one. */} {demo && !hasMessages && (

{tr('Live demo · ask the sandbox agent anything')}

)} {/* Starter prompt chips — only when there's no thread yet. Rendered above the composer when `starterPosition === 'top'` (top-left of the bar — client preference 2026-05-22) and below the composer when set to `bottom` (legacy layout). */} {!hasMessages && starterPosition === 'top' && state.agent?.starter_prompts && state.agent.starter_prompts.length > 0 && (

{state.agent.starter_prompts.map((prompt, i) => ( ))}

)} {/* The pill itself — input + trailing action. */}

{ const value = (e.target as HTMLInputElement).value; setInput(value); // Debounced typing indicator while a human // operator is in the conversation. We don't // ping when the bot is handling — there's // nobody to see the indicator. 2s debounce // matches the operator-side ping cadence. const jwt = state.init?.jwt; if ( !jwt || !state.isHumanHandling || value.trim() === '' ) { return; } const now = Date.now(); if (now - lastTypingFireRef.current < 2000) { return; } lastTypingFireRef.current = now; api.signalTyping(jwt); }} placeholder={launcherLabel} aria-label={launcherLabel} disabled={!state.initialized} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', // 16px keeps iOS Safari from auto-zooming on focus. fontSize: 16, color: '#0f172a', fontFamily: 'inherit', minWidth: 0, }} />

{/* * Mic stays mounted across all states (idle, typing, * streaming) so visitors can stop a session and start * a new one — re-dictation lives or dies on this slot * not disappearing the moment the input has content. */}

{recording && (

{showSend ? ( ) : isStreaming ? (

) : ( )} {menuOpen && ( )}

{/* Legacy below-composer starter chip placement. Operator opts in via theme.starter_prompts_position = 'bottom'. */} {!hasMessages && starterPosition === 'bottom' && state.agent?.starter_prompts && state.agent.starter_prompts.length > 0 && (

{state.agent.starter_prompts.map((prompt, i) => ( ))}

)}

); }