@xapp/chat-widget 1.94.4 → 1.96.0

package/dist/index.es.js

@@ -1,14 +1,10 @@
-import React, { useCallback, useState, useEffect, useRef, createContext, useMemo, useContext, memo, useLayoutEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef, useLayoutEffect, createContext, useMemo, useContext, memo } from 'react';
 export { default as React } from 'react';
 import require$$0, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useSelector, useDispatch, Provider } from 'react-redux';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 var lib = {};
 
 var ActionBar$1 = {};
@@ -396,6 +392,17 @@ var ActionBarCta = function (_a) {
 
 var DEFAULT_MOBILE_BREAKPOINT = 768;
 var RESIZE_DEBOUNCE_MS = 150;
+/**
+ * ChatWidget.scss sizes the chat panel against this variable. Nothing used to set it, so it always
+ * fell back to the hardcoded 80px in the SCSS - and the real mobile bar is taller than that once
+ * env(safe-area-inset-bottom) applies, which pushed the chat input row behind the bar. Measure the
+ * bar instead of guessing, so it also stays correct when a customer restyles it.
+ *
+ * This is written on documentElement, so it assumes one ActionBar per page - the same
+ * single-instance assumption the widget already makes for --xapp-widget-z-index and friends.
+ * Two concurrent bars would fight over it, and either one unmounting would clear it.
+ */
+var ACTION_BAR_HEIGHT_VAR = "--xapp-action-bar-height";
 var ActionBar = function (_a) {
     var _b, _c, _d;
     var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _e = _a.hasUserInteracted, hasUserInteracted = _e === void 0 ? false : _e, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
@@ -403,6 +410,7 @@ var ActionBar = function (_a) {
     var mobileBreakpoint = (_b = config.mobileBreakpoint) !== null && _b !== void 0 ? _b : DEFAULT_MOBILE_BREAKPOINT;
     var position = (_c = config.position) !== null && _c !== void 0 ? _c : "right";
     var resizeTimeoutRef = useRef(null);
+    var barRef = useRef(null);
     // Debounced resize handler
     var handleResize = useCallback(function () {
         if (resizeTimeoutRef.current) {
@@ -423,6 +431,41 @@ var ActionBar = function (_a) {
             }
         };
     }, [mobileBreakpoint, handleResize]);
+    // Publish the bar's real height so the chat panel can size around it.
+    //
+    // useLayoutEffect, not useEffect: this commits before paint, so the panel never gets a
+    // frame laid out against the 80px SCSS fallback. useEffect would run after paint and
+    // reintroduce a one-frame version of the very misalignment this is here to remove.
+    useLayoutEffect(function () {
+        var bar = barRef.current;
+        if (!bar) {
+            return undefined;
+        }
+        var publishHeight = function () {
+            // getBoundingClientRect covers the whole border box, including the safe-area padding
+            // the mobile bar adds - which is exactly the space the chat panel has to clear.
+            var height = bar.getBoundingClientRect().height;
+            // A zero height means the bar is hidden or not laid out yet. Publishing 0px would
+            // be worse than the SCSS fallback, so leave whatever is already there alone.
+            if (height <= 0) {
+                return;
+            }
+            document.documentElement.style.setProperty(ACTION_BAR_HEIGHT_VAR, "".concat(height, "px"));
+        };
+        publishHeight();
+        // Older browsers without ResizeObserver keep the mount-time measurement above.
+        if (typeof ResizeObserver === "undefined") {
+            return function () {
+                document.documentElement.style.removeProperty(ACTION_BAR_HEIGHT_VAR);
+            };
+        }
+        var observer = new ResizeObserver(publishHeight);
+        observer.observe(bar);
+        return function () {
+            observer.disconnect();
+            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); })
@@ -447,7 +490,7 @@ var ActionBar = function (_a) {
     var handleCtaDismiss = function () {
         onCtaDismiss === null || onCtaDismiss === void 0 ? void 0 : onCtaDismiss();
     };
-    return (jsxs("div", { 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)); }) })] }));
+    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)); }) })] }));
 };
 
 /**
@@ -2305,8 +2348,9 @@ var RichText = function (props) {
 };
 
 var RichInput = function (props) {
-    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, maxLength = props.maxLength, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
+    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, maxLength = props.maxLength, enterKeyHint = props.enterKeyHint, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
     var rich = value.formats.some(function (f) { return f.type === "inputText"; });
+    var keyHint = enterKeyHint || (type === "search" ? "search" : "send");
     var handleChange = react.useCallback(function (ev) {
         if (onChange) {
             onChange({
@@ -2358,7 +2402,7 @@ var RichInput = function (props) {
         }
         return undefined;
     }, [inputNode, onSearch]);
-    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, maxLength: maxLength, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
+    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", enterKeyHint: keyHint, autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, maxLength: maxLength, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
 };
 
 var SuggestionsGroupHeading = function (props) {
@@ -2702,6 +2746,268 @@ function useSuggestionsFetch$1(options) {
     return response;
 }
 
+/**
+ * Stop the host page scrolling behind an open overlay.
+ *
+ * `body { overflow: hidden }` is the obvious way to do this, and is what both widgets used
+ * to do — but **iOS Safari ignores `overflow: hidden` on the body**, so the customer's page
+ * carried on scrolling under the modal. The technique that does work there is to take the
+ * body out of flow at a negative offset equal to the current scroll position, then put it
+ * back and re-scroll to that exact position on release.
+ *
+ * Reference counted rather than a plain on/off flag, and the count lives on the `<body>`
+ * element rather than in module scope. That is deliberate: the chat widget's `FormModal`
+ * loads the **standalone** form widget bundle, which carries its own copy of this module,
+ * so the two overlays that can be open at once are not sharing any JS state. With a module
+ * counter, the second lock would read the already-pinned scroll position (which the browser
+ * reports as 0), the first release would unpin the body while the second overlay was still
+ * open, and the second release would then re-apply `position: fixed` and leave the host page
+ * stuck. The DOM is the only thing both bundles can agree on.
+ */
+/** How many overlays currently hold the lock. Absent means unlocked. */
+var COUNT_ATTRIBUTE$1 = "data-xapp-scroll-lock";
+/** What to put back when the last one lets go, as JSON. */
+var RESTORE_ATTRIBUTE = "data-xapp-scroll-lock-restore";
+var PINNED_PROPERTIES = ["position", "top", "left", "right", "width", "overflow"];
+function readCount$1(body) {
+    var count = Number(body.getAttribute(COUNT_ATTRIBUTE$1));
+    return Number.isFinite(count) && count > 0 ? count : 0;
+}
+function captureRestorePoint(body) {
+    var inlineStyles = PINNED_PROPERTIES.reduce(function (styles, property) {
+        styles[property] = body.style.getPropertyValue(property);
+        return styles;
+    }, {});
+    return { scrollY: window.scrollY || window.pageYOffset || 0, inlineStyles: inlineStyles };
+}
+function takeRestorePoint(body) {
+    var serialized = body.getAttribute(RESTORE_ATTRIBUTE);
+    body.removeAttribute(RESTORE_ATTRIBUTE);
+    try {
+        var parsed = JSON.parse(serialized || "");
+        if (parsed && typeof parsed.scrollY === "number" && parsed.inlineStyles) {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        // Fall through: something else rewrote the attribute. Better to clear our own
+        // properties and leave the page usable than to throw and leave it pinned.
+    }
+    return { scrollY: 0, inlineStyles: {} };
+}
+/**
+ * Lock the body and return the release function.
+ *
+ * The returned function is idempotent — calling it twice is a no-op, which matters because
+ * React StrictMode runs an effect's cleanup more than once.
+ */
+function lockBodyScroll() {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+        return function () { return undefined; };
+    }
+    var body = document.body;
+    if (readCount$1(body) === 0) {
+        var restorePoint = captureRestorePoint(body);
+        body.setAttribute(RESTORE_ATTRIBUTE, JSON.stringify(restorePoint));
+        body.style.position = "fixed";
+        body.style.top = "-".concat(restorePoint.scrollY, "px");
+        body.style.left = "0";
+        body.style.right = "0";
+        body.style.width = "100%";
+        // Redundant next to `position: fixed`, but harmless, and it keeps the behaviour the
+        // widgets already had on the browsers that do honour it.
+        body.style.overflow = "hidden";
+    }
+    body.setAttribute(COUNT_ATTRIBUTE$1, String(readCount$1(body) + 1));
+    var released = false;
+    return function releaseBodyScroll() {
+        if (released) {
+            return;
+        }
+        released = true;
+        var remaining = readCount$1(body) - 1;
+        if (remaining > 0) {
+            body.setAttribute(COUNT_ATTRIBUTE$1, String(remaining));
+            return;
+        }
+        if (remaining < 0) {
+            return;
+        }
+        body.removeAttribute(COUNT_ATTRIBUTE$1);
+        var _a = takeRestorePoint(body), scrollY = _a.scrollY, inlineStyles = _a.inlineStyles;
+        PINNED_PROPERTIES.forEach(function (property) {
+            if (inlineStyles[property]) {
+                body.style.setProperty(property, inlineStyles[property]);
+            }
+            else {
+                body.style.removeProperty(property);
+            }
+        });
+        // An empty `style=""` on the host page's body is untidy and is not what we found.
+        if (!body.style.length) {
+            body.removeAttribute("style");
+        }
+        window.scrollTo(0, scrollY);
+    };
+}
+/**
+ * Lock the body scroll for as long as the calling component is mounted.
+ *
+ * The cleanup runs on unmount, so a modal that disappears without a clean close — a route
+ * change, a parent re-render, an error boundary — still leaves the page scrollable.
+ */
+function useBodyScrollLock(enabled) {
+    if (enabled === void 0) { enabled = true; }
+    react.useEffect(function () {
+        if (!enabled) {
+            return undefined;
+        }
+        return lockBodyScroll();
+    }, [enabled]);
+}
+
+/**
+ * Publish the visual viewport's geometry as CSS custom properties, so overlays can size
+ * themselves around the soft keyboard.
+ *
+ * We are an **embedded** widget: the customer owns the host page's `<meta name="viewport">`,
+ * so we cannot add `interactive-widget=resizes-content` and let the browser solve this for
+ * us. Reading `window.visualViewport` ourselves is the only mechanism we control. (Injecting
+ * or mutating the host's viewport meta is not an option — it is not ours, and breaking it
+ * breaks the whole page in ways nobody would attribute to us.)
+ *
+ * Three properties are published on `<html>`:
+ *
+ *   --xapp-viewport-height      the visible height, in px
+ *   --xapp-viewport-offset-top  how far the visual viewport has been scrolled down within
+ *                               the layout viewport — nonzero on iOS when the keyboard
+ *                               pushes the page up
+ *   --xapp-keyboard-inset       layout height minus visual height: how much the keyboard
+ *                               (or any other browser UI) is covering
+ *
+ * `--xapp-keyboard-inset` is the one worth having. It is what a `padding-bottom` wants, and
+ * deriving it here means the consuming CSS does not have to do arithmetic across two
+ * variables that update at slightly different moments.
+ *
+ * Reference counted on the DOM, for the same reason `bodyScrollLock` is: chat-widget's
+ * `FormModal` loads the **standalone** form-widget bundle, which carries its own copy of
+ * this module. Two independent copies can be live at once, and a module-scope counter would
+ * not see across them. Without counting, closing the form modal while the chat panel is
+ * still open (with the keyboard still up) would clear the properties out from under the
+ * panel and snap it back to its fallback height mid-interaction.
+ */
+var HEIGHT_PROPERTY = "--xapp-viewport-height";
+var OFFSET_TOP_PROPERTY = "--xapp-viewport-offset-top";
+var KEYBOARD_INSET_PROPERTY = "--xapp-keyboard-inset";
+/** How many subscribers currently want these properties maintained. */
+var COUNT_ATTRIBUTE = "data-xapp-viewport-subscribers";
+/**
+ * Below this, a shrunken viewport is treated as browser chrome rather than a keyboard.
+ * Address bars collapse and expand by ~60-90px during normal scrolling, and reacting to
+ * that would make the layout twitch while the user is only reading.
+ */
+var KEYBOARD_THRESHOLD_PX = 120;
+function readCount(root) {
+    var count = Number(root.getAttribute(COUNT_ATTRIBUTE));
+    return Number.isFinite(count) && count > 0 ? count : 0;
+}
+/**
+ * Write the current geometry to `<html>`.
+ *
+ * Deliberately does nothing when `visualViewport` is unavailable: the consuming CSS falls
+ * back to `100dvh`, which is correct-ish and certainly better than a zero height. Publishing
+ * `0px` would collapse the widget entirely — a worse failure than the one being fixed.
+ */
+function publish(root) {
+    var viewport = typeof window === "undefined" ? undefined : window.visualViewport;
+    if (!viewport) {
+        return;
+    }
+    var height = viewport.height, offsetTop = viewport.offsetTop;
+    if (!(height > 0)) {
+        // Mid-transition, or a browser reporting nonsense. Keep the last good values.
+        return;
+    }
+    // window.innerHeight is the LAYOUT viewport, which the keyboard does not shrink on iOS.
+    // The difference between the two is the occluded strip.
+    var layoutHeight = window.innerHeight || height;
+    var rawInset = Math.max(0, layoutHeight - height);
+    var inset = rawInset >= KEYBOARD_THRESHOLD_PX ? rawInset : 0;
+    root.style.setProperty(HEIGHT_PROPERTY, "".concat(Math.round(height), "px"));
+    root.style.setProperty(OFFSET_TOP_PROPERTY, "".concat(Math.round(offsetTop), "px"));
+    root.style.setProperty(KEYBOARD_INSET_PROPERTY, "".concat(Math.round(inset), "px"));
+}
+function clear(root) {
+    root.style.removeProperty(HEIGHT_PROPERTY);
+    root.style.removeProperty(OFFSET_TOP_PROPERTY);
+    root.style.removeProperty(KEYBOARD_INSET_PROPERTY);
+}
+/**
+ * Start publishing viewport geometry. Returns a release function.
+ *
+ * Imperative twin of {@link useVisualViewportProperties}, for callers outside React.
+ */
+function trackVisualViewport() {
+    if (typeof document === "undefined") {
+        return function () { return undefined; };
+    }
+    var root = document.documentElement;
+    root.setAttribute(COUNT_ATTRIBUTE, String(readCount(root) + 1));
+    publish(root);
+    var viewport = typeof window === "undefined" ? undefined : window.visualViewport;
+    var frame;
+    var onChange = function () {
+        // These fire many times per second through the keyboard animation. Coalescing to one
+        // write per frame keeps us off the layout-thrash path.
+        if (frame !== undefined) {
+            return;
+        }
+        frame = window.requestAnimationFrame(function () {
+            frame = undefined;
+            publish(root);
+        });
+    };
+    // `scroll` matters as much as `resize`: on iOS the keyboard scrolls the visual viewport
+    // within the layout viewport, and offsetTop only changes on that event.
+    viewport === null || viewport === void 0 ? void 0 : viewport.addEventListener("resize", onChange);
+    viewport === null || viewport === void 0 ? void 0 : viewport.addEventListener("scroll", onChange);
+    var released = false;
+    return function () {
+        if (released) {
+            return;
+        }
+        released = true;
+        viewport === null || viewport === void 0 ? void 0 : viewport.removeEventListener("resize", onChange);
+        viewport === null || viewport === void 0 ? void 0 : viewport.removeEventListener("scroll", onChange);
+        if (frame !== undefined) {
+            window.cancelAnimationFrame(frame);
+            frame = undefined;
+        }
+        var remaining = readCount(root) - 1;
+        if (remaining > 0) {
+            root.setAttribute(COUNT_ATTRIBUTE, String(remaining));
+            return;
+        }
+        root.removeAttribute(COUNT_ATTRIBUTE);
+        clear(root);
+    };
+}
+/**
+ * Publish viewport geometry for as long as this component is mounted.
+ *
+ * @param enabled pass `false` to opt out — e.g. above the mobile breakpoint, where there is
+ *                no soft keyboard to work around and the desktop sizing should stand.
+ */
+function useVisualViewportProperties(enabled) {
+    if (enabled === void 0) { enabled = true; }
+    react.useEffect(function () {
+        if (!enabled) {
+            return undefined;
+        }
+        return trackVisualViewport();
+    }, [enabled]);
+}
+
 /**
  * Quicker configurable uuid
  *
@@ -2728,7 +3034,9 @@ var SuggestionsList_1 = SuggestionsList;
 var findItemByIndex_1 = findItemByIndex;
 var getItemsLength_1 = getItemsLength;
 var parseSuggestionsResponse_1 = parseSuggestionsResponse;
+var useBodyScrollLock_1 = useBodyScrollLock;
 var useSuggestionsFetch_1 = useSuggestionsFetch$1;
+var useVisualViewportProperties_1 = useVisualViewportProperties;
 var uuid_1 = uuid;
 
 var cjs = {};
@@ -12116,85 +12424,15 @@ var AdminBar = function (_a) {
     return (jsx("div", { className: "xappw-admin-input-container visible", children: joined ? renderLeave() : renderJoin() }));
 };
 
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames () {
-			var classes = '';
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (arg) {
-					classes = appendClass(classes, parseValue(arg));
-				}
-			}
-
-			return classes;
-		}
-
-		function parseValue (arg) {
-			if (typeof arg === 'string' || typeof arg === 'number') {
-				return arg;
-			}
-
-			if (typeof arg !== 'object') {
-				return '';
-			}
-
-			if (Array.isArray(arg)) {
-				return classNames.apply(null, arg);
-			}
-
-			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-				return arg.toString();
-			}
-
-			var classes = '';
-
-			for (var key in arg) {
-				if (hasOwn.call(arg, key) && arg[key]) {
-					classes = appendClass(classes, key);
-				}
-			}
-
-			return classes;
-		}
-
-		function appendClass (value, newClass) {
-			if (!newClass) {
-				return value;
-			}
-		
-			if (value) {
-				return value + ' ' + newClass;
-			}
-		
-			return value + newClass;
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}()); 
-} (classnames));
-
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+/**
+ * Joins the keys of `classes` whose value is truthy into a single
+ * space-separated string. Local replacement for the `classnames` package.
+ */
+function classNames(classes) {
+    return Object.keys(classes)
+        .filter(function (key) { return classes[key]; })
+        .join(" ");
+}
 
 var MarkdownBuilder = function (_a) {
     var text = _a.text, applyBrandingClass = _a.applyBrandingClass, linkColor = _a.linkColor;
@@ -12544,14 +12782,11 @@ var FormModal = function (_a) {
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [onClose]);
-    // Prevent body scroll when modal is open
-    useEffect(function () {
-        var originalOverflow = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return function () {
-            document.body.style.overflow = originalOverflow;
-        };
-    }, []);
+    // Prevent body scroll when modal is open.
+    //
+    // This used to set `body { overflow: hidden }` directly, which iOS Safari ignores - the
+    // host page scrolled on underneath the open modal.
+    useBodyScrollLock_1();
     // Focus trap - focus the modal content on mount
     useEffect(function () {
         if (contentRef.current) {
@@ -35542,6 +35777,20 @@ var createQueueWithTimer = (timeout) => {
     setTimeout(notify, timeout);
   };
 };
+var createRafWithFallbackTimer = (raf, timeout) => {
+  return (notify) => {
+    let called = false;
+    const callback = () => {
+      if (called) return;
+      called = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
+      notify();
+    };
+    const rafId = raf(callback);
+    const timerId = setTimeout(callback, timeout);
+  };
+};
 var autoBatchEnhancer = (options = {
   type: "raf"
 }) => (next) => (...args) => {
@@ -35552,7 +35801,7 @@ var autoBatchEnhancer = (options = {
   const listeners = /* @__PURE__ */ new Set();
   const queueCallback = options.type === "tick" ? queueMicrotask : options.type === "raf" ? (
     // requestAnimationFrame won't exist in SSR environments. Fall back to a vague approximation just to keep from erroring.
-    typeof window !== "undefined" && window.requestAnimationFrame ? window.requestAnimationFrame : createQueueWithTimer(10)
+    typeof window !== "undefined" && window.requestAnimationFrame ? createRafWithFallbackTimer(window.requestAnimationFrame, 100) : createQueueWithTimer(10)
   ) : options.type === "callback" ? options.queueNotification : createQueueWithTimer(options.timeout);
   const notifyListeners = () => {
     notificationQueued = false;
@@ -35874,6 +36123,14 @@ 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;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
+    // Publish the visual viewport's geometry so the panel can size around the soft keyboard.
+    //
+    // Mounted unconditionally rather than behind a width check, and the mobile-only scoping
+    // lives in ChatWidget.scss instead: only the max-width: 640px block reads
+    // --xapp-keyboard-inset, so on desktop this publishes properties nothing consumes and
+    // behaviour is unchanged. A width check here would mean a fourth hardcoded 640 in a
+    // codebase where that duplication is already an open issue (#1561).
+    useVisualViewportProperties_1();
     // From Redux
     var chatState = useSelector(function (state) { return state; });
     // Refresh modalReference