@assistant-ui/react 0.0.19 → 0.0.21

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ActionBarPrimitive: () => actionBar_exports,
+  AssistantRuntimeProvider: () => AssistantRuntimeProvider,
   BranchPickerPrimitive: () => branchPicker_exports,
   ComposerPrimitive: () => composer_exports,
   ContentPartPrimitive: () => contentPart_exports,
@@ -38,20 +39,175 @@ __export(src_exports, {
   ThreadPrimitive: () => thread_exports,
   VercelAIAssistantProvider: () => VercelAIAssistantProvider,
   VercelRSCAssistantProvider: () => VercelRSCAssistantProvider,
-  unstable_AssistantProvider: () => AssistantProvider,
+  getVercelAIMessage: () => getVercelAIMessage,
+  getVercelRSCMessage: () => getVercelRSCMessage,
   unstable_VercelModelAdapter: () => VercelModelAdapter,
-  unstable_getVercelMessage: () => getVercelMessage,
-  unstable_getVercelRSCMessage: () => getVercelRSCMessage,
+  unstable_useComposerContext: () => useComposerContext,
+  unstable_useContentPartContext: () => useContentPartContext,
   unstable_useLocalRuntime: () => useLocalRuntime,
   unstable_useMessageContext: () => useMessageContext,
+  unstable_useThreadContext: () => useThreadContext,
   useBeginMessageEdit: () => useBeginMessageEdit,
   useCopyMessage: () => useCopyMessage,
   useGoToNextBranch: () => useGoToNextBranch,
   useGoToPreviousBranch: () => useGoToPreviousBranch,
-  useReloadMessage: () => useReloadMessage
+  useReloadMessage: () => useReloadMessage,
+  useVercelRSCRuntime: () => useVercelRSCRuntime,
+  useVercelUseAssistantRuntime: () => useVercelUseAssistantRuntime,
+  useVercelUseChatRuntime: () => useVercelUseChatRuntime
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/actions/useCopyMessage.tsx
+var import_react4 = require("react");
+
+// src/context/MessageContext.ts
+var import_react = require("react");
+var MessageContext = (0, import_react.createContext)(null);
+var useMessageContext = () => {
+  const context = (0, import_react.useContext)(MessageContext);
+  if (!context)
+    throw new Error(
+      "This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />."
+    );
+  return context;
+};
+
+// src/utils/combined/useCombinedStore.ts
+var import_react3 = require("react");
+
+// src/utils/combined/createCombinedStore.ts
+var import_react2 = 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_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = (0, import_react3.useMemo)(() => createCombinedStore(stores), stores);
+  return useCombined(selector);
+};
+
+// src/utils/getMessageText.tsx
+var getMessageText = (message) => {
+  const textParts = message.content.filter(
+    (part) => part.type === "text"
+  );
+  return textParts.map((part) => part.text).join("\n\n");
+};
+
+// src/actions/useCopyMessage.tsx
+var useCopyMessage = ({ copiedDuration = 3e3 }) => {
+  const { useMessage, useComposer } = useMessageContext();
+  const hasCopyableContent = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => {
+      return c.isEditing || m.message.content.some((c2) => c2.type === "text");
+    }
+  );
+  const callback = (0, import_react4.useCallback)(() => {
+    const { isEditing, value: composerValue } = useComposer.getState();
+    const { message, setIsCopied } = useMessage.getState();
+    const valueToCopy = isEditing ? composerValue : getMessageText(message);
+    navigator.clipboard.writeText(valueToCopy);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), copiedDuration);
+  }, [useComposer, useMessage, copiedDuration]);
+  if (!hasCopyableContent) return null;
+  return callback;
+};
+
+// src/actions/useReloadMessage.tsx
+var import_react6 = require("react");
+
+// src/context/ThreadContext.ts
+var import_react5 = require("react");
+var ThreadContext = (0, import_react5.createContext)(null);
+var useThreadContext = () => {
+  const context = (0, import_react5.useContext)(ThreadContext);
+  if (!context)
+    throw new Error("This component must be used within an AssistantProvider.");
+  return context;
+};
+
+// src/actions/useReloadMessage.tsx
+var useReloadMessage = () => {
+  const { useThread, useViewport } = useThreadContext();
+  const { useMessage } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useThread, useMessage],
+    (t, m) => t.isRunning || m.message.role !== "assistant"
+  );
+  const callback = (0, import_react6.useCallback)(() => {
+    const { parentId } = useMessage.getState();
+    useThread.getState().startRun(parentId);
+    useViewport.getState().scrollToBottom();
+  }, [useMessage, useThread, useViewport]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/actions/useBeginMessageEdit.tsx
+var import_react7 = require("react");
+var useBeginMessageEdit = () => {
+  const { useMessage, useComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  const callback = (0, import_react7.useCallback)(() => {
+    const { edit } = useComposer.getState();
+    edit();
+  }, [useComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/actions/useGoToNextBranch.tsx
+var import_react8 = require("react");
+var useGoToNextBranch = () => {
+  const { useThread } = useThreadContext();
+  const { useMessage, useComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
+  );
+  const callback = (0, import_react8.useCallback)(() => {
+    const { message, branches } = useMessage.getState();
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/actions/useGoToPreviousBranch.tsx
+var import_react9 = require("react");
+var useGoToPreviousBranch = () => {
+  const { useThread } = useThreadContext();
+  const { useMessage, useComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useComposer],
+    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
+  );
+  const callback = (0, import_react9.useCallback)(() => {
+    const { message, branches } = useMessage.getState();
+    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useMessage, useThread]);
+  if (disabled) return null;
+  return callback;
+};
+
 // src/primitives/thread/index.ts
 var thread_exports = {};
 __export(thread_exports, {
@@ -66,29 +222,17 @@ __export(thread_exports, {
 
 // src/primitives/thread/ThreadRoot.tsx
 var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ThreadRoot = (0, import_react.forwardRef)(
+var ThreadRoot = (0, import_react10.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref });
   }
 );
 
-// src/utils/context/AssistantContext.ts
-var import_react2 = require("react");
-var AssistantContext = (0, import_react2.createContext)(null);
-var useAssistantContext = () => {
-  const context = (0, import_react2.useContext)(AssistantContext);
-  if (!context)
-    throw new Error(
-      "This component must be used within a AssistantProvider."
-    );
-  return context;
-};
-
 // src/primitives/thread/ThreadIf.tsx
 var useThreadIf = (props) => {
-  const { useThread } = useAssistantContext();
+  const { useThread } = useThreadContext();
   return useThread((thread) => {
     if (props.empty === true && thread.messages.length !== 0) return false;
     if (props.empty === false && thread.messages.length === 0) return false;
@@ -112,14 +256,14 @@ var ThreadEmpty = ({ children }) => {
 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");
+var import_react13 = require("react");
 
 // src/utils/hooks/useOnResizeContent.tsx
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
-var import_react3 = require("react");
+var import_react11 = require("react");
 var useOnResizeContent = (ref, callback) => {
   const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
@@ -154,11 +298,11 @@ var useOnResizeContent = (ref, callback) => {
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
-var import_react4 = require("react");
+var import_react12 = require("react");
 var useOnScrollToBottom = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
-  const { useViewport } = useAssistantContext();
-  (0, import_react4.useEffect)(() => {
+  const { useViewport } = useThreadContext();
+  (0, import_react12.useEffect)(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -167,14 +311,14 @@ var useOnScrollToBottom = (callback) => {
 
 // src/primitives/thread/ThreadViewport.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-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);
+var ThreadViewport = (0, import_react13.forwardRef)(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
+  const messagesEndRef = (0, import_react13.useRef)(null);
+  const divRef = (0, import_react13.useRef)(null);
   const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
-  const { useViewport } = useAssistantContext();
-  const firstRenderRef = (0, import_react5.useRef)(true);
-  const isScrollingToBottomRef = (0, import_react5.useRef)(false);
-  const lastScrollTop = (0, import_react5.useRef)(0);
+  const { useViewport } = useThreadContext();
+  const firstRenderRef = (0, import_react13.useRef)(true);
+  const isScrollingToBottomRef = (0, import_react13.useRef)(false);
+  const lastScrollTop = (0, import_react13.useRef)(0);
   const scrollToBottom = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll) return;
@@ -219,76 +363,23 @@ var ThreadViewport = (0, import_react5.forwardRef)(({ autoScroll = true, onScrol
   );
 });
 
-// src/utils/context/useComposerContext.ts
-var import_react7 = require("react");
-
-// src/utils/context/useMessageContext.ts
-var import_react6 = require("react");
-var MessageContext = (0, import_react6.createContext)(null);
-var useMessageContext = () => {
-  const context = (0, import_react6.useContext)(MessageContext);
-  if (!context)
-    throw new Error(
-      "This component must be used within a MessagePrimitive.Provider."
-    );
-  return context;
-};
-
-// src/utils/context/useComposerContext.ts
-var useComposerContext = () => {
-  const { useComposer: useAssisstantComposer } = useAssistantContext();
-  const { useComposer: useMessageComposer } = (0, import_react7.useContext)(MessageContext) ?? {};
-  return {
-    useComposer: useMessageComposer ?? useAssisstantComposer,
-    type: useMessageComposer ? "message" : "assistant"
-  };
-};
-
-// src/primitives/composer/ComposerIf.tsx
-var useComposerIf = (props) => {
-  const { useComposer } = useComposerContext();
-  return useComposer((composer) => {
-    if (props.editing === true && !composer.isEditing) return false;
-    if (props.editing === false && composer.isEditing) return false;
-    return true;
-  });
-};
-var ComposerIf = ({ children, ...query }) => {
-  const result = useComposerIf(query);
-  return result ? children : null;
-};
-
-// src/primitives/message/index.ts
-var message_exports = {};
-__export(message_exports, {
-  Content: () => MessageContent,
-  If: () => MessageIf,
-  InProgress: () => MessageInProgress,
-  Provider: () => MessageProvider,
-  Root: () => MessageRoot
-});
-
-// src/primitives/message/MessageProvider.tsx
-var import_react8 = require("react");
+// src/context/providers/MessageProvider.tsx
+var import_react14 = require("react");
 var import_zustand2 = require("zustand");
 
-// src/utils/context/getMessageText.tsx
-var getMessageText = (message) => {
-  const textParts = message.content.filter(
-    (part) => part.type === "text"
-  );
-  return textParts.map((part) => part.text).join("\n\n");
-};
-
-// src/utils/context/stores/ComposerStore.ts
+// src/context/stores/MessageComposer.ts
 var import_zustand = require("zustand");
+
+// src/context/stores/BaseComposer.ts
 var makeBaseComposer = (set) => ({
   value: "",
   setValue: (value) => {
     set({ value });
   }
 });
-var makeMessageComposerStore = ({
+
+// src/context/stores/MessageComposer.ts
+var makeEditComposerStore = ({
   onEdit,
   onSend
 }) => (0, import_zustand.create)()((set, get, store) => ({
@@ -309,35 +400,31 @@ var makeMessageComposerStore = ({
     return true;
   }
 }));
-var makeThreadComposerStore = (useThread) => (0, import_zustand.create)()((set, get, store) => {
-  return {
-    ...makeBaseComposer(set, get, store),
-    isEditing: true,
-    send: () => {
-      const { value } = get();
-      set({ value: "" });
-      useThread.getState().append({
-        parentId: useThread.getState().messages.at(-1)?.id ?? null,
-        content: [{ type: "text", text: value }]
-      });
-    },
-    cancel: () => {
-      const thread = useThread.getState();
-      if (!thread.isRunning) return false;
-      useThread.getState().cancelRun();
-      return true;
-    }
-  };
-});
 
-// src/primitives/message/MessageProvider.tsx
+// src/context/providers/MessageProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var getIsLast = (thread, message) => {
   return thread.messages[thread.messages.length - 1]?.id === message.id;
 };
-var useMessageContext2 = () => {
-  const { useThread } = useAssistantContext();
-  const [context] = (0, import_react8.useState)(() => {
+var syncMessage = (thread, useMessage, messageIndex) => {
+  const parentId = thread.messages[messageIndex - 1]?.id ?? null;
+  const message = thread.messages[messageIndex];
+  if (!message) return;
+  const isLast = getIsLast(thread, message);
+  const branches = thread.getBranches(message.id);
+  const currentState = useMessage.getState();
+  if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
+    return;
+  useMessage.setState({
+    message,
+    parentId,
+    branches,
+    isLast
+  });
+};
+var useMessageContext2 = (messageIndex) => {
+  const { useThread } = useThreadContext();
+  const [context] = (0, import_react14.useState)(() => {
     const useMessage = (0, import_zustand2.create)((set) => ({
       message: null,
       parentId: null,
@@ -356,7 +443,7 @@ var useMessageContext2 = () => {
         set({ isHovering: value });
       }
     }));
-    const useComposer = makeMessageComposerStore({
+    const useComposer = makeEditComposerStore({
       onEdit: () => {
         const message = useMessage.getState().message;
         if (message.role !== "user")
@@ -381,56 +468,51 @@ var useMessageContext2 = () => {
         });
       }
     });
+    syncMessage(useThread.getState(), useMessage, messageIndex);
     return { useMessage, useComposer };
   });
+  (0, import_react14.useEffect)(() => {
+    return useThread.subscribe((thread) => {
+      syncMessage(thread, context.useMessage, messageIndex);
+    });
+  }, [context, useThread, messageIndex]);
   return context;
 };
 var MessageProvider = ({
-  message,
-  parentId,
+  messageIndex,
   children
 }) => {
-  const { useThread } = useAssistantContext();
-  const context = useMessageContext2();
-  const isLast = useThread((thread) => getIsLast(thread, message));
-  const branches = useThread((thread) => thread.getBranches(message.id));
-  (0, import_react8.useMemo)(() => {
-    context.useMessage.setState({
-      message,
-      parentId,
-      branches,
-      isLast
-    });
-  }, [context, message, parentId, branches, isLast]);
+  const context = useMessageContext2(messageIndex);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContext.Provider, { value: context, children });
 };
 
-// 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 import_jsx_runtime5 = require("react/jsx-runtime");
-var MessageRoot = (0, import_react9.forwardRef)(
-  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { useMessage } = useMessageContext();
-    const setIsHovering = useMessage((s) => s.setIsHovering);
-    const handleMouseEnter = () => {
-      setIsHovering(true);
-    };
-    const handleMouseLeave = () => {
-      setIsHovering(false);
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_primitive3.Primitive.div,
-      {
-        ...rest,
-        ref,
-        onMouseEnter: (0, import_primitive2.composeEventHandlers)(onMouseEnter, handleMouseEnter),
-        onMouseLeave: (0, import_primitive2.composeEventHandlers)(onMouseLeave, handleMouseLeave)
-      }
-    );
-  }
-);
+// src/context/ComposerContext.ts
+var import_react15 = require("react");
+var useComposerContext = () => {
+  const { useComposer } = useThreadContext();
+  const { useComposer: useEditComposer } = (0, import_react15.useContext)(MessageContext) ?? {};
+  return (0, import_react15.useMemo)(
+    () => ({
+      useComposer: useEditComposer ?? useComposer,
+      type: useEditComposer ? "edit" : "new"
+    }),
+    [useEditComposer, useComposer]
+  );
+};
+
+// src/primitives/composer/ComposerIf.tsx
+var useComposerIf = (props) => {
+  const { useComposer } = useComposerContext();
+  return useComposer((composer) => {
+    if (props.editing === true && !composer.isEditing) return false;
+    if (props.editing === false && composer.isEditing) return false;
+    return true;
+  });
+};
+var ComposerIf = ({ children, ...query }) => {
+  const result = useComposerIf(query);
+  return result ? children : null;
+};
 
 // src/primitives/message/MessageIf.tsx
 var useMessageIf = (props) => {
@@ -450,160 +532,8 @@ var MessageIf = ({ children, ...query }) => {
   return result ? children : null;
 };
 
-// src/utils/context/combined/useCombinedStore.ts
-var import_react11 = require("react");
-
-// src/utils/context/combined/createCombinedStore.ts
-var import_react10 = 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_react10.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  };
-};
-
-// src/utils/context/combined/useCombinedStore.ts
-var useCombinedStore = (stores, selector) => {
-  const useCombined = (0, import_react11.useMemo)(() => createCombinedStore(stores), stores);
-  return useCombined(selector);
-};
-
-// src/utils/context/useContentPartContext.ts
-var import_react12 = require("react");
-var ContentPartContext = (0, import_react12.createContext)(null);
-var useContentPartContext = () => {
-  const context = (0, import_react12.useContext)(ContentPartContext);
-  if (!context)
-    throw new Error(
-      "This component must be used within a ContentPartPrimitive.Provider."
-    );
-  return context;
-};
-
-// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
-var ContentPartInProgressIndicator = () => {
-  const { useMessage } = useMessageContext();
-  const { useContentPart } = useContentPartContext();
-  const indicator = useCombinedStore(
-    [useMessage, useContentPart],
-    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
-  );
-  return indicator;
-};
-
-// src/primitives/contentPart/ContentPartProvider.tsx
-var import_react13 = require("react");
-var import_zustand3 = require("zustand");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var useContentPartContext2 = () => {
-  const [context] = (0, import_react13.useState)(() => {
-    const useContentPart = (0, import_zustand3.create)(() => ({
-      part: null,
-      status: "done"
-    }));
-    return { useContentPart };
-  });
-  return context;
-};
-var ContentPartProvider = ({
-  part,
-  status,
-  children
-}) => {
-  const context = useContentPartContext2();
-  (0, import_react13.useMemo)(() => {
-    context.useContentPart.setState(
-      {
-        part,
-        status
-      },
-      true
-    );
-  }, [context, part, status]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContentPartContext.Provider, { value: context, children });
-};
-
-// src/primitives/message/MessageContent.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var defaultComponents = {
-  Text: ({ part }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    part.text,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContentPartInProgressIndicator, {})
-  ] }),
-  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 message = useMessage((s) => s.message);
-  const content = message.content;
-  const status = message.role === "assistant" ? message.status : "done";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: content.map((part, i) => {
-    const key = i;
-    const type = part.type;
-    let component = null;
-    switch (type) {
-      case "text":
-        component = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { part });
-        break;
-      case "image":
-        component = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Image, { part });
-        break;
-      case "ui":
-        component = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UI, { part });
-        break;
-      case "tool-call": {
-        const Tool = by_name[part.name] || Fallback;
-        component = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tool, { part });
-        break;
-      }
-      default:
-        throw new Error(`Unknown content part type: ${type}`);
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      ContentPartProvider,
-      {
-        part,
-        status: i === content.length - 1 ? status : "done",
-        children: component
-      },
-      key
-    );
-  }) });
-};
-
-// src/primitives/message/MessageInProgress.tsx
-var import_react_primitive4 = require("@radix-ui/react-primitive");
-var import_react14 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var MessageInProgress = (0, import_react14.forwardRef)((props, ref) => {
-  const { useMessage } = useMessageContext();
-  (0, import_react14.useMemo)(() => {
-    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_primitive4.Primitive.div, { ...props, ref }));
-  }, [useMessage, props, ref]);
-  return null;
-});
-
 // src/primitives/thread/ThreadMessages.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -612,60 +542,58 @@ var getComponents = (components) => {
   };
 };
 var ThreadMessages = ({ components }) => {
-  const { useThread } = useAssistantContext();
-  const thread = useThread();
-  const messages = thread.messages;
+  const { useThread } = useThreadContext();
+  const messagesLength = useThread((t) => t.messages.length);
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
-  if (messages.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: messages.map((message, idx) => {
-    const parentId = messages[idx - 1]?.id ?? null;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  if (messagesLength === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: new Array(messagesLength).fill(null).map((_, idx) => {
+    const messageIndex = idx;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       MessageProvider,
       {
-        message,
-        parentId,
+        messageIndex,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(MessageIf, { user: true, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UserMessage, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditComposer, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageIf, { user: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComposerIf, { editing: false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UserMessage, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComposerIf, { editing: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditComposer, {}) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AssistantMessage, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AssistantMessage, {}) })
         ]
       },
-      parentId ?? "__ROOT__"
+      messageIndex
     );
   }) });
 };
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
-var import_primitive3 = require("@radix-ui/primitive");
-var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react15 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ThreadScrollToBottom = (0, import_react15.forwardRef)(({ onClick, ...rest }, ref) => {
-  const { useViewport } = useAssistantContext();
+var import_primitive2 = require("@radix-ui/primitive");
+var import_react_primitive3 = require("@radix-ui/react-primitive");
+var import_react16 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ThreadScrollToBottom = (0, import_react16.forwardRef)(({ onClick, ...rest }, ref) => {
+  const { useViewport } = useThreadContext();
   const isAtBottom = useViewport((s) => s.isAtBottom);
   const handleScrollToBottom = () => {
     useViewport.getState().scrollToBottom();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_primitive5.Primitive.button,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_primitive3.Primitive.button,
     {
       ...rest,
       disabled: isAtBottom,
       ref,
-      onClick: (0, import_primitive3.composeEventHandlers)(onClick, handleScrollToBottom)
+      onClick: (0, import_primitive2.composeEventHandlers)(onClick, handleScrollToBottom)
     }
   );
 });
 
 // src/primitives/thread/ThreadSuggestion.tsx
-var import_primitive4 = require("@radix-ui/primitive");
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react16 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ThreadSuggestion = (0, import_react16.forwardRef)(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
-  const { useThread, useComposer } = useAssistantContext();
+var import_primitive3 = require("@radix-ui/primitive");
+var import_react_primitive4 = require("@radix-ui/react-primitive");
+var import_react17 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ThreadSuggestion = (0, import_react17.forwardRef)(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
+  const { useThread, useComposer } = useThreadContext();
   const isDisabled = useThread((t) => t.isRunning);
   const handleApplySuggestion = () => {
     const thread = useThread.getState();
@@ -675,13 +603,13 @@ var ThreadSuggestion = (0, import_react16.forwardRef)(({ onClick, prompt, method
       composer.send();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_primitive6.Primitive.button,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_primitive4.Primitive.button,
     {
       ...rest,
       disabled: isDisabled,
       ref,
-      onClick: (0, import_primitive4.composeEventHandlers)(onClick, handleApplySuggestion)
+      onClick: (0, import_primitive3.composeEventHandlers)(onClick, handleApplySuggestion)
     }
   );
 });
@@ -697,16 +625,16 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_primitive5 = 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_primitive7 = require("@radix-ui/react-primitive");
-var import_react17 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ComposerRoot = (0, import_react17.forwardRef)(
+var import_react_primitive5 = require("@radix-ui/react-primitive");
+var import_react18 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ComposerRoot = (0, import_react18.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
-    const { useViewport } = useAssistantContext();
+    const { useViewport } = useThreadContext();
     const { useComposer } = useComposerContext();
-    const formRef = (0, import_react17.useRef)(null);
+    const formRef = (0, import_react18.useRef)(null);
     const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
@@ -715,27 +643,27 @@ var ComposerRoot = (0, import_react17.forwardRef)(
       composerState.send();
       useViewport.getState().scrollToBottom();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_primitive7.Primitive.form,
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_primitive5.Primitive.form,
       {
         ...rest,
         ref,
-        onSubmit: (0, import_primitive5.composeEventHandlers)(onSubmit, handleSubmit)
+        onSubmit: (0, import_primitive4.composeEventHandlers)(onSubmit, handleSubmit)
       }
     );
   }
 );
 
 // src/primitives/composer/ComposerInput.tsx
-var import_primitive6 = 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_react18 = require("react");
+var import_react19 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ComposerInput = (0, import_react18.forwardRef)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react19.forwardRef)(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
-    const { useThread, useViewport } = useAssistantContext();
+    const { useThread, useViewport } = useThreadContext();
     const { useComposer, type } = useComposerContext();
     const value = useComposer((c) => {
       if (!c.isEditing) return "";
@@ -758,10 +686,10 @@ var ComposerInput = (0, import_react18.forwardRef)(
         }
       }
     };
-    const textareaRef = (0, import_react18.useRef)(null);
+    const textareaRef = (0, import_react19.useRef)(null);
     const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = (0, import_react18.useCallback)(() => {
+    const focus = (0, import_react19.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus();
@@ -770,40 +698,40 @@ var ComposerInput = (0, import_react18.forwardRef)(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react18.useEffect)(() => focus(), [focus]);
+    (0, import_react19.useEffect)(() => focus(), [focus]);
     useOnScrollToBottom(() => {
-      if (type === "assistant") {
+      if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Component,
       {
         value,
         ...rest,
         ref,
         disabled,
-        onChange: (0, import_primitive6.composeEventHandlers)(onChange, (e) => {
+        onChange: (0, import_primitive5.composeEventHandlers)(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: (0, import_primitive6.composeEventHandlers)(onKeyDown, handleKeyPress)
+        onKeyDown: (0, import_primitive5.composeEventHandlers)(onKeyDown, handleKeyPress)
       }
     );
   }
 );
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react19 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ComposerSend = (0, import_react19.forwardRef)(
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react20 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ComposerSend = (0, import_react20.forwardRef)(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react_primitive8.Primitive.button,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_primitive6.Primitive.button,
       {
         type: "submit",
         ...rest,
@@ -815,26 +743,187 @@ var ComposerSend = (0, import_react19.forwardRef)(
 );
 
 // src/primitives/composer/ComposerCancel.tsx
-var import_primitive7 = require("@radix-ui/primitive");
-var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react20 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ComposerCancel = (0, import_react20.forwardRef)(({ onClick, ...rest }, ref) => {
+var import_primitive6 = require("@radix-ui/primitive");
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react21 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ComposerCancel = (0, import_react21.forwardRef)(({ onClick, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const handleCancel = () => {
     useComposer.getState().cancel();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_react_primitive9.Primitive.button,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_primitive7.Primitive.button,
     {
       type: "button",
       ...rest,
       ref,
-      onClick: (0, import_primitive7.composeEventHandlers)(onClick, handleCancel)
+      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleCancel)
     }
   );
 });
 
+// src/primitives/message/index.ts
+var message_exports = {};
+__export(message_exports, {
+  Content: () => MessageContent,
+  If: () => MessageIf,
+  InProgress: () => MessageInProgress,
+  Root: () => MessageRoot
+});
+
+// src/primitives/message/MessageRoot.tsx
+var import_primitive7 = require("@radix-ui/primitive");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_react22 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var MessageRoot = (0, import_react22.forwardRef)(
+  ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
+    const { useMessage } = useMessageContext();
+    const setIsHovering = useMessage((s) => s.setIsHovering);
+    const handleMouseEnter = () => {
+      setIsHovering(true);
+    };
+    const handleMouseLeave = () => {
+      setIsHovering(false);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_primitive8.Primitive.div,
+      {
+        ...rest,
+        ref,
+        onMouseEnter: (0, import_primitive7.composeEventHandlers)(onMouseEnter, handleMouseEnter),
+        onMouseLeave: (0, import_primitive7.composeEventHandlers)(onMouseLeave, handleMouseLeave)
+      }
+    );
+  }
+);
+
+// src/context/providers/ContentPartProvider.tsx
+var import_react24 = require("react");
+var import_zustand3 = require("zustand");
+
+// src/context/ContentPartContext.ts
+var import_react23 = require("react");
+var ContentPartContext = (0, import_react23.createContext)(
+  null
+);
+var useContentPartContext = () => {
+  const context = (0, import_react23.useContext)(ContentPartContext);
+  if (!context)
+    throw new Error(
+      "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
+    );
+  return context;
+};
+
+// src/context/providers/ContentPartProvider.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var syncContentPart = ({ message }, useContentPart, partIndex) => {
+  const part = message.content[partIndex];
+  if (!part) return;
+  const messageStatus = message.role === "assistant" ? message.status : "done";
+  const status = partIndex === message.content.length - 1 ? messageStatus : "done";
+  useContentPart.setState({ part, status });
+};
+var useContentPartContext2 = (partIndex) => {
+  const { useMessage } = useMessageContext();
+  const [context] = (0, import_react24.useState)(() => {
+    const useContentPart = (0, import_zustand3.create)(() => ({
+      part: { type: "text", text: "" },
+      status: "done"
+    }));
+    syncContentPart(useMessage.getState(), useContentPart, partIndex);
+    return { useContentPart };
+  });
+  (0, import_react24.useEffect)(() => {
+    return useMessage.subscribe((message) => {
+      syncContentPart(message, context.useContentPart, partIndex);
+    });
+  }, [context, useMessage, partIndex]);
+  return context;
+};
+var ContentPartProvider = ({
+  partIndex,
+  children
+}) => {
+  const context = useContentPartContext2(partIndex);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ContentPartContext.Provider, { value: context, children });
+};
+
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
+  const { useMessage } = useMessageContext();
+  const { useContentPart } = useContentPartContext();
+  const indicator = useCombinedStore(
+    [useMessage, useContentPart],
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
+  );
+  return indicator;
+};
+
+// src/primitives/message/MessageContent.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var defaultComponents = {
+  Text: ({ part }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    part.text,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartInProgressIndicator, {})
+  ] }),
+  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 message = useMessage((s) => s.message);
+  const content = message.content;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: content.map((part, i) => {
+    const partIndex = i;
+    const type = part.type;
+    let component = null;
+    switch (type) {
+      case "text":
+        component = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { part });
+        break;
+      case "image":
+        component = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image, { part });
+        break;
+      case "ui":
+        component = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UI, { part });
+        break;
+      case "tool-call": {
+        const Tool = by_name[part.name] || Fallback;
+        component = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tool, { part });
+        break;
+      }
+      default:
+        throw new Error(`Unknown content part type: ${type}`);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ContentPartProvider, { partIndex, children: component }, partIndex);
+  }) });
+};
+
+// src/primitives/message/MessageInProgress.tsx
+var import_react_primitive9 = require("@radix-ui/react-primitive");
+var import_react25 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var MessageInProgress = (0, import_react25.forwardRef)((props, ref) => {
+  const { useMessage } = useMessageContext();
+  (0, import_react25.useMemo)(() => {
+    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_primitive9.Primitive.span, { ...props, ref }));
+  }, [useMessage, props, ref]);
+  return null;
+});
+
 // src/primitives/branchPicker/index.ts
 var branchPicker_exports = {};
 __export(branchPicker_exports, {
@@ -845,30 +934,13 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
-// src/actions/useGoToNextBranch.tsx
-var import_react21 = require("react");
-var useGoToNextBranch = () => {
-  const { useThread } = useAssistantContext();
-  const { useMessage, useComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useComposer],
-    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
-  );
-  const callback = (0, import_react21.useCallback)(() => {
-    const { message, branches } = useMessage.getState();
-    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
-  }, [useMessage, useThread]);
-  if (disabled) return null;
-  return callback;
-};
-
 // src/utils/createActionButton.tsx
 var import_primitive8 = require("@radix-ui/primitive");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react22 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var createActionButton = (useActionButton) => {
-  return (0, import_react22.forwardRef)(
+  return (0, import_react26.forwardRef)(
     (props, forwardedRef) => {
       const onClick = useActionButton(props);
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -888,23 +960,6 @@ var createActionButton = (useActionButton) => {
 // src/primitives/branchPicker/BranchPickerNext.tsx
 var BranchPickerNext = createActionButton(useGoToNextBranch);
 
-// src/actions/useGoToPreviousBranch.tsx
-var import_react23 = require("react");
-var useGoToPreviousBranch = () => {
-  const { useThread } = useAssistantContext();
-  const { useMessage, useComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useComposer],
-    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
-  );
-  const callback = (0, import_react23.useCallback)(() => {
-    const { message, branches } = useMessage.getState();
-    useThread.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
-  }, [useMessage, useThread]);
-  if (disabled) return null;
-  return callback;
-};
-
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
 var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
 
@@ -926,9 +981,9 @@ var BranchPickerNumber = () => {
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
 var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react24 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var BranchPickerRoot = (0, import_react24.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
+var BranchPickerRoot = (0, import_react27.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_primitive11.Primitive.div, { ...rest, ref }) });
 });
 
@@ -943,10 +998,10 @@ __export(actionBar_exports, {
 
 // src/primitives/actionBar/ActionBarRoot.tsx
 var import_react_primitive12 = require("@radix-ui/react-primitive");
-var import_react25 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var ActionBarRoot = (0, import_react25.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
-  const { useThread } = useAssistantContext();
+var ActionBarRoot = (0, import_react28.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+  const { useThread } = useThreadContext();
   const { useMessage } = useMessageContext();
   const hideAndfloatStatus = useCombinedStore(
     [useThread, useMessage],
@@ -971,142 +1026,166 @@ var ActionBarRoot = (0, import_react25.forwardRef)(({ hideWhenRunning, autohide,
   );
 });
 
-// src/actions/useCopyMessage.tsx
-var import_react26 = require("react");
-var useCopyMessage = ({ copiedDuration = 3e3 }) => {
-  const { useMessage, useComposer } = useMessageContext();
-  const hasCopyableContent = useCombinedStore(
-    [useMessage, useComposer],
-    (m, c) => {
-      return c.isEditing || m.message.content.some((c2) => c2.type === "text");
-    }
-  );
-  const callback = (0, import_react26.useCallback)(() => {
-    const { isEditing, value: composerValue } = useComposer.getState();
-    const { message, setIsCopied } = useMessage.getState();
-    const valueToCopy = isEditing ? composerValue : getMessageText(message);
-    navigator.clipboard.writeText(valueToCopy);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copiedDuration);
-  }, [useComposer, useMessage, copiedDuration]);
-  if (!hasCopyableContent) return null;
-  return callback;
-};
-
 // src/primitives/actionBar/ActionBarCopy.tsx
 var ActionBarCopy = createActionButton(useCopyMessage);
 
-// src/actions/useReloadMessage.tsx
-var import_react27 = require("react");
-var useReloadMessage = () => {
-  const { useThread, useViewport } = useAssistantContext();
-  const { useMessage } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useThread, useMessage],
-    (t, m) => t.isRunning || m.message.role !== "assistant"
-  );
-  const callback = (0, import_react27.useCallback)(() => {
-    const { parentId } = useMessage.getState();
-    useThread.getState().startRun(parentId);
-    useViewport.getState().scrollToBottom();
-  }, [useMessage, useThread, useViewport]);
-  if (disabled) return null;
-  return callback;
-};
-
 // src/primitives/actionBar/ActionBarReload.tsx
 var ActionBarReload = createActionButton(useReloadMessage);
 
-// src/actions/useBeginMessageEdit.tsx
-var import_react28 = require("react");
-var useBeginMessageEdit = () => {
-  const { useMessage, useComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useComposer],
-    (m, c) => m.message.role !== "user" || c.isEditing
-  );
-  const callback = (0, import_react28.useCallback)(() => {
-    const { edit } = useComposer.getState();
-    edit();
-  }, [useComposer]);
-  if (disabled) return null;
-  return callback;
-};
-
 // src/primitives/actionBar/ActionBarEdit.tsx
 var ActionBarEdit = createActionButton(useBeginMessageEdit);
 
 // src/primitives/contentPart/index.ts
 var contentPart_exports = {};
 __export(contentPart_exports, {
-  InProgressIndicator: () => ContentPartInProgressIndicator,
-  Provider: () => ContentPartProvider
+  InProgressIndicator: () => ContentPartInProgressIndicator
 });
 
-// src/adapters/vercel/VercelAIAssistantProvider.tsx
-var import_react31 = require("react");
+// src/runtime/vercel-ai/rsc/useVercelRSCRuntime.tsx
+var import_react30 = require("react");
+
+// src/runtime/vercel-ai/rsc/VercelRSCRuntime.tsx
+var import_zustand4 = require("zustand");
 
-// src/adapters/vercel/useDummyAIAssistantContext.tsx
+// src/runtime/vercel-ai/rsc/useVercelRSCSync.tsx
 var import_react29 = require("react");
-var import_zustand5 = require("zustand");
 
-// src/utils/context/stores/ViewportStore.tsx
-var import_zustand4 = require("zustand");
-var makeViewportStore = () => {
-  const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return (0, import_zustand4.create)(() => ({
-    isAtBottom: true,
-    scrollToBottom: () => {
-      for (const listener of scrollToBottomListeners) {
-        listener();
-      }
-    },
-    onScrollToBottom: (callback) => {
-      scrollToBottomListeners.add(callback);
-      return () => {
-        scrollToBottomListeners.delete(callback);
-      };
-    }
-  }));
+// src/runtime/vercel-ai/utils/ThreadMessageConverter.ts
+var ThreadMessageConverter = class {
+  cache = /* @__PURE__ */ new WeakMap();
+  convertMessages(converter, messages) {
+    return messages.map((m) => {
+      const cached = this.cache.get(m);
+      const newMessage = converter(m, cached);
+      this.cache.set(m, newMessage);
+      return newMessage;
+    });
+  }
 };
 
-// src/adapters/vercel/useDummyAIAssistantContext.tsx
-var makeDummyThreadStore = () => {
-  return (0, import_zustand5.create)(() => ({
-    messages: [],
-    isRunning: false,
-    getBranches: () => {
-      return [];
-    },
-    switchToBranch: () => {
-      throw new Error("Not implemented");
-    },
-    append: () => {
-      throw new Error("Not implemented");
-    },
-    startRun: () => {
-      throw new Error("Not implemented");
-    },
-    cancelRun: () => {
-      throw new Error("Not implemented");
+// src/runtime/vercel-ai/rsc/getVercelRSCMessage.tsx
+var symbolInnerRSCMessage = Symbol("innerVercelRSCMessage");
+var getVercelRSCMessage = (message) => {
+  return message[symbolInnerRSCMessage];
+};
+
+// src/runtime/vercel-ai/rsc/useVercelRSCSync.tsx
+var vercelToThreadMessage = (converter, rawMessage) => {
+  const message = converter(rawMessage);
+  return {
+    id: message.id,
+    role: message.role,
+    content: [{ type: "ui", display: message.display }],
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
+    ...{ status: "done" },
+    [symbolInnerRSCMessage]: rawMessage
+  };
+};
+var useVercelRSCSync = (adapter, updateData) => {
+  const [converter, convertCallback] = (0, import_react29.useMemo)(() => {
+    const rscConverter = adapter.convertMessage ?? ((m) => m);
+    const convertCallback2 = (m, cache) => {
+      if (cache) return cache;
+      return vercelToThreadMessage(rscConverter, m);
+    };
+    return [new ThreadMessageConverter(), convertCallback2];
+  }, [adapter.convertMessage]);
+  (0, import_react29.useEffect)(() => {
+    updateData(converter.convertMessages(convertCallback, adapter.messages));
+  }, [updateData, converter, convertCallback, adapter.messages]);
+};
+
+// src/runtime/vercel-ai/rsc/VercelRSCRuntime.tsx
+var EMPTY_BRANCHES = Object.freeze([]);
+var VercelRSCRuntime = class {
+  constructor(adapter) {
+    this.adapter = adapter;
+    this.useAdapter = (0, import_zustand4.create)(() => ({
+      adapter
+    }));
+  }
+  useAdapter;
+  _subscriptions = /* @__PURE__ */ new Set();
+  isRunning = false;
+  messages = [];
+  withRunning = (callback) => {
+    this.isRunning = true;
+    return callback.finally(() => {
+      this.isRunning = false;
+    });
+  };
+  getBranches() {
+    return EMPTY_BRANCHES;
+  }
+  switchToBranch() {
+    throw new Error(
+      "Branch switching is not supported by VercelRSCAssistantProvider."
+    );
+  }
+  async append(message) {
+    if (message.parentId !== (this.messages.at(-1)?.id ?? null)) {
+      if (!this.adapter.edit)
+        throw new Error(
+          "Message editing is not enabled, please provide an edit callback to VercelRSCAssistantProvider."
+        );
+      await this.withRunning(this.adapter.edit(message));
+    } else {
+      await this.withRunning(this.adapter.append(message));
     }
-  }));
+  }
+  async startRun(parentId) {
+    if (!this.adapter.reload)
+      throw new Error(
+        "Message reloading is not enabled, please provide a reload callback to VercelRSCAssistantProvider."
+      );
+    await this.withRunning(this.adapter.reload(parentId));
+  }
+  cancelRun() {
+    if (process.env["NODE_ENV"] === "development") {
+      console.warn(
+        "Run cancellation is not supported by VercelRSCAssistantProvider."
+      );
+    }
+  }
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    return () => this._subscriptions.delete(callback);
+  }
+  onAdapterUpdated() {
+    if (this.useAdapter.getState().adapter !== this.adapter) {
+      this.useAdapter.setState({ adapter: this.adapter });
+    }
+  }
+  updateData = (messages) => {
+    this.messages = messages;
+    for (const callback of this._subscriptions) callback();
+  };
+  unstable_synchronizer = () => {
+    const { adapter } = this.useAdapter();
+    useVercelRSCSync(adapter, this.updateData);
+    return null;
+  };
 };
-var useDummyAIAssistantContext = () => {
-  const [context] = (0, import_react29.useState)(() => {
-    const useThread = makeDummyThreadStore();
-    const useViewport = makeViewportStore();
-    const useComposer = makeThreadComposerStore(useThread);
-    return { useThread, useViewport, useComposer };
+
+// src/runtime/vercel-ai/rsc/useVercelRSCRuntime.tsx
+var useVercelRSCRuntime = (adapter) => {
+  const [runtime] = (0, import_react30.useState)(() => new VercelRSCRuntime(adapter));
+  (0, import_react30.useInsertionEffect)(() => {
+    runtime.adapter = adapter;
   });
-  return context;
+  (0, import_react30.useEffect)(() => {
+    runtime.onAdapterUpdated();
+  });
+  return runtime;
 };
 
-// src/adapters/vercel/useVercelAIThreadState.tsx
-var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
-var import_react30 = require("react");
+// src/runtime/vercel-ai/ui/use-chat/useVercelUseChatRuntime.tsx
+var import_react33 = require("react");
+
+// src/runtime/vercel-ai/ui/VercelAIRuntime.tsx
+var import_zustand5 = require("zustand");
 
-// src/adapters/idUtils.tsx
+// src/runtime/utils/idUtils.tsx
 var import_non_secure = require("nanoid/non-secure");
 var generateId = (0, import_non_secure.customAlphabet)(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
@@ -1115,7 +1194,7 @@ var generateId = (0, import_non_secure.customAlphabet)(
 var optimisticPrefix = "__optimistic__";
 var generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
 
-// src/adapters/MessageRepository.tsx
+// src/runtime/utils/MessageRepository.tsx
 var findHead = (message) => {
   if (message.next) return findHead(message.next);
   return message;
@@ -1184,10 +1263,10 @@ var MessageRepository = class {
       level: prev ? prev.level + 1 : 0
     };
     this.messages.set(message.id, newItem);
+    this.performOp(prev, newItem, "link");
     if (this.head === prev) {
       this.head = newItem;
     }
-    this.performOp(prev, newItem, "link");
   }
   appendOptimisticMessage(parentId, message) {
     let optimisticId;
@@ -1204,14 +1283,14 @@ var MessageRepository = class {
   }
   deleteMessage(messageId, replacementId) {
     const message = this.messages.get(messageId);
-    const replacement = replacementId ? this.messages.get(replacementId) : null;
     if (!message)
       throw new Error(
         "MessageRepository(deleteMessage): Optimistic message not found. This is likely an internal bug in assistant-ui."
       );
+    const replacement = replacementId === void 0 ? message.prev : replacementId === null ? null : this.messages.get(replacementId);
     if (replacement === void 0)
       throw new Error(
-        "MessageRepository(deleteMessage): New message not found. This is likely an internal bug in assistant-ui."
+        "MessageRepository(deleteMessage): Replacement not found. This is likely an internal bug in assistant-ui."
       );
     for (const child of message.children) {
       const childMessage = this.messages.get(child);
@@ -1221,11 +1300,11 @@ var MessageRepository = class {
         );
       this.performOp(replacement, childMessage, "relink");
     }
+    this.performOp(null, message, "cut");
     this.messages.delete(messageId);
     if (this.head === message) {
-      this.head = replacement;
+      this.head = replacement ? findHead(replacement) : null;
     }
-    this.performOp(null, message, "cut");
   }
   getBranches(messageId) {
     const message = this.messages.get(messageId);
@@ -1266,35 +1345,46 @@ var MessageRepository = class {
   }
 };
 
-// src/adapters/ThreadMessageConverter.ts
-var ThreadMessageConverter = class {
-  cache = /* @__PURE__ */ new WeakMap();
-  convertMessages(converter, messages) {
-    return messages.map((m) => {
-      const cached = this.cache.get(m);
-      const newMessage = converter(m, cached);
-      this.cache.set(m, newMessage);
-      return newMessage;
-    });
-  }
+// src/runtime/vercel-ai/ui/getVercelAIMessage.tsx
+var symbolInnerAIMessage = Symbol("innerVercelAIUIMessage");
+var getVercelAIMessage = (message) => {
+  return message[symbolInnerAIMessage];
 };
 
-// src/adapters/vercel/VercelThreadMessage.tsx
-var symbolInnerMessage = Symbol("innerMessage");
-var symbolInnerRSCMessage = Symbol("innerRSCMessage");
-var getVercelMessage = (message) => {
-  return message[symbolInnerMessage];
+// src/runtime/vercel-ai/ui/utils/sliceMessagesUntil.tsx
+var sliceMessagesUntil = (messages, messageId) => {
+  if (messageId == null) return [];
+  const messageIdx = messages.findIndex((m) => m.id === messageId);
+  if (messageIdx === -1)
+    throw new Error(
+      "useVercelAIThreadState: Message not found. This is liekly an internal bug in assistant-ui."
+    );
+  return messages.slice(0, messageIdx + 1);
 };
-var getVercelRSCMessage = (message) => {
-  return message[symbolInnerRSCMessage];
+
+// src/runtime/vercel-ai/ui/utils/useVercelAIComposerSync.tsx
+var import_react31 = require("react");
+var useVercelAIComposerSync = (vercel) => {
+  const { useComposer } = useThreadContext();
+  (0, import_react31.useEffect)(() => {
+    useComposer.setState({
+      value: vercel.input,
+      setValue: vercel.setInput
+    });
+  }, [useComposer, vercel.input, vercel.setInput]);
 };
 
-// src/adapters/vercel/useVercelAIThreadState.tsx
-var vercelToThreadMessage = (message, status) => {
+// src/runtime/vercel-ai/ui/utils/useVercelAIThreadSync.tsx
+var import_react32 = require("react");
+var getIsRunning = (vercel) => {
+  if ("isLoading" in vercel) return vercel.isLoading;
+  return vercel.status === "in_progress";
+};
+var vercelToThreadMessage2 = (message, status) => {
   const common = {
     id: message.id,
     createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
-    [symbolInnerMessage]: message
+    [symbolInnerAIMessage]: message
   };
   switch (message.role) {
     case "user":
@@ -1326,47 +1416,115 @@ var vercelToThreadMessage = (message, status) => {
       );
   }
 };
-var sliceMessagesUntil = (messages, messageId) => {
-  if (messageId == null) return [];
-  const messageIdx = messages.findIndex((m) => m.id === messageId);
-  if (messageIdx === -1)
-    throw new Error(
-      "useVercelAIThreadState: Message not found. This is liekly an internal bug in assistant-ui."
-    );
-  return messages.slice(0, messageIdx + 1);
-};
-var hasUpcomingMessage = (isRunning, messages) => {
-  return isRunning && messages[messages.length - 1]?.role !== "assistant";
-};
-var getIsRunning = (vercel) => {
-  if ("isLoading" in vercel) return vercel.isLoading;
-  return vercel.status === "in_progress";
-};
-var useVercelAIThreadState = (vercel) => {
-  const [data] = (0, import_react30.useState)(() => new MessageRepository());
+var useVercelAIThreadSync = (vercel, updateData) => {
   const isRunning = getIsRunning(vercel);
-  const converter = (0, import_react30.useMemo)(() => new ThreadMessageConverter(), []);
-  const assistantOptimisticIdRef = (0, import_react30.useRef)(null);
-  const messages = (0, import_react30.useMemo)(() => {
+  const converter = (0, import_react32.useMemo)(() => new ThreadMessageConverter(), []);
+  (0, import_react32.useEffect)(() => {
     const lastMessageId = vercel.messages.at(-1)?.id;
     const convertCallback = (message, cache) => {
       const status = lastMessageId === message.id && isRunning ? "in_progress" : "done";
       if (cache && (cache.role === "user" || cache.status === status))
         return cache;
-      return vercelToThreadMessage(message, status);
+      return vercelToThreadMessage2(message, status);
     };
-    const vm = converter.convertMessages(convertCallback, vercel.messages);
+    const messages = converter.convertMessages(
+      convertCallback,
+      vercel.messages
+    );
+    updateData(isRunning, messages);
+  }, [updateData, isRunning, vercel.messages, converter]);
+};
+
+// src/runtime/vercel-ai/ui/VercelAIRuntime.tsx
+var hasUpcomingMessage = (isRunning, messages) => {
+  return isRunning && messages[messages.length - 1]?.role !== "assistant";
+};
+var VercelAIRuntime = class {
+  constructor(vercel) {
+    this.vercel = vercel;
+    this.useVercel = (0, import_zustand5.create)(() => ({
+      vercel
+    }));
+  }
+  _subscriptions = /* @__PURE__ */ new Set();
+  repository = new MessageRepository();
+  assistantOptimisticId = null;
+  useVercel;
+  messages = [];
+  isRunning = false;
+  getBranches(messageId) {
+    return this.repository.getBranches(messageId);
+  }
+  switchToBranch(branchId) {
+    this.repository.switchToBranch(branchId);
+    this.updateVercelMessages(this.repository.getMessages());
+  }
+  async append(message) {
+    if (message.content.length !== 1 || message.content[0]?.type !== "text")
+      throw new Error("Only text content is supported by Vercel AI SDK.");
+    const newMessages = sliceMessagesUntil(
+      this.vercel.messages,
+      message.parentId
+    );
+    this.vercel.setMessages(newMessages);
+    await this.vercel.append({
+      role: "user",
+      content: message.content[0].text
+    });
+  }
+  async startRun(parentId) {
+    const reloadMaybe = "reload" in this.vercel ? this.vercel.reload : void 0;
+    if (!reloadMaybe)
+      throw new Error(
+        "Reload is not supported by Vercel AI SDK's useAssistant."
+      );
+    const newMessages = sliceMessagesUntil(this.vercel.messages, parentId);
+    this.vercel.setMessages(newMessages);
+    await reloadMaybe();
+  }
+  cancelRun() {
+    const previousMessage = this.vercel.messages.at(-1);
+    this.vercel.stop();
+    if (this.assistantOptimisticId) {
+      this.repository.deleteMessage(this.assistantOptimisticId);
+      this.assistantOptimisticId = null;
+    }
+    let messages = this.repository.getMessages();
+    if (previousMessage?.role === "user" && previousMessage.id === messages.at(-1)?.id) {
+      this.vercel.setInput(previousMessage.content);
+      this.repository.deleteMessage(previousMessage.id);
+      messages = this.repository.getMessages();
+    }
+    setTimeout(() => {
+      this.updateVercelMessages(messages);
+    }, 0);
+  }
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    return () => this._subscriptions.delete(callback);
+  }
+  updateVercelMessages = (messages) => {
+    this.vercel.setMessages(
+      messages.map(getVercelAIMessage).filter((m) => m != null)
+    );
+  };
+  onVercelUpdated() {
+    if (this.useVercel.getState().vercel !== this.vercel) {
+      this.useVercel.setState({ vercel: this.vercel });
+    }
+  }
+  updateData = (isRunning, vm) => {
     for (let i = 0; i < vm.length; i++) {
       const message = vm[i];
       const parent = vm[i - 1];
-      data.addOrUpdateMessage(parent?.id ?? null, message);
+      this.repository.addOrUpdateMessage(parent?.id ?? null, message);
     }
-    if (assistantOptimisticIdRef.current) {
-      data.deleteMessage(assistantOptimisticIdRef.current, null);
-      assistantOptimisticIdRef.current = null;
+    if (this.assistantOptimisticId) {
+      this.repository.deleteMessage(this.assistantOptimisticId);
+      this.assistantOptimisticId = null;
     }
     if (hasUpcomingMessage(isRunning, vm)) {
-      assistantOptimisticIdRef.current = data.appendOptimisticMessage(
+      this.assistantOptimisticId = this.repository.appendOptimisticMessage(
         vm.at(-1)?.id ?? null,
         {
           role: "assistant",
@@ -1374,321 +1532,220 @@ var useVercelAIThreadState = (vercel) => {
         }
       );
     }
-    data.resetHead(assistantOptimisticIdRef.current ?? vm.at(-1)?.id ?? null);
-    return data.getMessages();
-  }, [converter, data, isRunning, vercel.messages]);
-  const getBranches2 = (0, import_react30.useCallback)(
-    (messageId) => {
-      return data.getBranches(messageId);
-    },
-    [data]
-  );
-  const switchToBranch2 = (0, import_react_use_callback_ref3.useCallbackRef)((messageId) => {
-    data.switchToBranch(messageId);
-    vercel.setMessages(
-      data.getMessages().map(getVercelMessage).filter((m) => m != null)
+    this.repository.resetHead(
+      this.assistantOptimisticId ?? vm.at(-1)?.id ?? null
     );
+    this.messages = this.repository.getMessages();
+    this.isRunning = isRunning;
+    for (const callback of this._subscriptions) callback();
+  };
+  unstable_synchronizer = () => {
+    const { vercel } = this.useVercel();
+    useVercelAIThreadSync(vercel, this.updateData);
+    useVercelAIComposerSync(vercel);
+    return null;
+  };
+};
+
+// src/runtime/vercel-ai/ui/use-chat/useVercelUseChatRuntime.tsx
+var useVercelUseChatRuntime = (chatHelpers) => {
+  const [runtime] = (0, import_react33.useState)(() => new VercelAIRuntime(chatHelpers));
+  (0, import_react33.useInsertionEffect)(() => {
+    runtime.vercel = chatHelpers;
   });
-  const startRun = (0, import_react_use_callback_ref3.useCallbackRef)(async (parentId) => {
-    const reloadMaybe = "reload" in vercel ? vercel.reload : void 0;
-    if (!reloadMaybe)
-      throw new Error(
-        "Reload is not supported by Vercel AI SDK's useAssistant."
-      );
-    const newMessages = sliceMessagesUntil(vercel.messages, parentId);
-    vercel.setMessages(newMessages);
-    await reloadMaybe();
+  (0, import_react33.useEffect)(() => {
+    runtime.onVercelUpdated();
   });
-  const append = (0, import_react_use_callback_ref3.useCallbackRef)(async (message) => {
-    if (message.content.length !== 1 || message.content[0]?.type !== "text")
-      throw new Error("Only text content is supported by Vercel AI SDK.");
-    const newMessages = sliceMessagesUntil(vercel.messages, message.parentId);
-    vercel.setMessages(newMessages);
-    await vercel.append({
-      role: "user",
-      content: message.content[0].text
-    });
+  return runtime;
+};
+
+// src/runtime/vercel-ai/ui/use-assistant/useVercelUseAssistantRuntime.tsx
+var import_react34 = require("react");
+var useVercelUseAssistantRuntime = (assistantHelpers) => {
+  const [runtime] = (0, import_react34.useState)(() => new VercelAIRuntime(assistantHelpers));
+  (0, import_react34.useInsertionEffect)(() => {
+    runtime.vercel = assistantHelpers;
   });
-  const cancelRun2 = (0, import_react_use_callback_ref3.useCallbackRef)(() => {
-    const lastMessage = vercel.messages.at(-1);
-    vercel.stop();
-    if (lastMessage?.role === "user") {
-      vercel.setInput(lastMessage.content);
-    }
+  (0, import_react34.useEffect)(() => {
+    runtime.onVercelUpdated();
   });
-  return (0, import_react30.useMemo)(
-    () => ({
-      isRunning,
-      messages,
-      getBranches: getBranches2,
-      switchToBranch: switchToBranch2,
-      append,
-      startRun,
-      cancelRun: cancelRun2
-    }),
-    [
-      isRunning,
-      messages,
-      getBranches2,
-      switchToBranch2,
-      append,
-      startRun,
-      cancelRun2
-    ]
-  );
+  return runtime;
 };
 
-// src/adapters/vercel/VercelAIAssistantProvider.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var VercelAIAssistantProvider = ({
-  children,
-  ...rest
-}) => {
-  const context = useDummyAIAssistantContext();
-  const vercel = "chat" in rest ? rest.chat : rest.assistant;
-  const threadState = useVercelAIThreadState(vercel);
-  (0, import_react31.useMemo)(() => {
-    context.useThread.setState(threadState, true);
-  }, [context, threadState]);
-  (0, import_react31.useMemo)(() => {
-    context.useComposer.setState({
-      value: vercel.input,
-      setValue: vercel.setInput
-    });
-  }, [context, vercel.input, vercel.setInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantContext.Provider, { value: context, children });
-};
+// src/context/providers/AssistantRuntimeProvider.tsx
+var import_react36 = require("react");
 
-// src/adapters/vercel/VercelRSCAssistantProvider.tsx
-var import_react32 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var vercelToThreadMessage2 = (converter, rawMessage) => {
-  const message = converter(rawMessage);
-  return {
-    id: message.id,
-    role: message.role,
-    content: [{ type: "ui", display: message.display }],
-    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
-    ...{ status: "done" },
-    [symbolInnerRSCMessage]: rawMessage
-  };
-};
-var EMPTY_BRANCHES = [];
-var getBranches = () => {
-  return EMPTY_BRANCHES;
-};
-var switchToBranch = () => {
-  throw new Error(
-    "Branch switching is not supported by VercelRSCAssistantProvider."
-  );
-};
-var cancelRun = () => {
-  if (process.env["NODE_ENV"] === "development") {
-    console.warn(
-      "Run cancellation is not supported by VercelRSCAssistantProvider."
-    );
-  }
-};
-var VercelRSCAssistantProvider = ({
-  children,
-  convertMessage,
-  messages: vercelMessages,
-  append: appendCallback,
-  edit,
-  reload
-}) => {
-  const context = useDummyAIAssistantContext();
-  const [isRunning, setIsRunning] = (0, import_react32.useState)(false);
-  const withRunning = (0, import_react32.useCallback)((callback) => {
-    setIsRunning(true);
-    return callback.finally(() => setIsRunning(false));
-  }, []);
-  const [converter, convertCallback] = (0, import_react32.useMemo)(() => {
-    const rscConverter = convertMessage ?? ((m) => m);
-    const convertCallback2 = (m, cache) => {
-      if (cache) return cache;
-      return vercelToThreadMessage2(rscConverter, m);
-    };
-    return [new ThreadMessageConverter(), convertCallback2];
-  }, [convertMessage]);
-  const messages = (0, import_react32.useMemo)(() => {
-    return converter.convertMessages(convertCallback, vercelMessages);
-  }, [converter, convertCallback, vercelMessages]);
-  const append = (0, import_react32.useCallback)(
-    async (message) => {
-      if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null)) {
-        if (!edit)
-          throw new Error(
-            "Message editing is not enabled, please provide an edit callback to VercelRSCAssistantProvider."
-          );
-        await withRunning(edit(message));
-      } else {
-        await withRunning(appendCallback(message));
-      }
-    },
-    [context, withRunning, appendCallback, edit]
-  );
-  const startRun = (0, import_react32.useCallback)(
-    async (parentId) => {
-      if (!reload)
-        throw new Error(
-          "Message reloading is not enabled, please provide a reload callback to VercelRSCAssistantProvider."
-        );
-      await withRunning(reload(parentId));
-    },
-    [withRunning, reload]
-  );
-  (0, import_react32.useMemo)(() => {
-    context.useThread.setState(
-      {
-        messages,
-        isRunning,
-        getBranches,
-        switchToBranch,
-        append,
-        startRun,
-        cancelRun
-      },
-      true
-    );
-  }, [context, messages, isRunning, append, startRun]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AssistantContext.Provider, { value: context, children });
-};
+// src/context/providers/ThreadProvider.tsx
+var import_react35 = require("react");
 
-// src/adapters/core/utils/useAssistantContext.tsx
-var import_react33 = require("react");
+// src/context/stores/Composer.ts
 var import_zustand6 = require("zustand");
-
-// src/adapters/core/utils/AssistantMessageRepository.tsx
-var AssistantMessageRepository = class {
-  constructor(flushCallback) {
-    this.flushCallback = flushCallback;
-  }
-  repository = new MessageRepository();
-  getBranches(messageId) {
-    return this.repository.getBranches(messageId);
-  }
-  withModifications(callback) {
-    const res = callback(this.repository);
-    this.flushCallback(this.repository.getMessages());
-    return res;
-  }
-};
-
-// src/adapters/core/utils/useAssistantContext.tsx
-var makeThreadStore = (runtimeRef) => {
-  const repository = new AssistantMessageRepository((messages) => {
-    useThread.setState({ messages });
-  });
-  const useThread = (0, import_zustand6.create)(() => ({
-    messages: [],
-    isRunning: false,
-    getBranches: (messageId) => repository.getBranches(messageId),
-    switchToBranch: (branchId) => {
-      repository.withModifications((repository2) => {
-        repository2.switchToBranch(branchId);
-      });
-    },
-    startRun: async (parentId) => {
-      const optimisticId = repository.withModifications((repository2) => {
-        const optimisticId2 = repository2.appendOptimisticMessage(parentId, {
-          role: "assistant",
-          content: [{ type: "text", text: "" }]
-        });
-        repository2.resetHead(optimisticId2);
-        return optimisticId2;
-      });
-      const { id } = await runtimeRef.current.startRun(parentId);
-      repository.withModifications((repository2) => {
-        repository2.deleteMessage(optimisticId, id);
-      });
-    },
-    append: async (message) => {
-      const [parentOptimisticId, optimisticId] = repository.withModifications(
-        (repository2) => {
-          const parentOptimisticId2 = repository2.appendOptimisticMessage(
-            message.parentId,
-            {
-              role: "user",
-              content: message.content
-            }
-          );
-          const optimisticId2 = repository2.appendOptimisticMessage(
-            parentOptimisticId2,
-            {
-              role: "assistant",
-              content: [{ type: "text", text: "" }]
-            }
-          );
-          repository2.resetHead(optimisticId2);
-          return [parentOptimisticId2, optimisticId2];
-        }
-      );
-      const { parentId, id } = await runtimeRef.current.append(message);
-      repository.withModifications((repository2) => {
-        repository2.deleteMessage(parentOptimisticId, parentId);
-        repository2.deleteMessage(optimisticId, id);
+var makeComposerStore = (useThread) => (0, import_zustand6.create)()((set, get, store) => {
+  return {
+    ...makeBaseComposer(set, get, store),
+    isEditing: true,
+    send: () => {
+      const { setValue, value } = get();
+      setValue("");
+      useThread.getState().append({
+        parentId: useThread.getState().messages.at(-1)?.id ?? null,
+        content: [{ type: "text", text: value }]
       });
     },
+    cancel: () => {
+      const thread = useThread.getState();
+      if (!thread.isRunning) return false;
+      useThread.getState().cancelRun();
+      return true;
+    }
+  };
+});
+
+// src/context/stores/Thread.ts
+var import_zustand7 = require("zustand");
+var makeThreadStore = (runtimeRef) => {
+  const useThread = (0, import_zustand7.create)(() => ({
+    messages: runtimeRef.current.messages,
+    isRunning: runtimeRef.current.isRunning,
+    getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
+    switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
+    startRun: (parentId) => runtimeRef.current.startRun(parentId),
+    append: (message) => runtimeRef.current.append(message),
     cancelRun: () => runtimeRef.current.cancelRun()
   }));
-  const onNewMessage = (parentId, message) => {
-    repository.withModifications((repository2) => {
-      repository2.addOrUpdateMessage(parentId, message);
+  const onRuntimeUpdate = () => {
+    useThread.setState({
+      messages: runtimeRef.current.messages,
+      isRunning: runtimeRef.current.isRunning
     });
   };
-  const onRunningChange = (isRunning) => {
-    useThread.setState({ isRunning });
-  };
   return {
     useThread,
-    onNewMessage,
-    onRunningChange
+    onRuntimeUpdate
   };
 };
-var useAssistantContext2 = (runtime) => {
-  const runtimeRef = (0, import_react33.useRef)(runtime);
-  (0, import_react33.useInsertionEffect)(() => {
+
+// src/context/stores/ThreadViewport.tsx
+var import_zustand8 = require("zustand");
+var makeThreadViewportStore = () => {
+  const scrollToBottomListeners = /* @__PURE__ */ new Set();
+  return (0, import_zustand8.create)(() => ({
+    isAtBottom: true,
+    scrollToBottom: () => {
+      for (const listener of scrollToBottomListeners) {
+        listener();
+      }
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    }
+  }));
+};
+
+// src/context/providers/ThreadProvider.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ThreadProvider = ({
+  children,
+  runtime
+}) => {
+  const runtimeRef = (0, import_react35.useRef)(runtime);
+  (0, import_react35.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [{ context, onNewMessage, onRunningChange }] = (0, import_react33.useState)(() => {
-    const { useThread, onNewMessage: onNewMessage2, onRunningChange: onRunningChange2 } = makeThreadStore(runtimeRef);
-    const useViewport = makeViewportStore();
-    const useComposer = makeThreadComposerStore(useThread);
+  const [{ context, onRuntimeUpdate }] = (0, import_react35.useState)(() => {
+    const { useThread, onRuntimeUpdate: onRuntimeUpdate2 } = makeThreadStore(runtimeRef);
+    const useViewport = makeThreadViewportStore();
+    const useComposer = makeComposerStore(useThread);
     return {
-      context: { useViewport, useThread, useComposer },
-      onNewMessage: onNewMessage2,
-      onRunningChange: onRunningChange2
+      context: {
+        useViewport,
+        useThread,
+        useComposer
+      },
+      onRuntimeUpdate: onRuntimeUpdate2
     };
   });
-  (0, import_react33.useEffect)(() => {
-    return runtime.subscribeToMessageUpdates(onNewMessage);
-  }, [runtime, onNewMessage]);
-  (0, import_react33.useEffect)(() => {
-    return runtime.subscribeToStatusUpdates(onRunningChange);
-  }, [runtime, onRunningChange]);
-  return context;
+  (0, import_react35.useEffect)(() => {
+    onRuntimeUpdate();
+    return runtime.subscribe(onRuntimeUpdate);
+  }, [onRuntimeUpdate, runtime]);
+  const RuntimeSynchronizer = runtime.unstable_synchronizer;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ThreadContext.Provider, { value: context, children: [
+    RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RuntimeSynchronizer, {}),
+    children
+  ] });
+};
+
+// src/context/providers/AssistantRuntimeProvider.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ThreadProvider, { runtime, children });
 };
+var AssistantRuntimeProvider = (0, import_react36.memo)(AssistantRuntimeProviderImpl);
 
-// src/adapters/core/AssistantProvider.tsx
+// src/runtime/vercel-deprecated/VercelAIAssistantProvider.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var AssistantProvider = ({ children, runtime }) => {
-  const context = useAssistantContext2(runtime);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AssistantContext.Provider, { value: context, children });
+var VercelUseChatRuntimeProvider = ({
+  chat,
+  children
+}) => {
+  const runtime = useVercelUseChatRuntime(chat);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AssistantRuntimeProvider, { runtime, children });
+};
+var VercelUseAssistantRuntimeProvider = ({
+  assistant,
+  children
+}) => {
+  const runtime = useVercelUseAssistantRuntime(assistant);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AssistantRuntimeProvider, { runtime, children });
+};
+var VercelAIAssistantProvider = ({
+  children,
+  ...rest
+}) => {
+  if ("chat" in rest) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VercelUseChatRuntimeProvider, { chat: rest.chat, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VercelUseAssistantRuntimeProvider, { assistant: rest.assistant, children });
 };
 
-// src/adapters/core/local/useLocalRuntime.tsx
-var import_react34 = require("react");
+// src/runtime/vercel-deprecated/VercelRSCAssistantProvider.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var VercelRSCAssistantProvider = ({
+  children,
+  ...adapter
+}) => {
+  const runtime = useVercelRSCRuntime(adapter);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantRuntimeProvider, { runtime, children });
+};
+
+// src/runtime/local/useLocalRuntime.tsx
+var import_react37 = require("react");
 
-// src/adapters/core/local/LocalRuntime.tsx
+// src/runtime/local/LocalRuntime.tsx
 var LocalRuntime = class {
   constructor(adapter) {
     this.adapter = adapter;
   }
-  _messageUpdateCallbacks = /* @__PURE__ */ new Set();
-  _statusUpdateCallbacks = /* @__PURE__ */ new Set();
+  _subscriptions = /* @__PURE__ */ new Set();
   abortController = null;
   repository = new MessageRepository();
+  get messages() {
+    return this.repository.getMessages();
+  }
+  get isRunning() {
+    return this.abortController != null;
+  }
+  getBranches(messageId) {
+    return this.repository.getBranches(messageId);
+  }
+  switchToBranch(branchId) {
+    this.repository.switchToBranch(branchId);
+    this.notifySubscribers();
+  }
   async append(message) {
     const userMessageId = generateId();
     const userMessage = {
@@ -1697,9 +1754,8 @@ var LocalRuntime = class {
       content: message.content,
       createdAt: /* @__PURE__ */ new Date()
     };
-    this.addOrUpdateMessage(message.parentId, userMessage);
-    const { id } = await this.startRun(userMessageId);
-    return { parentId: userMessageId, id };
+    this.repository.addOrUpdateMessage(message.parentId, userMessage);
+    await this.startRun(userMessageId);
   }
   async startRun(parentId) {
     const id = generateId();
@@ -1712,63 +1768,56 @@ var LocalRuntime = class {
       content: [{ type: "text", text: "" }],
       createdAt: /* @__PURE__ */ new Date()
     };
-    this.addOrUpdateMessage(parentId, message);
-    void this.run(parentId, messages, message);
-    return { id };
-  }
-  addOrUpdateMessage(parentId, message) {
-    const clone = { ...message };
-    this.repository.addOrUpdateMessage(parentId, clone);
-    for (const callback of this._messageUpdateCallbacks)
-      callback(parentId, clone);
-  }
-  async run(parentId, messages, message) {
-    this.cancelRun();
-    for (const callback of this._statusUpdateCallbacks) callback(true);
+    this.repository.addOrUpdateMessage(parentId, { ...message });
+    this.abortController?.abort();
     this.abortController = new AbortController();
+    this.notifySubscribers();
     try {
       await this.adapter.run({
         messages,
         abortSignal: this.abortController.signal,
         onUpdate: ({ content }) => {
           message.content = content;
-          this.addOrUpdateMessage(parentId, message);
+          this.repository.addOrUpdateMessage(parentId, { ...message });
+          this.notifySubscribers();
         }
       });
       message.status = "done";
-      this.addOrUpdateMessage(parentId, message);
+      this.repository.addOrUpdateMessage(parentId, { ...message });
     } catch (e) {
       message.status = "error";
-      this.addOrUpdateMessage(parentId, message);
+      this.repository.addOrUpdateMessage(parentId, { ...message });
       console.error(e);
     } finally {
-      this.cancelRun();
+      this.abortController = null;
+      this.notifySubscribers();
     }
   }
   cancelRun() {
     if (!this.abortController) return;
     this.abortController.abort();
     this.abortController = null;
-    for (const callback of this._statusUpdateCallbacks) callback(false);
+    this.notifySubscribers();
   }
-  subscribeToMessageUpdates(callback) {
-    this._messageUpdateCallbacks.add(callback);
-    return () => this._messageUpdateCallbacks.delete(callback);
+  notifySubscribers() {
+    for (const callback of this._subscriptions) callback();
   }
-  subscribeToStatusUpdates(callback) {
-    this._statusUpdateCallbacks.add(callback);
-    return () => this._statusUpdateCallbacks.delete(callback);
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    return () => this._subscriptions.delete(callback);
   }
 };
 
-// src/adapters/core/local/useLocalRuntime.tsx
+// src/runtime/local/useLocalRuntime.tsx
 var useLocalRuntime = (adapter) => {
-  const [runtime] = (0, import_react34.useState)(() => new LocalRuntime(adapter));
-  runtime.adapter = adapter;
+  const [runtime] = (0, import_react37.useState)(() => new LocalRuntime(adapter));
+  (0, import_react37.useInsertionEffect)(() => {
+    runtime.adapter = adapter;
+  });
   return runtime;
 };
 
-// src/adapters/core/local/vercel/VercelModelAdapter.tsx
+// src/runtime/local/vercel/VercelModelAdapter.tsx
 var import_ai = require("ai");
 var VercelModelAdapter = class {
   constructor(model) {
@@ -1812,6 +1861,7 @@ var VercelModelAdapter = class {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionBarPrimitive,
+  AssistantRuntimeProvider,
   BranchPickerPrimitive,
   ComposerPrimitive,
   ContentPartPrimitive,
@@ -1819,15 +1869,20 @@ var VercelModelAdapter = class {
   ThreadPrimitive,
   VercelAIAssistantProvider,
   VercelRSCAssistantProvider,
-  unstable_AssistantProvider,
+  getVercelAIMessage,
+  getVercelRSCMessage,
   unstable_VercelModelAdapter,
-  unstable_getVercelMessage,
-  unstable_getVercelRSCMessage,
+  unstable_useComposerContext,
+  unstable_useContentPartContext,
   unstable_useLocalRuntime,
   unstable_useMessageContext,
+  unstable_useThreadContext,
   useBeginMessageEdit,
   useCopyMessage,
   useGoToNextBranch,
   useGoToPreviousBranch,
-  useReloadMessage
+  useReloadMessage,
+  useVercelRSCRuntime,
+  useVercelUseAssistantRuntime,
+  useVercelUseChatRuntime
 });