@assistant-ui/react 0.10.24 → 0.10.26

package/src/api/ThreadListRuntime.ts

@@ -21,11 +21,14 @@ export type ThreadListState = {
   readonly newThread: string | undefined;
   readonly threads: readonly string[];
   readonly archivedThreads: readonly string[];
+  readonly isLoading: boolean;
 };
 
 export type ThreadListRuntime = {
   getState(): ThreadListState;
 
+  readonly isLoading: boolean;
+
   subscribe(callback: () => void): Unsubscribe;
 
   readonly main: ThreadRuntime;
@@ -48,6 +51,7 @@ const getThreadListState = (
     newThread: threadList.newThreadId,
     threads: threadList.threadIds,
     archivedThreads: threadList.archivedThreadIds,
+    isLoading: threadList.isLoading,
   };
 };
 
@@ -139,6 +143,10 @@ export class ThreadListRuntimeImpl implements ThreadListRuntime {
     return this._getState();
   }
 
+  public get isLoading() {
+    return this._core.isLoading;
+  }
+
   public subscribe(callback: () => void): Unsubscribe {
     return this._core.subscribe(callback);
   }

package/src/api/ThreadRuntime.ts

@@ -139,6 +139,11 @@ export type ThreadState = {
    */
   readonly isDisabled: boolean;
 
+  /**
+   * Whether the thread is loading its history.
+   */
+  readonly isLoading: boolean;
+
   /**
    * Whether the thread is running. A thread is considered running when there is an active stream connection to the backend.
    */
@@ -187,6 +192,7 @@ export const getThreadState = (
     metadata: threadListItemState,
     capabilities: runtime.capabilities,
     isDisabled: runtime.isDisabled,
+    isLoading: runtime.isLoading,
     isRunning:
       lastMessage?.role !== "assistant"
         ? false

package/src/api/index.ts

@@ -6,10 +6,18 @@ export type {
   CreateStartRunConfig,
 } from "./ThreadRuntime";
 export type { MessageRuntime, MessageState } from "./MessageRuntime";
+
 export type {
-  ContentPartRuntime,
-  ContentPartState,
-} from "./ContentPartRuntime";
+  MessagePartRuntime,
+  MessagePartState,
+} from "./MessagePartRuntime";
+
+// TODO remove in v0.11
+export type {
+  MessagePartRuntime as MessageContentRuntime,
+  MessagePartState as MessageContentState,
+} from "./MessagePartRuntime";
+
 export type {
   ComposerRuntime,
   ThreadComposerRuntime,

package/src/cloud/auiV0.ts

@@ -6,7 +6,7 @@ import { isJSONValue } from "../utils/json/is-json";
 import { ReadonlyJSONObject, ReadonlyJSONValue } from "assistant-stream/utils";
 import { ExportedMessageRepositoryItem } from "../runtimes/utils/MessageRepository";
 
-type AuiV0MessageContentPart =
+type AuiV0MessageMessagePart =
   | {
       readonly type: "text";
       readonly text: string;
@@ -42,7 +42,7 @@ type AuiV0MessageContentPart =
 type AuiV0Message = {
   readonly role: "assistant" | "user" | "system";
   readonly status?: MessageStatus;
-  readonly content: readonly AuiV0MessageContentPart[];
+  readonly content: readonly AuiV0MessageMessagePart[];
   readonly metadata: {
     readonly unstable_state?: ReadonlyJSONValue;
     readonly unstable_annotations: readonly ReadonlyJSONValue[];
@@ -114,7 +114,7 @@ export const auiV0Encode = (message: ThreadMessage): AuiV0Message => {
         default: {
           const unhandledType: "image" | "file" | "audio" = type;
           throw new Error(
-            `Content part type not supported by aui/v0: ${unhandledType}`,
+            `Message part type not supported by aui/v0: ${unhandledType}`,
           );
         }
       }

package/src/context/providers/MessagePartRuntimeProvider.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { type FC, type PropsWithChildren, useEffect, useState } from "react";
+import { create } from "zustand";
+import { MessagePartContext } from "../react/MessagePartContext";
+import type { MessagePartContextValue } from "../react/MessagePartContext";
+import { writableStore } from "../ReadonlyStore";
+import { MessagePartRuntime } from "../../api/MessagePartRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
+
+export namespace MessagePartRuntimeProvider {
+  export type Props = PropsWithChildren<{
+    runtime: MessagePartRuntime;
+  }>;
+}
+
+const useMessagePartRuntimeStore = (runtime: MessagePartRuntime) => {
+  const [store] = useState(() => create(() => runtime));
+
+  useEffect(() => {
+    ensureBinding(runtime);
+
+    writableStore(store).setState(runtime, true);
+  }, [runtime, store]);
+
+  return store;
+};
+
+export const MessagePartRuntimeProvider: FC<
+  MessagePartRuntimeProvider.Props
+> = ({ runtime, children }) => {
+  const useMessagePartRuntime = useMessagePartRuntimeStore(runtime);
+  const [context] = useState<MessagePartContextValue>(() => {
+    return { useMessagePartRuntime };
+  });
+
+  return (
+    <MessagePartContext.Provider value={context}>
+      {children}
+    </MessagePartContext.Provider>
+  );
+};

package/src/context/providers/{TextContentPartProvider.tsx → TextMessagePartProvider.tsx}

@@ -3,88 +3,88 @@
 import { FC, PropsWithChildren, useEffect, useState } from "react";
 import { create, StoreApi, UseBoundStore } from "zustand";
 import {
-  ContentPartContext,
-  ContentPartContextValue,
-} from "../react/ContentPartContext";
-import { ContentPartStatus } from "../../types/AssistantTypes";
+  MessagePartContext,
+  MessagePartContextValue,
+} from "../react/MessagePartContext";
+import { MessagePartStatus } from "../../types/AssistantTypes";
 import { writableStore } from "../ReadonlyStore";
 import {
-  ContentPartRuntimeImpl,
-  ContentPartState,
-} from "../../api/ContentPartRuntime";
+  MessagePartRuntimeImpl,
+  MessagePartState,
+} from "../../api/MessagePartRuntime";
 import { ensureBinding } from "../react/utils/ensureBinding";
 
-export namespace TextContentPartProvider {
+export namespace TextMessagePartProvider {
   export type Props = PropsWithChildren<{
     text: string;
     isRunning?: boolean | undefined;
   }>;
 }
 
-const COMPLETE_STATUS: ContentPartStatus = {
+const COMPLETE_STATUS: MessagePartStatus = {
   type: "complete",
 };
 
-const RUNNING_STATUS: ContentPartStatus = {
+const RUNNING_STATUS: MessagePartStatus = {
   type: "running",
 };
 
-export const TextContentPartProvider: FC<TextContentPartProvider.Props> = ({
+export const TextMessagePartProvider: FC<TextMessagePartProvider.Props> = ({
   children,
   text,
   isRunning,
 }) => {
   const [context] = useState<
-    ContentPartContextValue & {
-      useContentPart: UseBoundStore<
-        StoreApi<ContentPartState & { type: "text" }>
+    MessagePartContextValue & {
+      useMessagePart: UseBoundStore<
+        StoreApi<MessagePartState & { type: "text" }>
       >;
     }
   >(() => {
-    const useContentPart = create<ContentPartState & { type: "text" }>(() => ({
+    const useMessagePart = create<MessagePartState & { type: "text" }>(() => ({
       status: isRunning ? RUNNING_STATUS : COMPLETE_STATUS,
       type: "text",
       text,
     }));
 
-    const contentPartRuntime = new ContentPartRuntimeImpl({
+    const MessagePartRuntime = new MessagePartRuntimeImpl({
       path: {
         ref: "text",
         threadSelector: { type: "main" },
         messageSelector: { type: "messageId", messageId: "" },
-        contentPartSelector: { type: "index", index: 0 },
+        messagePartSelector: { type: "index", index: 0 },
       },
-      getState: useContentPart.getState,
-      subscribe: useContentPart.subscribe,
+      getState: useMessagePart.getState,
+      subscribe: useMessagePart.subscribe,
     });
-    ensureBinding(contentPartRuntime);
+    ensureBinding(MessagePartRuntime);
 
-    const useContentPartRuntime = create(() => contentPartRuntime);
+    const useMessagePartRuntime = create(() => MessagePartRuntime);
 
-    return { useContentPartRuntime, useContentPart };
+    return { useMessagePartRuntime, useMessagePart };
   });
 
   useEffect(() => {
-    const state = context.useContentPart.getState();
+    const state = context.useMessagePart.getState();
     const textUpdated = state.text !== text;
     const targetStatus = isRunning ? RUNNING_STATUS : COMPLETE_STATUS;
     const statusUpdated = state.status !== targetStatus;
 
     if (!textUpdated && !statusUpdated) return;
 
-    writableStore(context.useContentPart).setState(
+    writableStore(context.useMessagePart).setState(
       {
         type: "text",
         text,
         status: targetStatus,
-      } satisfies ContentPartState,
+      } satisfies MessagePartState,
       true,
     );
   }, [context, isRunning, text]);
 
   return (
-    <ContentPartContext.Provider value={context}>
+    <MessagePartContext.Provider value={context}>
       {children}
-    </ContentPartContext.Provider>
+    </MessagePartContext.Provider>
   );
 };

package/src/context/providers/index.ts

@@ -1,2 +1,5 @@
 export { AssistantRuntimeProvider } from "./AssistantRuntimeProvider";
-export { TextContentPartProvider } from "./TextContentPartProvider";
+export { TextMessagePartProvider } from "./TextMessagePartProvider";
+
+// TODO remove in v0.11
+export { TextMessagePartProvider as TextContentPartProvider } from "./TextMessagePartProvider";

package/src/context/react/MessagePartContext.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { createContext } from "react";
+import { ReadonlyStore } from "../ReadonlyStore";
+import { createContextHook } from "./utils/createContextHook";
+import { UseBoundStore } from "zustand";
+import { MessagePartRuntime } from "../../api/MessagePartRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
+
+export type MessagePartContextValue = {
+  useMessagePartRuntime: UseBoundStore<ReadonlyStore<MessagePartRuntime>>;
+};
+
+export const MessagePartContext = createContext<MessagePartContextValue | null>(
+  null,
+);
+
+const useMessagePartContext = createContextHook(
+  MessagePartContext,
+  "a component passed to <MessagePrimitive.Parts components={...}>",
+);
+
+export function useMessagePartRuntime(options?: {
+  optional?: false | undefined;
+}): MessagePartRuntime;
+export function useMessagePartRuntime(options?: {
+  optional?: boolean | undefined;
+}): MessagePartRuntime | null;
+export function useMessagePartRuntime(options?: {
+  optional?: boolean | undefined;
+}) {
+  const context = useMessagePartContext(options);
+  if (!context) return null;
+  return context.useMessagePartRuntime();
+}
+
+export const useMessagePart = createStateHookForRuntime(useMessagePartRuntime);

package/src/context/react/index.ts

@@ -37,7 +37,7 @@ export {
   useMessageUtils,
   useMessageUtilsStore,
 } from "./MessageContext";
-export { useContentPartRuntime, useContentPart } from "./ContentPartContext";
+export { useMessagePartRuntime, useMessagePart } from "./MessagePartContext";
 export { useComposerRuntime, useComposer } from "./ComposerContext";
 
 export {

package/src/context/stores/AssistantToolUIs.ts

@@ -1,25 +1,25 @@
 import { create } from "zustand";
-import type { ToolCallContentPartComponent } from "../../types/ContentPartComponentTypes";
+import type { ToolCallMessagePartComponent } from "../../types/MessagePartComponentTypes";
 import { Unsubscribe } from "../../types";
 
 export type AssistantToolUIsState = {
   /**
    * Get the tool UI configured for a given tool name.
    */
-  getToolUI: (toolName: string) => ToolCallContentPartComponent | null;
+  getToolUI: (toolName: string) => ToolCallMessagePartComponent | null;
 
   /**
    * Registers a tool UI for a given tool name. Returns an unsubscribe function to remove the tool UI.
    */
   setToolUI: (
     toolName: string,
-    render: ToolCallContentPartComponent,
+    render: ToolCallMessagePartComponent,
   ) => Unsubscribe;
 };
 
 export const makeAssistantToolUIsStore = () =>
   create<AssistantToolUIsState>((set) => {
-    const renderers = new Map<string, ToolCallContentPartComponent[]>();
+    const renderers = new Map<string, ToolCallMessagePartComponent[]>();
 
     return Object.freeze({
       getToolUI: (name) => {

package/src/model-context/useAssistantTool.tsx

@@ -5,7 +5,7 @@ import {
   useAssistantRuntime,
   useToolUIsStore,
 } from "../context/react/AssistantContext";
-import type { ToolCallContentPartComponent } from "../types/ContentPartComponentTypes";
+import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 import type { Tool } from "assistant-stream";
 
 export type AssistantToolProps<
@@ -13,7 +13,7 @@ export type AssistantToolProps<
   TResult,
 > = Tool<TArgs, TResult> & {
   toolName: string;
-  render?: ToolCallContentPartComponent<TArgs, TResult> | undefined;
+  render?: ToolCallMessagePartComponent<TArgs, TResult> | undefined;
 };
 
 export const useAssistantTool = <

package/src/model-context/useAssistantToolUI.tsx

@@ -2,11 +2,11 @@
 
 import { useEffect } from "react";
 import { useToolUIsStore } from "../context/react/AssistantContext";
-import type { ToolCallContentPartComponent } from "../types/ContentPartComponentTypes";
+import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 
 export type AssistantToolUIProps<TArgs, TResult> = {
   toolName: string;
-  render: ToolCallContentPartComponent<TArgs, TResult>;
+  render: ToolCallMessagePartComponent<TArgs, TResult>;
 };
 
 export const useAssistantToolUI = (

package/src/model-context/useInlineRender.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { FC, useCallback, useEffect, useState } from "react";
-import { ToolCallContentPartProps } from "../types";
+import { ToolCallMessagePartProps } from "../types";
 import { create } from "zustand";
 
 export const useInlineRender = <TArgs, TResult>(
-  toolUI: FC<ToolCallContentPartProps<TArgs, TResult>>,
-): FC<ToolCallContentPartProps<TArgs, TResult>> => {
+  toolUI: FC<ToolCallMessagePartProps<TArgs, TResult>>,
+): FC<ToolCallMessagePartProps<TArgs, TResult>> => {
   const [useToolUIStore] = useState(() =>
     create(() => ({
       toolUI,

package/src/primitives/assistantModal/AssistantModalContent.tsx

@@ -10,6 +10,9 @@ export namespace AssistantModalPrimitiveContent {
   export type Props = ComponentPropsWithoutRef<
     typeof PopoverPrimitive.Content
   > & {
+    portalProps?:
+      | ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>
+      | undefined;
     dissmissOnInteractOutside?: boolean | undefined;
   };
 }
@@ -25,6 +28,7 @@ export const AssistantModalPrimitiveContent = forwardRef<
       align,
       onInteractOutside,
       dissmissOnInteractOutside = false,
+      portalProps,
       ...props
     }: ScopedProps<AssistantModalPrimitiveContent.Props>,
     forwardedRef,
@@ -32,7 +36,7 @@ export const AssistantModalPrimitiveContent = forwardRef<
     const scope = usePopoverScope(__scopeAssistantModal);
 
     return (
-      <PopoverPrimitive.Portal {...scope}>
+      <PopoverPrimitive.Portal {...scope} {...portalProps}>
         <PopoverPrimitive.Content
           {...scope}
           {...props}

package/src/primitives/index.ts

@@ -3,16 +3,24 @@ export * as AssistantModalPrimitive from "./assistantModal";
 export * as AttachmentPrimitive from "./attachment";
 export * as BranchPickerPrimitive from "./branchPicker";
 export * as ComposerPrimitive from "./composer";
-export * as ContentPartPrimitive from "./contentPart";
+export * as MessagePartPrimitive from "./messagePart";
 export * as ErrorPrimitive from "./error";
 export * as MessagePrimitive from "./message";
 export * as ThreadPrimitive from "./thread";
 export * as ThreadListPrimitive from "./threadList";
 export * as ThreadListItemPrimitive from "./threadListItem";
 
-export { useContentPartText } from "./contentPart/useContentPartText";
-export { useContentPartReasoning } from "./contentPart/useContentPartReasoning";
-export { useContentPartSource } from "./contentPart/useContentPartSource";
-export { useContentPartFile } from "./contentPart/useContentPartFile";
-export { useContentPartImage } from "./contentPart/useContentPartImage";
+export { useMessagePartText } from "./messagePart/useMessagePartText";
+export { useMessagePartReasoning } from "./messagePart/useMessagePartReasoning";
+export { useMessagePartSource } from "./messagePart/useMessagePartSource";
+export { useMessagePartFile } from "./messagePart/useMessagePartFile";
+export { useMessagePartImage } from "./messagePart/useMessagePartImage";
 export { useThreadViewportAutoScroll } from "./thread/useThreadViewportAutoScroll";
+
+// TODO remove in v0.11
+export * as ContentPartPrimitive from "./messagePart";
+export { useMessagePartText as useContentPartText } from "./messagePart/useMessagePartText";
+export { useMessagePartReasoning as useContentPartReasoning } from "./messagePart/useMessagePartReasoning";
+export { useMessagePartSource as useContentPartSource } from "./messagePart/useMessagePartSource";
+export { useMessagePartFile as useContentPartFile } from "./messagePart/useMessagePartFile";
+export { useMessagePartImage as useContentPartImage } from "./messagePart/useMessagePartImage";