@xapp/chat-widget 1.78.0 → 1.79.0

package/dist/index.js

@@ -306,6 +306,27 @@ function getTimeAgo(date) {
 }
 
 var EMAIL_REGEX = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$";
+// Initialize log level from localStorage on module load
+var STORAGE_KEY = 'xaLogLevel';
+var storedLogLevel = localStorage.getItem(STORAGE_KEY);
+if (storedLogLevel) {
+    window.xaLogLevel = storedLogLevel;
+}
+// Override the setter to persist to localStorage
+Object.defineProperty(window, 'xaLogLevel', {
+    get: function () {
+        return this._xaLogLevel;
+    },
+    set: function (value) {
+        this._xaLogLevel = value;
+        if (value) {
+            localStorage.setItem(STORAGE_KEY, value);
+        }
+        else {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+    }
+});
 // Returns current timestamp
 function getCurrentDateString() {
     return (new Date()).toISOString() + " ::";
@@ -605,7 +626,7 @@ function resize(vec, length) {
     return mul(vec, length / currentLength);
 }
 function rotateZ(vec, angle) {
-    var rad = angle * Math.PI / 180;
+    var rad = (angle * Math.PI) / 180;
     var ca = Math.cos(rad);
     var sa = Math.sin(rad);
     var resx = vec.x * ca + vec.y * sa;
@@ -622,9 +643,9 @@ function intersectLineEllipsis(ellipsis, line) {
     var ry = ellipsis.radius.y;
     var rx2 = rx * rx;
     var ry2 = ry * ry;
-    var a = (kx * kx / rx2 + ky * ky / ry2);
-    var b = (2 * kx * sx / rx2 + 2 * ky * sy / ry2);
-    var c = (sx * sx / rx2 + sy * sy / ry2 - 1);
+    var a = (kx * kx) / rx2 + (ky * ky) / ry2;
+    var b = (2 * kx * sx) / rx2 + (2 * ky * sy) / ry2;
+    var c = (sx * sx) / rx2 + (sy * sy) / ry2 - 1;
     var d2 = b * b - 4 * a * c;
     if (d2 >= 0) {
         var d = Math.sqrt(d2);
@@ -643,10 +664,13 @@ function intersectLineEllipsis(ellipsis, line) {
     return line.start;
 }
 function getTailSvgPath$1(props, viewport) {
-    var baseAngleRad = props.direction * Math.PI / 180;
+    var baseAngleRad = (props.direction * Math.PI) / 180;
     var radius = { x: props.width / 2, y: props.height / 2 };
     var center = { x: viewport.x / 2, y: viewport.y / 2 };
-    var intersectionRel = { x: radius.x * Math.cos(baseAngleRad), y: radius.y * Math.sin(baseAngleRad) };
+    var intersectionRel = {
+        x: radius.x * Math.cos(baseAngleRad),
+        y: radius.y * Math.sin(baseAngleRad),
+    };
     var farRel = resize(intersectionRel, len(intersectionRel) + props.length);
     var far = add$1(farRel, center);
     var direction = sub$1(intersectionRel, farRel);
@@ -655,15 +679,15 @@ function getTailSvgPath$1(props, viewport) {
     var rightDirection = rotateZ(direction, -angle / 2);
     var ellipsis = {
         center: center,
-        radius: radius
+        radius: radius,
     };
     var left = intersectLineEllipsis(ellipsis, {
         start: far,
-        direction: leftDirection
+        direction: leftDirection,
     });
     var right = intersectLineEllipsis(ellipsis, {
         start: far,
-        direction: rightDirection
+        direction: rightDirection,
     });
     return "m ".concat(far.x, " ").concat(far.y, " L ").concat(left.x, " ").concat(left.y, " L ").concat(right.x, " ").concat(right.y, " z");
 }
@@ -671,69 +695,133 @@ var CtaBubbleTail = function (props) {
     var _a, _b;
     var _c = useDimensions(), ref = _c[0], rect = _c[1];
     var viewPort = { x: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, y: (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0 };
-    return React$1.createElement("div", { ref: ref, className: "cta-bubble__tail" },
+    return (React$1.createElement("div", { ref: ref, className: "cta-bubble__tail" },
         React$1.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewPort.x, " ").concat(viewPort.y) },
-            React$1.createElement("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" })));
+            React$1.createElement("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" }))));
 };
 var CtaBubble = function (props) {
     var _a, _b, _c, _d;
     var _e = useDimensions(), ref = _e[0], rect = _e[1];
     var animate = props.animate || false;
     var animation = animate && props.buttonAnimation === "bounce" ? "bounce" : "none";
+    var handleDismiss = function (e) {
+        e.stopPropagation();
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+    };
+    console.log("Returning CTABubble with message: ", props.children);
     return (React$1.createElement("div", { ref: ref, style: {
-            border: props.borderStyle ? 'solid' : 'none',
-            borderWidth: ((_a = props.borderStyle) === null || _a === void 0 ? void 0 : _a.width) || '0px',
-            borderColor: ((_b = props.borderStyle) === null || _b === void 0 ? void 0 : _b.color) || 'transparent',
+            border: props.borderStyle ? "solid" : "none",
+            borderWidth: ((_a = props.borderStyle) === null || _a === void 0 ? void 0 : _a.width) || "0px",
+            borderColor: ((_b = props.borderStyle) === null || _b === void 0 ? void 0 : _b.color) || "transparent",
             animation: "".concat(animation, " 1s infinite"),
         }, className: "cta-bubble", onClick: props.onClick },
         React$1.createElement(CtaBubbleTail, { width: (_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0, height: (_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0, direction: 60, angle: 45, length: 16 }),
-        React$1.createElement("div", { className: "cta-bubble__content" }, props.children)));
+        React$1.createElement("div", { className: "cta-bubble__content" }, props.children),
+        props.dismissible && (React$1.createElement("button", { className: "cta-bubble__dismiss", onClick: handleDismiss, "aria-label": "Dismiss" },
+            React$1.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React$1.createElement("path", { d: "M11 1L1 11M1 1L11 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))));
 };
 
 var CtaBubbleContainer = function (props) {
-    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick, children = props.children;
+    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, dismissible = props.dismissible, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children;
+    // Debug: Log all props received
+    log("[CtaBubbleContainer] Props received:", {
+        visible: visible,
+        timeout: timeout,
+        delay: delay,
+        animate: animate,
+        buttonAnimation: buttonAnimation,
+        dismissible: dismissible,
+        hasOnClick: !!onClick,
+        hasOnDismiss: !!onDismiss,
+        hasChildren: !!children,
+        childrenContent: children,
+    });
     var startTime = React$1.useMemo(function () {
-        return visible ? new Date().valueOf() : undefined;
+        var time = visible ? new Date().valueOf() : undefined;
+        log("[CtaBubbleContainer] StartTime calculated: visible=".concat(visible, ", startTime=").concat(time));
+        return time;
     }, [visible]);
     var _a = React$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
-    var isMounted = React$1.useRef(true);
+    log("[CtaBubbleContainer] Current state: showBubble=".concat(showBubble));
     React$1.useEffect(function () {
+        log("[CtaBubbleContainer] useEffect triggered with:", {
+            startTime: startTime,
+            startTimeExists: !!startTime,
+            timeout: timeout,
+            timeoutType: typeof timeout,
+            delay: delay,
+            delayType: typeof delay,
+            visible: visible,
+        });
         var hideTimer = null;
+        var delayTimer = null;
+        var isMounted = true;
         if (startTime) {
-            var delayTimer_1 = setTimeout(function () {
-                if (isMounted.current) {
+            var actualDelay_1 = delay || 0;
+            log("[CtaBubbleContainer] Timer setup: actualDelay=".concat(actualDelay_1, "ms (from delay=").concat(delay, ")"));
+            delayTimer = setTimeout(function () {
+                log("[CtaBubbleContainer] Delay timer fired after ".concat(actualDelay_1, "ms, isMounted=").concat(isMounted));
+                if (isMounted) {
+                    log("[CtaBubbleContainer] Component still mounted, setting showBubble=true");
                     setShowBubble(true);
+                    if (typeof timeout === "number") {
+                        log("[CtaBubbleContainer] Hide timer setup: will hide after ".concat(timeout, "ms"));
+                        hideTimer = setTimeout(function () {
+                            log("[CtaBubbleContainer] Hide timer fired after ".concat(timeout, "ms, isMounted=").concat(isMounted));
+                            if (isMounted) {
+                                log("[CtaBubbleContainer] Component still mounted, setting showBubble=false");
+                                setShowBubble(false);
+                            }
+                            else {
+                                log("[CtaBubbleContainer] Component unmounted, skipping hide");
+                            }
+                        }, timeout);
+                    }
+                    else {
+                        log("[CtaBubbleContainer] No hide timer set (timeout=".concat(timeout, ", type=").concat(typeof timeout, ")"));
+                    }
                 }
-                if (typeof timeout === "number") {
-                    hideTimer = setTimeout(function () {
-                        if (isMounted.current) {
-                            setShowBubble(false);
-                        }
-                    }, timeout);
-                }
-            }, delay);
-            return function () {
-                if (hideTimer) {
-                    clearTimeout(hideTimer);
+                else {
+                    log("[CtaBubbleContainer] Component unmounted before delay timer, not showing bubble");
                 }
-                clearTimeout(delayTimer_1);
-                isMounted.current = false;
-            };
+            }, actualDelay_1);
+        }
+        else {
+            log("[CtaBubbleContainer] No startTime, skipping timer setup");
         }
-        // Return a cleanup function for the case where startTime is undefined
         return function () {
+            log("[CtaBubbleContainer] Cleanup triggered, unmounting component");
+            isMounted = false;
             if (hideTimer) {
+                log("[CtaBubbleContainer] Clearing hide timer");
                 clearTimeout(hideTimer);
             }
-            isMounted.current = false;
+            if (delayTimer) {
+                log("[CtaBubbleContainer] Clearing delay timer");
+                clearTimeout(delayTimer);
+            }
         };
-    }, [startTime, timeout, delay]);
-    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, children)));
+    }, [startTime, timeout, delay, visible]);
+    var handleDismiss = function () {
+        log("[CtaBubbleContainer] handleDismiss called, setting showBubble=false");
+        setShowBubble(false);
+        if (onDismiss) {
+            log("[CtaBubbleContainer] Calling onDismiss callback");
+            onDismiss();
+        }
+    };
+    // Final render decision
+    var shouldRender = visible && showBubble;
+    log("[CtaBubbleContainer] Render decision: visible=".concat(visible, ", showBubble=").concat(showBubble, ", shouldRender=").concat(shouldRender));
+    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && (React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation, dismissible: dismissible, onDismiss: handleDismiss }, children))));
 };
 
 var ChatButton = function (_a) {
     var _b;
-    var onClick = _a.onClick, addClass = _a.addClass, config = _a.config, visible = _a.visible, borderStyle = _a.borderStyle, imageUrl = _a.imageUrl;
+    var onClick = _a.onClick, addClass = _a.addClass, config = _a.config, visible = _a.visible, borderStyle = _a.borderStyle, imageUrl = _a.imageUrl, hasInteracted = _a.hasInteracted, onCtaDismiss = _a.onCtaDismiss;
     var _c = React$1.useState(defaultWidgetButtonWidth), buttonWidth = _c[0], setButtonWidth = _c[1];
     var _d = React$1.useState(false), animate = _d[0], setAnimate = _d[1];
     var mobileWidth = ((_b = config === null || config === void 0 ? void 0 : config.mobile) === null || _b === void 0 ? void 0 : _b.applyAtLessThanWidth) || defaultNonMobileScreenWidth;
@@ -749,9 +837,17 @@ var ChatButton = function (_a) {
     };
     var configToApply = getConfigToApply();
     React$1.useEffect(function () {
+        var _a;
         var delayTimer;
         var timeoutTimer;
-        if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay) {
+        // Don't animate if user has already interacted
+        if (hasInteracted) {
+            setAnimate(false);
+            return function () { }; // Return empty cleanup function
+        }
+        // Use animationDelay if provided, otherwise fall back to delay for backwards compatibility
+        var animationDelayToUse = (_a = configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationDelay) !== null && _a !== void 0 ? _a : configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay;
+        if (animationDelayToUse) {
             // Set a delay for the animation to start
             delayTimer = setTimeout(function () {
                 setAnimate(true);
@@ -761,7 +857,7 @@ var ChatButton = function (_a) {
                         setAnimate(false);
                     }, configToApply.animationTimeout);
                 }
-            }, configToApply.delay);
+            }, animationDelayToUse);
         }
         else if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationTimeout) {
             // Start animation immediately and set a timeout to stop it
@@ -781,8 +877,8 @@ var ChatButton = function (_a) {
             if (timeoutTimer)
                 clearTimeout(timeoutTimer);
         };
-    }, [configToApply, setAnimate]);
-    var animation = animate ? (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle" : "none";
+    }, [configToApply, setAnimate, hasInteracted]);
+    var animation = animate && !hasInteracted ? (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle" : "none";
     React$1.useEffect(function () {
         var handleResize = function () {
             var screenWidth = window.innerWidth;
@@ -814,8 +910,8 @@ var ChatButton = function (_a) {
         // Fallback to default SVG
         React$1.createElement("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22" },
             React$1.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" })))),
-        configToApply && configToApply.message && (React$1.createElement("div", { className: "xapp-chat-button__cta" },
-            React$1.createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, visible: !visible /** Why is this !visible */ }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
+        configToApply && configToApply.message && !hasInteracted && (React$1.createElement("div", { className: "xapp-chat-button__cta" },
+            React$1.createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, dismissible: configToApply === null || configToApply === void 0 ? void 0 : configToApply.dismissible, visible: !visible /** Why is this !visible */, onDismiss: onCtaDismiss }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
 };
 
 var ChatCard = function (props) {
@@ -2795,6 +2891,7 @@ var StentorRouterChat = /** @class */ (function () {
         this._sessionId = "";
         this.accessToken = "";
         this.attributes = {};
+        this.routerAttributes = {};
         this.isAdmin = false;
         this.urlAttributes = {};
         this.handlers = {};
@@ -2863,13 +2960,19 @@ var StentorRouterChat = /** @class */ (function () {
         this.handlers["new message"] = function (data, sender, ts) {
             // Because the router's internal message format is Stentor channel compatible.
             // So the data is either a stentor Request (from widget) or a stentor Response (from bot)
-            var _a;
+            var _a, _b;
             var message;
             if (sender.deviceId === "Bot") {
-                if (typeof ((_a = _this.options.hooks) === null || _a === void 0 ? void 0 : _a.onResponse) === "function") {
-                    _this.options.hooks.onResponse(message);
+                var response = data;
+                // Extract custom attributes from router response
+                if (((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.routerAttributes) && typeof response.data.routerAttributes === "object") {
+                    _this.routerAttributes = __assign({}, response.data.routerAttributes);
+                    log("Extracted router attributes: ".concat(JSON.stringify(_this.routerAttributes)));
                 }
-                message = responseToMessage(data);
+                if (typeof ((_b = _this.options.hooks) === null || _b === void 0 ? void 0 : _b.onResponse) === "function") {
+                    _this.options.hooks.onResponse(response);
+                }
+                message = responseToMessage(response);
             }
             else if (sender.deviceId === "Widget") {
                 message = requestToMessage(data);
@@ -3302,7 +3405,7 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.postMessage = function (message) {
         return __awaiter$1(this, void 0, void 0, function () {
-            var userId, sessionId, accessToken, attributes, rwgToken, merchantId, environment, enablePreferredTime, service, origin, request;
+            var userId, sessionId, accessToken, attributes, rwgToken, merchantId, environment, enablePreferredTime, service, origin, mergedAttributes, request;
             return __generator$1(this, function (_a) {
                 userId = this._userId;
                 sessionId = this._sessionId;
@@ -3332,7 +3435,8 @@ var StentorRouterChat = /** @class */ (function () {
                 if (origin) {
                     attributes["origin"] = origin;
                 }
-                request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, attributes, this.visitorInfo);
+                mergedAttributes = __assign(__assign({}, attributes), this.routerAttributes);
+                request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, mergedAttributes, this.visitorInfo);
                 this.emit("new message", request);
                 return [2 /*return*/];
             });
@@ -7624,22 +7728,21 @@ var StentorServerChat = /** @class */ (function () {
     return StentorServerChat;
 }());
 
-// import { useWhatChanged } from '@simbathesailor/use-what-changed';
 function createChatServerCore(config, options) {
     switch (config.type) {
         case "direct":
             return new StentorDirectChat({
                 url: config.serverUrl,
                 key: config.accountKey,
-                timeout: config.timeout
+                timeout: config.timeout,
             }, options);
         case "websocket":
             return new StentorServerChat({
-                url: config.serverUrl
+                url: config.serverUrl,
             }, options);
         case "websocketraw":
             return new StentorRouterChat({
-                url: config.serverUrl
+                url: config.serverUrl,
             }, options);
         case "local":
             return new StentorLocalChat();
@@ -7658,6 +7761,11 @@ function useChatServer(config, options) {
     // Log what caused the "effect"
     // useWhatChanged(deps, "options, config, dispatch");
     React$1.useEffect(function () {
+        // Don't create server if config is null (waiting for async config load)
+        if (!config || !options) {
+            setServer(undefined);
+            return undefined;
+        }
         var newServer = createChatServer(config, options);
         newServer.init(dispatch);
         setServer(newServer);
@@ -8942,13 +9050,25 @@ var SendIcon = function () {
 };
 
 var SendButton = function (props) {
-    return (React$1.createElement(React$1.Fragment, null, !props.sendButtonIcon ? (React$1.createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || ""), tabIndex: props.tabIndex, onClick: props.onClick, icon: SendIcon })) : (React$1.createElement("button", { className: "xappw-custom-send-button", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, onClick: props.onClick },
-        React$1.createElement("img", { src: props.sendButtonIcon, alt: "Send button", draggable: false })))));
+    var _a = props.disabled, disabled = _a === void 0 ? false : _a;
+    var _b = React$1.useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    // Determine which icon to show based on state
+    var getIconSrc = function () {
+        if (disabled && props.sendButtonIconDisabled) {
+            return props.sendButtonIconDisabled;
+        }
+        if (isHovered && !disabled && props.sendButtonIconHover) {
+            return props.sendButtonIconHover;
+        }
+        return props.sendButtonIcon;
+    };
+    return (React$1.createElement(React$1.Fragment, null, !props.sendButtonIcon ? (React$1.createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || "", " ").concat(disabled ? 'disabled' : ''), tabIndex: props.tabIndex, onClick: disabled ? undefined : props.onClick, icon: SendIcon })) : (React$1.createElement("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); } },
+        React$1.createElement("img", { src: getIconSrc(), alt: "Send button", draggable: false, className: "send-button-icon" })))));
 };
 
 var Input = function (props) {
     var _a, _b;
-    var value = props.value, placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, suggestion = props.suggestion, footerConfig = props.footerConfig, inputConfig = props.inputConfig, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
+    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 = React$1.useState(false), dragover = _c[0], setDragover = _c[1];
     function onDragOver(event) {
         setDragover(true);
@@ -9004,7 +9124,7 @@ var Input = function (props) {
                 value: value, spellCheck: true }),
             React$1.createElement("div", { className: "xappw-input-form__buttons" },
                 value.text && (React$1.createElement(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 })),
-                React$1.createElement(SendButton, { className: "xappw-input-form__btn", sendButtonIcon: sendButtonIcon, tabIndex: (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.sendButton) === null || _b === void 0 ? void 0 : _b.tabIndex, onClick: handleOnSubmit })))));
+                React$1.createElement(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) {
@@ -9066,7 +9186,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, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, 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, onSubmit = props.onSubmit;
     var innerDispatch = useChatDispatch();
     var _d = React$1.useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
     var _e = React$1.useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
@@ -9132,7 +9252,7 @@ var ChatFooter = function (props) {
         React$1.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, onItemClick: handleItemClick, onItemUse: handleItemUse }),
         isAdmin && isChatting && visible && React$1.createElement(AdminBar, { onAdminJoin: handleAdminJoin }),
         React$1.createElement("div", { style: { pointerEvents: enableInput ? "auto" : "none", opacity: enableInput ? 1 : 0.5 } },
-            React$1.createElement(Input, { addClass: "chat-footer__input " + (isChatting && visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
+            React$1.createElement(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 && React$1.createElement(ChatBranding, { text: brandingText })));
@@ -31360,6 +31480,9 @@ function getButtonStyle(style) {
                 _a.sent();
                 return [4 /*yield*/, ["button-hover-bg", style === null || style === void 0 ? void 0 : style.hoverBackground]];
             case 4:
+                _a.sent();
+                return [4 /*yield*/, ["button-disabled-bg", style === null || style === void 0 ? void 0 : style.disabledBackground]];
+            case 5:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -31416,6 +31539,285 @@ function getCtaStyle(style) {
     return union(getBackgroundStyle(style.background), getTextStyle(style.text));
 }
 
+/**
+ * Safely stringify objects, handling circular references and errors
+ */
+var safeStringify = function (arg) {
+    if (arg === null)
+        return "null";
+    if (arg === undefined)
+        return "undefined";
+    if (typeof arg !== "object")
+        return String(arg);
+    try {
+        var seen_1 = new WeakSet();
+        return JSON.stringify(arg, function (_key, value) {
+            if (typeof value === "object" && value !== null) {
+                if (seen_1.has(value)) {
+                    return "[Circular]";
+                }
+                seen_1.add(value);
+            }
+            return value;
+        }, 2);
+    }
+    catch (e) {
+        return "[Object: ".concat(Object.prototype.toString.call(arg), "]");
+    }
+};
+var ErrorOverlay = function () {
+    var _a;
+    var _b = React$1.useState([]), errors = _b[0], setErrors = _b[1];
+    var _c = React$1.useState(false), isMinimized = _c[0], setIsMinimized = _c[1];
+    var _d = React$1.useState(true), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = React$1.useState(false), isEnabled = _e[0], setIsEnabled = _e[1];
+    var _f = React$1.useState("bottom"), position = _f[0], setPosition = _f[1];
+    // Check if error overlay should be enabled and load position
+    React$1.useEffect(function () {
+        var _a;
+        var checkEnabled = function () {
+            var _a;
+            if (typeof window === "undefined")
+                return false;
+            // Check localStorage
+            var localStorageSetting = (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem("xaErrorOverlay");
+            if (localStorageSetting === "enabled") {
+                console.log("[ErrorOverlay] Enabled via localStorage");
+                return true;
+            }
+            if (localStorageSetting === "disabled") {
+                console.log("[ErrorOverlay] Disabled via localStorage");
+                return false;
+            }
+            // Check for React Native dev mode
+            if (typeof globalThis.__DEV__ !== "undefined" && globalThis.__DEV__) {
+                console.log("[ErrorOverlay] Enabled via __DEV__");
+                return true;
+            }
+            return false;
+        };
+        var enabled = checkEnabled();
+        setIsEnabled(enabled);
+        // Load position preference
+        var savedPosition = (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem("xaErrorOverlayPosition");
+        if (savedPosition === "top" || savedPosition === "bottom") {
+            setPosition(savedPosition);
+        }
+        console.log("[ErrorOverlay] Component mounted, enabled:", enabled, "position:", savedPosition || "bottom");
+    }, []);
+    // Define addError with useCallback to prevent stale closures
+    var addError = React$1.useCallback(function (error) {
+        console.log("[ErrorOverlay] Adding error:", error);
+        setErrors(function (prev) {
+            var timestamp = new Date().toISOString();
+            // Check if this is a duplicate of the last error
+            var lastError = prev[prev.length - 1];
+            if (lastError && lastError.message === error.message) {
+                // Update count of last error
+                return __spreadArray$1(__spreadArray$1([], prev.slice(0, -1), true), [
+                    __assign(__assign({}, lastError), { count: lastError.count + 1, timestamp: timestamp }),
+                ], false);
+            }
+            // Add new error
+            var newError = __assign({ id: "".concat(timestamp, "-").concat(Math.random()), timestamp: timestamp, count: 1 }, error);
+            // Keep only last 50 errors
+            var updated = __spreadArray$1(__spreadArray$1([], prev, true), [newError], false);
+            return updated.slice(-50);
+        });
+    }, []);
+    React$1.useEffect(function () {
+        if (!isEnabled) {
+            console.log("[ErrorOverlay] Not enabled, skipping error interception");
+            return undefined;
+        }
+        console.log("[ErrorOverlay] Setting up error interception");
+        // Store original console methods
+        var originalError = console.error;
+        var originalWarn = console.warn;
+        // Override console.error
+        console.error = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var message = args.map(function (arg) { return safeStringify(arg); }).join(" ");
+            var error = new Error();
+            addError({
+                message: message,
+                type: "error",
+                stack: error.stack,
+            });
+            // Call original method
+            originalError.apply(console, args);
+        };
+        // Override console.warn
+        console.warn = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var message = args.map(function (arg) { return safeStringify(arg); }).join(" ");
+            addError({
+                message: message,
+                type: "warning",
+            });
+            // Call original method
+            originalWarn.apply(console, args);
+        };
+        // Capture unhandled errors
+        var handleError = function (event) {
+            var _a;
+            addError({
+                message: event.message,
+                type: "error",
+                stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack,
+            });
+        };
+        // Capture unhandled promise rejections
+        var handleRejection = function (event) {
+            var _a;
+            addError({
+                message: "Unhandled Promise Rejection: ".concat(event.reason),
+                type: "error",
+                stack: (_a = event.reason) === null || _a === void 0 ? void 0 : _a.stack,
+            });
+        };
+        window.addEventListener("error", handleError);
+        window.addEventListener("unhandledrejection", handleRejection);
+        // Cleanup
+        return function () {
+            console.log("[ErrorOverlay] Cleaning up error interception");
+            console.error = originalError;
+            console.warn = originalWarn;
+            window.removeEventListener("error", handleError);
+            window.removeEventListener("unhandledrejection", handleRejection);
+        };
+    }, [isEnabled, addError]);
+    var clearErrors = function () {
+        setErrors([]);
+    };
+    var copyToClipboard = function () { return __awaiter$1(void 0, void 0, void 0, function () {
+        var errorText, err_1, textarea;
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    errorText = errors
+                        .map(function (e) {
+                        return "[".concat(e.timestamp, "] ").concat(e.type.toUpperCase(), ": ").concat(e.message).concat(e.stack ? "\n" + e.stack : "");
+                    })
+                        .join("\n\n");
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(errorText)];
+                case 2:
+                    _a.sent();
+                    console.log("[ErrorOverlay] Errors copied to clipboard");
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    console.error("[ErrorOverlay] Failed to copy to clipboard:", err_1);
+                    textarea = document.createElement("textarea");
+                    textarea.value = errorText;
+                    textarea.style.position = "fixed";
+                    textarea.style.opacity = "0";
+                    document.body.appendChild(textarea);
+                    textarea.select();
+                    try {
+                        document.execCommand("copy");
+                        console.log("[ErrorOverlay] Errors copied to clipboard using fallback method");
+                    }
+                    catch (fallbackErr) {
+                        console.error("[ErrorOverlay] Fallback copy method also failed:", fallbackErr);
+                    }
+                    document.body.removeChild(textarea);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    // Toggle enabled state
+    var toggleEnabled = function () {
+        var newState = !isEnabled;
+        setIsEnabled(newState);
+        if (typeof window !== "undefined" && window.localStorage) {
+            window.localStorage.setItem("xaErrorOverlay", newState ? "enabled" : "disabled");
+        }
+        console.log("[ErrorOverlay] Toggled enabled state to:", newState);
+        // Clear errors when disabling
+        if (!newState) {
+            setErrors([]);
+        }
+    };
+    // Toggle position between top and bottom
+    var togglePosition = function () {
+        var newPosition = position === "bottom" ? "top" : "bottom";
+        setPosition(newPosition);
+        if (typeof window !== "undefined" && window.localStorage) {
+            window.localStorage.setItem("xaErrorOverlayPosition", newPosition);
+        }
+    };
+    // Don't render if not enabled
+    if (!isEnabled) {
+        // Show a small, subtle toggle button to enable (only visible on hover)
+        return (React$1.createElement("button", { onClick: toggleEnabled, style: (_a = {
+                    position: "fixed"
+                },
+                _a[position] = "10px",
+                _a.right = "10px",
+                _a.zIndex = 999999,
+                _a.background = "#ff6b6b",
+                _a.color = "white",
+                _a.border = "none",
+                _a.borderRadius = "6px",
+                _a.padding = "8px 12px",
+                _a.fontSize = "20px",
+                _a.cursor = "pointer",
+                _a.opacity = 0.1, // Very subtle by default
+                _a.transition = "opacity 0.2s",
+                _a.minWidth = "44px",
+                _a.minHeight = "44px",
+                _a.display = "flex",
+                _a.alignItems = "center",
+                _a.justifyContent = "center",
+                _a), onMouseEnter: function (e) { return (e.currentTarget.style.opacity = "0.8"); }, onMouseLeave: function (e) { return (e.currentTarget.style.opacity = "0.1"); }, title: "Enable Error Overlay (for debugging)" }, "\uD83D\uDC1B"));
+    }
+    // If enabled but not visible (user closed it), don't render
+    if (!isVisible) {
+        return null;
+    }
+    // If enabled and visible but no errors yet, don't show the overlay
+    // Only show when there are actual errors to display
+    if (errors.length === 0) {
+        return null;
+    }
+    return (React$1.createElement("div", { className: "error-overlay error-overlay--".concat(position, " ").concat(isMinimized ? "minimized" : "") },
+        React$1.createElement("div", { className: "error-overlay-header" },
+            React$1.createElement("span", { className: "error-overlay-title" },
+                "Debug Console (",
+                errors.length,
+                ")"),
+            React$1.createElement("div", { className: "error-overlay-actions" },
+                React$1.createElement("button", { onClick: copyToClipboard, title: "Copy all to clipboard" }, "\uD83D\uDCCB"),
+                React$1.createElement("button", { onClick: clearErrors, title: "Clear all" }, "\uD83D\uDDD1\uFE0F"),
+                React$1.createElement("button", { onClick: togglePosition, title: "Move to ".concat(position === "bottom" ? "top" : "bottom") }, position === "bottom" ? "⬆️" : "⬇️"),
+                React$1.createElement("button", { onClick: toggleEnabled, title: "Disable Error Overlay" }, "\uD83D\uDD27"),
+                React$1.createElement("button", { onClick: function () { return setIsMinimized(!isMinimized); }, title: "Minimize/Maximize" }, isMinimized ? "▲" : "▼"),
+                React$1.createElement("button", { onClick: function () { return setIsVisible(false); }, title: "Close" }, "\u2715"))),
+        !isMinimized && (React$1.createElement("div", { className: "error-overlay-content" }, errors.map(function (error) { return (React$1.createElement("div", { key: error.id, className: "error-entry error-".concat(error.type) },
+            React$1.createElement("div", { className: "error-header" },
+                React$1.createElement("span", { className: "error-time" }, new Date(error.timestamp).toLocaleTimeString()),
+                error.count > 1 && (React$1.createElement("span", { className: "error-count" },
+                    "(",
+                    error.count,
+                    "x)")),
+                React$1.createElement("span", { className: "error-badge error-badge-".concat(error.type) }, error.type)),
+            React$1.createElement("div", { className: "error-message" }, error.message),
+            error.stack && (React$1.createElement("details", { className: "error-stack" },
+                React$1.createElement("summary", null, "Stack trace"),
+                React$1.createElement("pre", null, error.stack))))); })))));
+};
+
 var ModalContent = function (_a) {
     var onClose = _a.onClose, onReset = _a.onReset;
     return (React$1.createElement("div", { className: "modalContent" },
@@ -31428,7 +31830,44 @@ var ModalContent = function (_a) {
 };
 
 var ChatWidgetWrapper = function (props) {
-    var rawConfig = props.config;
+    var _a;
+    var _b = React$1.useState(props.config), rawConfig = _b[0], setRawConfig = _b[1];
+    var _c = React$1.useState(!!props.getConfig), configLoading = _c[0], setConfigLoading = _c[1];
+    var _d = React$1.useState(), configError = _d[0], setConfigError = _d[1];
+    // Load config from callback if provided
+    React$1.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 = React$1.useMemo(function () {
         var _a;
@@ -31437,7 +31876,7 @@ var ChatWidgetWrapper = function (props) {
     var token = reactRedux.useSelector(function (state) { return state.connection.token; });
     var options = React$1.useMemo(function () {
         var configurableMessages = getConfigurableMessages();
-        if (rawConfig.configurableMessages &&
+        if ((rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.configurableMessages) &&
             Array.isArray(rawConfig.configurableMessages.items) &&
             rawConfig.configurableMessages.items.length > 0) {
             configurableMessages = rawConfig.configurableMessages;
@@ -31446,20 +31885,37 @@ var ChatWidgetWrapper = function (props) {
             token: token,
             bot: {
                 nick: "Bot",
-                displayName: rawConfig.botName,
-                avatarPath: rawConfig.avatarUrl
+                displayName: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.botName,
+                avatarPath: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.avatarUrl,
             },
             configurableMessages: configurableMessages,
-            hooks: rawConfig.hooks
+            hooks: rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.hooks,
         };
     }, [token, rawConfig]);
-    var chatServer = useChatServer(connection, options);
+    // 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 (React$1.createElement("div", { className: "widget-container widget-container--loading ".concat(modeClass) },
+            React$1.createElement("div", { className: "xa-spinner-container visible" },
+                React$1.createElement("div", { className: "xa-spinner" }))));
+    }
+    // Show error state if config failed to load
+    if (configError) {
+        return (React$1.createElement("div", { className: "widget-container widget-container--error ".concat(modeClass) },
+            React$1.createElement("div", { className: "widget-error-message" },
+                "Failed to load chat configuration: ",
+                configError.message)));
+    }
     return (React$1.createElement(ChatConfigContext.Provider, { value: config },
         React$1.createElement(ChatServerContext.Provider, { value: chatServer },
-            React$1.createElement(ChatWidget, __assign({}, props)))));
+            React$1.createElement(ChatWidget, __assign({}, props, { config: rawConfig })))));
 };
 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;
+    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
@@ -31473,7 +31929,7 @@ var ChatWidget = function (props) {
     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, " minimimized: ").concat((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.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") {
@@ -31482,17 +31938,17 @@ var ChatWidget = function (props) {
     else {
         canCancel = !dockedMode && !staticMode;
     }
-    // For backward compatibility. Note: the action will create the actual "visuals" object" (this is a copy). 
+    // 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 _3 = React$1.useState((!canMinimize && !canCancel) ||
+    var _8 = React$1.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 = _3[0], setVisibleState = _3[1];
-    var _4 = React$1.useState(false), typing = _4[0], setTypingState = _4[1]; // false initially
+            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 = React$1.useState(false), typing = _9[0], setTypingState = _9[1]; // false initially
     var chatServer = React$1.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;
@@ -31507,32 +31963,36 @@ var ChatWidget = function (props) {
         }
         setVisibleState(newVisible);
         innerDispatch(setVisualStatus({
-            visible: newVisible
+            visible: newVisible,
         }));
     }, [innerDispatch, staticMode]);
     React$1.useEffect(function () {
         var _a, _b;
-        document.addEventListener("keydown", function (event) {
+        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);
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _5 = React$1.useState(!document.hidden), isTabVisible = _5[0], setIsTabVisible = _5[1];
+    var _10 = React$1.useState(!document.hidden), isTabVisible = _10[0], setIsTabVisible = _10[1];
     React$1.useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
         };
-        document.addEventListener('visibilitychange', handleVisibilityChange);
+        document.addEventListener("visibilitychange", handleVisibilityChange);
         return function () {
-            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
         };
     }, []);
     React$1.useEffect(function () {
@@ -31566,7 +32026,15 @@ var ChatWidget = function (props) {
         if (currentWidth < +configWidth) {
             setVisible(false);
         }
-    }, [currentWidth, patternExist, patternMatches, configWidth, setVisible, chatState.visuals.opened, mode]);
+    }, [
+        currentWidth,
+        patternExist,
+        patternMatches,
+        configWidth,
+        setVisible,
+        chatState.visuals.opened,
+        mode,
+    ]);
     function handleOnChange() {
         if (!typing) {
             dispatch(sendTyping(true));
@@ -31638,28 +32106,37 @@ var ChatWidget = function (props) {
     /** Called when minimize button is clicked */
     function handleMinimizeClick() {
         innerDispatch(setVisualStatus({
-            opened: false
+            opened: false,
+            hasInteracted: true,
         }));
         setVisible(false);
     }
     /** Called when cancel is clicked */
     function handleCancelClick() {
-        //set("opened", false);
+        // First reset to clear all state
+        innerDispatch(reset());
+        // Then set hasInteracted to prevent CTA from showing after cancel
         innerDispatch(setVisualStatus({
-            opened: false
+            opened: false,
+            hasInteracted: true,
         }));
-        innerDispatch(reset());
         setVisible(false);
     }
     function chatButtonOnClick() {
         innerDispatch(setVisualStatus({
-            opened: true
+            opened: true,
+            hasInteracted: true,
         }));
         setVisible(true);
         setTimeout(function () {
             document.getElementById("chatWidgetInput").focus();
         }, 100);
     }
+    function handleCtaDismiss() {
+        innerDispatch(setVisualStatus({
+            hasInteracted: true,
+        }));
+    }
     var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
     var messages = chatState && chatState.chats;
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
@@ -31672,8 +32149,12 @@ var ChatWidget = function (props) {
     }, [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" };
+    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 (React$1.createElement(React$1.Fragment, null,
         React$1.createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
             React$1.createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
@@ -31682,10 +32163,11 @@ var ChatWidget = function (props) {
             React$1.createElement("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React$1.createElement("div", { className: "xa-spinner" })),
             connectionStatus === "offline" && React$1.createElement(ServerOffline, null),
-            React$1.createElement(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, visible: visible, menuConfig: props.config.menu, footerConfig: (_0 = props.config) === null || _0 === void 0 ? void 0 : _0.footer, inputConfig: (_1 = props.config) === null || _1 === void 0 ? void 0 : _1.input, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }),
+            React$1.createElement(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, 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 }),
             React$1.createElement("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick },
                 React$1.createElement(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }))),
-        React$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_2 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _2 === void 0 ? void 0 : _2.imageUrl, visible: visible })));
+        React$1.createElement(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 }),
+        React$1.createElement(ErrorOverlay, null)));
 };
 
 // src/utils/formatProdErrorMessage.ts
@@ -32162,17 +32644,37 @@ var DEFAULT_VISITOR = {
     nick: "visitor:",
     typing: false
 };
-function createDefaultState(state) {
+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: {} }, state);
+        }, 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();
 
@@ -32221,6 +32723,10 @@ var LocalStorage = /** @class */ (function () {
 function persistStateReducer(storage, initialState, innerReducer) {
     var _a;
     var obj = (_a = storage.get()) !== null && _a !== void 0 ? _a : initialState;
+    // Clean up hasInteracted flag on page load - don't persist across browser refreshes
+    if (obj && obj.visuals) {
+        obj = __assign(__assign({}, obj), { visuals: __assign(__assign({}, obj.visuals), { hasInteracted: undefined }) });
+    }
     return function (state, action) {
         if (state === void 0) { state = obj; }
         var res = innerReducer(state, action);
@@ -32279,13 +32785,14 @@ function memberLeave(state, detail) {
 
 function resetReducer(state) {
     if (state === void 0) { state = DEFAULT_STATE; }
-    // pass through some of the items to persis
     return __assign(__assign({}, createDefaultState({
         accessToken: state.accessToken,
         userId: state.userId,
         attributes: state.attributes,
         sessionExpiration: state.sessionExpiration
-    })), { connection: __assign(__assign({}, state.connection), { greetingRequested: false, nonce: uuid_1() }), visitor: state.visitor, visitorId: state.visitorId });
+    })), { connection: __assign(__assign({}, state.connection), { greetingRequested: false, nonce: uuid_1() }), visitor: state.visitor, visitorId: state.visitorId, 
+        // Explicitly reset visuals to clear hasInteracted flag for widget refresh
+        visuals: {} });
 }
 
 // todo: create reducer (requires redux-thunk dependency)
@@ -32318,7 +32825,14 @@ function update(state, action) {
         case "session_id":
             return __assign(__assign({}, state), { lastTimestamp: (_g = action.detail) === null || _g === void 0 ? void 0 : _g.timestamp, sessionId: action.detail.sessionId });
         case "visual_status":
-            return __assign(__assign({}, state), { lastTimestamp: (_h = action.detail) === null || _h === void 0 ? void 0 : _h.timestamp, visuals: __assign(__assign(__assign(__assign({}, (state.visuals || {})), (action.detail.status.drawer !== undefined && { drawer: action.detail.status.drawer })), (action.detail.status.opened !== undefined && { opened: action.detail.status.opened })), (action.detail.status.visible !== undefined && { visible: action.detail.status.visible })) });
+            return __assign(__assign({}, state), { lastTimestamp: (_h = action.detail) === null || _h === void 0 ? void 0 : _h.timestamp, visuals: __assign(__assign(__assign(__assign(__assign({}, (state.visuals || {})), (action.detail.status.drawer !== undefined && { drawer: action.detail.status.drawer })), (action.detail.status.opened !== undefined && { opened: action.detail.status.opened })), (action.detail.status.visible !== undefined && { visible: action.detail.status.visible })), (action.detail.status.hasInteracted !== undefined && { hasInteracted: action.detail.status.hasInteracted })) });
+        case "toggle_debug_mode":
+            var newDebugMode = !state.debugMode;
+            // Update localStorage to persist the setting
+            if (typeof window !== 'undefined' && window.localStorage) {
+                window.localStorage.setItem('xaErrorOverlay', newDebugMode ? 'enabled' : 'disabled');
+            }
+            return __assign(__assign({}, state), { debugMode: newDebugMode });
         case "department_update":
             return __assign(__assign({}, state), { lastTimestamp: (_j = action.detail) === null || _j === void 0 ? void 0 : _j.timestamp, departments: __assign(__assign({}, state.departments), (_a = {}, _a[action.detail.id] = __assign({}, action.detail), _a)) });
         case "visitor_update":
@@ -32469,6 +32983,8 @@ function createChatStore(config, dataStorage) {
         userId: config.userId,
         attributes: config.attributes,
         sessionExpiration: config.sessionExpiration
+    }, {
+        enableErrorOverlay: config.enableErrorOverlay
     });
     var chatReducer = persistStateReducer(storage, defaultState, storeHandler);
     // Configure store with @reduxjs/toolkit
@@ -32508,23 +33024,25 @@ function generateKey(connection, sessionId) {
 }
 
 var ChatWidgetContainer = function (props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     var messageMiddleware = useStandardMiddleware();
     var connection = useServerConfig(props.config);
     var chatStore = React$1.useMemo(function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         return createChatStore({
             connection: connection,
             userId: (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId,
             accessToken: (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken,
             attributes: (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes,
-            sessionExpiration: (_d = props.config) === null || _d === void 0 ? void 0 : _d.sessionExpiration
+            sessionExpiration: (_d = props.config) === null || _d === void 0 ? void 0 : _d.sessionExpiration,
+            enableErrorOverlay: (_e = props.config) === null || _e === void 0 ? void 0 : _e.enableErrorOverlay
         });
-    }, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken, (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes, (_d = props.config) === null || _d === void 0 ? void 0 : _d.sessionExpiration]);
-    if ((_e = props.config) === null || _e === void 0 ? void 0 : _e.disabled) {
+    }, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken, (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes, (_d = props.config) === null || _d === void 0 ? void 0 : _d.sessionExpiration, (_e = props.config) === null || _e === void 0 ? void 0 : _e.enableErrorOverlay]);
+    if ((_f = props.config) === null || _f === void 0 ? void 0 : _f.disabled) {
         return React$1.createElement(React$1.Fragment, null);
     }
-    var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware });
+    var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware, getConfig: props.getConfig // Pass through getConfig callback
+     });
     return (React$1.createElement(reactRedux.Provider, { store: chatStore },
         React$1.createElement(ChatWidgetWrapper, __assign({}, widgetProps))));
 };