andy-widget-react 2.0.5 → 2.0.6

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

@@ -37,15 +37,23 @@ export interface ChatbotConfig {
     collectUserInfo: CollectUserInfoConfig;
     predefinedQuestions: PredefinedQuestion[];
     faqs: FAQItem[];
+    bootstrap?: {
+        convexUrl: string;
+        surfaceKey: string;
+        surfaceProof: string;
+        surfaceProofExpiresAt: number;
+    };
 }
 export interface Message {
-    id: number;
+    id: string | number;
     content: string;
     sender: 'user' | 'bot';
     timestamp: string;
     isForm?: boolean;
     isLoading?: boolean;
     isError?: boolean;
+    isHuman?: boolean;
+    isWaiting?: boolean;
 }
 export interface UserInfo {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "andy-widget-react",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"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.0.5"
+		"andy-widget-core": "2.0.6"
 	}
 }

package/src/AndyChat.tsx

@@ -5,11 +5,12 @@ import {
 	fetchChatbotConfig,
 	generateSessionId,
 	createGreetingMessage,
-	sendMessage as sendMessageToAPI,
+	sendMessageForWidget as sendMessageToAPI,
 	submitUserInfo,
 	isValidEmbedId,
 	getFullStylesheet,
 	getHostClasses,
+	createBrowserHandoff,
 	parseMarkdown,
 	CHAT_BUBBLE_DEFAULT_ICON,
 	CHAT_BUBBLE_DEFAULT_ICON_URL,
@@ -87,6 +88,8 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	const [messages, setMessages] = useState<Message[]>([])
 	const [isLoading, setIsLoading] = useState(false)
 	const [sessionId, setSessionId] = useState(() => generateSessionId())
+	const handoffRef = useRef<ReturnType<typeof createBrowserHandoff>>(null)
+	const pendingHandoffIdsRef = useRef<string[]>([])
 	const [shadowReady, setShadowReady] = useState(false)
 	const [showPredefinedQuestions, setShowPredefinedQuestions] = useState(true)
 	const [userInfoCollected, setUserInfoCollected] = useState(false)
@@ -102,6 +105,29 @@ const AndyChat: React.FC<AndyChatProps> = ({
 	const welcomePopupShownRef = useRef(false)
 	const welcomePopupTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+	useEffect(() => {
+		if (!config?.bootstrap || !config.id) return
+		handoffRef.current?.stop()
+		const handoff = createBrowserHandoff(config.id, config.bootstrap, projection => {
+			if (projection.offline) 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 }))
+			setMessages(projection.control === 'requested' || projection.control === 'human'
+				? [...projectedMessages, { id: 'handoff-waiting', content: config.defaultLang === 'es' ? 'Un miembro del equipo te responderá pronto.' : 'A team member will reply soon.', sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }]
+				: projectedMessages)
+		})
+		handoffRef.current = handoff
+		return () => {
+			handoff?.stop()
+			handoffRef.current = null
+		}
+	}, [config?.bootstrap, config?.id])
+
+	useEffect(() => {
+		pendingHandoffIdsRef.current.forEach(messageId => void handoffRef.current?.markRendered(messageId))
+	}, [messages])
+
 	// Create shadow DOM container on mount
 	useEffect(() => {
 		if (!containerRef.current) return
@@ -490,6 +516,7 @@ const AndyChat: React.FC<AndyChatProps> = ({
 				sender: 'user',
 				timestamp: new Date().toISOString()
 			}
+			handoffRef.current?.recordVisitorMessage(messageText)
 			setMessages(prev => [...prev, userMessage])
 
 			if (hidePredefined) {
@@ -499,10 +526,14 @@ const AndyChat: React.FC<AndyChatProps> = ({
 			try {
 				setIsLoading(true)
 				const response = await sendMessageToAPI(embedId!, sessionId, messageText)
+				if (response.status === 'waiting') {
+					setMessages(prev => prev.some(message => message.isWaiting) ? prev : [...prev, { id: 'handoff-waiting', content: config?.defaultLang === 'es' ? 'Un miembro del equipo te responderá pronto.' : 'A team member will reply soon.', sender: 'bot', timestamp: new Date().toISOString(), isWaiting: true }])
+					return
+				}
 
 				const botMessage: Message = {
 					id: timestamp + 1,
-					content: response,
+					content: response.text,
 					sender: 'bot',
 					timestamp: new Date().toISOString()
 				}
@@ -897,11 +928,11 @@ const AndyChat: React.FC<AndyChatProps> = ({
 									return (
 										<div
 											key={message.id}
-											className={`andy-message-container andy-message-container--${message.sender}`}
+											className={`andy-message-container andy-message-container--${message.sender} ${message.isWaiting ? 'andy-message-container--waiting' : ''}`}
 										>
 											{message.sender === 'bot' && (
 												<div
-													className={`andy-message andy-message--bot ${message.isError ? 'andy-message--error' : ''}`}
+															className={`andy-message andy-message--bot ${message.isHuman ? 'andy-message--operator' : ''} ${message.isWaiting ? 'andy-message--waiting' : ''} ${message.isError ? 'andy-message--error' : ''}`}
 												>
 													<div className='andy-bot-header'>
 														<div className='andy-bot-header__icon'>
@@ -919,7 +950,9 @@ const AndyChat: React.FC<AndyChatProps> = ({
 																/>
 															)}
 														</div>
-														<span className='andy-bot-header__name'>{config?.name || 'Andy bot'}</span>
+									<span className='andy-bot-header__name'>
+										{message.isHuman ? (config?.defaultLang === 'es' ? 'Equipo' : 'Team') : config?.name || 'Andy bot'}
+									</span>
 													</div>
 													<div className='andy-message__content'>
 														<div dangerouslySetInnerHTML={{ __html: parseMarkdown(message.content) }} />

package/src/hooks/useAndyChat.ts

@@ -3,7 +3,7 @@ import {
 	fetchChatbotConfig,
 	generateSessionId,
 	createGreetingMessage,
-	sendMessage as sendMessageToAPI,
+	sendMessageForWidget as sendMessageToAPI,
 	submitUserInfo as submitUserInfoAPI,
 	initializeConfig,
 	validateChatbotConfig,
@@ -142,10 +142,11 @@ export const useAndyChat = (embedId: string): UseAndyChatReturn => {
 
 			try {
 				const response = await sendMessageToAPI(embedId, sessionId, messageText)
+				if (response.status === 'waiting') return response
 
 				const botMessage: Message = {
 					id: Date.now() + 1,
-					content: response || 'I apologize, but I encountered an error processing your request.',
+					content: response.text || 'I apologize, but I encountered an error processing your request.',
 					sender: 'bot',
 					timestamp: new Date().toISOString()
 				}

package/src/types/index.ts

@@ -47,17 +47,25 @@ export interface ChatbotConfig {
 	collectUserInfo: CollectUserInfoConfig
 	predefinedQuestions: PredefinedQuestion[]
 	faqs: FAQItem[]
+	bootstrap?: {
+		convexUrl: string
+		surfaceKey: string
+		surfaceProof: string
+		surfaceProofExpiresAt: number
+	}
 }
 
 // Message in the chat
 export interface Message {
-	id: number
+	id: string | number
 	content: string
 	sender: 'user' | 'bot'
 	timestamp: string
 	isForm?: boolean
 	isLoading?: boolean
 	isError?: boolean
+	isHuman?: boolean
+	isWaiting?: boolean
 }
 
 // User info for form submission