@agentforge-io/chat-sdk 2.5.4 → 2.5.6

package/dist/react.js

@@ -1306,22 +1306,31 @@ const WIDGET_CSS = `
 .af-widget-root.af-variant-bare .af-msg-row {
   display: flex;
   align-items: flex-end;
-  gap: 8px;
+  /* Tight 4px gap — the avatar sits next to the bubble, not
+   * floating beside it. 8px reads as a separate column on small
+   * viewports. */
+  gap: 4px;
   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. */
+ * column against the bubble. 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. Centering tucks the entire group against
+ * the bubble's vertical midline so the cluster reads as one
+ * composite glyph. */
 .af-widget-root.af-variant-bare .af-msg-row:has(.af-msg-avatar-stack) {
   align-items: center;
-  gap: 6px;
+}
+/* Typing-state rows: the bubble is short (a single row of dots) so
+ * the regular flex-end alignment leaves the avatar sticking to the
+ * dots' bottom edge while the dots themselves animate at the
+ * bubble's vertical center — visually the avatar reads as
+ * "trailing" the dots rather than being next to them. Centering
+ * the row puts the avatar at the same y as the dots, AND tightens
+ * the perceived distance because both elements share the midline. */
+.af-widget-root.af-variant-bare .af-msg-row:has(.af-msg-typing) {
+  align-items: center;
 }
 .af-widget-root.af-variant-bare .af-msg-row-assistant {
   align-self: flex-start;
@@ -1384,8 +1393,7 @@ const WIDGET_CSS = `
  * 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
+ * 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 {

package/package.json

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