@agentforge-io/chat-sdk 2.5.5 → 2.5.7

package/dist/react.js

@@ -1271,7 +1271,22 @@ const WIDGET_CSS = `
  * greeting reads as the assistant *responding* to the page loading,
  * not part of the static UI. */
 .af-widget-root.af-variant-bare .af-greeting-slot {
-  padding: 4px 0 6px;
+  /* Glue the greeting to the BOTTOM of the panel's flex column.
+   * Without this, the greeting drifted to the middle of an empty
+   * panel: .af-messages is flex:1 and absorbs the leftover space,
+   * but the greeting-slot sits AFTER it as a sibling. margin-top:
+   * auto collapses any free space above the slot so it parks just
+   * above the composer cluster. */
+  margin-top: auto;
+  padding: 4px 0 10px;
+}
+/* When the greeting is shown the messages container is empty —
+ * collapse it so its 6px-padding strip doesn't create a visible gap
+ * above the greeting block. Once any real message lands, the
+ * greeting unmounts and .af-messages goes back to flex:1 normally. */
+.af-widget-root.af-variant-bare .af-panel:has(.af-greeting-slot) .af-messages {
+  flex: 0 0 auto;
+  padding: 0;
 }
 .af-widget-root.af-variant-bare .af-msg-row-greeting {
   opacity: 0;
@@ -1306,22 +1321,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;

package/package.json

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