@assistant-ui/react 0.0.7 → 0.0.9

package/dist/index.mjs

@@ -11,6 +11,7 @@ __export(thread_exports, {
   If: () => ThreadIf,
   Messages: () => ThreadMessages,
   Root: () => ThreadRoot,
+  ScrollToBottom: () => ThreadScrollToBottom,
   Viewport: () => ThreadViewport
 });
 
@@ -68,7 +69,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import {
   Primitive as Primitive2
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef2, useRef as useRef2, useState } from "react";
+import { forwardRef as forwardRef2, useRef as useRef3 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useLayoutEffect, useRef } from "react";
@@ -109,22 +110,55 @@ var useOnResizeContent = (ref, callback) => {
   }, [ref.current]);
 };
 
+// src/utils/hooks/useOnScrollToBottom.tsx
+import { useEffect, useRef as useRef2 } from "react";
+var useOnScrollToBottom = (callback) => {
+  const callbackRef = useRef2(callback);
+  callbackRef.current = callback;
+  const { useThread } = useAssistantContext();
+  useEffect(() => {
+    return useThread.getState().onScrollToBottom(() => {
+      callbackRef.current();
+    });
+  }, [useThread]);
+};
+
 // src/primitives/thread/ThreadViewport.tsx
-var ThreadViewport = forwardRef2(({ onScroll, children, ...rest }, forwardedRef) => {
-  const divRef = useRef2(null);
+var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
+  const messagesEndRef = useRef3(null);
+  const divRef = useRef3(null);
   const ref = useComposedRefs(forwardedRef, divRef);
-  const [isAtBottom, setIsAtBottom] = useState(true);
+  const { useThread } = useAssistantContext();
+  const firstRenderRef = useRef3(true);
+  const lastScrollTop = useRef3(0);
+  const scrollToBottom = () => {
+    const div = messagesEndRef.current;
+    if (!div || !autoScroll)
+      return;
+    const behavior = firstRenderRef.current ? "instant" : "auto";
+    firstRenderRef.current = false;
+    useThread.setState({ isAtBottom: true });
+    div.scrollIntoView({ behavior });
+  };
   useOnResizeContent(divRef, () => {
-    const div = divRef.current;
-    if (!div || !isAtBottom)
+    if (!useThread.getState().isAtBottom)
       return;
-    div.scrollTop = div.scrollHeight;
+    scrollToBottom();
+  });
+  useOnScrollToBottom(() => {
+    scrollToBottom();
   });
   const handleScroll = () => {
     const div = divRef.current;
     if (!div)
       return;
-    setIsAtBottom(div.scrollHeight - div.scrollTop <= div.clientHeight + 50);
+    const isAtBottom = useThread.getState().isAtBottom;
+    const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
+    if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
+    } else if (newIsAtBottom !== isAtBottom) {
+      useThread.setState({ isAtBottom: newIsAtBottom });
+    }
+    lastScrollTop.current = div.scrollTop;
   };
   return /* @__PURE__ */ React.createElement(
     Primitive2.div,
@@ -133,19 +167,24 @@ var ThreadViewport = forwardRef2(({ onScroll, children, ...rest }, forwardedRef)
       onScroll: composeEventHandlers(onScroll, handleScroll),
       ref
     },
-    children
+    children,
+    /* @__PURE__ */ React.createElement("div", { ref: messagesEndRef })
   );
 });
 
-// src/vercel/useVercelAIBranches.tsx
-import { useCallback, useMemo, useRef as useRef3 } from "react";
-var ROOT_ID = "__ROOT_ID__";
+// src/adapters/vercel/useVercelAIBranches.tsx
+import { useCallback, useMemo, useRef as useRef4 } from "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_ID;
+    const parentId = messages[i - 1]?.id ?? ROOT_PARENT_ID;
     data.parentMap.set(childId, parentId);
     const parentArray = data.branchMap.get(parentId);
     if (!parentArray) {
@@ -156,32 +195,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");
@@ -190,40 +229,42 @@ 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) => {
-  const data = useRef3({
+var useVercelAIBranches = (chat, context) => {
+  const data = useRef4({
     parentMap: /* @__PURE__ */ new Map(),
     branchMap: /* @__PURE__ */ new Map(),
     snapshots: /* @__PURE__ */ new Map()
   }).current;
   updateBranchData(data, chat.messages);
   const getBranchState = useCallback(
-    (message) => {
-      return getBranchStateImpl(data, chat.messages, message);
+    (messageId) => {
+      return getBranchStateImpl(data, chat.messages, messageId);
     },
     [data, chat.messages]
   );
   const switchToBranch = useCallback(
-    (message, branchId) => {
+    (messageId, branchId) => {
       const newMessages = switchToBranchImpl(
         data,
         chat.messages,
-        message,
+        messageId,
         branchId
       );
       chat.setMessages(newMessages);
@@ -231,47 +272,49 @@ var useVercelAIBranches = (chat) => {
     [data, chat.messages, chat.setMessages]
   );
   const reloadMaybe = "reload" in chat ? chat.reload : void 0;
-  const reloadAt = useCallback(
-    async (message) => {
+  const reload = useCallback(
+    async (messageId) => {
       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, messageId);
       chat.setMessages(newMessages);
+      context.useThread.getState().scrollToBottom();
       await reloadMaybe();
     },
-    [chat.messages, chat.setMessages, reloadMaybe]
+    [context, chat.messages, chat.setMessages, reloadMaybe]
   );
-  const editAt = useCallback(
-    async (message, newMessage) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message);
+  const append = 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();
       await chat.append({
         role: "user",
-        content: newMessage.content[0].text
+        content: message.content[0].text
       });
     },
-    [chat.messages, chat.setMessages, chat.append]
+    [context, chat.messages, chat.setMessages, chat.append]
   );
   return useMemo(
     () => ({
       getBranchState,
       switchToBranch,
-      editAt,
-      reloadAt
+      append,
+      reload
     }),
-    [getBranchState, switchToBranch, editAt, reloadAt]
+    [getBranchState, switchToBranch, append, reload]
   );
 };
 var hasUpcomingMessage = (thread) => {
   return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
 };
 
-// src/utils/context/ComposerState.ts
+// src/utils/context/useComposerContext.ts
 import { useContext as useContext3 } from "react";
 
-// src/utils/context/MessageContext.ts
+// src/utils/context/useMessageContext.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var MessageContext = createContext2(null);
 var useMessageContext = () => {
@@ -281,11 +324,14 @@ var useMessageContext = () => {
   return context;
 };
 
-// src/utils/context/ComposerState.ts
+// src/utils/context/useComposerContext.ts
 var useComposerContext = () => {
   const { useComposer: useAssisstantComposer } = useAssistantContext();
   const { useComposer: useMessageComposer } = useContext3(MessageContext) ?? {};
-  return { useComposer: useMessageComposer ?? useAssisstantComposer };
+  return {
+    useComposer: useMessageComposer ?? useAssisstantComposer,
+    type: useMessageComposer ? "message" : "assistant"
+  };
 };
 
 // src/primitives/composer/ComposerIf.tsx
@@ -314,16 +360,15 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageProvider.tsx
-import { useMemo as useMemo2, useState as useState2 } from "react";
+import { useMemo as useMemo2, useState } from "react";
 import { create } from "zustand";
-import { useShallow } from "zustand/react/shallow";
 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] = useState2(() => {
+  const [context] = useState(() => {
+    const { useThread } = useAssistantContext();
     const useMessage = create(() => ({
       message: null,
       isLast: false,
@@ -332,10 +377,6 @@ var useMessageContext2 = () => {
       setIsCopied: () => {
       },
       setIsHovering: () => {
-      },
-      branchState: {
-        branchId: 0,
-        branchCount: 0
       }
     }));
     const useComposer = create((set, get) => ({
@@ -357,8 +398,8 @@ var useMessageContext2 = () => {
         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",
+        useThread.getState().append({
+          parentId: message.parentId,
           content: [{ type: "text", text: get().value }]
         });
         set({ isEditing: false });
@@ -374,14 +415,11 @@ var MessageProvider = ({
   message,
   children
 }) => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const context = useMessageContext2();
-  const branchState = useBranchObserver(
-    useShallow((b) => b.getBranchState(message))
-  );
   const isLast = useThread((thread) => getIsLast(thread, message));
-  const [isCopied, setIsCopied] = useState2(false);
-  const [isHovering, setIsHovering] = useState2(false);
+  const [isCopied, setIsCopied] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
   useMemo2(() => {
     context.useMessage.setState(
       {
@@ -390,12 +428,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);
 };
 
@@ -430,29 +467,21 @@ var MessageRoot = forwardRef3(
 // 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);
@@ -523,13 +552,42 @@ 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)
   ));
 };
 
+// src/primitives/thread/ThreadScrollToBottom.tsx
+import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
+import {
+  Primitive as Primitive4
+} 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 handleScrollToBottom = () => {
+    const thread = useThread.getState();
+    thread.scrollToBottom();
+  };
+  return /* @__PURE__ */ React.createElement(
+    Primitive4.button,
+    {
+      ...rest,
+      disabled: isAtBottom,
+      ref,
+      onClick: composeEventHandlers3(onClick, handleScrollToBottom)
+    }
+  );
+});
+
 // src/primitives/composer/index.ts
 var composer_exports = {};
 __export(composer_exports, {
@@ -541,41 +599,17 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import {
-  Primitive as Primitive4
+  Primitive as Primitive5
 } from "@radix-ui/react-primitive";
-import {
-  createContext as createContext3,
-  forwardRef as forwardRef4,
-  useContext as useContext4,
-  useMemo as useMemo3,
-  useRef as useRef4
-} from "react";
-var ComposerFormContext = createContext3(null);
-var useComposerFormContext = () => {
-  const context = useContext4(ComposerFormContext);
-  if (!context) {
-    throw new Error(
-      "Composer compound components cannot be rendered outside the Composer component"
-    );
-  }
-  return context;
-};
-var ComposerRoot = forwardRef4(
+import { forwardRef as forwardRef5, useRef as useRef5 } from "react";
+var ComposerRoot = forwardRef5(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useComposer } = useComposerContext();
-    const formRef = useRef4(null);
+    const formRef = useRef5(null);
     const ref = useComposedRefs2(forwardedRef, formRef);
-    const composerContextValue = useMemo3(
-      () => ({
-        submit: () => formRef.current?.dispatchEvent(
-          new Event("submit", { cancelable: true, bubbles: true })
-        )
-      }),
-      []
-    );
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
       if (!composerState.isEditing)
@@ -583,75 +617,103 @@ var ComposerRoot = forwardRef4(
       e.preventDefault();
       composerState.send();
     };
-    return /* @__PURE__ */ React.createElement(ComposerFormContext.Provider, { value: composerContextValue }, /* @__PURE__ */ React.createElement(
-      Primitive4.form,
+    return /* @__PURE__ */ React.createElement(
+      Primitive5.form,
       {
         ...rest,
         ref,
-        onSubmit: composeEventHandlers3(onSubmit, handleSubmit)
+        onSubmit: composeEventHandlers4(onSubmit, handleSubmit)
       }
-    ));
+    );
   }
 );
 
 // src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
-import { forwardRef as forwardRef5 } from "react";
+import {
+  forwardRef as forwardRef6,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useRef as useRef6
+} from "react";
 import TextareaAutosize from "react-textarea-autosize";
-var ComposerInput = forwardRef5(({ asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
-  const { useThread } = useAssistantContext();
-  const isLoading = useThread((t) => t.isLoading);
-  const { useComposer } = useComposerContext();
-  const value = useComposer((c) => {
-    if (!c.isEditing)
-      return "";
-    return c.value;
-  });
-  const Component = asChild ? Slot : TextareaAutosize;
-  const composerForm = useComposerFormContext();
-  const handleKeyPress = (e) => {
-    if (disabled)
-      return;
-    if (e.key === "Escape") {
-      useComposer.getState().cancel();
-    }
-    if (isLoading)
-      return;
-    if (e.key === "Enter" && e.shiftKey === false) {
-      e.preventDefault();
-      composerForm.submit();
-    }
-  };
-  return /* @__PURE__ */ React.createElement(
-    Component,
-    {
-      value,
-      ...rest,
-      ref: forwardedRef,
-      disabled,
-      onChange: composeEventHandlers4(onChange, (e) => {
-        const composerState = useComposer.getState();
-        if (!composerState.isEditing)
-          return;
-        return composerState.setValue(e.target.value);
-      }),
-      onKeyDown: composeEventHandlers4(onKeyDown, handleKeyPress)
-    }
-  );
-});
+var ComposerInput = forwardRef6(
+  ({ autoFocus, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
+    const { useThread } = useAssistantContext();
+    const { useComposer, type } = useComposerContext();
+    const value = useComposer((c) => {
+      if (!c.isEditing)
+        return "";
+      return c.value;
+    });
+    const Component = asChild ? Slot : TextareaAutosize;
+    const handleKeyPress = (e) => {
+      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) {
+          e.preventDefault();
+          composer.send();
+        }
+      }
+    };
+    const textareaRef = useRef6(null);
+    const ref = useComposedRefs3(forwardedRef, textareaRef);
+    const autoFocusEnabled = autoFocus !== false && !disabled;
+    const focus = useCallback2(() => {
+      const textarea = textareaRef.current;
+      if (!textarea || !autoFocusEnabled)
+        return;
+      textarea.focus();
+      textarea.setSelectionRange(
+        textareaRef.current.value.length,
+        textareaRef.current.value.length
+      );
+    }, [autoFocusEnabled]);
+    useEffect2(() => focus(), [focus]);
+    useOnScrollToBottom(() => {
+      if (type === "assistant") {
+        focus();
+      }
+    });
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        value,
+        ...rest,
+        ref,
+        disabled,
+        onChange: composeEventHandlers5(onChange, (e) => {
+          const composerState = useComposer.getState();
+          if (!composerState.isEditing)
+            return;
+          return composerState.setValue(e.target.value);
+        }),
+        onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
+      }
+    );
+  }
+);
 
 // src/primitives/composer/ComposerSend.tsx
 import {
-  Primitive as Primitive5
+  Primitive as Primitive6
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef6 } from "react";
-var ComposerSend = forwardRef6(
+import { forwardRef as forwardRef7 } from "react";
+var ComposerSend = forwardRef7(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
     return /* @__PURE__ */ React.createElement(
-      Primitive5.button,
+      Primitive6.button,
       {
         type: "submit",
         ...rest,
@@ -663,24 +725,24 @@ var ComposerSend = forwardRef6(
 );
 
 // src/primitives/composer/ComposerCancel.tsx
-import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
 import {
-  Primitive as Primitive6
+  Primitive as Primitive7
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7 } from "react";
-var ComposerCancel = forwardRef7(({ disabled, onClick, ...rest }, ref) => {
+import { forwardRef as forwardRef8 } from "react";
+var ComposerCancel = forwardRef8(({ disabled, onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const hasValue = useComposer((c) => c.canCancel);
   const handleClose = () => {
     useComposer.getState().cancel();
   };
   return /* @__PURE__ */ React.createElement(
-    Primitive6.button,
+    Primitive7.button,
     {
       type: "button",
       ...rest,
       ref,
-      onClick: composeEventHandlers5(onClick, handleClose),
+      onClick: composeEventHandlers6(onClick, handleClose),
       disabled: disabled || !hasValue
     }
   );
@@ -696,44 +758,66 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
+// src/utils/context/combined/useCombinedStore.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/utils/context/combined/createCombinedStore.ts
+import { useSyncExternalStore } from "react";
+var createCombinedStore = (stores) => {
+  const subscribe = (callback) => {
+    const unsubscribes = stores.map((store) => store.subscribe(callback));
+    return () => {
+      for (const unsub of unsubscribes) {
+        unsub();
+      }
+    };
+  };
+  return (selector) => {
+    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/context/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = useMemo3(() => createCombinedStore(stores), stores);
+  return useCombined(selector);
+};
+
 // src/actions/useGoToNextBranch.tsx
 var useGoToNextBranch = () => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const { useComposer, useMessage } = useMessageContext();
-  const isLoading = useThread((s) => s.isLoading);
-  const isEditing = useComposer((s) => s.isEditing);
-  const hasNext = useMessage(
-    ({ branchState: { branchId, branchCount } }) => branchId + 1 < branchCount
+  const disabled = useCombinedStore(
+    [useThread, useComposer, useMessage],
+    (t, c, m) => t.isLoading || c.isEditing || m.message.branchId + 1 >= m.message.branchCount
   );
-  if (isLoading || isEditing || !hasNext)
+  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);
   };
 };
 
 // src/utils/createActionButton.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import {
-  Primitive as Primitive7
+  Primitive as Primitive8
 } from "@radix-ui/react-primitive";
-import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers7 } from "@radix-ui/primitive";
 var createActionButton = (useActionButton) => {
-  return forwardRef8(
+  return forwardRef9(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
       return /* @__PURE__ */ React.createElement(
-        Primitive7.button,
+        Primitive8.button,
         {
           type: "button",
           disabled: !onClick,
           ...props,
           ref: forwardedRef,
-          onClick: composeEventHandlers6(props.onClick, onClick ?? void 0)
+          onClick: composeEventHandlers7(props.onClick, onClick ?? void 0)
         }
       );
     }
@@ -745,19 +829,17 @@ var BranchPickerNext = createActionButton(useGoToNextBranch);
 
 // src/actions/useGoToPreviousBranch.tsx
 var useGoToPreviousBranch = () => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const { useComposer, useMessage } = useMessageContext();
-  const isLoading = useThread((s) => s.isLoading);
-  const isEditing = useComposer((s) => s.isEditing);
-  const hasNext = useMessage(({ branchState: { branchId } }) => branchId > 0);
-  if (isLoading || isEditing || !hasNext)
+  const disabled = useCombinedStore(
+    [useThread, useComposer, useMessage],
+    (t, c, m) => t.isLoading || 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);
   };
 };
 
@@ -767,24 +849,24 @@ 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);
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 import {
-  Primitive as Primitive8
+  Primitive as Primitive9
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef9 } from "react";
-var BranchPickerRoot = forwardRef9(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(Primitive8.div, { ...rest, ref }));
+import { forwardRef as forwardRef10 } from "react";
+var BranchPickerRoot = forwardRef10(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(Primitive9.div, { ...rest, ref }));
 });
 
 // src/primitives/actionBar/index.ts
@@ -798,29 +880,31 @@ __export(actionBar_exports, {
 
 // src/primitives/actionBar/ActionBarRoot.tsx
 import {
-  Primitive as Primitive9
+  Primitive as Primitive10
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef10 } from "react";
-var ActionBarRoot = forwardRef10(({ hideWhenBusy, autohide, autohideFloat, ...rest }, ref) => {
+import { forwardRef as forwardRef11 } from "react";
+var ActionBarRoot = forwardRef11(({ hideWhenBusy, autohide, autohideFloat, ...rest }, ref) => {
   const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
-  const hideAndfloatStatus = useMessage((m) => {
-    const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
-    if (!autohideEnabled)
+  const hideAndfloatStatus = useCombinedStore(
+    [useThread, useMessage],
+    (t, m) => {
+      if (hideWhenBusy && t.isLoading)
+        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)
+        return "floating" /* Floating */;
       return "normal" /* Normal */;
-    if (!m.isHovering)
-      return "hidden" /* Hidden */;
-    if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branchState.branchCount <= 1)
-      return "floating" /* Floating */;
-    return "normal" /* Normal */;
-  });
-  const busy = useThread((t) => t.isLoading);
-  if (hideWhenBusy && busy)
-    return null;
+    }
+  );
   if (hideAndfloatStatus === "hidden" /* Hidden */)
     return null;
   return /* @__PURE__ */ React.createElement(
-    Primitive9.div,
+    Primitive10.div,
     {
       "data-floating": hideAndfloatStatus === "floating" /* Floating */,
       ...rest,
@@ -850,17 +934,19 @@ var ActionBarCopy = createActionButton(useCopyMessage);
 
 // src/actions/useReloadMessage.tsx
 var useReloadMessage = () => {
-  const { useThread, useBranchObserver } = useAssistantContext();
+  const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
-  const isLoading = useThread((s) => s.isLoading);
-  const isAssistant = useMessage((s) => s.message.role === "assistant");
-  if (isLoading || !isAssistant)
+  const disabled = useCombinedStore(
+    [useThread, useMessage],
+    (t, m) => t.isLoading || m.message.role !== "assistant"
+  );
+  if (disabled)
     return null;
   return () => {
     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().reload(message.id);
   };
 };
 
@@ -870,9 +956,11 @@ var ActionBarReload = createActionButton(useReloadMessage);
 // src/actions/useBeginMessageEdit.tsx
 var useBeginMessageEdit = () => {
   const { useMessage, useComposer } = useMessageContext();
-  const isUser = useMessage((s) => s.message.role === "user");
-  const isEditing = useComposer((s) => s.isEditing);
-  if (!isUser || isEditing)
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  if (disabled)
     return null;
   return () => {
     const { edit } = useComposer.getState();
@@ -883,25 +971,41 @@ var useBeginMessageEdit = () => {
 // src/primitives/actionBar/ActionBarEdit.tsx
 var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
-// src/vercel/VercelAIAssistantProvider.tsx
-import { useCallback as useCallback2, useMemo as useMemo4 } from "react";
+// src/adapters/vercel/VercelAIAssistantProvider.tsx
+import { useCallback as useCallback3, useMemo as useMemo4 } from "react";
 
-// src/vercel/useDummyAIAssistantContext.tsx
-import { useState as useState3 } from "react";
+// src/adapters/vercel/useDummyAIAssistantContext.tsx
+import { useState as useState2 } from "react";
 import { create as create2 } from "zustand";
 var useDummyAIAssistantContext = () => {
-  const [context] = useState3(() => {
+  const [context] = useState2(() => {
+    const scrollToBottomListeners = /* @__PURE__ */ new Set();
     const useThread = create2()(() => ({
       messages: [],
       isLoading: false,
-      reload: async () => {
-        throw new Error("Not implemented");
-      },
       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 = create2()(() => ({
@@ -916,7 +1020,7 @@ var useDummyAIAssistantContext = () => {
       },
       send: () => {
         useThread.getState().append({
-          role: "user",
+          parentId: useThread.getState().messages.at(-1)?.id ?? ROOT_PARENT_ID,
           content: [{ type: "text", text: useComposer.getState().value }]
         });
         useComposer.getState().setValue("");
@@ -925,43 +1029,39 @@ var useDummyAIAssistantContext = () => {
         useThread.getState().stop();
       }
     }));
-    const useBranchObserver = create2()(() => ({
-      getBranchState: () => ({
-        branchId: 0,
-        branchCount: 1
-      }),
-      switchToBranch: () => {
-        throw new Error("Not implemented");
-      },
-      editAt: async () => {
-        throw new Error("Not implemented");
-      },
-      reloadAt: async () => {
-        throw new Error("Not implemented");
-      }
-    }));
-    return { useThread, useComposer, useBranchObserver };
+    return { useThread, 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;
   });
@@ -972,28 +1072,14 @@ var VercelAIAssistantProvider = ({
 }) => {
   const context = useDummyAIAssistantContext();
   const vercel = "chat" in rest ? rest.chat : rest.assistant;
+  const branches = useVercelAIBranches(vercel, context);
   const messages = useMemo4(() => {
-    return vercelToCachedThreadMessages(vercel.messages);
-  }, [vercel.messages]);
-  const maybeReload = "reload" in vercel ? vercel.reload : null;
-  const reload = useCallback2(async () => {
-    if (!maybeReload)
-      throw new Error("Reload not supported");
-    await maybeReload();
-  }, [maybeReload]);
-  const append = useCallback2(
-    async (message) => {
-      if (message.content[0]?.type !== "text") {
-        throw new Error("Only text content is currently supported");
-      }
-      await vercel.append({
-        role: message.role,
-        content: message.content[0].text
-      });
-    },
-    [vercel.append]
-  );
-  const stop = useCallback2(() => {
+    return vercelToCachedThreadMessages(
+      vercel.messages,
+      branches.getBranchState
+    );
+  }, [vercel.messages, branches.getBranchState]);
+  const stop = useCallback3(() => {
     const lastMessage = vercel.messages.at(-1);
     vercel.stop();
     if (lastMessage?.role === "user") {
@@ -1002,17 +1088,15 @@ var VercelAIAssistantProvider = ({
   }, [vercel.messages, vercel.stop, vercel.setInput]);
   const isLoading = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
   useMemo4(() => {
-    context.useThread.setState(
-      {
-        messages,
-        isLoading,
-        reload,
-        append,
-        stop
-      },
-      true
-    );
-  }, [context, messages, reload, append, stop, isLoading]);
+    context.useThread.setState({
+      messages,
+      isLoading,
+      stop,
+      switchToBranch: branches.switchToBranch,
+      append: branches.append,
+      reload: branches.reload
+    });
+  }, [context, messages, isLoading, stop, branches]);
   useMemo4(() => {
     context.useComposer.setState({
       canCancel: isLoading,
@@ -1020,34 +1104,35 @@ var VercelAIAssistantProvider = ({
       setValue: vercel.setInput
     });
   }, [context, isLoading, vercel.input, vercel.setInput]);
-  const branches = useVercelAIBranches(vercel);
-  useMemo4(() => {
-    context.useBranchObserver.setState(branches, true);
-  }, [context, branches]);
   return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
 };
 
-// src/vercel/VercelRSCAssistantProvider.tsx
+// src/adapters/vercel/VercelRSCAssistantProvider.tsx
 import {
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useMemo as useMemo5
 } from "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;
   });
@@ -1061,17 +1146,17 @@ var VercelRSCAssistantProvider = ({
   const messages = useMemo5(() => {
     return vercelToCachedThreadMessages2(vercelMessages);
   }, [vercelMessages]);
-  const append = useCallback3(
+  const append = useCallback4(
     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");
       }
-      await vercelAppend({
-        role: message.role,
-        content: [{ type: "text", text: message.content[0].text }]
-      });
+      context.useThread.getState().scrollToBottom();
+      await vercelAppend(message);
     },
-    [vercelAppend]
+    [context, vercelAppend]
   );
   useMemo5(() => {
     context.useThread.setState({