@assistant-ui/core 0.1.5 → 0.1.7

package/src/react/primitives/thread/ThreadMessages.tsx

@@ -1,63 +1,69 @@
-import type { ThreadMessage as ThreadMessageType } from "../../../types";
-import { type ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { MessageByIndexProvider } from "../../providers";
+import {
+  type ComponentType,
+  type FC,
+  type ReactNode,
+  memo,
+  useMemo,
+} from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { MessageByIndexProvider } from "../../providers/MessageByIndexProvider";
+import { MessageState } from "../../../store";
+
+type MessagesComponentConfig =
+  | {
+      /** 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;
+    };
 
 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;
-        };
-  };
+  export type Props =
+    | {
+        /** @deprecated Use the children render function instead. */
+        components: MessagesComponentConfig;
+        children?: never;
+      }
+    | {
+        /** Render function called for each message. Receives the message. */
+        children: (value: { message: MessageState }) => ReactNode;
+        components?: never;
+      };
 }
 
 const isComponentsSame = (
-  prev: ThreadPrimitiveMessages.Props["components"],
-  next: ThreadPrimitiveMessages.Props["components"],
+  prev: MessagesComponentConfig,
+  next: MessagesComponentConfig,
 ) => {
   return (
     prev.Message === next.Message &&
@@ -74,8 +80,8 @@ const isComponentsSame = (
 const DEFAULT_SYSTEM_MESSAGE = () => null;
 
 const getComponent = (
-  components: ThreadPrimitiveMessages.Props["components"],
-  role: ThreadMessageType["role"],
+  components: MessagesComponentConfig,
+  role: MessageState["role"],
   isEditing: boolean,
 ) => {
   switch (role) {
@@ -125,7 +131,7 @@ const getComponent = (
 };
 
 type ThreadMessageComponentProps = {
-  components: ThreadPrimitiveMessages.Props["components"];
+  components: MessagesComponentConfig;
 };
 
 const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
@@ -140,26 +146,12 @@ const ThreadMessageComponent: FC<ThreadMessageComponentProps> = ({
 export namespace ThreadPrimitiveMessageByIndex {
   export type Props = {
     index: number;
-    components: ThreadPrimitiveMessages.Props["components"];
+    components: MessagesComponentConfig;
   };
 }
 
 /**
  * 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(
@@ -177,46 +169,68 @@ export const ThreadPrimitiveMessageByIndex: FC<ThreadPrimitiveMessageByIndex.Pro
 
 ThreadPrimitiveMessageByIndex.displayName = "ThreadPrimitive.MessageByIndex";
 
+const ThreadPrimitiveMessagesInner: FC<{
+  children: (value: { message: MessageState }) => ReactNode;
+}> = ({ children }) => {
+  const messagesLength = useAuiState((s) => s.thread.messages.length);
+
+  return useMemo(() => {
+    if (messagesLength === 0) return null;
+    return Array.from({ length: messagesLength }, (_, index) => (
+      <MessageByIndexProvider key={index} index={index}>
+        <RenderChildrenWithAccessor
+          getItemState={(aui) => aui.thread().message({ index }).getState()}
+        >
+          {(getItem) =>
+            children({
+              get message() {
+                return getItem();
+              },
+            })
+          }
+        </RenderChildrenWithAccessor>
+      </MessageByIndexProvider>
+    ));
+  }, [messagesLength, children]);
+};
+
 /**
- * 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.
+ * Renders all messages in the current thread.
  *
  * @example
  * ```tsx
- * <ThreadPrimitive.Messages
- *   components={{
- *     UserMessage: MyUserMessage,
- *     AssistantMessage: MyAssistantMessage,
- *     EditComposer: MyEditComposer
+ * <ThreadPrimitive.Messages>
+ *   {({ message }) => {
+ *     if (message.role === "user") return <MyUserMessage />;
+ *     return <MyAssistantMessage />;
  *   }}
- * />
+ * </ThreadPrimitive.Messages>
  * ```
  */
 export const ThreadPrimitiveMessagesImpl: FC<ThreadPrimitiveMessages.Props> = ({
   components,
+  children,
 }) => {
-  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;
+  if (components) {
+    return (
+      <ThreadPrimitiveMessagesInner>
+        {() => <ThreadMessageComponent components={components} />}
+      </ThreadPrimitiveMessagesInner>
+    );
+  }
+  return (
+    <ThreadPrimitiveMessagesInner>{children}</ThreadPrimitiveMessagesInner>
+  );
 };
 
 ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
 
 export const ThreadPrimitiveMessages = memo(
   ThreadPrimitiveMessagesImpl,
-  (prev, next) => isComponentsSame(prev.components, next.components),
+  (prev, next) => {
+    if (prev.children || next.children) {
+      return prev.children === next.children;
+    }
+    return isComponentsSame(prev.components!, next.components!);
+  },
 );

package/src/react/primitives/thread/ThreadSuggestions.tsx

@@ -1,21 +1,35 @@
-import { type ComponentType, type FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
+import {
+  type ComponentType,
+  type FC,
+  type ReactNode,
+  memo,
+  useMemo,
+} from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import type { SuggestionState } from "../../../store/scopes/suggestion";
 import { SuggestionByIndexProvider } from "../../providers/SuggestionByIndexProvider";
 
+type SuggestionsComponentConfig = {
+  /** Component used to render each suggestion */
+  Suggestion: ComponentType;
+};
+
 export namespace ThreadPrimitiveSuggestions {
-  export type Props = {
-    /**
-     * Component to render for each suggestion.
-     */
-    components: {
-      /** Component used to render each suggestion */
-      Suggestion: ComponentType;
-    };
-  };
+  export type Props =
+    | {
+        /** @deprecated Use the children render function instead. */
+        components: SuggestionsComponentConfig;
+        children?: never;
+      }
+    | {
+        /** Render function called for each suggestion. Receives the suggestion. */
+        children: (value: { suggestion: SuggestionState }) => ReactNode;
+        components?: never;
+      };
 }
 
 type SuggestionComponentProps = {
-  components: ThreadPrimitiveSuggestions.Props["components"];
+  components: SuggestionsComponentConfig;
 };
 
 const SuggestionComponent: FC<SuggestionComponentProps> = ({ components }) => {
@@ -26,7 +40,7 @@ const SuggestionComponent: FC<SuggestionComponentProps> = ({ components }) => {
 export namespace ThreadPrimitiveSuggestionByIndex {
   export type Props = {
     index: number;
-    components: ThreadPrimitiveSuggestions.Props["components"];
+    components: SuggestionsComponentConfig;
   };
 }
 
@@ -50,33 +64,63 @@ export const ThreadPrimitiveSuggestionByIndex: FC<ThreadPrimitiveSuggestionByInd
 ThreadPrimitiveSuggestionByIndex.displayName =
   "ThreadPrimitive.SuggestionByIndex";
 
-/**
- * Renders all suggestions using the provided component configuration.
- */
-export const ThreadPrimitiveSuggestionsImpl: FC<
-  ThreadPrimitiveSuggestions.Props
-> = ({ components }) => {
+const ThreadPrimitiveSuggestionsInner: FC<{
+  children: (value: { suggestion: SuggestionState }) => ReactNode;
+}> = ({ children }) => {
   const suggestionsLength = useAuiState(
     (s) => s.suggestions.suggestions.length,
   );
 
-  const suggestionElements = useMemo(() => {
+  return useMemo(() => {
     if (suggestionsLength === 0) return null;
     return Array.from({ length: suggestionsLength }, (_, index) => (
-      <ThreadPrimitiveSuggestionByIndex
-        key={index}
-        index={index}
-        components={components}
-      />
+      <SuggestionByIndexProvider key={index} index={index}>
+        <RenderChildrenWithAccessor
+          getItemState={(aui) =>
+            aui.suggestions().suggestion({ index }).getState()
+          }
+        >
+          {(getItem) =>
+            children({
+              get suggestion() {
+                return getItem();
+              },
+            })
+          }
+        </RenderChildrenWithAccessor>
+      </SuggestionByIndexProvider>
     ));
-  }, [suggestionsLength, components]);
+  }, [suggestionsLength, children]);
+};
 
-  return suggestionElements;
+/**
+ * Renders all suggestions.
+ */
+export const ThreadPrimitiveSuggestionsImpl: FC<
+  ThreadPrimitiveSuggestions.Props
+> = ({ components, children }) => {
+  if (components) {
+    return (
+      <ThreadPrimitiveSuggestionsInner>
+        {() => <SuggestionComponent components={components} />}
+      </ThreadPrimitiveSuggestionsInner>
+    );
+  }
+  return (
+    <ThreadPrimitiveSuggestionsInner>
+      {children}
+    </ThreadPrimitiveSuggestionsInner>
+  );
 };
 
 ThreadPrimitiveSuggestionsImpl.displayName = "ThreadPrimitive.Suggestions";
 
 export const ThreadPrimitiveSuggestions = memo(
   ThreadPrimitiveSuggestionsImpl,
-  (prev, next) => prev.components.Suggestion === next.components.Suggestion,
+  (prev, next) => {
+    if (prev.children || next.children) {
+      return prev.children === next.children;
+    }
+    return prev.components!.Suggestion === next.components!.Suggestion;
+  },
 );

package/src/react/primitives/threadList/ThreadListItems.tsx

@@ -1,21 +1,34 @@
-import { ComponentType, FC, memo, useMemo } from "react";
-import { useAuiState } from "@assistant-ui/store";
-import { ThreadListItemByIndexProvider } from "../../providers";
+import { ComponentType, FC, ReactNode, memo, useMemo } from "react";
+import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import type { ThreadListItemState } from "../../../store/scopes/thread-list-item";
+import { ThreadListItemByIndexProvider } from "../../providers/ThreadListItemByIndexProvider";
+
+type ThreadListItemsComponentConfig = {
+  ThreadListItem: ComponentType;
+};
 
 export namespace ThreadListPrimitiveItems {
   export type Props = {
     archived?: boolean | undefined;
-    components: {
-      ThreadListItem: ComponentType;
-    };
-  };
+  } & (
+    | {
+        /** @deprecated Use the children render function instead. */
+        components: ThreadListItemsComponentConfig;
+        children?: never;
+      }
+    | {
+        /** Render function called for each thread list item. Receives the item. */
+        children: (value: { threadListItem: ThreadListItemState }) => ReactNode;
+        components?: never;
+      }
+  );
 }
 
 export namespace ThreadListPrimitiveItemByIndex {
   export type Props = {
     index: number;
     archived?: boolean | undefined;
-    components: ThreadListPrimitiveItems.Props["components"];
+    components: ThreadListItemsComponentConfig;
   };
 }
 
@@ -41,26 +54,59 @@ export const ThreadListPrimitiveItemByIndex: FC<ThreadListPrimitiveItemByIndex.P
 
 ThreadListPrimitiveItemByIndex.displayName = "ThreadListPrimitive.ItemByIndex";
 
-export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
-  archived = false,
-  components,
-}) => {
+const ThreadListPrimitiveItemsInner: FC<{
+  archived: boolean;
+  children: (value: { threadListItem: ThreadListItemState }) => ReactNode;
+}> = ({ archived, children }) => {
   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 useMemo(
+    () =>
+      Array.from({ length: contentLength }, (_, index) => (
+        <ThreadListItemByIndexProvider
+          key={index}
+          index={index}
+          archived={archived}
+        >
+          <RenderChildrenWithAccessor
+            getItemState={(aui) =>
+              aui.threads().item({ index, archived }).getState()
+            }
+          >
+            {(getItem) =>
+              children({
+                get threadListItem() {
+                  return getItem();
+                },
+              })
+            }
+          </RenderChildrenWithAccessor>
+        </ThreadListItemByIndexProvider>
+      )),
+    [contentLength, archived, children],
+  );
+};
 
-  return listElements;
+export const ThreadListPrimitiveItems: FC<ThreadListPrimitiveItems.Props> = ({
+  archived = false,
+  components,
+  children,
+}) => {
+  if (components) {
+    const ThreadListItemComponent = components.ThreadListItem;
+    return (
+      <ThreadListPrimitiveItemsInner archived={archived}>
+        {() => <ThreadListItemComponent />}
+      </ThreadListPrimitiveItemsInner>
+    );
+  }
+  return (
+    <ThreadListPrimitiveItemsInner archived={archived}>
+      {children}
+    </ThreadListPrimitiveItemsInner>
+  );
 };
 
 ThreadListPrimitiveItems.displayName = "ThreadListPrimitive.Items";

package/src/react/providers/ReadonlyThreadProvider.tsx

@@ -0,0 +1,84 @@
+import {
+  type FC,
+  type PropsWithChildren,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+import type { ThreadMessage } from "../../types/message";
+import { ReadonlyThreadRuntimeCore } from "../../runtimes/readonly/ReadonlyThreadRuntimeCore";
+import {
+  ThreadRuntimeImpl,
+  type ThreadRuntimeCoreBinding,
+  type ThreadListItemRuntimeBinding,
+} from "../../runtime/internal";
+import { ThreadClient } from "../../store/runtime-clients/thread-runtime-client";
+import type { ThreadListItemState } from "../../runtime/api/bindings";
+
+const READONLY_THREAD_PATH = Object.freeze({
+  ref: "readonly-thread",
+  threadSelector: { type: "main" as const },
+});
+
+const READONLY_THREAD_LIST_ITEM: ThreadListItemState = Object.freeze({
+  id: "readonly",
+  remoteId: undefined,
+  externalId: undefined,
+  isMain: true,
+  status: "regular" as const,
+  title: undefined,
+});
+
+const READONLY_THREAD_LIST_ITEM_BINDING: ThreadListItemRuntimeBinding =
+  Object.freeze({
+    path: READONLY_THREAD_PATH,
+    getState: () => READONLY_THREAD_LIST_ITEM,
+    subscribe: () => () => {},
+  });
+
+export namespace ReadonlyThreadProvider {
+  export type Props = PropsWithChildren<{
+    messages: readonly ThreadMessage[];
+  }>;
+}
+
+export const ReadonlyThreadProvider: FC<ReadonlyThreadProvider.Props> = ({
+  messages,
+  children,
+}) => {
+  const [core] = useState(() => {
+    const c = new ReadonlyThreadRuntimeCore();
+    c.setMessages(messages);
+    return c;
+  });
+
+  useEffect(() => {
+    core.setMessages(messages);
+  }, [core, messages]);
+
+  const threadRuntime = useMemo(() => {
+    const threadBinding: ThreadRuntimeCoreBinding = {
+      path: READONLY_THREAD_PATH,
+      getState: () => core,
+      subscribe: (callback) => core.subscribe(callback),
+      outerSubscribe: (callback) => core.subscribe(callback),
+    };
+
+    return new ThreadRuntimeImpl(
+      threadBinding,
+      READONLY_THREAD_LIST_ITEM_BINDING,
+    );
+  }, [core]);
+
+  const aui = useAui({
+    thread: ThreadClient({ runtime: threadRuntime }),
+    composer: Derived({
+      source: "thread",
+      query: {},
+      get: (aui) => aui.thread().composer(),
+    }),
+  });
+
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
+};

package/src/react/runtimes/RemoteThreadListHookInstanceManager.tsx

@@ -14,7 +14,7 @@ import { ThreadListItemRuntimeProvider } from "../providers/ThreadListItemRuntim
 import type { ThreadRuntimeCore } from "../../runtime/interfaces/thread-runtime-core";
 import type { ThreadListRuntimeCore } from "../../runtime/interfaces/thread-list-runtime-core";
 import type { AssistantRuntime } from "../../runtime/api/assistant-runtime";
-import { BaseSubscribable } from "../../subscribable";
+import { BaseSubscribable } from "../../subscribable/subscribable";
 import { ThreadRuntimeImpl } from "../../runtime/api/thread-runtime";
 import { ThreadListRuntimeImpl } from "../../runtime/api/thread-list-runtime";
 

package/src/react/runtimes/RemoteThreadListThreadListRuntimeCore.tsx

@@ -1,6 +1,6 @@
 import type { ThreadListRuntimeCore } from "../../runtime/interfaces/thread-list-runtime-core";
 import { generateId } from "../../utils/id";
-import { BaseSubscribable } from "../../subscribable";
+import { BaseSubscribable } from "../../subscribable/subscribable";
 import { OptimisticState } from "../../runtimes/remote-thread-list/optimistic-state";
 import { EMPTY_THREAD_CORE } from "../../runtimes/remote-thread-list/empty-thread-core";
 import type {

package/src/react/runtimes/cloud/AssistantCloudThreadHistoryAdapter.ts

@@ -5,7 +5,7 @@ import type {
   MessageFormatAdapter,
   MessageFormatItem,
   MessageFormatRepository,
-} from "../../../adapters";
+} from "../../../adapters/thread-history";
 import type { ExportedMessageRepositoryItem } from "../../../runtime/utils/message-repository";
 import {
   AssistantCloud,

package/src/react/runtimes/cloud/CloudFileAttachmentAdapter.ts

@@ -3,8 +3,8 @@ import type {
   Attachment,
   PendingAttachment,
   CompleteAttachment,
-  ThreadUserMessagePart,
-} from "../../../types";
+} from "../../../types/attachment";
+import type { ThreadUserMessagePart } from "../../../types/message";
 import type { AttachmentAdapter } from "../../../adapters/attachment";
 
 const guessAttachmentType = (

package/src/react/runtimes/cloud/auiV0.ts

@@ -1,4 +1,4 @@
-import type { MessageStatus, ThreadMessage } from "../../../types";
+import type { MessageStatus, ThreadMessage } from "../../../types/message";
 import { fromThreadMessageLike } from "../../../runtime/utils/thread-message-like";
 import { CloudMessage } from "assistant-cloud";
 import { isJSONValue } from "../../../utils/json/is-json";

package/src/react/runtimes/createMessageConverter.ts

@@ -1,5 +1,5 @@
 "use client";
-import type { ThreadMessage } from "../../types";
+import type { ThreadMessage } from "../../types/message";
 import type { ThreadState } from "../../runtime/api/thread-runtime";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import {

package/src/react/runtimes/external-message-converter.ts

@@ -16,11 +16,11 @@ import type { ToolExecutionStatus } from "./useToolInvocations";
 import type { ReadonlyJSONValue } from "assistant-stream/utils";
 import { generateErrorMessageId } from "../../utils/id";
 import type {
-  MessageTiming,
   ThreadAssistantMessage,
   ThreadMessage,
   ToolCallMessagePart,
-} from "../../types";
+} from "../../types/message";
+import type { MessageTiming } from "../../types/message";
 
 export namespace useExternalMessageConverter {
   export type Message =