@agentforge-io/chat-sdk 2.5.3 → 2.5.4

package/dist/react.js

@@ -1309,6 +1309,20 @@ const WIDGET_CSS = `
   gap: 8px;
   max-width: 92%;
 }
+/* When the row hosts a delegation avatar STACK, center the avatar
+ * column against the bubble AND shrink the gap. The flex-end
+ * default lines the single 26px avatar with the bubble's last text
+ * line (iMessage feel) but a stack with a smaller satellite trail
+ * reads disconnected when anchored to the bottom — the satellites
+ * float in space because the active avatar's edge is the only
+ * thing meeting the bubble. Centering tucks the entire group
+ * against the bubble's vertical midline so the cluster reads as
+ * one composite glyph; the tighter gap (8 → 6) pulls the message
+ * column closer to the cluster. */
+.af-widget-root.af-variant-bare .af-msg-row:has(.af-msg-avatar-stack) {
+  align-items: center;
+  gap: 6px;
+}
 .af-widget-root.af-variant-bare .af-msg-row-assistant {
   align-self: flex-start;
 }
@@ -1366,13 +1380,14 @@ 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.
- * 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. */
+/* Delegation-chain avatar stack. Borderless overlap so the group
+ * reads as one composite glyph rather than three orphan circles.
+ * Active speaker sits at the regular bubble-avatar size; upstream
+ * delegators are 14px and overlap tightly behind it. align-items
+ * stays on `, center;
+` so the small avatars share the active one's
+ * vertical midline — that alignment is what lets the typing dots
+ * land at the same baseline as the group on the next column. */
 .af-widget-root.af-variant-bare .af-msg-avatar-stack {
   width: auto;
   height: 26px;
@@ -1382,17 +1397,17 @@ const WIDGET_CSS = `
   display: flex;
   flex-direction: row;
   align-items: center;
-  /* Slight padding-right so the rightmost stacked item doesn't sit
-   * flush against the bubble bevel. */
-  padding-right: 4px;
+  /* Tight padding-right keeps the row hugging the message column —
+   * no float of trailing whitespace between the group and the bubble. */
+  padding-right: 2px;
 }
 .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;
+  width: 14px;
+  min-width: 14px;
+  height: 14px;
   aspect-ratio: 1;
   border-radius: 50%;
   overflow: hidden;
@@ -1400,18 +1415,18 @@ const WIDGET_CSS = `
   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;
+  /* No ring — the operator asked for a borderless, integrated look.
+   * Avatars overlap by half-radius so the group reads as a cluster,
+   * not a stack of separate buttons. */
+  margin-left: -7px;
 }
 .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. */
+  /* The active speaker matches the regular avatar size so the chain
+   * row sits at the same height as a single-speaker row — the
+   * conversation column stays visually aligned across all bubbles. */
   width: 26px;
   min-width: 26px;
   height: 26px;
@@ -1424,7 +1439,7 @@ const WIDGET_CSS = `
 }
 .af-widget-root.af-variant-bare .af-msg-avatar-stack-fallback {
   color: #fff;
-  font-size: 9.5px;
+  font-size: 8px;
   font-weight: 600;
   background-color: var(--af-primary, #8b5cf6);
   line-height: 1;

package/package.json

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