@agentforge-io/chat-sdk 2.5.0 → 2.5.2

package/dist/react.js

@@ -563,28 +563,34 @@ function ChatWidget(props) {
                                 }
                                 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);
-                                }
+                            // Find the index of the next assistant message after each
+                            // position. Used to decide whether an empty bubble has been
+                            // superseded by a later speaker (in which case the visitor
+                            // should not still see it typing).
+                            const nextAssistantIdx = new Array(messages.length).fill(-1);
+                            for (let k = messages.length - 2; k >= 0; k--) {
+                                const nextI = k + 1;
+                                nextAssistantIdx[k] =
+                                    messages[nextI].role === 'assistant'
+                                        ? nextI
+                                        : nextAssistantIdx[nextI];
                             }
                             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)
+                                // Any empty assistant bubble that has been overtaken by
+                                // a LATER assistant bubble is an intermediate — hide it.
+                                // Covers two cases at once:
+                                //   1. The classic "chain head/intermediate" path: bubble
+                                //      i is empty and there's a final bubble after it.
+                                //   2. The "live delegation" path: while a chain streams,
+                                //      the previous member sits at content='' isStreaming=
+                                //      true (the SDK only flips isStreaming when the
+                                //      bubble produced text). A naive filter would keep
+                                //      showing its typing dots; we drop it as soon as
+                                //      a fresher speaker exists.
+                                if (!m.content && nextAssistantIdx[i] !== -1)
                                     return false;
                                 return true;
                             });
@@ -612,37 +618,41 @@ function ChatWidget(props) {
                                 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()];
-                                        }
+                                    // Collect all distinct speakers in [head…i] in
+                                    // chronological order. The bubble that's rendering now
+                                    // (i) is the most recent speaker so it becomes the
+                                    // "active" one at the front of the stack; everything
+                                    // earlier in the chain trails behind in reverse-
+                                    // chronological order. Works the same whether the
+                                    // chain has finished or is still streaming — visitor
+                                    // sees one bubble with a live-updating header.
+                                    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) {
+                                        // The visible bubble's speaker (i) sits at the END of
+                                        // `ordered`. Move them to the front so the active
+                                        // avatar leads the stack.
+                                        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: () => {
@@ -1357,22 +1367,38 @@ const WIDGET_CSS = `
   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. */
+ * the row can host multiple overlapping items without clipping.
+ * `, align;
+-items;
+center ` is critical: with `;
+flex - end ` the smaller
+ * items glue to the bottom of the row and the column they sit in
+ * looks unbalanced — circles read as ovals because the bounding box
+ * isn't square anymore. Centering keeps every item axis-aligned and
+ * the ring + size cap together force a 1:1 aspect ratio. */
 .af-widget-root.af-variant-bare .af-msg-avatar-stack {
   width: auto;
   height: 26px;
   border-radius: 0;
   overflow: visible;
+  background: transparent;
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: center;
   /* 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 {
+  /* Hard-pin the aspect ratio so the box never deforms into an
+   * ellipse when the parent flexes — `;
+aspect - ratio;
+1 ` plus explicit
+   * width AND min-width guarantees a square box on every flex child. */
   width: 18px;
+  min-width: 18px;
   height: 18px;
+  aspect-ratio: 1;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
@@ -1390,9 +1416,9 @@ const WIDGET_CSS = `
 }
 .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. */
+   * the chain. */
   width: 26px;
+  min-width: 26px;
   height: 26px;
 }
 .af-widget-root.af-variant-bare .af-msg-avatar-stack-img {
@@ -1406,6 +1432,7 @@ const WIDGET_CSS = `
   font-size: 9.5px;
   font-weight: 600;
   background-color: var(--af-primary, #8b5cf6);
+  line-height: 1;
 }
 .af-widget-root.af-variant-bare .af-msg-avatar-stack-active.af-msg-avatar-stack-fallback {
   font-size: 11.5px;

package/package.json

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