andy-widget-react 2.0.5 → 2.0.6

package/dist/index.cjs

@@ -873,7 +873,7 @@ const _mapApiDataToChatbotConfig = (apiData, defaultConfig) => {
 		throw new Error('Invalid chatbot configuration response.')
 	}
 
-	const { chatbot, faqs: rawFaqs } = apiData;
+	const { chatbot, faqs: rawFaqs, bootstrap } = apiData;
 	const appearance = chatbot.appearance || {};
 	const behavior = chatbot.behavior || {};
 
@@ -943,6 +943,7 @@ const _mapApiDataToChatbotConfig = (apiData, defaultConfig) => {
 			)
 			.map(faq => ({ question: faq.question.trim(), answer: faq.answer.trim() }));
 	}
+	config.bootstrap = bootstrap;
 
 	return config
 };
@@ -992,7 +993,7 @@ const fetchChatbotConfig = async embedId => {
  * @param {string} message - The user's message
  * @returns {Promise<string>} The bot's response text
  */
-const sendMessage = async (embedId, sessionId, message) => {
+const sendMessageForWidget = async (embedId, sessionId, message) => {
 	try {
 		const apiBaseUrl = getApiBaseUrl();
 		const response = await fetch(`${apiBaseUrl}/messages`, {
@@ -1013,10 +1014,13 @@ const sendMessage = async (embedId, sessionId, message) => {
 			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 data.botResponse
+			return { status: 'agent', text: data.botResponse }
 		} else {
 			// Handle HTTP errors (e.g., 500, 404)
 			let errorData;
@@ -3698,12 +3702,167 @@ const isMobileDevice = () => {
 	return (hasTouch && isSmallScreen) || isMobileUserAgent || isMobileMediaQuery
 };
 
+const identityKey = chatbotId => `andy-browser:${chatbotId}`;
+
+const randomIdentity = () => ({
+	sessionId: window.crypto.randomUUID(),
+	capability: btoa(String.fromCharCode(...(() => {
+		const bytes = new Uint8Array(32);
+		window.crypto.getRandomValues(bytes);
+		return bytes
+	})()))
+});
+
+const callConvex = async (convexUrl, kind, path, wireArgs, keepalive = false) => {
+	const response = await fetch(`${convexUrl}/api/${kind}`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ path, format: 'convex_encoded_json', args: [wireArgs] }),
+		keepalive
+	});
+	if (!response.ok) throw new Error(`Browser handoff ${kind} failed: ${response.status}`)
+	const data = await response.json();
+	if (data.status !== 'success') throw new Error(data.errorMessage || `Browser handoff ${path} failed`)
+	return data.value
+};
+
+const sortMessages = messages => [...messages].sort((left, right) =>
+	left.createdAt - right.createdAt || String(left.id).localeCompare(String(right.id)));
+
+const createBrowserHandoff = (chatbotId, bootstrap, onProjection) => {
+	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');
+		identity = stored?.sessionId && stored?.capability && stored.surfaceKey === bootstrap.surfaceKey
+			? { sessionId: stored.sessionId, capability: stored.capability }
+			: randomIdentity();
+		window.sessionStorage.setItem(storageKey, JSON.stringify({ ...identity, surfaceKey: bootstrap.surfaceKey }));
+	} catch {
+		identity = randomIdentity();
+	}
+	const wireArgs = () => ({ chatbotId, sessionId: identity.sessionId, capability: identity.capability, surfaceProof: bootstrap.surfaceProof });
+	let active = true;
+	let visible = document.visibilityState === 'visible';
+	let cursor;
+	let timer;
+	const pending = new Set();
+	const acknowledged = new Set();
+	const acknowledging = new Set();
+	const localMessages = new Map();
+	const emit = projection => {
+		if (!active) return
+		if (projection?.ok === false && projection.code === 'browser_presence_unavailable') {
+			onProjection({ offline: true, refreshBootstrap: Date.now() >= bootstrap.surfaceProofExpiresAt, identity, messages: [] });
+			return
+		}
+		if (!projection?.ok) return
+		cursor = projection.cursor || cursor;
+		const transcript = projection.transcript || [];
+		const projected = (projection.messages || []).map(message => ({ ...message, role: 'bot', sentByHuman: true }));
+		const byId = new Map(transcript.map(message => [String(message.id), message]));
+		for (const message of localMessages.values()) {
+			const persisted = transcript.some(candidate => candidate.role === 'user' && candidate.content === message.content && Math.abs(candidate.createdAt - message.createdAt) < 30000);
+			if (persisted) localMessages.delete(message.id);
+			else byId.set(message.id, message);
+		}
+		projected.forEach(message => byId.set(String(message.id), message));
+		const messages = sortMessages([...byId.values()]);
+		const pendingIds = projected.map(message => String(message.id)).filter(id => !acknowledged.has(id));
+		pendingIds.forEach(id => pending.add(id));
+		onProjection({ identity, control: projection.control, messages, pendingProjectionIds: pendingIds });
+	};
+	const project = async () => {
+		if (!active || !visible) return
+		if (Date.now() >= bootstrap.surfaceProofExpiresAt) {
+			emit({ ok: false, code: 'browser_presence_unavailable' });
+			return
+		}
+		try {
+			const result = await callConvex(bootstrap.convexUrl, 'query', 'browserHandoff:project', { ...wireArgs(), ...(cursor ? { cursor } : {}) });
+			emit(result);
+		} catch {
+			if (active) onProjection({ offline: true, identity, messages: [] });
+		}
+	};
+	const connect = async () => {
+		if (!active || Date.now() >= bootstrap.surfaceProofExpiresAt) {
+			emit({ ok: false, code: 'browser_presence_unavailable' });
+			return
+		}
+		try {
+			const result = await callConvex(bootstrap.convexUrl, 'mutation', 'browserHandoff:connect', wireArgs());
+			if (result?.ok === false) return emit(result)
+			await project();
+		} catch {
+			if (active) onProjection({ offline: true, identity, messages: [] });
+		}
+	};
+	const release = () => callConvex(bootstrap.convexUrl, 'mutation', 'browserHandoff:release', wireArgs(), true).catch(() => undefined);
+	const onVisibility = () => {
+		visible = document.visibilityState === 'visible';
+		if (visible) void connect();
+		else void release();
+	};
+	document.addEventListener('visibilitychange', onVisibility);
+	window.addEventListener('pagehide', release);
+	void connect();
+	timer = window.setInterval(async () => {
+		if (!active || !visible) return
+		if (Date.now() >= bootstrap.surfaceProofExpiresAt) {
+			window.clearInterval(timer);
+			emit({ ok: false, code: 'browser_presence_unavailable' });
+			return
+		}
+		try {
+			const result = await callConvex(bootstrap.convexUrl, 'mutation', 'browserHandoff:heartbeat', wireArgs());
+			if (result?.ok === false) emit(result);
+			else await project();
+		} catch {
+			if (active) onProjection({ offline: true, identity, messages: [] });
+		}
+	}, 15000);
+	return {
+		identity: { sessionId: identity.sessionId },
+		recordVisitorMessage: content => {
+			const id = `local-${window.crypto.randomUUID()}`;
+			localMessages.set(id, { id, role: 'user', content, createdAt: Date.now(), sentByHuman: false });
+		},
+		markRendered: async messageId => {
+			if (!active || !pending.has(messageId) || acknowledged.has(messageId) || acknowledging.has(messageId)) return
+			acknowledging.add(messageId);
+			try {
+				const result = await callConvex(bootstrap.convexUrl, 'mutation', 'browserHandoff:acknowledge', { ...wireArgs(), messageId });
+				if (result?.ok) {
+					acknowledged.add(messageId);
+					pending.delete(messageId);
+				}
+			} catch {
+				if (active) onProjection({ offline: true, identity, messages: [] });
+			} finally {
+				acknowledging.delete(messageId);
+			}
+		},
+		stop: () => {
+			if (!active) return
+			active = false;
+			window.clearInterval(timer);
+			document.removeEventListener('visibilitychange', onVisibility);
+			window.removeEventListener('pagehide', release);
+			void release();
+		}
+	}
+};
+
 const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessage, bubbleLabel, theme, orientation, brandColor, bubbleStyle, useBrandColor, logoUrl, previewMode = false, initialOpen = false }) => {
     const [config, setConfig] = react.useState(null);
     const [isOpen, setIsOpen] = react.useState(initialOpen);
     const [messages, setMessages] = react.useState([]);
     const [isLoading, setIsLoading] = react.useState(false);
     const [sessionId, setSessionId] = react.useState(() => generateSessionId());
+    const handoffRef = react.useRef(null);
+    const pendingHandoffIdsRef = react.useRef([]);
     const [shadowReady, setShadowReady] = react.useState(false);
     const [showPredefinedQuestions, setShowPredefinedQuestions] = react.useState(true);
     const [userInfoCollected, setUserInfoCollected] = react.useState(false);
@@ -3717,6 +3876,29 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
     const messagesContainerRef = react.useRef(null);
     const welcomePopupShownRef = react.useRef(false);
     const welcomePopupTimeoutRef = react.useRef(null);
+    react.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' : 'bot', 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]);
+    react.useEffect(() => {
+        pendingHandoffIdsRef.current.forEach(messageId => void handoffRef.current?.markRendered(messageId));
+    }, [messages]);
     // Create shadow DOM container on mount
     react.useEffect(() => {
         if (!containerRef.current)
@@ -4043,16 +4225,21 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             sender: 'user',
             timestamp: new Date().toISOString()
         };
+        handoffRef.current?.recordVisitorMessage(messageText);
         setMessages(prev => [...prev, userMessage]);
         if (hidePredefined) {
             setShowPredefinedQuestions(false);
         }
         try {
             setIsLoading(true);
-            const response = await sendMessage(embedId, sessionId, messageText);
+            const response = await sendMessageForWidget(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 = {
                 id: timestamp + 1,
-                content: response,
+                content: response.text,
                 sender: 'bot',
                 timestamp: new Date().toISOString()
             };
@@ -4245,7 +4432,7 @@ 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}`, children: [message.sender === 'bot' && (jsxRuntime.jsxs("div", { className: `andy-message andy-message--bot ${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: 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));
+                                    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 ? (config?.defaultLang === 'es' ? 'Equipo' : 'Team') : 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: [config?.predefinedQuestions &&
                                     config.predefinedQuestions.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: "What would you like to know?" }) }), jsxRuntime.jsx("div", { className: 'andy-predefined-questions__list', children: config.predefinedQuestions.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 ? 'Type your message...' : '...', "aria-label": 'Message input', onKeyDown: e => {
@@ -4350,7 +4537,7 @@ const useAndyChat = (embedId) => {
             return newIsOpen;
         });
     }, [config, welcomePopupShown, userInfoCollected]);
-    const sendMessage$1 = react.useCallback(async (messageText) => {
+    const sendMessage = react.useCallback(async (messageText) => {
         if (!messageText.trim() || !config || !sessionId) {
             return;
         }
@@ -4362,10 +4549,12 @@ const useAndyChat = (embedId) => {
         };
         setMessages(prev => [...prev, userMessage]);
         try {
-            const response = await sendMessage(embedId, sessionId, messageText);
+            const response = await sendMessageForWidget(embedId, sessionId, messageText);
+            if (response.status === 'waiting')
+                return response;
             const botMessage = {
                 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()
             };
@@ -4462,7 +4651,7 @@ const useAndyChat = (embedId) => {
         error,
         initializeChatbot,
         toggleChat,
-        sendMessage: sendMessage$1,
+        sendMessage,
         showFaq,
         hideFaq,
         showWelcomePopup,