@assistant-ui/react 0.5.73 → 0.5.75

package/dist/index.mjs

@@ -605,20 +605,13 @@ var useActionBarReload = () => {
 // src/primitive-hooks/actionBar/useActionBarSpeak.tsx
 import { useCallback as useCallback6 } from "react";
 var useActionBarSpeak = () => {
-  const messageStore = useMessageStore();
-  const editComposerStore = useEditComposerStore();
   const messageRunime = useMessageRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
-  const hasSpeakableContent = useCombinedStore(
-    [messageStore, editComposerStore],
-    (message, c) => {
-      return !c.isEditing && (message.role !== "assistant" || message.status.type !== "running") && message.content.some((c2) => c2.type === "text" && c2.text.length > 0);
-    }
-  );
   const callback = useCallback6(async () => {
-    const utt = messageRunime.speak();
-    messageUtilsStore.getState().addUtterance(utt);
-  }, [messageRunime, messageUtilsStore]);
+    messageRunime.speak();
+  }, [messageRunime]);
+  const hasSpeakableContent = useMessage((m) => {
+    return (m.role !== "assistant" || m.status.type !== "running") && m.content.some((c) => c.type === "text" && c.text.length > 0);
+  });
   if (!hasSpeakableContent) return null;
   return callback;
 };
@@ -626,11 +619,11 @@ var useActionBarSpeak = () => {
 // src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx
 import { useCallback as useCallback7 } from "react";
 var useActionBarStopSpeaking = () => {
-  const messageUtilsStore = useMessageUtilsStore();
-  const isSpeaking = useMessageUtils((u) => u.isSpeaking);
+  const messageRuntime = useMessageRuntime();
+  const isSpeaking = useMessage((u) => u.speech != null);
   const callback = useCallback7(async () => {
-    messageUtilsStore.getState().stopSpeaking();
-  }, [messageUtilsStore]);
+    messageRuntime.stopSpeaking();
+  }, [messageRuntime]);
   if (!isSpeaking) return null;
   return callback;
 };
@@ -673,12 +666,7 @@ var useBranchPickerCount = () => {
 import { useCallback as useCallback10 } from "react";
 var useBranchPickerNext = () => {
   const messageRuntime = useMessageRuntime();
-  const messageStore = useMessageStore();
-  const editComposerStore = useEditComposerStore();
-  const disabled = useCombinedStore(
-    [messageStore, editComposerStore],
-    (m, c) => c.isEditing || m.branchNumber >= m.branchCount
-  );
+  const disabled = useMessage((m) => m.branchNumber >= m.branchCount);
   const callback = useCallback10(() => {
     messageRuntime.switchToBranch({ position: "next" });
   }, [messageRuntime]);
@@ -696,12 +684,7 @@ var useBranchPickerNumber = () => {
 import { useCallback as useCallback11 } from "react";
 var useBranchPickerPrevious = () => {
   const messageRuntime = useMessageRuntime();
-  const messageStore = useMessageStore();
-  const editComposerStore = useEditComposerStore();
-  const disabled = useCombinedStore(
-    [messageStore, editComposerStore],
-    (m, c) => c.isEditing || m.branchNumber <= 1
-  );
+  const disabled = useMessage((m) => m.branchNumber <= 1);
   const callback = useCallback11(() => {
     messageRuntime.switchToBranch({ position: "previous" });
   }, [messageRuntime]);
@@ -820,7 +803,7 @@ var useMessageIf = (props) => {
   const messageUtilsStore = useMessageUtilsStore();
   return useCombinedStore(
     [messageStore, messageUtilsStore],
-    ({ role, attachments, branchCount, isLast }, { isCopied, isHovering, isSpeaking, submittedFeedback }) => {
+    ({ role, attachments, branchCount, isLast, speech }, { isCopied, isHovering, submittedFeedback }) => {
       if (props.hasBranches === true && branchCount < 2) return false;
       if (props.user && role !== "user") return false;
       if (props.assistant && role !== "assistant") return false;
@@ -828,8 +811,8 @@ var useMessageIf = (props) => {
       if (props.lastOrHover === true && !isHovering && !isLast) return false;
       if (props.copied === true && !isCopied) return false;
       if (props.copied === false && isCopied) return false;
-      if (props.speaking === true && !isSpeaking) return false;
-      if (props.speaking === false && isSpeaking) return false;
+      if (props.speaking === true && speech == null) return false;
+      if (props.speaking === false && speech != null) return false;
       if (props.hasAttachments === true && (role !== "user" || !attachments.length))
         return false;
       if (props.hasAttachments === false && role === "user" && !!attachments.length)
@@ -1239,13 +1222,126 @@ var AssistantModalPrimitiveAnchor = forwardRef9(
 );
 AssistantModalPrimitiveAnchor.displayName = "AssistantModalPrimitive.Anchor";
 
+// src/primitives/attachment/index.ts
+var attachment_exports = {};
+__export(attachment_exports, {
+  Name: () => AttachmentPrimitiveName,
+  Remove: () => AttachmentPrimitiveRemove,
+  Root: () => AttachmentPrimitiveRoot,
+  unstable_Thumb: () => AttachmentPrimitiveThumb
+});
+
+// src/primitives/attachment/AttachmentRoot.tsx
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var AttachmentPrimitiveRoot = forwardRef10((props, ref) => {
+  return /* @__PURE__ */ jsx14(Primitive7.div, { ...props, ref });
+});
+AttachmentPrimitiveRoot.displayName = "AttachmentPrimitive.Root";
+
+// src/primitives/attachment/AttachmentThumb.tsx
+import { forwardRef as forwardRef11 } from "react";
+
+// src/context/react/AttachmentContext.ts
+import { createContext as createContext5, useContext as useContext2 } from "react";
+var AttachmentContext = createContext5(
+  null
+);
+function useAttachmentContext(options) {
+  const context = useContext2(AttachmentContext);
+  if (!options?.optional && !context)
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component."
+    );
+  return context;
+}
+function useThreadComposerAttachmentContext(options) {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.source !== "thread-composer")
+    throw new Error(
+      "This component must be used within a thread's ComposerPrimitive.Attachments component."
+    );
+  return context;
+}
+function useEditComposerAttachmentContext(options) {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.source !== "edit-composer")
+    throw new Error(
+      "This component must be used within a messages's ComposerPrimitive.Attachments component."
+    );
+  return context;
+}
+function useMessageAttachmentContext(options) {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.source !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component."
+    );
+  return context;
+}
+function useAttachmentRuntime(options) {
+  const attachmentRuntime = useAttachmentContext(options);
+  if (!attachmentRuntime) return null;
+  return attachmentRuntime.useAttachmentRuntime();
+}
+var { useAttachment } = createContextStoreHook(
+  useAttachmentContext,
+  "useAttachment"
+);
+var { useAttachment: useThreadComposerAttachment } = createContextStoreHook(useThreadComposerAttachmentContext, "useAttachment");
+var { useAttachment: useEditComposerAttachment } = createContextStoreHook(useEditComposerAttachmentContext, "useAttachment");
+var { useAttachment: useMessageAttachment } = createContextStoreHook(
+  useMessageAttachmentContext,
+  "useAttachment"
+);
+
+// src/primitives/attachment/AttachmentThumb.tsx
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { jsxs } from "react/jsx-runtime";
+var AttachmentPrimitiveThumb = forwardRef11(() => {
+  const ext = useAttachment((a) => a.name.split(".").pop());
+  return /* @__PURE__ */ jsxs(Primitive8.div, { children: [
+    ".",
+    ext
+  ] });
+});
+AttachmentPrimitiveThumb.displayName = "AttachmentPrimitive.Thumb";
+
+// src/primitives/attachment/AttachmentName.tsx
+import { Fragment, jsx as jsx15 } from "react/jsx-runtime";
+var AttachmentPrimitiveName = () => {
+  const name = useAttachment((a) => a.name);
+  return /* @__PURE__ */ jsx15(Fragment, { children: name });
+};
+AttachmentPrimitiveName.displayName = "AttachmentPrimitive.Name";
+
+// src/primitive-hooks/attachment/useAttachmentRemove.ts
+import { useCallback as useCallback17 } from "react";
+var useAttachmentRemove = () => {
+  const attachmentRuntime = useAttachmentRuntime();
+  const handleRemoveAttachment = useCallback17(() => {
+    attachmentRuntime.remove();
+  }, [attachmentRuntime]);
+  return handleRemoveAttachment;
+};
+
+// src/primitives/attachment/AttachmentRemove.tsx
+var AttachmentPrimitiveRemove = createActionButton(
+  "AttachmentPrimitive.Remove",
+  useAttachmentRemove
+);
+
 // src/primitives/branchPicker/index.ts
 var branchPicker_exports = {};
 __export(branchPicker_exports, {
   Count: () => BranchPickerPrimitiveCount,
   Next: () => BranchPickerPrimitiveNext,
   Number: () => BranchPickerPrimitiveNumber,
-  Previous: () => BranchPickerPrevious,
+  Previous: () => BranchPickerPrimitivePrevious,
   Root: () => BranchPickerPrimitiveRoot
 });
 
@@ -1256,30 +1352,30 @@ var BranchPickerPrimitiveNext = createActionButton(
 );
 
 // src/primitives/branchPicker/BranchPickerPrevious.tsx
-var BranchPickerPrevious = createActionButton(
+var BranchPickerPrimitivePrevious = createActionButton(
   "BranchPickerPrimitive.Previous",
   useBranchPickerPrevious
 );
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
 var BranchPickerPrimitiveCount = () => {
   const branchCount = useBranchPickerCount();
-  return /* @__PURE__ */ jsx14(Fragment, { children: branchCount });
+  return /* @__PURE__ */ jsx16(Fragment2, { children: branchCount });
 };
 BranchPickerPrimitiveCount.displayName = "BranchPickerPrimitive.Count";
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment2, jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17 } from "react/jsx-runtime";
 var BranchPickerPrimitiveNumber = () => {
   const branchNumber = useBranchPickerNumber();
-  return /* @__PURE__ */ jsx15(Fragment2, { children: branchNumber });
+  return /* @__PURE__ */ jsx17(Fragment3, { children: branchNumber });
 };
 BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef14 } from "react";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef16 } from "react";
 
 // src/primitives/message/index.ts
 var message_exports = {};
@@ -1292,17 +1388,17 @@ __export(message_exports, {
 });
 
 // src/primitives/message/MessageRoot.tsx
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef10,
-  useCallback as useCallback18
+  forwardRef as forwardRef12,
+  useCallback as useCallback19
 } from "react";
 
 // src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback17, useRef } from "react";
+import { useCallback as useCallback18, useRef } from "react";
 var useManagedRef = (callback) => {
   const cleanupRef = useRef();
-  const ref = useCallback17(
+  const ref = useCallback18(
     (el) => {
       if (cleanupRef.current) {
         cleanupRef.current();
@@ -1318,10 +1414,10 @@ var useManagedRef = (callback) => {
 
 // src/primitives/message/MessageRoot.tsx
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var useIsHoveringRef = () => {
   const messageUtilsStore = useMessageUtilsStore();
-  const callbackRef = useCallback18(
+  const callbackRef = useCallback19(
     (el) => {
       const setIsHovering = messageUtilsStore.getState().setIsHovering;
       const handleMouseEnter = () => {
@@ -1342,10 +1438,10 @@ var useIsHoveringRef = () => {
   );
   return useManagedRef(callbackRef);
 };
-var MessagePrimitiveRoot = forwardRef10((props, forwardRef33) => {
+var MessagePrimitiveRoot = forwardRef12((props, forwardRef35) => {
   const isHoveringRef = useIsHoveringRef();
-  const ref = useComposedRefs(forwardRef33, isHoveringRef);
-  return /* @__PURE__ */ jsx16(Primitive7.div, { ...props, ref });
+  const ref = useComposedRefs(forwardRef35, isHoveringRef);
+  return /* @__PURE__ */ jsx18(Primitive9.div, { ...props, ref });
 });
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
 
@@ -1365,7 +1461,7 @@ import { memo as memo2, useMemo as useMemo6 } from "react";
 // src/context/providers/ContentPartRuntimeProvider.tsx
 import { useEffect as useEffect8, useState as useState5 } from "react";
 import { create as create6 } from "zustand";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var useContentPartRuntimeStore = (runtime) => {
   const [store] = useState5(() => create6(() => runtime));
   useEffect8(() => {
@@ -1391,12 +1487,12 @@ var ContentPartRuntimeProvider = ({
   const [context] = useState5(() => {
     return { useContentPartRuntime: useContentPartRuntime2, useContentPart: useContentPart2 };
   });
-  return /* @__PURE__ */ jsx17(ContentPartContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx19(ContentPartContext.Provider, { value: context, children });
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
 import {
-  forwardRef as forwardRef12
+  forwardRef as forwardRef14
 } from "react";
 
 // src/utils/smooth/useSmooth.tsx
@@ -1405,14 +1501,14 @@ import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-
 
 // src/utils/smooth/SmoothContext.tsx
 import {
-  createContext as createContext5,
-  forwardRef as forwardRef11,
-  useContext as useContext2,
+  createContext as createContext6,
+  forwardRef as forwardRef13,
+  useContext as useContext3,
   useState as useState6
 } from "react";
 import { create as create7 } from "zustand";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var SmoothContext = createContext5(null);
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SmoothContext = createContext6(null);
 var makeSmoothContext = (initialState) => {
   const useSmoothStatus2 = create7(() => initialState);
   return { useSmoothStatus: useSmoothStatus2 };
@@ -1424,17 +1520,17 @@ var SmoothContextProvider = ({ children }) => {
     () => makeSmoothContext(contentPartStore.getState().status)
   );
   if (outer) return children;
-  return /* @__PURE__ */ jsx18(SmoothContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx20(SmoothContext.Provider, { value: context, children });
 };
 var withSmoothContextProvider = (Component) => {
-  const Wrapped = forwardRef11((props, ref) => {
-    return /* @__PURE__ */ jsx18(SmoothContextProvider, { children: /* @__PURE__ */ jsx18(Component, { ...props, ref }) });
+  const Wrapped = forwardRef13((props, ref) => {
+    return /* @__PURE__ */ jsx20(SmoothContextProvider, { children: /* @__PURE__ */ jsx20(Component, { ...props, ref }) });
   });
   Wrapped.displayName = Component.displayName;
   return Wrapped;
 };
 function useSmoothContext(options) {
-  const context = useContext2(SmoothContext);
+  const context = useContext3(SmoothContext);
   if (!options?.optional && !context)
     throw new Error(
       "This component must be used within a SmoothContextProvider."
@@ -1554,20 +1650,20 @@ var useSmooth = (state, smooth = false) => {
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var ContentPartPrimitiveText = forwardRef12(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ContentPartPrimitiveText = forwardRef14(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
   const { text, status } = useSmooth(useContentPartText(), smooth);
-  return /* @__PURE__ */ jsx19(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ jsx21(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
 // src/primitives/contentPart/ContentPartImage.tsx
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ContentPartPrimitiveImage = forwardRef13((props, forwardedRef) => {
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var ContentPartPrimitiveImage = forwardRef15((props, forwardedRef) => {
   const { image } = useContentPartImage();
-  return /* @__PURE__ */ jsx20(Primitive8.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx22(Primitive10.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
@@ -2070,6 +2166,16 @@ var MessageRuntimeImpl = class {
     if (!state) throw new Error("Message is not available");
     return this._threadBinding.getState().speak(state.id);
   }
+  stopSpeaking() {
+    const state = this._core.getState();
+    if (!state) throw new Error("Message is not available");
+    const thread = this._threadBinding.getState();
+    if (thread.speech?.messageId === state.id) {
+      this._threadBinding.getState().stopSpeaking();
+    } else {
+      throw new Error("Message is not being spoken");
+    }
+  }
   submitFeedback({ type }) {
     const state = this._core.getState();
     if (!state) throw new Error("Message is not available");
@@ -2136,22 +2242,22 @@ var MessageRuntimeImpl = class {
 };
 
 // src/primitives/message/MessageContent.tsx
-import { jsx as jsx21, jsxs } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs2 } from "react/jsx-runtime";
 var ToolUIDisplay = ({
   UI,
   ...props
 }) => {
   const Render = useToolUIs((s) => s.getToolUI(props.toolName)) ?? UI;
   if (!Render) return null;
-  return /* @__PURE__ */ jsx21(Render, { ...props });
+  return /* @__PURE__ */ jsx23(Render, { ...props });
 };
 var defaultComponents = {
-  Text: () => /* @__PURE__ */ jsxs("p", { style: { whiteSpace: "pre-line" }, children: [
-    /* @__PURE__ */ jsx21(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ jsx21(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx21("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
+  Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
+    /* @__PURE__ */ jsx23(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ jsx23(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx23("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
-  Image: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveImage, {}),
-  UI: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveDisplay, {})
+  Image: () => /* @__PURE__ */ jsx23(ContentPartPrimitiveImage, {}),
+  UI: () => /* @__PURE__ */ jsx23(ContentPartPrimitiveDisplay, {})
 };
 var MessageContentPartComponent = ({
   components: {
@@ -2171,17 +2277,17 @@ var MessageContentPartComponent = ({
       if (part.status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
       if (part.part === EMPTY_CONTENT && !!Empty) {
-        return /* @__PURE__ */ jsx21(Empty, { status: part.status });
+        return /* @__PURE__ */ jsx23(Empty, { status: part.status });
       }
-      return /* @__PURE__ */ jsx21(Text2, { ...part, part });
+      return /* @__PURE__ */ jsx23(Text2, { ...part, part });
     case "image":
       if (part.status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx21(Image2, { ...part, part });
+      return /* @__PURE__ */ jsx23(Image2, { ...part, part });
     case "ui":
       if (part.status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx21(UI, { ...part, part });
+      return /* @__PURE__ */ jsx23(UI, { ...part, part });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback2;
       const addResult = (result) => threadRuntime.addToolResult({
@@ -2190,7 +2296,7 @@ var MessageContentPartComponent = ({
         toolCallId: part.toolCallId,
         result
       });
-      return /* @__PURE__ */ jsx21(ToolUIDisplay, { ...part, part, UI: Tool, addResult });
+      return /* @__PURE__ */ jsx23(ToolUIDisplay, { ...part, part, UI: Tool, addResult });
     }
     default:
       const unhandledType = type;
@@ -2206,7 +2312,7 @@ var MessageContentPartImpl = ({
     () => messageRuntime.getContentPartByIndex(partIndex),
     [messageRuntime, partIndex]
   );
-  return /* @__PURE__ */ jsx21(ContentPartRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx21(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ jsx23(ContentPartRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx23(MessageContentPartComponent, { components }) });
 };
 var MessageContentPart = memo2(
   MessageContentPartImpl,
@@ -2216,7 +2322,7 @@ var MessagePrimitiveContent = ({
   components
 }) => {
   const contentLength = useMessage((s) => s.content.length) || 1;
-  return Array.from({ length: contentLength }, (_, index) => /* @__PURE__ */ jsx21(MessageContentPart, { partIndex: index, components }, index));
+  return Array.from({ length: contentLength }, (_, index) => /* @__PURE__ */ jsx23(MessageContentPart, { partIndex: index, components }, index));
 };
 MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
@@ -2229,62 +2335,6 @@ MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
 // src/primitives/message/MessageAttachments.tsx
 import { memo as memo3, useMemo as useMemo8 } from "react";
 
-// src/context/react/AttachmentContext.ts
-import { createContext as createContext6, useContext as useContext3 } from "react";
-var AttachmentContext = createContext6(
-  null
-);
-function useAttachmentContext(options) {
-  const context = useContext3(AttachmentContext);
-  if (!options?.optional && !context)
-    throw new Error(
-      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component."
-    );
-  return context;
-}
-function useThreadComposerAttachmentContext(options) {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.source !== "thread-composer")
-    throw new Error(
-      "This component must be used within a thread's ComposerPrimitive.Attachments component."
-    );
-  return context;
-}
-function useEditComposerAttachmentContext(options) {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.source !== "edit-composer")
-    throw new Error(
-      "This component must be used within a messages's ComposerPrimitive.Attachments component."
-    );
-  return context;
-}
-function useMessageAttachmentContext(options) {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.source !== "message")
-    throw new Error(
-      "This component must be used within a MessagePrimitive.Attachments component."
-    );
-  return context;
-}
-function useAttachmentRuntime(options) {
-  const attachmentRuntime = useAttachmentContext(options);
-  if (!attachmentRuntime) return null;
-  return attachmentRuntime.useAttachmentRuntime();
-}
-var { useAttachment } = createContextStoreHook(
-  useAttachmentContext,
-  "useAttachment"
-);
-var { useAttachment: useThreadComposerAttachment } = createContextStoreHook(useThreadComposerAttachmentContext, "useAttachment");
-var { useAttachment: useEditComposerAttachment } = createContextStoreHook(useEditComposerAttachmentContext, "useAttachment");
-var { useAttachment: useMessageAttachment } = createContextStoreHook(
-  useMessageAttachmentContext,
-  "useAttachment"
-);
-
 // src/context/providers/AttachmentRuntimeProvider.tsx
 import {
   useEffect as useEffect10,
@@ -2292,7 +2342,7 @@ import {
   useState as useState8
 } from "react";
 import { create as create8 } from "zustand";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var useAttachmentRuntimeStore = (runtime) => {
   const [store] = useState8(() => create8(() => runtime));
   useEffect10(() => {
@@ -2323,11 +2373,11 @@ var AttachmentRuntimeProvider = ({
       useAttachment: useAttachment2
     };
   }, [useAttachmentRuntime2, useAttachment2]);
-  return /* @__PURE__ */ jsx22(AttachmentContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx24(AttachmentContext.Provider, { value: context, children });
 };
 
 // src/primitives/message/MessageAttachments.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var getComponent = (components, attachment) => {
   const type = attachment.type;
   switch (type) {
@@ -2347,7 +2397,7 @@ var AttachmentComponent = ({ components }) => {
     (a) => getComponent(components, a.attachment)
   );
   if (!Component) return null;
-  return /* @__PURE__ */ jsx23(Component, {});
+  return /* @__PURE__ */ jsx25(Component, {});
 };
 var MessageAttachmentImpl = ({ components, attachmentIndex }) => {
   const messageRuntime = useMessageRuntime();
@@ -2355,7 +2405,7 @@ var MessageAttachmentImpl = ({ components, attachmentIndex }) => {
     () => messageRuntime.getAttachmentByIndex(attachmentIndex),
     [messageRuntime, attachmentIndex]
   );
-  return /* @__PURE__ */ jsx23(AttachmentRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx23(AttachmentComponent, { components }) });
+  return /* @__PURE__ */ jsx25(AttachmentRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx25(AttachmentComponent, { components }) });
 };
 var MessageAttachment = memo3(
   MessageAttachmentImpl,
@@ -2366,7 +2416,7 @@ var MessagePrimitiveAttachments = ({ components }) => {
     if (message.role !== "user") return 0;
     return message.attachments.length;
   });
-  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx23(
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx25(
     MessageAttachment,
     {
       attachmentIndex: index,
@@ -2378,9 +2428,9 @@ var MessagePrimitiveAttachments = ({ components }) => {
 MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-var BranchPickerPrimitiveRoot = forwardRef14(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx24(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx24(Primitive9.div, { ...rest, ref }) });
+import { jsx as jsx26 } from "react/jsx-runtime";
+var BranchPickerPrimitiveRoot = forwardRef16(({ hideWhenSingleBranch, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx26(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx26(Primitive11.div, { ...rest, ref }) });
 });
 BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
@@ -2398,20 +2448,20 @@ __export(composer_exports, {
 
 // src/primitives/composer/ComposerRoot.tsx
 import { composeEventHandlers as composeEventHandlers8 } from "@radix-ui/primitive";
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import {
-  forwardRef as forwardRef15
+  forwardRef as forwardRef17
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var ComposerPrimitiveRoot = forwardRef15(({ onSubmit, ...rest }, forwardedRef) => {
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ComposerPrimitiveRoot = forwardRef17(({ onSubmit, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const handleSubmit = (e) => {
     e.preventDefault();
     if (!send) return;
     send();
   };
-  return /* @__PURE__ */ jsx25(
-    Primitive10.form,
+  return /* @__PURE__ */ jsx27(
+    Primitive12.form,
     {
       ...rest,
       ref: forwardedRef,
@@ -2426,15 +2476,15 @@ import { composeEventHandlers as composeEventHandlers9 } from "@radix-ui/primiti
 import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import {
-  forwardRef as forwardRef16,
-  useCallback as useCallback19,
+  forwardRef as forwardRef18,
+  useCallback as useCallback20,
   useEffect as useEffect11,
   useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown as useEscapeKeydown2 } from "@radix-ui/react-use-escape-keydown";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var ComposerPrimitiveInput = forwardRef16(
+import { jsx as jsx28 } from "react/jsx-runtime";
+var ComposerPrimitiveInput = forwardRef18(
   ({
     autoFocus = false,
     asChild,
@@ -2475,7 +2525,7 @@ var ComposerPrimitiveInput = forwardRef16(
       }
     };
     const autoFocusEnabled = autoFocus && !isDisabled;
-    const focus = useCallback19(() => {
+    const focus = useCallback20(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -2490,7 +2540,7 @@ var ComposerPrimitiveInput = forwardRef16(
         focus();
       }
     });
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx28(
       Component,
       {
         name: "input",
@@ -2530,7 +2580,7 @@ var ComposerPrimitiveAddAttachment = createActionButton(
 
 // src/primitives/composer/ComposerAttachments.tsx
 import { memo as memo4, useMemo as useMemo9 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var getComponent2 = (components, attachment) => {
   const type = attachment.type;
   switch (type) {
@@ -2550,7 +2600,7 @@ var AttachmentComponent2 = ({ components }) => {
     (a) => getComponent2(components, a)
   );
   if (!Component) return null;
-  return /* @__PURE__ */ jsx27(Component, {});
+  return /* @__PURE__ */ jsx29(Component, {});
 };
 var ComposerAttachmentImpl = ({ components, attachmentIndex }) => {
   const composerRuntime = useComposerRuntime();
@@ -2558,7 +2608,7 @@ var ComposerAttachmentImpl = ({ components, attachmentIndex }) => {
     () => composerRuntime.getAttachmentByIndex(attachmentIndex),
     [composerRuntime, attachmentIndex]
   );
-  return /* @__PURE__ */ jsx27(AttachmentRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx27(AttachmentComponent2, { components }) });
+  return /* @__PURE__ */ jsx29(AttachmentRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx29(AttachmentComponent2, { components }) });
 };
 var ComposerAttachment = memo4(
   ComposerAttachmentImpl,
@@ -2566,7 +2616,7 @@ var ComposerAttachment = memo4(
 );
 var ComposerPrimitiveAttachments = ({ components }) => {
   const attachmentsCount = useComposer((s) => s.attachments.length);
-  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx27(
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx29(
     ComposerAttachment,
     {
       attachmentIndex: index,
@@ -2609,11 +2659,11 @@ __export(thread_exports, {
 });
 
 // src/primitives/thread/ThreadRoot.tsx
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var ThreadPrimitiveRoot = forwardRef17((props, ref) => {
-  return /* @__PURE__ */ jsx28(Primitive11.div, { ...props, ref });
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var ThreadPrimitiveRoot = forwardRef19((props, ref) => {
+  return /* @__PURE__ */ jsx30(Primitive13.div, { ...props, ref });
 });
 ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
@@ -2638,8 +2688,8 @@ ThreadPrimitiveIf.displayName = "ThreadPrimitive.If";
 
 // src/primitives/thread/ThreadViewport.tsx
 import { useComposedRefs as useComposedRefs4 } from "@radix-ui/react-compose-refs";
-import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef18 } from "react";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef20 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
@@ -2647,10 +2697,10 @@ import { useRef as useRef4 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
-import { useCallback as useCallback20 } from "react";
+import { useCallback as useCallback21 } from "react";
 var useOnResizeContent = (callback) => {
   const callbackRef = useCallbackRef3(callback);
-  const refCallback = useCallback20(
+  const refCallback = useCallback21(
     (el) => {
       const resizeObserver = new ResizeObserver(() => {
         callbackRef();
@@ -2750,13 +2800,13 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
-var ThreadPrimitiveViewport = forwardRef18(({ autoScroll, children, ...rest }, forwardedRef) => {
+import { jsx as jsx31 } from "react/jsx-runtime";
+var ThreadPrimitiveViewport = forwardRef20(({ autoScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = useComposedRefs4(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ jsx29(Primitive12.div, { ...rest, ref, children });
+  return /* @__PURE__ */ jsx31(Primitive14.div, { ...rest, ref, children });
 });
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
@@ -2770,7 +2820,6 @@ import { create as create10 } from "zustand";
 // src/context/stores/MessageUtils.ts
 import { create as create9 } from "zustand";
 var makeMessageUtilsStore = () => create9((set) => {
-  let utterance = null;
   return {
     isCopied: false,
     setIsCopied: (value) => {
@@ -2780,17 +2829,6 @@ var makeMessageUtilsStore = () => create9((set) => {
     setIsHovering: (value) => {
       set({ isHovering: value });
     },
-    isSpeaking: false,
-    stopSpeaking: () => {
-      utterance?.cancel();
-    },
-    addUtterance: (utt) => {
-      utterance = utt;
-      set({ isSpeaking: true });
-      utt.onEnd(() => {
-        set({ isSpeaking: false });
-      });
-    },
     submittedFeedback: null,
     setSubmittedFeedback: (feedback) => {
       set({ submittedFeedback: feedback });
@@ -2799,7 +2837,7 @@ var makeMessageUtilsStore = () => create9((set) => {
 });
 
 // src/context/providers/MessageRuntimeProvider.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var useMessageRuntimeStore = (runtime) => {
   const [store] = useState9(() => create10(() => runtime));
   useEffect13(() => {
@@ -2841,11 +2879,11 @@ var MessageRuntimeProvider = ({
   const [context] = useState9(() => {
     return { useMessageRuntime: useMessageRuntime2, useMessage: useMessage2, useMessageUtils: useMessageUtils2, useEditComposer: useEditComposer2 };
   });
-  return /* @__PURE__ */ jsx30(MessageContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx32(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var isComponentsSame = (prev, next) => {
   return prev.Message === next.Message && prev.EditComposer === next.EditComposer && prev.UserEditComposer === next.UserEditComposer && prev.AssistantEditComposer === next.AssistantEditComposer && prev.SystemEditComposer === next.SystemEditComposer && prev.UserMessage === next.UserMessage && prev.AssistantMessage === next.AssistantMessage && prev.SystemMessage === next.SystemMessage;
 };
@@ -2881,7 +2919,7 @@ var ThreadMessageComponent = ({
   const role = useMessage((m) => m.role);
   const isEditing = useEditComposer((c) => c.isEditing);
   const Component = getComponent3(components, role, isEditing);
-  return /* @__PURE__ */ jsx31(Component, {});
+  return /* @__PURE__ */ jsx33(Component, {});
 };
 var ThreadMessageImpl = ({
   messageIndex,
@@ -2892,7 +2930,7 @@ var ThreadMessageImpl = ({
     () => threadRuntime.getMesssageByIndex(messageIndex),
     [threadRuntime, messageIndex]
   );
-  return /* @__PURE__ */ jsx31(MessageRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx31(ThreadMessageComponent, { components }) });
+  return /* @__PURE__ */ jsx33(MessageRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx33(ThreadMessageComponent, { components }) });
 };
 var ThreadMessage = memo5(
   ThreadMessageImpl,
@@ -2903,7 +2941,7 @@ var ThreadPrimitiveMessagesImpl = ({
 }) => {
   const messagesLength = useThread((t) => t.messages.length);
   if (messagesLength === 0) return null;
-  return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ jsx31(ThreadMessage, { messageIndex: index, components }, index));
+  return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ jsx33(ThreadMessage, { messageIndex: index, components }, index));
 };
 ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
 var ThreadPrimitiveMessages = memo5(
@@ -3370,17 +3408,17 @@ var MessageRepository = class {
 };
 
 // src/ui/base/tooltip-icon-button.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 
 // src/ui/base/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 // src/ui/utils/withDefaults.tsx
 import {
-  forwardRef as forwardRef19
+  forwardRef as forwardRef21
 } from "react";
 import classNames from "classnames";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var withDefaultProps = ({
   className,
   ...defaultProps
@@ -3393,10 +3431,10 @@ var withDefaultProps = ({
 };
 var withDefaults = (Component, defaultProps) => {
   const getProps = withDefaultProps(defaultProps);
-  const WithDefaults = forwardRef19(
+  const WithDefaults = forwardRef21(
     (props, ref) => {
       const ComponentAsAny = Component;
-      return /* @__PURE__ */ jsx32(ComponentAsAny, { ...getProps(props), ref });
+      return /* @__PURE__ */ jsx34(ComponentAsAny, { ...getProps(props), ref });
     }
   );
   WithDefaults.displayName = "withDefaults(" + (typeof Component === "string" ? Component : Component.displayName) + ")";
@@ -3404,9 +3442,9 @@ var withDefaults = (Component, defaultProps) => {
 };
 
 // src/ui/base/tooltip.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Tooltip = (props) => {
-  return /* @__PURE__ */ jsx33(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx33(TooltipPrimitive.Root, { ...props }) });
+  return /* @__PURE__ */ jsx35(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx35(TooltipPrimitive.Root, { ...props }) });
 };
 Tooltip.displayName = "Tooltip";
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -3418,9 +3456,9 @@ TooltipContent.displayName = "TooltipContent";
 
 // src/ui/base/button.tsx
 import { cva } from "class-variance-authority";
-import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var buttonVariants = cva("aui-button", {
   variants: {
     variant: {
@@ -3438,10 +3476,10 @@ var buttonVariants = cva("aui-button", {
     size: "default"
   }
 });
-var Button = forwardRef20(
+var Button = forwardRef22(
   ({ className, variant, size, ...props }, ref) => {
-    return /* @__PURE__ */ jsx34(
-      Primitive13.button,
+    return /* @__PURE__ */ jsx36(
+      Primitive15.button,
       {
         className: buttonVariants({ variant, size, className }),
         ...props,
@@ -3453,14 +3491,14 @@ var Button = forwardRef20(
 Button.displayName = "Button";
 
 // src/ui/base/tooltip-icon-button.tsx
-import { jsx as jsx35, jsxs as jsxs2 } from "react/jsx-runtime";
-var TooltipIconButton = forwardRef21(({ children, tooltip, side = "bottom", ...rest }, ref) => {
-  return /* @__PURE__ */ jsxs2(Tooltip, { children: [
-    /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
+import { jsx as jsx37, jsxs as jsxs3 } from "react/jsx-runtime";
+var TooltipIconButton = forwardRef23(({ children, tooltip, side = "bottom", ...rest }, ref) => {
+  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+    /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
       children,
-      /* @__PURE__ */ jsx35("span", { className: "aui-sr-only", children: tooltip })
+      /* @__PURE__ */ jsx37("span", { className: "aui-sr-only", children: tooltip })
     ] }) }),
-    /* @__PURE__ */ jsx35(TooltipContent, { side, children: tooltip })
+    /* @__PURE__ */ jsx37(TooltipContent, { side, children: tooltip })
   ] });
 });
 TooltipIconButton.displayName = "TooltipIconButton";
@@ -3524,7 +3562,8 @@ var getThreadState = (runtime) => {
     isRunning: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running",
     messages: runtime.messages,
     suggestions: runtime.suggestions,
-    extras: runtime.extras
+    extras: runtime.extras,
+    speech: runtime.speech
   });
 };
 var ThreadRuntimeImpl = class {
@@ -3571,6 +3610,12 @@ var ThreadRuntimeImpl = class {
   get messages() {
     return this._threadBinding.getState().messages;
   }
+  /**
+   * @deprecated Use `getState().speechState` instead. This will be removed in 0.6.0.
+   */
+  get speech() {
+    return this._threadBinding.getState().speech;
+  }
   unstable_getCore() {
     return this._threadBinding.getState();
   }
@@ -3631,15 +3676,18 @@ var ThreadRuntimeImpl = class {
   switchToBranch(branchId) {
     return this._threadBinding.getState().switchToBranch(branchId);
   }
-  // /**
-  //  * @deprecated Use `getMesssageById(id).speak()` instead. This will be removed in 0.6.0.
-  //  */
+  /**
+   * @deprecated Use `getMesssageById(id).speak()` instead. This will be removed in 0.6.0.
+   */
   speak(messageId) {
     return this._threadBinding.getState().speak(messageId);
   }
-  // /**
-  //  * @deprecated Use `getMesssageById(id).submitFeedback({ type })` instead. This will be removed in 0.6.0.
-  //  */
+  stopSpeaking() {
+    return this._threadBinding.getState().stopSpeaking();
+  }
+  /**
+   * @deprecated Use `getMesssageById(id).submitFeedback({ type })` instead. This will be removed in 0.6.0.
+   */
   submitFeedback(options) {
     return this._threadBinding.getState().submitFeedback(options);
   }
@@ -3666,7 +3714,7 @@ var ThreadRuntimeImpl = class {
     return new MessageRuntimeImpl(
       new ShallowMemoizeSubject({
         getState: () => {
-          const messages2 = this.getState().messages;
+          const { messages: messages2, speech: speechState } = this.getState();
           const message = messages2[idx];
           if (!message) return SKIP_UPDATE;
           const branches = this._threadBinding.getState().getBranches(message.id);
@@ -3677,7 +3725,8 @@ var ThreadRuntimeImpl = class {
             parentId: messages2[idx - 1]?.id ?? null,
             branches,
             branchNumber: branches.indexOf(message.id) + 1,
-            branchCount: branches.length
+            branchCount: branches.length,
+            speech: speechState?.messageId === message.id ? speechState : null
           };
         },
         subscribe: (callback) => this._threadBinding.subscribe(callback)
@@ -4317,24 +4366,35 @@ var LocalThreadRuntimeCore = class {
       this.performRoundtrip(parentId, message);
     }
   }
-  // TODO lift utterance state to thread runtime
-  _utterance;
+  // TODO speech runtime?
+  _stopSpeaking;
+  speech = null;
   speak(messageId) {
     const adapter = this.options.adapters?.speech;
     if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
-    if (this._utterance) {
-      this._utterance.cancel();
-      this._utterance = void 0;
-    }
+    this._stopSpeaking?.();
     const utterance = adapter.speak(message);
-    utterance.onEnd(() => {
-      if (this._utterance === utterance) {
-        this._utterance = void 0;
+    const unsub = utterance.subscribe(() => {
+      if (utterance.status.type === "ended") {
+        this._stopSpeaking = void 0;
+        this.speech = null;
+      } else {
+        this.speech = { messageId, status: utterance.status };
       }
+      this.notifySubscribers();
     });
-    this._utterance = utterance;
-    return this._utterance;
+    this.speech = { messageId, status: utterance.status };
+    this._stopSpeaking = () => {
+      utterance.cancel();
+      unsub();
+      this.speech = null;
+      this._stopSpeaking = void 0;
+    };
+  }
+  stopSpeaking() {
+    if (!this._stopSpeaking) throw new Error("No message is being spoken");
+    this._stopSpeaking();
   }
   submitFeedback({ messageId, type }) {
     const adapter = this.options.adapters?.feedback;
@@ -4693,11 +4753,38 @@ var ExternalStoreThreadRuntimeCore = class {
       throw new Error("Runtime does not support tool results.");
     this._store.onAddToolResult(options);
   }
+  // TODO speech runtime?
+  _stopSpeaking;
+  speech = null;
   speak(messageId) {
-    if (!this._store.onSpeak)
-      throw new Error("Runtime does not support speaking.");
+    let adapter = this.store.adapters?.speech;
+    if (!adapter && this.store.onSpeak) {
+      adapter = { speak: this.store.onSpeak };
+    }
+    if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
-    return this._store.onSpeak(message);
+    this._stopSpeaking?.();
+    const utterance = adapter.speak(message);
+    const unsub = utterance.subscribe(() => {
+      if (utterance.status.type === "ended") {
+        this._stopSpeaking = void 0;
+        this.speech = null;
+      } else {
+        this.speech = { messageId, status: utterance.status };
+      }
+      this.notifySubscribers();
+    });
+    this.speech = { messageId, status: utterance.status };
+    this._stopSpeaking = () => {
+      utterance.cancel();
+      unsub();
+      this.speech = null;
+      this._stopSpeaking = void 0;
+    };
+  }
+  stopSpeaking() {
+    if (!this._stopSpeaking) throw new Error("No message is being spoken");
+    this._stopSpeaking();
   }
   submitFeedback({ messageId, type }) {
     const adapter = this._store.adapters?.feedback;
@@ -4964,11 +5051,11 @@ var WebSpeechSynthesisAdapter = class {
   speak(message) {
     const text = getThreadMessageText(message);
     const utterance = new SpeechSynthesisUtterance(text);
-    const endHandlers = /* @__PURE__ */ new Set();
+    const subscribers = /* @__PURE__ */ new Set();
     const handleEnd = (reason, error) => {
       if (res.status.type === "ended") return;
       res.status = { type: "ended", reason, error };
-      endHandlers.forEach((handler) => handler());
+      subscribers.forEach((handler) => handler());
     };
     utterance.addEventListener("end", () => handleEnd("finished"));
     utterance.addEventListener("error", (e) => handleEnd("error", e.error));
@@ -4979,7 +5066,7 @@ var WebSpeechSynthesisAdapter = class {
         window.speechSynthesis.cancel();
         handleEnd("cancelled");
       },
-      onEnd: (callback) => {
+      subscribe: (callback) => {
         if (res.status.type === "ended") {
           let cancelled = false;
           queueMicrotask(() => {
@@ -4989,9 +5076,9 @@ var WebSpeechSynthesisAdapter = class {
             cancelled = true;
           };
         } else {
-          endHandlers.add(callback);
+          subscribers.add(callback);
           return () => {
-            endHandlers.delete(callback);
+            subscribers.delete(callback);
           };
         }
       }
@@ -5154,7 +5241,7 @@ import {
   createContext as createContext7,
   useContext as useContext4
 } from "react";
-import { Fragment as Fragment3, jsx as jsx36 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx38 } from "react/jsx-runtime";
 var ThreadConfigContext = createContext7({});
 var useThreadConfig = () => {
   return useContext4(ThreadConfigContext);
@@ -5164,19 +5251,19 @@ var ThreadConfigProvider = ({
   config
 }) => {
   const hasAssistant = !!useAssistantRuntime({ optional: true });
-  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx36(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx36(Fragment3, { children });
+  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx38(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx38(Fragment4, { children });
   if (!config?.runtime) return configProvider;
   if (hasAssistant) {
     throw new Error(
       "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed."
     );
   }
-  return /* @__PURE__ */ jsx36(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
+  return /* @__PURE__ */ jsx38(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
 };
 ThreadConfigProvider.displayName = "ThreadConfigProvider";
 
 // src/ui/assistant-action-bar.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import {
   AudioLinesIcon,
   CheckIcon,
@@ -5186,7 +5273,7 @@ import {
   ThumbsDownIcon,
   ThumbsUpIcon
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs4 } from "react/jsx-runtime";
 var useAllowCopy = (ensureCapability = false) => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
   const copySupported = useThread((t) => t.capabilities.unstable_copy);
@@ -5220,18 +5307,18 @@ var AssistantActionBar = () => {
   const allowFeedbackNegative = useAllowFeedbackNegative(true);
   if (!allowCopy && !allowReload && !allowSpeak && !allowFeedbackPositive && !allowFeedbackNegative)
     return null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     AssistantActionBarRoot,
     {
       hideWhenRunning: true,
       autohide: "not-last",
       autohideFloat: "single-branch",
       children: [
-        allowSpeak && /* @__PURE__ */ jsx37(AssistantActionBarSpeechControl, {}),
-        allowCopy && /* @__PURE__ */ jsx37(AssistantActionBarCopy, {}),
-        allowReload && /* @__PURE__ */ jsx37(AssistantActionBarReload, {}),
-        allowFeedbackPositive && /* @__PURE__ */ jsx37(AssistantActionBarFeedbackPositive, {}),
-        allowFeedbackNegative && /* @__PURE__ */ jsx37(AssistantActionBarFeedbackNegative, {})
+        allowSpeak && /* @__PURE__ */ jsx39(AssistantActionBarSpeechControl, {}),
+        allowCopy && /* @__PURE__ */ jsx39(AssistantActionBarCopy, {}),
+        allowReload && /* @__PURE__ */ jsx39(AssistantActionBarReload, {}),
+        allowFeedbackPositive && /* @__PURE__ */ jsx39(AssistantActionBarFeedbackPositive, {}),
+        allowFeedbackNegative && /* @__PURE__ */ jsx39(AssistantActionBarFeedbackNegative, {})
       ]
     }
   );
@@ -5241,35 +5328,35 @@ var AssistantActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-assistant-action-bar-root"
 });
 AssistantActionBarRoot.displayName = "AssistantActionBarRoot";
-var AssistantActionBarCopy = forwardRef22((props, ref) => {
+var AssistantActionBarCopy = forwardRef24(({ copiedDuration, ...props }, ref) => {
   const {
     strings: {
       assistantMessage: { copy: { tooltip = "Copy" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx37(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx37(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx37(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx37(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx37(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx37(CopyIcon, {}) })
+  return /* @__PURE__ */ jsx39(actionBar_exports.Copy, { copiedDuration, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsx39(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx39(CheckIcon, {}) }),
+    /* @__PURE__ */ jsx39(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx39(CopyIcon, {}) })
   ] }) }) });
 });
 AssistantActionBarCopy.displayName = "AssistantActionBarCopy";
 var AssistantActionBarSpeechControl = () => {
-  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx37(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx37(AssistantActionBarSpeak, {}) }),
-    /* @__PURE__ */ jsx37(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx37(AssistantActionBarStopSpeaking, {}) })
+  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    /* @__PURE__ */ jsx39(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx39(AssistantActionBarSpeak, {}) }),
+    /* @__PURE__ */ jsx39(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx39(AssistantActionBarStopSpeaking, {}) })
   ] });
 };
-var AssistantActionBarSpeak = forwardRef22((props, ref) => {
+var AssistantActionBarSpeak = forwardRef24((props, ref) => {
   const {
     strings: {
       assistantMessage: { speak: { tooltip = "Read aloud" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  return /* @__PURE__ */ jsx37(actionBar_exports.Speak, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx37(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(AudioLinesIcon, {}) }) });
+  return /* @__PURE__ */ jsx39(actionBar_exports.Speak, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(AudioLinesIcon, {}) }) });
 });
 AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
-var AssistantActionBarStopSpeaking = forwardRef22((props, ref) => {
+var AssistantActionBarStopSpeaking = forwardRef24((props, ref) => {
   const {
     strings: {
       assistantMessage: {
@@ -5278,20 +5365,20 @@ var AssistantActionBarStopSpeaking = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  return /* @__PURE__ */ jsx37(actionBar_exports.StopSpeaking, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx37(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(StopCircleIcon, {}) }) });
+  return /* @__PURE__ */ jsx39(actionBar_exports.StopSpeaking, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(StopCircleIcon, {}) }) });
 });
 AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
-var AssistantActionBarReload = forwardRef22((props, ref) => {
+var AssistantActionBarReload = forwardRef24((props, ref) => {
   const {
     strings: {
       assistantMessage: { reload: { tooltip = "Refresh" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowReload = useAllowReload();
-  return /* @__PURE__ */ jsx37(actionBar_exports.Reload, { disabled: !allowReload, asChild: true, children: /* @__PURE__ */ jsx37(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(RefreshCwIcon, {}) }) });
+  return /* @__PURE__ */ jsx39(actionBar_exports.Reload, { disabled: !allowReload, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(RefreshCwIcon, {}) }) });
 });
 AssistantActionBarReload.displayName = "AssistantActionBarReload";
-var AssistantActionBarFeedbackPositive = forwardRef22((props, ref) => {
+var AssistantActionBarFeedbackPositive = forwardRef24((props, ref) => {
   const {
     strings: {
       assistantMessage: {
@@ -5300,18 +5387,18 @@ var AssistantActionBarFeedbackPositive = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowFeedbackPositive = useAllowFeedbackPositive();
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     actionBar_exports.FeedbackPositive,
     {
       disabled: !allowFeedbackPositive,
       className: "aui-assistant-action-bar-feedback-positive",
       asChild: true,
-      children: /* @__PURE__ */ jsx37(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(ThumbsUpIcon, {}) })
+      children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(ThumbsUpIcon, {}) })
     }
   );
 });
 AssistantActionBarFeedbackPositive.displayName = "AssistantActionBarFeedbackPositive";
-var AssistantActionBarFeedbackNegative = forwardRef22((props, ref) => {
+var AssistantActionBarFeedbackNegative = forwardRef24((props, ref) => {
   const {
     strings: {
       assistantMessage: {
@@ -5320,13 +5407,13 @@ var AssistantActionBarFeedbackNegative = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowFeedbackNegative = useAllowFeedbackNegative();
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     actionBar_exports.FeedbackNegative,
     {
       disabled: !allowFeedbackNegative,
       className: "aui-assistant-action-bar-feedback-negative",
       asChild: true,
-      children: /* @__PURE__ */ jsx37(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx37(ThumbsDownIcon, {}) })
+      children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(ThumbsDownIcon, {}) })
     }
   );
 });
@@ -5347,12 +5434,12 @@ var assistant_action_bar_default = Object.assign(
 );
 
 // src/ui/assistant-message.tsx
-import { forwardRef as forwardRef24, useMemo as useMemo14 } from "react";
+import { forwardRef as forwardRef26, useMemo as useMemo14 } from "react";
 
 // src/ui/branch-picker.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
 var useAllowBranchPicker = (ensureCapability = false) => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
   const branchPickerSupported = useThread((t) => t.capabilities.edit);
@@ -5361,10 +5448,10 @@ var useAllowBranchPicker = (ensureCapability = false) => {
 var BranchPicker = () => {
   const allowBranchPicker = useAllowBranchPicker(true);
   if (!allowBranchPicker) return null;
-  return /* @__PURE__ */ jsxs4(BranchPickerRoot, { hideWhenSingleBranch: true, children: [
-    /* @__PURE__ */ jsx38(BranchPickerPrevious2, {}),
-    /* @__PURE__ */ jsx38(BranchPickerState, {}),
-    /* @__PURE__ */ jsx38(BranchPickerNext, {})
+  return /* @__PURE__ */ jsxs5(BranchPickerRoot, { hideWhenSingleBranch: true, children: [
+    /* @__PURE__ */ jsx40(BranchPickerPrevious, {}),
+    /* @__PURE__ */ jsx40(BranchPickerState, {}),
+    /* @__PURE__ */ jsx40(BranchPickerNext, {})
   ] });
 };
 BranchPicker.displayName = "BranchPicker";
@@ -5372,50 +5459,50 @@ var BranchPickerRoot = withDefaults(branchPicker_exports.Root, {
   className: "aui-branch-picker-root"
 });
 BranchPickerRoot.displayName = "BranchPickerRoot";
-var BranchPickerPrevious2 = forwardRef23((props, ref) => {
+var BranchPickerPrevious = forwardRef25((props, ref) => {
   const {
     strings: {
       branchPicker: { previous: { tooltip = "Previous" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowBranchPicker = useAllowBranchPicker();
-  return /* @__PURE__ */ jsx38(branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ jsx40(branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(ChevronLeftIcon, {}) }) });
 });
-BranchPickerPrevious2.displayName = "BranchPickerPrevious";
+BranchPickerPrevious.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
   className: "aui-branch-picker-state"
 });
-var BranchPickerState = forwardRef23((props, ref) => {
-  return /* @__PURE__ */ jsxs4(BranchPickerStateWrapper, { ...props, ref, children: [
-    /* @__PURE__ */ jsx38(branchPicker_exports.Number, {}),
+var BranchPickerState = forwardRef25((props, ref) => {
+  return /* @__PURE__ */ jsxs5(BranchPickerStateWrapper, { ...props, ref, children: [
+    /* @__PURE__ */ jsx40(branchPicker_exports.Number, {}),
     " / ",
-    /* @__PURE__ */ jsx38(branchPicker_exports.Count, {})
+    /* @__PURE__ */ jsx40(branchPicker_exports.Count, {})
   ] });
 });
 BranchPickerState.displayName = "BranchPickerState";
-var BranchPickerNext = forwardRef23((props, ref) => {
+var BranchPickerNext = forwardRef25((props, ref) => {
   const {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowBranchPicker = useAllowBranchPicker();
-  return /* @__PURE__ */ jsx38(branchPicker_exports.Next, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ jsx40(branchPicker_exports.Next, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(ChevronRightIcon, {}) }) });
 });
 BranchPickerNext.displayName = "BranchPickerNext";
 var exports2 = {
   Root: BranchPickerRoot,
-  Previous: BranchPickerPrevious2,
+  Previous: BranchPickerPrevious,
   Next: BranchPickerNext
 };
 var branch_picker_default = Object.assign(BranchPicker, exports2);
 
 // src/ui/base/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx39, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs6 } from "react/jsx-runtime";
 var Avatar = ({ src, alt, fallback }) => {
   if (src == null && fallback == null) return null;
-  return /* @__PURE__ */ jsxs5(AvatarRoot, { children: [
-    src != null && /* @__PURE__ */ jsx39(AvatarImage, { src, alt }),
-    fallback != null && /* @__PURE__ */ jsx39(AvatarFallback, { children: fallback })
+  return /* @__PURE__ */ jsxs6(AvatarRoot, { children: [
+    src != null && /* @__PURE__ */ jsx41(AvatarImage, { src, alt }),
+    fallback != null && /* @__PURE__ */ jsx41(AvatarFallback, { children: fallback })
   ] });
 };
 Avatar.displayName = "Avatar";
@@ -5434,10 +5521,10 @@ AvatarFallback.displayName = "AvatarFallback";
 
 // src/ui/content-part.tsx
 import classNames2 from "classnames";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Text = () => {
   const status = useSmoothStatus();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     contentPart_exports.Text,
     {
       className: classNames2(
@@ -5452,19 +5539,19 @@ var exports3 = { Text: withSmoothContextProvider(Text) };
 var content_part_default = exports3;
 
 // src/ui/assistant-message.tsx
-import { jsx as jsx41, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs7 } from "react/jsx-runtime";
 var AssistantMessage = () => {
-  return /* @__PURE__ */ jsxs6(AssistantMessageRoot, { children: [
-    /* @__PURE__ */ jsx41(AssistantMessageAvatar, {}),
-    /* @__PURE__ */ jsx41(AssistantMessageContent, {}),
-    /* @__PURE__ */ jsx41(branch_picker_default, {}),
-    /* @__PURE__ */ jsx41(assistant_action_bar_default, {})
+  return /* @__PURE__ */ jsxs7(AssistantMessageRoot, { children: [
+    /* @__PURE__ */ jsx43(AssistantMessageAvatar, {}),
+    /* @__PURE__ */ jsx43(AssistantMessageContent, {}),
+    /* @__PURE__ */ jsx43(branch_picker_default, {}),
+    /* @__PURE__ */ jsx43(assistant_action_bar_default, {})
   ] });
 };
 AssistantMessage.displayName = "AssistantMessage";
 var AssistantMessageAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx41(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx43(Avatar, { ...avatar });
 };
 var AssistantMessageRoot = withDefaults(message_exports.Root, {
   className: "aui-assistant-message-root"
@@ -5473,7 +5560,7 @@ AssistantMessageRoot.displayName = "AssistantMessageRoot";
 var AssistantMessageContentWrapper = withDefaults("div", {
   className: "aui-assistant-message-content"
 });
-var AssistantMessageContent = forwardRef24(({ components: componentsProp, ...rest }, ref) => {
+var AssistantMessageContent = forwardRef26(({ components: componentsProp, ...rest }, ref) => {
   const { tools, assistantMessage: { components = {} } = {} } = useThreadConfig();
   const toolsComponents = useMemo14(
     () => ({
@@ -5488,7 +5575,7 @@ var AssistantMessageContent = forwardRef24(({ components: componentsProp, ...res
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [...tools ?? [], components.ToolFallback]
   );
-  return /* @__PURE__ */ jsx41(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx43(
     message_exports.Content,
     {
       components: {
@@ -5511,21 +5598,21 @@ var assistant_message_default = Object.assign(
 );
 
 // src/ui/assistant-modal.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef34 } from "react";
 import { BotIcon, ChevronDownIcon } from "lucide-react";
 
 // src/ui/thread.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { ArrowDownIcon } from "lucide-react";
 
 // src/ui/composer.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 import { PaperclipIcon, SendHorizontalIcon } from "lucide-react";
 
 // src/ui/base/CircleStopIcon.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var CircleStopIcon = () => {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -5533,51 +5620,44 @@ var CircleStopIcon = () => {
       fill: "currentColor",
       width: "16",
       height: "16",
-      children: /* @__PURE__ */ jsx42("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
+      children: /* @__PURE__ */ jsx44("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
     }
   );
 };
 CircleStopIcon.displayName = "CircleStopIcon";
 
 // src/ui/composer-attachment.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { CircleXIcon } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs7 } from "react/jsx-runtime";
-var ComposerAttachmentRoot = withDefaults("div", {
+import { jsx as jsx45, jsxs as jsxs8 } from "react/jsx-runtime";
+var ComposerAttachmentRoot = withDefaults(attachment_exports.Root, {
   className: "aui-composer-attachment-root"
 });
 ComposerAttachmentRoot.displayName = "ComposerAttachmentRoot";
 var ComposerAttachment2 = () => {
-  const attachment = useThreadComposerAttachment((a) => a.attachment);
-  return /* @__PURE__ */ jsxs7(ComposerAttachmentRoot, { children: [
-    ".",
-    attachment.name.split(".").pop(),
-    /* @__PURE__ */ jsx43(ComposerAttachmentRemove, {})
+  return /* @__PURE__ */ jsxs8(ComposerAttachmentRoot, { children: [
+    /* @__PURE__ */ jsx45(attachment_exports.unstable_Thumb, {}),
+    /* @__PURE__ */ jsx45(ComposerAttachmentRemove, {})
   ] });
 };
 ComposerAttachment2.displayName = "ComposerAttachment";
-var ComposerAttachmentRemove = forwardRef25((props, ref) => {
+var ComposerAttachmentRemove = forwardRef27((props, ref) => {
   const {
     strings: {
       composer: { removeAttachment: { tooltip = "Remove file" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  const attachmentRuntime = useAttachmentRuntime();
-  const handleRemoveAttachment = () => {
-    attachmentRuntime.remove();
-  };
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(attachment_exports.Remove, { asChild: true, children: /* @__PURE__ */ jsx45(
     TooltipIconButton,
     {
       tooltip,
       className: "aui-composer-attachment-remove",
       side: "top",
       ...props,
-      onClick: handleRemoveAttachment,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx43(CircleXIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx45(CircleXIcon, {})
     }
-  );
+  ) });
 });
 ComposerAttachmentRemove.displayName = "ComposerAttachmentRemove";
 var exports5 = {
@@ -5590,7 +5670,7 @@ var composer_attachment_default = Object.assign(
 );
 
 // src/ui/composer.tsx
-import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs9 } from "react/jsx-runtime";
 var useAllowAttachments = (ensureCapability = false) => {
   const { composer: { allowAttachments = true } = {} } = useThreadConfig();
   const attachmentsSupported = useThread((t) => t.capabilities.attachments);
@@ -5598,11 +5678,11 @@ var useAllowAttachments = (ensureCapability = false) => {
 };
 var Composer = () => {
   const allowAttachments = useAllowAttachments(true);
-  return /* @__PURE__ */ jsxs8(ComposerRoot, { children: [
-    allowAttachments && /* @__PURE__ */ jsx44(ComposerAttachments, {}),
-    allowAttachments && /* @__PURE__ */ jsx44(ComposerAddAttachment, {}),
-    /* @__PURE__ */ jsx44(ComposerInput, { autoFocus: true }),
-    /* @__PURE__ */ jsx44(ComposerAction, {})
+  return /* @__PURE__ */ jsxs9(ComposerRoot, { children: [
+    allowAttachments && /* @__PURE__ */ jsx46(ComposerAttachments, {}),
+    allowAttachments && /* @__PURE__ */ jsx46(ComposerAddAttachment, {}),
+    /* @__PURE__ */ jsx46(ComposerInput, { autoFocus: true }),
+    /* @__PURE__ */ jsx46(ComposerAction, {})
   ] });
 };
 Composer.displayName = "Composer";
@@ -5615,14 +5695,14 @@ var ComposerInputStyled = withDefaults(composer_exports.Input, {
   autoFocus: true,
   className: "aui-composer-input"
 });
-var ComposerInput = forwardRef26(
+var ComposerInput = forwardRef28(
   (props, ref) => {
     const {
       strings: {
         composer: { input: { placeholder = "Write a message..." } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx44(ComposerInputStyled, { placeholder, ...props, ref });
+    return /* @__PURE__ */ jsx46(ComposerInputStyled, { placeholder, ...props, ref });
   }
 );
 ComposerInput.displayName = "ComposerInput";
@@ -5630,7 +5710,7 @@ var ComposerAttachmentsContainer = withDefaults("div", {
   className: "aui-composer-attachments"
 });
 var ComposerAttachments = ({ components }) => {
-  return /* @__PURE__ */ jsx44(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx46(
     composer_exports.Attachments,
     {
       components: {
@@ -5644,21 +5724,21 @@ var ComposerAttachButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-attach"
 });
-var ComposerAddAttachment = forwardRef26((props, ref) => {
+var ComposerAddAttachment = forwardRef28((props, ref) => {
   const {
     strings: {
       composer: { addAttachment: { tooltip = "Attach file" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowAttachments = useAllowAttachments();
-  return /* @__PURE__ */ jsx44(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx46(
     ComposerAttachButton,
     {
       tooltip,
       variant: "ghost",
       ...props,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx44(PaperclipIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx46(PaperclipIcon, {})
     }
   ) });
 });
@@ -5669,10 +5749,10 @@ var useAllowCancel = () => {
 };
 var ComposerAction = () => {
   const allowCancel = useAllowCancel();
-  if (!allowCancel) return /* @__PURE__ */ jsx44(ComposerSend, {});
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx44(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx44(ComposerSend, {}) }),
-    /* @__PURE__ */ jsx44(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx44(ComposerCancel, {}) })
+  if (!allowCancel) return /* @__PURE__ */ jsx46(ComposerSend, {});
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx46(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx46(ComposerSend, {}) }),
+    /* @__PURE__ */ jsx46(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx46(ComposerCancel, {}) })
   ] });
 };
 ComposerAction.displayName = "ComposerAction";
@@ -5680,23 +5760,27 @@ var ComposerSendButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-send"
 });
-var ComposerSend = forwardRef26((props, ref) => {
-  const {
-    strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
-  } = useThreadConfig();
-  return /* @__PURE__ */ jsx44(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx44(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx44(SendHorizontalIcon, {}) }) });
-});
+var ComposerSend = forwardRef28(
+  (props, ref) => {
+    const {
+      strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
+    } = useThreadConfig();
+    return /* @__PURE__ */ jsx46(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(SendHorizontalIcon, {}) }) });
+  }
+);
 ComposerSend.displayName = "ComposerSend";
 var ComposerCancelButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-cancel"
 });
-var ComposerCancel = forwardRef26((props, ref) => {
-  const {
-    strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
-  } = useThreadConfig();
-  return /* @__PURE__ */ jsx44(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx44(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx44(CircleStopIcon, {}) }) });
-});
+var ComposerCancel = forwardRef28(
+  (props, ref) => {
+    const {
+      strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
+    } = useThreadConfig();
+    return /* @__PURE__ */ jsx46(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(CircleStopIcon, {}) }) });
+  }
+);
 ComposerCancel.displayName = "ComposerCancel";
 var exports6 = {
   Root: ComposerRoot,
@@ -5710,15 +5794,15 @@ var exports6 = {
 var composer_default = Object.assign(Composer, exports6);
 
 // src/ui/thread-welcome.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx45, jsxs as jsxs9 } from "react/jsx-runtime";
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
 var ThreadWelcome = () => {
-  return /* @__PURE__ */ jsxs9(ThreadWelcomeRoot, { children: [
-    /* @__PURE__ */ jsxs9(ThreadWelcomeCenter, { children: [
-      /* @__PURE__ */ jsx45(ThreadWelcomeAvatar, {}),
-      /* @__PURE__ */ jsx45(ThreadWelcomeMessage, {})
+  return /* @__PURE__ */ jsxs10(ThreadWelcomeRoot, { children: [
+    /* @__PURE__ */ jsxs10(ThreadWelcomeCenter, { children: [
+      /* @__PURE__ */ jsx47(ThreadWelcomeAvatar, {}),
+      /* @__PURE__ */ jsx47(ThreadWelcomeMessage, {})
     ] }),
-    /* @__PURE__ */ jsx45(ThreadWelcomeSuggestions, {})
+    /* @__PURE__ */ jsx47(ThreadWelcomeSuggestions, {})
   ] });
 };
 ThreadWelcome.displayName = "ThreadWelcome";
@@ -5728,22 +5812,20 @@ var ThreadWelcomeRootStyled = withDefaults("div", {
 var ThreadWelcomeCenter = withDefaults("div", {
   className: "aui-thread-welcome-center"
 });
-var ThreadWelcomeRoot = forwardRef27(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx45(thread_exports.Empty, { children: /* @__PURE__ */ jsx45(ThreadWelcomeRootStyled, { ...props, ref }) });
-  }
-);
+var ThreadWelcomeRoot = forwardRef29((props, ref) => {
+  return /* @__PURE__ */ jsx47(thread_exports.Empty, { children: /* @__PURE__ */ jsx47(ThreadWelcomeRootStyled, { ...props, ref }) });
+});
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx45(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx47(Avatar, { ...avatar });
 };
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
-var ThreadWelcomeMessage = forwardRef27(({ message: messageProp, ...rest }, ref) => {
+var ThreadWelcomeMessage = forwardRef29(({ message: messageProp, ...rest }, ref) => {
   const { welcome: { message = "How can I help you today?" } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx45(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
+  return /* @__PURE__ */ jsx47(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
 ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
 var ThreadWelcomeSuggestionContainer = withDefaults("div", {
@@ -5755,15 +5837,15 @@ var ThreadWelcomeSuggestionStyled = withDefaults(thread_exports.Suggestion, {
 var ThreadWelcomeSuggestion = ({
   suggestion: { text, prompt }
 }) => {
-  return /* @__PURE__ */ jsx45(ThreadWelcomeSuggestionStyled, { prompt, method: "replace", autoSend: true, children: /* @__PURE__ */ jsx45("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt }) });
+  return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestionStyled, { prompt, method: "replace", autoSend: true, children: /* @__PURE__ */ jsx47("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt }) });
 };
 var ThreadWelcomeSuggestions = () => {
   const suggestions2 = useThread((t) => t.suggestions);
   const { welcome: { suggestions } = {} } = useThreadConfig();
   const finalSuggestions = suggestions2.length ? suggestions2 : suggestions;
-  return /* @__PURE__ */ jsx45(ThreadWelcomeSuggestionContainer, { children: finalSuggestions?.map((suggestion, idx) => {
+  return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestionContainer, { children: finalSuggestions?.map((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
-    return /* @__PURE__ */ jsx45(ThreadWelcomeSuggestion, { suggestion }, key);
+    return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestion, { suggestion }, key);
   }) });
 };
 ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
@@ -5778,12 +5860,12 @@ var exports7 = {
 var thread_welcome_default = Object.assign(ThreadWelcome, exports7);
 
 // src/ui/user-message.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 
 // src/ui/user-action-bar.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 import { PencilIcon } from "lucide-react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var useAllowEdit = (ensureCapability = false) => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const editSupported = useThread((t) => t.capabilities.edit);
@@ -5792,19 +5874,19 @@ var useAllowEdit = (ensureCapability = false) => {
 var UserActionBar = () => {
   const allowEdit = useAllowEdit(true);
   if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx46(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx46(UserActionBarEdit, {}) });
+  return /* @__PURE__ */ jsx48(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx48(UserActionBarEdit, {}) });
 };
 UserActionBar.displayName = "UserActionBar";
 var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-user-action-bar-root"
 });
 UserActionBarRoot.displayName = "UserActionBarRoot";
-var UserActionBarEdit = forwardRef28((props, ref) => {
+var UserActionBarEdit = forwardRef30((props, ref) => {
   const {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
-  return /* @__PURE__ */ jsx46(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx46(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(PencilIcon, {}) }) });
+  return /* @__PURE__ */ jsx48(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx48(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx48(PencilIcon, {}) }) });
 });
 UserActionBarEdit.displayName = "UserActionBarEdit";
 var exports8 = {
@@ -5814,17 +5896,13 @@ var exports8 = {
 var user_action_bar_default = Object.assign(UserActionBar, exports8);
 
 // src/ui/user-message-attachment.tsx
-import { jsxs as jsxs10 } from "react/jsx-runtime";
-var UserMessageAttachmentRoot = withDefaults("div", {
+import { jsx as jsx49 } from "react/jsx-runtime";
+var UserMessageAttachmentRoot = withDefaults(attachment_exports.Root, {
   className: "aui-user-message-attachment-root"
 });
 UserMessageAttachmentRoot.displayName = "UserMessageAttachmentRoot";
 var UserMessageAttachment = () => {
-  const attachment = useAttachment((a) => a.attachment);
-  return /* @__PURE__ */ jsxs10(UserMessageAttachmentRoot, { children: [
-    ".",
-    attachment.name.split(".").pop()
-  ] });
+  return /* @__PURE__ */ jsx49(UserMessageAttachmentRoot, { children: /* @__PURE__ */ jsx49(attachment_exports.unstable_Thumb, {}) });
 };
 UserMessageAttachment.displayName = "UserMessageAttachment";
 var exports9 = {
@@ -5836,13 +5914,13 @@ var user_message_attachment_default = Object.assign(
 );
 
 // src/ui/user-message.tsx
-import { jsx as jsx47, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs11 } from "react/jsx-runtime";
 var UserMessage = () => {
   return /* @__PURE__ */ jsxs11(UserMessageRoot, { children: [
-    /* @__PURE__ */ jsx47(UserMessageAttachments, {}),
-    /* @__PURE__ */ jsx47(user_action_bar_default, {}),
-    /* @__PURE__ */ jsx47(UserMessageContent, {}),
-    /* @__PURE__ */ jsx47(branch_picker_default, {})
+    /* @__PURE__ */ jsx50(UserMessageAttachments, {}),
+    /* @__PURE__ */ jsx50(user_action_bar_default, {}),
+    /* @__PURE__ */ jsx50(UserMessageContent, {}),
+    /* @__PURE__ */ jsx50(branch_picker_default, {})
   ] });
 };
 UserMessage.displayName = "UserMessage";
@@ -5853,19 +5931,17 @@ UserMessageRoot.displayName = "UserMessageRoot";
 var UserMessageContentWrapper = withDefaults("div", {
   className: "aui-user-message-content"
 });
-var UserMessageContent = forwardRef29(
-  ({ components, ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx47(
-      message_exports.Content,
-      {
-        components: {
-          ...components,
-          Text: components?.Text ?? content_part_default.Text
-        }
+var UserMessageContent = forwardRef31(({ components, ...props }, ref) => {
+  return /* @__PURE__ */ jsx50(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx50(
+    message_exports.Content,
+    {
+      components: {
+        ...components,
+        Text: components?.Text ?? content_part_default.Text
       }
-    ) });
-  }
-);
+    }
+  ) });
+});
 UserMessageContent.displayName = "UserMessageContent";
 var UserMessageAttachmentsContainer = withDefaults("div", {
   className: "aui-user-message-attachments"
@@ -5873,7 +5949,7 @@ var UserMessageAttachmentsContainer = withDefaults("div", {
 var UserMessageAttachments = ({
   components
 }) => {
-  return /* @__PURE__ */ jsx47(message_exports.If, { hasAttachments: true, children: /* @__PURE__ */ jsx47(UserMessageAttachmentsContainer, { children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx50(message_exports.If, { hasAttachments: true, children: /* @__PURE__ */ jsx50(UserMessageAttachmentsContainer, { children: /* @__PURE__ */ jsx50(
     message_exports.Attachments,
     {
       components: {
@@ -5891,14 +5967,14 @@ var exports10 = {
 var user_message_default = Object.assign(UserMessage, exports10);
 
 // src/ui/edit-composer.tsx
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx48, jsxs as jsxs12 } from "react/jsx-runtime";
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx51, jsxs as jsxs12 } from "react/jsx-runtime";
 var EditComposer = () => {
   return /* @__PURE__ */ jsxs12(EditComposerRoot, { children: [
-    /* @__PURE__ */ jsx48(EditComposerInput, {}),
+    /* @__PURE__ */ jsx51(EditComposerInput, {}),
     /* @__PURE__ */ jsxs12(EditComposerFooter, { children: [
-      /* @__PURE__ */ jsx48(EditComposerCancel, {}),
-      /* @__PURE__ */ jsx48(EditComposerSend, {})
+      /* @__PURE__ */ jsx51(EditComposerCancel, {}),
+      /* @__PURE__ */ jsx51(EditComposerSend, {})
     ] })
   ] });
 };
@@ -5915,25 +5991,19 @@ var EditComposerFooter = withDefaults("div", {
   className: "aui-edit-composer-footer"
 });
 EditComposerFooter.displayName = "EditComposerFooter";
-var EditComposerCancel = forwardRef30(
-  (props, ref) => {
-    const {
-      strings: {
-        editComposer: { cancel: { label = "Cancel" } = {} } = {}
-      } = {}
-    } = useThreadConfig();
-    return /* @__PURE__ */ jsx48(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx48(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
-  }
-);
+var EditComposerCancel = forwardRef32((props, ref) => {
+  const {
+    strings: { editComposer: { cancel: { label = "Cancel" } = {} } = {} } = {}
+  } = useThreadConfig();
+  return /* @__PURE__ */ jsx51(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
+});
 EditComposerCancel.displayName = "EditComposerCancel";
-var EditComposerSend = forwardRef30(
-  (props, ref) => {
-    const {
-      strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
-    } = useThreadConfig();
-    return /* @__PURE__ */ jsx48(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx48(Button, { ...props, ref, children: props.children ?? label }) });
-  }
-);
+var EditComposerSend = forwardRef32((props, ref) => {
+  const {
+    strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
+  } = useThreadConfig();
+  return /* @__PURE__ */ jsx51(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { ...props, ref, children: props.children ?? label }) });
+});
 EditComposerSend.displayName = "EditComposerSend";
 var exports11 = {
   Root: EditComposerRoot,
@@ -5945,7 +6015,7 @@ var exports11 = {
 var edit_composer_default = Object.assign(EditComposer, exports11);
 
 // src/ui/thread.tsx
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs13 } from "react/jsx-runtime";
 var Thread = (config) => {
   const {
     components: {
@@ -5953,22 +6023,22 @@ var Thread = (config) => {
       ThreadWelcome: ThreadWelcomeComponent = thread_welcome_default
     } = {}
   } = config;
-  return /* @__PURE__ */ jsx49(ThreadRoot, { config, children: /* @__PURE__ */ jsxs13(ThreadViewport, { children: [
-    /* @__PURE__ */ jsx49(ThreadWelcomeComponent, {}),
-    /* @__PURE__ */ jsx49(ThreadMessages, {}),
-    /* @__PURE__ */ jsx49(ThreadFollowupSuggestions, {}),
+  return /* @__PURE__ */ jsx52(ThreadRoot, { config, children: /* @__PURE__ */ jsxs13(ThreadViewport, { children: [
+    /* @__PURE__ */ jsx52(ThreadWelcomeComponent, {}),
+    /* @__PURE__ */ jsx52(ThreadMessages, {}),
+    /* @__PURE__ */ jsx52(ThreadFollowupSuggestions, {}),
     /* @__PURE__ */ jsxs13(ThreadViewportFooter, { children: [
-      /* @__PURE__ */ jsx49(ThreadScrollToBottom, {}),
-      /* @__PURE__ */ jsx49(ComposerComponent, {})
+      /* @__PURE__ */ jsx52(ThreadScrollToBottom, {}),
+      /* @__PURE__ */ jsx52(ComposerComponent, {})
     ] })
   ] }) });
 };
 var ThreadRootStyled = withDefaults(thread_exports.Root, {
   className: "aui-root aui-thread-root"
 });
-var ThreadRoot = forwardRef31(
+var ThreadRoot = forwardRef33(
   ({ config, ...props }, ref) => {
-    return /* @__PURE__ */ jsx49(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx49(ThreadRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx52(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx52(ThreadRootStyled, { ...props, ref }) });
   }
 );
 ThreadRoot.displayName = "ThreadRoot";
@@ -5982,8 +6052,8 @@ var ThreadViewportFooter = withDefaults("div", {
 ThreadViewportFooter.displayName = "ThreadViewportFooter";
 var SystemMessage = () => null;
 var ThreadMessages = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ...rest }) => {
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    /* @__PURE__ */ jsx52(
       thread_exports.Messages,
       {
         components: {
@@ -5995,13 +6065,13 @@ var ThreadMessages = ({ components, unstable_flexGrowDiv: flexGrowDiv = true, ..
         ...rest
       }
     ),
-    flexGrowDiv && /* @__PURE__ */ jsx49(thread_exports.If, { empty: false, children: /* @__PURE__ */ jsx49("div", { style: { flexGrow: 1 } }) })
+    flexGrowDiv && /* @__PURE__ */ jsx52(thread_exports.If, { empty: false, children: /* @__PURE__ */ jsx52("div", { style: { flexGrow: 1 } }) })
   ] });
 };
 ThreadMessages.displayName = "ThreadMessages";
 var ThreadFollowupSuggestions = () => {
   const suggestions = useThread((t) => t.suggestions);
-  return /* @__PURE__ */ jsx49(thread_exports.If, { empty: false, running: false, children: /* @__PURE__ */ jsx49("div", { className: "aui-thread-followup-suggestions", children: suggestions?.map((suggestion, idx) => /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx52(thread_exports.If, { empty: false, running: false, children: /* @__PURE__ */ jsx52("div", { className: "aui-thread-followup-suggestions", children: suggestions?.map((suggestion, idx) => /* @__PURE__ */ jsx52(
     thread_exports.Suggestion,
     {
       className: "aui-thread-followup-suggestion",
@@ -6017,13 +6087,13 @@ var ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
   variant: "outline",
   className: "aui-thread-scroll-to-bottom"
 });
-var ThreadScrollToBottom = forwardRef31((props, ref) => {
+var ThreadScrollToBottom = forwardRef33((props, ref) => {
   const {
     strings: {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx49(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx49(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx49(ArrowDownIcon, {}) }) });
+  return /* @__PURE__ */ jsx52(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx52(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx52(ArrowDownIcon, {}) }) });
 });
 ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
 var exports12 = {
@@ -6037,20 +6107,23 @@ var exports12 = {
 var thread_default = Object.assign(Thread, exports12);
 
 // src/ui/assistant-modal.tsx
-import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs14 } from "react/jsx-runtime";
 var AssistantModal = (config) => {
   return /* @__PURE__ */ jsxs14(AssistantModalRoot, { config, children: [
-    /* @__PURE__ */ jsx50(AssistantModalTrigger, {}),
-    /* @__PURE__ */ jsx50(AssistantModalContent, { children: /* @__PURE__ */ jsx50(thread_default, {}) })
+    /* @__PURE__ */ jsx53(AssistantModalTrigger, {}),
+    /* @__PURE__ */ jsx53(AssistantModalContent, { children: /* @__PURE__ */ jsx53(thread_default, {}) })
   ] });
 };
 AssistantModal.displayName = "AssistantModal";
-var AssistantModalRoot = ({ config, ...props }) => {
-  return /* @__PURE__ */ jsx50(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx50(assistantModal_exports.Root, { ...props }) });
+var AssistantModalRoot = ({
+  config,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx53(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx53(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
-var AssistantModalTrigger = forwardRef32((props, ref) => {
-  return /* @__PURE__ */ jsx50(AssistantModalAnchor, { children: /* @__PURE__ */ jsx50(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx50(AssistantModalButton, { ...props, ref }) }) });
+var AssistantModalTrigger = forwardRef34((props, ref) => {
+  return /* @__PURE__ */ jsx53(AssistantModalAnchor, { children: /* @__PURE__ */ jsx53(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx53(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
 var AssistantModalAnchor = withDefaults(assistantModal_exports.Anchor, {
@@ -6061,7 +6134,7 @@ var ModalButtonStyled = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-modal-button"
 });
-var AssistantModalButton = forwardRef32(({ "data-state": state, ...rest }, ref) => {
+var AssistantModalButton = forwardRef34(({ "data-state": state, ...rest }, ref) => {
   const {
     strings: {
       assistantModal: {
@@ -6075,7 +6148,7 @@ var AssistantModalButton = forwardRef32(({ "data-state": state, ...rest }, ref)
     } = {}
   } = useThreadConfig();
   const tooltip = state === "open" ? openTooltip : closedTooltip;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx53(
     ModalButtonStyled,
     {
       side: "left",
@@ -6083,15 +6156,15 @@ var AssistantModalButton = forwardRef32(({ "data-state": state, ...rest }, ref)
       "data-state": state,
       ...rest,
       ref,
-      children: rest.children ?? /* @__PURE__ */ jsxs14(Fragment7, { children: [
-        /* @__PURE__ */ jsx50(
+      children: rest.children ?? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+        /* @__PURE__ */ jsx53(
           BotIcon,
           {
             "data-state": state,
             className: "aui-modal-button-closed-icon"
           }
         ),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx53(
           ChevronDownIcon,
           {
             "data-state": state,
@@ -6123,6 +6196,7 @@ export {
   assistant_modal_default as AssistantModal,
   assistantModal_exports as AssistantModalPrimitive,
   AssistantRuntimeProvider,
+  attachment_exports as AttachmentPrimitive,
   branch_picker_default as BranchPicker,
   branchPicker_exports as BranchPickerPrimitive,
   composer_default as Composer,