@assistant-ui/core 0.3.12 → 0.3.14

package/src/react/interactables-legacy/Interactables.ts

@@ -5,6 +5,7 @@ import {
   type ClientOutput,
   attachTransformScopes,
 } from "@assistant-ui/store";
+import { useAssistantScopeEffect } from "@assistant-ui/store/client";
 import type {
   InteractablesState,
   InteractableRegistration,
@@ -15,6 +16,7 @@ import type {
 import { toJSONSchema, toPartialJSONSchema } from "assistant-stream";
 import { ModelContext } from "../../store";
 import { buildInteractableModelContext } from "./interactable-model-context";
+import { notifySubscribers as notifyStateSubscribers } from "../../subscribable/subscribable";
 
 const PERSISTENCE_DEBOUNCE_MS = 500;
 
@@ -27,9 +29,15 @@ const useInteractables = (): ClientOutput<"interactables"> => {
   const clientRef = useAssistantClientRef();
 
   const stateRef = useRef(state);
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
+
+  const setStateAndRef = useCallback(
+    (updater: (prev: InteractablesState) => InteractablesState) => {
+      const next = updater(stateRef.current);
+      stateRef.current = next;
+      setState(next);
+    },
+    [],
+  );
 
   const subscribersRef = useRef(new Set<() => void>());
   const partialSchemaCacheRef = useRef(
@@ -44,75 +52,142 @@ const useInteractables = (): ClientOutput<"interactables"> => {
     undefined,
   );
   const syncSeqRef = useRef(0);
-  const hasPendingLocalChangeRef = useRef(false);
+  const latestSyncSeqByIdRef = useRef(new Map<string, number>());
+  const inFlightPersistenceRef = useRef(0);
   const flushResolversRef = useRef<Array<() => void>>([]);
   const dirtyIdsRef = useRef(new Set<string>());
 
-  const runPersistence = useCallback(async () => {
-    const adapter = adapterRef.current;
-    if (!adapter) {
-      for (const resolve of flushResolversRef.current) resolve();
-      flushResolversRef.current = [];
-      return;
-    }
+  type PersistenceBatch = {
+    adapter: InteractablePersistenceAdapter;
+    payload: InteractablePersistedState;
+    dirtyIds: Set<string>;
+    seq: number;
+  };
 
-    const seq = ++syncSeqRef.current;
-    const dirtyIds = new Set(dirtyIdsRef.current);
-    dirtyIdsRef.current.clear();
-    hasPendingLocalChangeRef.current = true;
+  const outgoingQueueRef = useRef<PersistenceBatch[]>([]);
+  const runPersistenceRef = useRef<(batch?: PersistenceBatch) => void>(
+    () => {},
+  );
 
-    // Snapshot before any await so unregistered definitions are still included.
-    const exported = stateRef.current.definitions;
-    const payload: InteractablePersistedState = {};
-    for (const [id, def] of Object.entries(exported)) {
-      payload[id] = { name: def.name, state: def.state };
+  const exportState = useCallback((): InteractablePersistedState => {
+    const result: InteractablePersistedState = {};
+    for (const [id, def] of Object.entries(stateRef.current.definitions)) {
+      result[id] = { name: def.name, state: def.state };
     }
+    return result;
+  }, []);
 
-    setState((prev) => ({
-      ...prev,
-      persistence: {
-        ...prev.persistence,
-        ...Object.fromEntries(
-          [...dirtyIds].map((id) => [
-            id,
-            { isPending: true, error: undefined },
-          ]),
-        ),
-      },
-    }));
+  const takeDirtyBatch = useCallback(
+    (adapter: InteractablePersistenceAdapter): PersistenceBatch | undefined => {
+      if (dirtyIdsRef.current.size === 0) return;
+      const dirtyIds = new Set(dirtyIdsRef.current);
+      dirtyIdsRef.current.clear();
+      const seq = ++syncSeqRef.current;
+      for (const id of dirtyIds) latestSyncSeqByIdRef.current.set(id, seq);
+      return { adapter, payload: exportState(), dirtyIds, seq };
+    },
+    [exportState],
+  );
 
-    try {
-      await adapter.save(payload);
-      if (syncSeqRef.current === seq) {
-        hasPendingLocalChangeRef.current = false;
-        setState((prev) => {
-          const persistence = { ...prev.persistence };
-          for (const id of dirtyIds) delete persistence[id];
-          return { ...prev, persistence };
-        });
+  const enqueuePersistence = useCallback(
+    (adapter: InteractablePersistenceAdapter) => {
+      const batch = takeDirtyBatch(adapter);
+      if (!batch) return;
+      if (inFlightPersistenceRef.current === 0) {
+        runPersistenceRef.current(batch);
+      } else {
+        outgoingQueueRef.current.push(batch);
       }
-    } catch (e) {
-      if (syncSeqRef.current === seq) {
-        hasPendingLocalChangeRef.current = false;
-        setState((prev) => ({
-          ...prev,
-          persistence: {
-            ...prev.persistence,
-            ...Object.fromEntries(
-              [...dirtyIds].map((id) => [id, { isPending: false, error: e }]),
-            ),
-          },
-        }));
+    },
+    [takeDirtyBatch],
+  );
+
+  const runPersistence = useCallback(
+    async (batch?: PersistenceBatch) => {
+      const resolved =
+        batch ??
+        (adapterRef.current ? takeDirtyBatch(adapterRef.current) : undefined);
+      if (!resolved) {
+        if (inFlightPersistenceRef.current === 0) {
+          for (const resolve of flushResolversRef.current) resolve();
+          flushResolversRef.current = [];
+        }
+        return;
       }
-    } finally {
-      if (dirtyIdsRef.current.size > 0 && adapterRef.current) {
-        runPersistence();
-      } else {
-        for (const resolve of flushResolversRef.current) resolve();
-        flushResolversRef.current = [];
+
+      const { adapter, payload, dirtyIds, seq } = resolved;
+      inFlightPersistenceRef.current += 1;
+
+      setStateAndRef((prev) => ({
+        ...prev,
+        persistence: {
+          ...prev.persistence,
+          ...Object.fromEntries(
+            [...dirtyIds].map((id) => [
+              id,
+              { isPending: true, error: undefined },
+            ]),
+          ),
+        },
+      }));
+
+      try {
+        await adapter.save(payload);
+        setStateAndRef((prev) => {
+          let changed = false;
+          const persistence = { ...prev.persistence };
+          for (const id of dirtyIds) {
+            if (
+              latestSyncSeqByIdRef.current.get(id) !== seq ||
+              dirtyIdsRef.current.has(id)
+            )
+              continue;
+            latestSyncSeqByIdRef.current.delete(id);
+            delete persistence[id];
+            changed = true;
+          }
+          return changed ? { ...prev, persistence } : prev;
+        });
+      } catch (e) {
+        setStateAndRef((prev) => {
+          let changed = false;
+          const persistence = { ...prev.persistence };
+          for (const id of dirtyIds) {
+            if (
+              latestSyncSeqByIdRef.current.get(id) !== seq ||
+              dirtyIdsRef.current.has(id)
+            )
+              continue;
+            latestSyncSeqByIdRef.current.delete(id);
+            persistence[id] = { isPending: false, error: e };
+            changed = true;
+          }
+          return changed ? { ...prev, persistence } : prev;
+        });
+      } finally {
+        inFlightPersistenceRef.current -= 1;
+        const next =
+          outgoingQueueRef.current.shift() ??
+          (adapterRef.current && dirtyIdsRef.current.size > 0
+            ? takeDirtyBatch(adapterRef.current)
+            : undefined);
+        if (next) {
+          if (debounceTimerRef.current !== undefined) {
+            clearTimeout(debounceTimerRef.current);
+            debounceTimerRef.current = undefined;
+          }
+          runPersistenceRef.current(next);
+        } else if (inFlightPersistenceRef.current === 0) {
+          for (const resolve of flushResolversRef.current) resolve();
+          flushResolversRef.current = [];
+        }
       }
-    }
-  }, []);
+    },
+    [setStateAndRef, takeDirtyBatch],
+  );
+  runPersistenceRef.current = (nextBatch) => {
+    void runPersistence(nextBatch);
+  };
 
   const schedulePersistence = useCallback(
     (id: string) => {
@@ -123,79 +198,75 @@ const useInteractables = (): ClientOutput<"interactables"> => {
       }
       debounceTimerRef.current = setTimeout(() => {
         debounceTimerRef.current = undefined;
-        if (!hasPendingLocalChangeRef.current) {
-          runPersistence();
+        if (inFlightPersistenceRef.current === 0 && adapterRef.current) {
+          enqueuePersistence(adapterRef.current);
         } else {
           debounceTimerRef.current = setTimeout(() => {
             debounceTimerRef.current = undefined;
-            runPersistence();
+            if (adapterRef.current) enqueuePersistence(adapterRef.current);
           }, PERSISTENCE_DEBOUNCE_MS);
         }
       }, PERSISTENCE_DEBOUNCE_MS);
     },
-    [runPersistence],
+    [enqueuePersistence],
   );
 
-  const exportState = useCallback((): InteractablePersistedState => {
-    const result: InteractablePersistedState = {};
-    for (const [id, def] of Object.entries(stateRef.current.definitions)) {
-      result[id] = { name: def.name, state: def.state };
-    }
-    return result;
-  }, []);
-
-  const importState = useCallback((saved: InteractablePersistedState) => {
-    for (const [id, entry] of Object.entries(saved)) {
-      detachedStateRef.current.set(id, entry.state);
-    }
-    setState((prev) => {
-      let changed = false;
-      const definitions = { ...prev.definitions };
+  const importState = useCallback(
+    (saved: InteractablePersistedState) => {
       for (const [id, entry] of Object.entries(saved)) {
-        if (definitions[id]) {
-          definitions[id] = { ...definitions[id], state: entry.state };
-          changed = true;
-        }
+        detachedStateRef.current.set(id, entry.state);
       }
-      return changed ? { ...prev, definitions } : prev;
-    });
-  }, []);
-
-  const setPersistenceAdapter = useCallback(
-    (adapter: InteractablePersistenceAdapter | undefined) => {
-      adapterRef.current = adapter;
+      setStateAndRef((prev) => {
+        let changed = false;
+        const definitions = { ...prev.definitions };
+        for (const [id, entry] of Object.entries(saved)) {
+          if (definitions[id]) {
+            definitions[id] = { ...definitions[id], state: entry.state };
+            changed = true;
+          }
+        }
+        return changed ? { ...prev, definitions } : prev;
+      });
     },
-    [],
+    [setStateAndRef],
   );
 
+  const flushIfPending = useCallback(() => {
+    if (debounceTimerRef.current !== undefined) {
+      clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = undefined;
+    }
+    if (adapterRef.current) enqueuePersistence(adapterRef.current);
+  }, [enqueuePersistence]);
+
   const flush = useCallback(async () => {
     if (debounceTimerRef.current !== undefined) {
       clearTimeout(debounceTimerRef.current);
       debounceTimerRef.current = undefined;
     }
-    if (!adapterRef.current) return;
-    if (!hasPendingLocalChangeRef.current && dirtyIdsRef.current.size === 0)
-      return;
+    const hasWork =
+      inFlightPersistenceRef.current > 0 ||
+      dirtyIdsRef.current.size > 0 ||
+      outgoingQueueRef.current.length > 0;
+    if (!hasWork) return;
     const p = new Promise<void>((resolve) => {
       flushResolversRef.current.push(resolve);
     });
-    if (!hasPendingLocalChangeRef.current) {
-      runPersistence();
-    }
+    if (adapterRef.current) enqueuePersistence(adapterRef.current);
     return p;
-  }, [runPersistence]);
+  }, [enqueuePersistence]);
 
-  const flushIfPending = useCallback(() => {
-    if (adapterRef.current && debounceTimerRef.current !== undefined) {
-      clearTimeout(debounceTimerRef.current);
-      debounceTimerRef.current = undefined;
-      runPersistence();
-    }
-  }, [runPersistence]);
+  const setPersistenceAdapter = useCallback(
+    (adapter: InteractablePersistenceAdapter | undefined) => {
+      if (adapterRef.current !== adapter) flushIfPending();
+      adapterRef.current = adapter;
+    },
+    [flushIfPending],
+  );
 
   const setDefState = useCallback(
     (id: string, updater: (prev: unknown) => unknown) => {
-      setState((prev) => {
+      setStateAndRef((prev) => {
         const existing = prev.definitions[id];
         if (!existing) return prev;
         return {
@@ -208,22 +279,25 @@ const useInteractables = (): ClientOutput<"interactables"> => {
       });
       if (stateRef.current.definitions[id]) schedulePersistence(id);
     },
-    [schedulePersistence],
+    [schedulePersistence, setStateAndRef],
   );
 
-  const setDefSelected = useCallback((id: string, selected: boolean) => {
-    setState((prev) => {
-      const existing = prev.definitions[id];
-      if (!existing) return prev;
-      return {
-        ...prev,
-        definitions: {
-          ...prev.definitions,
-          [id]: { ...existing, selected },
-        },
-      };
-    });
-  }, []);
+  const setDefSelected = useCallback(
+    (id: string, selected: boolean) => {
+      setStateAndRef((prev) => {
+        const existing = prev.definitions[id];
+        if (!existing) return prev;
+        return {
+          ...prev,
+          definitions: {
+            ...prev.definitions,
+            [id]: { ...existing, selected },
+          },
+        };
+      });
+    },
+    [setStateAndRef],
+  );
 
   const provider = useMemo(
     () => ({
@@ -248,12 +322,14 @@ const useInteractables = (): ClientOutput<"interactables"> => {
   );
 
   useEffect(() => {
-    for (const cb of subscribersRef.current) cb();
+    notifyStateSubscribers(subscribersRef.current);
   }, [state]);
 
-  useEffect(() => {
-    return clientRef.current!.modelContext().register(provider);
-  }, [clientRef, provider]);
+  useAssistantScopeEffect(
+    "modelContext",
+    () => clientRef.current!.modelContext().register(provider),
+    [provider],
+  );
 
   const register = useCallback(
     (def: InteractableRegistration) => {
@@ -273,7 +349,7 @@ const useInteractables = (): ClientOutput<"interactables"> => {
       const detached = detachedStateRef.current.get(def.id);
       detachedStateRef.current.delete(def.id);
 
-      setState((prev) => ({
+      setStateAndRef((prev) => ({
         ...prev,
         definitions: {
           ...prev.definitions,
@@ -291,7 +367,7 @@ const useInteractables = (): ClientOutput<"interactables"> => {
 
       return () => {
         flushIfPending();
-        setState((prev) => {
+        setStateAndRef((prev) => {
           const existing = prev.definitions[def.id];
           if (existing) {
             detachedStateRef.current.set(def.id, existing.state);
@@ -303,7 +379,7 @@ const useInteractables = (): ClientOutput<"interactables"> => {
         });
       };
     },
-    [flushIfPending],
+    [flushIfPending, setStateAndRef],
   );
 
   return {

package/src/react/primitive-hooks/useActionBarCopy.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { actionBarCopyDisabled } from "../../store/primitive-predicates";
 
 export type UseActionBarCopyOptions = {
   copiedDuration?: number | undefined;
@@ -11,13 +12,7 @@ export const useActionBarCopy = ({
   copyToClipboard,
 }: UseActionBarCopyOptions = {}) => {
   const aui = useAui();
-  const disabled = useAuiState((s) => {
-    return !(
-      (s.message.role !== "assistant" ||
-        s.message.status?.type !== "running") &&
-      s.message.parts.some((c) => c.type === "text" && c.text.length > 0)
-    );
-  });
+  const disabled = useAuiState(actionBarCopyDisabled);
   const isCopied = useAuiState((s) => s.message.isCopied);
   const isEditing = useAuiState((s) => s.composer.isEditing);
   const composerValue = useAuiState((s) => s.composer.text);

package/src/react/primitive-hooks/useActionBarEdit.ts

@@ -1,9 +1,10 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { actionBarEditDisabled } from "../../store/primitive-predicates";
 
 export const useActionBarEdit = () => {
   const aui = useAui();
-  const disabled = useAuiState((s) => s.composer.isEditing);
+  const disabled = useAuiState(actionBarEditDisabled);
 
   const edit = useCallback(() => {
     aui.composer.beginEdit();

package/src/react/primitive-hooks/useActionBarReload.ts

@@ -1,14 +1,10 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { actionBarReloadDisabled } from "../../store/primitive-predicates";
 
 export const useActionBarReload = () => {
   const aui = useAui();
-  const disabled = useAuiState(
-    (s) =>
-      s.thread.isRunning ||
-      s.thread.isDisabled ||
-      s.message.role !== "assistant",
-  );
+  const disabled = useAuiState(actionBarReloadDisabled);
 
   const reload = useCallback(() => {
     aui.message.reload();

package/src/react/primitive-hooks/useBranchPickerNext.ts

@@ -1,15 +1,10 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { branchPickerNextDisabled } from "../../store/primitive-predicates";
 
 export const useBranchPickerNext = () => {
   const aui = useAui();
-  const disabled = useAuiState((s) => {
-    if (s.message.branchNumber >= s.message.branchCount) return true;
-    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
-      return true;
-    }
-    return false;
-  });
+  const disabled = useAuiState(branchPickerNextDisabled);
 
   const next = useCallback(() => {
     aui.message.switchToBranch({ position: "next" });

package/src/react/primitive-hooks/useBranchPickerPrevious.ts

@@ -1,15 +1,10 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { branchPickerPreviousDisabled } from "../../store/primitive-predicates";
 
 export const useBranchPickerPrevious = () => {
   const aui = useAui();
-  const disabled = useAuiState((s) => {
-    if (s.message.branchNumber <= 1) return true;
-    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
-      return true;
-    }
-    return false;
-  });
+  const disabled = useAuiState(branchPickerPreviousDisabled);
 
   const previous = useCallback(() => {
     aui.message.switchToBranch({ position: "previous" });

package/src/react/primitive-hooks/useComposerCancel.ts

@@ -1,9 +1,10 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { composerCancelDisabled } from "../../store/primitive-predicates";
 
 export const useComposerCancel = () => {
   const aui = useAui();
-  const disabled = useAuiState((s) => !s.composer.canCancel);
+  const disabled = useAuiState(composerCancelDisabled);
 
   const cancel = useCallback(() => {
     aui.composer.cancel();

package/src/react/primitive-hooks/useComposerSend.ts

@@ -1,14 +1,11 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { composerSendDisabled } from "../../store/primitive-predicates";
 import type { ComposerSendOptions } from "../../store/scopes/composer";
 
 export const useComposerSend = () => {
   const aui = useAui();
-  const disabled = useAuiState(
-    (s) =>
-      !s.composer.canSend ||
-      (s.thread.isRunning && !s.thread.capabilities.queue),
-  );
+  const disabled = useAuiState(composerSendDisabled);
 
   const send = useCallback(
     (opts?: ComposerSendOptions) => {

package/src/react/primitive-hooks/useSuggestionTrigger.test.ts

@@ -127,6 +127,17 @@ describe("useSuggestionTrigger", () => {
     expect(mocks.setText).toHaveBeenCalledWith("my draft Hello");
   });
 
+  it("does not add a separator for an empty prompt", () => {
+    mocks.composerState.text = "my draft";
+    const { result } = renderHook(() =>
+      useSuggestionTrigger({ prompt: "", clearComposer: false }),
+    );
+
+    result.current.trigger();
+
+    expect(mocks.setText).toHaveBeenCalledWith("my draft");
+  });
+
   it("inserts the prompt alone when the composer is empty and clearComposer is false", () => {
     const { result } = renderHook(() =>
       useSuggestionTrigger({ prompt: "Hello", clearComposer: false }),

package/src/react/primitive-hooks/useSuggestionTrigger.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
+import { suggestionTriggerDisabled } from "../../store/primitive-predicates";
 
 export type UseSuggestionTriggerOptions = {
   prompt: string;
@@ -14,10 +15,8 @@ export const useSuggestionTrigger = ({
 }: UseSuggestionTriggerOptions) => {
   const aui = useAui();
   const resolvedSend = send ?? false;
-  const disabled = useAuiState(
-    (s) =>
-      s.thread.isDisabled ||
-      (resolvedSend && s.thread.isRunning && !s.thread.capabilities.queue),
+  const disabled = useAuiState((s) =>
+    suggestionTriggerDisabled(s, resolvedSend),
   );
 
   const trigger = useCallback(() => {
@@ -39,7 +38,7 @@ export const useSuggestionTrigger = ({
       } else {
         const currentText = aui.composer.getState().text;
         aui.composer.setText(
-          currentText.trim() ? `${currentText} ${prompt}` : prompt,
+          [currentText, prompt].filter((part) => part.trim()).join(" "),
         );
       }
     }

package/src/react/primitives/message/MessageParts.tsx

@@ -726,7 +726,6 @@ const EMPTY_RUNNING_TEXT_PART: Extract<EnrichedPartState, { type: "text" }> =
   });
 
 /**
- * @internal
  * Renders a single part by index, calling `children` with the
  * {@link EnrichedPartState} (tool/data UI enrichments + addResult/resume
  * for tool calls). Shared between `<MessagePrimitive.Parts>` and

package/src/react/primitives/thread/ThreadMessages.tsx

@@ -130,7 +130,8 @@ const getComponent = (
           components.SystemEditComposer ??
           components.EditComposer ??
           components.SystemMessage ??
-          (components.Message as ComponentType)
+          (components.Message as ComponentType) ??
+          DEFAULT_SYSTEM_MESSAGE
         );
       } else {
         return (