npm - @agentforge-io/chat-sdk - Versions diffs - 2.4.0-dev.0 → 2.4.0-dev.1 - Mend

@agentforge-io/chat-sdk 2.4.0-dev.0 → 2.4.0-dev.1

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 (2) hide show

package/dist/react.js +36 -1
package/package.json +1 -1

package/dist/react.js CHANGED Viewed

@@ -385,6 +385,28 @@ function ChatWidget(props) {
         hasInteractedRef.current = true;
         setDraft('');
         void session.send(text);
+        // Mobile UX: when the send button disables (sendDisabled flips
+        // true the moment status goes to 'sending'), focus jumps to
+        // <body> and the on-screen keyboard collapses. Re-anchor focus
+        // on the textarea synchronously so the visitor keeps typing
+        // their next message without re-tapping. We schedule one rAF
+        // to win the race against React's status flip + button disable
+        // (a single tick is enough — mobile browsers haven't decided
+        // to dismiss the keyboard yet).
+        if (typeof window !== 'undefined') {
+            const el = inputRef.current;
+            if (el) {
+                el.focus({ preventScroll: true });
+                // Belt-and-braces: re-focus in the next frame in case
+                // React's render happens AFTER our synchronous focus call
+                // and steals it via the button-disable side effect.
+                window.requestAnimationFrame(() => {
+                    if (document.activeElement !== el) {
+                        el.focus({ preventScroll: true });
+                    }
+                });
+            }
+        }
     }, [session, draft]);
     const onKeyDown = (0, react_1.useCallback)((e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -531,7 +553,20 @@ function ChatWidget(props) {
                                     onShortcutClick(text, i);
                                 else
                                     setDraft(text);
-                            }, children: text }, `${i}-${text}`))) })), (0, jsx_runtime_1.jsxs)("div", { className: "af-input-row", children: [composerLeftSlot && ((0, jsx_runtime_1.jsx)("div", { className: "af-input-left", children: composerLeftSlot })), (0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: "af-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, placeholder: inputPlaceholder ?? 'Type a message…', rows: 1, disabled: status === 'ended' || status === 'loading' || status === 'idle' }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-send", 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" })] })] }));
+                            }, children: text }, `${i}-${text}`))) })), (0, jsx_runtime_1.jsxs)("div", { className: "af-input-row", children: [composerLeftSlot && ((0, jsx_runtime_1.jsx)("div", { className: "af-input-left", children: composerLeftSlot })), (0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, className: "af-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, placeholder: inputPlaceholder ?? 'Type a message…', rows: 1,
+                                // The textarea stays editable while the agent is
+                                // streaming so the visitor can compose their next
+                                // message without waiting. Only block when the
+                                // 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" })] })] }));
 }
 function MessageBubble({ message, session, readOnly, onDecision, onContinue, bare = false, showAvatar = false, avatarTheme, avatarName, avatarAgentId, speakerLabel, }) {
     const kind = message.metadata?.kind;

package/package.json CHANGED Viewed

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