andy-widget-react 2.2.0 → 2.3.0

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;
@@ -1497,9 +1503,6 @@ const generateDesignTokenVariablesString = () => {
 	--andy-chat-avatar-size: 32px;
 	--andy-chat-avatar-size-small: 24px;
 
-	/* Keyboard handling */
-	--andy-keyboard-height: 0px;
-
 	/* === THEMABLE VARIABLES (Default Light Theme) === */
 	--andy-themable-background: var(--andy-color-background);
 	--andy-themable-background-secondary: var(--andy-color-white);
@@ -2883,11 +2886,6 @@ const getCoreStructuralCssString = () => {
 		}
 	}
 
-	/* No special handling for keyboard - let browser handle it naturally */
-	.andy-chat-window--keyboard-open {
-		/* Browser handles positioning automatically with our margin-based approach */
-	}
-
 	/* Ensure the window content is properly laid out */
 	.andy-chat-window__messages {
 		flex: 1 1 auto;
@@ -3005,17 +3003,12 @@ const getCoreStructuralCssString = () => {
 	}
 }
 
-/* Desktop keyboard handling (for testing) */
+/* Desktop */
 @media (min-width: 521px) {
 	/* Desktop retains original positioning behavior */
 	.andy-chat-window {
 		transition: transform 0.3s ease-out;
 	}
-
-	/* Optional: Add keyboard handling for desktop if needed */
-	.andy-chat-window--keyboard-open {
-		/* No transform on desktop - keyboard doesn't affect viewport */
-	}
 }
 
 /* Orientation */
@@ -3507,244 +3500,6 @@ const UI_STRINGS = {
  */
 const getUiStrings = lang => UI_STRINGS[lang] || UI_STRINGS.en;
 
-/**
- * Keyboard detection utility for handling mobile virtual keyboards
- * Provides cross-browser support for detecting keyboard open/close events
- */
-
-class KeyboardDetector {
-	constructor() {
-		this.isKeyboardOpen = false;
-		this.keyboardHeight = 0;
-		this.listeners = new Set();
-		this.inputElement = null;
-		this.viewportHeight = window.innerHeight;
-		this.visualViewport = window.visualViewport;
-		
-		this.initializeDetection();
-	}
-
-	/**
-	 * Initialize keyboard detection
-	 */
-	initializeDetection() {
-		// Use Visual Viewport API if available (most modern browsers)
-		if (this.visualViewport) {
-			this.visualViewport.addEventListener('resize', this.handleViewportResize.bind(this));
-			this.visualViewport.addEventListener('scroll', this.handleViewportScroll.bind(this));
-		} else {
-			// Fallback for older browsers
-			window.addEventListener('resize', this.handleWindowResize.bind(this));
-		}
-
-		// Additional detection via focus/blur events
-		document.addEventListener('focusin', this.handleFocusIn.bind(this), true);
-		document.addEventListener('focusout', this.handleFocusOut.bind(this), true);
-
-		// Orientation change handler
-		window.addEventListener('orientationchange', this.handleOrientationChange.bind(this));
-	}
-
-	/**
-	 * Handle visual viewport resize (modern browsers)
-	 */
-	handleViewportResize() {
-		const currentHeight = this.visualViewport.height;
-		const heightDifference = window.innerHeight - currentHeight;
-
-		// If viewport shrunk by more than 100px, keyboard is likely open
-		if (heightDifference > 100) {
-			this.setKeyboardOpen(true, heightDifference);
-		} else if (heightDifference < 50) {
-			this.setKeyboardOpen(false, 0);
-		}
-	}
-
-	/**
-	 * Handle visual viewport scroll
-	 */
-	handleViewportScroll() {
-		// On iOS, viewport scrolls when keyboard opens
-		if (this.visualViewport.offsetTop > 0) {
-			this.setKeyboardOpen(true, this.visualViewport.offsetTop);
-		}
-	}
-
-	/**
-	 * Handle window resize (fallback for older browsers)
-	 */
-	handleWindowResize() {
-		const currentHeight = window.innerHeight;
-		const heightDifference = this.viewportHeight - currentHeight;
-
-		// Significant height reduction likely means keyboard opened
-		if (heightDifference > 100) {
-			this.setKeyboardOpen(true, heightDifference);
-		} else if (Math.abs(heightDifference) < 50) {
-			this.setKeyboardOpen(false, 0);
-			this.viewportHeight = currentHeight;
-		}
-	}
-
-	/**
-	 * Handle input focus
-	 */
-	handleFocusIn(e) {
-		const isInput = ['input', 'textarea'].includes(e.target.tagName.toLowerCase());
-		if (isInput) {
-			this.inputElement = e.target;
-			// Delay to allow keyboard animation
-			setTimeout(() => {
-				if (this.inputElement === e.target) {
-					this.checkKeyboardStatus();
-				}
-			}, 300);
-		}
-	}
-
-	/**
-	 * Handle input blur
-	 */
-	handleFocusOut(e) {
-		const isInput = ['input', 'textarea'].includes(e.target.tagName.toLowerCase());
-		if (isInput && this.inputElement === e.target) {
-			this.inputElement = null;
-			// Delay to allow keyboard animation
-			setTimeout(() => {
-				if (!this.inputElement) {
-					this.setKeyboardOpen(false, 0);
-				}
-			}, 300);
-		}
-	}
-
-	/**
-	 * Handle orientation change
-	 */
-	handleOrientationChange() {
-		// Reset viewport height after orientation change
-		setTimeout(() => {
-			this.viewportHeight = window.innerHeight;
-			this.checkKeyboardStatus();
-		}, 500);
-	}
-
-	/**
-	 * Check keyboard status (for browsers without Visual Viewport API)
-	 */
-	checkKeyboardStatus() {
-		if (!this.visualViewport) {
-			const currentHeight = window.innerHeight;
-			const heightDifference = this.viewportHeight - currentHeight;
-			
-			if (this.inputElement && heightDifference > 100) {
-				this.setKeyboardOpen(true, heightDifference);
-			}
-		}
-	}
-
-	/**
-	 * Set keyboard state and notify listeners
-	 */
-	setKeyboardOpen(isOpen, height) {
-		const changed = this.isKeyboardOpen !== isOpen || this.keyboardHeight !== height;
-		
-		this.isKeyboardOpen = isOpen;
-		this.keyboardHeight = height;
-
-		if (changed) {
-			this.notifyListeners();
-		}
-	}
-
-	/**
-	 * Add listener for keyboard state changes
-	 */
-	addListener(callback) {
-		this.listeners.add(callback);
-		// Immediately notify with current state
-		callback({
-			isOpen: this.isKeyboardOpen,
-			height: this.keyboardHeight
-		});
-	}
-
-	/**
-	 * Remove listener
-	 */
-	removeListener(callback) {
-		this.listeners.delete(callback);
-	}
-
-	/**
-	 * Notify all listeners of state change
-	 */
-	notifyListeners() {
-		const state = {
-			isOpen: this.isKeyboardOpen,
-			height: this.keyboardHeight
-		};
-		
-		this.listeners.forEach(callback => {
-			try {
-				callback(state);
-			} catch (error) {
-				console.error('Error in keyboard detector listener:', error);
-			}
-		});
-	}
-
-	/**
-	 * Get current keyboard state
-	 */
-	getState() {
-		return {
-			isOpen: this.isKeyboardOpen,
-			height: this.keyboardHeight
-		}
-	}
-
-	/**
-	 * Cleanup
-	 */
-	destroy() {
-		if (this.visualViewport) {
-			this.visualViewport.removeEventListener('resize', this.handleViewportResize.bind(this));
-			this.visualViewport.removeEventListener('scroll', this.handleViewportScroll.bind(this));
-		} else {
-			window.removeEventListener('resize', this.handleWindowResize.bind(this));
-		}
-		
-		document.removeEventListener('focusin', this.handleFocusIn.bind(this), true);
-		document.removeEventListener('focusout', this.handleFocusOut.bind(this), true);
-		window.removeEventListener('orientationchange', this.handleOrientationChange.bind(this));
-		
-		this.listeners.clear();
-	}
-}
-
-// Create singleton instance
-let keyboardDetectorInstance = null;
-
-/**
- * Get or create keyboard detector instance
- */
-function getKeyboardDetector() {
-	if (!keyboardDetectorInstance) {
-		keyboardDetectorInstance = new KeyboardDetector();
-	}
-	return keyboardDetectorInstance
-}
-
-/**
- * Update CSS custom property on host element
- */
-function updateKeyboardHeight(hostElement, height) {
-	if (hostElement) {
-		hostElement.style.setProperty('--andy-keyboard-height', `${height}px`);
-	}
-}
-
 /**
  * Mobile detection utility for AndyChat
  * Provides reliable mobile device detection with multiple methods
@@ -3930,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.
@@ -4034,22 +4207,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             portalRef.current = portalTarget;
         }
         setShadowReady(true);
-        const keyboardDetector = getKeyboardDetector();
-        const keyboardListener = ({ isOpen: kbOpen, height }) => {
-            updateKeyboardHeight(containerRef.current, height);
-            const chatWindow = shadowRef.current?.querySelector('.andy-chat-window');
-            if (chatWindow) {
-                if (kbOpen && height > 0) {
-                    chatWindow.classList.add('andy-chat-window--keyboard-open');
-                }
-                else {
-                    chatWindow.classList.remove('andy-chat-window--keyboard-open');
-                }
-            }
-        };
-        keyboardDetector.addListener(keyboardListener);
         return () => {
-            keyboardDetector.removeListener(keyboardListener);
             shadowRef.current = null;
             portalRef.current = null;
             setShadowReady(false);
@@ -4570,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);
@@ -4593,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');
         }
@@ -4627,7 +4791,7 @@ const useAndyChat = (embedId) => {
             setIsLoading(false);
             throw err;
         }
-    }, [embedId]);
+    }, [embedId, enabled]);
     const toggleChat = react.useCallback(() => {
         setIsOpen(prev => {
             const newIsOpen = !prev;
@@ -4661,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();
@@ -4711,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);
     }, []);
@@ -4731,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);
@@ -4747,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();
@@ -4774,7 +4942,7 @@ const useAndyChat = (embedId) => {
                 setMessages([greetingMessage]);
             }
         }
-    }, [config]);
+    }, [config, enabled]);
     const addMessage = react.useCallback((message) => {
         setMessages(prev => [...prev, message]);
     }, []);
@@ -4803,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(' ');
@@ -5017,4 +5190,3 @@ exports.theme = theme;
 exports.typography = typography;
 exports.useAndyChat = useAndyChat;
 exports.zIndex = zIndex;
-//# sourceMappingURL=index.cjs.map