@assistant-ui/react 0.12.10 → 0.12.12

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.tsx → 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.tsx → 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 { ComponentType, type FC, memo, useMemo } from "react";
-import { Attachment } from "../../types";
-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

@@ -0,0 +1,4 @@
+"use client";
+
+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(

package/src/primitives/index.ts

@@ -24,3 +24,4 @@ export { useMessagePartData } from "./messagePart/useMessagePartData";
 export { useThreadViewportAutoScroll } from "./thread/useThreadViewportAutoScroll";
 export { useScrollLock } from "./reasoning";
 export { useMessageQuote } from "../hooks/useMessageQuote";
+export { useMessageTiming } from "../hooks/useMessageTiming";

package/src/primitives/message/MessageAttachments.tsx

@@ -1,115 +1,6 @@
 "use client";
 
-import { ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { MessageAttachmentByIndexProvider } from "../../context/providers";
-import { CompleteAttachment } from "../../types";
-
-export namespace MessagePrimitiveAttachments {
-  export type Props = {
-    components:
-      | {
-          Image?: ComponentType | undefined;
-          Document?: ComponentType | undefined;
-          File?: ComponentType | undefined;
-          Attachment?: ComponentType | undefined;
-        }
-      | undefined;
-  };
-}
-
-const getComponent = (
-  components: MessagePrimitiveAttachments.Props["components"],
-  attachment: CompleteAttachment,
-) => {
-  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: MessagePrimitiveAttachments.Props["components"];
-}> = ({ components }) => {
-  const attachment = useAuiState((s) => s.attachment);
-  if (!attachment) return null;
-
-  const Component = getComponent(components, attachment as CompleteAttachment);
-  if (!Component) return null;
-  return <Component />;
-};
-
-export namespace MessagePrimitiveAttachmentByIndex {
-  export type Props = {
-    index: number;
-    components?: MessagePrimitiveAttachments.Props["components"];
-  };
-}
-
-/**
- * Renders a single attachment at the specified index within the current message.
- *
- * This component provides direct access to render a specific attachment
- * from the message's attachment list using the provided component configuration.
- *
- * @example
- * ```tsx
- * <MessagePrimitive.AttachmentByIndex
- *   index={0}
- *   components={{
- *     Image: MyImageAttachment,
- *     Document: MyDocumentAttachment
- *   }}
- * />
- * ```
- */
-export const MessagePrimitiveAttachmentByIndex: FC<MessagePrimitiveAttachmentByIndex.Props> =
-  memo(
-    ({ index, components }) => {
-      return (
-        <MessageAttachmentByIndexProvider index={index}>
-          <AttachmentComponent components={components} />
-        </MessageAttachmentByIndexProvider>
-      );
-    },
-    (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,
-  );
-
-MessagePrimitiveAttachmentByIndex.displayName =
-  "MessagePrimitive.AttachmentByIndex";
-
-export const MessagePrimitiveAttachments: FC<
-  MessagePrimitiveAttachments.Props
-> = ({ components }) => {
-  const attachmentsCount = useAuiState((s) => {
-    if (s.message.role !== "user") return 0;
-    return s.message.attachments.length;
-  });
-
-  const attachmentElements = useMemo(() => {
-    return Array.from({ length: attachmentsCount }, (_, index) => (
-      <MessagePrimitiveAttachmentByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
-    ));
-  }, [attachmentsCount, components]);
-
-  return attachmentElements;
-};
-
-MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";
+export {
+  MessagePrimitiveAttachments,
+  MessagePrimitiveAttachmentByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/message/{MessageIf.tsx → MessageIf.ts}

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