@sensiblestats/widget-react 0.26.1 → 0.26.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.26.2
+
+### Patch Changes
+
+- Fix the new-turn scroll anchor jumping to the bottom on a follow-up send after tall content (e.g. tapping a chip below a club dashboard). Reserve a viewport of space below the new turn while it streams so its start can actually reach the top of the panel, then collapse the space once the turn completes. The turn's start now stays pinned to the top through the whole reply instead of the view following the stream to the bottom.
+
 ## 0.26.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -1889,14 +1889,17 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
   const anchoredTurnRef = (0, import_react10.useRef)(null);
   (0, import_react10.useEffect)(() => {
     const anchor = turnAnchor(state.messages);
+    const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
       anchoredTurnRef.current = anchor.turnId;
+      if (endRef.current && list) endRef.current.style.height = `${list.clientHeight}px`;
       pinnedRef.current = false;
-      listRef.current?.querySelector(`[data-msg-id="${anchor.anchorId}"]`)?.scrollIntoView({ block: "start" });
+      list?.querySelector(`[data-msg-id="${anchor.anchorId}"]`)?.scrollIntoView({ block: "start" });
       return;
     }
+    if (!state.isStreaming && endRef.current) endRef.current.style.height = "";
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
-  }, [state.messages, state.status]);
+  }, [state.messages, state.status, state.isStreaming]);
   const hasUserMessage = state.messages.some((m) => m.role === "user");
   const hasDashboard = state.messages.some((m) => m.role === "assistant" && (m.greetingDashboard || m.clubFanDashboard));
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -1932,7 +1935,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
         !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: endRef })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: endRef, className: "ss-w-turn-spacer", "aria-hidden": "true" })
       ]
     }
   );
@@ -2054,6 +2057,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* messages */
 .ss-w-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
+/* Transient bottom spacer: reserves a viewport of room below a new turn so its
+   top can be scrolled into view while the reply is still streaming in. Height is
+   set imperatively and flex must not shrink it away. */
+.ss-w-turn-spacer { flex: none; }
 .ss-w-msg { display: flex; }
 .ss-w-user { justify-content: flex-end; }
 .ss-w-user .ss-w-bubble { background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 14px; padding: 8px 12px; max-width: 80%; }