@assistant-ui/react 0.0.9 → 0.0.10

package/dist/index.d.mts

@@ -21,7 +21,7 @@ type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyo
 
 type ThreadIfFilters = {
     empty: boolean | undefined;
-    busy: boolean | undefined;
+    running: boolean | undefined;
 };
 type ThreadIfProps = PropsWithChildren<RequireAtLeastOne<ThreadIfFilters>>;
 declare const ThreadIf: FC<ThreadIfProps>;
@@ -91,17 +91,16 @@ declare namespace index$3 {
   export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
 }
 
-type ComposerState = {
+type BaseComposerState = {
+    value: string;
+    setValue: (value: string) => void;
+};
+type MessageComposerState = BaseComposerState & {
     isEditing: boolean;
-    canCancel: boolean;
+    canCancel: true;
     edit: () => void;
     send: () => void;
     cancel: () => void;
-    value: string;
-    setValue: (value: string) => void;
-};
-type ComposerStore = {
-    useComposer: UseBoundStore<StoreApi<ComposerState>>;
 };
 
 type ThreadMessageTextPart = {
@@ -226,7 +225,7 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
 } & {
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    hideWhenBusy?: boolean;
+    hideWhenRunning?: boolean;
     autohide?: "always" | "not-last" | "never";
     autohideFloat?: "always" | "single-branch" | "never";
 } & react.RefAttributes<HTMLDivElement>>;
@@ -283,8 +282,9 @@ type MessageState = {
     isHovering: boolean;
     setIsHovering: (value: boolean) => void;
 };
-type MessageStore = ComposerStore & {
+type MessageStore = {
     useMessage: UseBoundStore<StoreApi<MessageState>>;
+    useComposer: UseBoundStore<StoreApi<MessageComposerState>>;
 };
 
 declare const useMessageContext: () => MessageStore;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyo
 
 type ThreadIfFilters = {
     empty: boolean | undefined;
-    busy: boolean | undefined;
+    running: boolean | undefined;
 };
 type ThreadIfProps = PropsWithChildren<RequireAtLeastOne<ThreadIfFilters>>;
 declare const ThreadIf: FC<ThreadIfProps>;
@@ -91,17 +91,16 @@ declare namespace index$3 {
   export { ComposerCancel as Cancel, ComposerIf as If, ComposerInput as Input, ComposerRoot as Root, ComposerSend as Send };
 }
 
-type ComposerState = {
+type BaseComposerState = {
+    value: string;
+    setValue: (value: string) => void;
+};
+type MessageComposerState = BaseComposerState & {
     isEditing: boolean;
-    canCancel: boolean;
+    canCancel: true;
     edit: () => void;
     send: () => void;
     cancel: () => void;
-    value: string;
-    setValue: (value: string) => void;
-};
-type ComposerStore = {
-    useComposer: UseBoundStore<StoreApi<ComposerState>>;
 };
 
 type ThreadMessageTextPart = {
@@ -226,7 +225,7 @@ declare const ActionBarRoot: react.ForwardRefExoticComponent<Pick<Omit<react.Det
 } & {
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    hideWhenBusy?: boolean;
+    hideWhenRunning?: boolean;
     autohide?: "always" | "not-last" | "never";
     autohideFloat?: "always" | "single-branch" | "never";
 } & react.RefAttributes<HTMLDivElement>>;
@@ -283,8 +282,9 @@ type MessageState = {
     isHovering: boolean;
     setIsHovering: (value: boolean) => void;
 };
-type MessageStore = ComposerStore & {
+type MessageStore = {
     useMessage: UseBoundStore<StoreApi<MessageState>>;
+    useComposer: UseBoundStore<StoreApi<MessageComposerState>>;
 };
 
 declare const useMessageContext: () => MessageStore;

package/dist/index.js

@@ -86,9 +86,9 @@ var useThreadIf = (props) => {
       return false;
     if (props.empty === false && thread.messages.length === 0)
       return false;
-    if (props.busy === true && !thread.isLoading)
+    if (props.running === true && !thread.isRunning)
       return false;
-    if (props.busy === false && thread.isLoading)
+    if (props.running === false && thread.isRunning)
       return false;
     return true;
   });
@@ -153,12 +153,12 @@ var import_react4 = require("react");
 var useOnScrollToBottom = (callback) => {
   const callbackRef = (0, import_react4.useRef)(callback);
   callbackRef.current = callback;
-  const { useThread } = useAssistantContext();
+  const { useViewport } = useAssistantContext();
   (0, import_react4.useEffect)(() => {
-    return useThread.getState().onScrollToBottom(() => {
+    return useViewport.getState().onScrollToBottom(() => {
       callbackRef.current();
     });
-  }, [useThread]);
+  }, [useViewport]);
 };
 
 // src/primitives/thread/ThreadViewport.tsx
@@ -166,7 +166,7 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
   const messagesEndRef = (0, import_react5.useRef)(null);
   const divRef = (0, import_react5.useRef)(null);
   const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
-  const { useThread } = useAssistantContext();
+  const { useViewport } = useAssistantContext();
   const firstRenderRef = (0, import_react5.useRef)(true);
   const lastScrollTop = (0, import_react5.useRef)(0);
   const scrollToBottom = () => {
@@ -175,11 +175,11 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
       return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
-    useThread.setState({ isAtBottom: true });
+    useViewport.setState({ isAtBottom: true });
     div.scrollIntoView({ behavior });
   };
   useOnResizeContent(divRef, () => {
-    if (!useThread.getState().isAtBottom)
+    if (!useViewport.getState().isAtBottom)
       return;
     scrollToBottom();
   });
@@ -190,11 +190,11 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
     const div = divRef.current;
     if (!div)
       return;
-    const isAtBottom = useThread.getState().isAtBottom;
+    const isAtBottom = useViewport.getState().isAtBottom;
     const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
     } else if (newIsAtBottom !== isAtBottom) {
-      useThread.setState({ isAtBottom: newIsAtBottom });
+      useViewport.setState({ isAtBottom: newIsAtBottom });
     }
     lastScrollTop.current = div.scrollTop;
   };
@@ -310,13 +310,13 @@ var useVercelAIBranches = (chat, context) => {
     [data, chat.messages, chat.setMessages]
   );
   const reloadMaybe = "reload" in chat ? chat.reload : void 0;
-  const reload = (0, import_react6.useCallback)(
-    async (messageId) => {
+  const startRun = (0, import_react6.useCallback)(
+    async (parentId) => {
       if (!reloadMaybe)
         throw new Error("Reload not supported by Vercel AI SDK's useAssistant");
-      const newMessages = sliceMessagesUntil(chat.messages, messageId);
+      const newMessages = sliceMessagesUntil(chat.messages, parentId);
       chat.setMessages(newMessages);
-      context.useThread.getState().scrollToBottom();
+      context.useViewport.getState().scrollToBottom();
       await reloadMaybe();
     },
     [context, chat.messages, chat.setMessages, reloadMaybe]
@@ -327,7 +327,7 @@ var useVercelAIBranches = (chat, context) => {
       chat.setMessages(newMessages);
       if (message.content.length !== 1 || message.content[0]?.type !== "text")
         throw new Error("Only text content is currently supported");
-      context.useThread.getState().scrollToBottom();
+      context.useViewport.getState().scrollToBottom();
       await chat.append({
         role: "user",
         content: message.content[0].text
@@ -340,13 +340,13 @@ var useVercelAIBranches = (chat, context) => {
       getBranchState,
       switchToBranch,
       append,
-      reload
+      startRun
     }),
-    [getBranchState, switchToBranch, append, reload]
+    [getBranchState, switchToBranch, append, startRun]
   );
 };
 var hasUpcomingMessage = (thread) => {
-  return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
+  return thread.isRunning && thread.messages[thread.messages.length - 1]?.role !== "assistant";
 };
 
 // src/utils/context/useComposerContext.ts
@@ -399,7 +399,54 @@ __export(message_exports, {
 
 // src/primitives/message/MessageProvider.tsx
 var import_react9 = require("react");
+var import_zustand2 = require("zustand");
+
+// src/utils/context/stores/ComposerStore.ts
 var import_zustand = require("zustand");
+var makeBaseComposer = (set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+  }
+});
+var makeMessageComposerStore = ({
+  onEdit,
+  onSend
+}) => (0, import_zustand.create)()((set, get, store) => ({
+  ...makeBaseComposer(set, get, store),
+  canCancel: true,
+  isEditing: false,
+  edit: () => {
+    const value = onEdit();
+    set({ isEditing: true, value });
+  },
+  send: () => {
+    const value = get().value;
+    set({ isEditing: false });
+    return onSend(value);
+  },
+  cancel: () => {
+    set({ isEditing: false });
+  }
+}));
+var makeThreadComposerStore = ({
+  onSend,
+  onCancel
+}) => (0, import_zustand.create)()((set, get, store) => ({
+  ...makeBaseComposer(set, get, store),
+  isEditing: true,
+  canCancel: false,
+  send: () => {
+    const value = get().value;
+    set({ value: "", canCancel: true });
+    onSend(value).then(() => {
+      set({ canCancel: false });
+    });
+  },
+  cancel: onCancel
+}));
+
+// src/primitives/message/MessageProvider.tsx
 var getIsLast = (thread, message) => {
   const hasUpcoming = hasUpcomingMessage(thread);
   return hasUpcoming ? message.id === UPCOMING_MESSAGE_ID : thread.messages[thread.messages.length - 1]?.id === message.id;
@@ -407,7 +454,7 @@ var getIsLast = (thread, message) => {
 var useMessageContext2 = () => {
   const [context] = (0, import_react9.useState)(() => {
     const { useThread } = useAssistantContext();
-    const useMessage = (0, import_zustand.create)(() => ({
+    const useMessage = (0, import_zustand2.create)(() => ({
       message: null,
       isLast: false,
       isCopied: false,
@@ -417,34 +464,23 @@ var useMessageContext2 = () => {
       setIsHovering: () => {
       }
     }));
-    const useComposer = (0, import_zustand.create)((set, get) => ({
-      isEditing: false,
-      canCancel: true,
-      edit: () => {
+    const useComposer = makeMessageComposerStore({
+      onEdit: () => {
         const message = useMessage.getState().message;
         if (message.role !== "user")
           throw new Error("Editing is only supported for user messages");
         if (message.content[0]?.type !== "text")
           throw new Error("Editing is only supported for text-only messages");
-        return set({
-          isEditing: true,
-          value: message.content[0].text
-        });
+        return message.content[0].text;
       },
-      cancel: () => set({ isEditing: false }),
-      send: () => {
+      onSend: (text) => {
         const message = useMessage.getState().message;
-        if (message.role !== "user")
-          throw new Error("Editing is only supported for user messages");
-        useThread.getState().append({
+        return useThread.getState().append({
           parentId: message.parentId,
-          content: [{ type: "text", text: get().value }]
+          content: [{ type: "text", text }]
         });
-        set({ isEditing: false });
-      },
-      value: "",
-      setValue: (value) => set({ value })
-    }));
+      }
+    });
     return { useMessage, useComposer };
   });
   return context;
@@ -605,11 +641,10 @@ var import_primitive3 = require("@radix-ui/primitive");
 var import_react_primitive4 = require("@radix-ui/react-primitive");
 var import_react11 = require("react");
 var ThreadScrollToBottom = (0, import_react11.forwardRef)(({ onClick, ...rest }, ref) => {
-  const { useThread } = useAssistantContext();
-  const isAtBottom = useThread((s) => s.isAtBottom);
+  const { useViewport } = useAssistantContext();
+  const isAtBottom = useViewport((s) => s.isAtBottom);
   const handleScrollToBottom = () => {
-    const thread = useThread.getState();
-    thread.scrollToBottom();
+    useViewport.getState().scrollToBottom();
   };
   return /* @__PURE__ */ React.createElement(
     import_react_primitive4.Primitive.button,
@@ -685,8 +720,8 @@ var ComposerInput = (0, import_react13.forwardRef)(
         useComposer.getState().cancel();
       }
       if (e.key === "Enter" && e.shiftKey === false) {
-        const isLoading = useThread.getState().isLoading;
-        if (!isLoading) {
+        const isRunning = useThread.getState().isRunning;
+        if (!isRunning) {
           e.preventDefault();
           composer.send();
         }
@@ -813,7 +848,7 @@ var useGoToNextBranch = () => {
   const { useComposer, useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
+    (t, c, m) => t.isRunning || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
   );
   if (disabled)
     return null;
@@ -854,7 +889,7 @@ var useGoToPreviousBranch = () => {
   const { useComposer, useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId <= 0
+    (t, c, m) => t.isRunning || c.isEditing || m.message.branchId <= 0
   );
   if (disabled)
     return null;
@@ -900,13 +935,13 @@ __export(actionBar_exports, {
 // src/primitives/actionBar/ActionBarRoot.tsx
 var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react20 = require("react");
-var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenBusy, autohide, autohideFloat, ...rest }, ref) => {
+var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
     [useThread, useMessage],
     (t, m) => {
-      if (hideWhenBusy && t.isLoading)
+      if (hideWhenRunning && t.isRunning)
         return "hidden" /* Hidden */;
       const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
       if (!autohideEnabled)
@@ -955,7 +990,7 @@ var useReloadMessage = () => {
   const { useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useMessage],
-    (t, m) => t.isLoading || m.message.role !== "assistant"
+    (t, m) => t.isRunning || m.message.role !== "assistant"
   );
   if (disabled)
     return null;
@@ -963,7 +998,7 @@ var useReloadMessage = () => {
     const message = useMessage.getState().message;
     if (message.role !== "assistant")
       throw new Error("Reloading is only supported on assistant messages");
-    useThread.getState().reload(message.id);
+    useThread.getState().startRun(message.parentId);
   };
 };
 
@@ -993,60 +1028,61 @@ var import_react22 = require("react");
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
 var import_react21 = require("react");
-var import_zustand2 = require("zustand");
+var import_zustand4 = require("zustand");
+
+// src/utils/context/stores/ViewportStore.tsx
+var import_zustand3 = require("zustand");
+var makeViewportStore = () => {
+  const scrollToBottomListeners = /* @__PURE__ */ new Set();
+  return (0, import_zustand3.create)(() => ({
+    isAtBottom: true,
+    scrollToBottom: () => {
+      for (const listener of scrollToBottomListeners) {
+        listener();
+      }
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    }
+  }));
+};
+
+// src/adapters/vercel/useDummyAIAssistantContext.tsx
 var useDummyAIAssistantContext = () => {
   const [context] = (0, import_react21.useState)(() => {
-    const scrollToBottomListeners = /* @__PURE__ */ new Set();
-    const useThread = (0, import_zustand2.create)()(() => ({
+    const useThread = (0, import_zustand4.create)()(() => ({
+      id: "",
       messages: [],
-      isLoading: false,
+      isRunning: false,
       append: async () => {
         throw new Error("Not implemented");
       },
-      stop: () => {
+      cancelRun: () => {
         throw new Error("Not implemented");
       },
       switchToBranch: () => {
         throw new Error("Not implemented");
       },
-      reload: async () => {
+      startRun: async () => {
         throw new Error("Not implemented");
-      },
-      isAtBottom: true,
-      scrollToBottom: () => {
-        for (const listener of scrollToBottomListeners) {
-          listener();
-        }
-      },
-      onScrollToBottom: (callback) => {
-        scrollToBottomListeners.add(callback);
-        return () => {
-          scrollToBottomListeners.delete(callback);
-        };
       }
     }));
-    const useComposer = (0, import_zustand2.create)()(() => ({
-      isEditing: true,
-      canCancel: false,
-      value: "",
-      setValue: (value) => {
-        useComposer.setState({ value });
-      },
-      edit: () => {
-        throw new Error("Not implemented");
-      },
-      send: () => {
-        useThread.getState().append({
+    const useViewport = makeViewportStore();
+    const useComposer = makeThreadComposerStore({
+      onSend: async (text) => {
+        await useThread.getState().append({
           parentId: useThread.getState().messages.at(-1)?.id ?? ROOT_PARENT_ID,
-          content: [{ type: "text", text: useComposer.getState().value }]
+          content: [{ type: "text", text }]
         });
-        useComposer.getState().setValue("");
       },
-      cancel: () => {
-        useThread.getState().stop();
+      onCancel: () => {
+        useThread.getState().cancelRun();
       }
-    }));
-    return { useThread, useComposer };
+    });
+    return { useThread, useViewport, useComposer };
   });
   return context;
 };
@@ -1096,31 +1132,31 @@ var VercelAIAssistantProvider = ({
       branches.getBranchState
     );
   }, [vercel.messages, branches.getBranchState]);
-  const stop = (0, import_react22.useCallback)(() => {
+  const cancelRun = (0, import_react22.useCallback)(() => {
     const lastMessage = vercel.messages.at(-1);
     vercel.stop();
     if (lastMessage?.role === "user") {
       vercel.setInput(lastMessage.content);
     }
   }, [vercel.messages, vercel.stop, vercel.setInput]);
-  const isLoading = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
+  const isRunning = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
   (0, import_react22.useMemo)(() => {
     context.useThread.setState({
       messages,
-      isLoading,
-      stop,
+      isRunning,
+      cancelRun,
       switchToBranch: branches.switchToBranch,
       append: branches.append,
-      reload: branches.reload
+      startRun: branches.startRun
     });
-  }, [context, messages, isLoading, stop, branches]);
+  }, [context, messages, isRunning, cancelRun, branches]);
   (0, import_react22.useMemo)(() => {
     context.useComposer.setState({
-      canCancel: isLoading,
+      canCancel: isRunning,
       value: vercel.input,
       setValue: vercel.setInput
     });
-  }, [context, isLoading, vercel.input, vercel.setInput]);
+  }, [context, isRunning, vercel.input, vercel.setInput]);
   return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
 };
 
@@ -1167,7 +1203,7 @@ var VercelRSCAssistantProvider = ({
       if (message.content[0]?.type !== "text") {
         throw new Error("Only text content is currently supported");
       }
-      context.useThread.getState().scrollToBottom();
+      context.useViewport.getState().scrollToBottom();
       await vercelAppend(message);
     },
     [context, vercelAppend]

package/dist/index.mjs

@@ -46,9 +46,9 @@ var useThreadIf = (props) => {
       return false;
     if (props.empty === false && thread.messages.length === 0)
       return false;
-    if (props.busy === true && !thread.isLoading)
+    if (props.running === true && !thread.isRunning)
       return false;
-    if (props.busy === false && thread.isLoading)
+    if (props.running === false && thread.isRunning)
       return false;
     return true;
   });
@@ -115,12 +115,12 @@ import { useEffect, useRef as useRef2 } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useRef2(callback);
   callbackRef.current = callback;
-  const { useThread } = useAssistantContext();
+  const { useViewport } = useAssistantContext();
   useEffect(() => {
-    return useThread.getState().onScrollToBottom(() => {
+    return useViewport.getState().onScrollToBottom(() => {
       callbackRef.current();
     });
-  }, [useThread]);
+  }, [useViewport]);
 };
 
 // src/primitives/thread/ThreadViewport.tsx
@@ -128,7 +128,7 @@ var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...re
   const messagesEndRef = useRef3(null);
   const divRef = useRef3(null);
   const ref = useComposedRefs(forwardedRef, divRef);
-  const { useThread } = useAssistantContext();
+  const { useViewport } = useAssistantContext();
   const firstRenderRef = useRef3(true);
   const lastScrollTop = useRef3(0);
   const scrollToBottom = () => {
@@ -137,11 +137,11 @@ var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...re
       return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
-    useThread.setState({ isAtBottom: true });
+    useViewport.setState({ isAtBottom: true });
     div.scrollIntoView({ behavior });
   };
   useOnResizeContent(divRef, () => {
-    if (!useThread.getState().isAtBottom)
+    if (!useViewport.getState().isAtBottom)
       return;
     scrollToBottom();
   });
@@ -152,11 +152,11 @@ var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...re
     const div = divRef.current;
     if (!div)
       return;
-    const isAtBottom = useThread.getState().isAtBottom;
+    const isAtBottom = useViewport.getState().isAtBottom;
     const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
     } else if (newIsAtBottom !== isAtBottom) {
-      useThread.setState({ isAtBottom: newIsAtBottom });
+      useViewport.setState({ isAtBottom: newIsAtBottom });
     }
     lastScrollTop.current = div.scrollTop;
   };
@@ -272,13 +272,13 @@ var useVercelAIBranches = (chat, context) => {
     [data, chat.messages, chat.setMessages]
   );
   const reloadMaybe = "reload" in chat ? chat.reload : void 0;
-  const reload = useCallback(
-    async (messageId) => {
+  const startRun = useCallback(
+    async (parentId) => {
       if (!reloadMaybe)
         throw new Error("Reload not supported by Vercel AI SDK's useAssistant");
-      const newMessages = sliceMessagesUntil(chat.messages, messageId);
+      const newMessages = sliceMessagesUntil(chat.messages, parentId);
       chat.setMessages(newMessages);
-      context.useThread.getState().scrollToBottom();
+      context.useViewport.getState().scrollToBottom();
       await reloadMaybe();
     },
     [context, chat.messages, chat.setMessages, reloadMaybe]
@@ -289,7 +289,7 @@ var useVercelAIBranches = (chat, context) => {
       chat.setMessages(newMessages);
       if (message.content.length !== 1 || message.content[0]?.type !== "text")
         throw new Error("Only text content is currently supported");
-      context.useThread.getState().scrollToBottom();
+      context.useViewport.getState().scrollToBottom();
       await chat.append({
         role: "user",
         content: message.content[0].text
@@ -302,13 +302,13 @@ var useVercelAIBranches = (chat, context) => {
       getBranchState,
       switchToBranch,
       append,
-      reload
+      startRun
     }),
-    [getBranchState, switchToBranch, append, reload]
+    [getBranchState, switchToBranch, append, startRun]
   );
 };
 var hasUpcomingMessage = (thread) => {
-  return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
+  return thread.isRunning && thread.messages[thread.messages.length - 1]?.role !== "assistant";
 };
 
 // src/utils/context/useComposerContext.ts
@@ -361,7 +361,56 @@ __export(message_exports, {
 
 // src/primitives/message/MessageProvider.tsx
 import { useMemo as useMemo2, useState } from "react";
-import { create } from "zustand";
+import { create as create2 } from "zustand";
+
+// src/utils/context/stores/ComposerStore.ts
+import {
+  create
+} from "zustand";
+var makeBaseComposer = (set) => ({
+  value: "",
+  setValue: (value) => {
+    set({ value });
+  }
+});
+var makeMessageComposerStore = ({
+  onEdit,
+  onSend
+}) => create()((set, get, store) => ({
+  ...makeBaseComposer(set, get, store),
+  canCancel: true,
+  isEditing: false,
+  edit: () => {
+    const value = onEdit();
+    set({ isEditing: true, value });
+  },
+  send: () => {
+    const value = get().value;
+    set({ isEditing: false });
+    return onSend(value);
+  },
+  cancel: () => {
+    set({ isEditing: false });
+  }
+}));
+var makeThreadComposerStore = ({
+  onSend,
+  onCancel
+}) => create()((set, get, store) => ({
+  ...makeBaseComposer(set, get, store),
+  isEditing: true,
+  canCancel: false,
+  send: () => {
+    const value = get().value;
+    set({ value: "", canCancel: true });
+    onSend(value).then(() => {
+      set({ canCancel: false });
+    });
+  },
+  cancel: onCancel
+}));
+
+// src/primitives/message/MessageProvider.tsx
 var getIsLast = (thread, message) => {
   const hasUpcoming = hasUpcomingMessage(thread);
   return hasUpcoming ? message.id === UPCOMING_MESSAGE_ID : thread.messages[thread.messages.length - 1]?.id === message.id;
@@ -369,7 +418,7 @@ var getIsLast = (thread, message) => {
 var useMessageContext2 = () => {
   const [context] = useState(() => {
     const { useThread } = useAssistantContext();
-    const useMessage = create(() => ({
+    const useMessage = create2(() => ({
       message: null,
       isLast: false,
       isCopied: false,
@@ -379,34 +428,23 @@ var useMessageContext2 = () => {
       setIsHovering: () => {
       }
     }));
-    const useComposer = create((set, get) => ({
-      isEditing: false,
-      canCancel: true,
-      edit: () => {
+    const useComposer = makeMessageComposerStore({
+      onEdit: () => {
         const message = useMessage.getState().message;
         if (message.role !== "user")
           throw new Error("Editing is only supported for user messages");
         if (message.content[0]?.type !== "text")
           throw new Error("Editing is only supported for text-only messages");
-        return set({
-          isEditing: true,
-          value: message.content[0].text
-        });
+        return message.content[0].text;
       },
-      cancel: () => set({ isEditing: false }),
-      send: () => {
+      onSend: (text) => {
         const message = useMessage.getState().message;
-        if (message.role !== "user")
-          throw new Error("Editing is only supported for user messages");
-        useThread.getState().append({
+        return useThread.getState().append({
           parentId: message.parentId,
-          content: [{ type: "text", text: get().value }]
+          content: [{ type: "text", text }]
         });
-        set({ isEditing: false });
-      },
-      value: "",
-      setValue: (value) => set({ value })
-    }));
+      }
+    });
     return { useMessage, useComposer };
   });
   return context;
@@ -571,11 +609,10 @@ import {
 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef4 } from "react";
 var ThreadScrollToBottom = forwardRef4(({ onClick, ...rest }, ref) => {
-  const { useThread } = useAssistantContext();
-  const isAtBottom = useThread((s) => s.isAtBottom);
+  const { useViewport } = useAssistantContext();
+  const isAtBottom = useViewport((s) => s.isAtBottom);
   const handleScrollToBottom = () => {
-    const thread = useThread.getState();
-    thread.scrollToBottom();
+    useViewport.getState().scrollToBottom();
   };
   return /* @__PURE__ */ React.createElement(
     Primitive4.button,
@@ -658,8 +695,8 @@ var ComposerInput = forwardRef6(
         useComposer.getState().cancel();
       }
       if (e.key === "Enter" && e.shiftKey === false) {
-        const isLoading = useThread.getState().isLoading;
-        if (!isLoading) {
+        const isRunning = useThread.getState().isRunning;
+        if (!isRunning) {
           e.preventDefault();
           composer.send();
         }
@@ -790,7 +827,7 @@ var useGoToNextBranch = () => {
   const { useComposer, useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
+    (t, c, m) => t.isRunning || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
   );
   if (disabled)
     return null;
@@ -833,7 +870,7 @@ var useGoToPreviousBranch = () => {
   const { useComposer, useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId <= 0
+    (t, c, m) => t.isRunning || c.isEditing || m.message.branchId <= 0
   );
   if (disabled)
     return null;
@@ -883,13 +920,13 @@ import {
   Primitive as Primitive10
 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef11 } from "react";
-var ActionBarRoot = forwardRef11(({ hideWhenBusy, autohide, autohideFloat, ...rest }, ref) => {
+var ActionBarRoot = forwardRef11(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
     [useThread, useMessage],
     (t, m) => {
-      if (hideWhenBusy && t.isLoading)
+      if (hideWhenRunning && t.isRunning)
         return "hidden" /* Hidden */;
       const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
       if (!autohideEnabled)
@@ -938,7 +975,7 @@ var useReloadMessage = () => {
   const { useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useMessage],
-    (t, m) => t.isLoading || m.message.role !== "assistant"
+    (t, m) => t.isRunning || m.message.role !== "assistant"
   );
   if (disabled)
     return null;
@@ -946,7 +983,7 @@ var useReloadMessage = () => {
     const message = useMessage.getState().message;
     if (message.role !== "assistant")
       throw new Error("Reloading is only supported on assistant messages");
-    useThread.getState().reload(message.id);
+    useThread.getState().startRun(message.parentId);
   };
 };
 
@@ -976,60 +1013,61 @@ import { useCallback as useCallback3, useMemo as useMemo4 } from "react";
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
 import { useState as useState2 } from "react";
-import { create as create2 } from "zustand";
+import { create as create4 } from "zustand";
+
+// src/utils/context/stores/ViewportStore.tsx
+import { create as create3 } from "zustand";
+var makeViewportStore = () => {
+  const scrollToBottomListeners = /* @__PURE__ */ new Set();
+  return create3(() => ({
+    isAtBottom: true,
+    scrollToBottom: () => {
+      for (const listener of scrollToBottomListeners) {
+        listener();
+      }
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    }
+  }));
+};
+
+// src/adapters/vercel/useDummyAIAssistantContext.tsx
 var useDummyAIAssistantContext = () => {
   const [context] = useState2(() => {
-    const scrollToBottomListeners = /* @__PURE__ */ new Set();
-    const useThread = create2()(() => ({
+    const useThread = create4()(() => ({
+      id: "",
       messages: [],
-      isLoading: false,
+      isRunning: false,
       append: async () => {
         throw new Error("Not implemented");
       },
-      stop: () => {
+      cancelRun: () => {
         throw new Error("Not implemented");
       },
       switchToBranch: () => {
         throw new Error("Not implemented");
       },
-      reload: async () => {
+      startRun: async () => {
         throw new Error("Not implemented");
-      },
-      isAtBottom: true,
-      scrollToBottom: () => {
-        for (const listener of scrollToBottomListeners) {
-          listener();
-        }
-      },
-      onScrollToBottom: (callback) => {
-        scrollToBottomListeners.add(callback);
-        return () => {
-          scrollToBottomListeners.delete(callback);
-        };
       }
     }));
-    const useComposer = create2()(() => ({
-      isEditing: true,
-      canCancel: false,
-      value: "",
-      setValue: (value) => {
-        useComposer.setState({ value });
-      },
-      edit: () => {
-        throw new Error("Not implemented");
-      },
-      send: () => {
-        useThread.getState().append({
+    const useViewport = makeViewportStore();
+    const useComposer = makeThreadComposerStore({
+      onSend: async (text) => {
+        await useThread.getState().append({
           parentId: useThread.getState().messages.at(-1)?.id ?? ROOT_PARENT_ID,
-          content: [{ type: "text", text: useComposer.getState().value }]
+          content: [{ type: "text", text }]
         });
-        useComposer.getState().setValue("");
       },
-      cancel: () => {
-        useThread.getState().stop();
+      onCancel: () => {
+        useThread.getState().cancelRun();
       }
-    }));
-    return { useThread, useComposer };
+    });
+    return { useThread, useViewport, useComposer };
   });
   return context;
 };
@@ -1079,31 +1117,31 @@ var VercelAIAssistantProvider = ({
       branches.getBranchState
     );
   }, [vercel.messages, branches.getBranchState]);
-  const stop = useCallback3(() => {
+  const cancelRun = useCallback3(() => {
     const lastMessage = vercel.messages.at(-1);
     vercel.stop();
     if (lastMessage?.role === "user") {
       vercel.setInput(lastMessage.content);
     }
   }, [vercel.messages, vercel.stop, vercel.setInput]);
-  const isLoading = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
+  const isRunning = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
   useMemo4(() => {
     context.useThread.setState({
       messages,
-      isLoading,
-      stop,
+      isRunning,
+      cancelRun,
       switchToBranch: branches.switchToBranch,
       append: branches.append,
-      reload: branches.reload
+      startRun: branches.startRun
     });
-  }, [context, messages, isLoading, stop, branches]);
+  }, [context, messages, isRunning, cancelRun, branches]);
   useMemo4(() => {
     context.useComposer.setState({
-      canCancel: isLoading,
+      canCancel: isRunning,
       value: vercel.input,
       setValue: vercel.setInput
     });
-  }, [context, isLoading, vercel.input, vercel.setInput]);
+  }, [context, isRunning, vercel.input, vercel.setInput]);
   return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
 };
 
@@ -1153,7 +1191,7 @@ var VercelRSCAssistantProvider = ({
       if (message.content[0]?.type !== "text") {
         throw new Error("Only text content is currently supported");
       }
-      context.useThread.getState().scrollToBottom();
+      context.useViewport.getState().scrollToBottom();
       await vercelAppend(message);
     },
     [context, vercelAppend]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "MIT",
   "exports": {
     ".": {