@agentforge-io/chat-sdk 2.4.0 → 2.5.0

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.js

@@ -517,51 +517,143 @@ function ChatWidget(props) {
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: rootClass, style: rootStyle, "data-style-id": styleId, children: [!inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-toggle", "aria-label": open ? 'Close chat' : 'Open chat', "aria-expanded": open, onClick: () => setOpen((v) => !v), children: open ? (0, jsx_runtime_1.jsx)(CloseIcon, {}) : (0, jsx_runtime_1.jsx)(ChatIcon, {}) })), (0, jsx_runtime_1.jsxs)("div", { className: `af-panel ${open ? 'af-open' : ''}`, children: [!bare && ((0, jsx_runtime_1.jsxs)("div", { className: "af-header", children: [theme?.avatarUrl ? (
                             // eslint-disable-next-line @next/next/no-img-element
-                            (0, jsx_runtime_1.jsx)("img", { className: "af-header-avatar", src: theme.avatarUrl, alt: "" })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "af-header-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-header-title", children: personaName ?? theme?.title ?? agent?.name ?? 'Chat' }), (0, jsx_runtime_1.jsx)("div", { className: "af-header-subtitle", children: status === 'loading' ? 'Loading…' : agent?.description ?? '' })] }), !inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-close", onClick: () => setOpen(false), "aria-label": "Close chat", children: (0, jsx_runtime_1.jsx)(CloseIcon, {}) }))] })), (0, jsx_runtime_1.jsx)("div", { className: "af-messages", ref: messagesRef, children: messages.map((m, i) => {
-                            // Show the avatar only on the FIRST bubble in a run of
-                            // assistant messages BY THE SAME speaker. A delegation
-                            // boundary (orchestrator → member, or member → next
-                            // member) counts as a new run so each speaker gets their
-                            // avatar surfaced. User/system bubbles never get an avatar.
-                            const prev = messages[i - 1];
-                            const isAssistant = m.role === 'assistant';
-                            const sameAssistantRun = prev?.role === 'assistant' &&
-                                (prev?.actingAgentId ?? null) === (m.actingAgentId ?? null);
-                            const showAvatar = bare && isAssistant && !sameAssistantRun;
-                            // Per-bubble identity resolution. When the chunk carried
-                            // an `actingAgentId` (orchestrator delegated to a member),
-                            // we render the member's avatar/name instead of the
-                            // primary agent's. Falling back to the primary identity
-                            // keeps non-team sessions and orchestrator-self turns
-                            // looking the same as before.
-                            const member = m.actingAgentId
-                                ? membersById.get(m.actingAgentId)
-                                : undefined;
-                            const bubbleAvatarTheme = member
-                                ? { ...theme, avatarUrl: member.avatarUrl }
-                                : theme;
-                            const bubbleAvatarName = member?.name ?? personaName ?? agent?.name;
-                            // Seed for the deterministic-hue fallback avatar. Prefer
-                            // the acting agent id (so each member in a team gets its
-                            // own stable color) and fall back to the primary agent's
-                            // slug for solo chats / orchestrator-self turns. The
-                            // `agent` summary doesn't carry an id — slug is stable
-                            // and unique, which is all hueFromSeed needs.
-                            const bubbleAgentId = m.actingAgentId ?? agent?.slug;
-                            return ((0, jsx_runtime_1.jsx)(MessageBubble, { message: m, session: session, readOnly: readOnlyApprovals, onDecision: onApprovalDecision, bare: bare, showAvatar: showAvatar, avatarTheme: bubbleAvatarTheme, avatarName: bubbleAvatarName, avatarAgentId: bubbleAgentId, speakerLabel: member?.name, onContinue: () => {
-                                    // After a successful Approve, kick the next turn so the
-                                    // gate's fast-path consumes the approval and the tool
-                                    // actually runs. `silent: true` keeps the literal
-                                    // "continue" prompt out of the visible transcript —
-                                    // the visitor just sees the assistant's next reply
-                                    // appearing under the "Approved" pill.
-                                    if (!session)
-                                        return;
-                                    setTimeout(() => {
-                                        void session.send('continue', { silent: true });
-                                    }, 250);
-                                } }, m.id));
-                        }) }), lastError && status === 'error' && ((0, jsx_runtime_1.jsx)("div", { className: "af-error", children: lastError })), bare && greeting && messages.length === 0 && status !== 'loading' && ((0, jsx_runtime_1.jsx)("div", { className: "af-greeting-slot", children: (0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant af-msg-row-greeting", children: [(0, jsx_runtime_1.jsx)(AssistantAvatar, { theme: theme, name: personaName ?? agent?.name, agentId: agent?.slug, show: true }), (0, jsx_runtime_1.jsx)("div", { className: "af-msg af-msg-assistant af-msg-greeting", dangerouslySetInnerHTML: { __html: renderMarkdown(greeting) } })] }) })), shortcuts && shortcuts.length > 0 && messages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "af-shortcut-row", children: shortcuts.map((text, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-shortcut", onClick: () => {
+                            (0, jsx_runtime_1.jsx)("img", { className: "af-header-avatar", src: theme.avatarUrl, alt: "" })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "af-header-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "af-header-title", children: personaName ?? theme?.title ?? agent?.name ?? 'Chat' }), (0, jsx_runtime_1.jsx)("div", { className: "af-header-subtitle", children: status === 'loading' ? 'Loading…' : agent?.description ?? '' })] }), !inline && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-close", onClick: () => setOpen(false), "aria-label": "Close chat", children: (0, jsx_runtime_1.jsx)(CloseIcon, {}) }))] })), (0, jsx_runtime_1.jsx)("div", { className: "af-messages", ref: messagesRef, children: (() => {
+                            // Pre-walk the transcript to identify "delegation chains":
+                            // a sequence of consecutive assistant bubbles where each has
+                            // a different `actingAgentId` AND every intermediate bubble
+                            // is empty (the orchestrator/member delegated immediately
+                            // and never produced text of its own). The visible bubble
+                            // is the LAST one — the speaker that actually answered.
+                            //
+                            // For each chain we render a single MessageBubble for the
+                            // last entry, with the avatar slot replaced by a HORIZONTAL
+                            // STACK of every participant in delegation order: the
+                            // active speaker first (largest), the upstream delegators
+                            // smaller and overlapped to the right.
+                            //
+                            // chainHeadFor[i] holds the head index of the chain that
+                            // contains message i. visibleIdxs is the list of indices
+                            // we actually render.
+                            const chainHeadFor = new Array(messages.length);
+                            const visibleIdxs = [];
+                            for (let i = 0; i < messages.length; i++) {
+                                const m = messages[i];
+                                if (m.role !== 'assistant') {
+                                    chainHeadFor[i] = i;
+                                    visibleIdxs.push(i);
+                                    continue;
+                                }
+                                const prev = messages[i - 1];
+                                const prevSameSpeaker = prev?.role === 'assistant' &&
+                                    (prev?.actingAgentId ?? null) === (m.actingAgentId ?? null);
+                                // Walk back through the chain: pick the head of the
+                                // previous bubble's chain if that bubble was an empty
+                                // assistant with a DIFFERENT actingAgentId (delegation
+                                // boundary). Same speaker -> head stays the same.
+                                if (prev?.role === 'assistant' &&
+                                    (prev.actingAgentId ?? null) !== (m.actingAgentId ?? null) &&
+                                    !prev.content) {
+                                    chainHeadFor[i] = chainHeadFor[i - 1];
+                                }
+                                else if (prevSameSpeaker) {
+                                    chainHeadFor[i] = chainHeadFor[i - 1];
+                                }
+                                else {
+                                    chainHeadFor[i] = i;
+                                }
+                                visibleIdxs.push(i);
+                            }
+                            // Drop the empty intermediaries: every assistant bubble
+                            // that has no content AND whose chain ends at a later
+                            // bubble is hidden. The chain head will collect their
+                            // identities and surface them as an avatar group.
+                            const lastInChain = new Map(); // head -> last idx
+                            for (const i of visibleIdxs) {
+                                if (messages[i].role === 'assistant') {
+                                    lastInChain.set(chainHeadFor[i], i);
+                                }
+                            }
+                            const finalIdxs = visibleIdxs.filter((i) => {
+                                const m = messages[i];
+                                if (m.role !== 'assistant')
+                                    return true;
+                                const head = chainHeadFor[i];
+                                const last = lastInChain.get(head);
+                                // Hide intermediates: assistant bubbles that are part of
+                                // a chain whose LAST element is a later bubble AND that
+                                // are themselves empty. The last bubble in the chain
+                                // always renders; non-empty intermediates also render so
+                                // we never lose visible text.
+                                if (last !== undefined && i !== last && !m.content)
+                                    return false;
+                                return true;
+                            });
+                            return finalIdxs.map((i) => {
+                                const m = messages[i];
+                                const prev = messages[i - 1];
+                                const isAssistant = m.role === 'assistant';
+                                const sameAssistantRun = prev?.role === 'assistant' &&
+                                    (prev?.actingAgentId ?? null) === (m.actingAgentId ?? null);
+                                const showAvatar = bare && isAssistant && !sameAssistantRun;
+                                // Per-bubble identity resolution.
+                                const member = m.actingAgentId
+                                    ? membersById.get(m.actingAgentId)
+                                    : undefined;
+                                const bubbleAvatarTheme = member
+                                    ? { ...theme, avatarUrl: member.avatarUrl }
+                                    : theme;
+                                const bubbleAvatarName = member?.name ?? personaName ?? agent?.name;
+                                const bubbleAgentId = m.actingAgentId ?? agent?.slug;
+                                // Build the delegation-chain participants list when this
+                                // bubble is the LAST in a chain (= the speaker that
+                                // answered). Order: active speaker first, then the prior
+                                // delegators in REVERSE chronological order so the most
+                                // recent delegator sits closest to the active avatar.
+                                let chainParticipants;
+                                if (isAssistant && showAvatar) {
+                                    const head = chainHeadFor[i];
+                                    const last = lastInChain.get(head);
+                                    if (last === i && head !== i) {
+                                        // Collect all distinct speakers in [head…i] in
+                                        // chronological order, then surface them with the
+                                        // active one (the last) at the front.
+                                        const seen = new Set();
+                                        const ordered = [];
+                                        for (let j = head; j <= i; j++) {
+                                            const mj = messages[j];
+                                            if (mj.role !== 'assistant')
+                                                continue;
+                                            const key = mj.actingAgentId ?? null;
+                                            if (seen.has(key))
+                                                continue;
+                                            seen.add(key);
+                                            const mem = mj.actingAgentId
+                                                ? membersById.get(mj.actingAgentId)
+                                                : undefined;
+                                            ordered.push({
+                                                agentId: mj.actingAgentId ?? agent?.slug,
+                                                name: mem?.name ?? personaName ?? agent?.name,
+                                                theme: mem
+                                                    ? { ...theme, avatarUrl: mem.avatarUrl }
+                                                    : theme,
+                                            });
+                                        }
+                                        if (ordered.length > 1) {
+                                            // Move the LAST (active speaker) to the front.
+                                            const active = ordered.pop();
+                                            chainParticipants = [active, ...ordered.reverse()];
+                                        }
+                                    }
+                                }
+                                return ((0, jsx_runtime_1.jsx)(MessageBubble, { message: m, session: session, readOnly: readOnlyApprovals, onDecision: onApprovalDecision, bare: bare, showAvatar: showAvatar, avatarTheme: bubbleAvatarTheme, avatarName: bubbleAvatarName, avatarAgentId: bubbleAgentId, speakerLabel: member?.name, chainParticipants: chainParticipants, onContinue: () => {
+                                        if (!session)
+                                            return;
+                                        setTimeout(() => {
+                                            void session.send('continue', { silent: true });
+                                        }, 250);
+                                    } }, m.id));
+                            });
+                        })() }), lastError && status === 'error' && ((0, jsx_runtime_1.jsx)("div", { className: "af-error", children: lastError })), bare && greeting && messages.length === 0 && status !== 'loading' && ((0, jsx_runtime_1.jsx)("div", { className: "af-greeting-slot", children: (0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant af-msg-row-greeting", children: [(0, jsx_runtime_1.jsx)(AssistantAvatar, { theme: theme, name: personaName ?? agent?.name, agentId: agent?.slug, show: true }), (0, jsx_runtime_1.jsx)("div", { className: "af-msg af-msg-assistant af-msg-greeting", dangerouslySetInnerHTML: { __html: renderMarkdown(greeting) } })] }) })), shortcuts && shortcuts.length > 0 && messages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "af-shortcut-row", children: shortcuts.map((text, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "af-shortcut", onClick: () => {
                                 if (onShortcutClick)
                                     onShortcutClick(text, i);
                                 else
@@ -592,16 +684,16 @@ function ChatWidget(props) {
                                     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, }) {
+function MessageBubble({ message, session, readOnly, onDecision, onContinue, bare = false, showAvatar = false, avatarTheme, avatarName, avatarAgentId, speakerLabel, chainParticipants, }) {
     const kind = message.metadata?.kind;
     if (kind === 'awaiting_approval') {
         // Approval / blocked bubbles also count as "assistant-side" so we
         // wrap them in the same row geometry — keeps the conversation
         // aligned even when a tool dispatch interrupts the regular flow.
-        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)(ApprovalBubble, { message: message, session: session, readOnly: readOnly, onDecision: onDecision, onContinue: onContinue }), speakerLabel);
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)(ApprovalBubble, { message: message, session: session, readOnly: readOnly, onDecision: onDecision, onContinue: onContinue }), speakerLabel, chainParticipants);
     }
     if (kind === 'tool_blocked') {
-        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)(BlockedBubble, { message: message }), speakerLabel);
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)(BlockedBubble, { message: message }), speakerLabel, chainParticipants);
     }
     const cls = `af-msg af-msg-${message.role}${message.role === 'assistant' && message.isStreaming
         ? message.content
@@ -610,13 +702,13 @@ function MessageBubble({ message, session, readOnly, onDecision, onContinue, bar
         : ''}`;
     // Typing state (no content yet): render the three-dot indicator, no markdown.
     if (message.role === 'assistant' && message.isStreaming && !message.content) {
-        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)("div", { className: cls, children: (0, jsx_runtime_1.jsxs)("span", { className: "af-typing-dots", "aria-label": "Assistant is typing", children: [(0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {})] }) }), speakerLabel);
+        return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)("div", { className: cls, children: (0, jsx_runtime_1.jsxs)("span", { className: "af-typing-dots", "aria-label": "Assistant is typing", children: [(0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {}), " ", (0, jsx_runtime_1.jsx)("span", {})] }) }), speakerLabel, chainParticipants);
     }
     if (message.role === 'assistant') {
         return wrapAssistantRow(bare, showAvatar, avatarTheme, avatarName, avatarAgentId, (0, jsx_runtime_1.jsx)("div", { className: cls, 
             // Output is sanitized by escapeHtml + a fixed tag whitelist in
             // renderMarkdown — safe to inject as HTML.
-            dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) } }), speakerLabel);
+            dangerouslySetInnerHTML: { __html: renderMarkdown(message.content) } }), speakerLabel, chainParticipants);
     }
     // User & system messages stay as plain text — they're typed verbatim.
     // No avatar column on the user side; they align right.
@@ -631,10 +723,15 @@ function wrapAssistantRow(bare, showAvatar, theme, name, agentId, child,
 /** When set + this is the first bubble of a speaker run (showAvatar
  *  is true), render the speaker's display name just above the
  *  bubble. Used by Team chats so members are visually attributed. */
-speakerLabel) {
+speakerLabel, 
+/** When set, replace the single avatar with a horizontal stack of
+ *  every speaker in the delegation chain that produced this bubble.
+ *  Index 0 is the active speaker (largest), the rest are upstream
+ *  delegators in reverse-chronological order. */
+chainParticipants) {
     if (!bare)
         return child;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant", children: [(0, jsx_runtime_1.jsx)(AssistantAvatar, { theme: theme, name: name, agentId: agentId, show: showAvatar }), (0, jsx_runtime_1.jsxs)("div", { className: "af-msg-col", children: [showAvatar && speakerLabel ? ((0, jsx_runtime_1.jsx)("div", { className: "af-msg-speaker", children: speakerLabel })) : null, child] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "af-msg-row af-msg-row-assistant", children: [chainParticipants && chainParticipants.length > 1 ? ((0, jsx_runtime_1.jsx)(DelegationAvatarStack, { participants: chainParticipants })) : ((0, jsx_runtime_1.jsx)(AssistantAvatar, { theme: theme, name: name, agentId: agentId, show: showAvatar })), (0, jsx_runtime_1.jsxs)("div", { className: "af-msg-col", children: [showAvatar && speakerLabel ? ((0, jsx_runtime_1.jsx)("div", { className: "af-msg-speaker", children: speakerLabel })) : null, child] })] }));
 }
 /**
  * Small circular avatar for the assistant-side column. Prefers the
@@ -660,6 +757,36 @@ function AssistantAvatar({ theme, name, agentId, show, }) {
     const seed = agentId || name || 'agent';
     return ((0, jsx_runtime_1.jsx)("div", { className: "af-msg-avatar af-msg-avatar-fallback", "aria-hidden": true, style: { backgroundColor: hueFromSeed(seed) }, children: (0, jsx_runtime_1.jsx)("span", { children: initial }) }));
 }
+/**
+ * Horizontal stack of avatars representing the delegation chain that
+ * produced the current bubble. Index 0 is the active speaker — drawn
+ * at the regular avatar size on the LEFT (the speaker that actually
+ * answered, attention sits on them). The remaining participants are
+ * upstream delegators in reverse-chronological order: each one
+ * slightly smaller and overlapped to the right of the active avatar.
+ *
+ * Visually: [active] [delegator-1] [delegator-2] [...]
+ * Mental model: "this answer came from <active>, delegated by <…>".
+ */
+function DelegationAvatarStack({ participants, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "af-msg-avatar af-msg-avatar-stack", role: "img", "aria-label": `Delegation chain: ${participants.map((p) => p.name).filter(Boolean).join(' → ')}`, children: participants.map((p, idx) => {
+            const isActive = idx === 0;
+            const initial = (p.name ?? 'A').trim().charAt(0).toUpperCase() || 'A';
+            const seed = p.agentId || p.name || `agent-${idx}`;
+            const url = p.theme?.avatarUrl;
+            const className = 'af-msg-avatar-stack-item' +
+                (isActive ? ' af-msg-avatar-stack-active' : '');
+            // Inline z-index so the leftmost (active) lands on top of the
+            // overlapping siblings to its right.
+            const z = participants.length - idx;
+            return url ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            (0, jsx_runtime_1.jsx)("img", { className: className + ' af-msg-avatar-stack-img', src: url, alt: "", "aria-hidden": true, style: { zIndex: z } }, `${idx}-${seed}`)) : ((0, jsx_runtime_1.jsx)("div", { className: className + ' af-msg-avatar-stack-fallback', "aria-hidden": true, style: {
+                    backgroundColor: hueFromSeed(seed),
+                    zIndex: z,
+                }, children: (0, jsx_runtime_1.jsx)("span", { children: initial }) }, `${idx}-${seed}`));
+        }) }));
+}
 /**
  * Deterministic per-agent hue. Hash the seed into the HSL hue space
  * so an agent's avatar color stays stable across renders and looks
@@ -1229,6 +1356,60 @@ const WIDGET_CSS = `
    * inline color and made every agent avatar look the same. */
   background-color: var(--af-primary, #8b5cf6);
 }
+/* Delegation-chain avatar stack. Override the default 26x26 size so
+ * the row can host multiple overlapping items without clipping. */
+.af-widget-root.af-variant-bare .af-msg-avatar-stack {
+  width: auto;
+  height: 26px;
+  border-radius: 0;
+  overflow: visible;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  /* Slight padding-right so the rightmost stacked item doesn't sit
+   * flush against the bubble bevel. */
+  padding-right: 4px;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-stack-item {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* 2px ring matching the bubble background so overlapping reads
+   * as distinct circles, not a continuous blob. */
+  box-shadow: 0 0 0 2px var(--af-bg, #ffffff);
+  /* Overlap with the prior sibling. */
+  margin-left: -6px;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-stack-item:first-child {
+  margin-left: 0;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-stack-active {
+  /* The active speaker is rendered full-size so it visually anchors
+   * the chain. Slightly larger ring keeps it clearly separated from
+   * the smaller upstream delegators. */
+  width: 26px;
+  height: 26px;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-stack-img {
+  object-fit: cover;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-stack-fallback {
+  color: #fff;
+  font-size: 9.5px;
+  font-weight: 600;
+  background-color: var(--af-primary, #8b5cf6);
+}
+.af-widget-root.af-variant-bare .af-msg-avatar-stack-active.af-msg-avatar-stack-fallback {
+  font-size: 11.5px;
+}
 @media (min-width: 768px) {
   .af-widget-root.af-variant-bare .af-msg-avatar { width: 30px; height: 30px; }
   .af-widget-root.af-variant-bare .af-msg-avatar-fallback { font-size: 13px; }

package/package.json

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