@assistant-ui/react 0.10.41 → 0.10.43

package/package.json

@@ -28,7 +28,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.10.41",
+  "version": "0.10.43",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -48,22 +48,22 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@radix-ui/primitive": "^1.1.2",
+    "@radix-ui/primitive": "^1.1.3",
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-context": "^1.1.2",
-    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-primitive": "^2.1.3",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-escape-keydown": "^1.1.1",
     "@standard-schema/spec": "^1.0.0",
-    "assistant-stream": "^0.2.22",
+    "assistant-stream": "^0.2.23",
     "json-schema": "^0.4.0",
     "nanoid": "5.1.5",
     "react-textarea-autosize": "^8.5.9",
-    "zod": "^4.0.14",
+    "zod": "^4.0.17",
     "zustand": "^5.0.7",
-    "assistant-cloud": "0.1.0"
+    "assistant-cloud": "0.1.1"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -83,10 +83,10 @@
     "@stryker-mutator/core": "^9.0.1",
     "@stryker-mutator/vitest-runner": "^9.0.1",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^24.1.0",
+    "@types/node": "^24.3.0",
     "eslint": "^9",
-    "eslint-config-next": "15.4.5",
-    "tsx": "^4.20.3",
+    "eslint-config-next": "15.4.6",
+    "tsx": "^4.20.4",
     "vitest": "^3.2.4",
     "@assistant-ui/x-buildutils": "0.0.1"
   },

package/src/primitives/composer/ComposerAttachments.tsx

@@ -48,31 +48,55 @@ const AttachmentComponent: FC<{
   return <Component />;
 };
 
-const ComposerAttachmentImpl: FC<
-  ComposerPrimitiveAttachments.Props & { attachmentIndex: number }
-> = ({ components, attachmentIndex }) => {
-  const composerRuntime = useComposerRuntime();
-  const runtime = useMemo(
-    () => composerRuntime.getAttachmentByIndex(attachmentIndex),
-    [composerRuntime, attachmentIndex],
-  );
+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 }) => {
+      const composerRuntime = useComposerRuntime();
+      const runtime = useMemo(
+        () => composerRuntime.getAttachmentByIndex(index),
+        [composerRuntime, index],
+      );
 
-  return (
-    <AttachmentRuntimeProvider runtime={runtime}>
-      <AttachmentComponent components={components} />
-    </AttachmentRuntimeProvider>
+      return (
+        <AttachmentRuntimeProvider runtime={runtime}>
+          <AttachmentComponent components={components} />
+        </AttachmentRuntimeProvider>
+      );
+    },
+    (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,
   );
-};
 
-const ComposerAttachment = memo(
-  ComposerAttachmentImpl,
-  (prev, next) =>
-    prev.attachmentIndex === next.attachmentIndex &&
-    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
@@ -81,9 +105,9 @@ export const ComposerPrimitiveAttachments: FC<
 
   const attachmentElements = useMemo(() => {
     return Array.from({ length: attachmentsCount }, (_, index) => (
-      <ComposerAttachment
+      <ComposerPrimitiveAttachmentByIndex
         key={index}
-        attachmentIndex={index}
+        index={index}
         components={components}
       />
     ));

package/src/primitives/composer/index.ts

@@ -4,4 +4,5 @@ export { ComposerPrimitiveSend as Send } from "./ComposerSend";
 export { ComposerPrimitiveCancel as Cancel } from "./ComposerCancel";
 export { ComposerPrimitiveAddAttachment as AddAttachment } from "./ComposerAddAttachment";
 export { ComposerPrimitiveAttachments as Attachments } from "./ComposerAttachments";
+export { ComposerPrimitiveAttachmentByIndex as AttachmentByIndex } from "./ComposerAttachments";
 export { ComposerPrimitiveIf as If } from "./ComposerIf";

package/src/primitives/message/MessageAttachments.tsx

@@ -46,31 +46,55 @@ const AttachmentComponent: FC<{
   return <Component />;
 };
 
-const MessageAttachmentImpl: FC<
-  MessagePrimitiveAttachments.Props & { attachmentIndex: number }
-> = ({ components, attachmentIndex }) => {
-  const messageRuntime = useMessageRuntime();
-  const runtime = useMemo(
-    () => messageRuntime.getAttachmentByIndex(attachmentIndex),
-    [messageRuntime, attachmentIndex],
-  );
+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 }) => {
+      const messageRuntime = useMessageRuntime();
+      const runtime = useMemo(
+        () => messageRuntime.getAttachmentByIndex(index),
+        [messageRuntime, index],
+      );
 
-  return (
-    <AttachmentRuntimeProvider runtime={runtime}>
-      <AttachmentComponent components={components} />
-    </AttachmentRuntimeProvider>
+      return (
+        <AttachmentRuntimeProvider runtime={runtime}>
+          <AttachmentComponent components={components} />
+        </AttachmentRuntimeProvider>
+      );
+    },
+    (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,
   );
-};
 
-const MessageAttachment = memo(
-  MessageAttachmentImpl,
-  (prev, next) =>
-    prev.attachmentIndex === next.attachmentIndex &&
-    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
@@ -82,9 +106,9 @@ export const MessagePrimitiveAttachments: FC<
 
   const attachmentElements = useMemo(() => {
     return Array.from({ length: attachmentsCount }, (_, index) => (
-      <MessageAttachment
+      <MessagePrimitiveAttachmentByIndex
         key={index}
-        attachmentIndex={index}
+        index={index}
         components={components}
       />
     ));

package/src/primitives/message/MessageParts.tsx

@@ -279,38 +279,58 @@ const MessagePartComponent: FC<MessagePartComponentProps> = ({
   }
 };
 
-type MessagePartProps = {
-  partIndex: number;
-  components: MessagePrimitiveParts.Props["components"];
-};
-
-const MessagePartImpl: FC<MessagePartProps> = ({ partIndex, components }) => {
-  const messageRuntime = useMessageRuntime();
-  const runtime = useMemo(
-    () => messageRuntime.getMessagePartByIndex(partIndex),
-    [messageRuntime, partIndex],
-  );
+export namespace MessagePrimitivePartByIndex {
+  export type Props = {
+    index: number;
+    components: MessagePrimitiveParts.Props["components"];
+  };
+}
 
-  return (
-    <MessagePartRuntimeProvider runtime={runtime}>
-      <MessagePartComponent components={components} />
-    </MessagePartRuntimeProvider>
+/**
+ * Renders a single message part at the specified index.
+ *
+ * This component provides direct access to render a specific message part
+ * within the current message context, using the provided component configuration.
+ *
+ * @example
+ * ```tsx
+ * <MessagePrimitive.PartByIndex
+ *   index={0}
+ *   components={{
+ *     Text: MyTextComponent,
+ *     Image: MyImageComponent
+ *   }}
+ * />
+ * ```
+ */
+export const MessagePrimitivePartByIndex: FC<MessagePrimitivePartByIndex.Props> =
+  memo(
+    ({ index, components }) => {
+      const messageRuntime = useMessageRuntime();
+      const runtime = useMemo(
+        () => messageRuntime.getMessagePartByIndex(index),
+        [messageRuntime, index],
+      );
+
+      return (
+        <MessagePartRuntimeProvider runtime={runtime}>
+          <MessagePartComponent components={components} />
+        </MessagePartRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.components?.Text === next.components?.Text &&
+      prev.components?.Reasoning === next.components?.Reasoning &&
+      prev.components?.Source === next.components?.Source &&
+      prev.components?.Image === next.components?.Image &&
+      prev.components?.File === next.components?.File &&
+      prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
+      prev.components?.tools === next.components?.tools &&
+      prev.components?.ToolGroup === next.components?.ToolGroup,
   );
-};
 
-const MessagePart = memo(
-  MessagePartImpl,
-  (prev, next) =>
-    prev.partIndex === next.partIndex &&
-    prev.components?.Text === next.components?.Text &&
-    prev.components?.Reasoning === next.components?.Reasoning &&
-    prev.components?.Source === next.components?.Source &&
-    prev.components?.Image === next.components?.Image &&
-    prev.components?.File === next.components?.File &&
-    prev.components?.Unstable_Audio === next.components?.Unstable_Audio &&
-    prev.components?.tools === next.components?.tools &&
-    prev.components?.ToolGroup === next.components?.ToolGroup,
-);
+MessagePrimitivePartByIndex.displayName = "MessagePrimitive.PartByIndex";
 
 const COMPLETE_STATUS: MessagePartStatus = Object.freeze({
   type: "complete",
@@ -386,9 +406,9 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
     return messageRanges.map((range) => {
       if (range.type === "single") {
         return (
-          <MessagePart
+          <MessagePrimitivePartByIndex
             key={range.index}
-            partIndex={range.index}
+            index={range.index}
             components={components}
           />
         );
@@ -404,9 +424,9 @@ export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
             {Array.from(
               { length: range.endIndex - range.startIndex + 1 },
               (_, i) => (
-                <MessagePart
+                <MessagePrimitivePartByIndex
                   key={i}
-                  partIndex={range.startIndex + i}
+                  index={range.startIndex + i}
                   components={components}
                 />
               ),

package/src/primitives/message/index.ts

@@ -1,8 +1,10 @@
 export { MessagePrimitiveRoot as Root } from "./MessageRoot";
 export { MessagePrimitiveParts as Parts } from "./MessageParts";
+export { MessagePrimitivePartByIndex as PartByIndex } from "./MessageParts";
 export { MessagePrimitiveParts as Content } from "./MessageParts";
 export { MessagePrimitiveIf as If } from "./MessageIf";
 export { MessagePrimitiveAttachments as Attachments } from "./MessageAttachments";
+export { MessagePrimitiveAttachmentByIndex as AttachmentByIndex } from "./MessageAttachments";
 export { MessagePrimitiveError as Error } from "./MessageError";
 export {
   MessagePrimitiveUnstable_PartsGrouped as Unstable_PartsGrouped,

package/src/primitives/thread/ThreadMessages.tsx

@@ -136,35 +136,51 @@ const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
 
   return <Component />;
 };
+export namespace ThreadPrimitiveMessageByIndex {
+  export type Props = {
+    index: number;
+    components: ThreadPrimitiveMessages.Props["components"];
+  };
+}
 
-type ThreadMessageProps = {
-  messageIndex: number;
-  components: ThreadPrimitiveMessages.Props["components"];
-};
-
-const ThreadMessageImpl: FC<ThreadMessageProps> = ({
-  messageIndex,
-  components,
-}) => {
-  const threadRuntime = useThreadRuntime();
-  const runtime = useMemo(
-    () => threadRuntime.getMesssageByIndex(messageIndex),
-    [threadRuntime, messageIndex],
-  );
-
-  return (
-    <MessageRuntimeProvider runtime={runtime}>
-      <ThreadMessageComponent components={components} />
-    </MessageRuntimeProvider>
+/**
+ * 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 }) => {
+      const threadRuntime = useThreadRuntime();
+      const runtime = useMemo(
+        () => threadRuntime.getMesssageByIndex(index),
+        [threadRuntime, index],
+      );
+
+      return (
+        <MessageRuntimeProvider runtime={runtime}>
+          <ThreadMessageComponent components={components} />
+        </MessageRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      isComponentsSame(prev.components, next.components),
   );
-};
 
-const ThreadMessage = memo(
-  ThreadMessageImpl,
-  (prev, next) =>
-    prev.messageIndex === next.messageIndex &&
-    isComponentsSame(prev.components, next.components),
-);
+ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
 
 /**
  * Renders all messages in the current thread using the provided component configuration.
@@ -192,7 +208,11 @@ export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
   const messageElements = useMemo(() => {
     if (messagesLength === 0) return null;
     return Array.from({ length: messagesLength }, (_, index) => (
-      <ThreadMessage key={index} messageIndex={index} components={components} />
+      <ThreadPrimitiveMessageByIndex
+        key={index}
+        index={index}
+        components={components}
+      />
     ));
   }, [messagesLength, components]);
 

package/src/primitives/thread/index.ts

@@ -3,5 +3,6 @@ export { ThreadPrimitiveEmpty as Empty } from "./ThreadEmpty";
 export { ThreadPrimitiveIf as If } from "./ThreadIf";
 export { ThreadPrimitiveViewport as Viewport } from "./ThreadViewport";
 export { ThreadPrimitiveMessages as Messages } from "./ThreadMessages";
+export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "./ThreadMessages";
 export { ThreadPrimitiveScrollToBottom as ScrollToBottom } from "./ThreadScrollToBottom";
 export { ThreadPrimitiveSuggestion as Suggestion } from "./ThreadSuggestion";

package/src/primitives/threadList/ThreadListItems.tsx

@@ -13,42 +13,57 @@ export namespace ThreadListPrimitiveItems {
   };
 }
 
-type ThreadListItemProps = {
-  partIndex: number;
-  archived: boolean;
-  components: ThreadListPrimitiveItems.Props["components"];
-};
+export namespace ThreadListPrimitiveItemByIndex {
+  export type Props = {
+    index: number;
+    archived?: boolean | undefined;
+    components: ThreadListPrimitiveItems.Props["components"];
+  };
+}
 
-const ThreadListItemImpl: FC<ThreadListItemProps> = ({
-  partIndex,
-  archived,
-  components,
-}) => {
-  const assistantRuntime = useAssistantRuntime();
-  const runtime = useMemo(
-    () =>
-      archived
-        ? assistantRuntime.threads.getArchivedItemByIndex(partIndex)
-        : assistantRuntime.threads.getItemByIndex(partIndex),
-    [assistantRuntime, partIndex, archived],
-  );
+/**
+ * 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 assistantRuntime = useAssistantRuntime();
+      const runtime = useMemo(
+        () =>
+          archived
+            ? assistantRuntime.threads.getArchivedItemByIndex(index)
+            : assistantRuntime.threads.getItemByIndex(index),
+        [assistantRuntime, index, archived],
+      );
 
-  const ThreadListItemComponent = components.ThreadListItem;
+      const ThreadListItemComponent = components.ThreadListItem;
 
-  return (
-    <ThreadListItemRuntimeProvider runtime={runtime}>
-      <ThreadListItemComponent />
-    </ThreadListItemRuntimeProvider>
+      return (
+        <ThreadListItemRuntimeProvider runtime={runtime}>
+          <ThreadListItemComponent />
+        </ThreadListItemRuntimeProvider>
+      );
+    },
+    (prev, next) =>
+      prev.index === next.index &&
+      prev.archived === next.archived &&
+      prev.components.ThreadListItem === next.components.ThreadListItem,
   );
-};
 
-const ThreadListItem = memo(
-  ThreadListItemImpl,
-  (prev, next) =>
-    prev.partIndex === next.partIndex &&
-    prev.archived === next.archived &&
-    prev.components.ThreadListItem === next.components.ThreadListItem,
-);
+ThreadListPrimitiveItemByIndex.displayName = "ThreadListPrimitive.ItemByIndex";
 
 export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
   archived = false,
@@ -60,9 +75,9 @@ export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
 
   const listElements = useMemo(() => {
     return Array.from({ length: contentLength }, (_, index) => (
-      <ThreadListItem
+      <ThreadListPrimitiveItemByIndex
         key={index}
-        partIndex={index}
+        index={index}
         archived={archived}
         components={components}
       />

package/src/primitives/threadList/index.ts

@@ -1,3 +1,4 @@
 export { ThreadListPrimitiveNew as New } from "./ThreadListNew";
 export { ThreadListPrimitiveItems as Items } from "./ThreadListItems";
+export { ThreadListPrimitiveItemByIndex as ItemByIndex } from "./ThreadListItems";
 export { ThreadListPrimitiveRoot as Root } from "./ThreadListRoot";