@xapp/chat-widget 1.95.0 → 1.96.0

package/dist/index.js

@@ -2747,6 +2747,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
  *
@@ -2773,7 +3035,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 = {};
@@ -12519,14 +12783,11 @@ var FormModal = function (_a) {
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [onClose]);
-    // Prevent body scroll when modal is open
-    React.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
     React.useEffect(function () {
         if (contentRef.current) {
@@ -35517,6 +35778,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) => {
@@ -35527,7 +35802,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;
@@ -35849,6 +36124,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 = reactRedux.useSelector(function (state) { return state; });
     // Refresh modalReference