@assistant-ui/react 0.12.21 → 0.12.23

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

@@ -147,6 +147,10 @@ const useAssistantTransportThreadRuntime = <T>(
         ...(parentIdRef.current !== undefined && {
           parentId: parentIdRef.current,
         }),
+        // nested (new format, aligned with AssistantChatTransport)
+        callSettings: context.callSettings,
+        config: context.config,
+        // @deprecated spread at top level — use nested `callSettings`/`config` instead. Will be removed in a future version.
         ...context.callSettings,
         ...context.config,
         ...(bodyValue ?? {}),

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

@@ -19,7 +19,13 @@ const createState = (
 const createAssistantMessage = (
   argsText: string,
   args: Record<string, unknown>,
-  options?: { result?: ReadonlyJSONValue; isError?: boolean },
+  options?: {
+    result?: ReadonlyJSONValue;
+    isError?: boolean;
+    toolCallId?: string;
+    toolName?: string;
+    nestedMessages?: ThreadAssistantMessage[];
+  },
 ): ThreadAssistantMessage => ({
   id: "m-1",
   role: "assistant",
@@ -35,12 +41,13 @@ const createAssistantMessage = (
   content: [
     {
       type: "tool-call",
-      toolCallId: "tool-1",
-      toolName: "weatherSearch",
+      toolCallId: options?.toolCallId ?? "tool-1",
+      toolName: options?.toolName ?? "weatherSearch",
       args: args as ReadonlyJSONObject,
       argsText,
       ...(options?.result !== undefined && { result: options.result }),
       ...(options?.isError !== undefined && { isError: options.isError }),
+      ...(options?.nestedMessages && { messages: options.nestedMessages }),
     },
   ],
 });
@@ -228,6 +235,182 @@ describe("useToolInvocations", () => {
     expect(Object.keys(statuses)).not.toContain("tool-1:rewrite:0");
   });
 
+  it("does not execute tool calls loaded asynchronously with existing results", async () => {
+    const execute = vi.fn(async () => ({ forecast: "ok" }));
+    const getTools = () => ({
+      weatherSearch: {
+        parameters: { type: "object", properties: {} },
+        execute,
+      } satisfies Tool,
+    });
+    const onResult = vi.fn();
+    const setToolStatuses = vi.fn();
+
+    const { rerender } = renderHook(
+      ({ state }: { state: AssistantTransportState }) =>
+        useToolInvocations({
+          state,
+          getTools,
+          onResult,
+          setToolStatuses,
+        }),
+      {
+        initialProps: {
+          state: createState([]),
+        },
+      },
+    );
+
+    act(() => {
+      rerender({
+        state: createState([
+          createAssistantMessage(
+            '{"query":"London"}',
+            { query: "London" },
+            { result: { source: "history" } },
+          ),
+        ]),
+      });
+    });
+
+    await waitFor(() => {
+      expect(execute).not.toHaveBeenCalled();
+      expect(onResult).not.toHaveBeenCalled();
+    });
+  });
+
+  it("does not re-execute asynchronously loaded resolved tool calls after reset", async () => {
+    const execute = vi.fn(async () => ({ forecast: "ok" }));
+    const getTools = () => ({
+      weatherSearch: {
+        parameters: { type: "object", properties: {} },
+        execute,
+      } satisfies Tool,
+    });
+    const onResult = vi.fn();
+    const setToolStatuses = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ state }: { state: AssistantTransportState }) =>
+        useToolInvocations({
+          state,
+          getTools,
+          onResult,
+          setToolStatuses,
+        }),
+      {
+        initialProps: {
+          state: createState([]),
+        },
+      },
+    );
+
+    act(() => {
+      rerender({
+        state: createState([
+          createAssistantMessage('{"query":"London"}', { query: "London" }),
+        ]),
+      });
+    });
+
+    await waitFor(() => {
+      expect(execute).toHaveBeenCalledTimes(1);
+    });
+
+    act(() => {
+      result.current.reset();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    act(() => {
+      rerender({
+        state: createState([]),
+      });
+    });
+
+    act(() => {
+      rerender({
+        state: createState([
+          createAssistantMessage(
+            '{"query":"London"}',
+            { query: "London" },
+            { result: { source: "history" } },
+          ),
+        ]),
+      });
+    });
+
+    await waitFor(() => {
+      expect(execute).toHaveBeenCalledTimes(1);
+      expect(onResult).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("still processes nested unresolved tool calls when the parent tool call is already resolved", async () => {
+    const executeParent = vi.fn(async () => ({ scope: "parent" }));
+    const executeChild = vi.fn(async () => ({ scope: "child" }));
+    const getTools = () => ({
+      resolvedOnly: {
+        parameters: { type: "object", properties: {} },
+        execute: executeParent,
+      } satisfies Tool,
+      childTool: {
+        parameters: { type: "object", properties: {} },
+        execute: executeChild,
+      } satisfies Tool,
+    });
+    const onResult = vi.fn();
+    const setToolStatuses = vi.fn();
+
+    const nestedMessage = createAssistantMessage(
+      '{"query":"nested"}',
+      { query: "nested" },
+      {
+        toolCallId: "tool-child",
+        toolName: "childTool",
+      },
+    );
+
+    const { rerender } = renderHook(
+      ({ state }: { state: AssistantTransportState }) =>
+        useToolInvocations({
+          state,
+          getTools,
+          onResult,
+          setToolStatuses,
+        }),
+      {
+        initialProps: {
+          state: createState([]),
+        },
+      },
+    );
+
+    act(() => {
+      rerender({
+        state: createState([
+          createAssistantMessage(
+            '{"query":"parent"}',
+            { query: "parent" },
+            {
+              result: { source: "history" },
+              toolName: "resolvedOnly",
+              nestedMessages: [nestedMessage],
+            },
+          ),
+        ]),
+      });
+    });
+
+    await waitFor(() => {
+      expect(executeParent).not.toHaveBeenCalled();
+      expect(executeChild).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it("does not close args stream early for non-executable tool snapshots", () => {
     const getTools = () => ({
       weatherSearch: {

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -3,7 +3,7 @@
 import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { useActionBarCopy } from "@assistant-ui/core/react";
 import { useAuiState } from "@assistant-ui/store";
 

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, useCallback } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { useAuiState, useAui } from "@assistant-ui/store";
 
 const useActionBarExportMarkdown = ({

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -3,7 +3,7 @@
 import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { useAuiState } from "@assistant-ui/store";
 import { useActionBarFeedbackNegative as useActionBarFeedbackNegativeBehavior } from "@assistant-ui/core/react";
 

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useAuiState } from "@assistant-ui/store";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { useActionBarFeedbackPositive as useActionBarFeedbackPositiveBehavior } from "@assistant-ui/core/react";
 
 const useActionBarFeedbackPositive = () => {

package/src/primitives/actionBar/ActionBarRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -3,7 +3,7 @@
 import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useActionBarStopSpeaking as useActionBarStopSpeakingBehavior } from "@assistant-ui/core/react";
 

package/src/primitives/attachment/AttachmentRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;

package/src/primitives/attachment/AttachmentThumb.tsx

@@ -2,7 +2,7 @@
 
 import { ComponentPropsWithoutRef, forwardRef, type ComponentRef } from "react";
 import { useAuiState } from "@assistant-ui/store";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 

package/src/primitives/branchPicker/BranchPickerRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { MessagePrimitiveIf as If } from "../message/MessageIf";
 

package/src/primitives/chainOfThought/ChainOfThoughtRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -1,7 +1,15 @@
 "use client";
 
-import { forwardRef, useCallback, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useState,
+  type ReactElement,
+  cloneElement,
+  isValidElement,
+} from "react";
 
+import { composeEventHandlers } from "@radix-ui/primitive";
 import { Slot } from "radix-ui";
 import React from "react";
 import { useAui } from "@assistant-ui/store";
@@ -10,6 +18,7 @@ export namespace ComposerPrimitiveAttachmentDropzone {
   export type Element = HTMLDivElement;
   export type Props = React.HTMLAttributes<HTMLDivElement> & {
     asChild?: boolean | undefined;
+    render?: ReactElement | undefined;
     disabled?: boolean | undefined;
   };
 }
@@ -17,7 +26,7 @@ export namespace ComposerPrimitiveAttachmentDropzone {
 export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   HTMLDivElement,
   ComposerPrimitiveAttachmentDropzone.Props
->(({ disabled, asChild = false, children, ...rest }, ref) => {
+>(({ disabled, asChild = false, render, children, ...rest }, ref) => {
   const [isDragging, setIsDragging] = useState(false);
   const aui = useAui();
 
@@ -68,25 +77,39 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
     [disabled, aui],
   );
 
-  const dragProps = {
-    onDragEnterCapture: handleDragEnterCapture,
-    onDragOverCapture: handleDragOverCapture,
-    onDragLeaveCapture: handleDragLeaveCapture,
-    onDropCapture: handleDrop,
+  const mergedProps = {
+    ...(isDragging ? { "data-dragging": "true" } : null),
+    ...rest,
+    onDragEnterCapture: composeEventHandlers(
+      rest.onDragEnterCapture,
+      handleDragEnterCapture,
+    ),
+    onDragOverCapture: composeEventHandlers(
+      rest.onDragOverCapture,
+      handleDragOverCapture,
+    ),
+    onDragLeaveCapture: composeEventHandlers(
+      rest.onDragLeaveCapture,
+      handleDragLeaveCapture,
+    ),
+    onDropCapture: composeEventHandlers(rest.onDropCapture, handleDrop),
+    ref,
   };
 
-  const Comp = asChild ? Slot.Root : "div";
+  if (render && isValidElement(render)) {
+    const renderChildren =
+      children !== undefined
+        ? children
+        : (render.props as Record<string, unknown>).children;
+    return (
+      <Slot.Root {...mergedProps}>
+        {cloneElement(render, undefined, renderChildren as React.ReactNode)}
+      </Slot.Root>
+    );
+  }
 
-  return (
-    <Comp
-      {...(isDragging ? { "data-dragging": "true" } : null)}
-      ref={ref}
-      {...dragProps}
-      {...rest}
-    >
-      {children}
-    </Comp>
-  );
+  const Comp = asChild ? Slot.Root : "div";
+  return <Comp {...mergedProps}>{children}</Comp>;
 });
 
 ComposerPrimitiveAttachmentDropzone.displayName =

package/src/primitives/composer/ComposerDictationTranscript.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useAuiState } from "@assistant-ui/store";
 

package/src/primitives/composer/ComposerInput.tsx

@@ -6,10 +6,14 @@ import { Slot } from "radix-ui";
 import {
   ClipboardEvent,
   type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
   forwardRef,
   useCallback,
   useEffect,
   useRef,
+  cloneElement,
+  isValidElement,
 } from "react";
 import TextareaAutosize, {
   type TextareaAutosizeProps,
@@ -32,6 +36,10 @@ export namespace ComposerPrimitiveInput {
      * When true, the component will merge its props with its child.
      */
     asChild?: boolean | undefined;
+    /**
+     * A React element to use as the input container, with props merged in.
+     */
+    render?: ReactElement | undefined;
     /**
      * Whether to cancel message composition when Escape is pressed.
      * @default true
@@ -118,6 +126,7 @@ export const ComposerPrimitiveInput = forwardRef<
     {
       autoFocus = false,
       asChild,
+      render,
       disabled: disabledProp,
       onChange,
       onKeyDown,
@@ -146,8 +155,6 @@ export const ComposerPrimitiveInput = forwardRef<
       return s.composer.text;
     });
 
-    const Component = asChild ? Slot.Root : TextareaAutosize;
-
     const isDisabled =
       useAuiState(
         (s) => s.thread.isDisabled || s.composer.dictation?.inputDisabled,
@@ -277,14 +284,15 @@ export const ComposerPrimitiveInput = forwardRef<
       return aui.on("threadListItem.switchedTo", focus);
     }, [unstable_focusOnThreadSwitched, focus, aui]);
 
-    return (
-      <Component
-        name="input"
-        value={value}
-        {...rest}
-        ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
-        disabled={isDisabled}
-        onChange={composeEventHandlers(onChange, (e) => {
+    const inputProps = {
+      name: "input" as const,
+      value,
+      ...rest,
+      ref: ref as React.ForwardedRef<HTMLTextAreaElement>,
+      disabled: isDisabled,
+      onChange: composeEventHandlers(
+        onChange,
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
           if (!aui.composer().getState().isEditing) return;
           flushResourcesSync(() => {
             aui.composer().setText(e.target.value);
@@ -292,17 +300,35 @@ export const ComposerPrimitiveInput = forwardRef<
           mentionInternalContext?.setCursorPosition(
             e.target.selectionStart ?? e.target.value.length,
           );
-        })}
-        onKeyDown={composeEventHandlers(onKeyDown, handleKeyPress)}
-        onSelect={composeEventHandlers(onSelect, (e) => {
+        },
+      ),
+      onKeyDown: composeEventHandlers(onKeyDown, handleKeyPress),
+      onSelect: composeEventHandlers(
+        onSelect,
+        (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
           const target = e.target as HTMLTextAreaElement;
           mentionInternalContext?.setCursorPosition(
             target.selectionStart ?? target.value.length,
           );
-        })}
-        onPaste={composeEventHandlers(onPaste, handlePaste)}
-      />
-    );
+        },
+      ),
+      onPaste: composeEventHandlers(onPaste, handlePaste),
+    };
+
+    if (render && isValidElement(render)) {
+      const renderChildren =
+        (rest as any).children !== undefined
+          ? ((rest as any).children as ReactNode)
+          : ((render.props as Record<string, unknown>).children as ReactNode);
+      return (
+        <Slot.Root {...inputProps}>
+          {cloneElement(render, undefined, renderChildren)}
+        </Slot.Root>
+      );
+    }
+
+    const Component = asChild ? Slot.Root : TextareaAutosize;
+    return <Component {...inputProps} />;
   },
 );
 

package/src/primitives/composer/ComposerQuote.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   type ComponentPropsWithoutRef,

package/src/primitives/composer/ComposerRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   type FormEvent,

package/src/primitives/composer/mention/ComposerMentionBack.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../../utils/Primitive";
 import {
   type ComponentRef,
   type ComponentPropsWithoutRef,

package/src/primitives/composer/mention/ComposerMentionCategories.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../../utils/Primitive";
 import {
   type ComponentRef,
   type ComponentPropsWithoutRef,

package/src/primitives/composer/mention/ComposerMentionItems.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../../utils/Primitive";
 import {
   type ComponentRef,
   type ComponentPropsWithoutRef,

package/src/primitives/composer/mention/ComposerMentionPopover.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../../utils/Primitive";
 import {
   type ComponentRef,
   type ComponentPropsWithoutRef,

package/src/primitives/error/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useMessageError } from "@assistant-ui/core/react";
 

package/src/primitives/error/ErrorRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 
 export namespace ErrorPrimitiveRoot {

package/src/primitives/message/MessageRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,

package/src/primitives/messagePart/MessagePartImage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useMessagePartImage } from "./useMessagePartImage";
 

package/src/primitives/messagePart/MessagePartText.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,

package/src/primitives/queueItem/QueueItemText.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   type ComponentPropsWithoutRef,

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import {
   type ComponentPropsWithoutRef,

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentPropsWithoutRef,
   type ComponentRef,

package/src/primitives/suggestion/SuggestionDescription.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "../../utils/Primitive";
 import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useAuiState } from "@assistant-ui/store";