@xapp/chat-widget 1.104.0 → 1.105.0

package/dist/index.es.js

@@ -328,7 +328,7 @@ function buildChatWidgetChannel(props) {
     // and the text on it are always a matched pair rather than one scraped
     // value and one guess.
     const primaryColor = (0, color_1.usableColorOr)(props.primaryColor, DEFAULT_PRIMARY);
-    return Object.assign({ type: "chat-widget", 
+    return Object.assign(Object.assign({ type: "chat-widget", 
         // MCP by default. The widget runs on a public page, so homeowner mode
         // — which is unauthenticated and carries the appId in the url — is the
         // only one that can work there; business_owner needs a token, and a
@@ -339,7 +339,7 @@ function buildChatWidgetChannel(props) {
             mcp: {
                 mode: "homeowner"
             }
-        }, theme: buildChatTheme(primaryColor, props.secondaryColor), actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber }) }, (businessName ? { botName: businessName } : {}));
+        }, theme: buildChatTheme(primaryColor, props.secondaryColor), actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber }) }, (formWidgetKey ? { formWidgetKey } : {})), (businessName ? { botName: businessName } : {}));
 }
 /**
  * The dock of buttons that replaces the plain chat bubble.
@@ -3870,6 +3870,31 @@ function useVisualViewportProperties(enabled) {
         return trackVisualViewport();
     }, [enabled]);
 }
+/** The sessionStorage key the booking page writes the flag to. */
+var TEST_LEAD_STORAGE_KEY = "xa_test";
+/** The attribute sent with a lead submission. */
+var TEST_LEAD_ATTRIBUTE = "xaTest";
+/** True when the current browser session is a test-lead page view. */
+function isTestLeadSession() {
+    try {
+        return sessionStorage.getItem(TEST_LEAD_STORAGE_KEY) === "1";
+    }
+    catch (_a) {
+        // Storage can be blocked by the browser; treat that as a real visit.
+        return false;
+    }
+}
+/**
+ * Tags the attributes as a test lead when the session flag is set. A test must
+ * never be counted as Google traffic, so any `rwg_token` is dropped as well.
+ */
+function addTestLeadAttribute(attributes) {
+    if (isTestLeadSession()) {
+        attributes[TEST_LEAD_ATTRIBUTE] = true;
+        delete attributes["rwg_token"];
+    }
+    return attributes;
+}
 
 /**
  * Quicker configurable uuid
@@ -3893,6 +3918,7 @@ function uuid() {
 var IconButton_1 = IconButton;
 var RichInput_1 = RichInput;
 var SuggestionsList_1 = SuggestionsList;
+var addTestLeadAttribute_1 = addTestLeadAttribute;
 var findItemByIndex_1 = findItemByIndex;
 var getAttribution_1 = getAttribution;
 var getItemsLength_1 = getItemsLength;
@@ -6362,6 +6388,8 @@ var StentorDirectChat = /** @class */ (function () {
                         if (origin) {
                             attributes["origin"] = origin;
                         }
+                        // A test lead from Studio's "send yourself a test lead" booking page
+                        addTestLeadAttribute_1(attributes);
                         // Add current time for accurate date/time responses
                         attributes["currentTime"] = new Date().toISOString();
                         now = new Date().getTime();
@@ -7590,6 +7618,8 @@ var StentorRouterChat = /** @class */ (function () {
                 if (origin) {
                     attributes["origin"] = origin;
                 }
+                // A test lead from Studio's "send yourself a test lead" booking page
+                addTestLeadAttribute_1(attributes);
                 // Add current time for accurate date/time responses
                 attributes["currentTime"] = new Date().toISOString();
                 request = requestFromMessage(message, userId, this.isNewSession, sessionId, accessToken, attributes, this.visitorInfo);
@@ -37292,12 +37322,25 @@ var ChatWidgetConnected = function (props) {
     }
     return (jsx(ChatConfigContext.Provider, { value: config, children: jsx(ChatServerContext.Provider, { value: chatServer, children: jsx(ChatWidgetUI, __assign$1({}, props, { config: rawConfig })) }) }));
 };
+var HOST_FORM_WIDGET_CHECK_MS = 500;
+/** About 15s: long enough for a slow host script, short enough not to poll forever. */
+var HOST_FORM_WIDGET_MAX_CHECKS = 30;
+/** The form widget key a Form/Book button carries on its own formConfig, if any. */
+function formButtonKey(button) {
+    var _a, _b;
+    return opensFormWidget(button)
+        ? ((_b = (_a = button.formConfig) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.key) || undefined
+        : undefined;
+}
+function isHostFormWidgetOnPage() {
+    return isFormWidgetScriptLoaded() || isFormWidgetReady();
+}
 /**
  * Inner ChatWidget component that renders the actual UI.
  * Exported for use by StaticChatWidgetContainer to avoid infinite loops.
  */
 var ChatWidgetUI = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
+    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, _15, _16, _17, _18, _19, _20, _21, _22, _23;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // Publish the visual viewport's geometry so the panel can size around the soft keyboard.
@@ -37328,21 +37371,21 @@ var ChatWidgetUI = function (props) {
     var popOutEnabled = dockedMode && ((_c = props.config.popOut) === null || _c === void 0 ? void 0 : _c.enabled) === true;
     var popOutMinWidth = (_e = (_d = props.config.popOut) === null || _d === void 0 ? void 0 : _d.minWidth) !== null && _e !== void 0 ? _e : DEFAULT_POP_OUT_MIN_WIDTH;
     var anchorRef = useRef(null);
-    var _21 = useState(false), anchorOffScreen = _21[0], setAnchorOffScreen = _21[1];
+    var _24 = useState(false), anchorOffScreen = _24[0], setAnchorOffScreen = _24[1];
     // A returning visitor's chat often sits below the fold at load. Following them before they
     // have even reached it would put a floating window in front of someone who never scrolled
     // past anything, so the chat has to have been on screen once first.
-    var _22 = useState(false), anchorSeen = _22[0], setAnchorSeen = _22[1];
+    var _25 = useState(false), anchorSeen = _25[0], setAnchorSeen = _25[1];
     // Set when the visitor puts the floating window away: it stays put until their own
     // scrolling brings the chat's place on the page back into view.
-    var _23 = useState(false), popOutDismissed = _23[0], setPopOutDismissed = _23[1];
+    var _26 = useState(false), popOutDismissed = _26[0], setPopOutDismissed = _26[1];
     // On a phone the chat offers its entry point rather than covering the page; this is set when
     // the visitor taps that and asks for the conversation.
-    var _24 = useState(false), mobileOpened = _24[0], setMobileOpened = _24[1];
+    var _27 = useState(false), mobileOpened = _27[0], setMobileOpened = _27[1];
     // Tracked rather than read at render: a visitor who narrows the window or rotates a tablet
     // while the chat is popped out would otherwise keep a floating window over most of a phone
     // screen until some unrelated re-render happened along.
-    var _25 = useState(typeof window === "undefined" ? 0 : window.innerWidth), viewportWidth = _25[0], setViewportWidth = _25[1];
+    var _28 = useState(typeof window === "undefined" ? 0 : window.innerWidth), viewportWidth = _28[0], setViewportWidth = _28[1];
     useEffect(function () {
         if (!popOutEnabled || typeof window === "undefined") {
             return undefined;
@@ -37508,10 +37551,10 @@ var ChatWidgetUI = function (props) {
     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 _26 = useState((!canMinimize && !canCancel) ||
+    var _29 = useState((!canMinimize && !canCancel) ||
         // !!get("visible") ||
-        (!isNaN(autoOpenOnWidthValue) ? autoOpenOnWidthMatch : chatState.visuals.visible)), visible = _26[0], setVisibleState = _26[1];
-    var _27 = useState(false); _27[0]; var setTypingState = _27[1]; // false initially - state kept for potential external observers
+        (!isNaN(autoOpenOnWidthValue) ? autoOpenOnWidthMatch : chatState.visuals.visible)), visible = _29[0], setVisibleState = _29[1];
+    var _30 = useState(false); _30[0]; var setTypingState = _30[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
@@ -37558,7 +37601,7 @@ var ChatWidgetUI = function (props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _28 = useState(!document.hidden), isTabVisible = _28[0], setIsTabVisible = _28[1];
+    var _31 = useState(!document.hidden), isTabVisible = _31[0], setIsTabVisible = _31[1];
     useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
@@ -37782,8 +37825,8 @@ var ChatWidgetUI = function (props) {
         }));
     }
     // Action Bar state and handlers
-    var _29 = useState(false), formModalOpen = _29[0], setFormModalOpen = _29[1];
-    var _30 = useState(null), activeFormConfig = _30[0], setActiveFormConfig = _30[1];
+    var _32 = useState(false), formModalOpen = _32[0], setFormModalOpen = _32[1];
+    var _33 = useState(null), activeFormConfig = _33[0], setActiveFormConfig = _33[1];
     var handleFormButtonClick = useCallback(function (formButton) {
         // If form-widget is configured, use its openForm API
         // The form-widget script should already be pre-loaded
@@ -37855,14 +37898,51 @@ var ChatWidgetUI = function (props) {
     // 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();
+    // Studio can save Form/Book buttons with no form widget key anywhere. They can only open the
+    // FormModal fallback, which then says "Form widget key not configured" - so drop them, unless
+    // the host page installed the form widget itself. One key anywhere is enough: a page has one
+    // form widget and every Form/Book button opens it through the same global.
+    var configuredButtons = (_2 = (_1 = config === null || config === void 0 ? void 0 : config.actionBar) === null || _1 === void 0 ? void 0 : _1.buttons) !== null && _2 !== void 0 ? _2 : [];
+    var hasKeylessFormButton = !(config === null || config === void 0 ? void 0 : config.formWidgetKey) &&
+        configuredButtons.some(opensFormWidget) &&
+        !configuredButtons.some(formButtonKey);
+    var _34 = useState(function () { return hasKeylessFormButton && isHostFormWidgetOnPage(); }), hostFormWidget = _34[0], setHostFormWidget = _34[1];
+    // The host's form-widget script loads independently of ours and can arrive after the first
+    // render, so keep looking for a while rather than deciding once. This only runs when there is
+    // no key anywhere, and with no key we never preload - so the script this finds by its fixed id
+    // cannot be our own.
+    useEffect(function () {
+        if (!hasKeylessFormButton || hostFormWidget) {
+            return undefined;
+        }
+        var checks = 0;
+        var interval = setInterval(function () {
+            checks++;
+            if (isHostFormWidgetOnPage()) {
+                setHostFormWidget(true);
+                clearInterval(interval);
+            }
+            else if (checks >= HOST_FORM_WIDGET_MAX_CHECKS) {
+                clearInterval(interval);
+            }
+        }, HOST_FORM_WIDGET_CHECK_MS);
+        return function () { return clearInterval(interval); };
+    }, [hasKeylessFormButton, hostFormWidget]);
+    var actionBarConfig = useMemo(function () {
+        var actionBar = config === null || config === void 0 ? void 0 : config.actionBar;
+        if (!actionBar || !hasKeylessFormButton || hostFormWidget) {
+            return actionBar;
+        }
+        return __assign$1(__assign$1({}, actionBar), { buttons: actionBar.buttons.filter(function (button) { return !opensFormWidget(button); }) });
+    }, [config === null || config === void 0 ? void 0 : config.actionBar, hasKeylessFormButton, hostFormWidget]);
     var actionBarButtons = useMemo(function () {
-        return actionBarEnabled && (config === null || config === void 0 ? void 0 : config.actionBar)
-            ? visibleActionBarButtons(config.actionBar.buttons, {
+        return actionBarEnabled && actionBarConfig
+            ? visibleActionBarButtons(actionBarConfig.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]);
+    }, [actionBarEnabled, actionBarConfig, 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;
@@ -37874,7 +37954,7 @@ var ChatWidgetUI = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_1 = props.config) === null || _1 === void 0 ? void 0 : _1.middlewareUrl);
+    useExternalScript((_3 = props.config) === null || _3 === void 0 ? void 0 : _3.middlewareUrl);
     // 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
@@ -37884,11 +37964,16 @@ var ChatWidgetUI = function (props) {
     //
     // With no bar configured the side button IS the entry point, so that case still loads.
     var formWidgetNeeded = !isFormPage && (!actionBarEnabled || actionBarButtons.some(opensFormWidget));
+    // The top-level key is the documented place for it, but an App can carry the key only on
+    // a Form/Book button's formConfig - buildChatWidgetChannel did exactly that. Reading only
+    // the top-level key left the script unloaded, so every click waited out
+    // openFormWidgetWhenReady before the modal fallback found the button's key.
+    var formWidgetKey = (_4 = config === null || config === void 0 ? void 0 : config.formWidgetKey) !== null && _4 !== void 0 ? _4 : actionBarButtons.map(formButtonKey).find(Boolean);
     useEffect(function () {
-        if ((config === null || config === void 0 ? void 0 : config.formWidgetKey) && formWidgetNeeded) {
-            preloadFormWidgetScript(config.formWidgetKey);
+        if (formWidgetKey && formWidgetNeeded) {
+            preloadFormWidgetScript(formWidgetKey);
         }
-    }, [config === null || config === void 0 ? void 0 : config.formWidgetKey, formWidgetNeeded]);
+    }, [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 () {
@@ -37914,23 +37999,23 @@ var ChatWidgetUI = function (props) {
         };
     }, [actionBarVisible]);
     // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
-    var widgetAgent = ((_2 = chatState.agents["agent:robot"]) === null || _2 === void 0 ? void 0 : _2.user) ||
+    var widgetAgent = ((_5 = chatState.agents["agent:robot"]) === null || _5 === void 0 ? void 0 : _5.user) ||
         (config === null || config === void 0 ? void 0 : config.agent) || {
         nick: "agent:robot",
         avatarPath: config.avatarUrl,
         display_name: "Agent",
     };
-    var widgetContainer = (jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()).concat(actionBarVisible ? " widget-container--with-action-bar" : "").concat(poppedOut ? " widget-container--popped" : "").concat(collapsedOnMobile ? " widget-container--collapsed" : ""), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), !headerHidden && (jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: poppedOut ? handlePopOutDismiss : handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: poppedOut || canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, debugMode: (_5 = (_4 = (_3 = props.config) === null || _3 === void 0 ? void 0 : _3.connection) === null || _4 === void 0 ? void 0 : _4.mcp) === null || _5 === void 0 ? void 0 : _5.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: (_7 = (_6 = props.config) === null || _6 === void 0 ? void 0 : _6.typingStatus) === null || _7 === void 0 ? void 0 : _7.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: (_8 = config === null || config === void 0 ? void 0 : config.input) === null || _8 === void 0 ? void 0 : _8.placeholder, sendButtonIcon: (_10 = (_9 = config === null || config === void 0 ? void 0 : config.footer) === null || _9 === void 0 ? void 0 : _9.sendButton) === null || _10 === void 0 ? void 0 : _10.icon, sendButtonIconHover: (_12 = (_11 = config === null || config === void 0 ? void 0 : config.footer) === null || _11 === void 0 ? void 0 : _11.sendButton) === null || _12 === void 0 ? void 0 : _12.iconHover, sendButtonIconDisabled: (_14 = (_13 = config === null || config === void 0 ? void 0 : config.footer) === null || _13 === void 0 ? void 0 : _13.sendButton) === null || _14 === void 0 ? void 0 : _14.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: menuConfig, footerConfig: (_15 = props.config) === null || _15 === void 0 ? void 0 : _15.footer, inputConfig: (_16 = props.config) === null || _16 === void 0 ? void 0 : _16.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }));
+    var widgetContainer = (jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()).concat(actionBarVisible ? " widget-container--with-action-bar" : "").concat(poppedOut ? " widget-container--popped" : "").concat(collapsedOnMobile ? " widget-container--collapsed" : ""), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), !headerHidden && (jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: poppedOut ? handlePopOutDismiss : handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: poppedOut || canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, debugMode: (_8 = (_7 = (_6 = props.config) === null || _6 === void 0 ? void 0 : _6.connection) === null || _7 === void 0 ? void 0 : _7.mcp) === null || _8 === void 0 ? void 0 : _8.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: (_10 = (_9 = props.config) === null || _9 === void 0 ? void 0 : _9.typingStatus) === null || _10 === void 0 ? void 0 : _10.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: (_11 = config === null || config === void 0 ? void 0 : config.input) === null || _11 === void 0 ? void 0 : _11.placeholder, sendButtonIcon: (_13 = (_12 = config === null || config === void 0 ? void 0 : config.footer) === null || _12 === void 0 ? void 0 : _12.sendButton) === null || _13 === void 0 ? void 0 : _13.icon, sendButtonIconHover: (_15 = (_14 = config === null || config === void 0 ? void 0 : config.footer) === null || _14 === void 0 ? void 0 : _14.sendButton) === null || _15 === void 0 ? void 0 : _15.iconHover, sendButtonIconDisabled: (_17 = (_16 = config === null || config === void 0 ? void 0 : config.footer) === null || _16 === void 0 ? void 0 : _16.sendButton) === null || _17 === void 0 ? void 0 : _17.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: menuConfig, footerConfig: (_18 = props.config) === null || _18 === void 0 ? void 0 : _18.footer, inputConfig: (_19 = props.config) === null || _19 === void 0 ? void 0 : _19.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }));
     return (jsxs(Fragment, { children: [popOutEnabled ? (
             // The anchor keeps the chat's place in the page, so the layout does not jump when
             // the chat pops out. The chat itself lives in popOutHost, which the effect above
             // moves between this anchor and the body.
-            jsx("div", { className: "widget-anchor", ref: anchorRef, children: popOutHost && createPortal(widgetContainer, popOutHost) })) : (widgetContainer), actionBarVisible && config.actionBar && !(collapsedOnMobile && mobileEntry === "button") ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: __assign$1(__assign$1({}, config.actionBar), { 
+            jsx("div", { className: "widget-anchor", ref: anchorRef, children: popOutHost && createPortal(widgetContainer, popOutHost) })) : (widgetContainer), actionBarVisible && actionBarConfig && !(collapsedOnMobile && mobileEntry === "button") ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: __assign$1(__assign$1({}, actionBarConfig), { 
                             // Use actionBar.cta if set, otherwise fall back to widget-level cta
-                            cta: resolveCta((_17 = config.actionBar.cta) !== null && _17 !== void 0 ? _17 : config.cta, {
+                            cta: resolveCta((_20 = actionBarConfig.cta) !== null && _20 !== void 0 ? _20 : config.cta, {
                                 hasConversation: conversationOnScreen,
                                 arrivedViaChatLink: arrivedViaChatLink,
-                            }) }), visible: collapsedOnMobile ? false : visible, chatDisabled: config.disabled, formDisabled: isFormPage, hasUserInteracted: (_18 = chatState.visuals) === null || _18 === void 0 ? void 0 : _18.hasInteracted, onChatClick: collapsedOnMobile ? handleMobileOpen : chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick, onCtaDismiss: handleCtaDismiss }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: visible && !collapsedOnMobile ? "visible" : "", onClick: collapsedOnMobile ? handleMobileOpen : chatButtonOnClick, config: chatButtonCta, imageUrl: (_19 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _19 === void 0 ? void 0 : _19.imageUrl, visible: collapsedOnMobile ? false : visible, hasInteracted: (_20 = chatState.visuals) === null || _20 === void 0 ? void 0 : _20.hasInteracted, onCtaDismiss: handleCtaDismiss })), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
+                            }) }), visible: collapsedOnMobile ? false : visible, chatDisabled: config.disabled, formDisabled: isFormPage, hasUserInteracted: (_21 = chatState.visuals) === null || _21 === void 0 ? void 0 : _21.hasInteracted, onChatClick: collapsedOnMobile ? handleMobileOpen : chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick, onCtaDismiss: handleCtaDismiss }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: visible && !collapsedOnMobile ? "visible" : "", onClick: collapsedOnMobile ? handleMobileOpen : chatButtonOnClick, config: chatButtonCta, imageUrl: (_22 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _22 === void 0 ? void 0 : _22.imageUrl, visible: collapsedOnMobile ? false : visible, hasInteracted: (_23 = chatState.visuals) === null || _23 === void 0 ? void 0 : _23.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.