@xapp/chat-widget 1.91.0 → 1.92.0

package/dist/index.es.js

@@ -3212,9 +3212,11 @@ function getPageContext(override) {
 }
 var MCPChat = /** @class */ (function () {
     function MCPChat(config, options) {
+        var _a;
         this._userId = "";
         this._sessionId = "";
         this._accessToken = "";
+        this._debugMode = false;
         this._attributes = {};
         // Streaming throttle state
         this.streamBuffer = "";
@@ -3237,6 +3239,7 @@ var MCPChat = /** @class */ (function () {
         this.options = options;
         this.configurableMessages = options === null || options === void 0 ? void 0 : options.configurableMessages;
         this.isNewSession = false;
+        this._debugMode = (_a = config.debugMode) !== null && _a !== void 0 ? _a : false;
         this.hooks = options === null || options === void 0 ? void 0 : options.hooks;
         // Validate business_owner mode requires authToken
         var mode = config.mode || "homeowner";
@@ -3280,14 +3283,8 @@ var MCPChat = /** @class */ (function () {
         // Dispatch bot joined early so it appears before the greeting.
         // getBot() is config-derived (uses options.bot), so it's safe to call before setVisitorInfo.
         this.userJoined(this.getBot(undefined));
-        // Returning user with existing session - validate session silently
-        // New user without session - initialize new session to get greeting
-        if (this._sessionId) {
-            this.validateSession();
-        }
-        else {
-            this.initializeNewSession();
-        }
+        // Session initialization is deferred to setVisitorInfo() to avoid
+        // making network requests before the widget is visible.
     };
     /**
      * Validates an existing session with the server ("Silent Handshake").
@@ -3341,7 +3338,7 @@ var MCPChat = /** @class */ (function () {
      */
     MCPChat.prototype.buildRequestPayload = function (additionalData) {
         if (additionalData === void 0) { additionalData = {}; }
-        return __assign({ 
+        return __assign(__assign({ 
             // Identity - server generates these, we just send back what we have
             userId: this._userId || undefined, sessionId: this._sessionId || undefined, 
             // Fingerprint for user identification (can be disabled for privacy)
@@ -3351,7 +3348,7 @@ var MCPChat = /** @class */ (function () {
             // Client timestamp for latency measurement and clock drift detection
             clientTime: new Date().toISOString(), 
             // Last sequence number for replay on reconnect
-            lastSeq: this.lastSeq }, additionalData);
+            lastSeq: this.lastSeq }, (this._debugMode && { debug: true })), additionalData);
     };
     /**
      * Initializes a new session by calling the endpoint with { newSession: true }.
@@ -3361,9 +3358,12 @@ var MCPChat = /** @class */ (function () {
         return __awaiter$1(this, void 0, void 0, function () {
             var endpoint, error_2;
             var _this = this;
-            return __generator$1(this, function (_a) {
-                switch (_a.label) {
+            var _a;
+            return __generator$1(this, function (_b) {
+                switch (_b.label) {
                     case 0:
+                        // Reset debug mode on new session (respects config default)
+                        this._debugMode = (_a = this.config.debugMode) !== null && _a !== void 0 ? _a : false;
                         // Prevent multiple concurrent initialization requests
                         if (this.isInitializingSession) {
                             log("New session initialization already in progress, skipping");
@@ -3377,15 +3377,15 @@ var MCPChat = /** @class */ (function () {
                             _this.resolveSessionInit = resolve;
                         });
                         this.typing();
-                        _a.label = 1;
+                        _b.label = 1;
                     case 1:
-                        _a.trys.push([1, 3, 4, 5]);
+                        _b.trys.push([1, 3, 4, 5]);
                         return [4 /*yield*/, this.performSSERequest(this.buildRequestPayload({ newSession: true, generateGreeting: true }))];
                     case 2:
-                        _a.sent();
+                        _b.sent();
                         return [3 /*break*/, 5];
                     case 3:
-                        error_2 = _a.sent();
+                        error_2 = _b.sent();
                         err("Failed to initialize new session: ".concat(error_2));
                         this.stopTyping();
                         this.setConnectionStatus("offline");
@@ -3935,10 +3935,28 @@ var MCPChat = /** @class */ (function () {
      */
     MCPChat.prototype.attemptSSERequest = function (message) {
         return __awaiter$1(this, void 0, void 0, function () {
-            var messageText;
+            var messageText, statusMsg, msgId;
             var _a;
             return __generator$1(this, function (_b) {
                 messageText = ((_a = message.msg) === null || _a === void 0 ? void 0 : _a.text) || "";
+                // Intercept /debug command — toggle debug mode client-side without sending to LLM
+                if (messageText.trim().toLowerCase() === '/debug') {
+                    this._debugMode = !this._debugMode;
+                    statusMsg = this._debugMode ? 'Debug mode enabled' : 'Debug mode disabled';
+                    log("[attemptSSERequest] ".concat(statusMsg));
+                    msgId = "debug-".concat(Date.now());
+                    this.dispatch({
+                        type: "chat",
+                        detail: {
+                            type: "chat.stream.end",
+                            user: this.getBot(undefined),
+                            messageId: msgId,
+                            msg: { text: statusMsg },
+                            timestamp: +new Date(),
+                        },
+                    });
+                    return [2 /*return*/];
+                }
                 log("[attemptSSERequest] Sending message: \"".concat(messageText, "\", userId: ").concat(this._userId, ", sessionId: ").concat(this._sessionId));
                 return [2 /*return*/, this.performSSERequest(this.buildRequestPayload({ message: messageText }))];
             });
@@ -4123,8 +4141,19 @@ var MCPChat = /** @class */ (function () {
                                                 toolCall.error = data.toolError;
                                                 toolCall.label = data.label; // Update with completion label
                                                 toolCall.hidden = data.hidden; // Update hidden status
-                                                toolCall.endTime = Date.now();
+                                                // Use server-side batch duration if available (debug mode), otherwise client-side
+                                                toolCall.endTime = (data.toolBatchDurationMs && toolCall.startTime != null)
+                                                    ? toolCall.startTime + data.toolBatchDurationMs
+                                                    : Date.now();
                                                 toolCall.isExecuting = false;
+                                                // Capture tool input from debug-enriched events
+                                                if (data.toolInput) {
+                                                    toolCall.input = data.toolInput;
+                                                }
+                                            }
+                                            // Toggle debug mode when toggle_debug tool is called by the LLM
+                                            if (data.toolName === 'toggle_debug') {
+                                                _this._debugMode = !_this._debugMode;
                                             }
                                             // Always dispatch tool end for user-friendly progress display
                                             _this.dispatchToolEnd({
@@ -4172,8 +4201,8 @@ var MCPChat = /** @class */ (function () {
                                                 sources: sources,
                                                 displays: data.response.displays,
                                             };
-                                            // Capture tool calls before flushing (debug mode)
-                                            var toolCalls_1 = _this.config.debugMode ? __spreadArray$1([], _this.currentToolCalls, true) : undefined;
+                                            // Capture tool calls before flushing (debug mode — config or runtime toggle)
+                                            var toolCalls_1 = (_this.config.debugMode || _this._debugMode) ? __spreadArray$1([], _this.currentToolCalls, true) : undefined;
                                             _this.flushStreamBuffer().then(function () {
                                                 _this.dispatchStreamEnd(messageId, finalMessage_1, toolCalls_1);
                                                 _this.currentToolCalls = []; // Clear after dispatch
@@ -4268,12 +4297,20 @@ var MCPChat = /** @class */ (function () {
             this._attributes.currentUrl = window.location.href;
         }
         this._accessToken = this.visitorInfo.accessToken;
-        // Bot joined is dispatched in init() to ensure correct ordering
-        // Show typing indicator if we're still waiting for initial greeting
+        this.startSession(sessionId);
+        // Initialize session now that the widget is visible and visitor info is set.
+        // Returning user with existing session - validate session silently
+        // New user without session - initialize new session to get greeting
+        if (this._sessionId) {
+            this.validateSession();
+        }
+        else {
+            this.initializeNewSession();
+        }
+        // Show typing indicator while waiting for session init response
         if (this.isInitializingSession) {
             this.typing();
         }
-        this.startSession(sessionId);
         cb();
     };
     MCPChat.prototype.sendChatRating = function () { };
@@ -10996,6 +11033,14 @@ function isCard(display) {
 function isList(display) {
     return !!display && (display.type === "LIST" || display.type === "CAROUSEL");
 }
+/**
+ * Is the Display a Table
+ */
+function isTable(display) {
+    return !!display && display.type === "TABLE"
+        && Array.isArray(display.headers)
+        && Array.isArray(display.rows);
+}
 
 var CardMiddlewareWidget = function (props) {
     var msg = props.msg, ctx = props.ctx;
@@ -11296,10 +11341,31 @@ var MultiSelectMiddleware = function (next) { return function (props) {
     return next(props);
 }; };
 
+var Table = function (_a) {
+    var table = _a.table;
+    return (jsxs("div", { className: "xappw-table", children: [table.title && jsx("div", { className: "xappw-table__header", children: table.title }), jsx("div", { className: "xappw-table__container", children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: table.headers.map(function (header, i) { return (jsx("th", { scope: "col", children: header }, "".concat(header, "-").concat(i))); }) }) }), jsx("tbody", { children: table.rows.map(function (row, rowIndex) { return (jsx("tr", { children: row.map(function (cell, cellIndex) { return (jsx("td", { children: cell }, cellIndex)); }) }, rowIndex)); }) })] }) })] }));
+};
+
+var TableMiddlewareWidget = function (props) {
+    var msg = props.msg, ctx = props.ctx;
+    if (!ctx) {
+        throw new TypeError("ctx not provided to ".concat(TableMiddlewareWidget.name));
+    }
+    return (jsx(ChatMessagePart, { showAvatar: false, user: ctx.user, fullWidth: true, children: jsx("div", { className: "chat-msg chat-msg--expand", children: jsx(Table, { table: msg }) }) }));
+};
+var TableMiddleware = function (next) { return function (props) {
+    var msg = props.msg, ctx = props.ctx;
+    if (isTable(msg)) {
+        return jsx(TableMiddlewareWidget, { msg: msg, ctx: ctx });
+    }
+    return next(props);
+}; };
+
 var StandardMiddlewaresBuilder = joinMiddlewares([
     ListMiddleware,
     CardMiddleware,
-    MultiSelectMiddleware
+    MultiSelectMiddleware,
+    TableMiddleware
 ]);
 function useStandardMiddlewareBuilder() {
     var lateMiddleware = useLateMiddleware();
@@ -11553,14 +11619,58 @@ var ToolCallDisplay = function (_a) {
 };
 
 /**
- * Parses basic markdown to HTML.
- * Supports: bold, italic, links, headers, and unordered lists.
+ * Escape &, <, > for safe insertion into HTML text nodes.
+ * Not suitable for attribute values.
  */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+function parseInlineMarkdown(text) {
+    return escapeHtml(text)
+        .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+        .replace(/__(.+?)__/g, "<strong>$1</strong>")
+        .replace(/\*([^*]+?)\*/g, "<em>$1</em>")
+        .replace(/_([^_]+?)_/g, "<em>$1</em>");
+}
+function tableToHtml(headerLine, separatorLine, bodyBlock) {
+    var parseRow = function (row) {
+        return row.split("|").slice(1, -1).map(function (cell) { return parseInlineMarkdown(cell.trim()); });
+    };
+    var separators = separatorLine.split("|").slice(1, -1).map(function (s) { return s.trim(); });
+    var alignments = separators.map(function (sep) {
+        if (sep.startsWith(":") && sep.endsWith(":"))
+            return "center";
+        if (sep.endsWith(":"))
+            return "right";
+        return "left";
+    });
+    var headers = parseRow(headerLine);
+    var headerHtml = headers.map(function (h, i) {
+        return "<th scope=\"col\" style=\"text-align:".concat(alignments[i] || "left", "\">").concat(h, "</th>");
+    }).join("");
+    var bodyRows = bodyBlock.trim().split("\n").filter(function (row) { return row.trim() !== ""; });
+    var bodyHtml = bodyRows.map(function (row) {
+        var cells = parseRow(row);
+        return "<tr>" + cells.map(function (c, i) {
+            return "<td style=\"text-align:".concat(alignments[i] || "left", "\">").concat(c, "</td>");
+        }).join("") + "</tr>";
+    }).join("");
+    return "<div style=\"overflow-x:auto\"><table><thead><tr>".concat(headerHtml, "</tr></thead><tbody>").concat(bodyHtml, "</tbody></table></div>");
+}
 function parseMarkdown(text) {
     if (!text)
         return "";
-    var html = text
-        // Escape HTML entities first
+    // Extract tables first, replace with placeholders, then process the rest
+    var tables = [];
+    var processed = text.replace(/(?:^|\n)(\|.+\|)\n(\|[\s:|-]+\|)\n((?:\|.+\|\n?)+)/g, function (_match, headerLine, separatorLine, bodyBlock) {
+        tables.push(tableToHtml(headerLine, separatorLine, bodyBlock));
+        return "\n%%TABLE".concat(tables.length - 1, "%%\n");
+    });
+    // Now safely escape and parse markdown on the non-table text
+    processed = processed
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
@@ -11581,13 +11691,17 @@ function parseMarkdown(text) {
         // Line breaks
         .replace(/\n/g, "<br>");
     // Wrap consecutive <li> elements in <ul>
-    html = html.replace(/(<li>.*?<\/li>)(<br>)?/g, "$1");
-    html = html.replace(/(<li>.*?<\/li>)+/g, "<ul>$&</ul>");
+    processed = processed.replace(/(<li>.*?<\/li>)(<br>)?/g, "$1");
+    processed = processed.replace(/(<li>.*?<\/li>)+/g, "<ul>$&</ul>");
     // Clean up <br> inside <ul>
-    html = html.replace(/<ul>(.*?)<\/ul>/g, function (match) {
+    processed = processed.replace(/<ul>(.*?)<\/ul>/g, function (match) {
         return match.replace(/<br>/g, "");
     });
-    return html;
+    // Restore table placeholders (strip adjacent <br> tags)
+    tables.forEach(function (tableHtml, i) {
+        processed = processed.replace(new RegExp("(?:<br>)?%%TABLE".concat(i, "%%(?:<br>)?")), tableHtml);
+    });
+    return processed;
 }
 var ChatTextMessage = function (props) {
     var _a;
@@ -35655,7 +35769,7 @@ var ChatWidgetConnected = function (props) {
  * 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, _9, _10, _11, _12, _13, _14;
+    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, _9, _10, _11, _12, _13;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
@@ -35685,24 +35799,30 @@ var ChatWidgetUI = function (props) {
         chatState.visuals = {};
     }
     // Our state - pull from storage
-    var _15 = useState((!canMinimize && !canCancel) ||
+    // Parse autoOpenOnWidth once for use in both initial state and useEffect
+    var autoOpenOnWidthValue = ((_m = props.config) === null || _m === void 0 ? void 0 : _m.autoOpenOnWidth)
+        ? parseInt(props.config.autoOpenOnWidth, 10)
+        : NaN;
+    var autoOpenOnWidthMatch = !isNaN(autoOpenOnWidthValue) && window.innerWidth >= autoOpenOnWidthValue;
+    // When autoOpenOnWidth is configured, use width check instead of persisted visible state
+    // to prevent greeting requests on viewports below the threshold
+    var _14 = 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 = _15[0], setVisibleState = _15[1];
-    var _16 = useState(false); _16[0]; var setTypingState = _16[1]; // false initially - state kept for potential external observers
+        (!isNaN(autoOpenOnWidthValue) ? autoOpenOnWidthMatch : chatState.visuals.visible)), visible = _14[0], setVisibleState = _14[1];
+    var _15 = useState(false); _15[0]; var setTypingState = _15[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);
+    // Track whether autoOpenOnWidth has already fired so it doesn't re-open after user closes
+    var autoOpenFiredRef = useRef(autoOpenOnWidthMatch);
     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 patternsConfig = (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnPattern) === null || _p === void 0 ? void 0 : _p.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 configWidth = (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.autoOpenOnPattern) === null || _r === void 0 ? void 0 : _r.minimumWidth;
+    var currentWidth = window.innerWidth;
     var setVisible = useCallback(function (newVisible) {
         if (staticMode || previewMode) {
             return;
@@ -35736,7 +35856,7 @@ var ChatWidgetUI = function (props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _17 = useState(!document.hidden), isTabVisible = _17[0], setIsTabVisible = _17[1];
+    var _16 = useState(!document.hidden), isTabVisible = _16[0], setIsTabVisible = _16[1];
     useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
@@ -35785,10 +35905,8 @@ var ChatWidgetUI = function (props) {
         if (chatState.visuals.opened) {
             setVisible(true);
         }
-        else {
-            if (mode === "normal") {
-                setVisible(false);
-            }
+        else if (mode === "normal" && !autoOpenOnWidthMatch) {
+            setVisible(false);
         }
         if (patternExist && patternMatches) {
             setVisible(true);
@@ -35796,6 +35914,10 @@ var ChatWidgetUI = function (props) {
         if (currentWidth < +configWidth) {
             setVisible(false);
         }
+        if (autoOpenOnWidthMatch && !autoOpenFiredRef.current) {
+            autoOpenFiredRef.current = true;
+            setVisible(true);
+        }
     }, [
         currentWidth,
         patternExist,
@@ -35804,6 +35926,7 @@ var ChatWidgetUI = function (props) {
         setVisible,
         chatState.visuals.opened,
         mode,
+        autoOpenOnWidthMatch,
     ]);
     var stopTyping = useCallback(function () {
         if (!typingRef.current)
@@ -35951,8 +36074,8 @@ var ChatWidgetUI = function (props) {
         }));
     }
     // Action Bar state and handlers
-    var _18 = useState(false), formModalOpen = _18[0], setFormModalOpen = _18[1];
-    var _19 = useState(null), activeFormConfig = _19[0], setActiveFormConfig = _19[1];
+    var _17 = useState(false), formModalOpen = _17[0], setFormModalOpen = _17[1];
+    var _18 = useState(null), activeFormConfig = _18[0], setActiveFormConfig = _18[1];
     var handleFormButtonClick = useCallback(function (formButton) {
         // If form-widget is configured, use its openForm API
         // The form-widget script should already be pre-loaded
@@ -36019,7 +36142,7 @@ var ChatWidgetUI = function (props) {
     var messages = chatState && chatState.chats;
     log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
-    var actionBarEnabled = ((_t = config === null || config === void 0 ? void 0 : config.actionBar) === null || _t === void 0 ? void 0 : _t.enabled) === true;
+    var actionBarEnabled = ((_s = config === null || config === void 0 ? void 0 : config.actionBar) === null || _s === void 0 ? void 0 : _s.enabled) === true;
     // Disable greeting in preview mode
     useGreeting(!isOffline && !props.preChatFormEnabled && visible && !previewMode);
     var connectionStatus = chatState.connection.connectionStatus;
@@ -36028,7 +36151,7 @@ var ChatWidgetUI = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_u = props.config) === null || _u === void 0 ? void 0 : _u.middlewareUrl);
+    useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
     // Pre-load form-widget script if formWidgetKey is provided
     useEffect(function () {
         if (config === null || config === void 0 ? void 0 : config.formWidgetKey) {
@@ -36060,15 +36183,15 @@ var ChatWidgetUI = function (props) {
         };
     }, [actionBarEnabled]);
     // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
-    var widgetAgent = ((_v = chatState.agents["agent:robot"]) === null || _v === void 0 ? void 0 : _v.user) ||
+    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()).concat(actionBarEnabled ? " widget-container--with-action-bar" : ""), 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, debugMode: (_y = (_x = (_w = props.config) === null || _w === void 0 ? void 0 : _w.connection) === null || _x === void 0 ? void 0 : _x.mcp) === null || _y === void 0 ? void 0 : _y.debugMode, 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: (_0 = (_z = props.config) === null || _z === void 0 ? void 0 : _z.typingStatus) === null || _0 === void 0 ? void 0 : _0.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: (_1 = config === null || config === void 0 ? void 0 : config.input) === null || _1 === void 0 ? void 0 : _1.placeholder, sendButtonIcon: (_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.icon, sendButtonIconHover: (_5 = (_4 = config === null || config === void 0 ? void 0 : config.footer) === null || _4 === void 0 ? void 0 : _4.sendButton) === null || _5 === void 0 ? void 0 : _5.iconHover, sendButtonIconDisabled: (_7 = (_6 = config === null || config === void 0 ? void 0 : config.footer) === null || _6 === void 0 ? void 0 : _6.sendButton) === null || _7 === void 0 ? void 0 : _7.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_8 = props.config) === null || _8 === void 0 ? void 0 : _8.menu, footerConfig: (_9 = props.config) === null || _9 === void 0 ? void 0 : _9.footer, inputConfig: (_10 = props.config) === null || _10 === void 0 ? void 0 : _10.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), actionBarEnabled && config.actionBar ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: __assign(__assign({}, config.actionBar), { 
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()).concat(actionBarEnabled ? " widget-container--with-action-bar" : ""), 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, debugMode: (_x = (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.connection) === null || _w === void 0 ? void 0 : _w.mcp) === null || _x === void 0 ? void 0 : _x.debugMode, 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: (_z = (_y = props.config) === null || _y === void 0 ? void 0 : _y.typingStatus) === null || _z === void 0 ? void 0 : _z.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: (_0 = config === null || config === void 0 ? void 0 : config.input) === null || _0 === void 0 ? void 0 : _0.placeholder, sendButtonIcon: (_2 = (_1 = config === null || config === void 0 ? void 0 : config.footer) === null || _1 === void 0 ? void 0 : _1.sendButton) === null || _2 === void 0 ? void 0 : _2.icon, sendButtonIconHover: (_4 = (_3 = config === null || config === void 0 ? void 0 : config.footer) === null || _3 === void 0 ? void 0 : _3.sendButton) === null || _4 === void 0 ? void 0 : _4.iconHover, sendButtonIconDisabled: (_6 = (_5 = config === null || config === void 0 ? void 0 : config.footer) === null || _5 === void 0 ? void 0 : _5.sendButton) === null || _6 === void 0 ? void 0 : _6.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_7 = props.config) === null || _7 === void 0 ? void 0 : _7.menu, footerConfig: (_8 = props.config) === null || _8 === void 0 ? void 0 : _8.footer, inputConfig: (_9 = props.config) === null || _9 === void 0 ? void 0 : _9.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), actionBarEnabled && config.actionBar ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: __assign(__assign({}, config.actionBar), { 
                             // Use actionBar.cta if set, otherwise fall back to widget-level cta
-                            cta: (_11 = config.actionBar.cta) !== null && _11 !== void 0 ? _11 : config.cta }), visible: visible, chatDisabled: config.disabled, hasUserInteracted: (_12 = chatState.visuals) === null || _12 === void 0 ? void 0 : _12.hasInteracted, onChatClick: chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick, onCtaDismiss: handleCtaDismiss }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: visible ? "visible" : "", onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_13 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _13 === void 0 ? void 0 : _13.imageUrl, visible: visible, hasInteracted: (_14 = chatState.visuals) === null || _14 === void 0 ? void 0 : _14.hasInteracted, onCtaDismiss: handleCtaDismiss })), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
+                            cta: (_10 = config.actionBar.cta) !== null && _10 !== void 0 ? _10 : config.cta }), visible: visible, chatDisabled: config.disabled, hasUserInteracted: (_11 = chatState.visuals) === null || _11 === void 0 ? void 0 : _11.hasInteracted, onChatClick: chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick, onCtaDismiss: handleCtaDismiss }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: visible ? "visible" : "", onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_12 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _12 === void 0 ? void 0 : _12.imageUrl, visible: visible, hasInteracted: (_13 = chatState.visuals) === null || _13 === void 0 ? void 0 : _13.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.
@@ -36161,9 +36284,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
+    // Clean up transient visual state on page load - don't persist across browser refreshes
+    // visible is derived from config (autoOpenOnWidth, autoOpenOnPattern) and visuals.opened
     if (obj && obj.visuals) {
-        obj = __assign(__assign({}, obj), { visuals: __assign(__assign({}, obj.visuals), { hasInteracted: undefined }) });
+        obj = __assign(__assign({}, obj), { visuals: __assign(__assign({}, obj.visuals), { hasInteracted: undefined, visible: undefined }) });
     }
     return function (state, action) {
         if (state === void 0) { state = obj; }