@assistant-ui/react 0.5.29 → 0.5.31

package/dist/index.mjs

@@ -113,36 +113,35 @@ function useThreadContext(options) {
 
 // src/context/stores/Composer.ts
 import { create as create3 } from "zustand";
-
-// 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 create3()((set, get, store) => {
+  return create3()((_, 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: useThreadMessages.getState().at(-1)?.id ?? null,
+        const runtime2 = useThreadRuntime.getState();
+        const text = runtime2.composer.text;
+        runtime2.composer.setText("");
+        runtime2.append({
+          parentId: runtime2.messages.at(-1)?.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) => {
 import { create as create4 } from "zustand";
 var getThreadStateFromRuntime = (runtime) => {
   const lastMessage = runtime.messages.at(-1);
-  if (lastMessage?.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: lastMessage?.role !== "assistant" ? false : lastMessage.status.type === "running"
   });
 };
 var makeThreadStore = (runtimeRef) => {
@@ -203,9 +198,6 @@ import { create as create6 } from "zustand";
 var makeThreadActionStore = (runtimeStore) => {
   return create6(
     () => 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);
@@ -552,7 +552,7 @@ var useActionBarCopy = ({
   const callback = useCallback5(() => {
     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 = useCallback11(() => {
     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;
@@ -1562,7 +1562,7 @@ var ComposerPrimitiveInput = forwardRef12(
     const { useComposer, type } = useComposerContext();
     const value = useComposer((c) => {
       if (!c.isEditing) return "";
-      return c.value;
+      return c.text;
     });
     const Component = asChild ? Slot : TextareaAutosize;
     const isDisabled = useThread((t) => t.isDisabled) ?? disabledProp ?? false;
@@ -1577,6 +1577,7 @@ var ComposerPrimitiveInput = forwardRef12(
     });
     const handleKeyPress = (e) => {
       if (isDisabled) return;
+      if (e.nativeEvent.isComposing) return;
       if (e.key === "Enter" && e.shiftKey === false) {
         const { isRunning } = useThread.getState();
         if (!isRunning) {
@@ -1612,7 +1613,7 @@ var ComposerPrimitiveInput = forwardRef12(
         onChange: composeEventHandlers5(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
-          return composerState.setValue(e.target.value);
+          return composerState.setText(e.target.value);
         }),
         onKeyDown: composeEventHandlers5(onKeyDown, handleKeyPress)
       }
@@ -1627,7 +1628,7 @@ import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ComposerPrimitiveSend = forwardRef13(({ 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__ */ jsx21(
     Primitive7.button,
     {
@@ -1841,18 +1842,27 @@ import { create as create12 } from "zustand";
 var makeEditComposerStore = ({
   onEdit,
   onSend
-}) => create12()((set, get, store) => ({
-  ...makeBaseComposer(set, get, store),
+}) => create12()((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 });
@@ -2736,6 +2746,13 @@ var LocalThreadRuntime = class {
   get messages() {
     return this.repository.getMessages();
   }
+  composer = {
+    text: "",
+    setText: (value) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    }
+  };
   getBranches(messageId) {
     return this.repository.getBranches(messageId);
   }
@@ -3027,34 +3044,51 @@ var ExternalStoreThreadRuntime = class {
   _subscriptions = /* @__PURE__ */ new Set();
   repository = new MessageRepository();
   assistantOptimisticId = null;
+  _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;
   }
   messages = [];
   isDisabled = false;
   converter = new ThreadMessageConverter();
   _store;
+  composer = {
+    text: "",
+    setText: (value) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    }
+  };
   constructor(store) {
     this.store = store;
   }
   set store(store) {
+    if (this._store === store) return;
+    const isRunning = store.isRunning ?? false;
+    this.isDisabled = 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 = store.isRunning ?? false;
-    const isDisabled = store.isDisabled ?? false;
     const convertCallback = (cache, m, idx) => {
       if (!store.convertMessage) return m;
       const isLast = idx === store.messages.length - 1;
@@ -3095,7 +3129,9 @@ var ExternalStoreThreadRuntime = class {
       this.assistantOptimisticId ?? messages.at(-1)?.id ?? null
     );
     this.messages = this.repository.getMessages();
-    this.isDisabled = isDisabled;
+    this.notifySubscribers();
+  }
+  notifySubscribers() {
     for (const callback of this._subscriptions) callback();
   }
   getBranches(messageId) {
@@ -3220,14 +3256,14 @@ import { CheckIcon, CopyIcon, RefreshCwIcon } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs5 } from "react/jsx-runtime";
 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 = () => {
@@ -3296,8 +3332,8 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as jsx32, jsxs as jsxs6 } from "react/jsx-runtime";
 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 = () => {
@@ -3457,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__ */ jsx36("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" })
     }
   );
@@ -3493,8 +3531,8 @@ var ComposerInput = forwardRef22(
 );
 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 = () => {
@@ -3620,8 +3658,8 @@ import { PencilIcon } from "lucide-react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 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 = () => {