andy-widget-react 2.2.1 → 2.3.0

package/README.md

@@ -65,6 +65,34 @@ capture are disabled in this release because there is no durable public submissi
 This release intentionally has no Widget analytics or event callback API. Use Andy's existing
 conversation analytics rather than observing the Shadow DOM.
 
+## Authenticated Support
+
+Support requires a configured host installation and a server-provisioned Support Agent. Use the accepted core/React package pair; this source addition is unpublished until the coordinated release is approved.
+
+```tsx
+<AndyChat
+  mode='support'
+  lang='es'
+  support={{
+    installationId: hostInstallationId,
+    contextKey: `${signedInUserId}:${selectedCompanyId}`,
+    getRequesterPass: async () => {
+      const response = await fetch('/api/andy/requester-pass', { cache: 'no-store' })
+      if (!response.ok) throw new Error('Support authentication unavailable')
+      return (await response.json()).pass
+    }
+  }}
+/>
+```
+
+That host endpoint signs on the server from the authenticated user/company; never put a signing key in the browser. Change `contextKey` whenever identity/company changes, and unmount on sign-out. The SDK aborts and clears old private state. The pass remains in memory and is sent only in `X-Andy-Requester`. Expired/unknown-key refusals renew once; other failures stop inside the panel. `apiBaseUrl` may explicitly select the reviewed Andy API origin; normal production defaults to Andy.
+
+Provider branding and links, greeting/questions and reply promise come from Andy. There is no `embedId`, visitor identity form or Sales action in this mode. Sending the team form consents to attach the frozen conversation; its retry preserves the request key and receipt. Mis solicitudes stays inside the panel and displays the Requester's public human thread. The panel fills phones. Vanilla Support is frozen.
+
+For a custom React presentation, `useAndyChat({ mode: 'support', support })` returns `{ mode, state, controller }`. The controller exposes `send`, `escalate`, `submit`, `showRequests`, `inspect`, `back` and `newConversation`; it has the same consent, abort and retry semantics as the mounted panel. Do not use Sales presentation helpers with this result. Ticket replies and explicit reopens use the private human Requester operations, never the AI route.
+
+The panel captures its displayed `lang` on the first consented open as the ticket's Reply Email preference. A retry keeps that original choice even if the host changes language. Custom presentations call `controller.submit(subject, body, 'es' | 'en')` with their displayed language; omission defaults to Spanish. This copy preference never enters the signed pass or provider configuration.
+
 ## Advanced exports
 
 The package also exports `useAndyChat`, individual presentation components, its public TypeScript
@@ -79,3 +107,10 @@ legacy hosted `/widget.js` redirect for new integrations.
 ## License
 
 MIT
+
+
+To handle a Reply Email link, pass the host URL's ticket parameter as `support.ticketId` after normal host sign-in. The widget opens that request only after Andy authorizes the current Requester/company. On another company or user, keep changing `contextKey`; on sign-out, unmount. Never supply an old pass as URL data.
+
+The human thread follows replies and status changes without a page reload. Private polling runs every three seconds while subscribed and pauses in hidden documents. The launcher and My requests show unread replies. Opening a visible thread marks only its displayed public entries seen; closing it preserves unread replies. Resolved requests offer Reopen with a message for the same problem, or This is another problem for a fresh consented request. Reply and reopen retries retain their original body and request key.
+
+Custom presentations also use `controller.reply(body, reopen?)`, `newProblem()` and `refresh()`. Call `setVisible(false)` when a displayed thread is closed or hidden, and `setVisible(true)` when it is being read. Subscription disposal stops automatic refresh. The controller's `unreadCount`, Ticket sequence marks and public entries carry the same behavior as the mounted panel.

package/dist/index.cjs

@@ -775,6 +775,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.')
@@ -815,6 +820,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;
@@ -3679,7 +3685,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 = react.useRef(options?.getRequesterPass);
+    callback.current = options?.getRequesterPass;
+    const [owned, setOwned] = react.useState(null);
+    const controller = owned?.key === key ? owned?.controller : null;
+    const state = react.useSyncExternalStore(controller?.subscribe || noSubscribe, controller?.getSnapshot || emptySnapshot, emptySnapshot);
+    react.useEffect(() => {
+        if (!options || !key)
+            return;
+        const controller = createSupportController({ ...options, getRequesterPass: () => callback.current() });
+        setOwned({ key, controller });
+        void controller.bootstrap();
+        return () => controller.dispose();
+    }, [key]);
+    react.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] = react.useState(initialOpen);
+    const [menu, setMenu] = react.useState(false);
+    const [draft, setDraft] = react.useState('');
+    const [subject, setSubject] = react.useState('');
+    const [body, setBody] = react.useState('');
+    const [replyDraft, setReplyDraft] = react.useState('');
+    const [reopening, setReopening] = react.useState(false);
+    const [selectedTicketId, setSelectedTicketId] = react.useState(null);
+    const host = react.useRef(null);
+    const messages = react.useRef(null);
+    const [portal, setPortal] = react.useState(null);
+    react.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(); };
+    }, []);
+    react.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]);
+    react.useEffect(() => { messages.current?.scrollTo?.({ top: messages.current.scrollHeight, behavior: 'smooth' }); }, [state.messages, state.view]);
+    react.useEffect(() => { controller?.setVisible(open); }, [controller, open]);
+    react.useEffect(() => { if (support.ticketId)
+        setOpen(true); }, [support.ticketId]);
+    react.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 = jsxRuntime.jsx("span", { className: 'andy-support__unread', role: 'img', "aria-label": strings.unread });
+    const title = state.config?.branding.name || strings.support;
+    const ticketRow = (ticket) => jsxRuntime.jsxs("button", { type: 'button', className: 'andy-support__ticket', onClick: () => { setSelectedTicketId(ticket.id); setReplyDraft(''); setReopening(false); void controller?.inspect(ticket.id); }, children: [jsxRuntime.jsxs("span", { children: ["#", ticket.number, " \u00B7 ", ticket.subject, " ", ticket.unread && unread] }), jsxRuntime.jsx("small", { children: strings[ticket.status] }), jsxRuntime.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 jsxRuntime.jsx("div", { ref: host, className: `andy-support-host andy-support-host--${orientation}`, children: portal && ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: 'andy-support', "data-private": true, "data-ph-no-capture": true, "data-sentry-block": true, lang: replyLanguage, children: [!open && jsxRuntime.jsxs("button", { type: 'button', className: 'andy-support__launcher', title: tooltip, onClick: () => setOpen(true), children: [jsxRuntime.jsxs("span", { children: [strings.support, " \u00B7 ", title, " ", state.unreadCount > 0 && unread] }), jsxRuntime.jsx("span", { "aria-hidden": 'true', children: "\u2197" })] }), open && jsxRuntime.jsxs("section", { className: 'andy-support__panel', role: 'dialog', "aria-label": `${strings.support} · ${title}`, children: [jsxRuntime.jsxs("header", { className: 'andy-support__header', children: [state.view !== 'conversation' && jsxRuntime.jsx("button", { type: 'button', "aria-label": strings.back, onClick: () => state.view === 'request' ? void controller?.showRequests() : controller?.back(), children: "\u2039" }), jsxRuntime.jsx("span", { className: 'andy-support__mark', "aria-hidden": 'true', children: title.slice(0, 1) }), jsxRuntime.jsxs("div", { className: 'andy-support__identity', children: [jsxRuntime.jsx("strong", { children: title }), jsxRuntime.jsx("small", { children: strings.support })] }), jsxRuntime.jsx("button", { type: 'button', "aria-label": strings.menu, "aria-expanded": menu, disabled: !state.config, onClick: () => setMenu(!menu), children: "\u00B7\u00B7\u00B7" }), jsxRuntime.jsx("button", { type: 'button', "aria-label": strings.close, onClick: () => setOpen(false), children: "\u00D7" }), menu && jsxRuntime.jsxs("nav", { className: 'andy-support__menu', "aria-label": strings.menu, children: [jsxRuntime.jsx("button", { type: 'button', onClick: () => choose(() => controller?.newConversation()), children: strings.new }), jsxRuntime.jsx("button", { type: 'button', onClick: () => choose(escalate), children: strings.team }), jsxRuntime.jsxs("button", { type: 'button', onClick: () => choose(() => void controller?.showRequests()), children: [strings.requests, " ", state.unreadCount > 0 && unread] })] })] }), jsxRuntime.jsxs("div", { className: 'andy-support__content', ref: messages, children: [state.loading && jsxRuntime.jsx("p", { role: 'status', children: strings.loading }), state.view === 'conversation' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [state.messages.map((message, index) => jsxRuntime.jsx("div", { className: `andy-support__message andy-support__message--${message.role}`, children: message.content }, index)), state.config && state.messages.length === 1 && jsxRuntime.jsx("div", { className: 'andy-support__questions', children: state.config.questions.map(question => jsxRuntime.jsx("button", { type: 'button', disabled: state.busy, onClick: () => void controller?.send(question), children: question }, question)) }), state.busy && jsxRuntime.jsx("p", { className: 'andy-support__muted', role: 'status', children: "\u00B7\u00B7\u00B7" }), state.messages.length > 1 && !state.busy && jsxRuntime.jsxs("button", { type: 'button', className: 'andy-support__secondary', onClick: escalate, children: [strings.team, " \u2197"] })] }), state.view === 'form' && jsxRuntime.jsxs("form", { className: 'andy-support__form', onSubmit: event => { event.preventDefault(); void controller?.submit(subject, body, replyLanguage); }, children: [jsxRuntime.jsx("h2", { children: strings.team }), jsxRuntime.jsxs("label", { children: [strings.subject, jsxRuntime.jsx("input", { required: true, maxLength: 200, value: state.submission?.subject ?? subject, readOnly: !!state.submission, disabled: state.busy, onChange: event => setSubject(event.target.value) })] }), jsxRuntime.jsxs("label", { children: [strings.detail, jsxRuntime.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) })] }), jsxRuntime.jsxs("details", { className: 'andy-support__transcript', children: [jsxRuntime.jsxs("summary", { children: [strings.notice, " \u00B7 ", state.transcript.length, " ", strings.transcript] }), state.transcript.map((message, index) => jsxRuntime.jsx("p", { children: message.content }, index))] }), jsxRuntime.jsx("p", { className: 'andy-support__muted', children: strings.consent }), jsxRuntime.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 && jsxRuntime.jsxs("div", { className: 'andy-support__receipt', children: [jsxRuntime.jsx("span", { className: 'andy-support__check', "aria-hidden": 'true', children: "\u2713" }), jsxRuntime.jsx("h2", { children: strings.receipt }), jsxRuntime.jsxs("strong", { children: ["#", state.ticket.number] }), jsxRuntime.jsx("p", { children: state.ticket.subject }), promiseText && jsxRuntime.jsxs("p", { children: [strings.promise, " ", jsxRuntime.jsx("strong", { children: promiseText }), "."] }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-support__primary', onClick: () => void controller?.showRequests(), children: strings.requests })] }), state.view === 'requests' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { children: strings.requests }), state.tickets.map(ticketRow), !state.busy && !state.error && !state.tickets.length && jsxRuntime.jsx("p", { className: 'andy-support__muted', children: strings.empty })] }), state.view === 'request' && state.ticket && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("h2", { children: ["#", state.ticket.number, " \u00B7 ", state.ticket.subject] }), jsxRuntime.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 => jsxRuntime.jsxs("article", { className: 'andy-support__entry', children: [jsxRuntime.jsx("strong", { children: entry.authorName }), jsxRuntime.jsx("p", { children: entry.body })] }, entry.id)), state.ticket.status === 'resolved' && !reopening && jsxRuntime.jsxs("div", { className: 'andy-support__request-actions', children: [jsxRuntime.jsx("button", { type: 'button', className: 'andy-support__primary', onClick: () => setReopening(true), children: strings.reopen }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-support__secondary', onClick: newProblem, children: strings.otherProblem })] })] }), state.error && jsxRuntime.jsxs("div", { className: 'andy-support__error', role: 'alert', children: [jsxRuntime.jsx("p", { children: errorText }), (!state.config || state.view === 'form' || state.view === 'requests' || (state.view === 'request' && state.error !== 'ticket_resolved' && (selectedTicketId || support.ticketId))) && jsxRuntime.jsx("button", { type: 'button', onClick: retry, disabled: state.busy, children: strings.retry })] })] }), state.view === 'conversation' && jsxRuntime.jsxs("form", { className: 'andy-support__composer', onSubmit: event => { event.preventDefault(); send(); }, children: [jsxRuntime.jsx("input", { "aria-label": strings.placeholder, placeholder: strings.placeholder, value: draft, maxLength: 10000, disabled: !state.config, onChange: event => setDraft(event.target.value) }), jsxRuntime.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) && jsxRuntime.jsxs("form", { className: 'andy-support__followup', onSubmit: event => { event.preventDefault(); void followup(); }, children: [jsxRuntime.jsxs("label", { children: [reopening ? strings.reopening : strings.reply, jsxRuntime.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) })] }), jsxRuntime.jsx("button", { type: 'submit', className: 'andy-support__primary', disabled: state.busy || !replyDraft.trim(), children: state.busy ? strings.loading : reopening ? strings.reopen : strings.send })] }), jsxRuntime.jsxs("footer", { className: 'andy-support__footer', children: [jsxRuntime.jsx("span", { children: strings.powered }), state.config?.branding.footer.map(link => jsxRuntime.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 => jsxRuntime.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] = react.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.
@@ -4304,10 +4728,14 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                                             config?.welcomeMessage ||
                                             'Welcome! How can I help you today?' }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-welcome-popup__close', "aria-label": strings.closeWelcomeMessage, onClick: () => setShowWelcomePopup(false), children: jsxRuntime.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: jsxRuntime.jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsxRuntime.jsx("div", { className: 'andy-welcome-popup__arrow' })] }), portalRef.current)] })) }));
 };
+const AndyChat = props => props.mode === 'support'
+    ? jsxRuntime.jsx(SupportChat, { ...props }, `${props.support.installationId}:${props.support.contextKey}`)
+    : jsxRuntime.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] = react.useState({});
     const [isLoading, setIsLoading] = react.useState(true);
     const [isOpen, setIsOpen] = react.useState(false);
@@ -4327,6 +4755,8 @@ const useAndyChat = (embedId) => {
     const welcomeTimeoutRef = react.useRef(null);
     const userInfoTimeoutRef = react.useRef(null);
     const initializeChatbot = react.useCallback(async () => {
+        if (!enabled)
+            return;
         if (!embedId) {
             throw new Error('Embed ID is required');
         }
@@ -4361,7 +4791,7 @@ const useAndyChat = (embedId) => {
             setIsLoading(false);
             throw err;
         }
-    }, [embedId]);
+    }, [embedId, enabled]);
     const toggleChat = react.useCallback(() => {
         setIsOpen(prev => {
             const newIsOpen = !prev;
@@ -4395,7 +4825,7 @@ const useAndyChat = (embedId) => {
         });
     }, [config, welcomePopupShown, userInfoCollected]);
     const sendMessage = react.useCallback(async (messageText) => {
-        if (!messageText.trim() || !config || !sessionId || activeReplyRef.current) {
+        if (!enabled || !messageText.trim() || !config || !sessionId || activeReplyRef.current) {
             return;
         }
         const controller = new AbortController();
@@ -4445,7 +4875,7 @@ const useAndyChat = (embedId) => {
             if (activeReplyRef.current === controller)
                 activeReplyRef.current = null;
         }
-    }, [embedId, sessionId, config]);
+    }, [embedId, sessionId, config, enabled]);
     const showFaq = react.useCallback(() => {
         setShowingFaq(true);
     }, []);
@@ -4465,6 +4895,8 @@ const useAndyChat = (embedId) => {
         setShowingUserInfoForm(false);
     }, []);
     const submitUserInfo$1 = react.useCallback(async (userInfo) => {
+        if (!enabled)
+            return;
         try {
             await submitUserInfo(embedId, sessionId, userInfo);
             setUserInfoCollected(true);
@@ -4481,8 +4913,10 @@ const useAndyChat = (embedId) => {
             console.error('Error submitting user info:', err);
             throw err;
         }
-    }, [embedId, sessionId]);
+    }, [embedId, sessionId, enabled]);
     const startNewSession = react.useCallback(() => {
+        if (!enabled)
+            return;
         activeReplyRef.current?.abort();
         activeReplyRef.current = null;
         const newSessionId = generateSessionId();
@@ -4508,7 +4942,7 @@ const useAndyChat = (embedId) => {
                 setMessages([greetingMessage]);
             }
         }
-    }, [config]);
+    }, [config, enabled]);
     const addMessage = react.useCallback((message) => {
         setMessages(prev => [...prev, message]);
     }, []);
@@ -4537,6 +4971,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(' ');
@@ -4751,4 +5190,3 @@ exports.theme = theme;
 exports.typography = typography;
 exports.useAndyChat = useAndyChat;
 exports.zIndex = zIndex;
-//# sourceMappingURL=index.cjs.map