@assistant-ui/react 0.3.0 → 0.3.1

package/dist/index.d.mts

@@ -82,6 +82,12 @@ type ChatModelAdapter = {
 
 declare abstract class BaseAssistantRuntime<TThreadRuntime extends ReactThreadRuntime> implements AssistantRuntime {
     private _thread;
+    get capabilities(): Readonly<{
+        edit: boolean;
+        reload: boolean;
+        cancel: boolean;
+        copy: boolean;
+    }>;
     constructor(_thread: TThreadRuntime);
     private _unsubscribe;
     get thread(): TThreadRuntime;
@@ -114,7 +120,13 @@ declare class LocalThreadRuntime implements ThreadRuntime {
     adapter: ChatModelAdapter;
     private _subscriptions;
     private abortController;
-    private repository;
+    private readonly repository;
+    readonly capabilities: Readonly<{
+        edit: true;
+        reload: true;
+        cancel: true;
+        copy: true;
+    }>;
     get messages(): ThreadMessage[];
     get isRunning(): boolean;
     constructor(_configProviders: Set<ModelConfigProvider>, adapter: ChatModelAdapter);
@@ -131,6 +143,12 @@ declare class LocalThreadRuntime implements ThreadRuntime {
 declare const useLocalRuntime: (adapter: ChatModelAdapter) => LocalRuntime;
 
 type ThreadActionsState = Readonly<{
+    capabilities: Readonly<{
+        edit: boolean;
+        reload: boolean;
+        cancel: boolean;
+        copy: boolean;
+    }>;
     getBranches: (messageId: string) => readonly string[];
     switchToBranch: (branchId: string) => void;
     append: (message: AppendMessage) => void;
@@ -202,10 +220,11 @@ type BaseComposerState = Readonly<{
 type ReadonlyStore<T> = UseBoundStore<Omit<StoreApi<T>, "setState" | "destroy">>;
 
 type EditComposerState = BaseComposerState & Readonly<{
+    canCancel: boolean;
     isEditing: boolean;
     edit: () => void;
     send: () => void;
-    cancel: () => boolean;
+    cancel: () => void;
 }>;
 
 type ThreadState = Readonly<{
@@ -271,9 +290,10 @@ type ContentPartContextValue = {
 declare const useContentPartContext: () => ContentPartContextValue;
 
 type ComposerState = BaseComposerState & Readonly<{
+    canCancel: boolean;
     isEditing: true;
     send: () => void;
-    cancel: () => boolean;
+    cancel: () => void;
     focus: () => void;
     onFocus: (listener: () => void) => Unsubscribe;
 }>;
@@ -605,7 +625,7 @@ type ThreadPrimitiveMessagesProps = {
         AssistantMessage: ComponentType;
     };
 };
-declare const ThreadPrimitiveMessages: FC<ThreadPrimitiveMessagesProps>;
+declare const ThreadPrimitiveMessages: react.NamedExoticComponent<ThreadPrimitiveMessagesProps>;
 
 type ThreadPrimitiveScrollToBottomProps = ActionButtonProps<typeof useThreadScrollToBottom>;
 declare const ThreadPrimitiveScrollToBottom: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {

package/dist/index.d.ts

@@ -82,6 +82,12 @@ type ChatModelAdapter = {
 
 declare abstract class BaseAssistantRuntime<TThreadRuntime extends ReactThreadRuntime> implements AssistantRuntime {
     private _thread;
+    get capabilities(): Readonly<{
+        edit: boolean;
+        reload: boolean;
+        cancel: boolean;
+        copy: boolean;
+    }>;
     constructor(_thread: TThreadRuntime);
     private _unsubscribe;
     get thread(): TThreadRuntime;
@@ -114,7 +120,13 @@ declare class LocalThreadRuntime implements ThreadRuntime {
     adapter: ChatModelAdapter;
     private _subscriptions;
     private abortController;
-    private repository;
+    private readonly repository;
+    readonly capabilities: Readonly<{
+        edit: true;
+        reload: true;
+        cancel: true;
+        copy: true;
+    }>;
     get messages(): ThreadMessage[];
     get isRunning(): boolean;
     constructor(_configProviders: Set<ModelConfigProvider>, adapter: ChatModelAdapter);
@@ -131,6 +143,12 @@ declare class LocalThreadRuntime implements ThreadRuntime {
 declare const useLocalRuntime: (adapter: ChatModelAdapter) => LocalRuntime;
 
 type ThreadActionsState = Readonly<{
+    capabilities: Readonly<{
+        edit: boolean;
+        reload: boolean;
+        cancel: boolean;
+        copy: boolean;
+    }>;
     getBranches: (messageId: string) => readonly string[];
     switchToBranch: (branchId: string) => void;
     append: (message: AppendMessage) => void;
@@ -202,10 +220,11 @@ type BaseComposerState = Readonly<{
 type ReadonlyStore<T> = UseBoundStore<Omit<StoreApi<T>, "setState" | "destroy">>;
 
 type EditComposerState = BaseComposerState & Readonly<{
+    canCancel: boolean;
     isEditing: boolean;
     edit: () => void;
     send: () => void;
-    cancel: () => boolean;
+    cancel: () => void;
 }>;
 
 type ThreadState = Readonly<{
@@ -271,9 +290,10 @@ type ContentPartContextValue = {
 declare const useContentPartContext: () => ContentPartContextValue;
 
 type ComposerState = BaseComposerState & Readonly<{
+    canCancel: boolean;
     isEditing: true;
     send: () => void;
-    cancel: () => boolean;
+    cancel: () => void;
     focus: () => void;
     onFocus: (listener: () => void) => Unsubscribe;
 }>;
@@ -605,7 +625,7 @@ type ThreadPrimitiveMessagesProps = {
         AssistantMessage: ComponentType;
     };
 };
-declare const ThreadPrimitiveMessages: FC<ThreadPrimitiveMessagesProps>;
+declare const ThreadPrimitiveMessages: react.NamedExoticComponent<ThreadPrimitiveMessagesProps>;
 
 type ThreadPrimitiveScrollToBottomProps = ActionButtonProps<typeof useThreadScrollToBottom>;
 declare const ThreadPrimitiveScrollToBottom: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {

package/dist/index.js

@@ -210,11 +210,14 @@ var makeBaseComposer = (set) => ({
 });
 
 // src/context/stores/Composer.ts
-var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
+var makeComposerStore = (useThreadMessages, useThreadActions) => {
   const focusListeners = /* @__PURE__ */ new Set();
   return (0, import_zustand3.create)()((set, get, store) => {
     return {
       ...makeBaseComposer(set, get, store),
+      get canCancel() {
+        return useThreadActions.getState().capabilities.cancel;
+      },
       isEditing: true,
       send: () => {
         const { setValue, value } = get();
@@ -226,10 +229,7 @@ var makeComposerStore = (useThread, useThreadMessages, useThreadActions) => {
         });
       },
       cancel: () => {
-        const thread = useThread.getState();
-        if (!thread.isRunning) return false;
         useThreadActions.getState().cancelRun();
-        return true;
       },
       focus: () => {
         for (const listener of focusListeners) {
@@ -279,6 +279,9 @@ var import_zustand6 = require("zustand");
 var makeThreadActionStore = (runtimeRef) => {
   return (0, import_zustand6.create)(
     () => Object.freeze({
+      get capabilities() {
+        return runtimeRef.current.capabilities;
+      },
       getBranches: (messageId) => runtimeRef.current.getBranches(messageId),
       switchToBranch: (branchId) => runtimeRef.current.switchToBranch(branchId),
       startRun: (parentId) => runtimeRef.current.startRun(parentId),
@@ -310,11 +313,7 @@ var ThreadProvider = ({
     const useThreadMessages = makeThreadMessagesStore(runtimeRef);
     const useThreadActions = makeThreadActionStore(runtimeRef);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(
-      useThread,
-      useThreadMessages,
-      useThreadActions
-    );
+    const useComposer = makeComposerStore(useThreadMessages, useThreadActions);
     return {
       useThread,
       useThreadMessages,
@@ -687,7 +686,7 @@ var useBranchPickerPrevious = () => {
 var import_react21 = require("react");
 var useComposerCancel = () => {
   const { useComposer } = useComposerContext();
-  const disabled = useComposer((c) => !c.isEditing);
+  const disabled = useComposer((c) => !c.canCancel);
   const callback = (0, import_react21.useCallback)(() => {
     const { cancel } = useComposer.getState();
     cancel();
@@ -819,15 +818,18 @@ var useThreadSuggestion = ({
   autoSend
 }) => {
   const { useThread, useComposer } = useThreadContext();
+  const append = useAppendMessage();
   const disabled = useThread((t) => t.isRunning);
   const callback = (0, import_react24.useCallback)(() => {
     const thread = useThread.getState();
     const composer = useComposer.getState();
-    composer.setValue(prompt);
     if (autoSend && !thread.isRunning) {
-      composer.send();
+      append(prompt);
+      composer.setValue("");
+    } else {
+      composer.setValue(prompt);
     }
-  }, [useThread, useComposer, prompt, autoSend]);
+  }, [useThread, useComposer, autoSend, append, prompt]);
   if (disabled) return null;
   return callback;
 };
@@ -1262,7 +1264,7 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 var defaultComponents = {
   Text: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { style: { whiteSpace: "pre-line" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveText, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveInProgress, { children: " \u25CF" })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveInProgress, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontFamily: "revert" }, children: " \u25CF" }) })
   ] }),
   Image: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveImage, {}),
   UI: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContentPartPrimitiveDisplay, {}),
@@ -1400,7 +1402,8 @@ var ComposerPrimitiveInput = (0, import_react40.forwardRef)(
     const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, textareaRef);
     (0, import_react_use_escape_keydown.useEscapeKeydown)((e) => {
       const composer = useComposer.getState();
-      if (composer.cancel()) {
+      if (composer.canCancel) {
+        composer.cancel();
         e.preventDefault();
       }
     });
@@ -1674,20 +1677,19 @@ var makeEditComposerStore = ({
   onSend
 }) => (0, import_zustand10.create)()((set, get, store) => ({
   ...makeBaseComposer(set, get, store),
+  canCancel: false,
   isEditing: false,
   edit: () => {
     const value = onEdit();
-    set({ isEditing: true, value });
+    set({ isEditing: true, canCancel: true, value });
   },
   send: () => {
     const value = get().value;
-    set({ isEditing: false });
+    set({ isEditing: false, canCancel: false });
     onSend(value);
   },
   cancel: () => {
-    if (!get().isEditing) return false;
-    set({ isEditing: false });
-    return true;
+    set({ isEditing: false, canCancel: false });
   }
 }));
 
@@ -1808,9 +1810,9 @@ var ThreadMessageImpl = ({
 };
 var ThreadMessage = (0, import_react48.memo)(
   ThreadMessageImpl,
-  (prev, next) => prev.messageIndex === next.messageIndex && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
+  (prev, next) => prev.messageIndex === next.messageIndex && prev.components.Message === next.components.Message && prev.components.UserMessage === next.components.UserMessage && prev.components.EditComposer === next.components.EditComposer && prev.components.AssistantMessage === next.components.AssistantMessage
 );
-var ThreadPrimitiveMessages = ({
+var ThreadPrimitiveMessagesImpl = ({
   components
 }) => {
   const { useThreadMessages } = useThreadContext();
@@ -1828,7 +1830,11 @@ var ThreadPrimitiveMessages = ({
     );
   });
 };
-ThreadPrimitiveMessages.displayName = "ThreadPrimitive.Messages";
+ThreadPrimitiveMessagesImpl.displayName = "ThreadPrimitive.Messages";
+var ThreadPrimitiveMessages = (0, import_react48.memo)(
+  ThreadPrimitiveMessagesImpl,
+  (prev, next) => prev.components?.Message === next.components?.Message && prev.components?.UserMessage === next.components?.UserMessage && prev.components?.EditComposer === next.components?.EditComposer && prev.components?.AssistantMessage === next.components?.AssistantMessage
+);
 
 // src/primitives/thread/ThreadScrollToBottom.tsx
 var ThreadPrimitiveScrollToBottom = createActionButton(
@@ -2012,6 +2018,9 @@ var BaseAssistantRuntime = class {
     this._thread = _thread;
     this._unsubscribe = this._thread.subscribe(this.subscriptionHandler);
   }
+  get capabilities() {
+    return this._thread.capabilities;
+  }
   _unsubscribe;
   get thread() {
     return this._thread;
@@ -2084,6 +2093,12 @@ var LocalRuntime = class extends BaseAssistantRuntime {
     );
   }
 };
+var CAPABILITIES = Object.freeze({
+  edit: true,
+  reload: true,
+  cancel: true,
+  copy: true
+});
 var LocalThreadRuntime = class {
   constructor(_configProviders, adapter) {
     this._configProviders = _configProviders;
@@ -2092,6 +2107,7 @@ var LocalThreadRuntime = class {
   _subscriptions = /* @__PURE__ */ new Set();
   abortController = null;
   repository = new MessageRepository();
+  capabilities = CAPABILITIES;
   get messages() {
     return this.repository.getMessages();
   }