@assistant-ui/react 0.12.10 → 0.12.12

package/src/primitives/message/MessagePartsGrouped.tsx

@@ -16,6 +16,8 @@ import { MessagePartPrimitiveText } from "../messagePart/MessagePartText";
 import { MessagePartPrimitiveImage } from "../messagePart/MessagePartImage";
 import type {
   Unstable_AudioMessagePartComponent,
+  DataMessagePartComponent,
+  DataMessagePartProps,
   EmptyMessagePartComponent,
   TextMessagePartComponent,
   ImageMessagePartComponent,
@@ -24,9 +26,9 @@ import type {
   ToolCallMessagePartProps,
   FileMessagePartComponent,
   ReasoningMessagePartComponent,
-} from "../../types/MessagePartComponentTypes";
+} from "../../types";
 import { MessagePartPrimitiveInProgress } from "../messagePart/MessagePartInProgress";
-import { MessagePartStatus } from "../../types/AssistantTypes";
+import type { MessagePartStatus } from "@assistant-ui/core";
 
 type MessagePartGroup = {
   groupKey: string | undefined;
@@ -153,6 +155,17 @@ export namespace MessagePrimitiveUnstable_PartsGrouped {
           File?: FileMessagePartComponent | undefined;
           /** Component for rendering audio content (experimental) */
           Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
+          /** Configuration for data part rendering */
+          data?:
+            | {
+                /** Map data event names to specific components */
+                by_name?:
+                  | Record<string, DataMessagePartComponent | undefined>
+                  | undefined;
+                /** Fallback component for unmatched data events */
+                Fallback?: DataMessagePartComponent | undefined;
+              }
+            | undefined;
           /** Configuration for tool call rendering */
           tools?:
             | {
@@ -228,6 +241,21 @@ const ToolUIDisplay = ({
   return <Render {...props} />;
 };
 
+const DataUIDisplay = ({
+  Fallback,
+  ...props
+}: {
+  Fallback: DataMessagePartComponent | undefined;
+} & DataMessagePartProps) => {
+  const Render = useAuiState((s) => {
+    const Render = s.dataRenderers.renderers[props.name] ?? Fallback;
+    if (Array.isArray(Render)) return Render[0] ?? Fallback;
+    return Render;
+  });
+  if (!Render) return null;
+  return <Render {...props} />;
+};
+
 const defaultComponents = {
   Text: () => (
     <p style={{ whiteSpace: "pre-line" }}>
@@ -258,6 +286,7 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     File = defaultComponents.File,
     Unstable_Audio: Audio = defaultComponents.Unstable_Audio,
     tools = {},
+    data,
   } = {},
 }) => {
   const aui = useAui();
@@ -302,12 +331,14 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
     case "audio":
       return <Audio {...part} />;
 
-    case "data":
-      return null;
+    case "data": {
+      const Data = data?.by_name?.[part.name] ?? data?.Fallback;
+      return <DataUIDisplay {...part} Fallback={Data} />;
+    }
 
     default:
-      const unhandledType: never = type;
-      throw new Error(`Unknown message part type: ${unhandledType}`);
+      console.warn(`Unknown message part type: ${type}`);
+      return null;
   }
 };
 
@@ -335,6 +366,7 @@ const MessagePart = memo(
     prev.components?.File === next.components?.File &&
     prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
     prev.components?.tools === next.components?.tools &&
+    prev.components?.data === next.components?.data &&
     prev.components?.Group === next.components?.Group,
 );
 

package/src/primitives/messagePart/{useMessagePartData.tsx → useMessagePartData.ts}

@@ -1,7 +1,7 @@
 "use client";
 
+import type { DataMessagePart } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { DataMessagePart } from "../../types";
 
 export const useMessagePartData = <T = any>(name?: string) => {
   const part = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartFile.tsx → useMessagePartFile.ts}

@@ -1,8 +1,7 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type { FileMessagePart, MessagePartState } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { FileMessagePart } from "../../types";
 
 export const useMessagePartFile = () => {
   const file = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartImage.tsx → useMessagePartImage.ts}

@@ -1,8 +1,7 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type { ImageMessagePart, MessagePartState } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { ImageMessagePart } from "../../types";
 
 export const useMessagePartImage = () => {
   const image = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartReasoning.tsx → useMessagePartReasoning.ts}

@@ -1,8 +1,10 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type {
+  ReasoningMessagePart,
+  MessagePartState,
+} from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { ReasoningMessagePart } from "../../types";
 
 export const useMessagePartReasoning = () => {
   const text = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartSource.tsx → useMessagePartSource.ts}

@@ -1,8 +1,7 @@
 "use client";
 
-import type { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type { SourceMessagePart, MessagePartState } from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { SourceMessagePart } from "../../types";
 
 export const useMessagePartSource = () => {
   const source = useAuiState((s) => {

package/src/primitives/messagePart/{useMessagePartText.tsx → useMessagePartText.ts}

@@ -1,8 +1,11 @@
 "use client";
 
-import { MessagePartState } from "../../legacy-runtime/runtime/MessagePartRuntime";
+import type {
+  TextMessagePart,
+  ReasoningMessagePart,
+  MessagePartState,
+} from "@assistant-ui/core";
 import { useAuiState } from "@assistant-ui/store";
-import { TextMessagePart, ReasoningMessagePart } from "../../types";
 
 export const useMessagePartText = () => {
   const text = useAuiState((s) => {

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -40,7 +40,7 @@ export const SelectionToolbarPrimitiveQuote = forwardRef<
   const handleClick = useCallback(() => {
     if (!info) return;
 
-    aui.thread().composer.setQuote({
+    aui.thread().composer().setQuote({
       text: info.text,
       messageId: info.messageId,
     });

package/src/primitives/thread/{ThreadEmpty.tsx → 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.tsx → 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 ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { MessageByIndexProvider } from "../../context/providers";
-import { ThreadMessage as ThreadMessageType } from "../../types";
-
-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";