@assistant-ui/react 0.12.11 → 0.12.12

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

@@ -24,6 +24,7 @@ import {
   UserMessagePart,
   QueuedCommand,
   AssistantTransportCommand,
+  SendCommandsRequestBody,
 } from "./types";
 import { useCommandQueue } from "./commandQueue";
 import { useRunManager } from "./runManager";
@@ -137,24 +138,32 @@ const useAssistantTransportThreadRuntime = <T>(
           : options.body;
       const context = runtime.thread.getModelContext();
 
+      let requestBody: Record<string, unknown> = {
+        commands,
+        state: agentStateRef.current,
+        system: context.system,
+        tools: context.tools ? toToolsJSONSchema(context.tools) : undefined,
+        threadId,
+        ...(parentIdRef.current !== undefined && {
+          parentId: parentIdRef.current,
+        }),
+        ...context.callSettings,
+        ...context.config,
+        ...(bodyValue ?? {}),
+      };
+
+      if (options.prepareSendCommandsRequest) {
+        requestBody = await options.prepareSendCommandsRequest(
+          requestBody as SendCommandsRequestBody,
+        );
+      }
+
       const response = await fetch(
         isResume ? options.resumeApi! : options.api,
         {
           method: "POST",
           headers,
-          body: JSON.stringify({
-            commands,
-            state: agentStateRef.current,
-            system: context.system,
-            tools: context.tools ? toToolsJSONSchema(context.tools) : undefined,
-            threadId,
-            ...(parentIdRef.current !== undefined && {
-              parentId: parentIdRef.current,
-            }),
-            ...context.callSettings,
-            ...context.config,
-            ...(bodyValue ?? {}),
-          }),
+          body: JSON.stringify(requestBody),
           signal,
         },
       );

package/src/legacy-runtime/runtime-cores/external-store/external-message-converter.ts

@@ -5,6 +5,7 @@ import { ThreadMessageConverter } from "./ThreadMessageConverter";
 import {
   getExternalStoreMessages,
   symbolInnerMessage,
+  bindExternalStoreMessage,
 } from "./getExternalStoreMessage";
 import { fromThreadMessageLike, ThreadMessageLike } from "./ThreadMessageLike";
 import { getAutoStatus, isAutoStatus } from "./auto-status";
@@ -276,23 +277,22 @@ const chunkExternalMessages = <T>(
 function createErrorAssistantMessage(
   error: ReadonlyJSONValue,
 ): ThreadAssistantMessage {
-  return Object.assign<ThreadAssistantMessage, { [symbolInnerMessage]: [] }>(
-    {
-      id: generateErrorMessageId(),
-      role: "assistant",
-      content: [],
-      status: { type: "incomplete", reason: "error", error },
-      createdAt: new Date(),
-      metadata: {
-        unstable_state: null,
-        unstable_annotations: [],
-        unstable_data: [],
-        custom: {},
-        steps: [],
-      },
+  const msg: ThreadAssistantMessage = {
+    id: generateErrorMessageId(),
+    role: "assistant",
+    content: [],
+    status: { type: "incomplete", reason: "error", error },
+    createdAt: new Date(),
+    metadata: {
+      unstable_state: null,
+      unstable_annotations: [],
+      unstable_data: [],
+      custom: {},
+      steps: [],
     },
-    { [symbolInnerMessage]: [] },
-  );
+  };
+  bindExternalStoreMessage(msg, []);
+  return msg;
 }
 
 export const convertExternalMessages = <T extends WeakKey>(
@@ -331,7 +331,7 @@ export const convertExternalMessages = <T extends WeakKey>(
       idx.toString(),
       autoStatus,
     );
-    (newMessage as any)[symbolInnerMessage] = message.inputs;
+    bindExternalStoreMessage(newMessage, message.inputs);
     return newMessage;
   });
 
@@ -439,14 +439,12 @@ export const useExternalMessageConverter = <T extends WeakKey>({
           idx.toString(),
           autoStatus,
         );
-        (newMessage as any)[symbolInnerMessage] = message.inputs;
+        bindExternalStoreMessage(newMessage, message.inputs);
         return newMessage;
       },
     );
 
-    (threadMessages as unknown as { [symbolInnerMessage]: T[] })[
-      symbolInnerMessage
-    ] = messages;
+    bindExternalStoreMessage(threadMessages, messages);
 
     if (state.metadata.error) {
       const lastMessage = threadMessages.at(-1);

package/src/legacy-runtime/runtime-cores/external-store/getExternalStoreMessage.ts

@@ -1,5 +1,6 @@
 export {
   getExternalStoreMessage,
   getExternalStoreMessages,
+  bindExternalStoreMessage,
 } from "@assistant-ui/core";
 export { symbolInnerMessage } from "@assistant-ui/core/internal";

package/src/legacy-runtime/runtime-cores/external-store/index.ts

@@ -3,6 +3,7 @@ export type { ThreadMessageLike } from "@assistant-ui/core";
 export {
   getExternalStoreMessage,
   getExternalStoreMessages,
+  bindExternalStoreMessage,
 } from "@assistant-ui/core";
 export type {
   ExternalStoreAdapter,

package/src/legacy-runtime/runtime-cores/remote-thread-list/useRemoteThreadListRuntime.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import {
   BaseAssistantRuntimeCore,
   AssistantRuntimeImpl,
@@ -46,11 +46,27 @@ const useRemoteThreadListRuntimeImpl = (
 export const useRemoteThreadListRuntime = (
   options: RemoteThreadListOptions,
 ): AssistantRuntime => {
+  const runtimeHookRef = useRef(options.runtimeHook);
+  runtimeHookRef.current = options.runtimeHook;
+
+  const stableRuntimeHook = useCallback(() => {
+    return runtimeHookRef.current();
+  }, []);
+
+  const stableOptions = useMemo<RemoteThreadListOptions>(
+    () => ({
+      adapter: options.adapter,
+      allowNesting: options.allowNesting,
+      runtimeHook: stableRuntimeHook,
+    }),
+    [options.adapter, options.allowNesting, stableRuntimeHook],
+  );
+
   const aui = useAui();
   const isNested = aui.threadListItem.source !== null;
 
   if (isNested) {
-    if (!options.allowNesting) {
+    if (!stableOptions.allowNesting) {
       throw new Error(
         "useRemoteThreadListRuntime cannot be nested inside another RemoteThreadListRuntime. " +
           "Set allowNesting: true to allow nesting (the inner runtime will become a no-op).",
@@ -59,8 +75,8 @@ export const useRemoteThreadListRuntime = (
 
     // If allowNesting is true and already inside a thread list context,
     // just call the runtimeHook directly (no-op behavior)
-    return options.runtimeHook();
+    return stableRuntimeHook();
   }
 
-  return useRemoteThreadListRuntimeImpl(options);
+  return useRemoteThreadListRuntimeImpl(stableOptions);
 };

package/src/model-context/index.ts

@@ -1,38 +1,45 @@
-export { makeAssistantTool, type AssistantTool } from "./makeAssistantTool";
+"use client";
+
+// Re-export shared from core/react
 export {
-  type AssistantToolUI,
+  makeAssistantTool,
+  type AssistantTool,
   makeAssistantToolUI,
-} from "./makeAssistantToolUI";
-export {
-  type AssistantDataUI,
+  type AssistantToolUI,
   makeAssistantDataUI,
-} from "./makeAssistantDataUI";
-export { useAssistantInstructions } from "./useAssistantInstructions";
-export { useAssistantTool, type AssistantToolProps } from "./useAssistantTool";
-export {
+  type AssistantDataUI,
+  useAssistantTool,
+  type AssistantToolProps,
   useAssistantToolUI,
   type AssistantToolUIProps,
-} from "./useAssistantToolUI";
-export {
   useAssistantDataUI,
   type AssistantDataUIProps,
-} from "./useAssistantDataUI";
-export { useInlineRender } from "./useInlineRender";
-
-export type { ModelContext, ModelContextProvider } from "@assistant-ui/core";
+  useAssistantInstructions,
+  useInlineRender,
+  type Toolkit,
+  type ToolDefinition,
+  Tools,
+  DataRenderers,
+} from "@assistant-ui/core/react";
+
+// Core pass-through (unchanged)
+export type {
+  ModelContext,
+  ModelContextProvider,
+  LanguageModelConfig,
+  LanguageModelV1CallSettings,
+} from "@assistant-ui/core";
+
+export { mergeModelContexts } from "@assistant-ui/core";
 
 export type { Tool } from "assistant-stream";
 
 export { tool } from "@assistant-ui/core";
 
-export { makeAssistantVisible } from "./makeAssistantVisible";
-
-export type { Toolkit, ToolDefinition } from "./toolbox";
-
-export { Tools } from "../client/Tools";
-export { DataRenderers } from "../client/DataRenderers";
-
 export { Suggestions, type SuggestionConfig } from "@assistant-ui/core/store";
 
+// React-only (stays)
+export { makeAssistantVisible } from "./makeAssistantVisible";
+
 export * from "./registry";
 export * from "./frame";

package/src/primitives/actionBarMore/ActionBarMoreContent.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ActionBarMorePrimitiveContent {

package/src/primitives/actionBarMore/ActionBarMoreItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ActionBarMorePrimitiveItem {

package/src/primitives/actionBarMore/ActionBarMoreRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC } from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ActionBarMorePrimitiveRoot {

package/src/primitives/actionBarMore/ActionBarMoreSeparator.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ActionBarMorePrimitiveSeparator {

package/src/primitives/actionBarMore/ActionBarMoreTrigger.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ActionBarMorePrimitiveTrigger {

package/src/primitives/actionBarMore/scope.ts

@@ -1,4 +1,4 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import type { Scope } from "@radix-ui/react-context";
 
 export const useDropdownMenuScope: ReturnType<

package/src/primitives/assistantModal/AssistantModalAnchor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveAnchor {

package/src/primitives/assistantModal/AssistantModalContent.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { ScopedProps, usePopoverScope } from "./scope";
 import { composeEventHandlers } from "@radix-ui/primitive";
 

package/src/primitives/assistantModal/AssistantModalRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, useEffect, useState } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { ScopedProps, usePopoverScope } from "./scope";
 import { useAui } from "@assistant-ui/store";
 

package/src/primitives/assistantModal/AssistantModalTrigger.tsx

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { ScopedProps, usePopoverScope } from "./scope";
 
 export namespace AssistantModalPrimitiveTrigger {

package/src/primitives/assistantModal/scope.ts

@@ -1,4 +1,4 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import type { Scope } from "@radix-ui/react-context";
 
 export const usePopoverScope: ReturnType<

package/src/primitives/chainOfThought/ChainOfThoughtParts.tsx

@@ -1,87 +1,3 @@
 "use client";
 
-import {
-  type ComponentType,
-  type FC,
-  type PropsWithChildren,
-  useMemo,
-} from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { ChainOfThoughtPartByIndexProvider } from "../../context/providers/ChainOfThoughtPartByIndexProvider";
-import { MessagePartComponent } from "../message/MessageParts";
-import type {
-  ReasoningMessagePartComponent,
-  ToolCallMessagePartComponent,
-} from "../../types/MessagePartComponentTypes";
-
-export namespace ChainOfThoughtPrimitiveParts {
-  export type Props = {
-    /**
-     * Component configuration for rendering chain of thought parts.
-     */
-    components?: {
-      /** Component for rendering reasoning parts */
-      Reasoning?: ReasoningMessagePartComponent | undefined;
-      /** Fallback component for tool-call parts */
-      tools?: {
-        Fallback?: ToolCallMessagePartComponent | undefined;
-      };
-      /** Layout component to wrap the rendered parts when expanded */
-      Layout?: ComponentType<PropsWithChildren> | undefined;
-    };
-  };
-}
-
-/**
- * Renders the parts within a chain of thought, with support for collapsed/expanded states.
- *
- * When collapsed, no parts are shown. When expanded, all parts are rendered
- * using the provided component configuration through the part scope mechanism.
- *
- * @example
- * ```tsx
- * <ChainOfThoughtPrimitive.Parts
- *   components={{
- *     Reasoning: ({ text }) => <p className="reasoning">{text}</p>,
- *     tools: {
- *       Fallback: ({ toolName }) => <div>Tool: {toolName}</div>
- *     }
- *   }}
- * />
- * ```
- */
-export const ChainOfThoughtPrimitiveParts: FC<
-  ChainOfThoughtPrimitiveParts.Props
-> = ({ components }) => {
-  const partsLength = useAuiState((s) => s.chainOfThought.parts.length);
-
-  const messageComponents = useMemo(
-    () => ({
-      Reasoning: components?.Reasoning,
-      tools: {
-        Fallback: components?.tools?.Fallback,
-      },
-    }),
-    [components?.Reasoning, components?.tools?.Fallback],
-  );
-
-  const Layout = components?.Layout;
-
-  const elements = useMemo(() => {
-    return Array.from({ length: partsLength }, (_, index) => (
-      <ChainOfThoughtPartByIndexProvider key={index} index={index}>
-        {Layout ? (
-          <Layout>
-            <MessagePartComponent components={messageComponents} />
-          </Layout>
-        ) : (
-          <MessagePartComponent components={messageComponents} />
-        )}
-      </ChainOfThoughtPartByIndexProvider>
-    ));
-  }, [partsLength, messageComponents, Layout]);
-
-  return <>{elements}</>;
-};
-
-ChainOfThoughtPrimitiveParts.displayName = "ChainOfThoughtPrimitive.Parts";
+export { ChainOfThoughtPrimitiveParts } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef, useCallback, useState } from "react";
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "radix-ui";
 import React from "react";
 import { useAui } from "@assistant-ui/store";
 
@@ -75,7 +75,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
     onDropCapture: handleDrop,
   };
 
-  const Comp = asChild ? Slot : "div";
+  const Comp = asChild ? Slot.Root : "div";
 
   return (
     <Comp

package/src/primitives/composer/ComposerAttachments.tsx

@@ -1,112 +1,6 @@
 "use client";
 
-import type { Attachment } from "@assistant-ui/core";
-import { ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { ComposerAttachmentByIndexProvider } from "../../context/providers";
-
-export namespace ComposerPrimitiveAttachments {
-  export type Props = {
-    components:
-      | {
-          Image?: ComponentType | undefined;
-          Document?: ComponentType | undefined;
-          File?: ComponentType | undefined;
-          Attachment?: ComponentType | undefined;
-        }
-      | undefined;
-  };
-}
-
-const getComponent = (
-  components: ComposerPrimitiveAttachments.Props["components"],
-  attachment: Attachment,
-) => {
-  const type = attachment.type;
-  switch (type) {
-    case "image":
-      return components?.Image ?? components?.Attachment;
-    case "document":
-      return components?.Document ?? components?.Attachment;
-    case "file":
-      return components?.File ?? components?.Attachment;
-    default:
-      const _exhaustiveCheck: never = type;
-      throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
-  }
-};
-
-const AttachmentComponent: FC<{
-  components: ComposerPrimitiveAttachments.Props["components"];
-}> = ({ components }) => {
-  const attachment = useAuiState((s) => s.attachment);
-  if (!attachment) return null;
-
-  const Component = getComponent(components, attachment);
-  if (!Component) return null;
-  return <Component />;
-};
-
-export namespace ComposerPrimitiveAttachmentByIndex {
-  export type Props = {
-    index: number;
-    components?: ComposerPrimitiveAttachments.Props["components"];
-  };
-}
-
-/**
- * Renders a single attachment at the specified index within the composer.
- *
- * This component provides direct access to render a specific attachment
- * from the composer's attachment list using the provided component configuration.
- *
- * @example
- * ```tsx
- * <ComposerPrimitive.AttachmentByIndex
- *   index={0}
- *   components={{
- *     Image: MyImageAttachment,
- *     Document: MyDocumentAttachment
- *   }}
- * />
- * ```
- */
-export const ComposerPrimitiveAttachmentByIndex: FC<ComposerPrimitiveAttachmentByIndex.Props> =
-  memo(
-    ({ index, components }) => {
-      return (
-        <ComposerAttachmentByIndexProvider index={index}>
-          <AttachmentComponent components={components} />
-        </ComposerAttachmentByIndexProvider>
-      );
-    },
-    (prev, next) =>
-      prev.index === next.index &&
-      prev.components?.Image === next.components?.Image &&
-      prev.components?.Document === next.components?.Document &&
-      prev.components?.File === next.components?.File &&
-      prev.components?.Attachment === next.components?.Attachment,
-  );
-
-ComposerPrimitiveAttachmentByIndex.displayName =
-  "ComposerPrimitive.AttachmentByIndex";
-
-export const ComposerPrimitiveAttachments: FC<
-  ComposerPrimitiveAttachments.Props
-> = ({ components }) => {
-  const attachmentsCount = useAuiState((s) => s.composer.attachments.length);
-
-  const attachmentElements = useMemo(() => {
-    return Array.from({ length: attachmentsCount }, (_, index) => (
-      <ComposerPrimitiveAttachmentByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
-    ));
-  }, [attachmentsCount, components]);
-
-  return attachmentElements;
-};
-
-ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";
+export {
+  ComposerPrimitiveAttachments,
+  ComposerPrimitiveAttachmentByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerIf.ts

@@ -1,44 +1,4 @@
 "use client";
 
-import type { FC, PropsWithChildren } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
-
-type ComposerIfFilters = {
-  /** Whether the composer is in editing mode */
-  editing: boolean | undefined;
-  /** Whether dictation is currently active */
-  dictation: boolean | undefined;
-};
-
-export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
-
-const useComposerIf = (props: UseComposerIfProps) => {
-  return useAuiState((s) => {
-    if (props.editing === true && !s.composer.isEditing) return false;
-    if (props.editing === false && s.composer.isEditing) return false;
-
-    const isDictating = s.composer.dictation != null;
-    if (props.dictation === true && !isDictating) return false;
-    if (props.dictation === false && isDictating) return false;
-
-    return true;
-  });
-};
-
-export namespace ComposerPrimitiveIf {
-  export type Props = PropsWithChildren<UseComposerIfProps>;
-}
-
-/**
- * @deprecated Use `<AuiIf condition={({ composer }) => ...} />` instead.
- */
-export const ComposerPrimitiveIf: FC<ComposerPrimitiveIf.Props> = ({
-  children,
-  ...query
-}) => {
-  const result = useComposerIf(query);
-  return result ? children : null;
-};
-
-ComposerPrimitiveIf.displayName = "ComposerPrimitive.If";
+export { ComposerPrimitiveIf } from "@assistant-ui/core/react";
+export type { UseComposerIfProps } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerInput.tsx

@@ -2,7 +2,7 @@
 
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "radix-ui";
 import {
   ClipboardEvent,
   type KeyboardEvent,
@@ -139,7 +139,7 @@ export const ComposerPrimitiveInput = forwardRef<
       return s.composer.text;
     });
 
-    const Component = asChild ? Slot : TextareaAutosize;
+    const Component = asChild ? Slot.Root : TextareaAutosize;
 
     const isDisabled =
       useAuiState(