andy-widget-react 2.2.1 → 2.3.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback } from 'react';
-import ReactDOM from 'react-dom';
+import { useRef, useState, useSyncExternalStore, useEffect, useCallback } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
 
 /**
  * Design tokens for AndyChat
@@ -771,6 +771,11 @@ const sendMessageForWidget = async (embedId, sessionId, message, options = {}) =
 			messages: [{ role: 'user', parts: [{ type: 'text', text: message }] }]
 		})
 	});
+	return consumeWidgetReply(response, options)
+};
+
+/** Shared text-only UI stream decoder; no retry can occur after reading starts. */
+const consumeWidgetReply = async (response, options = {}) => {
 	if (!response.ok || !response.headers.get('content-type')?.includes('text/event-stream')) {
 		const data = await response.json().catch(() => null);
 		throw new Error(data?.error || data?.message || 'Chat is temporarily unavailable.')
@@ -811,6 +816,7 @@ const sendMessageForWidget = async (embedId, sessionId, message, options = {}) =
 	};
 	try {
 		while (!complete) {
+			options.signal?.throwIfAborted();
 			const { value, done } = await reader.read();
 			buffer += decoder.decode(value, { stream: !done });
 			let newline;
@@ -3675,7 +3681,425 @@ const createBrowserHandoff = (chatbotId, bootstrap, onProjection, fresh = false)
 	}
 };
 
-const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessage, bubbleLabel, lang, predefinedQuestions, theme, orientation, brandColor, bubbleStyle, useBrandColor, logoUrl, previewMode = false, initialOpen = false }) => {
+/** In-page Requester credentials. A failed response is renewed once, before its body is consumed. */
+const createRequesterFetch = getRequesterPass => {
+	let pass = null;
+	let loading = null;
+	let revision = 0;
+	const obtain = async () => {
+		const current = revision;
+		if (!loading) {
+			const pending = Promise.resolve().then(getRequesterPass).then(value => {
+			if (current !== revision || typeof value !== 'string' || !value.trim()) throw new Error('Requester authentication is unavailable.')
+			pass = value;
+			return value
+			}).catch(() => { throw new Error('Requester authentication is unavailable.') }).finally(() => { if (loading === pending) loading = null; });
+			loading = pending;
+		}
+		return loading
+	};
+	const requesterFetch = async (url, options = {}) => {
+		const current = revision;
+		const headers = new Headers(options.headers);
+		if (headers.has('authorization')) throw new Error('Requester requests cannot use operator authorization.')
+		const attempt = async credential => {
+			options.signal?.throwIfAborted();
+			if (current !== revision) throw new DOMException('Requester context changed.', 'AbortError')
+			const selected = new Headers(headers);
+			selected.set('X-Andy-Requester', credential);
+			const response = await fetch(url, { ...options, headers: selected, credentials: 'omit', cache: 'no-store' });
+			if (current !== revision) throw new DOMException('Requester context changed.', 'AbortError')
+			return response
+		};
+		let response = await attempt(pass || await obtain());
+		if (!response.ok) {
+			const problem = await response.clone().json().catch(() => null);
+			// Private help and canonical Ticket HTTP use their existing problem envelopes.
+			if (['expired', 'unknown_key'].includes(problem?.problem?.code ?? problem?.code)) {
+				pass = null;
+				response = await attempt(await obtain());
+			}
+		}
+		return response
+	};
+	requesterFetch.clear = () => { revision++; pass = null; loading = null; };
+	return requesterFetch
+};
+
+const createSupportClient = ({ installationId, getRequesterPass, apiBaseUrl }) => {
+	if (!/^[a-zA-Z0-9_-]{3,100}$/.test(installationId)) throw new Error('A Support installation is required.')
+	const base = (apiBaseUrl || getApiBaseUrl()).replace(/\/+$/, '');
+	const requesterFetch = createRequesterFetch(getRequesterPass);
+	const widgetUrl = `${base}/support/widget/${encodeURIComponent(installationId)}`;
+	const json = async response => {
+		const result = await response.json().catch(() => null);
+		if (!response.ok || result?.ok === false) {
+			const error = new Error('Support is temporarily unavailable. Please retry.');
+			error.code = result?.problem?.code || result?.code || 'unavailable';
+			throw error
+		}
+		return result
+	};
+	return {
+		bootstrap: signal => requesterFetch(widgetUrl, { signal }).then(json),
+		answer: async (messages, options = {}) => {
+			const response = await requesterFetch(widgetUrl, {
+				method: 'POST', headers: { 'Content-Type': 'application/json' }, signal: options.signal,
+				body: JSON.stringify({ messages })
+			});
+			if (!response.ok) await json(response);
+			return consumeWidgetReply(response, options)
+		},
+		operation: async (action, input, signal) => json(await requesterFetch(`${base}/public/operations/support/request/${action}`, {
+			method: 'POST', headers: { 'Content-Type': 'application/json' }, signal, body: JSON.stringify(input)
+		})),
+		dispose: () => requesterFetch.clear()
+	}
+};
+
+/** One in-memory conversation/form receipt lifecycle shared by React renderers and hooks. */
+const createSupportController = options => {
+	const client = createSupportClient(options);
+	const listeners = new Set();
+	let state = { config: null, view: 'conversation', messages: [], transcript: [], tickets: [], ticket: null, entries: [], loading: true, busy: false, error: null, submission: null, followup: null, unreadCount: 0 };
+	let active = null;
+	let generation = 0;
+	let disposed = false;
+	let submitting = null;
+	let following = null;
+	let visible = true;
+	let timer = null;
+	const schedule = () => {
+		clearTimeout(timer);
+		if (!disposed && state.config && listeners.size) {
+			timer = setTimeout(() => void refresh(), 3000);
+			timer.unref?.();
+		}
+	};
+	const publish = changes => {
+		if (disposed) return
+		state = { ...state, ...changes };
+		listeners.forEach(listener => listener());
+	};
+	const abort = () => { generation++; active?.abort(); active = null; clearTimeout(timer); };
+	const fail = error => {
+		if (error?.code === 'resource_not_found' && state.view === 'request') publish({ ticket: null, entries: [], followup: null });
+		if (error?.code === 'ticket_resolved' && state.ticket) {
+			updateTicket({ ...state.ticket, status: 'resolved' });
+			publish({ followup: null });
+		}
+		publish({ error: error?.code || 'unavailable', busy: false, loading: false });
+	};
+	const request = async (work, background = false) => {
+		abort();
+		const epoch = generation;
+		const controller = new AbortController();
+		active = controller;
+		if (!background) publish({ busy: true, error: null });
+		try {
+			const result = await work(controller.signal, epoch);
+			if (disposed || generation !== epoch || controller.signal.aborted) return
+			return result
+		} catch (error) {
+			if (!controller.signal.aborted && generation === epoch) fail(error);
+		} finally {
+			if (active === controller) { active = null; if (!background) publish({ busy: false }); schedule(); }
+		}
+	};
+	const current = (signal, epoch) => !disposed && generation === epoch && !signal.aborted;
+	const page = async (action, input, signal, field) => {
+		let result, cursor;
+		const values = [];
+		do {
+			result = await client.operation(action, { ...input, pageSize: 100, ...(cursor ? { cursor } : {}) }, signal);
+			values.push(...result.data[field]);
+			cursor = result.meta?.nextCursor;
+		} while (cursor && !signal.aborted)
+		return { ...result.data, [field]: values }
+	};
+	const updateTicket = ticket => {
+		const tickets = state.tickets.map(previous => previous.id === ticket.id ? ticket : previous);
+		publish({ ticket, tickets, unreadCount: tickets.filter(ticket => ticket.unread).length });
+	};
+	const readTicket = async (ticketId, signal, epoch) => {
+		const result = await page('inspect', { ticketId }, signal, 'entries');
+		if (!current(signal, epoch)) return
+		// Only entries returned for this reader can advance the server's seen mark.
+		const entries = result.entries.sort((a, b) => a.sequence - b.sequence);
+		updateTicket(result.ticket);
+		publish({ entries });
+		const throughSequence = Math.max(0, ...entries.map(entry => entry.sequence || 0));
+		if (visible && globalThis.document?.visibilityState !== 'hidden' && throughSequence > result.ticket.requesterLastSeenSequence) {
+			const seen = await client.operation('mark_seen', { ticketId, throughSequence }, signal);
+			if (current(signal, epoch)) updateTicket(seen.data.ticket);
+		}
+	};
+	const readRequests = async (signal, epoch) => {
+		const result = await page('list', {}, signal, 'tickets');
+		if (current(signal, epoch)) publish({ tickets: result.tickets, unreadCount: result.tickets.filter(ticket => ticket.unread).length });
+	};
+	const refresh = () => {
+		if (disposed || !state.config) return Promise.resolve()
+		if (state.busy || globalThis.document?.visibilityState === 'hidden') { schedule(); return Promise.resolve() }
+		return request(async (signal, epoch) => {
+			await readRequests(signal, epoch);
+			if (current(signal, epoch) && visible && state.view === 'request' && state.ticket) await readTicket(state.ticket.id, signal, epoch);
+		}, true)
+	};
+	const transcript = () => state.messages.map(({ role, content }) => ({ role, content }));
+	const bootstrap = () => request(async (signal, epoch) => {
+		const config = await client.bootstrap(signal);
+		if (generation !== epoch || signal.aborted) return
+		publish({ config, loading: false, messages: [{ role: 'assistant', content: config.greeting }] });
+	});
+	const send = async content => {
+		if (state.busy || state.loading || state.view !== 'conversation' || !content.trim() || content.length > 10_000 || state.messages.length >= 39) return
+		publish({ messages: [...transcript(), { role: 'user', content: content.trim() }] });
+		const history = transcript();
+		return request(async (signal, epoch) => {
+			const show = text => {
+				if (generation === epoch && !signal.aborted && state.view === 'conversation')
+					publish({ messages: [...history, { role: 'assistant', content: text }] });
+			};
+			const result = await client.answer(history, { signal, onText: show });
+			if (generation === epoch && !signal.aborted && result.status === 'agent') show(result.text);
+		})
+	};
+	const escalate = () => {
+		if (!state.config) return
+		abort();
+		publish({ view: 'form', transcript: transcript(), busy: false, error: null, submission: null, ticket: null });
+		schedule();
+	};
+	const submit = (subject, body, replyLanguage = 'es') => {
+		if (submitting) return submitting
+		if (state.view !== 'form' || !subject.trim() || !body.trim()) return Promise.resolve()
+		// A retry uses the captured consent/input, even if the caller passes different arguments.
+		const submission = state.submission || { subject: subject.trim(), body: body.trim(), replyLanguage, transcript: state.transcript, idempotencyKey: crypto.randomUUID() };
+		publish({ submission });
+		submitting = request(async (signal, epoch) => {
+			const result = await client.operation('open', submission, signal);
+			if (generation === epoch && !signal.aborted) publish({ view: 'receipt', ticket: result.data.ticket, error: null });
+			return result
+		}).finally(() => { submitting = null; });
+		return submitting
+	};
+	const showRequests = () => {
+		abort();
+		publish({ view: 'requests', busy: false, error: null });
+		return request(readRequests)
+	};
+	const inspect = ticketId => {
+		abort();
+		publish({ view: 'request', ticket: null, entries: [], followup: null, busy: false, error: null });
+		return request((signal, epoch) => readTicket(ticketId, signal, epoch))
+	};
+	const reply = (body, reopen = false) => {
+		if (following) return following
+		if (state.view !== 'request' || !state.ticket || !body.trim() || body.length > 20_000) return Promise.resolve()
+		if (state.ticket.status === 'resolved' && !reopen) { publish({ error: 'ticket_resolved' }); return Promise.resolve() }
+		const action = reopen ? 'reopen' : 'reply';
+		const followup = state.followup?.action === action ? state.followup : { action, ticketId: state.ticket.id, body: body.trim(), idempotencyKey: crypto.randomUUID() };
+		publish({ followup });
+		following = request(async (signal, epoch) => {
+			const result = await client.operation(followup.action, { ticketId: followup.ticketId, body: followup.body, idempotencyKey: followup.idempotencyKey }, signal);
+			if (!current(signal, epoch)) return
+			await readTicket(followup.ticketId, signal, epoch);
+			if (current(signal, epoch)) publish({ followup: null });
+			return result
+		}).finally(() => { following = null; });
+		return following
+	};
+	const newProblem = () => {
+		abort();
+		publish({ view: 'form', transcript: [], submission: null, followup: null, ticket: null, entries: [], busy: false, error: null });
+		schedule();
+	};
+	const newConversation = () => {
+		abort();
+		publish({ view: 'conversation', messages: state.config ? [{ role: 'assistant', content: state.config.greeting }] : [], transcript: [], ticket: null, entries: [], error: null, busy: false, submission: null, followup: null });
+		schedule();
+	};
+	return {
+		getSnapshot: () => state,
+		subscribe: listener => { listeners.add(listener); schedule(); return () => { listeners.delete(listener); if (!listeners.size) clearTimeout(timer); } },
+		bootstrap, send, escalate, submit, showRequests, inspect, newConversation, refresh, reply, newProblem,
+		setVisible: value => { visible = value; if (value) void refresh(); },
+		back: () => { abort(); publish({ view: 'conversation', busy: false, error: null, followup: null }); schedule(); },
+		dispose: () => { abort(); publish({ config: null, view: 'conversation', messages: [], transcript: [], ticket: null, entries: [], tickets: [], submission: null, followup: null, unreadCount: 0, busy: false, loading: true, error: null }); disposed = true; client.dispose(); listeners.clear(); }
+	}
+};
+
+/** React Support panel uses the shared design tokens and its own BEM namespace. */
+const getSupportStylesheet = () => `
+:host { font-family: var(--andy-font-family-primary); color: #171717; line-height: 1.5; --andy-support-color: #171717; --andy-support-contrast: #fff; }
+*, *::before, *::after { box-sizing: border-box; }
+.andy-support button, .andy-support input, .andy-support textarea { font: inherit; }
+.andy-support button { cursor: pointer; }
+.andy-support button:disabled { cursor: default; opacity: .45; }
+.andy-support button:focus-visible, .andy-support a:focus-visible, .andy-support input:focus-visible, .andy-support textarea:focus-visible, .andy-support summary:focus-visible { outline: 2px solid var(--andy-support-color); outline-offset: 3px; }
+.andy-support__launcher { position: fixed; bottom: 24px; right: 24px; z-index: var(--andy-z-fixed); border: 0; border-radius: var(--andy-radius-full); padding: 14px 20px; background: var(--andy-support-color); color: var(--andy-support-contrast); box-shadow: var(--andy-shadow-lg); display: flex; gap: 24px; align-items: center; font-size: 14px; }
+.andy-support__panel { position: fixed; right: 24px; bottom: 24px; z-index: var(--andy-z-fixed); width: 400px; max-width: calc(100vw - 48px); height: min(680px, calc(100dvh - 48px)); background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: var(--andy-shadow-xl); display: flex; flex-direction: column; overflow: hidden; font-size: 14px; }
+:host(.andy-support-host--left) .andy-support__launcher, :host(.andy-support-host--left) .andy-support__panel { left: 24px; right: auto; }
+.andy-support__header { flex-shrink: 0; position: relative; display: flex; align-items: center; gap: 10px; padding: 18px; border-bottom: 1px solid #f0f0f0; }
+.andy-support__header > button { border: 0; background: transparent; color: #737373; padding: 5px; font-size: 22px; line-height: 1; min-width: 28px; }
+.andy-support__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--andy-support-color); color: var(--andy-support-contrast); display: grid; place-items: center; font-weight: 600; }
+.andy-support__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.andy-support__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
+.andy-support__identity small { color: #737373; font-size: 12px; }
+.andy-support__menu { position: absolute; top: 65px; right: 16px; background: #fff; box-shadow: var(--andy-shadow-lg); border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px; z-index: 1; min-width: 210px; }
+.andy-support__menu button { display: block; border: 0; border-radius: 6px; background: none; padding: 10px; text-align: left; width: 100%; }
+.andy-support__menu button:hover { background: #f5f5f5; }
+.andy-support__content { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px; overscroll-behavior: contain; }
+.andy-support h2 { font-size: 17px; font-weight: 600; margin: 0 0 20px; }
+.andy-support__message { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 16px; line-height: 1.65; }
+.andy-support__message--user { margin-left: auto; width: fit-content; max-width: 90%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #f5f5f5; }
+.andy-support__questions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 22px; }
+.andy-support__questions button, .andy-support__secondary { border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; padding: 10px 14px; text-align: left; color: #525252; }
+.andy-support__questions button:hover, .andy-support__secondary:hover { background: #fafafa; }
+.andy-support__secondary { margin-top: 8px; }
+.andy-support__composer { flex-shrink: 0; display: flex; gap: 8px; margin: 0 18px 12px; padding: 8px; border: 1px solid #e5e7eb; border-radius: var(--andy-radius-full); background: #fafafa; }
+.andy-support__composer input { flex: 1; min-width: 0; border: 0; background: none; padding: 4px 8px; outline-offset: 0; color: inherit; }
+.andy-support__composer button { border: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--andy-support-color); color: var(--andy-support-contrast); font-size: 20px; }
+.andy-support__footer { flex-shrink: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 12px 14px; font-size: 10px; color: #a3a3a3; }
+.andy-support__footer a { color: #737373; text-decoration: none; }
+.andy-support__form { display: flex; flex-direction: column; gap: 16px; }
+.andy-support__form h2 { margin-bottom: 0; }
+.andy-support__form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; }
+.andy-support__form input, .andy-support__form textarea { width: 100%; border: 1px solid #d4d4d4; border-radius: 10px; background: #fff; padding: 10px 12px; font-size: 14px; font-weight: 400; color: inherit; }
+.andy-support__form textarea { resize: vertical; }
+.andy-support__transcript { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; font-size: 12px; }
+.andy-support__transcript summary { cursor: pointer; }
+.andy-support__transcript p, .andy-support__entry p { white-space: pre-wrap; overflow-wrap: anywhere; }
+.andy-support__muted { color: #737373; font-size: 12px; }
+.andy-support__primary { border: 0; border-radius: 10px; background: var(--andy-support-color); color: var(--andy-support-contrast); padding: 12px 18px; }
+.andy-support__receipt { text-align: center; padding: 30px 8px; }
+.andy-support__check { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #f5f5f5; font-size: 24px; margin-bottom: 20px; }
+.andy-support__receipt h2 { margin-bottom: 10px; }
+.andy-support__receipt > strong { font-size: 22px; }
+.andy-support__receipt .andy-support__primary { margin-top: 16px; }
+.andy-support__ticket { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; text-align: left; padding: 16px 0; border: 0; border-bottom: 1px solid #eee; background: none; }
+.andy-support__ticket small { grid-column: 1; color: #737373; }
+.andy-support__ticket > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 20px; }
+.andy-support__entry { border-bottom: 1px solid #eee; padding: 16px 0; }
+.andy-support__unread { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-left: 6px; vertical-align: middle; }
+.andy-support__ticket .andy-support__unread, .andy-support__menu .andy-support__unread { color: var(--andy-support-color); }
+.andy-support__request-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
+.andy-support__request-actions .andy-support__secondary { margin-top: 0; }
+.andy-support__followup { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; margin: 0 18px 12px; }
+.andy-support__followup label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
+.andy-support__followup textarea { width: 100%; max-height: 120px; resize: vertical; border: 1px solid #d4d4d4; border-radius: 10px; padding: 10px 12px; color: inherit; background: #fff; }
+.andy-support__followup button { align-self: flex-end; }
+.andy-support__error { margin-top: 16px; padding: 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 12px; }
+.andy-support__error button { border: 0; background: none; color: inherit; text-decoration: underline; padding: 0; }
+@media (max-width: 600px) { .andy-support__panel, :host(.andy-support-host--left) .andy-support__panel { inset: 0; width: 100%; max-width: none; height: 100dvh; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); } .andy-support__launcher { bottom: calc(18px + env(safe-area-inset-bottom)); right: 18px; } }
+@media (prefers-reduced-motion: reduce) { .andy-support__content { scroll-behavior: auto; } }
+`;
+
+const empty = { config: null, view: 'conversation', messages: [], transcript: [], tickets: [], ticket: null, entries: [], loading: true, busy: false, error: null, submission: null, followup: null, unreadCount: 0 };
+const noSubscribe = () => () => { };
+const emptySnapshot = () => empty;
+/** The host context key changes before a new user/company is allowed to see any previous state. */
+const useSupportChat = (options) => {
+    const key = options ? JSON.stringify([options.installationId, options.contextKey, options.apiBaseUrl]) : null;
+    const callback = useRef(options?.getRequesterPass);
+    callback.current = options?.getRequesterPass;
+    const [owned, setOwned] = useState(null);
+    const controller = owned?.key === key ? owned?.controller : null;
+    const state = useSyncExternalStore(controller?.subscribe || noSubscribe, controller?.getSnapshot || emptySnapshot, emptySnapshot);
+    useEffect(() => {
+        if (!options || !key)
+            return;
+        const controller = createSupportController({ ...options, getRequesterPass: () => callback.current() });
+        setOwned({ key, controller });
+        void controller.bootstrap();
+        return () => controller.dispose();
+    }, [key]);
+    useEffect(() => {
+        if (state.config && options?.ticketId)
+            void controller?.inspect(options.ticketId);
+    }, [controller, state.config, options?.ticketId]);
+    return { mode: 'support', state, controller };
+};
+
+const copy = {
+    es: { support: 'Soporte', close: 'Cerrar', back: 'Volver', menu: 'Menú', new: 'Nueva conversación', team: 'Hablar con el equipo', requests: 'Mis solicitudes', placeholder: '¿En qué te podemos ayudar?', send: 'Enviar', subject: 'Asunto', detail: 'Cuéntanos qué ocurrió', notice: 'Se adjuntará esta conversación', consent: 'Al enviar, aceptas adjuntar esta conversación para que el equipo pueda ayudarte.', submit: 'Enviar solicitud', receipt: 'Solicitud enviada', promise: 'El equipo responderá en', businessDay: 'un día hábil', hours: 'horas hábiles', minutes: 'minutos hábiles', empty: 'Todavía no tienes solicitudes.', powered: 'Con tecnología de Andy', loading: 'Cargando…', retry: 'Reintentar', error: 'No pudimos completar la solicitud. Puedes reintentar.', auth: 'Tu sesión de soporte no está disponible. Vuelve a iniciar sesión en esta aplicación.', denied: 'El soporte no está disponible para esta cuenta.', transcript: 'mensajes', reply: 'Escribe tu respuesta', reopen: 'Reabrir', reopening: 'Cuéntanos qué volvió a ocurrir', otherProblem: 'Es otro problema', reopened: 'Reabierto', unread: 'Respuestas sin leer', resolvedReply: 'Esta solicitud está resuelta. Reábrela para continuar con el mismo problema.', open: 'Recibido', in_progress: 'En curso', waiting_customer: 'Espera tu respuesta', resolved: 'Resuelto' },
+    en: { support: 'Support', close: 'Close', back: 'Back', menu: 'Menu', new: 'New conversation', team: 'Talk to the team', requests: 'My requests', placeholder: 'How can we help?', send: 'Send', subject: 'Subject', detail: 'Tell us what happened', notice: 'This conversation will be attached', consent: 'By sending, you agree to attach this conversation so the team can help you.', submit: 'Send request', receipt: 'Request sent', promise: 'The team will reply within', businessDay: 'one business day', hours: 'business hours', minutes: 'business minutes', empty: 'You have no requests yet.', powered: 'Powered by Andy', loading: 'Loading…', retry: 'Retry', error: 'We could not complete the request. You can retry.', auth: 'Your support session is unavailable. Sign in again in this application.', denied: 'Support is unavailable for this account.', transcript: 'messages', reply: 'Write your reply', reopen: 'Reopen', reopening: 'Tell us what happened again', otherProblem: 'This is another problem', reopened: 'Reopened', unread: 'Unread replies', resolvedReply: 'This request is resolved. Reopen it to continue with the same problem.', open: 'Received', in_progress: 'In progress', waiting_customer: 'Waiting for your reply', resolved: 'Resolved' }
+};
+/** Private Requester UI. Sales bootstrap, visitor identity and storage never enter this renderer. */
+const SupportPanel = ({ support, lang, orientation = 'right', initialOpen = false, tooltip }) => {
+    const { state, controller } = useSupportChat(support);
+    const replyLanguage = lang || state.config?.defaultLang || 'es';
+    const strings = copy[replyLanguage];
+    const [open, setOpen] = useState(initialOpen);
+    const [menu, setMenu] = useState(false);
+    const [draft, setDraft] = useState('');
+    const [subject, setSubject] = useState('');
+    const [body, setBody] = useState('');
+    const [replyDraft, setReplyDraft] = useState('');
+    const [reopening, setReopening] = useState(false);
+    const [selectedTicketId, setSelectedTicketId] = useState(null);
+    const host = useRef(null);
+    const messages = useRef(null);
+    const [portal, setPortal] = useState(null);
+    useEffect(() => {
+        if (!host.current)
+            return;
+        const shadow = host.current.shadowRoot || host.current.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = generateDesignTokenVariablesString() + getSupportStylesheet();
+        const target = document.createElement('div');
+        shadow.append(style, target);
+        setPortal(target);
+        return () => { style.remove(); target.remove(); };
+    }, []);
+    useEffect(() => {
+        const color = state.config?.branding.color || '#171717';
+        host.current?.style.setProperty('--andy-support-color', color);
+        host.current?.style.setProperty('--andy-support-contrast', getContrastTextColor(color));
+    }, [state.config?.branding.color]);
+    useEffect(() => { messages.current?.scrollTo?.({ top: messages.current.scrollHeight, behavior: 'smooth' }); }, [state.messages, state.view]);
+    useEffect(() => { controller?.setVisible(open); }, [controller, open]);
+    useEffect(() => { if (support.ticketId)
+        setOpen(true); }, [support.ticketId]);
+    useEffect(() => { if (state.ticket?.status !== 'resolved' && state.followup?.action !== 'reopen')
+        setReopening(false); }, [state.ticket?.status, state.followup?.action]);
+    const choose = (action) => { setMenu(false); action(); };
+    const escalate = () => { setSubject(''); setBody(''); controller?.escalate(); };
+    const send = () => { if (!draft.trim() || state.busy)
+        return; void controller?.send(draft); setDraft(''); };
+    const newProblem = () => { setSubject(''); setBody(''); setReplyDraft(''); setReopening(false); controller?.newProblem(); };
+    const followup = async () => {
+        const result = await controller?.reply(replyDraft, reopening);
+        if (result) {
+            setReplyDraft('');
+            setReopening(false);
+        }
+    };
+    const unread = jsx("span", { className: 'andy-support__unread', role: 'img', "aria-label": strings.unread });
+    const title = state.config?.branding.name || strings.support;
+    const ticketRow = (ticket) => jsxs("button", { type: 'button', className: 'andy-support__ticket', onClick: () => { setSelectedTicketId(ticket.id); setReplyDraft(''); setReopening(false); void controller?.inspect(ticket.id); }, children: [jsxs("span", { children: ["#", ticket.number, " \u00B7 ", ticket.subject, " ", ticket.unread && unread] }), jsx("small", { children: strings[ticket.status] }), jsx("span", { "aria-hidden": 'true', children: "\u203A" })] }, ticket.id);
+    const retry = () => {
+        if (!state.config)
+            void controller?.bootstrap();
+        else if (state.view === 'form')
+            void controller?.submit(subject, body, replyLanguage);
+        else if (state.view === 'requests')
+            void controller?.showRequests();
+        else if (state.view === 'request' && state.followup)
+            void followup();
+        else if (state.view === 'request' && (selectedTicketId || support.ticketId))
+            void controller?.inspect((selectedTicketId || support.ticketId));
+    };
+    const errorText = state.error === 'ticket_resolved' ? strings.resolvedReply : ['expired', 'unknown_key', 'malformed', 'authentication_required', 'invalid_signature'].includes(state.error || '') ? strings.auth : state.error === 'permission_denied' ? strings.denied : strings.error;
+    const promise = state.ticket?.replyPromise || state.config?.replyPromise;
+    const promiseText = !promise ? null : promise.minutes === promise.businessDayMinutes ? strings.businessDay : promise.minutes % 60 === 0 ? `${promise.minutes / 60} ${strings.hours}` : `${promise.minutes} ${strings.minutes}`;
+    return jsx("div", { ref: host, className: `andy-support-host andy-support-host--${orientation}`, children: portal && createPortal(jsxs("div", { className: 'andy-support', "data-private": true, "data-ph-no-capture": true, "data-sentry-block": true, lang: replyLanguage, children: [!open && jsxs("button", { type: 'button', className: 'andy-support__launcher', title: tooltip, onClick: () => setOpen(true), children: [jsxs("span", { children: [strings.support, " \u00B7 ", title, " ", state.unreadCount > 0 && unread] }), jsx("span", { "aria-hidden": 'true', children: "\u2197" })] }), open && jsxs("section", { className: 'andy-support__panel', role: 'dialog', "aria-label": `${strings.support} · ${title}`, children: [jsxs("header", { className: 'andy-support__header', children: [state.view !== 'conversation' && jsx("button", { type: 'button', "aria-label": strings.back, onClick: () => state.view === 'request' ? void controller?.showRequests() : controller?.back(), children: "\u2039" }), jsx("span", { className: 'andy-support__mark', "aria-hidden": 'true', children: title.slice(0, 1) }), jsxs("div", { className: 'andy-support__identity', children: [jsx("strong", { children: title }), jsx("small", { children: strings.support })] }), jsx("button", { type: 'button', "aria-label": strings.menu, "aria-expanded": menu, disabled: !state.config, onClick: () => setMenu(!menu), children: "\u00B7\u00B7\u00B7" }), jsx("button", { type: 'button', "aria-label": strings.close, onClick: () => setOpen(false), children: "\u00D7" }), menu && jsxs("nav", { className: 'andy-support__menu', "aria-label": strings.menu, children: [jsx("button", { type: 'button', onClick: () => choose(() => controller?.newConversation()), children: strings.new }), jsx("button", { type: 'button', onClick: () => choose(escalate), children: strings.team }), jsxs("button", { type: 'button', onClick: () => choose(() => void controller?.showRequests()), children: [strings.requests, " ", state.unreadCount > 0 && unread] })] })] }), jsxs("div", { className: 'andy-support__content', ref: messages, children: [state.loading && jsx("p", { role: 'status', children: strings.loading }), state.view === 'conversation' && jsxs(Fragment, { children: [state.messages.map((message, index) => jsx("div", { className: `andy-support__message andy-support__message--${message.role}`, children: message.content }, index)), state.config && state.messages.length === 1 && jsx("div", { className: 'andy-support__questions', children: state.config.questions.map(question => jsx("button", { type: 'button', disabled: state.busy, onClick: () => void controller?.send(question), children: question }, question)) }), state.busy && jsx("p", { className: 'andy-support__muted', role: 'status', children: "\u00B7\u00B7\u00B7" }), state.messages.length > 1 && !state.busy && jsxs("button", { type: 'button', className: 'andy-support__secondary', onClick: escalate, children: [strings.team, " \u2197"] })] }), state.view === 'form' && jsxs("form", { className: 'andy-support__form', onSubmit: event => { event.preventDefault(); void controller?.submit(subject, body, replyLanguage); }, children: [jsx("h2", { children: strings.team }), jsxs("label", { children: [strings.subject, jsx("input", { required: true, maxLength: 200, value: state.submission?.subject ?? subject, readOnly: !!state.submission, disabled: state.busy, onChange: event => setSubject(event.target.value) })] }), jsxs("label", { children: [strings.detail, jsx("textarea", { required: true, maxLength: 20000, rows: 5, value: state.submission?.body ?? body, readOnly: !!state.submission, disabled: state.busy, onChange: event => setBody(event.target.value) })] }), jsxs("details", { className: 'andy-support__transcript', children: [jsxs("summary", { children: [strings.notice, " \u00B7 ", state.transcript.length, " ", strings.transcript] }), state.transcript.map((message, index) => jsx("p", { children: message.content }, index))] }), jsx("p", { className: 'andy-support__muted', children: strings.consent }), jsx("button", { type: 'submit', className: 'andy-support__primary', disabled: state.busy || !subject.trim() || !body.trim(), children: state.busy ? strings.loading : strings.submit })] }), state.view === 'receipt' && state.ticket && jsxs("div", { className: 'andy-support__receipt', children: [jsx("span", { className: 'andy-support__check', "aria-hidden": 'true', children: "\u2713" }), jsx("h2", { children: strings.receipt }), jsxs("strong", { children: ["#", state.ticket.number] }), jsx("p", { children: state.ticket.subject }), promiseText && jsxs("p", { children: [strings.promise, " ", jsx("strong", { children: promiseText }), "."] }), jsx("button", { type: 'button', className: 'andy-support__primary', onClick: () => void controller?.showRequests(), children: strings.requests })] }), state.view === 'requests' && jsxs(Fragment, { children: [jsx("h2", { children: strings.requests }), state.tickets.map(ticketRow), !state.busy && !state.error && !state.tickets.length && jsx("p", { className: 'andy-support__muted', children: strings.empty })] }), state.view === 'request' && state.ticket && jsxs(Fragment, { children: [jsxs("h2", { children: ["#", state.ticket.number, " \u00B7 ", state.ticket.subject] }), jsxs("p", { className: 'andy-support__muted', children: [strings[state.ticket.status], state.ticket.reopened && ` · ${strings.reopened}`] }), state.entries.filter(entry => ['requester_message', 'public_reply'].includes(entry.kind)).map(entry => jsxs("article", { className: 'andy-support__entry', children: [jsx("strong", { children: entry.authorName }), jsx("p", { children: entry.body })] }, entry.id)), state.ticket.status === 'resolved' && !reopening && jsxs("div", { className: 'andy-support__request-actions', children: [jsx("button", { type: 'button', className: 'andy-support__primary', onClick: () => setReopening(true), children: strings.reopen }), jsx("button", { type: 'button', className: 'andy-support__secondary', onClick: newProblem, children: strings.otherProblem })] })] }), state.error && jsxs("div", { className: 'andy-support__error', role: 'alert', children: [jsx("p", { children: errorText }), (!state.config || state.view === 'form' || state.view === 'requests' || (state.view === 'request' && state.error !== 'ticket_resolved' && (selectedTicketId || support.ticketId))) && jsx("button", { type: 'button', onClick: retry, disabled: state.busy, children: strings.retry })] })] }), state.view === 'conversation' && jsxs("form", { className: 'andy-support__composer', onSubmit: event => { event.preventDefault(); send(); }, children: [jsx("input", { "aria-label": strings.placeholder, placeholder: strings.placeholder, value: draft, maxLength: 10000, disabled: !state.config, onChange: event => setDraft(event.target.value) }), jsx("button", { type: 'submit', "aria-label": strings.send, disabled: state.busy || !state.config || !draft.trim(), children: "\u2191" })] }), state.view === 'request' && state.ticket && (state.ticket.status !== 'resolved' || reopening) && jsxs("form", { className: 'andy-support__followup', onSubmit: event => { event.preventDefault(); void followup(); }, children: [jsxs("label", { children: [reopening ? strings.reopening : strings.reply, jsx("textarea", { rows: 3, maxLength: 20000, required: true, value: state.followup?.body ?? replyDraft, readOnly: !!state.followup, disabled: state.busy, onChange: event => setReplyDraft(event.target.value) })] }), jsx("button", { type: 'submit', className: 'andy-support__primary', disabled: state.busy || !replyDraft.trim(), children: state.busy ? strings.loading : reopening ? strings.reopen : strings.send })] }), jsxs("footer", { className: 'andy-support__footer', children: [jsx("span", { children: strings.powered }), state.config?.branding.footer.map(link => jsx("a", { href: link.url, target: '_blank', rel: 'noopener noreferrer', children: link.label }, link.url))] })] })] }), portal) });
+};
+/** A host identity change also destroys local drafts and menu state before the next render. */
+const SupportChat = props => jsx(SupportPanel, { ...props }, JSON.stringify([props.support.installationId, props.support.contextKey, props.support.apiBaseUrl]));
+
+const SalesAndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessage, bubbleLabel, lang, predefinedQuestions, theme, orientation, brandColor, bubbleStyle, useBrandColor, logoUrl, previewMode = false, initialOpen = false }) => {
     const [config, setConfig] = useState(null);
     // The visitor's language wins over the Agent's own default: a Spanish Agent
     // embedded on an English page must still render English chrome.
@@ -4300,10 +4724,14 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                                             config?.welcomeMessage ||
                                             'Welcome! How can I help you today?' }), jsx("button", { type: 'button', className: 'andy-welcome-popup__close', "aria-label": strings.closeWelcomeMessage, onClick: () => setShowWelcomePopup(false), children: jsx("svg", { className: 'andy-welcome-popup__close-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsx("div", { className: 'andy-welcome-popup__arrow' })] }), portalRef.current)] })) }));
 };
+const AndyChat = props => props.mode === 'support'
+    ? jsx(SupportChat, { ...props }, `${props.support.installationId}:${props.support.contextKey}`)
+    : jsx(SalesAndyChat, { ...props });
 
 const { SESSION_STORAGE_KEY, FORM_DISPLAY_DELAY_MS, PERSIST_SESSION } = CONFIG;
-const useAndyChat = (embedId) => {
-    initializeConfig('andy-widget-react');
+const useSalesAndyChat = (embedId, enabled) => {
+    if (enabled)
+        initializeConfig('andy-widget-react');
     const [config, setConfig] = useState({});
     const [isLoading, setIsLoading] = useState(true);
     const [isOpen, setIsOpen] = useState(false);
@@ -4323,6 +4751,8 @@ const useAndyChat = (embedId) => {
     const welcomeTimeoutRef = useRef(null);
     const userInfoTimeoutRef = useRef(null);
     const initializeChatbot = useCallback(async () => {
+        if (!enabled)
+            return;
         if (!embedId) {
             throw new Error('Embed ID is required');
         }
@@ -4357,7 +4787,7 @@ const useAndyChat = (embedId) => {
             setIsLoading(false);
             throw err;
         }
-    }, [embedId]);
+    }, [embedId, enabled]);
     const toggleChat = useCallback(() => {
         setIsOpen(prev => {
             const newIsOpen = !prev;
@@ -4391,7 +4821,7 @@ const useAndyChat = (embedId) => {
         });
     }, [config, welcomePopupShown, userInfoCollected]);
     const sendMessage = useCallback(async (messageText) => {
-        if (!messageText.trim() || !config || !sessionId || activeReplyRef.current) {
+        if (!enabled || !messageText.trim() || !config || !sessionId || activeReplyRef.current) {
             return;
         }
         const controller = new AbortController();
@@ -4441,7 +4871,7 @@ const useAndyChat = (embedId) => {
             if (activeReplyRef.current === controller)
                 activeReplyRef.current = null;
         }
-    }, [embedId, sessionId, config]);
+    }, [embedId, sessionId, config, enabled]);
     const showFaq = useCallback(() => {
         setShowingFaq(true);
     }, []);
@@ -4461,6 +4891,8 @@ const useAndyChat = (embedId) => {
         setShowingUserInfoForm(false);
     }, []);
     const submitUserInfo$1 = useCallback(async (userInfo) => {
+        if (!enabled)
+            return;
         try {
             await submitUserInfo(embedId, sessionId, userInfo);
             setUserInfoCollected(true);
@@ -4477,8 +4909,10 @@ const useAndyChat = (embedId) => {
             console.error('Error submitting user info:', err);
             throw err;
         }
-    }, [embedId, sessionId]);
+    }, [embedId, sessionId, enabled]);
     const startNewSession = useCallback(() => {
+        if (!enabled)
+            return;
         activeReplyRef.current?.abort();
         activeReplyRef.current = null;
         const newSessionId = generateSessionId();
@@ -4504,7 +4938,7 @@ const useAndyChat = (embedId) => {
                 setMessages([greetingMessage]);
             }
         }
-    }, [config]);
+    }, [config, enabled]);
     const addMessage = useCallback((message) => {
         setMessages(prev => [...prev, message]);
     }, []);
@@ -4533,6 +4967,11 @@ const useAndyChat = (embedId) => {
         addMessage
     };
 };
+function useAndyChat(input) {
+    const support = useSupportChat(typeof input === 'string' ? null : input.support);
+    const sales = useSalesAndyChat(typeof input === 'string' ? input : '', typeof input === 'string');
+    return typeof input === 'string' ? sales : support;
+}
 
 const ChatBubble = ({ isOpen, config, onClick }) => {
     const bubbleClasses = ['andy-bubble', isOpen && 'andy-bubble--open'].filter(Boolean).join(' ');
@@ -4721,4 +5160,3 @@ const UserInfoForm = ({ headerText, onSubmit, onClose }) => {
 };
 
 export { AndyChat as Andy, AndyChat, ChatBubble, ChatWindow, FAQ, MessageInput, MessageList, UserInfoForm, WelcomePopup, animation, borderRadius, chat, colors, AndyChat as default, generateSessionId, getApiBaseUrl, getEmbedId, isValidEmbedId, parseMarkdown, sanitizeUrl, setApiBaseUrl, shadows, spacing, theme, typography, useAndyChat, zIndex };
-//# sourceMappingURL=index.esm.js.map

package/dist/types/SupportChat.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SupportAndyChatProps } from './types';
+/** A host identity change also destroys local drafts and menu state before the next render. */
+export declare const SupportChat: React.FC<SupportAndyChatProps>;

package/dist/types/hooks/useAndyChat.d.ts

@@ -1,2 +1,8 @@
 import type { UseAndyChatReturn } from '../types';
-export declare const useAndyChat: (embedId: string) => UseAndyChatReturn;
+import type { SupportOptions } from 'andy-widget-core';
+import { useSupportChat } from './useSupportChat';
+export declare function useAndyChat(embedId: string): UseAndyChatReturn;
+export declare function useAndyChat(options: {
+    mode: 'support';
+    support: SupportOptions;
+}): ReturnType<typeof useSupportChat>;

package/dist/types/hooks/useSupportChat.d.ts

@@ -0,0 +1,23 @@
+import { type SupportOptions, type SupportState } from 'andy-widget-core';
+/** The host context key changes before a new user/company is allowed to see any previous state. */
+export declare const useSupportChat: (options: SupportOptions | null) => {
+    mode: "support";
+    state: SupportState;
+    controller: {
+        getSnapshot: () => SupportState;
+        subscribe: (listener: () => void) => () => void;
+        bootstrap: () => Promise<unknown>;
+        send: (content: string) => Promise<unknown>;
+        escalate: () => void;
+        submit: (subject: string, body: string, replyLanguage?: "es" | "en") => Promise<unknown>;
+        showRequests: () => Promise<unknown>;
+        inspect: (ticketId: string) => Promise<unknown>;
+        reply: (body: string, reopen?: boolean) => Promise<unknown>;
+        newProblem: () => void;
+        refresh: () => Promise<unknown>;
+        setVisible: (visible: boolean) => void;
+        newConversation: () => void;
+        back: () => void;
+        dispose: () => void;
+    } | null;
+};

package/dist/types/index.d.ts

@@ -8,6 +8,6 @@ export { default as MessageInput } from './components/MessageInput';
 export { default as FAQ } from './components/FAQ';
 export { default as WelcomePopup } from './components/WelcomePopup';
 export { default as UserInfoForm } from './components/UserInfoForm';
-export type { AndyChatProps, ChatbotConfig, Message, FAQItem, PredefinedQuestion, WelcomePopupConfig, CollectUserInfoConfig, UserInfo, UseAndyChatReturn, ChatBubbleProps, ChatWindowProps, MessageListProps, MessageInputProps, FAQProps, WelcomePopupProps, UserInfoFormProps, FaqItemProps } from './types';
+export type { AndyChatProps, SupportAndyChatProps, SalesAndyChatProps, ChatbotConfig, Message, FAQItem, PredefinedQuestion, WelcomePopupConfig, CollectUserInfoConfig, UserInfo, UseAndyChatReturn, ChatBubbleProps, ChatWindowProps, MessageListProps, MessageInputProps, FAQProps, WelcomePopupProps, UserInfoFormProps, FaqItemProps } from './types';
 export { theme, colors, typography, spacing, borderRadius, shadows, zIndex, animation, chat, generateSessionId, parseMarkdown, sanitizeUrl, isValidEmbedId, getEmbedId, getApiBaseUrl, setApiBaseUrl } from 'andy-widget-core';
 export { default } from './AndyChat';