@assistant-ui/react 0.1.9 → 0.1.11

package/dist/index.mjs

@@ -9,9 +9,9 @@ import {
   useContentPartContext,
   useMessageContext,
   useThreadContext
-} from "./chunk-7O2URLFI.mjs";
+} from "./chunk-KUACYNLE.mjs";
 
-// src/actions/useCopyMessage.tsx
+// src/primitive-hooks/actionBar/useActionBarCopy.tsx
 import { useCallback } from "react";
 
 // src/utils/combined/useCombinedStore.ts
@@ -48,38 +48,56 @@ var getMessageText = (message) => {
   return textParts.map((part) => part.text).join("\n\n");
 };
 
-// src/actions/useCopyMessage.tsx
-var useCopyMessage = ({ copiedDuration = 3e3 }) => {
-  const { useMessage, useMessageUtils, 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 = useCallback(() => {
     const { message } = useMessage.getState();
     const { setIsCopied } = useMessageUtils.getState();
-    const { isEditing, value: composerValue } = useComposer.getState();
+    const { isEditing, value: composerValue } = useEditComposer.getState();
     const valueToCopy = isEditing ? composerValue : getMessageText(message);
     navigator.clipboard.writeText(valueToCopy);
     setIsCopied(true);
     setTimeout(() => setIsCopied(false), copiedDuration);
-  }, [useMessage, useMessageUtils, useComposer, copiedDuration]);
+  }, [useMessage, useMessageUtils, useEditComposer, copiedDuration]);
   if (!hasCopyableContent) return null;
   return callback;
 };
 
-// src/actions/useReloadMessage.tsx
+// src/primitive-hooks/actionBar/useActionBarEdit.tsx
 import { useCallback as useCallback2 } from "react";
-var useReloadMessage = () => {
+var useActionBarEdit = () => {
+  const { useMessage, useEditComposer } = useMessageContext();
+  const disabled = useCombinedStore(
+    [useMessage, useEditComposer],
+    (m, c) => m.message.role !== "user" || c.isEditing
+  );
+  const callback = useCallback2(() => {
+    const { edit } = useEditComposer.getState();
+    edit();
+  }, [useEditComposer]);
+  if (disabled) return null;
+  return callback;
+};
+
+// src/primitive-hooks/actionBar/useActionBarReload.tsx
+import { useCallback as useCallback3 } from "react";
+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 = useCallback2(() => {
+  const callback = useCallback3(() => {
     const { parentId } = useMessage.getState();
     useThreadActions.getState().startRun(parentId);
     useViewport.getState().scrollToBottom();
@@ -88,29 +106,20 @@ var useReloadMessage = () => {
   return callback;
 };
 
-// src/actions/useBeginMessageEdit.tsx
-import { useCallback as useCallback3 } from "react";
-var useBeginMessageEdit = () => {
-  const { useMessage, useComposer } = useMessageContext();
-  const disabled = useCombinedStore(
-    [useMessage, useComposer],
-    (m, c) => m.message.role !== "user" || c.isEditing
-  );
-  const callback = useCallback3(() => {
-    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
 import { useCallback as useCallback4 } from "react";
-var useGoToNextBranch = () => {
+var useBranchPickerNext = () => {
   const { useThreadActions } = useThreadContext();
-  const { useMessage, useComposer } = useMessageContext();
+  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 = useCallback4(() => {
@@ -121,13 +130,20 @@ var useGoToNextBranch = () => {
   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
 import { useCallback as useCallback5 } from "react";
-var useGoToPreviousBranch = () => {
+var useBranchPickerPrevious = () => {
   const { useThreadActions } = useThreadContext();
-  const { useMessage, useComposer } = useMessageContext();
+  const { useMessage, useEditComposer } = useMessageContext();
   const disabled = useCombinedStore(
-    [useMessage, useComposer],
+    [useMessage, useEditComposer],
     (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
   );
   const callback = useCallback5(() => {
@@ -138,6 +154,162 @@ var useGoToPreviousBranch = () => {
   return callback;
 };
 
+// src/primitive-hooks/composer/useComposerCancel.tsx
+import { useCallback as useCallback6 } from "react";
+var useComposerCancel = () => {
+  const { useComposer } = useComposerContext();
+  const disabled = useComposer((c) => !c.isEditing);
+  const callback = useCallback6(() => {
+    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
+import { useCallback as useCallback7 } from "react";
+var useComposerSend = () => {
+  const { useViewport } = useThreadContext();
+  const { useComposer } = useComposerContext();
+  const disabled = useComposer((c) => !c.isEditing || c.value.length === 0);
+  const callback = useCallback7(() => {
+    const composerState = useComposer.getState();
+    if (!composerState.isEditing) return;
+    composerState.send();
+    useViewport.getState().scrollToBottom();
+  }, [useComposer, useViewport]);
+  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
+import { useCallback as useCallback8 } from "react";
+var useThreadScrollToBottom = () => {
+  const { useViewport } = useThreadContext();
+  const isAtBottom = useViewport((s) => s.isAtBottom);
+  const handleScrollToBottom = useCallback8(() => {
+    const { scrollToBottom } = useViewport.getState();
+    scrollToBottom();
+  }, [useViewport]);
+  if (isAtBottom) return null;
+  return handleScrollToBottom;
+};
+
+// src/primitive-hooks/thread/useThreadSuggestion.tsx
+import { useCallback as useCallback9 } from "react";
+var useThreadSuggestion = ({
+  prompt,
+  autoSend
+}) => {
+  const { useThread, useComposer } = useThreadContext();
+  const disabled = useThread((t) => t.isRunning);
+  const callback = useCallback9(() => {
+    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;
+};
+
 // src/primitives/thread/index.ts
 var thread_exports = {};
 __export(thread_exports, {
@@ -161,142 +333,161 @@ var ThreadRoot = 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;
-  });
+// src/primitives/thread/ThreadEmpty.tsx
+var ThreadEmpty = ({ children }) => {
+  const empty = useThreadEmpty();
+  return empty ? children : null;
 };
+
+// src/primitives/thread/ThreadIf.tsx
 var ThreadIf = ({ children, ...query }) => {
   const result = useThreadIf(query);
   return result ? children : null;
 };
 
-// src/primitives/thread/ThreadEmpty.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ThreadEmpty = ({ children }) => {
-  return /* @__PURE__ */ jsx2(ThreadIf, { empty: true, children });
-};
-
 // src/primitives/thread/ThreadViewport.tsx
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
-import {
-  forwardRef as forwardRef2,
-  useRef
-} from "react";
+import { forwardRef as forwardRef2 } from "react";
+
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useRef as useRef2 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useEffect } from "react";
-var useOnResizeContent = (ref, callback) => {
+import { useCallback as useCallback11 } from "react";
+
+// src/utils/hooks/useManagedRef.ts
+import { useCallback as useCallback10, useRef } from "react";
+var useManagedRef = (callback) => {
+  const cleanupRef = useRef();
+  const ref = useCallback10(
+    (el) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+      if (el) {
+        cleanupRef.current = callback(el);
+      }
+    },
+    [callback]
+  );
+  return ref;
+};
+
+// src/utils/hooks/useOnResizeContent.tsx
+var useOnResizeContent = (callback) => {
   const callbackRef = useCallbackRef(callback);
-  const el = ref.current;
-  useEffect(() => {
-    if (!el) return;
-    const resizeObserver = new ResizeObserver(() => {
-      callbackRef();
-    });
-    const mutationObserver = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const node of mutation.addedNodes) {
-          if (node instanceof Element) {
-            resizeObserver.observe(node);
+  const refCallback = useCallback11(
+    (el) => {
+      const resizeObserver = new ResizeObserver(() => {
+        callbackRef();
+      });
+      const mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const node of mutation.addedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.observe(node);
+            }
           }
-        }
-        for (const node of mutation.removedNodes) {
-          if (node instanceof Element) {
-            resizeObserver.unobserve(node);
+          for (const node of mutation.removedNodes) {
+            if (node instanceof Element) {
+              resizeObserver.unobserve(node);
+            }
           }
         }
+        callbackRef();
+      });
+      resizeObserver.observe(el);
+      mutationObserver.observe(el, { childList: true });
+      for (const child of el.children) {
+        resizeObserver.observe(child);
       }
-      callbackRef();
-    });
-    resizeObserver.observe(el);
-    mutationObserver.observe(el, { childList: true });
-    for (const child of el.children) {
-      resizeObserver.observe(child);
-    }
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [el, callbackRef]);
+      return () => {
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    },
+    [callbackRef]
+  );
+  return useManagedRef(refCallback);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect2 } from "react";
+import { useEffect } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef2(callback);
   const { useViewport } = useThreadContext();
-  useEffect2(() => {
+  useEffect(() => {
     return useViewport.getState().onScrollToBottom(() => {
       callbackRef();
     });
   }, [useViewport, callbackRef]);
 };
 
-// src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
-  const messagesEndRef = useRef(null);
-  const divRef = useRef(null);
-  const ref = useComposedRefs(forwardedRef, divRef);
+// src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
+var useThreadViewportAutoScroll = ({
+  autoScroll = true
+}) => {
+  const divRef = useRef2(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = useRef(true);
-  const isScrollingToBottomRef = useRef(false);
-  const lastScrollTop = useRef(0);
+  const firstRenderRef = useRef2(true);
+  const lastScrollTop = useRef2(0);
+  const isScrollingToBottomRef = useRef2(false);
   const scrollToBottom = () => {
-    const div = messagesEndRef.current;
+    const div = divRef.current;
     if (!div || !autoScroll) return;
     const behavior = firstRenderRef.current ? "instant" : "auto";
     firstRenderRef.current = false;
     isScrollingToBottomRef.current = true;
-    div.scrollIntoView({ behavior });
+    div.scrollTo({ top: div.scrollHeight, behavior });
   };
-  useOnResizeContent(divRef, () => {
-    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom) {
-      handleScroll();
-    } else {
-      scrollToBottom();
-    }
-  });
-  useOnScrollToBottom(() => {
-    scrollToBottom();
-  });
   const handleScroll = () => {
     const div = divRef.current;
     if (!div) return;
     const isAtBottom = useViewport.getState().isAtBottom;
     const newIsAtBottom = div.scrollHeight - div.scrollTop <= div.clientHeight;
     if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
-    } else if (newIsAtBottom !== isAtBottom) {
-      isScrollingToBottomRef.current = false;
-      useViewport.setState({
-        isAtBottom: newIsAtBottom
-      });
+    } else {
+      isScrollingToBottomRef.current = newIsAtBottom;
+      if (newIsAtBottom !== isAtBottom) {
+        useViewport.setState({
+          isAtBottom: newIsAtBottom
+        });
+      }
     }
     lastScrollTop.current = div.scrollTop;
   };
-  return /* @__PURE__ */ jsxs(
-    Primitive2.div,
-    {
-      ...rest,
-      onScroll: composeEventHandlers(onScroll, handleScroll),
-      ref,
-      children: [
-        children,
-        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
-      ]
+  const resizeRef = useOnResizeContent(() => {
+    if (!isScrollingToBottomRef.current && !useViewport.getState().isAtBottom && !firstRenderRef.current) {
+      handleScroll();
+    } else {
+      scrollToBottom();
     }
-  );
+  });
+  const scrollRef = useManagedRef((el) => {
+    el.addEventListener("scroll", handleScroll);
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  });
+  const autoScrollRef = useComposedRefs(resizeRef, scrollRef, divRef);
+  useOnScrollToBottom(() => {
+    scrollToBottom();
+  });
+  return autoScrollRef;
+};
+
+// src/primitives/thread/ThreadViewport.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThreadViewport = forwardRef2(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+  const autoScrollRef = useThreadViewportAutoScroll({
+    autoScroll
+  });
+  const ref = useComposedRefs2(forwardedRef, autoScrollRef);
+  return /* @__PURE__ */ jsx2(Primitive2.div, { ...rest, ref, children });
 });
 ThreadViewport.displayName = "ThreadViewport";
 
@@ -304,10 +495,10 @@ ThreadViewport.displayName = "ThreadViewport";
 import { memo } from "react";
 
 // src/context/providers/MessageProvider.tsx
-import { useEffect as useEffect3, useState } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { create as create3 } from "zustand";
 
-// src/context/stores/MessageComposer.ts
+// src/context/stores/EditComposer.ts
 import { create } from "zustand";
 
 // src/context/stores/BaseComposer.ts
@@ -318,7 +509,7 @@ var makeBaseComposer = (set) => ({
   }
 });
 
-// src/context/stores/MessageComposer.ts
+// src/context/stores/EditComposer.ts
 var makeEditComposerStore = ({
   onEdit,
   onSend
@@ -359,7 +550,7 @@ var makeMessageUtilsStore = () => create2((set) => ({
 }));
 
 // src/context/providers/MessageProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var getIsLast = (thread, message) => {
   return thread.messages[thread.messages.length - 1]?.id === message.id;
 };
@@ -384,7 +575,7 @@ var useMessageContext2 = (messageIndex) => {
   const [context] = useState(() => {
     const useMessage = create3(() => ({}));
     const useMessageUtils = makeMessageUtilsStore();
-    const useComposer = makeEditComposerStore({
+    const useEditComposer = makeEditComposerStore({
       onEdit: () => {
         const message = useMessage.getState().message;
         if (message.role !== "user")
@@ -405,6 +596,7 @@ var useMessageContext2 = (messageIndex) => {
         );
         useThreadActions.getState().append({
           parentId,
+          role: "user",
           content: [{ type: "text", text }, ...nonTextParts]
         });
       }
@@ -415,9 +607,9 @@ var useMessageContext2 = (messageIndex) => {
       useMessage,
       messageIndex
     );
-    return { useMessage, useMessageUtils, useComposer };
+    return { useMessage, useMessageUtils, useEditComposer };
   });
-  useEffect3(() => {
+  useEffect2(() => {
     return useThread.subscribe((thread) => {
       syncMessage(
         thread,
@@ -434,46 +626,23 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx4(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx3(MessageContext.Provider, { value: context, children });
 };
 
 // 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, 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;
-    }
-  );
-};
 var MessageIf = ({ children, ...query }) => {
   const result = useMessageIf(query);
   return result ? children : null;
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -486,12 +655,12 @@ var ThreadMessageImpl = ({
   components
 }) => {
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
-  return /* @__PURE__ */ jsxs2(MessageProvider, { messageIndex, children: [
-    /* @__PURE__ */ jsxs2(MessageIf, { user: true, children: [
-      /* @__PURE__ */ jsx5(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx5(UserMessage, {}) }),
-      /* @__PURE__ */ jsx5(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx5(EditComposer, {}) })
+  return /* @__PURE__ */ jsxs(MessageProvider, { messageIndex, children: [
+    /* @__PURE__ */ jsxs(MessageIf, { user: true, children: [
+      /* @__PURE__ */ jsx4(ComposerIf, { editing: false, children: /* @__PURE__ */ jsx4(UserMessage, {}) }),
+      /* @__PURE__ */ jsx4(ComposerIf, { editing: true, children: /* @__PURE__ */ jsx4(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ jsx5(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx5(AssistantMessage, {}) })
+    /* @__PURE__ */ jsx4(MessageIf, { assistant: true, children: /* @__PURE__ */ jsx4(AssistantMessage, {}) })
   ] });
 };
 var ThreadMessage = memo(
@@ -504,7 +673,7 @@ var ThreadMessages = ({ components }) => {
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx4(
       ThreadMessage,
       {
         messageIndex,
@@ -515,56 +684,42 @@ var ThreadMessages = ({ components }) => {
   });
 };
 
-// src/primitives/thread/ThreadScrollToBottom.tsx
-import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+// src/utils/createActionButton.tsx
+import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ThreadScrollToBottom = forwardRef3(({ onClick, ...rest }, ref) => {
-  const { useViewport } = useThreadContext();
-  const isAtBottom = useViewport((s) => s.isAtBottom);
-  const handleScrollToBottom = () => {
-    useViewport.getState().scrollToBottom();
-  };
-  return /* @__PURE__ */ jsx6(
-    Primitive3.button,
-    {
-      ...rest,
-      disabled: isAtBottom,
-      ref,
-      onClick: composeEventHandlers2(onClick, handleScrollToBottom)
-    }
-  );
-});
-ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var createActionButton = (displayName, useActionButton) => {
+  const ActionButton = forwardRef3((props, forwardedRef) => {
+    const callback = useActionButton(props);
+    return /* @__PURE__ */ jsx5(
+      Primitive3.button,
+      {
+        type: "button",
+        disabled: !callback,
+        ...props,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, () => {
+          callback?.();
+        })
+      }
+    );
+  });
+  ActionButton.displayName = displayName;
+  return ActionButton;
+};
+
+// src/primitives/thread/ThreadScrollToBottom.tsx
+var ThreadScrollToBottom = createActionButton(
+  "ThreadScrollToBottom",
+  useThreadScrollToBottom
+);
 
 // src/primitives/thread/ThreadSuggestion.tsx
-import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ThreadSuggestion = forwardRef4(({ 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__ */ jsx7(
-    Primitive4.button,
-    {
-      ...rest,
-      disabled: isDisabled,
-      ref,
-      onClick: composeEventHandlers3(onClick, handleApplySuggestion)
-    }
-  );
-});
-ThreadSuggestion.displayName = "ThreadSuggestion";
+var ThreadSuggestion = createActionButton(
+  "ThreadSuggestion",
+  useThreadSuggestion
+);
 
 // src/primitives/composer/index.ts
 var composer_exports = {};
@@ -577,33 +732,26 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef5,
-  useRef as useRef2
+  forwardRef as forwardRef4
 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ComposerRoot = forwardRef5(
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ComposerRoot = forwardRef4(
   ({ onSubmit, ...rest }, forwardedRef) => {
-    const { useViewport } = useThreadContext();
-    const { useComposer } = useComposerContext();
-    const formRef = useRef2(null);
-    const ref = useComposedRefs2(forwardedRef, formRef);
+    const send = useComposerSend();
     const handleSubmit = (e) => {
-      const composerState = useComposer.getState();
-      if (!composerState.isEditing) return;
+      if (!send) return;
       e.preventDefault();
-      composerState.send();
-      useViewport.getState().scrollToBottom();
+      send();
     };
-    return /* @__PURE__ */ jsx8(
-      Primitive5.form,
+    return /* @__PURE__ */ jsx6(
+      Primitive4.form,
       {
         ...rest,
-        ref,
-        onSubmit: composeEventHandlers4(onSubmit, handleSubmit)
+        ref: forwardedRef,
+        onSubmit: composeEventHandlers2(onSubmit, handleSubmit)
       }
     );
   }
@@ -611,18 +759,19 @@ var ComposerRoot = forwardRef5(
 ComposerRoot.displayName = "ComposerRoot";
 
 // src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
-  forwardRef as forwardRef6,
-  useCallback as useCallback6,
-  useEffect as useEffect4,
+  forwardRef as forwardRef5,
+  useCallback as useCallback12,
+  useEffect as useEffect3,
   useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ComposerInput = forwardRef6(
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ComposerInput = forwardRef5(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
@@ -633,14 +782,15 @@ var ComposerInput = forwardRef6(
     const Component = asChild ? Slot : TextareaAutosize;
     const textareaRef = useRef3(null);
     const ref = useComposedRefs3(forwardedRef, textareaRef);
+    useEscapeKeydown((e) => {
+      const composer = useComposer.getState();
+      if (composer.cancel()) {
+        e.preventDefault();
+      }
+    });
     const handleKeyPress = (e) => {
       if (disabled) return;
-      if (e.key === "Escape") {
-        const composer = useComposer.getState();
-        if (composer.cancel()) {
-          e.preventDefault();
-        }
-      } else if (e.key === "Enter" && e.shiftKey === false) {
+      if (e.key === "Enter" && e.shiftKey === false) {
         const isRunning = useThread.getState().isRunning;
         if (!isRunning) {
           e.preventDefault();
@@ -649,23 +799,22 @@ var ComposerInput = forwardRef6(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = useCallback6(() => {
+    const focus = useCallback12(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
-      console.log("focus");
       textarea.focus();
       textarea.setSelectionRange(
         textareaRef.current.value.length,
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect4(() => focus(), [focus]);
+    useEffect3(() => focus(), [focus]);
     useOnScrollToBottom(() => {
       if (type === "new") {
         focus();
       }
     });
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx7(
       Component,
       {
         value,
@@ -673,12 +822,12 @@ var ComposerInput = forwardRef6(
         ref,
         autoFocus,
         disabled,
-        onChange: composeEventHandlers5(onChange, (e) => {
+        onChange: composeEventHandlers3(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
+        onKeyDown: composeEventHandlers3(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -686,15 +835,15 @@ var ComposerInput = forwardRef6(
 ComposerInput.displayName = "ComposerInput";
 
 // src/primitives/composer/ComposerSend.tsx
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ComposerSend = forwardRef7(
+import { forwardRef as forwardRef6 } from "react";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ComposerSend = forwardRef6(
   ({ disabled, ...rest }, ref) => {
     const { useComposer } = useComposerContext();
     const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-    return /* @__PURE__ */ jsx10(
-      Primitive6.button,
+    return /* @__PURE__ */ jsx8(
+      Primitive5.button,
       {
         type: "submit",
         ...rest,
@@ -707,26 +856,10 @@ var ComposerSend = forwardRef7(
 ComposerSend.displayName = "ComposerSend";
 
 // src/primitives/composer/ComposerCancel.tsx
-import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ComposerCancel = forwardRef8(({ onClick, ...rest }, ref) => {
-  const { useComposer } = useComposerContext();
-  const handleCancel = () => {
-    useComposer.getState().cancel();
-  };
-  return /* @__PURE__ */ jsx11(
-    Primitive7.button,
-    {
-      type: "button",
-      ...rest,
-      ref,
-      onClick: composeEventHandlers6(onClick, handleCancel)
-    }
-  );
-});
-ComposerCancel.displayName = "ComposerCancel";
+var ComposerCancel = createActionButton(
+  "ComposerCancel",
+  useComposerCancel
+);
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -738,11 +871,11 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-import { composeEventHandlers as composeEventHandlers7 } from "@radix-ui/primitive";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var MessageRoot = forwardRef9(
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var MessageRoot = forwardRef7(
   ({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
     const { useMessageUtils } = useMessageContext();
     const setIsHovering = useMessageUtils((s) => s.setIsHovering);
@@ -752,13 +885,13 @@ var MessageRoot = forwardRef9(
     const handleMouseLeave = () => {
       setIsHovering(false);
     };
-    return /* @__PURE__ */ jsx12(
-      Primitive8.div,
+    return /* @__PURE__ */ jsx9(
+      Primitive6.div,
       {
         ...rest,
         ref,
-        onMouseEnter: composeEventHandlers7(onMouseEnter, handleMouseEnter),
-        onMouseLeave: composeEventHandlers7(onMouseLeave, handleMouseLeave)
+        onMouseEnter: composeEventHandlers4(onMouseEnter, handleMouseEnter),
+        onMouseLeave: composeEventHandlers4(onMouseLeave, handleMouseLeave)
       }
     );
   }
@@ -769,9 +902,9 @@ MessageRoot.displayName = "MessageRoot";
 import { memo as memo2 } from "react";
 
 // src/context/providers/ContentPartProvider.tsx
-import { useEffect as useEffect5, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 import { create as create4 } from "zustand";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var syncContentPart = ({ message }, useContentPart, partIndex) => {
   const part = message.content[partIndex];
   if (!part) return;
@@ -795,7 +928,7 @@ var useContentPartContext2 = (partIndex) => {
     syncContentPart(useMessage.getState(), useContentPart, partIndex);
     return { useContentPart };
   });
-  useEffect5(() => {
+  useEffect4(() => {
     syncContentPart(useMessage.getState(), context.useContentPart, partIndex);
     return useMessage.subscribe((message) => {
       syncContentPart(message, context.useContentPart, partIndex);
@@ -808,65 +941,46 @@ var ContentPartProvider = ({
   children
 }) => {
   const context = useContentPartContext2(partIndex);
-  return /* @__PURE__ */ jsx13(ContentPartContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx10(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 { useMessageUtils } = useMessageContext();
-  const { useContentPart } = useContentPartContext();
-  const indicator = useCombinedStore(
-    [useMessageUtils, useContentPart],
-    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
-  );
+  const indicator = useContentPartInProgressIndicator();
   return indicator;
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var ContentPartText = forwardRef10((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__ */ jsx14(Primitive9.span, { ...props, ref: forwardedRef, children: text });
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ContentPartText = forwardRef8((props, forwardedRef) => {
+  const text = useContentPartText();
+  return /* @__PURE__ */ jsx11(Primitive7.span, { ...props, ref: forwardedRef, children: text });
 });
 ContentPartText.displayName = "ContentPartText";
 
 // src/primitives/message/MessageContent.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
-  Text: () => /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx15(ContentPartText, {}),
-    /* @__PURE__ */ jsx15(ContentPartInProgressIndicator, {})
+  Text: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx12(ContentPartText, {}),
+    /* @__PURE__ */ jsx12(ContentPartInProgressIndicator, {})
   ] }),
   Image: () => null,
-  UI: () => /* @__PURE__ */ jsx15(ContentPartDisplay, {}),
+  UI: () => /* @__PURE__ */ jsx12(ContentPartDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
       const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
-      return /* @__PURE__ */ jsx15(Render, { ...props });
+      return /* @__PURE__ */ jsx12(Render, { ...props });
     }
   }
 };
@@ -885,15 +999,15 @@ var MessageContentPartComponent = ({
   const type = part.type;
   switch (type) {
     case "text":
-      return /* @__PURE__ */ jsx15(Text, { part, status });
+      return /* @__PURE__ */ jsx12(Text, { part, status });
     case "image":
-      return /* @__PURE__ */ jsx15(Image, { part, status });
+      return /* @__PURE__ */ jsx12(Image, { part, status });
     case "ui":
-      return /* @__PURE__ */ jsx15(UI, { part, status });
+      return /* @__PURE__ */ jsx12(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
       const addResult = (result) => addToolResult(part.toolCallId, result);
-      return /* @__PURE__ */ jsx15(Tool, { part, status, addResult });
+      return /* @__PURE__ */ jsx12(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -903,7 +1017,7 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx15(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx15(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ jsx12(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx12(MessageContentPartComponent, { components }) });
 };
 var MessageContentPart = memo2(
   MessageContentPartImpl,
@@ -914,7 +1028,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__ */ jsx15(
+    return /* @__PURE__ */ jsx12(
       MessageContentPart,
       {
         partIndex,
@@ -926,16 +1040,16 @@ var MessageContent = ({ components }) => {
 };
 
 // src/primitives/message/MessageInProgress.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef9,
   useMemo as useMemo2
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var MessageInProgress = forwardRef11((props, ref) => {
+import { jsx as jsx13 } from "react/jsx-runtime";
+var MessageInProgress = forwardRef9((props, ref) => {
   const { useMessageUtils } = useMessageContext();
   useMemo2(() => {
-    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx16(Primitive10.span, { ...props, ref }));
+    useMessageUtils.getState().setInProgressIndicator(/* @__PURE__ */ jsx13(Primitive8.span, { ...props, ref }));
   }, [useMessageUtils, props, ref]);
   return null;
 });
@@ -951,57 +1065,38 @@ __export(branchPicker_exports, {
   Root: () => BranchPickerRoot
 });
 
-// src/utils/createActionButton.tsx
-import { composeEventHandlers as composeEventHandlers8 } from "@radix-ui/primitive";
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var createActionButton = (useActionButton) => {
-  const ActionButton = forwardRef12((props, forwardedRef) => {
-    const onClick = useActionButton(props);
-    return /* @__PURE__ */ jsx17(
-      Primitive11.button,
-      {
-        type: "button",
-        disabled: !onClick,
-        ...props,
-        ref: forwardedRef,
-        onClick: composeEventHandlers8(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
-import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14 } from "react/jsx-runtime";
 var BranchPickerCount = () => {
-  const { useMessage } = useMessageContext();
-  const branchCount = useMessage((s) => s.branches.length);
-  return /* @__PURE__ */ jsx18(Fragment2, { children: branchCount });
+  const branchCount = useBranchPickerCount();
+  return /* @__PURE__ */ jsx14(Fragment2, { children: branchCount });
 };
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15 } from "react/jsx-runtime";
 var BranchPickerNumber = () => {
-  const { useMessage } = useMessageContext();
-  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return /* @__PURE__ */ jsx19(Fragment3, { children: branchIdx + 1 });
+  const branchNumber = useBranchPickerNumber();
+  return /* @__PURE__ */ jsx15(Fragment3, { children: branchNumber });
 };
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var BranchPickerRoot = forwardRef13(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx20(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx20(Primitive12.div, { ...rest, ref }) });
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var BranchPickerRoot = forwardRef10(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx16(MessageIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx16(Primitive9.div, { ...rest, ref }) });
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
 
@@ -1015,13 +1110,17 @@ __export(actionBar_exports, {
 });
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ActionBarRoot = forwardRef14(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var useActionBarFloatStatus = ({
+  hideWhenRunning,
+  autohide,
+  autohideFloat
+}) => {
   const { useThread } = useThreadContext();
   const { useMessage, useMessageUtils } = useMessageContext();
-  const hideAndfloatStatus = useCombinedStore(
+  return useCombinedStore(
     [useThread, useMessage, useMessageUtils],
     (t, m, mu) => {
       if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
@@ -1033,9 +1132,16 @@ var ActionBarRoot = forwardRef14(({ hideWhenRunning, autohide, autohideFloat, ..
       return "normal" /* Normal */;
     }
   );
+};
+var ActionBarRoot = forwardRef11(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
+  const hideAndfloatStatus = useActionBarFloatStatus({
+    hideWhenRunning,
+    autohide,
+    autohideFloat
+  });
   if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
-  return /* @__PURE__ */ jsx21(
-    Primitive13.div,
+  return /* @__PURE__ */ jsx17(
+    Primitive10.div,
     {
       ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
       ...rest,
@@ -1046,13 +1152,22 @@ var ActionBarRoot = forwardRef14(({ hideWhenRunning, autohide, autohideFloat, ..
 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 = {};
@@ -1064,19 +1179,12 @@ __export(contentPart_exports, {
 });
 
 // src/primitives/contentPart/ContentPartImage.tsx
-import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var ContentPartImage = forwardRef15((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__ */ jsx22(Primitive14.img, { src: image, ...props, ref: forwardedRef });
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ContentPartImage = forwardRef12((props, forwardedRef) => {
+  const image = useContentPartImage();
+  return /* @__PURE__ */ jsx18(Primitive11.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartImage.displayName = "ContentPartImage";
 
@@ -1378,7 +1486,7 @@ var useLocalRuntime = (adapter) => {
 import { memo as memo3 } from "react";
 
 // src/context/providers/AssistantProvider.tsx
-import { useEffect as useEffect7, useInsertionEffect as useInsertionEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useInsertionEffect as useInsertionEffect3, useRef as useRef5, useState as useState5 } from "react";
 
 // src/context/stores/AssistantModelConfig.ts
 import { create as create5 } from "zustand";
@@ -1443,7 +1551,7 @@ var makeAssistantToolUIsStore = () => create6((set) => {
 });
 
 // src/context/providers/ThreadProvider.tsx
-import { useEffect as useEffect6, useInsertionEffect as useInsertionEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useInsertionEffect as useInsertionEffect2, useRef as useRef4, useState as useState4 } from "react";
 
 // src/context/stores/Composer.ts
 import { create as create7 } from "zustand";
@@ -1456,6 +1564,7 @@ var makeComposerStore = (useThread, useThreadActions) => create7()((set, get, st
       setValue("");
       useThreadActions.getState().append({
         parentId: useThread.getState().messages.at(-1)?.id ?? null,
+        role: "user",
         content: [{ type: "text", text: value }]
       });
     },
@@ -1513,7 +1622,7 @@ var makeThreadActionStore = (runtimeRef) => {
 };
 
 // src/context/providers/ThreadProvider.tsx
-import { jsx as jsx23, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
 var ThreadProvider = ({
   children,
   runtime
@@ -1534,7 +1643,7 @@ var ThreadProvider = ({
       useViewport
     };
   });
-  useEffect6(() => {
+  useEffect5(() => {
     const onRuntimeUpdate = () => {
       context.useThread.setState(
         Object.freeze({
@@ -1548,14 +1657,14 @@ var ThreadProvider = ({
     return runtime.subscribe(onRuntimeUpdate);
   }, [context, runtime]);
   const RuntimeSynchronizer = runtime.unstable_synchronizer;
-  return /* @__PURE__ */ jsxs4(ThreadContext.Provider, { value: context, children: [
-    RuntimeSynchronizer && /* @__PURE__ */ jsx23(RuntimeSynchronizer, {}),
+  return /* @__PURE__ */ jsxs3(ThreadContext.Provider, { value: context, children: [
+    RuntimeSynchronizer && /* @__PURE__ */ jsx19(RuntimeSynchronizer, {}),
     children
   ] });
 };
 
 // src/context/providers/AssistantProvider.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var AssistantProvider = ({ children, runtime }) => {
   const runtimeRef = useRef5(runtime);
   useInsertionEffect3(() => {
@@ -1567,16 +1676,16 @@ var AssistantProvider = ({ children, runtime }) => {
     return { useModelConfig, useToolUIs };
   });
   const getModelCOnfig = context.useModelConfig((c) => c.getModelConfig);
-  useEffect7(() => {
+  useEffect6(() => {
     return runtime.registerModelConfigProvider(getModelCOnfig);
   }, [runtime, getModelCOnfig]);
-  return /* @__PURE__ */ jsx24(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx24(ThreadProvider, { runtime, children }) });
+  return /* @__PURE__ */ jsx20(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx20(ThreadProvider, { runtime, children }) });
 };
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
-  return /* @__PURE__ */ jsx25(AssistantProvider, { runtime, children });
+  return /* @__PURE__ */ jsx21(AssistantProvider, { runtime, children });
 };
 var AssistantRuntimeProvider = memo3(AssistantRuntimeProviderImpl);
 
@@ -1595,11 +1704,25 @@ export {
   internal_exports as INTERNAL,
   message_exports as MessagePrimitive,
   thread_exports as 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.mjs.map