@xapp/chat-widget 1.96.3 → 1.97.0

package/dist/index.es.js

@@ -78,7 +78,9 @@ color.invertColorHEX = invertColorHEX;
 color.invertColorRgb = invertColorRgb;
 color.invertColor = invertColor;
 color.isSupportedColor = isSupportedColor;
+color.usableColorOr = usableColorOr;
 color.readableTextOn = readableTextOn;
+color.darkenColor = darkenColor;
 /**
  * Colour maths for building a widget theme from a business's own branding.
  *
@@ -187,6 +189,19 @@ function isSupportedColor(color) {
     }
     return parseRgb(color) !== null;
 }
+/**
+ * The colour to theme with: the one given, or the fallback when we cannot work
+ * out what text reads on it.
+ *
+ * Every builder needs this and each was doing it by hand, which is how the
+ * chat widget ended up guarded and the other two not. A background whose
+ * contrast cannot be computed is one we must not use — the foreground would be
+ * a guess paired with an unknown, and on a dark unparseable colour that is
+ * invisible text.
+ */
+function usableColorOr(color, fallback) {
+    return isSupportedColor(color) ? color : fallback;
+}
 /**
  * The text colour that will read on this background: black or white, never
  * anything else.
@@ -226,6 +241,77 @@ function hexToRgb(hex) {
         b: parseInt(value.slice(4, 6), 16)
     };
 }
+/**
+ * A shade of the input colour, darkened by `amount` percent (negative
+ * lightens). Ported alongside the rest so the form widget's theme does not
+ * need its own copy of it.
+ */
+function darkenColor(colorIn, amount) {
+    if (!colorIn) {
+        return colorIn;
+    }
+    let r, g, b, a;
+    let colorOut;
+    try {
+        // Parse the color format
+        if (colorIn.startsWith('#')) {
+            // Hex format
+            const hexMatch = colorIn.match(/\w\w/g);
+            if (hexMatch) {
+                [r, g, b] = hexMatch.map(x => parseInt(x, 16));
+            }
+        }
+        else if (colorIn.startsWith('rgb')) {
+            // RGB or RGBA format
+            const rgba = parseRgb(colorIn);
+            if (rgba) {
+                ({ r, g, b, a } = rgba);
+            }
+        }
+        if (r === undefined || g === undefined || b === undefined) {
+            console.error(`Unsupported color format: ${colorIn}`);
+            return colorIn;
+        }
+        if (a !== undefined) {
+            // Adjust luminance for RGBA
+            // Luminance is on the 0-255 scale the channels are, so the clamp
+            // has to be too. Bounding it to 0-1 collapsed it to 1 for every
+            // real colour, which made the ratio tiny and crushed the result to
+            // near-black instead of darkening it: rgba(20, 52, 204, 0.8) at 20%
+            // came back rgba(0, 1, 3, 1).
+            const luminance = 0.3 * r + 0.59 * g + 0.11 * b;
+            let newLuminance = luminance * (1 - amount / 100);
+            newLuminance = Math.max(0, Math.min(255, newLuminance));
+            const ratio = newLuminance / (luminance || 1); // no division by zero
+            r = Math.round(r * ratio);
+            g = Math.round(g * ratio);
+            b = Math.round(b * ratio);
+            // Adjust alpha
+            a = a + amount / 100;
+            a = Math.max(0, Math.min(1, a)); // within 0 and 1
+            colorOut = `rgba(${r}, ${g}, ${b}, ${a})`;
+        }
+        else {
+            // Adjust the color for RGB or Hex
+            if (amount > 0) {
+                r = Math.max(0, r - amount);
+                g = Math.max(0, g - amount);
+                b = Math.max(0, b - amount);
+            }
+            else {
+                amount = Math.abs(amount); // positive for lightening
+                r = Math.min(255, r + amount);
+                g = Math.min(255, g + amount);
+                b = Math.min(255, b + amount);
+            }
+            colorOut = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        }
+    }
+    catch (e) {
+        console.error(`Unsupported color format: ${colorIn} - Error: ${e}`);
+    }
+    return colorOut;
+}
 
 Object.defineProperty(buildChatWidgetChannel$1, "__esModule", { value: true });
 buildChatWidgetChannel$1.buildChatWidgetChannel = buildChatWidgetChannel;
@@ -238,7 +324,7 @@ function buildChatWidgetChannel(props) {
     // Only a colour whose contrast can actually be computed, so the background
     // and the text on it are always a matched pair rather than one scraped
     // value and one guess.
-    const primaryColor = (0, color_1.isSupportedColor)(props.primaryColor) ? props.primaryColor : DEFAULT_PRIMARY;
+    const primaryColor = (0, color_1.usableColorOr)(props.primaryColor, DEFAULT_PRIMARY);
     return {
         type: "chat-widget",
         // MCP by default. The widget runs on a public page, so homeowner mode
@@ -252,7 +338,7 @@ function buildChatWidgetChannel(props) {
                 mode: "homeowner"
             }
         },
-        theme: buildChatTheme(primaryColor),
+        theme: buildChatTheme(primaryColor, props.secondaryColor),
         actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber })
     };
 }
@@ -303,19 +389,49 @@ function buildActionBar(props) {
     };
 }
 /**
- * A theme derived from the business's own colour.
+ * The theme a new chat widget starts with, from the business's own colour.
+ *
+ * A faithful port of stentor-client's buildDefaultChatTheme, deliberately: the
+ * point of moving it is that onboarding can call this instead of its own copy,
+ * and that migration should not restyle every widget created afterwards. A
+ * thinner theme would have quietly dropped the CTA, message, input, footer and
+ * button styling that new widgets have today.
  *
- * Only the text colour is computed rather than chosen: which of black or white
- * reads on a given background is arithmetic, and getting it wrong ships a
- * widget nobody can read.
+ * The one change is how the contrast colour is derived — see below.
  */
-function buildChatTheme(primaryColor) {
-    const onPrimary = (0, color_1.readableTextOn)(primaryColor);
+function buildChatTheme(primaryColor, secondaryColor) {
+    const fontFamily = "RobotoRegular";
+    // secondaryColor is the colour of text sitting ON primaryColor — header
+    // title, subtitle, footer branding. Left unset it is computed, which is
+    // what makes the theme readable against whatever colour was scraped off
+    // the business's own site.
+    if (!secondaryColor) {
+        secondaryColor = (0, color_1.readableTextOn)(primaryColor);
+    }
     return {
         zIndex: "10000",
         border: {
             color: primaryColor,
-            radius: "10px"
+            radius: "10px",
+        },
+        carousel: {
+            button: {
+                color: primaryColor,
+            },
+            subtitle: {
+                color: "#979797",
+                fontFamily,
+                fontSize: "12px",
+                fontStyle: "normal",
+                fontWeight: "normal",
+            },
+            title: {
+                color: "#000",
+                fontFamily,
+                fontSize: "14px",
+                fontStyle: "normal",
+                fontWeight: "bold",
+            },
         },
         chatButton: {
             background: primaryColor,
@@ -323,18 +439,147 @@ function buildChatTheme(primaryColor) {
                 bottom: "10px",
                 left: "10px",
                 right: "10px",
-                top: "10px"
-            }
+                top: "10px",
+            },
         },
         content: {
-            background: "#ffffff"
+            background: "#ffffff",
+        },
+        cta: {
+            background: "#e1e2e1",
+            text: {
+                // Use a dark color that contrasts well with the light grey background
+                // instead of primaryColor which may not have sufficient contrast
+                color: "#333333",
+                fontFamily,
+                fontSize: "14px",
+            },
+        },
+        footer: {
+            background: primaryColor,
+            border: {
+                color: primaryColor,
+                radius: "0px",
+                width: "0px",
+            },
+            branding: {
+                text: {
+                    color: "#ffffff",
+                    fontFamily,
+                    fontSize: "14px",
+                    fontWeight: "normal",
+                    fontStyle: "normal",
+                },
+            },
         },
         header: {
             background: primaryColor,
+            avatarBackground: "transparent",
+            border: {
+                color: primaryColor,
+                radius: "0px",
+                width: "0px",
+            },
             text: {
-                color: onPrimary
-            }
-        }
+                color: secondaryColor,
+                fontFamily,
+                fontSize: "16px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+            subtitle: {
+                color: secondaryColor,
+                fontFamily,
+                fontSize: "10px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+        },
+        input: {
+            background: "#ffffff",
+            border: {
+                radius: "20px",
+            },
+            text: {
+                color: "#000000",
+                fontFamily,
+                fontSize: "14px",
+            },
+            placeholder: {
+                color: "#e1e2e1",
+                fontFamily,
+                fontSize: "14px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+        },
+        textTypingStatus: {
+            text: {
+                color: "#bfbfbf",
+                fontFamily,
+                fontSize: "14px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+        },
+        menu: {
+            item: {
+                height: "24px",
+                text: {
+                    fontSize: "14px",
+                },
+            },
+        },
+        menuButton: {
+            color: "#ffffff",
+        },
+        messages: {
+            maxWidth: "400px",
+            mine: {
+                bubbleColor: "#f2f2f2",
+                text: {
+                    color: "#454545",
+                    fontFamily,
+                    fontSize: "18px",
+                    fontStyle: "normal",
+                    fontWeight: "normal",
+                },
+            },
+            others: {
+                bubbleColor: "#e1e2e1",
+                text: {
+                    color: "#262726",
+                    fontFamily,
+                    fontSize: "18px",
+                    fontStyle: "normal",
+                    fontWeight: "normal",
+                },
+            },
+            padding: {
+                bottom: "0px",
+                left: "20px",
+                right: "16px",
+                top: "16px",
+            },
+        },
+        refreshButton: {
+            color: secondaryColor,
+        },
+        minimizeButton: {
+            color: secondaryColor,
+        },
+        cancelButton: {
+            color: secondaryColor,
+        },
+        primaryColor: primaryColor,
+        sendButton: {
+            color: "#505050",
+            width: "20px",
+        },
+        size: {
+            width: "500px",
+            height: "700px",
+        },
     };
 }
 
@@ -687,9 +932,39 @@ var MOBILE_MEDIA_QUERY = "(max-width: 640px), (max-height: 480px) and (pointer:
  * Two concurrent bars would fight over it, and either one unmounting would clear it.
  */
 var ACTION_BAR_HEIGHT_VAR = "--xapp-action-bar-height";
+/**
+ * Whether pressing this button ends up in the form widget.
+ *
+ * `schedule` is the same form-widget infrastructure with a calendar icon, so it is the
+ * same button as far as this question goes. XappMedia/chat-widget#1626.
+ */
+function opensFormWidget(button) {
+    return lib.isActionBarFormButton(button) || lib.isActionBarScheduleButton(button);
+}
+/**
+ * Which of a bar's configured buttons would actually render.
+ *
+ * Exported because the decision is needed in two places: here, to render, and in
+ * `ChatWidget`, to know whether the bar has anything left to show and whether anything on
+ * the page can still open the form widget. Two copies of this predicate would drift.
+ */
+function visibleActionBarButtons(buttons, options) {
+    if (buttons === void 0) { buttons = []; }
+    if (options === void 0) { options = {}; }
+    var chatDisabled = options.chatDisabled, formDisabled = options.formDisabled;
+    return buttons.filter(function (button) {
+        if (chatDisabled && lib.isActionBarChatButton(button)) {
+            return false;
+        }
+        if (formDisabled && opensFormWidget(button)) {
+            return false;
+        }
+        return true;
+    });
+}
 var ActionBar = function (_a) {
     var _b, _c;
-    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _d = _a.hasUserInteracted, hasUserInteracted = _d === void 0 ? false : _d, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
+    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, formDisabled = _a.formDisabled, _d = _a.hasUserInteracted, hasUserInteracted = _d === void 0 ? false : _d, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
     var _e = useState(false), isMobile = _e[0], setIsMobile = _e[1];
     // An explicit override can only be a width; without one we ask the same question the
     // stylesheets ask, so the two cannot disagree. A survey of production on 2026-08-19
@@ -760,10 +1035,9 @@ var ActionBar = function (_a) {
             document.documentElement.style.removeProperty(ACTION_BAR_HEIGHT_VAR);
         };
     }, [isMobile]);
-    // Filter out chat buttons if chat is disabled
-    var filteredButtons = chatDisabled
-        ? config.buttons.filter(function (button) { return !lib.isActionBarChatButton(button); })
-        : config.buttons;
+    // Drop the buttons this page has no use for - chat when chat is disabled, form/schedule
+    // when the form already is the page.
+    var filteredButtons = visibleActionBarButtons(config.buttons, { chatDisabled: chatDisabled, formDisabled: formDisabled });
     // Build class names - ActionBar stays visible even when chat is open
     var classNames = [
         "xapp-action-bar",
@@ -776,7 +1050,7 @@ var ActionBar = function (_a) {
     // - Must have CTA config with a message
     // - Chat must not be visible (user hasn't opened it)
     // - Chat must not be disabled
-    var hasChatButton = config.buttons.some(lib.isActionBarChatButton);
+    var hasChatButton = filteredButtons.some(lib.isActionBarChatButton);
     var showCta = ((_c = config.cta) === null || _c === void 0 ? void 0 : _c.message) && !visible && !chatDisabled && hasChatButton;
     var handleCtaClick = function () {
         onChatClick();
@@ -784,6 +1058,13 @@ var ActionBar = function (_a) {
     var handleCtaDismiss = function () {
         onCtaDismiss === null || onCtaDismiss === void 0 ? void 0 : onCtaDismiss();
     };
+    // A bar with nothing in it is a bare strip of chrome the visitor cannot use. The bar
+    // renders on `actionBar.enabled` alone, so an App configured with only Form + Schedule
+    // filters down to zero on a form page - render nothing rather than an empty shell.
+    // This is after the hooks on purpose; bailing earlier would change the hook order.
+    if (filteredButtons.length === 0) {
+        return null;
+    }
     return (jsxs("div", { ref: barRef, className: classNames, role: "toolbar", "aria-label": "Chat actions", children: [showCta && (jsx("div", { className: "xapp-action-bar-cta-wrapper", children: jsx(ActionBarCta, { config: config.cta, isMobile: isMobile, onClick: handleCtaClick, onDismiss: handleCtaDismiss, hasUserInteracted: hasUserInteracted }) })), jsx("div", { className: "xapp-action-bar__buttons", children: filteredButtons.map(function (button) { return (jsx(ActionBarButton, { button: button, chatActive: visible, onChatClick: onChatClick, onChatMinimize: onChatMinimize, onFormClick: onFormClick, isMobile: isMobile }, button.id)); }) })] }));
 };
 
@@ -12552,6 +12833,64 @@ function getSrcId(url) {
     return res;
 }
 
+/*! Copyright (c) 2026, XAPPmedia */
+/**
+ * Body attribute a host page sets to declare "a form widget already *is* this page".
+ *
+ * The standalone contact/booking page (contact.xapp.ai, book.xapp.ai, sche.dule.pro)
+ * renders a docked form-widget as its whole content and then injects the chat widget on
+ * top of it. Without a signal, the injected widget cheerfully offers two more ways into
+ * the same form - an ActionBar Contact/Book button and the form-widget's own side button.
+ *
+ * This is a declaration, not a detection: the page knows what it renders, the widget does
+ * not. Sniffing the DOM for a docked form would be guesswork, and it would also fire on
+ * pages that legitimately embed a form *and* want a separate one from the bar.
+ *
+ * The writer is `@xapp/form-widget`'s `useFormPageMarker` (used by `@xapp/contact-app`).
+ * The two packages ship independently, so this string is the contract between them -
+ * the same arrangement `[data-xapp-form-side-button]` already uses. Do not rename it on
+ * one side only. XappMedia/chat-widget#1626.
+ */
+var FORM_PAGE_ATTRIBUTE = "data-xapp-form-page";
+/**
+ * Whether a form widget is already the page, per the marker above.
+ */
+function isFormPage() {
+    if (typeof document === "undefined" || !document.body) {
+        return false;
+    }
+    return document.body.getAttribute(FORM_PAGE_ATTRIBUTE) === "true";
+}
+/**
+ * Reactive form of {@link isFormPage}.
+ *
+ * The marker and the chat widget mount independently - the widget arrives from a
+ * `<script>` tag, so it can win or lose the race against the page's own React tree.
+ * Observing the attribute rather than reading it once means the filter settles correctly
+ * whichever order they land in.
+ */
+function useIsFormPage() {
+    var _a = useState(isFormPage), formPage = _a[0], setFormPage = _a[1];
+    useEffect(function () {
+        if (typeof document === "undefined" || !document.body) {
+            return undefined;
+        }
+        // Re-read on mount: the marker may have appeared between the initial state and here.
+        setFormPage(isFormPage());
+        // jsdom has MutationObserver, but a customer's browser might not - an old browser
+        // that reads the marker once is still better than one that throws on mount.
+        if (typeof MutationObserver === "undefined") {
+            return undefined;
+        }
+        var observer = new MutationObserver(function () {
+            setFormPage(isFormPage());
+        });
+        observer.observe(document.body, { attributes: true, attributeFilter: [FORM_PAGE_ATTRIBUTE] });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return formPage;
+}
+
 function useChatServerVisitorId() {
     var dispatch = useChatServerDispatch();
     var clientVisitorId = useSelector(function (state) {
@@ -36796,6 +37135,21 @@ var ChatWidgetUI = function (props) {
     log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
     var actionBarEnabled = ((_s = config === null || config === void 0 ? void 0 : config.actionBar) === null || _s === void 0 ? void 0 : _s.enabled) === true;
+    // The host page declares this; the widget cannot work it out. On the standalone
+    // contact/booking page the form already *is* the page, which makes every button that
+    // only opens one redundant. XappMedia/chat-widget#1626.
+    var isFormPage = useIsFormPage();
+    var actionBarButtons = useMemo(function () {
+        return actionBarEnabled && (config === null || config === void 0 ? void 0 : config.actionBar)
+            ? visibleActionBarButtons(config.actionBar.buttons, {
+                chatDisabled: config.disabled,
+                formDisabled: isFormPage,
+            })
+            : [];
+    }, [actionBarEnabled, config === null || config === void 0 ? void 0 : config.actionBar, config === null || config === void 0 ? void 0 : config.disabled, isFormPage]);
+    // A bar that filters down to nothing is a bare strip of chrome. Treat it as if the bar
+    // were off, so the visitor still gets the plain chat button rather than an empty shell.
+    var actionBarVisible = actionBarEnabled && actionBarButtons.length > 0;
     // Disable greeting in preview mode
     useGreeting(!isOffline && !props.preChatFormEnabled && visible && !previewMode);
     var connectionStatus = chatState.connection.connectionStatus;
@@ -36805,23 +37159,31 @@ var ChatWidgetUI = function (props) {
         }
     }, [connectionStatus, onConnectionStatusChange]);
     useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
-    // Pre-load form-widget script if formWidgetKey is provided
+    // Only reach for form.xapp.ai when something on this page can still open the form.
+    //
+    // Loading it is not free: the script mounts a second form-widget instance whose wrapper
+    // renders its own sticky "Contact Us" side button. On a page that already is the form
+    // that button is a third way into the same thing, so not loading the script at all is
+    // what actually removes it - hiding it in CSS only papers over the second instance.
+    //
+    // With no bar configured the side button IS the entry point, so that case still loads.
+    var formWidgetNeeded = !isFormPage && (!actionBarEnabled || actionBarButtons.some(opensFormWidget));
     useEffect(function () {
-        if (config === null || config === void 0 ? void 0 : config.formWidgetKey) {
+        if ((config === null || config === void 0 ? void 0 : config.formWidgetKey) && formWidgetNeeded) {
             preloadFormWidgetScript(config.formWidgetKey);
         }
-    }, [config === null || config === void 0 ? void 0 : config.formWidgetKey]);
+    }, [config === null || config === void 0 ? void 0 : config.formWidgetKey, formWidgetNeeded]);
     // Set body attribute when actionBar is enabled (used by CSS to hide form-widget side button on mobile)
     // Uses reference counting to handle multiple widget instances
     useEffect(function () {
-        if (actionBarEnabled) {
+        if (actionBarVisible) {
             // Increment reference count
             var currentCount = parseInt(document.body.getAttribute("data-xapp-action-bar-count") || "0", 10);
             document.body.setAttribute("data-xapp-action-bar-count", String(currentCount + 1));
             document.body.setAttribute("data-xapp-action-bar-enabled", "true");
         }
         return function () {
-            if (actionBarEnabled) {
+            if (actionBarVisible) {
                 // Decrement reference count
                 var currentCount = parseInt(document.body.getAttribute("data-xapp-action-bar-count") || "0", 10);
                 var newCount = Math.max(0, currentCount - 1);
@@ -36834,7 +37196,7 @@ var ChatWidgetUI = function (props) {
                 }
             }
         };
-    }, [actionBarEnabled]);
+    }, [actionBarVisible]);
     // 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) || {
@@ -36842,9 +37204,9 @@ var ChatWidgetUI = function (props) {
         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: (_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), { 
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()).concat(actionBarVisible ? " 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 }) })] }), actionBarVisible && 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: (_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 })] }));
+                            cta: (_10 = config.actionBar.cta) !== null && _10 !== void 0 ? _10 : config.cta }), visible: visible, chatDisabled: config.disabled, formDisabled: isFormPage, 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.