@agentforge-io/chat-sdk 2.4.0-dev.6 → 2.4.0-dev.8

package/dist/ChatDrawer.js

@@ -45,7 +45,14 @@ const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const react_2 = require("./react");
 function ChatDrawer(props) {
-    const { open, onOpenChange, snap = 0.98, header, closeOnBackdropClick = true, drawerClassName, surfaceStyle: surfaceStyleProp, widgetProps, chatSlot, } = props;
+    const { open, onOpenChange, snap = 1, header, closeOnBackdropClick = true, drawerClassName, surfaceStyle: surfaceStyleProp, widgetProps, chatSlot, } = props;
+    // `fullscreen` mode: snap=1 (the default). The drawer occupies the
+    // entire visible viewport. We disable drag-to-dismiss, the backdrop,
+    // the rounded top corners, and the drag handle in this mode — they
+    // exist purely for the bottom-sheet form factor (snap<1) where the
+    // page peeks behind the surface. With snap=1 there's nothing behind
+    // and no affordance to drag against.
+    const fullscreen = snap >= 1;
     // We mount once and keep alive across close→reopen so the chat session
     // doesn't get destroyed. After the FIRST open the panel stays in the
     // DOM forever (toggled by `display:none`) — `hasOpened` gates the
@@ -185,25 +192,50 @@ function ChatDrawer(props) {
     // Motion / sizing portion of the surface style, kept separate from
     // the host-supplied theming so a re-render driven by drag offset
     // doesn't smash the host's CSS vars.
-    const surfaceMotionStyle = {
-        height: `${drawerHeight}px`,
-        transform: `translate3d(0, ${translateY}, 0)`,
-        bottom: `${vv.offsetTop}px`,
-        transition: isDragging ? 'none' : 'transform 240ms cubic-bezier(.32,.72,0,1)',
-        willChange: 'transform',
-    };
+    //
+    // Two distinct positioning modes:
+    //
+    // **fullscreen (snap=1)**: pin the surface to the VISUAL viewport
+    // box. `top = visualViewport.offsetTop` + `height = visualViewport.h`
+    // means the drawer sits exactly on the area the user can see, with
+    // the bottom edge flush against the on-screen keyboard (when it's up)
+    // or the bottom of the screen (when it's down). No layout viewport
+    // gymnastics needed.
+    //
+    // **bottom-sheet (snap<1)**: anchor the surface to the bottom of the
+    // visual viewport. `bottom = visualViewport.offsetTop` is the legacy
+    // path that handles the rubber-band scroll case on iOS Safari.
+    const surfaceMotionStyle = fullscreen
+        ? {
+            top: `${vv.offsetTop}px`,
+            height: `${vv.h}px`,
+            transform: `translate3d(0, ${translateY}, 0)`,
+            transition: isDragging
+                ? 'none'
+                : 'transform 240ms cubic-bezier(.32,.72,0,1)',
+            willChange: 'transform',
+        }
+        : {
+            height: `${drawerHeight}px`,
+            transform: `translate3d(0, ${translateY}, 0)`,
+            bottom: `${vv.offsetTop}px`,
+            transition: isDragging
+                ? 'none'
+                : 'transform 240ms cubic-bezier(.32,.72,0,1)',
+            willChange: 'transform',
+        };
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: "af-drawer-root", "data-state": open ? 'open' : 'closed', style: {
             position: 'fixed',
             inset: 0,
             zIndex: 2147483600,
             pointerEvents: open ? 'auto' : 'none',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { className: "af-drawer-backdrop", onClick: closeOnBackdropClick ? () => onOpenChange(false) : undefined, style: {
+        }, children: [!fullscreen && ((0, jsx_runtime_1.jsx)("div", { className: "af-drawer-backdrop", onClick: closeOnBackdropClick ? () => onOpenChange(false) : undefined, style: {
                     position: 'absolute',
                     inset: 0,
                     backgroundColor: 'rgba(0, 0, 0, 0.4)',
                     opacity: open ? 1 : 0,
                     transition: 'opacity 200ms ease-out',
-                }, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)("div", { ref: surfaceRef, id: panelId, role: "dialog", "aria-modal": "true", className: `af-drawer-surface ${drawerClassName ?? ''}`, style: {
+                }, "aria-hidden": true })), (0, jsx_runtime_1.jsxs)("div", { ref: surfaceRef, id: panelId, role: "dialog", "aria-modal": "true", className: `af-drawer-surface ${drawerClassName ?? ''}`, style: {
                     position: 'absolute',
                     left: 0,
                     right: 0,
@@ -216,9 +248,10 @@ function ChatDrawer(props) {
                     // the correct path.
                     backgroundColor: 'var(--af-bg, #ffffff)',
                     color: 'var(--af-fg, inherit)',
-                    borderTopLeftRadius: '16px',
-                    borderTopRightRadius: '16px',
-                    boxShadow: '0 -8px 24px rgba(15, 23, 42, 0.25)',
+                    // Bottom-sheet visuals only — fullscreen mode is flat.
+                    borderTopLeftRadius: fullscreen ? 0 : '16px',
+                    borderTopRightRadius: fullscreen ? 0 : '16px',
+                    boxShadow: fullscreen ? 'none' : '0 -8px 24px rgba(15, 23, 42, 0.25)',
                     display: 'flex',
                     flexDirection: 'column',
                     overflow: 'hidden',
@@ -227,7 +260,7 @@ function ChatDrawer(props) {
                     // `height` declarations a careless host might pass.
                     ...surfaceStyleProp,
                     ...surfaceMotionStyle,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onPointerCancel: onHandlePointerUp, style: {
+                }, children: [!fullscreen && ((0, jsx_runtime_1.jsx)("div", { onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onPointerCancel: onHandlePointerUp, style: {
                             padding: '10px 0',
                             cursor: 'grab',
                             touchAction: 'none',
@@ -240,5 +273,5 @@ function ChatDrawer(props) {
                                 borderRadius: '999px',
                                 backgroundColor: 'var(--af-muted, rgba(100, 116, 139, 0.45))',
                                 display: 'block',
-                            } }) }), header, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: chatSlot ?? (widgetProps ? ((0, jsx_runtime_1.jsx)(react_2.ChatWidget, { ...widgetProps, inline: true, variant: widgetProps.variant ?? 'bare' })) : null) })] })] }), portalEl);
+                            } }) })), header, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: chatSlot ?? (widgetProps ? ((0, jsx_runtime_1.jsx)(react_2.ChatWidget, { ...widgetProps, inline: true, variant: widgetProps.variant ?? 'bare' })) : null) })] })] }), portalEl);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.4.0-dev.6",
+  "version": "2.4.0-dev.8",
   "description": "Framework-free chat session SDK for AgentForge public chat tokens. Headless — no DOM. Drop into any frontend (React, Vue, Svelte, vanilla) and listen for events.",
   "license": "MIT",
   "main": "dist/index.js",