@assistant-ui/react 0.5.30 → 0.5.31

package/dist/index.js

@@ -113,36 +113,35 @@ function useThreadContext(options) {
 
 // src/context/stores/Composer.ts
 
-
-// src/context/stores/BaseComposer.ts
-var makeBaseComposer = (set) => ({
-  value: "",
-  setValue: (value) => {
-    set({ value });
-  }
-});
-
-// src/context/stores/Composer.ts
-var makeComposerStore = (useThreadMessages, useThreadActions) => {
+var makeComposerStore = (useThreadRuntime) => {
   const focusListeners = /* @__PURE__ */ new Set();
-  return _zustand.create.call(void 0, )((set, get, store) => {
+  return _zustand.create.call(void 0, )((_, get) => {
+    const runtime = useThreadRuntime.getState();
     return {
-      ...makeBaseComposer(set, get, store),
-      get canCancel() {
-        return useThreadActions.getState().capabilities.cancel;
+      get value() {
+        return get().text;
+      },
+      setValue(value) {
+        get().setText(value);
+      },
+      text: runtime.composer.text,
+      setText: (value) => {
+        useThreadRuntime.getState().composer.setText(value);
       },
+      canCancel: runtime.capabilities.cancel,
       isEditing: true,
       send: () => {
-        const { setValue, value } = get();
-        setValue("");
-        useThreadActions.getState().append({
-          parentId: _nullishCoalesce(_optionalChain([useThreadMessages, 'access', _6 => _6.getState, 'call', _7 => _7(), 'access', _8 => _8.at, 'call', _9 => _9(-1), 'optionalAccess', _10 => _10.id]), () => ( null)),
+        const runtime2 = useThreadRuntime.getState();
+        const text = runtime2.composer.text;
+        runtime2.composer.setText("");
+        runtime2.append({
+          parentId: _nullishCoalesce(_optionalChain([runtime2, 'access', _6 => _6.messages, 'access', _7 => _7.at, 'call', _8 => _8(-1), 'optionalAccess', _9 => _9.id]), () => ( null)),
           role: "user",
-          content: [{ type: "text", text: value }]
+          content: [{ type: "text", text }]
         });
       },
       cancel: () => {
-        useThreadActions.getState().cancelRun();
+        useThreadRuntime.getState().cancelRun();
       },
       focus: () => {
         for (const listener of focusListeners) {
@@ -163,14 +162,10 @@ var makeComposerStore = (useThreadMessages, useThreadActions) => {
 
 var getThreadStateFromRuntime = (runtime) => {
   const lastMessage = runtime.messages.at(-1);
-  if (_optionalChain([lastMessage, 'optionalAccess', _11 => _11.role]) !== "assistant")
-    return Object.freeze({
-      isDisabled: runtime.isDisabled,
-      isRunning: false
-    });
   return Object.freeze({
+    capabilities: runtime.capabilities,
     isDisabled: runtime.isDisabled,
-    isRunning: lastMessage.status.type === "running"
+    isRunning: _optionalChain([lastMessage, 'optionalAccess', _10 => _10.role]) !== "assistant" ? false : lastMessage.status.type === "running"
   });
 };
 var makeThreadStore = (runtimeRef) => {
@@ -203,9 +198,6 @@ var makeThreadViewportStore = () => {
 var makeThreadActionStore = (runtimeStore) => {
   return _zustand.create.call(void 0, 
     () => Object.freeze({
-      get capabilities() {
-        return runtimeStore.getState().capabilities;
-      },
       getBranches: (messageId) => runtimeStore.getState().getBranches(messageId),
       switchToBranch: (branchId) => runtimeStore.getState().switchToBranch(branchId),
       startRun: (parentId) => runtimeStore.getState().startRun(parentId),
@@ -258,7 +250,7 @@ var ThreadProvider = ({
     const useThreadMessages = makeThreadMessagesStore(useThreadRuntime);
     const useThreadActions = makeThreadActionStore(useThreadRuntime);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThreadMessages, useThreadActions);
+    const useComposer = makeComposerStore(useThreadRuntime);
     return {
       useThread,
       useThreadRuntime,
@@ -274,15 +266,23 @@ var ThreadProvider = ({
         const onThreadUpdate = () => {
           const oldState = context.useThread.getState();
           const state = getThreadStateFromRuntime(thread);
-          if (oldState.isDisabled !== state.isDisabled || oldState.isRunning !== state.isRunning) {
+          if (oldState.isDisabled !== state.isDisabled || oldState.isRunning !== state.isRunning || // TODO ensure capabilities is memoized
+          oldState.capabilities !== state.capabilities) {
             context.useThread.setState(
-              getThreadStateFromRuntime(thread),
+              state,
               true
             );
           }
           if (thread.messages !== context.useThreadMessages.getState()) {
             context.useThreadMessages.setState(thread.messages, true);
           }
+          const composerState = context.useComposer.getState();
+          if (thread.composer.text !== composerState.text || state.capabilities.cancel !== composerState.canCancel) {
+            context.useComposer.setState({
+              text: thread.composer.text,
+              canCancel: state.capabilities.cancel
+            });
+          }
         };
         onThreadUpdate();
         return thread.subscribe(onThreadUpdate);
@@ -354,7 +354,7 @@ var AssistantRuntimeProvider = _react.memo.call(void 0, AssistantRuntimeProvider
 var MessageContext = _react.createContext.call(void 0, null);
 function useMessageContext(options) {
   const context = _react.useContext.call(void 0, MessageContext);
-  if (!_optionalChain([options, 'optionalAccess', _12 => _12.optional]) && !context)
+  if (!_optionalChain([options, 'optionalAccess', _11 => _11.optional]) && !context)
     throw new Error(
       "This component can only be used inside a component passed to <ThreadPrimitive.Messages components={...} />."
     );
@@ -381,7 +381,7 @@ var ContentPartContext = _react.createContext.call(void 0,
 );
 function useContentPartContext(options) {
   const context = _react.useContext.call(void 0, ContentPartContext);
-  if (!_optionalChain([options, 'optionalAccess', _13 => _13.optional]) && !context)
+  if (!_optionalChain([options, 'optionalAccess', _12 => _12.optional]) && !context)
     throw new Error(
       "This component can only be used inside a component passed to <MessagePrimitive.Content components={...} >."
     );
@@ -393,13 +393,13 @@ function useContentPartContext(options) {
 var toAppendMessage = (useThreadMessages, message) => {
   if (typeof message === "string") {
     return {
-      parentId: _nullishCoalesce(_optionalChain([useThreadMessages, 'access', _14 => _14.getState, 'call', _15 => _15(), 'access', _16 => _16.at, 'call', _17 => _17(-1), 'optionalAccess', _18 => _18.id]), () => ( null)),
+      parentId: _nullishCoalesce(_optionalChain([useThreadMessages, 'access', _13 => _13.getState, 'call', _14 => _14(), 'access', _15 => _15.at, 'call', _16 => _16(-1), 'optionalAccess', _17 => _17.id]), () => ( null)),
       role: "user",
       content: [{ type: "text", text: message }]
     };
   }
   return {
-    parentId: _nullishCoalesce(_nullishCoalesce(message.parentId, () => ( _optionalChain([useThreadMessages, 'access', _19 => _19.getState, 'call', _20 => _20(), 'access', _21 => _21.at, 'call', _22 => _22(-1), 'optionalAccess', _23 => _23.id]))), () => ( null)),
+    parentId: _nullishCoalesce(_nullishCoalesce(message.parentId, () => ( _optionalChain([useThreadMessages, 'access', _18 => _18.getState, 'call', _19 => _19(), 'access', _20 => _20.at, 'call', _21 => _21(-1), 'optionalAccess', _22 => _22.id]))), () => ( null)),
     role: _nullishCoalesce(message.role, () => ( "user")),
     content: message.content
   };
@@ -451,7 +451,7 @@ var useAssistantTool = (tool) => {
     const unsub2 = render ? setToolUI(toolName, render) : void 0;
     return () => {
       unsub1();
-      _optionalChain([unsub2, 'optionalCall', _24 => _24()]);
+      _optionalChain([unsub2, 'optionalCall', _23 => _23()]);
     };
   }, [registerModelConfigProvider, setToolUI, tool]);
 };
@@ -552,7 +552,7 @@ var useActionBarCopy = ({
   const callback = _react.useCallback.call(void 0, () => {
     const { message } = useMessage.getState();
     const { setIsCopied } = useMessageUtils.getState();
-    const { isEditing, value: composerValue } = useEditComposer.getState();
+    const { isEditing, text: composerValue } = useEditComposer.getState();
     const valueToCopy = isEditing ? composerValue : getThreadMessageText(message);
     navigator.clipboard.writeText(valueToCopy).then(() => {
       setIsCopied(true);
@@ -680,7 +680,7 @@ var useComposerSend = () => {
   const { useComposer } = useComposerContext();
   const disabled = useCombinedStore(
     [useThread, useComposer],
-    (t, c) => t.isRunning || !c.isEditing || c.value.length === 0
+    (t, c) => t.isRunning || !c.isEditing || c.text.length === 0
   );
   const callback = _react.useCallback.call(void 0, () => {
     const composerState = useComposer.getState();
@@ -799,9 +799,9 @@ var useThreadSuggestion = ({
     const composer = useComposer.getState();
     if (autoSend && !thread.isRunning) {
       append(prompt);
-      composer.setValue("");
+      composer.setText("");
     } else {
-      composer.setValue(prompt);
+      composer.setText(prompt);
     }
   }, [useThread, useComposer, autoSend, append, prompt]);
   if (disabled) return null;
@@ -888,7 +888,7 @@ var createActionButton = (displayName, useActionButton, forwardProps = []) => {
         ...primitiveProps,
         ref: forwardedRef,
         onClick: _primitive.composeEventHandlers.call(void 0, primitiveProps.onClick, () => {
-          _optionalChain([callback, 'optionalCall', _25 => _25()]);
+          _optionalChain([callback, 'optionalCall', _24 => _24()]);
         })
       }
     );
@@ -1176,7 +1176,7 @@ var getContentPartState = ({ message }, useContentPart, partIndex) => {
     }
   }
   const status = toContentPartStatus(message, partIndex, part);
-  const currentState = _optionalChain([useContentPart, 'optionalAccess', _26 => _26.getState, 'call', _27 => _27()]);
+  const currentState = _optionalChain([useContentPart, 'optionalAccess', _25 => _25.getState, 'call', _26 => _26()]);
   if (currentState && currentState.part === part && currentState.status === status)
     return null;
   return Object.freeze({ part, status });
@@ -1252,7 +1252,7 @@ var withSmoothContextProvider = (Component) => {
 };
 function useSmoothContext(options) {
   const context = _react.useContext.call(void 0, SmoothContext);
-  if (!_optionalChain([options, 'optionalAccess', _28 => _28.optional]) && !context)
+  if (!_optionalChain([options, 'optionalAccess', _27 => _27.optional]) && !context)
     throw new Error(
       "This component must be used within a SmoothContextProvider."
     );
@@ -1323,7 +1323,7 @@ var useSmooth = (state, smooth = false) => {
   const [displayedText, setDisplayedText] = _react.useState.call(void 0, text);
   const setText = _reactusecallbackref.useCallbackRef.call(void 0, (text2) => {
     setDisplayedText(text2);
-    _optionalChain([useSmoothStatus2, 'optionalAccess', _29 => _29.setState, 'call', _30 => _30(text2 !== state.part.text ? SMOOTH_STATUS : state.status)]);
+    _optionalChain([useSmoothStatus2, 'optionalAccess', _28 => _28.setState, 'call', _29 => _29(text2 !== state.part.text ? SMOOTH_STATUS : state.status)]);
   });
   const [animatorRef] = _react.useState.call(void 0, 
     new TextStreamAnimator(text, setText)
@@ -1467,7 +1467,7 @@ var MessageContentPartImpl = ({
 };
 var MessageContentPart = _react.memo.call(void 0, 
   MessageContentPartImpl,
-  (prev, next) => prev.partIndex === next.partIndex && _optionalChain([prev, 'access', _31 => _31.components, 'optionalAccess', _32 => _32.Text]) === _optionalChain([next, 'access', _33 => _33.components, 'optionalAccess', _34 => _34.Text]) && _optionalChain([prev, 'access', _35 => _35.components, 'optionalAccess', _36 => _36.Image]) === _optionalChain([next, 'access', _37 => _37.components, 'optionalAccess', _38 => _38.Image]) && _optionalChain([prev, 'access', _39 => _39.components, 'optionalAccess', _40 => _40.UI]) === _optionalChain([next, 'access', _41 => _41.components, 'optionalAccess', _42 => _42.UI]) && _optionalChain([prev, 'access', _43 => _43.components, 'optionalAccess', _44 => _44.tools]) === _optionalChain([next, 'access', _45 => _45.components, 'optionalAccess', _46 => _46.tools])
+  (prev, next) => prev.partIndex === next.partIndex && _optionalChain([prev, 'access', _30 => _30.components, 'optionalAccess', _31 => _31.Text]) === _optionalChain([next, 'access', _32 => _32.components, 'optionalAccess', _33 => _33.Text]) && _optionalChain([prev, 'access', _34 => _34.components, 'optionalAccess', _35 => _35.Image]) === _optionalChain([next, 'access', _36 => _36.components, 'optionalAccess', _37 => _37.Image]) && _optionalChain([prev, 'access', _38 => _38.components, 'optionalAccess', _39 => _39.UI]) === _optionalChain([next, 'access', _40 => _40.components, 'optionalAccess', _41 => _41.UI]) && _optionalChain([prev, 'access', _42 => _42.components, 'optionalAccess', _43 => _43.tools]) === _optionalChain([next, 'access', _44 => _44.components, 'optionalAccess', _45 => _45.tools])
 );
 var MessagePrimitiveContent = ({
   components
@@ -1562,7 +1562,7 @@ var ComposerPrimitiveInput = _react.forwardRef.call(void 0,
     const { useComposer, type } = useComposerContext();
     const value = useComposer((c) => {
       if (!c.isEditing) return "";
-      return c.value;
+      return c.text;
     });
     const Component = asChild ? _reactslot.Slot : _reacttextareaautosize2.default;
     const isDisabled = _nullishCoalesce(_nullishCoalesce(useThread((t) => t.isDisabled), () => ( disabledProp)), () => ( false));
@@ -1582,7 +1582,7 @@ var ComposerPrimitiveInput = _react.forwardRef.call(void 0,
         const { isRunning } = useThread.getState();
         if (!isRunning) {
           e.preventDefault();
-          _optionalChain([textareaRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.closest, 'call', _49 => _49("form"), 'optionalAccess', _50 => _50.requestSubmit, 'call', _51 => _51()]);
+          _optionalChain([textareaRef, 'access', _46 => _46.current, 'optionalAccess', _47 => _47.closest, 'call', _48 => _48("form"), 'optionalAccess', _49 => _49.requestSubmit, 'call', _50 => _50()]);
         }
       }
     };
@@ -1613,7 +1613,7 @@ var ComposerPrimitiveInput = _react.forwardRef.call(void 0,
         onChange: _primitive.composeEventHandlers.call(void 0, onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
-          return composerState.setValue(e.target.value);
+          return composerState.setText(e.target.value);
         }),
         onKeyDown: _primitive.composeEventHandlers.call(void 0, onKeyDown, handleKeyPress)
       }
@@ -1628,7 +1628,7 @@ ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";
 
 var ComposerPrimitiveSend = _react.forwardRef.call(void 0, ({ disabled, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
-  const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+  const hasValue = useComposer((c) => c.isEditing && c.text.length > 0);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _reactprimitive.Primitive.button,
     {
@@ -1842,18 +1842,27 @@ ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => _zustand.create.call(void 0, )((set, get, store) => ({
-  ...makeBaseComposer(set, get, store),
+}) => _zustand.create.call(void 0, )((set, get) => ({
+  get value() {
+    return get().text;
+  },
+  setValue(value) {
+    get().setText(value);
+  },
+  text: "",
+  setText: (text) => {
+    set({ text });
+  },
   canCancel: false,
   isEditing: false,
   edit: () => {
-    const value = onEdit();
-    set({ isEditing: true, canCancel: true, value });
+    const text = onEdit();
+    set({ isEditing: true, canCancel: true, text });
   },
   send: () => {
-    const value = get().value;
+    const text = get().text;
     set({ isEditing: false, canCancel: false });
-    onSend(value);
+    onSend(text);
   },
   cancel: () => {
     set({ isEditing: false, canCancel: false });
@@ -1876,15 +1885,15 @@ var makeMessageUtilsStore = () => _zustand.create.call(void 0, (set) => ({
 // src/context/providers/MessageProvider.tsx
 
 var getIsLast = (messages, message) => {
-  return _optionalChain([messages, 'access', _52 => _52[messages.length - 1], 'optionalAccess', _53 => _53.id]) === message.id;
+  return _optionalChain([messages, 'access', _51 => _51[messages.length - 1], 'optionalAccess', _52 => _52.id]) === message.id;
 };
 var getMessageState = (messages, getBranches, useMessage, messageIndex) => {
-  const parentId = _nullishCoalesce(_optionalChain([messages, 'access', _54 => _54[messageIndex - 1], 'optionalAccess', _55 => _55.id]), () => ( null));
+  const parentId = _nullishCoalesce(_optionalChain([messages, 'access', _53 => _53[messageIndex - 1], 'optionalAccess', _54 => _54.id]), () => ( null));
   const message = messages[messageIndex];
   if (!message) return null;
   const isLast = getIsLast(messages, message);
   const branches = getBranches(message.id);
-  const currentState = _optionalChain([useMessage, 'optionalAccess', _56 => _56.getState, 'call', _57 => _57()]);
+  const currentState = _optionalChain([useMessage, 'optionalAccess', _55 => _55.getState, 'call', _56 => _56()]);
   if (currentState && currentState.message === message && currentState.parentId === parentId && currentState.branches === branches && currentState.isLast === isLast)
     return null;
   return Object.freeze({
@@ -2011,7 +2020,7 @@ var ThreadPrimitiveMessagesImpl = ({
 ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
 var ThreadPrimitiveMessages = _react.memo.call(void 0, 
   ThreadPrimitiveMessagesImpl,
-  (prev, next) => _optionalChain([prev, 'access', _58 => _58.components, 'optionalAccess', _59 => _59.Message]) === _optionalChain([next, 'access', _60 => _60.components, 'optionalAccess', _61 => _61.Message]) && _optionalChain([prev, 'access', _62 => _62.components, 'optionalAccess', _63 => _63.UserMessage]) === _optionalChain([next, 'access', _64 => _64.components, 'optionalAccess', _65 => _65.UserMessage]) && _optionalChain([prev, 'access', _66 => _66.components, 'optionalAccess', _67 => _67.EditComposer]) === _optionalChain([next, 'access', _68 => _68.components, 'optionalAccess', _69 => _69.EditComposer]) && _optionalChain([prev, 'access', _70 => _70.components, 'optionalAccess', _71 => _71.AssistantMessage]) === _optionalChain([next, 'access', _72 => _72.components, 'optionalAccess', _73 => _73.AssistantMessage]) && _optionalChain([prev, 'access', _74 => _74.components, 'optionalAccess', _75 => _75.SystemMessage]) === _optionalChain([next, 'access', _76 => _76.components, 'optionalAccess', _77 => _77.SystemMessage])
+  (prev, next) => _optionalChain([prev, 'access', _57 => _57.components, 'optionalAccess', _58 => _58.Message]) === _optionalChain([next, 'access', _59 => _59.components, 'optionalAccess', _60 => _60.Message]) && _optionalChain([prev, 'access', _61 => _61.components, 'optionalAccess', _62 => _62.UserMessage]) === _optionalChain([next, 'access', _63 => _63.components, 'optionalAccess', _64 => _64.UserMessage]) && _optionalChain([prev, 'access', _65 => _65.components, 'optionalAccess', _66 => _66.EditComposer]) === _optionalChain([next, 'access', _67 => _67.components, 'optionalAccess', _68 => _68.EditComposer]) && _optionalChain([prev, 'access', _69 => _69.components, 'optionalAccess', _70 => _70.AssistantMessage]) === _optionalChain([next, 'access', _71 => _71.components, 'optionalAccess', _72 => _72.AssistantMessage]) && _optionalChain([prev, 'access', _73 => _73.components, 'optionalAccess', _74 => _74.SystemMessage]) === _optionalChain([next, 'access', _75 => _75.components, 'optionalAccess', _76 => _76.SystemMessage])
 );
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
@@ -2143,7 +2152,7 @@ var MessageRepository = (_class4 = class {constructor() { _class4.prototype.__in
       parentOrRoot.children = parentOrRoot.children.filter(
         (m) => m !== child.current.id
       );
-      if (_optionalChain([child, 'access', _78 => _78.prev, 'optionalAccess', _79 => _79.next]) === child) {
+      if (_optionalChain([child, 'access', _77 => _77.prev, 'optionalAccess', _78 => _78.next]) === child) {
         const fallbackId = child.prev.children.at(-1);
         const fallback = fallbackId ? this.messages.get(fallbackId) : null;
         if (fallback === void 0) {
@@ -2173,7 +2182,7 @@ var MessageRepository = (_class4 = class {constructor() { _class4.prototype.__in
     }
   }
   getMessages() {
-    const messages = new Array(_nullishCoalesce(_optionalChain([this, 'access', _80 => _80.head, 'optionalAccess', _81 => _81.level]), () => ( 0)));
+    const messages = new Array(_nullishCoalesce(_optionalChain([this, 'access', _79 => _79.head, 'optionalAccess', _80 => _80.level]), () => ( 0)));
     for (let current = this.head; current; current = current.prev) {
       messages[current.level] = current.current;
     }
@@ -2211,7 +2220,7 @@ var MessageRepository = (_class4 = class {constructor() { _class4.prototype.__in
         "MessageRepository(updateMessage): Message not found. This is likely an internal bug in assistant-ui."
       );
     return {
-      parentId: _nullishCoalesce(_optionalChain([message, 'access', _82 => _82.prev, 'optionalAccess', _83 => _83.current, 'access', _84 => _84.id]), () => ( null)),
+      parentId: _nullishCoalesce(_optionalChain([message, 'access', _81 => _81.prev, 'optionalAccess', _82 => _82.current, 'access', _83 => _83.id]), () => ( null)),
       message: message.current
     };
   }
@@ -2296,11 +2305,11 @@ var MessageRepository = (_class4 = class {constructor() { _class4.prototype.__in
     for (const [, message] of this.messages) {
       exportItems.push({
         message: message.current,
-        parentId: _nullishCoalesce(_optionalChain([message, 'access', _85 => _85.prev, 'optionalAccess', _86 => _86.current, 'access', _87 => _87.id]), () => ( null))
+        parentId: _nullishCoalesce(_optionalChain([message, 'access', _84 => _84.prev, 'optionalAccess', _85 => _85.current, 'access', _86 => _86.id]), () => ( null))
       });
     }
     return {
-      headId: _nullishCoalesce(_optionalChain([this, 'access', _88 => _88.head, 'optionalAccess', _89 => _89.current, 'access', _90 => _90.id]), () => ( null)),
+      headId: _nullishCoalesce(_optionalChain([this, 'access', _87 => _87.head, 'optionalAccess', _88 => _88.current, 'access', _89 => _89.id]), () => ( null)),
       messages: exportItems
     };
   }
@@ -2308,7 +2317,7 @@ var MessageRepository = (_class4 = class {constructor() { _class4.prototype.__in
     for (const { message, parentId } of messages) {
       this.addOrUpdateMessage(parentId, message);
     }
-    this.resetHead(_nullishCoalesce(_nullishCoalesce(headId, () => ( _optionalChain([messages, 'access', _91 => _91.at, 'call', _92 => _92(-1), 'optionalAccess', _93 => _93.message, 'access', _94 => _94.id]))), () => ( null)));
+    this.resetHead(_nullishCoalesce(_nullishCoalesce(headId, () => ( _optionalChain([messages, 'access', _90 => _90.at, 'call', _91 => _91(-1), 'optionalAccess', _92 => _92.message, 'access', _93 => _93.id]))), () => ( null)));
   }
 }, _class4);
 
@@ -2471,7 +2480,7 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
         });
         if (mergeRoundtrips) {
           const previousMessage = messages[messages.length - 1];
-          if (_optionalChain([previousMessage, 'optionalAccess', _95 => _95.role]) === "assistant") {
+          if (_optionalChain([previousMessage, 'optionalAccess', _94 => _94.role]) === "assistant") {
             previousMessage.content.push(...newContent);
             break;
           }
@@ -2484,7 +2493,7 @@ var fromLanguageModelMessages = (lm, { mergeRoundtrips }) => {
       }
       case "tool": {
         const previousMessage = messages[messages.length - 1];
-        if (_optionalChain([previousMessage, 'optionalAccess', _96 => _96.role]) !== "assistant")
+        if (_optionalChain([previousMessage, 'optionalAccess', _95 => _95.role]) !== "assistant")
           throw new Error(
             "A tool message must be preceded by an assistant message."
           );
@@ -2705,7 +2714,7 @@ var useEdgeRuntime = ({
 };
 
 // src/runtimes/local/shouldContinue.tsx
-var shouldContinue = (result) => _optionalChain([result, 'access', _97 => _97.status, 'optionalAccess', _98 => _98.type]) === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
+var shouldContinue = (result) => _optionalChain([result, 'access', _96 => _96.status, 'optionalAccess', _97 => _97.type]) === "requires-action" && result.status.reason === "tool-calls" && result.content.every((c) => c.type !== "tool-call" || !!c.result);
 
 // src/runtimes/local/LocalThreadRuntime.tsx
 var CAPABILITIES = Object.freeze({
@@ -2716,11 +2725,11 @@ var CAPABILITIES = Object.freeze({
   copy: true
 });
 var LocalThreadRuntime = (_class5 = class {
-  constructor(configProvider, adapter, options) {;_class5.prototype.__init11.call(this);_class5.prototype.__init12.call(this);_class5.prototype.__init13.call(this);_class5.prototype.__init14.call(this);_class5.prototype.__init15.call(this);
+  constructor(configProvider, adapter, options) {;_class5.prototype.__init11.call(this);_class5.prototype.__init12.call(this);_class5.prototype.__init13.call(this);_class5.prototype.__init14.call(this);_class5.prototype.__init15.call(this);_class5.prototype.__init16.call(this);
     this.configProvider = configProvider;
     this.adapter = adapter;
     this.options = options;
-    if (_optionalChain([options, 'optionalAccess', _99 => _99.initialMessages])) {
+    if (_optionalChain([options, 'optionalAccess', _98 => _98.initialMessages])) {
       let parentId = null;
       const messages = fromCoreMessages(options.initialMessages);
       for (const message of messages) {
@@ -2737,6 +2746,13 @@ var LocalThreadRuntime = (_class5 = class {
   get messages() {
     return this.repository.getMessages();
   }
+  __init16() {this.composer = {
+    text: "",
+    setText: (value) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    }
+  }}
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
   }
@@ -2775,7 +2791,7 @@ var LocalThreadRuntime = (_class5 = class {
   }
   async performRoundtrip(parentId, message) {
     const messages = this.repository.getMessages();
-    _optionalChain([this, 'access', _100 => _100.abortController, 'optionalAccess', _101 => _101.abort, 'call', _102 => _102()]);
+    _optionalChain([this, 'access', _99 => _99.abortController, 'optionalAccess', _100 => _100.abort, 'call', _101 => _101()]);
     this.abortController = new AbortController();
     const initialContent = message.content;
     const initialRoundtrips = message.roundtrips;
@@ -2784,13 +2800,13 @@ var LocalThreadRuntime = (_class5 = class {
         ...message,
         ...m.content ? { content: [...initialContent, ..._nullishCoalesce(m.content, () => ( []))] } : void 0,
         status: _nullishCoalesce(m.status, () => ( message.status)),
-        ..._optionalChain([m, 'access', _103 => _103.roundtrips, 'optionalAccess', _104 => _104.length]) ? { roundtrips: [..._nullishCoalesce(initialRoundtrips, () => ( [])), ...m.roundtrips] } : void 0
+        ..._optionalChain([m, 'access', _102 => _102.roundtrips, 'optionalAccess', _103 => _103.length]) ? { roundtrips: [..._nullishCoalesce(initialRoundtrips, () => ( [])), ...m.roundtrips] } : void 0
       };
       this.repository.addOrUpdateMessage(parentId, message);
       this.notifySubscribers();
     };
-    const maxToolRoundtrips = _nullishCoalesce(_optionalChain([this, 'access', _105 => _105.options, 'optionalAccess', _106 => _106.maxToolRoundtrips]), () => ( 1));
-    const toolRoundtrips = _nullishCoalesce(_optionalChain([message, 'access', _107 => _107.roundtrips, 'optionalAccess', _108 => _108.length]), () => ( 0));
+    const maxToolRoundtrips = _nullishCoalesce(_optionalChain([this, 'access', _104 => _104.options, 'optionalAccess', _105 => _105.maxToolRoundtrips]), () => ( 1));
+    const toolRoundtrips = _nullishCoalesce(_optionalChain([message, 'access', _106 => _106.roundtrips, 'optionalAccess', _107 => _107.length]), () => ( 0));
     if (toolRoundtrips > maxToolRoundtrips) {
       updateMessage({
         status: {
@@ -2930,8 +2946,8 @@ var getExternalStoreMessage = (message) => {
 };
 
 // src/runtimes/external-store/ThreadMessageConverter.ts
-var ThreadMessageConverter = (_class6 = class {constructor() { _class6.prototype.__init16.call(this); }
-  __init16() {this.cache = /* @__PURE__ */ new WeakMap()}
+var ThreadMessageConverter = (_class6 = class {constructor() { _class6.prototype.__init17.call(this); }
+  __init17() {this.cache = /* @__PURE__ */ new WeakMap()}
   convertMessages(messages, converter, keyMapper = (key) => key) {
     return messages.map((m, idx) => {
       const key = keyMapper(m);
@@ -3022,40 +3038,57 @@ var fromThreadMessageLike = (like, fallbackId, fallbackStatus) => {
 
 // src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
 var hasUpcomingMessage = (isRunning, messages) => {
-  return isRunning && _optionalChain([messages, 'access', _109 => _109[messages.length - 1], 'optionalAccess', _110 => _110.role]) !== "assistant";
+  return isRunning && _optionalChain([messages, 'access', _108 => _108[messages.length - 1], 'optionalAccess', _109 => _109.role]) !== "assistant";
 };
 var ExternalStoreThreadRuntime = (_class7 = class {
-  __init17() {this._subscriptions = /* @__PURE__ */ new Set()}
-  __init18() {this.repository = new MessageRepository()}
-  __init19() {this.assistantOptimisticId = null}
+  __init18() {this._subscriptions = /* @__PURE__ */ new Set()}
+  __init19() {this.repository = new MessageRepository()}
+  __init20() {this.assistantOptimisticId = null}
+  __init21() {this._capabilities = {
+    switchToBranch: false,
+    edit: false,
+    reload: false,
+    cancel: false,
+    copy: false
+  }}
   get capabilities() {
-    return {
-      switchToBranch: this._store.setMessages !== void 0,
-      edit: this._store.onEdit !== void 0,
-      reload: this._store.onReload !== void 0,
-      cancel: this._store.onCancel !== void 0,
-      copy: this._store.onCopy !== null
-    };
+    return this._capabilities;
   }
-  __init20() {this.messages = []}
-  __init21() {this.isDisabled = false}
-  __init22() {this.converter = new ThreadMessageConverter()}
+  __init22() {this.messages = []}
+  __init23() {this.isDisabled = false}
+  __init24() {this.converter = new ThreadMessageConverter()}
   
-  constructor(store) {;_class7.prototype.__init17.call(this);_class7.prototype.__init18.call(this);_class7.prototype.__init19.call(this);_class7.prototype.__init20.call(this);_class7.prototype.__init21.call(this);_class7.prototype.__init22.call(this);_class7.prototype.__init23.call(this);
+  __init25() {this.composer = {
+    text: "",
+    setText: (value) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    }
+  }}
+  constructor(store) {;_class7.prototype.__init18.call(this);_class7.prototype.__init19.call(this);_class7.prototype.__init20.call(this);_class7.prototype.__init21.call(this);_class7.prototype.__init22.call(this);_class7.prototype.__init23.call(this);_class7.prototype.__init24.call(this);_class7.prototype.__init25.call(this);_class7.prototype.__init26.call(this);
     this.store = store;
   }
   set store(store) {
+    if (this._store === store) return;
+    const isRunning = _nullishCoalesce(store.isRunning, () => ( false));
+    this.isDisabled = _nullishCoalesce(store.isDisabled, () => ( false));
     const oldStore = this._store;
+    this._store = store;
+    this._capabilities = {
+      switchToBranch: this._store.setMessages !== void 0,
+      edit: this._store.onEdit !== void 0,
+      reload: this._store.onReload !== void 0,
+      cancel: this._store.onCancel !== void 0,
+      copy: this._store.onCopy !== null
+    };
     if (oldStore) {
       if (oldStore.convertMessage !== store.convertMessage) {
         this.converter = new ThreadMessageConverter();
-      } else if (oldStore.isDisabled === store.isDisabled && oldStore.isRunning === store.isRunning && oldStore.messages === store.messages) {
+      } else if (oldStore.isRunning === store.isRunning && oldStore.messages === store.messages) {
+        this.notifySubscribers();
         return;
       }
     }
-    this._store = store;
-    const isRunning = _nullishCoalesce(store.isRunning, () => ( false));
-    const isDisabled = _nullishCoalesce(store.isDisabled, () => ( false));
     const convertCallback = (cache, m, idx) => {
       if (!store.convertMessage) return m;
       const isLast = idx === store.messages.length - 1;
@@ -3077,7 +3110,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     for (let i = 0; i < messages.length; i++) {
       const message = messages[i];
       const parent = messages[i - 1];
-      this.repository.addOrUpdateMessage(_nullishCoalesce(_optionalChain([parent, 'optionalAccess', _114 => _114.id]), () => ( null)), message);
+      this.repository.addOrUpdateMessage(_nullishCoalesce(_optionalChain([parent, 'optionalAccess', _113 => _113.id]), () => ( null)), message);
     }
     if (this.assistantOptimisticId) {
       this.repository.deleteMessage(this.assistantOptimisticId);
@@ -3085,7 +3118,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     }
     if (hasUpcomingMessage(isRunning, messages)) {
       this.assistantOptimisticId = this.repository.appendOptimisticMessage(
-        _nullishCoalesce(_optionalChain([messages, 'access', _115 => _115.at, 'call', _116 => _116(-1), 'optionalAccess', _117 => _117.id]), () => ( null)),
+        _nullishCoalesce(_optionalChain([messages, 'access', _114 => _114.at, 'call', _115 => _115(-1), 'optionalAccess', _116 => _116.id]), () => ( null)),
         {
           role: "assistant",
           content: []
@@ -3093,10 +3126,12 @@ var ExternalStoreThreadRuntime = (_class7 = class {
       );
     }
     this.repository.resetHead(
-      _nullishCoalesce(_nullishCoalesce(this.assistantOptimisticId, () => ( _optionalChain([messages, 'access', _118 => _118.at, 'call', _119 => _119(-1), 'optionalAccess', _120 => _120.id]))), () => ( null))
+      _nullishCoalesce(_nullishCoalesce(this.assistantOptimisticId, () => ( _optionalChain([messages, 'access', _117 => _117.at, 'call', _118 => _118(-1), 'optionalAccess', _119 => _119.id]))), () => ( null))
     );
     this.messages = this.repository.getMessages();
-    this.isDisabled = isDisabled;
+    this.notifySubscribers();
+  }
+  notifySubscribers() {
     for (const callback of this._subscriptions) callback();
   }
   getBranches(messageId) {
@@ -3109,7 +3144,7 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     this.updateMessages(this.repository.getMessages());
   }
   async append(message) {
-    if (message.parentId !== (_nullishCoalesce(_optionalChain([this, 'access', _121 => _121.messages, 'access', _122 => _122.at, 'call', _123 => _123(-1), 'optionalAccess', _124 => _124.id]), () => ( null)))) {
+    if (message.parentId !== (_nullishCoalesce(_optionalChain([this, 'access', _120 => _120.messages, 'access', _121 => _121.at, 'call', _122 => _122(-1), 'optionalAccess', _123 => _123.id]), () => ( null)))) {
       if (!this._store.onEdit)
         throw new Error("Runtime does not support editing messages.");
       await this._store.onEdit(message);
@@ -3139,8 +3174,8 @@ var ExternalStoreThreadRuntime = (_class7 = class {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
   }
-  __init23() {this.updateMessages = (messages) => {
-    _optionalChain([this, 'access', _125 => _125._store, 'access', _126 => _126.setMessages, 'optionalCall', _127 => _127(
+  __init26() {this.updateMessages = (messages) => {
+    _optionalChain([this, 'access', _124 => _124._store, 'access', _125 => _125.setMessages, 'optionalCall', _126 => _126(
       messages.flatMap(getExternalStoreMessage).filter((m) => m != null)
     )]);
   }}
@@ -3153,9 +3188,9 @@ var ExternalStoreThreadRuntime = (_class7 = class {
 
 // src/runtimes/external-store/ExternalStoreRuntime.tsx
 var ExternalStoreRuntime = (_class8 = class extends BaseAssistantRuntime {
-  __init24() {this._proxyConfigProvider = new ProxyConfigProvider()}
+  __init27() {this._proxyConfigProvider = new ProxyConfigProvider()}
   constructor(store) {
-    super(new ExternalStoreThreadRuntime(store));_class8.prototype.__init24.call(this);;
+    super(new ExternalStoreThreadRuntime(store));_class8.prototype.__init27.call(this);;
   }
   set store(store) {
     this.thread.store = store;
@@ -3205,7 +3240,7 @@ var ThreadConfigProvider = ({
 }) => {
   const assistant = useAssistantContext({ optional: true });
   const configProvider = config && Object.keys(_nullishCoalesce(config, () => ( {}))).length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadConfigContext.Provider, { value: config, children }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
-  if (!_optionalChain([config, 'optionalAccess', _128 => _128.runtime])) return configProvider;
+  if (!_optionalChain([config, 'optionalAccess', _127 => _127.runtime])) return configProvider;
   if (assistant) {
     throw new Error(
       "You provided a runtime to <Thread> while simulataneously using <AssistantRuntimeProvider>. This is not allowed."
@@ -3221,14 +3256,14 @@ var _lucidereact = require('lucide-react');
 
 var useAllowCopy = () => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const copySupported = useThreadActions((t) => t.capabilities.copy);
+  const { useThread } = useThreadContext();
+  const copySupported = useThread((t) => t.capabilities.copy);
   return copySupported && allowCopy;
 };
 var useAllowReload = () => {
   const { assistantMessage: { allowReload = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const reloadSupported = useThreadActions((t) => t.capabilities.reload);
+  const { useThread } = useThreadContext();
+  const reloadSupported = useThread((t) => t.capabilities.reload);
   return reloadSupported && allowReload;
 };
 var AssistantActionBar = () => {
@@ -3297,8 +3332,8 @@ var assistant_action_bar_default = Object.assign(
 
 var useAllowBranchPicker = () => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const branchPickerSupported = useThreadActions((t) => t.capabilities.edit);
+  const { useThread } = useThreadContext();
+  const branchPickerSupported = useThread((t) => t.capabilities.edit);
   return branchPickerSupported && allowBranchPicker;
 };
 var BranchPicker = () => {
@@ -3421,7 +3456,7 @@ var AssistantMessageContent = _react.forwardRef.call(void 0, ({ components: comp
     {
       components: {
         ...componentsProp,
-        Text: _nullishCoalesce(_nullishCoalesce(_optionalChain([componentsProp, 'optionalAccess', _129 => _129.Text]), () => ( components.Text)), () => ( content_part_default.Text))
+        Text: _nullishCoalesce(_nullishCoalesce(_optionalChain([componentsProp, 'optionalAccess', _128 => _128.Text]), () => ( components.Text)), () => ( content_part_default.Text))
       }
     }
   ) });
@@ -3458,6 +3493,8 @@ var CircleStopIcon = () => {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 16 16",
       fill: "currentColor",
+      width: "16",
+      height: "16",
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
     }
   );
@@ -3494,8 +3531,8 @@ var ComposerInput = _react.forwardRef.call(void 0,
 );
 ComposerInput.displayName = "ComposerInput";
 var useAllowCancel = () => {
-  const { useThreadActions } = useThreadContext();
-  const cancelSupported = useThreadActions((t) => t.capabilities.cancel);
+  const { useThread } = useThreadContext();
+  const cancelSupported = useThread((t) => t.capabilities.cancel);
   return cancelSupported;
 };
 var ComposerAction = () => {
@@ -3596,7 +3633,7 @@ var ThreadWelcomeSuggestion = ({
 };
 var ThreadWelcomeSuggestions = () => {
   const { welcome: { suggestions } = {} } = useThreadConfig();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadWelcomeSuggestionContainer, { children: _optionalChain([suggestions, 'optionalAccess', _130 => _130.map, 'call', _131 => _131((suggestion, idx) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadWelcomeSuggestionContainer, { children: _optionalChain([suggestions, 'optionalAccess', _129 => _129.map, 'call', _130 => _130((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThreadWelcomeSuggestion, { suggestion }, key);
   })]) });
@@ -3621,8 +3658,8 @@ var thread_welcome_default = Object.assign(ThreadWelcome, exports6);
 
 var useAllowEdit = () => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const editSupported = useThreadActions((t) => t.capabilities.edit);
+  const { useThread } = useThreadContext();
+  const editSupported = useThread((t) => t.capabilities.edit);
   return editSupported && allowEdit;
 };
 var UserActionBar = () => {
@@ -3674,7 +3711,7 @@ var UserMessageContent = _react.forwardRef.call(void 0,
       {
         components: {
           ...components,
-          Text: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _132 => _132.Text]), () => ( content_part_default.Text))
+          Text: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _131 => _131.Text]), () => ( content_part_default.Text))
         }
       }
     ) });
@@ -3776,10 +3813,10 @@ var ThreadMessages = ({ components, ...rest }) => {
     thread_exports.Messages,
     {
       components: {
-        UserMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _133 => _133.UserMessage]), () => ( user_message_default)),
-        EditComposer: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _134 => _134.EditComposer]), () => ( edit_composer_default)),
-        AssistantMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _135 => _135.AssistantMessage]), () => ( assistant_message_default)),
-        SystemMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _136 => _136.SystemMessage]), () => ( SystemMessage))
+        UserMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _132 => _132.UserMessage]), () => ( user_message_default)),
+        EditComposer: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _133 => _133.EditComposer]), () => ( edit_composer_default)),
+        AssistantMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _134 => _134.AssistantMessage]), () => ( assistant_message_default)),
+        SystemMessage: _nullishCoalesce(_optionalChain([components, 'optionalAccess', _135 => _135.SystemMessage]), () => ( SystemMessage))
       },
       ...rest
     }