@sensiblestats/widget-react 0.26.0 → 0.26.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- Keep the start of a new turn in view instead of scrolling to the bottom of the reply. When a response arrives the message list now pins the start of the turn to the top — the user's question for a normal turn, or the assistant message itself for an auto-greeting or greeting dashboard — so a long answer reads from its beginning rather than landing the reader on its last line.
+
 ## 0.26.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1843,12 +1843,12 @@ function FanDashboardCard({ card, onTap, ui }) {
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function ChatMessage({ message, disabled, onAct, onTap, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-msg ss-w-user", "data-msg-id": message.id, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
   const onFanDashboardTap = (card) => {
     onAct({ message: card.actionLabel, actionRef: card.actionRef, label: card.actionLabel || card.title || "" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ss-w-msg ss-w-bot", "data-msg-id": message.id, children: [
     message.text && !message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Markdown, { text: message.text }) : null,
     message.greetingDashboard && !message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
     message.clubFanDashboard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ClubFanDashboard, { dashboard: message.clubFanDashboard, onTap: onFanDashboardTap, ui }) : null,
@@ -1875,14 +1875,31 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 
 // src/components/MessageList.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
+function turnAnchor(messages) {
+  const last = messages[messages.length - 1];
+  if (!last || last.role !== "assistant") return null;
+  const prev = messages[messages.length - 2];
+  return { turnId: last.id, anchorId: prev && prev.role === "user" ? prev.id : last.id };
+}
 function MessageList({ controller, ui, slip, onDashboardTap }) {
   const { state, send } = controller;
   const listRef = (0, import_react10.useRef)(null);
   const endRef = (0, import_react10.useRef)(null);
   const pinnedRef = (0, import_react10.useRef)(true);
+  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;
+      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)(
@@ -1918,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" })
       ]
     }
   );
@@ -2039,7 +2056,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-close { margin-left: auto; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
 
 /* messages */
-.ss-w-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
+.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%; }