@mastra/playground-ui 27.0.0-alpha.5 → 27.0.0-alpha.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 27.0.0-alpha.6
+
+### Patch Changes
+
+- Fixed Studio streaming render behavior for interleaved reasoning and improved chat autoscroll during rapid output. ([#16331](https://github.com/mastra-ai/mastra/pull/16331))
+
+- Updated dependencies [[`b560d6f`](https://github.com/mastra-ai/mastra/commit/b560d6f88b9b904b15c10f75c949eb145bc27684), [`f176145`](https://github.com/mastra-ai/mastra/commit/f1761458eaa602f59c5499bd0855ae7a5fd9baf3), [`d416efd`](https://github.com/mastra-ai/mastra/commit/d416efdee26c1755328e21cc62584f8566e21432), [`36b3bbf`](https://github.com/mastra-ai/mastra/commit/36b3bbf5a8d59f7e23d47e29340e76c681b4929c), [`b275631`](https://github.com/mastra-ai/mastra/commit/b275631dc10541a482b2e2d4a3e3cfa843bd5fa1)]:
+  - @mastra/core@1.33.0-alpha.6
+  - @mastra/react@0.2.36-alpha.6
+  - @mastra/client-js@1.18.0-alpha.6
+
 ## 27.0.0-alpha.5
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -8230,18 +8230,30 @@ function PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose })
   );
 }
 
+const SCROLL_END_THRESHOLD = 8;
 const useAutoscroll = (ref, { enabled = true }) => {
   const shouldScrollRef = React.useRef(enabled);
+  const scrollFrameRef = React.useRef(null);
+  const userScrollIntentRef = React.useRef(false);
+  const userScrollIntentTimeoutRef = React.useRef(null);
   React.useEffect(() => {
     if (!enabled) return;
     if (!ref?.current) return;
     const area = ref.current;
-    const observer = new MutationObserver(() => {
-      if (shouldScrollRef.current) {
-        area.scrollTo({ top: area.scrollHeight, behavior: "smooth" });
+    const scrollToEnd = () => {
+      if (!shouldScrollRef.current) return;
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
       }
-    });
-    observer.observe(area, {
+      scrollFrameRef.current = requestAnimationFrame(() => {
+        if (shouldScrollRef.current) {
+          area.scrollTop = area.scrollHeight;
+        }
+        scrollFrameRef.current = null;
+      });
+    };
+    const mutationObserver = new MutationObserver(scrollToEnd);
+    mutationObserver.observe(area, {
       childList: true,
       // observe direct children changes
       subtree: true,
@@ -8249,21 +8261,73 @@ const useAutoscroll = (ref, { enabled = true }) => {
       characterData: true
       // observe text content changes
     });
+    const resizeObserver = new ResizeObserver(scrollToEnd);
+    resizeObserver.observe(area);
+    const cancelPendingScroll = () => {
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
+        scrollFrameRef.current = null;
+      }
+    };
+    const stopFollowing = () => {
+      shouldScrollRef.current = false;
+      cancelPendingScroll();
+    };
+    const registerUserScrollIntent = () => {
+      userScrollIntentRef.current = true;
+      if (userScrollIntentTimeoutRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimeoutRef.current);
+      }
+      userScrollIntentTimeoutRef.current = window.setTimeout(() => {
+        userScrollIntentRef.current = false;
+        userScrollIntentTimeoutRef.current = null;
+      }, 250);
+    };
+    const handleWheel = (event) => {
+      registerUserScrollIntent();
+      if (event.deltaY < 0) {
+        stopFollowing();
+      }
+    };
+    const handleKeyDown = (event) => {
+      registerUserScrollIntent();
+      if (["ArrowUp", "PageUp", "Home"].includes(event.key)) {
+        stopFollowing();
+      }
+    };
     const handleScroll = (e) => {
       const scrollElement = e.target;
       const currentPosition = scrollElement.scrollTop + scrollElement.clientHeight;
       const totalHeight = scrollElement.scrollHeight;
-      const isAtEnd = currentPosition >= totalHeight - 1;
+      const isAtEnd = currentPosition >= totalHeight - SCROLL_END_THRESHOLD;
       if (isAtEnd) {
         shouldScrollRef.current = true;
-      } else {
+        return;
+      }
+      if (userScrollIntentRef.current) {
         shouldScrollRef.current = false;
+        cancelPendingScroll();
       }
     };
+    area.addEventListener("wheel", handleWheel, { passive: true });
+    area.addEventListener("touchmove", registerUserScrollIntent, { passive: true });
+    area.addEventListener("pointerdown", registerUserScrollIntent);
+    area.addEventListener("keydown", handleKeyDown);
     area.addEventListener("scroll", handleScroll);
+    scrollToEnd();
     return () => {
+      area.removeEventListener("wheel", handleWheel);
+      area.removeEventListener("touchmove", registerUserScrollIntent);
+      area.removeEventListener("pointerdown", registerUserScrollIntent);
+      area.removeEventListener("keydown", handleKeyDown);
       area.removeEventListener("scroll", handleScroll);
-      observer.disconnect();
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      cancelPendingScroll();
+      if (userScrollIntentTimeoutRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimeoutRef.current);
+        userScrollIntentTimeoutRef.current = null;
+      }
     };
   }, [enabled, ref]);
 };