@assistant-ui/react 0.0.15 → 0.0.17

package/dist/index.mjs

@@ -68,18 +68,18 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import {
   Primitive as Primitive2
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef2, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef2, useRef } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
-import { useLayoutEffect, useRef } from "react";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useEffect } from "react";
 var useOnResizeContent = (ref, callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  useLayoutEffect(() => {
+  const callbackRef = useCallbackRef(callback);
+  useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
-      callbackRef.current();
+      callbackRef();
     });
     const mutationObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -94,7 +94,7 @@ var useOnResizeContent = (ref, callback) => {
           }
         }
       }
-      callbackRef.current();
+      callbackRef();
     });
     resizeObserver.observe(el);
     mutationObserver.observe(el, { childList: true });
@@ -105,31 +105,31 @@ var useOnResizeContent = (ref, callback) => {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [ref.current]);
+  }, [ref.current, callbackRef]);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
-import { useEffect, useRef as useRef2 } from "react";
+import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
+import { useEffect as useEffect2 } from "react";
 var useOnScrollToBottom = (callback) => {
-  const callbackRef = useRef2(callback);
-  callbackRef.current = callback;
+  const callbackRef = useCallbackRef2(callback);
   const { useViewport } = useAssistantContext();
-  useEffect(() => {
+  useEffect2(() => {
     return useViewport.getState().onScrollToBottom(() => {
-      callbackRef.current();
+      callbackRef();
     });
-  }, [useViewport]);
+  }, [useViewport, callbackRef]);
 };
 
 // src/primitives/thread/ThreadViewport.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
-  const messagesEndRef = useRef3(null);
-  const divRef = useRef3(null);
+  const messagesEndRef = useRef(null);
+  const divRef = useRef(null);
   const ref = useComposedRefs(forwardedRef, divRef);
   const { useViewport } = useAssistantContext();
-  const firstRenderRef = useRef3(true);
-  const lastScrollTop = useRef3(0);
+  const firstRenderRef = useRef(true);
+  const lastScrollTop = useRef(0);
   const scrollToBottom = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll) return;
@@ -179,7 +179,9 @@ var MessageContext = createContext2(null);
 var useMessageContext = () => {
   const context = useContext2(MessageContext);
   if (!context)
-    throw new Error("This component must be used within a MessageProvider.");
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Provider."
+    );
   return context;
 };
 
@@ -212,6 +214,7 @@ var message_exports = {};
 __export(message_exports, {
   Content: () => MessageContent,
   If: () => MessageIf,
+  InProgress: () => MessageInProgress,
   Provider: () => MessageProvider,
   Root: () => MessageRoot
 });
@@ -293,8 +296,12 @@ var useMessageContext2 = () => {
       parentId: null,
       branches: [],
       isLast: false,
+      inProgressIndicator: null,
       isCopied: false,
       isHovering: false,
+      setInProgressIndicator: (value) => {
+        set({ inProgressIndicator: value });
+      },
       setIsCopied: (value) => {
         set({ isCopied: value });
       },
@@ -398,10 +405,94 @@ var MessageIf = ({ children, ...query }) => {
   return result ? children : null;
 };
 
+// src/utils/context/combined/useCombinedStore.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/utils/context/combined/createCombinedStore.ts
+import { useSyncExternalStore } from "react";
+var createCombinedStore = (stores) => {
+  const subscribe = (callback) => {
+    const unsubscribes = stores.map((store) => store.subscribe(callback));
+    return () => {
+      for (const unsub of unsubscribes) {
+        unsub();
+      }
+    };
+  };
+  return (selector) => {
+    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/context/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = useMemo2(() => createCombinedStore(stores), stores);
+  return useCombined(selector);
+};
+
+// src/utils/context/useContentPartContext.ts
+import { createContext as createContext3, useContext as useContext4 } from "react";
+var ContentPartContext = createContext3(null);
+var useContentPartContext = () => {
+  const context = useContext4(ContentPartContext);
+  if (!context)
+    throw new Error(
+      "This component must be used within a ContentPartPrimitive.Provider."
+    );
+  return context;
+};
+
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
+  const { useMessage } = useMessageContext();
+  const { useContentPart } = useContentPartContext();
+  const indicator = useCombinedStore(
+    [useMessage, useContentPart],
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
+  );
+  return indicator;
+};
+
+// src/primitives/contentPart/ContentPartProvider.tsx
+import { useMemo as useMemo3, useState as useState2 } from "react";
+import { create as create3 } from "zustand";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var useContentPartContext2 = () => {
+  const [context] = useState2(() => {
+    const useContentPart = create3(() => ({
+      part: null,
+      status: "done"
+    }));
+    return { useContentPart };
+  });
+  return context;
+};
+var ContentPartProvider = ({
+  part,
+  status,
+  children
+}) => {
+  const context = useContentPartContext2();
+  useMemo3(() => {
+    context.useContentPart.setState(
+      {
+        part,
+        status
+      },
+      true
+    );
+  }, [context, part, status]);
+  return /* @__PURE__ */ jsx6(ContentPartContext.Provider, { value: context, children });
+};
+
 // src/primitives/message/MessageContent.tsx
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
-  Text: ({ part }) => /* @__PURE__ */ jsx6(Fragment, { children: part.text }),
+  Text: ({ part }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    part.text,
+    /* @__PURE__ */ jsx7(ContentPartInProgressIndicator, {})
+  ] }),
   Image: () => null,
   UI: ({ part }) => part.display,
   tools: {
@@ -417,28 +508,59 @@ var MessageContent = ({
   } = {}
 }) => {
   const { useMessage } = useMessageContext();
-  const content = useMessage((s) => s.message.content);
-  return /* @__PURE__ */ jsx6(Fragment, { children: content.map((part, i) => {
+  const message = useMessage((s) => s.message);
+  const content = message.content;
+  const status = message.role === "assistant" ? message.status : "done";
+  return /* @__PURE__ */ jsx7(Fragment, { children: content.map((part, i) => {
     const key = i;
-    switch (part.type) {
+    const type = part.type;
+    let component = null;
+    switch (type) {
       case "text":
-        return /* @__PURE__ */ jsx6(Text, { part }, key);
+        component = /* @__PURE__ */ jsx7(Text, { part });
+        break;
       case "image":
-        return /* @__PURE__ */ jsx6(Image, { part }, key);
+        component = /* @__PURE__ */ jsx7(Image, { part });
+        break;
       case "ui":
-        return /* @__PURE__ */ jsx6(UI, { part }, key);
+        component = /* @__PURE__ */ jsx7(UI, { part });
+        break;
       case "tool-call": {
         const Tool = by_name[part.name] || Fallback;
-        return /* @__PURE__ */ jsx6(Tool, { part }, key);
+        component = /* @__PURE__ */ jsx7(Tool, { part });
+        break;
       }
       default:
-        return null;
+        throw new Error(`Unknown content part type: ${type}`);
     }
+    return /* @__PURE__ */ jsx7(
+      ContentPartProvider,
+      {
+        part,
+        status: i === content.length - 1 ? status : "done",
+        children: component
+      },
+      key
+    );
   }) });
 };
 
+// src/primitives/message/MessageInProgress.tsx
+import {
+  Primitive as Primitive4
+} from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var MessageInProgress = forwardRef4((props, ref) => {
+  const { useMessage } = useMessageContext();
+  useMemo4(() => {
+    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ jsx8(Primitive4.div, { ...props, ref }));
+  }, [useMessage, props, ref]);
+  return null;
+});
+
 // src/primitives/thread/ThreadMessages.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -452,19 +574,19 @@ var ThreadMessages = ({ components }) => {
   const messages = thread.messages;
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
   if (messages.length === 0) return null;
-  return /* @__PURE__ */ jsx7(Fragment2, { children: messages.map((message, idx) => {
+  return /* @__PURE__ */ jsx9(Fragment2, { children: messages.map((message, idx) => {
     const parentId = messages[idx - 1]?.id ?? null;
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       MessageProvider,
       {
         message,
         parentId,
         children: [
-          /* @__PURE__ */ jsxs2(MessageIf, { user: true, children: [
-            /* @__PURE__ */ jsx7(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx7(UserMessage, {}) }),
-            /* @__PURE__ */ jsx7(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx7(EditComposer, {}) })
+          /* @__PURE__ */ jsxs3(MessageIf, { user: true, children: [
+            /* @__PURE__ */ jsx9(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx9(UserMessage, {}) }),
+            /* @__PURE__ */ jsx9(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx9(EditComposer, {}) })
           ] }),
-          /* @__PURE__ */ jsx7(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx7(AssistantMessage, {}) })
+          /* @__PURE__ */ jsx9(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx9(AssistantMessage, {}) })
         ]
       },
       parentId ?? "__ROOT__"
@@ -475,18 +597,18 @@ var ThreadMessages = ({ components }) => {
 // src/primitives/thread/ThreadScrollToBottom.tsx
 import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive4
+  Primitive as Primitive5
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ThreadScrollToBottom = forwardRef4(({ onClick, ...rest }, ref) => {
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ThreadScrollToBottom = forwardRef5(({ onClick, ...rest }, ref) => {
   const { useViewport } = useAssistantContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
   const handleScrollToBottom = () => {
     useViewport.getState().scrollToBottom();
   };
-  return /* @__PURE__ */ jsx8(
-    Primitive4.button,
+  return /* @__PURE__ */ jsx10(
+    Primitive5.button,
     {
       ...rest,
       disabled: isAtBottom,
@@ -499,11 +621,11 @@ var ThreadScrollToBottom = forwardRef4(({ onClick, ...rest }, ref) => {
 // src/primitives/thread/ThreadSuggestion.tsx
 import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive5
+  Primitive as Primitive6
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ThreadSuggestion = forwardRef5(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ThreadSuggestion = forwardRef6(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
   const { useThread, useComposer } = useAssistantContext();
   const isDisabled = useThread((t) => t.isRunning);
   const handleApplySuggestion = () => {
@@ -514,8 +636,8 @@ var ThreadSuggestion = forwardRef5(({ onClick, prompt, method, autoSend: send, .
       composer.send();
     }
   };
-  return /* @__PURE__ */ jsx9(
-    Primitive5.button,
+  return /* @__PURE__ */ jsx11(
+    Primitive6.button,
     {
       ...rest,
       disabled: isDisabled,
@@ -539,15 +661,15 @@ __export(composer_exports, {
 import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import {
-  Primitive as Primitive6
+  Primitive as Primitive7
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef6, useRef as useRef4 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ComposerRoot = forwardRef6(
+import { forwardRef as forwardRef7, useRef as useRef2 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ComposerRoot = forwardRef7(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useViewport } = useAssistantContext();
     const { useComposer } = useComposerContext();
-    const formRef = useRef4(null);
+    const formRef = useRef2(null);
     const ref = useComposedRefs2(forwardedRef, formRef);
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
@@ -556,8 +678,8 @@ var ComposerRoot = forwardRef6(
       composerState.send();
       useViewport.getState().scrollToBottom();
     };
-    return /* @__PURE__ */ jsx10(
-      Primitive6.form,
+    return /* @__PURE__ */ jsx12(
+      Primitive7.form,
       {
         ...rest,
         ref,
@@ -572,14 +694,14 @@ import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primiti
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef8,
   useCallback,
-  useEffect as useEffect2,
-  useRef as useRef5
+  useEffect as useEffect3,
+  useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ComposerInput = forwardRef7(
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ComposerInput = forwardRef8(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread, useViewport } = useAssistantContext();
     const { useComposer, type } = useComposerContext();
@@ -604,7 +726,7 @@ var ComposerInput = forwardRef7(
         }
       }
     };
-    const textareaRef = useRef5(null);
+    const textareaRef = useRef3(null);
     const ref = useComposedRefs3(forwardedRef, textareaRef);
     const autoFocusEnabled = autoFocus && !disabled;
     const focus = useCallback(() => {
@@ -616,13 +738,13 @@ var ComposerInput = forwardRef7(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect2(() => focus(), [focus]);
+    useEffect3(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "assistant") {
         focus();
       }
     });
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       Component,
       {
         value,
@@ -642,16 +764,16 @@ var ComposerInput = forwardRef7(
 
 // src/primitives/composer/ComposerSend.tsx
 import {
-  Primitive as Primitive7
+  Primitive as Primitive8
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ComposerSend = forwardRef8(
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ComposerSend = forwardRef9(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ jsx12(
-      Primitive7.button,
+    return /* @__PURE__ */ jsx14(
+      Primitive8.button,
       {
         type: "submit",
         ...rest,
@@ -665,17 +787,17 @@ var ComposerSend = forwardRef8(
 // src/primitives/composer/ComposerCancel.tsx
 import { composeEventHandlers as composeEventHandlers7 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive8
+  Primitive as Primitive9
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var ComposerCancel = forwardRef9(({ onClick, ...rest }, ref) => {
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ComposerCancel = forwardRef10(({ onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const handleCancel = () => {
     useComposer.getState().cancel();
   };
-  return /* @__PURE__ */ jsx13(
-    Primitive8.button,
+  return /* @__PURE__ */ jsx15(
+    Primitive9.button,
     {
       type: "button",
       ...rest,
@@ -695,32 +817,6 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
-// src/utils/context/combined/useCombinedStore.ts
-import { useMemo as useMemo2 } from "react";
-
-// src/utils/context/combined/createCombinedStore.ts
-import { useSyncExternalStore } from "react";
-var createCombinedStore = (stores) => {
-  const subscribe = (callback) => {
-    const unsubscribes = stores.map((store) => store.subscribe(callback));
-    return () => {
-      for (const unsub of unsubscribes) {
-        unsub();
-      }
-    };
-  };
-  return (selector) => {
-    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  };
-};
-
-// src/utils/context/combined/useCombinedStore.ts
-var useCombinedStore = (stores, selector) => {
-  const useCombined = useMemo2(() => createCombinedStore(stores), stores);
-  return useCombined(selector);
-};
-
 // src/actions/useGoToNextBranch.tsx
 var useGoToNextBranch = () => {
   const { useThread } = useAssistantContext();
@@ -739,16 +835,16 @@ var useGoToNextBranch = () => {
 // src/utils/createActionButton.tsx
 import { composeEventHandlers as composeEventHandlers8 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive9
+  Primitive as Primitive10
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var createActionButton = (useActionButton) => {
-  return forwardRef10(
+  return forwardRef11(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
-      return /* @__PURE__ */ jsx14(
-        Primitive9.button,
+      return /* @__PURE__ */ jsx16(
+        Primitive10.button,
         {
           type: "button",
           disabled: !onClick,
@@ -777,7 +873,6 @@ var useGoToPreviousBranch = () => {
     const { message, branches } = useMessage.getState();
     useThread.getState().switchToBranch(
       branches[branches.indexOf(message.id) - 1]
-      // TODO probably there's a more elegant way to do this
     );
   };
 };
@@ -786,29 +881,29 @@ var useGoToPreviousBranch = () => {
 var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-import { Fragment as Fragment3, jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17 } from "react/jsx-runtime";
 var BranchPickerCount = () => {
   const { useMessage } = useMessageContext();
   const branchCount = useMessage((s) => s.branches.length);
-  return /* @__PURE__ */ jsx15(Fragment3, { children: branchCount });
+  return /* @__PURE__ */ jsx17(Fragment3, { children: branchCount });
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment4, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18 } from "react/jsx-runtime";
 var BranchPickerNumber = () => {
   const { useMessage } = useMessageContext();
   const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return /* @__PURE__ */ jsx16(Fragment4, { children: branchIdx + 1 });
+  return /* @__PURE__ */ jsx18(Fragment4, { children: branchIdx + 1 });
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 import {
-  Primitive as Primitive10
+  Primitive as Primitive11
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var BranchPickerRoot = forwardRef11(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx17(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx17(Primitive10.div, { ...rest, ref }) });
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var BranchPickerRoot = forwardRef12(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx19(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx19(Primitive11.div, { ...rest, ref }) });
 });
 
 // src/primitives/actionBar/index.ts
@@ -822,11 +917,11 @@ __export(actionBar_exports, {
 
 // src/primitives/actionBar/ActionBarRoot.tsx
 import {
-  Primitive as Primitive11
+  Primitive as Primitive12
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var ActionBarRoot = forwardRef12(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ActionBarRoot = forwardRef13(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
@@ -842,8 +937,8 @@ var ActionBarRoot = forwardRef12(({ hideWhenRunning, autohide, autohideFloat, ..
     }
   );
   if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
-  return /* @__PURE__ */ jsx18(
-    Primitive11.div,
+  return /* @__PURE__ */ jsx20(
+    Primitive12.div,
     {
       "data-floating": hideAndfloatStatus === "floating" /* Floating */,
       ...rest,
@@ -911,18 +1006,25 @@ var useBeginMessageEdit = () => {
 // src/primitives/actionBar/ActionBarEdit.tsx
 var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
+// src/primitives/contentPart/index.ts
+var contentPart_exports = {};
+__export(contentPart_exports, {
+  InProgressIndicator: () => ContentPartInProgressIndicator,
+  Provider: () => ContentPartProvider
+});
+
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
-import { useState as useState2 } from "react";
-import { create as create4 } from "zustand";
+import { useState as useState3 } from "react";
+import { create as create5 } from "zustand";
 
 // src/utils/context/stores/ViewportStore.tsx
-import { create as create3 } from "zustand";
+import { create as create4 } from "zustand";
 var makeViewportStore = () => {
   const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return create3(() => ({
+  return create4(() => ({
     isAtBottom: true,
     scrollToBottom: () => {
       for (const listener of scrollToBottomListeners) {
@@ -940,7 +1042,7 @@ var makeViewportStore = () => {
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
 var makeDummyThreadStore = () => {
-  return create4(() => ({
+  return create5(() => ({
     messages: [],
     isRunning: false,
     getBranches: () => {
@@ -961,7 +1063,7 @@ var makeDummyThreadStore = () => {
   }));
 };
 var useDummyAIAssistantContext = () => {
-  const [context] = useState2(() => {
+  const [context] = useState3(() => {
     const useThread = makeDummyThreadStore();
     const useViewport = makeViewportStore();
     const useComposer = makeThreadComposerStore(useThread);
@@ -971,7 +1073,8 @@ var useDummyAIAssistantContext = () => {
 };
 
 // src/adapters/vercel/useVercelAIThreadState.tsx
-import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
+import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
+import { useCallback as useCallback2, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
 
 // src/adapters/MessageRepository.tsx
 import { customAlphabet } from "nanoid/non-secure";
@@ -981,7 +1084,6 @@ var generateId = customAlphabet(
 );
 var optimisticPrefix = "__optimistic__";
 var generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
-var isOptimisticId = (id) => id.startsWith(optimisticPrefix);
 var findHead = (message) => {
   if (message.next) return findHead(message.next);
   return message;
@@ -990,7 +1092,41 @@ var MessageRepository = class {
   messages = /* @__PURE__ */ new Map();
   // message_id -> item
   head = null;
-  rootChildren = [];
+  root = {
+    children: []
+  };
+  getFallbackChild(p) {
+    const childId = p.children.at(-1);
+    const child = childId ? this.messages.get(childId) : null;
+    if (child === void 0)
+      throw new Error(
+        "MessageRepository(getFallbackChild): Child message not found. This is likely an internal bug in assistant-ui."
+      );
+    return child;
+  }
+  performOp(newParent, child, operation) {
+    const parentOrRoot = child.prev ?? this.root;
+    const newParentOrRoot = newParent ?? this.root;
+    if (operation === "relink" && parentOrRoot === newParentOrRoot) return;
+    if (operation !== "link") {
+      parentOrRoot.children = parentOrRoot.children.filter(
+        (m) => m !== child.current.id
+      );
+      if (child.prev?.next === child) {
+        child.prev.next = this.getFallbackChild(child.prev);
+      }
+    }
+    if (operation !== "cut") {
+      newParentOrRoot.children = [
+        ...newParentOrRoot.children,
+        child.current.id
+      ];
+      if (newParent && (findHead(child) === this.head || newParent.next === null)) {
+        newParent.next = child;
+      }
+      child.prev = newParent;
+    }
+  }
   getMessages() {
     const messages = new Array(this.head?.level ?? 0);
     for (let current = this.head; current; current = current.prev) {
@@ -999,20 +1135,17 @@ var MessageRepository = class {
     return messages;
   }
   addOrUpdateMessage(parentId, message) {
-    const item = this.messages.get(message.id);
-    if (item) {
-      if ((item.prev?.current.id ?? null) !== parentId) {
-        this.deleteMessage(message.id);
-      } else {
-        item.current = message;
-        return;
-      }
-    }
+    const existingItem = this.messages.get(message.id);
     const prev = parentId ? this.messages.get(parentId) : null;
     if (prev === void 0)
       throw new Error(
         "MessageRepository(addOrUpdateMessage): Parent message not found. This is likely an internal bug in assistant-ui."
       );
+    if (existingItem) {
+      existingItem.current = message;
+      this.performOp(prev, existingItem, "relink");
+      return;
+    }
     const newItem = {
       prev,
       current: message,
@@ -1021,80 +1154,57 @@ var MessageRepository = class {
       level: prev ? prev.level + 1 : 0
     };
     this.messages.set(message.id, newItem);
-    if (prev) {
-      prev.children = [...prev.children, message.id];
-      prev.next = newItem;
-    } else {
-      this.rootChildren = [...this.rootChildren, message.id];
-    }
     if (this.head === prev) {
       this.head = newItem;
     }
+    this.performOp(prev, newItem, "link");
   }
-  deleteMessage(messageId) {
-    const message = this.messages.get(messageId);
-    if (!message)
-      throw new Error(
-        "MessageRepository(deleteMessage): Message not found. This is likely an internal bug in assistant-ui."
-      );
-    if (message.children.length > 0) {
-      for (const child of message.children) {
-        this.deleteMessage(child);
-      }
-    }
-    this.messages.delete(messageId);
-    if (message.prev) {
-      message.prev.children = message.prev.children.filter(
-        (m) => m !== messageId
-      );
-      if (message.prev.next === message) {
-        const childId = message.prev.children.at(-1);
-        const child = childId ? this.messages.get(childId) : null;
-        if (child === void 0)
-          throw new Error(
-            "MessageRepository(deleteMessage): Child message not found. This is likely an internal bug in assistant-ui."
-          );
-        message.prev.next = child;
-      }
-    } else {
-      this.rootChildren = this.rootChildren.filter((m) => m !== messageId);
-    }
-    if (this.head === message) {
-      this.head = message.prev ? findHead(message.prev) : null;
-    }
-  }
-  getOptimisticId() {
+  appendOptimisticMessage(parentId, message) {
     let optimisticId;
     do {
       optimisticId = generateOptimisticId();
     } while (this.messages.has(optimisticId));
-    return optimisticId;
-  }
-  commitOptimisticRun(parentId) {
-    const optimisticId = this.getOptimisticId();
     this.addOrUpdateMessage(parentId, {
+      ...message,
       id: optimisticId,
-      role: "assistant",
-      content: [
-        {
-          type: "text",
-          text: ""
-        }
-      ],
-      createdAt: /* @__PURE__ */ new Date()
+      createdAt: /* @__PURE__ */ new Date(),
+      ...message.role === "assistant" ? { status: "in_progress" } : void 0
     });
     return optimisticId;
   }
+  deleteMessage(messageId, newParentId) {
+    const message = this.messages.get(messageId);
+    const newParent = newParentId ? this.messages.get(newParentId) : null;
+    if (!message)
+      throw new Error(
+        "MessageRepository(deleteMessage): Optimistic message not found. This is likely an internal bug in assistant-ui."
+      );
+    if (newParent === void 0)
+      throw new Error(
+        "MessageRepository(deleteMessage): New message not found. This is likely an internal bug in assistant-ui."
+      );
+    for (const child of message.children) {
+      const childMessage = this.messages.get(child);
+      if (!childMessage)
+        throw new Error(
+          "MessageRepository(deleteMessage): Child message not found. This is likely an internal bug in assistant-ui."
+        );
+      this.performOp(newParent, childMessage, "relink");
+    }
+    this.messages.delete(messageId);
+    if (this.head === message) {
+      this.head = this.getFallbackChild(message.prev ?? this.root);
+    }
+    this.performOp(null, message, "cut");
+  }
   getBranches(messageId) {
     const message = this.messages.get(messageId);
     if (!message)
       throw new Error(
         "MessageRepository(getBranches): Message not found. This is likely an internal bug in assistant-ui."
       );
-    if (message.prev) {
-      return message.prev.children;
-    }
-    return this.rootChildren;
+    const { children } = message.prev ?? this.root;
+    return children;
   }
   switchToBranch(messageId) {
     const message = this.messages.get(messageId);
@@ -1108,28 +1218,28 @@ var MessageRepository = class {
     this.head = findHead(message);
   }
   resetHead(messageId) {
-    if (messageId) {
-      const message = this.messages.get(messageId);
-      if (!message)
-        throw new Error(
-          "MessageRepository(resetHead): Branch not found. This is likely an internal bug in assistant-ui."
-        );
-      this.head = message;
-      for (let current = message; current; current = current.prev) {
-        if (current.prev) {
-          current.prev.next = current;
-        }
-      }
-    } else {
+    if (messageId === null) {
       this.head = null;
+      return;
+    }
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(resetHead): Branch not found. This is likely an internal bug in assistant-ui."
+      );
+    this.head = message;
+    for (let current = message; current; current = current.prev) {
+      if (current.prev) {
+        current.prev.next = current;
+      }
     }
   }
 };
 
 // src/adapters/ThreadMessageConverter.tsx
 var ThreadMessageConverter = class {
-  constructor(converter2) {
-    this.converter = converter2;
+  constructor(converter) {
+    this.converter = converter;
   }
   cache = /* @__PURE__ */ new WeakMap();
   convertMessages(messages) {
@@ -1143,33 +1253,55 @@ var ThreadMessageConverter = class {
   }
 };
 
+// src/adapters/vercel/VercelThreadMessage.tsx
+var symbolInnerMessage = Symbol("innerMessage");
+var symbolInnerRSCMessage = Symbol("innerRSCMessage");
+var getVercelMessage = (message) => {
+  return message[symbolInnerMessage];
+};
+var getVercelRSCMessage = (message) => {
+  return message[symbolInnerRSCMessage];
+};
+
 // src/adapters/vercel/useVercelAIThreadState.tsx
-var vercelToThreadMessage = (message) => {
-  if (message.role !== "user" && message.role !== "assistant")
-    throw new Error(
-      `You have a message with an unsupported role. The role ${message.role} is not supported.`
-    );
-  return {
+var vercelToThreadMessage = (message, status) => {
+  const common = {
     id: message.id,
-    role: message.role,
-    content: [
-      ...message.content ? [{ type: "text", text: message.content }] : [],
-      ...message.toolInvocations?.map((t) => ({
-        type: "tool-call",
-        name: t.toolName,
-        args: t.args,
-        result: "result" in t ? t.result : void 0
-      })) ?? []
-    ],
-    // ignore type mismatch for now
     createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
-    innerMessage: message
+    [symbolInnerMessage]: message
   };
+  switch (message.role) {
+    case "user":
+      return {
+        ...common,
+        role: "user",
+        content: [{ type: "text", text: message.content }]
+      };
+    case "assistant":
+      return {
+        ...common,
+        role: "assistant",
+        content: [
+          ...message.content ? [{ type: "text", text: message.content }] : [],
+          ...message.toolInvocations?.map(
+            (t) => ({
+              type: "tool-call",
+              name: t.toolName,
+              args: t.args,
+              result: "result" in t ? t.result : void 0
+            })
+          ) ?? []
+        ],
+        status
+      };
+    default:
+      throw new Error(
+        `You have a message with an unsupported role. The role ${message.role} is not supported.`
+      );
+  }
 };
-var converter = new ThreadMessageConverter(vercelToThreadMessage);
 var sliceMessagesUntil = (messages, messageId) => {
   if (messageId == null) return [];
-  if (isOptimisticId(messageId)) return messages;
   const messageIdx = messages.findIndex((m) => m.id === messageId);
   if (messageIdx === -1)
     throw new Error(
@@ -1185,12 +1317,17 @@ var getIsRunning = (vercel) => {
   return vercel.status === "in_progress";
 };
 var useVercelAIThreadState = (vercel) => {
-  const [data] = useState3(() => new MessageRepository());
-  const vercelRef = useRef6(vercel);
-  vercelRef.current = vercel;
-  const isRunning = getIsRunning(vercelRef.current);
-  const assistantOptimisticIdRef = useRef6(null);
-  const messages = useMemo3(() => {
+  const [data] = useState4(() => new MessageRepository());
+  const isRunning = getIsRunning(vercel);
+  const convertCallback = useCallbackRef3((message) => {
+    return vercelToThreadMessage(
+      message,
+      vercel.messages.at(-1) === message && isRunning ? "in_progress" : "done"
+    );
+  });
+  const converter = new ThreadMessageConverter(convertCallback);
+  const assistantOptimisticIdRef = useRef4(null);
+  const messages = useMemo5(() => {
     const vm = converter.convertMessages(vercel.messages);
     for (let i = 0; i < vm.length; i++) {
       const message = vm[i];
@@ -1198,66 +1335,61 @@ var useVercelAIThreadState = (vercel) => {
       data.addOrUpdateMessage(parent?.id ?? null, message);
     }
     if (assistantOptimisticIdRef.current) {
-      data.deleteMessage(assistantOptimisticIdRef.current);
+      data.deleteMessage(assistantOptimisticIdRef.current, null);
       assistantOptimisticIdRef.current = null;
     }
     if (hasUpcomingMessage(isRunning, vm)) {
-      assistantOptimisticIdRef.current = data.commitOptimisticRun(
-        vm.at(-1)?.id ?? null
+      assistantOptimisticIdRef.current = data.appendOptimisticMessage(
+        vm.at(-1)?.id ?? null,
+        {
+          role: "assistant",
+          content: [{ type: "text", text: "" }]
+        }
       );
     }
     data.resetHead(assistantOptimisticIdRef.current ?? vm.at(-1)?.id ?? null);
     return data.getMessages();
-  }, [data, isRunning, vercel.messages]);
+  }, [converter, data, isRunning, vercel.messages]);
   const getBranches2 = useCallback2(
     (messageId) => {
       return data.getBranches(messageId);
     },
     [data]
   );
-  const switchToBranch2 = useCallback2(
-    (messageId) => {
-      data.switchToBranch(messageId);
-      vercelRef.current.setMessages(
-        data.getMessages().filter((m) => !isOptimisticId(m.id)).map((m) => m.innerMessage)
-      );
-    },
-    [data]
-  );
-  const startRun = useCallback2(async (parentId) => {
-    const reloadMaybe = "reload" in vercelRef.current ? vercelRef.current.reload : void 0;
+  const switchToBranch2 = useCallbackRef3((messageId) => {
+    data.switchToBranch(messageId);
+    vercel.setMessages(
+      data.getMessages().map(getVercelMessage).filter((m) => m != null)
+    );
+  });
+  const startRun = useCallbackRef3(async (parentId) => {
+    const reloadMaybe = "reload" in vercel ? vercel.reload : void 0;
     if (!reloadMaybe)
       throw new Error(
         "Reload is not supported by Vercel AI SDK's useAssistant."
       );
-    const newMessages = sliceMessagesUntil(
-      vercelRef.current.messages,
-      parentId
-    );
-    vercelRef.current.setMessages(newMessages);
+    const newMessages = sliceMessagesUntil(vercel.messages, parentId);
+    vercel.setMessages(newMessages);
     await reloadMaybe();
-  }, []);
-  const append = useCallback2(async (message) => {
+  });
+  const append = useCallbackRef3(async (message) => {
     if (message.content.length !== 1 || message.content[0]?.type !== "text")
       throw new Error("Only text content is supported by Vercel AI SDK.");
-    const newMessages = sliceMessagesUntil(
-      vercelRef.current.messages,
-      message.parentId
-    );
-    vercelRef.current.setMessages(newMessages);
-    await vercelRef.current.append({
+    const newMessages = sliceMessagesUntil(vercel.messages, message.parentId);
+    vercel.setMessages(newMessages);
+    await vercel.append({
       role: "user",
       content: message.content[0].text
     });
-  }, []);
-  const cancelRun2 = useCallback2(() => {
-    const lastMessage = vercelRef.current.messages.at(-1);
-    vercelRef.current.stop();
+  });
+  const cancelRun2 = useCallbackRef3(() => {
+    const lastMessage = vercel.messages.at(-1);
+    vercel.stop();
     if (lastMessage?.role === "user") {
-      vercelRef.current.setInput(lastMessage.content);
+      vercel.setInput(lastMessage.content);
     }
-  }, []);
-  return useMemo3(
+  });
+  return useMemo5(
     () => ({
       isRunning,
       messages,
@@ -1280,7 +1412,7 @@ var useVercelAIThreadState = (vercel) => {
 };
 
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var VercelAIAssistantProvider = ({
   children,
   ...rest
@@ -1288,31 +1420,34 @@ var VercelAIAssistantProvider = ({
   const context = useDummyAIAssistantContext();
   const vercel = "chat" in rest ? rest.chat : rest.assistant;
   const threadState = useVercelAIThreadState(vercel);
-  useMemo4(() => {
+  useMemo6(() => {
     context.useThread.setState(threadState, true);
   }, [context, threadState]);
-  useMemo4(() => {
+  useMemo6(() => {
     context.useComposer.setState({
       value: vercel.input,
       setValue: vercel.setInput
     });
   }, [context, vercel.input, vercel.setInput]);
-  return /* @__PURE__ */ jsx19(AssistantContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx21(AssistantContext.Provider, { value: context, children });
 };
 
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
 import {
   useCallback as useCallback3,
-  useMemo as useMemo5,
-  useState as useState4
+  useMemo as useMemo7,
+  useState as useState5
 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var vercelToThreadMessage2 = (message) => {
+import { jsx as jsx22 } from "react/jsx-runtime";
+var vercelToThreadMessage2 = (converter, rawMessage) => {
+  const message = converter(rawMessage);
   return {
     id: message.id,
     role: message.role,
     content: [{ type: "ui", display: message.display }],
-    createdAt: message.createdAt ?? /* @__PURE__ */ new Date()
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
+    ...{ status: "done" },
+    [symbolInnerRSCMessage]: rawMessage
   };
 };
 var EMPTY_BRANCHES = [];
@@ -1340,20 +1475,20 @@ var VercelRSCAssistantProvider = ({
   reload
 }) => {
   const context = useDummyAIAssistantContext();
-  const [isRunning, setIsRunning] = useState4(false);
+  const [isRunning, setIsRunning] = useState5(false);
   const withRunning = useCallback3((callback) => {
     setIsRunning(true);
     return callback.finally(() => setIsRunning(false));
   }, []);
-  const converter2 = useMemo5(() => {
+  const converter = useMemo7(() => {
     const rscConverter = convertMessage ?? ((m) => m);
     return new ThreadMessageConverter((m) => {
-      return vercelToThreadMessage2(rscConverter(m));
+      return vercelToThreadMessage2(rscConverter, m);
     });
   }, [convertMessage]);
-  const messages = useMemo5(() => {
-    return converter2.convertMessages(vercelMessages);
-  }, [converter2, vercelMessages]);
+  const messages = useMemo7(() => {
+    return converter.convertMessages(vercelMessages);
+  }, [converter, vercelMessages]);
   const append = useCallback3(
     async (message) => {
       if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null)) {
@@ -1378,7 +1513,7 @@ var VercelRSCAssistantProvider = ({
     },
     [withRunning, reload]
   );
-  useMemo5(() => {
+  useMemo7(() => {
     context.useThread.setState(
       {
         messages,
@@ -1392,16 +1527,19 @@ var VercelRSCAssistantProvider = ({
       true
     );
   }, [context, messages, isRunning, append, startRun]);
-  return /* @__PURE__ */ jsx20(AssistantContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx22(AssistantContext.Provider, { value: context, children });
 };
 export {
   actionBar_exports as ActionBarPrimitive,
   branchPicker_exports as BranchPickerPrimitive,
   composer_exports as ComposerPrimitive,
+  contentPart_exports as ContentPartPrimitive,
   message_exports as MessagePrimitive,
   thread_exports as ThreadPrimitive,
   VercelAIAssistantProvider,
   VercelRSCAssistantProvider,
+  getVercelMessage as unstable_getVercelMessage,
+  getVercelRSCMessage as unstable_getVercelRSCMessage,
   useMessageContext as unstable_useMessageContext,
   useBeginMessageEdit,
   useCopyMessage,