@agentforge-io/chat-sdk 2.4.0-dev.7 → 2.4.0-dev.9

package/dist/ChatDrawer.js

@@ -192,13 +192,38 @@ 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,

package/dist/session.d.ts

@@ -69,6 +69,7 @@ export declare class ChatSession {
     private removeMessage;
     private setStatus;
     private emitStateChange;
+    private debug;
     private handleError;
     private emit;
 }

package/dist/session.js

@@ -172,6 +172,7 @@ class ChatSession {
         const trimmed = text.trim();
         if (!trimmed)
             return '';
+        this.debug('send() called', { text: trimmed, status: this.state.status });
         if (this.state.status === 'ended') {
             throw new Error('Conversation has ended. Start a fresh chat to continue.');
         }
@@ -180,6 +181,7 @@ class ChatSession {
         // where the user taps Send while the initial agent/theme
         // fetch is still in flight and conversationId is unset.
         await this.start();
+        this.debug('send() start awaited, status=' + this.state.status);
         if (!opts?.silent) {
             this.appendMessage({
                 id: makeMessageId('u'),
@@ -203,6 +205,7 @@ class ChatSession {
     }
     // ─── Internals ──────────────────────────────────────────────────────────
     async runStream(text, assistant) {
+        this.debug('runStream start', { hasConvId: !!this.state.conversationId });
         this.setStatus('sending');
         // The "active" message is the one we're currently appending
         // text_deltas into. For non-team sessions it's always the initial
@@ -221,8 +224,11 @@ class ChatSession {
             const generator = this.state.conversationId
                 ? this.transport.streamSendMessage(this.state.conversationId, text, this.browserSessionId)
                 : this.transport.streamCreateConversation(text, this.browserSessionId);
+            this.debug('runStream got generator, awaiting events');
             let sawAnyChunk = false;
+            let chunkCount = 0;
             for await (const evt of generator) {
+                this.debug('SSE evt', evt.kind, chunkCount++);
                 if (evt.kind === 'conversation') {
                     this.state.conversationId = evt.id;
                     this.emit({ type: 'conversation_started', conversationId: evt.id });
@@ -398,6 +404,7 @@ class ChatSession {
             cleanup(assistant);
             if (active !== assistant)
                 cleanup(active);
+            this.debug('runStream THREW', err instanceof Error ? err.message : String(err));
             this.handleError(err);
             return assistant.content;
         }
@@ -458,6 +465,50 @@ class ChatSession {
     emitStateChange() {
         this.emit({ type: 'state', state: this.getState() });
     }
+    // Lightweight debug logger that BOTH logs to console AND appends
+    // to a visible on-screen overlay so mobile QA without remote
+    // devtools can still see what's happening. Enable by running
+    // `localStorage.setItem('af-chat-debug', '1')` in the browser
+    // console (or via the URL `?af-debug=1` once mounted) and
+    // reloading. Disabled by default so production ships clean.
+    debug(...args) {
+        try {
+            if (typeof window === 'undefined')
+                return;
+            const ls = window.localStorage;
+            let enabled = ls?.getItem('af-chat-debug') === '1';
+            if (!enabled && window.location?.search?.includes('af-debug=1')) {
+                ls?.setItem('af-chat-debug', '1');
+                enabled = true;
+            }
+            if (!enabled)
+                return;
+            const msg = args
+                .map((a) => (typeof a === 'string' ? a : JSON.stringify(a)))
+                .join(' ');
+            // eslint-disable-next-line no-console
+            console.log('[chat-sdk]', msg);
+            // Visible overlay (single shared element across all sessions).
+            let panel = document.getElementById('af-debug-panel');
+            if (!panel) {
+                panel = document.createElement('div');
+                panel.id = 'af-debug-panel';
+                panel.style.cssText =
+                    'position:fixed;top:0;left:0;right:0;max-height:38vh;overflow:auto;' +
+                        'background:rgba(0,0,0,0.85);color:#7CFC00;font:11px/1.3 monospace;' +
+                        'padding:6px 8px;z-index:2147483647;pointer-events:auto;' +
+                        'white-space:pre-wrap;word-break:break-all;';
+                document.body.appendChild(panel);
+            }
+            const line = document.createElement('div');
+            line.textContent = `${new Date().toISOString().slice(11, 23)} ${msg}`;
+            panel.appendChild(line);
+            panel.scrollTop = panel.scrollHeight;
+        }
+        catch {
+            /* localStorage can throw in private mode — ignore */
+        }
+    }
     handleError(err) {
         const message = err instanceof Error ? err.message : String(err);
         const code = err && typeof err === 'object' && 'code' in err

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentforge-io/chat-sdk",
-  "version": "2.4.0-dev.7",
+  "version": "2.4.0-dev.9",
   "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",