@xapp/chat-widget 1.81.5 → 1.83.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import require$$1, { useRef, useEffect, useCallback, createContext, useMemo, useContext, memo, useState, useLayoutEffect } from 'react';
+import require$$1, { useRef, useEffect, useCallback, createContext, useContext, useMemo, memo, useState, useLayoutEffect } from 'react';
 export { default as React } from 'react';
 import require$$0, { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useSelector, useDispatch, Provider } from 'react-redux';
@@ -1612,7 +1612,7 @@ var RichText = function (props) {
 };
 
 var RichInput = function (props) {
-    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
+    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, maxLength = props.maxLength, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
     var rich = value.formats.some(function (f) { return f.type === "inputText"; });
     var handleChange = react.useCallback(function (ev) {
         if (onChange) {
@@ -1665,7 +1665,7 @@ var RichInput = function (props) {
         }
         return undefined;
     }, [inputNode, onSearch]);
-    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
+    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, maxLength: maxLength, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
 };
 
 var SuggestionsGroupHeading = function (props) {
@@ -2541,6 +2541,8 @@ var StentorDirectChat = /** @class */ (function () {
                         if (origin) {
                             attributes["origin"] = origin;
                         }
+                        // Add current time for accurate date/time responses
+                        attributes["currentTime"] = new Date().toISOString();
                         now = new Date().getTime();
                         if (this.isNewSession && !((_a = message === null || message === void 0 ? void 0 : message.msg) === null || _a === void 0 ? void 0 : _a.text)) {
                             request = {
@@ -3767,6 +3769,8 @@ var StentorRouterChat = /** @class */ (function () {
                 if (origin) {
                     attributes["origin"] = origin;
                 }
+                // Add current time for accurate date/time responses
+                attributes["currentTime"] = new Date().toISOString();
                 request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, attributes, this.visitorInfo);
                 // Router attributes are now added at the payload root level in emit()
                 this.emit("new message", request);
@@ -9046,7 +9050,7 @@ var ChatMessage = function (props) {
     var agentInfo = (_a = props.agents) === null || _a === void 0 ? void 0 : _a[props.message.user.nick];
     var hideUserInfo = (agentInfo === null || agentInfo === void 0 ? void 0 : agentInfo.hideUserInfo) || false;
     function renderByType() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var msg = props.message.msg;
         switch (props.message.type) {
             // TODO: props actually requires it to be "chat.msg". Fix prop typing?
@@ -9055,15 +9059,15 @@ var ChatMessage = function (props) {
                 // OR card OR list only. Avatar with text bubble.
                 var avaKey = avaKeys.find(function (key) { return !!msg[key]; });
                 return (jsxs(Fragment, { children: [msg.text &&
-                            jsx(ChatMessagePart, { showAvatar: avaKey === "text", user: user, avatarPosition: (_a = chatConfig.env.theme.messages) === null || _a === void 0 ? void 0 : _a.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatTextMessage, { message: props.message, sibling: props.sibling }) }), msg.html &&
-                            jsx(ChatMessagePart, { showAvatar: avaKey === "html", user: user, avatarPosition: (_b = chatConfig.env.theme.messages) === null || _b === void 0 ? void 0 : _b.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_c = props.middlewareContext) === null || _c === void 0 ? void 0 : _c.openUrl }) }), msg.displays && middleware && msg.displays.map(function (display, index) {
+                            jsx(ChatMessagePart, { showAvatar: avaKey === "text", user: user, avatarPosition: (_c = (_b = (_a = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.env) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.messages) === null || _c === void 0 ? void 0 : _c.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatTextMessage, { message: props.message, sibling: props.sibling }) }), msg.html &&
+                            jsx(ChatMessagePart, { showAvatar: avaKey === "html", user: user, avatarPosition: (_f = (_e = (_d = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.env) === null || _d === void 0 ? void 0 : _d.theme) === null || _e === void 0 ? void 0 : _e.messages) === null || _f === void 0 ? void 0 : _f.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_g = props.middlewareContext) === null || _g === void 0 ? void 0 : _g.openUrl }) }), msg.displays && middleware && msg.displays.map(function (display, index) {
                             if (display.type === "ScheduleButton") {
                                 return (jsx(ChatScheduleWidget, { minimizeOnClick: props.minimizeOnClick, display: display }));
                             }
                             var Middleware = middleware;
                             return (jsx(Middleware, { msg: display, ctx: props.middlewareContext }, index));
                         }), msg.permissionRequest && ctx &&
-                            jsx(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user, avatarPosition: (_d = chatConfig.env.theme.messages) === null || _d === void 0 ? void 0 : _d.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }) })] }));
+                            jsx(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user, avatarPosition: (_k = (_j = (_h = chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.env) === null || _h === void 0 ? void 0 : _h.theme) === null || _j === void 0 ? void 0 : _j.messages) === null || _k === void 0 ? void 0 : _k.avatarPosition, hideUserInfo: hideUserInfo, children: jsx(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: ctx }) })] }));
         }
         return (jsx(Fragment, {}));
     }
@@ -9170,10 +9174,12 @@ function useChatServerVisitorId() {
 }
 //send whenever server settings or visitor id changes
 function useGreeting(active) {
+    var _a, _b;
     var curr = useChatServerVisitorId();
     var snapshotRef = useRef(null);
     var ctx = useContext(ChatConfigContext);
-    var isAdmin = ctx.env.isAdmin;
+    // Handle null context (e.g., in preview mode)
+    var isAdmin = (_b = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.env) === null || _a === void 0 ? void 0 : _a.isAdmin) !== null && _b !== void 0 ? _b : false;
     var sessionId = useSelector(function (state) { return state.sessionId; });
     useEffect(function () {
         if (active) {
@@ -9452,10 +9458,16 @@ var SendButton = function (props) {
     return (jsx(Fragment, { children: !props.sendButtonIcon ? (jsx(IconButton_1, { className: "xappw-send-button ".concat(props.className || "", " ").concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex, onClick: disabled ? undefined : props.onClick, icon: SendIcon })) : (jsx("button", { className: "xappw-custom-send-button ".concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: props.onClick, disabled: disabled, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, children: jsx("img", { src: getIconSrc(), alt: "Send button", draggable: false, className: "send-button-icon" }) })) }));
 };
 
+// Show counter when within this percentage of the limit
+var COUNTER_THRESHOLD_PERCENT = 0.8;
 var Input = function (props) {
     var _a, _b;
     var value = props.value, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, sendButtonIconHover = props.sendButtonIconHover, sendButtonIconDisabled = props.sendButtonIconDisabled, suggestion = props.suggestion, footerConfig = props.footerConfig, inputConfig = props.inputConfig, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
     var _c = useState(false), dragover = _c[0], setDragover = _c[1];
+    var maxLength = inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.maxLength;
+    var currentLength = value.text.length;
+    var isAtLimit = maxLength !== undefined && currentLength >= maxLength;
+    var showCounter = maxLength !== undefined && currentLength >= maxLength * COUNTER_THRESHOLD_PERCENT;
     function onDragOver(event) {
         setDragover(true);
         event.preventDefault();
@@ -9503,9 +9515,9 @@ var Input = function (props) {
     return (jsx("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), "aria-label": "To start typing click on rounded rectangle at the bottom of widget. To send your message click icon on right side of rounded rectangle at the bottom of widget" +
             value.text
             ? "To clear input field click on clear icon on the left of send button"
-            : "", "aria-hidden": false, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, children: jsxs("form", { className: "xappw-input-form", onSubmit: handleOnSubmit, children: [jsx(RichInput_1, { id: "chatWidgetInput", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "type your question here", tabIndex: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.tabIndex, onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
+            : "", "aria-hidden": false, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, children: jsxs("form", { className: "xappw-input-form", onSubmit: handleOnSubmit, children: [jsx(RichInput_1, { id: "chatWidgetInput", className: "xappw-input", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "type your question here", tabIndex: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.tabIndex, maxLength: maxLength, onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
                     // onFocus={onFocus}
-                    value: value, spellCheck: true }, "input"), jsxs("div", { className: "xappw-input-form__buttons", children: [value.text && (jsx(IconButton_1, { icon: CloseIcon, tabIndex: (_a = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.clearButton) === null || _a === void 0 ? void 0 : _a.tabIndex, className: "xappw-input-form__btn", onClick: handleClear })), jsx(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, tabIndex: (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.sendButton) === null || _b === void 0 ? void 0 : _b.tabIndex, disabled: !value.text, onClick: handleOnSubmit })] })] }) }));
+                    value: value, spellCheck: true }, "input"), jsxs("div", { className: "xappw-input-form__buttons", children: [showCounter && (jsxs("span", { className: "xappw-input-form__counter".concat(isAtLimit ? " xappw-input-form__counter--limit" : ""), children: [currentLength, "/", maxLength] })), value.text && (jsx(IconButton_1, { icon: CloseIcon, tabIndex: (_a = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.clearButton) === null || _a === void 0 ? void 0 : _a.tabIndex, className: "xappw-input-form__btn", onClick: handleClear })), jsx(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, tabIndex: (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.sendButton) === null || _b === void 0 ? void 0 : _b.tabIndex, disabled: !value.text, onClick: handleOnSubmit })] })] }) }));
 };
 
 function createActions(onItemUse) {
@@ -9566,7 +9578,7 @@ var Suggestions = function (props) {
 
 var ChatFooter = function (props) {
     var _a, _b, _c;
-    var isAdmin = props.isAdmin, isChatting = props.isChatting, visible = props.visible, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, sendButtonIconHover = props.sendButtonIconHover, sendButtonIconDisabled = props.sendButtonIconDisabled, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, hasWsButton = props.hasWsButton, onSubmit = props.onSubmit;
+    var isAdmin = props.isAdmin, isChatting = props.isChatting, visible = props.visible, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, sendButtonIconHover = props.sendButtonIconHover, sendButtonIconDisabled = props.sendButtonIconDisabled, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, hasWsButton = props.hasWsButton, disabled = props.disabled, onSubmit = props.onSubmit;
     var innerDispatch = useChatDispatch();
     var _d = useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
     var _e = useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
@@ -9624,7 +9636,7 @@ var ChatFooter = function (props) {
         setEnableInput(status);
     };
     return (jsxs("div", { className: "chat-footer background-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": false, children: [showMenu && menuItems.length ?
-                jsxs(Fragment, { children: [drawerOpen ? jsx(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : jsx(Fragment, {}), jsx("div", { className: "chat-footer__menu-icon", children: jsx(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }) })] }) : jsx(Fragment, {}), jsx(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, hasWsButton: hasWsButton, onItemClick: handleItemClick, onItemUse: handleItemUse }), isAdmin && isChatting && visible && jsx(AdminBar, { onAdminJoin: handleAdminJoin }), jsx("div", { style: { pointerEvents: enableInput ? "auto" : "none", opacity: enableInput ? 1 : 0.5 }, children: jsx(Input, { addClass: "chat-footer__input " + (isChatting && visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
+                jsxs(Fragment, { children: [drawerOpen ? jsx(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : jsx(Fragment, {}), jsx("div", { className: "chat-footer__menu-icon", children: jsx(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }) })] }) : jsx(Fragment, {}), jsx(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, hasWsButton: hasWsButton, onItemClick: handleItemClick, onItemUse: handleItemUse }), isAdmin && isChatting && visible && jsx(AdminBar, { onAdminJoin: handleAdminJoin }), jsx("div", { style: { pointerEvents: enableInput && !disabled ? "auto" : "none", opacity: enableInput ? 1 : 0.5 }, children: jsx(Input, { addClass: "chat-footer__input " + (isChatting && visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, sendButtonIconHover: sendButtonIconHover, sendButtonIconDisabled: sendButtonIconDisabled, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
                     // onFocus={this.inputOnFocus}
                     onFileUpload: props.onFileUpload }) }), brandingEnabled && brandingText && jsx(ChatBranding, { text: brandingText })] }));
 };
@@ -31384,7 +31396,7 @@ var TypingStatus = function (props) {
 };
 
 var MessageList = function (_a) {
-    _a.visible; var _c = _a.messages, messages = _c === void 0 ? [] : _c, _d = _a.agents, agents = _d === void 0 ? {} : _d; _a.isOffline; _a.isChatting; var _g = _a.queuePosition, queuePosition = _g === void 0 ? 0 : _g, _h = _a.lastRatingRequestTimestamp, lastRatingRequestTimestamp = _h === void 0 ? 0 : _h, _j = _a.hasRating, hasRating = _j === void 0 ? false : _j; _a.visitorId; var messageMiddleware = _a.messageMiddleware, textTypingStatusEnabled = _a.textTypingStatusEnabled, agent = _a.agent, hasWsButton = _a.hasWsButton, _l = _a.onSend, onSend = _l === void 0 ? function () { return Promise.resolve(); } : _l, _m = _a.onWrite, onWrite = _m === void 0 ? function () { return Promise.resolve(); } : _m, _o = _a.onOpenUrl, onOpenUrl = _o === void 0 ? function () { } : _o, _p = _a.minimizeOnClick, minimizeOnClick = _p === void 0 ? function () { } : _p; _a.children;
+    _a.visible; var _c = _a.messages, messages = _c === void 0 ? [] : _c, _d = _a.agents, agents = _d === void 0 ? {} : _d; _a.isOffline; _a.isChatting; var _g = _a.queuePosition, queuePosition = _g === void 0 ? 0 : _g, _h = _a.lastRatingRequestTimestamp, lastRatingRequestTimestamp = _h === void 0 ? 0 : _h, _j = _a.hasRating, hasRating = _j === void 0 ? false : _j; _a.visitorId; var messageMiddleware = _a.messageMiddleware, textTypingStatusEnabled = _a.textTypingStatusEnabled, agent = _a.agent, hasWsButton = _a.hasWsButton, _l = _a.disableAutoScroll, disableAutoScroll = _l === void 0 ? false : _l, _m = _a.onSend, onSend = _m === void 0 ? function () { return Promise.resolve(); } : _m, _o = _a.onWrite, onWrite = _o === void 0 ? function () { return Promise.resolve(); } : _o, _p = _a.onOpenUrl, onOpenUrl = _p === void 0 ? function () { } : _p, _q = _a.minimizeOnClick, minimizeOnClick = _q === void 0 ? function () { } : _q; _a.children;
     var messagesEndRef = useRef(null);
     var containerRef = useRef(null);
     var prevHasWsButtonRef = useRef(hasWsButton);
@@ -31402,12 +31414,17 @@ var MessageList = function (_a) {
             messagesEndRef.current.scrollIntoView({ behavior: behavior });
         }
     }, []);
-    // Always scroll to bottom when messages change
+    // Always scroll to bottom when messages change (unless disabled)
     useEffect(function () {
-        scrollToBottom("smooth");
-    }, [messages, agents, scrollToBottom]);
-    // Handle WS button dismissal - only scroll when button is removed
+        if (!disableAutoScroll) {
+            scrollToBottom("smooth");
+        }
+    }, [messages, agents, scrollToBottom, disableAutoScroll]);
+    // Handle WS button dismissal - only scroll when button is removed (unless disabled)
     useEffect(function () {
+        if (disableAutoScroll) {
+            return undefined;
+        }
         var prevHasButton = prevHasWsButtonRef.current;
         var currentHasButton = hasWsButton;
         // Update ref for next render
@@ -31424,15 +31441,19 @@ var MessageList = function (_a) {
             }
         }
         return undefined;
-    }, [hasWsButton, isAtBottom, scrollToBottom]);
+    }, [hasWsButton, isAtBottom, scrollToBottom, disableAutoScroll]);
     var handleSend = useCallback(function (msg) {
         onSend(msg);
-        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }, [onSend]);
+        if (!disableAutoScroll && messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [onSend, disableAutoScroll]);
     var handleWrite = useCallback(function (msg) {
         onWrite(msg);
-        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }, [onWrite]);
+        if (!disableAutoScroll && messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [onWrite, disableAutoScroll]);
     var ctxCache = useMemo(function () {
         return new MiddlewareContextFactory({
             send: handleSend,
@@ -32139,425 +32160,61 @@ var ModalContent = function (_a) {
 };
 
 /**
- * Debounce delay for typing indicator in milliseconds.
- * After this delay of inactivity, the "stop typing" event will be sent.
+ * Id the visitor (cookies, browser fingerprint, etc)
+ *
+ * @export
+ * @returns {string}
  */
-var TYPING_INDICATOR_DEBOUNCE_MS = 2000;
-var ChatWidgetWrapper = function (props) {
-    var _a;
-    var _b = useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
-    var _c = useState(!!props.getConfig), configLoading = _c[0], setConfigLoading = _c[1];
-    var _d = useState(), configError = _d[0], setConfigError = _d[1];
-    // Load config from callback if provided
-    useEffect(function () {
-        var cancelled = false;
-        if (props.getConfig) {
-            setConfigLoading(true);
-            setConfigError(undefined);
-            props
-                .getConfig()
-                .then(function (config) {
-                if (!cancelled) {
-                    setRawConfig(config);
-                    setConfigLoading(false);
-                    log("[ChatWidget] Config loaded from getConfig callback");
-                }
-            })
-                .catch(function (error) {
-                if (!cancelled) {
-                    setConfigError(error);
-                    setConfigLoading(false);
-                    err("[ChatWidget] Failed to load config: ".concat(error.message));
-                }
-            });
-        }
-        else if (props.config) {
-            // If no callback, use the config prop directly
-            setRawConfig(props.config);
-            setConfigLoading(false);
-        }
-        return function () {
-            cancelled = true;
-        };
-        // Only depend on getConfig and config - not the entire props object to avoid infinite loops
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.getConfig, props.config]);
-    var connection = useConnectionInfo(rawConfig);
-    var config = useMemo(function () {
-        var _a;
-        return (__assign(__assign({}, rawConfig), { connection: connection, assetUrl: (_a = connection === null || connection === void 0 ? void 0 : connection.serverUrl) !== null && _a !== void 0 ? _a : defaultServerUrl, env: rawConfig }));
-    }, [connection, rawConfig]);
-    var token = useSelector(function (state) { return state.connection.token; });
-    var options = useMemo(function () {
-        var configurableMessages = getConfigurableMessages();
-        if ((rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages) &&
-            Array.isArray(rawConfig.configurableMessages.items) &&
-            rawConfig.configurableMessages.items.length > 0) {
-            configurableMessages = rawConfig.configurableMessages;
-        }
-        return {
-            token: token,
-            bot: {
-                nick: "Bot",
-                displayName: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.botName,
-                avatarPath: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.avatarUrl,
-            },
-            configurableMessages: configurableMessages,
-            hooks: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.hooks,
-            env: rawConfig,
-        };
-    }, [
-        token,
-        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.botName,
-        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.avatarUrl,
-        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages,
-        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.hooks,
-    ]);
-    // Only create chat server when config is ready (not loading and no error)
-    var chatServer = useChatServer(configLoading || configError ? null : connection, configLoading || configError ? null : options);
-    // Determine mode class for loading/error states
-    var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
-    var modeClass = "widget-container--".concat(mode);
-    // Show loading state while config is being fetched
-    if (configLoading) {
-        return (jsx("div", { className: "widget-container widget-container--loading ".concat(modeClass), children: jsx("div", { className: "xa-spinner-container visible", children: jsx("div", { className: "xa-spinner" }) }) }));
-    }
-    // Show error state if config failed to load
-    if (configError) {
-        return (jsx("div", { className: "widget-container widget-container--error ".concat(modeClass), children: jsxs("div", { className: "widget-error-message", children: ["Failed to load chat configuration: ", configError.message] }) }));
-    }
-    return (jsx(ChatConfigContext.Provider, { value: config, children: jsx(ChatServerContext.Provider, { value: chatServer, children: jsx(ChatWidget, __assign({}, props, { config: rawConfig })) }) }));
+function visitorFingerprint() {
+    return uuid_1();
+}
+
+var DEFAULT_VISITOR = {
+    displayName: "Visitor",
+    nick: "visitor:",
+    typing: false
 };
-var ChatWidget = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-    var innerDispatch = useChatDispatch();
-    var dispatch = useChatServerDispatch();
-    // From Redux
-    var chatState = useSelector(function (state) { return state; });
-    // Refresh modalReference
-    var modalRef = useRef({});
-    var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
-    var dockedMode = mode === "docked";
-    var staticMode = mode === "static";
-    var modeClass = "widget-container--".concat(mode);
-    var canRefresh = (_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.refresh;
-    // can't minimize in docked mode or static mode.
-    var canMinimize = !dockedMode && !staticMode && ((_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.minimize);
-    log("docked: ".concat(dockedMode, " static: ").concat(staticMode, " minimized: ").concat((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.minimize));
-    var canCancel;
-    // To preserve legacy behavior, cancel needs a little more checks
-    if (typeof ((_j = (_h = props.config.header) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.cancel) === "boolean") {
-        canCancel = !dockedMode && !staticMode && ((_l = (_k = props.config.header) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.cancel);
-    }
-    else {
-        canCancel = !dockedMode && !staticMode;
-    }
-    // For backward compatibility. Note: the action will create the actual "visuals" object" (this is a copy).
-    if (!chatState.visuals) {
-        chatState.visuals = {};
+function createDefaultState(state, options) {
+    var _a;
+    if (!state) {
+        state = {};
     }
-    // Our state - pull from storage
-    var _8 = useState((!canMinimize && !canCancel) ||
-        // !!get("visible") ||
-        chatState.visuals.visible ||
-        (((_m = props.config) === null || _m === void 0 ? void 0 : _m.autoOpenOnWidth) &&
-            window.matchMedia("(min-width: ".concat((_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnWidth, ")")).matches)), visible = _8[0], setVisibleState = _8[1];
-    var _9 = useState(false); _9[0]; var setTypingState = _9[1]; // false initially - state kept for potential external observers
-    // Ref to track typing state for use in timeout callbacks
-    var typingRef = useRef(false);
-    // Timeout ref for debouncing "stop typing" events
-    var stopTypingTimeoutRef = useRef(null);
-    var chatServer = useContext(ChatServerContext);
-    var patternsConfig = (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.autoOpenOnPattern) === null || _q === void 0 ? void 0 : _q.patterns;
-    var currentUrl = window.location.href;
-    var patternExist = patternsConfig && patternsConfig.length > 0;
-    var patternMatches = patternsConfig === null || patternsConfig === void 0 ? void 0 : patternsConfig.some(function (pattern) { return currentUrl.includes(pattern); });
-    var configWidth = (_s = (_r = props.config) === null || _r === void 0 ? void 0 : _r.autoOpenOnPattern) === null || _s === void 0 ? void 0 : _s.minimumWidth;
-    // eslint-disable-next-line no-restricted-globals
-    var currentWidth = screen.width;
-    var setVisible = useCallback(function (newVisible) {
-        if (staticMode) {
-            return;
-        }
-        log("setVisible: ".concat(newVisible));
-        setVisibleState(newVisible);
-        innerDispatch(setVisualStatus({
-            visible: newVisible,
-        }));
-    }, [innerDispatch, staticMode]);
-    useEffect(function () {
-        var _a, _b;
-        var handleKeyDown = function (event) {
-            var body = document.getElementsByTagName("body")[0];
-            body.tabIndex = -1;
-            if (event.key === "Escape") {
-                body.focus();
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        if (checkSessionExpiration((chatState === null || chatState === void 0 ? void 0 : chatState.sessionExpiration) || ((_a = props.config) === null || _a === void 0 ? void 0 : _a.sessionExpiration), (_b = chatState === null || chatState === void 0 ? void 0 : chatState.chats[chatState.chats.length - 1]) === null || _b === void 0 ? void 0 : _b.timestamp, chatState === null || chatState === void 0 ? void 0 : chatState.lastTimestamp)) {
-            innerDispatch(setSessionId(undefined));
-            innerDispatch(reset());
-        }
-        return function () {
-            document.removeEventListener("keydown", handleKeyDown);
-            // Cleanup typing timeout on unmount
-            if (stopTypingTimeoutRef.current) {
-                clearTimeout(stopTypingTimeoutRef.current);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var _10 = useState(!document.hidden), isTabVisible = _10[0], setIsTabVisible = _10[1];
-    useEffect(function () {
-        var handleVisibilityChange = function () {
-            setIsTabVisible(!document.hidden);
-        };
-        document.addEventListener("visibilitychange", handleVisibilityChange);
-        return function () {
-            document.removeEventListener("visibilitychange", handleVisibilityChange);
-        };
-    }, []);
-    useEffect(function () {
-        // Too early?
-        if (!chatServer) {
-            log("Tab visibility changed but no chatServer yet");
-            return;
-        }
-        if (!isTabVisible) {
-            log("Tab is HIDDEN - calling sleep()");
-            chatServer.sleep();
-        }
-        else {
-            log("Tab is VISIBLE - calling wakeup()");
-            chatServer.wakeup();
-        }
-    }, [chatServer, innerDispatch, isTabVisible]);
-    // Handle beforeunload to notify router when user is leaving
-    useEffect(function () {
-        if (!chatServer) {
-            return undefined;
-        }
-        var handleBeforeUnload = function () {
-            log("beforeunload - notifying router of user disconnecting");
-            if (chatServer.notifyDisconnecting) {
-                chatServer.notifyDisconnecting();
-            }
-        };
-        window.addEventListener("beforeunload", handleBeforeUnload);
-        return function () {
-            window.removeEventListener("beforeunload", handleBeforeUnload);
-        };
-    }, [chatServer]);
-    useEffect(function () {
-        // For reopen widget after move on same window
-        // if (get("opened")) {
-        //     setVisible(true);
-        // }
-        if (chatState.visuals.opened) {
-            setVisible(true);
-        }
-        else {
-            if (mode === "normal") {
-                setVisible(false);
-            }
-        }
-        if (patternExist && patternMatches) {
-            setVisible(true);
-        }
-        if (currentWidth < +configWidth) {
-            setVisible(false);
-        }
-    }, [
-        currentWidth,
-        patternExist,
-        patternMatches,
-        configWidth,
-        setVisible,
-        chatState.visuals.opened,
-        mode,
-    ]);
-    var stopTyping = useCallback(function () {
-        if (!typingRef.current)
-            return;
-        // Clear the timeout if it exists
-        if (stopTypingTimeoutRef.current) {
-            clearTimeout(stopTypingTimeoutRef.current);
-            stopTypingTimeoutRef.current = null;
-        }
-        dispatch(sendTyping(false));
-        setTypingState(false);
-        typingRef.current = false;
-    }, [dispatch]);
-    var handleOnChange = useCallback(function () {
-        // Send "typing" event only on first keystroke
-        if (!typingRef.current) {
-            dispatch(sendTyping(true));
-            setTypingState(true);
-            typingRef.current = true;
-        }
-        // Clear any existing timeout
-        if (stopTypingTimeoutRef.current) {
-            clearTimeout(stopTypingTimeoutRef.current);
+    state.userId = state.userId ? state.userId : visitorFingerprint();
+    state.visitorId = state.userId;
+    // Determine if debug mode should be enabled
+    var debugMode = false;
+    if (typeof window !== 'undefined') {
+        var localStorageSetting = (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem('xaErrorOverlay');
+        if (localStorageSetting === 'enabled') {
+            debugMode = true;
         }
-        // Set a new timeout to send "stop typing" after inactivity
-        stopTypingTimeoutRef.current = window.setTimeout(function () {
-            stopTyping();
-        }, TYPING_INDICATOR_DEBOUNCE_MS);
-    }, [dispatch, stopTyping]);
-    function handleSendMessage(msg) {
-        dispatch(sendMessage(msg));
-    }
-    function handleWriteMessage(msg) {
-        innerDispatch(writeMessage(msg.msg, msg.user));
-    }
-    var handleOpenUrl = useOpenUrlCallback();
-    function handleOnSubmit(rawInput) {
-        // Don't allow visitor to send msg if not chatting
-        if (chatState.accountStatus === "offline" && !chatState.isChatting)
-            return;
-        // Don't send empty messages
-        if (!rawInput)
-            return;
-        // Immediately stop typing
-        stopTyping();
-        chatServer.flush();
-        dispatch(executeAction(rawInput));
-    }
-    function handleFileUpload(event) {
-        var _a;
-        event.preventDefault();
-        // Only send the first file dropped on input
-        var file = (_a = event === null || event === void 0 ? void 0 : event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0];
-        if (!file) {
-            return;
+        else if (localStorageSetting === 'disabled') {
+            debugMode = false;
         }
-        dispatch(sendFile(file));
-    }
-    function getVisibilityClass() {
-        return visible ? "visible" : "";
-    }
-    function openRestartConfirmationModal() {
-        // Interesting, this call the modalRef of the restart modal
-        modalRef.current.style.display = "block";
-    }
-    function closeRestartConfirmationModal() {
-        modalRef.current.style.display = "none";
-    }
-    function handleReset() {
-        innerDispatch(reset());
-    }
-    function handleRestartClick() {
-        if (config.header.actions.refreshShowConfirmation) {
-            // show the modal
-            openRestartConfirmationModal();
-            // we will close when
+        else if (options === null || options === void 0 ? void 0 : options.enableErrorOverlay) {
+            // Use config option if no localStorage override
+            debugMode = true;
         }
-        else {
-            handleReset();
+        else if (typeof globalThis.__DEV__ !== 'undefined' && globalThis.__DEV__) {
+            // For React Native, default to true in development mode
+            debugMode = true;
         }
     }
-    function handleRestartModalCloseClick() {
-        closeRestartConfirmationModal();
-    }
-    /** Called when minimize button is clicked */
-    function handleMinimizeClick() {
-        innerDispatch(setVisualStatus({
-            opened: false,
-            hasInteracted: true,
-        }));
-        setVisible(false);
-    }
-    /** Called when cancel is clicked */
-    function handleCancelClick() {
-        // First reset to clear all state
-        innerDispatch(reset());
-        // Then set hasInteracted to prevent CTA from showing after cancel
-        innerDispatch(setVisualStatus({
-            opened: false,
-            hasInteracted: true,
-        }));
-        setVisible(false);
-    }
-    function chatButtonOnClick() {
-        innerDispatch(setVisualStatus({
+    return __assign({ connection: {
+            connectionStatus: "offline",
+            token: null,
+            greetingRequested: false
+        }, accountStatus: "offline", departments: {}, visitor: DEFAULT_VISITOR, agents: {}, chats: [], lastTimestamp: 0, lastRatingRequestTimestamp: 0, hasRating: false, isChatting: false, queuePosition: 0, failureMsg: null, visitorId: visitorFingerprint(), chips: [], sessionExpiration: "24h", visuals: {}, debugMode: debugMode }, state);
+}
+var DEFAULT_STATE = createDefaultState();
+
+function createStateFromMessages(messages) {
+    var def = createDefaultState();
+    return __assign(__assign({}, def), { connection: __assign(__assign({}, def.connection), { connectionStatus: "online" }), accountStatus: "online", chats: __spreadArray$1([], messages, true), isChatting: true, visuals: {
+            visible: true,
             opened: true,
-            hasInteracted: true,
-        }));
-        setVisible(true);
-        setTimeout(function () {
-            document.getElementById("chatWidgetInput").focus();
-        }, 100);
-    }
-    function handleCtaDismiss() {
-        innerDispatch(setVisualStatus({
-            hasInteracted: true,
-        }));
-    }
-    function handleWsButtonPress(buttonId) {
-        var _a, _b;
-        log("WS Button pressed: ".concat(buttonId));
-        // If the button has spinning behavior, update state to show spinner
-        if (((_a = chatState.wsButton) === null || _a === void 0 ? void 0 : _a.pressBehavior) === "spinning") {
-            // Update the button state to show it's pressed
-            innerDispatch({
-                type: "ws_button_display",
-                detail: __assign(__assign({}, chatState.wsButton), { isPressed: true, timestamp: +new Date() })
-            });
-        }
-        // Send the button pressed event to the server
-        if (chatServer && chatServer.sendButtonPressed) {
-            chatServer.sendButtonPressed(buttonId).catch(function (error) {
-                err("Failed to send button press: ".concat(error));
-                // Reset button state on error
-                if (chatState.wsButton) {
-                    innerDispatch({
-                        type: "ws_button_display",
-                        detail: __assign(__assign({}, chatState.wsButton), { isPressed: false, timestamp: +new Date() })
-                    });
-                }
-            });
-        }
-        // If the button has disabled behavior, animate out then dismiss
-        if (((_b = chatState.wsButton) === null || _b === void 0 ? void 0 : _b.pressBehavior) === "disabled") {
-            // First set dismissing state to trigger animation
-            innerDispatch({
-                type: "ws_button_display",
-                detail: __assign(__assign({}, chatState.wsButton), { isDismissing: true, timestamp: +new Date() })
-            });
-            // Then actually dismiss after animation completes
-            setTimeout(function () {
-                innerDispatch({
-                    type: "ws_button_dismiss",
-                    detail: {
-                        id: buttonId,
-                        timestamp: +new Date()
-                    }
-                });
-            }, WS_BUTTON_DISMISS_ANIMATION_DURATION);
-        }
-    }
-    var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
-    var messages = chatState && chatState.chats;
-    log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
-    var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
-    useGreeting(!isOffline && !props.preChatFormEnabled && visible);
-    var connectionStatus = chatState.connection.connectionStatus;
-    useEffect(function () {
-        if (onConnectionStatusChange) {
-            onConnectionStatusChange(connectionStatus);
-        }
-    }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
-    // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
-    var widgetAgent = ((_u = chatState.agents["agent:robot"]) === null || _u === void 0 ? void 0 : _u.user) ||
-        (config === null || config === void 0 ? void 0 : config.agent) || {
-        nick: "agent:robot",
-        avatarPath: config.avatarUrl,
-        display_name: "Agent",
-    };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }), jsx(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, hasWsButton: !!chatState.wsButton, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.typingStatus) === null || _w === void 0 ? void 0 : _w.textTypingStatusEnabled, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl, minimizeOnClick: handleMinimizeClick }), jsx("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : ""), children: jsx("div", { className: "xa-spinner" }) }), connectionStatus === "offline" && jsx(ServerOffline, {}), chatState.wsButton && visible && (jsx(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })), jsx(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_x = config === null || config === void 0 ? void 0 : config.input) === null || _x === void 0 ? void 0 : _x.placeholder, sendButtonIcon: (_z = (_y = config === null || config === void 0 ? void 0 : config.footer) === null || _y === void 0 ? void 0 : _y.sendButton) === null || _z === void 0 ? void 0 : _z.icon, sendButtonIconHover: (_1 = (_0 = config === null || config === void 0 ? void 0 : config.footer) === null || _0 === void 0 ? void 0 : _0.sendButton) === null || _1 === void 0 ? void 0 : _1.iconHover, sendButtonIconDisabled: (_3 = (_2 = config === null || config === void 0 ? void 0 : config.footer) === null || _2 === void 0 ? void 0 : _2.sendButton) === null || _3 === void 0 ? void 0 : _3.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: props.config.menu, footerConfig: (_4 = props.config) === null || _4 === void 0 ? void 0 : _4.footer, inputConfig: (_5 = props.config) === null || _5 === void 0 ? void 0 : _5.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), jsx(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_6 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _6 === void 0 ? void 0 : _6.imageUrl, visible: visible, hasInteracted: (_7 = chatState.visuals) === null || _7 === void 0 ? void 0 : _7.hasInteracted, onCtaDismiss: handleCtaDismiss }), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
-};
+        } });
+}
 
 // src/utils/formatProdErrorMessage.ts
 function formatProdErrorMessage$1(code) {
@@ -33714,6 +33371,576 @@ function formatProdErrorMessage(code) {
   return `Minified Redux Toolkit error #${code}; visit https://redux-toolkit.js.org/Errors?code=${code} for the full message or use the non-minified dev environment for full errors. `;
 }
 
+// Function to create a static reducer
+function createStaticReducer(state) {
+    return function (oldState, action) {
+        if (oldState === void 0) { oldState = state; }
+        log("static reducer", oldState, action);
+        return oldState;
+    };
+}
+// Function to create the store using @reduxjs/toolkit's configureStore
+function createStaticStore(state) {
+    var reducer = createStaticReducer(state);
+    var store = configureStore({
+        reducer: reducer,
+        middleware: function (getDefaultMiddleware) {
+            return getDefaultMiddleware({
+                thunk: true, // Thunk is included by default, this is just for explicitness
+            });
+        },
+        devTools: "production" !== 'production', // Redux DevTools in non-production environments
+    });
+    return store;
+}
+
+var StaticChatWidgetContainer = function (props) {
+    var state = props.state;
+    var store = useMemo(function () {
+        return createStaticStore(state);
+    }, [state]);
+    var config = useMemo(function () {
+        return __assign(__assign({}, props.config), { connection: {
+                serverUrl: "",
+                type: "local",
+            } });
+    }, [props.config]);
+    return (jsx(Provider, { store: store, children: jsx(ChatWidgetUI, __assign({}, props, { config: config, disableAutoScroll: props.disableAutoScroll, preview: props.preview })) }));
+};
+
+var StaticMessagesChatWidgetContainer = function (props) {
+    var messages = props.messages;
+    var state = useMemo(function () {
+        return createStateFromMessages(messages);
+    }, [messages]);
+    return jsx(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config, disableAutoScroll: props.disableAutoScroll, preview: props.preview });
+};
+
+/**
+ * Debounce delay for typing indicator in milliseconds.
+ * After this delay of inactivity, the "stop typing" event will be sent.
+ */
+var TYPING_INDICATOR_DEBOUNCE_MS = 2000;
+/**
+ * Check if we're in development mode. Uses typeof to prevent TypeScript
+ * errors after Rollup replaces "production" with a literal string.
+ */
+typeof process !== "undefined" &&
+    typeof process.env !== "undefined" &&
+    "production" !== "production";
+/**
+ * Converts preview messages to ChatDetail format for rendering.
+ * This allows preview mode to use the existing message rendering infrastructure.
+ *
+ * @param messages - Array of preview messages to convert
+ * @returns Array of ChatDetail objects suitable for MessageList rendering
+ */
+function convertPreviewMessagesToChatDetails(messages) {
+    var timestamp = Date.now();
+    return messages.map(function (msg, index) {
+        var _a;
+        var chatDetail = {
+            type: "chat.msg",
+            user: {
+                nick: "agent:robot",
+                display_name: "Assistant",
+            },
+            timestamp: timestamp + index,
+            msg: {
+                text: msg.displayText,
+                html: msg.html,
+                // Use "#" as fallback for suggestions without URLs to prevent navigation
+                options: (_a = msg.suggestions) === null || _a === void 0 ? void 0 : _a.map(function (s) { return ({
+                    label: s.title,
+                    actionUrl: s.url || "#"
+                }); }),
+                list: msg.list ? {
+                    type: msg.list.type,
+                    title: msg.list.title,
+                    // description maps to subTitle in internal representation
+                    items: msg.list.items.map(function (item) { return ({
+                        title: item.title,
+                        subTitle: item.description,
+                        url: item.url,
+                        imageUrl: item.imageUrl,
+                    }); })
+                } : undefined
+            }
+        };
+        return chatDetail;
+    });
+}
+/**
+ * Preview mode component - renders a static chat widget without server connection.
+ * Separated to avoid violating React hooks rules in the main wrapper.
+ */
+var ChatWidgetPreview = function (props) {
+    var _a;
+    var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "preview";
+    // Memoize preview message conversion to avoid recalculating on every render
+    var previewChatDetails = useMemo(function () {
+        return convertPreviewMessagesToChatDetails(props.previewMessages || []);
+    }, [props.previewMessages]);
+    return (jsx(StaticMessagesChatWidgetContainer, { messages: previewChatDetails, mode: mode, config: props.config, disableAutoScroll: props.disableAutoScroll, preview: true }));
+};
+/**
+ * Main wrapper component that handles config loading and server connection.
+ */
+var ChatWidgetConnected = function (props) {
+    var _a;
+    var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
+    var _b = useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
+    var _c = useState(!!props.getConfig), configLoading = _c[0], setConfigLoading = _c[1];
+    var _d = useState(), configError = _d[0], setConfigError = _d[1];
+    // Load config from callback if provided
+    useEffect(function () {
+        var cancelled = false;
+        if (props.getConfig) {
+            setConfigLoading(true);
+            setConfigError(undefined);
+            props
+                .getConfig()
+                .then(function (config) {
+                if (!cancelled) {
+                    setRawConfig(config);
+                    setConfigLoading(false);
+                    log("[ChatWidget] Config loaded from getConfig callback");
+                }
+            })
+                .catch(function (error) {
+                if (!cancelled) {
+                    setConfigError(error);
+                    setConfigLoading(false);
+                    err("[ChatWidget] Failed to load config: ".concat(error.message));
+                }
+            });
+        }
+        else if (props.config) {
+            // If no callback, use the config prop directly
+            setRawConfig(props.config);
+            setConfigLoading(false);
+        }
+        return function () {
+            cancelled = true;
+        };
+        // Only depend on getConfig and config - not the entire props object to avoid infinite loops
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.getConfig, props.config]);
+    var connection = useConnectionInfo(rawConfig);
+    var config = useMemo(function () {
+        var _a;
+        return (__assign(__assign({}, rawConfig), { connection: connection, assetUrl: (_a = connection === null || connection === void 0 ? void 0 : connection.serverUrl) !== null && _a !== void 0 ? _a : defaultServerUrl, env: rawConfig }));
+    }, [connection, rawConfig]);
+    var token = useSelector(function (state) { return state.connection.token; });
+    var options = useMemo(function () {
+        var configurableMessages = getConfigurableMessages();
+        if ((rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages) &&
+            Array.isArray(rawConfig.configurableMessages.items) &&
+            rawConfig.configurableMessages.items.length > 0) {
+            configurableMessages = rawConfig.configurableMessages;
+        }
+        return {
+            token: token,
+            bot: {
+                nick: "Bot",
+                displayName: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.botName,
+                avatarPath: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.avatarUrl,
+            },
+            configurableMessages: configurableMessages,
+            hooks: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.hooks,
+            env: rawConfig,
+        };
+    }, [
+        token,
+        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.botName,
+        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.avatarUrl,
+        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages,
+        rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.hooks,
+    ]);
+    // Only create chat server when config is ready (not loading and no error)
+    var chatServer = useChatServer(configLoading || configError ? null : connection, configLoading || configError ? null : options);
+    // Determine mode class for loading/error states (mode already declared above)
+    var modeClass = "widget-container--".concat(mode);
+    // Show loading state while config is being fetched
+    if (configLoading) {
+        return (jsx("div", { className: "widget-container widget-container--loading ".concat(modeClass), children: jsx("div", { className: "xa-spinner-container visible", children: jsx("div", { className: "xa-spinner" }) }) }));
+    }
+    // Show error state if config failed to load
+    if (configError) {
+        return (jsx("div", { className: "widget-container widget-container--error ".concat(modeClass), children: jsxs("div", { className: "widget-error-message", children: ["Failed to load chat configuration: ", configError.message] }) }));
+    }
+    return (jsx(ChatConfigContext.Provider, { value: config, children: jsx(ChatServerContext.Provider, { value: chatServer, children: jsx(ChatWidgetUI, __assign({}, props, { config: rawConfig })) }) }));
+};
+/**
+ * Inner ChatWidget component that renders the actual UI.
+ * Exported for use by StaticChatWidgetContainer to avoid infinite loops.
+ */
+var ChatWidgetUI = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var innerDispatch = useChatDispatch();
+    var dispatch = useChatServerDispatch();
+    // From Redux
+    var chatState = useSelector(function (state) { return state; });
+    // Refresh modalReference
+    var modalRef = useRef({});
+    var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
+    var dockedMode = mode === "docked";
+    var staticMode = mode === "static";
+    // Preview mode can be enabled via `preview` prop (recommended) or legacy `mode="preview"`
+    var previewMode = props.preview === true || mode === "preview";
+    var modeClass = "widget-container--".concat(mode);
+    var canRefresh = (_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.refresh;
+    // can't minimize in docked mode, static mode, or preview mode.
+    var canMinimize = !dockedMode && !staticMode && !previewMode && ((_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.minimize);
+    log("docked: ".concat(dockedMode, " static: ").concat(staticMode, " preview: ").concat(previewMode, " minimized: ").concat((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.minimize));
+    var canCancel;
+    // To preserve legacy behavior, cancel needs a little more checks
+    if (typeof ((_j = (_h = props.config.header) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.cancel) === "boolean") {
+        canCancel = !dockedMode && !staticMode && !previewMode && ((_l = (_k = props.config.header) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.cancel);
+    }
+    else {
+        canCancel = !dockedMode && !staticMode && !previewMode;
+    }
+    // For backward compatibility. Note: the action will create the actual "visuals" object" (this is a copy).
+    if (!chatState.visuals) {
+        chatState.visuals = {};
+    }
+    // Our state - pull from storage
+    var _9 = useState((!canMinimize && !canCancel) ||
+        // !!get("visible") ||
+        chatState.visuals.visible ||
+        (((_m = props.config) === null || _m === void 0 ? void 0 : _m.autoOpenOnWidth) &&
+            window.matchMedia("(min-width: ".concat((_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnWidth, ")")).matches)), visible = _9[0], setVisibleState = _9[1];
+    var _10 = useState(false); _10[0]; var setTypingState = _10[1]; // false initially - state kept for potential external observers
+    // Ref to track typing state for use in timeout callbacks
+    var typingRef = useRef(false);
+    // Timeout ref for debouncing "stop typing" events
+    var stopTypingTimeoutRef = useRef(null);
+    var chatServer = useContext(ChatServerContext);
+    var patternsConfig = (_q = (_p = props.config) === null || _p === void 0 ? void 0 : _p.autoOpenOnPattern) === null || _q === void 0 ? void 0 : _q.patterns;
+    var currentUrl = window.location.href;
+    var patternExist = patternsConfig && patternsConfig.length > 0;
+    var patternMatches = patternsConfig === null || patternsConfig === void 0 ? void 0 : patternsConfig.some(function (pattern) { return currentUrl.includes(pattern); });
+    var configWidth = (_s = (_r = props.config) === null || _r === void 0 ? void 0 : _r.autoOpenOnPattern) === null || _s === void 0 ? void 0 : _s.minimumWidth;
+    // eslint-disable-next-line no-restricted-globals
+    var currentWidth = screen.width;
+    var setVisible = useCallback(function (newVisible) {
+        if (staticMode || previewMode) {
+            return;
+        }
+        log("setVisible: ".concat(newVisible));
+        setVisibleState(newVisible);
+        innerDispatch(setVisualStatus({
+            visible: newVisible,
+        }));
+    }, [innerDispatch, staticMode, previewMode]);
+    useEffect(function () {
+        var _a, _b;
+        var handleKeyDown = function (event) {
+            var body = document.getElementsByTagName("body")[0];
+            body.tabIndex = -1;
+            if (event.key === "Escape") {
+                body.focus();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        if (checkSessionExpiration((chatState === null || chatState === void 0 ? void 0 : chatState.sessionExpiration) || ((_a = props.config) === null || _a === void 0 ? void 0 : _a.sessionExpiration), (_b = chatState === null || chatState === void 0 ? void 0 : chatState.chats[chatState.chats.length - 1]) === null || _b === void 0 ? void 0 : _b.timestamp, chatState === null || chatState === void 0 ? void 0 : chatState.lastTimestamp)) {
+            innerDispatch(setSessionId(undefined));
+            innerDispatch(reset());
+        }
+        return function () {
+            document.removeEventListener("keydown", handleKeyDown);
+            // Cleanup typing timeout on unmount
+            if (stopTypingTimeoutRef.current) {
+                clearTimeout(stopTypingTimeoutRef.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var _11 = useState(!document.hidden), isTabVisible = _11[0], setIsTabVisible = _11[1];
+    useEffect(function () {
+        var handleVisibilityChange = function () {
+            setIsTabVisible(!document.hidden);
+        };
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return function () {
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, []);
+    useEffect(function () {
+        // Too early?
+        if (!chatServer) {
+            log("Tab visibility changed but no chatServer yet");
+            return;
+        }
+        if (!isTabVisible) {
+            log("Tab is HIDDEN - calling sleep()");
+            chatServer.sleep();
+        }
+        else {
+            log("Tab is VISIBLE - calling wakeup()");
+            chatServer.wakeup();
+        }
+    }, [chatServer, innerDispatch, isTabVisible]);
+    // Handle beforeunload to notify router when user is leaving
+    useEffect(function () {
+        if (!chatServer) {
+            return undefined;
+        }
+        var handleBeforeUnload = function () {
+            log("beforeunload - notifying router of user disconnecting");
+            if (chatServer.notifyDisconnecting) {
+                chatServer.notifyDisconnecting();
+            }
+        };
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        return function () {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+        };
+    }, [chatServer]);
+    useEffect(function () {
+        // For reopen widget after move on same window
+        // if (get("opened")) {
+        //     setVisible(true);
+        // }
+        if (chatState.visuals.opened) {
+            setVisible(true);
+        }
+        else {
+            if (mode === "normal") {
+                setVisible(false);
+            }
+        }
+        if (patternExist && patternMatches) {
+            setVisible(true);
+        }
+        if (currentWidth < +configWidth) {
+            setVisible(false);
+        }
+    }, [
+        currentWidth,
+        patternExist,
+        patternMatches,
+        configWidth,
+        setVisible,
+        chatState.visuals.opened,
+        mode,
+    ]);
+    var stopTyping = useCallback(function () {
+        if (!typingRef.current)
+            return;
+        // Clear the timeout if it exists
+        if (stopTypingTimeoutRef.current) {
+            clearTimeout(stopTypingTimeoutRef.current);
+            stopTypingTimeoutRef.current = null;
+        }
+        dispatch(sendTyping(false));
+        setTypingState(false);
+        typingRef.current = false;
+    }, [dispatch]);
+    var handleOnChange = useCallback(function () {
+        // Send "typing" event only on first keystroke
+        if (!typingRef.current) {
+            dispatch(sendTyping(true));
+            setTypingState(true);
+            typingRef.current = true;
+        }
+        // Clear any existing timeout
+        if (stopTypingTimeoutRef.current) {
+            clearTimeout(stopTypingTimeoutRef.current);
+        }
+        // Set a new timeout to send "stop typing" after inactivity
+        stopTypingTimeoutRef.current = window.setTimeout(function () {
+            stopTyping();
+        }, TYPING_INDICATOR_DEBOUNCE_MS);
+    }, [dispatch, stopTyping]);
+    function handleSendMessage(msg) {
+        // Don't allow sending messages in preview mode
+        if (previewMode) {
+            return;
+        }
+        dispatch(sendMessage(msg));
+    }
+    function handleWriteMessage(msg) {
+        // Don't allow writing messages in preview mode
+        if (previewMode) {
+            return;
+        }
+        innerDispatch(writeMessage(msg.msg, msg.user));
+    }
+    var handleOpenUrl = useOpenUrlCallback();
+    function handleOnSubmit(rawInput) {
+        // Don't allow any actions in preview mode
+        if (previewMode) {
+            return;
+        }
+        // Don't allow visitor to send msg if not chatting
+        if (chatState.accountStatus === "offline" && !chatState.isChatting)
+            return;
+        // Don't send empty messages
+        if (!rawInput)
+            return;
+        // Immediately stop typing
+        stopTyping();
+        chatServer.flush();
+        dispatch(executeAction(rawInput));
+    }
+    function handleFileUpload(event) {
+        var _a;
+        event.preventDefault();
+        // Don't allow file uploads in preview mode
+        if (previewMode) {
+            return;
+        }
+        // Only send the first file dropped on input
+        var file = (_a = event === null || event === void 0 ? void 0 : event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0];
+        if (!file) {
+            return;
+        }
+        dispatch(sendFile(file));
+    }
+    function getVisibilityClass() {
+        return visible ? "visible" : "";
+    }
+    function openRestartConfirmationModal() {
+        // Interesting, this call the modalRef of the restart modal
+        modalRef.current.style.display = "block";
+    }
+    function closeRestartConfirmationModal() {
+        modalRef.current.style.display = "none";
+    }
+    function handleReset() {
+        innerDispatch(reset());
+    }
+    function handleRestartClick() {
+        if (config.header.actions.refreshShowConfirmation) {
+            // show the modal
+            openRestartConfirmationModal();
+            // we will close when
+        }
+        else {
+            handleReset();
+        }
+    }
+    function handleRestartModalCloseClick() {
+        closeRestartConfirmationModal();
+    }
+    /** Called when minimize button is clicked */
+    function handleMinimizeClick() {
+        innerDispatch(setVisualStatus({
+            opened: false,
+            hasInteracted: true,
+        }));
+        setVisible(false);
+    }
+    /** Called when cancel is clicked */
+    function handleCancelClick() {
+        // First reset to clear all state
+        innerDispatch(reset());
+        // Then set hasInteracted to prevent CTA from showing after cancel
+        innerDispatch(setVisualStatus({
+            opened: false,
+            hasInteracted: true,
+        }));
+        setVisible(false);
+    }
+    function chatButtonOnClick() {
+        innerDispatch(setVisualStatus({
+            opened: true,
+            hasInteracted: true,
+        }));
+        setVisible(true);
+        setTimeout(function () {
+            document.getElementById("chatWidgetInput").focus();
+        }, 100);
+    }
+    function handleCtaDismiss() {
+        innerDispatch(setVisualStatus({
+            hasInteracted: true,
+        }));
+    }
+    function handleWsButtonPress(buttonId) {
+        var _a, _b;
+        log("WS Button pressed: ".concat(buttonId));
+        // If the button has spinning behavior, update state to show spinner
+        if (((_a = chatState.wsButton) === null || _a === void 0 ? void 0 : _a.pressBehavior) === "spinning") {
+            // Update the button state to show it's pressed
+            innerDispatch({
+                type: "ws_button_display",
+                detail: __assign(__assign({}, chatState.wsButton), { isPressed: true, timestamp: +new Date() })
+            });
+        }
+        // Send the button pressed event to the server
+        if (chatServer && chatServer.sendButtonPressed) {
+            chatServer.sendButtonPressed(buttonId).catch(function (error) {
+                err("Failed to send button press: ".concat(error));
+                // Reset button state on error
+                if (chatState.wsButton) {
+                    innerDispatch({
+                        type: "ws_button_display",
+                        detail: __assign(__assign({}, chatState.wsButton), { isPressed: false, timestamp: +new Date() })
+                    });
+                }
+            });
+        }
+        // If the button has disabled behavior, animate out then dismiss
+        if (((_b = chatState.wsButton) === null || _b === void 0 ? void 0 : _b.pressBehavior) === "disabled") {
+            // First set dismissing state to trigger animation
+            innerDispatch({
+                type: "ws_button_display",
+                detail: __assign(__assign({}, chatState.wsButton), { isDismissing: true, timestamp: +new Date() })
+            });
+            // Then actually dismiss after animation completes
+            setTimeout(function () {
+                innerDispatch({
+                    type: "ws_button_dismiss",
+                    detail: {
+                        id: buttonId,
+                        timestamp: +new Date()
+                    }
+                });
+            }, WS_BUTTON_DISMISS_ANIMATION_DURATION);
+        }
+    }
+    var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
+    var messages = chatState && chatState.chats;
+    log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
+    var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
+    // Disable greeting in preview mode
+    useGreeting(!isOffline && !props.preChatFormEnabled && visible && !previewMode);
+    var connectionStatus = chatState.connection.connectionStatus;
+    useEffect(function () {
+        if (onConnectionStatusChange) {
+            onConnectionStatusChange(connectionStatus);
+        }
+    }, [connectionStatus, onConnectionStatusChange]);
+    useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
+    // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
+    var widgetAgent = ((_u = chatState.agents["agent:robot"]) === null || _u === void 0 ? void 0 : _u.user) ||
+        (config === null || config === void 0 ? void 0 : config.agent) || {
+        nick: "agent:robot",
+        avatarPath: config.avatarUrl,
+        display_name: "Agent",
+    };
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }), jsx(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, hasWsButton: !!chatState.wsButton, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.typingStatus) === null || _w === void 0 ? void 0 : _w.textTypingStatusEnabled, disableAutoScroll: props.disableAutoScroll, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl, minimizeOnClick: handleMinimizeClick }), jsx("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : ""), children: jsx("div", { className: "xa-spinner" }) }), connectionStatus === "offline" && jsx(ServerOffline, {}), chatState.wsButton && visible && (jsx(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })), jsx(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_x = config === null || config === void 0 ? void 0 : config.input) === null || _x === void 0 ? void 0 : _x.placeholder, sendButtonIcon: (_z = (_y = config === null || config === void 0 ? void 0 : config.footer) === null || _y === void 0 ? void 0 : _y.sendButton) === null || _z === void 0 ? void 0 : _z.icon, sendButtonIconHover: (_1 = (_0 = config === null || config === void 0 ? void 0 : config.footer) === null || _0 === void 0 ? void 0 : _0.sendButton) === null || _1 === void 0 ? void 0 : _1.iconHover, sendButtonIconDisabled: (_3 = (_2 = config === null || config === void 0 ? void 0 : config.footer) === null || _2 === void 0 ? void 0 : _2.sendButton) === null || _3 === void 0 ? void 0 : _3.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_4 = props.config) === null || _4 === void 0 ? void 0 : _4.menu, footerConfig: (_5 = props.config) === null || _5 === void 0 ? void 0 : _5.footer, inputConfig: (_6 = props.config) === null || _6 === void 0 ? void 0 : _6.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), jsx(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_7 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _7 === void 0 ? void 0 : _7.imageUrl, visible: visible, hasInteracted: (_8 = chatState.visuals) === null || _8 === void 0 ? void 0 : _8.hasInteracted, onCtaDismiss: handleCtaDismiss }), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
+};
+/**
+ * Top-level wrapper that dispatches between preview mode and connected mode.
+ * This separation ensures React hooks rules are not violated.
+ */
+var ChatWidgetWrapper = function (props) {
+    var _a;
+    var rawMode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
+    // Support both `preview` prop and legacy `mode="preview"`
+    var isPreviewMode = props.preview === true || rawMode === "preview";
+    // For visual layout, use "static" when mode is "preview" (legacy), otherwise use the actual mode
+    var visualMode = rawMode === "preview" ? "static" : rawMode;
+    if (isPreviewMode) {
+        return jsx(ChatWidgetPreview, __assign({}, props, { mode: visualMode }));
+    }
+    return jsx(ChatWidgetConnected, __assign({}, props));
+};
+
 function tryParseJson(str) {
     try {
         if (str) {
@@ -33743,55 +33970,6 @@ var BrowserStateStorage = /** @class */ (function () {
     return BrowserStateStorage;
 }());
 
-/**
- * Id the visitor (cookies, browser fingerprint, etc)
- *
- * @export
- * @returns {string}
- */
-function visitorFingerprint() {
-    return uuid_1();
-}
-
-var DEFAULT_VISITOR = {
-    displayName: "Visitor",
-    nick: "visitor:",
-    typing: false
-};
-function createDefaultState(state, options) {
-    var _a;
-    if (!state) {
-        state = {};
-    }
-    state.userId = state.userId ? state.userId : visitorFingerprint();
-    state.visitorId = state.userId;
-    // Determine if debug mode should be enabled
-    var debugMode = false;
-    if (typeof window !== 'undefined') {
-        var localStorageSetting = (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem('xaErrorOverlay');
-        if (localStorageSetting === 'enabled') {
-            debugMode = true;
-        }
-        else if (localStorageSetting === 'disabled') {
-            debugMode = false;
-        }
-        else if (options === null || options === void 0 ? void 0 : options.enableErrorOverlay) {
-            // Use config option if no localStorage override
-            debugMode = true;
-        }
-        else if (typeof globalThis.__DEV__ !== 'undefined' && globalThis.__DEV__) {
-            // For React Native, default to true in development mode
-            debugMode = true;
-        }
-    }
-    return __assign({ connection: {
-            connectionStatus: "offline",
-            token: null,
-            greetingRequested: false
-        }, accountStatus: "offline", departments: {}, visitor: DEFAULT_VISITOR, agents: {}, chats: [], lastTimestamp: 0, lastRatingRequestTimestamp: 0, hasRating: false, isChatting: false, queuePosition: 0, failureMsg: null, visitorId: visitorFingerprint(), chips: [], sessionExpiration: "24h", visuals: {}, debugMode: debugMode }, state);
-}
-var DEFAULT_STATE = createDefaultState();
-
 /**
  * Polyfill for Browser Local Storage
  *
@@ -34207,7 +34385,18 @@ function generateKey(connection, sessionId) {
     }
 }
 
-var ChatWidgetContainer = function (props) {
+/**
+ * Preview mode container - skips server config and store creation.
+ */
+var ChatWidgetPreviewContainer = function (props) {
+    var messageMiddleware = useStandardMiddleware();
+    var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware });
+    return jsx(ChatWidgetWrapper, __assign({}, widgetProps));
+};
+/**
+ * Connected mode container - creates store and connects to server.
+ */
+var ChatWidgetConnectedContainer = function (props) {
     var _a, _b, _c, _d, _e, _f;
     var messageMiddleware = useStandardMiddleware();
     var connection = useServerConfig(props.config);
@@ -34229,55 +34418,18 @@ var ChatWidgetContainer = function (props) {
      });
     return (jsx(Provider, { store: chatStore, children: jsx(ChatWidgetWrapper, __assign({}, widgetProps)) }));
 };
-
-// Function to create a static reducer
-function createStaticReducer(state) {
-    return function (oldState, action) {
-        if (oldState === void 0) { oldState = state; }
-        log("static reducer", oldState, action);
-        return oldState;
-    };
-}
-// Function to create the store using @reduxjs/toolkit's configureStore
-function createStaticStore(state) {
-    var reducer = createStaticReducer(state);
-    var store = configureStore({
-        reducer: reducer,
-        middleware: function (getDefaultMiddleware) {
-            return getDefaultMiddleware({
-                thunk: true, // Thunk is included by default, this is just for explicitness
-            });
-        },
-        devTools: "production" !== 'production', // Redux DevTools in non-production environments
-    });
-    return store;
-}
-
-var StaticChatWidgetContainer = function (props) {
-    var state = props.state;
-    var store = useMemo(function () {
-        return createStaticStore(state);
-    }, [state]);
-    var config = useMemo(function () {
-        return __assign(__assign({}, props.config), { connection: {
-                serverUrl: "",
-                type: "local",
-            } });
-    }, [props.config]);
-    return (jsx(Provider, { store: store, children: jsx(ChatWidgetWrapper, __assign({}, props, { config: config })) }));
-};
-
-function createStateFromMessages(messages) {
-    var def = createDefaultState();
-    return __assign(__assign({}, def), { connection: __assign(__assign({}, def.connection), { connectionStatus: "online" }), accountStatus: "online", chats: __spreadArray$1([], messages, true), isChatting: true, visuals: {} });
-}
-
-var StaticMessagesChatWidgetContainer = function (props) {
-    var messages = props.messages;
-    var state = useMemo(function () {
-        return createStateFromMessages(messages);
-    }, [messages]);
-    return jsx(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config });
+/**
+ * Top-level container that dispatches between preview and connected modes.
+ */
+var ChatWidgetContainer = function (props) {
+    var _a;
+    var rawMode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
+    // Support both `preview` prop and legacy `mode="preview"`
+    var isPreviewMode = props.preview === true || rawMode === "preview";
+    if (isPreviewMode) {
+        return jsx(ChatWidgetPreviewContainer, __assign({}, props));
+    }
+    return jsx(ChatWidgetConnectedContainer, __assign({}, props));
 };
 
 export { ActionButton, Avatar, CardMiddleware, Carousel, CarouselItem, ChatWidgetContainer as Chat, ChatButton, ChatCard, ChatChip, ChatChips, ChatHeader, ChatMenu, ChatMessage, ChatMessageBubble, ChatMessagePart, ChatWidgetWrapper as ChatWidget, CtaBubble, CtaBubbleContainer, List, ListItem, ListMiddleware, MessageList, MiddlewareContextFactory, StaticChatWidgetContainer, StaticMessagesChatWidgetContainer, joinMiddlewares, responseToMessage, useLateMiddleware, useStandardMiddleware };