@assistant-ui/react 0.11.39 → 0.11.43

package/src/primitives/thread/useThreadViewportAutoScroll.tsx

@@ -11,28 +11,38 @@ import { useThreadViewportStore } from "../../context/react/ThreadViewportContex
 
 export namespace useThreadViewportAutoScroll {
   export type Options = {
+    /**
+     * Whether to automatically scroll to the bottom when new messages are added.
+     * When enabled, the viewport will automatically scroll to show the latest content.
+     *
+     * Default false if `turnAnchor` is "top", otherwise defaults to true.
+     */
     autoScroll?: boolean | undefined;
   };
 }
 
 export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
-  autoScroll = true,
+  autoScroll,
 }: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {
   const divRef = useRef<TElement>(null);
 
   const threadViewportStore = useThreadViewportStore();
+  if (autoScroll === undefined) {
+    autoScroll = threadViewportStore.getState().turnAnchor !== "top";
+  }
 
   const lastScrollTop = useRef<number>(0);
 
   // bug: when ScrollToBottom's button changes its disabled state, the scroll stops
   // fix: delay the state change until the scroll is done
-  const isScrollingToBottomRef = useRef(false);
+  // stores the scroll behavior to reuse during content resize, or null if not scrolling
+  const scrollingToBottomBehaviorRef = useRef<ScrollBehavior | null>(null);
 
   const scrollToBottom = useCallback((behavior: ScrollBehavior) => {
     const div = divRef.current;
     if (!div) return;
 
-    isScrollingToBottomRef.current = true;
+    scrollingToBottomBehaviorRef.current = behavior;
     div.scrollTo({ top: div.scrollHeight, behavior });
   }, []);
 
@@ -49,7 +59,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       // ignore scroll down
     } else {
       if (newIsAtBottom) {
-        isScrollingToBottomRef.current = false;
+        scrollingToBottomBehaviorRef.current = null;
       }
 
       if (newIsAtBottom !== isAtBottom) {
@@ -63,11 +73,10 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   };
 
   const resizeRef = useOnResizeContent(() => {
-    if (
-      autoScroll &&
-      (isScrollingToBottomRef.current ||
-        threadViewportStore.getState().isAtBottom)
-    ) {
+    const scrollBehavior = scrollingToBottomBehaviorRef.current;
+    if (scrollBehavior) {
+      scrollToBottom(scrollBehavior);
+    } else if (autoScroll && threadViewportStore.getState().isAtBottom) {
       scrollToBottom("instant");
     }
 
@@ -81,13 +90,16 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     };
   });
 
-  useOnScrollToBottom(() => {
-    scrollToBottom("auto");
+  useOnScrollToBottom(({ behavior }) => {
+    scrollToBottom(behavior);
   });
 
   // autoscroll on run start
   useAssistantEvent("thread.run-start", () => {
-    if (autoScroll) scrollToBottom("auto");
+    scrollingToBottomBehaviorRef.current = "auto";
+    requestAnimationFrame(() => {
+      scrollToBottom("auto");
+    });
   });
 
   const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);

package/src/utils/hooks/useOnScrollToBottom.tsx

@@ -4,7 +4,9 @@ import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useEffect } from "react";
 import { useThreadViewport } from "../../context/react/ThreadViewportContext";
 
-export const useOnScrollToBottom = (callback: () => void) => {
+export const useOnScrollToBottom = (
+  callback: (config: { behavior: ScrollBehavior }) => void,
+) => {
   const callbackRef = useCallbackRef(callback);
   const onScrollToBottom = useThreadViewport((vp) => vp.onScrollToBottom);
 

package/src/utils/hooks/useSizeHandle.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { useCallback } from "react";
+import { useManagedRef } from "./useManagedRef";
+import type { SizeHandle } from "../../context/stores/ThreadViewport";
+
+/**
+ * Hook that creates a ref for tracking element size via a SizeHandle.
+ * Automatically sets up ResizeObserver and reports height changes.
+ *
+ * @param register - Function that returns a SizeHandle (e.g., registerContentInset)
+ * @param getHeight - Optional function to compute height (defaults to el.offsetHeight)
+ * @returns A ref callback to attach to the element
+ */
+export const useSizeHandle = (
+  register: (() => SizeHandle) | null | undefined,
+  getHeight?: (el: HTMLElement) => number,
+) => {
+  const callbackRef = useCallback(
+    (el: HTMLElement) => {
+      if (!register) return;
+
+      const sizeHandle = register();
+
+      const updateHeight = () => {
+        const height = getHeight ? getHeight(el) : el.offsetHeight;
+        sizeHandle.setHeight(height);
+      };
+
+      const ro = new ResizeObserver(updateHeight);
+      ro.observe(el);
+      updateHeight();
+
+      return () => {
+        ro.disconnect();
+        sizeHandle.unregister();
+      };
+    },
+    [register, getHeight],
+  );
+
+  return useManagedRef(callbackRef);
+};

package/src/utils/tap-store/derived-scopes.ts

@@ -10,7 +10,8 @@ import type {
   AssistantEventCallback,
   AssistantEventSelector,
 } from "../../types/EventTypes";
-import type { ResourceElement, Unsubscribe } from "@assistant-ui/tap";
+import type { ResourceElement } from "@assistant-ui/tap";
+import { Unsubscribe } from "../../types";
 
 /**
  * Extract the API return type from an AssistantApiField

package/src/utils/tap-store/store.ts

@@ -4,8 +4,8 @@ import {
   ResourceElement,
   resource,
   createResource,
-  Unsubscribe,
 } from "@assistant-ui/tap";
+import { Unsubscribe } from "../../types";
 
 export interface Store<TState> {
   /**