@fusioni/client-sdk 1.1.3 → 1.1.6

package/dist/index.js

@@ -4838,35 +4838,6 @@ const Map$1 = ({ lat, lng, zoom = 10, staticMap = true, width = 600, height = 40
     return (jsxRuntime.jsx("div", { className: "fusioni-map-container", children: staticMap ? (jsxRuntime.jsx("div", { className: "fusioni-map-static", children: jsxRuntime.jsx("img", { src: mapUrl, alt: `Map showing location at ${lat}, ${lng}`, width: width, height: height, className: "fusioni-map-image", onError: () => setError('Failed to load map image') }) })) : (jsxRuntime.jsx("div", { className: "fusioni-map-interactive", children: jsxRuntime.jsx("iframe", { src: mapUrl, width: width, height: height, style: { border: 0 }, loading: "lazy", allowFullScreen: true, title: `Map showing location at ${lat}, ${lng}`, className: "fusioni-map-iframe" }) })) }));
 };
 
-const DURATION_MS = 2500;
-const Spotlight = ({ text, className }) => {
-    const rootRef = react.useRef(null);
-    const startRef = react.useRef(0);
-    const frameRef = react.useRef(null);
-    react.useEffect(() => {
-        startRef.current = performance.now();
-        const tick = () => {
-            const elapsed = performance.now() - startRef.current;
-            const period = DURATION_MS * 2;
-            const t = (elapsed % period) / DURATION_MS;
-            const x = t <= 1 ? t * 100 : (2 - t) * 100;
-            const el = rootRef.current;
-            if (el) {
-                el.style.setProperty('--mask-x', `${x}%`);
-                el.style.setProperty('--mask-y', '50%');
-            }
-            frameRef.current = requestAnimationFrame(tick);
-        };
-        frameRef.current = requestAnimationFrame(tick);
-        return () => {
-            if (frameRef.current != null) {
-                cancelAnimationFrame(frameRef.current);
-            }
-        };
-    }, []);
-    return (jsxRuntime.jsx("div", { ref: rootRef, className: className ? `fusioni-spotlight ${className}` : 'fusioni-spotlight', children: jsxRuntime.jsxs("div", { className: "fusioni-spotlight-title", children: [jsxRuntime.jsx("span", { className: "fusioni-spotlight-text-base", children: text }), jsxRuntime.jsx("span", { className: "fusioni-spotlight-text-overlay", "aria-hidden": "true", children: text })] }) }));
-};
-
 const GALLERY_STRIP_MAX_ROWS = 2;
 /**
  * Horizontal slide of pages, each a grid with `columns` × {@link GALLERY_STRIP_MAX_ROWS} cells.
@@ -4971,7 +4942,7 @@ const DocumentVideoGrid = ({ videos, attachedVideosLabel, }) => {
 // Module-level Set to track which message IDs have been animated
 // This persists across component unmounts/remounts (e.g., when chat closes and reopens)
 const animatedMessageIds = new Set();
-const Message = ({ message, showThoughts = false, fontSize = 'text-sm', onDelete, onConfirmation, enableButtons = true, streamMessages = [], apiBaseUrl, apiKey, agencyId, currentLanguage = 'en', onOpenGallery }) => {
+const Message = ({ message, showThoughts = false, fontSize = 'text-sm', onDelete, onConfirmation, enableButtons = true, apiBaseUrl, apiKey, agencyId, currentLanguage = 'en', onOpenGallery }) => {
     const { t } = useTranslation(currentLanguage);
     const [displayedContent, setDisplayedContent] = react.useState('');
     const typingIntervalRef = react.useRef(null);
@@ -5204,14 +5175,53 @@ const Message = ({ message, showThoughts = false, fontSize = 'text-sm', onDelete
         ? displayedContent
         : message.content;
     const extractedUrls = react.useMemo(() => extractUrlsFromContent(message.content), [message.content]);
-    return (jsxRuntime.jsxs("div", { className: getMessageClasses(), children: [message.content && !message.loading && (jsxRuntime.jsx("div", { className: "fusioni-message-text", dangerouslySetInnerHTML: {
+    const hasVisibleWhileLoading = Boolean(message.extra_data) ||
+        (showThoughts && Boolean(message.thoughts)) ||
+        Boolean(message.has_error);
+    const collapseEmptyLoadingBubble = Boolean(message.loading) && !hasVisibleWhileLoading;
+    return (jsxRuntime.jsxs("div", { className: `${getMessageClasses()}${collapseEmptyLoadingBubble ? ' fusioni-message-bubble--loading-empty' : ''}`.trim(), children: [message.content && !message.loading && (jsxRuntime.jsx("div", { className: "fusioni-message-text", dangerouslySetInnerHTML: {
                     __html: enhanceMessageContent(contentToDisplay)
-                } })), message.loading && (jsxRuntime.jsx("div", { className: "fusioni-stream-messages", children: (streamMessages.length > 0 ? streamMessages : [t('chat.messages.loading')]).map((line, index) => (jsxRuntime.jsxs("div", { className: "fusioni-stream-message-item", children: [jsxRuntime.jsx("div", { className: "fusioni-stream-message-logo-wrap", children: jsxRuntime.jsx("div", { className: "fusioni-stream-message-logo-frame", children: jsxRuntime.jsx("img", { className: "fusioni-stream-message-logo-img", src: FUSIONI_LOGO_BASE64, alt: "", width: 32, height: 32 }) }) }), jsxRuntime.jsx(Spotlight, { className: "fusioni-stream-message-spotlight", text: line })] }, streamMessages.length > 0 ? `${index}-${line}` : 'loading-placeholder'))) })), !message.loading && extractedUrls.length > 0 && message.role !== 'user' && (jsxRuntime.jsx("div", { className: "fusioni-message-url-previews", children: extractedUrls.map((url) => (jsxRuntime.jsx(UrlPreview, { url: url, agencyId: agencyId, showCloseButton: false, compact: true, autoFetch: true, apiBaseUrl: apiBaseUrl, apiKey: apiKey }, url))) })), message.extra_data && (jsxRuntime.jsxs("div", { className: "fusioni-message-extra m2", children: [message.extra_data.document_images &&
+                } })), !message.loading && extractedUrls.length > 0 && message.role !== 'user' && (jsxRuntime.jsx("div", { className: "fusioni-message-url-previews", children: extractedUrls.map((url) => (jsxRuntime.jsx(UrlPreview, { url: url, agencyId: agencyId, showCloseButton: false, compact: true, autoFetch: true, apiBaseUrl: apiBaseUrl, apiKey: apiKey }, url))) })), message.extra_data && (jsxRuntime.jsxs("div", { className: "fusioni-message-extra m2", children: [message.extra_data.document_images &&
                         message.extra_data.document_images.length > 0 &&
                         onOpenGallery && (jsxRuntime.jsx(DocumentImageGrid, { images: message.extra_data.document_images, onOpenGallery: onOpenGallery, attachedImagesLabel: t('chat.attachedImages') })), message.extra_data.document_videos &&
                         message.extra_data.document_videos.length > 0 && (jsxRuntime.jsx(DocumentVideoGrid, { videos: message.extra_data.document_videos, attachedVideosLabel: t('chat.attachedVideos') })), message.extra_data.image && renderImage(message.extra_data.image), message.extra_data.image_ref && renderImage(message.extra_data.image_ref), message.extra_data.audio_ref && renderAudio(message.extra_data.audio_ref, message.extra_data.duration), message.extra_data.coordinates && renderMap(message.extra_data.coordinates), message.extra_data.map && (jsxRuntime.jsx("div", { className: "fusioni-message-map", children: jsxRuntime.jsx(Map$1, { lat: message.extra_data.map.lat, lng: message.extra_data.map.lng, zoom: message.extra_data.map.zoom, staticMap: true, width: 600, height: 400, apiBaseUrl: apiBaseUrl, apiKey: apiKey, agencyId: agencyId }) }))] })), message.extra_data?.widget === 'Confirmation' && (jsxRuntime.jsxs("div", { className: "fusioni-confirmation-widget", children: [jsxRuntime.jsx("button", { type: "button", disabled: !enableButtons, onClick: () => sendConfirmation('Confirmed', message.extra_data?.key), className: "fusioni-btn fusioni-btn-primary fusioni-btn-confirm", children: t('common.yes') }), jsxRuntime.jsx("button", { type: "button", disabled: !enableButtons, onClick: () => sendConfirmation('NotConfirmed', message.extra_data?.key), className: "fusioni-btn fusioni-btn-secondary fusioni-btn-cancel", children: t('common.no') })] })), showThoughts && message.thoughts && (jsxRuntime.jsx("div", { className: "fusioni-message-thoughts", children: jsxRuntime.jsxs("details", { children: [jsxRuntime.jsx("summary", { children: "AI Thoughts" }), jsxRuntime.jsx("p", { children: message.thoughts })] }) })), message.has_error && (jsxRuntime.jsxs("div", { className: "fusioni-message-error-indicator", children: [jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15", stroke: "currentColor", strokeWidth: "2" }), jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15", stroke: "currentColor", strokeWidth: "2" })] }), jsxRuntime.jsx("span", { children: "Error occurred" })] }))] }));
 };
 
+const DURATION_MS = 2500;
+const Spotlight = ({ text, className }) => {
+    const rootRef = react.useRef(null);
+    const startRef = react.useRef(0);
+    const frameRef = react.useRef(null);
+    react.useEffect(() => {
+        startRef.current = performance.now();
+        const tick = () => {
+            const elapsed = performance.now() - startRef.current;
+            const period = DURATION_MS * 2;
+            const t = (elapsed % period) / DURATION_MS;
+            const x = t <= 1 ? t * 100 : (2 - t) * 100;
+            const el = rootRef.current;
+            if (el) {
+                el.style.setProperty('--mask-x', `${x}%`);
+                el.style.setProperty('--mask-y', '50%');
+            }
+            frameRef.current = requestAnimationFrame(tick);
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (frameRef.current != null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+        };
+    }, []);
+    return (jsxRuntime.jsx("div", { ref: rootRef, className: className ? `fusioni-spotlight ${className}` : 'fusioni-spotlight', children: jsxRuntime.jsxs("div", { className: "fusioni-spotlight-title", children: [jsxRuntime.jsx("span", { className: "fusioni-spotlight-text-base", children: text }), jsxRuntime.jsx("span", { className: "fusioni-spotlight-text-overlay", "aria-hidden": "true", children: text })] }) }));
+};
+
+/** Logo + Spotlight: SSE stream lines, or loading label until first stream event */
+const MessageStreamLoading = ({ streamMessages, loadingLabel, }) => {
+    const lines = streamMessages.length > 0 ? streamMessages : [loadingLabel];
+    return (jsxRuntime.jsx("div", { className: "fusioni-stream-messages", children: lines.map((line, index) => (jsxRuntime.jsxs("div", { className: "fusioni-stream-message-item", children: [jsxRuntime.jsx("div", { className: "fusioni-stream-message-logo-wrap", children: jsxRuntime.jsx("div", { className: "fusioni-stream-message-logo-frame", children: jsxRuntime.jsx("img", { className: "fusioni-stream-message-logo-img", src: FUSIONI_LOGO_BASE64, alt: "", width: 32, height: 32 }) }) }), jsxRuntime.jsx(Spotlight, { className: "fusioni-stream-message-spotlight", text: line })] }, streamMessages.length > 0 ? `${index}-${line}` : 'loading-placeholder'))) }));
+};
+
 /**
  * Full-screen image lightbox: main image + prev/next, keyboard nav,
  * and a two-row thumbnail strip with horizontal pages and dot indicators (fusioni-web parity).
@@ -5326,6 +5336,7 @@ const ImageGallery = ({ images, initialIndex = 0, onClose, theme = 'light', }) =
 };
 
 const MessageList = ({ messages, streamMessages, showThoughts = false, onDeleteMessage, onEditMessage, onConfirmation, enableButtons = true, apiBaseUrl, apiKey, agencyId, currentLanguage = 'en', theme = 'light' }) => {
+    const { t } = useTranslation(currentLanguage);
     const messagesEndRef = react.useRef(null);
     const scrollContainerRef = react.useRef(null);
     const editRef = react.useRef(null);
@@ -5423,12 +5434,12 @@ const MessageList = ({ messages, streamMessages, showThoughts = false, onDeleteM
                                 const isLastMessage = index === messages.length - 1;
                                 const messageKey = message.id ??
                                     `msg-fallback-${index}-${message.role}-${message.created instanceof Date ? message.created.getTime() : 0}`;
-                                return (jsxRuntime.jsx("div", { className: "fusioni-message-wrapper", children: jsxRuntime.jsxs("div", { className: `fusioni-message ${message.role}`, children: [jsxRuntime.jsx("div", { className: "fusioni-message-avatar", children: message.role === 'user' ? (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4", stroke: "currentColor", strokeWidth: "2" })] })) : (jsxRuntime.jsx("img", { src: FUSIONI_LOGO_BASE64, alt: "Fusioni Logo", width: "24", height: "24" })) }), jsxRuntime.jsxs("div", { className: "fusioni-message-content", children: [jsxRuntime.jsx("div", { className: "fusioni-message-body", children: message.role === 'user' && editingMessageId === message.id ? (jsxRuntime.jsx("div", { ref: editRef, className: "fusioni-message-text", contentEditable: true, suppressContentEditableWarning: true, spellCheck: true, onKeyDown: (event) => {
+                                return (jsxRuntime.jsx("div", { className: "fusioni-message-wrapper", children: jsxRuntime.jsxs("div", { className: `fusioni-message ${message.role}`, children: [!(message.role === 'assistant' && message.loading) && (jsxRuntime.jsx("div", { className: "fusioni-message-avatar", children: message.role === 'user' ? (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4", stroke: "currentColor", strokeWidth: "2" })] })) : (jsxRuntime.jsx("img", { src: FUSIONI_LOGO_BASE64, alt: "Fusioni Logo", width: "24", height: "24" })) })), jsxRuntime.jsxs("div", { className: "fusioni-message-content", children: [jsxRuntime.jsx("div", { className: "fusioni-message-body", children: message.role === 'user' && editingMessageId === message.id ? (jsxRuntime.jsx("div", { ref: editRef, className: "fusioni-message-text", contentEditable: true, suppressContentEditableWarning: true, spellCheck: true, onKeyDown: (event) => {
                                                                 if (event.key === 'Escape') {
                                                                     event.preventDefault();
                                                                     cancelEdit();
                                                                 }
-                                                            } })) : (jsxRuntime.jsx(Message, { message: message, showThoughts: showThoughts, onDelete: onDeleteMessage, onConfirmation: onConfirmation, enableButtons: enableButtons && isLastMessage, streamMessages: message.loading ? streamMessages : [], apiBaseUrl: apiBaseUrl, apiKey: apiKey, agencyId: agencyId, currentLanguage: currentLanguage, onOpenGallery: openGallery })) }), jsxRuntime.jsxs("div", { className: "fusioni-message-footer", children: [jsxRuntime.jsx("span", { className: "fusioni-message-time", children: formatDate(message.created) }), message.id && (onDeleteMessage || (message.role === 'user' && onEditMessage)) && (jsxRuntime.jsx("div", { className: "fusioni-message-actions", children: message.role === 'user' && editingMessageId === message.id ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: confirmEdit, className: "fusioni-btn fusioni-btn-icon", title: "Save edit", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsxRuntime.jsx("button", { onClick: cancelEdit, className: "fusioni-btn fusioni-btn-icon", title: "Cancel edit", children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [message.role === 'user' && onEditMessage && (jsxRuntime.jsx("button", { onClick: () => startEdit(message), className: "fusioni-btn fusioni-btn-icon", title: "Edit message", children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M12 20H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M16.5 3.5C16.8978 3.10218 17.4374 2.87868 18 2.87868C18.5626 2.87868 19.1022 3.10218 19.5 3.5C19.8978 3.89782 20.1213 4.43739 20.1213 5C20.1213 5.56261 19.8978 6.10218 19.5 6.5L7 19L3 20L4 16L16.5 3.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })), onDeleteMessage && (jsxRuntime.jsx("button", { onClick: () => onDeleteMessage(message.id), className: "fusioni-btn fusioni-btn-icon", title: "Delete message", children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M3 6H5H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] })) }))] }), showThoughts && message.thoughts && (jsxRuntime.jsx("div", { className: "fusioni-message-thoughts", children: jsxRuntime.jsxs("details", { children: [jsxRuntime.jsx("summary", { children: "Thoughts" }), jsxRuntime.jsx("p", { children: message.thoughts })] }) }))] })] }) }, messageKey));
+                                                            } })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [message.loading && (jsxRuntime.jsx(MessageStreamLoading, { streamMessages: streamMessages, loadingLabel: t('chat.messages.loading') })), !message.loading && (jsxRuntime.jsx(Message, { message: message, showThoughts: showThoughts, onDelete: onDeleteMessage, onConfirmation: onConfirmation, enableButtons: enableButtons && isLastMessage, apiBaseUrl: apiBaseUrl, apiKey: apiKey, agencyId: agencyId, currentLanguage: currentLanguage, onOpenGallery: openGallery }))] })) }), !message.loading && (jsxRuntime.jsxs("div", { className: "fusioni-message-footer", children: [jsxRuntime.jsx("span", { className: "fusioni-message-time", children: formatDate(message.created) }), message.id && (onDeleteMessage || (message.role === 'user' && onEditMessage)) && (jsxRuntime.jsx("div", { className: "fusioni-message-actions", children: message.role === 'user' && editingMessageId === message.id ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: confirmEdit, className: "fusioni-btn fusioni-btn-icon", title: "Save edit", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsxRuntime.jsx("button", { onClick: cancelEdit, className: "fusioni-btn fusioni-btn-icon", title: "Cancel edit", children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [message.role === 'user' && onEditMessage && (jsxRuntime.jsx("button", { onClick: () => startEdit(message), className: "fusioni-btn fusioni-btn-icon", title: "Edit message", children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M12 20H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M16.5 3.5C16.8978 3.10218 17.4374 2.87868 18 2.87868C18.5626 2.87868 19.1022 3.10218 19.5 3.5C19.8978 3.89782 20.1213 4.43739 20.1213 5C20.1213 5.56261 19.8978 6.10218 19.5 6.5L7 19L3 20L4 16L16.5 3.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) })), onDeleteMessage && (jsxRuntime.jsx("button", { onClick: () => onDeleteMessage(message.id), className: "fusioni-btn fusioni-btn-icon", title: "Delete message", children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntime.jsx("path", { d: "M3 6H5H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] })) }))] })), showThoughts && message.thoughts && (jsxRuntime.jsx("div", { className: "fusioni-message-thoughts", children: jsxRuntime.jsxs("details", { children: [jsxRuntime.jsx("summary", { children: "Thoughts" }), jsxRuntime.jsx("p", { children: message.thoughts })] }) }))] })] }) }, messageKey));
                             }) })), jsxRuntime.jsx("div", { ref: messagesEndRef })] }) }), gallerySession &&
                 typeof document !== 'undefined' &&
                 reactDom.createPortal(jsxRuntime.jsx(ImageGallery, { images: gallerySession.images, initialIndex: gallerySession.index, theme: theme, onClose: () => setGallerySession(null) }, gallerySession.key), document.body)] }));
@@ -6012,6 +6023,24 @@ const useTheme = (initialTheme) => {
     };
 };
 
+/** Matches `index.css` mobile breakpoint for chat layout. */
+const MOBILE_MEDIA_QUERY = '(max-width: 768px)';
+function useIsMobileLayout() {
+    const [isMobile, setIsMobile] = react.useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+    });
+    react.useEffect(() => {
+        const mq = window.matchMedia(MOBILE_MEDIA_QUERY);
+        const onChange = () => setIsMobile(mq.matches);
+        onChange();
+        mq.addEventListener('change', onChange);
+        return () => mq.removeEventListener('change', onChange);
+    }, []);
+    return isMobile;
+}
+
 const ChatWidget = ({ config, onMessageSent, onMessageReceived, onConversationCreated, onConversationDeleted, onError }) => {
     const [isOpen, setIsOpen] = react.useState(false);
     const [isLoading, setIsLoading] = react.useState(false);
@@ -6031,6 +6060,7 @@ const ChatWidget = ({ config, onMessageSent, onMessageReceived, onConversationCr
     const { t, currentLanguage, changeLanguage } = useTranslation(mergedConfig?.language || config.language || 'en');
     const { conversations, currentConversation, messages, streamMessages, setCurrentConversation, setStreamMessages, addMessage, updateMessage, removeMessage, removeOptimisticUserMessages, truncateMessagesAt, addConversation, updateConversation, removeConversation, loadConversations, loadMessages, clearMessages } = useChatState(mergedConfig?.agencyId || config.agencyId);
     const { theme, toggleTheme } = useTheme(mergedConfig?.theme || config.theme);
+    const isMobileLayout = useIsMobileLayout();
     // Initialize API client and fetch server configuration
     react.useEffect(() => {
         const initializeAndFetchConfig = async () => {
@@ -6518,7 +6548,7 @@ const ChatWidget = ({ config, onMessageSent, onMessageReceived, onConversationCr
     // Debug: Log the primary color and button variant being applied
     console.log('Primary color being applied:', mergedConfig.primaryColor || '#6366f1');
     console.log('Button variant being applied:', mergedConfig.buttonVariant || 'glass');
-    return (jsxRuntime.jsxs("div", { className: `fusioni-chat-widget ${theme}`, style: { '--primary-color': mergedConfig.primaryColor || '#6366f1' }, children: [jsxRuntime.jsx(FloatingButton, { isOpen: isOpen, onClick: handleToggleChat, position: mergedConfig.position || 'bottom-right', primaryColor: mergedConfig.primaryColor, buttonRef: floatingButtonRef, variant: mergedConfig.buttonVariant || 'glass', shouldDisplay: !hasConfigError }), isOpen && (jsxRuntime.jsx(ChatPanel, { isOpen: isOpen, onClose: () => setIsOpen(false), position: mergedConfig.position || 'bottom-right', isFullscreen: isFullscreen, floatingButtonRef: floatingButtonRef, children: jsxRuntime.jsxs("div", { className: "fusioni-chat-container", children: [mergedConfig.showConversationList !== false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `fusioni-conversation-backdrop ${isConversationListOpen ? 'open' : ''}`, onClick: () => setIsConversationListOpen(false) }), jsxRuntime.jsx(ConversationList, { conversations: conversations, selectedConversationId: currentConversation?.id || undefined, onSelectConversation: handleSelectConversation, onDeleteConversation: handleDeleteConversation, onCreateConversation: handleCreateConversation, isOpen: isConversationListOpen, currentLanguage: currentLanguage })] })), jsxRuntime.jsxs("div", { className: "fusioni-chat-main", children: [mergedConfig.showConversationList !== false && (jsxRuntime.jsxs("div", { className: "fusioni-chat-main-header", children: [jsxRuntime.jsxs("button", { onClick: handleToggleConversationList, className: `fusioni-conversation-toggle ${isConversationListOpen ? 'open' : ''}`, children: [jsxRuntime.jsx("svg", { className: "fusioni-conversation-toggle-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M3 12h18M3 6h18M3 18h18" }) }), t('chat.conversations.title')] }), jsxRuntime.jsxs("div", { className: "fusioni-header-actions", children: [jsxRuntime.jsx("button", { onClick: toggleTheme, className: "fusioni-btn fusioni-btn-icon", title: theme === 'dark' ? t('chat.theme.light') : t('chat.theme.dark'), children: theme === 'dark' ? (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }), jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] })) : (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })) }), jsxRuntime.jsx("button", { onClick: handleToggleFullscreen, className: "fusioni-btn fusioni-btn-icon", title: isFullscreen ? t('chat.fullscreen.exit') : t('chat.fullscreen.enter'), children: isFullscreen ? (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M8 3V5M8 3H5M8 3L3 8M16 3V5M16 3H19M16 3L21 8M8 21V19M8 21H5M8 21L3 16M16 21V19M16 21H19M16 21L21 16" }) })) : (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M8 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V8M21 8V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H16M16 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V16M3 16V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H8" }) })) }), jsxRuntime.jsx(LanguageSwitcher, { currentLanguage: currentLanguage, onLanguageChange: changeLanguage })] })] })), currentConversation ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MessageList, { messages: messages, streamMessages: streamMessages, showThoughts: false, onDeleteMessage: handleDeleteMessage, onEditMessage: handleEditMessage, onConfirmation: handleConfirmation, enableButtons: !isLoading, apiBaseUrl: mergedConfig.apiBaseUrl, apiKey: mergedConfig.accessToken, agencyId: mergedConfig.agencyId, currentLanguage: currentLanguage, theme: theme }), jsxRuntime.jsx(ChatInput, { onSendMessage: handleSendMessage, onFileUpload: handleFileUpload, disabled: isLoading, placeholder: t('chat.input.placeholder'), enableAudioRecording: mergedConfig.enableAudioRecording !== false, enableFileUpload: mergedConfig.enableFileUpload !== false, maxFileSize: mergedConfig.maxFileSize || 10, allowedFileTypes: mergedConfig.allowedFileTypes || ['image/*'], currentLanguage: currentLanguage })] })) : (jsxRuntime.jsx("div", { className: "fusioni-chat-welcome", children: jsxRuntime.jsxs("div", { className: "fusioni-chat-welcome-content", children: [jsxRuntime.jsx("h3", { children: t('chat.welcome.title') }), jsxRuntime.jsx("p", { children: t('chat.welcome.description') }), jsxRuntime.jsx("button", { onClick: handleCreateConversation, disabled: isLoading, className: "fusioni-btn fusioni-btn-primary", children: isLoading ? t('chat.welcome.creating') : t('chat.welcome.startButton') })] }) }))] })] }) })), jsxRuntime.jsx(ConfirmationDialog, { isOpen: isDeleteDialogOpen, title: t('chat.conversations.deleteConfirm.title'), message: t('chat.conversations.deleteConfirm.message'), confirmText: t('chat.conversations.deleteConfirm.confirm'), cancelText: t('chat.conversations.deleteConfirm.cancel'), onConfirm: confirmDeleteConversation, onCancel: cancelDeleteConversation, currentLanguage: currentLanguage, variant: "danger" }), jsxRuntime.jsx(ConfirmationDialog, { isOpen: isDeleteMessageDialogOpen, title: t('chat.messages.deleteConfirm.title'), message: t('chat.messages.deleteConfirm.message'), confirmText: t('chat.messages.deleteConfirm.confirm'), cancelText: t('chat.messages.deleteConfirm.cancel'), onConfirm: confirmDeleteMessage, onCancel: cancelDeleteMessage, currentLanguage: currentLanguage, variant: "danger" })] }));
+    return (jsxRuntime.jsxs("div", { className: `fusioni-chat-widget ${theme}`, style: { '--primary-color': mergedConfig.primaryColor || '#6366f1' }, children: [jsxRuntime.jsx(FloatingButton, { isOpen: isOpen, onClick: handleToggleChat, position: mergedConfig.position || 'bottom-right', primaryColor: mergedConfig.primaryColor, buttonRef: floatingButtonRef, variant: mergedConfig.buttonVariant || 'glass', shouldDisplay: !hasConfigError && (!isMobileLayout || !isOpen) }), isOpen && (jsxRuntime.jsx(ChatPanel, { isOpen: isOpen, onClose: () => setIsOpen(false), position: mergedConfig.position || 'bottom-right', isFullscreen: isFullscreen, floatingButtonRef: floatingButtonRef, children: jsxRuntime.jsxs("div", { className: "fusioni-chat-container", children: [mergedConfig.showConversationList !== false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `fusioni-conversation-backdrop ${isConversationListOpen ? 'open' : ''}`, onClick: () => setIsConversationListOpen(false) }), jsxRuntime.jsx(ConversationList, { conversations: conversations, selectedConversationId: currentConversation?.id || undefined, onSelectConversation: handleSelectConversation, onDeleteConversation: handleDeleteConversation, onCreateConversation: handleCreateConversation, isOpen: isConversationListOpen, currentLanguage: currentLanguage })] })), jsxRuntime.jsxs("div", { className: "fusioni-chat-main", children: [jsxRuntime.jsxs("div", { className: "fusioni-chat-main-header", children: [mergedConfig.showConversationList !== false ? (jsxRuntime.jsxs("button", { type: "button", onClick: handleToggleConversationList, className: `fusioni-conversation-toggle ${isConversationListOpen ? 'open' : ''}`, children: [jsxRuntime.jsx("svg", { className: "fusioni-conversation-toggle-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M3 12h18M3 6h18M3 18h18" }) }), t('chat.conversations.title')] })) : (jsxRuntime.jsx("span", { className: "fusioni-chat-main-header-title", children: t('chat.title') })), jsxRuntime.jsxs("div", { className: "fusioni-header-actions", children: [isMobileLayout && (jsxRuntime.jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "fusioni-btn fusioni-btn-icon fusioni-chat-toolbar-close-mobile", title: t('common.close'), "aria-label": t('common.close'), children: jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6L18 18", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), jsxRuntime.jsx("button", { type: "button", onClick: toggleTheme, className: "fusioni-btn fusioni-btn-icon", title: theme === 'dark' ? t('chat.theme.light') : t('chat.theme.dark'), children: theme === 'dark' ? (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }), jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] })) : (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })) }), jsxRuntime.jsx("button", { type: "button", onClick: handleToggleFullscreen, className: "fusioni-btn fusioni-btn-icon", title: isFullscreen ? t('chat.fullscreen.exit') : t('chat.fullscreen.enter'), children: isFullscreen ? (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M8 3V5M8 3H5M8 3L3 8M16 3V5M16 3H19M16 3L21 8M8 21V19M8 21H5M8 21L3 16M16 21V19M16 21H19M16 21L21 16" }) })) : (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M8 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V8M21 8V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H16M16 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V16M3 16V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H8" }) })) }), jsxRuntime.jsx(LanguageSwitcher, { currentLanguage: currentLanguage, onLanguageChange: changeLanguage })] })] }), currentConversation ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MessageList, { messages: messages, streamMessages: streamMessages, showThoughts: false, onDeleteMessage: handleDeleteMessage, onEditMessage: handleEditMessage, onConfirmation: handleConfirmation, enableButtons: !isLoading, apiBaseUrl: mergedConfig.apiBaseUrl, apiKey: mergedConfig.accessToken, agencyId: mergedConfig.agencyId, currentLanguage: currentLanguage, theme: theme }), jsxRuntime.jsx(ChatInput, { onSendMessage: handleSendMessage, onFileUpload: handleFileUpload, disabled: isLoading, placeholder: t('chat.input.placeholder'), enableAudioRecording: mergedConfig.enableAudioRecording !== false, enableFileUpload: mergedConfig.enableFileUpload !== false, maxFileSize: mergedConfig.maxFileSize || 10, allowedFileTypes: mergedConfig.allowedFileTypes || ['image/*'], currentLanguage: currentLanguage })] })) : (jsxRuntime.jsx("div", { className: "fusioni-chat-welcome", children: jsxRuntime.jsxs("div", { className: "fusioni-chat-welcome-content", children: [jsxRuntime.jsx("h3", { children: t('chat.welcome.title') }), jsxRuntime.jsx("p", { children: t('chat.welcome.description') }), jsxRuntime.jsx("button", { onClick: handleCreateConversation, disabled: isLoading, className: "fusioni-btn fusioni-btn-primary", children: isLoading ? t('chat.welcome.creating') : t('chat.welcome.startButton') })] }) }))] })] }) })), jsxRuntime.jsx(ConfirmationDialog, { isOpen: isDeleteDialogOpen, title: t('chat.conversations.deleteConfirm.title'), message: t('chat.conversations.deleteConfirm.message'), confirmText: t('chat.conversations.deleteConfirm.confirm'), cancelText: t('chat.conversations.deleteConfirm.cancel'), onConfirm: confirmDeleteConversation, onCancel: cancelDeleteConversation, currentLanguage: currentLanguage, variant: "danger" }), jsxRuntime.jsx(ConfirmationDialog, { isOpen: isDeleteMessageDialogOpen, title: t('chat.messages.deleteConfirm.title'), message: t('chat.messages.deleteConfirm.message'), confirmText: t('chat.messages.deleteConfirm.confirm'), cancelText: t('chat.messages.deleteConfirm.cancel'), onConfirm: confirmDeleteMessage, onCancel: cancelDeleteMessage, currentLanguage: currentLanguage, variant: "danger" })] }));
 };
 
 const FileUpload = ({ onFileSelect, accept = 'image/*', maxSize = 10, disabled = false, className = '' }) => {
@@ -6578,6 +6608,7 @@ exports.getTranslation = getTranslation;
 exports.initializeApiClient = initializeApiClient;
 exports.isValidLanguage = isValidLanguage;
 exports.useChatState = useChatState;
+exports.useIsMobileLayout = useIsMobileLayout;
 exports.useSSE = useSSE;
 exports.useTheme = useTheme;
 exports.useTranslation = useTranslation;