@assistant-ui/react 0.12.11 → 0.12.12

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -26,7 +26,7 @@ import type {
   ToolCallMessagePartProps,
   FileMessagePartComponent,
   ReasoningMessagePartComponent,
-} from "../../types/MessagePartComponentTypes";
+} from "../../types";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
 import type { MessagePartStatus } from "@assistant-ui/core";
 
@@ -337,8 +337,8 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     }
 
     default:
-      const unhandledType: never = type;
-      throw new Error(`Unknown message part type: ${unhandledType}`);
+      console.warn(`Unknown message part type: ${type}`);
+      return null;
   }
 };
 

package/src/primitives/thread/ThreadEmpty.ts

@@ -7,12 +7,13 @@ export namespace ThreadPrimitiveEmpty {
   export type Props = PropsWithChildren;
 }
 
+/**
+ * @deprecated Use `<AuiIf condition={(s) => s.thread.isEmpty} />` instead.
+ */
 export const ThreadPrimitiveEmpty: FC<ThreadPrimitiveEmpty.Props> = ({
   children,
 }) => {
-  const empty = useAuiState(
-    (s) => s.thread.messages.length === 0 && !s.thread.isLoading,
-  );
+  const empty = useAuiState((s) => s.thread.isEmpty);
   return empty ? children : null;
 };
 

package/src/primitives/thread/ThreadIf.ts

@@ -31,7 +31,7 @@ export namespace ThreadPrimitiveIf {
 }
 
 /**
- * @deprecated Use `<AuiIf condition={({ thread }) => ...} />` instead.
+ * @deprecated Use `<AuiIf condition={(s) => s.thread...} />` instead.
  */
 export const ThreadPrimitiveIf: FC<ThreadPrimitiveIf.Props> = ({
   children,

package/src/primitives/thread/ThreadMessages.tsx

@@ -1,220 +1,7 @@
 "use client";
 
-import type { ThreadMessage as ThreadMessageType } from "@assistant-ui/core";
-import { type ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { MessageByIndexProvider } from "../../context/providers";
-
-export namespace ThreadPrimitiveMessages {
-  export type Props = {
-    /**
-     * Component configuration for rendering different types of messages and composers.
-     *
-     * You can provide either:
-     * 1. A single `Message` component that handles all message types
-     * 2. Specific components for `UserMessage` and `AssistantMessage` (with optional `SystemMessage`)
-     *
-     * Optional edit composer components can be provided to customize the editing experience
-     * for different message types when users edit their messages.
-     */
-    components:
-      | {
-          /** Component used to render all message types */
-          Message: ComponentType;
-          /** Component used when editing any message type */
-          EditComposer?: ComponentType | undefined;
-          /** Component used when editing user messages specifically */
-          UserEditComposer?: ComponentType | undefined;
-          /** Component used when editing assistant messages specifically */
-          AssistantEditComposer?: ComponentType | undefined;
-          /** Component used when editing system messages specifically */
-          SystemEditComposer?: ComponentType | undefined;
-          /** Component used to render user messages specifically */
-          UserMessage?: ComponentType | undefined;
-          /** Component used to render assistant messages specifically */
-          AssistantMessage?: ComponentType | undefined;
-          /** Component used to render system messages specifically */
-          SystemMessage?: ComponentType | undefined;
-        }
-      | {
-          /** Component used to render all message types (fallback) */
-          Message?: ComponentType | undefined;
-          /** Component used when editing any message type */
-          EditComposer?: ComponentType | undefined;
-          /** Component used when editing user messages specifically */
-          UserEditComposer?: ComponentType | undefined;
-          /** Component used when editing assistant messages specifically */
-          AssistantEditComposer?: ComponentType | undefined;
-          /** Component used when editing system messages specifically */
-          SystemEditComposer?: ComponentType | undefined;
-          /** Component used to render user messages */
-          UserMessage: ComponentType;
-          /** Component used to render assistant messages */
-          AssistantMessage: ComponentType;
-          /** Component used to render system messages */
-          SystemMessage?: ComponentType | undefined;
-        };
-  };
-}
-
-const isComponentsSame = (
-  prev: ThreadPrimitiveMessages.Props["components"],
-  next: ThreadPrimitiveMessages.Props["components"],
-) => {
-  return (
-    prev.Message === next.Message &&
-    prev.EditComposer === next.EditComposer &&
-    prev.UserEditComposer === next.UserEditComposer &&
-    prev.AssistantEditComposer === next.AssistantEditComposer &&
-    prev.SystemEditComposer === next.SystemEditComposer &&
-    prev.UserMessage === next.UserMessage &&
-    prev.AssistantMessage === next.AssistantMessage &&
-    prev.SystemMessage === next.SystemMessage
-  );
-};
-
-const DEFAULT_SYSTEM_MESSAGE = () => null;
-
-const getComponent = (
-  components: ThreadPrimitiveMessages.Props["components"],
-  role: ThreadMessageType["role"],
-  isEditing: boolean,
-) => {
-  switch (role) {
-    case "user":
-      if (isEditing) {
-        return (
-          components.UserEditComposer ??
-          components.EditComposer ??
-          components.UserMessage ??
-          (components.Message as ComponentType)
-        );
-      } else {
-        return components.UserMessage ?? (components.Message as ComponentType);
-      }
-    case "assistant":
-      if (isEditing) {
-        return (
-          components.AssistantEditComposer ??
-          components.EditComposer ??
-          components.AssistantMessage ??
-          (components.Message as ComponentType)
-        );
-      } else {
-        return (
-          components.AssistantMessage ?? (components.Message as ComponentType)
-        );
-      }
-    case "system":
-      if (isEditing) {
-        return (
-          components.SystemEditComposer ??
-          components.EditComposer ??
-          components.SystemMessage ??
-          (components.Message as ComponentType)
-        );
-      } else {
-        return components.SystemMessage ?? DEFAULT_SYSTEM_MESSAGE;
-      }
-    default:
-      const _exhaustiveCheck: never = role;
-      throw new Error(`Unknown message role: ${_exhaustiveCheck}`);
-  }
-};
-
-type ThreadMessageComponentProps = {
-  components: ThreadPrimitiveMessages.Props["components"];
-};
-
-const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
-  components,
-}) => {
-  const role = useAuiState((s) => s.message.role);
-  const isEditing = useAuiState((s) => s.message.composer.isEditing);
-  const Component = getComponent(components, role, isEditing);
-
-  return <Component />;
-};
-export namespace ThreadPrimitiveMessageByIndex {
-  export type Props = {
-    index: number;
-    components: ThreadPrimitiveMessages.Props["components"];
-  };
-}
-
-/**
- * Renders a single message at the specified index in the current thread.
- *
- * This component provides message context for a specific message in the thread
- * and renders it using the provided component configuration.
- *
- * @example
- * ```tsx
- * <ThreadPrimitive.MessageByIndex
- *   index={0}
- *   components={{
- *     UserMessage: MyUserMessage,
- *     AssistantMessage: MyAssistantMessage
- *   }}
- * />
- * ```
- */
-export const ThreadPrimitiveMessageByIndex: FC<ThreadPrimitiveMessageByIndex.Props> =
-  memo(
-    ({ index, components }) => {
-      return (
-        <MessageByIndexProvider index={index}>
-          <ThreadMessageComponent components={components} />
-        </MessageByIndexProvider>
-      );
-    },
-    (prev, next) =>
-      prev.index === next.index &&
-      isComponentsSame(prev.components, next.components),
-  );
-
-ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
-
-/**
- * Renders all messages in the current thread using the provided component configuration.
- *
- * This component automatically renders all messages in the thread, providing the appropriate
- * message context for each message. It handles different message types (user, assistant, system)
- * and supports editing mode through the provided edit composer components.
- *
- * @example
- * ```tsx
- * <ThreadPrimitive.Messages
- *   components={{
- *     UserMessage: MyUserMessage,
- *     AssistantMessage: MyAssistantMessage,
- *     EditComposer: MyEditComposer
- *   }}
- * />
- * ```
- */
-export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
-  components,
-}) => {
-  const messagesLength = useAuiState((s) => s.thread.messages.length);
-
-  const messageElements = useMemo(() => {
-    if (messagesLength === 0) return null;
-    return Array.from({ length: messagesLength }, (_, index) => (
-      <ThreadPrimitiveMessageByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
-    ));
-  }, [messagesLength, components]);
-
-  return messageElements;
-};
-
-ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
-
-export const ThreadPrimitiveMessages = memo(
+export {
+  ThreadPrimitiveMessages,
   ThreadPrimitiveMessagesImpl,
-  (prev, next) => isComponentsSame(prev.components, next.components),
-);
+  ThreadPrimitiveMessageByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/thread/ThreadSuggestions.tsx

@@ -1,109 +1,7 @@
 "use client";
 
-import { type ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { SuggestionByIndexProvider } from "../../context/providers";
-
-export namespace ThreadPrimitiveSuggestions {
-  export type Props = {
-    /**
-     * Component to render for each suggestion.
-     */
-    components: {
-      /** Component used to render each suggestion */
-      Suggestion: ComponentType;
-    };
-  };
-}
-
-type SuggestionComponentProps = {
-  components: ThreadPrimitiveSuggestions.Props["components"];
-};
-
-const SuggestionComponent: FC<SuggestionComponentProps> = ({ components }) => {
-  const Component = components.Suggestion;
-  return <Component />;
-};
-
-export namespace ThreadPrimitiveSuggestionByIndex {
-  export type Props = {
-    index: number;
-    components: ThreadPrimitiveSuggestions.Props["components"];
-  };
-}
-
-/**
- * Renders a single suggestion at the specified index.
- *
- * This component provides suggestion context for a specific suggestion
- * and renders it using the provided component configuration.
- *
- * @example
- * ```tsx
- * <ThreadPrimitive.SuggestionByIndex
- *   index={0}
- *   components={{
- *     Suggestion: MySuggestion
- *   }}
- * />
- * ```
- */
-export const ThreadPrimitiveSuggestionByIndex: FC<ThreadPrimitiveSuggestionByIndex.Props> =
-  memo(
-    ({ index, components }) => {
-      return (
-        <SuggestionByIndexProvider index={index}>
-          <SuggestionComponent components={components} />
-        </SuggestionByIndexProvider>
-      );
-    },
-    (prev, next) =>
-      prev.index === next.index &&
-      prev.components.Suggestion === next.components.Suggestion,
-  );
-
-ThreadPrimitiveSuggestionByIndex.displayName =
-  "ThreadPrimitive.SuggestionByIndex";
-
-/**
- * Renders all suggestions using the provided component configuration.
- *
- * This component automatically renders all suggestions from the suggestions scope,
- * providing the appropriate suggestion context for each one.
- *
- * @example
- * ```tsx
- * <ThreadPrimitive.Suggestions
- *   components={{
- *     Suggestion: MySuggestion
- *   }}
- * />
- * ```
- */
-export const ThreadPrimitiveSuggestionsImpl: FC<
-  ThreadPrimitiveSuggestions.Props
-> = ({ components }) => {
-  const suggestionsLength = useAuiState(
-    (s) => s.suggestions.suggestions.length,
-  );
-
-  const suggestionElements = useMemo(() => {
-    if (suggestionsLength === 0) return null;
-    return Array.from({ length: suggestionsLength }, (_, index) => (
-      <ThreadPrimitiveSuggestionByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
-    ));
-  }, [suggestionsLength, components]);
-
-  return suggestionElements;
-};
-
-ThreadPrimitiveSuggestionsImpl.displayName = "ThreadPrimitive.Suggestions";
-
-export const ThreadPrimitiveSuggestions = memo(
+export {
+  ThreadPrimitiveSuggestions,
   ThreadPrimitiveSuggestionsImpl,
-  (prev, next) => prev.components.Suggestion === next.components.Suggestion,
-);
+  ThreadPrimitiveSuggestionByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/thread/ThreadViewportSlack.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "radix-ui";
 import {
   createContext,
   type FC,
@@ -108,7 +108,7 @@ export const ThreadPrimitiveViewportSlack: FC<ThreadViewportSlackProps> = ({
 
   return (
     <SlackNestingContext.Provider value={true}>
-      <Slot ref={ref}>{children}</Slot>
+      <Slot.Root ref={ref}>{children}</Slot.Root>
     </SlackNestingContext.Provider>
   );
 };

package/src/primitives/threadList/ThreadListItems.tsx

@@ -1,81 +1,6 @@
 "use client";
 
-import { ComponentType, FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { ThreadListItemByIndexProvider } from "../../context/providers";
-
-export namespace ThreadListPrimitiveItems {
-  export type Props = {
-    archived?: boolean | undefined;
-    components: {
-      ThreadListItem: ComponentType;
-    };
-  };
-}
-
-export namespace ThreadListPrimitiveItemByIndex {
-  export type Props = {
-    index: number;
-    archived?: boolean | undefined;
-    components: ThreadListPrimitiveItems.Props["components"];
-  };
-}
-
-/**
- * Renders a single thread list item at the specified index.
- *
- * This component provides direct access to render a specific thread
- * from the thread list using the provided component configuration.
- *
- * @example
- * ```tsx
- * <ThreadListPrimitive.ItemByIndex
- *   index={0}
- *   components={{
- *     ThreadListItem: MyThreadListItem
- *   }}
- * />
- * ```
- */
-export const ThreadListPrimitiveItemByIndex: FC<ThreadListPrimitiveItemByIndex.Props> =
-  memo(
-    ({ index, archived = false, components }) => {
-      const ThreadListItemComponent = components.ThreadListItem;
-
-      return (
-        <ThreadListItemByIndexProvider index={index} archived={archived}>
-          <ThreadListItemComponent />
-        </ThreadListItemByIndexProvider>
-      );
-    },
-    (prev, next) =>
-      prev.index === next.index &&
-      prev.archived === next.archived &&
-      prev.components.ThreadListItem === next.components.ThreadListItem,
-  );
-
-ThreadListPrimitiveItemByIndex.displayName = "ThreadListPrimitive.ItemByIndex";
-
-export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
-  archived = false,
-  components,
-}) => {
-  const contentLength = useAuiState((s) =>
-    archived ? s.threads.archivedThreadIds.length : s.threads.threadIds.length,
-  );
-
-  const listElements = useMemo(() => {
-    return Array.from({ length: contentLength }, (_, index) => (
-      <ThreadListPrimitiveItemByIndex
-        key={index}
-        index={index}
-        archived={archived}
-        components={components}
-      />
-    ));
-  }, [contentLength, archived, components]);
-
-  return listElements;
-};
-
-ThreadListPrimitiveItems.displayName = "ThreadListPrimitive.Items";
+export {
+  ThreadListPrimitiveItems,
+  ThreadListPrimitiveItemByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/threadListItem/ThreadListItemTitle.test.tsx

@@ -8,9 +8,13 @@ type UseAuiStateSelector = Parameters<
   typeof import("@assistant-ui/store")["useAuiState"]
 >[0];
 
-vi.mock("@assistant-ui/store", () => ({
-  useAuiState: (selector: UseAuiStateSelector) => mockUseAuiState(selector),
-}));
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAuiState: (selector: UseAuiStateSelector) => mockUseAuiState(selector),
+  };
+});
 
 const renderTitle = (
   title: string | undefined,

package/src/primitives/threadListItem/ThreadListItemTitle.tsx

@@ -1,19 +1,3 @@
 "use client";
 
-import type { FC, ReactNode } from "react";
-import { useAuiState } from "@assistant-ui/store";
-
-export namespace ThreadListItemPrimitiveTitle {
-  export type Props = {
-    fallback?: ReactNode;
-  };
-}
-
-export const ThreadListItemPrimitiveTitle: FC<
-  ThreadListItemPrimitiveTitle.Props
-> = ({ fallback }) => {
-  const title = useAuiState((s) => s.threadListItem.title);
-  return <>{title || fallback}</>;
-};
-
-ThreadListItemPrimitiveTitle.displayName = "ThreadListItemPrimitive.Title";
+export { ThreadListItemPrimitiveTitle } from "@assistant-ui/core/react";

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.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 ThreadListItemMorePrimitiveContent {

package/src/primitives/threadListItemMore/ThreadListItemMoreItem.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 ThreadListItemMorePrimitiveItem {

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.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 ThreadListItemMorePrimitiveRoot {

package/src/primitives/threadListItemMore/ThreadListItemMoreSeparator.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 ThreadListItemMorePrimitiveSeparator {

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.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 ThreadListItemMorePrimitiveTrigger {

package/src/primitives/threadListItemMore/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<