npm - @agentforge-io/chat-sdk - Versions diffs - 2.4.0-dev.2 → 2.4.0-dev.4 - Mend

@agentforge-io/chat-sdk 2.4.0-dev.2 → 2.4.0-dev.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/react.js CHANGED Viewed

@@ -268,20 +268,28 @@ function ChatWidget(props) {
     (0, react_1.useEffect)(() => {
         onConversationStartRef.current = onConversationStart;
     }, [onConversationStart]);
-    // Auto-focus the composer once the session is ready. We always
-    // focus — even on touch devices — because:
-    //   • On mobile the chat is opened from a drawer behind a tap.
-    //     That tap is a user gesture that authorises opening the
-    //     keyboard, so it's NOT jarring to focus the textarea.
-    //   • On desktop the user expects ready-to-type.
-    //   • After a send, the visitor is in conversation rhythm and
-    //     the keyboard MUST stay alive.
+    // Auto-focus the composer ONCE, the first time the session
+    // reaches `ready` AND the textarea is enabled. After that,
+    // focus is preserved by the composer's `onPointerDown
+    // preventDefault` (the send button never steals it) and by NOT
+    // firing focus() on every status change. That used to cause a
+    // visible "blink": status flips `ready → sending → streaming →
+    // ready` on every send, and a status-watching focus effect
+    // would refocus AFTER the keyboard had already started
+    // collapsing, producing the jitter.
+    const focusedOnceRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
+        if (focusedOnceRef.current)
+            return;
         if (status !== 'ready')
             return;
         if (typeof window === 'undefined')
             return;
-        inputRef.current?.focus({ preventScroll: true });
+        const el = inputRef.current;
+        if (!el || el.disabled)
+            return;
+        el.focus({ preventScroll: true });
+        focusedOnceRef.current = true;
     }, [status]);
     // ── Session lifecycle. Recreate when token / apiBaseUrl changes. ──────
     (0, react_1.useEffect)(() => {
@@ -370,25 +378,14 @@ function ChatWidget(props) {
         const text = draft.trim();
         if (!text)
             return;
-        // Mark engagement BEFORE the status flip so the auto-focus
-        // effect (which watches `status`) sees the flag when it
-        // re-runs after `ready` returns. Subsequent renders will
-        // refocus the textarea on every send completion.
         hasInteractedRef.current = true;
         setDraft('');
+        // session.send awaits start() internally, so it's safe to fire
+        // even before the initial agent/theme fetch resolves. The send
+        // button's `onPointerDown preventDefault` keeps the textarea
+        // focused through tap/click, so we don't manually re-focus
+        // here (manual focus during the status flip caused a blink).
         void session.send(text);
-        // Mobile UX: when the send button disables (sendDisabled flips
-        // true the moment status goes to 'sending'), focus would jump to
-        // <body> and the on-screen keyboard would collapse. The send
-        // button uses `onMouseDown preventDefault` to keep the textarea
-        // focused through the click, but we still re-anchor focus here
-        // as a one-shot synchronous fallback (e.g. Enter-key submit on a
-        // hardware keyboard). NO rAF retry — that caused a visible focus
-        // blink on mobile (focus left, came back a frame later).
-        const el = inputRef.current;
-        if (el && document.activeElement !== el) {
-            el.focus({ preventScroll: true });
-        }
     }, [session, draft]);
     const onKeyDown = (0, react_1.useCallback)((e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -542,13 +539,15 @@ function ChatWidget(props) {
                                 // conversation has actually ended OR before the
                                 // session is ready at all.
                                 disabled: status === 'ended' || status === 'loading' || status === 'idle' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-send",
-                                // `onMouseDown preventDefault` prevents the button from
-                                // stealing focus from the textarea when the visitor
-                                // taps Send. Without this, the focus shifts to the
-                                // button just before `handleSend` runs, the button
-                                // then disables (sendDisabled flips true), focus jumps
-                                // to <body>, and on mobile the keyboard collapses.
-                                onMouseDown: (e) => e.preventDefault(), onClick: handleSend, disabled: sendDisabled, "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(SendIcon, {}) })] }), !bare && (0, jsx_runtime_1.jsx)("div", { className: "af-footer", children: "Powered by AgentForge" })] })] }));
+                                // `onPointerDown preventDefault` is the single cross-
+                                // device guarantee that the button never steals focus
+                                // from the textarea. PointerEvents cover touch, mouse,
+                                // AND pen — `onMouseDown` alone misses mobile touch.
+                                // Without this, the focus shifts to the button just
+                                // before `handleSend` runs, the button then disables
+                                // (sendDisabled flips true on status change), focus
+                                // jumps to <body>, and the on-screen keyboard collapses.
+                                onPointerDown: (e) => e.preventDefault(), onClick: handleSend, disabled: sendDisabled, "aria-label": "Send message", children: (0, jsx_runtime_1.jsx)(SendIcon, {}) })] }), !bare && (0, jsx_runtime_1.jsx)("div", { className: "af-footer", children: "Powered by AgentForge" })] })] }));
 }
 function MessageBubble({ message, session, readOnly, onDecision, onContinue, bare = false, showAvatar = false, avatarTheme, avatarName, avatarAgentId, speakerLabel, }) {
     const kind = message.metadata?.kind;

package/dist/session.d.ts CHANGED Viewed

@@ -23,12 +23,13 @@ export declare class ChatSession {
     private readonly resumeId?;
     private listeners;
     private state;
-    private started;
+    private startPromise;
     constructor(opts: ChatSessionOptions);
     /** Returns an unsubscribe function. Listeners are called synchronously. */
     onEvent(listener: Listener): () => void;
     getState(): ChatSessionState;
     start(): Promise<void>;
+    private runStart;
     /**
      * Mark the active conversation as ended on the server and lock the
      * session locally. After this, sends throw — the consumer should drop

package/dist/session.js CHANGED Viewed

@@ -25,7 +25,13 @@ class ChatSession {
             status: 'idle',
             messages: [],
         };
-        this.started = false;
+        // Tracks the in-flight (or completed) `start()` invocation.
+        // Used so concurrent callers — typically a React effect that
+        // fires `void s.start()` AND a user that taps Send before
+        // start resolved — both await the SAME promise instead of
+        // either firing two starts or skipping the wait entirely.
+        // Resolves once status reaches `ready`/`ended` (or throws).
+        this.startPromise = null;
         if (!opts.token)
             throw new Error('ChatSession: token is required');
         const apiBaseUrl = opts.apiBaseUrl ?? defaultApiBase();
@@ -49,9 +55,14 @@ class ChatSession {
     }
     // ─── Lifecycle ──────────────────────────────────────────────────────────
     async start() {
-        if (this.started)
-            return;
-        this.started = true;
+        // Idempotent: if another caller already kicked off start(),
+        // join their promise. Critical for the React + send race.
+        if (this.startPromise)
+            return this.startPromise;
+        this.startPromise = this.runStart();
+        return this.startPromise;
+    }
+    async runStart() {
         this.setStatus('loading');
         try {
             const { agent, theme } = await this.transport.getAgent();
@@ -141,7 +152,7 @@ class ChatSession {
         this.emit({ type: 'destroyed' });
         // Drop everything — a destroyed session shouldn't be reused.
         this.state = { status: 'idle', messages: [] };
-        this.started = false;
+        this.startPromise = null;
     }
     // ─── User actions ───────────────────────────────────────────────────────
     /**
@@ -164,8 +175,11 @@ class ChatSession {
         if (this.state.status === 'ended') {
             throw new Error('Conversation has ended. Start a fresh chat to continue.');
         }
-        if (!this.started)
-            await this.start();
+        // Always await start — start() is idempotent and resolves
+        // immediately if it already completed. This closes the race
+        // where the user taps Send while the initial agent/theme
+        // fetch is still in flight and conversationId is unset.
+        await this.start();
         if (!opts?.silent) {
             this.appendMessage({
                 id: makeMessageId('u'),

package/package.json CHANGED Viewed

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