@assistant-ui/react 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -10,137 +10,26 @@ __export(thread_exports, {
   Empty: () => ThreadEmpty,
   If: () => ThreadIf,
   Messages: () => ThreadMessages,
-  Provider: () => ThreadProvider,
   Root: () => ThreadRoot,
   Viewport: () => ThreadViewport
 });
 
-// src/utils/hooks/useBranches.tsx
-import { useCallback, useMemo, useRef } from "react";
-var ROOT_ID = "__ROOT_ID__";
-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;
-    data.parentMap.set(childId, parentId);
-    let parentArray = data.branchMap.get(parentId);
-    if (!parentArray) {
-      data.branchMap.set(parentId, [childId]);
-    } else if (!parentArray.includes(childId)) {
-      parentArray.push(childId);
-    }
-    data.snapshots.set(childId, messages);
-  }
-};
-var getParentId = (data, messages, message) => {
-  if (message.id === UPCOMING_MESSAGE_ID) {
-    const parent = messages.at(-1);
-    if (!parent)
-      return ROOT_ID;
-    return parent.id;
+// src/primitives/thread/ThreadRoot.tsx
+import { forwardRef } from "react";
+import {
+  Primitive
+} from "@radix-ui/react-primitive";
+var ThreadRoot = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(Primitive.div, { ...props, ref });
   }
-  const parentId = data.parentMap.get(message.id);
-  if (!parentId)
-    throw new Error("Unexpected: Message parent not found");
-  return parentId;
-};
-var getBranchStateImpl = (data, messages, message) => {
-  const parentId = getParentId(data, messages, message);
-  const branches = data.branchMap.get(parentId) ?? [];
-  const branchId = message.id === UPCOMING_MESSAGE_ID ? branches.length : branches.indexOf(message.id);
-  if (branchId === -1)
-    throw new Error("Unexpected: Message not found in parent children");
-  const upcomingOffset = message.id === UPCOMING_MESSAGE_ID ? 1 : 0;
-  return {
-    branchId,
-    branchCount: branches.length + upcomingOffset
-  };
-};
-var switchToBranchImpl = (data, messages, message, branchId) => {
-  const parentId = getParentId(data, messages, message);
-  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 === message.id)
-    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)
-    return messages;
-  const messageIdx = messages.findIndex((m) => m.id === message.id);
-  if (messageIdx === -1)
-    throw new Error("Unexpected: Message not found");
-  return messages.slice(0, messageIdx);
-};
-var useChatWithBranches = (chat) => {
-  const data = useRef({
-    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);
-    },
-    [chat.messages]
-  );
-  const switchToBranch = useCallback(
-    (message, branchId) => {
-      const newMessages = switchToBranchImpl(
-        data,
-        chat.messages,
-        message,
-        branchId
-      );
-      chat.setMessages(newMessages);
-    },
-    [chat.messages, chat.setMessages]
-  );
-  const reloadAt = useCallback(
-    async (message) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message);
-      chat.setMessages(newMessages);
-      await chat.reload();
-    },
-    [chat.messages, chat.setMessages, chat.reload]
-  );
-  const editAt = useCallback(
-    async (message, newMessage) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message);
-      chat.setMessages(newMessages);
-      await chat.append(newMessage);
-    },
-    [chat.messages, chat.setMessages, chat.append]
-  );
-  return useMemo(
-    () => ({
-      ...chat,
-      getBranchState,
-      switchToBranch,
-      editAt,
-      reloadAt
-    }),
-    [chat, getBranchState, switchToBranch, editAt, reloadAt]
-  );
-};
+);
 
 // src/utils/context/createStoreContext.tsx
 import {
   createContext,
   useContext,
-  useMemo as useMemo2,
+  useMemo,
   useState
 } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
@@ -179,7 +68,9 @@ var createStoreContext = (providerName) => {
           return () => listeners.delete(cb);
         },
         emit: () => {
-          listeners.forEach((l) => l());
+          for (const listener of listeners) {
+            listener();
+          }
         },
         snapshot: () => {
           return state;
@@ -190,7 +81,7 @@ var createStoreContext = (providerName) => {
         }
       };
     });
-    useMemo2(
+    useMemo(
       () => store.setState(unstableContext),
       Object.values(unstableContext)
     );
@@ -216,21 +107,6 @@ var createStoreContext = (providerName) => {
 // src/utils/context/ThreadContext.ts
 var [ThreadContextProvider, useThreadContext] = createStoreContext("Thread.Provider");
 
-// src/primitives/thread/ThreadProvider.tsx
-var ThreadProvider = ({ chat, children }) => {
-  const branches = useChatWithBranches(chat);
-  return /* @__PURE__ */ React.createElement(ThreadContextProvider, { chat: branches }, children);
-};
-
-// src/primitives/thread/ThreadRoot.tsx
-import { forwardRef } from "react";
-import { Primitive } from "@radix-ui/react-primitive";
-var ThreadRoot = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ React.createElement(Primitive.div, { ...props, ref });
-  }
-);
-
 // src/primitives/thread/ThreadIf.tsx
 var useThreadIf = (props) => {
   return useThreadContext("Thread.If", (s) => {
@@ -257,15 +133,17 @@ var ThreadEmpty = ({ children }) => {
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { forwardRef as forwardRef2, useRef as useRef3, useState as useState2 } from "react";
-import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef2, useRef as useRef2, useState as useState2 } from "react";
+import {
+  Primitive as Primitive2
+} from "@radix-ui/react-primitive";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
 // src/utils/hooks/useOnResizeContent.tsx
-import { useLayoutEffect, useRef as useRef2 } from "react";
+import { useLayoutEffect, useRef } from "react";
 var useOnResizeContent = (ref, callback) => {
-  const callbackRef = useRef2(callback);
+  const callbackRef = useRef(callback);
   callbackRef.current = callback;
   useLayoutEffect(() => {
     const el = ref.current;
@@ -275,31 +153,37 @@ var useOnResizeContent = (ref, callback) => {
       callbackRef.current();
     });
     const mutationObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        mutation.addedNodes.forEach((node) => {
-          if (node instanceof HTMLElement) {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (node instanceof Element) {
             resizeObserver.observe(node);
           }
-        });
-        mutation.removedNodes.forEach((node) => {
-          if (node instanceof HTMLElement) {
+        }
+        for (const node of mutation.removedNodes) {
+          if (node instanceof Element) {
             resizeObserver.unobserve(node);
           }
-        });
-      });
+        }
+      }
       callbackRef.current();
     });
+    resizeObserver.observe(el);
     mutationObserver.observe(el, { childList: true });
+    for (const child of el.children) {
+      resizeObserver.observe(child);
+      console.log("observing child", child);
+    }
     return () => {
+      console.log("disconnecting");
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, []);
+  }, [ref.current]);
 };
 
 // src/primitives/thread/ThreadViewport.tsx
 var ThreadViewport = forwardRef2(({ onScroll, children, ...rest }, forwardedRef) => {
-  const divRef = useRef3(null);
+  const divRef = useRef2(null);
   const ref = useComposedRefs(forwardedRef, divRef);
   const [isAtBottom, setIsAtBottom] = useState2(true);
   useOnResizeContent(divRef, () => {
@@ -312,8 +196,9 @@ var ThreadViewport = forwardRef2(({ onScroll, children, ...rest }, forwardedRef)
     const div = divRef.current;
     if (!div)
       return;
-    setIsAtBottom(div.scrollHeight - div.scrollTop <= div.clientHeight);
+    setIsAtBottom(div.scrollHeight - div.scrollTop <= div.clientHeight + 50);
   };
+  console.log(isAtBottom);
   return /* @__PURE__ */ React.createElement(
     Primitive2.div,
     {
@@ -325,6 +210,127 @@ var ThreadViewport = forwardRef2(({ onScroll, children, ...rest }, forwardedRef)
   );
 });
 
+// src/utils/hooks/useBranches.tsx
+import { useCallback, useMemo as useMemo2, useRef as useRef3 } from "react";
+var ROOT_ID = "__ROOT_ID__";
+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;
+    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);
+    }
+    data.snapshots.set(childId, messages);
+  }
+};
+var getParentId = (data, messages, message) => {
+  if (message.id === UPCOMING_MESSAGE_ID) {
+    const parent = messages.at(-1);
+    if (!parent)
+      return ROOT_ID;
+    return parent.id;
+  }
+  const parentId = data.parentMap.get(message.id);
+  if (!parentId)
+    throw new Error("Unexpected: Message parent not found");
+  return parentId;
+};
+var getBranchStateImpl = (data, messages, message) => {
+  const parentId = getParentId(data, messages, message);
+  const branches = data.branchMap.get(parentId) ?? [];
+  const branchId = message.id === UPCOMING_MESSAGE_ID ? branches.length : branches.indexOf(message.id);
+  if (branchId === -1)
+    throw new Error("Unexpected: Message not found in parent children");
+  const upcomingOffset = message.id === UPCOMING_MESSAGE_ID ? 1 : 0;
+  return {
+    branchId,
+    branchCount: branches.length + upcomingOffset
+  };
+};
+var switchToBranchImpl = (data, messages, message, branchId) => {
+  const parentId = getParentId(data, messages, message);
+  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 === message.id)
+    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)
+    return messages;
+  const messageIdx = messages.findIndex((m) => m.id === message.id);
+  if (messageIdx === -1)
+    throw new Error("Unexpected: Message not found");
+  return messages.slice(0, messageIdx);
+};
+var useChatWithBranches = (chat) => {
+  const data = useRef3({
+    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);
+    },
+    [data, chat.messages]
+  );
+  const switchToBranch = useCallback(
+    (message, branchId) => {
+      const newMessages = switchToBranchImpl(
+        data,
+        chat.messages,
+        message,
+        branchId
+      );
+      chat.setMessages(newMessages);
+    },
+    [data, chat.messages, chat.setMessages]
+  );
+  const reloadAt = useCallback(
+    async (message) => {
+      const newMessages = sliceMessagesUntil(chat.messages, message);
+      chat.setMessages(newMessages);
+      await chat.reload();
+    },
+    [chat.messages, chat.setMessages, chat.reload]
+  );
+  const editAt = useCallback(
+    async (message, newMessage) => {
+      const newMessages = sliceMessagesUntil(chat.messages, message);
+      chat.setMessages(newMessages);
+      await chat.append(newMessage);
+    },
+    [chat.messages, chat.setMessages, chat.append]
+  );
+  return useMemo2(
+    () => ({
+      ...chat,
+      getBranchState,
+      switchToBranch,
+      editAt,
+      reloadAt
+    }),
+    [chat, getBranchState, switchToBranch, editAt, reloadAt]
+  );
+};
+
 // src/primitives/message/index.ts
 var message_exports = {};
 __export(message_exports, {
@@ -377,7 +383,9 @@ var MessageProvider = ({
 
 // src/primitives/message/MessageRoot.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
+import {
+  Primitive as Primitive3
+} from "@radix-ui/react-primitive";
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
 var MessageRoot = forwardRef3(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
@@ -445,35 +453,10 @@ var MessageContent = () => {
 };
 
 // src/primitives/message/MessageEditableContent.tsx
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-import { forwardRef as forwardRef4, useRef as useRef4 } from "react";
-
-// src/utils/hooks/useAutosize.tsx
-import { useLayoutEffect as useLayoutEffect2 } from "react";
-var useAutosize = (ref) => {
-  const el = ref.current;
-  useLayoutEffect2(() => {
-    const el2 = ref.current;
-    if (!el2)
-      return;
-    const callback = () => {
-      el2.style.height = "0px";
-      el2.style.height = el2.scrollHeight + "px";
-    };
-    el2.addEventListener("input", callback);
-    callback();
-    return () => {
-      el2.removeEventListener("input", callback);
-    };
-  }, [ref, el]);
-};
-
-// src/primitives/message/MessageEditableContent.tsx
+import { forwardRef as forwardRef4 } from "react";
 import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
+import TextareaAutosize from "react-textarea-autosize";
 var MessageEditableContent = forwardRef4(({ onChange, value, ...rest }, forwardedRef) => {
-  const textareaRef = useRef4(null);
-  const ref = useComposedRefs2(forwardedRef, textareaRef);
-  useAutosize(textareaRef);
   const [editState, setEditState] = useMessageContext(
     "Message.EditableContent",
     (s) => [s.editState, s.setEditState]
@@ -486,10 +469,10 @@ var MessageEditableContent = forwardRef4(({ onChange, value, ...rest }, forwarde
       "Message.EditableContent may only be rendered when edit mode is enabled. Consider wrapping the component in <Message.If editing>."
     );
   return /* @__PURE__ */ React.createElement(
-    "textarea",
+    TextareaAutosize,
     {
       ...rest,
-      ref,
+      ref: forwardedRef,
       onChange: composeEventHandlers3(onChange, handleChange),
       value: editState.value || value
     }
@@ -497,15 +480,24 @@ var MessageEditableContent = forwardRef4(({ onChange, value, ...rest }, forwarde
 });
 
 // src/primitives/thread/ThreadMessages.tsx
-var ThreadMessages = ({
-  components: { Message }
-}) => {
+var getComponents = (components) => {
+  return {
+    EditingUserMessage: components.EditingUserMessage ?? components.UserMessage ?? components.Message,
+    UserMessage: components.UserMessage ?? components.Message,
+    AssistantMessage: components.AssistantMessage ?? components.Message
+  };
+};
+var ThreadMessages = ({ components }) => {
   const chat = useThreadContext("Thread.Messages", (s) => s.chat);
   const messages = chat.messages;
+  const { UserMessage, EditingUserMessage, AssistantMessage } = getComponents(components);
   if (messages.length === 0)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, messages.map((message, index) => {
-    return /* @__PURE__ */ React.createElement(MessageProvider, { key: index, message }, /* @__PURE__ */ React.createElement(Message, null));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, 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, editing: false }, /* @__PURE__ */ React.createElement(UserMessage, null)), /* @__PURE__ */ React.createElement(MessageIf, { user: true, editing: true }, /* @__PURE__ */ React.createElement(EditingUserMessage, null)), /* @__PURE__ */ React.createElement(MessageIf, { assistant: true }, /* @__PURE__ */ React.createElement(AssistantMessage, null)))
+    );
   }), chat.isLoading && chat.messages[chat.messages.length - 1]?.role !== "assistant" && /* @__PURE__ */ React.createElement(
     MessageProvider,
     {
@@ -515,7 +507,7 @@ var ThreadMessages = ({
         content: "..."
       }
     },
-    /* @__PURE__ */ React.createElement(Message, null)
+    /* @__PURE__ */ React.createElement(AssistantMessage, null)
   ));
 };
 
@@ -529,10 +521,12 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { createContext as createContext2, forwardRef as forwardRef5, useContext as useContext2, useMemo as useMemo4, useRef as useRef5 } from "react";
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { createContext as createContext2, forwardRef as forwardRef5, useContext as useContext2, useMemo as useMemo4, useRef as useRef4 } from "react";
+import {
+  Primitive as Primitive4
+} from "@radix-ui/react-primitive";
 import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 var ComposerContext = createContext2(null);
 var useComposerContext = () => {
   const context = useContext2(ComposerContext);
@@ -549,8 +543,8 @@ var ComposerRoot = forwardRef5(
       "Composer.Root",
       (s) => s.chat.handleSubmit
     );
-    const formRef = useRef5(null);
-    const ref = useComposedRefs3(forwardedRef, formRef);
+    const formRef = useRef4(null);
+    const ref = useComposedRefs2(forwardedRef, formRef);
     const composerContextValue = useMemo4(
       () => ({
         submit: () => formRef.current?.dispatchEvent(
@@ -571,10 +565,10 @@ var ComposerRoot = forwardRef5(
 );
 
 // src/primitives/composer/ComposerInput.tsx
-import { forwardRef as forwardRef6, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs4 } from "@radix-ui/react-compose-refs";
+import TextareaAutosize2 from "react-textarea-autosize";
 var ComposerInput = forwardRef6(({ asChild, onChange, onKeyDown, ...rest }, forwardedRef) => {
   const chat = useThreadContext(
     "Composer.Input",
@@ -584,15 +578,12 @@ var ComposerInput = forwardRef6(({ asChild, onChange, onKeyDown, ...rest }, forw
       isLoading
     })
   );
-  const Component = asChild ? Slot : "textarea";
-  const textareaRef = useRef6(null);
-  const ref = useComposedRefs4(forwardedRef, textareaRef);
-  useAutosize(textareaRef);
+  const Component = asChild ? Slot : TextareaAutosize2;
   const composer = useComposerContext();
   const handleKeyPress = (e) => {
     if (chat.isLoading || rest.disabled)
       return;
-    if (e.key === "Enter" && e.shiftKey == false) {
+    if (e.key === "Enter" && e.shiftKey === false) {
       e.preventDefault();
       composer.submit();
     }
@@ -602,7 +593,7 @@ var ComposerInput = forwardRef6(({ asChild, onChange, onKeyDown, ...rest }, forw
     {
       value: chat.input,
       ...rest,
-      ref,
+      ref: forwardedRef,
       onChange: composeEventHandlers5(onChange, chat.handleInputChange),
       onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
     }
@@ -611,7 +602,9 @@ var ComposerInput = forwardRef6(({ asChild, onChange, onKeyDown, ...rest }, forw
 
 // src/primitives/composer/ComposerSend.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import {
+  Primitive as Primitive5
+} from "@radix-ui/react-primitive";
 var ComposerSend = forwardRef7(
   ({ disabled, ...rest }, ref) => {
     const input = useThreadContext("Composer.Send", (s) => s.chat.input);
@@ -629,7 +622,9 @@ var ComposerSend = forwardRef7(
 
 // src/utils/createActionButton.tsx
 import { forwardRef as forwardRef8 } from "react";
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import {
+  Primitive as Primitive6
+} from "@radix-ui/react-primitive";
 import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
 var createActionButton = (useActionButton) => {
   return forwardRef8(
@@ -671,41 +666,59 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
-// src/primitives/branchPicker/BranchPickerNext.tsx
-var useBranchPickerNext = () => {
+// src/actions/useGoToNextBranch.tsx
+var useGoToNextBranch = () => {
   const switchToBranch = useThreadContext(
     "BranchPicker.Next",
     (s) => s.chat.switchToBranch
   );
-  const [message, { branchId, branchCount }] = useMessageContext(
-    "BranchPicker.Next",
-    (s) => [s.message, s.branchState]
-  );
-  if (branchCount <= 1 || branchId + 1 >= branchCount)
+  const context = useMessageContext("BranchPicker.Next", (s) => {
+    const {
+      message: message2,
+      editState: { isEditing },
+      branchState: { branchId: branchId2, branchCount }
+    } = s;
+    if (isEditing || branchCount <= 1 || branchId2 + 1 >= branchCount)
+      return null;
+    return { message: message2, branchId: branchId2 };
+  });
+  if (!context)
     return null;
+  const { message, branchId } = context;
   return () => {
     switchToBranch(message, branchId + 1);
   };
 };
-var BranchPickerNext = createActionButton(useBranchPickerNext);
 
-// src/primitives/branchPicker/BranchPickerPrevious.tsx
-var useBranchPickerPrevious = () => {
+// src/primitives/branchPicker/BranchPickerNext.tsx
+var BranchPickerNext = createActionButton(useGoToNextBranch);
+
+// src/actions/useGoToPreviousBranch.tsx
+var useGoToPreviousBranch = () => {
   const switchToBranch = useThreadContext(
     "BranchPicker.Previous",
     (s) => s.chat.switchToBranch
   );
-  const [message, { branchId, branchCount }] = useMessageContext(
-    "BranchPicker.Previous",
-    (s) => [s.message, s.branchState]
-  );
-  if (branchCount <= 1 || branchId <= 0)
+  const context = useMessageContext("BranchPicker.Previous", (s) => {
+    const {
+      message: message2,
+      editState: { isEditing },
+      branchState: { branchId: branchId2, branchCount }
+    } = s;
+    if (isEditing || branchCount <= 1 || branchId2 <= 0)
+      return null;
+    return { message: message2, branchId: branchId2 };
+  });
+  if (!context)
     return null;
+  const { message, branchId } = context;
   return () => {
     switchToBranch(message, branchId - 1);
   };
 };
-var BranchPickerPrevious = createActionButton(useBranchPickerPrevious);
+
+// src/primitives/branchPicker/BranchPickerPrevious.tsx
+var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
 var BranchPickerCount = () => {
@@ -726,10 +739,12 @@ var BranchPickerNumber = () => {
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
+import {
+  Primitive as Primitive7
+} from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef9 } from "react";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-var BranchPickerRoot = forwardRef9(({ ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(Primitive7.div, { ...rest, ref });
+var BranchPickerRoot = forwardRef9(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(Primitive7.div, { ...rest, ref }));
 });
 
 // src/primitives/actionBar/index.ts
@@ -742,51 +757,81 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
+import {
+  Primitive as Primitive8
+} from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef10 } from "react";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-var ActionBarRoot = forwardRef10(
-  ({ ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(Primitive8.div, { ...rest, ref });
-  }
-);
+var ActionBarRoot = forwardRef10(({ ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(Primitive8.div, { ...rest, ref });
+});
 
-// src/primitives/actionBar/ActionBarCopy.tsx
-var useActionBarCopy = ({ copiedDuration = 3e3 }) => {
-  const [messageContent, setIsCopied] = useMessageContext(
-    "ActionBar.Copy",
-    (s) => [s.message.content, s.setIsCopied]
-  );
+// src/actions/useCopyMessage.tsx
+var useCopyMessage = ({ copiedDuration = 3e3 }) => {
+  const context = useMessageContext("ActionBar.Copy", (s) => {
+    const {
+      editState: { isEditing },
+      message: { content: content2 },
+      setIsCopied: setIsCopied2
+    } = s;
+    if (isEditing)
+      return null;
+    return { content: content2, setIsCopied: setIsCopied2 };
+  });
+  if (!context)
+    return null;
+  const { content, setIsCopied } = context;
   return () => {
-    navigator.clipboard.writeText(messageContent);
+    navigator.clipboard.writeText(content);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), copiedDuration);
   };
 };
-var ActionBarCopy = createActionButton(useActionBarCopy);
 
-// src/primitives/actionBar/ActionBarReload.tsx
-var useActionBarReload = () => {
-  const chat = useThreadContext("ActionBar.Reload", (s) => s.chat);
-  const message = useMessageContext("ActionBar.Reload", (s) => s.message);
-  if (message.role !== "assistant" || chat.isLoading)
+// src/primitives/actionBar/ActionBarCopy.tsx
+var ActionBarCopy = createActionButton(useCopyMessage);
+
+// src/actions/useReloadMessage.tsx
+var useReloadMessage = () => {
+  const [isLoading, reloadAt] = useThreadContext("ActionBar.Reload", (s) => [
+    s.chat.isLoading,
+    s.chat.reloadAt
+  ]);
+  const message = useMessageContext("ActionBar.Reload", (s) => {
+    const message2 = s.message;
+    if (message2.role !== "assistant" || isLoading)
+      return null;
+    return message2;
+  });
+  if (!message)
     return null;
-  return () => chat.reloadAt(message);
+  return () => reloadAt(message);
 };
-var ActionBarReload = createActionButton(useActionBarReload);
 
-// src/primitives/actionBar/ActionBarEdit.tsx
-var useActionBarEdit = () => {
-  const [editState, messageContent, setEditState] = useMessageContext(
-    "ActionBar.Edit",
-    (s) => [s.editState, s.message.content, s.setEditState]
-  );
-  if (editState.isEditing)
+// src/primitives/actionBar/ActionBarReload.tsx
+var ActionBarReload = createActionButton(useReloadMessage);
+
+// src/actions/useBeginMessageEdit.tsx
+var useBeginMessageEdit = () => {
+  const context = useMessageContext("ActionBar.Edit", (s) => {
+    const {
+      message: { content: content2 },
+      editState: { isEditing },
+      setEditState: setEditState2
+    } = s;
+    if (isEditing)
+      return null;
+    return { content: content2, setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { content, setEditState } = context;
   return () => {
-    setEditState({ isEditing: true, value: messageContent });
+    setEditState({ isEditing: true, value: content });
   };
 };
-var ActionBarEdit = createActionButton(useActionBarEdit);
+
+// src/primitives/actionBar/ActionBarEdit.tsx
+var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
 // src/primitives/editBar/index.ts
 var editBar_exports = {};
@@ -797,56 +842,86 @@ __export(editBar_exports, {
 });
 
 // src/primitives/editBar/EditBarRoot.tsx
+import {
+  Primitive as Primitive9
+} from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef11 } from "react";
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 var EditBarRoot = forwardRef11(
   ({ ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement(Primitive9.div, { ...rest, ref });
   }
 );
 
-// src/primitives/editBar/EditBarSave.tsx
-var useEditBarSave = () => {
+// src/actions/useSaveMessageEdit.tsx
+var useSaveMessageEdit = () => {
   const chat = useThreadContext("EditBar.Save", (s) => s.chat);
-  const [editState, message, setEditState] = useMessageContext(
-    "EditBar.Save",
-    (s) => [s.editState, s.message, s.setEditState]
-  );
-  if (!editState.isEditing)
+  const context = useMessageContext("EditBar.Save", (s) => {
+    const { message: message2, editState, setEditState: setEditState2 } = s;
+    if (!editState.isEditing)
+      return null;
+    return { message: message2, content: editState.value, setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { message, content, setEditState } = context;
   return () => {
-    if (!editState.isEditing)
-      return;
     chat.editAt(message, {
       ...message,
       id: void 0,
       // remove id to create a new message
-      content: editState.value
+      content
     });
     setEditState({ isEditing: false });
   };
 };
-var EditBarSave = createActionButton(useEditBarSave);
 
-// src/primitives/editBar/EditBarCancel.tsx
-var useEditBarCancel = () => {
-  const [isEditing, setEditState] = useMessageContext("EditBar.Cancel", (s) => [
-    s.editState.isEditing,
-    s.setEditState
-  ]);
-  if (!isEditing)
+// src/primitives/editBar/EditBarSave.tsx
+var EditBarSave = createActionButton(useSaveMessageEdit);
+
+// src/actions/useCancelMessageEdit.tsx
+var useCancelMessageEdit = () => {
+  const context = useMessageContext("EditBar.Cancel", (s) => {
+    const {
+      editState: { isEditing },
+      setEditState: setEditState2
+    } = s;
+    if (!isEditing)
+      return null;
+    return { setEditState: setEditState2 };
+  });
+  if (!context)
     return null;
+  const { setEditState } = context;
   return () => {
     setEditState({ isEditing: false });
   };
 };
-var EditBarCancel = createActionButton(useEditBarCancel);
+
+// src/primitives/editBar/EditBarCancel.tsx
+var EditBarCancel = createActionButton(useCancelMessageEdit);
+
+// src/vercel/VercelAIThreadProvider.tsx
+var VercelAIThreadProvider = ({
+  chat,
+  children
+}) => {
+  const branches = useChatWithBranches(chat);
+  return /* @__PURE__ */ React.createElement(ThreadContextProvider, { chat: branches }, children);
+};
 export {
-  actionBar_exports as ActionBar,
-  branchPicker_exports as BranchPicker,
-  composer_exports as Composer,
-  editBar_exports as EditBar,
-  message_exports as Message,
-  thread_exports as Thread,
-  useMessageContext as unstable_useMessageContext
+  actionBar_exports as ActionBarPrimitive,
+  branchPicker_exports as BranchPickerPrimitive,
+  composer_exports as ComposerPrimitive,
+  editBar_exports as EditBarPrimitive,
+  message_exports as MessagePrimitive,
+  thread_exports as ThreadPrimitive,
+  VercelAIThreadProvider,
+  useMessageContext as unstable_useMessageContext,
+  useBeginMessageEdit,
+  useCancelMessageEdit,
+  useCopyMessage,
+  useGoToNextBranch,
+  useGoToPreviousBranch,
+  useReloadMessage,
+  useSaveMessageEdit
 };