@assistant-ui/react 0.11.48 → 0.11.50

package/src/legacy-runtime/runtime-cores/assistant-transport/useToolInvocations.ts

@@ -39,8 +39,7 @@ type UseToolInvocationsParams = {
 
 export type ToolExecutionStatus =
   | { type: "executing" }
-  | { type: "interrupt"; payload: { type: "human"; payload: unknown } }
-  | { type: "cancelled"; reason: string };
+  | { type: "interrupt"; payload: { type: "human"; payload: unknown } };
 
 export function useToolInvocations({
   state,
@@ -71,6 +70,9 @@ export function useToolInvocations({
   >(new Map());
 
   const acRef = useRef<AbortController>(new AbortController());
+  const executingCountRef = useRef(0);
+  const settledResolversRef = useRef<Array<() => void>>([]);
+
   const [controller] = useState(() => {
     const [stream, controller] = createAssistantStreamController();
     const transform = unstable_toolResultStream(
@@ -96,6 +98,28 @@ export function useToolInvocations({
           }));
         });
       },
+      {
+        onExecutionStart: (toolCallId: string) => {
+          executingCountRef.current++;
+          setToolStatuses((prev) => ({
+            ...prev,
+            [toolCallId]: { type: "executing" },
+          }));
+        },
+        onExecutionEnd: (toolCallId: string) => {
+          executingCountRef.current--;
+          setToolStatuses((prev) => {
+            const next = { ...prev };
+            delete next[toolCallId];
+            return next;
+          });
+          // Resolve any waiting abort promises when all tools have settled
+          if (executingCountRef.current === 0) {
+            settledResolversRef.current.forEach((resolve) => resolve());
+            settledResolversRef.current = [];
+          }
+        },
+      },
     );
     stream
       .pipeThrough(transform)
@@ -116,13 +140,6 @@ export function useToolInvocations({
                 isError: chunk.isError,
                 ...(chunk.artifact && { artifact: chunk.artifact }),
               });
-
-              // Clear status when result is set
-              setToolStatuses((prev) => {
-                const next = { ...prev };
-                delete next[chunk.meta.toolCallId];
-                return next;
-              });
             }
           },
         }),
@@ -234,20 +251,27 @@ export function useToolInvocations({
     }
   }, [state, controller, onResult]);
 
-  const abort = () => {
+  const abort = (): Promise<void> => {
     humanInputRef.current.forEach(({ reject }) => {
       reject(new Error("Tool execution aborted"));
     });
     humanInputRef.current.clear();
-    setToolStatuses({});
 
     acRef.current.abort();
     acRef.current = new AbortController();
+
+    // Return a promise that resolves when all executing tools have settled
+    if (executingCountRef.current === 0) {
+      return Promise.resolve();
+    }
+    return new Promise<void>((resolve) => {
+      settledResolversRef.current.push(resolve);
+    });
   };
 
   return {
     reset: () => {
-      abort();
+      void abort();
       isInitialState.current = true;
     },
     abort,
@@ -255,11 +279,10 @@ export function useToolInvocations({
       const handlers = humanInputRef.current.get(toolCallId);
       if (handlers) {
         humanInputRef.current.delete(toolCallId);
-        setToolStatuses((prev) => {
-          const next = { ...prev };
-          delete next[toolCallId];
-          return next;
-        });
+        setToolStatuses((prev) => ({
+          ...prev,
+          [toolCallId]: { type: "executing" },
+        }));
         handlers.resolve(payload);
       } else {
         throw new Error(

package/src/primitives/composer/ComposerInput.tsx

@@ -17,6 +17,7 @@ import TextareaAutosize, {
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useAssistantState, useAssistantApi } from "../../context";
+import { flushSync } from "@assistant-ui/tap";
 
 export namespace ComposerPrimitiveInput {
   export type Element = HTMLTextAreaElement;
@@ -207,8 +208,9 @@ export const ComposerPrimitiveInput = forwardRef<
         disabled={isDisabled}
         onChange={composeEventHandlers(onChange, (e) => {
           if (!api.composer().getState().isEditing) return;
-          api.composer().setText(e.target.value);
-          api.flushSync();
+          flushSync(() => {
+            api.composer().setText(e.target.value);
+          });
         })}
         onKeyDown={composeEventHandlers(onKeyDown, handleKeyPress)}
         onPaste={composeEventHandlers(onPaste, handlePaste)}

package/src/primitives/thread/ThreadViewport.tsx

@@ -30,36 +30,67 @@ export namespace ThreadPrimitiveViewport {
      * - "top": New user messages anchor at the top of the viewport for a focused reading experience.
      */
     turnAnchor?: "top" | "bottom" | undefined;
+
+    /**
+     * Whether to scroll to bottom when a new run starts.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnRunStart?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when thread history is first loaded.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnInitialize?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when switching to a different thread.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnThreadSwitch?: boolean | undefined;
   };
 }
 
 const useViewportSizeRef = () => {
   const register = useThreadViewport((s) => s.registerViewport);
-  const getHeight = useCallback(
-    (el: HTMLElement) =>
-      el.clientHeight - parseFloat(getComputedStyle(el).paddingTop),
-    [],
-  );
-
+  const getHeight = useCallback((el: HTMLElement) => el.clientHeight, []);
   return useSizeHandle(register, getHeight);
 };
 
 const ThreadPrimitiveViewportScrollable = forwardRef<
   ThreadPrimitiveViewport.Element,
   ThreadPrimitiveViewport.Props
->(({ autoScroll, children, ...rest }, forwardedRef) => {
-  const autoScrollRef = useThreadViewportAutoScroll<HTMLDivElement>({
-    autoScroll,
-  });
-  const viewportSizeRef = useViewportSizeRef();
-  const ref = useComposedRefs(forwardedRef, autoScrollRef, viewportSizeRef);
+>(
+  (
+    {
+      autoScroll,
+      scrollToBottomOnRunStart,
+      scrollToBottomOnInitialize,
+      scrollToBottomOnThreadSwitch,
+      children,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const autoScrollRef = useThreadViewportAutoScroll<HTMLDivElement>({
+      autoScroll,
+      scrollToBottomOnRunStart,
+      scrollToBottomOnInitialize,
+      scrollToBottomOnThreadSwitch,
+    });
+    const viewportSizeRef = useViewportSizeRef();
+    const ref = useComposedRefs(forwardedRef, autoScrollRef, viewportSizeRef);
 
-  return (
-    <Primitive.div {...rest} ref={ref}>
-      {children}
-    </Primitive.div>
-  );
-});
+    return (
+      <Primitive.div {...rest} ref={ref}>
+        {children}
+      </Primitive.div>
+    );
+  },
+);
 
 ThreadPrimitiveViewportScrollable.displayName =
   "ThreadPrimitive.ViewportScrollable";

package/src/primitives/thread/ThreadViewportSlack.tsx

@@ -57,7 +57,10 @@ export const ThreadPrimitiveViewportSlack: FC<ThreadViewportSlackProps> = ({
   fillClampThreshold = "10em",
   fillClampOffset = "6em",
 }) => {
-  const isLast = useAssistantState(({ message }) => message.isLast);
+  const isLast = useAssistantState(
+    // only add slack if the message is the last message and we already have at least 3 messages
+    ({ message }) => message.isLast && message.index >= 2,
+  );
   const threadViewportStore = useThreadViewportStore({ optional: true });
   const isNested = useContext(SlackNestingContext);
 

package/src/primitives/thread/useThreadViewportAutoScroll.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { RefCallback, useCallback, useRef } from "react";
+import { useCallback, useRef, type RefCallback } from "react";
 import { useAssistantEvent } from "../../context";
 import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
@@ -18,11 +18,35 @@ export namespace useThreadViewportAutoScroll {
      * Default false if `turnAnchor` is "top", otherwise defaults to true.
      */
     autoScroll?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when a new run starts.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnRunStart?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when thread history is first loaded.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnInitialize?: boolean | undefined;
+
+    /**
+     * Whether to scroll to bottom when switching to a different thread.
+     *
+     * Defaults to true.
+     */
+    scrollToBottomOnThreadSwitch?: boolean | undefined;
   };
 }
 
 export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   autoScroll,
+  scrollToBottomOnRunStart = true,
+  scrollToBottomOnInitialize = true,
+  scrollToBottomOnThreadSwitch = true,
 }: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {
   const divRef = useRef<TElement>(null);
 
@@ -62,7 +86,10 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
         scrollingToBottomBehaviorRef.current = null;
       }
 
-      if (newIsAtBottom !== isAtBottom) {
+      const shouldUpdate =
+        newIsAtBottom || scrollingToBottomBehaviorRef.current === null;
+
+      if (shouldUpdate && newIsAtBottom !== isAtBottom) {
         writableStore(threadViewportStore).setState({
           isAtBottom: newIsAtBottom,
         });
@@ -96,12 +123,31 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 
   // autoscroll on run start
   useAssistantEvent("thread.run-start", () => {
+    if (!scrollToBottomOnRunStart) return;
     scrollingToBottomBehaviorRef.current = "auto";
     requestAnimationFrame(() => {
       scrollToBottom("auto");
     });
   });
 
+  // scroll to bottom instantly when thread history is first loaded
+  useAssistantEvent("thread.initialize", () => {
+    if (!scrollToBottomOnInitialize) return;
+    scrollingToBottomBehaviorRef.current = "instant";
+    requestAnimationFrame(() => {
+      scrollToBottom("instant");
+    });
+  });
+
+  // scroll to bottom instantly when switching threads
+  useAssistantEvent("thread-list-item.switched-to", () => {
+    if (!scrollToBottomOnThreadSwitch) return;
+    scrollingToBottomBehaviorRef.current = "instant";
+    requestAnimationFrame(() => {
+      scrollToBottom("instant");
+    });
+  });
+
   const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);
   return autoScrollRef as RefCallback<TElement>;
 };

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

@@ -40,7 +40,7 @@ type AssistantApiFieldNames = {
 /**
  * Configuration for a derived scope field - infers types from the actual values provided
  */
-export type DerivedScopeConfig<TSource extends string | null, TQuery, TApi> = {
+export type DerivedConfig<TSource extends string | null, TQuery, TApi> = {
   source: TSource;
   query: TQuery;
   get: () => TApi;
@@ -59,18 +59,12 @@ export type OnCallbackFn = <TEvent extends AssistantEvent>(
  */
 export type SubscribeCallbackFn = (listener: () => void) => Unsubscribe;
 
-/**
- * Type for the special `flushSync` callback function
- */
-export type FlushSyncCallbackFn = () => void;
-
 /**
  * Type for special non-field functions in AssistantApi
  */
 export type SpecialCallbacks = {
   on?: OnCallbackFn;
   subscribe?: SubscribeCallbackFn;
-  flushSync?: FlushSyncCallbackFn;
 };
 
 /**
@@ -98,7 +92,7 @@ export type DerivedScopesInput = {
  */
 export const DerivedScope = resource(
   <TSource extends string | null, TQuery, TApi>(
-    config: DerivedScopeConfig<TSource, TQuery, TApi>,
+    config: DerivedConfig<TSource, TQuery, TApi>,
   ): AssistantApiField<
     TApi,
     {
@@ -144,32 +138,28 @@ const ScopeFieldWithNameResource = resource(
  */
 export const DerivedScopes = resource(
   (scopes: DerivedScopesInput): Partial<AssistantApi> => {
-    const { on, subscribe, flushSync, ...scopeFields } = scopes;
-    const callbacksRef = tapRef({ on, subscribe, flushSync });
+    const { on, subscribe, ...scopeFields } = scopes;
+    const callbacksRef = tapRef({ on, subscribe });
     tapEffect(() => {
-      callbacksRef.current = { on, subscribe, flushSync };
+      callbacksRef.current = { on, subscribe };
     });
 
     const results = tapResources(
-      Object.entries(scopeFields).map(([fieldName, scopeElement]) =>
-        ScopeFieldWithNameResource(
-          {
-            fieldName,
-            scopeElement: scopeElement as ReturnType<typeof DerivedScope>,
-          },
-          { key: fieldName },
-        ),
-      ),
+      scopeFields as Record<string, ReturnType<typeof DerivedScope>>,
+      (scopeElement, fieldName) =>
+        ScopeFieldWithNameResource({
+          fieldName,
+          scopeElement,
+        }),
+      [],
     );
 
     return tapMemo(() => {
-      const result = Object.fromEntries(results) as Partial<AssistantApi>;
+      const result = Object.fromEntries(
+        Object.values(results),
+      ) as Partial<AssistantApi>;
 
-      const {
-        on: onCb,
-        subscribe: subCb,
-        flushSync: flushCb,
-      } = callbacksRef.current;
+      const { on: onCb, subscribe: subCb } = callbacksRef.current;
 
       if (onCb) {
         result.on = <TEvent extends AssistantEvent>(
@@ -178,9 +168,8 @@ export const DerivedScopes = resource(
         ) => onCb(selector, callback);
       }
       if (subCb) result.subscribe = (listener) => subCb(listener);
-      if (flushCb) result.flushSync = () => flushCb();
 
       return result;
-    }, [...results]);
+    }, [results]);
   },
 );

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

@@ -2,10 +2,9 @@ export { type Store, asStore } from "./store";
 export { tapApi, type ApiObject } from "./tap-api";
 export {
   DerivedScope,
-  type DerivedScopeConfig,
+  type DerivedConfig,
   type OnCallbackFn,
   type SubscribeCallbackFn,
-  type FlushSyncCallbackFn,
   type SpecialCallbacks,
   type DerivedScopesInput,
 } from "./derived-scopes";

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

@@ -17,22 +17,17 @@ export interface Store<TState> {
    * Subscribe to the store.
    */
   subscribe(listener: () => void): Unsubscribe;
-
-  /**
-   * Synchronously flush all the updates to the store.
-   */
-  flushSync(): void;
 }
 
 export const asStore = resource(
   <TState, TProps>(element: ResourceElement<TState, TProps>): Store<TState> => {
     const resource = tapMemo(
-      () => createResource(element, true),
+      () => createResource(element, { mount: false }),
       [element.type],
     );
 
     tapEffect(() => {
-      resource.updateInput(element.props);
+      resource.render(element);
     });
 
     return resource;

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

@@ -5,33 +5,39 @@ export interface ApiObject {
 }
 
 class ReadonlyApiHandler<TApi extends ApiObject> implements ProxyHandler<TApi> {
-  constructor(private readonly getApi: () => TApi) {}
+  constructor(private readonly ref: tapRef.RefObject<TApi>) {}
 
   get(_: unknown, prop: string | symbol) {
-    return this.getApi()[prop as keyof TApi];
+    return this.ref.current[prop as keyof TApi];
   }
 
   ownKeys(): ArrayLike<string | symbol> {
-    return Object.keys(this.getApi() as object);
+    return Object.keys(this.ref.current as object);
   }
 
   has(_: unknown, prop: string | symbol) {
-    return prop in (this.getApi() as object);
+    return prop in (this.ref.current as object);
   }
 
   getOwnPropertyDescriptor(_: unknown, prop: string | symbol) {
-    return Object.getOwnPropertyDescriptor(this.getApi(), prop);
+    return Object.getOwnPropertyDescriptor(this.ref.current, prop);
   }
 
   set() {
     return false;
   }
+  setPrototypeOf() {
+    return false;
+  }
   defineProperty() {
     return false;
   }
   deleteProperty() {
     return false;
   }
+  preventExtensions(): boolean {
+    return false;
+  }
 }
 
 export const tapApi = <TApi extends ApiObject & { getState: () => any }>(
@@ -46,8 +52,7 @@ export const tapApi = <TApi extends ApiObject & { getState: () => any }>(
   });
 
   const apiProxy = tapMemo(
-    () =>
-      new Proxy<TApi>({} as TApi, new ReadonlyApiHandler(() => ref.current)),
+    () => new Proxy<TApi>({} as TApi, new ReadonlyApiHandler(ref)),
     [],
   );