@assistant-ui/react 0.5.77 → 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,
     {
@@ -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(
@@ -5593,7 +5598,7 @@ CircleStopIcon.displayName = "CircleStopIcon";
 // src/ui/attachment.tsx
 import {
   forwardRef as forwardRef28,
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useState as useState14
 } from "react";
 import { CircleXIcon, FileIcon } from "lucide-react";
@@ -5638,7 +5643,7 @@ var AttachmentRoot = withDefaults(attachment_exports.Root, {
 AttachmentRoot.displayName = "AttachmentRoot";
 var useFileSrc = (file) => {
   const [src, setSrc] = useState14(void 0);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!file) {
       setSrc(void 0);
       return;