@assistant-ui/react 0.5.63 → 0.5.66

package/dist/index.mjs

@@ -16,10 +16,7 @@ import {
 } from "./chunk-BJPOCE4O.mjs";
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-import { memo } from "react";
-
-// src/context/providers/AssistantProvider.tsx
-import { useEffect as useEffect2, useInsertionEffect, useRef, useState as useState2 } from "react";
+import { memo, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 
 // src/context/react/AssistantContext.ts
 import { createContext } from "react";
@@ -122,8 +119,8 @@ var makeAssistantToolUIsStore = () => create((set) => {
   });
 });
 
-// src/context/providers/ThreadProvider.tsx
-import { useEffect, useState } from "react";
+// src/context/providers/ThreadRuntimeProvider.tsx
+import { useEffect, useMemo, useState } from "react";
 
 // src/context/react/ThreadContext.ts
 import { createContext as createContext2 } from "react";
@@ -160,10 +157,9 @@ var {
 
 // src/context/stores/ThreadComposer.ts
 import { create as create2 } from "zustand";
-var makeThreadComposerStore = (useThreadRuntime2) => {
+var makeThreadComposerStore = (runtime) => {
   const focusListeners = /* @__PURE__ */ new Set();
   return create2()((_, get) => {
-    const runtime = useThreadRuntime2.getState();
     return {
       type: "thread",
       get value() {
@@ -172,30 +168,27 @@ var makeThreadComposerStore = (useThreadRuntime2) => {
       setValue(value) {
         get().setText(value);
       },
-      attachmentAccept: runtime.composer.attachmentAccept,
-      attachments: runtime.composer.attachments,
+      ...runtime.getState(),
+      canCancel: false,
+      // "TODO",
+      isEditing: true,
       addAttachment: (file) => {
-        useThreadRuntime2.getState().composer.addAttachment(file);
+        runtime.addAttachment(file);
       },
       removeAttachment: (attachmentId) => {
-        useThreadRuntime2.getState().composer.removeAttachment(attachmentId);
+        runtime.removeAttachment(attachmentId);
       },
       reset: () => {
-        useThreadRuntime2.getState().composer.reset();
+        runtime.reset();
       },
-      text: runtime.composer.text,
       setText: (text) => {
-        useThreadRuntime2.getState().composer.setText(text);
+        runtime.setText(text);
       },
-      canCancel: runtime.capabilities.cancel,
-      isEditing: true,
-      isEmpty: runtime.composer.isEmpty,
       send: () => {
-        const runtime2 = useThreadRuntime2.getState();
-        runtime2.composer.send();
+        runtime.send();
       },
       cancel: () => {
-        useThreadRuntime2.getState().cancelRun();
+        runtime.cancel();
       },
       focus: () => {
         for (const listener of focusListeners) {
@@ -212,27 +205,11 @@ var makeThreadComposerStore = (useThreadRuntime2) => {
   });
 };
 
-// src/context/stores/Thread.ts
-import { create as create3 } from "zustand";
-var getThreadStateFromRuntime = (runtime) => {
-  const lastMessage = runtime.messages.at(-1);
-  return Object.freeze({
-    threadId: runtime.threadId,
-    capabilities: runtime.capabilities,
-    isDisabled: runtime.isDisabled,
-    isRunning: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running"
-  });
-};
-var makeThreadStore = (runtimeRef) => {
-  const runtime = runtimeRef.getState();
-  return create3(() => getThreadStateFromRuntime(runtime));
-};
-
 // src/context/stores/ThreadViewport.tsx
-import { create as create4 } from "zustand";
+import { create as create3 } from "zustand";
 var makeThreadViewportStore = () => {
   const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return create4(() => ({
+  return create3(() => ({
     isAtBottom: true,
     scrollToBottom: () => {
       for (const listener of scrollToBottomListeners) {
@@ -248,85 +225,65 @@ var makeThreadViewportStore = () => {
   }));
 };
 
-// src/context/stores/ThreadMessages.ts
-import { create as create5 } from "zustand";
-var makeThreadMessagesStore = (runtimeRef) => {
-  return create5(() => runtimeRef.getState().messages);
-};
-
 // src/context/ReadonlyStore.ts
 var writableStore = (store) => {
   return store;
 };
 
-// src/context/providers/ThreadProvider.tsx
-import { create as create6 } from "zustand";
+// src/context/providers/ThreadRuntimeProvider.tsx
+import { create as create4 } from "zustand";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ThreadProvider = ({
-  children,
-  provider: thread
-}) => {
-  const [context] = useState(() => {
-    const useThreadRuntime2 = create6(() => thread);
-    const useThread2 = makeThreadStore(useThreadRuntime2);
-    const useThreadMessages2 = makeThreadMessagesStore(useThreadRuntime2);
+var useThreadRuntimeStore2 = (runtime) => {
+  const [store] = useState(() => create4(() => runtime));
+  useEffect(() => {
+    writableStore(store).setState(runtime, true);
+  }, [runtime, store]);
+  return store;
+};
+var useThreadStore2 = (runtime) => {
+  const [store] = useState(() => create4(() => runtime.getState()));
+  useEffect(() => {
+    const updateState = () => writableStore(store).setState(runtime.getState(), true);
+    updateState();
+    return runtime.subscribe(updateState);
+  }, [runtime, store]);
+  return store;
+};
+var useThreadMessagesStore2 = (runtime) => {
+  const [store] = useState(() => create4(() => runtime.messages));
+  useEffect(() => {
+    const updateState = () => writableStore(store).setState(runtime.messages, true);
+    updateState();
+    return runtime.subscribe(updateState);
+  }, [runtime, store]);
+  return store;
+};
+var useThreadComposerStore2 = (runtime) => {
+  const [store] = useState(() => makeThreadComposerStore(runtime));
+  useEffect(() => {
+    const updateState = () => writableStore(store).setState(runtime.getState());
+    updateState();
+    return runtime.subscribe(updateState);
+  }, [runtime, store]);
+  return store;
+};
+var ThreadRuntimeProvider = ({ children, runtime }) => {
+  const useThreadRuntime2 = useThreadRuntimeStore2(runtime);
+  const useThread2 = useThreadStore2(runtime);
+  const useThreadMessages2 = useThreadMessagesStore2(runtime);
+  const useThreadComposer2 = useThreadComposerStore2(runtime.composer);
+  const context = useMemo(() => {
     const useViewport = makeThreadViewportStore();
-    const useComposer2 = makeThreadComposerStore(useThreadRuntime2);
     return {
       useThread: useThread2,
       useThreadRuntime: useThreadRuntime2,
       useThreadMessages: useThreadMessages2,
       useThreadActions: useThreadRuntime2,
-      useComposer: useComposer2,
+      useComposer: useThreadComposer2,
       useViewport
     };
-  });
-  useEffect(() => {
-    const onThreadUpdate = () => {
-      const oldState = context.useThread.getState();
-      const state = getThreadStateFromRuntime(thread);
-      if (oldState.threadId !== state.threadId || oldState.isDisabled !== state.isDisabled || oldState.isRunning !== state.isRunning || oldState.capabilities !== state.capabilities) {
-        writableStore(context.useThread).setState(state, true);
-      }
-      if (thread.messages !== context.useThreadMessages.getState()) {
-        writableStore(context.useThreadMessages).setState(
-          thread.messages,
-          true
-        );
-      }
-      const composerState = context.useComposer.getState();
-      if (state.capabilities.cancel !== composerState.canCancel) {
-        writableStore(context.useComposer).setState({
-          canCancel: state.capabilities.cancel
-        });
-      }
-    };
-    onThreadUpdate();
-    return thread.subscribe(onThreadUpdate);
-  }, [thread, context]);
-  useEffect(() => {
-    const onComposerUpdate = () => {
-      const composer = thread.composer;
-      const composerState = context.useComposer.getState();
-      if (composer.isEmpty !== composerState.isEmpty || composer.text !== composerState.text || composer.attachmentAccept !== composerState.attachmentAccept || composer.attachments !== composerState.attachments) {
-        writableStore(context.useComposer).setState({
-          isEmpty: composer.isEmpty,
-          text: composer.text,
-          attachmentAccept: composer.attachmentAccept,
-          attachments: composer.attachments
-        });
-      }
-    };
-    onComposerUpdate();
-    return thread.composer.subscribe(onComposerUpdate);
-  }, [thread, context]);
-  useEffect(
-    () => thread.subscribe(() => {
-      writableStore(context.useThreadRuntime).setState(thread, true);
-    }),
-    [thread, context]
-  );
-  const Synchronizer = context.useThreadRuntime(
+  }, [useThread2, useThreadRuntime2, useThreadMessages2, useThreadComposer2]);
+  const Synchronizer = context.useThread(
     (t) => t.unstable_synchronizer
   );
   return /* @__PURE__ */ jsxs(ThreadContext.Provider, { value: context, children: [
@@ -335,40 +292,36 @@ var ThreadProvider = ({
   ] });
 };
 
-// src/context/providers/AssistantProvider.tsx
-import { create as create7 } from "zustand";
+// src/context/providers/AssistantRuntimeProvider.tsx
+import { create as create5 } from "zustand";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var AssistantProvider = ({ children, runtime }) => {
-  const runtimeRef = useRef(runtime);
-  useInsertionEffect(() => {
-    runtimeRef.current = runtime;
-  });
-  const [context] = useState2(() => {
-    const useAssistantRuntime2 = create7(() => runtime);
-    const useToolUIs2 = makeAssistantToolUIsStore();
+var useAssistantRuntimeStore2 = (runtime) => {
+  const [store] = useState2(() => create5(() => runtime));
+  useEffect2(() => {
+    writableStore(store).setState(runtime, true);
+  }, [runtime, store]);
+  return store;
+};
+var useAssistantToolUIsStore = () => {
+  return useMemo2(() => makeAssistantToolUIsStore(), []);
+};
+var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
+  const useAssistantRuntime2 = useAssistantRuntimeStore2(runtime);
+  const useToolUIs2 = useAssistantToolUIsStore();
+  const context = useMemo2(() => {
     return {
       useToolUIs: useToolUIs2,
       useAssistantRuntime: useAssistantRuntime2,
       useAssistantActions: useAssistantRuntime2
     };
-  });
-  useEffect2(
-    () => writableStore(context.useAssistantRuntime).setState(runtime, true),
-    [runtime, context]
-  );
-  return /* @__PURE__ */ jsx2(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx2(ThreadProvider, { provider: runtime.thread, children }) });
-};
-
-// src/context/providers/AssistantRuntimeProvider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var AssistantRuntimeProviderImpl = ({ children, runtime }) => {
-  return /* @__PURE__ */ jsx3(AssistantProvider, { runtime, children });
+  }, [useAssistantRuntime2, useToolUIs2]);
+  return /* @__PURE__ */ jsx2(AssistantContext.Provider, { value: context, children: /* @__PURE__ */ jsx2(ThreadRuntimeProvider, { runtime: runtime.thread, children }) });
 };
 var AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
 
 // src/context/providers/TextContentPartProvider.tsx
 import { useEffect as useEffect3, useState as useState3 } from "react";
-import { create as create8 } from "zustand";
+import { create as create6 } from "zustand";
 
 // src/context/react/ContentPartContext.ts
 import { createContext as createContext3 } from "react";
@@ -385,7 +338,7 @@ var { useContentPart, useContentPartStore } = createContextStoreHook(
 );
 
 // src/context/providers/TextContentPartProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var COMPLETE_STATUS = {
   type: "complete"
 };
@@ -394,7 +347,7 @@ var RUNNING_STATUS = {
 };
 var TextContentPartProvider = ({ children, text, isRunning }) => {
   const [context] = useState3(() => {
-    const useContentPart2 = create8(() => ({
+    const useContentPart2 = create6(() => ({
       status: isRunning ? RUNNING_STATUS : COMPLETE_STATUS,
       part: { type: "text", text }
     }));
@@ -417,7 +370,7 @@ var TextContentPartProvider = ({ children, text, isRunning }) => {
       true
     );
   }, [context, isRunning, text]);
-  return /* @__PURE__ */ jsx4(ContentPartContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx3(ContentPartContext.Provider, { value: context, children });
 };
 
 // src/context/react/MessageContext.ts
@@ -427,6 +380,11 @@ var useMessageContext = createContextHook(
   MessageContext,
   "a component passed to <ThreadPrimitive.Messages components={...} />"
 );
+function useMessageRuntime(options) {
+  const context = useMessageContext(options);
+  if (!context) return null;
+  return context.useMessageRuntime();
+}
 var { useMessage, useMessageStore } = createContextStoreHook(
   useMessageContext,
   "useMessage"
@@ -441,11 +399,11 @@ var { useEditComposer, useEditComposerStore } = createContextStoreHook(
 );
 
 // src/context/react/ComposerContext.ts
-import { useMemo } from "react";
+import { useMemo as useMemo3 } from "react";
 var useComposerContext = () => {
   const { useComposer: useComposer2 } = useThreadContext();
   const { useEditComposer: useEditComposer2 } = useMessageContext({ optional: true }) ?? {};
-  return useMemo(
+  return useMemo3(
     () => ({
       useComposer: useEditComposer2 ?? useComposer2,
       type: useEditComposer2 ? "edit" : "new"
@@ -460,40 +418,17 @@ var { useComposer, useComposerStore } = createContextStoreHook(
 
 // src/hooks/useAppendMessage.tsx
 import { useCallback } from "react";
-var toAppendMessage = (useThreadMessages2, message) => {
-  if (typeof message === "string") {
-    return {
-      parentId: useThreadMessages2.getState().at(-1)?.id ?? null,
-      role: "user",
-      content: [{ type: "text", text: message }],
-      attachments: []
-    };
-  }
-  return {
-    parentId: message.parentId ?? useThreadMessages2.getState().at(-1)?.id ?? null,
-    role: message.role ?? "user",
-    content: message.content,
-    attachments: message.attachments ?? []
-  };
-};
 var useAppendMessage = () => {
-  const threadMessagesStore = useThreadMessagesStore();
   const threadRuntime = useThreadRuntime();
   const threadViewportStore = useThreadViewportStore();
   const threadComposerStore = useThreadComposerStore();
   const append = useCallback(
     (message) => {
-      const appendMessage = toAppendMessage(threadMessagesStore, message);
-      threadRuntime.append(appendMessage);
+      threadRuntime.append(message);
       threadViewportStore.getState().scrollToBottom();
       threadComposerStore.getState().focus();
     },
-    [
-      threadMessagesStore,
-      threadRuntime,
-      threadViewportStore,
-      threadComposerStore
-    ]
+    [threadRuntime, threadViewportStore, threadComposerStore]
   );
   return append;
 };
@@ -582,7 +517,7 @@ var useAssistantInstructions = (instruction) => {
 import { useCallback as useCallback3 } from "react";
 
 // src/utils/combined/useCombinedStore.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/utils/combined/createCombinedStore.ts
 import { useSyncExternalStore } from "react";
@@ -603,7 +538,7 @@ var createCombinedStore = (stores) => {
 
 // src/utils/combined/useCombinedStore.ts
 var useCombinedStore = (stores, selector) => {
-  const useCombined = useMemo2(() => createCombinedStore(stores), stores);
+  const useCombined = useMemo4(() => createCombinedStore(stores), stores);
   return useCombined(selector);
 };
 
@@ -624,12 +559,12 @@ var useActionBarCopy = ({
   const editComposerStore = useEditComposerStore();
   const hasCopyableContent = useCombinedStore(
     [messageStore, editComposerStore],
-    ({ message }, c) => {
+    (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 = messageStore.getState();
     const { setIsCopied } = messageUtilsStore.getState();
     const { isEditing, text: composerValue } = editComposerStore.getState();
     const valueToCopy = isEditing ? composerValue : getThreadMessageText(message);
@@ -665,7 +600,7 @@ var useActionBarReload = () => {
   const threadViewportStore = useThreadViewportStore();
   const disabled = useCombinedStore(
     [threadStore, messageStore],
-    (t, m) => t.isRunning || t.isDisabled || m.message.role !== "assistant"
+    (t, m) => t.isRunning || t.isDisabled || m.role !== "assistant"
   );
   const callback = useCallback5(() => {
     const { parentId } = messageStore.getState();
@@ -719,7 +654,7 @@ var useActionBarFeedbackPositive = () => {
   const messageUtilsStore = useMessageUtilsStore();
   const callback = useCallback8(() => {
     threadRuntime.submitFeedback({
-      messageId: messageStore.getState().message.id,
+      messageId: messageStore.getState().id,
       type: "positive"
     });
     messageUtilsStore.getState().setSubmittedFeedback("positive");
@@ -735,7 +670,7 @@ var useActionBarFeedbackNegative = () => {
   const messageUtilsStore = useMessageUtilsStore();
   const callback = useCallback9(() => {
     threadRuntime.submitFeedback({
-      messageId: messageStore.getState().message.id,
+      messageId: messageStore.getState().id,
       type: "negative"
     });
     messageUtilsStore.getState().setSubmittedFeedback("negative");
@@ -745,48 +680,46 @@ var useActionBarFeedbackNegative = () => {
 
 // src/primitive-hooks/branchPicker/useBranchPickerCount.tsx
 var useBranchPickerCount = () => {
-  const branchCount = useMessage((s) => s.branches.length);
+  const branchCount = useMessage((s) => s.branchCount);
   return branchCount;
 };
 
 // src/primitive-hooks/branchPicker/useBranchPickerNext.tsx
 import { useCallback as useCallback10 } from "react";
 var useBranchPickerNext = () => {
+  const messageRuntime = useMessageRuntime();
   const messageStore = useMessageStore();
   const editComposerStore = useEditComposerStore();
-  const threadRuntime = useThreadRuntime();
   const disabled = useCombinedStore(
     [messageStore, editComposerStore],
-    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) + 1 >= m.branches.length
+    (m, c) => c.isEditing || m.branchNumber >= m.branchCount
   );
   const callback = useCallback10(() => {
-    const { message, branches } = messageStore.getState();
-    threadRuntime.switchToBranch(branches[branches.indexOf(message.id) + 1]);
-  }, [threadRuntime, messageStore]);
+    messageRuntime.switchToBranch({ position: "next" });
+  }, [messageRuntime]);
   if (disabled) return null;
   return callback;
 };
 
 // src/primitive-hooks/branchPicker/useBranchPickerNumber.tsx
 var useBranchPickerNumber = () => {
-  const branchIdx = useMessage((s) => s.branches.indexOf(s.message.id));
-  return branchIdx + 1;
+  const branchNumber = useMessage((s) => s.branchNumber);
+  return branchNumber;
 };
 
 // src/primitive-hooks/branchPicker/useBranchPickerPrevious.tsx
 import { useCallback as useCallback11 } from "react";
 var useBranchPickerPrevious = () => {
+  const messageRuntime = useMessageRuntime();
   const messageStore = useMessageStore();
   const editComposerStore = useEditComposerStore();
-  const threadRuntime = useThreadRuntime();
   const disabled = useCombinedStore(
     [messageStore, editComposerStore],
-    (m, c) => c.isEditing || m.branches.indexOf(m.message.id) <= 0
+    (m, c) => c.isEditing || m.branchNumber <= 1
   );
   const callback = useCallback11(() => {
-    const { message, branches } = messageStore.getState();
-    threadRuntime.switchToBranch(branches[branches.indexOf(message.id) - 1]);
-  }, [threadRuntime, messageStore]);
+    messageRuntime.switchToBranch({ position: "previous" });
+  }, [messageRuntime]);
   if (disabled) return null;
   return callback;
 };
@@ -902,19 +835,19 @@ var useMessageIf = (props) => {
   const messageUtilsStore = useMessageUtilsStore();
   return useCombinedStore(
     [messageStore, messageUtilsStore],
-    ({ message, branches, isLast }, { isCopied, isHovering, isSpeaking, submittedFeedback }) => {
-      if (props.hasBranches === true && branches.length < 2) return false;
-      if (props.user && message.role !== "user") return false;
-      if (props.assistant && message.role !== "assistant") return false;
-      if (props.system && message.role !== "system") return false;
+    ({ role, attachments, branchCount, isLast }, { isCopied, isHovering, isSpeaking, submittedFeedback }) => {
+      if (props.hasBranches === true && branchCount < 2) return false;
+      if (props.user && role !== "user") return false;
+      if (props.assistant && role !== "assistant") return false;
+      if (props.system && role !== "system") return false;
       if (props.lastOrHover === true && !isHovering && !isLast) return false;
       if (props.copied === true && !isCopied) return false;
       if (props.copied === false && isCopied) return false;
       if (props.speaking === true && !isSpeaking) return false;
       if (props.speaking === false && isSpeaking) return false;
-      if (props.hasAttachments === true && (message.role !== "user" || !message.attachments.length))
+      if (props.hasAttachments === true && (role !== "user" || !attachments.length))
         return false;
-      if (props.hasAttachments === false && message.role === "user" && !!message.attachments.length)
+      if (props.hasAttachments === false && role === "user" && !!attachments.length)
         return false;
       if (props.submittedFeedback !== void 0 && submittedFeedback !== props.submittedFeedback)
         return false;
@@ -1025,7 +958,7 @@ var useActionBarFloatStatus = ({
 };
 
 // src/primitives/actionBar/ActionBarRoot.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var ActionBarPrimitiveRoot = forwardRef(({ hideWhenRunning, autohide, autohideFloat, ...rest }, ref) => {
   const hideAndfloatStatus = useActionBarFloatStatus({
     hideWhenRunning,
@@ -1033,7 +966,7 @@ var ActionBarPrimitiveRoot = forwardRef(({ hideWhenRunning, autohide, autohideFl
     autohideFloat
   });
   if (hideAndfloatStatus === "hidden" /* Hidden */) return null;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     Primitive.div,
     {
       ...hideAndfloatStatus === "floating" /* Floating */ ? { "data-floating": "true" } : null,
@@ -1048,11 +981,11 @@ ActionBarPrimitiveRoot.displayName = "ActionBarPrimitive.Root";
 import { forwardRef as forwardRef2 } from "react";
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ActionBarPrimitiveCopy = forwardRef2(({ copiedDuration, onClick, disabled, ...props }, forwardedRef) => {
   const isCopied = useMessageUtils((u) => u.isCopied);
   const callback = useActionBarCopy({ copiedDuration });
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     Primitive2.button,
     {
       type: "button",
@@ -1072,7 +1005,7 @@ ActionBarPrimitiveCopy.displayName = "ActionBarPrimitive.Copy";
 import { forwardRef as forwardRef3 } from "react";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var createActionButton = (displayName, useActionButton, forwardProps = []) => {
   const ActionButton = forwardRef3((props, forwardedRef) => {
     const forwardedProps = {};
@@ -1085,7 +1018,7 @@ var createActionButton = (displayName, useActionButton, forwardProps = []) => {
       }
     });
     const callback = useActionButton(forwardedProps);
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       Primitive3.button,
       {
         type: "button",
@@ -1125,7 +1058,7 @@ import { forwardRef as forwardRef4 } from "react";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ActionBarPrimitiveStopSpeaking = forwardRef4((props, ref) => {
   const callback = useActionBarStopSpeaking();
   useEscapeKeydown((e) => {
@@ -1134,7 +1067,7 @@ var ActionBarPrimitiveStopSpeaking = forwardRef4((props, ref) => {
       callback();
     }
   });
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     Primitive4.button,
     {
       type: "button",
@@ -1153,13 +1086,13 @@ ActionBarPrimitiveStopSpeaking.displayName = "ActionBarPrimitive.StopSpeaking";
 import { forwardRef as forwardRef5 } from "react";
 import { composeEventHandlers as composeEventHandlers4 } from "@radix-ui/primitive";
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var ActionBarPrimitiveFeedbackPositive = forwardRef5(({ onClick, disabled, ...props }, forwardedRef) => {
   const isSubmitted = useMessageUtils(
     (u) => u.submittedFeedback === "positive"
   );
   const callback = useActionBarFeedbackPositive();
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     Primitive5.button,
     {
       type: "button",
@@ -1179,13 +1112,13 @@ ActionBarPrimitiveFeedbackPositive.displayName = "ActionBarPrimitive.FeedbackPos
 import { forwardRef as forwardRef6 } from "react";
 import { composeEventHandlers as composeEventHandlers5 } from "@radix-ui/primitive";
 import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var ActionBarPrimitiveFeedbackNegative = forwardRef6(({ onClick, disabled, ...props }, forwardedRef) => {
   const isSubmitted = useMessageUtils(
     (u) => u.submittedFeedback === "negative"
   );
   const callback = useActionBarFeedbackNegative();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     Primitive6.button,
     {
       type: "button",
@@ -1233,7 +1166,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 var usePopoverScope = PopoverPrimitive.createPopoverScope();
 
 // src/primitives/assistantModal/AssistantModalRoot.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var useAssistantModalOpenState = (defaultOpen = false) => {
   const state = useState4(defaultOpen);
   const [, setOpen] = state;
@@ -1251,7 +1184,7 @@ var AssistantModalPrimitiveRoot = ({
 }) => {
   const scope = usePopoverScope(__scopeAssistantModal);
   const [modalOpen, setOpen] = useAssistantModalOpenState(defaultOpen);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     PopoverPrimitive2.Root,
     {
       ...scope,
@@ -1266,14 +1199,14 @@ AssistantModalPrimitiveRoot.displayName = "AssistantModalPrimitive.Root";
 // src/primitives/assistantModal/AssistantModalTrigger.tsx
 import { forwardRef as forwardRef7 } from "react";
 import * as PopoverPrimitive3 from "@radix-ui/react-popover";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var AssistantModalPrimitiveTrigger = forwardRef7(
   ({
     __scopeAssistantModal,
     ...rest
   }, ref) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx12(PopoverPrimitive3.Trigger, { ...scope, ...rest, ref });
+    return /* @__PURE__ */ jsx11(PopoverPrimitive3.Trigger, { ...scope, ...rest, ref });
   }
 );
 AssistantModalPrimitiveTrigger.displayName = "AssistantModalPrimitive.Trigger";
@@ -1282,7 +1215,7 @@ AssistantModalPrimitiveTrigger.displayName = "AssistantModalPrimitive.Trigger";
 import { forwardRef as forwardRef8 } from "react";
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
 import { composeEventHandlers as composeEventHandlers7 } from "@radix-ui/primitive";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var AssistantModalPrimitiveContent = forwardRef8(
   ({
     __scopeAssistantModal,
@@ -1293,7 +1226,7 @@ var AssistantModalPrimitiveContent = forwardRef8(
     ...props
   }, forwardedRef) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx13(PopoverPrimitive4.Portal, { ...scope, children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx12(PopoverPrimitive4.Portal, { ...scope, children: /* @__PURE__ */ jsx12(
       PopoverPrimitive4.Content,
       {
         ...scope,
@@ -1314,14 +1247,14 @@ AssistantModalPrimitiveContent.displayName = "AssistantModalPrimitive.Content";
 // src/primitives/assistantModal/AssistantModalAnchor.tsx
 import { forwardRef as forwardRef9 } from "react";
 import * as PopoverPrimitive5 from "@radix-ui/react-popover";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var AssistantModalPrimitiveAnchor = forwardRef9(
   ({
     __scopeAssistantModal,
     ...rest
   }, ref) => {
     const scope = usePopoverScope(__scopeAssistantModal);
-    return /* @__PURE__ */ jsx14(PopoverPrimitive5.Anchor, { ...scope, ...rest, ref });
+    return /* @__PURE__ */ jsx13(PopoverPrimitive5.Anchor, { ...scope, ...rest, ref });
   }
 );
 AssistantModalPrimitiveAnchor.displayName = "AssistantModalPrimitive.Anchor";
@@ -1349,18 +1282,18 @@ var BranchPickerPrevious = createActionButton(
 );
 
 // src/primitives/branchPicker/BranchPickerCount.tsx
-import { Fragment, jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14 } from "react/jsx-runtime";
 var BranchPickerPrimitiveCount = () => {
   const branchCount = useBranchPickerCount();
-  return /* @__PURE__ */ jsx15(Fragment, { children: branchCount });
+  return /* @__PURE__ */ jsx14(Fragment, { children: branchCount });
 };
 BranchPickerPrimitiveCount.displayName = "BranchPickerPrimitive.Count";
 
 // src/primitives/branchPicker/BranchPickerNumber.tsx
-import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15 } from "react/jsx-runtime";
 var BranchPickerPrimitiveNumber = () => {
   const branchNumber = useBranchPickerNumber();
-  return /* @__PURE__ */ jsx16(Fragment2, { children: branchNumber });
+  return /* @__PURE__ */ jsx15(Fragment2, { children: branchNumber });
 };
 BranchPickerPrimitiveNumber.displayName = "BranchPickerPrimitive.Number";
 
@@ -1386,9 +1319,9 @@ import {
 } from "react";
 
 // src/utils/hooks/useManagedRef.ts
-import { useCallback as useCallback17, useRef as useRef2 } from "react";
+import { useCallback as useCallback17, useRef } from "react";
 var useManagedRef = (callback) => {
-  const cleanupRef = useRef2();
+  const cleanupRef = useRef();
   const ref = useCallback17(
     (el) => {
       if (cleanupRef.current) {
@@ -1405,7 +1338,7 @@ var useManagedRef = (callback) => {
 
 // src/primitives/message/MessageRoot.tsx
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var useIsHoveringRef = () => {
   const messageUtilsStore = useMessageUtilsStore();
   const callbackRef = useCallback18(
@@ -1432,7 +1365,7 @@ var useIsHoveringRef = () => {
 var MessagePrimitiveRoot = forwardRef10((props, forwardRef33) => {
   const isHoveringRef = useIsHoveringRef();
   const ref = useComposedRefs(forwardRef33, isHoveringRef);
-  return /* @__PURE__ */ jsx17(Primitive7.div, { ...props, ref });
+  return /* @__PURE__ */ jsx16(Primitive7.div, { ...props, ref });
 });
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
 
@@ -1451,8 +1384,8 @@ import { memo as memo2 } from "react";
 
 // src/context/providers/ContentPartProvider.tsx
 import { useEffect as useEffect8, useState as useState5 } from "react";
-import { create as create9 } from "zustand";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { create as create7 } from "zustand";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var COMPLETE_STATUS2 = {
   type: "complete"
 };
@@ -1492,7 +1425,7 @@ var getContentPartState = ({ message }, useContentPart2, partIndex) => {
 var useContentPartContext2 = (partIndex) => {
   const messageStore = useMessageStore();
   const [context] = useState5(() => {
-    const useContentPart2 = create9(
+    const useContentPart2 = create7(
       () => getContentPartState(messageStore.getState(), void 0, partIndex)
     );
     return { useContentPart: useContentPart2 };
@@ -1517,7 +1450,7 @@ var ContentPartProvider = ({
   children
 }) => {
   const context = useContentPartContext2(partIndex);
-  return /* @__PURE__ */ jsx18(ContentPartContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx17(ContentPartContext.Provider, { value: context, children });
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
@@ -1526,7 +1459,7 @@ import {
 } from "react";
 
 // src/utils/smooth/useSmooth.tsx
-import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef3, useState as useState7 } from "react";
+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";
 
 // src/utils/smooth/SmoothContext.tsx
@@ -1536,11 +1469,11 @@ import {
   useContext as useContext2,
   useState as useState6
 } from "react";
-import { create as create10 } from "zustand";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { create as create8 } from "zustand";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SmoothContext = createContext5(null);
 var makeSmoothContext = (initialState) => {
-  const useSmoothStatus2 = create10(() => initialState);
+  const useSmoothStatus2 = create8(() => initialState);
   return { useSmoothStatus: useSmoothStatus2 };
 };
 var SmoothContextProvider = ({ children }) => {
@@ -1550,11 +1483,11 @@ var SmoothContextProvider = ({ children }) => {
     () => makeSmoothContext(contentPartStore.getState().status)
   );
   if (outer) return children;
-  return /* @__PURE__ */ jsx19(SmoothContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx18(SmoothContext.Provider, { value: context, children });
 };
 var withSmoothContextProvider = (Component) => {
   const Wrapped = forwardRef11((props, ref) => {
-    return /* @__PURE__ */ jsx19(SmoothContextProvider, { children: /* @__PURE__ */ jsx19(Component, { ...props, ref }) });
+    return /* @__PURE__ */ jsx18(SmoothContextProvider, { children: /* @__PURE__ */ jsx18(Component, { ...props, ref }) });
   });
   Wrapped.displayName = Component.displayName;
   return Wrapped;
@@ -1626,9 +1559,9 @@ var useSmooth = (state, smooth = false) => {
   } = state;
   const id = useMessage({
     optional: true,
-    selector: (m) => m.message.id
+    selector: (m) => m.id
   });
-  const idRef = useRef3(id);
+  const idRef = useRef2(id);
   const [displayedText, setDisplayedText] = useState7(text);
   const smoothStatusStore = useSmoothStatusStore({ optional: true });
   const setText = useCallbackRef2((text2) => {
@@ -1670,7 +1603,7 @@ var useSmooth = (state, smooth = false) => {
       animatorRef.stop();
     };
   }, [animatorRef]);
-  return useMemo3(
+  return useMemo5(
     () => smooth ? {
       part: { type: "text", text: displayedText },
       status: text === displayedText ? state.status : SMOOTH_STATUS
@@ -1680,25 +1613,25 @@ var useSmooth = (state, smooth = false) => {
 };
 
 // src/primitives/contentPart/ContentPartText.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ContentPartPrimitiveText = forwardRef12(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
   const {
     part: { text },
     status
   } = useSmooth(useContentPartText(), smooth);
-  return /* @__PURE__ */ jsx20(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
+  return /* @__PURE__ */ jsx19(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
 
 // src/primitives/contentPart/ContentPartImage.tsx
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ContentPartPrimitiveImage = forwardRef13((props, forwardedRef) => {
   const {
     part: { image }
   } = useContentPartImage();
-  return /* @__PURE__ */ jsx21(Primitive8.img, { src: image, ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx20(Primitive8.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
@@ -1719,22 +1652,22 @@ var ContentPartPrimitiveInProgress = ({ children }) => {
 ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";
 
 // src/primitives/message/MessageContent.tsx
-import { jsx as jsx22, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime";
 var ToolUIDisplay = ({
   UI,
   ...props
 }) => {
   const Render = useToolUIs((s) => s.getToolUI(props.part.toolName)) ?? UI;
   if (!Render) return null;
-  return /* @__PURE__ */ jsx22(Render, { ...props });
+  return /* @__PURE__ */ jsx21(Render, { ...props });
 };
 var defaultComponents = {
   Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
-    /* @__PURE__ */ jsx22(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ jsx22(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx22("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
+    /* @__PURE__ */ jsx21(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ jsx21(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx21("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
-  Image: () => /* @__PURE__ */ jsx22(ContentPartPrimitiveImage, {}),
-  UI: () => /* @__PURE__ */ jsx22(ContentPartPrimitiveDisplay, {})
+  Image: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveImage, {}),
+  UI: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveDisplay, {})
 };
 var MessageContentPartComponent = ({
   components: {
@@ -1754,26 +1687,26 @@ var MessageContentPartComponent = ({
       if (status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
       if (part === EMPTY_CONTENT && !!Empty) {
-        return /* @__PURE__ */ jsx22(Empty, { status });
+        return /* @__PURE__ */ jsx21(Empty, { status });
       }
-      return /* @__PURE__ */ jsx22(Text2, { part, status });
+      return /* @__PURE__ */ jsx21(Text2, { part, status });
     case "image":
       if (status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx22(Image2, { part, status });
+      return /* @__PURE__ */ jsx21(Image2, { part, status });
     case "ui":
       if (status.type === "requires-action")
         throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx22(UI, { part, status });
+      return /* @__PURE__ */ jsx21(UI, { part, status });
     case "tool-call": {
       const Tool = by_name[part.toolName] || Fallback2;
       const addResult = (result) => threadRuntime.addToolResult({
-        messageId: messageStore.getState().message.id,
+        messageId: messageStore.getState().id,
         toolName: part.toolName,
         toolCallId: part.toolCallId,
         result
       });
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx21(
         ToolUIDisplay,
         {
           UI: Tool,
@@ -1792,7 +1725,7 @@ var MessageContentPartImpl = ({
   partIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx22(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx22(MessageContentPartComponent, { components }) });
+  return /* @__PURE__ */ jsx21(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx21(MessageContentPartComponent, { components }) });
 };
 var MessageContentPart = memo2(
   MessageContentPartImpl,
@@ -1801,8 +1734,8 @@ var MessageContentPart = memo2(
 var MessagePrimitiveContent = ({
   components
 }) => {
-  const contentLength = useMessage((s) => s.message.content.length) || 1;
-  return Array.from({ length: contentLength }, (_, index) => /* @__PURE__ */ jsx22(MessageContentPart, { partIndex: index, components }, index));
+  const contentLength = useMessage((s) => s.content.length) || 1;
+  return Array.from({ length: contentLength }, (_, index) => /* @__PURE__ */ jsx21(MessageContentPart, { partIndex: index, components }, index));
 };
 MessagePrimitiveContent.displayName = "MessagePrimitive.Content";
 
@@ -1861,9 +1794,9 @@ var {
 
 // src/context/providers/MessageAttachmentProvider.tsx
 import { useEffect as useEffect10, useState as useState8 } from "react";
-import { create as create11 } from "zustand";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var getAttachment = ({ message }, useAttachment2, partIndex) => {
+import { create as create9 } from "zustand";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var getAttachment = (message, useAttachment2, partIndex) => {
   if (message.role !== "user") return null;
   const attachments = message.attachments;
   const attachment = attachments[partIndex];
@@ -1876,7 +1809,7 @@ var useMessageAttachmentContext2 = (partIndex) => {
   const messageStore = useMessageStore();
   const [context] = useState8(
     () => {
-      const useAttachment2 = create11(
+      const useAttachment2 = create9(
         () => getAttachment(messageStore.getState(), void 0, partIndex)
       );
       return { type: "message", useAttachment: useAttachment2 };
@@ -1902,11 +1835,11 @@ var MessageAttachmentProvider = ({
   children
 }) => {
   const context = useMessageAttachmentContext2(partIndex);
-  return /* @__PURE__ */ jsx23(AttachmentContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx22(AttachmentContext.Provider, { value: context, children });
 };
 
 // src/primitives/message/MessageAttachments.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var getComponent = (components, attachment) => {
   const type = attachment.type;
   switch (type) {
@@ -1926,10 +1859,10 @@ var AttachmentComponent = ({ components }) => {
     (a) => getComponent(components, a.attachment)
   );
   if (!Component) return null;
-  return /* @__PURE__ */ jsx24(Component, {});
+  return /* @__PURE__ */ jsx23(Component, {});
 };
 var MessageAttachmentImpl = ({ components, attachmentIndex }) => {
-  return /* @__PURE__ */ jsx24(MessageAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ jsx24(AttachmentComponent, { components }) });
+  return /* @__PURE__ */ jsx23(MessageAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ jsx23(AttachmentComponent, { components }) });
 };
 var MessageAttachment = memo3(
   MessageAttachmentImpl,
@@ -1940,7 +1873,7 @@ var MessagePrimitiveAttachments = ({ components }) => {
     if (message.role !== "user") return 0;
     return message.attachments.length;
   });
-  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx24(
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx23(
     MessageAttachment,
     {
       attachmentIndex: index,
@@ -1952,9 +1885,9 @@ var MessagePrimitiveAttachments = ({ components }) => {
 MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";
 
 // src/primitives/branchPicker/BranchPickerRoot.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var BranchPickerPrimitiveRoot = forwardRef14(({ hideWhenSingleBranch, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx25(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx25(Primitive9.div, { ...rest, ref }) });
+  return /* @__PURE__ */ jsx24(MessagePrimitiveIf, { hasBranches: hideWhenSingleBranch ? true : void 0, children: /* @__PURE__ */ jsx24(Primitive9.div, { ...rest, ref }) });
 });
 BranchPickerPrimitiveRoot.displayName = "BranchPickerPrimitive.Root";
 
@@ -1976,7 +1909,7 @@ import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import {
   forwardRef as forwardRef15
 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ComposerPrimitiveRoot = forwardRef15(({ onSubmit, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const handleSubmit = (e) => {
@@ -1984,7 +1917,7 @@ var ComposerPrimitiveRoot = forwardRef15(({ onSubmit, ...rest }, forwardedRef) =
     if (!send) return;
     send();
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(
     Primitive10.form,
     {
       ...rest,
@@ -2003,11 +1936,11 @@ import {
   forwardRef as forwardRef16,
   useCallback as useCallback19,
   useEffect as useEffect11,
-  useRef as useRef4
+  useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useEscapeKeydown as useEscapeKeydown2 } from "@radix-ui/react-use-escape-keydown";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ComposerPrimitiveInput = forwardRef16(
   ({
     autoFocus = false,
@@ -2027,7 +1960,7 @@ var ComposerPrimitiveInput = forwardRef16(
     });
     const Component = asChild ? Slot : TextareaAutosize;
     const isDisabled = useThread((t) => t.isDisabled) ?? disabledProp ?? false;
-    const textareaRef = useRef4(null);
+    const textareaRef = useRef3(null);
     const ref = useComposedRefs2(forwardedRef, textareaRef);
     useEscapeKeydown2((e) => {
       if (!cancelOnEscape) return;
@@ -2064,7 +1997,7 @@ var ComposerPrimitiveInput = forwardRef16(
         focus();
       }
     });
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx26(
       Component,
       {
         name: "input",
@@ -2107,8 +2040,8 @@ import { memo as memo4 } from "react";
 
 // src/context/providers/ComposerAttachmentProvider.tsx
 import { useEffect as useEffect12, useState as useState9 } from "react";
-import { create as create12 } from "zustand";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { create as create10 } from "zustand";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var getAttachment2 = ({ attachments }, useAttachment2, partIndex) => {
   const attachment = attachments[partIndex];
   if (!attachment) return null;
@@ -2120,7 +2053,7 @@ var useComposerAttachmentContext2 = (partIndex) => {
   const threadComposerStore = useThreadComposerStore();
   const [context] = useState9(
     () => {
-      const useAttachment2 = create12(
+      const useAttachment2 = create10(
         () => getAttachment2(threadComposerStore.getState(), void 0, partIndex)
       );
       return { type: "composer", useAttachment: useAttachment2 };
@@ -2143,11 +2076,11 @@ var useComposerAttachmentContext2 = (partIndex) => {
 };
 var ComposerAttachmentProvider = ({ attachmentIndex: partIndex, children }) => {
   const context = useComposerAttachmentContext2(partIndex);
-  return /* @__PURE__ */ jsx28(AttachmentContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx27(AttachmentContext.Provider, { value: context, children });
 };
 
 // src/primitives/composer/ComposerAttachments.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var getComponent2 = (components, attachment) => {
   const type = attachment.type;
   switch (type) {
@@ -2167,10 +2100,10 @@ var AttachmentComponent2 = ({ components }) => {
     (a) => getComponent2(components, a.attachment)
   );
   if (!Component) return null;
-  return /* @__PURE__ */ jsx29(Component, {});
+  return /* @__PURE__ */ jsx28(Component, {});
 };
 var ComposerAttachmentImpl = ({ components, attachmentIndex }) => {
-  return /* @__PURE__ */ jsx29(ComposerAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ jsx29(AttachmentComponent2, { components }) });
+  return /* @__PURE__ */ jsx28(ComposerAttachmentProvider, { attachmentIndex, children: /* @__PURE__ */ jsx28(AttachmentComponent2, { components }) });
 };
 var ComposerAttachment = memo4(
   ComposerAttachmentImpl,
@@ -2178,7 +2111,7 @@ var ComposerAttachment = memo4(
 );
 var ComposerPrimitiveAttachments = ({ components }) => {
   const attachmentsCount = useThreadComposer((s) => s.attachments.length);
-  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx29(
+  return Array.from({ length: attachmentsCount }, (_, index) => /* @__PURE__ */ jsx28(
     ComposerAttachment,
     {
       attachmentIndex: index,
@@ -2223,9 +2156,9 @@ __export(thread_exports, {
 // src/primitives/thread/ThreadRoot.tsx
 import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ThreadPrimitiveRoot = forwardRef17((props, ref) => {
-  return /* @__PURE__ */ jsx30(Primitive11.div, { ...props, ref });
+  return /* @__PURE__ */ jsx29(Primitive11.div, { ...props, ref });
 });
 ThreadPrimitiveRoot.displayName = "ThreadPrimitive.Root";
 
@@ -2255,7 +2188,7 @@ import { forwardRef as forwardRef18 } from "react";
 
 // src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef4 } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
 import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
@@ -2314,10 +2247,10 @@ var useOnScrollToBottom = (callback) => {
 var useThreadViewportAutoScroll = ({
   autoScroll = true
 }) => {
-  const divRef = useRef5(null);
+  const divRef = useRef4(null);
   const threadViewportStore = useThreadViewportStore();
-  const lastScrollTop = useRef5(0);
-  const isScrollingToBottomRef = useRef5(false);
+  const lastScrollTop = useRef4(0);
+  const isScrollingToBottomRef = useRef4(false);
   const scrollToBottom = (behavior) => {
     const div = divRef.current;
     if (!div || !autoScroll) return;
@@ -2362,29 +2295,29 @@ var useThreadViewportAutoScroll = ({
 };
 
 // src/primitives/thread/ThreadViewport.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ThreadPrimitiveViewport = forwardRef18(({ autoScroll, children, ...rest }, forwardedRef) => {
   const autoScrollRef = useThreadViewportAutoScroll({
     autoScroll
   });
   const ref = useComposedRefs4(forwardedRef, autoScrollRef);
-  return /* @__PURE__ */ jsx31(Primitive12.div, { ...rest, ref, children });
+  return /* @__PURE__ */ jsx30(Primitive12.div, { ...rest, ref, children });
 });
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
 // src/primitives/thread/ThreadMessages.tsx
-import { memo as memo5 } from "react";
+import { memo as memo5, useMemo as useMemo6 } from "react";
 
-// src/context/providers/MessageProvider.tsx
+// src/context/providers/MessageRuntimeProvider.tsx
 import { useEffect as useEffect14, useState as useState10 } from "react";
-import { create as create15 } from "zustand";
+import { create as create13 } from "zustand";
 
 // src/context/stores/EditComposer.ts
-import { create as create13 } from "zustand";
+import { create as create11 } from "zustand";
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => create13()((set, get) => ({
+}) => create11()((set, get) => ({
   type: "edit",
   get value() {
     return get().text;
@@ -2419,8 +2352,8 @@ var makeEditComposerStore = ({
 }));
 
 // src/context/stores/MessageUtils.ts
-import { create as create14 } from "zustand";
-var makeMessageUtilsStore = () => create14((set) => {
+import { create as create12 } from "zustand";
+var makeMessageUtilsStore = () => create12((set) => {
   let utterance = null;
   return {
     isCopied: false,
@@ -2449,89 +2382,70 @@ var makeMessageUtilsStore = () => create14((set) => {
   };
 });
 
-// src/context/providers/MessageProvider.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var getIsLast = (messages, message) => {
-  return messages[messages.length - 1]?.id === message.id;
-};
-var getMessageState = (messages, getBranches, useMessage2, messageIndex) => {
-  const parentId = messages[messageIndex - 1]?.id ?? null;
-  const message = messages[messageIndex];
-  if (!message) return null;
-  const isLast = getIsLast(messages, message);
-  const branches = getBranches(message.id);
-  const currentState = useMessage2?.getState();
-  if (currentState && currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
-    return null;
-  return Object.freeze({
-    message,
-    parentId,
-    branches,
-    isLast
-  });
+// src/context/providers/MessageRuntimeProvider.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+var useMessageRuntimeStore = (runtime) => {
+  const [store] = useState10(() => create13(() => runtime));
+  useEffect14(() => {
+    writableStore(store).setState(runtime, true);
+  }, [runtime, store]);
+  return store;
 };
-var useMessageContext2 = (messageIndex) => {
-  const threadMessagesStore = useThreadMessagesStore();
-  const threadRuntime = useThreadRuntime();
-  const [context] = useState10(() => {
-    const useMessage2 = create15(
-      () => getMessageState(
-        threadMessagesStore.getState(),
-        threadRuntime.getBranches.bind(threadRuntime),
-        void 0,
-        messageIndex
-      )
-    );
-    const useMessageUtils2 = makeMessageUtilsStore();
-    const useEditComposer2 = makeEditComposerStore({
+var useMessageStore2 = (runtime) => {
+  const [store] = useState10(() => create13(() => runtime.getState()));
+  useEffect14(() => {
+    const updateState = () => writableStore(store).setState(runtime.getState(), true);
+    updateState();
+    return runtime.subscribe(updateState);
+  }, [runtime, store]);
+  return store;
+};
+var useMessageUtilsStore2 = () => {
+  const [store] = useState10(() => makeMessageUtilsStore());
+  return store;
+};
+var useEditComposerStore2 = (useMessageRuntime2) => {
+  const [store] = useState10(
+    () => makeEditComposerStore({
       onEdit: () => {
-        const message = useMessage2.getState().message;
-        const text = getThreadMessageText(message);
+        const text = getThreadMessageText(
+          useMessageRuntime2.getState().getState()
+        );
         return text;
       },
       onSend: (text) => {
-        const { message, parentId } = useMessage2.getState();
+        const message = useMessageRuntime2.getState().getState();
         const previousText = getThreadMessageText(message);
         if (previousText === text) return;
         const nonTextParts = message.content.filter(
           (part) => part.type !== "text" && part.type !== "ui"
         );
-        threadRuntime.append({
-          parentId,
+        useMessageRuntime2.getState().edit({
           role: message.role,
           content: [{ type: "text", text }, ...nonTextParts],
-          attachments: message.attachments
+          attachments: message.attachments ?? []
         });
       }
-    });
-    return { useMessage: useMessage2, useMessageUtils: useMessageUtils2, useEditComposer: useEditComposer2 };
-  });
-  useEffect14(() => {
-    const syncMessage = (thread) => {
-      const newState = getMessageState(
-        thread,
-        threadRuntime.getBranches.bind(threadRuntime),
-        context.useMessage,
-        messageIndex
-      );
-      if (!newState) return;
-      writableStore(context.useMessage).setState(newState, true);
-    };
-    syncMessage(threadMessagesStore.getState());
-    return threadMessagesStore.subscribe(syncMessage);
-  }, [threadMessagesStore, threadRuntime, context, messageIndex]);
-  return context;
+    })
+  );
+  return store;
 };
-var MessageProvider = ({
-  messageIndex,
+var MessageRuntimeProvider = ({
+  runtime,
   children
 }) => {
-  const context = useMessageContext2(messageIndex);
-  return /* @__PURE__ */ jsx32(MessageContext.Provider, { value: context, children });
+  const useMessageRuntime2 = useMessageRuntimeStore(runtime);
+  const useMessage2 = useMessageStore2(runtime);
+  const useMessageUtils2 = useMessageUtilsStore2();
+  const useEditComposer2 = useEditComposerStore2(useMessageRuntime2);
+  const [context] = useState10(() => {
+    return { useMessageRuntime: useMessageRuntime2, useMessage: useMessage2, useMessageUtils: useMessageUtils2, useEditComposer: useEditComposer2 };
+  });
+  return /* @__PURE__ */ jsx31(MessageContext.Provider, { value: context, children });
 };
 
 // src/primitives/thread/ThreadMessages.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var isComponentsSame = (prev, next) => {
   return prev.Message === next.Message && prev.EditComposer === next.EditComposer && prev.UserEditComposer === next.UserEditComposer && prev.AssistantEditComposer === next.AssistantEditComposer && prev.SystemEditComposer === next.SystemEditComposer && prev.UserMessage === next.UserMessage && prev.AssistantMessage === next.AssistantMessage && prev.SystemMessage === next.SystemMessage;
 };
@@ -2564,16 +2478,21 @@ var getComponent3 = (components, role, isEditing) => {
 var ThreadMessageComponent = ({
   components
 }) => {
-  const role = useMessage((m) => m.message.role);
+  const role = useMessage((m) => m.role);
   const isEditing = useEditComposer((c) => c.isEditing);
   const Component = getComponent3(components, role, isEditing);
-  return /* @__PURE__ */ jsx33(Component, {});
+  return /* @__PURE__ */ jsx32(Component, {});
 };
 var ThreadMessageImpl = ({
   messageIndex,
   components
 }) => {
-  return /* @__PURE__ */ jsx33(MessageProvider, { messageIndex, children: /* @__PURE__ */ jsx33(ThreadMessageComponent, { components }) });
+  const threadRuntime = useThreadRuntime();
+  const runtime = useMemo6(
+    () => threadRuntime.unstable_getMesssageByIndex(messageIndex),
+    [threadRuntime, messageIndex]
+  );
+  return /* @__PURE__ */ jsx32(MessageRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx32(ThreadMessageComponent, { components }) });
 };
 var ThreadMessage = memo5(
   ThreadMessageImpl,
@@ -2584,7 +2503,7 @@ var ThreadPrimitiveMessagesImpl = ({
 }) => {
   const messagesLength = useThreadMessages((t) => t.length);
   if (messagesLength === 0) return null;
-  return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ jsx33(ThreadMessage, { messageIndex: index, components }, index));
+  return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ jsx32(ThreadMessage, { messageIndex: index, components }, index));
 };
 ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
 var ThreadPrimitiveMessages = memo5(
@@ -2626,7 +2545,7 @@ var subscribeToMainThread = (runtime, callback) => {
 };
 
 // src/runtimes/local/useLocalRuntime.tsx
-import { useInsertionEffect as useInsertionEffect2, useMemo as useMemo4, useState as useState12 } from "react";
+import { useInsertionEffect, useMemo as useMemo7, useState as useState12 } from "react";
 
 // src/runtimes/core/BaseAssistantRuntimeCore.tsx
 var BaseAssistantRuntimeCore = class {
@@ -2656,7 +2575,7 @@ var internal_exports = {};
 __export(internal_exports, {
   AssistantRuntime: () => AssistantRuntime,
   BaseAssistantRuntimeCore: () => BaseAssistantRuntimeCore,
-  BaseThreadRuntimeComposerCore: () => BaseThreadComposerRuntimeCore,
+  BaseThreadComposerRuntimeCore: () => BaseThreadComposerRuntimeCore,
   MessageRepository: () => MessageRepository,
   ProxyConfigProvider: () => ProxyConfigProvider,
   ThreadRuntime: () => ThreadRuntime,
@@ -2671,12 +2590,25 @@ __export(internal_exports, {
 var BaseThreadComposerRuntimeCore = class {
   constructor(runtime) {
     this.runtime = runtime;
+    this.connect();
   }
   _attachmentAdapter;
   attachmentAccept = "*";
   get isEmpty() {
     return !this.text.trim() && !this.attachments.length;
   }
+  _canCancel = false;
+  get canCancel() {
+    return this._canCancel;
+  }
+  connect() {
+    return this.runtime.subscribe(() => {
+      if (this.canCancel !== this.runtime.capabilities.cancel) {
+        this._canCancel = this.runtime.capabilities.cancel;
+        this.notifySubscribers();
+      }
+    });
+  }
   setAttachmentAdapter(adapter) {
     this._attachmentAdapter = adapter;
     const accept = adapter?.accept ?? "*";
@@ -2734,6 +2666,9 @@ var BaseThreadComposerRuntimeCore = class {
     });
     this.reset();
   }
+  async cancel() {
+    this.runtime.cancelRun();
+  }
   _subscriptions = /* @__PURE__ */ new Set();
   notifySubscribers() {
     for (const callback of this._subscriptions) callback();
@@ -3018,7 +2953,7 @@ import {
   forwardRef as forwardRef19
 } from "react";
 import classNames from "classnames";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var withDefaultProps = ({
   className,
   ...defaultProps
@@ -3034,7 +2969,7 @@ var withDefaults = (Component, defaultProps) => {
   const WithDefaults = forwardRef19(
     (props, ref) => {
       const ComponentAsAny = Component;
-      return /* @__PURE__ */ jsx34(ComponentAsAny, { ...getProps(props), ref });
+      return /* @__PURE__ */ jsx33(ComponentAsAny, { ...getProps(props), ref });
     }
   );
   WithDefaults.displayName = "withDefaults(" + (typeof Component === "string" ? Component : Component.displayName) + ")";
@@ -3042,9 +2977,9 @@ var withDefaults = (Component, defaultProps) => {
 };
 
 // src/ui/base/tooltip.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Tooltip = (props) => {
-  return /* @__PURE__ */ jsx35(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx35(TooltipPrimitive.Root, { ...props }) });
+  return /* @__PURE__ */ jsx34(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx34(TooltipPrimitive.Root, { ...props }) });
 };
 Tooltip.displayName = "Tooltip";
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -3058,7 +2993,7 @@ TooltipContent.displayName = "TooltipContent";
 import { cva } from "class-variance-authority";
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var buttonVariants = cva("aui-button", {
   variants: {
     variant: {
@@ -3078,7 +3013,7 @@ var buttonVariants = cva("aui-button", {
 });
 var Button = forwardRef20(
   ({ className, variant, size, ...props }, ref) => {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx35(
       Primitive13.button,
       {
         className: buttonVariants({ variant, size, className }),
@@ -3091,14 +3026,14 @@ var Button = forwardRef20(
 Button.displayName = "Button";
 
 // src/ui/base/tooltip-icon-button.tsx
-import { jsx as jsx37, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs3 } from "react/jsx-runtime";
 var TooltipIconButton = forwardRef21(({ children, tooltip, side = "bottom", ...rest }, ref) => {
   return /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
+    /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
       children,
-      /* @__PURE__ */ jsx37("span", { className: "aui-sr-only", children: tooltip })
+      /* @__PURE__ */ jsx36("span", { className: "aui-sr-only", children: tooltip })
     ] }) }),
-    /* @__PURE__ */ jsx37(TooltipContent, { side, children: tooltip })
+    /* @__PURE__ */ jsx36(TooltipContent, { side, children: tooltip })
   ] });
 });
 TooltipIconButton.displayName = "TooltipIconButton";
@@ -3213,7 +3148,7 @@ var ContentPartRuntime = class {
     const toolName = state.part.toolName;
     const toolCallId = state.part.toolCallId;
     this.threadApi.getState().addToolResult({
-      messageId: message.message.id,
+      messageId: message.id,
       toolName,
       toolCallId,
       result
@@ -3267,60 +3202,13 @@ var ShallowMemoizeSubject = class extends BaseSubject {
 };
 
 // src/api/MessageRuntime.ts
-var MessageState = class {
-  constructor(snapshot) {
-    this.snapshot = snapshot;
-  }
-  /**
-   * @deprecated Replace `.message.content` with `.content` etc. This will be removed in 0.6.0.
-   */
-  get message() {
-    return this.snapshot.message;
-  }
-  get id() {
-    return this.snapshot.message.id;
-  }
-  get createdAt() {
-    return this.snapshot.message.createdAt;
-  }
-  get role() {
-    return this.snapshot.message.role;
-  }
-  get content() {
-    return this.snapshot.message.content;
-  }
-  get attachments() {
-    return this.snapshot.message.attachments;
-  }
-  get metadata() {
-    return this.snapshot.message.metadata;
-  }
-  get status() {
-    return this.snapshot.message.status;
-  }
-  get parentId() {
-    return this.snapshot.parentId;
-  }
-  get isLast() {
-    return this.snapshot.isLast;
-  }
-  get branches() {
-    return this.snapshot.branches;
-  }
-  get branchNumber() {
-    return this.snapshot.branchNumber;
-  }
-  get branchCount() {
-    return this.snapshot.branchCount;
-  }
-};
 var MessageRuntime = class {
   constructor(_core, _threadBinding) {
     this._core = _core;
     this._threadBinding = _threadBinding;
   }
   getState() {
-    return new MessageState(this._core.getState());
+    return this._core.getState();
   }
   // TODO improve type
   edit(message) {
@@ -3339,13 +3227,13 @@ var MessageRuntime = class {
   speak() {
     const state = this._core.getState();
     if (!state) throw new Error("Message is not available");
-    this._threadBinding.getState().speak(state.message.id);
+    this._threadBinding.getState().speak(state.id);
   }
   submitFeedback({ type }) {
     const state = this._core.getState();
     if (!state) throw new Error("Message is not available");
     this._threadBinding.getState().submitFeedback({
-      messageId: state.message.id,
+      messageId: state.id,
       type
     });
   }
@@ -3361,7 +3249,7 @@ var MessageRuntime = class {
       throw new Error("Must specify either branchId or position");
     }
     const thread = this._threadBinding.getState();
-    const branches = thread.getBranches(state.message.id);
+    const branches = thread.getBranches(state.id);
     let targetBranch = branchId;
     if (position === "previous") {
       targetBranch = branches[state.branchNumber - 2];
@@ -3398,27 +3286,18 @@ var MessageRuntime = class {
 };
 
 // src/api/ThreadComposerRuntime.ts
-var ComposerState = class {
-  constructor(_composerBinding) {
-    this._composerBinding = _composerBinding;
-  }
-  get isEmpty() {
-    return this._composerBinding.getState().isEmpty;
-  }
-  get text() {
-    return this._composerBinding.getState().text;
-  }
-  get attachmentAccept() {
-    return this._composerBinding.getState().attachmentAccept;
-  }
-  get attachments() {
-    return this._composerBinding.getState().attachments;
-  }
+var getThreadComposerState = (runtime) => {
+  return Object.freeze({
+    canCancel: runtime.canCancel,
+    isEmpty: runtime.isEmpty,
+    text: runtime.text,
+    attachments: runtime.attachments,
+    attachmentAccept: runtime.attachmentAccept
+  });
 };
 var ThreadComposerRuntime = class {
   constructor(_core) {
     this._core = _core;
-    this._state = new ComposerState(_core);
   }
   /**
    * @deprecated Use `getState().isEmpty` instead. This will be removed in 0.6.0.
@@ -3426,6 +3305,12 @@ var ThreadComposerRuntime = class {
   get isEmpty() {
     return this._core.getState().isEmpty;
   }
+  /**
+   * @deprecated Use `getState().canCancel` instead. This will be removed in 0.6.0.
+   */
+  get canCancel() {
+    return this._core.getState().canCancel;
+  }
   /**
    * @deprecated Use `getState().text` instead. This will be removed in 0.6.0.
    */
@@ -3445,9 +3330,8 @@ var ThreadComposerRuntime = class {
   get attachments() {
     return this._core.getState().attachments;
   }
-  _state;
   getState() {
-    return this._state;
+    return getThreadComposerState(this._core.getState());
   }
   setText(text) {
     this._core.getState().setText(text);
@@ -3470,30 +3354,43 @@ var ThreadComposerRuntime = class {
   send() {
     this._core.getState().send();
   }
+  cancel() {
+    this._core.getState().cancel();
+  }
   subscribe(callback) {
     return this._core.subscribe(callback);
   }
 };
 
 // src/api/ThreadRuntime.ts
-var ThreadState = class {
-  constructor(_core) {
-    this._core = _core;
-  }
-  get threadId() {
-    return this._core.threadId;
-  }
-  get isDisabled() {
-    return this._core.isDisabled;
-  }
-  get isRunning() {
-    const messages = this._core.messages;
-    const lastMessage = messages[messages.length - 1];
-    return lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running";
+var toAppendMessage = (messages, message) => {
+  if (typeof message === "string") {
+    return {
+      parentId: messages.at(-1)?.id ?? null,
+      role: "user",
+      content: [{ type: "text", text: message }],
+      attachments: []
+    };
   }
-  get capabilities() {
-    return this._core.capabilities;
+  if (message.role && message.parentId && message.attachments) {
+    return message;
   }
+  return {
+    parentId: message.parentId ?? messages.at(-1)?.id ?? null,
+    role: message.role ?? "user",
+    content: message.content,
+    attachments: message.attachments ?? []
+  };
+};
+var getThreadState = (runtime) => {
+  const lastMessage = runtime.messages.at(-1);
+  return Object.freeze({
+    threadId: runtime.threadId,
+    capabilities: runtime.capabilities,
+    isDisabled: runtime.isDisabled,
+    isRunning: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running",
+    unstable_synchronizer: runtime.unstable_synchronizer
+  });
 };
 var ThreadRuntime = class {
   constructor(_threadBinding) {
@@ -3538,10 +3435,12 @@ var ThreadRuntime = class {
     })
   );
   getState() {
-    return new ThreadState(this._threadBinding.getState());
+    return getThreadState(this._threadBinding.getState());
   }
   append(message) {
-    this._threadBinding.getState().append(message);
+    this._threadBinding.getState().append(
+      toAppendMessage(this._threadBinding.getState().messages, message)
+    );
   }
   subscribe(callback) {
     return this._threadBinding.subscribe(callback);
@@ -3601,6 +3500,7 @@ var ThreadRuntime = class {
           if (!message) return void 0;
           const branches = this._threadBinding.getState().getBranches(message.id);
           return {
+            ...message,
             message,
             isLast: idx === messages.length - 1,
             parentId: messages[idx - 1]?.id ?? null,
@@ -4239,15 +4139,15 @@ var LocalRuntime = class extends AssistantRuntime {
 };
 var useLocalRuntime = (adapter, options = {}) => {
   const [runtime] = useState12(() => new LocalRuntimeCore(adapter, options));
-  useInsertionEffect2(() => {
+  useInsertionEffect(() => {
     runtime.thread.adapter = adapter;
     runtime.thread.options = options;
   });
-  return useMemo4(() => new LocalRuntime(runtime), [runtime]);
+  return useMemo7(() => new LocalRuntime(runtime), [runtime]);
 };
 
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
-import { useEffect as useEffect15, useMemo as useMemo5, useState as useState13 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo8, useState as useState13 } from "react";
 
 // src/runtimes/external-store/getExternalStoreMessage.tsx
 var symbolInnerMessage = Symbol("innerMessage");
@@ -4587,11 +4487,11 @@ var useExternalStoreRuntime = (store) => {
   useEffect15(() => {
     runtime.thread.store = store;
   });
-  return useMemo5(() => new AssistantRuntime(runtime, ThreadRuntime), [runtime]);
+  return useMemo8(() => new AssistantRuntime(runtime, ThreadRuntime), [runtime]);
 };
 
 // src/runtimes/external-store/external-message-converter.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo9 } from "react";
 var joinExternalMessages = (messages) => {
   const assistantMessage = {
     role: "assistant",
@@ -4620,19 +4520,18 @@ var joinExternalMessages = (messages) => {
         );
       }
     } else {
-      const content = output.content;
       const role = output.role;
       switch (role) {
         case "system":
         case "user":
-          return { role, content };
+          return output;
         case "assistant":
           if (assistantMessage.content.length === 0) {
             assistantMessage.id = output.id;
             assistantMessage.createdAt ??= output.createdAt;
             assistantMessage.status ??= output.status;
           }
-          assistantMessage.content.push(...content);
+          assistantMessage.content.push(...output.content);
           break;
         default: {
           const unsupportedRole = role;
@@ -4678,7 +4577,7 @@ var useExternalMessageConverter = ({
   messages,
   isRunning
 }) => {
-  const state = useMemo6(
+  const state = useMemo9(
     () => ({
       callback,
       callbackCache: /* @__PURE__ */ new WeakMap(),
@@ -4687,7 +4586,7 @@ var useExternalMessageConverter = ({
     }),
     [callback]
   );
-  return useMemo6(() => {
+  return useMemo9(() => {
     const callbackResults = [];
     for (const message of messages) {
       let result = state.callbackCache.get(message);
@@ -4955,7 +4854,7 @@ import {
   createContext as createContext7,
   useContext as useContext4
 } from "react";
-import { Fragment as Fragment3, jsx as jsx38 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx37 } from "react/jsx-runtime";
 var ThreadConfigContext = createContext7({});
 var useThreadConfig = () => {
   return useContext4(ThreadConfigContext);
@@ -4965,14 +4864,14 @@ var ThreadConfigProvider = ({
   config
 }) => {
   const hasAssistant = !!useAssistantRuntime({ optional: true });
-  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx38(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx38(Fragment3, { children });
+  const configProvider = config && Object.keys(config ?? {}).length > 0 ? /* @__PURE__ */ jsx37(ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ jsx37(Fragment3, { children });
   if (!config?.runtime) return configProvider;
   if (hasAssistant) {
     throw new Error(
       "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed."
     );
   }
-  return /* @__PURE__ */ jsx38(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
+  return /* @__PURE__ */ jsx37(AssistantRuntimeProvider, { runtime: config.runtime, children: configProvider });
 };
 ThreadConfigProvider.displayName = "ThreadConfigProvider";
 
@@ -4987,7 +4886,7 @@ import {
   ThumbsDownIcon,
   ThumbsUpIcon
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs4 } from "react/jsx-runtime";
 var useAllowCopy = (ensureCapability = false) => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
   const copySupported = useThread((t) => t.capabilities.unstable_copy);
@@ -5028,11 +4927,11 @@ var AssistantActionBar = () => {
       autohide: "not-last",
       autohideFloat: "single-branch",
       children: [
-        allowSpeak && /* @__PURE__ */ jsx39(AssistantActionBarSpeechControl, {}),
-        allowCopy && /* @__PURE__ */ jsx39(AssistantActionBarCopy, {}),
-        allowReload && /* @__PURE__ */ jsx39(AssistantActionBarReload, {}),
-        allowFeedbackPositive && /* @__PURE__ */ jsx39(AssistantActionBarFeedbackPositive, {}),
-        allowFeedbackNegative && /* @__PURE__ */ jsx39(AssistantActionBarFeedbackNegative, {})
+        allowSpeak && /* @__PURE__ */ jsx38(AssistantActionBarSpeechControl, {}),
+        allowCopy && /* @__PURE__ */ jsx38(AssistantActionBarCopy, {}),
+        allowReload && /* @__PURE__ */ jsx38(AssistantActionBarReload, {}),
+        allowFeedbackPositive && /* @__PURE__ */ jsx38(AssistantActionBarFeedbackPositive, {}),
+        allowFeedbackNegative && /* @__PURE__ */ jsx38(AssistantActionBarFeedbackNegative, {})
       ]
     }
   );
@@ -5048,16 +4947,16 @@ var AssistantActionBarCopy = forwardRef22((props, ref) => {
       assistantMessage: { copy: { tooltip = "Copy" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx39(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx39(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx39(CheckIcon, {}) }),
-    /* @__PURE__ */ jsx39(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx39(CopyIcon, {}) })
+  return /* @__PURE__ */ jsx38(actionBar_exports.Copy, { asChild: true, children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx38(message_exports.If, { copied: true, children: /* @__PURE__ */ jsx38(CheckIcon, {}) }),
+    /* @__PURE__ */ jsx38(message_exports.If, { copied: false, children: /* @__PURE__ */ jsx38(CopyIcon, {}) })
   ] }) }) });
 });
 AssistantActionBarCopy.displayName = "AssistantActionBarCopy";
 var AssistantActionBarSpeechControl = () => {
   return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsx39(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx39(AssistantActionBarSpeak, {}) }),
-    /* @__PURE__ */ jsx39(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx39(AssistantActionBarStopSpeaking, {}) })
+    /* @__PURE__ */ jsx38(message_exports.If, { speaking: false, children: /* @__PURE__ */ jsx38(AssistantActionBarSpeak, {}) }),
+    /* @__PURE__ */ jsx38(message_exports.If, { speaking: true, children: /* @__PURE__ */ jsx38(AssistantActionBarStopSpeaking, {}) })
   ] });
 };
 var AssistantActionBarSpeak = forwardRef22((props, ref) => {
@@ -5067,7 +4966,7 @@ var AssistantActionBarSpeak = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  return /* @__PURE__ */ jsx39(actionBar_exports.Speak, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(AudioLinesIcon, {}) }) });
+  return /* @__PURE__ */ jsx38(actionBar_exports.Speak, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(AudioLinesIcon, {}) }) });
 });
 AssistantActionBarSpeak.displayName = "AssistantActionBarSpeak";
 var AssistantActionBarStopSpeaking = forwardRef22((props, ref) => {
@@ -5079,7 +4978,7 @@ var AssistantActionBarStopSpeaking = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowSpeak = useAllowSpeak();
-  return /* @__PURE__ */ jsx39(actionBar_exports.StopSpeaking, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(StopCircleIcon, {}) }) });
+  return /* @__PURE__ */ jsx38(actionBar_exports.StopSpeaking, { disabled: !allowSpeak, asChild: true, children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip: stopTooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(StopCircleIcon, {}) }) });
 });
 AssistantActionBarStopSpeaking.displayName = "AssistantActionBarStopSpeaking";
 var AssistantActionBarReload = forwardRef22((props, ref) => {
@@ -5089,7 +4988,7 @@ var AssistantActionBarReload = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowReload = useAllowReload();
-  return /* @__PURE__ */ jsx39(actionBar_exports.Reload, { disabled: !allowReload, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(RefreshCwIcon, {}) }) });
+  return /* @__PURE__ */ jsx38(actionBar_exports.Reload, { disabled: !allowReload, asChild: true, children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(RefreshCwIcon, {}) }) });
 });
 AssistantActionBarReload.displayName = "AssistantActionBarReload";
 var AssistantActionBarFeedbackPositive = forwardRef22((props, ref) => {
@@ -5101,13 +5000,13 @@ var AssistantActionBarFeedbackPositive = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowFeedbackPositive = useAllowFeedbackPositive();
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(
     actionBar_exports.FeedbackPositive,
     {
       disabled: !allowFeedbackPositive,
       className: "aui-assistant-action-bar-feedback-positive",
       asChild: true,
-      children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(ThumbsUpIcon, {}) })
+      children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(ThumbsUpIcon, {}) })
     }
   );
 });
@@ -5121,13 +5020,13 @@ var AssistantActionBarFeedbackNegative = forwardRef22((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowFeedbackNegative = useAllowFeedbackNegative();
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(
     actionBar_exports.FeedbackNegative,
     {
       disabled: !allowFeedbackNegative,
       className: "aui-assistant-action-bar-feedback-negative",
       asChild: true,
-      children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(ThumbsDownIcon, {}) })
+      children: /* @__PURE__ */ jsx38(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx38(ThumbsDownIcon, {}) })
     }
   );
 });
@@ -5148,12 +5047,12 @@ var assistant_action_bar_default = Object.assign(
 );
 
 // src/ui/assistant-message.tsx
-import { forwardRef as forwardRef24, useMemo as useMemo7 } from "react";
+import { forwardRef as forwardRef24, useMemo as useMemo10 } from "react";
 
 // src/ui/branch-picker.tsx
 import { forwardRef as forwardRef23 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs5 } from "react/jsx-runtime";
 var useAllowBranchPicker = (ensureCapability = false) => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
   const branchPickerSupported = useThread((t) => t.capabilities.edit);
@@ -5163,9 +5062,9 @@ var BranchPicker = () => {
   const allowBranchPicker = useAllowBranchPicker();
   if (!allowBranchPicker) return null;
   return /* @__PURE__ */ jsxs5(BranchPickerRoot, { hideWhenSingleBranch: true, children: [
-    /* @__PURE__ */ jsx40(BranchPickerPrevious2, {}),
-    /* @__PURE__ */ jsx40(BranchPickerState, {}),
-    /* @__PURE__ */ jsx40(BranchPickerNext, {})
+    /* @__PURE__ */ jsx39(BranchPickerPrevious2, {}),
+    /* @__PURE__ */ jsx39(BranchPickerState, {}),
+    /* @__PURE__ */ jsx39(BranchPickerNext, {})
   ] });
 };
 BranchPicker.displayName = "BranchPicker";
@@ -5180,7 +5079,7 @@ var BranchPickerPrevious2 = forwardRef23((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowBranchPicker = useAllowBranchPicker();
-  return /* @__PURE__ */ jsx40(branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ jsx39(branchPicker_exports.Previous, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(ChevronLeftIcon, {}) }) });
 });
 BranchPickerPrevious2.displayName = "BranchPickerPrevious";
 var BranchPickerStateWrapper = withDefaults("span", {
@@ -5188,9 +5087,9 @@ var BranchPickerStateWrapper = withDefaults("span", {
 });
 var BranchPickerState = forwardRef23((props, ref) => {
   return /* @__PURE__ */ jsxs5(BranchPickerStateWrapper, { ...props, ref, children: [
-    /* @__PURE__ */ jsx40(branchPicker_exports.Number, {}),
+    /* @__PURE__ */ jsx39(branchPicker_exports.Number, {}),
     " / ",
-    /* @__PURE__ */ jsx40(branchPicker_exports.Count, {})
+    /* @__PURE__ */ jsx39(branchPicker_exports.Count, {})
   ] });
 });
 BranchPickerState.displayName = "BranchPickerState";
@@ -5199,7 +5098,7 @@ var BranchPickerNext = forwardRef23((props, ref) => {
     strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowBranchPicker = useAllowBranchPicker();
-  return /* @__PURE__ */ jsx40(branchPicker_exports.Next, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx40(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx40(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ jsx39(branchPicker_exports.Next, { disabled: !allowBranchPicker, asChild: true, children: /* @__PURE__ */ jsx39(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx39(ChevronRightIcon, {}) }) });
 });
 BranchPickerNext.displayName = "BranchPickerNext";
 var exports2 = {
@@ -5211,12 +5110,12 @@ var branch_picker_default = Object.assign(BranchPicker, exports2);
 
 // src/ui/base/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { jsx as jsx41, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs6 } from "react/jsx-runtime";
 var Avatar = ({ src, alt, fallback }) => {
   if (src == null && fallback == null) return null;
   return /* @__PURE__ */ jsxs6(AvatarRoot, { children: [
-    src != null && /* @__PURE__ */ jsx41(AvatarImage, { src, alt }),
-    fallback != null && /* @__PURE__ */ jsx41(AvatarFallback, { children: fallback })
+    src != null && /* @__PURE__ */ jsx40(AvatarImage, { src, alt }),
+    fallback != null && /* @__PURE__ */ jsx40(AvatarFallback, { children: fallback })
   ] });
 };
 Avatar.displayName = "Avatar";
@@ -5235,10 +5134,10 @@ AvatarFallback.displayName = "AvatarFallback";
 
 // src/ui/content-part.tsx
 import classNames2 from "classnames";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Text = () => {
   const status = useSmoothStatus();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     contentPart_exports.Text,
     {
       className: classNames2(
@@ -5253,19 +5152,19 @@ var exports3 = { Text: withSmoothContextProvider(Text) };
 var content_part_default = exports3;
 
 // src/ui/assistant-message.tsx
-import { jsx as jsx43, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs7 } from "react/jsx-runtime";
 var AssistantMessage = () => {
   return /* @__PURE__ */ jsxs7(AssistantMessageRoot, { children: [
-    /* @__PURE__ */ jsx43(AssistantMessageAvatar, {}),
-    /* @__PURE__ */ jsx43(AssistantMessageContent, {}),
-    /* @__PURE__ */ jsx43(branch_picker_default, {}),
-    /* @__PURE__ */ jsx43(assistant_action_bar_default, {})
+    /* @__PURE__ */ jsx42(AssistantMessageAvatar, {}),
+    /* @__PURE__ */ jsx42(AssistantMessageContent, {}),
+    /* @__PURE__ */ jsx42(branch_picker_default, {}),
+    /* @__PURE__ */ jsx42(assistant_action_bar_default, {})
   ] });
 };
 AssistantMessage.displayName = "AssistantMessage";
 var AssistantMessageAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx43(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx42(Avatar, { ...avatar });
 };
 var AssistantMessageRoot = withDefaults(message_exports.Root, {
   className: "aui-assistant-message-root"
@@ -5276,7 +5175,7 @@ var AssistantMessageContentWrapper = withDefaults("div", {
 });
 var AssistantMessageContent = forwardRef24(({ components: componentsProp, ...rest }, ref) => {
   const { tools, assistantMessage: { components = {} } = {} } = useThreadConfig();
-  const toolsComponents = useMemo7(
+  const toolsComponents = useMemo10(
     () => ({
       by_name: !tools ? void 0 : Object.fromEntries(
         tools.map((t) => [
@@ -5289,7 +5188,7 @@ var AssistantMessageContent = forwardRef24(({ components: componentsProp, ...res
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [...tools ?? [], components.ToolFallback]
   );
-  return /* @__PURE__ */ jsx43(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(AssistantMessageContentWrapper, { ...rest, ref, children: /* @__PURE__ */ jsx42(
     message_exports.Content,
     {
       components: {
@@ -5324,9 +5223,9 @@ import { forwardRef as forwardRef26 } from "react";
 import { PaperclipIcon, SendHorizontalIcon } from "lucide-react";
 
 // src/ui/base/CircleStopIcon.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var CircleStopIcon = () => {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -5334,7 +5233,7 @@ var CircleStopIcon = () => {
       fill: "currentColor",
       width: "16",
       height: "16",
-      children: /* @__PURE__ */ jsx44("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
+      children: /* @__PURE__ */ jsx43("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
     }
   );
 };
@@ -5343,7 +5242,7 @@ CircleStopIcon.displayName = "CircleStopIcon";
 // src/ui/composer-attachment.tsx
 import { forwardRef as forwardRef25 } from "react";
 import { CircleXIcon } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs8 } from "react/jsx-runtime";
 var ComposerAttachmentRoot = withDefaults("div", {
   className: "aui-composer-attachment-root"
 });
@@ -5353,7 +5252,7 @@ var ComposerAttachment2 = () => {
   return /* @__PURE__ */ jsxs8(ComposerAttachmentRoot, { children: [
     ".",
     attachment.name.split(".").pop(),
-    /* @__PURE__ */ jsx45(ComposerAttachmentRemove, {})
+    /* @__PURE__ */ jsx44(ComposerAttachmentRemove, {})
   ] });
 };
 ComposerAttachment2.displayName = "ComposerAttachment";
@@ -5368,7 +5267,7 @@ var ComposerAttachmentRemove = forwardRef25((props, ref) => {
   const handleRemoveAttachment = () => {
     composerStore.getState().removeAttachment(attachmentStore.getState().attachment.id);
   };
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     TooltipIconButton,
     {
       tooltip,
@@ -5377,7 +5276,7 @@ var ComposerAttachmentRemove = forwardRef25((props, ref) => {
       ...props,
       onClick: handleRemoveAttachment,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx45(CircleXIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx44(CircleXIcon, {})
     }
   );
 });
@@ -5392,7 +5291,7 @@ var composer_attachment_default = Object.assign(
 );
 
 // src/ui/composer.tsx
-import { Fragment as Fragment5, jsx as jsx46, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs9 } from "react/jsx-runtime";
 var useAllowAttachments = (ensureCapability = false) => {
   const { composer: { allowAttachments = true } = {} } = useThreadConfig();
   const attachmentsSupported = useThread((t) => t.capabilities.attachments);
@@ -5401,10 +5300,10 @@ 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, {})
+    allowAttachments && /* @__PURE__ */ jsx45(ComposerAttachments, {}),
+    allowAttachments && /* @__PURE__ */ jsx45(ComposerAddAttachment, {}),
+    /* @__PURE__ */ jsx45(ComposerInput, { autoFocus: true }),
+    /* @__PURE__ */ jsx45(ComposerAction, {})
   ] });
 };
 Composer.displayName = "Composer";
@@ -5424,7 +5323,7 @@ var ComposerInput = forwardRef26(
         composer: { input: { placeholder = "Write a message..." } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx46(ComposerInputStyled, { placeholder, ...props, ref });
+    return /* @__PURE__ */ jsx45(ComposerInputStyled, { placeholder, ...props, ref });
   }
 );
 ComposerInput.displayName = "ComposerInput";
@@ -5432,7 +5331,7 @@ var ComposerAttachmentsContainer = withDefaults("div", {
   className: "aui-composer-attachments"
 });
 var ComposerAttachments = ({ components }) => {
-  return /* @__PURE__ */ jsx46(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx45(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx45(
     composer_exports.Attachments,
     {
       components: {
@@ -5453,14 +5352,14 @@ var ComposerAddAttachment = forwardRef26((props, ref) => {
     } = {}
   } = useThreadConfig();
   const allowAttachments = useAllowAttachments();
-  return /* @__PURE__ */ jsx46(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx45(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx45(
     ComposerAttachButton,
     {
       tooltip,
       variant: "ghost",
       ...props,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx46(PaperclipIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx45(PaperclipIcon, {})
     }
   ) });
 });
@@ -5471,10 +5370,10 @@ var useAllowCancel = () => {
 };
 var ComposerAction = () => {
   const allowCancel = useAllowCancel();
-  if (!allowCancel) return /* @__PURE__ */ jsx46(ComposerSend, {});
+  if (!allowCancel) return /* @__PURE__ */ jsx45(ComposerSend, {});
   return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsx46(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx46(ComposerSend, {}) }),
-    /* @__PURE__ */ jsx46(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx46(ComposerCancel, {}) })
+    /* @__PURE__ */ jsx45(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx45(ComposerSend, {}) }),
+    /* @__PURE__ */ jsx45(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx45(ComposerCancel, {}) })
   ] });
 };
 ComposerAction.displayName = "ComposerAction";
@@ -5486,7 +5385,7 @@ var ComposerSend = forwardRef26((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__ */ jsx45(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx45(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx45(SendHorizontalIcon, {}) }) });
 });
 ComposerSend.displayName = "ComposerSend";
 var ComposerCancelButton = withDefaults(TooltipIconButton, {
@@ -5497,7 +5396,7 @@ var ComposerCancel = forwardRef26((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__ */ jsx45(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx45(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx45(CircleStopIcon, {}) }) });
 });
 ComposerCancel.displayName = "ComposerCancel";
 var exports6 = {
@@ -5513,14 +5412,14 @@ var composer_default = Object.assign(Composer, exports6);
 
 // src/ui/thread-welcome.tsx
 import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs10 } from "react/jsx-runtime";
 var ThreadWelcome = () => {
   return /* @__PURE__ */ jsxs10(ThreadWelcomeRoot, { children: [
     /* @__PURE__ */ jsxs10(ThreadWelcomeCenter, { children: [
-      /* @__PURE__ */ jsx47(ThreadWelcomeAvatar, {}),
-      /* @__PURE__ */ jsx47(ThreadWelcomeMessage, {})
+      /* @__PURE__ */ jsx46(ThreadWelcomeAvatar, {}),
+      /* @__PURE__ */ jsx46(ThreadWelcomeMessage, {})
     ] }),
-    /* @__PURE__ */ jsx47(ThreadWelcomeSuggestions, {})
+    /* @__PURE__ */ jsx46(ThreadWelcomeSuggestions, {})
   ] });
 };
 ThreadWelcome.displayName = "ThreadWelcome";
@@ -5532,20 +5431,20 @@ var ThreadWelcomeCenter = withDefaults("div", {
 });
 var ThreadWelcomeRoot = forwardRef27(
   (props, ref) => {
-    return /* @__PURE__ */ jsx47(thread_exports.Empty, { children: /* @__PURE__ */ jsx47(ThreadWelcomeRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx46(thread_exports.Empty, { children: /* @__PURE__ */ jsx46(ThreadWelcomeRootStyled, { ...props, ref }) });
   }
 );
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx47(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx46(Avatar, { ...avatar });
 };
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
 var ThreadWelcomeMessage = forwardRef27(({ 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__ */ jsx46(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
 ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
 var ThreadWelcomeSuggestionContainer = withDefaults("div", {
@@ -5557,21 +5456,21 @@ var ThreadWelcomeSuggestionStyled = withDefaults(thread_exports.Suggestion, {
 var ThreadWelcomeSuggestion = ({
   suggestion: { text, prompt }
 }) => {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx46(
     ThreadWelcomeSuggestionStyled,
     {
       prompt,
       method: "replace",
       autoSend: true,
-      children: /* @__PURE__ */ jsx47("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt })
+      children: /* @__PURE__ */ jsx46("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt })
     }
   );
 };
 var ThreadWelcomeSuggestions = () => {
   const { welcome: { suggestions } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestionContainer, { children: suggestions?.map((suggestion, idx) => {
+  return /* @__PURE__ */ jsx46(ThreadWelcomeSuggestionContainer, { children: suggestions?.map((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
-    return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestion, { suggestion }, key);
+    return /* @__PURE__ */ jsx46(ThreadWelcomeSuggestion, { suggestion }, key);
   }) });
 };
 ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
@@ -5591,7 +5490,7 @@ import { forwardRef as forwardRef29 } from "react";
 // src/ui/user-action-bar.tsx
 import { forwardRef as forwardRef28 } from "react";
 import { PencilIcon } from "lucide-react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var useAllowEdit = (ensureCapability = false) => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const editSupported = useThread((t) => t.capabilities.edit);
@@ -5600,7 +5499,7 @@ 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__ */ jsx47(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx47(UserActionBarEdit, {}) });
 };
 UserActionBar.displayName = "UserActionBar";
 var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
@@ -5612,7 +5511,7 @@ var UserActionBarEdit = forwardRef28((props, ref) => {
     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__ */ jsx47(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx47(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx47(PencilIcon, {}) }) });
 });
 UserActionBarEdit.displayName = "UserActionBarEdit";
 var exports8 = {
@@ -5644,13 +5543,13 @@ var user_message_attachment_default = Object.assign(
 );
 
 // src/ui/user-message.tsx
-import { jsx as jsx49, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs12 } from "react/jsx-runtime";
 var UserMessage = () => {
   return /* @__PURE__ */ jsxs12(UserMessageRoot, { children: [
-    /* @__PURE__ */ jsx49(UserMessageAttachments, {}),
-    /* @__PURE__ */ jsx49(user_action_bar_default, {}),
-    /* @__PURE__ */ jsx49(UserMessageContent, {}),
-    /* @__PURE__ */ jsx49(branch_picker_default, {})
+    /* @__PURE__ */ jsx48(UserMessageAttachments, {}),
+    /* @__PURE__ */ jsx48(user_action_bar_default, {}),
+    /* @__PURE__ */ jsx48(UserMessageContent, {}),
+    /* @__PURE__ */ jsx48(branch_picker_default, {})
   ] });
 };
 UserMessage.displayName = "UserMessage";
@@ -5663,7 +5562,7 @@ var UserMessageContentWrapper = withDefaults("div", {
 });
 var UserMessageContent = forwardRef29(
   ({ components, ...props }, ref) => {
-    return /* @__PURE__ */ jsx49(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx48(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx48(
       message_exports.Content,
       {
         components: {
@@ -5681,7 +5580,7 @@ var UserMessageAttachmentsContainer = withDefaults("div", {
 var UserMessageAttachments = ({
   components
 }) => {
-  return /* @__PURE__ */ jsx49(message_exports.If, { hasAttachments: true, children: /* @__PURE__ */ jsx49(UserMessageAttachmentsContainer, { children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(message_exports.If, { hasAttachments: true, children: /* @__PURE__ */ jsx48(UserMessageAttachmentsContainer, { children: /* @__PURE__ */ jsx48(
     message_exports.Attachments,
     {
       components: {
@@ -5700,13 +5599,13 @@ var user_message_default = Object.assign(UserMessage, exports10);
 
 // src/ui/edit-composer.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx50, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs13 } from "react/jsx-runtime";
 var EditComposer = () => {
   return /* @__PURE__ */ jsxs13(EditComposerRoot, { children: [
-    /* @__PURE__ */ jsx50(EditComposerInput, {}),
+    /* @__PURE__ */ jsx49(EditComposerInput, {}),
     /* @__PURE__ */ jsxs13(EditComposerFooter, { children: [
-      /* @__PURE__ */ jsx50(EditComposerCancel, {}),
-      /* @__PURE__ */ jsx50(EditComposerSend, {})
+      /* @__PURE__ */ jsx49(EditComposerCancel, {}),
+      /* @__PURE__ */ jsx49(EditComposerSend, {})
     ] })
   ] });
 };
@@ -5730,7 +5629,7 @@ var EditComposerCancel = forwardRef30(
         editComposer: { cancel: { label = "Cancel" } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx50(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx50(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
+    return /* @__PURE__ */ jsx49(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx49(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
   }
 );
 EditComposerCancel.displayName = "EditComposerCancel";
@@ -5739,7 +5638,7 @@ var EditComposerSend = forwardRef30(
     const {
       strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx50(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx50(Button, { ...props, ref, children: props.children ?? label }) });
+    return /* @__PURE__ */ jsx49(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx49(Button, { ...props, ref, children: props.children ?? label }) });
   }
 );
 EditComposerSend.displayName = "EditComposerSend";
@@ -5753,14 +5652,14 @@ var exports11 = {
 var edit_composer_default = Object.assign(EditComposer, exports11);
 
 // src/ui/thread.tsx
-import { jsx as jsx51, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 var Thread = (config) => {
-  return /* @__PURE__ */ jsx51(ThreadRoot, { config, children: /* @__PURE__ */ jsxs14(ThreadViewport, { children: [
-    /* @__PURE__ */ jsx51(thread_welcome_default, {}),
-    /* @__PURE__ */ jsx51(ThreadMessages, {}),
+  return /* @__PURE__ */ jsx50(ThreadRoot, { config, children: /* @__PURE__ */ jsxs14(ThreadViewport, { children: [
+    /* @__PURE__ */ jsx50(thread_welcome_default, {}),
+    /* @__PURE__ */ jsx50(ThreadMessages, {}),
     /* @__PURE__ */ jsxs14(ThreadViewportFooter, { children: [
-      /* @__PURE__ */ jsx51(ThreadScrollToBottom, {}),
-      /* @__PURE__ */ jsx51(composer_default, {})
+      /* @__PURE__ */ jsx50(ThreadScrollToBottom, {}),
+      /* @__PURE__ */ jsx50(composer_default, {})
     ] })
   ] }) });
 };
@@ -5769,7 +5668,7 @@ var ThreadRootStyled = withDefaults(thread_exports.Root, {
 });
 var ThreadRoot = forwardRef31(
   ({ config, ...props }, ref) => {
-    return /* @__PURE__ */ jsx51(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx51(ThreadRootStyled, { ...props, ref }) });
+    return /* @__PURE__ */ jsx50(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx50(ThreadRootStyled, { ...props, ref }) });
   }
 );
 ThreadRoot.displayName = "ThreadRoot";
@@ -5783,7 +5682,7 @@ var ThreadViewportFooter = withDefaults("div", {
 ThreadViewportFooter.displayName = "ThreadViewportFooter";
 var SystemMessage = () => null;
 var ThreadMessages = ({ components, ...rest }) => {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx50(
     thread_exports.Messages,
     {
       components: {
@@ -5807,7 +5706,7 @@ var ThreadScrollToBottom = forwardRef31((props, ref) => {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx51(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx51(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx51(ArrowDownIcon, {}) }) });
+  return /* @__PURE__ */ jsx50(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx50(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx50(ArrowDownIcon, {}) }) });
 });
 ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
 var exports12 = {
@@ -5820,20 +5719,20 @@ var exports12 = {
 var thread_default = Object.assign(Thread, exports12);
 
 // src/ui/assistant-modal.tsx
-import { Fragment as Fragment6, jsx as jsx52, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx51, jsxs as jsxs15 } from "react/jsx-runtime";
 var AssistantModal = (config) => {
   return /* @__PURE__ */ jsxs15(AssistantModalRoot, { config, children: [
-    /* @__PURE__ */ jsx52(AssistantModalTrigger, {}),
-    /* @__PURE__ */ jsx52(AssistantModalContent, { children: /* @__PURE__ */ jsx52(thread_default, {}) })
+    /* @__PURE__ */ jsx51(AssistantModalTrigger, {}),
+    /* @__PURE__ */ jsx51(AssistantModalContent, { children: /* @__PURE__ */ jsx51(thread_default, {}) })
   ] });
 };
 AssistantModal.displayName = "AssistantModal";
 var AssistantModalRoot = ({ config, ...props }) => {
-  return /* @__PURE__ */ jsx52(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx52(assistantModal_exports.Root, { ...props }) });
+  return /* @__PURE__ */ jsx51(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx51(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
 var AssistantModalTrigger = forwardRef32((props, ref) => {
-  return /* @__PURE__ */ jsx52(AssistantModalAnchor, { children: /* @__PURE__ */ jsx52(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx52(AssistantModalButton, { ...props, ref }) }) });
+  return /* @__PURE__ */ jsx51(AssistantModalAnchor, { children: /* @__PURE__ */ jsx51(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx51(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
 var AssistantModalAnchor = withDefaults(assistantModal_exports.Anchor, {
@@ -5858,7 +5757,7 @@ var AssistantModalButton = forwardRef32(({ "data-state": state, ...rest }, ref)
     } = {}
   } = useThreadConfig();
   const tooltip = state === "open" ? openTooltip : closedTooltip;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     ModalButtonStyled,
     {
       side: "left",
@@ -5867,14 +5766,14 @@ var AssistantModalButton = forwardRef32(({ "data-state": state, ...rest }, ref)
       ...rest,
       ref,
       children: rest.children ?? /* @__PURE__ */ jsxs15(Fragment6, { children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx51(
           BotIcon,
           {
             "data-state": state,
             className: "aui-modal-button-closed-icon"
           }
         ),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx51(
           ChevronDownIcon,
           {
             "data-state": state,
@@ -5985,6 +5884,7 @@ export {
   useMessage,
   useMessageContext,
   useMessageIf,
+  useMessageRuntime,
   useMessageStore,
   useMessageUtils,
   useMessageUtilsStore,