@xapp/chat-widget 1.103.0 → 1.104.0

package/dist/index.es.js

@@ -2,6 +2,7 @@ import React, { useCallback, useState, useEffect, useRef, useLayoutEffect, creat
 export { default as React } from 'react';
 import require$$0, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useSelector, useDispatch, Provider } from 'react-redux';
+import { createPortal } from 'react-dom';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2398,6 +2399,16 @@ function stripChatContinueParam(win) {
 function hasConversation(chats) {
     return !!(chats === null || chats === void 0 ? void 0 : chats.some(function (chat) { return chat.type === "chat.msg"; }));
 }
+/**
+ * True once the visitor has said something themselves.
+ *
+ * Stricter than `hasConversation`, which counts the greeting the assistant posts before anyone
+ * has engaged. Visitor messages carry a `visitor:` nick, the same marker MessageList uses to
+ * decide which side of the thread a message belongs on.
+ */
+function hasVisitorMessage(chats) {
+    return !!(chats === null || chats === void 0 ? void 0 : chats.some(function (chat) { var _a, _b; return chat.type === "chat.msg" && !!((_b = (_a = chat.user) === null || _a === void 0 ? void 0 : _a.nick) === null || _b === void 0 ? void 0 : _b.startsWith("visitor:")); }));
+}
 /**
  * The CTA to show, given whether there is a conversation to go back to.
  *
@@ -37099,6 +37110,22 @@ var StaticMessagesChatWidgetContainer = function (props) {
  * After this delay of inactivity, the "stop typing" event will be sent.
  */
 var TYPING_INDICATOR_DEBOUNCE_MS = 2000;
+/**
+ * Reparenting has to happen before the browser paints, or the chat is missing for a frame on
+ * every crossing. useLayoutEffect warns when a component is rendered on a server, where there is
+ * nothing to paint and nothing to move, so fall back there.
+ */
+var useBeforePaintEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/**
+ * Narrowest viewport a pop-out is allowed on by default. Below this a floating window covers
+ * most of the screen, which is worse than letting the chat scroll away with the page.
+ */
+var DEFAULT_POP_OUT_MIN_WIDTH = 640;
+/**
+ * How long to keep correcting the message list's scroll after the chat moves. Text rewraps at
+ * the new width, so the content height settles over a frame or two rather than immediately.
+ */
+var SCROLL_SETTLE_MS = 250;
 /**
  * Check if we're in development mode. Uses typeof to prevent TypeScript
  * errors after Rollup replaces "production" with a literal string.
@@ -37270,7 +37297,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, _14, _15, _16, _17, _18, _19, _20;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // Publish the visual viewport's geometry so the panel can size around the soft keyboard.
@@ -37295,23 +37322,176 @@ var ChatWidgetUI = function (props) {
     var arrivedViaChatLink = useArrivedViaChatLink(previewMode);
     var conversationOnScreen = hasConversation(chatState.chats);
     var chatButtonCta = useMemo(function () { var _a; return resolveCta((_a = props.config) === null || _a === void 0 ? void 0 : _a.cta, { hasConversation: conversationOnScreen, arrivedViaChatLink: arrivedViaChatLink }); }, [(_b = props.config) === null || _b === void 0 ? void 0 : _b.cta, conversationOnScreen, arrivedViaChatLink]);
+    // Pop-out: an embedded chat follows the visitor down the page rather than scrolling away
+    // mid-conversation. Same component, same store - it is moved, not reopened - so the
+    // conversation continues instead of restarting in a second widget.
+    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];
+    // 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];
+    // 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];
+    // 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];
+    // 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];
+    useEffect(function () {
+        if (!popOutEnabled || typeof window === "undefined") {
+            return undefined;
+        }
+        var handleResize = function () { return setViewportWidth(window.innerWidth); };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [popOutEnabled]);
+    useEffect(function () {
+        if (!popOutEnabled || typeof IntersectionObserver === "undefined" || !anchorRef.current) {
+            return undefined;
+        }
+        var observer = new IntersectionObserver(function (entries) {
+            var entry = entries[entries.length - 1];
+            if (!entry) {
+                return;
+            }
+            setAnchorOffScreen(!entry.isIntersecting);
+            if (entry.isIntersecting) {
+                setAnchorSeen(true);
+                setPopOutDismissed(false);
+                // Back at the chat itself, so the phone entry point starts over.
+                setMobileOpened(false);
+            }
+        });
+        observer.observe(anchorRef.current);
+        return function () { return observer.disconnect(); };
+    }, [popOutEnabled]);
+    // With `after: "message"` the chat only follows a visitor who has engaged - the assistant's
+    // greeting arrives before anyone types, so it does not count. A floating window also covers
+    // most of a phone screen, so narrow screens stay on the page either way.
+    var engaged = ((_f = props.config.popOut) === null || _f === void 0 ? void 0 : _f.after) !== "message" || hasVisitorMessage(chatState.chats);
+    var following = popOutEnabled && anchorSeen && anchorOffScreen && !popOutDismissed && engaged;
+    var wideEnough = viewportWidth >= popOutMinWidth;
+    var mobileEntry = (_h = (_g = props.config.popOut) === null || _g === void 0 ? void 0 : _g.mobile) !== null && _h !== void 0 ? _h : "auto";
+    /**
+     * Too narrow for a floating window: the chat stays put and offers its entry point instead,
+     * so a visitor reading on still has a way back to the conversation.
+     */
+    var collapsedOnMobile = following && !wideEnough && mobileEntry !== "none" && !mobileOpened;
+    var poppedOut = following && (wideEnough || mobileOpened);
+    function handlePopOutDismiss() {
+        // On a phone, putting the window away goes back to the entry point rather than leaving
+        // the visitor with nothing: the conversation is still off-screen up the page.
+        if (wideEnough) {
+            setPopOutDismissed(true);
+            return;
+        }
+        setMobileOpened(false);
+    }
+    function handleMobileOpen() {
+        setMobileOpened(true);
+    }
+    // The chat always renders into this one node, and the node is what moves between the page
+    // and the corner. Swapping the JSX between an element and a portal instead would hand React
+    // a different fiber type in the same slot, remounting the whole chat - and with it the
+    // visitor's half-typed message and the message list's scroll position - on every crossing.
+    var popOutHost = useMemo(function () { return (popOutEnabled && typeof document !== "undefined" ? document.createElement("div") : null); }, [popOutEnabled]);
+    // Where the visitor is reading, recorded as they scroll. Measuring this at move time does
+    // not work: React has already applied the new size by then, so the height is the new one
+    // while the scroll position is still the old one, and the mix is meaningless.
+    var readingRef = useRef({ fromBottom: 0, latest: true });
+    useEffect(function () {
+        if (!popOutHost) {
+            return undefined;
+        }
+        var onScroll = function (event) {
+            var el = event.target;
+            if (!(el instanceof HTMLElement) || !el.classList.contains("message-list-container")) {
+                return;
+            }
+            var fromBottom = el.scrollHeight - el.clientHeight - el.scrollTop;
+            readingRef.current = {
+                fromBottom: fromBottom,
+                // Within a screenful of the newest message is "following the conversation", and
+                // that is where they go back to. The list also smooth-scrolls after each
+                // message, so the last position it reports can be mid-animation.
+                latest: fromBottom <= el.clientHeight,
+            };
+        };
+        // Scroll events do not bubble, but they do capture.
+        popOutHost.addEventListener("scroll", onScroll, true);
+        return function () { return popOutHost.removeEventListener("scroll", onScroll, true); };
+    }, [popOutHost]);
+    useBeforePaintEffect(function () {
+        if (!popOutHost) {
+            return undefined;
+        }
+        popOutHost.className = "widget-portal";
+        var target = poppedOut ? document.body : anchorRef.current;
+        if (target && popOutHost.parentElement !== target) {
+            // Moving a node blurs whatever was focused inside it, which would drop the visitor
+            // out of the message box mid-sentence, so put the caret back afterwards.
+            var focused = document.activeElement;
+            var refocus = focused instanceof HTMLElement && popOutHost.contains(focused) ? focused : undefined;
+            // The embedded chat and the floating window are different heights, so a scroll
+            // position kept in pixels lands somewhere else in the thread - usually leaving the
+            // newest message below the fold, which reads as the conversation having been lost.
+            // Distance from the bottom is what the visitor actually chose: at the newest message
+            // they stay there, and reading back stays that far back.
+            var messages_1 = popOutHost.querySelector(".message-list-container");
+            // appendChild moves the node, children and all, without React re-rendering them.
+            target.appendChild(popOutHost);
+            // Read afresh each time rather than closing over the position from before the move:
+            // the delayed corrections below run up to a quarter of a second later, and a visitor
+            // who scrolls back through the thread in that window must not be snapped forward
+            // again. Their scrolling updates the ref, so the later passes simply hold their place.
+            var restoreScroll = function () {
+                if (!messages_1) {
+                    return;
+                }
+                var _a = readingRef.current, fromBottom = _a.fromBottom, latest = _a.latest;
+                var bottom = messages_1.scrollHeight - messages_1.clientHeight;
+                messages_1.scrollTop = latest ? bottom : Math.max(0, bottom - fromBottom);
+            };
+            restoreScroll();
+            refocus === null || refocus === void 0 ? void 0 : refocus.focus({ preventScroll: true });
+            // The thread rewraps at the new width, so the content keeps growing for a frame or
+            // two after the move. Restoring only once leaves the newest message under the fold,
+            // which is what a visitor reads as "my conversation is gone".
+            var frame_1 = requestAnimationFrame(restoreScroll);
+            var settled_1 = window.setTimeout(restoreScroll, SCROLL_SETTLE_MS);
+            return function () {
+                cancelAnimationFrame(frame_1);
+                window.clearTimeout(settled_1);
+            };
+        }
+        return undefined;
+    }, [popOutHost, poppedOut]);
+    useEffect(function () { return function () { return popOutHost === null || popOutHost === void 0 ? void 0 : popOutHost.remove(); }; }, [popOutHost]);
     // Only an embedded widget may drop its header. In normal mode the header holds the
     // minimize and close buttons, so hiding it would leave a floating window with no way out.
-    var headerHidden = ((_c = props.config.header) === null || _c === void 0 ? void 0 : _c.hidden) === true && (dockedMode || staticMode);
+    // While popped out the header is what lets the visitor put the window away, so it stays.
+    var headerHidden = ((_j = props.config.header) === null || _j === void 0 ? void 0 : _j.hidden) === true && (dockedMode || staticMode) && !poppedOut;
     // The header is the only place a HEADER_LEFT / HEADER_RIGHT menu button renders. Without it
     // the menu would be unreachable, so hand the button to the footer instead.
     var menuConfig = useMemo(function () {
         return headerHidden && props.config.menu && props.config.menu.menuButtonLocation !== "FOOTER"
             ? __assign$1(__assign$1({}, props.config.menu), { menuButtonLocation: "FOOTER" }) : props.config.menu;
     }, [headerHidden, props.config.menu]);
-    var canRefresh = (_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.refresh;
+    var canRefresh = (_l = (_k = props.config.header) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.refresh;
     // can't minimize in docked mode, static mode, or preview mode.
-    var canMinimize = !dockedMode && !staticMode && !previewMode && ((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.minimize);
-    log("docked: ".concat(dockedMode, " static: ").concat(staticMode, " preview: ").concat(previewMode, " minimized: ").concat((_j = (_h = props.config.header) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.minimize));
+    var canMinimize = !dockedMode && !staticMode && !previewMode && ((_o = (_m = props.config.header) === null || _m === void 0 ? void 0 : _m.actions) === null || _o === void 0 ? void 0 : _o.minimize);
+    log("docked: ".concat(dockedMode, " static: ").concat(staticMode, " preview: ").concat(previewMode, " minimized: ").concat((_q = (_p = props.config.header) === null || _p === void 0 ? void 0 : _p.actions) === null || _q === void 0 ? void 0 : _q.minimize));
     var canCancel;
     // To preserve legacy behavior, cancel needs a little more checks
-    if (typeof ((_l = (_k = props.config.header) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.cancel) === "boolean") {
-        canCancel = !dockedMode && !staticMode && !previewMode && ((_o = (_m = props.config.header) === null || _m === void 0 ? void 0 : _m.actions) === null || _o === void 0 ? void 0 : _o.cancel);
+    if (typeof ((_s = (_r = props.config.header) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.cancel) === "boolean") {
+        canCancel = !dockedMode && !staticMode && !previewMode && ((_u = (_t = props.config.header) === null || _t === void 0 ? void 0 : _t.actions) === null || _u === void 0 ? void 0 : _u.cancel);
     }
     else {
         canCancel = !dockedMode && !staticMode && !previewMode;
@@ -37322,16 +37502,16 @@ var ChatWidgetUI = function (props) {
     }
     // Our state - pull from storage
     // Parse autoOpenOnWidth once for use in both initial state and useEffect
-    var autoOpenOnWidthValue = ((_p = props.config) === null || _p === void 0 ? void 0 : _p.autoOpenOnWidth)
+    var autoOpenOnWidthValue = ((_v = props.config) === null || _v === void 0 ? void 0 : _v.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 _15 = useState((!canMinimize && !canCancel) ||
+    var _26 = useState((!canMinimize && !canCancel) ||
         // !!get("visible") ||
-        (!isNaN(autoOpenOnWidthValue) ? autoOpenOnWidthMatch : chatState.visuals.visible)), 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 = _26[0], setVisibleState = _26[1];
+    var _27 = useState(false); _27[0]; var setTypingState = _27[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
@@ -37339,11 +37519,11 @@ var ChatWidgetUI = function (props) {
     // 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 = (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.autoOpenOnPattern) === null || _r === void 0 ? void 0 : _r.patterns;
+    var patternsConfig = (_x = (_w = props.config) === null || _w === void 0 ? void 0 : _w.autoOpenOnPattern) === null || _x === void 0 ? void 0 : _x.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 = (_t = (_s = props.config) === null || _s === void 0 ? void 0 : _s.autoOpenOnPattern) === null || _t === void 0 ? void 0 : _t.minimumWidth;
+    var configWidth = (_z = (_y = props.config) === null || _y === void 0 ? void 0 : _y.autoOpenOnPattern) === null || _z === void 0 ? void 0 : _z.minimumWidth;
     var currentWidth = window.innerWidth;
     var setVisible = useCallback(function (newVisible) {
         if (staticMode || previewMode) {
@@ -37378,7 +37558,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 _28 = useState(!document.hidden), isTabVisible = _28[0], setIsTabVisible = _28[1];
     useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
@@ -37602,8 +37782,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 _29 = useState(false), formModalOpen = _29[0], setFormModalOpen = _29[1];
+    var _30 = useState(null), activeFormConfig = _30[0], setActiveFormConfig = _30[1];
     var handleFormButtonClick = useCallback(function (formButton) {
         // If form-widget is configured, use its openForm API
         // The form-widget script should already be pre-loaded
@@ -37670,7 +37850,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 = ((_u = config === null || config === void 0 ? void 0 : config.actionBar) === null || _u === void 0 ? void 0 : _u.enabled) === true;
+    var actionBarEnabled = ((_0 = config === null || config === void 0 ? void 0 : config.actionBar) === null || _0 === void 0 ? void 0 : _0.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.
@@ -37694,7 +37874,7 @@ var ChatWidgetUI = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_v = props.config) === null || _v === void 0 ? void 0 : _v.middlewareUrl);
+    useExternalScript((_1 = props.config) === null || _1 === void 0 ? void 0 : _1.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
@@ -37734,18 +37914,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 = ((_w = chatState.agents["agent:robot"]) === null || _w === void 0 ? void 0 : _w.user) ||
+    var widgetAgent = ((_2 = chatState.agents["agent:robot"]) === null || _2 === void 0 ? void 0 : _2.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(actionBarVisible ? " widget-container--with-action-bar" : ""), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), !headerHidden && (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: (_z = (_y = (_x = props.config) === null || _x === void 0 ? void 0 : _x.connection) === null || _y === void 0 ? void 0 : _y.mcp) === null || _z === void 0 ? void 0 : _z.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: (_1 = (_0 = props.config) === null || _0 === void 0 ? void 0 : _0.typingStatus) === null || _1 === void 0 ? void 0 : _1.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: (_2 = config === null || config === void 0 ? void 0 : config.input) === null || _2 === void 0 ? void 0 : _2.placeholder, sendButtonIcon: (_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.icon, sendButtonIconHover: (_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.iconHover, sendButtonIconDisabled: (_8 = (_7 = config === null || config === void 0 ? void 0 : config.footer) === null || _7 === void 0 ? void 0 : _7.sendButton) === null || _8 === void 0 ? void 0 : _8.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: menuConfig, 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 }) })] }), actionBarVisible && config.actionBar ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: __assign$1(__assign$1({}, config.actionBar), { 
+    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 }) })] }));
+    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), { 
                             // Use actionBar.cta if set, otherwise fall back to widget-level cta
-                            cta: resolveCta((_11 = config.actionBar.cta) !== null && _11 !== void 0 ? _11 : config.cta, {
+                            cta: resolveCta((_17 = config.actionBar.cta) !== null && _17 !== void 0 ? _17 : config.cta, {
                                 hasConversation: conversationOnScreen,
                                 arrivedViaChatLink: arrivedViaChatLink,
-                            }) }), visible: visible, chatDisabled: config.disabled, formDisabled: isFormPage, 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: chatButtonCta, 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 })] }));
+                            }) }), 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 })] }));
 };
 /**
  * Top-level wrapper that dispatches between preview mode and connected mode.