@assistant-ui/react 0.12.20 → 0.12.22

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

package/src/primitives/suggestion/SuggestionTitle.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";
 

package/src/primitives/thread/ThreadRoot.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 ThreadPrimitiveRoot {

package/src/primitives/thread/ThreadViewport.tsx

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

package/src/primitives/thread/ThreadViewportFooter.tsx

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

package/src/primitives/threadList/ThreadListNew.tsx

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

package/src/primitives/threadList/ThreadListRoot.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/threadListItem/ThreadListItemRoot.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/tests/BaseComposerRuntimeCore.test.ts

@@ -204,7 +204,9 @@ describe("BaseComposerRuntimeCore", () => {
     };
     composer.setAttachmentAdapter(adapter);
 
-    await composer.addAttachment(new File(["data"], "test.txt"));
+    await composer.addAttachment(
+      new File(["data"], "test.txt", { type: "text/plain" }),
+    );
 
     expect(composer.attachments).toHaveLength(1);
     expect(composer.attachments[0]!.id).toBe("att-1");

package/src/utils/Primitive.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Primitive } from "./Primitive";
+
+const ALL_NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul",
+] as const;
+
+// Void elements cannot have children
+const VOID_ELEMENTS = new Set(["img", "input"]);
+
+describe("Primitive", () => {
+  describe.each(ALL_NODES)("Primitive.%s", (node) => {
+    const Comp = Primitive[node];
+
+    it("renders the correct HTML tag", () => {
+      const html = VOID_ELEMENTS.has(node)
+        ? renderToStaticMarkup(<Comp />)
+        : renderToStaticMarkup(<Comp>content</Comp>);
+
+      expect(html).toMatch(new RegExp(`^<${node}[\\s/>]`));
+    });
+
+    it("renders the render element instead of the default tag", () => {
+      // Use <i> as render target — it won't collide with any Primitive node name
+      const html = VOID_ELEMENTS.has(node)
+        ? renderToStaticMarkup(<Comp render={<i data-test="yes" />} />)
+        : renderToStaticMarkup(
+            <Comp render={<i data-test="yes" />}>content</Comp>,
+          );
+
+      expect(html).toContain("<i");
+      expect(html).toContain('data-test="yes"');
+      expect(html).not.toMatch(new RegExp(`<${node}[\\s>]`));
+    });
+
+    if (!VOID_ELEMENTS.has(node)) {
+      it("render produces same markup as asChild", () => {
+        const renderHtml = renderToStaticMarkup(
+          <Comp render={<i className="child" />} className="parent">
+            text
+          </Comp>,
+        );
+
+        const asChildHtml = renderToStaticMarkup(
+          <Comp asChild className="parent">
+            <i className="child">text</i>
+          </Comp>,
+        );
+
+        expect(renderHtml).toBe(asChildHtml);
+      });
+    }
+  });
+
+  describe("render prop edge cases", () => {
+    it("uses render element's own children as fallback", () => {
+      const html = renderToStaticMarkup(
+        <Primitive.span render={<em>Fallback</em>} />,
+      );
+      expect(html).toBe("<em>Fallback</em>");
+    });
+
+    it("outer children override render element's children", () => {
+      const html = renderToStaticMarkup(
+        <Primitive.span render={<em>Original</em>}>Override</Primitive.span>,
+      );
+      expect(html).toBe("<em>Override</em>");
+    });
+
+    it("passes multiple children into the render element", () => {
+      const html = renderToStaticMarkup(
+        <Primitive.div render={<section />}>
+          <p>A</p>
+          <p>B</p>
+        </Primitive.div>,
+      );
+      expect(html).toContain("<section");
+      expect(html).toContain("<p>A</p>");
+      expect(html).toContain("<p>B</p>");
+    });
+  });
+});

package/src/utils/Primitive.tsx

@@ -0,0 +1,100 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  type ForwardRefExoticComponent,
+  type ReactElement,
+  type ReactNode,
+  type RefAttributes,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+} from "react";
+import { Primitive as RadixPrimitive } from "@radix-ui/react-primitive";
+
+/**
+ * Thin wrapper around `@radix-ui/react-primitive` that adds `render` prop support.
+ *
+ * When `render` is provided, it is converted to the equivalent `asChild` pattern:
+ *   render={<Comp props />} + children  →  asChild + <Comp props>{children}</Comp>
+ *
+ * All prop merging, ref composition, and event handler chaining remain handled
+ * by Radix's battle-tested Slot implementation — we add zero custom logic for that.
+ */
+
+// Match @radix-ui/react-primitive's full element set
+const NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul",
+] as const;
+type PrimitiveNode = (typeof NODES)[number];
+
+type PrimitiveProps<E extends PrimitiveNode> = ComponentPropsWithoutRef<
+  (typeof RadixPrimitive)[E]
+> & {
+  render?: ReactElement | undefined;
+};
+
+type PrimitiveRef<E extends PrimitiveNode> = ComponentRef<
+  (typeof RadixPrimitive)[E]
+>;
+
+function createPrimitive<E extends PrimitiveNode>(node: E) {
+  const RadixComp = RadixPrimitive[node];
+
+  const Component = forwardRef<PrimitiveRef<E>, PrimitiveProps<E>>(
+    ({ render, asChild, children, ...props }, ref) => {
+      if (render && isValidElement(render)) {
+        // render={<Comp p />} + children
+        //   → asChild + <Comp p>{children}</Comp>
+        const renderChildren =
+          children !== undefined
+            ? children
+            : ((render.props as Record<string, unknown>).children as ReactNode);
+        return (
+          <RadixComp asChild {...(props as any)} ref={ref}>
+            {cloneElement(render, undefined, renderChildren)}
+          </RadixComp>
+        );
+      }
+
+      return (
+        <RadixComp asChild={asChild} {...(props as any)} ref={ref}>
+          {children}
+        </RadixComp>
+      );
+    },
+  );
+
+  Component.displayName = `Primitive.${node}`;
+  return Component as ForwardRefExoticComponent<
+    PrimitiveProps<E> & RefAttributes<PrimitiveRef<E>>
+  >;
+}
+
+const Primitive = NODES.reduce(
+  (acc, node) => {
+    acc[node] = createPrimitive(node);
+    return acc;
+  },
+  {} as {
+    [K in PrimitiveNode]: ReturnType<typeof createPrimitive<K>>;
+  },
+);
+
+export { Primitive };
+export type { PrimitiveProps };

package/src/utils/createActionButton.tsx

@@ -4,7 +4,7 @@ import {
   ComponentPropsWithoutRef,
   MouseEventHandler,
 } from "react";
-import { Primitive } from "@radix-ui/react-primitive";
+import { Primitive } from "./Primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
 type ActionButtonCallback<TProps> = (