@assistant-ui/react 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,18 +17,34 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ActionBar: () => actionBar_exports,
-  BranchPicker: () => branchPicker_exports,
-  Composer: () => composer_exports,
-  EditBar: () => editBar_exports,
-  Message: () => message_exports,
-  Thread: () => thread_exports,
-  unstable_useMessageContext: () => useMessageContext
+  ActionBarPrimitive: () => actionBar_exports,
+  BranchPickerPrimitive: () => branchPicker_exports,
+  ComposerPrimitive: () => composer_exports,
+  EditBarPrimitive: () => editBar_exports,
+  MessagePrimitive: () => message_exports,
+  ThreadPrimitive: () => thread_exports,
+  VercelAIThreadProvider: () => VercelAIThreadProvider,
+  unstable_useMessageContext: () => useMessageContext,
+  useBeginMessageEdit: () => useBeginMessageEdit,
+  useCancelMessageEdit: () => useCancelMessageEdit,
+  useCopyMessage: () => useCopyMessage,
+  useGoToNextBranch: () => useGoToNextBranch,
+  useGoToPreviousBranch: () => useGoToPreviousBranch,
+  useReloadMessage: () => useReloadMessage,
+  useSaveMessageEdit: () => useSaveMessageEdit
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -36,131 +54,18 @@ __export(thread_exports, {
   Empty: () => ThreadEmpty,
   If: () => ThreadIf,
   Messages: () => ThreadMessages,
-  Provider: () => ThreadProvider,
   Root: () => ThreadRoot,
   Viewport: () => ThreadViewport
 });
 
-// src/utils/hooks/useBranches.tsx
+// src/primitives/thread/ThreadRoot.tsx
 var import_react = require("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;
+var import_react_primitive = require("@radix-ui/react-primitive");
+var ThreadRoot = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(import_react_primitive.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 = (0, import_react.useRef)({
-    parentMap: /* @__PURE__ */ new Map(),
-    branchMap: /* @__PURE__ */ new Map(),
-    snapshots: /* @__PURE__ */ new Map()
-  }).current;
-  updateBranchData(data, chat.messages);
-  const getBranchState = (0, import_react.useCallback)(
-    (message) => {
-      return getBranchStateImpl(data, chat.messages, message);
-    },
-    [chat.messages]
-  );
-  const switchToBranch = (0, import_react.useCallback)(
-    (message, branchId) => {
-      const newMessages = switchToBranchImpl(
-        data,
-        chat.messages,
-        message,
-        branchId
-      );
-      chat.setMessages(newMessages);
-    },
-    [chat.messages, chat.setMessages]
-  );
-  const reloadAt = (0, import_react.useCallback)(
-    async (message) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message);
-      chat.setMessages(newMessages);
-      await chat.reload();
-    },
-    [chat.messages, chat.setMessages, chat.reload]
-  );
-  const editAt = (0, import_react.useCallback)(
-    async (message, newMessage) => {
-      const newMessages = sliceMessagesUntil(chat.messages, message);
-      chat.setMessages(newMessages);
-      await chat.append(newMessage);
-    },
-    [chat.messages, chat.setMessages, chat.append]
-  );
-  return (0, import_react.useMemo)(
-    () => ({
-      ...chat,
-      getBranchState,
-      switchToBranch,
-      editAt,
-      reloadAt
-    }),
-    [chat, getBranchState, switchToBranch, editAt, reloadAt]
-  );
-};
+);
 
 // src/utils/context/createStoreContext.tsx
 var import_react2 = require("react");
@@ -200,7 +105,9 @@ var createStoreContext = (providerName) => {
           return () => listeners.delete(cb);
         },
         emit: () => {
-          listeners.forEach((l) => l());
+          for (const listener of listeners) {
+            listener();
+          }
         },
         snapshot: () => {
           return state;
@@ -237,21 +144,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
-var import_react3 = require("react");
-var import_react_primitive = require("@radix-ui/react-primitive");
-var ThreadRoot = (0, import_react3.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ React.createElement(import_react_primitive.Primitive.div, { ...props, ref });
-  }
-);
-
 // src/primitives/thread/ThreadIf.tsx
 var useThreadIf = (props) => {
   return useThreadContext("Thread.If", (s) => {
@@ -278,17 +170,17 @@ var ThreadEmpty = ({ children }) => {
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_react_primitive2 = require("@radix-ui/react-primitive");
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_primitive = require("@radix-ui/primitive");
 
 // src/utils/hooks/useOnResizeContent.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var useOnResizeContent = (ref, callback) => {
-  const callbackRef = (0, import_react4.useRef)(callback);
+  const callbackRef = (0, import_react3.useRef)(callback);
   callbackRef.current = callback;
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     const el = ref.current;
     if (!el)
       return;
@@ -296,33 +188,39 @@ 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 = (0, import_react5.forwardRef)(({ onScroll, children, ...rest }, forwardedRef) => {
-  const divRef = (0, import_react5.useRef)(null);
+var ThreadViewport = (0, import_react4.forwardRef)(({ onScroll, children, ...rest }, forwardedRef) => {
+  const divRef = (0, import_react4.useRef)(null);
   const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
-  const [isAtBottom, setIsAtBottom] = (0, import_react5.useState)(true);
+  const [isAtBottom, setIsAtBottom] = (0, import_react4.useState)(true);
   useOnResizeContent(divRef, () => {
     const div = divRef.current;
     if (!div || !isAtBottom)
@@ -333,8 +231,9 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ onScroll, children, ...res
     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(
     import_react_primitive2.Primitive.div,
     {
@@ -346,6 +245,127 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ onScroll, children, ...res
   );
 });
 
+// src/utils/hooks/useBranches.tsx
+var import_react5 = require("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 = (0, import_react5.useRef)({
+    parentMap: /* @__PURE__ */ new Map(),
+    branchMap: /* @__PURE__ */ new Map(),
+    snapshots: /* @__PURE__ */ new Map()
+  }).current;
+  updateBranchData(data, chat.messages);
+  const getBranchState = (0, import_react5.useCallback)(
+    (message) => {
+      return getBranchStateImpl(data, chat.messages, message);
+    },
+    [data, chat.messages]
+  );
+  const switchToBranch = (0, import_react5.useCallback)(
+    (message, branchId) => {
+      const newMessages = switchToBranchImpl(
+        data,
+        chat.messages,
+        message,
+        branchId
+      );
+      chat.setMessages(newMessages);
+    },
+    [data, chat.messages, chat.setMessages]
+  );
+  const reloadAt = (0, import_react5.useCallback)(
+    async (message) => {
+      const newMessages = sliceMessagesUntil(chat.messages, message);
+      chat.setMessages(newMessages);
+      await chat.reload();
+    },
+    [chat.messages, chat.setMessages, chat.reload]
+  );
+  const editAt = (0, import_react5.useCallback)(
+    async (message, newMessage) => {
+      const newMessages = sliceMessagesUntil(chat.messages, message);
+      chat.setMessages(newMessages);
+      await chat.append(newMessage);
+    },
+    [chat.messages, chat.setMessages, chat.append]
+  );
+  return (0, import_react5.useMemo)(
+    () => ({
+      ...chat,
+      getBranchState,
+      switchToBranch,
+      editAt,
+      reloadAt
+    }),
+    [chat, getBranchState, switchToBranch, editAt, reloadAt]
+  );
+};
+
 // src/primitives/message/index.ts
 var message_exports = {};
 __export(message_exports, {
@@ -466,35 +486,10 @@ var MessageContent = () => {
 };
 
 // src/primitives/message/MessageEditableContent.tsx
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react9 = require("react");
-
-// src/utils/hooks/useAutosize.tsx
 var import_react8 = require("react");
-var useAutosize = (ref) => {
-  const el = ref.current;
-  (0, import_react8.useLayoutEffect)(() => {
-    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
 var import_primitive3 = require("@radix-ui/primitive");
-var MessageEditableContent = (0, import_react9.forwardRef)(({ onChange, value, ...rest }, forwardedRef) => {
-  const textareaRef = (0, import_react9.useRef)(null);
-  const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, textareaRef);
-  useAutosize(textareaRef);
+var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
+var MessageEditableContent = (0, import_react8.forwardRef)(({ onChange, value, ...rest }, forwardedRef) => {
   const [editState, setEditState] = useMessageContext(
     "Message.EditableContent",
     (s) => [s.editState, s.setEditState]
@@ -507,10 +502,10 @@ var MessageEditableContent = (0, import_react9.forwardRef)(({ onChange, value, .
       "Message.EditableContent may only be rendered when edit mode is enabled. Consider wrapping the component in <Message.If editing>."
     );
   return /* @__PURE__ */ React.createElement(
-    "textarea",
+    import_react_textarea_autosize.default,
     {
       ...rest,
-      ref,
+      ref: forwardedRef,
       onChange: (0, import_primitive3.composeEventHandlers)(onChange, handleChange),
       value: editState.value || value
     }
@@ -518,15 +513,24 @@ var MessageEditableContent = (0, import_react9.forwardRef)(({ onChange, value, .
 });
 
 // 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,
     {
@@ -536,7 +540,7 @@ var ThreadMessages = ({
         content: "..."
       }
     },
-    /* @__PURE__ */ React.createElement(Message, null)
+    /* @__PURE__ */ React.createElement(AssistantMessage, null)
   ));
 };
 
@@ -550,13 +554,13 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_react_primitive4 = require("@radix-ui/react-primitive");
 var import_primitive4 = require("@radix-ui/primitive");
-var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
-var ComposerContext = (0, import_react10.createContext)(null);
+var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
+var ComposerContext = (0, import_react9.createContext)(null);
 var useComposerContext = () => {
-  const context = (0, import_react10.useContext)(ComposerContext);
+  const context = (0, import_react9.useContext)(ComposerContext);
   if (!context) {
     throw new Error(
       "Composer compound components cannot be rendered outside the Composer component"
@@ -564,15 +568,15 @@ var useComposerContext = () => {
   }
   return context;
 };
-var ComposerRoot = (0, import_react10.forwardRef)(
+var ComposerRoot = (0, import_react9.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const handleSubmit = useThreadContext(
       "Composer.Root",
       (s) => s.chat.handleSubmit
     );
-    const formRef = (0, import_react10.useRef)(null);
-    const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, formRef);
-    const composerContextValue = (0, import_react10.useMemo)(
+    const formRef = (0, import_react9.useRef)(null);
+    const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
+    const composerContextValue = (0, import_react9.useMemo)(
       () => ({
         submit: () => formRef.current?.dispatchEvent(
           new Event("submit", { cancelable: true, bubbles: true })
@@ -592,11 +596,11 @@ var ComposerRoot = (0, import_react10.forwardRef)(
 );
 
 // src/primitives/composer/ComposerInput.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_primitive5 = require("@radix-ui/primitive");
-var import_react_compose_refs4 = require("@radix-ui/react-compose-refs");
-var ComposerInput = (0, import_react11.forwardRef)(({ asChild, onChange, onKeyDown, ...rest }, forwardedRef) => {
+var import_react_textarea_autosize2 = __toESM(require("react-textarea-autosize"));
+var ComposerInput = (0, import_react10.forwardRef)(({ asChild, onChange, onKeyDown, ...rest }, forwardedRef) => {
   const chat = useThreadContext(
     "Composer.Input",
     ({ chat: { input, handleInputChange, isLoading } }) => ({
@@ -605,15 +609,12 @@ var ComposerInput = (0, import_react11.forwardRef)(({ asChild, onChange, onKeyDo
       isLoading
     })
   );
-  const Component = asChild ? import_react_slot.Slot : "textarea";
-  const textareaRef = (0, import_react11.useRef)(null);
-  const ref = (0, import_react_compose_refs4.useComposedRefs)(forwardedRef, textareaRef);
-  useAutosize(textareaRef);
+  const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize2.default;
   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();
     }
@@ -623,7 +624,7 @@ var ComposerInput = (0, import_react11.forwardRef)(({ asChild, onChange, onKeyDo
     {
       value: chat.input,
       ...rest,
-      ref,
+      ref: forwardedRef,
       onChange: (0, import_primitive5.composeEventHandlers)(onChange, chat.handleInputChange),
       onKeyDown: (0, import_primitive5.composeEventHandlers)(onKeyDown, handleKeyPress)
     }
@@ -631,9 +632,9 @@ var ComposerInput = (0, import_react11.forwardRef)(({ asChild, onChange, onKeyDo
 });
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_primitive5 = require("@radix-ui/react-primitive");
-var ComposerSend = (0, import_react12.forwardRef)(
+var ComposerSend = (0, import_react11.forwardRef)(
   ({ disabled, ...rest }, ref) => {
     const input = useThreadContext("Composer.Send", (s) => s.chat.input);
     return /* @__PURE__ */ React.createElement(
@@ -649,11 +650,11 @@ var ComposerSend = (0, import_react12.forwardRef)(
 );
 
 // src/utils/createActionButton.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_react_primitive6 = require("@radix-ui/react-primitive");
 var import_primitive6 = require("@radix-ui/primitive");
 var createActionButton = (useActionButton) => {
-  return (0, import_react13.forwardRef)(
+  return (0, import_react12.forwardRef)(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
       return /* @__PURE__ */ React.createElement(
@@ -692,41 +693,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 = () => {
@@ -747,10 +766,10 @@ var BranchPickerNumber = () => {
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_react14 = require("react");
 var import_react_primitive7 = require("@radix-ui/react-primitive");
-var BranchPickerRoot = (0, import_react14.forwardRef)(({ ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(import_react_primitive7.Primitive.div, { ...rest, ref });
+var import_react13 = require("react");
+var BranchPickerRoot = (0, import_react13.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive7.Primitive.div, { ...rest, ref }));
 });
 
 // src/primitives/actionBar/index.ts
@@ -763,51 +782,79 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-var import_react15 = require("react");
 var import_react_primitive8 = require("@radix-ui/react-primitive");
-var ActionBarRoot = (0, import_react15.forwardRef)(
-  ({ ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(import_react_primitive8.Primitive.div, { ...rest, ref });
-  }
-);
+var import_react14 = require("react");
+var ActionBarRoot = (0, import_react14.forwardRef)(({ ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(import_react_primitive8.Primitive.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 = {};
@@ -818,57 +865,85 @@ __export(editBar_exports, {
 });
 
 // src/primitives/editBar/EditBarRoot.tsx
-var import_react16 = require("react");
 var import_react_primitive9 = require("@radix-ui/react-primitive");
-var EditBarRoot = (0, import_react16.forwardRef)(
+var import_react15 = require("react");
+var EditBarRoot = (0, import_react15.forwardRef)(
   ({ ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement(import_react_primitive9.Primitive.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);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ActionBar,
-  BranchPicker,
-  Composer,
-  EditBar,
-  Message,
-  Thread,
-  unstable_useMessageContext
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  EditBarPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  VercelAIThreadProvider,
+  unstable_useMessageContext,
+  useBeginMessageEdit,
+  useCancelMessageEdit,
+  useCopyMessage,
+  useGoToNextBranch,
+  useGoToPreviousBranch,
+  useReloadMessage,
+  useSaveMessageEdit
 });