andy-widget-react 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -762,6 +762,84 @@ const initializeConfig = (packageName = 'unknown') => {
 	}
 };
 
+/** Stream a reply while the server restores this session's conversation history. */
+const sendMessageForWidget = async (embedId, sessionId, message, options = {}) => {
+	const response = await fetch(`${getApiBaseUrl()}/chat/stream`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		signal: options.signal,
+		body: JSON.stringify({
+			chatbotId: embedId,
+			sessionId,
+			historySource: 'session',
+			messages: [{ role: 'user', parts: [{ type: 'text', text: message }] }]
+		})
+	});
+	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.')
+	}
+	if (!response.body) throw new Error('Missing reply stream.')
+
+	const reader = response.body.getReader();
+	const decoder = new TextDecoder();
+	let buffer = '';
+	let eventData = [];
+	let text = '';
+	let published = '';
+	let complete = false;
+	let waiting = false;
+	const event = () => {
+		if (!eventData.length) return
+		const data = eventData.join('\n');
+		eventData = [];
+		if (data === '[DONE]') { complete = true; return }
+		const part = JSON.parse(data);
+		if (part.type === 'error' || part.type === 'abort') {
+			throw new Error(part.errorText || 'Reply interrupted.')
+		}
+		if (part.type === 'data-handoff' && part.data?.status === 'waiting') {
+			waiting = true;
+			return
+		}
+		if (part.type === 'text-start' && text && !text.endsWith('\n')) text += '\n';
+		if (part.type === 'text-delta') {
+			if (typeof part.delta !== 'string') throw new Error('Invalid reply text.')
+			text += part.delta;
+		}
+	};
+	const line = value => {
+		const cleaned = value.endsWith('\r') ? value.slice(0, -1) : value;
+		if (!cleaned) event();
+		else if (cleaned.startsWith('data:')) eventData.push(cleaned.slice(5).replace(/^ /, ''));
+	};
+	try {
+		while (!complete) {
+			const { value, done } = await reader.read();
+			buffer += decoder.decode(value, { stream: !done });
+			let newline;
+			while ((newline = buffer.indexOf('\n')) !== -1) {
+				line(buffer.slice(0, newline));
+				buffer = buffer.slice(newline + 1);
+				if (complete) break
+			}
+			// Publish once per received chunk, including the first useful text.
+			if (!waiting && text.trim() && text !== published) {
+				published = text;
+				options.onText?.(text);
+			}
+			if (done) break
+		}
+		if (!complete) throw new Error('Reply stream ended before completion.')
+		if (waiting) return { status: 'waiting' }
+		if (!text.trim()) throw new Error('The reply was empty.')
+		return { status: 'agent', text }
+	} finally {
+		await reader.cancel().catch(() => {});
+		reader.releaseLock();
+	}
+};
+
 /**
  * AndyChat API client
  * Handles all communication with the AndyChat backend API
@@ -986,60 +1064,6 @@ const fetchChatbotConfig = async embedId => {
 	}
 };
 
-/**
- * Sends a user message to the API
- * @param {string} embedId - The chatbot embed ID
- * @param {string} sessionId - The current session ID
- * @param {string} message - The user's message
- * @returns {Promise<string>} The bot's response text
- */
-const sendMessageForWidget = async (embedId, sessionId, message) => {
-	try {
-		const apiBaseUrl = getApiBaseUrl();
-		const response = await fetch(`${apiBaseUrl}/messages`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({
-				chatbotId: embedId,
-				sessionId: sessionId,
-				currentUserMessage: {
-					role: 'user',
-					content: message
-				}
-			})
-		});
-
-		if (response.ok) {
-			const data = await response.json();
-			if (data.error || data.limitStatus) {
-				throw new Error(data.error || 'Chat is temporarily unavailable.')
-			}
-			if (data.handoffStatus === 'paused') {
-				return { status: 'waiting' }
-			}
-			if (typeof data.botResponse !== 'string' || !data.botResponse.trim()) {
-				throw new Error('Unexpected response format from server.')
-			}
-			return { status: 'agent', text: data.botResponse }
-		} else {
-			// Handle HTTP errors (e.g., 500, 404)
-			let errorData;
-			try {
-				errorData = await response.json();
-			} catch (e) {
-				// If parsing error JSON fails, use status text
-				// Also, if response.text() is available and gives more info, consider using it.
-				const responseText = response.text ? await response.text() : '';
-				throw new Error(response.statusText || `Server returned an error. ${responseText}`.trim())
-			}
-			throw new Error(errorData.error || errorData.message || response.statusText || 'Server returned an error.')
-		}
-	} catch (error) {
-		console.error('AndyChat: Message request failed.');
-		throw error
-	}
-};
-
 /**
  * Visitor information collection is disabled until Andy exposes a durable public submission
  * contract. This explicit failure prevents a Widget from reporting a mocked success.
@@ -2133,6 +2157,10 @@ const getCoreStructuralCssString = () => {
 }
 
 /* Message Sub-Components */
+.andy-message__stream {
+  white-space: pre-wrap;
+}
+
 .andy-message__content {
 	line-height: 1.4;
 	margin: 0;
@@ -3442,6 +3470,13 @@ const SVG_ICONS = {
 // Keyed by language so React and Vanilla render identical text for a visitor.
 const UI_STRINGS = {
 	en: {
+		openChat: 'Open chat',
+		closeChat: 'Close chat',
+		goBack: 'Go back',
+		messageInput: 'Message input',
+		sendMessage: 'Send message',
+		welcomeMessage: 'Welcome message',
+		closeWelcomeMessage: 'Close welcome message',
 		inputPlaceholder: 'Type your message...',
 		predefinedQuestionsTitle: 'What would you like to know?',
 		sendFailure: 'Sorry, I could not answer. Please try again.',
@@ -3449,6 +3484,13 @@ const UI_STRINGS = {
 		teamName: 'Team'
 	},
 	es: {
+		openChat: 'Abrir chat',
+		closeChat: 'Cerrar chat',
+		goBack: 'Volver',
+		messageInput: 'Entrada de mensaje',
+		sendMessage: 'Enviar mensaje',
+		welcomeMessage: 'Mensaje de bienvenida',
+		closeWelcomeMessage: 'Cerrar mensaje de bienvenida',
 		inputPlaceholder: 'Escribe tu mensaje...',
 		predefinedQuestionsTitle: '¿Qué te gustaría saber?',
 		sendFailure: 'Lo siento, no pude responder. Inténtalo de nuevo.',
@@ -3757,12 +3799,12 @@ const callConvex = async (convexUrl, kind, path, wireArgs, keepalive = false) =>
 const sortMessages = messages => [...messages].sort((left, right) =>
 	left.createdAt - right.createdAt || String(left.id).localeCompare(String(right.id)));
 
-const createBrowserHandoff = (chatbotId, bootstrap, onProjection) => {
+const createBrowserHandoff = (chatbotId, bootstrap, onProjection, fresh = false) => {
 	if (!bootstrap?.convexUrl || !bootstrap.surfaceKey || !bootstrap.surfaceProof) return null
 	const storageKey = identityKey(chatbotId);
 	let identity;
 	try {
-		const stored = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null');
+		const stored = fresh ? null : JSON.parse(window.sessionStorage.getItem(storageKey) || 'null');
 		identity = stored?.sessionId && stored?.capability && stored.surfaceKey === bootstrap.surfaceKey
 			? { sessionId: stored.sessionId, capability: stored.capability }
 			: randomIdentity();
@@ -3851,6 +3893,14 @@ const createBrowserHandoff = (chatbotId, bootstrap, onProjection) => {
 			if (active) onProjection({ offline: true, identity, messages: [] });
 		}
 	}, 15000);
+	const stop = () => {
+		if (!active) return
+		active = false;
+		window.clearInterval(timer);
+		document.removeEventListener('visibilitychange', onVisibility);
+		window.removeEventListener('pagehide', release);
+		void release();
+	};
 	return {
 		identity: { sessionId: identity.sessionId },
 		recordVisitorMessage: content => {
@@ -3872,14 +3922,11 @@ const createBrowserHandoff = (chatbotId, bootstrap, onProjection) => {
 				acknowledging.delete(messageId);
 			}
 		},
-		stop: () => {
-			if (!active) return
-			active = false;
-			window.clearInterval(timer);
-			document.removeEventListener('visibilitychange', onVisibility);
-			window.removeEventListener('pagehide', release);
-			void release();
-		}
+		restart: () => {
+			stop();
+			return createBrowserHandoff(chatbotId, bootstrap, onProjection, true)
+		},
+		stop
 	}
 };
 
@@ -3893,6 +3940,8 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
     const [isOpen, setIsOpen] = react.useState(initialOpen);
     const [messages, setMessages] = react.useState([]);
     const [isLoading, setIsLoading] = react.useState(false);
+    const [replyStarted, setReplyStarted] = react.useState(false);
+    const activeReplyRef = react.useRef(null);
     const [sessionId, setSessionId] = react.useState(() => generateSessionId());
     const handoffRef = react.useRef(null);
     const pendingHandoffIdsRef = react.useRef([]);
@@ -3916,16 +3965,27 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
         const handoff = createBrowserHandoff(config.id, config.bootstrap, projection => {
             if (projection.offline)
                 return;
+            const paused = projection.control === 'requested' || projection.control === 'human';
+            if (paused)
+                activeReplyRef.current?.abort();
+            else if (activeReplyRef.current)
+                return;
             setSessionId(projection.identity.sessionId);
             pendingHandoffIdsRef.current = projection.pendingProjectionIds || [];
             const projectedMessages = projection.messages.map(message => ({ id: message.id, content: message.content, sender: message.role === 'user' ? 'user' : 'bot', timestamp: new Date(message.createdAt).toISOString(), isHuman: message.sentByHuman }));
+            // An empty agent projection does not mean the client-only greeting is gone.
+            if (projection.control === 'agent' && projectedMessages.length === 0)
+                return;
             setMessages(projection.control === 'requested' || projection.control === 'human'
                 ? [...projectedMessages, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]
                 : projectedMessages);
         });
         handoffRef.current = handoff;
+        if (handoff)
+            setSessionId(handoff.identity.sessionId);
         return () => {
-            handoff?.stop();
+            activeReplyRef.current?.abort();
+            handoffRef.current?.stop();
             handoffRef.current = null;
         };
     }, [config?.bootstrap, config?.id]);
@@ -4247,11 +4307,13 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
     }, [isCollectingUserInfo, messages]);
     const sendUserMessage = react.useCallback(async (rawMessageText, options = {}) => {
         const messageText = typeof rawMessageText === 'string' ? rawMessageText.trim() : '';
-        if (!messageText) {
+        if (!messageText || activeReplyRef.current) {
             return;
         }
         const { hidePredefined = true } = options;
         const timestamp = Date.now();
+        const controller = new AbortController();
+        activeReplyRef.current = controller;
         const userMessage = {
             id: timestamp,
             content: messageText,
@@ -4265,18 +4327,30 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
         }
         try {
             setIsLoading(true);
-            const response = await sendMessageForWidget(embedId, sessionId, messageText);
+            setReplyStarted(false);
+            const showReply = (content, isStreaming) => {
+                if (controller.signal.aborted)
+                    return;
+                setReplyStarted(true);
+                const reply = { id: timestamp + 1, content, sender: 'bot', timestamp: new Date(timestamp).toISOString(), isStreaming };
+                setMessages(prev => prev.some(message => message.id === reply.id)
+                    ? prev.map(message => message.id === reply.id ? reply : message)
+                    : [...prev, reply]);
+            };
+            const response = await sendMessageForWidget(embedId, sessionId, messageText, {
+                signal: controller.signal,
+                onText: text => showReply(text, true)
+            });
+            if (controller.signal.aborted)
+                return;
             if (response.status === 'waiting') {
-                setMessages(prev => prev.some(message => message.isWaiting) ? prev : [...prev, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]);
+                setMessages(prev => {
+                    const visible = prev.filter(message => message.id !== timestamp + 1);
+                    return visible.some(message => message.isWaiting) ? visible : [...visible, { id: 'handoff-waiting', content: strings.handoffWaiting, sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }];
+                });
                 return;
             }
-            const botMessage = {
-                id: timestamp + 1,
-                content: response.text,
-                sender: 'bot',
-                timestamp: new Date().toISOString()
-            };
-            setMessages(prev => [...prev, botMessage]);
+            showReply(response.text, false);
             if (config?.collectUserInfo?.enabled && !userInfoCollected && !isCollectingUserInfo) {
                 setPendingMessage(messageText);
                 setIsCollectingUserInfo(true);
@@ -4291,6 +4365,8 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             }
         }
         catch {
+            if (controller.signal.aborted)
+                return;
             console.error('AndyChat: Message request failed.');
             const errorMessage = {
                 id: timestamp + 3,
@@ -4299,10 +4375,14 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                 timestamp: new Date().toISOString(),
                 isError: true
             };
-            setMessages(prev => [...prev, errorMessage]);
+            setMessages(prev => [...prev.filter(message => message.id !== timestamp + 1), errorMessage]);
         }
         finally {
-            setIsLoading(false);
+            if (activeReplyRef.current === controller) {
+                activeReplyRef.current = null;
+                setIsLoading(false);
+                setReplyStarted(false);
+            }
         }
     }, [config, embedId, sessionId, userInfoCollected, isCollectingUserInfo]);
     const handleSendMessage = react.useCallback((messageText) => {
@@ -4401,7 +4481,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             bubble = document.createElement('button');
             bubble.type = 'button';
             bubble.className = 'andy-chat-bubble';
-            bubble.setAttribute('aria-label', 'Open chat');
+            bubble.setAttribute('aria-label', strings.openChat);
             const tooltipHTML = tooltip
                 ? `<span class="andy-chat-bubble__tooltip" role="tooltip">${tooltip}</span>`
                 : '';
@@ -4413,6 +4493,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
         const displayLabel = bubbleLabel || config?.bubbleLabel || (isPillStyle ? getDefaultBubbleLabel(uiLang) : null);
         const bubbleLogoUrl = config?.logoUrl || CHAT_BUBBLE_DEFAULT_ICON_URL;
         if (bubble) {
+            bubble.setAttribute('aria-label', isOpen ? strings.closeChat : strings.openChat);
             bubble.className = 'andy-chat-bubble';
             if (isPillStyle) {
                 bubble.classList.add('andy-chat-bubble--pill');
@@ -4455,7 +4536,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             }
         }
     }, [shadowReady, config, isOpen, tooltip, bubbleLabel]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, id: 'andy-chatbot-container', children: portalRef.current && shadowReady && config && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: `andy-chat-window ${isOpen ? 'andy-chat-window--open' : ''}`, children: [jsxRuntime.jsxs("header", { className: 'andy-header', children: [jsxRuntime.jsx("button", { type: 'button', className: 'andy-header__back', id: 'andy-back-button', "aria-label": 'Go back', onClick: () => setIsOpen(false), children: jsxRuntime.jsx("svg", { className: 'andy-header__back-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsxRuntime.jsx("path", { d: 'M15 18l-6-6 6-6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) }), jsxRuntime.jsxs("div", { className: 'andy-header__bot-info', children: [jsxRuntime.jsx("div", { className: 'andy-header__avatar', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-header__avatar-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-header__avatar-icon andy-header__avatar-icon--default' })) }), jsxRuntime.jsxs("div", { className: 'andy-header__text', children: [jsxRuntime.jsx("h1", { className: 'andy-header__name', children: config?.name || 'Andy bot' }), config?.headline && (jsxRuntime.jsx("p", { className: 'andy-header__subtitle', title: config.headline, children: config.headline }))] })] }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-header__close', id: 'andy-close-button', "aria-label": 'Close chat', onClick: () => setIsOpen(false), children: jsxRuntime.jsx("svg", { className: 'andy-header__close-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsxRuntime.jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__messages', id: 'andy-messages', ref: messagesContainerRef, children: [config?.description && (jsxRuntime.jsx("div", { className: 'andy-chat-subtitle', children: jsxRuntime.jsx("p", { className: 'andy-chat-subtitle__text', children: config.description }) })), messages.map(message => {
+    return (jsxRuntime.jsx("div", { ref: containerRef, id: 'andy-chatbot-container', children: portalRef.current && shadowReady && config && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: `andy-chat-window ${isOpen ? 'andy-chat-window--open' : ''}`, children: [jsxRuntime.jsxs("header", { className: 'andy-header', children: [jsxRuntime.jsx("button", { type: 'button', className: 'andy-header__back', id: 'andy-back-button', "aria-label": strings.goBack, onClick: () => setIsOpen(false), children: jsxRuntime.jsx("svg", { className: 'andy-header__back-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsxRuntime.jsx("path", { d: 'M15 18l-6-6 6-6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) }), jsxRuntime.jsxs("div", { className: 'andy-header__bot-info', children: [jsxRuntime.jsx("div", { className: 'andy-header__avatar', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-header__avatar-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-header__avatar-icon andy-header__avatar-icon--default' })) }), jsxRuntime.jsxs("div", { className: 'andy-header__text', children: [jsxRuntime.jsx("h1", { className: 'andy-header__name', children: config?.name || 'Andy bot' }), config?.headline && (jsxRuntime.jsx("p", { className: 'andy-header__subtitle', title: config.headline, children: config.headline }))] })] }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-header__close', id: 'andy-close-button', "aria-label": strings.closeChat, onClick: () => setIsOpen(false), children: jsxRuntime.jsx("svg", { className: 'andy-header__close-icon', width: '20', height: '20', viewBox: '0 0 24 24', fill: 'none', children: jsxRuntime.jsx("path", { d: 'M18 6L6 18M6 6l12 12', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__messages', id: 'andy-messages', ref: messagesContainerRef, children: [config?.description && (jsxRuntime.jsx("div", { className: 'andy-chat-subtitle', children: jsxRuntime.jsx("p", { className: 'andy-chat-subtitle__text', children: config.description }) })), messages.map(message => {
                                     if (message.isForm) {
                                         return (jsxRuntime.jsxs("div", { className: 'andy-message-container andy-message-container--form', children: [jsxRuntime.jsx("div", { className: 'andy-avatar', children: jsxRuntime.jsx("svg", { className: 'andy-avatar__icon', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z', fill: 'currentColor' }) }) }), jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--form', children: jsxRuntime.jsx("div", { className: 'andy-user-info-form', children: jsxRuntime.jsxs("div", { className: 'andy-user-info-form__content', children: [jsxRuntime.jsx("h3", { className: 'andy-user-info-form__title', children: config?.collectUserInfo?.message ||
                                                                         'Please provide your information to continue:' }), jsxRuntime.jsxs("form", { className: 'andy-user-info-form__form', id: 'andy-user-info-form', children: [jsxRuntime.jsxs("div", { className: 'andy-form-group', children: [jsxRuntime.jsx("label", { htmlFor: 'andy-user-name', className: 'andy-form-group__label', children: "Name" }), jsxRuntime.jsx("input", { type: 'text', id: 'andy-user-name', className: 'andy-form-group__input', placeholder: 'Your Name', required: true })] }), jsxRuntime.jsxs("div", { className: 'andy-form-group', children: [jsxRuntime.jsx("label", { htmlFor: 'andy-user-email', className: 'andy-form-group__label', children: "Email" }), jsxRuntime.jsx("input", { type: 'email', id: 'andy-user-email', className: 'andy-form-group__input', placeholder: 'Your Email', required: true })] }), jsxRuntime.jsx("button", { type: 'submit', className: 'andy-button andy-button--primary andy-user-info-form__submit', children: "Submit" })] })] }) }) })] }, message.id));
@@ -4463,25 +4544,31 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                                     if (message.isLoading) {
                                         return (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--loading', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }, message.id));
                                     }
-                                    return (jsxRuntime.jsxs("div", { className: `andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`, children: [message.sender === 'bot' && (jsxRuntime.jsxs("div", { className: `andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: message.isHuman ? strings.teamName : config?.name || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsxRuntime.jsx("div", { className: 'andy-message andy-message--user', children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: message.content }) }) }))] }, message.id));
-                                }), isLoading && (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__bottom', children: [activeQuestions &&
+                                    return (jsxRuntime.jsxs("div", { className: `andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`, children: [message.sender === 'bot' && (jsxRuntime.jsxs("div", { className: `andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsxRuntime.jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsxRuntime.jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: message.isHuman ? strings.teamName : config?.name || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: 'andy-message__content', children: message.isStreaming ? jsxRuntime.jsx("div", { className: 'andy-message__stream', children: message.content }) : jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsxRuntime.jsx("div", { className: 'andy-message andy-message--user', children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: message.content }) }) }))] }, message.id));
+                                }), isLoading && !replyStarted && (jsxRuntime.jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsxRuntime.jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxRuntime.jsxs("div", { className: 'andy-typing-indicator', children: [jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' }), jsxRuntime.jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxRuntime.jsxs("div", { className: 'andy-chat-window__bottom', children: [activeQuestions &&
                                     activeQuestions.length > 0 &&
-                                    showPredefinedQuestions && (jsxRuntime.jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsxRuntime.jsx("div", { className: 'andy-predefined-questions__header', children: jsxRuntime.jsx("p", { className: 'andy-predefined-questions__title', children: strings.predefinedQuestionsTitle }) }), jsxRuntime.jsx("div", { className: 'andy-predefined-questions__list', children: activeQuestions.map((q, index) => (jsxRuntime.jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsxRuntime.jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsxRuntime.jsx("div", { className: 'andy-chat-window__input', children: jsxRuntime.jsx("div", { className: 'andy-input-container', children: jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { type: 'text', className: 'andy-input__field', id: 'andy-message-input', placeholder: config ? strings.inputPlaceholder : '...', "aria-label": 'Message input', onKeyDown: e => {
+                                    showPredefinedQuestions && (jsxRuntime.jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsxRuntime.jsx("div", { className: 'andy-predefined-questions__header', children: jsxRuntime.jsx("p", { className: 'andy-predefined-questions__title', children: strings.predefinedQuestionsTitle }) }), jsxRuntime.jsx("div", { className: 'andy-predefined-questions__list', children: activeQuestions.map((q, index) => (jsxRuntime.jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsxRuntime.jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsxRuntime.jsx("div", { className: 'andy-chat-window__input', children: jsxRuntime.jsx("div", { className: 'andy-input-container', children: jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { type: 'text', className: 'andy-input__field', id: 'andy-message-input', placeholder: config ? strings.inputPlaceholder : '...', "aria-label": strings.messageInput, onKeyDown: e => {
+                                                        if (e.key === 'Enter' && activeReplyRef.current) {
+                                                            e.preventDefault();
+                                                            return;
+                                                        }
                                                         if (e.key === 'Enter' && e.target.value.trim()) {
                                                             handleSendMessage(e.target.value);
                                                             e.target.value = '';
                                                         }
-                                                    }, disabled: isCollectingUserInfo || !config }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-input__button', id: 'andy-send-button', "aria-label": 'Send message', onClick: () => {
+                                                    }, disabled: isCollectingUserInfo || !config }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-input__button', id: 'andy-send-button', "aria-label": strings.sendMessage, onClick: () => {
+                                                        if (activeReplyRef.current)
+                                                            return;
                                                         const input = shadowRef.current?.getElementById('andy-message-input');
                                                         if (input && input.value.trim()) {
                                                             handleSendMessage(input.value);
                                                             input.value = '';
                                                         }
-                                                    }, disabled: isCollectingUserInfo || !config, children: jsxRuntime.jsx("svg", { className: 'andy-input__button-icon', width: '18', height: '18', viewBox: '0 0 24 24', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' }) }) })] }) }) }), config?.showBranding !== false && (jsxRuntime.jsx("footer", { className: 'andy-chat-window__footer', children: jsxRuntime.jsx("a", { href: getFooterUrl(), target: '_blank', rel: 'noopener noreferrer', className: 'andy-chat-window__footer-link', children: jsxRuntime.jsx("span", { className: 'andy-chat-window__footer-text', children: FOOTER_TEXT }) }) }))] })] }), portalRef.current), showWelcomePopup &&
+                                                    }, disabled: isCollectingUserInfo || isLoading || !config, children: jsxRuntime.jsx("svg", { className: 'andy-input__button-icon', width: '18', height: '18', viewBox: '0 0 24 24', fill: 'currentColor', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' }) }) })] }) }) }), config?.showBranding !== false && (jsxRuntime.jsx("footer", { className: 'andy-chat-window__footer', children: jsxRuntime.jsx("a", { href: getFooterUrl(), target: '_blank', rel: 'noopener noreferrer', className: 'andy-chat-window__footer-link', children: jsxRuntime.jsx("span", { className: 'andy-chat-window__footer-text', children: FOOTER_TEXT }) }) }))] })] }), portalRef.current), showWelcomePopup &&
                     !isOpen &&
-                    ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: `andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`, style: { display: 'block' }, role: 'dialog', "aria-label": 'Welcome message', children: [jsxRuntime.jsxs("div", { className: 'andy-welcome-popup__content', children: [jsxRuntime.jsx("div", { className: 'andy-welcome-popup__message', children: config?.showWelcomePopup?.message ||
+                    ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: `andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`, style: { display: 'block' }, role: 'dialog', "aria-label": strings.welcomeMessage, children: [jsxRuntime.jsxs("div", { className: 'andy-welcome-popup__content', children: [jsxRuntime.jsx("div", { className: 'andy-welcome-popup__message', children: config?.showWelcomePopup?.message ||
                                             config?.welcomeMessage ||
-                                            'Welcome! How can I help you today?' }), jsxRuntime.jsx("button", { type: 'button', className: 'andy-welcome-popup__close', "aria-label": 'Close welcome message', 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)] })) }));
+                                            '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 { SESSION_STORAGE_KEY, FORM_DISPLAY_DELAY_MS, PERSIST_SESSION } = CONFIG;
@@ -4498,6 +4585,11 @@ const useAndyChat = (embedId) => {
     const [showingWelcomePopup, setShowingWelcomePopup] = react.useState(false);
     const [showingUserInfoForm, setShowingUserInfoForm] = react.useState(false);
     const [welcomePopupShown, setWelcomePopupShown] = react.useState(false);
+    const activeReplyRef = react.useRef(null);
+    react.useEffect(() => () => {
+        activeReplyRef.current?.abort();
+        activeReplyRef.current = null;
+    }, [embedId]);
     const welcomeTimeoutRef = react.useRef(null);
     const userInfoTimeoutRef = react.useRef(null);
     const initializeChatbot = react.useCallback(async () => {
@@ -4569,9 +4661,11 @@ const useAndyChat = (embedId) => {
         });
     }, [config, welcomePopupShown, userInfoCollected]);
     const sendMessage = react.useCallback(async (messageText) => {
-        if (!messageText.trim() || !config || !sessionId) {
+        if (!messageText.trim() || !config || !sessionId || activeReplyRef.current) {
             return;
         }
+        const controller = new AbortController();
+        activeReplyRef.current = controller;
         const userMessage = {
             id: Date.now(),
             content: messageText,
@@ -4579,20 +4673,29 @@ const useAndyChat = (embedId) => {
             timestamp: new Date().toISOString()
         };
         setMessages(prev => [...prev, userMessage]);
+        const replyId = Date.now() + 1;
+        const showReply = (content, isStreaming) => {
+            if (controller.signal.aborted)
+                return;
+            const reply = { id: replyId, content, sender: 'bot', timestamp: new Date().toISOString(), isStreaming };
+            setMessages(prev => prev.some(message => message.id === replyId)
+                ? prev.map(message => message.id === replyId ? reply : message)
+                : [...prev, reply]);
+        };
         try {
-            const response = await sendMessageForWidget(embedId, sessionId, messageText);
-            if (response.status === 'waiting')
+            const response = await sendMessageForWidget(embedId, sessionId, messageText, { signal: controller.signal, onText: text => showReply(text, true) });
+            if (controller.signal.aborted)
+                return;
+            if (response.status === 'waiting') {
+                setMessages(prev => prev.filter(message => message.id !== replyId));
                 return response;
-            const botMessage = {
-                id: Date.now() + 1,
-                content: response.text || 'I apologize, but I encountered an error processing your request.',
-                sender: 'bot',
-                timestamp: new Date().toISOString()
-            };
-            setMessages(prev => [...prev, botMessage]);
+            }
+            showReply(response.text, false);
             return response;
         }
         catch (err) {
+            if (controller.signal.aborted)
+                return;
             console.error('Error sending message:', err);
             const errorMessage = {
                 id: Date.now() + 1,
@@ -4601,9 +4704,13 @@ const useAndyChat = (embedId) => {
                 timestamp: new Date().toISOString(),
                 isError: true
             };
-            setMessages(prev => [...prev, errorMessage]);
+            setMessages(prev => [...prev.filter(message => message.id !== replyId), errorMessage]);
             throw err;
         }
+        finally {
+            if (activeReplyRef.current === controller)
+                activeReplyRef.current = null;
+        }
     }, [embedId, sessionId, config]);
     const showFaq = react.useCallback(() => {
         setShowingFaq(true);
@@ -4642,6 +4749,8 @@ const useAndyChat = (embedId) => {
         }
     }, [embedId, sessionId]);
     const startNewSession = react.useCallback(() => {
+        activeReplyRef.current?.abort();
+        activeReplyRef.current = null;
         const newSessionId = generateSessionId();
         setSessionId(newSessionId);
         {
@@ -4711,9 +4820,11 @@ const MessageComponent = ({ message, botName }) => {
         .filter(Boolean)
         .join(' ');
     const messageClasses = ['andy-message', `andy-message--${message.sender}`].filter(Boolean).join(' ');
-    const messageContent = isBot ? parseMarkdown(message.content) : message.content;
+    const messageContent = isBot && !message.isStreaming ? parseMarkdown(message.content) : message.content;
     if (isBot) {
-        return (jsxRuntime.jsxs("div", { className: containerClasses, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("path", { d: 'M12 6V2H8' }), jsxRuntime.jsx("path", { d: 'm8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z' }), jsxRuntime.jsx("path", { d: 'M2 12h2' }), jsxRuntime.jsx("path", { d: 'M9 11v2' }), jsxRuntime.jsx("path", { d: 'M15 11v2' }), jsxRuntime.jsx("path", { d: 'M20 12h2' })] }) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: botName || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: messageClasses, children: jsxRuntime.jsx("div", { className: 'andy-message__content', dangerouslySetInnerHTML: { __html: messageContent } }) })] }));
+        return (jsxRuntime.jsxs("div", { className: containerClasses, children: [jsxRuntime.jsxs("div", { className: 'andy-bot-header', children: [jsxRuntime.jsx("div", { className: 'andy-bot-header__icon', children: jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("path", { d: 'M12 6V2H8' }), jsxRuntime.jsx("path", { d: 'm8 18-4 4V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Z' }), jsxRuntime.jsx("path", { d: 'M2 12h2' }), jsxRuntime.jsx("path", { d: 'M9 11v2' }), jsxRuntime.jsx("path", { d: 'M15 11v2' }), jsxRuntime.jsx("path", { d: 'M20 12h2' })] }) }), jsxRuntime.jsx("span", { className: 'andy-bot-header__name', children: botName || 'Andy bot' })] }), jsxRuntime.jsx("div", { className: messageClasses, children: message.isStreaming
+                        ? jsxRuntime.jsx("div", { className: 'andy-message__content andy-message__stream', children: message.content })
+                        : jsxRuntime.jsx("div", { className: 'andy-message__content', dangerouslySetInnerHTML: { __html: messageContent } }) })] }));
     }
     return (jsxRuntime.jsx("div", { className: containerClasses, children: jsxRuntime.jsx("div", { className: messageClasses, children: jsxRuntime.jsx("div", { className: 'andy-message__content', children: jsxRuntime.jsx("p", { children: messageContent }) }) }) }));
 };
@@ -4728,7 +4839,7 @@ const MessageList = ({ messages, isLoading, logoUrl, botName }) => {
             });
         }
     }, [messages, isLoading]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [messages.map(message => (jsxRuntime.jsx(MessageComponent, { message: message, logoUrl: logoUrl, botName: botName }, message.id || message.timestamp))), isLoading && jsxRuntime.jsx(TypingIndicator, {}), messages.length === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: 'andy-empty-state', children: [jsxRuntime.jsx("div", { className: 'andy-empty-state__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("div", { className: 'andy-empty-state__text', children: "Start a conversation by typing a message below" })] })), jsxRuntime.jsx("div", { ref: messagesEndRef })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [messages.map(message => (jsxRuntime.jsx(MessageComponent, { message: message, logoUrl: logoUrl, botName: botName }, message.id || message.timestamp))), isLoading && !messages.some(message => message.isStreaming) && jsxRuntime.jsx(TypingIndicator, {}), messages.length === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: 'andy-empty-state', children: [jsxRuntime.jsx("div", { className: 'andy-empty-state__icon', children: "\uD83D\uDCAC" }), jsxRuntime.jsx("div", { className: 'andy-empty-state__text', children: "Start a conversation by typing a message below" })] })), jsxRuntime.jsx("div", { ref: messagesEndRef })] }));
 };
 
 const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type your message here...' }) => {
@@ -4743,14 +4854,15 @@ const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type you
         }
         try {
             setIsSubmitting(true);
-            await onSendMessage(trimmedMessage);
             setMessage('');
+            await onSendMessage(trimmedMessage);
             if (inputRef.current) {
                 inputRef.current.focus();
             }
         }
         catch (error) {
             console.error('Error sending message:', error);
+            setMessage(current => current || trimmedMessage);
         }
         finally {
             setIsSubmitting(false);
@@ -4767,7 +4879,7 @@ const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type you
     };
     const isInputDisabled = disabled || isSubmitting;
     const canSend = message.trim().length > 0 && !isInputDisabled;
-    return (jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { ref: inputRef, type: 'text', value: message, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isInputDisabled, maxLength: 1000, autoComplete: 'off', id: 'andy-input' }), jsxRuntime.jsx("button", { type: 'button', onClick: () => handleSubmit({ preventDefault: () => { } }), disabled: !canSend, id: 'andy-send', children: isSubmitting ? ('...') : (jsxRuntime.jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z', fill: 'white' }) })) })] }));
+    return (jsxRuntime.jsxs("div", { className: 'andy-input', children: [jsxRuntime.jsx("input", { ref: inputRef, type: 'text', value: message, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, maxLength: 1000, autoComplete: 'off', id: 'andy-input' }), jsxRuntime.jsx("button", { type: 'button', onClick: () => handleSubmit({ preventDefault: () => { } }), disabled: !canSend, id: 'andy-send', children: isSubmitting ? ('...') : (jsxRuntime.jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z', fill: 'white' }) })) })] }));
 };
 
 const ChatWindow = ({ config, messages, isLoading, onClose, onSendMessage }) => {