@assistant-ui/react 0.5.81 → 0.5.82

package/dist/index.mjs

@@ -10,13 +10,13 @@ import {
   toLanguageModelMessages,
   toLanguageModelTools,
   toolResultStream
-} from "./chunk-RHM73CQE.mjs";
+} from "./chunk-TWIMAOZR.mjs";
 import {
   __export
 } from "./chunk-BJPOCE4O.mjs";
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-import { memo, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { memo, useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
 
 // src/context/react/AssistantContext.ts
 import { createContext } from "react";
@@ -120,10 +120,10 @@ var makeAssistantToolUIsStore = () => create((set) => {
 });
 
 // src/context/providers/ThreadRuntimeProvider.tsx
-import { useEffect, useMemo, useState } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 
 // src/context/react/ThreadContext.ts
-import { createContext as createContext2 } from "react";
+import { createContext as createContext2, useEffect, useState } from "react";
 var ThreadContext = createContext2(null);
 var useThreadContext = createContextHook(
   ThreadContext,
@@ -156,6 +156,15 @@ var {
   useViewport: useThreadViewport,
   useViewportStore: useThreadViewportStore
 } = createContextStoreHook(useThreadContext, "useViewport");
+function useThreadModelConfig(options) {
+  const [, rerender] = useState({});
+  const runtime = useThreadRuntime(options);
+  useEffect(() => {
+    return runtime?.unstable_on("model-config-update", () => rerender({}));
+  }, [runtime]);
+  if (!runtime) return null;
+  return runtime?.getModelConfig();
+}
 
 // src/context/stores/ThreadViewport.tsx
 import { create as create2 } from "zustand";
@@ -186,15 +195,15 @@ var writableStore = (store) => {
 import { create as create3 } from "zustand";
 import { jsx } from "react/jsx-runtime";
 var useThreadRuntimeStore2 = (runtime) => {
-  const [store] = useState(() => create3(() => runtime));
-  useEffect(() => {
+  const [store] = useState2(() => create3(() => runtime));
+  useEffect2(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useThreadStore2 = (runtime) => {
-  const [store] = useState(() => create3(() => runtime.getState()));
-  useEffect(() => {
+  const [store] = useState2(() => create3(() => runtime.getState()));
+  useEffect2(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
@@ -202,8 +211,8 @@ var useThreadStore2 = (runtime) => {
   return store;
 };
 var useThreadMessagesStore2 = (runtime) => {
-  const [store] = useState(() => create3(() => runtime.messages));
-  useEffect(() => {
+  const [store] = useState2(() => create3(() => runtime.messages));
+  useEffect2(() => {
     const updateState = () => writableStore(store).setState(runtime.messages, true);
     updateState();
     return runtime.subscribe(updateState);
@@ -211,8 +220,8 @@ var useThreadMessagesStore2 = (runtime) => {
   return store;
 };
 var useThreadComposerStore2 = (runtime) => {
-  const [store] = useState(() => create3(() => runtime.getState()));
-  useEffect(() => {
+  const [store] = useState2(() => create3(() => runtime.getState()));
+  useEffect2(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
@@ -242,8 +251,8 @@ var ThreadRuntimeProvider = ({ children, runtime }) => {
 import { create as create4 } from "zustand";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var useAssistantRuntimeStore2 = (runtime) => {
-  const [store] = useState2(() => create4(() => runtime));
-  useEffect2(() => {
+  const [store] = useState3(() => create4(() => runtime));
+  useEffect3(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
@@ -266,7 +275,7 @@ var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
 var AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
 
 // src/context/providers/TextContentPartProvider.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { create as create5 } from "zustand";
 
 // src/context/react/ContentPartContext.ts
@@ -295,6 +304,9 @@ var ContentPartRuntimeImpl = class {
     this.messageApi = messageApi;
     this.threadApi = threadApi;
   }
+  get path() {
+    return this.contentBinding.path;
+  }
   getState() {
     return this.contentBinding.getState();
   }
@@ -328,7 +340,7 @@ var RUNNING_STATUS = {
   type: "running"
 };
 var TextContentPartProvider = ({ children, text, isRunning }) => {
-  const [context] = useState3(() => {
+  const [context] = useState4(() => {
     const useContentPartRuntime2 = create5(
       // TODO
       () => new ContentPartRuntimeImpl(null, null, null)
@@ -341,7 +353,7 @@ var TextContentPartProvider = ({ children, text, isRunning }) => {
     }));
     return { useContentPartRuntime: useContentPartRuntime2, useContentPart: useContentPart2 };
   });
-  useEffect3(() => {
+  useEffect4(() => {
     const state = context.useContentPart.getState();
     const textUpdated = state.text !== text;
     const targetStatus = isRunning ? RUNNING_STATUS : COMPLETE_STATUS;
@@ -432,11 +444,11 @@ var useSwitchToNewThread = () => {
 };
 
 // src/model-config/useAssistantTool.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useAssistantTool = (tool) => {
   const assistantRuntime = useAssistantRuntime();
   const toolUIsStore = useToolUIsStore();
-  useEffect4(() => {
+  useEffect5(() => {
     const { toolName, render, ...rest } = tool;
     const config = {
       tools: {
@@ -465,10 +477,10 @@ var makeAssistantTool = (tool) => {
 };
 
 // src/model-config/useAssistantToolUI.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 var useAssistantToolUI = (tool) => {
   const toolUIsStore = useToolUIsStore();
-  useEffect5(() => {
+  useEffect6(() => {
     if (!tool) return;
     const { toolName, render } = tool;
     return toolUIsStore.getState().setToolUI(toolName, render);
@@ -486,10 +498,10 @@ var makeAssistantToolUI = (tool) => {
 };
 
 // src/model-config/useAssistantInstructions.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 var useAssistantInstructions = (instruction) => {
   const assistantRuntime = useAssistantRuntime();
-  useEffect6(() => {
+  useEffect7(() => {
     const config = {
       system: instruction
     };
@@ -501,64 +513,23 @@ var useAssistantInstructions = (instruction) => {
 
 // src/primitive-hooks/actionBar/useActionBarCopy.tsx
 import { useCallback as useCallback3 } from "react";
-
-// src/utils/combined/useCombinedStore.ts
-import { useMemo as useMemo4 } from "react";
-
-// src/utils/combined/createCombinedStore.ts
-import { useSyncExternalStore } from "react";
-var createCombinedStore = (stores) => {
-  const subscribe = (callback) => {
-    const unsubscribes = stores.map((store) => store.subscribe(callback));
-    return () => {
-      for (const unsub of unsubscribes) {
-        unsub();
-      }
-    };
-  };
-  return (selector) => {
-    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  };
-};
-
-// src/utils/combined/useCombinedStore.ts
-var useCombinedStore = (stores, selector) => {
-  const useCombined = useMemo4(() => createCombinedStore(stores), stores);
-  return useCombined(selector);
-};
-
-// src/utils/getThreadMessageText.tsx
-var getThreadMessageText = (message) => {
-  const textParts = message.content.filter(
-    (part) => part.type === "text"
-  );
-  return textParts.map((part) => part.text).join("\n\n");
-};
-
-// src/primitive-hooks/actionBar/useActionBarCopy.tsx
 var useActionBarCopy = ({
   copiedDuration = 3e3
 } = {}) => {
   const messageRuntime = useMessageRuntime();
   const composerRuntime = useComposerRuntime();
-  const messageUtilsStore = useMessageUtilsStore();
-  const hasCopyableContent = useCombinedStore(
-    [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 setIsCopied = useMessageUtils((s) => s.setIsCopied);
+  const hasCopyableContent = useMessage((message) => {
+    return (message.role !== "assistant" || message.status.type !== "running") && message.content.some((c) => c.type === "text" && c.text.length > 0);
+  });
   const callback = useCallback3(() => {
-    const message = messageRuntime.getState();
-    const { setIsCopied } = messageUtilsStore.getState();
     const { isEditing, text: composerValue } = composerRuntime.getState();
-    const valueToCopy = isEditing ? composerValue : getThreadMessageText(message);
+    const valueToCopy = isEditing ? composerValue : messageRuntime.unstable_getCopyText();
     navigator.clipboard.writeText(valueToCopy).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
     });
-  }, [messageRuntime, messageUtilsStore, composerRuntime, copiedDuration]);
+  }, [messageRuntime, setIsCopied, composerRuntime, copiedDuration]);
   if (!hasCopyableContent) return null;
   return callback;
 };
@@ -577,6 +548,34 @@ var useActionBarEdit = () => {
 
 // src/primitive-hooks/actionBar/useActionBarReload.tsx
 import { useCallback as useCallback5 } from "react";
+
+// src/utils/combined/useCombinedStore.ts
+import { useMemo as useMemo4 } from "react";
+
+// src/utils/combined/createCombinedStore.ts
+import { useSyncExternalStore } from "react";
+var createCombinedStore = (stores) => {
+  const subscribe = (callback) => {
+    const unsubscribes = stores.map((store) => store.subscribe(callback));
+    return () => {
+      for (const unsub of unsubscribes) {
+        unsub();
+      }
+    };
+  };
+  return (selector) => {
+    const getSnapshot = () => selector(...stores.map((store) => store.getState()));
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  };
+};
+
+// src/utils/combined/useCombinedStore.ts
+var useCombinedStore = (stores, selector) => {
+  const useCombined = useMemo4(() => createCombinedStore(stores), stores);
+  return useCombined(selector);
+};
+
+// src/primitive-hooks/actionBar/useActionBarReload.tsx
 var useActionBarReload = () => {
   const messageRuntime = useMessageRuntime();
   const threadRuntime = useThreadRuntime();
@@ -1084,7 +1083,7 @@ __export(assistantModal_exports, {
 });
 
 // src/primitives/assistantModal/AssistantModalRoot.tsx
-import { useEffect as useEffect7, useState as useState4 } from "react";
+import { useEffect as useEffect8, useState as useState5 } from "react";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import { composeEventHandlers as composeEventHandlers6 } from "@radix-ui/primitive";
 
@@ -1098,10 +1097,10 @@ var useAssistantModalOpenState = ({
   defaultOpen = false,
   unstable_openOnRunStart = true
 }) => {
-  const state = useState4(defaultOpen);
+  const state = useState5(defaultOpen);
   const [, setOpen] = state;
   const threadRuntime = useThreadRuntime();
-  useEffect7(() => {
+  useEffect8(() => {
     if (!unstable_openOnRunStart) return void 0;
     return threadRuntime.unstable_on("run-start", () => {
       setOpen(true);
@@ -1434,19 +1433,19 @@ MessagePrimitiveIf.displayName = "MessagePrimitive.If";
 import { memo as memo2, useMemo as useMemo6 } from "react";
 
 // src/context/providers/ContentPartRuntimeProvider.tsx
-import { useEffect as useEffect8, useState as useState5 } from "react";
+import { useEffect as useEffect9, useState as useState6 } from "react";
 import { create as create6 } from "zustand";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var useContentPartRuntimeStore = (runtime) => {
-  const [store] = useState5(() => create6(() => runtime));
-  useEffect8(() => {
+  const [store] = useState6(() => create6(() => runtime));
+  useEffect9(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useContentPartStore2 = (runtime) => {
-  const [store] = useState5(() => create6(() => runtime.getState()));
-  useEffect8(() => {
+  const [store] = useState6(() => create6(() => runtime.getState()));
+  useEffect9(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
@@ -1459,7 +1458,7 @@ var ContentPartRuntimeProvider = ({
 }) => {
   const useContentPartRuntime2 = useContentPartRuntimeStore(runtime);
   const useContentPart2 = useContentPartStore2(runtime);
-  const [context] = useState5(() => {
+  const [context] = useState6(() => {
     return { useContentPartRuntime: useContentPartRuntime2, useContentPart: useContentPart2 };
   });
   return /* @__PURE__ */ jsx19(ContentPartContext.Provider, { value: context, children });
@@ -1471,7 +1470,7 @@ import {
 } from "react";
 
 // src/utils/smooth/useSmooth.tsx
-import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef2, useState as useState7 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo5, useRef as useRef2, useState as useState8 } from "react";
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 
 // src/utils/smooth/SmoothContext.tsx
@@ -1479,7 +1478,7 @@ import {
   createContext as createContext6,
   forwardRef as forwardRef13,
   useContext as useContext3,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { create as create7 } from "zustand";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -1491,7 +1490,7 @@ var makeSmoothContext = (initialState) => {
 var SmoothContextProvider = ({ children }) => {
   const outer = useSmoothContext({ optional: true });
   const contentPartStore = useContentPartStore();
-  const [context] = useState6(
+  const [context] = useState7(
     () => makeSmoothContext(contentPartStore.getState().status)
   );
   if (outer) return children;
@@ -1572,7 +1571,7 @@ var useSmooth = (state, smooth = false) => {
     selector: (m) => m.id
   });
   const idRef = useRef2(id);
-  const [displayedText, setDisplayedText] = useState7(text);
+  const [displayedText, setDisplayedText] = useState8(text);
   const smoothStatusStore = useSmoothStatusStore({ optional: true });
   const setText = useCallbackRef((text2) => {
     setDisplayedText(text2);
@@ -1582,17 +1581,17 @@ var useSmooth = (state, smooth = false) => {
       );
     }
   });
-  useEffect9(() => {
+  useEffect10(() => {
     if (smoothStatusStore) {
       writableStore(smoothStatusStore).setState(
         text !== state.text ? SMOOTH_STATUS : state.status
       );
     }
   }, [smoothStatusStore, text, displayedText, state.status, state.text]);
-  const [animatorRef] = useState7(
+  const [animatorRef] = useState8(
     new TextStreamAnimator(text, setText)
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (!smooth) {
       animatorRef.stop();
       return;
@@ -1608,7 +1607,7 @@ var useSmooth = (state, smooth = false) => {
     animatorRef.targetText = text;
     animatorRef.start();
   }, [setText, animatorRef, id, smooth, text]);
-  useEffect9(() => {
+  useEffect10(() => {
     return () => {
       animatorRef.stop();
     };
@@ -1656,11 +1655,22 @@ var ContentPartPrimitiveInProgress = ({ children }) => {
 };
 ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";
 
+// src/utils/getThreadMessageText.tsx
+var getThreadMessageText = (message) => {
+  const textParts = message.content.filter(
+    (part) => part.type === "text"
+  );
+  return textParts.map((part) => part.text).join("\n\n");
+};
+
 // src/api/AttachmentRuntime.ts
 var AttachmentRuntimeImpl = class {
   constructor(_core) {
     this._core = _core;
   }
+  get path() {
+    return this._core.path;
+  }
   getState() {
     return this._core.getState();
   }
@@ -1739,6 +1749,9 @@ var LazyMemoizeSubject = class extends BaseSubject {
     super();
     this.binding = binding;
   }
+  get path() {
+    return this.binding.path;
+  }
   _previousStateDirty = true;
   _previousState;
   getState = () => {
@@ -1785,6 +1798,9 @@ var ShallowMemoizeSubject = class extends BaseSubject {
       throw new Error("Entry not available in the store");
     this._previousState = state;
   }
+  get path() {
+    return this.binding.path;
+  }
   _previousState;
   getState = () => {
     if (!this.isConnected) this._syncState();
@@ -1851,6 +1867,9 @@ var ComposerRuntimeImpl = class {
   constructor(_core) {
     this._core = _core;
   }
+  get path() {
+    return this._core.path;
+  }
   /**
    * @deprecated Use `getState().isEditing` instead. This will be removed in 0.6.0.
    */
@@ -1936,16 +1955,21 @@ var ComposerRuntimeImpl = class {
   }
 };
 var ThreadComposerRuntimeImpl = class extends ComposerRuntimeImpl {
+  get path() {
+    return this._core.path;
+  }
   get type() {
     return "thread";
   }
   _getState;
   constructor(core) {
     const stateBinding = new LazyMemoizeSubject({
+      path: core.path,
       getState: () => getThreadComposerState(core.getState()),
       subscribe: (callback) => core.subscribe(callback)
     });
     super({
+      path: core.path,
       getState: () => core.getState(),
       subscribe: (callback) => stateBinding.subscribe(callback)
     });
@@ -1960,6 +1984,12 @@ var ThreadComposerRuntimeImpl = class extends ComposerRuntimeImpl {
   getAttachmentByIndex(idx) {
     return new ThreadComposerAttachmentRuntimeImpl(
       new ShallowMemoizeSubject({
+        path: {
+          ...this.path,
+          attachmentSource: "thread-composer",
+          attachmentSelector: { type: "index", index: idx },
+          ref: this.path.ref + `${this.path.ref}.attachments[${idx}]`
+        },
         getState: () => {
           const attachments = this.getState().attachments;
           const attachment = attachments[idx];
@@ -1979,16 +2009,21 @@ var ThreadComposerRuntimeImpl = class extends ComposerRuntimeImpl {
 var EditComposerRuntimeImpl = class extends ComposerRuntimeImpl {
   constructor(core, _beginEdit) {
     const stateBinding = new LazyMemoizeSubject({
+      path: core.path,
       getState: () => getEditComposerState(core.getState(), this._beginEdit),
       subscribe: (callback) => core.subscribe(callback)
     });
     super({
+      path: core.path,
       getState: () => core.getState(),
       subscribe: (callback) => stateBinding.subscribe(callback)
     });
     this._beginEdit = _beginEdit;
     this._getState = stateBinding.getState.bind(stateBinding);
   }
+  get path() {
+    return this._core.path;
+  }
   get type() {
     return "edit";
   }
@@ -2008,6 +2043,12 @@ var EditComposerRuntimeImpl = class extends ComposerRuntimeImpl {
   getAttachmentByIndex(idx) {
     return new EditComposerAttachmentRuntimeImpl(
       new ShallowMemoizeSubject({
+        path: {
+          ...this.path,
+          attachmentSource: "edit-composer",
+          attachmentSelector: { type: "index", index: idx },
+          ref: this.path.ref + `${this.path.ref}.attachments[${idx}]`
+        },
         getState: () => {
           const attachments = this.getState().attachments;
           const attachment = attachments[idx];
@@ -2031,6 +2072,9 @@ var NestedSubscriptionSubject = class extends BaseSubject {
     super();
     this.binding = binding;
   }
+  get path() {
+    return this.binding.path;
+  }
   getState() {
     return this.binding.getState();
   }
@@ -2097,14 +2141,23 @@ var MessageRuntimeImpl = class {
   constructor(_core, _threadBinding) {
     this._core = _core;
     this._threadBinding = _threadBinding;
+    this.composer = new EditComposerRuntimeImpl(
+      new NestedSubscriptionSubject({
+        path: {
+          ...this.path,
+          ref: this.path.ref + `${this.path.ref}.composer`,
+          composerSource: "edit"
+        },
+        getState: () => this._threadBinding.getState().getEditComposer(this._core.getState().id),
+        subscribe: (callback) => this._threadBinding.subscribe(callback)
+      }),
+      () => this._threadBinding.getState().beginEdit(this._core.getState().id)
+    );
   }
-  composer = new EditComposerRuntimeImpl(
-    new NestedSubscriptionSubject({
-      getState: () => this._threadBinding.getState().getEditComposer(this._core.getState().id),
-      subscribe: (callback) => this._threadBinding.subscribe(callback)
-    }),
-    () => this._threadBinding.getState().beginEdit(this._core.getState().id)
-  );
+  get path() {
+    return this._core.path;
+  }
+  composer;
   getState() {
     return this._core.getState();
   }
@@ -2160,13 +2213,21 @@ var MessageRuntimeImpl = class {
     if (!targetBranch) throw new Error("Branch not found");
     this._threadBinding.getState().switchToBranch(targetBranch);
   }
+  unstable_getCopyText() {
+    return getThreadMessageText(this.getState());
+  }
   subscribe(callback) {
     return this._core.subscribe(callback);
   }
   getContentPartByIndex(idx) {
-    if (idx < 0) throw new Error("Message index must be >= 0");
+    if (idx < 0) throw new Error("Content part index must be >= 0");
     return new ContentPartRuntimeImpl(
       new ShallowMemoizeSubject({
+        path: {
+          ...this.path,
+          ref: this.path.ref + `${this.path.ref}.content[${idx}]`,
+          contentPartSelector: { type: "index", index: idx }
+        },
         getState: () => {
           return getContentPartState(this.getState(), idx);
         },
@@ -2176,9 +2237,37 @@ var MessageRuntimeImpl = class {
       this._threadBinding
     );
   }
+  getContentPartByToolCallId(toolCallId) {
+    return new ContentPartRuntimeImpl(
+      new ShallowMemoizeSubject({
+        path: {
+          ...this.path,
+          ref: this.path.ref + `${this.path.ref}.content[toolCallId=${JSON.stringify(toolCallId)}]`,
+          contentPartSelector: { type: "toolCallId", toolCallId }
+        },
+        getState: () => {
+          const state = this._core.getState();
+          const idx = state.content.findIndex(
+            (part) => part.type === "tool-call" && part.toolCallId === toolCallId
+          );
+          if (idx === -1) return SKIP_UPDATE;
+          return getContentPartState(state, idx);
+        },
+        subscribe: (callback) => this._core.subscribe(callback)
+      }),
+      this._core,
+      this._threadBinding
+    );
+  }
   getAttachmentByIndex(idx) {
     return new MessageAttachmentRuntimeImpl(
       new ShallowMemoizeSubject({
+        path: {
+          ...this.path,
+          ref: this.path.ref + `${this.path.ref}.attachments[${idx}]`,
+          attachmentSource: "message",
+          attachmentSelector: { type: "index", index: idx }
+        },
         getState: () => {
           const attachments = this.getState().attachments;
           const attachment = attachments?.[idx];
@@ -2285,22 +2374,22 @@ import { memo as memo3, useMemo as useMemo8 } from "react";
 
 // src/context/providers/AttachmentRuntimeProvider.tsx
 import {
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useMemo as useMemo7,
-  useState as useState8
+  useState as useState9
 } from "react";
 import { create as create8 } from "zustand";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var useAttachmentRuntimeStore = (runtime) => {
-  const [store] = useState8(() => create8(() => runtime));
-  useEffect10(() => {
+  const [store] = useState9(() => create8(() => runtime));
+  useEffect11(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useAttachmentStore = (runtime) => {
-  const [store] = useState8(() => create8(() => runtime.getState()));
-  useEffect10(() => {
+  const [store] = useState9(() => create8(() => runtime.getState()));
+  useEffect11(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
@@ -2426,7 +2515,7 @@ import { Slot } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef18,
   useCallback as useCallback20,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
@@ -2434,11 +2523,11 @@ import { useEscapeKeydown as useEscapeKeydown2 } from "@radix-ui/react-use-escap
 
 // src/utils/hooks/useOnScrollToBottom.tsx
 import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 var useOnScrollToBottom = (callback) => {
   const callbackRef = useCallbackRef2(callback);
   const onScrollToBottom = useThreadViewport((vp) => vp.onScrollToBottom);
-  useEffect11(() => {
+  useEffect12(() => {
     return onScrollToBottom(callbackRef);
   }, [onScrollToBottom, callbackRef]);
 };
@@ -2497,18 +2586,18 @@ var ComposerPrimitiveInput = forwardRef18(
         textareaRef.current.value.length
       );
     }, [autoFocusEnabled]);
-    useEffect12(() => focus2(), [focus2]);
+    useEffect13(() => focus2(), [focus2]);
     useOnScrollToBottom(() => {
       if (composerRuntime.type === "thread" && unstable_focusOnScrollToBottom) {
         focus2();
       }
     });
-    useEffect12(() => {
+    useEffect13(() => {
       if (composerRuntime.type !== "thread" || !unstable_focusOnRunStart)
         return void 0;
       return threadRuntime.unstable_on("run-start", focus2);
     }, [unstable_focusOnRunStart]);
-    useEffect12(() => {
+    useEffect13(() => {
       if (composerRuntime.type !== "thread" || !unstable_focusOnThreadSwitched)
         return void 0;
       return threadRuntime.unstable_on("switched-to", focus2);
@@ -2665,7 +2754,7 @@ import { forwardRef as forwardRef20 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
-import { useEffect as useEffect13, useRef as useRef4 } from "react";
+import { useEffect as useEffect14, useRef as useRef4 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
@@ -2757,7 +2846,7 @@ var useThreadViewportAutoScroll = ({
     scrollToBottom("auto");
   });
   const threadRuntime = useThreadRuntime();
-  useEffect13(() => {
+  useEffect14(() => {
     if (!unstable_scrollToBottomOnRunStart) return void 0;
     return threadRuntime.unstable_on("run-start", focus);
   }, [unstable_scrollToBottomOnRunStart]);
@@ -2779,7 +2868,7 @@ ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 import { memo as memo5, useMemo as useMemo10 } from "react";
 
 // src/context/providers/MessageRuntimeProvider.tsx
-import { useEffect as useEffect14, useState as useState9 } from "react";
+import { useEffect as useEffect15, useState as useState10 } from "react";
 import { create as create10 } from "zustand";
 
 // src/context/stores/MessageUtils.ts
@@ -2800,15 +2889,15 @@ var makeMessageUtilsStore = () => create9((set) => {
 // src/context/providers/MessageRuntimeProvider.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
 var useMessageRuntimeStore = (runtime) => {
-  const [store] = useState9(() => create10(() => runtime));
-  useEffect14(() => {
+  const [store] = useState10(() => create10(() => runtime));
+  useEffect15(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useMessageStore2 = (runtime) => {
-  const [store] = useState9(() => create10(() => runtime.getState()));
-  useEffect14(() => {
+  const [store] = useState10(() => create10(() => runtime.getState()));
+  useEffect15(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
@@ -2816,13 +2905,13 @@ var useMessageStore2 = (runtime) => {
   return store;
 };
 var useMessageUtilsStore2 = () => {
-  const [store] = useState9(() => makeMessageUtilsStore());
+  const [store] = useState10(() => makeMessageUtilsStore());
   return store;
 };
 var useEditComposerStore2 = (useMessageRuntime2) => {
   const runtime = useMessageRuntime2.getState().composer;
-  const [store] = useState9(() => create10(() => runtime.getState()));
-  useEffect14(() => {
+  const [store] = useState10(() => create10(() => runtime.getState()));
+  useEffect15(() => {
     const updateState = () => writableStore(store).setState(runtime.getState());
     updateState();
     return runtime.subscribe(updateState);
@@ -2837,7 +2926,7 @@ var MessageRuntimeProvider = ({
   const useMessage2 = useMessageStore2(runtime);
   const useMessageUtils2 = useMessageUtilsStore2();
   const useEditComposer2 = useEditComposerStore2(useMessageRuntime2);
-  const [context] = useState9(() => {
+  const [context] = useState10(() => {
     return { useMessageRuntime: useMessageRuntime2, useMessage: useMessage2, useMessageUtils: useMessageUtils2, useEditComposer: useEditComposer2 };
   });
   return /* @__PURE__ */ jsx32(MessageContext.Provider, { value: context, children });
@@ -2944,7 +3033,7 @@ var subscribeToMainThread = (runtime, callback) => {
 };
 
 // src/runtimes/local/useLocalRuntime.tsx
-import { useInsertionEffect, useMemo as useMemo11, useState as useState11 } from "react";
+import { useInsertionEffect, useMemo as useMemo11, useState as useState12 } from "react";
 
 // src/runtimes/core/BaseAssistantRuntimeCore.tsx
 var BaseAssistantRuntimeCore = class {
@@ -3110,10 +3199,24 @@ var ProxyConfigProvider = class {
   }
   registerModelConfigProvider(provider) {
     this._providers.add(provider);
+    const unsubscribe = provider.subscribe?.(() => {
+      this.notifySubscribers();
+    });
+    this.notifySubscribers();
     return () => {
       this._providers.delete(provider);
+      unsubscribe?.();
+      this.notifySubscribers();
     };
   }
+  _subscribers = /* @__PURE__ */ new Set();
+  notifySubscribers() {
+    for (const callback of this._subscribers) callback();
+  }
+  subscribe(callback) {
+    this._subscribers.add(callback);
+    return () => this._subscribers.delete(callback);
+  }
 };
 
 // src/utils/idUtils.tsx
@@ -3495,7 +3598,9 @@ var getThreadState = (runtime) => {
   });
 };
 var ThreadRuntimeImpl = class {
-  // public path = "assistant.threads[main]"; // TODO
+  get path() {
+    return this._threadBinding.path;
+  }
   /**
    * @deprecated Use `getState().threadId` instead. This will be removed in 0.6.0.
    */
@@ -3550,22 +3655,30 @@ var ThreadRuntimeImpl = class {
   _threadBinding;
   constructor(threadBinding) {
     const stateBinding = new LazyMemoizeSubject({
+      path: threadBinding.path,
       getState: () => getThreadState(threadBinding.getState()),
       subscribe: (callback) => threadBinding.subscribe(callback)
     });
     this._threadBinding = {
+      path: threadBinding.path,
       getState: () => threadBinding.getState(),
       getStateState: () => stateBinding.getState(),
       outerSubscribe: (callback) => threadBinding.outerSubscribe(callback),
       subscribe: (callback) => threadBinding.subscribe(callback)
     };
+    this.composer = new ThreadComposerRuntimeImpl(
+      new NestedSubscriptionSubject({
+        path: {
+          ...this.path,
+          ref: this.path.ref + `${this.path.ref}.composer`,
+          composerSource: "thread"
+        },
+        getState: () => this._threadBinding.getState().composer,
+        subscribe: (callback) => this._threadBinding.subscribe(callback)
+      })
+    );
   }
-  composer = new ThreadComposerRuntimeImpl(
-    new NestedSubscriptionSubject({
-      getState: () => this._threadBinding.getState().composer,
-      subscribe: (callback) => this._threadBinding.subscribe(callback)
-    })
-  );
+  composer;
   getState() {
     return this._threadBinding.getStateState();
   }
@@ -3643,20 +3756,49 @@ var ThreadRuntimeImpl = class {
   }
   getMesssageByIndex(idx) {
     if (idx < 0) throw new Error("Message index must be >= 0");
+    return this._getMessageRuntime(
+      {
+        ...this.path,
+        ref: this.path.ref + `${this.path.ref}.messages[${idx}]`,
+        messageSelector: { type: "index", index: idx }
+      },
+      () => {
+        const messages2 = this._threadBinding.getState().messages;
+        const message = messages2[idx];
+        if (!message) return void 0;
+        return {
+          message,
+          parentId: messages2[idx - 1]?.id ?? null
+        };
+      }
+    );
+  }
+  getMesssageById(messageId) {
+    return this._getMessageRuntime(
+      {
+        ...this.path,
+        ref: this.path.ref + `${this.path.ref}.messages[messageId=${JSON.stringify(messageId)}]`,
+        messageSelector: { type: "messageId", messageId }
+      },
+      () => this._threadBinding.getState().getMessageById(messageId)
+    );
+  }
+  _getMessageRuntime(path, callback) {
     return new MessageRuntimeImpl(
       new ShallowMemoizeSubject({
+        path,
         getState: () => {
-          const { messages: messages2, speech: speechState } = this.getState();
-          const message = messages2[idx];
-          if (!message) return SKIP_UPDATE;
+          const { message, parentId } = callback() ?? {};
+          const { messages: messages2, speech: speechState } = this._threadBinding.getState();
+          if (!message || parentId === void 0) return SKIP_UPDATE;
           const thread = this._threadBinding.getState();
           const branches = thread.getBranches(message.id);
           const submittedFeedback = thread.getSubmittedFeedback(message.id);
           return {
             ...message,
             message,
-            isLast: idx === messages2.length - 1,
-            parentId: messages2[idx - 1]?.id ?? null,
+            isLast: messages2.at(-1)?.id === message.id,
+            parentId,
             branches,
             branchNumber: branches.indexOf(message.id) + 1,
             branchCount: branches.length,
@@ -3664,7 +3806,7 @@ var ThreadRuntimeImpl = class {
             submittedFeedback
           };
         },
-        subscribe: (callback) => this._threadBinding.subscribe(callback)
+        subscribe: (callback2) => this._threadBinding.subscribe(callback2)
       }),
       this._threadBinding
     );
@@ -3674,6 +3816,7 @@ var ThreadRuntimeImpl = class {
     let subject = this._eventListenerNestedSubscriptions.get(event);
     if (!subject) {
       subject = new NestedSubscriptionSubject({
+        path: this.path,
         getState: () => ({
           subscribe: (callback2) => this._threadBinding.getState().unstable_on(event, callback2)
         }),
@@ -3703,16 +3846,19 @@ var AssistantRuntimeImpl = class _AssistantRuntimeImpl {
   registerModelConfigProvider(provider) {
     return this._core.registerModelConfigProvider(provider);
   }
-  // TODO events for thread switching
   /**
    * @deprecated Thread is now static and never gets updated. This will be removed in 0.6.0.
    */
   subscribe(callback) {
     return this._core.subscribe(callback);
   }
-  static createThreadRuntime(_core, CustomThreadRuntime = ThreadRuntimeImpl) {
+  static createMainThreadRuntime(_core, CustomThreadRuntime = ThreadRuntimeImpl) {
     return new CustomThreadRuntime(
       new NestedSubscriptionSubject({
+        path: {
+          ref: "threads.main",
+          threadSelector: { type: "main" }
+        },
         getState: () => _core.thread,
         subscribe: (callback) => _core.subscribe(callback)
       })
@@ -3721,7 +3867,7 @@ var AssistantRuntimeImpl = class _AssistantRuntimeImpl {
   static create(_core, CustomThreadRuntime = ThreadRuntimeImpl) {
     return new _AssistantRuntimeImpl(
       _core,
-      _AssistantRuntimeImpl.createThreadRuntime(_core, CustomThreadRuntime)
+      _AssistantRuntimeImpl.createMainThreadRuntime(_core, CustomThreadRuntime)
     );
   }
 };
@@ -3893,7 +4039,7 @@ var streamUtils = {
 };
 
 // src/runtimes/edge/useEdgeRuntime.ts
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/runtimes/edge/streams/assistantDecoderStream.ts
 function assistantDecoderStream() {
@@ -4074,7 +4220,7 @@ var splitLocalRuntimeOptions = (options) => {
 // src/runtimes/edge/useEdgeRuntime.ts
 var useEdgeRuntime = (options) => {
   const { localRuntimeOptions, otherOptions } = splitLocalRuntimeOptions(options);
-  const [adapter] = useState10(() => new EdgeChatAdapter(otherOptions));
+  const [adapter] = useState11(() => new EdgeChatAdapter(otherOptions));
   return useLocalRuntime(adapter, localRuntimeOptions);
 };
 
@@ -4126,6 +4272,9 @@ var DefaultEditComposerRuntimeCore = class extends BaseComposerRuntimeCore {
 var BaseThreadRuntimeCore = class {
   constructor(configProvider) {
     this.configProvider = configProvider;
+    this.configProvider.subscribe?.(() => {
+      this._notifyEventSubscribers("model-config-update");
+    });
   }
   _subscriptions = /* @__PURE__ */ new Set();
   repository = new MessageRepository();
@@ -4153,6 +4302,9 @@ var BaseThreadRuntimeCore = class {
     );
     this._notifySubscribers();
   }
+  getMessageById(messageId) {
+    return this.repository.getMessage(messageId);
+  }
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
   }
@@ -4191,7 +4343,7 @@ var BaseThreadRuntimeCore = class {
     if (!adapter) throw new Error("Speech adapter not configured");
     const { message } = this.repository.getMessage(messageId);
     this._stopSpeaking?.();
-    const utterance = adapter.speak(message);
+    const utterance = adapter.speak(getThreadMessageText(message));
     const unsub = utterance.subscribe(() => {
       if (utterance.status.type === "ended") {
         this._stopSpeaking = void 0;
@@ -4497,12 +4649,12 @@ var LocalRuntimeImpl = class _LocalRuntimeImpl extends AssistantRuntimeImpl {
   static create(_core) {
     return new _LocalRuntimeImpl(
       _core,
-      AssistantRuntimeImpl.createThreadRuntime(_core, ThreadRuntimeImpl)
+      AssistantRuntimeImpl.createMainThreadRuntime(_core, ThreadRuntimeImpl)
     );
   }
 };
 var useLocalRuntime = (adapter, options = {}) => {
-  const [runtime] = useState11(() => new LocalRuntimeCore(adapter, options));
+  const [runtime] = useState12(() => new LocalRuntimeCore(adapter, options));
   useInsertionEffect(() => {
     runtime.thread.adapter = adapter;
     runtime.thread.options = options;
@@ -4511,7 +4663,7 @@ var useLocalRuntime = (adapter, options = {}) => {
 };
 
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
-import { useEffect as useEffect15, useMemo as useMemo12, useState as useState12 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo12, useState as useState13 } from "react";
 
 // src/runtimes/external-store/getExternalStoreMessage.tsx
 var symbolInnerMessage = Symbol("innerMessage");
@@ -4830,8 +4982,8 @@ var ExternalStoreRuntimeCore = class extends BaseAssistantRuntimeCore {
 
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
 var useExternalStoreRuntime = (store) => {
-  const [runtime] = useState12(() => new ExternalStoreRuntimeCore(store));
-  useEffect15(() => {
+  const [runtime] = useState13(() => new ExternalStoreRuntimeCore(store));
+  useEffect16(() => {
     runtime.thread.store = store;
   });
   return useMemo12(
@@ -4987,7 +5139,7 @@ var shallowArrayEqual = (a, b) => {
 };
 
 // src/runtimes/dangerous-in-browser/useDangerousInBrowserRuntime.ts
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 
 // src/runtimes/dangerous-in-browser/DangerousInBrowserAdapter.ts
 var DangerousInBrowserAdapter = class {
@@ -5016,14 +5168,13 @@ var DangerousInBrowserAdapter = class {
 // src/runtimes/dangerous-in-browser/useDangerousInBrowserRuntime.ts
 var useDangerousInBrowserRuntime = (options) => {
   const { localRuntimeOptions, otherOptions } = splitLocalRuntimeOptions(options);
-  const [adapter] = useState13(() => new DangerousInBrowserAdapter(otherOptions));
+  const [adapter] = useState14(() => new DangerousInBrowserAdapter(otherOptions));
   return useLocalRuntime(adapter, localRuntimeOptions);
 };
 
 // src/runtimes/speech/WebSpeechSynthesisAdapter.ts
 var WebSpeechSynthesisAdapter = class {
-  speak(message) {
-    const text = getThreadMessageText(message);
+  speak(text) {
     const utterance = new SpeechSynthesisUtterance(text);
     const subscribers = /* @__PURE__ */ new Set();
     const handleEnd = (reason, error) => {
@@ -5603,8 +5754,8 @@ CircleStopIcon.displayName = "CircleStopIcon";
 // src/ui/attachment.tsx
 import {
   forwardRef as forwardRef28,
-  useEffect as useEffect16,
-  useState as useState14
+  useEffect as useEffect17,
+  useState as useState15
 } from "react";
 import { CircleXIcon, FileIcon } from "lucide-react";
 
@@ -5647,8 +5798,8 @@ var AttachmentRoot = withDefaults(attachment_exports.Root, {
 });
 AttachmentRoot.displayName = "AttachmentRoot";
 var useFileSrc = (file) => {
-  const [src, setSrc] = useState14(void 0);
-  useEffect16(() => {
+  const [src, setSrc] = useState15(void 0);
+  useEffect17(() => {
     if (!file) {
       setSrc(void 0);
       return;
@@ -5672,7 +5823,7 @@ var useAttachmentSrc = () => {
   return useFileSrc(file) ?? src;
 };
 var AttachmentPreview = ({ src }) => {
-  const [isLoaded, setIsLoaded] = useState14(false);
+  const [isLoaded, setIsLoaded] = useState15(false);
   return (
     // eslint-disable-next-line @next/next/no-img-element
     /* @__PURE__ */ jsx46(
@@ -6373,6 +6524,7 @@ export {
   useThreadIf,
   useThreadMessages,
   useThreadMessagesStore,
+  useThreadModelConfig,
   useThreadRuntime,
   useThreadRuntimeStore,
   useThreadScrollToBottom,