andy-widget-react 2.2.0 → 2.3.0

package/dist/index.esm.js

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