blixify-ui-web 1.2.168 → 1.2.169

package/lib/components/chat/chatAnchor/index.d.ts

@@ -15,6 +15,7 @@ interface Props extends ChatProps {
     resizableHeight?: boolean;
     defaultHeight?: number;
     heightStorageKey?: string;
+    keyboardOpen?: boolean;
 }
 interface AnchorPosition {
     right: number;
@@ -28,7 +29,15 @@ export declare class ChatAnchor extends Component<Props> {
         position: AnchorPosition | null;
         width: number | null;
         height: number | null;
+        keyboardVisible: boolean;
+        viewportHeight: number | null;
+        viewportTop: number;
+        viewportBottom: number;
     };
+    keyboardClosedHeight: number;
+    viewportWidth: number;
+    visualViewport: VisualViewport | null;
+    viewportTrackingActive: boolean;
     anchorRef: React.RefObject<HTMLDivElement | null>;
     buttonRef: React.RefObject<HTMLDivElement | null>;
     panelRef: React.RefObject<HTMLDivElement | null>;
@@ -63,6 +72,7 @@ export declare class ChatAnchor extends Component<Props> {
     handleMaxWidth: () => number;
     handleMaxHeight: () => number;
     handleClampWidth: (width: number) => number;
+    handleMinHeight: () => number;
     handleClampHeight: (height: number) => number;
     handleIsResizable: () => boolean;
     handleIsResizableHeight: () => boolean;
@@ -83,15 +93,21 @@ export declare class ChatAnchor extends Component<Props> {
     handleRemoveResizeListeners: () => void;
     handleResizeVertStart: (event: React.PointerEvent<HTMLDivElement>) => void;
     handleResizeVertMove: (event: PointerEvent) => void;
+    handleResizeHeightKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     handleResizeVertEnd: () => void;
     handleRemoveResizeVertListeners: () => void;
     handleAnchorClick: () => void;
     handleIsDraggable: () => boolean;
     componentDidUpdate: (prevProps: Props, prevState: {
         chatCard: boolean;
+        isMobileWidth: boolean;
     }) => void;
     handleReclampPosition: () => void;
     handleResize: () => void;
+    handleRemoveViewportListeners: () => void;
+    handleSyncViewportListeners: () => void;
+    handleChatFocusChange: (event: FocusEvent) => void;
+    handleViewportChange: () => void;
     renderChatAnchorIcon: () => React.JSX.Element;
     render(): React.JSX.Element;
 }

package/lib/components/chat/chatAnchor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chatAnchor/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/chatAnchor/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/chat/chatAnchor/index.js

@@ -82,10 +82,14 @@ var WIDTH_VIEWPORT_GUTTER = 16;
 // gutter. The floor is taller than the width floor because a chat still needs
 // its header and input row to stay usable.
 var MIN_USABLE_HEIGHT = 120;
+var MIN_MOBILE_HEIGHT_VIEWPORT_RATIO = 0.5;
 var HEIGHT_VIEWPORT_GUTTER = 16;
 // INFO: a drag shorter than this is a click — a tap on a touch screen always
 // travels a pixel or two, and it must still open the chat
 var DRAG_THRESHOLD = 4;
+var KEYBOARD_VIEWPORT_THRESHOLD = 100;
+var SAFE_AREA_TOP = "var(--safe-area-inset-top, env(safe-area-inset-top, 0px))";
+var SAFE_AREA_BOTTOM = "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))";
 var ChatAnchor = /** @class */ (function (_super) {
     __extends(ChatAnchor, _super);
     function ChatAnchor() {
@@ -96,7 +100,15 @@ var ChatAnchor = /** @class */ (function (_super) {
             position: null,
             width: null,
             height: null,
-        };
+            keyboardVisible: false,
+            viewportHeight: null,
+            viewportTop: 0,
+            viewportBottom: 0,
+        };
+        _this.keyboardClosedHeight = 0;
+        _this.viewportWidth = 0;
+        _this.visualViewport = null;
+        _this.viewportTrackingActive = false;
         _this.anchorRef = react_2.default.createRef();
         _this.buttonRef = react_2.default.createRef();
         // INFO: the panel's own box, not the anchor's — the anchor also holds the
@@ -125,7 +137,10 @@ var ChatAnchor = /** @class */ (function (_super) {
                 return _this.props.defaultHeight;
             if (typeof window === "undefined")
                 return DEFAULT_HEIGHT_FALLBACK;
-            return Math.round(window.innerHeight * DEFAULT_HEIGHT_VIEWPORT_RATIO);
+            var viewportHeight = window.innerWidth < 640
+                ? _this.keyboardClosedHeight || window.innerHeight
+                : window.innerHeight;
+            return Math.round(viewportHeight * DEFAULT_HEIGHT_VIEWPORT_RATIO);
         };
         // INFO: the panel grows leftward from the bottom-right anchor, so the widest
         // it can be without clipping off the left edge is the distance from its own
@@ -152,6 +167,10 @@ var ChatAnchor = /** @class */ (function (_super) {
             var _a, _b;
             if (typeof window === "undefined")
                 return Number.POSITIVE_INFINITY;
+            // INFO: mobile height resizing is pinned to the viewport bottom, independent
+            // of the floating button's saved position. It can grow to the full screen.
+            if (window.innerWidth < 640 && _this.props.resizableHeight)
+                return _this.keyboardClosedHeight || window.innerHeight;
             var rect = (_b = ((_a = _this.panelRef.current) !== null && _a !== void 0 ? _a : _this.anchorRef.current)) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             var bottomEdge = rect ? rect.bottom : window.innerHeight;
             return bottomEdge - HEIGHT_VIEWPORT_GUTTER;
@@ -167,16 +186,26 @@ var ChatAnchor = /** @class */ (function (_super) {
             var cap = Math.max(MIN_USABLE_WIDTH, _this.handleMaxWidth());
             return Math.min(Math.max(MIN_USABLE_WIDTH, width), cap);
         };
+        _this.handleMinHeight = function () {
+            return typeof window !== "undefined" && window.innerWidth < 640
+                ? Math.round((_this.keyboardClosedHeight || window.innerHeight) *
+                    MIN_MOBILE_HEIGHT_VIEWPORT_RATIO)
+                : MIN_USABLE_HEIGHT;
+        };
         _this.handleClampHeight = function (height) {
             // INFO: a bad pointer event (no clientY) can produce NaN — never let it
             // reach state or localStorage; fall back to the default height instead
             if (Number.isNaN(height))
                 return _this.handleDefaultHeight();
             // INFO: floor keeps the header and input usable, cap keeps the panel on
-            // screen. The floor is the hard lower bound — if the viewport is so short
-            // the cap would fall below it, the floor still wins over the cap.
-            var cap = Math.max(MIN_USABLE_HEIGHT, _this.handleMaxHeight());
-            return Math.min(Math.max(MIN_USABLE_HEIGHT, height), cap);
+            // screen. Mobile stays between half and all of the current viewport;
+            // desktop keeps its existing pixel floor.
+            var isMobile = typeof window !== "undefined" && window.innerWidth < 640;
+            var minimum = _this.handleMinHeight();
+            var cap = isMobile
+                ? _this.handleMaxHeight()
+                : Math.max(minimum, _this.handleMaxHeight());
+            return Math.min(Math.max(minimum, height), cap);
         };
         _this.handleIsResizable = function () {
             return _this.props.resizableWidth === true &&
@@ -184,7 +213,7 @@ var ChatAnchor = /** @class */ (function (_super) {
         };
         _this.handleIsResizableHeight = function () {
             return _this.props.resizableHeight === true &&
-                !(_this.props.open && _this.state.isMobileWidth);
+                !(_this.state.isMobileWidth && _this.state.keyboardVisible);
         };
         // INFO: keeps the anchor on screen when a position saved on a wide window is
         // restored on a narrow one, when the window is resized under it, and when the
@@ -292,30 +321,26 @@ var ChatAnchor = /** @class */ (function (_super) {
         _this.handleRestoreHeight = function () {
             if (!_this.props.resizableHeight)
                 return;
+            // INFO: defer the default if mounted while a native keyboard is already
+            // visible; the closed viewport is not known until it is dismissed.
+            var height = _this.props.keyboardOpen && window.innerWidth < 640
+                ? null
+                : _this.handleDefaultHeight();
             try {
                 var stored = window.localStorage.getItem(_this.handleHeightStorageKey());
-                if (!stored) {
-                    // INFO: no saved height — seed the default so the panel opens at the
-                    // consumer's chosen height rather than the sizeClassName fallback
-                    _this.setState({
-                        height: _this.handleClampHeight(_this.handleDefaultHeight()),
-                    });
-                    return;
-                }
-                var parsed = Number(stored);
-                if (Number.isNaN(parsed)) {
-                    // INFO: a corrupted value falls back to the default height, not nothing
-                    _this.setState({
-                        height: _this.handleClampHeight(_this.handleDefaultHeight()),
-                    });
-                    return;
-                }
-                _this.setState({ height: _this.handleClampHeight(parsed) });
+                if (stored && Number.isFinite(Number(stored)))
+                    height = Number(stored);
             }
             catch (_a) {
-                // INFO: private browsing and blocked site data both throw on read — the
-                // panel just keeps its default height
+                // INFO: blocked storage still uses the default height.
             }
+            // INFO: a mobile mount can happen with the keyboard already open. Preserve
+            // the stored preference and apply viewport limits only when rendering it.
+            _this.setState({
+                height: height === null || window.innerWidth < 640
+                    ? height
+                    : _this.handleClampHeight(height),
+            });
         };
         _this.handlePersistHeight = function (height) {
             try {
@@ -443,7 +468,7 @@ var ChatAnchor = /** @class */ (function (_super) {
                 return;
             // INFO: height is seeded on mount whenever resize is on, so state.height is
             // the panel's current height — the drag continues from what the user sees
-            var startHeight = (_a = _this.state.height) !== null && _a !== void 0 ? _a : _this.handleDefaultHeight();
+            var startHeight = _this.handleClampHeight((_a = _this.state.height) !== null && _a !== void 0 ? _a : _this.handleDefaultHeight());
             event.preventDefault();
             event.stopPropagation();
             _this.resizeVertRef = {
@@ -458,7 +483,7 @@ var ChatAnchor = /** @class */ (function (_super) {
         };
         _this.handleResizeVertMove = function (event) {
             var resize = _this.resizeVertRef;
-            if (!resize)
+            if (!resize || !_this.handleIsResizableHeight())
                 return;
             var deltaY = event.clientY - resize.pointerY;
             if (!resize.moved && Math.abs(deltaY) < DRAG_THRESHOLD)
@@ -469,11 +494,23 @@ var ChatAnchor = /** @class */ (function (_super) {
             resize.latest = _this.handleClampHeight(resize.startHeight - deltaY);
             _this.setState({ height: resize.latest });
         };
+        _this.handleResizeHeightKeyDown = function (event) {
+            var _a;
+            if (!_this.handleIsResizableHeight())
+                return;
+            if (event.key !== "ArrowUp" && event.key !== "ArrowDown")
+                return;
+            event.preventDefault();
+            var height = _this.handleClampHeight(((_a = _this.state.height) !== null && _a !== void 0 ? _a : _this.handleDefaultHeight()) +
+                (event.key === "ArrowUp" ? 24 : -24));
+            _this.setState({ height: height });
+            _this.handlePersistHeight(height);
+        };
         _this.handleResizeVertEnd = function () {
             var resize = _this.resizeVertRef;
             _this.resizeVertRef = null;
             _this.handleRemoveResizeVertListeners();
-            if (!(resize === null || resize === void 0 ? void 0 : resize.moved))
+            if (!(resize === null || resize === void 0 ? void 0 : resize.moved) || !_this.handleIsResizableHeight())
                 return;
             if (resize.latest != null)
                 _this.handlePersistHeight(resize.latest);
@@ -490,18 +527,33 @@ var ChatAnchor = /** @class */ (function (_super) {
             }
             _this.props.onClick();
         };
-        // INFO: no dragging while the panel is full screen on mobile — there is no
+        // INFO: no button dragging while the panel is open on mobile — there is no
         // free-floating button to move at that point
         _this.handleIsDraggable = function () {
             return _this.props.draggable !== false &&
                 !(_this.props.open && _this.state.isMobileWidth);
         };
         _this.componentDidUpdate = function (prevProps, prevState) {
+            var _a;
             if (_this.props.open !== prevProps.open && _this.props.open) {
                 _this.setState({
                     chatCard: false,
                 });
             }
+            if (_this.props.open !== prevProps.open ||
+                _this.props.keyboardOpen !== prevProps.keyboardOpen ||
+                _this.state.isMobileWidth !== prevState.isMobileWidth) {
+                _this.handleSyncViewportListeners();
+            }
+            if (_this.props.resizableHeight &&
+                !_this.state.isMobileWidth &&
+                (_this.state.isMobileWidth !== prevState.isMobileWidth ||
+                    _this.props.open !== prevProps.open ||
+                    _this.props.resizableHeight !== prevProps.resizableHeight)) {
+                var height = _this.handleClampHeight((_a = _this.state.height) !== null && _a !== void 0 ? _a : _this.handleDefaultHeight());
+                if (height !== _this.state.height)
+                    _this.setState({ height: height });
+            }
             // INFO: opening, closing or dismissing the greeting changes the anchor's
             // size, so a position that fit the old size can leave the new one off
             // screen — re-clamp it against the layout that was just committed
@@ -520,17 +572,137 @@ var ChatAnchor = /** @class */ (function (_super) {
             // INFO: kept too, or the next visit restores the off-screen position
             _this.handlePersistPosition(next);
         };
+        // INFO: only real window resizes need floating-position and size measurements.
         _this.handleResize = function () {
-            _this.setState(function (previous) { return ({
-                isMobileWidth: window.innerWidth < 640,
-                position: previous.position
+            var _a, _b;
+            var isMobileWidth = window.innerWidth < 640;
+            if (!_this.props.open || !isMobileWidth) {
+                _this.keyboardClosedHeight = Math.min(window.innerHeight, (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight);
+                _this.viewportWidth = window.innerWidth;
+            }
+            _this.setState(function (previous) {
+                var _a, _b;
+                var position = previous.position
                     ? _this.handleClampPosition(previous.position)
-                    : null,
-                // INFO: shrink a saved width that no longer fits the narrower window
-                width: previous.width ? _this.handleClampWidth(previous.width) : null,
-                // INFO: shrink a saved height that no longer fits the shorter window
-                height: previous.height ? _this.handleClampHeight(previous.height) : null,
-            }); });
+                    : null;
+                var width = previous.width ? _this.handleClampWidth(previous.width) : null;
+                var height = !isMobileWidth && previous.height
+                    ? _this.handleClampHeight(previous.height)
+                    : previous.height;
+                if (previous.isMobileWidth === isMobileWidth &&
+                    ((_a = previous.position) === null || _a === void 0 ? void 0 : _a.right) === (position === null || position === void 0 ? void 0 : position.right) &&
+                    ((_b = previous.position) === null || _b === void 0 ? void 0 : _b.bottom) === (position === null || position === void 0 ? void 0 : position.bottom) &&
+                    previous.width === width &&
+                    previous.height === height)
+                    return null;
+                return { isMobileWidth: isMobileWidth, position: position, width: width, height: height };
+            });
+            _this.handleSyncViewportListeners();
+        };
+        _this.handleRemoveViewportListeners = function () {
+            var _a, _b;
+            if (!_this.viewportTrackingActive)
+                return;
+            (_a = _this.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", _this.handleViewportChange);
+            (_b = _this.visualViewport) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", _this.handleViewportChange);
+            document.removeEventListener("focusin", _this.handleChatFocusChange);
+            document.removeEventListener("focusout", _this.handleChatFocusChange);
+            _this.visualViewport = null;
+            _this.viewportTrackingActive = false;
+        };
+        _this.handleSyncViewportListeners = function () {
+            var _a, _b;
+            // INFO: fullscreen and resizable mobile panels both need keyboard tracking.
+            var shouldTrack = _this.props.open && window.innerWidth < 640;
+            if (shouldTrack && !_this.viewportTrackingActive) {
+                _this.viewportTrackingActive = true;
+                _this.visualViewport = window.visualViewport;
+                (_a = _this.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", _this.handleViewportChange);
+                (_b = _this.visualViewport) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", _this.handleViewportChange);
+                document.addEventListener("focusin", _this.handleChatFocusChange);
+                document.addEventListener("focusout", _this.handleChatFocusChange);
+            }
+            else if (!shouldTrack && _this.viewportTrackingActive) {
+                _this.handleRemoveViewportListeners();
+                _this.setState({
+                    keyboardVisible: false,
+                    viewportHeight: null,
+                    viewportTop: 0,
+                    viewportBottom: 0,
+                });
+            }
+            if (shouldTrack)
+                _this.handleViewportChange();
+        };
+        _this.handleChatFocusChange = function (event) {
+            var _a;
+            // INFO: an input elsewhere on the page must not trigger chat layout work.
+            // Focusout from this chat still runs so keyboard dismissal remains latched.
+            if (event.target instanceof Node &&
+                ((_a = _this.anchorRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+                _this.handleViewportChange();
+        };
+        _this.handleViewportChange = function () {
+            var _a, _b, _c, _d, _e;
+            if (!_this.viewportTrackingActive || !_this.props.open || window.innerWidth >= 640)
+                return;
+            var viewport = window.visualViewport;
+            // INFO: pinch zoom changes the visual viewport too; it is not a keyboard.
+            if (viewport && Math.abs(viewport.scale - 1) > 0.01)
+                return;
+            var isMobileWidth = window.innerWidth < 640;
+            var viewportHeight = Math.min(window.innerHeight, (_a = viewport === null || viewport === void 0 ? void 0 : viewport.height) !== null && _a !== void 0 ? _a : window.innerHeight);
+            var viewportTop = Math.max(0, (_b = viewport === null || viewport === void 0 ? void 0 : viewport.offsetTop) !== null && _b !== void 0 ? _b : 0);
+            var viewportBottom = Math.max(0, window.innerHeight - viewportHeight - viewportTop);
+            if (!_this.keyboardClosedHeight || _this.viewportWidth !== window.innerWidth) {
+                _this.keyboardClosedHeight = viewportHeight;
+                _this.viewportWidth = window.innerWidth;
+            }
+            var active = document.activeElement;
+            var inputFocused = active instanceof HTMLElement &&
+                ((_c = _this.anchorRef.current) === null || _c === void 0 ? void 0 : _c.contains(active)) &&
+                (active.matches("input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])") || active.isContentEditable);
+            // INFO: latch detection while the viewport stays reduced, including the
+            // interval after blur but before the keyboard's closing animation finishes.
+            var detectedKeyboard = isMobileWidth &&
+                (inputFocused || _this.state.keyboardVisible) &&
+                _this.keyboardClosedHeight - viewportHeight >
+                    Math.max(KEYBOARD_VIEWPORT_THRESHOLD, _this.keyboardClosedHeight * 0.15);
+            var keyboardVisible = isMobileWidth && ((_d = _this.props.keyboardOpen) !== null && _d !== void 0 ? _d : !!detectedKeyboard);
+            if (!keyboardVisible)
+                _this.keyboardClosedHeight = viewportHeight;
+            // INFO: a keyboard interrupting a drag must not save a temporary height.
+            var interruptedHeight = keyboardVisible
+                ? (_e = _this.resizeVertRef) === null || _e === void 0 ? void 0 : _e.startHeight
+                : undefined;
+            if (keyboardVisible) {
+                _this.resizeVertRef = null;
+                _this.handleRemoveResizeVertListeners();
+            }
+            // INFO: focus and viewport scroll can repeat identical metrics. Avoid both
+            // geometry measurements and state updates when nothing actually changed.
+            if (_this.state.keyboardVisible === keyboardVisible &&
+                _this.state.viewportHeight === viewportHeight &&
+                _this.state.viewportTop === viewportTop &&
+                _this.state.viewportBottom === viewportBottom &&
+                interruptedHeight === undefined)
+                return;
+            _this.setState(function (previous) {
+                var height = interruptedHeight !== null && interruptedHeight !== void 0 ? interruptedHeight : previous.height;
+                if (previous.keyboardVisible === keyboardVisible &&
+                    previous.viewportHeight === viewportHeight &&
+                    previous.viewportTop === viewportTop &&
+                    previous.viewportBottom === viewportBottom &&
+                    previous.height === height)
+                    return null;
+                return {
+                    keyboardVisible: keyboardVisible,
+                    viewportHeight: viewportHeight,
+                    viewportTop: viewportTop,
+                    viewportBottom: viewportBottom,
+                    height: height,
+                };
+            });
         };
         _this.renderChatAnchorIcon = function () {
             var _a = _this.props, open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon;
@@ -556,22 +728,27 @@ var ChatAnchor = /** @class */ (function (_super) {
     };
     ChatAnchor.prototype.componentWillUnmount = function () {
         window.removeEventListener("resize", this.handleResize);
+        this.handleRemoveViewportListeners();
         this.handleRemoveDragListeners();
         this.handleRemoveResizeListeners();
         this.handleRemoveResizeVertListeners();
     };
     ChatAnchor.prototype.render = function () {
         var _this = this;
-        var _a, _b;
-        var useAbsolutePosition = this.props.open && this.state.isMobileWidth;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var isMobileOpen = this.props.open && this.state.isMobileWidth;
+        var useMobileResize = isMobileOpen && this.props.resizableHeight === true;
+        var useAbsolutePosition = isMobileOpen && !useMobileResize;
         // INFO: a dragged position is an inline style — Tailwind only emits the
         // classes it can see at build time, so a runtime bottom-[Npx] never exists
-        var draggedPosition = !useAbsolutePosition && this.state.position ? this.state.position : null;
+        var draggedPosition = !isMobileOpen && this.state.position ? this.state.position : null;
         var positionOffset = useAbsolutePosition
             ? "h-[calc(100dvh)] w-screen top-0 left-0 overflow-hidden"
-            : draggedPosition
-                ? ""
-                : ((_a = this.props.positionOffset) !== null && _a !== void 0 ? _a : exports.DEFAULT_POSITION_OFFSET);
+            : useMobileResize
+                ? "bottom-0 left-0 w-screen max-h-[100dvh]"
+                : draggedPosition
+                    ? ""
+                    : ((_a = this.props.positionOffset) !== null && _a !== void 0 ? _a : exports.DEFAULT_POSITION_OFFSET);
         var chatAnchorVisible = this.props.open ? "hidden sm:block" : "block";
         var icon = this.props.open ? this.props.closeIcon : this.props.openIcon;
         // INFO: only feed a pixel width when resize is on and the panel is not
@@ -580,33 +757,68 @@ var ChatAnchor = /** @class */ (function (_super) {
             ? this.state.width
             : undefined;
         // INFO: same for height — a full-screen mobile panel is the whole viewport
-        var heightPx = this.handleIsResizableHeight() && this.state.height
-            ? this.state.height
+        var heightPx = this.props.resizableHeight
+            ? useMobileResize
+                ? this.handleClampHeight((_b = this.state.height) !== null && _b !== void 0 ? _b : this.handleDefaultHeight())
+                : (_c = this.state.height) !== null && _c !== void 0 ? _c : undefined
             : undefined;
+        var availableHeight = (_d = this.state.viewportHeight) !== null && _d !== void 0 ? _d : this.handleDefaultHeight();
+        var mobileHeight = Math.min(heightPx !== null && heightPx !== void 0 ? heightPx : this.handleDefaultHeight(), availableHeight);
+        var mobileTopInset = mobileHeight >= availableHeight - 1 ? SAFE_AREA_TOP : "0px";
+        var mobileBottomInset = this.state.keyboardVisible ? "0px" : SAFE_AREA_BOTTOM;
         // INFO: the handle only makes sense while the resizable panel is open and
         // not full-screen on mobile — it needs a panel edge to sit against. Gated
         // on the same useAbsolutePosition the layout uses so the two never disagree.
-        var showResizeHandle = this.props.open && this.props.resizableWidth && !useAbsolutePosition;
-        var showResizeVertHandle = this.props.open && this.props.resizableHeight && !useAbsolutePosition;
+        var showResizeHandle = this.props.open && this.props.resizableWidth && !isMobileOpen;
+        var showResizeVertHandle = this.props.open && this.handleIsResizableHeight() && !useAbsolutePosition;
         return (react_2.default.createElement("div", { ref: this.anchorRef, 
             // INFO: no child spacing when full screen — the hidden bubble row's
             // space-y margin made the panel 16px taller than the screen, so the
             // container scrolled on top of the message list
-            className: "z-40 flex flex-col items-end fixed ".concat(useAbsolutePosition ? "" : "space-y-4", " ").concat(positionOffset), style: draggedPosition !== null && draggedPosition !== void 0 ? draggedPosition : undefined },
+            className: "z-40 flex flex-col items-end fixed ".concat(isMobileOpen ? "" : "space-y-4", " ").concat(positionOffset), style: isMobileOpen
+                ? useMobileResize
+                    ? { bottom: this.state.viewportBottom }
+                    : {
+                        top: this.state.viewportTop,
+                        height: (_e = this.state.viewportHeight) !== null && _e !== void 0 ? _e : undefined,
+                        paddingTop: SAFE_AREA_TOP,
+                        paddingBottom: mobileBottomInset,
+                    }
+                : draggedPosition !== null && draggedPosition !== void 0 ? draggedPosition : undefined },
             react_2.default.createElement(react_1.Transition, { show: this.props.open, as: react_2.Fragment, enter: "transform transition duration-[400ms]", enterFrom: "opacity-0 scale-50", leave: "transform duration-200 transition ease-in-out", leaveTo: "opacity-0 scale-95 " },
-                react_2.default.createElement("div", { ref: this.panelRef, className: "relative w-full h-full" },
+                react_2.default.createElement("div", { ref: this.panelRef, className: "relative w-full h-full ".concat(useMobileResize
+                        ? "pt-8 max-h-[100dvh] rounded-t-2xl overflow-hidden ".concat(this.props.darkMode ? "bg-gray-900" : "bg-white")
+                        : ""), style: useMobileResize
+                        ? {
+                            height: mobileHeight,
+                            paddingTop: "calc(2rem + ".concat(mobileTopInset, ")"),
+                            paddingBottom: mobileBottomInset,
+                            paddingLeft: "var(--safe-area-inset-left, env(safe-area-inset-left, 0px))",
+                            paddingRight: "var(--safe-area-inset-right, env(safe-area-inset-right, 0px))",
+                        }
+                        : undefined },
                     showResizeHandle && (react_2.default.createElement("div", { "data-testid": "chat-anchor-resize-handle", onPointerDown: this.handleResizeStart, className: "absolute left-0 top-0 h-full w-2 -ml-1 z-10 flex items-center justify-center touch-none select-none cursor-ew-resize group" },
                         react_2.default.createElement("div", { className: "h-10 w-1 rounded-full bg-gray-300 group-hover:bg-primary-500 transition-colors" }))),
-                    showResizeVertHandle && (react_2.default.createElement("div", { "data-testid": "chat-anchor-resize-handle-vertical", onPointerDown: this.handleResizeVertStart, 
+                    showResizeVertHandle && (react_2.default.createElement("div", { "data-testid": "chat-anchor-resize-handle-vertical", onPointerDown: this.handleResizeVertStart, style: useMobileResize ? { top: mobileTopInset } : undefined, 
                         // INFO: sits a hair right of the left width handle so the two do
                         // not fight for the top-left corner; z-20 keeps it above the
                         // width strip where they still overlap
-                        className: "absolute left-3 right-0 top-0 h-2 -mt-1 z-20 flex items-center justify-center touch-none select-none cursor-ns-resize group" },
+                        role: "separator", "aria-label": "Resize chat height", "aria-orientation": "horizontal", "aria-valuemin": this.handleMinHeight(), "aria-valuemax": this.handleMaxHeight(), "aria-valuenow": heightPx, tabIndex: 0, onKeyDown: this.handleResizeHeightKeyDown, className: "absolute top-0 z-20 flex items-center justify-center touch-none select-none cursor-ns-resize group ".concat(useMobileResize
+                            ? "left-0 h-8 ".concat(this.props.hideAdditionalAction ? "right-10" : "right-0")
+                            : "left-3 right-0 h-2 -mt-1") },
                         react_2.default.createElement("div", { className: "h-1 w-10 rounded-full bg-gray-300 group-hover:bg-primary-500 transition-colors" }))),
-                    react_2.default.createElement(chatBase_1.ChatBase, __assign({}, this.props, { widthPx: widthPx, heightPx: heightPx, 
-                        // INFO: square corners when the panel is the whole screen
-                        className: "".concat((_b = this.props.className) !== null && _b !== void 0 ? _b : "", " ").concat(useAbsolutePosition ? "!rounded-none" : "") })))),
-            react_2.default.createElement("div", { className: "flex flex-row" },
+                    useMobileResize && this.props.hideAdditionalAction && (react_2.default.createElement("button", { type: "button", "aria-label": "Close chat", style: { top: mobileTopInset }, onClick: (_f = this.props.onClose) !== null && _f !== void 0 ? _f : this.props.onClick, className: "absolute top-0 right-0 z-20 h-8 w-10 flex items-center justify-center text-gray-500" },
+                        react_2.default.createElement(solid_1.XMarkIcon, { className: "h-5 w-5" }))),
+                    react_2.default.createElement(chatBase_1.ChatBase, __assign({}, this.props, { onClose: useMobileResize
+                            ? (_g = this.props.onClose) !== null && _g !== void 0 ? _g : this.props.onClick
+                            : this.props.onClose, disableMobileResize: useMobileResize ? false : this.props.disableMobileResize, sizeClassName: useMobileResize ? "h-full w-full min-h-0" : this.props.sizeClassName, widthPx: widthPx, heightPx: useMobileResize ? undefined : heightPx, 
+                        // INFO: clip custom headers to the mobile panel's rounded top corners.
+                        className: "".concat((_h = this.props.className) !== null && _h !== void 0 ? _h : "", " ").concat(useMobileResize
+                            ? "!rounded-t-2xl !rounded-b-none overflow-hidden"
+                            : useAbsolutePosition
+                                ? "!rounded-none"
+                                : "") })))),
+            react_2.default.createElement("div", { className: isMobileOpen ? "hidden sm:flex flex-row" : "flex flex-row" },
                 react_2.default.createElement("div", { ref: this.buttonRef, onClick: this.handleAnchorClick, onPointerDown: this.handleDragStart, className: "".concat(chatAnchorVisible, " ").concat(icon ? "" : "p-3", " ").concat(this.handleIsDraggable()
                         ? "touch-none cursor-grab active:cursor-grabbing"
                         : "hover:cursor-pointer", " rounded-full select-none h-fit w-fit bg-primary-500 shadow-lg hover:bg-primary-600") }, this.renderChatAnchorIcon()),