andy-widget-react 2.1.0 → 2.2.0

package/dist/types/types/index.d.ts

@@ -54,6 +54,7 @@ export interface Message {
     isError?: boolean;
     isHuman?: boolean;
     isWaiting?: boolean;
+    isStreaming?: boolean;
 }
 export interface UserInfo {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "andy-widget-react",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Official React Widget for embeddable Andy agents",
 	"type": "module",
 	"main": "dist/index.cjs",
@@ -67,6 +67,6 @@
 		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"dependencies": {
-		"andy-widget-core": "2.1.0"
+		"andy-widget-core": "2.2.0"
 	}
 }

package/src/AndyChat.tsx

@@ -95,6 +95,8 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	const [isOpen, setIsOpen] = useState(initialOpen)
 	const [messages, setMessages] = useState<Message[]>([])
 	const [isLoading, setIsLoading] = useState(false)
+	const [replyStarted, setReplyStarted] = useState(false)
+	const activeReplyRef = useRef<AbortController | null>(null)
 	const [sessionId, setSessionId] = useState(() => generateSessionId())
 	const handoffRef = useRef<ReturnType<typeof createBrowserHandoff>>(null)
 	const pendingHandoffIdsRef = useRef<string[]>([])
@@ -118,16 +120,23 @@ const AndyChat: React.FC<AndyChatProps> = ({
 		handoffRef.current?.stop()
 		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' as const : 'bot' as const, 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])
@@ -485,7 +494,13 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	}, [isCollectingUserInfo, messages])
 
 	const handleNewChat = () => {
-		setSessionId(generateSessionId())
+		activeReplyRef.current?.abort()
+		activeReplyRef.current = null
+		setIsLoading(false)
+		setReplyStarted(false)
+		handoffRef.current = handoffRef.current?.restart() || null
+		pendingHandoffIdsRef.current = []
+		setSessionId(handoffRef.current?.identity.sessionId || generateSessionId())
 
 		if (config?.welcomeMessage) {
 			const greeting = createGreetingMessage(config)
@@ -511,12 +526,14 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	const sendUserMessage = useCallback(
 		async (rawMessageText: string, options: { hidePredefined?: boolean } = {}) => {
 			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: Message = {
 				id: timestamp,
@@ -533,19 +550,29 @@ const AndyChat: React.FC<AndyChatProps> = ({
 
 			try {
 				setIsLoading(true)
-				const response = await sendMessageToAPI(embedId!, sessionId, messageText)
+				setReplyStarted(false)
+				const showReply = (content: string, isStreaming: boolean) => {
+					if (controller.signal.aborted) return
+					setReplyStarted(true)
+					const reply: Message = { 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 sendMessageToAPI(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: Message = {
-					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)
@@ -561,6 +588,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 					setMessages(prev => [...prev, formMessage])
 				}
 			} catch {
+				if (controller.signal.aborted) return
 				console.error('AndyChat: Message request failed.')
 				const errorMessage: Message = {
 					id: timestamp + 3,
@@ -569,9 +597,13 @@ const AndyChat: React.FC<AndyChatProps> = ({
 					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]
@@ -696,7 +728,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			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>`
@@ -713,6 +745,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 		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')
@@ -775,7 +808,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									type='button'
 									className='andy-header__back'
 									id='andy-back-button'
-									aria-label='Go back'
+									aria-label={strings.goBack}
 									onClick={() => setIsOpen(false)}
 								>
 									<svg
@@ -821,7 +854,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									type='button'
 									className='andy-header__close'
 									id='andy-close-button'
-									aria-label='Close chat'
+									aria-label={strings.closeChat}
 									onClick={() => setIsOpen(false)}
 								>
 									<svg
@@ -960,7 +993,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									</span>
 													</div>
 													<div className='andy-message__content'>
-														<div dangerouslySetInnerHTML={{ __html: parseMarkdown(message.content) }} />
+														{message.isStreaming ? <div className='andy-message__stream'>{message.content}</div> : <div dangerouslySetInnerHTML={{ __html: parseMarkdown(message.content) }} />}
 													</div>
 												</div>
 											)}
@@ -975,7 +1008,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									)
 								})}
 
-								{isLoading && (
+								{isLoading && !replyStarted && (
 									<div className='andy-message-container andy-message-container--bot andy-message-container--typing'>
 										<div className='andy-message andy-message--bot andy-message--typing'>
 											<div className='andy-typing-indicator'>
@@ -1021,8 +1054,9 @@ const AndyChat: React.FC<AndyChatProps> = ({
 												className='andy-input__field'
 												id='andy-message-input'
 												placeholder={config ? strings.inputPlaceholder : '...'}
-												aria-label='Message input'
+												aria-label={strings.messageInput}
 												onKeyDown={e => {
+													if (e.key === 'Enter' && activeReplyRef.current) { e.preventDefault(); return }
 													if (e.key === 'Enter' && (e.target as HTMLInputElement).value.trim()) {
 														handleSendMessage((e.target as HTMLInputElement).value)
 														;(e.target as HTMLInputElement).value = ''
@@ -1034,8 +1068,9 @@ const AndyChat: React.FC<AndyChatProps> = ({
 												type='button'
 												className='andy-input__button'
 												id='andy-send-button'
-												aria-label='Send message'
+												aria-label={strings.sendMessage}
 												onClick={() => {
+													if (activeReplyRef.current) return
 													const input = shadowRef.current?.getElementById(
 														'andy-message-input'
 													) as HTMLInputElement | null
@@ -1044,7 +1079,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 														input.value = ''
 													}
 												}}
-												disabled={isCollectingUserInfo || !config}
+												disabled={isCollectingUserInfo || isLoading || !config}
 											>
 												<svg
 													className='andy-input__button-icon'
@@ -1084,7 +1119,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 								className={`andy-welcome-popup ${config?.orientation === 'left' ? 'andychat-popup-left' : ''}`}
 								style={{ display: 'block' }}
 								role='dialog'
-								aria-label='Welcome message'
+								aria-label={strings.welcomeMessage}
 							>
 								<div className='andy-welcome-popup__content'>
 									<div className='andy-welcome-popup__message'>
@@ -1095,7 +1130,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									<button
 										type='button'
 										className='andy-welcome-popup__close'
-										aria-label='Close welcome message'
+										aria-label={strings.closeWelcomeMessage}
 										onClick={() => setShowWelcomePopup(false)}
 									>
 										<svg

package/src/components/MessageInput.tsx

@@ -25,14 +25,15 @@ const MessageInput: React.FC<MessageInputProps> = ({
 
 		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)
 		}
@@ -61,7 +62,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
 				onChange={handleInputChange}
 				onKeyDown={handleKeyDown}
 				placeholder={placeholder}
-				disabled={isInputDisabled}
+				disabled={disabled}
 				maxLength={1000}
 				autoComplete='off'
 				id='andy-input'

package/src/components/MessageList.tsx

@@ -17,7 +17,7 @@ const MessageComponent: React.FC<MessageProps> = ({ message, botName }) => {
 
 	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 (
@@ -46,7 +46,9 @@ const MessageComponent: React.FC<MessageProps> = ({ message, botName }) => {
 					<span className='andy-bot-header__name'>{botName || 'Andy bot'}</span>
 				</div>
 				<div className={messageClasses}>
-					<div className='andy-message__content' dangerouslySetInnerHTML={{ __html: messageContent }} />
+					{message.isStreaming
+						? <div className='andy-message__content andy-message__stream'>{message.content}</div>
+						: <div className='andy-message__content' dangerouslySetInnerHTML={{ __html: messageContent }} />}
 				</div>
 			</div>
 		)
@@ -105,7 +107,7 @@ const MessageList: React.FC<MessageListProps> = ({ messages, isLoading, logoUrl,
 				/>
 			))}
 
-			{isLoading && <TypingIndicator />}
+			{isLoading && !messages.some(message => message.isStreaming) && <TypingIndicator />}
 
 			{messages.length === 0 && !isLoading && (
 				<div className='andy-empty-state'>

package/src/hooks/useAndyChat.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 import {
 	fetchChatbotConfig,
 	generateSessionId,
@@ -31,6 +31,12 @@ export const useAndyChat = (embedId: string): UseAndyChatReturn => {
 	const [showingUserInfoForm, setShowingUserInfoForm] = useState(false)
 	const [welcomePopupShown, setWelcomePopupShown] = useState(false)
 
+	const activeReplyRef = useRef<AbortController | null>(null)
+	useEffect(() => () => {
+		activeReplyRef.current?.abort()
+		activeReplyRef.current = null
+	}, [embedId])
+
 	const welcomeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const userInfoTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -127,10 +133,12 @@ export const useAndyChat = (embedId: string): UseAndyChatReturn => {
 
 	const sendMessage = useCallback(
 		async (messageText: string) => {
-			if (!messageText.trim() || !config || !sessionId) {
+			if (!messageText.trim() || !config || !sessionId || activeReplyRef.current) {
 				return
 			}
 
+			const controller = new AbortController()
+			activeReplyRef.current = controller
 			const userMessage: Message = {
 				id: Date.now(),
 				content: messageText,
@@ -140,21 +148,26 @@ export const useAndyChat = (embedId: string): UseAndyChatReturn => {
 
 			setMessages(prev => [...prev, userMessage])
 
+			const replyId = Date.now() + 1
+			const showReply = (content: string, isStreaming: boolean) => {
+				if (controller.signal.aborted) return
+				const reply: Message = { 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 sendMessageToAPI(embedId, sessionId, messageText)
-				if (response.status === 'waiting') return response
-
-				const botMessage: Message = {
-					id: Date.now() + 1,
-					content: response.text || 'I apologize, but I encountered an error processing your request.',
-					sender: 'bot',
-					timestamp: new Date().toISOString()
+				const response = await sendMessageToAPI(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
 				}
-
-				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: Message = {
@@ -165,8 +178,10 @@ export const useAndyChat = (embedId: string): UseAndyChatReturn => {
 					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]
@@ -220,6 +235,8 @@ export const useAndyChat = (embedId: string): UseAndyChatReturn => {
 	)
 
 	const startNewSession = useCallback(() => {
+		activeReplyRef.current?.abort()
+		activeReplyRef.current = null
 		const newSessionId = generateSessionId()
 		setSessionId(newSessionId)
 

package/src/types/index.ts

@@ -66,6 +66,7 @@ export interface Message {
 	isError?: boolean
 	isHuman?: boolean
 	isWaiting?: boolean
+	isStreaming?: boolean
 }
 
 // User info for form submission