@assistant-ui/react 0.0.9 → 0.0.11

package/dist/index.js

@@ -58,11 +58,12 @@ __export(thread_exports, {
 });
 
 // src/primitives/thread/ThreadRoot.tsx
-var import_react = require("react");
 var import_react_primitive = require("@radix-ui/react-primitive");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 var ThreadRoot = (0, import_react.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ React.createElement(import_react_primitive.Primitive.div, { ...props, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref });
   }
 );
 
@@ -86,9 +87,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;
   });
@@ -99,8 +100,9 @@ var ThreadIf = ({ children, ...query }) => {
 };
 
 // src/primitives/thread/ThreadEmpty.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ThreadEmpty = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(ThreadIf, { empty: true }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThreadIf, { empty: true, children });
 };
 
 // src/primitives/thread/ThreadViewport.tsx
@@ -153,20 +155,21 @@ 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
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
   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 +178,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,173 +193,36 @@ 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;
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_react_primitive2.Primitive.div,
     {
       ...rest,
       onScroll: (0, import_primitive.composeEventHandlers)(onScroll, handleScroll),
-      ref
-    },
-    children,
-    /* @__PURE__ */ React.createElement("div", { ref: messagesEndRef })
-  );
-});
-
-// src/adapters/vercel/useVercelAIBranches.tsx
-var import_react6 = require("react");
-
-// src/utils/context/stores/AssistantTypes.ts
-var ROOT_PARENT_ID = "__ROOT_ID__";
-
-// src/adapters/vercel/useVercelAIBranches.tsx
-var UPCOMING_MESSAGE_ID = "__UPCOMING_MESSAGE_ID__";
-var updateBranchData = (data, messages) => {
-  for (let i = 0; i < messages.length; i++) {
-    const child = messages[i];
-    const childId = child.id;
-    const parentId = messages[i - 1]?.id ?? ROOT_PARENT_ID;
-    data.parentMap.set(childId, parentId);
-    const parentArray = data.branchMap.get(parentId);
-    if (!parentArray) {
-      data.branchMap.set(parentId, [childId]);
-    } else if (!parentArray.includes(childId)) {
-      parentArray.push(childId);
+      ref,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
+      ]
     }
-    data.snapshots.set(childId, messages);
-  }
-};
-var getParentId = (data, messages, messageId) => {
-  if (messageId === UPCOMING_MESSAGE_ID) {
-    const parent = messages.at(-1);
-    if (!parent)
-      return ROOT_PARENT_ID;
-    return parent.id;
-  }
-  const parentId = data.parentMap.get(messageId);
-  if (!parentId)
-    throw new Error("Unexpected: Message parent not found");
-  return parentId;
-};
-var getBranchStateImpl = (data, messages, messageId) => {
-  const parentId = getParentId(data, messages, messageId);
-  const branches = data.branchMap.get(parentId) ?? [];
-  const branchId = messageId === UPCOMING_MESSAGE_ID ? branches.length : branches.indexOf(messageId);
-  if (branchId === -1)
-    throw new Error("Unexpected: Message not found in parent children");
-  const upcomingOffset = messageId === UPCOMING_MESSAGE_ID ? 1 : 0;
-  return {
-    branchId,
-    branchCount: branches.length + upcomingOffset
-  };
-};
-var switchToBranchImpl = (data, messages, messageId, branchId) => {
-  const parentId = getParentId(data, messages, messageId);
-  const branches = data.branchMap.get(parentId);
-  if (!branches)
-    throw new Error("Unexpected: Parent children not found");
-  const newMessageId = branches[branchId];
-  if (!newMessageId)
-    throw new Error("Unexpected: Requested branch not found");
-  if (branchId < 0 || branchId >= branches.length)
-    throw new Error("Switch to branch called with a branch index out of range");
-  if (newMessageId === messageId)
-    return messages;
-  const snapshot = data.snapshots.get(newMessageId);
-  if (!snapshot)
-    throw new Error("Unexpected: Branch snapshot not found");
-  return snapshot;
-};
-var sliceMessagesUntil = (messages, messageId) => {
-  if (messageId === ROOT_PARENT_ID)
-    return [];
-  if (messageId === UPCOMING_MESSAGE_ID)
-    return messages;
-  const messageIdx = messages.findIndex((m) => m.id === messageId);
-  if (messageIdx === -1)
-    throw new Error("Unexpected: Message not found");
-  return messages.slice(0, messageIdx + 1);
-};
-var useVercelAIBranches = (chat, context) => {
-  const data = (0, import_react6.useRef)({
-    parentMap: /* @__PURE__ */ new Map(),
-    branchMap: /* @__PURE__ */ new Map(),
-    snapshots: /* @__PURE__ */ new Map()
-  }).current;
-  updateBranchData(data, chat.messages);
-  const getBranchState = (0, import_react6.useCallback)(
-    (messageId) => {
-      return getBranchStateImpl(data, chat.messages, messageId);
-    },
-    [data, chat.messages]
   );
-  const switchToBranch = (0, import_react6.useCallback)(
-    (messageId, branchId) => {
-      const newMessages = switchToBranchImpl(
-        data,
-        chat.messages,
-        messageId,
-        branchId
-      );
-      chat.setMessages(newMessages);
-    },
-    [data, chat.messages, chat.setMessages]
-  );
-  const reloadMaybe = "reload" in chat ? chat.reload : void 0;
-  const reload = (0, import_react6.useCallback)(
-    async (messageId) => {
-      if (!reloadMaybe)
-        throw new Error("Reload not supported by Vercel AI SDK's useAssistant");
-      const newMessages = sliceMessagesUntil(chat.messages, messageId);
-      chat.setMessages(newMessages);
-      context.useThread.getState().scrollToBottom();
-      await reloadMaybe();
-    },
-    [context, chat.messages, chat.setMessages, reloadMaybe]
-  );
-  const append = (0, import_react6.useCallback)(
-    async (message) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message.parentId);
-      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();
-      await chat.append({
-        role: "user",
-        content: message.content[0].text
-      });
-    },
-    [context, chat.messages, chat.setMessages, chat.append]
-  );
-  return (0, import_react6.useMemo)(
-    () => ({
-      getBranchState,
-      switchToBranch,
-      append,
-      reload
-    }),
-    [getBranchState, switchToBranch, append, reload]
-  );
-};
-var hasUpcomingMessage = (thread) => {
-  return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
-};
+});
 
 // src/utils/context/useComposerContext.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 
 // src/utils/context/useMessageContext.ts
-var import_react7 = require("react");
-var MessageContext = (0, import_react7.createContext)(null);
+var import_react6 = require("react");
+var MessageContext = (0, import_react6.createContext)(null);
 var useMessageContext = () => {
-  const context = (0, import_react7.useContext)(MessageContext);
+  const context = (0, import_react6.useContext)(MessageContext);
   if (!context)
     throw new Error("useMessageContext must be used within a MessageProvider");
   return context;
@@ -365,7 +231,7 @@ var useMessageContext = () => {
 // src/utils/context/useComposerContext.ts
 var useComposerContext = () => {
   const { useComposer: useAssisstantComposer } = useAssistantContext();
-  const { useComposer: useMessageComposer } = (0, import_react8.useContext)(MessageContext) ?? {};
+  const { useComposer: useMessageComposer } = (0, import_react7.useContext)(MessageContext) ?? {};
   return {
     useComposer: useMessageComposer ?? useAssisstantComposer,
     type: useMessageComposer ? "message" : "assistant"
@@ -398,17 +264,72 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageProvider.tsx
-var import_react9 = require("react");
+var import_react8 = 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),
+  isEditing: false,
+  edit: () => {
+    const value = onEdit();
+    set({ isEditing: true, value });
+  },
+  send: () => {
+    const value = get().value;
+    set({ isEditing: false });
+    onSend(value);
+  },
+  cancel: () => {
+    if (!get().isEditing)
+      return false;
+    set({ isEditing: false });
+    return true;
+  }
+}));
+var makeThreadComposerStore = (useThread) => (0, import_zustand.create)()((set, get, store) => {
+  return {
+    ...makeBaseComposer(set, get, store),
+    isEditing: true,
+    send: () => {
+      const { value } = get();
+      set({ value: "" });
+      useThread.getState().append({
+        parentId: useThread.getState().messages.at(-1)?.id ?? null,
+        content: [{ type: "text", text: value }]
+      });
+    },
+    cancel: () => {
+      const thread = useThread.getState();
+      if (!thread.isRunning)
+        return false;
+      useThread.getState().cancelRun();
+      return true;
+    }
+  };
+});
+
+// src/primitives/message/MessageProvider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var getIsLast = (thread, message) => {
-  const hasUpcoming = hasUpcomingMessage(thread);
-  return hasUpcoming ? message.id === UPCOMING_MESSAGE_ID : thread.messages[thread.messages.length - 1]?.id === message.id;
+  return thread.messages[thread.messages.length - 1]?.id === message.id;
 };
 var useMessageContext2 = () => {
-  const [context] = (0, import_react9.useState)(() => {
-    const { useThread } = useAssistantContext();
-    const useMessage = (0, import_zustand.create)(() => ({
+  const { useThread } = useAssistantContext();
+  const [context] = (0, import_react8.useState)(() => {
+    const useMessage = (0, import_zustand2.create)(() => ({
       message: null,
+      branches: [],
       isLast: false,
       isCopied: false,
       isHovering: false,
@@ -417,34 +338,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({
           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;
@@ -456,12 +366,14 @@ var MessageProvider = ({
   const { useThread } = useAssistantContext();
   const context = useMessageContext2();
   const isLast = useThread((thread) => getIsLast(thread, message));
-  const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
-  const [isHovering, setIsHovering] = (0, import_react9.useState)(false);
-  (0, import_react9.useMemo)(() => {
+  const branches = useThread((thread) => thread.getBranches(message.id));
+  const [isCopied, setIsCopied] = (0, import_react8.useState)(false);
+  const [isHovering, setIsHovering] = (0, import_react8.useState)(false);
+  (0, import_react8.useMemo)(() => {
     context.useMessage.setState(
       {
         message,
+        branches,
         isLast,
         isCopied,
         isHovering,
@@ -470,15 +382,16 @@ var MessageProvider = ({
       },
       true
     );
-  }, [context, message, isLast, isCopied, isHovering]);
-  return /* @__PURE__ */ React.createElement(MessageContext.Provider, { value: context }, children);
+  }, [context, message, branches, isLast, isCopied, isHovering]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/message/MessageRoot.tsx
 var import_primitive2 = require("@radix-ui/primitive");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
-var import_react10 = require("react");
-var MessageRoot = (0, import_react10.forwardRef)(
+var import_react9 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MessageRoot = (0, import_react9.forwardRef)(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
     const { useMessage } = useMessageContext();
     const setIsHovering = useMessage((s) => s.setIsHovering);
@@ -488,7 +401,7 @@ var MessageRoot = (0, import_react10.forwardRef)(
     const handleMouseLeave = () => {
       setIsHovering(false);
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_primitive3.Primitive.div,
       {
         ...rest,
@@ -503,8 +416,8 @@ var MessageRoot = (0, import_react10.forwardRef)(
 // src/primitives/message/MessageIf.tsx
 var useMessageIf = (props) => {
   const { useMessage } = useMessageContext();
-  return useMessage(({ message, isLast, isCopied, isHovering }) => {
-    if (props.hasBranches === true && message.branchCount < 2)
+  return useMessage(({ message, branches, isLast, isCopied, isHovering }) => {
+    if (props.hasBranches === true && branches.length < 2)
       return false;
     if (props.user && message.role !== "user")
       return false;
@@ -525,8 +438,9 @@ var MessageIf = ({ children, ...query }) => {
 };
 
 // src/primitives/message/MessageContent.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultComponents = {
-  Text: ({ part }) => /* @__PURE__ */ React.createElement(React.Fragment, null, part.text),
+  Text: ({ part }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: part.text }),
   Image: () => null,
   UI: ({ part }) => part.display,
   tools: {
@@ -543,26 +457,27 @@ var MessageContent = ({
 }) => {
   const { useMessage } = useMessageContext();
   const content = useMessage((s) => s.message.content);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, content.map((part, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: content.map((part, i) => {
     const key = i;
     switch (part.type) {
       case "text":
-        return /* @__PURE__ */ React.createElement(Text, { key, part });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { part }, key);
       case "image":
-        return /* @__PURE__ */ React.createElement(Image, { key, part });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Image, { part }, key);
       case "ui":
-        return /* @__PURE__ */ React.createElement(UI, { key, part });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(UI, { part }, key);
       case "tool-call": {
         const Tool = by_name[part.name] || Fallback;
-        return /* @__PURE__ */ React.createElement(Tool, { key, part });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tool, { part }, key);
       }
       default:
         return null;
     }
-  }));
+  }) });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -577,41 +492,32 @@ var ThreadMessages = ({ components }) => {
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
   if (messages.length === 0)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, messages.map((message, idx) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: messages.map((message, idx) => {
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: fixes a11y issues with branch navigation
-      /* @__PURE__ */ React.createElement(MessageProvider, { key: idx, message }, /* @__PURE__ */ React.createElement(MessageIf, { user: true }, /* @__PURE__ */ React.createElement(ComposerIf, { editing: false }, /* @__PURE__ */ React.createElement(UserMessage, null)), /* @__PURE__ */ React.createElement(ComposerIf, { editing: true }, /* @__PURE__ */ React.createElement(EditComposer, null))), /* @__PURE__ */ React.createElement(MessageIf, { assistant: true }, /* @__PURE__ */ React.createElement(AssistantMessage, null)))
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(MessageProvider, { message, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(MessageIf, { user: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UserMessage, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditComposer, {}) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantMessage, {}) })
+      ] }, idx)
     );
-  }), hasUpcomingMessage(thread) && /* @__PURE__ */ React.createElement(
-    MessageProvider,
-    {
-      message: {
-        id: UPCOMING_MESSAGE_ID,
-        role: "assistant",
-        content: [{ type: "text", text: "..." }],
-        parentId: messages.at(-1)?.id ?? ROOT_PARENT_ID,
-        // TODO fix these (move upcoming message to AssistantContext)
-        branchId: 0,
-        branchCount: 1,
-        createdAt: /* @__PURE__ */ new Date()
-      }
-    },
-    /* @__PURE__ */ React.createElement(AssistantMessage, null)
-  ));
+  }) });
 };
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
 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);
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ThreadScrollToBottom = (0, import_react10.forwardRef)(({ onClick, ...rest }, ref) => {
+  const { useViewport } = useAssistantContext();
+  const isAtBottom = useViewport((s) => s.isAtBottom);
   const handleScrollToBottom = () => {
-    const thread = useThread.getState();
-    thread.scrollToBottom();
+    useViewport.getState().scrollToBottom();
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_primitive4.Primitive.button,
     {
       ...rest,
@@ -636,11 +542,13 @@ __export(composer_exports, {
 var import_primitive4 = require("@radix-ui/primitive");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
 var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react12 = require("react");
-var ComposerRoot = (0, import_react12.forwardRef)(
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ComposerRoot = (0, import_react11.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
+    const { useViewport } = useAssistantContext();
     const { useComposer } = useComposerContext();
-    const formRef = (0, import_react12.useRef)(null);
+    const formRef = (0, import_react11.useRef)(null);
     const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
@@ -648,8 +556,9 @@ var ComposerRoot = (0, import_react12.forwardRef)(
         return;
       e.preventDefault();
       composerState.send();
+      useViewport.getState().scrollToBottom();
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_primitive5.Primitive.form,
       {
         ...rest,
@@ -664,11 +573,12 @@ var ComposerRoot = (0, import_react12.forwardRef)(
 var import_primitive5 = require("@radix-ui/primitive");
 var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var ComposerInput = (0, import_react13.forwardRef)(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react12.forwardRef)(
   ({ autoFocus, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
-    const { useThread } = useAssistantContext();
+    const { useThread, useViewport } = useAssistantContext();
     const { useComposer, type } = useComposerContext();
     const value = useComposer((c) => {
       if (!c.isEditing)
@@ -680,22 +590,23 @@ var ComposerInput = (0, import_react13.forwardRef)(
       if (disabled)
         return;
       const composer = useComposer.getState();
-      if (e.key === "Escape" && composer.canCancel) {
-        e.preventDefault();
-        useComposer.getState().cancel();
-      }
-      if (e.key === "Enter" && e.shiftKey === false) {
-        const isLoading = useThread.getState().isLoading;
-        if (!isLoading) {
+      if (e.key === "Escape") {
+        if (useComposer.getState().cancel()) {
+          e.preventDefault();
+        }
+      } else if (e.key === "Enter" && e.shiftKey === false) {
+        const isRunning = useThread.getState().isRunning;
+        if (!isRunning) {
           e.preventDefault();
           composer.send();
+          useViewport.getState().scrollToBottom();
         }
       }
     };
-    const textareaRef = (0, import_react13.useRef)(null);
+    const textareaRef = (0, import_react12.useRef)(null);
     const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
     const autoFocusEnabled = autoFocus !== false && !disabled;
-    const focus = (0, import_react13.useCallback)(() => {
+    const focus = (0, import_react12.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled)
         return;
@@ -705,13 +616,13 @@ var ComposerInput = (0, import_react13.forwardRef)(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react13.useEffect)(() => focus(), [focus]);
+    (0, import_react12.useEffect)(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "assistant") {
         focus();
       }
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Component,
       {
         value,
@@ -732,12 +643,13 @@ var ComposerInput = (0, import_react13.forwardRef)(
 
 // src/primitives/composer/ComposerSend.tsx
 var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react14 = require("react");
-var ComposerSend = (0, import_react14.forwardRef)(
+var import_react13 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ComposerSend = (0, import_react13.forwardRef)(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_primitive6.Primitive.button,
       {
         type: "submit",
@@ -752,21 +664,20 @@ var ComposerSend = (0, import_react14.forwardRef)(
 // src/primitives/composer/ComposerCancel.tsx
 var import_primitive6 = require("@radix-ui/primitive");
 var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react15 = require("react");
-var ComposerCancel = (0, import_react15.forwardRef)(({ disabled, onClick, ...rest }, ref) => {
+var import_react14 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ComposerCancel = (0, import_react14.forwardRef)(({ onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
-  const hasValue = useComposer((c) => c.canCancel);
-  const handleClose = () => {
+  const handleCancel = () => {
     useComposer.getState().cancel();
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_react_primitive7.Primitive.button,
     {
       type: "button",
       ...rest,
       ref,
-      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleClose),
-      disabled: disabled || !hasValue
+      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleCancel)
     }
   );
 });
@@ -782,10 +693,10 @@ __export(branchPicker_exports, {
 });
 
 // src/utils/context/combined/useCombinedStore.ts
-var import_react17 = require("react");
+var import_react16 = require("react");
 
 // src/utils/context/combined/createCombinedStore.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var createCombinedStore = (stores) => {
   const subscribe = (callback) => {
     const unsubscribes = stores.map((store) => store.subscribe(callback));
@@ -797,41 +708,42 @@ var createCombinedStore = (stores) => {
   };
   return (selector) => {
     const getSnapshot = () => selector(...stores.map((store) => store.getState()));
-    return (0, import_react16.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   };
 };
 
 // src/utils/context/combined/useCombinedStore.ts
 var useCombinedStore = (stores, selector) => {
-  const useCombined = (0, import_react17.useMemo)(() => createCombinedStore(stores), stores);
+  const useCombined = (0, import_react16.useMemo)(() => createCombinedStore(stores), stores);
   return useCombined(selector);
 };
 
 // src/actions/useGoToNextBranch.tsx
 var useGoToNextBranch = () => {
   const { useThread } = useAssistantContext();
-  const { useComposer, useMessage } = useMessageContext();
+  const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
-    [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
+    [useMessage, useComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
   );
   if (disabled)
     return null;
   return () => {
-    const { message } = useMessage.getState();
-    useThread.getState().switchToBranch(message.id, message.branchId + 1);
+    const { message, branches } = useMessage.getState();
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
   };
 };
 
 // src/utils/createActionButton.tsx
-var import_react18 = require("react");
-var import_react_primitive8 = require("@radix-ui/react-primitive");
 var import_primitive7 = require("@radix-ui/primitive");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_react17 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var createActionButton = (useActionButton) => {
-  return (0, import_react18.forwardRef)(
+  return (0, import_react17.forwardRef)(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_react_primitive8.Primitive.button,
         {
           type: "button",
@@ -851,16 +763,19 @@ var BranchPickerNext = createActionButton(useGoToNextBranch);
 // src/actions/useGoToPreviousBranch.tsx
 var useGoToPreviousBranch = () => {
   const { useThread } = useAssistantContext();
-  const { useComposer, useMessage } = useMessageContext();
+  const { useMessage, useComposer } = useMessageContext();
   const disabled = useCombinedStore(
-    [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId <= 0
+    [useMessage, useComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
   );
   if (disabled)
     return null;
   return () => {
-    const { message } = useMessage.getState();
-    useThread.getState().switchToBranch(message.id, message.branchId - 1);
+    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
+    );
   };
 };
 
@@ -868,24 +783,27 @@ var useGoToPreviousBranch = () => {
 var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BranchPickerCount = () => {
   const { useMessage } = useMessageContext();
-  const branchCount = useMessage((s) => s.message.branchCount);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, branchCount);
+  const branchCount = useMessage((s) => s.branches.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: branchCount });
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BranchPickerNumber = () => {
   const { useMessage } = useMessageContext();
-  const branchId = useMessage((s) => s.message.branchId);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, branchId + 1);
+  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: branchIdx + 1 });
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react19 = require("react");
-var BranchPickerRoot = (0, import_react19.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive9.Primitive.div, { ...rest, ref }));
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var BranchPickerRoot = (0, import_react18.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive9.Primitive.div, { ...rest, ref }) });
 });
 
 // src/primitives/actionBar/index.ts
@@ -899,28 +817,29 @@ __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 import_react19 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ActionBarRoot = (0, import_react19.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)
         return "normal" /* Normal */;
       if (!m.isHovering)
         return "hidden" /* Hidden */;
-      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.message.branchCount <= 1)
+      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
         return "floating" /* Floating */;
       return "normal" /* Normal */;
     }
   );
   if (hideAndfloatStatus === "hidden" /* Hidden */)
     return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react_primitive10.Primitive.div,
     {
       "data-floating": hideAndfloatStatus === "floating" /* Floating */,
@@ -951,11 +870,11 @@ var ActionBarCopy = createActionButton(useCopyMessage);
 
 // src/actions/useReloadMessage.tsx
 var useReloadMessage = () => {
-  const { useThread } = useAssistantContext();
+  const { useThread, useViewport } = useAssistantContext();
   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 +882,8 @@ 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);
+    useViewport.getState().scrollToBottom();
   };
 };
 
@@ -992,68 +912,309 @@ var ActionBarEdit = createActionButton(useBeginMessageEdit);
 var import_react22 = require("react");
 
 // src/adapters/vercel/useDummyAIAssistantContext.tsx
-var import_react21 = require("react");
-var import_zustand2 = require("zustand");
-var useDummyAIAssistantContext = () => {
-  const [context] = (0, import_react21.useState)(() => {
-    const scrollToBottomListeners = /* @__PURE__ */ new Set();
-    const useThread = (0, import_zustand2.create)()(() => ({
-      messages: [],
-      isLoading: false,
-      append: async () => {
-        throw new Error("Not implemented");
-      },
-      stop: () => {
-        throw new Error("Not implemented");
-      },
-      switchToBranch: () => {
-        throw new Error("Not implemented");
-      },
-      reload: 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({
-          parentId: useThread.getState().messages.at(-1)?.id ?? ROOT_PARENT_ID,
-          content: [{ type: "text", text: useComposer.getState().value }]
-        });
-        useComposer.getState().setValue("");
-      },
-      cancel: () => {
-        useThread.getState().stop();
+var import_react20 = require("react");
+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();
       }
-    }));
-    return { useThread, useComposer };
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    }
+  }));
+};
+
+// src/adapters/vercel/useDummyAIAssistantContext.tsx
+var makeDummyThreadStore = () => {
+  return (0, import_zustand4.create)(() => ({
+    messages: [],
+    isRunning: false,
+    getBranches: () => {
+      return [];
+    },
+    switchToBranch: () => {
+      throw new Error("Not implemented");
+    },
+    append: async () => {
+      throw new Error("Not implemented");
+    },
+    cancelRun: () => {
+      throw new Error("Not implemented");
+    },
+    startRun: async () => {
+      throw new Error("Not implemented");
+    }
+  }));
+};
+var useDummyAIAssistantContext = () => {
+  const [context] = (0, import_react20.useState)(() => {
+    const useThread = makeDummyThreadStore();
+    const useViewport = makeViewportStore();
+    const useComposer = makeThreadComposerStore(useThread);
+    return { useThread, useViewport, useComposer };
   });
   return context;
 };
 
+// src/adapters/vercel/useVercelAIBranches.tsx
+var import_react21 = require("react");
+
+// ../../node_modules/nanoid/non-secure/index.js
+var customAlphabet = (alphabet, defaultSize = 21) => {
+  return (size = defaultSize) => {
+    let id = "";
+    let i = size;
+    while (i--) {
+      id += alphabet[Math.random() * alphabet.length | 0];
+    }
+    return id;
+  };
+};
+
+// src/adapters/MessageRepository.tsx
+var generateId = customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+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;
+};
+var MessageRepository = class {
+  messages = /* @__PURE__ */ new Map();
+  // message_id -> item
+  head = null;
+  rootChildren = [];
+  getMessages() {
+    const messages = new Array(this.head?.level ?? 0);
+    for (let current = this.head; current; current = current.prev) {
+      messages[current.level] = current.current;
+    }
+    return messages;
+  }
+  addOrUpdateMessage(message) {
+    const item = this.messages.get(message.id);
+    if (item) {
+      if (item.current.parentId !== message.parentId) {
+        this.deleteMessage(message.id);
+      } else {
+        item.current = message;
+        return;
+      }
+    }
+    const prev = message.parentId ? this.messages.get(message.parentId) : null;
+    if (prev === void 0)
+      throw new Error("Unexpected: Parent message not found");
+    const newItem = {
+      prev,
+      current: message,
+      next: null,
+      children: [],
+      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;
+    }
+  }
+  deleteMessage(messageId) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error("Unexpected: Message not found");
+    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("Unexpected: Child message not found");
+        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 = () => {
+    let optimisticId;
+    do {
+      optimisticId = generateOptimisticId();
+    } while (this.messages.has(optimisticId));
+    return optimisticId;
+  };
+  commitOptimisticRun(parentId) {
+    const optimisticId = this.getOptimisticId();
+    this.addOrUpdateMessage({
+      id: optimisticId,
+      role: "assistant",
+      content: [
+        {
+          type: "text",
+          text: ""
+        }
+      ],
+      parentId,
+      createdAt: /* @__PURE__ */ new Date()
+    });
+    return optimisticId;
+  }
+  getBranches(messageId) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error("Unexpected: Message not found");
+    if (message.prev) {
+      return message.prev.children;
+    }
+    return this.rootChildren;
+  }
+  switchToBranch(messageId) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error("Unexpected: Branch not found");
+    if (message.prev) {
+      message.prev.next = message;
+    }
+    this.head = findHead(message);
+  }
+  resetHead(messageId) {
+    if (messageId) {
+      const message = this.messages.get(messageId);
+      if (!message)
+        throw new Error("Unexpected: Branch not found");
+      this.head = message;
+      for (let current = message; current; current = current.prev) {
+        if (current.prev) {
+          current.prev.next = current;
+        }
+      }
+    } else {
+      this.head = null;
+    }
+  }
+};
+
+// src/adapters/vercel/useVercelAIBranches.tsx
+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("Unexpected: Message not found");
+  return messages.slice(0, messageIdx + 1);
+};
+var hasUpcomingMessage = (isRunning, messages) => {
+  return isRunning && messages[messages.length - 1]?.role !== "assistant";
+};
+var useVercelAIBranches = (chat, messages) => {
+  const [data] = (0, import_react21.useState)(() => new MessageRepository());
+  const isRunning = "isLoading" in chat ? chat.isLoading : chat.status === "in_progress";
+  const assistantOptimisticIdRef = (0, import_react21.useRef)(null);
+  const messagesEx = (0, import_react21.useMemo)(() => {
+    for (const message of messages) {
+      data.addOrUpdateMessage(message);
+    }
+    if (assistantOptimisticIdRef.current) {
+      data.deleteMessage(assistantOptimisticIdRef.current);
+      assistantOptimisticIdRef.current = null;
+    }
+    if (hasUpcomingMessage(isRunning, messages)) {
+      assistantOptimisticIdRef.current = data.commitOptimisticRun(
+        messages.at(-1)?.id ?? null
+      );
+    }
+    data.resetHead(
+      assistantOptimisticIdRef.current ?? messages.at(-1)?.id ?? null
+    );
+    return data.getMessages();
+  }, [data, isRunning, messages]);
+  const getBranches = (0, import_react21.useCallback)(
+    (messageId) => {
+      return data.getBranches(messageId);
+    },
+    [data]
+  );
+  const switchToBranch = (0, import_react21.useCallback)(
+    (messageId) => {
+      data.switchToBranch(messageId);
+      chat.setMessages(
+        data.getMessages().filter((m) => !isOptimisticId(m.id)).map((m) => m.innerMessage)
+      );
+    },
+    [data, chat.setMessages]
+  );
+  const reloadMaybe = "reload" in chat ? chat.reload : void 0;
+  const startRun = (0, import_react21.useCallback)(
+    async (parentId) => {
+      if (!reloadMaybe)
+        throw new Error("Reload not supported by Vercel AI SDK's useAssistant");
+      const newMessages = sliceMessagesUntil(chat.messages, parentId);
+      chat.setMessages(newMessages);
+      await reloadMaybe();
+    },
+    [chat.messages, chat.setMessages, reloadMaybe]
+  );
+  const append = (0, import_react21.useCallback)(
+    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(chat.messages, message.parentId);
+      chat.setMessages(newMessages);
+      await chat.append({
+        role: "user",
+        content: message.content[0].text
+      });
+    },
+    [chat.messages, chat.setMessages, chat.append]
+  );
+  return (0, import_react21.useMemo)(
+    () => ({
+      messages: messagesEx,
+      getBranches,
+      switchToBranch,
+      append,
+      startRun
+    }),
+    [messagesEx, getBranches, switchToBranch, append, startRun]
+  );
+};
+
 // src/adapters/vercel/VercelAIAssistantProvider.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ThreadMessageCache = /* @__PURE__ */ new WeakMap();
-var vercelToThreadMessage = (message, parentId, branchId, branchCount) => {
+var vercelToThreadMessage = (message, parentId) => {
   if (message.role !== "user" && message.role !== "assistant")
     throw new Error("Unsupported role");
   return {
@@ -1061,24 +1222,17 @@ var vercelToThreadMessage = (message, parentId, branchId, branchCount) => {
     id: message.id,
     role: message.role,
     content: [{ type: "text", text: message.content }],
-    branchId,
-    branchCount,
-    createdAt: message.createdAt ?? /* @__PURE__ */ new Date()
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
+    innerMessage: message
   };
 };
-var vercelToCachedThreadMessages = (messages, getBranchState) => {
+var vercelToCachedThreadMessages = (messages) => {
   return messages.map((m, idx) => {
     const cached = ThreadMessageCache.get(m);
-    const parentId = messages[idx - 1]?.id ?? ROOT_PARENT_ID;
-    const { branchId, branchCount } = getBranchState(m.id);
-    if (cached && cached.parentId === parentId && cached.branchId === branchId && cached.branchCount === branchCount)
+    const parentId = messages[idx - 1]?.id ?? null;
+    if (cached && cached.parentId === parentId)
       return cached;
-    const newMessage = vercelToThreadMessage(
-      m,
-      parentId,
-      branchId,
-      branchCount
-    );
+    const newMessage = vercelToThreadMessage(m, parentId);
     ThreadMessageCache.set(m, newMessage);
     return newMessage;
   });
@@ -1089,43 +1243,44 @@ var VercelAIAssistantProvider = ({
 }) => {
   const context = useDummyAIAssistantContext();
   const vercel = "chat" in rest ? rest.chat : rest.assistant;
-  const branches = useVercelAIBranches(vercel, context);
   const messages = (0, import_react22.useMemo)(() => {
-    return vercelToCachedThreadMessages(
-      vercel.messages,
-      branches.getBranchState
-    );
-  }, [vercel.messages, branches.getBranchState]);
-  const stop = (0, import_react22.useCallback)(() => {
+    return vercelToCachedThreadMessages(vercel.messages);
+  }, [vercel.messages]);
+  const branches = useVercelAIBranches(vercel, messages);
+  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,
-      switchToBranch: branches.switchToBranch,
-      append: branches.append,
-      reload: branches.reload
-    });
-  }, [context, messages, isLoading, stop, branches]);
+    context.useThread.setState(
+      {
+        messages: branches.messages,
+        isRunning,
+        getBranches: branches.getBranches,
+        switchToBranch: branches.switchToBranch,
+        append: branches.append,
+        startRun: branches.startRun,
+        cancelRun
+      },
+      true
+    );
+  }, [context, isRunning, cancelRun, branches]);
   (0, import_react22.useMemo)(() => {
     context.useComposer.setState({
-      canCancel: isLoading,
       value: vercel.input,
       setValue: vercel.setInput
     });
-  }, [context, isLoading, vercel.input, vercel.setInput]);
-  return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
+  }, [context, vercel.input, vercel.setInput]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AssistantContext.Provider, { value: context, children });
 };
 
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
 var import_react23 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ThreadMessageCache2 = /* @__PURE__ */ new WeakMap();
 var vercelToThreadMessage2 = (parentId, message) => {
   if (message.role !== "user" && message.role !== "assistant")
@@ -1135,15 +1290,13 @@ var vercelToThreadMessage2 = (parentId, message) => {
     id: message.id,
     role: message.role,
     content: [{ type: "ui", display: message.display }],
-    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
-    branchId: 0,
-    branchCount: 1
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date()
   };
 };
 var vercelToCachedThreadMessages2 = (messages) => {
   return messages.map((m, idx) => {
     const cached = ThreadMessageCache2.get(m);
-    const parentId = messages[idx - 1]?.id ?? ROOT_PARENT_ID;
+    const parentId = messages[idx - 1]?.id ?? null;
     if (cached && cached.parentId === parentId)
       return cached;
     const newMessage = vercelToThreadMessage2(parentId, m);
@@ -1162,12 +1315,11 @@ var VercelRSCAssistantProvider = ({
   }, [vercelMessages]);
   const append = (0, import_react23.useCallback)(
     async (message) => {
-      if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? ROOT_PARENT_ID))
+      if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null))
         throw new Error("Unexpected: Message editing is not supported");
       if (message.content[0]?.type !== "text") {
         throw new Error("Only text content is currently supported");
       }
-      context.useThread.getState().scrollToBottom();
       await vercelAppend(message);
     },
     [context, vercelAppend]
@@ -1178,7 +1330,7 @@ var VercelRSCAssistantProvider = ({
       append
     });
   }, [context, messages, append]);
-  return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AssistantContext.Provider, { value: context, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {