@assistant-ui/react 0.12.24 → 0.12.26

package/src/primitives/messagePart/MessagePartImage.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import {
+  type ComponentRef,
+  forwardRef,
+  type ComponentPropsWithoutRef,
+} from "react";
 import { useMessagePartImage } from "./useMessagePartImage";
 
 export namespace MessagePartPrimitiveImage {
@@ -33,6 +37,7 @@ export const MessagePartPrimitiveImage = forwardRef<
   MessagePartPrimitiveImage.Props
 >((props, forwardedRef) => {
   const { image } = useMessagePartImage();
+  // biome-ignore lint/performance/noImgElement: next/image not applicable here
   return <Primitive.img src={image} {...props} ref={forwardedRef} />;
 });
 

package/src/primitives/messagePart/MessagePartInProgress.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, PropsWithChildren } from "react";
+import type { FC, PropsWithChildren } from "react";
 import { useAuiState } from "@assistant-ui/store";
 
 export namespace MessagePartPrimitiveInProgress {

package/src/primitives/messagePart/MessagePartText.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { Primitive } from "../../utils/Primitive";
+import type { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,
-  ComponentPropsWithoutRef,
-  ElementType,
+  type ComponentPropsWithoutRef,
+  type ElementType,
 } from "react";
 import { useMessagePartText } from "./useMessagePartText";
 import { useSmooth } from "../../utils/smooth/useSmooth";

package/src/primitives/queueItem/QueueItemRemove.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useAui } from "@assistant-ui/store";

package/src/primitives/queueItem/QueueItemSteer.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useAui } from "@assistant-ui/store";

package/src/primitives/suggestion/SuggestionDescription.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import {
+  type ElementRef,
+  forwardRef,
+  type ComponentPropsWithoutRef,
+} from "react";
 import { useAuiState } from "@assistant-ui/store";
 
 export namespace SuggestionPrimitiveDescription {

package/src/primitives/suggestion/SuggestionTitle.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import {
+  type ElementRef,
+  forwardRef,
+  type ComponentPropsWithoutRef,
+} from "react";
 import { useAuiState } from "@assistant-ui/store";
 
 export namespace SuggestionPrimitiveTitle {

package/src/primitives/suggestion/SuggestionTrigger.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";

package/src/primitives/thread/ThreadRoot.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import {
+  type ComponentRef,
+  forwardRef,
+  type ComponentPropsWithoutRef,
+} from "react";
 
 export namespace ThreadPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.div>;

package/src/primitives/thread/ThreadScrollToBottom.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";

package/src/primitives/thread/ThreadSuggestion.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useSuggestionTrigger as useSuggestionTriggerBehavior } from "@assistant-ui/core/react";
@@ -38,9 +38,7 @@ const useThreadSuggestion = ({
   /** @deprecated Use `clearComposer` instead. */
   method?: "replace";
 }) => {
-  // ========== Deprecation Mapping ==========
   const resolvedSend = send ?? autoSend ?? false;
-  // ==========================================
 
   const { disabled, trigger } = useSuggestionTriggerBehavior({
     prompt,

package/src/primitives/thread/ThreadViewport.tsx

@@ -5,7 +5,7 @@ import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,
-  ComponentPropsWithoutRef,
+  type ComponentPropsWithoutRef,
   useCallback,
 } from "react";
 import { useThreadViewportAutoScroll } from "./useThreadViewportAutoScroll";

package/src/primitives/thread/ThreadViewportFooter.tsx

@@ -5,7 +5,7 @@ import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   forwardRef,
-  ComponentPropsWithoutRef,
+  type ComponentPropsWithoutRef,
   useCallback,
 } from "react";
 import { useSizeHandle } from "../../utils/hooks/useSizeHandle";

package/src/primitives/threadList/ThreadListNew.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {
+import type {
   ActionButtonElement,
   ActionButtonProps,
 } from "../../utils/createActionButton";

package/src/primitives/threadList/ThreadListRoot.tsx

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

package/src/primitives/threadListItem/ThreadListItemArchive.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useThreadListItemArchive as useThreadListItemArchiveBehavior } from "@assistant-ui/core/react";

package/src/primitives/threadListItem/ThreadListItemDelete.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useThreadListItemDelete as useThreadListItemDeleteBehavior } from "@assistant-ui/core/react";

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

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

package/src/primitives/threadListItem/ThreadListItemTrigger.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useThreadListItemTrigger as useThreadListItemTriggerBehavior } from "@assistant-ui/core/react";

package/src/primitives/threadListItem/ThreadListItemUnarchive.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import {
-  ActionButtonElement,
-  ActionButtonProps,
+  type ActionButtonElement,
+  type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 import { useThreadListItemUnarchive as useThreadListItemUnarchiveBehavior } from "@assistant-ui/core/react";

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -1,12 +1,18 @@
 "use client";
 
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { ScopedProps, useDropdownMenuScope } from "./scope";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderContent } from "../dropdownMenuRenderPrimitives";
+import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveContent {
   export type Element = ComponentRef<typeof DropdownMenuPrimitive.Content>;
-  export type Props = ComponentPropsWithoutRef<
+  export type Props = WithRenderPropProps<
     typeof DropdownMenuPrimitive.Content
   > & {
     portalProps?:
@@ -32,7 +38,7 @@ export const ThreadListItemMorePrimitiveContent = forwardRef<
 
     return (
       <DropdownMenuPrimitive.Portal {...scope} {...portalProps}>
-        <DropdownMenuPrimitive.Content
+        <DropdownMenuRenderContent
           {...scope}
           {...props}
           ref={forwardedRef}

package/src/primitives/threadListItemMore/ThreadListItemMoreItem.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { ScopedProps, useDropdownMenuScope } from "./scope";
+import { type ComponentRef, forwardRef } from "react";
+import type { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderItem } from "../dropdownMenuRenderPrimitives";
+import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveItem {
   export type Element = ComponentRef<typeof DropdownMenuPrimitive.Item>;
-  export type Props = ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.Item
-  >;
+  export type Props = WithRenderPropProps<typeof DropdownMenuPrimitive.Item>;
 }
 
 export const ThreadListItemMorePrimitiveItem = forwardRef<
@@ -24,7 +24,7 @@ export const ThreadListItemMorePrimitiveItem = forwardRef<
   ) => {
     const scope = useDropdownMenuScope(__scopeThreadListItemMore);
 
-    return <DropdownMenuPrimitive.Item {...scope} {...rest} ref={ref} />;
+    return <DropdownMenuRenderItem {...scope} {...rest} ref={ref} />;
   },
 );
 

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { FC } from "react";
+import type { FC } from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { ScopedProps, useDropdownMenuScope } from "./scope";
+import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveRoot {
   export type Props = DropdownMenuPrimitive.DropdownMenuProps;

package/src/primitives/threadListItemMore/ThreadListItemMoreSeparator.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { ScopedProps, useDropdownMenuScope } from "./scope";
+import { type ComponentRef, forwardRef } from "react";
+import type { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderSeparator } from "../dropdownMenuRenderPrimitives";
+import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveSeparator {
   export type Element = ComponentRef<typeof DropdownMenuPrimitive.Separator>;
-  export type Props = ComponentPropsWithoutRef<
+  export type Props = WithRenderPropProps<
     typeof DropdownMenuPrimitive.Separator
   >;
 }
@@ -24,7 +26,7 @@ export const ThreadListItemMorePrimitiveSeparator = forwardRef<
   ) => {
     const scope = useDropdownMenuScope(__scopeThreadListItemMore);
 
-    return <DropdownMenuPrimitive.Separator {...scope} {...rest} ref={ref} />;
+    return <DropdownMenuRenderSeparator {...scope} {...rest} ref={ref} />;
   },
 );
 

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { ScopedProps, useDropdownMenuScope } from "./scope";
+import { type ComponentRef, forwardRef } from "react";
+import type { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderTrigger } from "../dropdownMenuRenderPrimitives";
+import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveTrigger {
   export type Element = ComponentRef<typeof DropdownMenuPrimitive.Trigger>;
-  export type Props = ComponentPropsWithoutRef<
-    typeof DropdownMenuPrimitive.Trigger
-  >;
+  export type Props = WithRenderPropProps<typeof DropdownMenuPrimitive.Trigger>;
 }
 
 export const ThreadListItemMorePrimitiveTrigger = forwardRef<
@@ -24,7 +24,7 @@ export const ThreadListItemMorePrimitiveTrigger = forwardRef<
   ) => {
     const scope = useDropdownMenuScope(__scopeThreadListItemMore);
 
-    return <DropdownMenuPrimitive.Trigger {...scope} {...rest} ref={ref} />;
+    return <DropdownMenuRenderTrigger {...scope} {...rest} ref={ref} />;
   },
 );
 

package/src/tests/DataRenderers.test.ts

@@ -1,52 +1,65 @@
 import { describe, it, expect } from "vitest";
-import type { DataMessagePartComponent, DataRenderersState } from "../types";
-
-/**
- * Tests for the DataRenderers state management logic.
- *
- * Since the DataRenderers resource relies on @assistant-ui/tap's resource system
- * (which requires fiber infrastructure), we test the core state logic directly.
- */
-describe("DataRenderers state logic", () => {
-  // Replicate the state management logic from DataRenderers.ts
-  const createState = (): {
-    state: DataRenderersState;
-    setDataUI: (name: string, render: DataMessagePartComponent) => () => void;
-  } => {
-    let state: DataRenderersState = { renderers: {} };
-
-    const setDataUI = (name: string, render: DataMessagePartComponent) => {
+import type {
+  DataMessagePartComponent,
+  DataRenderersState,
+} from "@assistant-ui/core/react";
+
+// The resource in DataRenderers.ts requires fiber infrastructure, so these
+// tests replicate the reducer directly and exercise it in isolation.
+
+type StateHarness = {
+  state: DataRenderersState;
+  setDataUI: (name: string, render: DataMessagePartComponent) => () => void;
+  setFallbackDataUI: (render: DataMessagePartComponent) => () => void;
+};
+
+const createState = (): StateHarness => {
+  let state: DataRenderersState = { renderers: {}, fallbacks: [] };
+
+  const setDataUI = (name: string, render: DataMessagePartComponent) => {
+    state = {
+      ...state,
+      renderers: {
+        ...state.renderers,
+        [name]: [...(state.renderers[name] ?? []), render],
+      },
+    };
+    return () => {
       state = {
         ...state,
         renderers: {
           ...state.renderers,
-          [name]: [...(state.renderers[name] ?? []), render],
+          [name]: state.renderers[name]?.filter((r) => r !== render) ?? [],
         },
       };
+    };
+  };
 
-      return () => {
-        state = {
-          ...state,
-          renderers: {
-            ...state.renderers,
-            [name]: state.renderers[name]?.filter((r) => r !== render) ?? [],
-          },
-        };
+  const setFallbackDataUI = (render: DataMessagePartComponent) => {
+    state = { ...state, fallbacks: [...state.fallbacks, render] };
+    return () => {
+      state = {
+        ...state,
+        fallbacks: state.fallbacks.filter((r) => r !== render),
       };
     };
+  };
 
-    return {
-      get state() {
-        return state;
-      },
-      setDataUI,
-    };
+  return {
+    get state() {
+      return state;
+    },
+    setDataUI,
+    setFallbackDataUI,
   };
+};
 
+describe("DataRenderers state logic", () => {
   describe("initial state", () => {
-    it("should start with empty renderers", () => {
+    it("should start with empty renderers and fallbacks", () => {
       const { state } = createState();
       expect(state.renderers).toEqual({});
+      expect(state.fallbacks).toEqual([]);
     });
   });
 
@@ -129,8 +142,78 @@ describe("DataRenderers state logic", () => {
   });
 });
 
+describe("DataRenderers fallback state logic", () => {
+  it("should register a fallback renderer", () => {
+    const s = createState();
+    const Fallback = (() => null) as unknown as DataMessagePartComponent;
+
+    s.setFallbackDataUI(Fallback);
+
+    expect(s.state.fallbacks).toHaveLength(1);
+    expect(s.state.fallbacks[0]).toBe(Fallback);
+  });
+
+  it("should unregister the fallback renderer on cleanup", () => {
+    const s = createState();
+    const Fallback = (() => null) as unknown as DataMessagePartComponent;
+
+    const unsub = s.setFallbackDataUI(Fallback);
+    expect(s.state.fallbacks).toHaveLength(1);
+
+    unsub();
+    expect(s.state.fallbacks).toHaveLength(0);
+  });
+
+  it("should stack fallbacks; the first registered takes priority", () => {
+    const s = createState();
+    const Fallback1 = (() => null) as unknown as DataMessagePartComponent;
+    const Fallback2 = (() => null) as unknown as DataMessagePartComponent;
+
+    s.setFallbackDataUI(Fallback1);
+    s.setFallbackDataUI(Fallback2);
+
+    expect(s.state.fallbacks).toEqual([Fallback1, Fallback2]);
+  });
+
+  it("should only unregister the specific fallback on cleanup", () => {
+    const s = createState();
+    const Fallback1 = (() => null) as unknown as DataMessagePartComponent;
+    const Fallback2 = (() => null) as unknown as DataMessagePartComponent;
+
+    const unsub1 = s.setFallbackDataUI(Fallback1);
+    s.setFallbackDataUI(Fallback2);
+
+    unsub1();
+    expect(s.state.fallbacks).toEqual([Fallback2]);
+  });
+
+  it("should restore the previous fallback when the active one unmounts", () => {
+    const s = createState();
+    const Fallback1 = (() => null) as unknown as DataMessagePartComponent;
+    const Fallback2 = (() => null) as unknown as DataMessagePartComponent;
+
+    s.setFallbackDataUI(Fallback1);
+    const unsub2 = s.setFallbackDataUI(Fallback2);
+
+    unsub2();
+    expect(s.state.fallbacks).toEqual([Fallback1]);
+  });
+
+  it("should not affect named renderers when setting fallback", () => {
+    const s = createState();
+    const Named = (() => null) as unknown as DataMessagePartComponent;
+    const Fallback = (() => null) as unknown as DataMessagePartComponent;
+
+    s.setDataUI("chart", Named);
+    s.setFallbackDataUI(Fallback);
+
+    expect(s.state.renderers["chart"]).toHaveLength(1);
+    expect(s.state.renderers["chart"]![0]).toBe(Named);
+    expect(s.state.fallbacks[0]).toBe(Fallback);
+  });
+});
+
 describe("Data part component resolution", () => {
-  // Replicate the component lookup logic from MessageParts.tsx
   const resolveDataComponent = (
     partName: string,
     inlineConfig?: {
@@ -138,16 +221,13 @@ describe("Data part component resolution", () => {
       Fallback?: DataMessagePartComponent;
     },
     globalRenderers?: Record<string, DataMessagePartComponent[]>,
+    globalFallbacks?: DataMessagePartComponent[],
   ): DataMessagePartComponent | undefined => {
+    const named = globalRenderers?.[partName]?.[0];
+    if (named) return named;
     const inlineFallback =
       inlineConfig?.by_name?.[partName] ?? inlineConfig?.Fallback;
-    const globalRenderer = globalRenderers?.[partName];
-
-    // Global takes priority (first element), then inline fallback
-    if (globalRenderer && globalRenderer.length > 0) {
-      return globalRenderer[0] ?? inlineFallback;
-    }
-    return inlineFallback;
+    return globalFallbacks?.[0] ?? inlineFallback;
   };
 
   it("should return undefined when no config provided", () => {
@@ -219,4 +299,57 @@ describe("Data part component resolution", () => {
     );
     expect(result).toBe(Fallback);
   });
+
+  // --- Global fallback stack resolution ---
+
+  it("should use global fallback when no name-specific renderer exists", () => {
+    const GlobalFallback = (() => null) as unknown as DataMessagePartComponent;
+
+    const result = resolveDataComponent("unknown-widget", undefined, {}, [
+      GlobalFallback,
+    ]);
+    expect(result).toBe(GlobalFallback);
+  });
+
+  it("should prefer global name-match over global fallback", () => {
+    const NamedComponent = (() => null) as unknown as DataMessagePartComponent;
+    const GlobalFallback = (() => null) as unknown as DataMessagePartComponent;
+
+    const result = resolveDataComponent(
+      "chart",
+      undefined,
+      { chart: [NamedComponent] },
+      [GlobalFallback],
+    );
+    expect(result).toBe(NamedComponent);
+  });
+
+  it("should prefer the first global fallback over inline Fallback", () => {
+    const InlineFallback = (() => null) as unknown as DataMessagePartComponent;
+    const GlobalFallback = (() => null) as unknown as DataMessagePartComponent;
+
+    const result = resolveDataComponent(
+      "unknown",
+      { Fallback: InlineFallback },
+      {},
+      [GlobalFallback],
+    );
+    expect(result).toBe(GlobalFallback);
+  });
+
+  it("should pick the first registered when multiple fallbacks are stacked", () => {
+    const First = (() => null) as unknown as DataMessagePartComponent;
+    const Second = (() => null) as unknown as DataMessagePartComponent;
+
+    const result = resolveDataComponent("anything", undefined, {}, [
+      First,
+      Second,
+    ]);
+    expect(result).toBe(First);
+  });
+
+  it("should return undefined when no fallbacks of any kind exist", () => {
+    const result = resolveDataComponent("unknown", undefined, {}, []);
+    expect(result).toBeUndefined();
+  });
 });