@assistant-ui/react 0.10.42 → 0.10.43

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";