@assistant-ui/react 0.5.76 → 0.5.78

package/dist/index.mjs

@@ -412,15 +412,11 @@ function useComposerRuntime(options) {
 import { useCallback } from "react";
 var useAppendMessage = () => {
   const threadRuntime = useThreadRuntime();
-  const threadViewportStore = useThreadViewportStore();
-  const threadComposerStore = useThreadComposerStore();
   const append = useCallback(
     (message) => {
       threadRuntime.append(message);
-      threadViewportStore.getState().scrollToBottom();
-      threadComposerStore.getState().focus();
     },
-    [threadRuntime, threadViewportStore, threadComposerStore]
+    [threadRuntime]
   );
   return append;
 };
@@ -429,11 +425,9 @@ var useAppendMessage = () => {
 import { useCallback as useCallback2 } from "react";
 var useSwitchToNewThread = () => {
   const assistantRuntime = useAssistantRuntime();
-  const threadComposerStore = useThreadComposerStore();
   const switchToNewThread = useCallback2(() => {
     assistantRuntime.switchToNewThread();
-    threadComposerStore.getState().focus();
-  }, [assistantRuntime, threadComposerStore]);
+  }, [assistantRuntime]);
   return switchToNewThread;
 };
 
@@ -546,25 +540,25 @@ var getThreadMessageText = (message) => {
 var useActionBarCopy = ({
   copiedDuration = 3e3
 } = {}) => {
-  const messageStore = useMessageStore();
+  const messageRuntime = useMessageRuntime();
+  const composerRuntime = useComposerRuntime();
   const messageUtilsStore = useMessageUtilsStore();
-  const editComposerStore = useEditComposerStore();
   const hasCopyableContent = useCombinedStore(
-    [messageStore, editComposerStore],
+    [messageRuntime, composerRuntime],
     (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 = useCallback3(() => {
-    const message = messageStore.getState();
+    const message = messageRuntime.getState();
     const { setIsCopied } = messageUtilsStore.getState();
-    const { isEditing, text: composerValue } = editComposerStore.getState();
+    const { isEditing, text: composerValue } = composerRuntime.getState();
     const valueToCopy = isEditing ? composerValue : getThreadMessageText(message);
     navigator.clipboard.writeText(valueToCopy).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
     });
-  }, [messageStore, messageUtilsStore, editComposerStore, copiedDuration]);
+  }, [messageRuntime, messageUtilsStore, composerRuntime, copiedDuration]);
   if (!hasCopyableContent) return null;
   return callback;
 };
@@ -584,20 +578,15 @@ var useActionBarEdit = () => {
 // src/primitive-hooks/actionBar/useActionBarReload.tsx
 import { useCallback as useCallback5 } from "react";
 var useActionBarReload = () => {
-  const messageStore = useMessageStore();
-  const threadStore = useThreadStore();
   const messageRuntime = useMessageRuntime();
-  const threadComposerStore = useThreadComposerStore();
-  const threadViewportStore = useThreadViewportStore();
+  const threadRuntime = useThreadRuntime();
   const disabled = useCombinedStore(
-    [threadStore, messageStore],
+    [threadRuntime, messageRuntime],
     (t, m) => t.isRunning || t.isDisabled || m.role !== "assistant"
   );
   const callback = useCallback5(() => {
     messageRuntime.reload();
-    threadViewportStore.getState().scrollToBottom();
-    threadComposerStore.getState().focus();
-  }, [messageRuntime, threadComposerStore, threadViewportStore]);
+  }, [messageRuntime]);
   if (disabled) return null;
   return callback;
 };
@@ -687,12 +676,11 @@ var useBranchPickerPrevious = () => {
 // src/primitive-hooks/composer/useComposerCancel.tsx
 import { useCallback as useCallback12 } from "react";
 var useComposerCancel = () => {
-  const composerStore = useComposerStore();
+  const composerRuntime = useComposerRuntime();
   const disabled = useComposer((c) => !c.canCancel);
   const callback = useCallback12(() => {
-    const { cancel } = composerStore.getState();
-    cancel();
-  }, [composerStore]);
+    composerRuntime.cancel();
+  }, [composerRuntime]);
   if (disabled) return null;
   return callback;
 };
@@ -709,21 +697,16 @@ var useComposerIf = (props) => {
 // src/primitive-hooks/composer/useComposerSend.tsx
 import { useCallback as useCallback13 } from "react";
 var useComposerSend = () => {
-  const threadStore = useThreadStore();
-  const threadViewportStore = useThreadViewportStore();
-  const composerStore = useComposerStore();
-  const threadComposerStore = useThreadComposerStore();
+  const composerRuntime = useComposerRuntime();
+  const threadRuntime = useThreadRuntime();
   const disabled = useCombinedStore(
-    [threadStore, composerStore],
+    [threadRuntime, composerRuntime],
     (t, c) => t.isRunning || !c.isEditing || c.isEmpty
   );
   const callback = useCallback13(() => {
-    const composerState = composerStore.getState();
-    if (!composerState.isEditing) return;
-    composerState.send();
-    threadViewportStore.getState().scrollToBottom();
-    threadComposerStore.getState().focus();
-  }, [threadComposerStore, composerStore, threadViewportStore]);
+    if (!composerRuntime.getState().isEditing) return;
+    composerRuntime.send();
+  }, [threadRuntime]);
   if (disabled) return null;
   return callback;
 };
@@ -789,10 +772,10 @@ var useContentPartText = () => {
 
 // src/primitive-hooks/message/useMessageIf.tsx
 var useMessageIf = (props) => {
-  const messageStore = useMessageStore();
+  const messageRuntime = useMessageRuntime();
   const messageUtilsStore = useMessageUtilsStore();
   return useCombinedStore(
-    [messageStore, messageUtilsStore],
+    [messageRuntime, messageUtilsStore],
     ({
       role,
       attachments,
@@ -847,11 +830,9 @@ import { useCallback as useCallback15 } from "react";
 var useThreadScrollToBottom = () => {
   const isAtBottom = useThreadViewport((s) => s.isAtBottom);
   const threadViewportStore = useThreadViewportStore();
-  const threadComposerStore = useThreadComposerStore();
   const handleScrollToBottom = useCallback15(() => {
     threadViewportStore.getState().scrollToBottom();
-    threadComposerStore.getState().focus();
-  }, [threadViewportStore, threadComposerStore]);
+  }, [threadViewportStore]);
   if (isAtBottom) return null;
   return handleScrollToBottom;
 };
@@ -862,20 +843,16 @@ var useThreadSuggestion = ({
   prompt,
   autoSend
 }) => {
-  const threadStore = useThreadStore();
-  const composerStore = useThreadComposerStore();
-  const append = useAppendMessage();
+  const threadRuntime = useThreadRuntime();
   const disabled = useThread((t) => t.isDisabled);
   const callback = useCallback16(() => {
-    const thread = threadStore.getState();
-    const composer = composerStore.getState();
-    if (autoSend && !thread.isRunning) {
-      append(prompt);
-      composer.setText("");
+    if (autoSend && !threadRuntime.getState().isRunning) {
+      threadRuntime.append(prompt);
+      threadRuntime.composer.setText("");
     } else {
-      composer.setText(prompt);
+      threadRuntime.composer.setText(prompt);
     }
-  }, [threadStore, composerStore, autoSend, append, prompt]);
+  }, [threadRuntime, autoSend, prompt]);
   if (disabled) return null;
   return callback;
 };
@@ -903,11 +880,11 @@ var useActionBarFloatStatus = ({
   autohide,
   autohideFloat
 }) => {
-  const threadStore = useThreadStore();
-  const messageStore = useMessageStore();
+  const threadRuntime = useThreadRuntime();
+  const messageRuntime = useMessageRuntime();
   const messageUtilsStore = useMessageUtilsStore();
   return useCombinedStore(
-    [threadStore, messageStore, messageUtilsStore],
+    [threadRuntime, messageRuntime, messageUtilsStore],
     (t, m, mu) => {
       if (hideWhenRunning && t.isRunning) return "hidden" /* Hidden */;
       const autohideEnabled = autohide === "always" || autohide === "not-last" && !m.isLast;
@@ -1107,46 +1084,44 @@ __export(assistantModal_exports, {
 });
 
 // src/primitives/assistantModal/AssistantModalRoot.tsx
-import { useState as useState4 } from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
 
-// src/utils/hooks/useOnComposerFocus.tsx
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect7 } from "react";
-var useOnComposerFocus = (callback) => {
-  const callbackRef = useCallbackRef(callback);
-  const threadComposerStore = useThreadComposerStore();
-  useEffect7(() => {
-    return threadComposerStore.getState().onFocus(() => {
-      callbackRef();
-    });
-  }, [threadComposerStore, callbackRef]);
-};
-
 // src/primitives/assistantModal/scope.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 var usePopoverScope = PopoverPrimitive.createPopoverScope();
 
 // src/primitives/assistantModal/AssistantModalRoot.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var useAssistantModalOpenState = (defaultOpen = false) => {
+var useAssistantModalOpenState = ({
+  defaultOpen = false,
+  unstable_openOnRunStart = true
+}) => {
   const state = useState4(defaultOpen);
   const [, setOpen] = state;
-  useOnComposerFocus(() => {
-    setOpen(true);
-  });
+  const threadRuntime = useThreadRuntime();
+  useEffect7(() => {
+    if (!unstable_openOnRunStart) return void 0;
+    return threadRuntime.unstable_on("run-start", () => {
+      setOpen(true);
+    });
+  }, [unstable_openOnRunStart]);
   return state;
 };
 var AssistantModalPrimitiveRoot = ({
   __scopeAssistantModal,
   defaultOpen,
+  unstable_openOnRunStart,
   open,
   onOpenChange,
   ...rest
 }) => {
   const scope = usePopoverScope(__scopeAssistantModal);
-  const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
+  const [modalOpen, setOpen] = useAssistantModalOpenState({
+    defaultOpen,
+    unstable_openOnRunStart
+  });
   return /* @__PURE__ */ jsx10(
     PopoverPrimitive2.Root,
     {
@@ -1438,9 +1413,9 @@ var useIsHoveringRef = () => {
   );
   return useManagedRef(callbackRef);
 };
-var MessagePrimitiveRoot = forwardRef12((props, forwardRef35) => {
+var MessagePrimitiveRoot = forwardRef12((props, forwardRef36) => {
   const isHoveringRef = useIsHoveringRef();
-  const ref = useComposedRefs(forwardRef35, isHoveringRef);
+  const ref = useComposedRefs(forwardRef36, isHoveringRef);
   return /* @__PURE__ */ jsx18(Primitive9.div, { ...props, ref });
 });
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
@@ -1497,7 +1472,7 @@ import {
 
 // src/utils/smooth/useSmooth.tsx
 import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef2, useState as useState7 } from "react";
-import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 
 // src/utils/smooth/SmoothContext.tsx
 import {
@@ -1599,7 +1574,7 @@ var useSmooth = (state, smooth = false) => {
   const idRef = useRef2(id);
   const [displayedText, setDisplayedText] = useState7(text);
   const smoothStatusStore = useSmoothStatusStore({ optional: true });
-  const setText = useCallbackRef2((text2) => {
+  const setText = useCallbackRef((text2) => {
     setDisplayedText(text2);
     if (smoothStatusStore) {
       writableStore(smoothStatusStore).setState(
@@ -1837,7 +1812,7 @@ var METHOD_NOT_SUPPORTED = () => {
   throw new Error("Composer is not available");
 };
 var EMPTY_ARRAY = Object.freeze([]);
-var getThreadComposerState = (runtime, focus, onFocus) => {
+var getThreadComposerState = (runtime) => {
   return Object.freeze({
     type: "thread",
     isEditing: runtime?.isEditing ?? false,
@@ -1851,8 +1826,6 @@ var getThreadComposerState = (runtime, focus, onFocus) => {
     // edit: beginEdit,
     send: runtime?.send.bind(runtime) ?? METHOD_NOT_SUPPORTED,
     cancel: runtime?.cancel.bind(runtime) ?? METHOD_NOT_SUPPORTED,
-    focus,
-    onFocus,
     reset: runtime?.reset.bind(runtime) ?? METHOD_NOT_SUPPORTED,
     addAttachment: runtime?.addAttachment.bind(runtime) ?? METHOD_NOT_SUPPORTED,
     removeAttachment: runtime?.removeAttachment.bind(runtime) ?? METHOD_NOT_SUPPORTED
@@ -1969,11 +1942,7 @@ var ThreadComposerRuntimeImpl = class extends ComposerRuntimeImpl {
   _getState;
   constructor(core) {
     const stateBinding = new LazyMemoizeSubject({
-      getState: () => getThreadComposerState(
-        core.getState(),
-        this.focus.bind(this),
-        this.onFocus.bind(this)
-      ),
+      getState: () => getThreadComposerState(core.getState()),
       subscribe: (callback) => core.subscribe(callback)
     });
     super({
@@ -1988,21 +1957,6 @@ var ThreadComposerRuntimeImpl = class extends ComposerRuntimeImpl {
   getState() {
     return this._getState();
   }
-  // TODO replace with events
-  _focusListeners = /* @__PURE__ */ new Set();
-  /**
-   * @deprecated This feature is being removed in 0.6.0. Submit feedback if you need it.
-   */
-  focus() {
-    this._focusListeners.forEach((callback) => callback());
-  }
-  /**
-   * @deprecated This feature is being removed in 0.6.0. Submit feedback if you need it.
-   */
-  onFocus(callback) {
-    this._focusListeners.add(callback);
-    return () => this._focusListeners.delete(callback);
-  }
   getAttachmentByIndex(idx) {
     return new ThreadComposerAttachmentRuntimeImpl(
       new ShallowMemoizeSubject({
@@ -2080,6 +2034,9 @@ var NestedSubscriptionSubject = class extends BaseSubject {
   getState() {
     return this.binding.getState();
   }
+  outerSubscribe(callback) {
+    return this.binding.subscribe(callback);
+  }
   _connect() {
     const callback = () => {
       this.notifySubscribers();
@@ -2094,7 +2051,7 @@ var NestedSubscriptionSubject = class extends BaseSubject {
       innerUnsubscribe = this.binding.getState()?.subscribe(callback);
       callback();
     };
-    const outerUnsubscribe = this.binding.subscribe(onRuntimeUpdate);
+    const outerUnsubscribe = this.outerSubscribe(onRuntimeUpdate);
     return () => {
       outerUnsubscribe?.();
       innerUnsubscribe?.();
@@ -2265,8 +2222,7 @@ var MessageContentPartComponent = ({
     tools: { by_name = {}, Fallback: Fallback2 = void 0 } = {}
   } = {}
 }) => {
-  const messageStore = useMessageStore();
-  const threadRuntime = useThreadRuntime();
+  const contentPartRuntime = useContentPartRuntime();
   const part = useContentPart();
   const type = part.type;
   switch (type) {
@@ -2287,12 +2243,7 @@ var MessageContentPartComponent = ({
       return /* @__PURE__ */ jsx23(UI, { ...part, part });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback2;
-      const addResult = (result) => threadRuntime.addToolResult({
-        messageId: messageStore.getState().id,
-        toolName: part.toolName,
-        toolCallId: part.toolCallId,
-        result
-      });
+      const addResult = (result) => contentPartRuntime.addToolResult(result);
       return /* @__PURE__ */ jsx23(ToolUIDisplay, { ...part, part, UI: Tool, addResult });
     }
     default:
@@ -2475,11 +2426,24 @@ import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef18,
   useCallback as useCallback20,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown as useEscapeKeydown2 } from "@radix-ui/react-use-escape-keydown";
+
+// src/utils/hooks/useOnScrollToBottom.tsx
+import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
+import { useEffect as useEffect11 } from "react";
+var useOnScrollToBottom = (callback) => {
+  const callbackRef = useCallbackRef2(callback);
+  const onScrollToBottom = useThreadViewport((vp) => vp.onScrollToBottom);
+  useEffect11(() => {
+    return onScrollToBottom(callbackRef);
+  }, [onScrollToBottom, callbackRef]);
+};
+
+// src/primitives/composer/ComposerInput.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
 var ComposerPrimitiveInput = forwardRef18(
   ({
@@ -2490,10 +2454,13 @@ var ComposerPrimitiveInput = forwardRef18(
     onKeyDown,
     submitOnEnter = true,
     cancelOnEscape = true,
+    unstable_focusOnRunStart = true,
+    unstable_focusOnScrollToBottom = true,
+    unstable_focusOnThreadSwitched = true,
     ...rest
   }, forwardedRef) => {
-    const threadStore = useThreadStore();
-    const composerStore = useComposerStore();
+    const threadRuntime = useThreadRuntime();
+    const composerRuntime = useComposerRuntime();
     const value = useComposer((c) => {
       if (!c.isEditing) return "";
       return c.text;
@@ -2504,9 +2471,8 @@ var ComposerPrimitiveInput = forwardRef18(
     const ref = useComposedRefs2(forwardedRef, textareaRef);
     useEscapeKeydown2((e) => {
       if (!cancelOnEscape) return;
-      const composer = composerStore.getState();
-      if (composer.canCancel) {
-        composer.cancel();
+      if (composerRuntime.getState().canCancel) {
+        composerRuntime.cancel();
         e.preventDefault();
       }
     });
@@ -2514,7 +2480,7 @@ var ComposerPrimitiveInput = forwardRef18(
       if (isDisabled || !submitOnEnter) return;
       if (e.nativeEvent.isComposing) return;
       if (e.key === "Enter" && e.shiftKey === false) {
-        const { isRunning } = threadStore.getState();
+        const { isRunning } = threadRuntime.getState();
         if (!isRunning) {
           e.preventDefault();
           textareaRef.current?.closest("form")?.requestSubmit();
@@ -2522,7 +2488,7 @@ var ComposerPrimitiveInput = forwardRef18(
       }
     };
     const autoFocusEnabled = autoFocus && !isDisabled;
-    const focus = useCallback20(() => {
+    const focus2 = useCallback20(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoFocusEnabled) return;
       textarea.focus({ preventScroll: true });
@@ -2531,12 +2497,22 @@ var ComposerPrimitiveInput = forwardRef18(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect11(() => focus(), [focus]);
-    useOnComposerFocus(() => {
-      if (composerStore.getState().type === "thread") {
-        focus();
+    useEffect12(() => focus2(), [focus2]);
+    useOnScrollToBottom(() => {
+      if (composerRuntime.type === "thread" && unstable_focusOnScrollToBottom) {
+        focus2();
       }
     });
+    useEffect12(() => {
+      if (composerRuntime.type !== "thread" || !unstable_focusOnRunStart)
+        return void 0;
+      return threadRuntime.unstable_on("run-start", focus2);
+    }, [unstable_focusOnRunStart]);
+    useEffect12(() => {
+      if (composerRuntime.type !== "thread" || !unstable_focusOnThreadSwitched)
+        return void 0;
+      return threadRuntime.unstable_on("switched-to", focus2);
+    }, [unstable_focusOnThreadSwitched]);
     return /* @__PURE__ */ jsx28(
       Component,
       {
@@ -2546,9 +2522,8 @@ var ComposerPrimitiveInput = forwardRef18(
         ref,
         disabled: isDisabled,
         onChange: composeEventHandlers9(onChange, (e) => {
-          const composerState = composerStore.getState();
-          if (!composerState.isEditing) return;
-          return composerState.setText(e.target.value);
+          if (!composerRuntime.getState().isEditing) return;
+          return composerRuntime.setText(e.target.value);
         }),
         onKeyDown: composeEventHandlers9(onKeyDown, handleKeyPress)
       }
@@ -2690,7 +2665,7 @@ import { forwardRef as forwardRef20 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
-import { useRef as useRef4 } from "react";
+import { useEffect as useEffect13, useRef as useRef4 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
@@ -2732,22 +2707,10 @@ var useOnResizeContent = (callback) => {
   return useManagedRef(refCallback);
 };
 
-// src/utils/hooks/useOnScrollToBottom.tsx
-import { useCallbackRef as useCallbackRef4 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect12 } from "react";
-var useOnScrollToBottom = (callback) => {
-  const callbackRef = useCallbackRef4(callback);
-  const threadViewportStore = useThreadViewportStore();
-  useEffect12(() => {
-    return threadViewportStore.getState().onScrollToBottom(() => {
-      callbackRef();
-    });
-  }, [threadViewportStore, callbackRef]);
-};
-
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 var useThreadViewportAutoScroll = ({
-  autoScroll = true
+  autoScroll = true,
+  unstable_scrollToBottomOnRunStart = true
 }) => {
   const divRef = useRef4(null);
   const threadViewportStore = useThreadViewportStore();
@@ -2793,6 +2756,11 @@ var useThreadViewportAutoScroll = ({
   useOnScrollToBottom(() => {
     scrollToBottom("auto");
   });
+  const threadRuntime = useThreadRuntime();
+  useEffect13(() => {
+    if (!unstable_scrollToBottomOnRunStart) return void 0;
+    return threadRuntime.unstable_on("run-start", focus);
+  }, [unstable_scrollToBottomOnRunStart]);
   return autoScrollRef;
 };
 
@@ -2811,7 +2779,7 @@ ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 import { memo as memo5, useMemo as useMemo10 } from "react";
 
 // src/context/providers/MessageRuntimeProvider.tsx
-import { useEffect as useEffect13, useState as useState9 } from "react";
+import { useEffect as useEffect14, useState as useState9 } from "react";
 import { create as create10 } from "zustand";
 
 // src/context/stores/MessageUtils.ts
@@ -2833,14 +2801,14 @@ var makeMessageUtilsStore = () => create9((set) => {
 import { jsx as jsx32 } from "react/jsx-runtime";
 var useMessageRuntimeStore = (runtime) => {
   const [store] = useState9(() => create10(() => runtime));
-  useEffect13(() => {
+  useEffect14(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useMessageStore2 = (runtime) => {
   const [store] = useState9(() => create10(() => runtime.getState()));
-  useEffect13(() => {
+  useEffect14(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
@@ -2854,7 +2822,7 @@ var useMessageUtilsStore2 = () => {
 var useEditComposerStore2 = (useMessageRuntime2) => {
   const runtime = useMessageRuntime2.getState().composer;
   const [store] = useState9(() => create10(() => runtime.getState()));
-  useEffect13(() => {
+  useEffect14(() => {
     const updateState = () => writableStore(store).setState(runtime.getState());
     updateState();
     return runtime.subscribe(updateState);
@@ -3588,6 +3556,7 @@ var ThreadRuntimeImpl = class {
     this._threadBinding = {
       getState: () => threadBinding.getState(),
       getStateState: () => stateBinding.getState(),
+      outerSubscribe: (callback) => threadBinding.outerSubscribe(callback),
       subscribe: (callback) => threadBinding.subscribe(callback)
     };
   }
@@ -3700,6 +3669,20 @@ var ThreadRuntimeImpl = class {
       this._threadBinding
     );
   }
+  _eventListenerNestedSubscriptions = /* @__PURE__ */ new Map();
+  unstable_on(event, callback) {
+    let subject = this._eventListenerNestedSubscriptions.get(event);
+    if (!subject) {
+      subject = new NestedSubscriptionSubject({
+        getState: () => ({
+          subscribe: (callback2) => this._threadBinding.getState().unstable_on(event, callback2)
+        }),
+        subscribe: (callback2) => this._threadBinding.outerSubscribe(callback2)
+      });
+      this._eventListenerNestedSubscriptions.set(event, subject);
+    }
+    return subject.subscribe(callback);
+  }
 };
 
 // src/api/AssistantRuntime.ts
@@ -4163,18 +4146,23 @@ var BaseThreadRuntimeCore = class {
         this.repository.getMessage(messageId)
       )
     );
-    this.notifySubscribers();
+    this._notifySubscribers();
   }
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
   }
   switchToBranch(branchId) {
     this.repository.switchToBranch(branchId);
-    this.notifySubscribers();
+    this._notifySubscribers();
   }
-  notifySubscribers() {
+  _notifySubscribers() {
     for (const callback of this._subscriptions) callback();
   }
+  _notifyEventSubscribers(event) {
+    const subscribers = this._eventSubscribers.get(event);
+    if (!subscribers) return;
+    for (const callback of subscribers) callback();
+  }
   subscribe(callback) {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
@@ -4189,7 +4177,7 @@ var BaseThreadRuntimeCore = class {
     const { message } = this.repository.getMessage(messageId);
     adapter.submit({ message, type });
     this._submittedFeedback[messageId] = { type };
-    this.notifySubscribers();
+    this._notifySubscribers();
   }
   _stopSpeaking;
   speech;
@@ -4206,10 +4194,10 @@ var BaseThreadRuntimeCore = class {
       } else {
         this.speech = { messageId, status: utterance.status };
       }
-      this.notifySubscribers();
+      this._notifySubscribers();
     });
     this.speech = { messageId, status: utterance.status };
-    this.notifySubscribers();
+    this._notifySubscribers();
     this._stopSpeaking = () => {
       utterance.cancel();
       unsub();
@@ -4220,14 +4208,27 @@ var BaseThreadRuntimeCore = class {
   stopSpeaking() {
     if (!this._stopSpeaking) throw new Error("No message is being spoken");
     this._stopSpeaking();
-    this.notifySubscribers();
+    this._notifySubscribers();
   }
   export() {
     return this.repository.export();
   }
   import(data) {
     this.repository.import(data);
-    this.notifySubscribers();
+    this._notifySubscribers();
+  }
+  _eventSubscribers = /* @__PURE__ */ new Map();
+  unstable_on(event, callback) {
+    const subscribers = this._eventSubscribers.get(event);
+    if (!subscribers) {
+      this._eventSubscribers.set(event, /* @__PURE__ */ new Set([callback]));
+    } else {
+      subscribers.add(callback);
+    }
+    return () => {
+      const subscribers2 = this._eventSubscribers.get(event);
+      subscribers2.delete(callback);
+    };
   }
 };
 
@@ -4289,7 +4290,7 @@ var LocalThreadRuntimeCore = class extends BaseThreadRuntimeCore {
       this.capabilities.feedback = canFeedback;
       hasUpdates = true;
     }
-    if (hasUpdates) this.notifySubscribers();
+    if (hasUpdates) this._notifySubscribers();
   }
   async append(message) {
     const newMessage = fromCoreMessage(message, {
@@ -4300,7 +4301,7 @@ var LocalThreadRuntimeCore = class extends BaseThreadRuntimeCore {
       await this.startRun(newMessage.id);
     } else {
       this.repository.resetHead(newMessage.id);
-      this.notifySubscribers();
+      this._notifySubscribers();
     }
   }
   async startRun(parentId) {
@@ -4313,6 +4314,7 @@ var LocalThreadRuntimeCore = class extends BaseThreadRuntimeCore {
       content: [],
       createdAt: /* @__PURE__ */ new Date()
     };
+    this._notifyEventSubscribers("run-start");
     do {
       message = await this.performRoundtrip(parentId, message);
     } while (shouldContinue(message));
@@ -4344,7 +4346,7 @@ var LocalThreadRuntimeCore = class extends BaseThreadRuntimeCore {
         } : void 0
       };
       this.repository.addOrUpdateMessage(parentId, message);
-      this.notifySubscribers();
+      this._notifySubscribers();
     };
     const maxSteps = this.options.maxSteps ? this.options.maxSteps : (this.options.maxToolRoundtrips ?? 1) + 1;
     const steps = message.metadata?.steps?.length ?? 0;
@@ -4455,6 +4457,7 @@ var LocalRuntimeCore = class extends BaseAssistantRuntimeCore {
       this.thread.adapter,
       options
     );
+    this.thread._notifyEventSubscribers("switched-to");
   }
   switchToThread(threadId) {
     if (threadId !== null) {
@@ -4503,7 +4506,7 @@ var useLocalRuntime = (adapter, options = {}) => {
 };
 
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
-import { useEffect as useEffect14, useMemo as useMemo12, useState as useState12 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo12, useState as useState12 } from "react";
 
 // src/runtimes/external-store/getExternalStoreMessage.tsx
 var symbolInnerMessage = Symbol("innerMessage");
@@ -4676,7 +4679,7 @@ var ExternalStoreThreadRuntimeCore = class extends BaseThreadRuntimeCore {
       if (oldStore.convertMessage !== store.convertMessage) {
         this._converter = new ThreadMessageConverter();
       } else if (oldStore.isRunning === store.isRunning && oldStore.messages === store.messages) {
-        this.notifySubscribers();
+        this._notifySubscribers();
         return;
       }
     }
@@ -4716,7 +4719,7 @@ var ExternalStoreThreadRuntimeCore = class extends BaseThreadRuntimeCore {
       this.assistantOptimisticId ?? messages2.at(-1)?.id ?? null
     );
     this._messages = this.repository.getMessages();
-    this.notifySubscribers();
+    this._notifySubscribers();
   }
   switchToBranch(branchId) {
     if (!this._store.setMessages)
@@ -4755,7 +4758,7 @@ var ExternalStoreThreadRuntimeCore = class extends BaseThreadRuntimeCore {
       }
       messages2 = this.repository.getMessages();
     } else {
-      this.notifySubscribers();
+      this._notifySubscribers();
     }
     setTimeout(() => {
       this.updateMessages(messages2);
@@ -4798,6 +4801,7 @@ var ExternalStoreRuntimeCore = class extends BaseAssistantRuntimeCore {
       }
     );
     await this.thread.store.onSwitchToNewThread();
+    this.thread._notifyEventSubscribers("switched-to");
   }
   async switchToThread(threadId) {
     if (threadId !== null) {
@@ -4811,7 +4815,8 @@ var ExternalStoreRuntimeCore = class extends BaseAssistantRuntimeCore {
           // ignore messages until rerender
         }
       );
-      this.thread.store.onSwitchToThread(threadId);
+      await this.thread.store.onSwitchToThread(threadId);
+      this.thread._notifyEventSubscribers("switched-to");
     } else {
       this.switchToNewThread();
     }
@@ -4821,7 +4826,7 @@ var ExternalStoreRuntimeCore = class extends BaseAssistantRuntimeCore {
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
 var useExternalStoreRuntime = (store) => {
   const [runtime] = useState12(() => new ExternalStoreRuntimeCore(store));
-  useEffect14(() => {
+  useEffect15(() => {
     runtime.thread.store = store;
   });
   return useMemo12(
@@ -5562,15 +5567,15 @@ var assistant_message_default = Object.assign(
 );
 
 // src/ui/assistant-modal.tsx
-import { forwardRef as forwardRef34 } from "react";
+import { forwardRef as forwardRef35 } from "react";
 import { BotIcon, ChevronDownIcon } from "lucide-react";
 
 // src/ui/thread.tsx
-import { forwardRef as forwardRef33 } from "react";
+import { forwardRef as forwardRef34 } from "react";
 import { ArrowDownIcon } from "lucide-react";
 
 // src/ui/composer.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 import { PaperclipIcon, SendHorizontalIcon } from "lucide-react";
 
 // src/ui/base/CircleStopIcon.tsx
@@ -5590,15 +5595,117 @@ var CircleStopIcon = () => {
 };
 CircleStopIcon.displayName = "CircleStopIcon";
 
-// src/ui/composer-attachment.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { CircleXIcon } from "lucide-react";
+// src/ui/attachment.tsx
+import {
+  forwardRef as forwardRef28,
+  useEffect as useEffect16,
+  useState as useState14
+} from "react";
+import { CircleXIcon, FileIcon } from "lucide-react";
+
+// src/ui/base/dialog.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import classNames3 from "classnames";
 import { jsx as jsx45, jsxs as jsxs8 } from "react/jsx-runtime";
-var ComposerAttachmentRoot = withDefaults(attachment_exports.Root, {
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: classNames3("aui-dialog-overlay", className),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(DialogPortal, { children: [
+  /* @__PURE__ */ jsx45(DialogOverlay, {}),
+  /* @__PURE__ */ jsx45(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: classNames3("aui-dialog-content", className),
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+// src/ui/attachment.tsx
+import { AvatarFallback as AvatarFallback2 } from "@radix-ui/react-avatar";
+import { jsx as jsx46, jsxs as jsxs9 } from "react/jsx-runtime";
+var AttachmentRoot = withDefaults(attachment_exports.Root, {
   className: "aui-attachment-root"
 });
-ComposerAttachmentRoot.displayName = "ComposerAttachmentRoot";
-var ComposerAttachment2 = () => {
+AttachmentRoot.displayName = "AttachmentRoot";
+var useFileSrc = (file) => {
+  const [src, setSrc] = useState14(void 0);
+  useEffect16(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+var useAttachmentSrc = () => {
+  const { file, src } = useAttachment((a) => {
+    if (a.type !== "image") return {};
+    if (a.file) return { file: a.file };
+    const src2 = a.content?.filter((c) => c.type === "image")[0]?.image;
+    if (!src2) return {};
+    return { src: src2 };
+  });
+  return useFileSrc(file) ?? src;
+};
+var AttachmentPreview = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState14(false);
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx46(
+      "img",
+      {
+        src,
+        style: {
+          width: "auto",
+          height: "auto",
+          maxWidth: "75dvh",
+          maxHeight: "75dvh",
+          display: isLoaded ? "block" : "none",
+          overflow: "clip"
+        },
+        onLoad: () => setIsLoaded(true),
+        alt: "Image Preview"
+      }
+    )
+  );
+};
+var AttachmentPreviewDialog = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return /* @__PURE__ */ jsxs9(Dialog, { children: [
+    /* @__PURE__ */ jsx46(DialogTrigger, { className: "aui-attachment-preview-trigger", asChild: true, children }),
+    /* @__PURE__ */ jsx46(DialogContent, { children: /* @__PURE__ */ jsx46(AttachmentPreview, { src }) })
+  ] });
+};
+var AttachmentThumb = () => {
+  const isImage = useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  return /* @__PURE__ */ jsxs9(AvatarRoot, { className: "aui-attachment-thumb", children: [
+    /* @__PURE__ */ jsx46(AvatarFallback2, { delayMs: isImage ? 200 : 0, children: /* @__PURE__ */ jsx46(FileIcon, {}) }),
+    /* @__PURE__ */ jsx46(AvatarImage, { src })
+  ] });
+};
+var Attachment = () => {
+  const canRemove = useAttachment((a) => a.source !== "message");
   const typeLabel = useAttachment((a) => {
     const type = a.type;
     switch (type) {
@@ -5613,46 +5720,46 @@ var ComposerAttachment2 = () => {
         throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
     }
   });
-  return /* @__PURE__ */ jsxs8(ComposerAttachmentRoot, { children: [
-    /* @__PURE__ */ jsx45(attachment_exports.unstable_Thumb, { className: "aui-attachment-thumb" }),
-    /* @__PURE__ */ jsxs8("div", { className: "aui-attachment-text", children: [
-      /* @__PURE__ */ jsx45("p", { className: "aui-attachment-name", children: /* @__PURE__ */ jsx45(attachment_exports.Name, {}) }),
-      /* @__PURE__ */ jsx45("p", { className: "aui-attachment-type", children: typeLabel })
-    ] }),
-    /* @__PURE__ */ jsx45(ComposerAttachmentRemove, {})
+  return /* @__PURE__ */ jsxs9(Tooltip, { children: [
+    /* @__PURE__ */ jsx46(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(AttachmentRoot, { children: [
+      /* @__PURE__ */ jsx46(AttachmentThumb, {}),
+      /* @__PURE__ */ jsxs9("div", { className: "aui-attachment-text", children: [
+        /* @__PURE__ */ jsx46("p", { className: "aui-attachment-name", children: /* @__PURE__ */ jsx46(attachment_exports.Name, {}) }),
+        /* @__PURE__ */ jsx46("p", { className: "aui-attachment-type", children: typeLabel })
+      ] }),
+      canRemove && /* @__PURE__ */ jsx46(AttachmentRemove, {})
+    ] }) }) }),
+    /* @__PURE__ */ jsx46(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx46(attachment_exports.Name, {}) })
   ] });
 };
-ComposerAttachment2.displayName = "ComposerAttachment";
-var ComposerAttachmentRemove = forwardRef27((props, ref) => {
+Attachment.displayName = "Attachment";
+var AttachmentRemove = forwardRef28((props, ref) => {
   const {
     strings: {
       composer: { removeAttachment: { tooltip = "Remove file" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx45(attachment_exports.Remove, { asChild: true, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(attachment_exports.Remove, { asChild: true, children: /* @__PURE__ */ jsx46(
     TooltipIconButton,
     {
       tooltip,
-      className: "aui-composer-attachment-remove",
+      className: "aui-attachment-remove",
       side: "top",
       ...props,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx45(CircleXIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx46(CircleXIcon, {})
     }
   ) });
 });
-ComposerAttachmentRemove.displayName = "ComposerAttachmentRemove";
+AttachmentRemove.displayName = "AttachmentRemove";
 var exports5 = {
-  Root: ComposerAttachmentRoot,
-  Remove: ComposerAttachmentRemove
+  Root: AttachmentRoot,
+  Remove: AttachmentRemove
 };
-var composer_attachment_default = Object.assign(
-  ComposerAttachment2,
-  exports5
-);
+var attachment_default = Object.assign(Attachment, exports5);
 
 // src/ui/composer.tsx
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
 var useAllowAttachments = (ensureCapability = false) => {
   const { composer: { allowAttachments = true } = {} } = useThreadConfig();
   const attachmentsSupported = useThread((t) => t.capabilities.attachments);
@@ -5660,11 +5767,11 @@ var useAllowAttachments = (ensureCapability = false) => {
 };
 var Composer = () => {
   const allowAttachments = useAllowAttachments(true);
-  return /* @__PURE__ */ jsxs9(ComposerRoot, { children: [
-    allowAttachments && /* @__PURE__ */ jsx46(ComposerAttachments, {}),
-    allowAttachments && /* @__PURE__ */ jsx46(ComposerAddAttachment, {}),
-    /* @__PURE__ */ jsx46(ComposerInput, { autoFocus: true }),
-    /* @__PURE__ */ jsx46(ComposerAction, {})
+  return /* @__PURE__ */ jsxs10(ComposerRoot, { children: [
+    allowAttachments && /* @__PURE__ */ jsx47(ComposerAttachments, {}),
+    allowAttachments && /* @__PURE__ */ jsx47(ComposerAddAttachment, {}),
+    /* @__PURE__ */ jsx47(ComposerInput, { autoFocus: true }),
+    /* @__PURE__ */ jsx47(ComposerAction, {})
   ] });
 };
 Composer.displayName = "Composer";
@@ -5677,14 +5784,14 @@ var ComposerInputStyled = withDefaults(composer_exports.Input, {
   autoFocus: true,
   className: "aui-composer-input"
 });
-var ComposerInput = forwardRef28(
+var ComposerInput = forwardRef29(
   (props, ref) => {
     const {
       strings: {
         composer: { input: { placeholder = "Write a message..." } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx46(ComposerInputStyled, { placeholder, ...props, ref });
+    return /* @__PURE__ */ jsx47(ComposerInputStyled, { placeholder, ...props, ref });
   }
 );
 ComposerInput.displayName = "ComposerInput";
@@ -5692,12 +5799,12 @@ var ComposerAttachmentsContainer = withDefaults("div", {
   className: "aui-composer-attachments"
 });
 var ComposerAttachments = ({ components }) => {
-  return /* @__PURE__ */ jsx46(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx47(
     composer_exports.Attachments,
     {
       components: {
         ...components,
-        Attachment: components?.Attachment ?? composer_attachment_default
+        Attachment: components?.Attachment ?? attachment_default
       }
     }
   ) });
@@ -5706,21 +5813,21 @@ var ComposerAttachButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-attach"
 });
-var ComposerAddAttachment = forwardRef28((props, ref) => {
+var ComposerAddAttachment = forwardRef29((props, ref) => {
   const {
     strings: {
       composer: { addAttachment: { tooltip = "Attach file" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowAttachments = useAllowAttachments();
-  return /* @__PURE__ */ jsx46(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx47(
     ComposerAttachButton,
     {
       tooltip,
       variant: "ghost",
       ...props,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx46(PaperclipIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx47(PaperclipIcon, {})
     }
   ) });
 });
@@ -5731,10 +5838,10 @@ var useAllowCancel = () => {
 };
 var ComposerAction = () => {
   const allowCancel = useAllowCancel();
-  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, {}) })
+  if (!allowCancel) return /* @__PURE__ */ jsx47(ComposerSend, {});
+  return /* @__PURE__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsx47(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx47(ComposerSend, {}) }),
+    /* @__PURE__ */ jsx47(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx47(ComposerCancel, {}) })
   ] });
 };
 ComposerAction.displayName = "ComposerAction";
@@ -5742,12 +5849,12 @@ var ComposerSendButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-send"
 });
-var ComposerSend = forwardRef28(
+var ComposerSend = forwardRef29(
   (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, {}) }) });
+    return /* @__PURE__ */ jsx47(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx47(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx47(SendHorizontalIcon, {}) }) });
   }
 );
 ComposerSend.displayName = "ComposerSend";
@@ -5755,12 +5862,12 @@ var ComposerCancelButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-cancel"
 });
-var ComposerCancel = forwardRef28(
+var ComposerCancel = forwardRef29(
   (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, {}) }) });
+    return /* @__PURE__ */ jsx47(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx47(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx47(CircleStopIcon, {}) }) });
   }
 );
 ComposerCancel.displayName = "ComposerCancel";
@@ -5776,15 +5883,15 @@ var exports6 = {
 var composer_default = Object.assign(Composer, exports6);
 
 // src/ui/thread-welcome.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx48, jsxs as jsxs11 } from "react/jsx-runtime";
 var ThreadWelcome = () => {
-  return /* @__PURE__ */ jsxs10(ThreadWelcomeRoot, { children: [
-    /* @__PURE__ */ jsxs10(ThreadWelcomeCenter, { children: [
-      /* @__PURE__ */ jsx47(ThreadWelcomeAvatar, {}),
-      /* @__PURE__ */ jsx47(ThreadWelcomeMessage, {})
+  return /* @__PURE__ */ jsxs11(ThreadWelcomeRoot, { children: [
+    /* @__PURE__ */ jsxs11(ThreadWelcomeCenter, { children: [
+      /* @__PURE__ */ jsx48(ThreadWelcomeAvatar, {}),
+      /* @__PURE__ */ jsx48(ThreadWelcomeMessage, {})
     ] }),
-    /* @__PURE__ */ jsx47(ThreadWelcomeSuggestions, {})
+    /* @__PURE__ */ jsx48(ThreadWelcomeSuggestions, {})
   ] });
 };
 ThreadWelcome.displayName = "ThreadWelcome";
@@ -5794,20 +5901,20 @@ var ThreadWelcomeRootStyled = withDefaults("div", {
 var ThreadWelcomeCenter = withDefaults("div", {
   className: "aui-thread-welcome-center"
 });
-var ThreadWelcomeRoot = forwardRef29((props, ref) => {
-  return /* @__PURE__ */ jsx47(thread_exports.Empty, { children: /* @__PURE__ */ jsx47(ThreadWelcomeRootStyled, { ...props, ref }) });
+var ThreadWelcomeRoot = forwardRef30((props, ref) => {
+  return /* @__PURE__ */ jsx48(thread_exports.Empty, { children: /* @__PURE__ */ jsx48(ThreadWelcomeRootStyled, { ...props, ref }) });
 });
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx47(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx48(Avatar, { ...avatar });
 };
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
-var ThreadWelcomeMessage = forwardRef29(({ message: messageProp, ...rest }, ref) => {
+var ThreadWelcomeMessage = forwardRef30(({ message: messageProp, ...rest }, ref) => {
   const { welcome: { message = "How can I help you today?" } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx47(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
+  return /* @__PURE__ */ jsx48(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
 ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
 var ThreadWelcomeSuggestionContainer = withDefaults("div", {
@@ -5819,15 +5926,15 @@ var ThreadWelcomeSuggestionStyled = withDefaults(thread_exports.Suggestion, {
 var ThreadWelcomeSuggestion = ({
   suggestion: { text, prompt }
 }) => {
-  return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestionStyled, { prompt, method: "replace", autoSend: true, children: /* @__PURE__ */ jsx47("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt }) });
+  return /* @__PURE__ */ jsx48(ThreadWelcomeSuggestionStyled, { prompt, method: "replace", autoSend: true, children: /* @__PURE__ */ jsx48("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__ */ jsx47(ThreadWelcomeSuggestionContainer, { children: finalSuggestions?.map((suggestion, idx) => {
+  return /* @__PURE__ */ jsx48(ThreadWelcomeSuggestionContainer, { children: finalSuggestions?.map((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
-    return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestion, { suggestion }, key);
+    return /* @__PURE__ */ jsx48(ThreadWelcomeSuggestion, { suggestion }, key);
   }) });
 };
 ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
@@ -5842,12 +5949,12 @@ var exports7 = {
 var thread_welcome_default = Object.assign(ThreadWelcome, exports7);
 
 // src/ui/user-message.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 
 // src/ui/user-action-bar.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 import { PencilIcon } from "lucide-react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var useAllowEdit = (ensureCapability = false) => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const editSupported = useThread((t) => t.capabilities.edit);
@@ -5856,19 +5963,19 @@ var useAllowEdit = (ensureCapability = false) => {
 var UserActionBar = () => {
   const allowEdit = useAllowEdit(true);
   if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx48(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx48(UserActionBarEdit, {}) });
+  return /* @__PURE__ */ jsx49(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx49(UserActionBarEdit, {}) });
 };
 UserActionBar.displayName = "UserActionBar";
 var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-user-action-bar-root"
 });
 UserActionBarRoot.displayName = "UserActionBarRoot";
-var UserActionBarEdit = forwardRef30((props, ref) => {
+var UserActionBarEdit = forwardRef31((props, ref) => {
   const {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
-  return /* @__PURE__ */ jsx48(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx48(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx48(PencilIcon, {}) }) });
+  return /* @__PURE__ */ jsx49(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx49(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx49(PencilIcon, {}) }) });
 });
 UserActionBarEdit.displayName = "UserActionBarEdit";
 var exports8 = {
@@ -5877,44 +5984,6 @@ var exports8 = {
 };
 var user_action_bar_default = Object.assign(UserActionBar, exports8);
 
-// src/ui/user-message-attachment.tsx
-import { jsx as jsx49, jsxs as jsxs11 } from "react/jsx-runtime";
-var UserMessageAttachmentRoot = withDefaults(attachment_exports.Root, {
-  className: "aui-attachment-root"
-});
-UserMessageAttachmentRoot.displayName = "UserMessageAttachmentRoot";
-var UserMessageAttachment = () => {
-  const typeLabel = useAttachment((a) => {
-    const type = a.type;
-    switch (type) {
-      case "image":
-        return "Image";
-      case "document":
-        return "Document";
-      case "file":
-        return "File";
-      default:
-        const _exhaustiveCheck = type;
-        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
-    }
-  });
-  return /* @__PURE__ */ jsxs11(UserMessageAttachmentRoot, { children: [
-    /* @__PURE__ */ jsx49(attachment_exports.unstable_Thumb, { className: "aui-attachment-thumb" }),
-    /* @__PURE__ */ jsxs11("div", { className: "aui-attachment-text", children: [
-      /* @__PURE__ */ jsx49("p", { className: "aui-attachment-name", children: /* @__PURE__ */ jsx49(attachment_exports.Name, {}) }),
-      /* @__PURE__ */ jsx49("p", { className: "aui-attachment-type", children: typeLabel })
-    ] })
-  ] });
-};
-UserMessageAttachment.displayName = "UserMessageAttachment";
-var exports9 = {
-  Root: UserMessageAttachmentRoot
-};
-var user_message_attachment_default = Object.assign(
-  UserMessageAttachment,
-  exports9
-);
-
 // src/ui/user-message.tsx
 import { jsx as jsx50, jsxs as jsxs12 } from "react/jsx-runtime";
 var UserMessage = () => {
@@ -5935,7 +6004,7 @@ UserMessageRoot.displayName = "UserMessageRoot";
 var UserMessageContentWrapper = withDefaults("div", {
   className: "aui-user-message-content"
 });
-var UserMessageContent = forwardRef31(({ components, ...props }, ref) => {
+var UserMessageContent = forwardRef32(({ components, ...props }, ref) => {
   return /* @__PURE__ */ jsx50(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx50(
     message_exports.Content,
     {
@@ -5958,20 +6027,20 @@ var UserMessageAttachments = ({
     {
       components: {
         ...components,
-        Attachment: components?.Attachment ?? user_message_attachment_default
+        Attachment: components?.Attachment ?? attachment_default
       }
     }
   ) }) });
 };
-var exports10 = {
+var exports9 = {
   Root: UserMessageRoot,
   Content: UserMessageContent,
   Attachments: UserMessageAttachments
 };
-var user_message_default = Object.assign(UserMessage, exports10);
+var user_message_default = Object.assign(UserMessage, exports9);
 
 // src/ui/edit-composer.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { jsx as jsx51, jsxs as jsxs13 } from "react/jsx-runtime";
 var EditComposer = () => {
   return /* @__PURE__ */ jsxs13(EditComposerRoot, { children: [
@@ -5995,28 +6064,28 @@ var EditComposerFooter = withDefaults("div", {
   className: "aui-edit-composer-footer"
 });
 EditComposerFooter.displayName = "EditComposerFooter";
-var EditComposerCancel = forwardRef32((props, ref) => {
+var EditComposerCancel = forwardRef33((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 = forwardRef32((props, ref) => {
+var EditComposerSend = forwardRef33((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 = {
+var exports10 = {
   Root: EditComposerRoot,
   Input: EditComposerInput,
   Footer: EditComposerFooter,
   Cancel: EditComposerCancel,
   Send: EditComposerSend
 };
-var edit_composer_default = Object.assign(EditComposer, exports11);
+var edit_composer_default = Object.assign(EditComposer, exports10);
 
 // src/ui/thread.tsx
 import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -6040,7 +6109,7 @@ var Thread = (config) => {
 var ThreadRootStyled = withDefaults(thread_exports.Root, {
   className: "aui-root aui-thread-root"
 });
-var ThreadRoot = forwardRef33(
+var ThreadRoot = forwardRef34(
   ({ config, ...props }, ref) => {
     return /* @__PURE__ */ jsx52(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx52(ThreadRootStyled, { ...props, ref }) });
   }
@@ -6091,7 +6160,7 @@ var ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
   variant: "outline",
   className: "aui-thread-scroll-to-bottom"
 });
-var ThreadScrollToBottom = forwardRef33((props, ref) => {
+var ThreadScrollToBottom = forwardRef34((props, ref) => {
   const {
     strings: {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
@@ -6100,7 +6169,7 @@ var ThreadScrollToBottom = forwardRef33((props, ref) => {
   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 = {
+var exports11 = {
   Root: ThreadRoot,
   Viewport: ThreadViewport,
   Messages: ThreadMessages,
@@ -6108,7 +6177,7 @@ var exports12 = {
   ScrollToBottom: ThreadScrollToBottom,
   ViewportFooter: ThreadViewportFooter
 };
-var thread_default = Object.assign(Thread, exports12);
+var thread_default = Object.assign(Thread, exports11);
 
 // src/ui/assistant-modal.tsx
 import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -6126,7 +6195,7 @@ var AssistantModalRoot = ({
   return /* @__PURE__ */ jsx53(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx53(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
-var AssistantModalTrigger = forwardRef34((props, ref) => {
+var AssistantModalTrigger = forwardRef35((props, ref) => {
   return /* @__PURE__ */ jsx53(AssistantModalAnchor, { children: /* @__PURE__ */ jsx53(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx53(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
@@ -6138,7 +6207,7 @@ var ModalButtonStyled = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-modal-button"
 });
-var AssistantModalButton = forwardRef34(({ "data-state": state, ...rest }, ref) => {
+var AssistantModalButton = forwardRef35(({ "data-state": state, ...rest }, ref) => {
   const {
     strings: {
       assistantModal: {
@@ -6185,14 +6254,14 @@ var AssistantModalContent = withDefaults(assistantModal_exports.Content, {
   sideOffset: 16
 });
 AssistantModalContent.displayName = "AssistantModalContent";
-var exports13 = {
+var exports12 = {
   Root: AssistantModalRoot,
   Trigger: AssistantModalTrigger,
   Content: AssistantModalContent,
   Button: AssistantModalButton,
   Anchor: AssistantModalAnchor
 };
-var assistant_modal_default = Object.assign(AssistantModal, exports13);
+var assistant_modal_default = Object.assign(AssistantModal, exports12);
 export {
   actionBar_exports as ActionBarPrimitive,
   assistant_action_bar_default as AssistantActionBar,
@@ -6201,10 +6270,11 @@ export {
   assistantModal_exports as AssistantModalPrimitive,
   AssistantRuntimeProvider,
   attachment_exports as AttachmentPrimitive,
+  attachment_default as AttachmentUI,
   branch_picker_default as BranchPicker,
   branchPicker_exports as BranchPickerPrimitive,
   composer_default as Composer,
-  composer_attachment_default as ComposerAttachment,
+  attachment_default as ComposerAttachment,
   composer_exports as ComposerPrimitive,
   CompositeAttachmentAdapter,
   content_part_default as ContentPart,
@@ -6222,7 +6292,7 @@ export {
   thread_welcome_default as ThreadWelcome,
   user_action_bar_default as UserActionBar,
   user_message_default as UserMessage,
-  user_message_attachment_default as UserMessageAttachment,
+  attachment_default as UserMessageAttachment,
   WebSpeechSynthesisAdapter,
   fromCoreMessage,
   fromCoreMessages,