@assistant-ui/react 0.1.8 → 0.1.10

package/dist/index.js

@@ -38,19 +38,33 @@ __export(src_exports, {
   INTERNAL: () => internal_exports,
   MessagePrimitive: () => message_exports,
   ThreadPrimitive: () => thread_exports,
-  useBeginMessageEdit: () => useBeginMessageEdit,
-  useCopyMessage: () => useCopyMessage,
-  useGoToNextBranch: () => useGoToNextBranch,
-  useGoToPreviousBranch: () => useGoToPreviousBranch,
+  useActionBarCopy: () => useActionBarCopy,
+  useActionBarEdit: () => useActionBarEdit,
+  useActionBarReload: () => useActionBarReload,
+  useBranchPickerCount: () => useBranchPickerCount,
+  useBranchPickerNext: () => useBranchPickerNext,
+  useBranchPickerNumber: () => useBranchPickerNumber,
+  useBranchPickerPrevious: () => useBranchPickerPrevious,
+  useComposerCancel: () => useComposerCancel,
+  useComposerIf: () => useComposerIf,
+  useComposerSend: () => useComposerSend,
+  useContentPartDisplay: () => useContentPartDisplay,
+  useContentPartImage: () => useContentPartImage,
+  useContentPartInProgressIndicator: () => useContentPartInProgressIndicator,
+  useContentPartText: () => useContentPartText,
   useLocalRuntime: () => useLocalRuntime,
-  useReloadMessage: () => useReloadMessage
+  useMessageIf: () => useMessageIf,
+  useThreadEmpty: () => useThreadEmpty,
+  useThreadIf: () => useThreadIf,
+  useThreadScrollToBottom: () => useThreadScrollToBottom,
+  useThreadSuggestion: () => useThreadSuggestion
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/actions/useCopyMessage.tsx
+// src/primitive-hooks/actionBar/useActionBarCopy.tsx
 var import_react4 = require("react");
 
-// src/context/MessageContext.ts
+// src/context/react/MessageContext.ts
 var import_react = require("react");
 var MessageContext = (0, import_react.createContext)(null);
 var useMessageContext = () => {
@@ -96,35 +110,54 @@ var getMessageText = (message) => {
   return textParts.map((part) => part.text).join("\n\n");
 };
 
-// src/actions/useCopyMessage.tsx
-var useCopyMessage = ({ copiedDuration = 3e3 }) => {
-  const { useMessage, useComposer } = useMessageContext();
+// src/primitive-hooks/actionBar/useActionBarCopy.tsx
+var useActionBarCopy = ({
+  copiedDuration = 3e3
+} = {}) => {
+  const { useMessage, useMessageUtils, useEditComposer } = useMessageContext();
   const hasCopyableContent = useCombinedStore(
-    [useMessage, useComposer],
+    [useMessage, useEditComposer],
     (m, c) => {
-      return c.isEditing || m.message.content.some((c2) => c2.type === "text");
+      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 { message } = useMessage.getState();
+    const { setIsCopied } = useMessageUtils.getState();
+    const { isEditing, value: composerValue } = useEditComposer.getState();
     const valueToCopy = isEditing ? composerValue : getMessageText(message);
     navigator.clipboard.writeText(valueToCopy);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), copiedDuration);
-  }, [useComposer, useMessage, copiedDuration]);
+  }, [useMessage, useMessageUtils, useEditComposer, copiedDuration]);
   if (!hasCopyableContent) return null;
   return callback;
 };
 
-// src/actions/useReloadMessage.tsx
-var import_react6 = require("react");
-
-// src/context/ThreadContext.ts
+// src/primitive-hooks/actionBar/useActionBarEdit.tsx
 var import_react5 = require("react");
-var ThreadContext = (0, import_react5.createContext)(null);
+var useActionBarEdit = () => {
+  const { useMessage, useEditComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  const callback = (0, import_react5.useCallback)(() => {
+    const { edit } = useEditComposer.getState();
+    edit();
+  }, [useEditComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/actionBar/useActionBarReload.tsx
+var import_react7 = require("react");
+
+// src/context/react/ThreadContext.ts
+var import_react6 = require("react");
+var ThreadContext = (0, import_react6.createContext)(null);
 var useThreadContext = () => {
-  const context = (0, import_react5.useContext)(ThreadContext);
+  const context = (0, import_react6.useContext)(ThreadContext);
   if (!context)
     throw new Error(
       "This component must be used within an AssistantRuntimeProvider."
@@ -132,69 +165,264 @@ var useThreadContext = () => {
   return context;
 };
 
-// src/actions/useReloadMessage.tsx
-var useReloadMessage = () => {
-  const { useThread, useViewport } = useThreadContext();
+// src/primitive-hooks/actionBar/useActionBarReload.tsx
+var useActionBarReload = () => {
+  const { useThread, useThreadActions, 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 callback = (0, import_react7.useCallback)(() => {
     const { parentId } = useMessage.getState();
-    useThread.getState().startRun(parentId);
+    useThreadActions.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
-  }, [useMessage, useThread, useViewport]);
+  }, [useThreadActions, useMessage, 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/primitive-hooks/branchPicker/useBranchPickerCount.tsx
+var useBranchPickerCount = () => {
+  const { useMessage } = useMessageContext();
+  const branchCount = useMessage((s) => s.branches.length);
+  return branchCount;
 };
 
-// src/actions/useGoToNextBranch.tsx
+// src/primitive-hooks/branchPicker/useBranchPickerNext.tsx
 var import_react8 = require("react");
-var useGoToNextBranch = () => {
-  const { useThread } = useThreadContext();
-  const { useMessage, useComposer } = useMessageContext();
+var useBranchPickerNext = () => {
+  const { useThreadActions } = useThreadContext();
+  const { useMessage, useEditComposer } = useMessageContext();
   const disabled = useCombinedStore(
-    [useMessage, useComposer],
+    [useMessage, useEditComposer],
     (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]);
+    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) + 1]);
+  }, [useThreadActions, useMessage]);
   if (disabled) return null;
   return callback;
 };
 
-// src/actions/useGoToPreviousBranch.tsx
+// src/primitive-hooks/branchPicker/useBranchPickerNumber.tsx
+var useBranchPickerNumber = () => {
+  const { useMessage } = useMessageContext();
+  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
+  return branchIdx + 1;
+};
+
+// src/primitive-hooks/branchPicker/useBranchPickerPrevious.tsx
 var import_react9 = require("react");
-var useGoToPreviousBranch = () => {
-  const { useThread } = useThreadContext();
-  const { useMessage, useComposer } = useMessageContext();
+var useBranchPickerPrevious = () => {
+  const { useThreadActions } = useThreadContext();
+  const { useMessage, useEditComposer } = useMessageContext();
   const disabled = useCombinedStore(
-    [useMessage, useComposer],
+    [useMessage, useEditComposer],
     (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]);
+    useThreadActions.getState().switchToBranch(branches[branches.indexOf(message.id) - 1]);
+  }, [useThreadActions, useMessage]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/composer/useComposerCancel.tsx
+var import_react13 = require("react");
+
+// src/context/react/AssistantContext.ts
+var import_react10 = require("react");
+var AssistantContext = (0, import_react10.createContext)(
+  null
+);
+var useAssistantContext = () => {
+  const context = (0, import_react10.useContext)(AssistantContext);
+  if (!context)
+    throw new Error(
+      "This component must be used within an AssistantRuntimeProvider."
+    );
+  return context;
+};
+
+// src/context/react/ComposerContext.ts
+var import_react11 = require("react");
+var useComposerContext = () => {
+  const { useComposer } = useThreadContext();
+  const { useEditComposer } = (0, import_react11.useContext)(MessageContext) ?? {};
+  return (0, import_react11.useMemo)(
+    () => ({
+      useComposer: useEditComposer ?? useComposer,
+      type: useEditComposer ? "edit" : "new"
+    }),
+    [useEditComposer, useComposer]
+  );
+};
+
+// src/context/react/ContentPartContext.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 can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
+    );
+  return context;
+};
+
+// src/primitive-hooks/composer/useComposerCancel.tsx
+var useComposerCancel = () => {
+  const { useComposer } = useComposerContext();
+  const disabled = useComposer((c) => !c.isEditing);
+  const callback = (0, import_react13.useCallback)(() => {
+    const { cancel } = useComposer.getState();
+    cancel();
+  }, [useComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/composer/useComposerIf.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;
+  });
+};
+
+// src/primitive-hooks/composer/useComposerSend.tsx
+var import_react14 = require("react");
+var useComposerSend = () => {
+  const { useComposer } = useComposerContext();
+  const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
+  const callback = (0, import_react14.useCallback)(() => {
+    const { send } = useComposer.getState();
+    send();
+  }, [useComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/contentPart/useContentPartDisplay.tsx
+var useContentPartDisplay = () => {
+  const { useContentPart } = useContentPartContext();
+  const display = useContentPart((c) => {
+    if (c.part.type !== "ui")
+      throw new Error(
+        "This component can only be used inside ui content parts."
+      );
+    return c.part.display;
+  });
+  return display;
+};
+
+// src/primitive-hooks/contentPart/useContentPartImage.tsx
+var useContentPartImage = () => {
+  const { useContentPart } = useContentPartContext();
+  const image = useContentPart((c) => {
+    if (c.part.type !== "image")
+      throw new Error(
+        "ContentPartImage can only be used inside image content parts."
+      );
+    return c.part.image;
+  });
+  return image;
+};
+
+// src/primitive-hooks/contentPart/useContentPartInProgressIndicator.tsx
+var useContentPartInProgressIndicator = () => {
+  const { useMessageUtils } = useMessageContext();
+  const { useContentPart } = useContentPartContext();
+  const indicator = useCombinedStore(
+    [useMessageUtils, useContentPart],
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
+  );
+  return indicator;
+};
+
+// src/primitive-hooks/contentPart/useContentPartText.tsx
+var useContentPartText = () => {
+  const { useContentPart } = useContentPartContext();
+  const text = useContentPart((c) => {
+    if (c.part.type !== "text")
+      throw new Error(
+        "ContentPartText can only be used inside text content parts."
+      );
+    return c.part.text;
+  });
+  return text;
+};
+
+// src/primitive-hooks/message/useMessageIf.tsx
+var useMessageIf = (props) => {
+  const { useMessage, useMessageUtils } = useMessageContext();
+  return useCombinedStore(
+    [useMessage, useMessageUtils],
+    ({ message, branches, isLast }, { isCopied, isHovering }) => {
+      if (props.hasBranches === true && branches.length < 2) return false;
+      if (props.user && message.role !== "user") return false;
+      if (props.assistant && message.role !== "assistant") return false;
+      if (props.lastOrHover === true && !isHovering && !isLast) return false;
+      if (props.copied === true && !isCopied) return false;
+      if (props.copied === false && isCopied) return false;
+      return true;
+    }
+  );
+};
+
+// src/primitive-hooks/thread/useThreadIf.tsx
+var useThreadIf = (props) => {
+  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;
+    if (props.running === true && !thread.isRunning) return false;
+    if (props.running === false && thread.isRunning) return false;
+    return true;
+  });
+};
+
+// src/primitive-hooks/thread/useThreadEmpty.tsx
+var useThreadEmpty = () => {
+  return useThreadIf({ empty: true });
+};
+
+// src/primitive-hooks/thread/useThreadScrollToBottom.tsx
+var import_react15 = require("react");
+var useThreadScrollToBottom = () => {
+  const { useViewport } = useThreadContext();
+  const isAtBottom = useViewport((s) => s.isAtBottom);
+  const handleScrollToBottom = (0, import_react15.useCallback)(() => {
+    const { scrollToBottom } = useViewport.getState();
+    scrollToBottom();
+  }, [useViewport]);
+  if (isAtBottom) return null;
+  return handleScrollToBottom;
+};
+
+// src/primitive-hooks/thread/useThreadSuggestion.tsx
+var import_react16 = require("react");
+var useThreadSuggestion = ({
+  prompt,
+  autoSend
+}) => {
+  const { useThread, useComposer } = useThreadContext();
+  const disabled = useThread((t) => t.isRunning);
+  const callback = (0, import_react16.useCallback)(() => {
+    const thread = useThread.getState();
+    const composer = useComposer.getState();
+    composer.setValue(prompt);
+    if (autoSend && !thread.isRunning) {
+      composer.send();
+    }
+  }, [useThread, useComposer, prompt, autoSend]);
   if (disabled) return null;
   return callback;
 };
@@ -213,9 +441,9 @@ __export(thread_exports, {
 
 // src/primitives/thread/ThreadRoot.tsx
 var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react10 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ThreadRoot = (0, import_react10.forwardRef)(
+var ThreadRoot = (0, import_react17.forwardRef)(
   (props, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref });
   }
@@ -223,16 +451,6 @@ var ThreadRoot = (0, import_react10.forwardRef)(
 ThreadRoot.displayName = "ThreadRoot";
 
 // src/primitives/thread/ThreadIf.tsx
-var useThreadIf = (props) => {
-  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;
-    if (props.running === true && !thread.isRunning) return false;
-    if (props.running === false && thread.isRunning) return false;
-    return true;
-  });
-};
 var ThreadIf = ({ children, ...query }) => {
   const result = useThreadIf(query);
   return result ? children : null;
@@ -248,15 +466,15 @@ 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_react13 = require("react");
+var import_react20 = require("react");
 
 // src/utils/hooks/useOnResizeContent.tsx
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
-var import_react11 = require("react");
+var import_react18 = require("react");
 var useOnResizeContent = (ref, callback) => {
   const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
-  const el = ref.current;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
+    const el = ref.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
       callbackRef();
@@ -285,16 +503,16 @@ var useOnResizeContent = (ref, callback) => {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [el, callbackRef]);
+  }, [ref, callbackRef]);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
-var import_react12 = require("react");
+var import_react19 = require("react");
 var useOnScrollToBottom = (callback) => {
   const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
   const { useViewport } = useThreadContext();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
@@ -303,14 +521,14 @@ var useOnScrollToBottom = (callback) => {
 
 // src/primitives/thread/ThreadViewport.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-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);
+var ThreadViewport = (0, import_react20.forwardRef)(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
+  const messagesEndRef = (0, import_react20.useRef)(null);
+  const divRef = (0, import_react20.useRef)(null);
   const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, divRef);
   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 firstRenderRef = (0, import_react20.useRef)(true);
+  const isScrollingToBottomRef = (0, import_react20.useRef)(false);
+  const lastScrollTop = (0, import_react20.useRef)(0);
   const scrollToBottom = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll) return;
@@ -337,7 +555,9 @@ var ThreadViewport = (0, import_react13.forwardRef)(({ autoScroll = true, onScro
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
     } else if (newIsAtBottom !== isAtBottom) {
       isScrollingToBottomRef.current = false;
-      useViewport.setState({ isAtBottom: newIsAtBottom });
+      useViewport.setState({
+        isAtBottom: newIsAtBottom
+      });
     }
     lastScrollTop.current = div.scrollTop;
   };
@@ -357,13 +577,13 @@ var ThreadViewport = (0, import_react13.forwardRef)(({ autoScroll = true, onScro
 ThreadViewport.displayName = "ThreadViewport";
 
 // src/primitives/thread/ThreadMessages.tsx
-var import_react16 = require("react");
+var import_react22 = require("react");
 
 // src/context/providers/MessageProvider.tsx
-var import_react14 = require("react");
-var import_zustand2 = require("zustand");
+var import_react21 = require("react");
+var import_zustand3 = require("zustand");
 
-// src/context/stores/MessageComposer.ts
+// src/context/stores/EditComposer.ts
 var import_zustand = require("zustand");
 
 // src/context/stores/BaseComposer.ts
@@ -374,7 +594,7 @@ var makeBaseComposer = (set) => ({
   }
 });
 
-// src/context/stores/MessageComposer.ts
+// src/context/stores/EditComposer.ts
 var makeEditComposerStore = ({
   onEdit,
   onSend
@@ -397,17 +617,34 @@ var makeEditComposerStore = ({
   }
 }));
 
+// src/context/stores/MessageUtils.ts
+var import_zustand2 = require("zustand");
+var makeMessageUtilsStore = () => (0, import_zustand2.create)((set) => ({
+  inProgressIndicator: null,
+  setInProgressIndicator: (value) => {
+    set({ inProgressIndicator: value });
+  },
+  isCopied: false,
+  setIsCopied: (value) => {
+    set({ isCopied: value });
+  },
+  isHovering: false,
+  setIsHovering: (value) => {
+    set({ isHovering: value });
+  }
+}));
+
 // 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 syncMessage = (thread, useMessage, messageIndex) => {
+var syncMessage = (thread, getBranches, 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 branches = getBranches(message.id);
   const currentState = useMessage.getState();
   if (currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
     return;
@@ -419,27 +656,11 @@ var syncMessage = (thread, useMessage, messageIndex) => {
   });
 };
 var useMessageContext2 = (messageIndex) => {
-  const { useThread } = useThreadContext();
-  const [context] = (0, import_react14.useState)(() => {
-    const useMessage = (0, import_zustand2.create)((set) => ({
-      message: null,
-      parentId: null,
-      branches: [],
-      isLast: false,
-      inProgressIndicator: null,
-      isCopied: false,
-      isHovering: false,
-      setInProgressIndicator: (value) => {
-        set({ inProgressIndicator: value });
-      },
-      setIsCopied: (value) => {
-        set({ isCopied: value });
-      },
-      setIsHovering: (value) => {
-        set({ isHovering: value });
-      }
-    }));
-    const useComposer = makeEditComposerStore({
+  const { useThread, useThreadActions } = useThreadContext();
+  const [context] = (0, import_react21.useState)(() => {
+    const useMessage = (0, import_zustand3.create)(() => ({}));
+    const useMessageUtils = makeMessageUtilsStore();
+    const useEditComposer = makeEditComposerStore({
       onEdit: () => {
         const message = useMessage.getState().message;
         if (message.role !== "user")
@@ -458,20 +679,30 @@ var useMessageContext2 = (messageIndex) => {
         const nonTextParts = message.content.filter(
           (part) => part.type !== "text" && part.type !== "ui"
         );
-        useThread.getState().append({
+        useThreadActions.getState().append({
           parentId,
           content: [{ type: "text", text }, ...nonTextParts]
         });
       }
     });
-    syncMessage(useThread.getState(), useMessage, messageIndex);
-    return { useMessage, useComposer };
+    syncMessage(
+      useThread.getState(),
+      useThreadActions.getState().getBranches,
+      useMessage,
+      messageIndex
+    );
+    return { useMessage, useMessageUtils, useEditComposer };
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     return useThread.subscribe((thread) => {
-      syncMessage(thread, context.useMessage, messageIndex);
+      syncMessage(
+        thread,
+        useThreadActions.getState().getBranches,
+        context.useMessage,
+        messageIndex
+      );
     });
-  }, [context, useThread, messageIndex]);
+  }, [useThread, useThreadActions, context, messageIndex]);
   return context;
 };
 var MessageProvider = ({
@@ -482,47 +713,13 @@ var MessageProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContext.Provider, { value: context, children });
 };
 
-// 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) => {
-  const { useMessage } = useMessageContext();
-  return useMessage(({ message, branches, isLast, isCopied, isHovering }) => {
-    if (props.hasBranches === true && branches.length < 2) return false;
-    if (props.user && message.role !== "user") return false;
-    if (props.assistant && message.role !== "assistant") return false;
-    if (props.lastOrHover === true && !isHovering && !isLast) return false;
-    if (props.copied === true && !isCopied) return false;
-    if (props.copied === false && isCopied) return false;
-    return true;
-  });
-};
 var MessageIf = ({ children, ...query }) => {
   const result = useMessageIf(query);
   return result ? children : null;
@@ -550,7 +747,7 @@ var ThreadMessageImpl = ({
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageIf, { assistant: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AssistantMessage, {}) })
   ] });
 };
-var ThreadMessage = (0, import_react16.memo)(
+var ThreadMessage = (0, import_react22.memo)(
   ThreadMessageImpl,
   (prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
 );
@@ -571,56 +768,42 @@ var ThreadMessages = ({ components }) => {
   });
 };
 
-// src/primitives/thread/ThreadScrollToBottom.tsx
+// src/utils/createActionButton.tsx
 var import_primitive2 = require("@radix-ui/primitive");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
-var import_react17 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var ThreadScrollToBottom = (0, import_react17.forwardRef)(({ onClick, ...rest }, ref) => {
-  const { useViewport } = useThreadContext();
-  const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = () => {
-    useViewport.getState().scrollToBottom();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_react_primitive3.Primitive.button,
-    {
-      ...rest,
-      disabled: isAtBottom,
-      ref,
-      onClick: (0, import_primitive2.composeEventHandlers)(onClick, handleScrollToBottom)
-    }
-  );
-});
-ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
+var createActionButton = (displayName, useActionButton) => {
+  const ActionButton = (0, import_react23.forwardRef)((props, forwardedRef) => {
+    const callback = useActionButton(props);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_primitive3.Primitive.button,
+      {
+        type: "button",
+        disabled: !callback,
+        ...props,
+        ref: forwardedRef,
+        onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, () => {
+          callback?.();
+        })
+      }
+    );
+  });
+  ActionButton.displayName = displayName;
+  return ActionButton;
+};
+
+// src/primitives/thread/ThreadScrollToBottom.tsx
+var ThreadScrollToBottom = createActionButton(
+  "ThreadScrollToBottom",
+  useThreadScrollToBottom
+);
 
 // src/primitives/thread/ThreadSuggestion.tsx
-var import_primitive3 = require("@radix-ui/primitive");
-var import_react_primitive4 = require("@radix-ui/react-primitive");
-var import_react18 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ThreadSuggestion = (0, import_react18.forwardRef)(({ onClick, prompt, method, autoSend: send, ...rest }, ref) => {
-  const { useThread, useComposer } = useThreadContext();
-  const isDisabled = useThread((t) => t.isRunning);
-  const handleApplySuggestion = () => {
-    const thread = useThread.getState();
-    const composer = useComposer.getState();
-    composer.setValue(prompt);
-    if (send && !thread.isRunning) {
-      composer.send();
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react_primitive4.Primitive.button,
-    {
-      ...rest,
-      disabled: isDisabled,
-      ref,
-      onClick: (0, import_primitive3.composeEventHandlers)(onClick, handleApplySuggestion)
-    }
-  );
-});
-ThreadSuggestion.displayName = "ThreadSuggestion";
+var ThreadSuggestion = createActionButton(
+  "ThreadSuggestion",
+  useThreadSuggestion
+);
 
 // src/primitives/composer/index.ts
 var composer_exports = {};
@@ -633,16 +816,16 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-var import_primitive4 = require("@radix-ui/primitive");
+var import_primitive3 = require("@radix-ui/primitive");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react_primitive5 = require("@radix-ui/react-primitive");
-var import_react19 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ComposerRoot = (0, import_react19.forwardRef)(
+var import_react_primitive4 = require("@radix-ui/react-primitive");
+var import_react24 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ComposerRoot = (0, import_react24.forwardRef)(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useViewport } = useThreadContext();
     const { useComposer } = useComposerContext();
-    const formRef = (0, import_react19.useRef)(null);
+    const formRef = (0, import_react24.useRef)(null);
     const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, formRef);
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
@@ -651,12 +834,12 @@ var ComposerRoot = (0, import_react19.forwardRef)(
       composerState.send();
       useViewport.getState().scrollToBottom();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_react_primitive5.Primitive.form,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_primitive4.Primitive.form,
       {
         ...rest,
         ref,
-        onSubmit: (0, import_primitive4.composeEventHandlers)(onSubmit, handleSubmit)
+        onSubmit: (0, import_primitive3.composeEventHandlers)(onSubmit, handleSubmit)
       }
     );
   }
@@ -664,13 +847,13 @@ var ComposerRoot = (0, import_react19.forwardRef)(
 ComposerRoot.displayName = "ComposerRoot";
 
 // src/primitives/composer/ComposerInput.tsx
-var import_primitive5 = require("@radix-ui/primitive");
+var import_primitive4 = 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_react20 = require("react");
+var import_react25 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ComposerInput = (0, import_react20.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ComposerInput = (0, import_react25.forwardRef)(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
@@ -679,7 +862,7 @@ var ComposerInput = (0, import_react20.forwardRef)(
       return c.value;
     });
     const Component = asChild ? import_react_slot.Slot : import_react_textarea_autosize.default;
-    const textareaRef = (0, import_react20.useRef)(null);
+    const textareaRef = (0, import_react25.useRef)(null);
     const ref = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, textareaRef);
     const handleKeyPress = (e) => {
       if (disabled) return;
@@ -697,23 +880,22 @@ var ComposerInput = (0, import_react20.forwardRef)(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = (0, import_react20.useCallback)(() => {
+    const focus = (0, import_react25.useCallback)(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
-      console.log("focus");
       textarea.focus();
       textarea.setSelectionRange(
         textareaRef.current.value.length,
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    (0, import_react20.useEffect)(() => focus(), [focus]);
+    (0, import_react25.useEffect)(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Component,
       {
         value,
@@ -721,12 +903,12 @@ var ComposerInput = (0, import_react20.forwardRef)(
         ref,
         autoFocus,
         disabled,
-        onChange: (0, import_primitive5.composeEventHandlers)(onChange, (e) => {
+        onChange: (0, import_primitive4.composeEventHandlers)(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: (0, import_primitive5.composeEventHandlers)(onKeyDown, handleKeyPress)
+        onKeyDown: (0, import_primitive4.composeEventHandlers)(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -734,47 +916,13 @@ var ComposerInput = (0, import_react20.forwardRef)(
 ComposerInput.displayName = "ComposerInput";
 
 // src/primitives/composer/ComposerSend.tsx
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react21 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ComposerSend = (0, import_react21.forwardRef)(
-  ({ disabled, ...rest }, ref) => {
-    const { useComposer } = useComposerContext();
-    const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_primitive6.Primitive.button,
-      {
-        type: "submit",
-        ...rest,
-        ref,
-        disabled: disabled || !hasValue
-      }
-    );
-  }
-);
-ComposerSend.displayName = "ComposerSend";
+var ComposerSend = createActionButton("ComposerSend", useComposerSend);
 
 // src/primitives/composer/ComposerCancel.tsx
-var import_primitive6 = require("@radix-ui/primitive");
-var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react22 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ComposerCancel = (0, import_react22.forwardRef)(({ onClick, ...rest }, ref) => {
-  const { useComposer } = useComposerContext();
-  const handleCancel = () => {
-    useComposer.getState().cancel();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_primitive7.Primitive.button,
-    {
-      type: "button",
-      ...rest,
-      ref,
-      onClick: (0, import_primitive6.composeEventHandlers)(onClick, handleCancel)
-    }
-  );
-});
-ComposerCancel.displayName = "ComposerCancel";
+var ComposerCancel = createActionButton(
+  "ComposerCancel",
+  useComposerCancel
+);
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -786,27 +934,27 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-var import_primitive7 = require("@radix-ui/primitive");
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react23 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var MessageRoot = (0, import_react23.forwardRef)(
+var import_primitive5 = require("@radix-ui/primitive");
+var import_react_primitive5 = require("@radix-ui/react-primitive");
+var import_react26 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MessageRoot = (0, import_react26.forwardRef)(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { useMessage } = useMessageContext();
-    const setIsHovering = useMessage((s) => s.setIsHovering);
+    const { useMessageUtils } = useMessageContext();
+    const setIsHovering = useMessageUtils((s) => s.setIsHovering);
     const handleMouseEnter = () => {
       setIsHovering(true);
     };
     const handleMouseLeave = () => {
       setIsHovering(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_primitive8.Primitive.div,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_primitive5.Primitive.div,
       {
         ...rest,
         ref,
-        onMouseEnter: (0, import_primitive7.composeEventHandlers)(onMouseEnter, handleMouseEnter),
-        onMouseLeave: (0, import_primitive7.composeEventHandlers)(onMouseLeave, handleMouseLeave)
+        onMouseEnter: (0, import_primitive5.composeEventHandlers)(onMouseEnter, handleMouseEnter),
+        onMouseLeave: (0, import_primitive5.composeEventHandlers)(onMouseLeave, handleMouseLeave)
       }
     );
   }
@@ -814,40 +962,12 @@ var MessageRoot = (0, import_react23.forwardRef)(
 MessageRoot.displayName = "MessageRoot";
 
 // src/primitives/message/MessageContent.tsx
-var import_react28 = require("react");
-
-// src/context/AssistantContext.ts
-var import_react24 = require("react");
-var AssistantContext = (0, import_react24.createContext)(
-  null
-);
-var useAssistantContext = () => {
-  const context = (0, import_react24.useContext)(AssistantContext);
-  if (!context)
-    throw new Error(
-      "This component must be used within an AssistantRuntimeProvider."
-    );
-  return context;
-};
-
-// src/context/ContentPartContext.ts
-var import_react25 = require("react");
-var ContentPartContext = (0, import_react25.createContext)(
-  null
-);
-var useContentPartContext = () => {
-  const context = (0, import_react25.useContext)(ContentPartContext);
-  if (!context)
-    throw new Error(
-      "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
-    );
-  return context;
-};
+var import_react29 = require("react");
 
 // src/context/providers/ContentPartProvider.tsx
-var import_react26 = require("react");
-var import_zustand3 = require("zustand");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_zustand4 = require("zustand");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
   if (!part) return;
@@ -855,19 +975,24 @@ var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const status = partIndex === message.content.length - 1 ? messageStatus : "done";
   const currentState = useContentPart.getState();
   if (currentState.part === part && currentState.status === status) return;
-  useContentPart.setState({ part, status });
+  useContentPart.setState(
+    Object.freeze({
+      part,
+      status
+    })
+  );
 };
 var useContentPartContext2 = (partIndex) => {
   const { useMessage } = useMessageContext();
-  const [context] = (0, import_react26.useState)(() => {
-    const useContentPart = (0, import_zustand3.create)(() => ({
-      part: { type: "text", text: "" },
-      status: "done"
-    }));
+  const [context] = (0, import_react27.useState)(() => {
+    const useContentPart = (0, import_zustand4.create)(
+      () => ({})
+    );
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
+    syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
     });
@@ -879,65 +1004,46 @@ var ContentPartProvider = ({
   children
 }) => {
   const context = useContentPartContext2(partIndex);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ContentPartContext.Provider, { value: context, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ContentPartContext.Provider, { value: context, children });
 };
 
 // src/primitives/contentPart/ContentPartDisplay.tsx
 var ContentPartDisplay = () => {
-  const { useContentPart } = useContentPartContext();
-  const display = useContentPart((c) => {
-    if (c.part.type !== "ui")
-      throw new Error(
-        "ContentPartDisplay can only be used inside ui content parts."
-      );
-    return c.part.display;
-  });
+  const display = useContentPartDisplay();
   return display ?? null;
 };
 
 // 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
-  );
+  const indicator = useContentPartInProgressIndicator();
   return indicator;
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
-var import_react_primitive9 = require("@radix-ui/react-primitive");
-var import_react27 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ContentPartText = (0, import_react27.forwardRef)((props, forwardedRef) => {
-  const { useContentPart } = useContentPartContext();
-  const text = useContentPart((c) => {
-    if (c.part.type !== "text")
-      throw new Error(
-        "ContentPartText can only be used inside text content parts."
-      );
-    return c.part.text;
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_primitive9.Primitive.span, { ...props, ref: forwardedRef, children: text });
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react28 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ContentPartText = (0, import_react28.forwardRef)((props, forwardedRef) => {
+  const text = useContentPartText();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_primitive6.Primitive.span, { ...props, ref: forwardedRef, children: text });
 });
 ContentPartText.displayName = "ContentPartText";
 
 // src/primitives/message/MessageContent.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultComponents = {
-  Text: () => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartText, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartInProgressIndicator, {})
+  Text: () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartText, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartInProgressIndicator, {})
   ] }),
   Image: () => null,
-  UI: () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartDisplay, {}),
+  UI: () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
       const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Render, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Render, { ...props });
     }
   }
 };
@@ -949,22 +1055,22 @@ var MessageContentPartComponent = ({
     tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
   } = {}
 }) => {
-  const { useThread } = useThreadContext();
-  const addToolResult = useThread((t) => t.addToolResult);
+  const { useThreadActions } = useThreadContext();
+  const addToolResult = useThreadActions((t) => t.addToolResult);
   const { useContentPart } = useContentPartContext();
   const { part, status } = useContentPart();
   const type = part.type;
   switch (type) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { part, status });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { part, status });
     case "image":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Image, { part, status });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Image, { part, status });
     case "ui":
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UI, { part, status });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
       const addResult = (result) => addToolResult(part.toolCallId, result);
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tool, { part, status, addResult });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -974,9 +1080,9 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ContentPartProvider, { partIndex, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageContentPartComponent, { components }) });
 };
-var MessageContentPart = (0, import_react28.memo)(
+var MessageContentPart = (0, import_react29.memo)(
   MessageContentPartImpl,
   (prev, next) => prev.partIndex === next.partIndex && prev.components?.Text === next.components?.Text && prev.components?.Image === next.components?.Image && prev.components?.UI === next.components?.UI && prev.components?.tools === next.components?.tools
 );
@@ -985,7 +1091,7 @@ var MessageContent = ({ components }) => {
   const contentLength = useMessage((s) => s.message.content.length);
   return new Array(contentLength).fill(null).map((_, idx) => {
     const partIndex = idx;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       MessageContentPart,
       {
         partIndex,
@@ -997,14 +1103,14 @@ var MessageContent = ({ components }) => {
 };
 
 // src/primitives/message/MessageInProgress.tsx
-var import_react_primitive10 = require("@radix-ui/react-primitive");
-var import_react29 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var MessageInProgress = (0, import_react29.forwardRef)((props, ref) => {
-  const { useMessage } = useMessageContext();
-  (0, import_react29.useMemo)(() => {
-    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive10.Primitive.span, { ...props, ref }));
-  }, [useMessage, props, ref]);
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react30 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MessageInProgress = (0, import_react30.forwardRef)((props, ref) => {
+  const { useMessageUtils } = useMessageContext();
+  (0, import_react30.useMemo)(() => {
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_primitive7.Primitive.span, { ...props, ref }));
+  }, [useMessageUtils, props, ref]);
   return null;
 });
 MessageInProgress.displayName = "MessageInProgress";
@@ -1019,57 +1125,38 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
-// src/utils/createActionButton.tsx
-var import_primitive8 = require("@radix-ui/primitive");
-var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react30 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var createActionButton = (useActionButton) => {
-  const ActionButton = (0, import_react30.forwardRef)((props, forwardedRef) => {
-    const onClick = useActionButton(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_primitive11.Primitive.button,
-      {
-        type: "button",
-        disabled: !onClick,
-        ...props,
-        ref: forwardedRef,
-        onClick: (0, import_primitive8.composeEventHandlers)(props.onClick, onClick ?? void 0)
-      }
-    );
-  });
-  ActionButton.displayName = "ActionButton";
-  return ActionButton;
-};
-
 // src/primitives/branchPicker/BranchPickerNext.tsx
-var BranchPickerNext = createActionButton(useGoToNextBranch);
+var BranchPickerNext = createActionButton(
+  "BranchPickerNext",
+  useBranchPickerNext
+);
 
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
-var BranchPickerPrevious = createActionButton(useGoToPreviousBranch);
+var BranchPickerPrevious = createActionButton(
+  "BranchPickerPrevious",
+  useBranchPickerPrevious
+);
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BranchPickerCount = () => {
-  const { useMessage } = useMessageContext();
-  const branchCount = useMessage((s) => s.branches.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: branchCount });
+  const branchCount = useBranchPickerCount();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: branchCount });
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BranchPickerNumber = () => {
-  const { useMessage } = useMessageContext();
-  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: branchIdx + 1 });
+  const branchNumber = useBranchPickerNumber();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: branchNumber });
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-var import_react_primitive12 = require("@radix-ui/react-primitive");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
 var import_react31 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BranchPickerRoot = (0, import_react31.forwardRef)(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_primitive12.Primitive.div, { ...rest, ref }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_primitive8.Primitive.div, { ...rest, ref }) });
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
 
@@ -1083,27 +1170,38 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-var import_react_primitive13 = require("@radix-ui/react-primitive");
+var import_react_primitive9 = require("@radix-ui/react-primitive");
 var import_react32 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var useActionBarFloatStatus = ({
+  hideWhenRunning,
+  autohide,
+  autohideFloat
+}) => {
   const { useThread } = useThreadContext();
-  const { useMessage } = useMessageContext();
-  const hideAndfloatStatus = useCombinedStore(
-    [useThread, useMessage],
-    (t, m) => {
+  const { useMessage, useMessageUtils } = useMessageContext();
+  return useCombinedStore(
+    [useThread, useMessage, useMessageUtils],
+    (t, m, mu) => {
       if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
       const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
       if (!autohideEnabled) return "normal" /* Normal */;
-      if (!m.isHovering) return "hidden" /* Hidden */;
+      if (!mu.isHovering) return "hidden" /* Hidden */;
       if (autohideFloat === "always" || autohideFloat === "single-branch" && m.branches.length <= 1)
         return "floating" /* Floating */;
       return "normal" /* Normal */;
     }
   );
+};
+var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+  const hideAndfloatStatus = useActionBarFloatStatus({
+    hideWhenRunning,
+    autohide,
+    autohideFloat
+  });
   if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_primitive13.Primitive.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_primitive9.Primitive.div,
     {
       ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
       ...rest,
@@ -1114,13 +1212,22 @@ var ActionBarRoot = (0, import_react32.forwardRef)(({ hideWhenRunning, autohide,
 ActionBarRoot.displayName = "ActionBarRoot";
 
 // src/primitives/actionBar/ActionBarCopy.tsx
-var ActionBarCopy = createActionButton(useCopyMessage);
+var ActionBarCopy = createActionButton(
+  "ActionBarCopy",
+  useActionBarCopy
+);
 
 // src/primitives/actionBar/ActionBarReload.tsx
-var ActionBarReload = createActionButton(useReloadMessage);
+var ActionBarReload = createActionButton(
+  "ActionBarReload",
+  useActionBarReload
+);
 
 // src/primitives/actionBar/ActionBarEdit.tsx
-var ActionBarEdit = createActionButton(useBeginMessageEdit);
+var ActionBarEdit = createActionButton(
+  "ActionBarEdit",
+  useActionBarEdit
+);
 
 // src/primitives/contentPart/index.ts
 var contentPart_exports = {};
@@ -1132,19 +1239,12 @@ __export(contentPart_exports, {
 });
 
 // src/primitives/contentPart/ContentPartImage.tsx
-var import_react_primitive14 = require("@radix-ui/react-primitive");
+var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react33 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ContentPartImage = (0, import_react33.forwardRef)((props, forwardedRef) => {
-  const { useContentPart } = useContentPartContext();
-  const image = useContentPart((c) => {
-    if (c.part.type !== "image")
-      throw new Error(
-        "ContentPartImage can only be used inside image content parts."
-      );
-    return c.part.image;
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_primitive14.Primitive.img, { src: image, ...props, ref: forwardedRef });
+  const image = useContentPartImage();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_primitive10.Primitive.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartImage.displayName = "ContentPartImage";
 
@@ -1449,7 +1549,7 @@ var import_react37 = require("react");
 var import_react36 = require("react");
 
 // src/context/stores/AssistantModelConfig.ts
-var import_zustand4 = require("zustand");
+var import_zustand5 = require("zustand");
 
 // src/utils/ProxyConfigProvider.ts
 var ProxyConfigProvider = class {
@@ -1466,23 +1566,23 @@ var ProxyConfigProvider = class {
 };
 
 // src/context/stores/AssistantModelConfig.ts
-var makeAssistantModelConfigStore = () => (0, import_zustand4.create)(() => {
+var makeAssistantModelConfigStore = () => (0, import_zustand5.create)(() => {
   const proxy = new ProxyConfigProvider();
-  return {
+  return Object.freeze({
     getModelConfig: () => {
       return proxy.getModelConfig();
     },
     registerModelConfigProvider: (provider) => {
       return proxy.registerModelConfigProvider(provider);
     }
-  };
+  });
 });
 
 // src/context/stores/AssistantToolUIs.ts
-var import_zustand5 = require("zustand");
-var makeAssistantToolUIsStore = () => (0, import_zustand5.create)((set) => {
+var import_zustand6 = require("zustand");
+var makeAssistantToolUIsStore = () => (0, import_zustand6.create)((set) => {
   const renderers = /* @__PURE__ */ new Map();
-  return {
+  return Object.freeze({
     getToolUI: (name) => {
       const arr = renderers.get(name);
       const last = arr?.at(-1);
@@ -1502,25 +1602,27 @@ var makeAssistantToolUIsStore = () => (0, import_zustand5.create)((set) => {
         if (index !== -1) {
           arr.splice(index, 1);
         }
-        set({});
+        if (index === arr.length) {
+          set({});
+        }
       };
     }
-  };
+  });
 });
 
 // src/context/providers/ThreadProvider.tsx
 var import_react35 = require("react");
 
 // src/context/stores/Composer.ts
-var import_zustand6 = require("zustand");
-var makeComposerStore = (useThread) => (0, import_zustand6.create)()((set, get, store) => {
+var import_zustand7 = require("zustand");
+var makeComposerStore = (useThread, useThreadActions) => (0, import_zustand7.create)()((set, get, store) => {
   return {
     ...makeBaseComposer(set, get, store),
     isEditing: true,
     send: () => {
       const { setValue, value } = get();
       setValue("");
-      useThread.getState().append({
+      useThreadActions.getState().append({
         parentId: useThread.getState().messages.at(-1)?.id ?? null,
         content: [{ type: "text", text: value }]
       });
@@ -1528,42 +1630,26 @@ var makeComposerStore = (useThread) => (0, import_zustand6.create)()((set, get,
     cancel: () => {
       const thread = useThread.getState();
       if (!thread.isRunning) return false;
-      useThread.getState().cancelRun();
+      useThreadActions.getState().cancelRun();
       return true;
     }
   };
 });
 
 // src/context/stores/Thread.ts
-var import_zustand7 = require("zustand");
+var import_zustand8 = require("zustand");
 var makeThreadStore = (runtimeRef) => {
-  const useThread = (0, import_zustand7.create)(() => ({
+  return (0, import_zustand8.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(),
-    addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
+    isRunning: runtimeRef.current.isRunning
   }));
-  const onRuntimeUpdate = () => {
-    useThread.setState({
-      messages: runtimeRef.current.messages,
-      isRunning: runtimeRef.current.isRunning
-    });
-  };
-  return {
-    useThread,
-    onRuntimeUpdate
-  };
 };
 
 // src/context/stores/ThreadViewport.tsx
-var import_zustand8 = require("zustand");
+var import_zustand9 = require("zustand");
 var makeThreadViewportStore = () => {
   const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return (0, import_zustand8.create)(() => ({
+  return (0, import_zustand9.create)(() => ({
     isAtBottom: true,
     scrollToBottom: () => {
       for (const listener of scrollToBottomListeners) {
@@ -1579,8 +1665,23 @@ var makeThreadViewportStore = () => {
   }));
 };
 
+// src/context/stores/ThreadActions.ts
+var import_zustand10 = require("zustand");
+var makeThreadActionStore = (runtimeRef) => {
+  return (0, import_zustand10.create)(
+    () => Object.freeze({
+      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(),
+      addToolResult: (toolCallId, result) => runtimeRef.current.addToolResult(toolCallId, result)
+    })
+  );
+};
+
 // src/context/providers/ThreadProvider.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ThreadProvider = ({
   children,
   runtime
@@ -1589,32 +1690,40 @@ var ThreadProvider = ({
   (0, import_react35.useInsertionEffect)(() => {
     runtimeRef.current = runtime;
   });
-  const [{ context, onRuntimeUpdate }] = (0, import_react35.useState)(() => {
-    const { useThread, onRuntimeUpdate: onRuntimeUpdate2 } = makeThreadStore(runtimeRef);
+  const [context] = (0, import_react35.useState)(() => {
+    const useThread = makeThreadStore(runtimeRef);
+    const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThread);
+    const useComposer = makeComposerStore(useThread, useThreadActions);
     return {
-      context: {
-        useViewport,
-        useThread,
-        useComposer
-      },
-      onRuntimeUpdate: onRuntimeUpdate2
+      useThread,
+      useThreadActions,
+      useComposer,
+      useViewport
     };
   });
   (0, import_react35.useEffect)(() => {
+    const onRuntimeUpdate = () => {
+      context.useThread.setState(
+        Object.freeze({
+          messages: runtimeRef.current.messages,
+          isRunning: runtimeRef.current.isRunning
+        }),
+        true
+      );
+    };
     onRuntimeUpdate();
     return runtime.subscribe(onRuntimeUpdate);
-  }, [onRuntimeUpdate, runtime]);
+  }, [context, runtime]);
   const RuntimeSynchronizer = runtime.unstable_synchronizer;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ThreadContext.Provider, { value: context, children: [
-    RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RuntimeSynchronizer, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ThreadContext.Provider, { value: context, children: [
+    RuntimeSynchronizer && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RuntimeSynchronizer, {}),
     children
   ] });
 };
 
 // src/context/providers/AssistantProvider.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var AssistantProvider = ({ children, runtime }) => {
   const runtimeRef = (0, import_react36.useRef)(runtime);
   (0, import_react36.useInsertionEffect)(() => {
@@ -1629,13 +1738,13 @@ var AssistantProvider = ({ children, runtime }) => {
   (0, import_react36.useEffect)(() => {
     return runtime.registerModelConfigProvider(getModelCOnfig);
   }, [runtime, getModelCOnfig]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ThreadProvider, { runtime, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ThreadProvider, { runtime, children }) });
 };
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantProvider, { runtime, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantProvider, { runtime, children });
 };
 var AssistantRuntimeProvider = (0, import_react37.memo)(AssistantRuntimeProviderImpl);
 
@@ -1655,11 +1764,25 @@ __export(internal_exports, {
   INTERNAL,
   MessagePrimitive,
   ThreadPrimitive,
-  useBeginMessageEdit,
-  useCopyMessage,
-  useGoToNextBranch,
-  useGoToPreviousBranch,
+  useActionBarCopy,
+  useActionBarEdit,
+  useActionBarReload,
+  useBranchPickerCount,
+  useBranchPickerNext,
+  useBranchPickerNumber,
+  useBranchPickerPrevious,
+  useComposerCancel,
+  useComposerIf,
+  useComposerSend,
+  useContentPartDisplay,
+  useContentPartImage,
+  useContentPartInProgressIndicator,
+  useContentPartText,
   useLocalRuntime,
-  useReloadMessage
+  useMessageIf,
+  useThreadEmpty,
+  useThreadIf,
+  useThreadScrollToBottom,
+  useThreadSuggestion
 });
 //# sourceMappingURL=index.js.map