@assistant-ui/react 0.10.50 → 0.11.0

package/src/context/react/{ComposerContext.ts → legacy/ComposerContext.ts}

@@ -1,9 +1,8 @@
 "use client";
 
-import { useMessageRuntime } from "./MessageContext";
-import { useThreadRuntime } from "./ThreadContext";
-import { ComposerRuntime } from "../../api/ComposerRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
+import { useAssistantApi } from "..";
+import { ComposerRuntime } from "../../../api/ComposerRuntime";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
 
 /**
  * Hook to access the ComposerRuntime from the current context.
@@ -52,11 +51,14 @@ export function useComposerRuntime(options?: {
 export function useComposerRuntime(options?: {
   optional?: boolean | undefined;
 }): ComposerRuntime | null {
-  const messageRuntime = useMessageRuntime({ optional: true });
-  const threadRuntime = useThreadRuntime(options);
-  return messageRuntime
-    ? messageRuntime.composer
-    : (threadRuntime?.composer ?? null);
+  const api = useAssistantApi();
+  const runtime = api.composer.source
+    ? api.composer().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("ComposerRuntime is not available");
+  }
+  return runtime;
 }
 
 /**

package/src/context/react/{MessageContext.ts → legacy/MessageContext.ts}

@@ -1,26 +1,9 @@
 "use client";
 
-import { createContext } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { MessageUtilsState } from "../stores/MessageUtils";
-import { createContextHook } from "./utils/createContextHook";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
-import { UseBoundStore } from "zustand";
-import { MessageRuntime } from "../../api/MessageRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-import { EditComposerRuntime } from "../../api";
-
-export type MessageContextValue = {
-  useMessageRuntime: UseBoundStore<ReadonlyStore<MessageRuntime>>;
-  useMessageUtils: UseBoundStore<ReadonlyStore<MessageUtilsState>>;
-};
-
-export const MessageContext = createContext<MessageContextValue | null>(null);
-
-const useMessageContext = createContextHook(
-  MessageContext,
-  "a component passed to <ThreadPrimitive.Messages components={...} />",
-);
+import { MessageRuntime } from "../../../api/MessageRuntime";
+import { useAssistantApi } from "..";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
+import { EditComposerRuntime } from "../../../api";
 
 /**
  * Hook to access the MessageRuntime from the current context.
@@ -63,9 +46,14 @@ export function useMessageRuntime(options?: {
 export function useMessageRuntime(options?: {
   optional?: boolean | undefined;
 }) {
-  const context = useMessageContext(options);
-  if (!context) return null;
-  return context.useMessageRuntime();
+  const api = useAssistantApi();
+  const runtime = api.message.source
+    ? api.message().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("MessageRuntime is not available");
+  }
+  return runtime;
 }
 
 /**
@@ -100,8 +88,3 @@ const useEditComposerRuntime = (opt: {
 export const useEditComposer = createStateHookForRuntime(
   useEditComposerRuntime,
 );
-
-export const { useMessageUtils, useMessageUtilsStore } = createContextStoreHook(
-  useMessageContext,
-  "useMessageUtils",
-);

package/src/context/react/legacy/MessagePartContext.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { MessagePartRuntime } from "../../../api/MessagePartRuntime";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
+import { useAssistantApi } from "..";
+
+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 api = useAssistantApi();
+  const runtime = api.part.source ? api.part().__internal_getRuntime() : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("MessagePartRuntime is not available");
+  }
+  return runtime;
+}
+
+export const useMessagePart = createStateHookForRuntime(useMessagePartRuntime);

package/src/context/react/{ThreadContext.ts → legacy/ThreadContext.ts}

@@ -1,24 +1,11 @@
 "use client";
 
-import { createContext, useEffect, useState } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { UseBoundStore } from "zustand";
-import { createContextHook } from "./utils/createContextHook";
-import { ThreadRuntime } from "../../api/ThreadRuntime";
-import { ModelContext } from "../../model-context";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-import { ThreadComposerRuntime } from "../../api";
-
-export type ThreadContextValue = {
-  useThreadRuntime: UseBoundStore<ReadonlyStore<ThreadRuntime>>;
-};
-
-export const ThreadContext = createContext<ThreadContextValue | null>(null);
-
-const useThreadContext = createContextHook(
-  ThreadContext,
-  "AssistantRuntimeProvider",
-);
+import { useState } from "react";
+import { ThreadRuntime } from "../../../api/ThreadRuntime";
+import { ModelContext } from "../../../model-context";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
+import { ThreadComposerRuntime } from "../../../api";
+import { useAssistantApi, useAssistantEvent } from "..";
 
 /**
  * Hook to access the ThreadRuntime from the current context.
@@ -50,9 +37,14 @@ export function useThreadRuntime(options?: {
   optional?: boolean | undefined;
 }): ThreadRuntime | null;
 export function useThreadRuntime(options?: { optional?: boolean | undefined }) {
-  const context = useThreadContext(options);
-  if (!context) return null;
-  return context.useThreadRuntime();
+  const api = useAssistantApi();
+  const runtime = api.thread.source
+    ? api.thread().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("ThreadRuntime is not available");
+  }
+  return runtime;
 }
 
 /**
@@ -95,9 +87,7 @@ export function useThreadModelContext(options?: {
   const [, rerender] = useState({});
 
   const runtime = useThreadRuntime(options);
-  useEffect(() => {
-    return runtime?.unstable_on("model-context-update", () => rerender({}));
-  }, [runtime]);
+  useAssistantEvent("thread.model-context-update", () => rerender({}));
 
   if (!runtime) return null;
   return runtime?.getModelContext();

package/src/context/react/legacy/ThreadListItemContext.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { ThreadListItemRuntime } from "../../../api/ThreadListItemRuntime";
+import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
+import { useAssistantApi } from "..";
+
+export function useThreadListItemRuntime(options?: {
+  optional?: false | undefined;
+}): ThreadListItemRuntime;
+export function useThreadListItemRuntime(options?: {
+  optional?: boolean | undefined;
+}): ThreadListItemRuntime | null;
+export function useThreadListItemRuntime(options?: {
+  optional?: boolean | undefined;
+}) {
+  const api = useAssistantApi();
+  const runtime = api.threadListItem.source
+    ? api.threadListItem().__internal_getRuntime()
+    : null;
+  if (!runtime && !options?.optional) {
+    throw new Error("ThreadListItemRuntime is not available");
+  }
+  return runtime;
+}
+
+export const useThreadListItem = createStateHookForRuntime(
+  useThreadListItemRuntime,
+);

package/src/context/stores/index.ts

@@ -1,3 +1 @@
-export type { AssistantToolUIsState } from "./AssistantToolUIs";
-export type { MessageUtilsState } from "./MessageUtils";
 export type { ThreadViewportState } from "./ThreadViewport";

package/src/hooks/useAssistantEvent.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+import { useAssistantApi } from "../context/react/AssistantApiContext";
+import {
+  AssistantEventSelector,
+  AssistantEvents,
+  normalizeEventSelector,
+} from "../types/EventTypes";
+
+export const useAssistantEvent = <TEvent extends keyof AssistantEvents>(
+  selector: AssistantEventSelector<TEvent>,
+  callback: (e: AssistantEvents[TEvent]) => void,
+) => {
+  const api = useAssistantApi();
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  const { scope, event } = normalizeEventSelector(selector);
+  useEffect(
+    () => api.on({ scope, event }, (e) => callbackRef.current(e)),
+    [api, scope, event],
+  );
+};

package/src/model-context/makeAssistantVisible.tsx

@@ -12,7 +12,7 @@ import {
   useContext,
 } from "react";
 import { z } from "zod";
-import { useAssistantRuntime } from "../context";
+import { useAssistantApi } from "../context/react/AssistantApiContext";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { tool } from "./tool";
 
@@ -72,11 +72,11 @@ export const makeAssistantVisible = <T extends ComponentType<any>>(
       const clickId = useId();
       const componentRef = useRef<HTMLElement>(null);
 
-      const assistant = useAssistantRuntime();
+      const api = useAssistantApi();
 
       const { clickable, editable } = config ?? {};
       useEffect(() => {
-        return assistant.registerModelContextProvider({
+        return api.registerModelContextProvider({
           getModelContext: () => {
             return {
               tools: {
@@ -89,7 +89,7 @@ export const makeAssistantVisible = <T extends ComponentType<any>>(
             };
           },
         });
-      }, [isNestedReadable, assistant, clickable, editable]);
+      }, [isNestedReadable, api, clickable, editable]);
 
       const ref = useComposedRefs(componentRef, outerRef);
 

package/src/model-context/useAssistantInstructions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useAssistantRuntime } from "../context";
+import { useAssistantApi } from "../context/react/AssistantApiContext";
 
 export type AssistantInstructionsConfig = {
   disabled?: boolean | undefined;
@@ -19,7 +19,7 @@ export const useAssistantInstructions = (
   config: string | AssistantInstructionsConfig,
 ) => {
   const { instruction, disabled = false } = getInstructions(config);
-  const assistantRuntime = useAssistantRuntime();
+  const api = useAssistantApi();
 
   useEffect(() => {
     if (disabled) return;
@@ -27,8 +27,8 @@ export const useAssistantInstructions = (
     const config = {
       system: instruction,
     };
-    return assistantRuntime.registerModelContextProvider({
+    return api.registerModelContextProvider({
       getModelContext: () => config,
     });
-  }, [assistantRuntime, instruction, disabled]);
+  }, [api, instruction, disabled]);
 };

package/src/model-context/useAssistantTool.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import {
-  useAssistantRuntime,
-  useToolUIsStore,
-} from "../context/react/AssistantContext";
+import { useAssistantApi } from "../context/react/AssistantApiContext";
 import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 import type { Tool } from "assistant-stream";
 
@@ -22,14 +19,12 @@ export const useAssistantTool = <
 >(
   tool: AssistantToolProps<TArgs, TResult>,
 ) => {
-  const assistantRuntime = useAssistantRuntime();
-  const toolUIsStore = useToolUIsStore();
+  const api = useAssistantApi();
 
   useEffect(() => {
-    return tool.render
-      ? toolUIsStore.getState().setToolUI(tool.toolName, tool.render)
-      : undefined;
-  }, [toolUIsStore, tool.toolName, tool.render]);
+    if (!tool.render) return undefined;
+    return api.toolUIs().setToolUI(tool.toolName, tool.render);
+  }, [api, tool.toolName, tool.render]);
 
   useEffect(() => {
     const { toolName, render, ...rest } = tool;
@@ -38,8 +33,8 @@ export const useAssistantTool = <
         [toolName]: rest,
       },
     };
-    return assistantRuntime.registerModelContextProvider({
+    return api.registerModelContextProvider({
       getModelContext: () => context,
     });
-  }, [assistantRuntime, tool]);
+  }, [api, tool]);
 };

package/src/model-context/useAssistantToolUI.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect } from "react";
-import { useToolUIsStore } from "../context/react/AssistantContext";
+import { useAssistantApi } from "../context/react/AssistantApiContext";
 import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 
 export type AssistantToolUIProps<TArgs, TResult> = {
@@ -12,9 +12,9 @@ export type AssistantToolUIProps<TArgs, TResult> = {
 export const useAssistantToolUI = (
   tool: AssistantToolUIProps<any, any> | null,
 ) => {
-  const toolUIsStore = useToolUIsStore();
+  const api = useAssistantApi();
   useEffect(() => {
-    if (!tool?.toolName || !tool?.render) return;
-    return toolUIsStore.getState().setToolUI(tool.toolName, tool.render);
-  }, [toolUIsStore, tool?.toolName, tool?.render]);
+    if (!tool?.toolName || !tool?.render) return undefined;
+    return api.toolUIs().setToolUI(tool.toolName, tool.render);
+  }, [api, tool?.toolName, tool?.render]);
 };

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -4,13 +4,8 @@ import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive } from "@radix-ui/react-primitive";
-import { useMessageUtils } from "../../context";
 import { useCallback } from "react";
-import {
-  useMessage,
-  useMessageRuntime,
-} from "../../context/react/MessageContext";
-import { useComposerRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides copy functionality for action bar buttons.
@@ -39,28 +34,27 @@ import { useComposerRuntime } from "../../context";
 const useActionBarPrimitiveCopy = ({
   copiedDuration = 3000,
 }: { copiedDuration?: number | undefined } = {}) => {
-  const messageRuntime = useMessageRuntime();
-  const composerRuntime = useComposerRuntime();
-  const setIsCopied = useMessageUtils((s) => s.setIsCopied);
-  const hasCopyableContent = useMessage((message) => {
+  const api = useAssistantApi();
+  const hasCopyableContent = useAssistantState(({ message }) => {
     return (
-      (message.role !== "assistant" || message.status.type !== "running") &&
-      message.content.some((c) => c.type === "text" && c.text.length > 0)
+      (message.role !== "assistant" || message.status?.type !== "running") &&
+      message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 
+  const isEditing = useAssistantState(({ composer }) => composer.isEditing);
+  const composerValue = useAssistantState(({ composer }) => composer.text);
+
   const callback = useCallback(() => {
-    const { isEditing, text: composerValue } = composerRuntime.getState();
+    const valueToCopy = isEditing ? composerValue : api.message().getCopyText();
 
-    const valueToCopy = isEditing
-      ? composerValue
-      : messageRuntime.unstable_getCopyText();
+    if (!valueToCopy) return;
 
     navigator.clipboard.writeText(valueToCopy).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), copiedDuration);
+      api.message().setIsCopied(true);
+      setTimeout(() => api.message().setIsCopied(false), copiedDuration);
     });
-  }, [messageRuntime, setIsCopied, composerRuntime, copiedDuration]);
+  }, [api, isEditing, composerValue, copiedDuration]);
 
   if (!hasCopyableContent) return null;
   return callback;
@@ -93,7 +87,7 @@ export const ActionBarPrimitiveCopy = forwardRef<
   ActionBarPrimitiveCopy.Element,
   ActionBarPrimitiveCopy.Props
 >(({ copiedDuration, onClick, disabled, ...props }, forwardedRef) => {
-  const isCopied = useMessageUtils((u) => u.isCopied);
+  const isCopied = useAssistantState(({ message }) => message.isCopied);
   const callback = useActionBarPrimitiveCopy({ copiedDuration });
   return (
     <Primitive.button

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -6,7 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useEditComposer, useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides edit functionality for action bar buttons.
@@ -30,12 +30,12 @@ import { useEditComposer, useMessageRuntime } from "../../context";
  * ```
  */
 const useActionBarEdit = () => {
-  const messageRuntime = useMessageRuntime();
-  const disabled = useEditComposer((c) => c.isEditing);
+  const api = useAssistantApi();
+  const disabled = useAssistantState(({ composer }) => composer.isEditing);
 
   const callback = useCallback(() => {
-    messageRuntime.composer.beginEdit();
-  }, [messageRuntime]);
+    api.composer().beginEdit();
+  }, [api]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -3,17 +3,16 @@
 import { forwardRef } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessage } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useCallback } from "react";
-import { useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useActionBarFeedbackNegative = () => {
-  const messageRuntime = useMessageRuntime();
+  const api = useAssistantApi();
 
   const callback = useCallback(() => {
-    messageRuntime.submitFeedback({ type: "negative" });
-  }, [messageRuntime]);
+    api.message().submitFeedback({ type: "negative" });
+  }, [api]);
 
   return callback;
 };
@@ -27,8 +26,8 @@ export const ActionBarPrimitiveFeedbackNegative = forwardRef<
   ActionBarPrimitiveFeedbackNegative.Element,
   ActionBarPrimitiveFeedbackNegative.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useMessage(
-    (u) => u.submittedFeedback?.type === "negative",
+  const isSubmitted = useAssistantState(
+    (s) => s.message.submittedFeedback?.type === "negative",
   );
   const callback = useActionBarFeedbackNegative();
   return (

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -3,15 +3,15 @@
 import { forwardRef, useCallback } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessage, useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 
 const useActionBarFeedbackPositive = () => {
-  const messageRuntime = useMessageRuntime();
+  const api = useAssistantApi();
 
   const callback = useCallback(() => {
-    messageRuntime.submitFeedback({ type: "positive" });
-  }, [messageRuntime]);
+    api.message().submitFeedback({ type: "positive" });
+  }, [api]);
 
   return callback;
 };
@@ -25,8 +25,8 @@ export const ActionBarPrimitiveFeedbackPositive = forwardRef<
   ActionBarPrimitiveFeedbackPositive.Element,
   ActionBarPrimitiveFeedbackPositive.Props
 >(({ onClick, disabled, ...props }, forwardedRef) => {
-  const isSubmitted = useMessage(
-    (u) => u.submittedFeedback?.type === "positive",
+  const isSubmitted = useAssistantState(
+    (s) => s.message.submittedFeedback?.type === "positive",
   );
   const callback = useActionBarFeedbackPositive();
   return (

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -6,9 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useMessageRuntime } from "../../context";
-import { useThreadRuntime } from "../../context/react/ThreadContext";
-import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 /**
  * Hook that provides reload functionality for action bar buttons.
@@ -32,17 +30,18 @@ import { useCombinedStore } from "../../utils/combined/useCombinedStore";
  * ```
  */
 const useActionBarReload = () => {
-  const messageRuntime = useMessageRuntime();
-  const threadRuntime = useThreadRuntime();
+  const api = useAssistantApi();
 
-  const disabled = useCombinedStore(
-    [threadRuntime, messageRuntime],
-    (t, m) => t.isRunning || t.isDisabled || m.role !== "assistant",
+  const disabled = useAssistantState(
+    (s) =>
+      s.thread.isRunning ||
+      s.thread.isDisabled ||
+      s.message.role !== "assistant",
   );
 
   const callback = useCallback(() => {
-    messageRuntime.reload();
-  }, [messageRuntime]);
+    api.message().reload();
+  }, [api]);
 
   if (disabled) return null;
   return callback;

package/src/primitives/actionBar/ActionBarSpeak.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback } from "react";
-import { useMessage, useMessageRuntime } from "../../context";
+import { useAssistantState, useAssistantApi } from "../../context";
 import {
   ActionButtonElement,
   ActionButtonProps,
@@ -9,15 +9,15 @@ import {
 } from "../../utils/createActionButton";
 
 const useActionBarSpeak = () => {
-  const messageRuntime = useMessageRuntime();
+  const api = useAssistantApi();
   const callback = useCallback(async () => {
-    messageRuntime.speak();
-  }, [messageRuntime]);
+    api.message().speak();
+  }, [api]);
 
-  const hasSpeakableContent = useMessage((m) => {
+  const hasSpeakableContent = useAssistantState(({ message }) => {
     return (
-      (m.role !== "assistant" || m.status.type !== "running") &&
-      m.content.some((c) => c.type === "text" && c.text.length > 0)
+      (message.role !== "assistant" || message.status?.type !== "running") &&
+      message.parts.some((c) => c.type === "text" && c.text.length > 0)
     );
   });
 

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -6,18 +6,15 @@ import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { Primitive } from "@radix-ui/react-primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { useCallback } from "react";
-import {
-  useMessage,
-  useMessageRuntime,
-} from "../../context/react/MessageContext";
+import { useAssistantState, useAssistantApi } from "../../context";
 
 const useActionBarStopSpeaking = () => {
-  const messageRuntime = useMessageRuntime();
-  const isSpeaking = useMessage((u) => u.speech != null);
+  const api = useAssistantApi();
+  const isSpeaking = useAssistantState(({ message }) => message.speech != null);
 
   const callback = useCallback(() => {
-    messageRuntime.stopSpeaking();
-  }, [messageRuntime]);
+    api.message().stopSpeaking();
+  }, [api]);
 
   if (!isSpeaking) return null;