@assistant-ui/react 0.0.8 → 0.0.10

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,18 +166,20 @@ 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 = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll)
       return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
+    useViewport.setState({ isAtBottom: true });
     div.scrollIntoView({ behavior });
   };
   useOnResizeContent(divRef, () => {
-    if (!useThread.getState().isAtBottom)
+    if (!useViewport.getState().isAtBottom)
       return;
     scrollToBottom();
   });
@@ -188,11 +190,13 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
     const div = divRef.current;
     if (!div)
       return;
-    const isAtBottom = useThread.getState().isAtBottom;
-    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight + 50;
-    if (newIsAtBottom !== isAtBottom) {
-      useThread.setState({ isAtBottom: newIsAtBottom });
+    const isAtBottom = useViewport.getState().isAtBottom;
+    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
+    if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
+    } else if (newIsAtBottom !== isAtBottom) {
+      useViewport.setState({ isAtBottom: newIsAtBottom });
     }
+    lastScrollTop.current = div.scrollTop;
   };
   return /* @__PURE__ */ React.createElement(
     import_react_primitive2.Primitive.div,
@@ -206,15 +210,19 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
   );
 });
 
-// src/vercel/useVercelAIBranches.tsx
+// src/adapters/vercel/useVercelAIBranches.tsx
 var import_react6 = require("react");
-var ROOT_ID = "__ROOT_ID__";
+
+// 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_ID;
+    const parentId = messages[i - 1]?.id ?? ROOT_PARENT_ID;
     data.parentMap.set(childId, parentId);
     const parentArray = data.branchMap.get(parentId);
     if (!parentArray) {
@@ -225,32 +233,32 @@ var updateBranchData = (data, messages) => {
     data.snapshots.set(childId, messages);
   }
 };
-var getParentId = (data, messages, message) => {
-  if (message.id === UPCOMING_MESSAGE_ID) {
+var getParentId = (data, messages, messageId) => {
+  if (messageId === UPCOMING_MESSAGE_ID) {
     const parent = messages.at(-1);
     if (!parent)
-      return ROOT_ID;
+      return ROOT_PARENT_ID;
     return parent.id;
   }
-  const parentId = data.parentMap.get(message.id);
+  const parentId = data.parentMap.get(messageId);
   if (!parentId)
     throw new Error("Unexpected: Message parent not found");
   return parentId;
 };
-var getBranchStateImpl = (data, messages, message) => {
-  const parentId = getParentId(data, messages, message);
+var getBranchStateImpl = (data, messages, messageId) => {
+  const parentId = getParentId(data, messages, messageId);
   const branches = data.branchMap.get(parentId) ?? [];
-  const branchId = message.id === UPCOMING_MESSAGE_ID ? branches.length : branches.indexOf(message.id);
+  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 = message.id === UPCOMING_MESSAGE_ID ? 1 : 0;
+  const upcomingOffset = messageId === UPCOMING_MESSAGE_ID ? 1 : 0;
   return {
     branchId,
     branchCount: branches.length + upcomingOffset
   };
 };
-var switchToBranchImpl = (data, messages, message, branchId) => {
-  const parentId = getParentId(data, messages, message);
+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");
@@ -259,20 +267,22 @@ var switchToBranchImpl = (data, messages, message, branchId) => {
     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 === message.id)
+  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, message) => {
-  if (message.id === UPCOMING_MESSAGE_ID)
+var sliceMessagesUntil = (messages, messageId) => {
+  if (messageId === ROOT_PARENT_ID)
+    return [];
+  if (messageId === UPCOMING_MESSAGE_ID)
     return messages;
-  const messageIdx = messages.findIndex((m) => m.id === message.id);
+  const messageIdx = messages.findIndex((m) => m.id === messageId);
   if (messageIdx === -1)
     throw new Error("Unexpected: Message not found");
-  return messages.slice(0, messageIdx);
+  return messages.slice(0, messageIdx + 1);
 };
 var useVercelAIBranches = (chat, context) => {
   const data = (0, import_react6.useRef)({
@@ -282,17 +292,17 @@ var useVercelAIBranches = (chat, context) => {
   }).current;
   updateBranchData(data, chat.messages);
   const getBranchState = (0, import_react6.useCallback)(
-    (message) => {
-      return getBranchStateImpl(data, chat.messages, message);
+    (messageId) => {
+      return getBranchStateImpl(data, chat.messages, messageId);
     },
     [data, chat.messages]
   );
   const switchToBranch = (0, import_react6.useCallback)(
-    (message, branchId) => {
+    (messageId, branchId) => {
       const newMessages = switchToBranchImpl(
         data,
         chat.messages,
-        message,
+        messageId,
         branchId
       );
       chat.setMessages(newMessages);
@@ -300,27 +310,27 @@ var useVercelAIBranches = (chat, context) => {
     [data, chat.messages, chat.setMessages]
   );
   const reloadMaybe = "reload" in chat ? chat.reload : void 0;
-  const reloadAt = (0, import_react6.useCallback)(
-    async (message) => {
+  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, message);
+      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]
   );
-  const editAt = (0, import_react6.useCallback)(
-    async (message, newMessage) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message);
+  const append = (0, import_react6.useCallback)(
+    async (message) => {
+      const newMessages = sliceMessagesUntil(chat.messages, message.parentId);
       chat.setMessages(newMessages);
-      if (newMessage.content[0]?.type !== "text")
+      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: newMessage.content[0].text
+        content: message.content[0].text
       });
     },
     [context, chat.messages, chat.setMessages, chat.append]
@@ -329,14 +339,14 @@ var useVercelAIBranches = (chat, context) => {
     () => ({
       getBranchState,
       switchToBranch,
-      editAt,
-      reloadAt
+      append,
+      startRun
     }),
-    [getBranchState, switchToBranch, editAt, reloadAt]
+    [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
@@ -389,16 +399,62 @@ __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 import_shallow = require("zustand/react/shallow");
+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;
 };
 var useMessageContext2 = () => {
-  const { useBranchObserver } = useAssistantContext();
   const [context] = (0, import_react9.useState)(() => {
-    const useMessage = (0, import_zustand.create)(() => ({
+    const { useThread } = useAssistantContext();
+    const useMessage = (0, import_zustand2.create)(() => ({
       message: null,
       isLast: false,
       isCopied: false,
@@ -406,40 +462,25 @@ var useMessageContext2 = () => {
       setIsCopied: () => {
       },
       setIsHovering: () => {
-      },
-      branchState: {
-        branchId: 0,
-        branchCount: 0
       }
     }));
-    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");
-        useBranchObserver.getState().editAt(message, {
-          role: "user",
-          content: [{ type: "text", text: get().value }]
+        return useThread.getState().append({
+          parentId: message.parentId,
+          content: [{ type: "text", text }]
         });
-        set({ isEditing: false });
-      },
-      value: "",
-      setValue: (value) => set({ value })
-    }));
+      }
+    });
     return { useMessage, useComposer };
   });
   return context;
@@ -448,11 +489,8 @@ var MessageProvider = ({
   message,
   children
 }) => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const context = useMessageContext2();
-  const branchState = useBranchObserver(
-    (0, import_shallow.useShallow)((b) => b.getBranchState(message))
-  );
   const isLast = useThread((thread) => getIsLast(thread, message));
   const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
   const [isHovering, setIsHovering] = (0, import_react9.useState)(false);
@@ -464,12 +502,11 @@ var MessageProvider = ({
         isCopied,
         isHovering,
         setIsCopied,
-        setIsHovering,
-        branchState
+        setIsHovering
       },
       true
     );
-  }, [context, message, isLast, isCopied, isHovering, branchState]);
+  }, [context, message, isLast, isCopied, isHovering]);
   return /* @__PURE__ */ React.createElement(MessageContext.Provider, { value: context }, children);
 };
 
@@ -502,29 +539,21 @@ var MessageRoot = (0, import_react10.forwardRef)(
 // src/primitives/message/MessageIf.tsx
 var useMessageIf = (props) => {
   const { useMessage } = useMessageContext();
-  return useMessage(
-    ({
-      message,
-      isLast,
-      isCopied,
-      isHovering,
-      branchState: { branchCount }
-    }) => {
-      if (props.hasBranches === true && branchCount < 2)
-        return false;
-      if (props.user && message.role !== "user")
-        return false;
-      if (props.assistant && message.role !== "assistant")
-        return false;
-      if (props.lastOrHover === true && !isHovering && !isLast)
-        return false;
-      if (props.copied === true && !isCopied)
-        return false;
-      if (props.copied === false && isCopied)
-        return false;
-      return true;
-    }
-  );
+  return useMessage(({ message, isLast, isCopied, isHovering }) => {
+    if (props.hasBranches === true && message.branchCount < 2)
+      return false;
+    if (props.user && message.role !== "user")
+      return false;
+    if (props.assistant && message.role !== "assistant")
+      return false;
+    if (props.lastOrHover === true && !isHovering && !isLast)
+      return false;
+    if (props.copied === true && !isCopied)
+      return false;
+    if (props.copied === false && isCopied)
+      return false;
+    return true;
+  });
 };
 var MessageIf = ({ children, ...query }) => {
   const result = useMessageIf(query);
@@ -595,7 +624,12 @@ var ThreadMessages = ({ components }) => {
       message: {
         id: UPCOMING_MESSAGE_ID,
         role: "assistant",
-        content: [{ type: "text", text: "..." }]
+        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)
@@ -607,18 +641,16 @@ 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();
   };
-  if (isAtBottom)
-    return null;
   return /* @__PURE__ */ React.createElement(
     import_react_primitive4.Primitive.button,
     {
       ...rest,
+      disabled: isAtBottom,
       ref,
       onClick: (0, import_primitive3.composeEventHandlers)(onClick, handleScrollToBottom)
     }
@@ -688,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();
         }
@@ -812,20 +844,17 @@ var useCombinedStore = (stores, selector) => {
 
 // src/actions/useGoToNextBranch.tsx
 var useGoToNextBranch = () => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const { useComposer, useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.branchState.branchId + 1 >= m.branchState.branchCount
+    (t, c, m) => t.isRunning || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
   );
   if (disabled)
     return null;
   return () => {
-    const {
-      message,
-      branchState: { branchId }
-    } = useMessage.getState();
-    useBranchObserver.getState().switchToBranch(message, branchId + 1);
+    const { message } = useMessage.getState();
+    useThread.getState().switchToBranch(message.id, message.branchId + 1);
   };
 };
 
@@ -856,20 +885,17 @@ var BranchPickerNext = createActionButton(useGoToNextBranch);
 
 // src/actions/useGoToPreviousBranch.tsx
 var useGoToPreviousBranch = () => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const { useComposer, useMessage } = useMessageContext();
   const disabled = useCombinedStore(
     [useThread, useComposer, useMessage],
-    (t, c, m) => t.isLoading || c.isEditing || m.branchState.branchId <= 0
+    (t, c, m) => t.isRunning || c.isEditing || m.message.branchId <= 0
   );
   if (disabled)
     return null;
   return () => {
-    const {
-      message,
-      branchState: { branchId }
-    } = useMessage.getState();
-    useBranchObserver.getState().switchToBranch(message, branchId - 1);
+    const { message } = useMessage.getState();
+    useThread.getState().switchToBranch(message.id, message.branchId - 1);
   };
 };
 
@@ -879,14 +905,14 @@ var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 // src/primitives/branchPicker/BranchPickerCount.tsx
 var BranchPickerCount = () => {
   const { useMessage } = useMessageContext();
-  const branchCount = useMessage((s) => s.branchState.branchCount);
+  const branchCount = useMessage((s) => s.message.branchCount);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, branchCount);
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
 var BranchPickerNumber = () => {
   const { useMessage } = useMessageContext();
-  const branchId = useMessage((s) => s.branchState.branchId);
+  const branchId = useMessage((s) => s.message.branchId);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, branchId + 1);
 };
 
@@ -909,20 +935,20 @@ __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)
         return "normal" /* Normal */;
       if (!m.isHovering)
         return "hidden" /* Hidden */;
-      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branchState.branchCount <= 1)
+      if (autohideFloat === "always" || autohideFloat === "single-branch" && m.message.branchCount <= 1)
         return "floating" /* Floating */;
       return "normal" /* Normal */;
     }
@@ -960,11 +986,11 @@ var ActionBarCopy = createActionButton(useCopyMessage);
 
 // src/actions/useReloadMessage.tsx
 var useReloadMessage = () => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = 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;
@@ -972,7 +998,7 @@ var useReloadMessage = () => {
     const message = useMessage.getState().message;
     if (message.role !== "assistant")
       throw new Error("Reloading is only supported on assistant messages");
-    useBranchObserver.getState().reloadAt(message);
+    useThread.getState().startRun(message.parentId);
   };
 };
 
@@ -997,95 +1023,98 @@ var useBeginMessageEdit = () => {
 // src/primitives/actionBar/ActionBarEdit.tsx
 var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
-// src/vercel/VercelAIAssistantProvider.tsx
+// src/adapters/vercel/VercelAIAssistantProvider.tsx
 var import_react22 = require("react");
 
-// src/vercel/useDummyAIAssistantContext.tsx
+// 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: () => {
-        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: () => {
+      cancelRun: () => {
         throw new Error("Not implemented");
       },
-      send: () => {
-        useThread.getState().append({
-          role: "user",
-          content: [{ type: "text", text: useComposer.getState().value }]
-        });
-        useComposer.getState().setValue("");
-      },
-      cancel: () => {
-        useThread.getState().stop();
-      }
-    }));
-    const useBranchObserver = (0, import_zustand2.create)()(() => ({
-      getBranchState: () => ({
-        branchId: 0,
-        branchCount: 1
-      }),
       switchToBranch: () => {
         throw new Error("Not implemented");
       },
-      editAt: async () => {
-        throw new Error("Not implemented");
-      },
-      reloadAt: async () => {
+      startRun: async () => {
         throw new Error("Not implemented");
       }
     }));
-    return { useThread, useComposer, useBranchObserver };
+    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 }]
+        });
+      },
+      onCancel: () => {
+        useThread.getState().cancelRun();
+      }
+    });
+    return { useThread, useViewport, useComposer };
   });
   return context;
 };
 
-// src/vercel/VercelAIAssistantProvider.tsx
+// src/adapters/vercel/VercelAIAssistantProvider.tsx
 var ThreadMessageCache = /* @__PURE__ */ new WeakMap();
-var vercelToThreadMessage = (message) => {
+var vercelToThreadMessage = (message, parentId, branchId, branchCount) => {
   if (message.role !== "user" && message.role !== "assistant")
     throw new Error("Unsupported role");
   return {
+    parentId,
     id: message.id,
     role: message.role,
-    content: [{ type: "text", text: message.content }]
+    content: [{ type: "text", text: message.content }],
+    branchId,
+    branchCount,
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date()
   };
 };
-var vercelToCachedThreadMessages = (messages) => {
-  return messages.map((m) => {
+var vercelToCachedThreadMessages = (messages, getBranchState) => {
+  return messages.map((m, idx) => {
     const cached = ThreadMessageCache.get(m);
-    if (cached)
+    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)
       return cached;
-    const newMessage = vercelToThreadMessage(m);
+    const newMessage = vercelToThreadMessage(
+      m,
+      parentId,
+      branchId,
+      branchCount
+    );
     ThreadMessageCache.set(m, newMessage);
     return newMessage;
   });
@@ -1096,70 +1125,64 @@ 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);
-  }, [vercel.messages]);
-  const append = (0, import_react22.useCallback)(
-    async (message) => {
-      if (message.content[0]?.type !== "text") {
-        throw new Error("Only text content is currently supported");
-      }
-      context.useThread.getState().scrollToBottom();
-      await vercel.append({
-        role: message.role,
-        content: message.content[0].text
-      });
-    },
-    [context, vercel.append]
-  );
-  const stop = (0, import_react22.useCallback)(() => {
+    return vercelToCachedThreadMessages(
+      vercel.messages,
+      branches.getBranchState
+    );
+  }, [vercel.messages, branches.getBranchState]);
+  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,
-      append,
-      stop
+      isRunning,
+      cancelRun,
+      switchToBranch: branches.switchToBranch,
+      append: branches.append,
+      startRun: branches.startRun
     });
-  }, [context, messages, append, stop, isLoading]);
+  }, [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]);
-  const branches = useVercelAIBranches(vercel, context);
-  (0, import_react22.useMemo)(() => {
-    context.useBranchObserver.setState(branches, true);
-  }, [context, branches]);
+  }, [context, isRunning, vercel.input, vercel.setInput]);
   return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
 };
 
-// src/vercel/VercelRSCAssistantProvider.tsx
+// src/adapters/vercel/VercelRSCAssistantProvider.tsx
 var import_react23 = require("react");
 var ThreadMessageCache2 = /* @__PURE__ */ new WeakMap();
-var vercelToThreadMessage2 = (message) => {
+var vercelToThreadMessage2 = (parentId, message) => {
   if (message.role !== "user" && message.role !== "assistant")
     throw new Error("Unsupported role");
   return {
+    parentId,
     id: message.id,
     role: message.role,
-    content: [{ type: "ui", display: message.display }]
+    content: [{ type: "ui", display: message.display }],
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
+    branchId: 0,
+    branchCount: 1
   };
 };
 var vercelToCachedThreadMessages2 = (messages) => {
-  return messages.map((m) => {
+  return messages.map((m, idx) => {
     const cached = ThreadMessageCache2.get(m);
-    if (cached)
+    const parentId = messages[idx - 1]?.id ?? ROOT_PARENT_ID;
+    if (cached && cached.parentId === parentId)
       return cached;
-    const newMessage = vercelToThreadMessage2(m);
+    const newMessage = vercelToThreadMessage2(parentId, m);
     ThreadMessageCache2.set(m, newMessage);
     return newMessage;
   });
@@ -1175,14 +1198,13 @@ var VercelRSCAssistantProvider = ({
   }, [vercelMessages]);
   const append = (0, import_react23.useCallback)(
     async (message) => {
+      if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? ROOT_PARENT_ID))
+        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({
-        role: message.role,
-        content: [{ type: "text", text: message.content[0].text }]
-      });
+      context.useViewport.getState().scrollToBottom();
+      await vercelAppend(message);
     },
     [context, vercelAppend]
   );