@assistant-ui/react 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -148,7 +148,7 @@ var makeBaseComposer = (set) => ({
 });
 
 // src/context/stores/Composer.ts
-var makeComposerStore = (useThread, useThreadActions) => {
+var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
   const focusListeners = /* @__PURE__ */ new Set();
   return create3()((set, get, store) => {
     return {
@@ -158,7 +158,7 @@ var makeComposerStore = (useThread, useThreadActions) => {
         const { setValue, value } = get();
         setValue("");
         useThreadActions.getState().append({
-          parentId: useThread.getState().messages.at(-1)?.id ?? null,
+          parentId: useThreadMessages.getState().at(-1)?.id ?? null,
           role: "user",
           content: [{ type: "text", text: value }]
         });
@@ -188,7 +188,6 @@ var makeComposerStore = (useThread, useThreadActions) => {
 import { create as create4 } from "zustand";
 var makeThreadStore = (runtimeRef) => {
   return create4(() => ({
-    messages: runtimeRef.current.messages,
     isRunning: runtimeRef.current.isRunning
   }));
 };
@@ -228,6 +227,12 @@ var makeThreadActionStore = (runtimeRef) => {
   );
 };
 
+// src/context/stores/ThreadMessages.ts
+import { create as create7 } from "zustand";
+var makeThreadMessagesStore = (runtimeRef) => {
+  return create7(() => runtimeRef.current.messages);
+};
+
 // src/context/providers/ThreadProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ThreadProvider = ({
@@ -240,11 +245,17 @@ var ThreadProvider = ({
   });
   const [context] = useState(() => {
     const useThread = makeThreadStore(runtimeRef);
+    const useThreadMessages = makeThreadMessagesStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThread, useThreadActions);
+    const useComposer = makeComposerStore(
+      useThread,
+      useThreadMessages,
+      useThreadActions
+    );
     return {
       useThread,
+      useThreadMessages,
       useThreadActions,
       useComposer,
       useViewport
@@ -254,11 +265,11 @@ var ThreadProvider = ({
     const onRuntimeUpdate = () => {
       context.useThread.setState(
         Object.freeze({
-          messages: runtimeRef.current.messages,
           isRunning: runtimeRef.current.isRunning
         }),
         true
       );
+      context.useThreadMessages.setState(Object.freeze(runtimeRef.current.messages), true);
     };
     onRuntimeUpdate();
     return runtime.subscribe(onRuntimeUpdate);
@@ -279,8 +290,8 @@ var ThreadProvider = ({
 };
 
 // src/context/stores/AssistantActions.tsx
-import { create as create7 } from "zustand";
-var makeAssistantActionsStore = (runtimeRef) => create7(
+import { create as create8 } from "zustand";
+var makeAssistantActionsStore = (runtimeRef) => create8(
   () => Object.freeze({
     switchToThread: () => runtimeRef.current.switchToThread(null)
   })
@@ -357,30 +368,30 @@ var useContentPartContext = () => {
 
 // src/hooks/useAppendMessage.tsx
 import { useCallback as useCallback2 } from "react";
-var toAppendMessage = (useThread, message) => {
+var toAppendMessage = (useThreadMessages, message) => {
   if (typeof message === "string") {
     return {
-      parentId: useThread.getState().messages.at(-1)?.id ?? null,
+      parentId: useThreadMessages.getState().at(-1)?.id ?? null,
       role: "user",
       content: [{ type: "text", text: message }]
     };
   }
   return {
-    parentId: message.parentId ?? useThread.getState().messages.at(-1)?.id ?? null,
+    parentId: message.parentId ?? useThreadMessages.getState().at(-1)?.id ?? null,
     role: message.role ?? "user",
     content: message.content
   };
 };
 var useAppendMessage = () => {
-  const { useThread, useThreadActions, useViewport, useComposer } = useThreadContext();
+  const { useThreadMessages, useThreadActions, useViewport, useComposer } = useThreadContext();
   const append = useCallback2(
     (message) => {
-      const appendMessage = toAppendMessage(useThread, message);
+      const appendMessage = toAppendMessage(useThreadMessages, message);
       useThreadActions.getState().append(appendMessage);
       useViewport.getState().scrollToBottom();
       useComposer.getState().focus();
     },
-    [useThread, useThreadActions, useViewport, useComposer]
+    [useThreadMessages, useThreadActions, useViewport, useComposer]
   );
   return append;
 };
@@ -676,17 +687,6 @@ var useContentPartImage = () => {
   return image;
 };
 
-// src/primitive-hooks/contentPart/useContentPartInProgressIndicator.tsx
-var useContentPartInProgressIndicator = () => {
-  const { useMessageUtils } = useMessageContext();
-  const { useContentPart } = useContentPartContext();
-  const indicator = useCombinedStore(
-    [useMessageUtils, useContentPart],
-    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
-  );
-  return indicator;
-};
-
 // src/primitive-hooks/contentPart/useContentPartText.tsx
 var useContentPartText = () => {
   const { useContentPart } = useContentPartContext();
@@ -719,14 +719,17 @@ var useMessageIf = (props) => {
 
 // src/primitive-hooks/thread/useThreadIf.tsx
 var useThreadIf = (props) => {
-  const { useThread } = useThreadContext();
-  return useThread((thread) => {
-    if (props.empty === true && thread.messages.length !== 0) return false;
-    if (props.empty === false && thread.messages.length === 0) return false;
-    if (props.running === true && !thread.isRunning) return false;
-    if (props.running === false && thread.isRunning) return false;
-    return true;
-  });
+  const { useThread, useThreadMessages } = useThreadContext();
+  return useCombinedStore(
+    [useThread, useThreadMessages],
+    (thread, messages) => {
+      if (props.empty === true && messages.length !== 0) return false;
+      if (props.empty === false && messages.length === 0) return false;
+      if (props.running === true && !thread.isRunning) return false;
+      if (props.running === false && thread.isRunning) return false;
+      return true;
+    }
+  );
 };
 
 // src/primitive-hooks/thread/useThreadEmpty.tsx
@@ -1066,7 +1069,7 @@ import { memo as memo2 } from "react";
 
 // src/context/providers/ContentPartProvider.tsx
 import { useEffect as useEffect7, useState as useState4 } from "react";
-import { create as create8 } from "zustand";
+import { create as create9 } from "zustand";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
@@ -1085,7 +1088,7 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
 var useContentPartContext2 = (partIndex) => {
   const { useMessage } = useMessageContext();
   const [context] = useState4(() => {
-    const useContentPart = create8(
+    const useContentPart = create9(
       () => ({})
     );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
@@ -1114,38 +1117,61 @@ var ContentPartPrimitiveDisplay = () => {
 };
 ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
 
+// src/utils/OutPortal.tsx
+import { useLayoutEffect, useRef as useRef3 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var OutPortal = ({ node }) => {
+  const parentRef = useRef3(null);
+  useLayoutEffect(() => {
+    const parent = parentRef.current;
+    if (!parent || !node) return;
+    parent.appendChild(node);
+    return () => {
+      parent.removeChild(node);
+    };
+  }, [node]);
+  if (!node) return null;
+  return /* @__PURE__ */ jsx13("span", { ref: parentRef });
+};
+
 // src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ContentPartPrimitiveInProgressIndicator = () => {
-  const indicator = useContentPartInProgressIndicator();
-  return indicator;
+  const { useMessageUtils } = useMessageContext();
+  const { useContentPart } = useContentPartContext();
+  const indicator = useCombinedStore(
+    [useMessageUtils, useContentPart],
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
+  );
+  return /* @__PURE__ */ jsx14(OutPortal, { node: indicator });
 };
 ContentPartPrimitiveInProgressIndicator.displayName = "ContentPartPrimitive.InProgressIndicator";
 
 // src/primitives/contentPart/ContentPartText.tsx
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var ContentPartPrimitiveText = forwardRef6((props, forwardedRef) => {
   const text = useContentPartText();
-  return /* @__PURE__ */ jsx13(Primitive4.p, { ...props, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ jsx15(Primitive4.span, { ...props, ref: forwardedRef, children: text });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
 // src/primitives/message/MessageContent.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
-  Text: () => /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    /* @__PURE__ */ jsx14(ContentPartPrimitiveText, { style: { whiteSpace: "pre-line" } }),
-    /* @__PURE__ */ jsx14(ContentPartPrimitiveInProgressIndicator, {})
+  Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
+    /* @__PURE__ */ jsx16(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ jsx16(ContentPartPrimitiveInProgressIndicator, {})
   ] }),
   Image: () => null,
-  UI: () => /* @__PURE__ */ jsx14(ContentPartPrimitiveDisplay, {}),
+  UI: () => /* @__PURE__ */ jsx16(ContentPartPrimitiveDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
       const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
-      return /* @__PURE__ */ jsx14(Render, { ...props });
+      return /* @__PURE__ */ jsx16(Render, { ...props });
     }
   }
 };
@@ -1164,15 +1190,15 @@ var MessageContentPartComponent = ({
   const type = part.type;
   switch (type) {
     case "text":
-      return /* @__PURE__ */ jsx14(Text, { part, status });
+      return /* @__PURE__ */ jsx16(Text, { part, status });
     case "image":
-      return /* @__PURE__ */ jsx14(Image, { part, status });
+      return /* @__PURE__ */ jsx16(Image, { part, status });
     case "ui":
-      return /* @__PURE__ */ jsx14(UI, { part, status });
+      return /* @__PURE__ */ jsx16(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
       const addResult = (result) => addToolResult(part.toolCallId, result);
-      return /* @__PURE__ */ jsx14(Tool, { part, status, addResult });
+      return /* @__PURE__ */ jsx16(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -1182,7 +1208,7 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx14(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx14(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ jsx16(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx16(MessageContentPartComponent, { components }) });
 };
 var MessageContentPart = memo2(
   MessageContentPartImpl,
@@ -1195,7 +1221,7 @@ var MessagePrimitiveContent = ({
   const contentLength = useMessage((s) => s.message.content.length);
   return new Array(contentLength).fill(null).map((_, idx) => {
     const partIndex = idx;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx16(
       MessageContentPart,
       {
         partIndex,
@@ -1208,28 +1234,21 @@ var MessagePrimitiveContent = ({
 MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
 // src/primitives/message/MessageInProgress.tsx
+import { createPortal } from "react-dom";
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import {
-  forwardRef as forwardRef7,
-  useEffect as useEffect8
-} from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var MessagePrimitiveInProgress = forwardRef7((props, ref) => {
   const { useMessageUtils } = useMessageContext();
-  useEffect8(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx15(Primitive5.span, { ...props, ref }));
-    return () => {
-      useMessageUtils.getState().setInProgressIndicator(null);
-    };
-  }, [useMessageUtils, props, ref]);
-  return null;
+  const portalNode = useMessageUtils((s) => s.inProgressIndicator);
+  return createPortal(/* @__PURE__ */ jsx17(Primitive5.span, { ...props, ref }), portalNode);
 });
 MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var BranchPickerPrimitiveRoot = forwardRef8(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx16(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive6.div, { ...rest, ref }) });
+  return /* @__PURE__ */ jsx18(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx18(Primitive6.div, { ...rest, ref }) });
 });
 BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
@@ -1249,7 +1268,7 @@ import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import {
   forwardRef as forwardRef9
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ComposerPrimitiveRoot = forwardRef9(({ onSubmit, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const handleSubmit = (e) => {
@@ -1257,7 +1276,7 @@ var ComposerPrimitiveRoot = forwardRef9(({ onSubmit, ...rest }, forwardedRef) =>
     if (!send) return;
     send();
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Primitive7.form,
     {
       ...rest,
@@ -1275,12 +1294,12 @@ import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback13,
-  useEffect as useEffect9,
-  useRef as useRef3
+  useEffect as useEffect8,
+  useRef as useRef4
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ComposerPrimitiveInput = forwardRef10(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
@@ -1290,7 +1309,7 @@ var ComposerPrimitiveInput = forwardRef10(
       return c.value;
     });
     const Component = asChild ? Slot : TextareaAutosize;
-    const textareaRef = useRef3(null);
+    const textareaRef = useRef4(null);
     const ref = useComposedRefs(forwardedRef, textareaRef);
     useEscapeKeydown((e) => {
       const composer = useComposer.getState();
@@ -1318,13 +1337,13 @@ var ComposerPrimitiveInput = forwardRef10(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect9(() => focus(), [focus]);
+    useEffect8(() => focus(), [focus]);
     useOnComposerFocus(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       Component,
       {
         value,
@@ -1346,11 +1365,11 @@ ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 // src/primitives/composer/ComposerSend.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ComposerPrimitiveSend = forwardRef11(({ disabled, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     Primitive8.button,
     {
       type: "submit",
@@ -1390,10 +1409,10 @@ __export(contentPart_exports, {
 // src/primitives/contentPart/ContentPartImage.tsx
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ContentPartPrimitiveImage = forwardRef12((props, forwardedRef) => {
   const image = useContentPartImage();
-  return /* @__PURE__ */ jsx20(Primitive9.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx22(Primitive9.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
@@ -1412,9 +1431,9 @@ __export(thread_exports, {
 // src/primitives/thread/ThreadRoot.tsx
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var ThreadPrimitiveRoot = forwardRef13((props, ref) => {
-  return /* @__PURE__ */ jsx21(Primitive10.div, { ...props, ref });
+  return /* @__PURE__ */ jsx23(Primitive10.div, { ...props, ref });
 });
 ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
@@ -1444,16 +1463,16 @@ import { forwardRef as forwardRef14 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
 import { useCallback as useCallback15 } from "react";
 
 // src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback14, useRef as useRef4 } from "react";
+import { useCallback as useCallback14, useRef as useRef5 } from "react";
 var useManagedRef = (callback) => {
-  const cleanupRef = useRef4();
+  const cleanupRef = useRef5();
   const ref = useCallback14(
     (el) => {
       if (cleanupRef.current) {
@@ -1508,11 +1527,11 @@ var useOnResizeContent = (callback) => {
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect9 } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef3(callback);
   const { useViewport } = useThreadContext();
-  useEffect10(() => {
+  useEffect9(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -1523,11 +1542,11 @@ var useOnScrollToBottom = (callback) => {
 var useThreadViewportAutoScroll = ({
   autoScroll = true
 }) => {
-  const divRef = useRef5(null);
+  const divRef = useRef6(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = useRef5(true);
-  const lastScrollTop = useRef5(0);
-  const isScrollingToBottomRef = useRef5(false);
+  const firstRenderRef = useRef6(true);
+  const lastScrollTop = useRef6(0);
+  const isScrollingToBottomRef = useRef6(false);
   const scrollToBottom = () => {
     const div = divRef.current;
     if (!div || !autoScroll) return;
@@ -1573,13 +1592,13 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ThreadPrimitiveViewport = forwardRef14(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = useComposedRefs3(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ jsx22(Primitive11.div, { ...rest, ref, children });
+  return /* @__PURE__ */ jsx24(Primitive11.div, { ...rest, ref, children });
 });
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
@@ -1587,15 +1606,15 @@ ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 import { memo as memo3 } from "react";
 
 // src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect11, useState as useState5 } from "react";
-import { create as create11 } from "zustand";
+import { useEffect as useEffect10, useState as useState5 } from "react";
+import { create as create12 } from "zustand";
 
 // src/context/stores/EditComposer.ts
-import { create as create9 } from "zustand";
+import { create as create10 } from "zustand";
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => create9()((set, get, store) => ({
+}) => create10()((set, get, store) => ({
   ...makeBaseComposer(set, get, store),
   isEditing: false,
   edit: () => {
@@ -1615,12 +1634,9 @@ var makeEditComposerStore = ({
 }));
 
 // src/context/stores/MessageUtils.ts
-import { create as create10 } from "zustand";
-var makeMessageUtilsStore = () => create10((set) => ({
-  inProgressIndicator: null,
-  setInProgressIndicator: (value) => {
-    set({ inProgressIndicator: value });
-  },
+import { create as create11 } from "zustand";
+var makeMessageUtilsStore = () => create11((set) => ({
+  inProgressIndicator: document.createElement("span"),
   isCopied: false,
   setIsCopied: (value) => {
     set({ isCopied: value });
@@ -1632,15 +1648,15 @@ var makeMessageUtilsStore = () => create10((set) => ({
 }));
 
 // src/context/providers/MessageProvider.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-var getIsLast = (thread, message) => {
-  return thread.messages[thread.messages.length - 1]?.id === message.id;
+import { jsx as jsx25 } from "react/jsx-runtime";
+var getIsLast = (messages, message) => {
+  return messages[messages.length - 1]?.id === message.id;
 };
-var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
-  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
-  const message = thread.messages[messageIndex];
+var syncMessage = (messages, getBranches, useMessage, messageIndex) => {
+  const parentId = messages[messageIndex - 1]?.id ?? null;
+  const message = messages[messageIndex];
   if (!message) return;
-  const isLast = getIsLast(thread, message);
+  const isLast = getIsLast(messages, message);
   const branches = getBranches(message.id);
   const currentState = useMessage.getState();
   if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
@@ -1653,9 +1669,9 @@ var syncMessage = (thread, getBranches, useMessage, messageIndex) => {
   });
 };
 var useMessageContext2 = (messageIndex) => {
-  const { useThread, useThreadActions } = useThreadContext();
+  const { useThreadMessages, useThreadActions } = useThreadContext();
   const [context] = useState5(() => {
-    const useMessage = create11(() => ({}));
+    const useMessage = create12(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
     const useEditComposer = makeEditComposerStore({
       onEdit: () => {
@@ -1684,15 +1700,15 @@ var useMessageContext2 = (messageIndex) => {
       }
     });
     syncMessage(
-      useThread.getState(),
+      useThreadMessages.getState(),
       useThreadActions.getState().getBranches,
       useMessage,
       messageIndex
     );
     return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect11(() => {
-    return useThread.subscribe((thread) => {
+  useEffect10(() => {
+    return useThreadMessages.subscribe((thread) => {
       syncMessage(
         thread,
         useThreadActions.getState().getBranches,
@@ -1700,7 +1716,7 @@ var useMessageContext2 = (messageIndex) => {
         messageIndex
       );
     });
-  }, [useThread, useThreadActions, context, messageIndex]);
+  }, [useThreadMessages, useThreadActions, context, messageIndex]);
   return context;
 };
 var MessageProvider = ({
@@ -1708,11 +1724,11 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx23(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx25(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx24, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs3 } from "react/jsx-runtime";
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -1727,10 +1743,10 @@ var ThreadMessageImpl = ({
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
   return /* @__PURE__ */ jsxs3(MessageProvider, { messageIndex, children: [
     /* @__PURE__ */ jsxs3(MessagePrimitiveIf, { user: true, children: [
-      /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx24(UserMessage, {}) }),
-      /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx24(EditComposer, {}) })
+      /* @__PURE__ */ jsx26(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx26(UserMessage, {}) }),
+      /* @__PURE__ */ jsx26(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx26(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ jsx24(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx24(AssistantMessage, {}) })
+    /* @__PURE__ */ jsx26(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx26(AssistantMessage, {}) })
   ] });
 };
 var ThreadMessage = memo3(
@@ -1740,12 +1756,12 @@ var ThreadMessage = memo3(
 var ThreadPrimitiveMessages = ({
   components
 }) => {
-  const { useThread } = useThreadContext();
-  const messagesLength = useThread((t) => t.messages.length);
+  const { useThreadMessages } = useThreadContext();
+  const messagesLength = useThreadMessages((t) => t.length);
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx26(
       ThreadMessage,
       {
         messageIndex,
@@ -2147,7 +2163,6 @@ export {
   useContentPartContext,
   useContentPartDisplay,
   useContentPartImage,
-  useContentPartInProgressIndicator,
   useContentPartText,
   useLocalRuntime,
   useMessageContext,