andy-widget-react 2.1.1 → 2.2.1

package/dist/index.esm.js

@@ -758,6 +758,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
@@ -982,60 +1060,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.
@@ -1469,9 +1493,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);
@@ -2129,6 +2150,10 @@ const getCoreStructuralCssString = () => {
 }
 
 /* Message Sub-Components */
+.andy-message__stream {
+  white-space: pre-wrap;
+}
+
 .andy-message__content {
 	line-height: 1.4;
 	margin: 0;
@@ -2851,11 +2876,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;
@@ -2973,17 +2993,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 */
@@ -3475,244 +3490,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
@@ -3767,12 +3544,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();
@@ -3861,6 +3638,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 => {
@@ -3882,14 +3667,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
 	}
 };
 
@@ -3903,6 +3685,8 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
     const [isOpen, setIsOpen] = useState(initialOpen);
     const [messages, setMessages] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [replyStarted, setReplyStarted] = useState(false);
+    const activeReplyRef = useRef(null);
     const [sessionId, setSessionId] = useState(() => generateSessionId());
     const handoffRef = useRef(null);
     const pendingHandoffIdsRef = useRef([]);
@@ -3926,6 +3710,11 @@ 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 }));
@@ -3937,8 +3726,11 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                 : 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]);
@@ -3987,22 +3779,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);
@@ -4260,11 +4037,13 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
     }, [isCollectingUserInfo, messages]);
     const sendUserMessage = 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,
@@ -4278,18 +4057,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);
@@ -4304,6 +4095,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,
@@ -4312,10 +4105,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 = useCallback((messageText) => {
@@ -4477,21 +4274,27 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
                                     if (message.isLoading) {
                                         return (jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--loading', children: jsx("div", { className: 'andy-message andy-message--bot', children: jsxs("div", { className: 'andy-typing-indicator', children: [jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }, message.id));
                                     }
-                                    return (jsxs("div", { className: `andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`, children: [message.sender === 'bot' && (jsxs("div", { className: `andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`, children: [jsxs("div", { className: 'andy-bot-header', children: [jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsx("span", { className: 'andy-bot-header__name', children: message.isHuman ? strings.teamName : config?.name || 'Andy bot' })] }), jsx("div", { className: 'andy-message__content', children: jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsx("div", { className: 'andy-message andy-message--user', children: jsx("div", { className: 'andy-message__content', children: jsx("p", { children: message.content }) }) }))] }, message.id));
-                                }), isLoading && (jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxs("div", { className: 'andy-typing-indicator', children: [jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxs("div", { className: 'andy-chat-window__bottom', children: [activeQuestions &&
+                                    return (jsxs("div", { className: `andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`, children: [message.sender === 'bot' && (jsxs("div", { className: `andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`, children: [jsxs("div", { className: 'andy-bot-header', children: [jsx("div", { className: 'andy-bot-header__icon', children: config?.logoUrl ? (jsx("img", { src: config.logoUrl, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image' })) : (jsx("img", { src: CHAT_BUBBLE_DEFAULT_ICON_URL, alt: 'Bot Avatar', className: 'andy-bot-header__icon-image andy-bot-header__icon-image--default' })) }), jsx("span", { className: 'andy-bot-header__name', children: message.isHuman ? strings.teamName : config?.name || 'Andy bot' })] }), jsx("div", { className: 'andy-message__content', children: message.isStreaming ? jsx("div", { className: 'andy-message__stream', children: message.content }) : jsx("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(message.content) } }) })] })), message.sender === 'user' && (jsx("div", { className: 'andy-message andy-message--user', children: jsx("div", { className: 'andy-message__content', children: jsx("p", { children: message.content }) }) }))] }, message.id));
+                                }), isLoading && !replyStarted && (jsx("div", { className: 'andy-message-container andy-message-container--bot andy-message-container--typing', children: jsx("div", { className: 'andy-message andy-message--bot andy-message--typing', children: jsxs("div", { className: 'andy-typing-indicator', children: [jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' }), jsx("div", { className: 'andy-typing-indicator__dot' })] }) }) }))] }), jsxs("div", { className: 'andy-chat-window__bottom', children: [activeQuestions &&
                                     activeQuestions.length > 0 &&
                                     showPredefinedQuestions && (jsxs("div", { className: 'andy-predefined-questions', id: 'andy-predefined-questions', children: [jsx("div", { className: 'andy-predefined-questions__header', children: jsx("p", { className: 'andy-predefined-questions__title', children: strings.predefinedQuestionsTitle }) }), jsx("div", { className: 'andy-predefined-questions__list', children: activeQuestions.map((q, index) => (jsxs("button", { type: 'button', className: 'andy-predefined-question', "data-question": q.question, disabled: isCollectingUserInfo || isLoading || !config, children: [jsx("span", { className: 'andy-predefined-question__icon', children: "\uD83D\uDCAC" }), jsx("span", { className: 'andy-predefined-question__text', children: q.question })] }, index))) })] })), jsx("div", { className: 'andy-chat-window__input', children: jsx("div", { className: 'andy-input-container', children: jsxs("div", { className: 'andy-input', children: [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 }), 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: 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: jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' }) }) })] }) }) }), config?.showBranding !== false && (jsx("footer", { className: 'andy-chat-window__footer', children: jsx("a", { href: getFooterUrl(), target: '_blank', rel: 'noopener noreferrer', className: 'andy-chat-window__footer-link', children: jsx("span", { className: 'andy-chat-window__footer-text', children: FOOTER_TEXT }) }) }))] })] }), portalRef.current), showWelcomePopup &&
+                                                    }, disabled: isCollectingUserInfo || isLoading || !config, children: 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: jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z' }) }) })] }) }) }), config?.showBranding !== false && (jsx("footer", { className: 'andy-chat-window__footer', children: jsx("a", { href: getFooterUrl(), target: '_blank', rel: 'noopener noreferrer', className: 'andy-chat-window__footer-link', children: jsx("span", { className: 'andy-chat-window__footer-text', children: FOOTER_TEXT }) }) }))] })] }), portalRef.current), showWelcomePopup &&
                     !isOpen &&
                     ReactDOM.createPortal(jsxs("div", { className: `andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`, style: { display: 'block' }, role: 'dialog', "aria-label": strings.welcomeMessage, children: [jsxs("div", { className: 'andy-welcome-popup__content', children: [jsx("div", { className: 'andy-welcome-popup__message', children: config?.showWelcomePopup?.message ||
                                             config?.welcomeMessage ||
@@ -4512,6 +4315,11 @@ const useAndyChat = (embedId) => {
     const [showingWelcomePopup, setShowingWelcomePopup] = useState(false);
     const [showingUserInfoForm, setShowingUserInfoForm] = useState(false);
     const [welcomePopupShown, setWelcomePopupShown] = useState(false);
+    const activeReplyRef = useRef(null);
+    useEffect(() => () => {
+        activeReplyRef.current?.abort();
+        activeReplyRef.current = null;
+    }, [embedId]);
     const welcomeTimeoutRef = useRef(null);
     const userInfoTimeoutRef = useRef(null);
     const initializeChatbot = useCallback(async () => {
@@ -4583,9 +4391,11 @@ const useAndyChat = (embedId) => {
         });
     }, [config, welcomePopupShown, userInfoCollected]);
     const sendMessage = 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,
@@ -4593,20 +4403,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,
@@ -4615,9 +4434,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 = useCallback(() => {
         setShowingFaq(true);
@@ -4656,6 +4479,8 @@ const useAndyChat = (embedId) => {
         }
     }, [embedId, sessionId]);
     const startNewSession = useCallback(() => {
+        activeReplyRef.current?.abort();
+        activeReplyRef.current = null;
         const newSessionId = generateSessionId();
         setSessionId(newSessionId);
         {
@@ -4725,9 +4550,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 (jsxs("div", { className: containerClasses, children: [jsxs("div", { className: 'andy-bot-header', children: [jsx("div", { className: 'andy-bot-header__icon', children: 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: [jsx("path", { d: 'M12 6V2H8' }), 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' }), jsx("path", { d: 'M2 12h2' }), jsx("path", { d: 'M9 11v2' }), jsx("path", { d: 'M15 11v2' }), jsx("path", { d: 'M20 12h2' })] }) }), jsx("span", { className: 'andy-bot-header__name', children: botName || 'Andy bot' })] }), jsx("div", { className: messageClasses, children: jsx("div", { className: 'andy-message__content', dangerouslySetInnerHTML: { __html: messageContent } }) })] }));
+        return (jsxs("div", { className: containerClasses, children: [jsxs("div", { className: 'andy-bot-header', children: [jsx("div", { className: 'andy-bot-header__icon', children: 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: [jsx("path", { d: 'M12 6V2H8' }), 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' }), jsx("path", { d: 'M2 12h2' }), jsx("path", { d: 'M9 11v2' }), jsx("path", { d: 'M15 11v2' }), jsx("path", { d: 'M20 12h2' })] }) }), jsx("span", { className: 'andy-bot-header__name', children: botName || 'Andy bot' })] }), jsx("div", { className: messageClasses, children: message.isStreaming
+                        ? jsx("div", { className: 'andy-message__content andy-message__stream', children: message.content })
+                        : jsx("div", { className: 'andy-message__content', dangerouslySetInnerHTML: { __html: messageContent } }) })] }));
     }
     return (jsx("div", { className: containerClasses, children: jsx("div", { className: messageClasses, children: jsx("div", { className: 'andy-message__content', children: jsx("p", { children: messageContent }) }) }) }));
 };
@@ -4742,7 +4569,7 @@ const MessageList = ({ messages, isLoading, logoUrl, botName }) => {
             });
         }
     }, [messages, isLoading]);
-    return (jsxs(Fragment, { children: [messages.map(message => (jsx(MessageComponent, { message: message, logoUrl: logoUrl, botName: botName }, message.id || message.timestamp))), isLoading && jsx(TypingIndicator, {}), messages.length === 0 && !isLoading && (jsxs("div", { className: 'andy-empty-state', children: [jsx("div", { className: 'andy-empty-state__icon', children: "\uD83D\uDCAC" }), jsx("div", { className: 'andy-empty-state__text', children: "Start a conversation by typing a message below" })] })), jsx("div", { ref: messagesEndRef })] }));
+    return (jsxs(Fragment, { children: [messages.map(message => (jsx(MessageComponent, { message: message, logoUrl: logoUrl, botName: botName }, message.id || message.timestamp))), isLoading && !messages.some(message => message.isStreaming) && jsx(TypingIndicator, {}), messages.length === 0 && !isLoading && (jsxs("div", { className: 'andy-empty-state', children: [jsx("div", { className: 'andy-empty-state__icon', children: "\uD83D\uDCAC" }), jsx("div", { className: 'andy-empty-state__text', children: "Start a conversation by typing a message below" })] })), jsx("div", { ref: messagesEndRef })] }));
 };
 
 const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type your message here...' }) => {
@@ -4757,14 +4584,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);
@@ -4781,7 +4609,7 @@ const MessageInput = ({ onSendMessage, disabled = false, placeholder = 'Type you
     };
     const isInputDisabled = disabled || isSubmitting;
     const canSend = message.trim().length > 0 && !isInputDisabled;
-    return (jsxs("div", { className: 'andy-input', children: [jsx("input", { ref: inputRef, type: 'text', value: message, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isInputDisabled, maxLength: 1000, autoComplete: 'off', id: 'andy-input' }), jsx("button", { type: 'button', onClick: () => handleSubmit({ preventDefault: () => { } }), disabled: !canSend, id: 'andy-send', children: isSubmitting ? ('...') : (jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z', fill: 'white' }) })) })] }));
+    return (jsxs("div", { className: 'andy-input', children: [jsx("input", { ref: inputRef, type: 'text', value: message, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, maxLength: 1000, autoComplete: 'off', id: 'andy-input' }), jsx("button", { type: 'button', onClick: () => handleSubmit({ preventDefault: () => { } }), disabled: !canSend, id: 'andy-send', children: isSubmitting ? ('...') : (jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsx("path", { d: 'M2.01 21L23 12 2.01 3 2 10l15 2-15 2z', fill: 'white' }) })) })] }));
 };
 
 const ChatWindow = ({ config, messages, isLoading, onClose, onSendMessage }) => {