@assistant-ui/react 0.11.47 → 0.11.49

package/package.json

@@ -28,7 +28,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.11.47",
+  "version": "0.11.49",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -48,8 +48,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "assistant-cloud": "^0.1.9",
-    "@assistant-ui/tap": "^0.3.1",
+    "assistant-cloud": "^0.1.10",
+    "@assistant-ui/tap": "^0.3.2",
     "@radix-ui/primitive": "^1.1.3",
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-context": "^1.1.3",
@@ -59,11 +59,11 @@
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-escape-keydown": "^1.1.1",
     "@standard-schema/spec": "^1.0.0",
-    "assistant-stream": "^0.2.42",
+    "assistant-stream": "^0.2.44",
     "nanoid": "5.1.6",
     "react-textarea-autosize": "^8.5.9",
     "zod": "^4.1.13",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.9"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -84,8 +84,8 @@
     "@stryker-mutator/vitest-runner": "^9.4.0",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^24.10.1",
-    "tsx": "^4.20.6",
-    "vitest": "^4.0.14",
+    "tsx": "^4.21.0",
+    "vitest": "^4.0.15",
     "@assistant-ui/x-buildutils": "0.0.1"
   },
   "publishConfig": {

package/src/client/types/Thread.ts

@@ -19,6 +19,11 @@ import { CreateResumeRunConfig } from "../../legacy-runtime/runtime/ThreadRuntim
 import { ModelContext } from "../../model-context";
 
 export type ThreadClientState = {
+  /**
+   * Whether the thread is empty. A thread is considered empty when it has no messages and is not loading.
+   */
+  readonly isEmpty: boolean;
+
   /**
    * Whether the thread is disabled. Disabled threads cannot receive new messages.
    */

package/src/context/react/index.ts

@@ -6,6 +6,7 @@ export {
   useAssistantApi,
   useExtendedAssistantApi,
   type AssistantApi,
+  type AssistantState,
 } from "./AssistantApiContext";
 export { useAssistantState } from "./hooks/useAssistantState";
 export { useAssistantEvent } from "./hooks/useAssistantEvent";

package/src/legacy-runtime/client/ThreadRuntimeClient.ts

@@ -97,6 +97,7 @@ export const ThreadClient = resource(
 
     const state = tapMemo<ThreadClientState>(() => {
       return {
+        isEmpty: messages.state.length === 0 && !runtimeState.isLoading,
         isDisabled: runtimeState.isDisabled,
         isLoading: runtimeState.isLoading,
         isRunning: runtimeState.isRunning,

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.tsx

@@ -274,7 +274,7 @@ const useAssistantTransportThreadRuntime = <T,>(
     },
     onCancel: async () => {
       runManager.cancel();
-      toolInvocations.abort();
+      await toolInvocations.abort();
     },
     onResume: async () => {
       if (!options.resumeApi)

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/actionBar/ActionBarExportMarkdown.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+import { ActionButtonProps } from "../../utils/createActionButton";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAssistantState, useAssistantApi } from "../../context";
+
+const useActionBarExportMarkdown = ({
+  filename,
+  onExport,
+}: {
+  filename?: string | undefined;
+  onExport?: ((content: string) => void | Promise<void>) | undefined;
+} = {}) => {
+  const api = useAssistantApi();
+  const hasExportableContent = useAssistantState(({ message }) => {
+    return (
+      (message.role !== "assistant" || message.status?.type !== "running") &&
+      message.parts.some((c) => c.type === "text" && c.text.length > 0)
+    );
+  });
+
+  const callback = useCallback(async () => {
+    const content = api.message().getCopyText();
+    if (!content) return;
+
+    if (onExport) {
+      await onExport(content);
+      return;
+    }
+
+    const blob = new Blob([content], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename ?? `message-${Date.now()}.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [api, filename, onExport]);
+
+  if (!hasExportableContent) return null;
+  return callback;
+};
+
+export namespace ActionBarPrimitiveExportMarkdown {
+  export type Element = HTMLButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarExportMarkdown>;
+}
+
+export const ActionBarPrimitiveExportMarkdown = forwardRef<
+  ActionBarPrimitiveExportMarkdown.Element,
+  ActionBarPrimitiveExportMarkdown.Props
+>(({ filename, onExport, onClick, disabled, ...props }, forwardedRef) => {
+  const callback = useActionBarExportMarkdown({ filename, onExport });
+  return (
+    <Primitive.button
+      type="button"
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !callback}
+      onClick={composeEventHandlers(onClick, () => {
+        callback?.();
+      })}
+    />
+  );
+});
+
+ActionBarPrimitiveExportMarkdown.displayName =
+  "ActionBarPrimitive.ExportMarkdown";

package/src/primitives/actionBar/index.ts

@@ -6,3 +6,4 @@ export { ActionBarPrimitiveSpeak as Speak } from "./ActionBarSpeak";
 export { ActionBarPrimitiveStopSpeaking as StopSpeaking } from "./ActionBarStopSpeaking";
 export { ActionBarPrimitiveFeedbackPositive as FeedbackPositive } from "./ActionBarFeedbackPositive";
 export { ActionBarPrimitiveFeedbackNegative as FeedbackNegative } from "./ActionBarFeedbackNegative";
+export { ActionBarPrimitiveExportMarkdown as ExportMarkdown } from "./ActionBarExportMarkdown";

package/src/primitives/assistant/AssistantIf.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { FC, PropsWithChildren } from "react";
+import { useAssistantState } from "../../context";
+import type { AssistantState } from "../../context/react/AssistantApiContext";
+
+type UseAssistantIfProps = {
+  condition: AssistantIf.Condition;
+};
+
+const useAssistantIf = (props: UseAssistantIfProps) => {
+  return useAssistantState(props.condition);
+};
+
+export namespace AssistantIf {
+  export type Props = PropsWithChildren<UseAssistantIfProps>;
+  export type Condition = (state: AssistantState) => boolean;
+}
+
+export const AssistantIf: FC<AssistantIf.Props> = ({ children, condition }) => {
+  const result = useAssistantIf({ condition });
+  return result ? children : null;
+};
+
+AssistantIf.displayName = "AssistantIf";

package/src/primitives/composer/ComposerIf.tsx

@@ -23,6 +23,9 @@ export namespace ComposerPrimitiveIf {
   export type Props = PropsWithChildren<UseComposerIfProps>;
 }
 
+/**
+ * @deprecated Use `<AssistantIf condition={({ composer }) => ...} />` instead.
+ */
 export const ComposerPrimitiveIf: FC<ComposerPrimitiveIf.Props> = ({
   children,
   ...query

package/src/primitives/composer/ComposerInput.tsx

@@ -114,6 +114,9 @@ export const ComposerPrimitiveInput = forwardRef<
     useEscapeKeydown((e) => {
       if (!cancelOnEscape) return;
 
+      // Only handle ESC if it originated from within this input
+      if (!textareaRef.current?.contains(e.target as Node)) return;
+
       const composer = api.composer();
       if (composer.getState().canCancel) {
         composer.cancel();

package/src/primitives/index.ts

@@ -10,6 +10,8 @@ export * as ThreadPrimitive from "./thread";
 export * as ThreadListPrimitive from "./threadList";
 export * as ThreadListItemPrimitive from "./threadListItem";
 
+export { AssistantIf } from "./assistant/AssistantIf";
+
 export { useMessagePartText } from "./messagePart/useMessagePartText";
 export { useMessagePartReasoning } from "./messagePart/useMessagePartReasoning";
 export { useMessagePartSource } from "./messagePart/useMessagePartSource";

package/src/primitives/message/MessageIf.tsx

@@ -77,6 +77,9 @@ export namespace MessagePrimitiveIf {
   export type Props = PropsWithChildren<UseMessageIfProps>;
 }
 
+/**
+ * @deprecated Use `<AssistantIf condition={({ message }) => ...} />` instead.
+ */
 export const MessagePrimitiveIf: FC<MessagePrimitiveIf.Props> = ({
   children,
   ...query

package/src/primitives/message/MessageParts.tsx

@@ -478,7 +478,7 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
         );
       } else if (range.type === "toolGroup") {
         const ToolGroupComponent =
-          components!.ToolGroup ?? defaultComponents.ToolGroup;
+          components?.ToolGroup ?? defaultComponents.ToolGroup;
         return (
           <ToolGroupComponent
             key={`tool-${range.startIndex}`}
@@ -500,7 +500,7 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
       } else {
         // reasoningGroup
         const ReasoningGroupComponent =
-          components!.ReasoningGroup ?? defaultComponents.ReasoningGroup;
+          components?.ReasoningGroup ?? defaultComponents.ReasoningGroup;
         return (
           <ReasoningGroupComponent
             key={`reasoning-${range.startIndex}`}

package/src/primitives/thread/ThreadIf.tsx

@@ -14,9 +14,8 @@ type UseThreadIfProps = RequireAtLeastOne<ThreadIfFilters>;
 
 const useThreadIf = (props: UseThreadIfProps) => {
   return useAssistantState(({ thread }) => {
-    const isEmpty = thread.messages.length === 0 && !thread.isLoading;
-    if (props.empty === true && !isEmpty) return false;
-    if (props.empty === false && isEmpty) return false;
+    if (props.empty === true && !thread.isEmpty) return false;
+    if (props.empty === false && thread.isEmpty) return false;
 
     if (props.running === true && !thread.isRunning) return false;
     if (props.running === false && thread.isRunning) return false;
@@ -31,6 +30,9 @@ export namespace ThreadPrimitiveIf {
   export type Props = PropsWithChildren<UseThreadIfProps>;
 }
 
+/**
+ * @deprecated Use `<AssistantIf condition={({ thread }) => ...} />` instead.
+ */
 export const ThreadPrimitiveIf: FC<ThreadPrimitiveIf.Props> = ({
   children,
   ...query

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>;
 };