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

package/dist/ChatDrawer.js

@@ -205,24 +205,44 @@ function ChatDrawer(props) {
     // **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.
+    // Motion choreography (NLP-aware):
+    //   - Origin: the drawer "grows" from the bottom of the page rather
+    //     than appearing in place. Subconsciously this maps to "the chat
+    //     emerges because YOU asked for it" — agency stays with the user.
+    //   - Curve: cubic-bezier(.22, 1, .36, 1) is the ease-out-expo curve.
+    //     It starts fast, then settles with the same deceleration profile
+    //     a hand has when reaching out and stopping. Bodies recognize it
+    //     as "natural" without consciously parsing why.
+    //   - Duration: 360ms. Below 300ms feels mechanical/jumpy. Above 450ms
+    //     feels sluggish on mobile. 360ms is the breath-pause sweet spot
+    //     for "the world updated and I noticed it".
+    //   - Coupled fade+scale: the surface opens at 98% scale and fades in
+    //     while sliding. The 2% scale delta is barely perceivable
+    //     consciously but the brain reads it as "expanding into presence"
+    //     instead of "popping in".
+    const transitionExpr = isDragging
+        ? 'none'
+        : 'transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 240ms cubic-bezier(.22, 1, .36, 1)';
+    const openTransform = `translate3d(0, ${dragOffset}px, 0) scale(${open ? 1 : 0.98})`;
+    const closedTransformFullscreen = `translate3d(0, 24px, 0) scale(0.98)`;
+    const closedTransformSheet = `translate3d(0, ${drawerHeight}px, 0) scale(1)`;
     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',
+            transform: open ? openTransform : closedTransformFullscreen,
+            opacity: open ? 1 : 0,
+            transition: transitionExpr,
+            transformOrigin: 'bottom center',
+            willChange: 'transform, opacity',
         }
         : {
             height: `${drawerHeight}px`,
-            transform: `translate3d(0, ${translateY}, 0)`,
+            transform: open ? openTransform : closedTransformSheet,
             bottom: `${vv.offsetTop}px`,
-            transition: isDragging
-                ? 'none'
-                : 'transform 240ms cubic-bezier(.32,.72,0,1)',
-            willChange: 'transform',
+            transition: transitionExpr,
+            transformOrigin: 'bottom center',
+            willChange: 'transform, opacity',
         };
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: "af-drawer-root", "data-state": open ? 'open' : 'closed', style: {
             position: 'fixed',

package/dist/react.d.ts

@@ -198,6 +198,26 @@ export interface ChatWidgetHandle {
      * and the cursor lands at the end of the inserted text.
      */
     insertText(text: string): void;
+    /**
+     * Move keyboard focus to the composer textarea. Use when the
+     * host UI surfaces the widget late (e.g. opening a drawer) and
+     * wants the on-screen keyboard up immediately. Safe no-op when
+     * the textarea hasn't mounted yet or is disabled.
+     */
+    focus(): void;
+    /**
+     * Warm up the underlying session — fires the initial
+     * `GET /agent` (and optionally a `resumeConversation` lookup) so
+     * the first `send()` doesn't pay the round-trip. Idempotent:
+     * subsequent calls join the same in-flight promise.
+     *
+     * Hosts call this when the visitor signals INTENT to chat (e.g.
+     * tapping a fake-composer pill that opens a drawer) so the
+     * session boot overlaps with the visitor finding the keyboard
+     * and tapping out their first message. Safe no-op if the session
+     * is already past `loading`.
+     */
+    warmup(): void;
 }
 /**
  * Drop-in chat widget. Owns its own `ChatSession` and re-renders on every

package/dist/react.js

@@ -291,14 +291,31 @@ function ChatWidget(props) {
         el.focus({ preventScroll: true });
         focusedOnceRef.current = true;
     }, [status]);
-    // ── Session lifecycle. Recreate when token / apiBaseUrl changes. ──────
+    // ── Session lifecycle. Recreate when token / apiBaseUrl / browserSessionId
+    // / stream changes. NOTE: `resumeConversationId` is intentionally NOT a
+    // dependency.
+    //
+    // Why: hosts typically wire `resumeConversationId={conversationId}`
+    // and call `setConversationId(id)` in `onConversationStart`. The
+    // conversation_started event fires AFTER the SSE stream opens and
+    // the first chunks already started flowing. If we treated
+    // resumeConversationId as a reactive dep, this effect would
+    // re-run mid-stream, destroy the live ChatSession, and the
+    // remaining chunks would land in a corpse — the visitor sees
+    // an empty assistant bubble even though the backend completed
+    // the turn successfully.
+    //
+    // We capture the resume id at mount via a ref. Subsequent host
+    // updates to it are ignored — the SDK already owns the live
+    // conversation id internally via session.state.conversationId.
+    const resumeRef = (0, react_1.useRef)(resumeConversationId);
     (0, react_1.useEffect)(() => {
         let cancelled = false;
         const s = new session_1.ChatSession({
             token,
             apiBaseUrl,
             browserSessionId,
-            resumeConversationId,
+            resumeConversationId: resumeRef.current,
             stream,
         });
         setSession(s);
@@ -336,7 +353,10 @@ function ChatWidget(props) {
             unsubscribe();
             s.destroy();
         };
-    }, [token, apiBaseUrl, browserSessionId, resumeConversationId, stream]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- resumeConversationId
+        // is captured via resumeRef on first mount; reactive updates are
+        // ignored by design. See block comment above.
+    }, [token, apiBaseUrl, browserSessionId, stream]);
     // Auto-scroll on new tokens.
     //
     // We defer the scroll into a requestAnimationFrame so the DOM has
@@ -442,6 +462,20 @@ function ChatWidget(props) {
                 void session.send(trimmed);
             },
             insertText,
+            focus: () => {
+                const el = inputRef.current;
+                if (!el || el.disabled)
+                    return;
+                el.focus({ preventScroll: true });
+            },
+            warmup: () => {
+                // session.start() is idempotent — joins the in-flight
+                // promise if one exists, resolves immediately if start
+                // already completed.
+                if (!session)
+                    return;
+                void session.start();
+            },
         };
         return () => {
             // Drop the handle on unmount so a stale ref can't fire send
@@ -532,7 +566,9 @@ 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, 
+                            }, children: text }, `${i}-${text}`))) })), (0, jsx_runtime_1.jsxs)("div", { className: "af-input-row", "data-loading": status === 'loading' || status === 'idle' ? '' : undefined, 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: status === 'idle' || status === 'loading'
+                                    ? 'Preparing chat…'
+                                    : 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
@@ -547,7 +583,14 @@ function ChatWidget(props) {
                                 // 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" })] })] }));
+                                onPointerDown: (e) => e.preventDefault(), onClick: handleSend, disabled: sendDisabled, "aria-label": status === 'sending' || status === 'streaming'
+                                    ? 'Sending message'
+                                    : status === 'idle' || status === 'loading'
+                                        ? 'Preparing chat'
+                                        : 'Send message', children: status === 'sending' ||
+                                    status === 'streaming' ||
+                                    status === 'idle' ||
+                                    status === 'loading' ? ((0, jsx_runtime_1.jsx)(SpinnerIcon, {})) : ((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;
@@ -720,6 +763,11 @@ function CloseIcon() {
 function SendIcon() {
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), (0, jsx_runtime_1.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
 }
+function SpinnerIcon() {
+    // Inline SVG spinner — no external dep. Stroke-dasharray
+    // arc rotates via the CSS keyframes injected by WIDGET_CSS.
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", className: "af-spinner", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }));
+}
 // Stylesheet kept verbatim from the standalone widget.js so the React
 // component is visually indistinguishable from the script-injected one.
 const WIDGET_CSS = `
@@ -804,6 +852,8 @@ const WIDGET_CSS = `
   to { opacity: 1; transform: translateY(0); }
 }
 .af-input-row { padding: 12px; border-top: 1px solid var(--af-border); background: var(--af-bg); display: flex; gap: 8px; align-items: flex-end; }
+.af-input-row[data-loading] .af-input { cursor: progress; opacity: 0.7; }
+.af-input-row[data-loading] .af-input::placeholder { font-style: italic; }
 /* Composer left slot — hosts use this for affordance buttons that
    scope the next turn (member picker, tools menu, attachments).
    align-items: center keeps a single-line chip vertically centered
@@ -863,6 +913,8 @@ const WIDGET_CSS = `
 .af-send:active:not(:disabled) { transform: translateY(0); }
 .af-send:disabled { opacity: 0.5; cursor: not-allowed; }
 .af-send svg { width: 16px; height: 16px; }
+.af-send .af-spinner { animation: af-spin 720ms linear infinite; }
+@keyframes af-spin { to { transform: rotate(360deg); } }
 .af-error { padding: 10px 16px; font-size: 12px; color: #b91c1c; background: #fef2f2; border-top: 1px solid #fee2e2; }
 .af-footer { padding: 6px 12px; font-size: 10px; color: var(--af-muted); text-align: center; background: var(--af-bubble-bg); border-top: 1px solid var(--af-border); }
 /* Approval and blocked bubbles. Amber for needs-decision, red for

package/package.json

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