@assistant-ui/react 0.0.6 → 0.0.8

package/dist/index.js

@@ -35,7 +35,8 @@ __export(src_exports, {
   ComposerPrimitive: () => composer_exports,
   MessagePrimitive: () => message_exports,
   ThreadPrimitive: () => thread_exports,
-  VercelAIAssistantProvider: () => VercelAIChatAssistantProvider,
+  VercelAIAssistantProvider: () => VercelAIAssistantProvider,
+  unstable_VercelRSCAssistantProvider: () => VercelRSCAssistantProvider,
   unstable_useMessageContext: () => useMessageContext,
   useBeginMessageEdit: () => useBeginMessageEdit,
   useCopyMessage: () => useCopyMessage,
@@ -52,6 +53,7 @@ __export(thread_exports, {
   If: () => ThreadIf,
   Messages: () => ThreadMessages,
   Root: () => ThreadRoot,
+  ScrollToBottom: () => ThreadScrollToBottom,
   Viewport: () => ThreadViewport
 });
 
@@ -102,10 +104,10 @@ var ThreadEmpty = ({ children }) => {
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-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");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_react_primitive2 = require("@radix-ui/react-primitive");
+var import_react5 = require("react");
 
 // src/utils/hooks/useOnResizeContent.tsx
 var import_react3 = require("react");
@@ -138,34 +140,60 @@ var useOnResizeContent = (ref, callback) => {
     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/utils/hooks/useOnScrollToBottom.tsx
+var import_react4 = require("react");
+var useOnScrollToBottom = (callback) => {
+  const callbackRef = (0, import_react4.useRef)(callback);
+  callbackRef.current = callback;
+  const { useThread } = useAssistantContext();
+  (0, import_react4.useEffect)(() => {
+    return useThread.getState().onScrollToBottom(() => {
+      callbackRef.current();
+    });
+  }, [useThread]);
+};
+
 // src/primitives/thread/ThreadViewport.tsx
-var ThreadViewport = (0, import_react4.forwardRef)(({ onScroll, children, ...rest }, forwardedRef) => {
-  const divRef = (0, import_react4.useRef)(null);
+var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
+  const messagesEndRef = (0, import_react5.useRef)(null);
+  const divRef = (0, import_react5.useRef)(null);
   const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
-  const [isAtBottom, setIsAtBottom] = (0, import_react4.useState)(true);
+  const { useThread } = useAssistantContext();
+  const firstRenderRef = (0, import_react5.useRef)(true);
+  const scrollToBottom = () => {
+    const div = messagesEndRef.current;
+    if (!div || !autoScroll)
+      return;
+    const behavior = firstRenderRef.current ? "instant" : "auto";
+    firstRenderRef.current = false;
+    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 + 50;
+    if (newIsAtBottom !== isAtBottom) {
+      useThread.setState({ isAtBottom: newIsAtBottom });
+    }
   };
-  console.log(isAtBottom);
   return /* @__PURE__ */ React.createElement(
     import_react_primitive2.Primitive.div,
     {
@@ -173,12 +201,13 @@ var ThreadViewport = (0, import_react4.forwardRef)(({ onScroll, children, ...res
       onScroll: (0, import_primitive.composeEventHandlers)(onScroll, handleScroll),
       ref
     },
-    children
+    children,
+    /* @__PURE__ */ React.createElement("div", { ref: messagesEndRef })
   );
 });
 
 // src/vercel/useVercelAIBranches.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var ROOT_ID = "__ROOT_ID__";
 var UPCOMING_MESSAGE_ID = "__UPCOMING_MESSAGE_ID__";
 var updateBranchData = (data, messages) => {
@@ -245,20 +274,20 @@ var sliceMessagesUntil = (messages, message) => {
     throw new Error("Unexpected: Message not found");
   return messages.slice(0, messageIdx);
 };
-var useVercelAIBranches = (chat) => {
-  const data = (0, import_react5.useRef)({
+var useVercelAIBranches = (chat, context) => {
+  const data = (0, import_react6.useRef)({
     parentMap: /* @__PURE__ */ new Map(),
     branchMap: /* @__PURE__ */ new Map(),
     snapshots: /* @__PURE__ */ new Map()
   }).current;
   updateBranchData(data, chat.messages);
-  const getBranchState = (0, import_react5.useCallback)(
+  const getBranchState = (0, import_react6.useCallback)(
     (message) => {
       return getBranchStateImpl(data, chat.messages, message);
     },
     [data, chat.messages]
   );
-  const switchToBranch = (0, import_react5.useCallback)(
+  const switchToBranch = (0, import_react6.useCallback)(
     (message, branchId) => {
       const newMessages = switchToBranchImpl(
         data,
@@ -270,28 +299,33 @@ var useVercelAIBranches = (chat) => {
     },
     [data, chat.messages, chat.setMessages]
   );
-  const reloadAt = (0, import_react5.useCallback)(
+  const reloadMaybe = "reload" in chat ? chat.reload : void 0;
+  const reloadAt = (0, import_react6.useCallback)(
     async (message) => {
+      if (!reloadMaybe)
+        throw new Error("Reload not supported by Vercel AI SDK's useAssistant");
       const newMessages = sliceMessagesUntil(chat.messages, message);
       chat.setMessages(newMessages);
-      await chat.reload();
+      context.useThread.getState().scrollToBottom();
+      await reloadMaybe();
     },
-    [chat.messages, chat.setMessages, chat.reload]
+    [context, chat.messages, chat.setMessages, reloadMaybe]
   );
-  const editAt = (0, import_react5.useCallback)(
+  const editAt = (0, import_react6.useCallback)(
     async (message, newMessage) => {
       const newMessages = sliceMessagesUntil(chat.messages, message);
       chat.setMessages(newMessages);
       if (newMessage.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
       });
     },
-    [chat.messages, chat.setMessages, chat.append]
+    [context, chat.messages, chat.setMessages, chat.append]
   );
-  return (0, import_react5.useMemo)(
+  return (0, import_react6.useMemo)(
     () => ({
       getBranchState,
       switchToBranch,
@@ -305,24 +339,27 @@ var hasUpcomingMessage = (thread) => {
   return thread.isLoading && thread.messages[thread.messages.length - 1]?.role !== "assistant";
 };
 
-// src/utils/context/ComposerState.ts
-var import_react7 = require("react");
+// src/utils/context/useComposerContext.ts
+var import_react8 = require("react");
 
-// src/utils/context/MessageContext.ts
-var import_react6 = require("react");
-var MessageContext = (0, import_react6.createContext)(null);
+// src/utils/context/useMessageContext.ts
+var import_react7 = require("react");
+var MessageContext = (0, import_react7.createContext)(null);
 var useMessageContext = () => {
-  const context = (0, import_react6.useContext)(MessageContext);
+  const context = (0, import_react7.useContext)(MessageContext);
   if (!context)
     throw new Error("useMessageContext must be used within a MessageProvider");
   return context;
 };
 
-// src/utils/context/ComposerState.ts
+// src/utils/context/useComposerContext.ts
 var useComposerContext = () => {
   const { useComposer: useAssisstantComposer } = useAssistantContext();
-  const { useComposer: useMessageComposer } = (0, import_react7.useContext)(MessageContext) ?? {};
-  return { useComposer: useMessageComposer ?? useAssisstantComposer };
+  const { useComposer: useMessageComposer } = (0, import_react8.useContext)(MessageContext) ?? {};
+  return {
+    useComposer: useMessageComposer ?? useAssisstantComposer,
+    type: useMessageComposer ? "message" : "assistant"
+  };
 };
 
 // src/primitives/composer/ComposerIf.tsx
@@ -351,7 +388,7 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageProvider.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_zustand = require("zustand");
 var import_shallow = require("zustand/react/shallow");
 var getIsLast = (thread, message) => {
@@ -360,7 +397,7 @@ var getIsLast = (thread, message) => {
 };
 var useMessageContext2 = () => {
   const { useBranchObserver } = useAssistantContext();
-  const [context] = (0, import_react8.useState)(() => {
+  const [context] = (0, import_react9.useState)(() => {
     const useMessage = (0, import_zustand.create)(() => ({
       message: null,
       isLast: false,
@@ -417,9 +454,9 @@ var MessageProvider = ({
     (0, import_shallow.useShallow)((b) => b.getBranchState(message))
   );
   const isLast = useThread((thread) => getIsLast(thread, message));
-  const [isCopied, setIsCopied] = (0, import_react8.useState)(false);
-  const [isHovering, setIsHovering] = (0, import_react8.useState)(false);
-  (0, import_react8.useMemo)(() => {
+  const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
+  const [isHovering, setIsHovering] = (0, import_react9.useState)(false);
+  (0, import_react9.useMemo)(() => {
     context.useMessage.setState(
       {
         message,
@@ -439,8 +476,8 @@ var MessageProvider = ({
 // src/primitives/message/MessageRoot.tsx
 var import_primitive2 = require("@radix-ui/primitive");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
-var import_react9 = require("react");
-var MessageRoot = (0, import_react9.forwardRef)(
+var import_react10 = require("react");
+var MessageRoot = (0, import_react10.forwardRef)(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
     const { useMessage } = useMessageContext();
     const setIsHovering = useMessage((s) => s.setIsHovering);
@@ -495,12 +532,41 @@ var MessageIf = ({ children, ...query }) => {
 };
 
 // src/primitives/message/MessageContent.tsx
-var MessageContent = () => {
+var defaultComponents = {
+  Text: ({ part }) => /* @__PURE__ */ React.createElement(React.Fragment, null, part.text),
+  Image: () => null,
+  UI: ({ part }) => part.display,
+  tools: {
+    Fallback: () => null
+  }
+};
+var MessageContent = ({
+  components: {
+    Text = defaultComponents.Text,
+    Image = defaultComponents.Image,
+    UI = defaultComponents.UI,
+    tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
+  } = {}
+}) => {
   const { useMessage } = useMessageContext();
   const content = useMessage((s) => s.message.content);
-  if (content[0]?.type !== "text")
-    throw new Error("Unsupported message content type");
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, content[0].text);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, content.map((part, i) => {
+    const key = i;
+    switch (part.type) {
+      case "text":
+        return /* @__PURE__ */ React.createElement(Text, { key, part });
+      case "image":
+        return /* @__PURE__ */ React.createElement(Image, { key, part });
+      case "ui":
+        return /* @__PURE__ */ React.createElement(UI, { key, part });
+      case "tool-call": {
+        const Tool = by_name[part.name] || Fallback;
+        return /* @__PURE__ */ React.createElement(Tool, { key, part });
+      }
+      default:
+        return null;
+    }
+  }));
 };
 
 // src/primitives/thread/ThreadMessages.tsx
@@ -536,6 +602,29 @@ var ThreadMessages = ({ components }) => {
   ));
 };
 
+// src/primitives/thread/ThreadScrollToBottom.tsx
+var import_primitive3 = require("@radix-ui/primitive");
+var import_react_primitive4 = require("@radix-ui/react-primitive");
+var import_react11 = require("react");
+var ThreadScrollToBottom = (0, import_react11.forwardRef)(({ onClick, ...rest }, ref) => {
+  const { useThread } = useAssistantContext();
+  const isAtBottom = useThread((s) => s.isAtBottom);
+  const handleScrollToBottom = () => {
+    const thread = useThread.getState();
+    thread.scrollToBottom();
+  };
+  if (isAtBottom)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    import_react_primitive4.Primitive.button,
+    {
+      ...rest,
+      ref,
+      onClick: (0, import_primitive3.composeEventHandlers)(onClick, handleScrollToBottom)
+    }
+  );
+});
+
 // src/primitives/composer/index.ts
 var composer_exports = {};
 __export(composer_exports, {
@@ -547,33 +636,15 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_primitive3 = require("@radix-ui/primitive");
+var import_primitive4 = require("@radix-ui/primitive");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react_primitive4 = require("@radix-ui/react-primitive");
-var import_react10 = require("react");
-var ComposerFormContext = (0, import_react10.createContext)(null);
-var useComposerFormContext = () => {
-  const context = (0, import_react10.useContext)(ComposerFormContext);
-  if (!context) {
-    throw new Error(
-      "Composer compound components cannot be rendered outside the Composer component"
-    );
-  }
-  return context;
-};
-var ComposerRoot = (0, import_react10.forwardRef)(
+var import_react_primitive5 = require("@radix-ui/react-primitive");
+var import_react12 = require("react");
+var ComposerRoot = (0, import_react12.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useComposer } = useComposerContext();
-    const formRef = (0, import_react10.useRef)(null);
+    const formRef = (0, import_react12.useRef)(null);
     const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
-    const composerContextValue = (0, import_react10.useMemo)(
-      () => ({
-        submit: () => formRef.current?.dispatchEvent(
-          new Event("submit", { cancelable: true, bubbles: true })
-        )
-      }),
-      []
-    );
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
       if (!composerState.isEditing)
@@ -581,73 +652,96 @@ var ComposerRoot = (0, import_react10.forwardRef)(
       e.preventDefault();
       composerState.send();
     };
-    return /* @__PURE__ */ React.createElement(ComposerFormContext.Provider, { value: composerContextValue }, /* @__PURE__ */ React.createElement(
-      import_react_primitive4.Primitive.form,
+    return /* @__PURE__ */ React.createElement(
+      import_react_primitive5.Primitive.form,
       {
         ...rest,
         ref,
-        onSubmit: (0, import_primitive3.composeEventHandlers)(onSubmit, handleSubmit)
+        onSubmit: (0, import_primitive4.composeEventHandlers)(onSubmit, handleSubmit)
       }
-    ));
+    );
   }
 );
 
 // src/primitives/composer/ComposerInput.tsx
-var import_primitive4 = require("@radix-ui/primitive");
+var import_primitive5 = require("@radix-ui/primitive");
+var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var ComposerInput = (0, import_react11.forwardRef)(({ 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 ? import_react_slot.Slot : import_react_textarea_autosize.default;
-  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: (0, import_primitive4.composeEventHandlers)(onChange, (e) => {
-        const composerState = useComposer.getState();
-        if (!composerState.isEditing)
-          return;
-        return composerState.setValue(e.target.value);
-      }),
-      onKeyDown: (0, import_primitive4.composeEventHandlers)(onKeyDown, handleKeyPress)
-    }
-  );
-});
+var ComposerInput = (0, import_react13.forwardRef)(
+  ({ 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 ? import_react_slot.Slot : import_react_textarea_autosize.default;
+    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 = (0, import_react13.useRef)(null);
+    const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
+    const autoFocusEnabled = autoFocus !== false && !disabled;
+    const focus = (0, import_react13.useCallback)(() => {
+      const textarea = textareaRef.current;
+      if (!textarea || !autoFocusEnabled)
+        return;
+      textarea.focus();
+      textarea.setSelectionRange(
+        textareaRef.current.value.length,
+        textareaRef.current.value.length
+      );
+    }, [autoFocusEnabled]);
+    (0, import_react13.useEffect)(() => focus(), [focus]);
+    useOnScrollToBottom(() => {
+      if (type === "assistant") {
+        focus();
+      }
+    });
+    return /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        value,
+        ...rest,
+        ref,
+        disabled,
+        onChange: (0, import_primitive5.composeEventHandlers)(onChange, (e) => {
+          const composerState = useComposer.getState();
+          if (!composerState.isEditing)
+            return;
+          return composerState.setValue(e.target.value);
+        }),
+        onKeyDown: (0, import_primitive5.composeEventHandlers)(onKeyDown, handleKeyPress)
+      }
+    );
+  }
+);
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react12 = require("react");
-var ComposerSend = (0, import_react12.forwardRef)(
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react14 = require("react");
+var ComposerSend = (0, import_react14.forwardRef)(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
     return /* @__PURE__ */ React.createElement(
-      import_react_primitive5.Primitive.button,
+      import_react_primitive6.Primitive.button,
       {
         type: "submit",
         ...rest,
@@ -659,22 +753,22 @@ var ComposerSend = (0, import_react12.forwardRef)(
 );
 
 // src/primitives/composer/ComposerCancel.tsx
-var import_primitive5 = require("@radix-ui/primitive");
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react13 = require("react");
-var ComposerCancel = (0, import_react13.forwardRef)(({ disabled, onClick, ...rest }, ref) => {
+var import_primitive6 = require("@radix-ui/primitive");
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react15 = require("react");
+var ComposerCancel = (0, import_react15.forwardRef)(({ disabled, onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const hasValue = useComposer((c) => c.canCancel);
   const handleClose = () => {
     useComposer.getState().cancel();
   };
   return /* @__PURE__ */ React.createElement(
-    import_react_primitive6.Primitive.button,
+    import_react_primitive7.Primitive.button,
     {
       type: "button",
       ...rest,
       ref,
-      onClick: (0, import_primitive5.composeEventHandlers)(onClick, handleClose),
+      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleClose),
       disabled: disabled || !hasValue
     }
   );
@@ -690,16 +784,41 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
+// src/utils/context/combined/useCombinedStore.ts
+var import_react17 = require("react");
+
+// src/utils/context/combined/createCombinedStore.ts
+var import_react16 = require("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 (0, import_react16.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/context/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = (0, import_react17.useMemo)(() => createCombinedStore(stores), stores);
+  return useCombined(selector);
+};
+
 // src/actions/useGoToNextBranch.tsx
 var useGoToNextBranch = () => {
   const { useThread, useBranchObserver } = 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.branchState.branchId + 1 >= m.branchState.branchCount
   );
-  if (isLoading || isEditing || !hasNext)
+  if (disabled)
     return null;
   return () => {
     const {
@@ -711,21 +830,21 @@ var useGoToNextBranch = () => {
 };
 
 // src/utils/createActionButton.tsx
-var import_react14 = require("react");
-var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_primitive6 = require("@radix-ui/primitive");
+var import_react18 = require("react");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_primitive7 = require("@radix-ui/primitive");
 var createActionButton = (useActionButton) => {
-  return (0, import_react14.forwardRef)(
+  return (0, import_react18.forwardRef)(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
       return /* @__PURE__ */ React.createElement(
-        import_react_primitive7.Primitive.button,
+        import_react_primitive8.Primitive.button,
         {
           type: "button",
           disabled: !onClick,
           ...props,
           ref: forwardedRef,
-          onClick: (0, import_primitive6.composeEventHandlers)(props.onClick, onClick ?? void 0)
+          onClick: (0, import_primitive7.composeEventHandlers)(props.onClick, onClick ?? void 0)
         }
       );
     }
@@ -739,10 +858,11 @@ var BranchPickerNext = createActionButton(useGoToNextBranch);
 var useGoToPreviousBranch = () => {
   const { useThread, useBranchObserver } = 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.branchState.branchId <= 0
+  );
+  if (disabled)
     return null;
   return () => {
     const {
@@ -771,10 +891,10 @@ var BranchPickerNumber = () => {
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react15 = require("react");
-var BranchPickerRoot = (0, import_react15.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive8.Primitive.div, { ...rest, ref }));
+var import_react_primitive9 = require("@radix-ui/react-primitive");
+var import_react19 = require("react");
+var BranchPickerRoot = (0, import_react19.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0 }, /* @__PURE__ */ React.createElement(import_react_primitive9.Primitive.div, { ...rest, ref }));
 });
 
 // src/primitives/actionBar/index.ts
@@ -787,28 +907,30 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react16 = require("react");
-var ActionBarRoot = (0, import_react16.forwardRef)(({ hideWhenBusy, autohide, autohideFloat, ...rest }, ref) => {
+var import_react_primitive10 = require("@radix-ui/react-primitive");
+var import_react20 = require("react");
+var ActionBarRoot = (0, import_react20.forwardRef)(({ hideWhenBusy, autohide, autohideFloat, ...rest }, ref) => {
   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.branchState.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(
-    import_react_primitive9.Primitive.div,
+    import_react_primitive10.Primitive.div,
     {
       "data-floating": hideAndfloatStatus === "floating" /* Floating */,
       ...rest,
@@ -840,9 +962,11 @@ var ActionBarCopy = createActionButton(useCopyMessage);
 var useReloadMessage = () => {
   const { useThread, useBranchObserver } = 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;
@@ -858,9 +982,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();
@@ -872,25 +998,42 @@ var useBeginMessageEdit = () => {
 var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
 // src/vercel/VercelAIAssistantProvider.tsx
-var import_react17 = require("react");
+var import_react22 = require("react");
+
+// src/vercel/useDummyAIAssistantContext.tsx
+var import_react21 = require("react");
 var import_zustand2 = require("zustand");
-var useAIAssistantContext = () => {
-  const [context] = (0, import_react17.useState)(() => {
+var useDummyAIAssistantContext = () => {
+  const [context] = (0, import_react21.useState)(() => {
+    const scrollToBottomListeners = /* @__PURE__ */ new Set();
     const useThread = (0, import_zustand2.create)()(() => ({
       messages: [],
       isLoading: false,
-      reload: async () => {
-      },
       append: async () => {
+        throw new Error("Not implemented");
       },
       stop: () => {
+        throw new Error("Not implemented");
+      },
+      isAtBottom: true,
+      scrollToBottom: () => {
+        for (const listener of scrollToBottomListeners) {
+          listener();
+        }
+      },
+      onScrollToBottom: (callback) => {
+        scrollToBottomListeners.add(callback);
+        return () => {
+          scrollToBottomListeners.delete(callback);
+        };
       }
     }));
     const useComposer = (0, import_zustand2.create)()(() => ({
       isEditing: true,
       canCancel: false,
       value: "",
-      setValue: () => {
+      setValue: (value) => {
+        useComposer.setState({ value });
       },
       edit: () => {
         throw new Error("Not implemented");
@@ -909,19 +1052,24 @@ var useAIAssistantContext = () => {
     const useBranchObserver = (0, import_zustand2.create)()(() => ({
       getBranchState: () => ({
         branchId: 0,
-        branchCount: 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 context;
 };
+
+// src/vercel/VercelAIAssistantProvider.tsx
 var ThreadMessageCache = /* @__PURE__ */ new WeakMap();
 var vercelToThreadMessage = (message) => {
   if (message.role !== "user" && message.role !== "assistant")
@@ -942,58 +1090,110 @@ var vercelToCachedThreadMessages = (messages) => {
     return newMessage;
   });
 };
-var VercelAIChatAssistantProvider = ({ chat, children }) => {
-  const context = useAIAssistantContext();
-  const messages = (0, import_react17.useMemo)(() => {
-    return vercelToCachedThreadMessages(chat.messages);
-  }, [chat.messages]);
-  const reload = (0, import_react17.useCallback)(async () => {
-    await chat.reload();
-  }, [chat.reload]);
-  const append = (0, import_react17.useCallback)(
+var VercelAIAssistantProvider = ({
+  children,
+  ...rest
+}) => {
+  const context = useDummyAIAssistantContext();
+  const vercel = "chat" in rest ? rest.chat : rest.assistant;
+  const messages = (0, import_react22.useMemo)(() => {
+    return vercelToCachedThreadMessages(vercel.messages);
+  }, [vercel.messages]);
+  const append = (0, import_react22.useCallback)(
     async (message) => {
       if (message.content[0]?.type !== "text") {
         throw new Error("Only text content is currently supported");
       }
-      await chat.append({
+      context.useThread.getState().scrollToBottom();
+      await vercel.append({
         role: message.role,
         content: message.content[0].text
       });
     },
-    [chat.append]
+    [context, vercel.append]
   );
-  const stop = (0, import_react17.useCallback)(() => {
-    const lastMessage = chat.messages.at(-1);
-    chat.stop();
+  const stop = (0, import_react22.useCallback)(() => {
+    const lastMessage = vercel.messages.at(-1);
+    vercel.stop();
     if (lastMessage?.role === "user") {
-      chat.setInput(lastMessage.content);
+      vercel.setInput(lastMessage.content);
     }
-  }, [chat.messages, chat.stop, chat.setInput]);
-  (0, import_react17.useMemo)(() => {
-    context.useThread.setState(
-      {
-        messages,
-        isLoading: chat.isLoading,
-        reload,
-        append,
-        stop
-      },
-      true
-    );
-  }, [context, messages, reload, append, stop, chat.isLoading]);
-  (0, import_react17.useMemo)(() => {
+  }, [vercel.messages, vercel.stop, vercel.setInput]);
+  const isLoading = "isLoading" in vercel ? vercel.isLoading : vercel.status === "in_progress";
+  (0, import_react22.useMemo)(() => {
+    context.useThread.setState({
+      messages,
+      isLoading,
+      append,
+      stop
+    });
+  }, [context, messages, append, stop, isLoading]);
+  (0, import_react22.useMemo)(() => {
     context.useComposer.setState({
-      canCancel: chat.isLoading,
-      value: chat.input,
-      setValue: chat.setInput
+      canCancel: isLoading,
+      value: vercel.input,
+      setValue: vercel.setInput
     });
-  }, [context, chat.isLoading, chat.input, chat.setInput]);
-  const branches = useVercelAIBranches(chat);
-  (0, import_react17.useMemo)(() => {
+  }, [context, isLoading, vercel.input, vercel.setInput]);
+  const branches = useVercelAIBranches(vercel, context);
+  (0, import_react22.useMemo)(() => {
     context.useBranchObserver.setState(branches, true);
   }, [context, branches]);
   return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
 };
+
+// src/vercel/VercelRSCAssistantProvider.tsx
+var import_react23 = require("react");
+var ThreadMessageCache2 = /* @__PURE__ */ new WeakMap();
+var vercelToThreadMessage2 = (message) => {
+  if (message.role !== "user" && message.role !== "assistant")
+    throw new Error("Unsupported role");
+  return {
+    id: message.id,
+    role: message.role,
+    content: [{ type: "ui", display: message.display }]
+  };
+};
+var vercelToCachedThreadMessages2 = (messages) => {
+  return messages.map((m) => {
+    const cached = ThreadMessageCache2.get(m);
+    if (cached)
+      return cached;
+    const newMessage = vercelToThreadMessage2(m);
+    ThreadMessageCache2.set(m, newMessage);
+    return newMessage;
+  });
+};
+var VercelRSCAssistantProvider = ({
+  children,
+  messages: vercelMessages,
+  append: vercelAppend
+}) => {
+  const context = useDummyAIAssistantContext();
+  const messages = (0, import_react23.useMemo)(() => {
+    return vercelToCachedThreadMessages2(vercelMessages);
+  }, [vercelMessages]);
+  const append = (0, import_react23.useCallback)(
+    async (message) => {
+      if (message.content[0]?.type !== "text") {
+        throw new Error("Only text content is currently supported");
+      }
+      context.useThread.getState().scrollToBottom();
+      await vercelAppend({
+        role: message.role,
+        content: [{ type: "text", text: message.content[0].text }]
+      });
+    },
+    [context, vercelAppend]
+  );
+  (0, import_react23.useMemo)(() => {
+    context.useThread.setState({
+      messages,
+      append
+    });
+  }, [context, messages, append]);
+  return /* @__PURE__ */ React.createElement(AssistantContext.Provider, { value: context }, children);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionBarPrimitive,
@@ -1002,6 +1202,7 @@ var VercelAIChatAssistantProvider = ({ chat, children }) => {
   MessagePrimitive,
   ThreadPrimitive,
   VercelAIAssistantProvider,
+  unstable_VercelRSCAssistantProvider,
   unstable_useMessageContext,
   useBeginMessageEdit,
   useCopyMessage,