@assistant-ui/react 0.5.66 → 0.5.67

package/dist/index.mjs

@@ -145,7 +145,9 @@ var { useThread, useThreadStore } = createContextStoreHook(
   useThreadContext,
   "useThread"
 );
-var { useThreadMessages, useThreadMessagesStore } = createContextStoreHook(useThreadContext, "useThreadMessages");
+var messages = createContextStoreHook(useThreadContext, "useThreadMessages");
+var useThreadMessages = messages.useThreadMessages;
+var useThreadMessagesStore = messages.useThreadMessagesStore;
 var {
   useComposer: useThreadComposer,
   useComposerStore: useThreadComposerStore
@@ -155,61 +157,11 @@ var {
   useViewportStore: useThreadViewportStore
 } = createContextStoreHook(useThreadContext, "useViewport");
 
-// src/context/stores/ThreadComposer.ts
-import { create as create2 } from "zustand";
-var makeThreadComposerStore = (runtime) => {
-  const focusListeners = /* @__PURE__ */ new Set();
-  return create2()((_, get) => {
-    return {
-      type: "thread",
-      get value() {
-        return get().text;
-      },
-      setValue(value) {
-        get().setText(value);
-      },
-      ...runtime.getState(),
-      canCancel: false,
-      // "TODO",
-      isEditing: true,
-      addAttachment: (file) => {
-        runtime.addAttachment(file);
-      },
-      removeAttachment: (attachmentId) => {
-        runtime.removeAttachment(attachmentId);
-      },
-      reset: () => {
-        runtime.reset();
-      },
-      setText: (text) => {
-        runtime.setText(text);
-      },
-      send: () => {
-        runtime.send();
-      },
-      cancel: () => {
-        runtime.cancel();
-      },
-      focus: () => {
-        for (const listener of focusListeners) {
-          listener();
-        }
-      },
-      onFocus: (listener) => {
-        focusListeners.add(listener);
-        return () => {
-          focusListeners.delete(listener);
-        };
-      }
-    };
-  });
-};
-
 // src/context/stores/ThreadViewport.tsx
-import { create as create3 } from "zustand";
+import { create as create2 } from "zustand";
 var makeThreadViewportStore = () => {
   const scrollToBottomListeners = /* @__PURE__ */ new Set();
-  return create3(() => ({
+  return create2(() => ({
     isAtBottom: true,
     scrollToBottom: () => {
       for (const listener of scrollToBottomListeners) {
@@ -231,17 +183,17 @@ var writableStore = (store) => {
 };
 
 // src/context/providers/ThreadRuntimeProvider.tsx
-import { create as create4 } from "zustand";
+import { create as create3 } from "zustand";
 import { jsx, jsxs } from "react/jsx-runtime";
 var useThreadRuntimeStore2 = (runtime) => {
-  const [store] = useState(() => create4(() => runtime));
+  const [store] = useState(() => create3(() => runtime));
   useEffect(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useThreadStore2 = (runtime) => {
-  const [store] = useState(() => create4(() => runtime.getState()));
+  const [store] = useState(() => create3(() => runtime.getState()));
   useEffect(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
@@ -250,7 +202,7 @@ var useThreadStore2 = (runtime) => {
   return store;
 };
 var useThreadMessagesStore2 = (runtime) => {
-  const [store] = useState(() => create4(() => runtime.messages));
+  const [store] = useState(() => create3(() => runtime.messages));
   useEffect(() => {
     const updateState = () => writableStore(store).setState(runtime.messages, true);
     updateState();
@@ -259,9 +211,9 @@ var useThreadMessagesStore2 = (runtime) => {
   return store;
 };
 var useThreadComposerStore2 = (runtime) => {
-  const [store] = useState(() => makeThreadComposerStore(runtime));
+  const [store] = useState(() => create3(() => runtime.getState()));
   useEffect(() => {
-    const updateState = () => writableStore(store).setState(runtime.getState());
+    const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
     return runtime.subscribe(updateState);
   }, [runtime, store]);
@@ -293,10 +245,10 @@ var ThreadRuntimeProvider = ({ children, runtime }) => {
 };
 
 // src/context/providers/AssistantRuntimeProvider.tsx
-import { create as create5 } from "zustand";
+import { create as create4 } from "zustand";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var useAssistantRuntimeStore2 = (runtime) => {
-  const [store] = useState2(() => create5(() => runtime));
+  const [store] = useState2(() => create4(() => runtime));
   useEffect2(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
@@ -321,7 +273,7 @@ var AssistantRuntimeProvider = memo(AssistantRuntimeProviderImpl);
 
 // src/context/providers/TextContentPartProvider.tsx
 import { useEffect as useEffect3, useState as useState3 } from "react";
-import { create as create6 } from "zustand";
+import { create as create5 } from "zustand";
 
 // src/context/react/ContentPartContext.ts
 import { createContext as createContext3 } from "react";
@@ -332,11 +284,47 @@ var useContentPartContext = createContextHook(
   ContentPartContext,
   "a component passed to <MessagePrimitive.Content components={...}>"
 );
+function useContentPartRuntime(options) {
+  const context = useContentPartContext(options);
+  if (!context) return null;
+  return context.useContentPartRuntime();
+}
 var { useContentPart, useContentPartStore } = createContextStoreHook(
   useContentPartContext,
   "useContentPart"
 );
 
+// src/api/ContentPartRuntime.ts
+var ContentPartRuntime = class {
+  constructor(contentBinding, messageApi, threadApi) {
+    this.contentBinding = contentBinding;
+    this.messageApi = messageApi;
+    this.threadApi = threadApi;
+  }
+  getState() {
+    return this.contentBinding.getState();
+  }
+  addToolResult(result) {
+    const message = this.messageApi.getState();
+    if (!message) throw new Error("Message is not available");
+    const state = this.contentBinding.getState();
+    if (!state) throw new Error("Content part is not available");
+    if (state.type !== "tool-call")
+      throw new Error("Tried to add tool result to non-tool content part");
+    const toolName = state.toolName;
+    const toolCallId = state.toolCallId;
+    this.threadApi.getState().addToolResult({
+      messageId: message.id,
+      toolName,
+      toolCallId,
+      result
+    });
+  }
+  subscribe(callback) {
+    return this.contentBinding.subscribe(callback);
+  }
+};
+
 // src/context/providers/TextContentPartProvider.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var COMPLETE_STATUS = {
@@ -347,18 +335,22 @@ var RUNNING_STATUS = {
 };
 var TextContentPartProvider = ({ children, text, isRunning }) => {
   const [context] = useState3(() => {
-    const useContentPart2 = create6(() => ({
+    const useContentPartRuntime2 = create5(
+      // TODO
+      () => new ContentPartRuntime(null, null, null)
+    );
+    const useContentPart2 = create5(() => ({
       status: isRunning ? RUNNING_STATUS : COMPLETE_STATUS,
-      part: { type: "text", text }
+      part: { type: "text", text },
+      type: "text",
+      text
     }));
-    return {
-      useContentPart: useContentPart2
-    };
+    return { useContentPartRuntime: useContentPartRuntime2, useContentPart: useContentPart2 };
   });
   useEffect3(() => {
     const state = context.useContentPart.getState();
-    const textUpdated = state.part.text !== text;
-    const targetTextPart = textUpdated ? { type: "text", text } : state.part;
+    const textUpdated = state.text !== text;
+    const targetTextPart = textUpdated ? { type: "text", text } : state;
     const targetStatus = isRunning ? RUNNING_STATUS : COMPLETE_STATUS;
     const statusUpdated = state.status !== targetStatus;
     if (!textUpdated && !statusUpdated) return;
@@ -401,20 +393,25 @@ var { useEditComposer, useEditComposerStore } = createContextStoreHook(
 // src/context/react/ComposerContext.ts
 import { useMemo as useMemo3 } from "react";
 var useComposerContext = () => {
-  const { useComposer: useComposer2 } = useThreadContext();
+  const { useComposer: useThreadComposer2 } = useThreadContext();
   const { useEditComposer: useEditComposer2 } = useMessageContext({ optional: true }) ?? {};
   return useMemo3(
     () => ({
-      useComposer: useEditComposer2 ?? useComposer2,
+      useComposer: useEditComposer2 ?? useThreadComposer2,
       type: useEditComposer2 ? "edit" : "new"
     }),
-    [useEditComposer2, useComposer2]
+    [useEditComposer2, useThreadComposer2]
   );
 };
 var { useComposer, useComposerStore } = createContextStoreHook(
   useComposerContext,
   "useComposer"
 );
+function useComposerRuntime(options) {
+  const messageRuntime = useMessageRuntime({ optional: true });
+  const threadRuntime = useThreadRuntime(options);
+  return messageRuntime ? messageRuntime.composer : threadRuntime?.composer ?? null;
+}
 
 // src/hooks/useAppendMessage.tsx
 import { useCallback } from "react";
@@ -580,12 +577,11 @@ var useActionBarCopy = ({
 // src/primitive-hooks/actionBar/useActionBarEdit.tsx
 import { useCallback as useCallback4 } from "react";
 var useActionBarEdit = () => {
-  const editComposerStore = useEditComposerStore();
-  const disabled = useEditComposer((c) => c.isEditing);
+  const composerRuntime = useComposerRuntime();
+  const disabled = useComposer((c) => c.isEditing);
   const callback = useCallback4(() => {
-    const { edit } = editComposerStore.getState();
-    edit();
-  }, [editComposerStore]);
+    composerRuntime.beginEdit();
+  }, [composerRuntime]);
   if (disabled) return null;
   return callback;
 };
@@ -595,7 +591,7 @@ import { useCallback as useCallback5 } from "react";
 var useActionBarReload = () => {
   const messageStore = useMessageStore();
   const threadStore = useThreadStore();
-  const threadRuntime = useThreadRuntime();
+  const messageRuntime = useMessageRuntime();
   const threadComposerStore = useThreadComposerStore();
   const threadViewportStore = useThreadViewportStore();
   const disabled = useCombinedStore(
@@ -603,11 +599,10 @@ var useActionBarReload = () => {
     (t, m) => t.isRunning || t.isDisabled || m.role !== "assistant"
   );
   const callback = useCallback5(() => {
-    const { parentId } = messageStore.getState();
-    threadRuntime.startRun(parentId);
+    messageRuntime.reload();
     threadViewportStore.getState().scrollToBottom();
     threadComposerStore.getState().focus();
-  }, [threadRuntime, threadComposerStore, threadViewportStore, messageStore]);
+  }, [messageRuntime, threadComposerStore, threadViewportStore]);
   if (disabled) return null;
   return callback;
 };
@@ -617,19 +612,18 @@ import { useCallback as useCallback6 } from "react";
 var useActionBarSpeak = () => {
   const messageStore = useMessageStore();
   const editComposerStore = useEditComposerStore();
-  const threadRuntime = useThreadRuntime();
+  const messageRunime = useMessageRuntime();
   const messageUtilsStore = useMessageUtilsStore();
   const hasSpeakableContent = 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 = useCallback6(async () => {
-    const { message } = messageStore.getState();
-    const utt = threadRuntime.speak(message.id);
+    const utt = messageRunime.speak();
     messageUtilsStore.getState().addUtterance(utt);
-  }, [threadRuntime, messageStore, messageUtilsStore]);
+  }, [messageRunime, messageUtilsStore]);
   if (!hasSpeakableContent) return null;
   return callback;
 };
@@ -649,32 +643,28 @@ var useActionBarStopSpeaking = () => {
 // src/primitive-hooks/actionBar/useActionBarFeedbackPositive.tsx
 import { useCallback as useCallback8 } from "react";
 var useActionBarFeedbackPositive = () => {
-  const threadRuntime = useThreadRuntime();
-  const messageStore = useMessageStore();
+  const messageRuntime = useMessageRuntime();
   const messageUtilsStore = useMessageUtilsStore();
   const callback = useCallback8(() => {
-    threadRuntime.submitFeedback({
-      messageId: messageStore.getState().id,
+    messageRuntime.submitFeedback({
       type: "positive"
     });
     messageUtilsStore.getState().setSubmittedFeedback("positive");
-  }, [messageStore, messageUtilsStore, threadRuntime]);
+  }, [messageUtilsStore, messageRuntime]);
   return callback;
 };
 
 // src/primitive-hooks/actionBar/useActionBarFeedbackNegative.tsx
 import { useCallback as useCallback9 } from "react";
 var useActionBarFeedbackNegative = () => {
-  const threadRuntime = useThreadRuntime();
-  const messageStore = useMessageStore();
+  const messageRuntime = useMessageRuntime();
   const messageUtilsStore = useMessageUtilsStore();
   const callback = useCallback9(() => {
-    threadRuntime.submitFeedback({
-      messageId: messageStore.getState().id,
+    messageRuntime.submitFeedback({
       type: "negative"
     });
     messageUtilsStore.getState().setSubmittedFeedback("negative");
-  }, [messageStore, messageUtilsStore, threadRuntime]);
+  }, [messageUtilsStore, messageRuntime]);
   return callback;
 };
 
@@ -796,7 +786,7 @@ var useComposerAddAttachment = () => {
 // src/primitive-hooks/contentPart/useContentPartDisplay.tsx
 var useContentPartDisplay = () => {
   const display = useContentPart((c) => {
-    if (c.part.type !== "ui")
+    if (c.type !== "ui")
       throw new Error(
         "This component can only be used inside ui content parts."
       );
@@ -808,7 +798,7 @@ var useContentPartDisplay = () => {
 // src/primitive-hooks/contentPart/useContentPartImage.tsx
 var useContentPartImage = () => {
   const image = useContentPart((c) => {
-    if (c.part.type !== "image")
+    if (c.type !== "image")
       throw new Error(
         "ContentPartImage can only be used inside image content parts."
       );
@@ -820,7 +810,7 @@ var useContentPartImage = () => {
 // src/primitive-hooks/contentPart/useContentPartText.tsx
 var useContentPartText = () => {
   const text = useContentPart((c) => {
-    if (c.part.type !== "text")
+    if (c.type !== "text")
       throw new Error(
         "ContentPartText can only be used inside text content parts."
       );
@@ -858,20 +848,15 @@ var useMessageIf = (props) => {
 
 // src/primitive-hooks/thread/useThreadIf.tsx
 var useThreadIf = (props) => {
-  const threadStore = useThreadStore();
-  const threadMessagesStore = useThreadMessagesStore();
-  return useCombinedStore(
-    [threadStore, threadMessagesStore],
-    (thread, messages) => {
-      if (props.empty === true && messages.length !== 0) return false;
-      if (props.empty === false && messages.length === 0) return false;
-      if (props.running === true && !thread.isRunning) return false;
-      if (props.running === false && thread.isRunning) return false;
-      if (props.disabled === true && thread.isDisabled) return false;
-      if (props.disabled === false && thread.isDisabled) return false;
-      return true;
-    }
-  );
+  return useThread((thread) => {
+    if (props.empty === true && thread.messages.length !== 0) return false;
+    if (props.empty === false && thread.messages.length === 0) return false;
+    if (props.running === true && !thread.isRunning) return false;
+    if (props.running === false && thread.isRunning) return false;
+    if (props.disabled === true && thread.isDisabled) return false;
+    if (props.disabled === false && thread.isDisabled) return false;
+    return true;
+  });
 };
 
 // src/primitive-hooks/thread/useThreadEmpty.tsx
@@ -1380,76 +1365,37 @@ var MessagePrimitiveIf = ({
 MessagePrimitiveIf.displayName = "MessagePrimitive.If";
 
 // src/primitives/message/MessageContent.tsx
-import { memo as memo2 } from "react";
+import { memo as memo2, useMemo as useMemo6 } from "react";
 
-// src/context/providers/ContentPartProvider.tsx
+// src/context/providers/ContentPartRuntimeProvider.tsx
 import { useEffect as useEffect8, useState as useState5 } from "react";
-import { create as create7 } from "zustand";
+import { create as create6 } from "zustand";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var COMPLETE_STATUS2 = {
-  type: "complete"
-};
-var toContentPartStatus = (message, partIndex, part) => {
-  if (message.role !== "assistant") return COMPLETE_STATUS2;
-  const isLastPart = partIndex === Math.max(0, message.content.length - 1);
-  if (part.type !== "tool-call") {
-    if ("reason" in message.status && message.status.reason === "tool-calls" && isLastPart)
-      throw new Error(
-        "Encountered unexpected requires-action status. This is likely an internal bug in assistant-ui."
-      );
-    return isLastPart ? message.status : COMPLETE_STATUS2;
-  }
-  if (!!part.result) {
-    return COMPLETE_STATUS2;
-  }
-  return message.status;
-};
-var EMPTY_CONTENT = Object.freeze({ type: "text", text: "" });
-var getContentPartState = ({ message }, useContentPart2, partIndex) => {
-  let part = message.content[partIndex];
-  if (!part) {
-    if (message.content.length === 0 && partIndex === 0) {
-      part = EMPTY_CONTENT;
-    } else {
-      return null;
-    }
-  } else if (message.content.length === 1 && part.type === "text" && part.text.length === 0) {
-    part = EMPTY_CONTENT;
-  }
-  const status = toContentPartStatus(message, partIndex, part);
-  const currentState = useContentPart2?.getState();
-  if (currentState && currentState.part === part && currentState.status === status)
-    return null;
-  return Object.freeze({ part, status });
+var useContentPartRuntimeStore = (runtime) => {
+  const [store] = useState5(() => create6(() => runtime));
+  useEffect8(() => {
+    writableStore(store).setState(runtime, true);
+  }, [runtime, store]);
+  return store;
 };
-var useContentPartContext2 = (partIndex) => {
-  const messageStore = useMessageStore();
-  const [context] = useState5(() => {
-    const useContentPart2 = create7(
-      () => getContentPartState(messageStore.getState(), void 0, partIndex)
-    );
-    return { useContentPart: useContentPart2 };
-  });
+var useContentPartStore2 = (runtime) => {
+  const [store] = useState5(() => create6(() => runtime.getState()));
   useEffect8(() => {
-    const syncContentPart = (message) => {
-      const newState = getContentPartState(
-        message,
-        context.useContentPart,
-        partIndex
-      );
-      if (!newState) return;
-      writableStore(context.useContentPart).setState(newState, true);
-    };
-    syncContentPart(messageStore.getState());
-    return messageStore.subscribe(syncContentPart);
-  }, [context, messageStore, partIndex]);
-  return context;
+    const updateState = () => writableStore(store).setState(runtime.getState(), true);
+    updateState();
+    return runtime.subscribe(updateState);
+  }, [runtime, store]);
+  return store;
 };
-var ContentPartProvider = ({
-  partIndex,
+var ContentPartRuntimeProvider = ({
+  runtime,
   children
 }) => {
-  const context = useContentPartContext2(partIndex);
+  const useContentPartRuntime2 = useContentPartRuntimeStore(runtime);
+  const useContentPart2 = useContentPartStore2(runtime);
+  const [context] = useState5(() => {
+    return { useContentPartRuntime: useContentPartRuntime2, useContentPart: useContentPart2 };
+  });
   return /* @__PURE__ */ jsx17(ContentPartContext.Provider, { value: context, children });
 };
 
@@ -1469,11 +1415,11 @@ import {
   useContext as useContext2,
   useState as useState6
 } from "react";
-import { create as create8 } from "zustand";
+import { create as create7 } from "zustand";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var SmoothContext = createContext5(null);
 var makeSmoothContext = (initialState) => {
-  const useSmoothStatus2 = create8(() => initialState);
+  const useSmoothStatus2 = create7(() => initialState);
   return { useSmoothStatus: useSmoothStatus2 };
 };
 var SmoothContextProvider = ({ children }) => {
@@ -1554,9 +1500,7 @@ var SMOOTH_STATUS = Object.freeze({
   type: "running"
 });
 var useSmooth = (state, smooth = false) => {
-  const {
-    part: { text }
-  } = state;
+  const { text } = state;
   const id = useMessage({
     optional: true,
     selector: (m) => m.id
@@ -1568,17 +1512,17 @@ var useSmooth = (state, smooth = false) => {
     setDisplayedText(text2);
     if (smoothStatusStore) {
       writableStore(smoothStatusStore).setState(
-        text2 !== state.part.text ? SMOOTH_STATUS : state.status
+        text2 !== state.text ? SMOOTH_STATUS : state.status
       );
     }
   });
   useEffect9(() => {
     if (smoothStatusStore) {
       writableStore(smoothStatusStore).setState(
-        text !== state.part.text ? SMOOTH_STATUS : state.status
+        text !== state.text ? SMOOTH_STATUS : state.status
       );
     }
-  }, [smoothStatusStore, text, displayedText, state.status, state.part.text]);
+  }, [smoothStatusStore, text, displayedText, state.status, state.text]);
   const [animatorRef] = useState7(
     new TextStreamAnimator(text, setText)
   );
@@ -1605,6 +1549,8 @@ var useSmooth = (state, smooth = false) => {
   }, [animatorRef]);
   return useMemo5(
     () => smooth ? {
+      type: "text",
+      text: displayedText,
       part: { type: "text", text: displayedText },
       status: text === displayedText ? state.status : SMOOTH_STATUS
     } : state,
@@ -1615,10 +1561,7 @@ var useSmooth = (state, smooth = false) => {
 // src/primitives/contentPart/ContentPartText.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var ContentPartPrimitiveText = forwardRef12(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
-  const {
-    part: { text },
-    status
-  } = useSmooth(useContentPartText(), smooth);
+  const { text, status } = useSmooth(useContentPartText(), smooth);
   return /* @__PURE__ */ jsx19(Component, { "data-status": status.type, ...rest, ref: forwardedRef, children: text });
 });
 ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";
@@ -1628,18 +1571,14 @@ import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef13 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var ContentPartPrimitiveImage = forwardRef13((props, forwardedRef) => {
-  const {
-    part: { image }
-  } = useContentPartImage();
+  const { image } = useContentPartImage();
   return /* @__PURE__ */ jsx20(Primitive8.img, { src: image, ...props, ref: forwardedRef });
 });
 ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";
 
 // src/primitives/contentPart/ContentPartDisplay.tsx
 var ContentPartPrimitiveDisplay = () => {
-  const {
-    part: { display }
-  } = useContentPartDisplay();
+  const { display } = useContentPartDisplay();
   return display ?? null;
 };
 ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";
@@ -1651,136 +1590,504 @@ var ContentPartPrimitiveInProgress = ({ children }) => {
 };
 ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";
 
-// src/primitives/message/MessageContent.tsx
-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__ */ jsx21(Render, { ...props });
+// src/api/ComposerRuntime.ts
+var METHOD_NOT_SUPPORTED = () => {
+  throw new Error("Composer is not available");
 };
-var defaultComponents = {
-  Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
-    /* @__PURE__ */ jsx21(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ jsx21(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx21("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
-  ] }),
-  Image: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveImage, {}),
-  UI: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveDisplay, {})
+var EMPTY_ARRAY = Object.freeze([]);
+var getThreadComposerState = (type, runtime, beginEdit, focus, onFocus) => {
+  return Object.freeze({
+    type,
+    isEditing: runtime?.isEditing ?? false,
+    canCancel: runtime?.canCancel ?? false,
+    isEmpty: runtime?.isEmpty ?? true,
+    text: runtime?.text ?? "",
+    attachments: runtime?.attachments ?? EMPTY_ARRAY,
+    attachmentAccept: runtime?.attachmentAccept ?? "*",
+    value: runtime?.text ?? "",
+    setValue: runtime?.setText.bind(runtime) ?? METHOD_NOT_SUPPORTED,
+    setText: runtime?.setText.bind(runtime) ?? METHOD_NOT_SUPPORTED,
+    edit: beginEdit,
+    send: runtime?.send.bind(runtime) ?? METHOD_NOT_SUPPORTED,
+    cancel: runtime?.cancel.bind(runtime) ?? METHOD_NOT_SUPPORTED,
+    focus: focus ?? METHOD_NOT_SUPPORTED,
+    onFocus: onFocus ?? METHOD_NOT_SUPPORTED,
+    reset: runtime?.reset.bind(runtime) ?? METHOD_NOT_SUPPORTED,
+    addAttachment: runtime?.addAttachment.bind(runtime) ?? METHOD_NOT_SUPPORTED,
+    removeAttachment: runtime?.removeAttachment.bind(runtime) ?? METHOD_NOT_SUPPORTED
+  });
 };
-var MessageContentPartComponent = ({
-  components: {
-    Text: Text2 = defaultComponents.Text,
-    Empty,
-    Image: Image2 = defaultComponents.Image,
-    UI = defaultComponents.UI,
-    tools: { by_name = {}, Fallback: Fallback2 = void 0 } = {}
-  } = {}
-}) => {
-  const messageStore = useMessageStore();
-  const threadRuntime = useThreadRuntime();
-  const { part, status } = useContentPart();
-  const type = part.type;
-  switch (type) {
-    case "text":
-      if (status.type === "requires-action")
-        throw new Error("Encountered unexpected requires-action status");
-      if (part === EMPTY_CONTENT && !!Empty) {
-        return /* @__PURE__ */ jsx21(Empty, { status });
-      }
-      return /* @__PURE__ */ jsx21(Text2, { part, status });
-    case "image":
-      if (status.type === "requires-action")
-        throw new Error("Encountered unexpected requires-action status");
-      return /* @__PURE__ */ jsx21(Image2, { part, status });
-    case "ui":
-      if (status.type === "requires-action")
-        throw new Error("Encountered unexpected requires-action 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().id,
-        toolName: part.toolName,
-        toolCallId: part.toolCallId,
-        result
-      });
-      return /* @__PURE__ */ jsx21(
-        ToolUIDisplay,
-        {
-          UI: Tool,
-          part,
-          status,
-          addResult
-        }
-      );
-    }
-    default:
-      const unhandledType = type;
-      throw new Error(`Unknown content part type: ${unhandledType}`);
+var ComposerRuntime = class {
+  constructor(_core, _beginEdit) {
+    this._core = _core;
+    this._beginEdit = _beginEdit;
   }
-};
-var MessageContentPartImpl = ({
-  partIndex,
-  components
-}) => {
-  return /* @__PURE__ */ jsx21(ContentPartProvider, { partIndex, children: /* @__PURE__ */ jsx21(MessageContentPartComponent, { components }) });
-};
-var MessageContentPart = memo2(
-  MessageContentPartImpl,
-  (prev, next) => prev.partIndex === next.partIndex && prev.components?.Text === next.components?.Text && prev.components?.Image === next.components?.Image && prev.components?.UI === next.components?.UI && prev.components?.tools === next.components?.tools
-);
-var MessagePrimitiveContent = ({
-  components
-}) => {
-  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";
-
-// src/primitives/message/MessageInProgress.tsx
-var MessagePrimitiveInProgress = () => {
-  return null;
-};
-MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
-
-// src/primitives/message/MessageAttachments.tsx
-import { memo as memo3 } from "react";
-
-// src/context/react/AttachmentContext.ts
-import { createContext as createContext6, useContext as useContext3 } from "react";
-var AttachmentContext = createContext6(
-  null
-);
-function useAttachmentContext(options) {
-  const context = useContext3(AttachmentContext);
-  if (!options?.optional && !context)
-    throw new Error(
-      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component."
-    );
-  return context;
-}
-function useComposerAttachmentContext(options) {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.type !== "composer")
-    throw new Error(
-      "This component must be used within a ComposerPrimitive.Attachments component."
-    );
-  return context;
-}
-function useMessageAttachmentContext(options) {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.type !== "message")
-    throw new Error(
-      "This component must be used within a MessagePrimitive.Attachments component."
-    );
-  return context;
-}
-var { useAttachment, useAttachmentStore } = createContextStoreHook(
-  useAttachmentContext,
+  get type() {
+    return this._beginEdit ? "edit" : "thread";
+  }
+  /**
+   * @deprecated Use `getState().isEditing` instead. This will be removed in 0.6.0.
+   */
+  get isEditing() {
+    return this.getState().isEditing;
+  }
+  /**
+   * @deprecated Use `getState().isEmpty` instead. This will be removed in 0.6.0.
+   */
+  get isEmpty() {
+    return this.getState().isEmpty;
+  }
+  /**
+   * @deprecated Use `getState().canCancel` instead. This will be removed in 0.6.0.
+   */
+  get canCancel() {
+    return this.getState().canCancel;
+  }
+  /**
+   * @deprecated Use `getState().text` instead. This will be removed in 0.6.0.
+   */
+  get text() {
+    return this.getState().text;
+  }
+  /**
+   * @deprecated Use `getState().attachmentAccept` instead. This will be removed in 0.6.0.
+   */
+  get attachmentAccept() {
+    return this.getState().attachmentAccept;
+  }
+  // TODO should this instead return getAttachmentByIndex([idx]) instead?
+  /**
+   * @deprecated Use `getState().attachments` instead. This will be removed in 0.6.0.
+   */
+  get attachments() {
+    return this.getState().attachments;
+  }
+  /**
+   * @deprecated Use `getState().text` instead. This will be removed in 0.6.0.
+   */
+  get value() {
+    return this.text;
+  }
+  getState() {
+    return getThreadComposerState(
+      this.type,
+      this._core.getState(),
+      this._beginEdit?.bind(this) ?? METHOD_NOT_SUPPORTED,
+      this.focus.bind(this),
+      this.onFocus.bind(this)
+    );
+  }
+  setText(text) {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    core.setText(text);
+  }
+  setValue(text) {
+    this.setText(text);
+  }
+  addAttachment(file) {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    return core.addAttachment(file);
+  }
+  // /**
+  //  * @deprecated Use `getAttachmentById(id).removeAttachment` instead. This will be removed in 0.6.0.
+  //  */
+  removeAttachment(attachmentId) {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    return core.removeAttachment(attachmentId);
+  }
+  /**
+   * @deprecated This method will be removed in 0.6.0. Submit feedback if you need this functionality.
+   */
+  reset() {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    core.reset();
+  }
+  send() {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    core.send();
+  }
+  cancel() {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    core.cancel();
+  }
+  beginEdit() {
+    this._beginEdit?.();
+  }
+  /**
+   * @deprecated Use `beginEdit()` instead. This will be removed in 0.6.0.
+   */
+  edit() {
+    this.beginEdit();
+  }
+  subscribe(callback) {
+    return this._core.subscribe(callback);
+  }
+  _focusListeners = /* @__PURE__ */ new Set();
+  focus() {
+    this._focusListeners.forEach((callback) => callback());
+  }
+  onFocus(callback) {
+    this._focusListeners.add(callback);
+    return () => this._focusListeners.delete(callback);
+  }
+};
+
+// src/api/subscribable/BaseSubject.ts
+var BaseSubject = class {
+  _subscriptions = /* @__PURE__ */ new Set();
+  _connection;
+  get isConnected() {
+    return !!this._connection;
+  }
+  notifySubscribers() {
+    for (const callback of this._subscriptions) callback();
+  }
+  _updateConnection() {
+    if (this._subscriptions.size > 0) {
+      if (this._connection) return;
+      this._connection = this._connect();
+    } else {
+      this._connection?.();
+      this._connection = void 0;
+    }
+  }
+  subscribe(callback) {
+    this._subscriptions.add(callback);
+    this._updateConnection();
+    return () => {
+      this._subscriptions.delete(callback);
+      this._updateConnection();
+    };
+  }
+};
+
+// src/api/subscribable/NestedSubscriptionSubject.ts
+var NestedSubscriptionSubject = class extends BaseSubject {
+  constructor(binding) {
+    super();
+    this.binding = binding;
+  }
+  getState() {
+    return this.binding.getState();
+  }
+  _connect() {
+    const callback = () => {
+      this.notifySubscribers();
+    };
+    let lastState = this.binding.getState();
+    let innerUnsubscribe = lastState?.subscribe(callback);
+    const onRuntimeUpdate = () => {
+      const newState = this.binding.getState();
+      if (newState === lastState) return;
+      lastState = newState;
+      innerUnsubscribe?.();
+      innerUnsubscribe = this.binding.getState()?.subscribe(callback);
+      callback();
+    };
+    const outerUnsubscribe = this.binding.subscribe(onRuntimeUpdate);
+    return () => {
+      outerUnsubscribe?.();
+      innerUnsubscribe?.();
+    };
+  }
+};
+
+// src/api/subscribable/shallowEqual.ts
+function shallowEqual(objA, objB) {
+  if (objA === void 0 && objB === void 0) return true;
+  if (objA === void 0) return false;
+  if (objB === void 0) return false;
+  for (const key of Object.keys(objA)) {
+    const valueA = objA[key];
+    const valueB = objB[key];
+    if (!Object.is(valueA, valueB)) return false;
+  }
+  return true;
+}
+
+// src/api/subscribable/ShallowMemoizeSubject.ts
+var ShallowMemoizeSubject = class extends BaseSubject {
+  constructor(binding) {
+    super();
+    this.binding = binding;
+    const state = binding.getState();
+    if (state === void 0)
+      throw new Error("Entry not available in the store");
+    this._previousState = state;
+  }
+  _previousState;
+  getState = () => {
+    if (!this.isConnected) this._syncState();
+    return this._previousState;
+  };
+  _syncState() {
+    const state = this.binding.getState();
+    if (state === void 0) return false;
+    if (shallowEqual(state, this._previousState)) return false;
+    this._previousState = state;
+    return true;
+  }
+  _connect() {
+    const callback = () => {
+      if (this._syncState()) {
+        this.notifySubscribers();
+      }
+    };
+    return this.binding.subscribe(callback);
+  }
+};
+
+// src/api/MessageRuntime.ts
+var COMPLETE_STATUS2 = {
+  type: "complete"
+};
+var toContentPartStatus = (message, partIndex, part) => {
+  if (message.role !== "assistant") return COMPLETE_STATUS2;
+  const isLastPart = partIndex === Math.max(0, message.content.length - 1);
+  if (part.type !== "tool-call") {
+    if ("reason" in message.status && message.status.reason === "tool-calls" && isLastPart)
+      throw new Error(
+        "Encountered unexpected requires-action status. This is likely an internal bug in assistant-ui."
+      );
+    return isLastPart ? message.status : COMPLETE_STATUS2;
+  }
+  if (!!part.result) {
+    return COMPLETE_STATUS2;
+  }
+  return message.status;
+};
+var EMPTY_CONTENT = Object.freeze({ type: "text", text: "" });
+var getContentPartState = (message, partIndex) => {
+  let part = message.content[partIndex];
+  if (!part) {
+    if (message.content.length === 0 && partIndex === 0) {
+      part = EMPTY_CONTENT;
+    } else {
+      return void 0;
+    }
+  } else if (message.content.length === 1 && part.type === "text" && part.text.length === 0) {
+    part = EMPTY_CONTENT;
+  }
+  const status = toContentPartStatus(message, partIndex, part);
+  return Object.freeze({ ...part, part, status });
+};
+var MessageRuntime = class {
+  constructor(_core, _threadBinding) {
+    this._core = _core;
+    this._threadBinding = _threadBinding;
+  }
+  composer = new ComposerRuntime(
+    new NestedSubscriptionSubject({
+      getState: () => this._threadBinding.getState().getEditComposer(this._core.getState().id),
+      subscribe: (callback) => this._threadBinding.subscribe(callback)
+    }),
+    () => this._threadBinding.getState().beginEdit(this._core.getState().id)
+  );
+  getState() {
+    return this._core.getState();
+  }
+  // TODO improve type
+  unstable_edit(message) {
+    const state = this._core.getState();
+    if (!state) throw new Error("Message is not available");
+    this._threadBinding.getState().append({
+      ...message,
+      parentId: state.parentId
+    });
+  }
+  reload() {
+    const state = this._core.getState();
+    if (!state) throw new Error("Message is not available");
+    if (state.role !== "assistant")
+      throw new Error("Can only reload assistant messages");
+    this._threadBinding.getState().startRun(state.parentId);
+  }
+  speak() {
+    const state = this._core.getState();
+    if (!state) throw new Error("Message is not available");
+    return 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.id,
+      type
+    });
+  }
+  switchToBranch({
+    position,
+    branchId
+  }) {
+    const state = this._core.getState();
+    if (!state) throw new Error("Message is not available");
+    if (branchId && position) {
+      throw new Error("May not specify both branchId and position");
+    } else if (!branchId && !position) {
+      throw new Error("Must specify either branchId or position");
+    }
+    const thread = this._threadBinding.getState();
+    const branches = thread.getBranches(state.id);
+    let targetBranch = branchId;
+    if (position === "previous") {
+      targetBranch = branches[state.branchNumber - 2];
+    } else if (position === "next") {
+      targetBranch = branches[state.branchNumber];
+    }
+    if (!targetBranch) throw new Error("Branch not found");
+    this._threadBinding.getState().switchToBranch(targetBranch);
+  }
+  subscribe(callback) {
+    return this._core.subscribe(callback);
+  }
+  unstable_getContentPartByIndex(idx) {
+    if (idx < 0) throw new Error("Message index must be >= 0");
+    return new ContentPartRuntime(
+      new ShallowMemoizeSubject({
+        getState: () => {
+          return getContentPartState(this.getState(), idx);
+        },
+        subscribe: (callback) => this._core.subscribe(callback)
+      }),
+      this._core,
+      this._threadBinding
+    );
+  }
+};
+
+// src/primitives/message/MessageContent.tsx
+import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime";
+var ToolUIDisplay = ({
+  UI,
+  ...props
+}) => {
+  const Render = useToolUIs((s) => s.getToolUI(props.toolName)) ?? UI;
+  if (!Render) return null;
+  return /* @__PURE__ */ jsx21(Render, { ...props });
+};
+var defaultComponents = {
+  Text: () => /* @__PURE__ */ jsxs2("p", { style: { whiteSpace: "pre-line" }, children: [
+    /* @__PURE__ */ jsx21(ContentPartPrimitiveText, {}),
+    /* @__PURE__ */ jsx21(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ jsx21("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
+  ] }),
+  Image: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveImage, {}),
+  UI: () => /* @__PURE__ */ jsx21(ContentPartPrimitiveDisplay, {})
+};
+var MessageContentPartComponent = ({
+  components: {
+    Text: Text2 = defaultComponents.Text,
+    Empty,
+    Image: Image2 = defaultComponents.Image,
+    UI = defaultComponents.UI,
+    tools: { by_name = {}, Fallback: Fallback2 = void 0 } = {}
+  } = {}
+}) => {
+  const messageStore = useMessageStore();
+  const threadRuntime = useThreadRuntime();
+  const part = useContentPart();
+  const type = part.type;
+  switch (type) {
+    case "text":
+      if (part.status.type === "requires-action")
+        throw new Error("Encountered unexpected requires-action status");
+      if (part.part === EMPTY_CONTENT && !!Empty) {
+        return /* @__PURE__ */ jsx21(Empty, { status: part.status });
+      }
+      return /* @__PURE__ */ jsx21(Text2, { ...part, part });
+    case "image":
+      if (part.status.type === "requires-action")
+        throw new Error("Encountered unexpected requires-action status");
+      return /* @__PURE__ */ jsx21(Image2, { ...part, part });
+    case "ui":
+      if (part.status.type === "requires-action")
+        throw new Error("Encountered unexpected requires-action status");
+      return /* @__PURE__ */ jsx21(UI, { ...part, part });
+    case "tool-call": {
+      const Tool = by_name[part.toolName] || Fallback2;
+      const addResult = (result) => threadRuntime.addToolResult({
+        messageId: messageStore.getState().id,
+        toolName: part.toolName,
+        toolCallId: part.toolCallId,
+        result
+      });
+      return /* @__PURE__ */ jsx21(ToolUIDisplay, { ...part, part, UI: Tool, addResult });
+    }
+    default:
+      const unhandledType = type;
+      throw new Error(`Unknown content part type: ${unhandledType}`);
+  }
+};
+var MessageContentPartImpl = ({
+  partIndex,
+  components
+}) => {
+  const messageRuntime = useMessageRuntime();
+  const runtime = useMemo6(
+    () => messageRuntime.unstable_getContentPartByIndex(partIndex),
+    [messageRuntime, partIndex]
+  );
+  return /* @__PURE__ */ jsx21(ContentPartRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx21(MessageContentPartComponent, { components }) });
+};
+var MessageContentPart = memo2(
+  MessageContentPartImpl,
+  (prev, next) => prev.partIndex === next.partIndex && prev.components?.Text === next.components?.Text && prev.components?.Image === next.components?.Image && prev.components?.UI === next.components?.UI && prev.components?.tools === next.components?.tools
+);
+var MessagePrimitiveContent = ({
+  components
+}) => {
+  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";
+
+// src/primitives/message/MessageInProgress.tsx
+var MessagePrimitiveInProgress = () => {
+  return null;
+};
+MessagePrimitiveInProgress.displayName = "MessagePrimitive.InProgress";
+
+// src/primitives/message/MessageAttachments.tsx
+import { memo as memo3 } from "react";
+
+// src/context/react/AttachmentContext.ts
+import { createContext as createContext6, useContext as useContext3 } from "react";
+var AttachmentContext = createContext6(
+  null
+);
+function useAttachmentContext(options) {
+  const context = useContext3(AttachmentContext);
+  if (!options?.optional && !context)
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component."
+    );
+  return context;
+}
+function useComposerAttachmentContext(options) {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.type !== "composer")
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments component."
+    );
+  return context;
+}
+function useMessageAttachmentContext(options) {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.type !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component."
+    );
+  return context;
+}
+var { useAttachment, useAttachmentStore } = createContextStoreHook(
+  useAttachmentContext,
   "useAttachment"
 );
 var {
@@ -1794,7 +2101,7 @@ var {
 
 // src/context/providers/MessageAttachmentProvider.tsx
 import { useEffect as useEffect10, useState as useState8 } from "react";
-import { create as create9 } from "zustand";
+import { create as create8 } from "zustand";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var getAttachment = (message, useAttachment2, partIndex) => {
   if (message.role !== "user") return null;
@@ -1809,7 +2116,7 @@ var useMessageAttachmentContext2 = (partIndex) => {
   const messageStore = useMessageStore();
   const [context] = useState8(
     () => {
-      const useAttachment2 = create9(
+      const useAttachment2 = create8(
         () => getAttachment(messageStore.getState(), void 0, partIndex)
       );
       return { type: "message", useAttachment: useAttachment2 };
@@ -2040,7 +2347,7 @@ import { memo as memo4 } from "react";
 
 // src/context/providers/ComposerAttachmentProvider.tsx
 import { useEffect as useEffect12, useState as useState9 } from "react";
-import { create as create10 } from "zustand";
+import { create as create9 } from "zustand";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var getAttachment2 = ({ attachments }, useAttachment2, partIndex) => {
   const attachment = attachments[partIndex];
@@ -2053,7 +2360,7 @@ var useComposerAttachmentContext2 = (partIndex) => {
   const threadComposerStore = useThreadComposerStore();
   const [context] = useState9(
     () => {
-      const useAttachment2 = create10(
+      const useAttachment2 = create9(
         () => getAttachment2(threadComposerStore.getState(), void 0, partIndex)
       );
       return { type: "composer", useAttachment: useAttachment2 };
@@ -2306,54 +2613,15 @@ var ThreadPrimitiveViewport = forwardRef18(({ autoScroll, children, ...rest }, f
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 
 // src/primitives/thread/ThreadMessages.tsx
-import { memo as memo5, useMemo as useMemo6 } from "react";
+import { memo as memo5, useMemo as useMemo7 } from "react";
 
 // src/context/providers/MessageRuntimeProvider.tsx
 import { useEffect as useEffect14, useState as useState10 } from "react";
-import { create as create13 } from "zustand";
-
-// src/context/stores/EditComposer.ts
 import { create as create11 } from "zustand";
-var makeEditComposerStore = ({
-  onEdit,
-  onSend
-}) => create11()((set, get) => ({
-  type: "edit",
-  get value() {
-    return get().text;
-  },
-  setValue(value) {
-    get().setText(value);
-  },
-  text: "",
-  setText: (text) => {
-    set({ text, isEmpty: text.trim().length === 0 });
-  },
-  canCancel: false,
-  isEditing: false,
-  isEmpty: true,
-  edit: () => {
-    const text = onEdit();
-    set({
-      isEditing: true,
-      canCancel: true,
-      isEmpty: text.trim().length === 0,
-      text
-    });
-  },
-  send: () => {
-    const text = get().text;
-    set({ isEditing: false, canCancel: false });
-    onSend(text);
-  },
-  cancel: () => {
-    set({ isEditing: false, canCancel: false });
-  }
-}));
 
 // src/context/stores/MessageUtils.ts
-import { create as create12 } from "zustand";
-var makeMessageUtilsStore = () => create12((set) => {
+import { create as create10 } from "zustand";
+var makeMessageUtilsStore = () => create10((set) => {
   let utterance = null;
   return {
     isCopied: false,
@@ -2385,14 +2653,14 @@ var makeMessageUtilsStore = () => create12((set) => {
 // src/context/providers/MessageRuntimeProvider.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
 var useMessageRuntimeStore = (runtime) => {
-  const [store] = useState10(() => create13(() => runtime));
+  const [store] = useState10(() => create11(() => runtime));
   useEffect14(() => {
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
   return store;
 };
 var useMessageStore2 = (runtime) => {
-  const [store] = useState10(() => create13(() => runtime.getState()));
+  const [store] = useState10(() => create11(() => runtime.getState()));
   useEffect14(() => {
     const updateState = () => writableStore(store).setState(runtime.getState(), true);
     updateState();
@@ -2405,29 +2673,13 @@ var useMessageUtilsStore2 = () => {
   return store;
 };
 var useEditComposerStore2 = (useMessageRuntime2) => {
-  const [store] = useState10(
-    () => makeEditComposerStore({
-      onEdit: () => {
-        const text = getThreadMessageText(
-          useMessageRuntime2.getState().getState()
-        );
-        return text;
-      },
-      onSend: (text) => {
-        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"
-        );
-        useMessageRuntime2.getState().edit({
-          role: message.role,
-          content: [{ type: "text", text }, ...nonTextParts],
-          attachments: message.attachments ?? []
-        });
-      }
-    })
-  );
+  const runtime = useMessageRuntime2.getState().composer;
+  const [store] = useState10(() => create11(() => runtime.getState()));
+  useEffect14(() => {
+    const updateState = () => writableStore(store).setState(runtime.getState());
+    updateState();
+    return runtime.subscribe(updateState);
+  }, [runtime, store]);
   return store;
 };
 var MessageRuntimeProvider = ({
@@ -2488,7 +2740,7 @@ var ThreadMessageImpl = ({
   components
 }) => {
   const threadRuntime = useThreadRuntime();
-  const runtime = useMemo6(
+  const runtime = useMemo7(
     () => threadRuntime.unstable_getMesssageByIndex(messageIndex),
     [threadRuntime, messageIndex]
   );
@@ -2501,7 +2753,7 @@ var ThreadMessage = memo5(
 var ThreadPrimitiveMessagesImpl = ({
   components
 }) => {
-  const messagesLength = useThreadMessages((t) => t.length);
+  const messagesLength = useThread((t) => t.messages.length);
   if (messagesLength === 0) return null;
   return Array.from({ length: messagesLength }, (_, index) => /* @__PURE__ */ jsx32(ThreadMessage, { messageIndex: index, components }, index));
 };
@@ -2545,7 +2797,7 @@ var subscribeToMainThread = (runtime, callback) => {
 };
 
 // src/runtimes/local/useLocalRuntime.tsx
-import { useInsertionEffect, useMemo as useMemo7, useState as useState12 } from "react";
+import { useInsertionEffect, useMemo as useMemo8, useState as useState12 } from "react";
 
 // src/runtimes/core/BaseAssistantRuntimeCore.tsx
 var BaseAssistantRuntimeCore = class {
@@ -2575,7 +2827,7 @@ var internal_exports = {};
 __export(internal_exports, {
   AssistantRuntime: () => AssistantRuntime,
   BaseAssistantRuntimeCore: () => BaseAssistantRuntimeCore,
-  BaseThreadComposerRuntimeCore: () => BaseThreadComposerRuntimeCore,
+  DefaultThreadComposerRuntimeCore: () => DefaultThreadComposerRuntimeCore,
   MessageRepository: () => MessageRepository,
   ProxyConfigProvider: () => ProxyConfigProvider,
   ThreadRuntime: () => ThreadRuntime,
@@ -2586,58 +2838,20 @@ __export(internal_exports, {
   withSmoothContextProvider: () => withSmoothContextProvider
 });
 
-// src/runtimes/utils/BaseThreadComposerRuntimeCore.tsx
-var BaseThreadComposerRuntimeCore = class {
-  constructor(runtime) {
-    this.runtime = runtime;
-    this.connect();
-  }
-  _attachmentAdapter;
+// src/runtimes/composer/BaseComposerRuntimeCore.tsx
+var BaseComposerRuntimeCore = class {
+  isEditing = true;
   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 ?? "*";
-    if (this.attachmentAccept !== accept) {
-      this.attachmentAccept = accept;
-      return true;
-    }
-    return false;
-  }
   _attachments = [];
+  set attachments(value) {
+    this._attachments = value;
+    this.notifySubscribers();
+  }
   get attachments() {
     return this._attachments;
   }
-  async addAttachment(file) {
-    if (!this._attachmentAdapter)
-      throw new Error("Attachments are not supported");
-    const attachment = await this._attachmentAdapter.add({ file });
-    this._attachments = [...this._attachments, attachment];
-    this.notifySubscribers();
-  }
-  async removeAttachment(attachmentId) {
-    if (!this._attachmentAdapter)
-      throw new Error("Attachments are not supported");
-    const index = this._attachments.findIndex((a) => a.id === attachmentId);
-    if (index === -1) throw new Error("Attachment not found");
-    const attachment = this._attachments[index];
-    await this._attachmentAdapter.remove(attachment);
-    this._attachments = this._attachments.toSpliced(index, 1);
-    this.notifySubscribers();
+  get isEmpty() {
+    return !this.text.trim() && !this.attachments.length;
   }
   _text = "";
   get text() {
@@ -2658,16 +2872,39 @@ var BaseThreadComposerRuntimeCore = class {
         async (a) => await this._attachmentAdapter.send(a)
       )
     ) : [];
-    this.runtime.append({
-      parentId: this.runtime.messages.at(-1)?.id ?? null,
+    const message = {
       role: "user",
       content: this.text ? [{ type: "text", text: this.text }] : [],
       attachments
-    });
+    };
     this.reset();
+    this.handleSend(message);
   }
-  async cancel() {
-    this.runtime.cancelRun();
+  _attachmentAdapter;
+  setAttachmentAdapter(adapter) {
+    this._attachmentAdapter = adapter;
+    const accept = adapter?.accept ?? "*";
+    if (this.attachmentAccept !== accept) {
+      this.attachmentAccept = accept;
+      this.notifySubscribers();
+    }
+  }
+  async addAttachment(file) {
+    if (!this._attachmentAdapter)
+      throw new Error("Attachments are not supported");
+    const attachment = await this._attachmentAdapter.add({ file });
+    this._attachments = [...this._attachments, attachment];
+    this.notifySubscribers();
+  }
+  async removeAttachment(attachmentId) {
+    if (!this._attachmentAdapter)
+      throw new Error("Attachments are not supported");
+    const index = this._attachments.findIndex((a) => a.id === attachmentId);
+    if (index === -1) throw new Error("Attachment not found");
+    const attachment = this._attachments[index];
+    await this._attachmentAdapter.remove(attachment);
+    this._attachments = this._attachments.toSpliced(index, 1);
+    this.notifySubscribers();
   }
   _subscriptions = /* @__PURE__ */ new Set();
   notifySubscribers() {
@@ -2679,6 +2916,36 @@ var BaseThreadComposerRuntimeCore = class {
   }
 };
 
+// src/runtimes/composer/DefaultThreadComposerRuntimeCore.tsx
+var DefaultThreadComposerRuntimeCore = class extends BaseComposerRuntimeCore {
+  constructor(runtime) {
+    super();
+    this.runtime = runtime;
+    this.connect();
+  }
+  _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();
+      }
+    });
+  }
+  async handleSend(message) {
+    this.runtime.append({
+      ...message,
+      parentId: this.runtime.messages.at(-1)?.id ?? null
+    });
+  }
+  async cancel() {
+    this.runtime.cancelRun();
+  }
+};
+
 // src/utils/ProxyConfigProvider.ts
 var ProxyConfigProvider = class {
   _providers = /* @__PURE__ */ new Set();
@@ -2804,11 +3071,11 @@ var MessageRepository = class {
     }
   }
   getMessages() {
-    const messages = new Array(this.head?.level ?? 0);
+    const messages2 = new Array(this.head?.level ?? 0);
     for (let current = this.head; current; current = current.prev) {
-      messages[current.level] = current.current;
+      messages2[current.level] = current.current;
     }
-    return messages;
+    return messages2;
   }
   addOrUpdateMessage(parentId, message) {
     const existingItem = this.messages.get(message.id);
@@ -2934,11 +3201,11 @@ var MessageRepository = class {
       messages: exportItems
     };
   }
-  import({ headId, messages }) {
-    for (const { message, parentId } of messages) {
+  import({ headId, messages: messages2 }) {
+    for (const { message, parentId } of messages2) {
       this.addOrUpdateMessage(parentId, message);
     }
-    this.resetHead(headId ?? messages.at(-1)?.message.id ?? null);
+    this.resetHead(headId ?? messages2.at(-1)?.message.id ?? null);
   }
 };
 
@@ -3005,98 +3272,38 @@ var buttonVariants = cva("aui-button", {
       default: "aui-button-medium",
       icon: "aui-button-icon"
     }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-});
-var Button = forwardRef20(
-  ({ className, variant, size, ...props }, ref) => {
-    return /* @__PURE__ */ jsx35(
-      Primitive13.button,
-      {
-        className: buttonVariants({ variant, size, className }),
-        ...props,
-        ref
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-// src/ui/base/tooltip-icon-button.tsx
-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__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
-      children,
-      /* @__PURE__ */ jsx36("span", { className: "aui-sr-only", children: tooltip })
-    ] }) }),
-    /* @__PURE__ */ jsx36(TooltipContent, { side, children: tooltip })
-  ] });
-});
-TooltipIconButton.displayName = "TooltipIconButton";
-
-// src/api/subscribable/BaseSubject.ts
-var BaseSubject = class {
-  _subscriptions = /* @__PURE__ */ new Set();
-  _connection;
-  get isConnected() {
-    return !!this._connection;
-  }
-  notifySubscribers() {
-    for (const callback of this._subscriptions) callback();
-  }
-  _updateConnection() {
-    if (this._subscriptions.size > 0) {
-      if (this._connection) return;
-      this._connection = this._connect();
-    } else {
-      this._connection?.();
-      this._connection = void 0;
-    }
-  }
-  subscribe(callback) {
-    this._subscriptions.add(callback);
-    this._updateConnection();
-    return () => {
-      this._subscriptions.delete(callback);
-      this._updateConnection();
-    };
-  }
-};
-
-// src/api/subscribable/NestedSubscriptionSubject.ts
-var NestedSubscriptionSubject = class extends BaseSubject {
-  constructor(binding) {
-    super();
-    this.binding = binding;
-  }
-  getState() {
-    return this.binding.getState();
-  }
-  _connect() {
-    const callback = () => {
-      this.notifySubscribers();
-    };
-    let lastState = this.binding.getState();
-    let innerUnsubscribe = lastState.subscribe(callback);
-    const onRuntimeUpdate = () => {
-      const newState = this.binding.getState();
-      if (newState === lastState) return;
-      lastState = newState;
-      innerUnsubscribe?.();
-      innerUnsubscribe = this.binding.getState().subscribe(callback);
-      callback();
-    };
-    const outerUnsubscribe = this.binding.subscribe(onRuntimeUpdate);
-    return () => {
-      outerUnsubscribe?.();
-      innerUnsubscribe();
-    };
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
   }
-};
+});
+var Button = forwardRef20(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ jsx35(
+      Primitive13.button,
+      {
+        className: buttonVariants({ variant, size, className }),
+        ...props,
+        ref
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/base/tooltip-icon-button.tsx
+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__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "ghost", size: "icon", ...rest, ref, children: [
+      children,
+      /* @__PURE__ */ jsx36("span", { className: "aui-sr-only", children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ jsx36(TooltipContent, { side, children: tooltip })
+  ] });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
 
 // src/api/AssistantRuntime.ts
 var AssistantRuntime = class {
@@ -3128,49 +3335,8 @@ var AssistantRuntime = class {
   }
 };
 
-// src/api/ContentPartRuntime.ts
-var ContentPartRuntime = class {
-  constructor(contentBinding, messageApi, threadApi) {
-    this.contentBinding = contentBinding;
-    this.messageApi = messageApi;
-    this.threadApi = threadApi;
-  }
-  getState() {
-    return this.contentBinding.getState();
-  }
-  addToolResult(result) {
-    const message = this.messageApi.getState();
-    if (!message) throw new Error("Message is not available");
-    const state = this.contentBinding.getState();
-    if (!state) throw new Error("Content part is not available");
-    if (state.part.type !== "tool-call")
-      throw new Error("Tried to add tool result to non-tool content part");
-    const toolName = state.part.toolName;
-    const toolCallId = state.part.toolCallId;
-    this.threadApi.getState().addToolResult({
-      messageId: message.id,
-      toolName,
-      toolCallId,
-      result
-    });
-  }
-};
-
-// src/api/subscribable/shallowEqual.ts
-function shallowEqual(objA, objB) {
-  if (objA === void 0 && objB === void 0) return true;
-  if (objA === void 0) return false;
-  if (objB === void 0) return false;
-  for (const key of Object.keys(objA)) {
-    const valueA = objA[key];
-    const valueB = objB[key];
-    if (!Object.is(valueA, valueB)) return false;
-  }
-  return true;
-}
-
-// src/api/subscribable/ShallowMemoizeSubject.ts
-var ShallowMemoizeSubject = class extends BaseSubject {
+// src/api/subscribable/LazyMemoizeSubject.ts
+var LazyMemoizeSubject = class extends BaseSubject {
   constructor(binding) {
     super();
     this.binding = binding;
@@ -3179,194 +3345,32 @@ var ShallowMemoizeSubject = class extends BaseSubject {
       throw new Error("Entry not available in the store");
     this._previousState = state;
   }
+  _previousStateDirty = true;
   _previousState;
   getState = () => {
-    if (!this.isConnected) this._syncState();
+    if (!this.isConnected || this._previousStateDirty) {
+      const newState = this.binding.getState();
+      if (newState !== void 0) {
+        this._previousState = newState;
+      }
+      this._previousStateDirty = false;
+    }
     return this._previousState;
   };
-  _syncState() {
-    const state = this.binding.getState();
-    if (state === void 0) return false;
-    if (shallowEqual(state, this._previousState)) return false;
-    this._previousState = state;
-    return true;
-  }
   _connect() {
     const callback = () => {
-      if (this._syncState()) {
-        this.notifySubscribers();
-      }
+      this._previousStateDirty = true;
+      this.notifySubscribers();
     };
     return this.binding.subscribe(callback);
   }
 };
 
-// src/api/MessageRuntime.ts
-var MessageRuntime = class {
-  constructor(_core, _threadBinding) {
-    this._core = _core;
-    this._threadBinding = _threadBinding;
-  }
-  getState() {
-    return this._core.getState();
-  }
-  // TODO improve type
-  edit(message) {
-    const state = this._core.getState();
-    if (!state) throw new Error("Message is not available");
-    this._threadBinding.getState().append({
-      ...message,
-      parentId: state.parentId
-    });
-  }
-  reload() {
-    const state = this._core.getState();
-    if (!state) throw new Error("Message is not available");
-    this._threadBinding.getState().startRun(state.parentId);
-  }
-  speak() {
-    const state = this._core.getState();
-    if (!state) throw new Error("Message is not available");
-    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.id,
-      type
-    });
-  }
-  switchToBranch({
-    position,
-    branchId
-  }) {
-    const state = this._core.getState();
-    if (!state) throw new Error("Message is not available");
-    if (branchId && position) {
-      throw new Error("May not specify both branchId and position");
-    } else if (!branchId && !position) {
-      throw new Error("Must specify either branchId or position");
-    }
-    const thread = this._threadBinding.getState();
-    const branches = thread.getBranches(state.id);
-    let targetBranch = branchId;
-    if (position === "previous") {
-      targetBranch = branches[state.branchNumber - 2];
-    } else if (position === "next") {
-      targetBranch = branches[state.branchNumber];
-    }
-    if (!targetBranch) throw new Error("Branch not found");
-    this._threadBinding.getState().switchToBranch(targetBranch);
-  }
-  subscribe(callback) {
-    return this._core.subscribe(callback);
-  }
-  getContentPartByIdx(idx) {
-    if (idx < 0) throw new Error("Message index must be >= 0");
-    return new ContentPartRuntime(
-      new ShallowMemoizeSubject({
-        getState: () => {
-          const state = this.getState();
-          if (!state) return void 0;
-          const message = state.message;
-          const part = message.content[idx];
-          if (!part) return void 0;
-          return {
-            part,
-            status: toContentPartStatus(message, idx, part)
-          };
-        },
-        subscribe: (callback) => this._core.subscribe(callback)
-      }),
-      this._core,
-      this._threadBinding
-    );
-  }
-};
-
-// src/api/ThreadComposerRuntime.ts
-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;
-  }
-  /**
-   * @deprecated Use `getState().isEmpty` instead. This will be removed in 0.6.0.
-   */
-  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.
-   */
-  get text() {
-    return this._core.getState().text;
-  }
-  /**
-   * @deprecated Use `getState().attachmentAccept` instead. This will be removed in 0.6.0.
-   */
-  get attachmentAccept() {
-    return this._core.getState().attachmentAccept;
-  }
-  // TODO should this instead return getAttachmentByIndex([idx]) instead?
-  /**
-   * @deprecated Use `getState().attachments` instead. This will be removed in 0.6.0.
-   */
-  get attachments() {
-    return this._core.getState().attachments;
-  }
-  getState() {
-    return getThreadComposerState(this._core.getState());
-  }
-  setText(text) {
-    this._core.getState().setText(text);
-  }
-  addAttachment(file) {
-    return this._core.getState().addAttachment(file);
-  }
-  // /**
-  //  * @deprecated Use `getAttachmentById(id).removeAttachment` instead. This will be removed in 0.6.0.
-  //  */
-  removeAttachment(attachmentId) {
-    return this._core.getState().removeAttachment(attachmentId);
-  }
-  /**
-   * @deprecated This method will be removed in 0.6.0. Submit feedback if you need this functionality.
-   */
-  reset() {
-    this._core.getState().reset();
-  }
-  send() {
-    this._core.getState().send();
-  }
-  cancel() {
-    this._core.getState().cancel();
-  }
-  subscribe(callback) {
-    return this._core.subscribe(callback);
-  }
-};
-
 // src/api/ThreadRuntime.ts
-var toAppendMessage = (messages, message) => {
+var toAppendMessage = (messages2, message) => {
   if (typeof message === "string") {
     return {
-      parentId: messages.at(-1)?.id ?? null,
+      parentId: messages2.at(-1)?.id ?? null,
       role: "user",
       content: [{ type: "text", text: message }],
       attachments: []
@@ -3376,7 +3380,7 @@ var toAppendMessage = (messages, message) => {
     return message;
   }
   return {
-    parentId: message.parentId ?? messages.at(-1)?.id ?? null,
+    parentId: message.parentId ?? messages2.at(-1)?.id ?? null,
     role: message.role ?? "user",
     content: message.content,
     attachments: message.attachments ?? []
@@ -3389,13 +3393,11 @@ var getThreadState = (runtime) => {
     capabilities: runtime.capabilities,
     isDisabled: runtime.isDisabled,
     isRunning: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running",
+    messages: runtime.messages,
     unstable_synchronizer: runtime.unstable_synchronizer
   });
 };
 var ThreadRuntime = class {
-  constructor(_threadBinding) {
-    this._threadBinding = _threadBinding;
-  }
   // public path = "assistant.threads[main]"; // TODO
   /**
    * @deprecated Use `getState().threadId` instead. This will be removed in 0.6.0.
@@ -3421,21 +3423,35 @@ var ThreadRuntime = class {
   get capabilities() {
     return this.getState().capabilities;
   }
-  // TODO this should instead return getMessageByIndex([idx])
+  /**
+   * @deprecated Use `getState().messages` instead. This will be removed in 0.6.0.
+   */
   get messages() {
     return this._threadBinding.getState().messages;
   }
   unstable_getCore() {
     return this._threadBinding.getState();
   }
-  composer = new ThreadComposerRuntime(
+  _threadBinding;
+  constructor(threadBinding) {
+    const stateBinding = new LazyMemoizeSubject({
+      getState: () => getThreadState(threadBinding.getState()),
+      subscribe: (callback) => threadBinding.subscribe(callback)
+    });
+    this._threadBinding = {
+      getState: () => threadBinding.getState(),
+      getStateState: () => stateBinding.getState(),
+      subscribe: (callback) => threadBinding.subscribe(callback)
+    };
+  }
+  composer = new ComposerRuntime(
     new NestedSubscriptionSubject({
       getState: () => this._threadBinding.getState().composer,
       subscribe: (callback) => this._threadBinding.subscribe(callback)
     })
   );
   getState() {
-    return getThreadState(this._threadBinding.getState());
+    return this._threadBinding.getStateState();
   }
   append(message) {
     this._threadBinding.getState().append(
@@ -3484,6 +3500,18 @@ var ThreadRuntime = class {
   submitFeedback(options) {
     return this._threadBinding.getState().submitFeedback(options);
   }
+  /**
+   * @deprecated This is a temporary API. This will be removed in 0.6.0.
+   */
+  getEditComposer(messageId) {
+    return this._threadBinding.getState().getEditComposer(messageId);
+  }
+  /**
+   * @deprecated This is a temporary API. This will be removed in 0.6.0.
+   */
+  beginEdit(messageId) {
+    return this._threadBinding.getState().beginEdit(messageId);
+  }
   export() {
     return this._threadBinding.getState().export();
   }
@@ -3495,15 +3523,15 @@ var ThreadRuntime = class {
     return new MessageRuntime(
       new ShallowMemoizeSubject({
         getState: () => {
-          const messages = this.messages;
-          const message = messages[idx];
+          const messages2 = this.messages;
+          const message = messages2[idx];
           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,
+            isLast: idx === messages2.length - 1,
+            parentId: messages2[idx - 1]?.id ?? null,
             branches,
             branchNumber: branches.indexOf(message.id) + 1,
             branchCount: branches.length
@@ -3518,12 +3546,12 @@ var ThreadRuntime = class {
 
 // src/runtimes/edge/converters/fromLanguageModelMessages.ts
 var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
-  const messages = [];
+  const messages2 = [];
   for (const lmMessage of lm) {
     const role = lmMessage.role;
     switch (role) {
       case "system": {
-        messages.push({
+        messages2.push({
           role: "system",
           content: [
             {
@@ -3535,7 +3563,7 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
         break;
       }
       case "user": {
-        messages.push({
+        messages2.push({
           role: "user",
           content: lmMessage.content.map((part) => {
             const type = part.type;
@@ -3578,20 +3606,20 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
           return part;
         });
         if (mergeRoundtrips) {
-          const previousMessage = messages[messages.length - 1];
+          const previousMessage = messages2[messages2.length - 1];
           if (previousMessage?.role === "assistant") {
             previousMessage.content.push(...newContent);
             break;
           }
         }
-        messages.push({
+        messages2.push({
           role: "assistant",
           content: newContent
         });
         break;
       }
       case "tool": {
-        const previousMessage = messages[messages.length - 1];
+        const previousMessage = messages2[messages2.length - 1];
         if (previousMessage?.role !== "assistant")
           throw new Error(
             "A tool message must be preceded by an assistant message."
@@ -3617,7 +3645,7 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
       }
     }
   }
-  return messages;
+  return messages2;
 };
 
 // src/runtimes/edge/converters/fromLanguageModelTools.ts
@@ -3775,7 +3803,7 @@ var EdgeChatAdapter = class {
   constructor(options) {
     this.options = options;
   }
-  async *run({ messages, abortSignal, config }) {
+  async *run({ messages: messages2, abortSignal, config }) {
     const headers = new Headers(this.options.headers);
     headers.set("Content-Type", "application/json");
     const result = await fetch(this.options.api, {
@@ -3784,7 +3812,7 @@ var EdgeChatAdapter = class {
       credentials: this.options.credentials ?? "same-origin",
       body: JSON.stringify({
         system: config.system,
-        messages: toCoreMessages(messages),
+        messages: toCoreMessages(messages2),
         tools: config.tools ? toLanguageModelTools(config.tools) : [],
         ...config.callSettings,
         ...config.config,
@@ -3823,6 +3851,43 @@ var useEdgeRuntime = ({
 // src/runtimes/local/shouldContinue.tsx
 var shouldContinue = (result) => result.status?.type === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
 
+// src/runtimes/composer/DefaultEditComposerRuntimeCore.tsx
+var DefaultEditComposerRuntimeCore = class extends BaseComposerRuntimeCore {
+  constructor(runtime, endEditCallback, { parentId, message }) {
+    super();
+    this.runtime = runtime;
+    this.endEditCallback = endEditCallback;
+    this._parentId = parentId;
+    this._previousText = getThreadMessageText(message);
+    this.setText(this._previousText);
+    this._nonTextParts = message.content.filter(
+      (part) => part.type !== "text" && part.type !== "ui"
+    );
+  }
+  get canCancel() {
+    return true;
+  }
+  _nonTextParts;
+  _previousText;
+  _parentId;
+  async handleSend(message) {
+    const text = getThreadMessageText(message);
+    if (text !== this._previousText) {
+      this.runtime.append({
+        ...message,
+        content: [...message.content, ...this._nonTextParts],
+        parentId: this._parentId
+      });
+    }
+    this.endEditCallback();
+    this.notifySubscribers();
+  }
+  async cancel() {
+    this.endEditCallback();
+    this.notifySubscribers();
+  }
+};
+
 // src/runtimes/local/LocalThreadRuntimeCore.tsx
 var LocalThreadRuntimeCore = class {
   constructor(configProvider, adapter, { initialMessages, ...options }) {
@@ -3832,8 +3897,8 @@ var LocalThreadRuntimeCore = class {
     this.options = options;
     if (initialMessages) {
       let parentId = null;
-      const messages = fromCoreMessages(initialMessages);
-      for (const message of messages) {
+      const messages2 = fromCoreMessages(initialMessages);
+      for (const message of messages2) {
         this.repository.addOrUpdateMessage(parentId, message);
         parentId = message.id;
       }
@@ -3857,7 +3922,7 @@ var LocalThreadRuntimeCore = class {
   get messages() {
     return this.repository.getMessages();
   }
-  composer = new BaseThreadComposerRuntimeCore(this);
+  composer = new DefaultThreadComposerRuntimeCore(this);
   getModelConfig() {
     return this.configProvider.getModelConfig();
   }
@@ -3886,6 +3951,23 @@ var LocalThreadRuntimeCore = class {
     }
     if (hasUpdates) this.notifySubscribers();
   }
+  _editComposers = /* @__PURE__ */ new Map();
+  getEditComposer(messageId) {
+    return this._editComposers.get(messageId);
+  }
+  beginEdit(messageId) {
+    if (this._editComposers.has(messageId))
+      throw new Error("Edit already in progress");
+    this._editComposers.set(
+      messageId,
+      new DefaultEditComposerRuntimeCore(
+        this,
+        () => this._editComposers.delete(messageId),
+        this.repository.getMessage(messageId)
+      )
+    );
+    this.notifySubscribers();
+  }
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
   }
@@ -3920,7 +4002,7 @@ var LocalThreadRuntimeCore = class {
     } while (shouldContinue(message));
   }
   async performRoundtrip(parentId, message) {
-    const messages = this.repository.getMessages();
+    const messages2 = this.repository.getMessages();
     this.abortController?.abort();
     this.abortController = new AbortController();
     const initialContent = message.content;
@@ -3975,7 +4057,7 @@ var LocalThreadRuntimeCore = class {
     }
     try {
       const promiseOrGenerator = this.adapter.run({
-        messages,
+        messages: messages2,
         abortSignal: this.abortController.signal,
         config: this.configProvider.getModelConfig(),
         onUpdate: updateMessage
@@ -4117,10 +4199,10 @@ var LocalRuntimeCore = class extends BaseAssistantRuntimeCore {
   } = {}) {
     this.switchToThread(null);
     if (!initialMessages) return;
-    const messages = fromCoreMessages(initialMessages);
+    const messages2 = fromCoreMessages(initialMessages);
     this.thread.import({
-      messages: messages.map((m, idx) => ({
-        parentId: messages[idx - 1]?.id ?? null,
+      messages: messages2.map((m, idx) => ({
+        parentId: messages2[idx - 1]?.id ?? null,
         message: m
       }))
     });
@@ -4143,11 +4225,11 @@ var useLocalRuntime = (adapter, options = {}) => {
     runtime.thread.adapter = adapter;
     runtime.thread.options = options;
   });
-  return useMemo7(() => new LocalRuntime(runtime), [runtime]);
+  return useMemo8(() => new LocalRuntime(runtime), [runtime]);
 };
 
 // src/runtimes/external-store/useExternalStoreRuntime.tsx
-import { useEffect as useEffect15, useMemo as useMemo8, useState as useState13 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo9, useState as useState13 } from "react";
 
 // src/runtimes/external-store/getExternalStoreMessage.tsx
 var symbolInnerMessage = Symbol("innerMessage");
@@ -4158,8 +4240,8 @@ var getExternalStoreMessage = (message) => {
 // src/runtimes/external-store/ThreadMessageConverter.ts
 var ThreadMessageConverter = class {
   cache = /* @__PURE__ */ new WeakMap();
-  convertMessages(messages, converter) {
-    return messages.map((m, idx) => {
+  convertMessages(messages2, converter) {
+    return messages2.map((m, idx) => {
       const cached = this.cache.get(m);
       const newMessage = converter(cached, m, idx);
       this.cache.set(m, newMessage);
@@ -4252,8 +4334,8 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
 };
 
 // src/runtimes/external-store/ExternalStoreThreadRuntimeCore.tsx
-var hasUpcomingMessage = (isRunning, messages) => {
-  return isRunning && messages[messages.length - 1]?.role !== "assistant";
+var hasUpcomingMessage = (isRunning, messages2) => {
+  return isRunning && messages2[messages2.length - 1]?.role !== "assistant";
 };
 var ExternalStoreThreadRuntimeCore = class {
   constructor(configProvider, store) {
@@ -4281,7 +4363,24 @@ var ExternalStoreThreadRuntimeCore = class {
   isDisabled;
   converter = new ThreadMessageConverter();
   _store;
-  composer = new BaseThreadComposerRuntimeCore(this);
+  composer = new DefaultThreadComposerRuntimeCore(this);
+  _editComposers = /* @__PURE__ */ new Map();
+  getEditComposer(messageId) {
+    return this._editComposers.get(messageId);
+  }
+  beginEdit(messageId) {
+    if (this._editComposers.has(messageId))
+      throw new Error("Edit already in progress");
+    this._editComposers.set(
+      messageId,
+      new DefaultEditComposerRuntimeCore(
+        this,
+        () => this._editComposers.delete(messageId),
+        this.repository.getMessage(messageId)
+      )
+    );
+    this.notifySubscribers();
+  }
   get store() {
     return this._store;
   }
@@ -4312,7 +4411,7 @@ var ExternalStoreThreadRuntimeCore = class {
         return;
       }
     }
-    const messages = !store.convertMessage ? store.messages : this.converter.convertMessages(store.messages, (cache, m, idx) => {
+    const messages2 = !store.convertMessage ? store.messages : this.converter.convertMessages(store.messages, (cache, m, idx) => {
       if (!store.convertMessage) return m;
       const isLast = idx === store.messages.length - 1;
       const autoStatus = getAutoStatus(isLast, isRunning);
@@ -4326,18 +4425,18 @@ var ExternalStoreThreadRuntimeCore = class {
       newMessage[symbolInnerMessage] = m;
       return newMessage;
     });
-    for (let i = 0; i < messages.length; i++) {
-      const message = messages[i];
-      const parent = messages[i - 1];
+    for (let i = 0; i < messages2.length; i++) {
+      const message = messages2[i];
+      const parent = messages2[i - 1];
       this.repository.addOrUpdateMessage(parent?.id ?? null, message);
     }
     if (this.assistantOptimisticId) {
       this.repository.deleteMessage(this.assistantOptimisticId);
       this.assistantOptimisticId = null;
     }
-    if (hasUpcomingMessage(isRunning, messages)) {
+    if (hasUpcomingMessage(isRunning, messages2)) {
       this.assistantOptimisticId = this.repository.appendOptimisticMessage(
-        messages.at(-1)?.id ?? null,
+        messages2.at(-1)?.id ?? null,
         {
           role: "assistant",
           content: []
@@ -4345,7 +4444,7 @@ var ExternalStoreThreadRuntimeCore = class {
       );
     }
     this.repository.resetHead(
-      this.assistantOptimisticId ?? messages.at(-1)?.id ?? null
+      this.assistantOptimisticId ?? messages2.at(-1)?.id ?? null
     );
     this.messages = this.repository.getMessages();
     this.notifySubscribers();
@@ -4387,19 +4486,19 @@ var ExternalStoreThreadRuntimeCore = class {
       this.repository.deleteMessage(this.assistantOptimisticId);
       this.assistantOptimisticId = null;
     }
-    let messages = this.repository.getMessages();
-    const previousMessage = messages[messages.length - 1];
-    if (previousMessage?.role === "user" && previousMessage.id === messages.at(-1)?.id) {
+    let messages2 = this.repository.getMessages();
+    const previousMessage = messages2[messages2.length - 1];
+    if (previousMessage?.role === "user" && previousMessage.id === messages2.at(-1)?.id) {
       this.repository.deleteMessage(previousMessage.id);
       if (!this.composer.text.trim()) {
         this.composer.setText(getThreadMessageText(previousMessage));
       }
-      messages = this.repository.getMessages();
+      messages2 = this.repository.getMessages();
     } else {
       this.notifySubscribers();
     }
     setTimeout(() => {
-      this.updateMessages(messages);
+      this.updateMessages(messages2);
     }, 0);
   }
   addToolResult(options) {
@@ -4423,9 +4522,9 @@ var ExternalStoreThreadRuntimeCore = class {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
   }
-  updateMessages = (messages) => {
+  updateMessages = (messages2) => {
     this._store.setMessages?.(
-      messages.flatMap(getExternalStoreMessage).filter((m) => m != null)
+      messages2.flatMap(getExternalStoreMessage).filter((m) => m != null)
     );
   };
   import(repository) {
@@ -4487,17 +4586,17 @@ var useExternalStoreRuntime = (store) => {
   useEffect15(() => {
     runtime.thread.store = store;
   });
-  return useMemo8(() => new AssistantRuntime(runtime, ThreadRuntime), [runtime]);
+  return useMemo9(() => new AssistantRuntime(runtime, ThreadRuntime), [runtime]);
 };
 
 // src/runtimes/external-store/external-message-converter.tsx
-import { useMemo as useMemo9 } from "react";
-var joinExternalMessages = (messages) => {
+import { useMemo as useMemo10 } from "react";
+var joinExternalMessages = (messages2) => {
   const assistantMessage = {
     role: "assistant",
     content: []
   };
-  for (const output of messages) {
+  for (const output of messages2) {
     if (output.role === "tool") {
       const toolCallIdx = assistantMessage.content.findIndex(
         (c) => c.type === "tool-call" && c.toolCallId === output.toolCallId
@@ -4574,10 +4673,10 @@ var chunkExternalMessages = (callbackResults) => {
 };
 var useExternalMessageConverter = ({
   callback,
-  messages,
+  messages: messages2,
   isRunning
 }) => {
-  const state = useMemo9(
+  const state = useMemo10(
     () => ({
       callback,
       callbackCache: /* @__PURE__ */ new WeakMap(),
@@ -4586,9 +4685,9 @@ var useExternalMessageConverter = ({
     }),
     [callback]
   );
-  return useMemo9(() => {
+  return useMemo10(() => {
     const callbackResults = [];
-    for (const message of messages) {
+    for (const message of messages2) {
       let result = state.callbackCache.get(message);
       if (!result) {
         const output = state.callback(message);
@@ -4626,7 +4725,7 @@ var useExternalMessageConverter = ({
         return newMessage;
       }
     );
-  }, [state, messages, isRunning]);
+  }, [state, messages2, isRunning]);
 };
 var shallowArrayEqual = (a, b) => {
   if (a.length !== b.length) return false;
@@ -4644,13 +4743,13 @@ var DangerousInBrowserAdapter = class {
   constructor(options) {
     this.options = options;
   }
-  async *run({ messages, abortSignal, config }) {
+  async *run({ messages: messages2, abortSignal, config }) {
     const res = await getEdgeRuntimeStream({
       options: this.options,
       abortSignal,
       requestData: {
         system: config.system,
-        messages: toCoreMessages(messages),
+        messages: toCoreMessages(messages2),
         tools: config.tools ? toLanguageModelTools(config.tools) : [],
         ...config.callSettings,
         ...config.config
@@ -5047,7 +5146,7 @@ var assistant_action_bar_default = Object.assign(
 );
 
 // src/ui/assistant-message.tsx
-import { forwardRef as forwardRef24, useMemo as useMemo10 } from "react";
+import { forwardRef as forwardRef24, useMemo as useMemo11 } from "react";
 
 // src/ui/branch-picker.tsx
 import { forwardRef as forwardRef23 } from "react";
@@ -5175,7 +5274,7 @@ var AssistantMessageContentWrapper = withDefaults("div", {
 });
 var AssistantMessageContent = forwardRef24(({ components: componentsProp, ...rest }, ref) => {
   const { tools, assistantMessage: { components = {} } = {} } = useThreadConfig();
-  const toolsComponents = useMemo10(
+  const toolsComponents = useMemo11(
     () => ({
       by_name: !tools ? void 0 : Object.fromEntries(
         tools.map((t) => [
@@ -5866,12 +5965,14 @@ export {
   useComposerCancel,
   useComposerContext,
   useComposerIf,
+  useComposerRuntime,
   useComposerSend,
   useComposerStore,
   useContentPart,
   useContentPartContext,
   useContentPartDisplay,
   useContentPartImage,
+  useContentPartRuntime,
   useContentPartStore,
   useContentPartText,
   useDangerousInBrowserRuntime,