@assistant-ui/react 0.2.4 → 0.3.1

package/dist/index.mjs

@@ -148,11 +148,14 @@ var makeBaseComposer = (set) => ({
 });
 
 // src/context/stores/Composer.ts
-var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
+var makeComposerStore = (useThreadMessages, useThreadActions) => {
   const focusListeners = /* @__PURE__ */ new Set();
   return create3()((set, get, store) => {
     return {
       ...makeBaseComposer(set, get, store),
+      get canCancel() {
+        return useThreadActions.getState().capabilities.cancel;
+      },
       isEditing: true,
       send: () => {
         const { setValue, value } = get();
@@ -164,10 +167,7 @@ var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
         });
       },
       cancel: () => {
-        const thread = useThread.getState();
-        if (!thread.isRunning) return false;
         useThreadActions.getState().cancelRun();
-        return true;
       },
       focus: () => {
         for (const listener of focusListeners) {
@@ -217,6 +217,9 @@ import { create as create6 } from "zustand";
 var makeThreadActionStore = (runtimeRef) => {
   return create6(
     () => Object.freeze({
+      get capabilities() {
+        return runtimeRef.current.capabilities;
+      },
       getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
       switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
       startRun: (parentId) => runtimeRef.current.startRun(parentId),
@@ -248,11 +251,7 @@ var ThreadProvider = ({
     const useThreadMessages = makeThreadMessagesStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(
-      useThread,
-      useThreadMessages,
-      useThreadActions
-    );
+    const useComposer = makeComposerStore(useThreadMessages, useThreadActions);
     return {
       useThread,
       useThreadMessages,
@@ -522,7 +521,7 @@ var useActionBarCopy = ({
   const hasCopyableContent = useCombinedStore(
     [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" && c2.text.length > 0);
     }
   );
   const callback = useCallback4(() => {
@@ -625,7 +624,7 @@ var useBranchPickerPrevious = () => {
 import { useCallback as useCallback9 } from "react";
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
-  const disabled = useComposer((c) => !c.isEditing);
+  const disabled = useComposer((c) => !c.canCancel);
   const callback = useCallback9(() => {
     const { cancel } = useComposer.getState();
     cancel();
@@ -695,7 +694,7 @@ var useContentPartText = () => {
       throw new Error(
         "ContentPartText can only be used inside text content parts."
       );
-    return c.part.text;
+    return c;
   });
   return text;
 };
@@ -757,15 +756,18 @@ var useThreadSuggestion = ({
   autoSend
 }) => {
   const { useThread, useComposer } = useThreadContext();
+  const append = useAppendMessage();
   const disabled = useThread((t) => t.isRunning);
   const callback = useCallback12(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
-    composer.setValue(prompt);
     if (autoSend && !thread.isRunning) {
-      composer.send();
+      append(prompt);
+      composer.setValue("");
+    } else {
+      composer.setValue(prompt);
     }
-  }, [useThread, useComposer, prompt, autoSend]);
+  }, [useThread, useComposer, autoSend, append, prompt]);
   if (disabled) return null;
   return callback;
 };
@@ -1045,28 +1047,60 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef6 } from "react";
+import {
+  forwardRef as forwardRef6,
+  useCallback as useCallback14
+} from "react";
+
+// src/utils/hooks/useManagedRef.ts
+import { useCallback as useCallback13, useRef as useRef3 } from "react";
+var useManagedRef = (callback) => {
+  const cleanupRef = useRef3();
+  const ref = useCallback13(
+    (el) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+      if (el) {
+        cleanupRef.current = callback(el);
+      }
+    },
+    [callback]
+  );
+  return ref;
+};
+
+// src/primitives/message/MessageRoot.tsx
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var MessagePrimitiveRoot = forwardRef6(({ onMouseEnter, onMouseLeave, ...rest }, ref) => {
+var useIsHoveringRef = () => {
   const { useMessageUtils } = useMessageContext();
-  const setIsHovering = useMessageUtils((s) => s.setIsHovering);
-  const handleMouseEnter = () => {
-    setIsHovering(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHovering(false);
-  };
-  return /* @__PURE__ */ jsx12(
-    Primitive3.div,
-    {
-      ...rest,
-      ref,
-      onMouseEnter: composeEventHandlers4(onMouseEnter, handleMouseEnter),
-      onMouseLeave: composeEventHandlers4(onMouseLeave, handleMouseLeave)
-    }
+  const callbackRef = useCallback14(
+    (el) => {
+      const setIsHovering = useMessageUtils.getState().setIsHovering;
+      const handleMouseEnter = () => {
+        setIsHovering(true);
+      };
+      const handleMouseLeave = () => {
+        setIsHovering(false);
+      };
+      el.addEventListener("mouseenter", handleMouseEnter);
+      el.addEventListener("mouseleave", handleMouseLeave);
+      return () => {
+        el.removeEventListener("mouseenter", handleMouseEnter);
+        el.removeEventListener("mouseleave", handleMouseLeave);
+        setIsHovering(false);
+      };
+    },
+    [useMessageUtils]
   );
+  return useManagedRef(callbackRef);
+};
+var MessagePrimitiveRoot = forwardRef6(({ onMouseEnter, onMouseLeave, ...rest }, forwardRef15) => {
+  const isHoveringRef = useIsHoveringRef();
+  const ref = useComposedRefs(forwardRef15, isHoveringRef);
+  return /* @__PURE__ */ jsx12(Primitive3.div, { ...rest, ref });
 });
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
 
@@ -1126,6 +1160,29 @@ var ContentPartProvider = ({
   return /* @__PURE__ */ jsx13(ContentPartContext.Provider, { value: context, children });
 };
 
+// src/primitives/contentPart/ContentPartText.tsx
+import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ContentPartPrimitiveText = forwardRef7((props, forwardedRef) => {
+  const {
+    part: { text },
+    status
+  } = useContentPartText();
+  return /* @__PURE__ */ jsx14(Primitive4.span, { "data-status": status, ...props, ref: forwardedRef, children: text });
+});
+ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
+
+// src/primitives/contentPart/ContentPartImage.tsx
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ContentPartPrimitiveImage = forwardRef8((props, forwardedRef) => {
+  const image = useContentPartImage();
+  return /* @__PURE__ */ jsx15(Primitive5.img, { src: image, ...props, ref: forwardedRef });
+});
+ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
+
 // src/primitives/contentPart/ContentPartDisplay.tsx
 var ContentPartPrimitiveDisplay = () => {
   const display = useContentPartDisplay();
@@ -1133,61 +1190,31 @@ var ContentPartPrimitiveDisplay = () => {
 };
 ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
 
-// src/utils/OutPortal.tsx
-import { useLayoutEffect, useRef as useRef3 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var OutPortal = ({ node }) => {
-  const parentRef = useRef3(null);
-  useLayoutEffect(() => {
-    const parent = parentRef.current;
-    if (!parent || !node) return;
-    parent.appendChild(node);
-    return () => {
-      parent.removeChild(node);
-    };
-  }, [node]);
-  if (!node) return null;
-  return /* @__PURE__ */ jsx14("span", { ref: parentRef });
-};
-
-// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var ContentPartPrimitiveInProgressIndicator = () => {
-  const { useMessageUtils } = useMessageContext();
+// src/primitives/contentPart/ContentPartInProgress.tsx
+var ContentPartPrimitiveInProgress = ({
+  children
+}) => {
   const { useContentPart } = useContentPartContext();
-  const indicator = useCombinedStore(
-    [useMessageUtils, useContentPart],
-    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
-  );
-  return /* @__PURE__ */ jsx15(OutPortal, { node: indicator });
+  const isInProgress = useContentPart((c) => c.status === "in_progress");
+  return isInProgress ? children : null;
 };
-ContentPartPrimitiveInProgressIndicator.displayName = "ContentPartPrimitive.InProgressIndicator";
-
-// src/primitives/contentPart/ContentPartText.tsx
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var ContentPartPrimitiveText = forwardRef7((props, forwardedRef) => {
-  const text = useContentPartText();
-  return /* @__PURE__ */ jsx16(Primitive4.span, { ...props, ref: forwardedRef, children: text });
-});
-ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
+ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";
 
 // src/primitives/message/MessageContent.tsx
-import { jsx as jsx17, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
   Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
-    /* @__PURE__ */ jsx17(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ jsx17(ContentPartPrimitiveInProgressIndicator, {})
+    /* @__PURE__ */ jsx16(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ jsx16(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx16("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
-  Image: () => null,
-  UI: () => /* @__PURE__ */ jsx17(ContentPartPrimitiveDisplay, {}),
+  Image: () => /* @__PURE__ */ jsx16(ContentPartPrimitiveImage, {}),
+  UI: () => /* @__PURE__ */ jsx16(ContentPartPrimitiveDisplay, {}),
   tools: {
     Fallback: (props) => {
       const { useToolUIs } = useAssistantContext();
       const Render = useToolUIs((s) => s.getToolUI(props.part.toolName));
       if (!Render) return null;
-      return /* @__PURE__ */ jsx17(Render, { ...props });
+      return /* @__PURE__ */ jsx16(Render, { ...props });
     }
   }
 };
@@ -1206,15 +1233,15 @@ var MessageContentPartComponent = ({
   const type = part.type;
   switch (type) {
     case "text":
-      return /* @__PURE__ */ jsx17(Text, { part, status });
+      return /* @__PURE__ */ jsx16(Text, { part, status });
     case "image":
-      return /* @__PURE__ */ jsx17(Image, { part, status });
+      return /* @__PURE__ */ jsx16(Image, { part, status });
     case "ui":
-      return /* @__PURE__ */ jsx17(UI, { part, status });
+      return /* @__PURE__ */ jsx16(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback;
       const addResult = (result) => addToolResult(part.toolCallId, result);
-      return /* @__PURE__ */ jsx17(Tool, { part, status, addResult });
+      return /* @__PURE__ */ jsx16(Tool, { part, status, addResult });
     }
     default:
       throw new Error(`Unknown content part type: ${type}`);
@@ -1224,7 +1251,7 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx17(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx17(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ jsx16(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx16(MessageContentPartComponent, { components }) });
 };
 var MessageContentPart = memo2(
   MessageContentPartImpl,
@@ -1237,7 +1264,7 @@ var MessagePrimitiveContent = ({
   const contentLength = useMessage((s) => s.message.content.length);
   return new Array(contentLength).fill(null).map((_, idx) => {
     const partIndex = idx;
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx16(
       MessageContentPart,
       {
         partIndex,
@@ -1250,21 +1277,15 @@ var MessagePrimitiveContent = ({
 MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
 // src/primitives/message/MessageInProgress.tsx
-import { createPortal } from "react-dom";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var MessagePrimitiveInProgress = forwardRef8((props, ref) => {
-  const { useMessageUtils } = useMessageContext();
-  const portalNode = useMessageUtils((s) => s.inProgressIndicator);
-  return createPortal(/* @__PURE__ */ jsx18(Primitive5.span, { ...props, ref }), portalNode);
-});
+var MessagePrimitiveInProgress = () => {
+  return null;
+};
 MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var BranchPickerPrimitiveRoot = forwardRef9(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx19(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx19(Primitive6.div, { ...rest, ref }) });
+  return /* @__PURE__ */ jsx17(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx17(Primitive6.div, { ...rest, ref }) });
 });
 BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
@@ -1279,12 +1300,12 @@ __export(composer_exports, {
 });
 
 // src/primitives/composer/ComposerRoot.tsx
-import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import {
   forwardRef as forwardRef10
 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var ComposerPrimitiveRoot = forwardRef10(({ onSubmit, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const handleSubmit = (e) => {
@@ -1292,30 +1313,30 @@ var ComposerPrimitiveRoot = forwardRef10(({ onSubmit, ...rest }, forwardedRef) =
     if (!send) return;
     send();
   };
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx18(
     Primitive7.form,
     {
       ...rest,
       ref: forwardedRef,
-      onSubmit: composeEventHandlers5(onSubmit, handleSubmit)
+      onSubmit: composeEventHandlers4(onSubmit, handleSubmit)
     }
   );
 });
 ComposerPrimitiveRoot.displayName = "ComposerPrimitive.Root";
 
 // src/primitives/composer/ComposerInput.tsx
-import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef11,
-  useCallback as useCallback13,
+  useCallback as useCallback15,
   useEffect as useEffect8,
   useRef as useRef4
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ComposerPrimitiveInput = forwardRef11(
   ({ autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest }, forwardedRef) => {
     const { useThread } = useThreadContext();
@@ -1326,10 +1347,11 @@ var ComposerPrimitiveInput = forwardRef11(
     });
     const Component = asChild ? Slot : TextareaAutosize;
     const textareaRef = useRef4(null);
-    const ref = useComposedRefs(forwardedRef, textareaRef);
+    const ref = useComposedRefs2(forwardedRef, textareaRef);
     useEscapeKeydown((e) => {
       const composer = useComposer.getState();
-      if (composer.cancel()) {
+      if (composer.canCancel) {
+        composer.cancel();
         e.preventDefault();
       }
     });
@@ -1344,7 +1366,7 @@ var ComposerPrimitiveInput = forwardRef11(
       }
     };
     const autoFocusEnabled = autoFocus && !disabled;
-    const focus = useCallback13(() => {
+    const focus = useCallback15(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -1359,19 +1381,20 @@ var ComposerPrimitiveInput = forwardRef11(
         focus();
       }
     });
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx19(
       Component,
       {
+        name: "input",
         value,
         ...rest,
         ref,
         disabled,
-        onChange: composeEventHandlers6(onChange, (e) => {
+        onChange: composeEventHandlers5(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
           return composerState.setValue(e.target.value);
         }),
-        onKeyDown: composeEventHandlers6(onKeyDown, handleKeyPress)
+        onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
       }
     );
   }
@@ -1381,11 +1404,11 @@ ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 // src/primitives/composer/ComposerSend.tsx
 import { forwardRef as forwardRef12 } from "react";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ComposerPrimitiveSend = forwardRef12(({ disabled, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
   const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx20(
     Primitive8.button,
     {
       type: "submit",
@@ -1418,20 +1441,10 @@ var contentPart_exports = {};
 __export(contentPart_exports, {
   Display: () => ContentPartPrimitiveDisplay,
   Image: () => ContentPartPrimitiveImage,
-  InProgressIndicator: () => ContentPartPrimitiveInProgressIndicator,
+  InProgress: () => ContentPartPrimitiveInProgress,
   Text: () => ContentPartPrimitiveText
 });
 
-// src/primitives/contentPart/ContentPartImage.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var ContentPartPrimitiveImage = forwardRef13((props, forwardedRef) => {
-  const image = useContentPartImage();
-  return /* @__PURE__ */ jsx23(Primitive9.img, { src: image, ...props, ref: forwardedRef });
-});
-ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
-
 // src/primitives/thread/index.ts
 var thread_exports = {};
 __export(thread_exports, {
@@ -1445,11 +1458,11 @@ __export(thread_exports, {
 });
 
 // src/primitives/thread/ThreadRoot.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var ThreadPrimitiveRoot = forwardRef14((props, ref) => {
-  return /* @__PURE__ */ jsx24(Primitive10.div, { ...props, ref });
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ThreadPrimitiveRoot = forwardRef13((props, ref) => {
+  return /* @__PURE__ */ jsx21(Primitive9.div, { ...props, ref });
 });
 ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
@@ -1473,40 +1486,20 @@ var ThreadPrimitiveIf = ({
 ThreadPrimitiveIf.displayName = "ThreadPrimitive.If";
 
 // src/primitives/thread/ThreadViewport.tsx
-import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef15 } from "react";
+import { useComposedRefs as useComposedRefs4 } from "@radix-ui/react-compose-refs";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef14 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-import { useRef as useRef6 } from "react";
+import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
+import { useRef as useRef5 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
-import { useCallback as useCallback15 } from "react";
-
-// src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback14, useRef as useRef5 } from "react";
-var useManagedRef = (callback) => {
-  const cleanupRef = useRef5();
-  const ref = useCallback14(
-    (el) => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-      }
-      if (el) {
-        cleanupRef.current = callback(el);
-      }
-    },
-    [callback]
-  );
-  return ref;
-};
-
-// src/utils/hooks/useOnResizeContent.tsx
+import { useCallback as useCallback16 } from "react";
 var useOnResizeContent = (callback) => {
   const callbackRef = useCallbackRef2(callback);
-  const refCallback = useCallback15(
+  const refCallback = useCallback16(
     (el) => {
       const resizeObserver = new ResizeObserver(() => {
         callbackRef();
@@ -1558,11 +1551,11 @@ var useOnScrollToBottom = (callback) => {
 var useThreadViewportAutoScroll = ({
   autoScroll = true
 }) => {
-  const divRef = useRef6(null);
+  const divRef = useRef5(null);
   const { useViewport } = useThreadContext();
-  const firstRenderRef = useRef6(true);
-  const lastScrollTop = useRef6(0);
-  const isScrollingToBottomRef = useRef6(false);
+  const firstRenderRef = useRef5(true);
+  const lastScrollTop = useRef5(0);
+  const isScrollingToBottomRef = useRef5(false);
   const scrollToBottom = () => {
     const div = divRef.current;
     if (!div || !autoScroll) return;
@@ -1600,7 +1593,7 @@ var useThreadViewportAutoScroll = ({
       el.removeEventListener("scroll", handleScroll);
     };
   });
-  const autoScrollRef = useComposedRefs2(resizeRef, scrollRef, divRef);
+  const autoScrollRef = useComposedRefs3(resizeRef, scrollRef, divRef);
   useOnScrollToBottom(() => {
     scrollToBottom();
   });
@@ -1608,13 +1601,13 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ThreadPrimitiveViewport = forwardRef15(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
+import { jsx as jsx22 } from "react/jsx-runtime";
+var ThreadPrimitiveViewport = forwardRef14(({ autoScroll, onScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
-  const ref = useComposedRefs3(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ jsx25(Primitive11.div, { ...rest, ref, children });
+  const ref = useComposedRefs4(forwardedRef, autoScrollRef);
+  return /* @__PURE__ */ jsx22(Primitive10.div, { ...rest, ref, children });
 });
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
@@ -1632,27 +1625,25 @@ var makeEditComposerStore = ({
   onSend
 }) => create10()((set, get, store) => ({
   ...makeBaseComposer(set, get, store),
+  canCancel: false,
   isEditing: false,
   edit: () => {
     const value = onEdit();
-    set({ isEditing: true, value });
+    set({ isEditing: true, canCancel: true, value });
   },
   send: () => {
     const value = get().value;
-    set({ isEditing: false });
+    set({ isEditing: false, canCancel: false });
     onSend(value);
   },
   cancel: () => {
-    if (!get().isEditing) return false;
-    set({ isEditing: false });
-    return true;
+    set({ isEditing: false, canCancel: false });
   }
 }));
 
 // src/context/stores/MessageUtils.ts
 import { create as create11 } from "zustand";
 var makeMessageUtilsStore = () => create11((set) => ({
-  inProgressIndicator: document.createElement("span"),
   isCopied: false,
   setIsCopied: (value) => {
     set({ isCopied: value });
@@ -1664,7 +1655,7 @@ var makeMessageUtilsStore = () => create11((set) => ({
 }));
 
 // src/context/providers/MessageProvider.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var getIsLast = (messages, message) => {
   return messages[messages.length - 1]?.id === message.id;
 };
@@ -1740,11 +1731,11 @@ var MessageProvider = ({
   children
 }) => {
   const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx26(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx23(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx27, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs3 } from "react/jsx-runtime";
 var getComponents = (components) => {
   return {
     EditComposer: components.EditComposer ?? components.UserMessage ?? components.Message,
@@ -1759,17 +1750,17 @@ var ThreadMessageImpl = ({
   const { UserMessage, EditComposer, AssistantMessage } = getComponents(components);
   return /* @__PURE__ */ jsxs3(MessageProvider, { messageIndex, children: [
     /* @__PURE__ */ jsxs3(MessagePrimitiveIf, { user: true, children: [
-      /* @__PURE__ */ jsx27(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx27(UserMessage, {}) }),
-      /* @__PURE__ */ jsx27(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx27(EditComposer, {}) })
+      /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: false, children: /* @__PURE__ */ jsx24(UserMessage, {}) }),
+      /* @__PURE__ */ jsx24(ComposerPrimitiveIf, { editing: true, children: /* @__PURE__ */ jsx24(EditComposer, {}) })
     ] }),
-    /* @__PURE__ */ jsx27(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx27(AssistantMessage, {}) })
+    /* @__PURE__ */ jsx24(MessagePrimitiveIf, { assistant: true, children: /* @__PURE__ */ jsx24(AssistantMessage, {}) })
   ] });
 };
 var ThreadMessage = memo3(
   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
+  (prev, next) => prev.messageIndex === next.messageIndex && prev.components.Message === next.components.Message && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
 );
-var ThreadPrimitiveMessages = ({
+var ThreadPrimitiveMessagesImpl = ({
   components
 }) => {
   const { useThreadMessages } = useThreadContext();
@@ -1777,7 +1768,7 @@ var ThreadPrimitiveMessages = ({
   if (messagesLength === 0) return null;
   return new Array(messagesLength).fill(null).map((_, idx) => {
     const messageIndex = idx;
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx24(
       ThreadMessage,
       {
         messageIndex,
@@ -1787,7 +1778,11 @@ var ThreadPrimitiveMessages = ({
     );
   });
 };
-ThreadPrimitiveMessages.displayName = "ThreadPrimitive.Messages";
+ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
+var ThreadPrimitiveMessages = memo3(
+  ThreadPrimitiveMessagesImpl,
+  (prev, next) => prev.components?.Message === next.components?.Message && prev.components?.UserMessage === next.components?.UserMessage && prev.components?.EditComposer === next.components?.EditComposer && prev.components?.AssistantMessage === next.components?.AssistantMessage
+);
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
 var ThreadPrimitiveScrollToBottom = createActionButton(
@@ -1971,6 +1966,9 @@ var BaseAssistantRuntime = class {
     this._thread = _thread;
     this._unsubscribe = this._thread.subscribe(this.subscriptionHandler);
   }
+  get capabilities() {
+    return this._thread.capabilities;
+  }
   _unsubscribe;
   get thread() {
     return this._thread;
@@ -2043,6 +2041,12 @@ var LocalRuntime = class extends BaseAssistantRuntime {
     );
   }
 };
+var CAPABILITIES = Object.freeze({
+  edit: true,
+  reload: true,
+  cancel: true,
+  copy: true
+});
 var LocalThreadRuntime = class {
   constructor(_configProviders, adapter) {
     this._configProviders = _configProviders;
@@ -2051,6 +2055,7 @@ var LocalThreadRuntime = class {
   _subscriptions = /* @__PURE__ */ new Set();
   abortController = null;
   repository = new MessageRepository();
+  capabilities = CAPABILITIES;
   get messages() {
     return this.repository.getMessages();
   }