@sensiblestats/widget-react 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 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,12 +1875,26 @@ 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);
+    if (anchor && anchor.turnId !== anchoredTurnRef.current) {
+      anchoredTurnRef.current = anchor.turnId;
+      pinnedRef.current = false;
+      listRef.current?.querySelector(`[data-msg-id="${anchor.anchorId}"]`)?.scrollIntoView({ block: "start" });
+      return;
+    }
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
   const hasUserMessage = state.messages.some((m) => m.role === "user");
@@ -2039,7 +2053,7 @@ 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; }
 .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%; }