@assistant-ui/core 0.3.17 → 0.3.19

package/src/react/client/RemoteThreadList.ts

@@ -25,6 +25,8 @@ import {
   createThreadMappingId,
   getThreadData,
   normalizeCursor,
+  reconcileInitializedThread,
+  promoteNewThreadReducer,
   updateStatusReducer,
   type RemoteThreadData,
   type RemoteThreadState,
@@ -38,14 +40,24 @@ import type {
 } from "../../runtimes/remote-thread-list/types";
 import { ThreadListAdapterChangedError } from "../../runtimes/remote-thread-list/adapter-changed";
 import type { ThreadMessage } from "../../types/message";
-import { AssistantMessageStream } from "assistant-stream";
 import { handleThreadListAction } from "../../store/runtime-clients/handle-thread-list-action";
 import {
   inMemoryThreadListTransformScopes,
   type InMemoryThreadListProps,
 } from "./InMemoryThreadList";
 import { AdaptedRemoteThread } from "./AdaptedRemoteThread";
-import { isTitleSourceMessage } from "../../runtimes/remote-thread-list/title";
+import {
+  applyTitleStream,
+  isTitleSourceMessage,
+} from "../../runtimes/remote-thread-list/title";
+import {
+  clearThreadTitleState,
+  finishThreadTitleRename,
+  runThreadTitleGeneration,
+  startThreadTitleRename,
+  type ThreadTitleState,
+} from "../../runtimes/remote-thread-list/title-generation";
+import { invokeUserCallback } from "../../utils/invoke-user-callback";
 
 const RESOLVED_PROMISE = Promise.resolve();
 
@@ -67,6 +79,7 @@ export type RemoteThreadListProps = {
   onThreadIdChange?: ((threadId: string | undefined) => void) | undefined;
   onSwitchToThread?: ((threadId: string) => void) | undefined;
   onSwitchToNewThread?: (() => void) | undefined;
+  /** Called after the backing adapter successfully deletes the thread. */
   onDelete?: ((threadId: string) => void) | undefined;
   /**
    * Keeps every thread the session switched to mounted, so a run continues
@@ -101,16 +114,6 @@ const toInitializeResult = (
   externalId: result.externalId,
 });
 
-const applyTitleStream = async (
-  stream: Parameters<typeof AssistantMessageStream.fromAssistantStream>[0],
-  onTitle: (title: string | undefined) => Promise<void>,
-) => {
-  const messageStream = AssistantMessageStream.fromAssistantStream(stream);
-  for await (const result of messageStream) {
-    await onTitle(result.parts.filter((part) => part.type === "text")[0]?.text);
-  }
-};
-
 const useThreadListItemClient = (props: {
   data: RemoteThreadData;
   isRunning: boolean;
@@ -120,7 +123,7 @@ const useThreadListItemClient = (props: {
   onArchive: () => void;
   onUnarchive: () => void;
   onDelete: () => void;
-  onGenerateTitle: () => void;
+  onGenerateTitle: (options?: { automatic?: boolean }) => void;
   onInitialize: () => Promise<{
     remoteId: string;
     externalId: string | undefined;
@@ -271,7 +274,7 @@ const useRemoteThreadBody = ({
     useEffect(() => {
       if (!hasTitleSource || titleFiredRef.current) return;
       titleFiredRef.current = true;
-      client.threadListItem.generateTitle();
+      client.threadListItem.generateTitle({ automatic: true });
     }, [hasTitleSource]);
     return body.methods;
   });
@@ -343,6 +346,7 @@ const useRemoteThreadListView = ({
   onGenerateTitle: (
     threadId: string,
     messages: readonly ThreadMessage[] | undefined,
+    options?: { automatic?: boolean },
   ) => Promise<void>;
   onInitialize: (threadId: string) => Promise<{
     remoteId: string;
@@ -385,7 +389,7 @@ const useRemoteThreadListView = ({
       onUnarchive: () =>
         handleThreadListAction("unarchive", () => onUnarchive(data.id)),
       onDelete: () => handleThreadListAction("delete", () => onDelete(data.id)),
-      onGenerateTitle: () =>
+      onGenerateTitle: (options) =>
         handleThreadListAction("generate title", () =>
           onGenerateTitle(
             data.id,
@@ -394,6 +398,7 @@ const useRemoteThreadListView = ({
               : mainThreadClient.state.messages) as
               | readonly ThreadMessage[]
               | undefined,
+            options,
           ),
         ),
       onInitialize: () => onInitialize(data.id),
@@ -489,6 +494,7 @@ const useRemoteThreadList = (
         adapter,
         adapterAtLoad: adapter,
         adapterGeneration: 0,
+        titleStates: new Map<string, ThreadTitleState>(),
         loadGeneration: 0,
         switchGeneration: 0,
         loadPromise: undefined as Promise<void> | undefined,
@@ -545,7 +551,14 @@ const useRemoteThreadList = (
     (remoteId: string | undefined, emit: boolean) => {
       if (session.lastNotifiedRemoteId === remoteId) return;
       session.lastNotifiedRemoteId = remoteId;
-      if (emit) session.onThreadIdChange?.(remoteId);
+      if (emit) {
+        invokeUserCallback(
+          "assistant-ui",
+          "onThreadIdChange",
+          session.onThreadIdChange,
+          remoteId,
+        );
+      }
     },
     [session],
   );
@@ -560,7 +573,7 @@ const useRemoteThreadList = (
         execute: () => adapter.list(),
         loading: (state) => {
           if (generation !== session.loadGeneration) return state;
-          return { ...state, isLoading: true };
+          return { ...state, isLoading: true, loadError: undefined };
         },
         then: (state, page) => {
           if (generation !== session.loadGeneration) return state;
@@ -574,6 +587,7 @@ const useRemoteThreadList = (
           const merged = {
             ...state,
             isLoading: false,
+            loadError: undefined,
             cursor: normalizeCursor(page.nextCursor),
             threadIds: fresh.threadIds,
             archivedThreadIds: fresh.archivedThreadIds,
@@ -590,6 +604,7 @@ const useRemoteThreadList = (
         store.update({
           ...store.baseValue,
           isLoading: false,
+          loadError: error,
         });
       })
       .then(() => {});
@@ -603,6 +618,7 @@ const useRemoteThreadList = (
     session.loadMorePromise = undefined;
     if (adapterChanged) {
       session.adapterGeneration++;
+      session.titleStates.clear();
       session.switchGeneration++;
       session.switchTask = undefined;
       session.adapterAtLoad = adapter;
@@ -627,6 +643,26 @@ const useRemoteThreadList = (
     store,
   ]);
 
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+
+    const retryAfterError = () => {
+      if (store.value.loadError !== undefined) void getLoadThreadsPromise();
+    };
+    const retryAfterVisible = () => {
+      if (document.visibilityState === "visible") retryAfterError();
+    };
+
+    window.addEventListener("online", retryAfterError);
+    document.addEventListener("visibilitychange", retryAfterVisible);
+    return () => {
+      window.removeEventListener("online", retryAfterError);
+      document.removeEventListener("visibilitychange", retryAfterVisible);
+    };
+  }, [getLoadThreadsPromise, store]);
+
   useEffect(() => {
     void getLoadThreadsPromise();
   }, [getLoadThreadsPromise]);
@@ -881,70 +917,60 @@ const useRemoteThreadList = (
         requireAdapterGeneration(adapterGeneration);
         return result;
       }
+      requireAdapterGeneration(adapterGeneration);
+      const initializeTask = currentAdapter.initialize(threadId);
+      let removedMappingId: string | undefined;
+      let replacementMainThreadId: string | undefined;
       const result = await store.optimisticUpdate({
-        execute: () => {
-          requireAdapterGeneration(adapterGeneration);
-          return currentAdapter.initialize(threadId);
-        },
-        optimistic: (state) => updateStatusReducer(state, threadId, "regular"),
-        loading: (state, task) => {
-          const mappingId = createThreadMappingId(threadId);
-          return {
-            ...state,
-            threadData: {
-              ...state.threadData,
-              [mappingId]: {
-                ...state.threadData[mappingId],
-                initializeTask: task,
-              },
-            },
-          };
-        },
+        execute: () => initializeTask,
+        optimistic: (state) =>
+          promoteNewThreadReducer(state, threadId, initializeTask),
         then: (state, { remoteId, externalId }) => {
           if (adapterGeneration !== session.adapterGeneration) return state;
-          const data = getThreadData(state, threadId);
-          if (!data) return state;
-          const mappingId = createThreadMappingId(threadId);
-          // A list() response that landed while this initialize was in flight
-          // could not know the remote id yet, so it may have minted its own
-          // slot for it; that slot collapses into this one.
-          const listedMappingId = state.threadIdMap[remoteId];
-          const orphan =
-            listedMappingId !== undefined && listedMappingId !== mappingId
-              ? state.threadData[listedMappingId]
-              : undefined;
-
-          const threadData = { ...state.threadData };
-          if (orphan !== undefined) delete threadData[listedMappingId!];
-          threadData[mappingId] = {
-            ...data,
-            initializeTask: Promise.resolve({ remoteId, externalId }),
+          // Background mode still owns the initializing body. Single-body mode
+          // has already replaced it, so retain the currently mounted body.
+          const retainedThreadId = backgroundThreads
+            ? threadId
+            : session.mainThreadId;
+          const reconciliation = reconcileInitializedThread(
+            state,
+            threadId,
             remoteId,
             externalId,
-          } as RemoteThreadData;
-
-          const rewire = (ids: readonly string[]) =>
-            orphan === undefined ? ids : ids.filter((id) => id !== orphan.id);
-
-          return {
-            ...state,
-            threadIds: rewire(state.threadIds),
-            archivedThreadIds: rewire(state.archivedThreadIds),
-            threadIdMap: {
-              ...state.threadIdMap,
-              [remoteId]: mappingId,
-            },
-            threadData,
-          };
+            retainedThreadId,
+          );
+          removedMappingId = reconciliation.removedMappingId;
+          if (removedMappingId === session.mainThreadId) {
+            replacementMainThreadId = reconciliation.survivorMappingId;
+          }
+          return reconciliation.state;
         },
       });
       requireAdapterGeneration(adapterGeneration);
+      if (removedMappingId !== undefined) {
+        setStartedIds((prev) =>
+          prev.filter((startedId) => startedId !== removedMappingId),
+        );
+      }
+      if (
+        replacementMainThreadId !== undefined &&
+        session.mainThreadId === removedMappingId
+      ) {
+        assignMainThreadId(replacementMainThreadId);
+      }
       if (threadId === session.mainThreadId) {
         notifyRemoteId(result.remoteId, true);
       }
       return toInitializeResult(result);
     },
-    [notifyRemoteId, requireAdapterGeneration, session, store],
+    [
+      assignMainThreadId,
+      backgroundThreads,
+      notifyRemoteId,
+      requireAdapterGeneration,
+      session,
+      store,
+    ],
   );
 
   const rename = useCallback(
@@ -956,27 +982,43 @@ const useRemoteThreadList = (
       if (data.status === "new") {
         throw threadStatusError(threadIdOrRemoteId, data.status, "be renamed");
       }
-      return store.optimisticUpdate({
-        execute: async () => {
-          const { remoteId } = await data.initializeTask;
-          requireAdapterGeneration(adapterGeneration);
-          return currentAdapter.rename(remoteId, newTitle);
-        },
-        optimistic: (state) => {
-          const current = getThreadData(state, threadIdOrRemoteId);
-          if (!current) return state;
-          return {
-            ...state,
-            threadData: {
-              ...state.threadData,
-              [current.id]: {
-                ...current,
-                title: newTitle,
+      const claim = startThreadTitleRename(
+        session.titleStates,
+        data.id,
+        newTitle,
+      );
+      return store
+        .optimisticUpdate({
+          execute: async () => {
+            const { remoteId } = await data.initializeTask;
+            requireAdapterGeneration(adapterGeneration);
+            return currentAdapter.rename(remoteId, newTitle);
+          },
+          optimistic: (state) => {
+            const current = getThreadData(state, threadIdOrRemoteId);
+            if (!current) return state;
+            return {
+              ...state,
+              threadData: {
+                ...state.threadData,
+                [current.id]: {
+                  ...current,
+                  title: newTitle,
+                },
               },
-            },
-          };
-        },
-      });
+            };
+          },
+        })
+        .then(
+          (result) => {
+            finishThreadTitleRename(session.titleStates, data.id, claim, true);
+            return result;
+          },
+          (error: unknown) => {
+            finishThreadTitleRename(session.titleStates, data.id, claim, false);
+            throw error;
+          },
+        );
     },
     [requireAdapterGeneration, session, store],
   );
@@ -1104,8 +1146,7 @@ const useRemoteThreadList = (
       }
       await ensureNotMain(data.id);
       requireAdapterGeneration(adapterGeneration);
-      onDelete?.(data.id);
-      return store.optimisticUpdate({
+      const result = await store.optimisticUpdate({
         execute: async () => {
           const { remoteId } = await data.initializeTask;
           requireAdapterGeneration(adapterGeneration);
@@ -1113,6 +1154,13 @@ const useRemoteThreadList = (
         },
         optimistic: (state) => updateStatusReducer(state, data.id, "deleted"),
       });
+      // An adapter swap resets the optimistic layer, and a listed thread's slot
+      // id is its remote id, so a replacement adapter can re-list this slot
+      // while the deletion is in flight.
+      if (getThreadData(store.value, data.id) !== undefined) return result;
+      clearThreadTitleState(session.titleStates, data.id);
+      onDelete?.(data.id);
+      return result;
     },
     [ensureNotMain, onDelete, requireAdapterGeneration, session, store],
   );
@@ -1121,6 +1169,7 @@ const useRemoteThreadList = (
     async (
       threadIdOrRemoteId: string,
       messages: readonly ThreadMessage[] | undefined,
+      options?: { automatic?: boolean },
     ) => {
       const currentAdapter = session.adapter;
       const adapterGeneration = session.adapterGeneration;
@@ -1144,27 +1193,39 @@ const useRemoteThreadList = (
         return;
       }
       if (!messages) return;
-      const stream = await currentAdapter.generateTitle(remoteId, messages);
-      requireAdapterGeneration(adapterGeneration);
-      await applyTitleStream(stream, async (newTitle) => {
-        await store.optimisticUpdate({
-          execute: async () => {},
-          optimistic: (state) => {
-            if (adapterGeneration !== session.adapterGeneration) return state;
-            const current = getThreadData(state, data.id);
-            if (!current) return state;
-            return {
-              ...state,
-              threadData: {
-                ...state.threadData,
-                [current.id]: {
-                  ...current,
-                  title: newTitle,
+      await runThreadTitleGeneration({
+        states: session.titleStates,
+        threadId: data.id,
+        automatic: options?.automatic === true,
+        generate: async (onTitle) => {
+          const stream = await currentAdapter.generateTitle(remoteId, messages);
+          requireAdapterGeneration(adapterGeneration);
+          await applyTitleStream(stream, onTitle);
+        },
+        rename: async (title) => {
+          requireAdapterGeneration(adapterGeneration);
+          await currentAdapter.rename(remoteId, title);
+        },
+        applyTitle: async (title) => {
+          await store.optimisticUpdate({
+            execute: async () => {},
+            optimistic: (state) => {
+              if (adapterGeneration !== session.adapterGeneration) return state;
+              const current = getThreadData(state, data.id);
+              if (!current) return state;
+              return {
+                ...state,
+                threadData: {
+                  ...state.threadData,
+                  [current.id]: {
+                    ...current,
+                    title,
+                  },
                 },
-              },
-            };
-          },
-        });
+              };
+            },
+          });
+        },
       });
     },
     [backgroundThreads, requireAdapterGeneration, session, store],
@@ -1192,7 +1253,8 @@ const useRemoteThreadList = (
       onArchive: (id) => archive(id),
       onUnarchive: (id) => unarchive(id),
       onDelete: (id) => deleteThread(id),
-      onGenerateTitle: (id, messages) => generateTitle(id, messages),
+      onGenerateTitle: (id, messages, options) =>
+        generateTitle(id, messages, options),
       onInitialize: async (id) => toInitializeResult(await initialize(id)),
       onDetach: (id) => detach(id),
     });
@@ -1201,7 +1263,12 @@ const useRemoteThreadList = (
   useEffect(() => {
     if (session.lastNotifiedRemoteId === mainRemoteId) return;
     session.lastNotifiedRemoteId = mainRemoteId;
-    onThreadIdChange?.(mainRemoteId);
+    invokeUserCallback(
+      "assistant-ui",
+      "onThreadIdChange",
+      onThreadIdChange,
+      mainRemoteId,
+    );
   }, [mainRemoteId, onThreadIdChange, session]);
 
   useEffect(() => {
@@ -1230,6 +1297,7 @@ const useRemoteThreadList = (
       mainThreadId,
       newThreadId: listState.newThreadId ?? null,
       isLoading: listState.isLoading,
+      loadError: listState.loadError,
       isLoadingMore: listState.isLoadingMore,
       hasMore: listState.cursor !== undefined,
       threadIds: listState.threadIds,
@@ -1241,6 +1309,7 @@ const useRemoteThreadList = (
       listState.archivedThreadIds,
       listState.cursor,
       listState.isLoading,
+      listState.loadError,
       listState.isLoadingMore,
       listState.newThreadId,
       listState.threadIds,

package/src/react/client/Tools.ts

@@ -21,6 +21,7 @@ import {
 } from "../model-context/toolbox";
 import type { ToolCallMessagePartComponent } from "../types/MessagePartComponentTypes";
 import { ModelContext } from "../../store/clients/model-context-client";
+import { nullProtoRecord } from "../../utils/record";
 
 export type { McpAppResourceOutput };
 
@@ -44,7 +45,9 @@ const useTools = ({
   const mcpAppOutputs = useResources(mcpApp ? [withKey("mcpApp", mcpApp)] : []);
   const mcpAppOutput = mcpAppOutputs[0];
 
-  const [toolUIs, setToolUIs] = useState<ToolsState["toolUIs"]>(() => ({}));
+  const [toolUIs, setToolUIs] = useState<ToolsState["toolUIs"]>(() =>
+    nullProtoRecord(),
+  );
 
   const state = useMemo(
     (): ToolsState => ({
@@ -73,20 +76,25 @@ const useTools = ({
         standalone: options?.standalone ?? false,
       };
 
-      setToolUIs((prev) => ({
-        ...prev,
-        [toolName]: [...(prev[toolName] ?? []), registration],
-      }));
+      setToolUIs((prev) => {
+        const next = nullProtoRecord(prev);
+        next[toolName] = [...(next[toolName] ?? []), registration];
+        return next;
+      });
 
       return () => {
         setToolUIs((prev) => {
-          const next = prev[toolName]?.filter((r) => r !== registration) ?? [];
-          if (next.length > 0) return { ...prev, [toolName]: next };
+          const registrations =
+            prev[toolName]?.filter((r) => r !== registration) ?? [];
+          const next = nullProtoRecord(prev);
+          if (registrations.length > 0) {
+            next[toolName] = registrations;
+            return next;
+          }
           // Drop the key entirely so repeatedly mounted/unmounted tools
           // don't leave empty arrays accumulating across a long session.
-          const rest = { ...prev };
-          delete rest[toolName];
-          return rest;
+          delete next[toolName];
+          return next;
         });
       };
     },
@@ -108,6 +116,9 @@ const useTools = ({
           : undefined);
       if (render) {
         unsubscribes.push(
+          // Registration has to be undone on unmount, so the registry write and
+          // its unsubscribe belong to the same effect.
+          // eslint-disable-next-line react-hooks/set-state-in-effect
           setToolUI(toolName, render, {
             standalone: isStandaloneToolDisplay(tool),
             renderText: toolRenderText,
@@ -141,7 +152,7 @@ const useTools = ({
           acc[name] = rest as Tool<any, any>;
           return acc;
         },
-        {} as Record<string, Tool<any, any>>,
+        nullProtoRecord<Tool<any, any>>(),
       );
 
       const modelContextProvider = {

package/src/react/client/interactable-model-context.test.ts

@@ -241,6 +241,50 @@ describe("buildInteractableModelContext", () => {
       expect(mockGenerateId).toHaveBeenCalledOnce();
     });
 
+    it.each(["__proto__", "toString"])(
+      "mints ids for items in a prototype-named array field %s",
+      async (field) => {
+        const itemSchema = {
+          type: "object" as const,
+          properties: {
+            id: { type: "string" as const },
+            title: { type: "string" as const },
+          },
+          required: ["id", "title"],
+        };
+        const schema = {
+          type: "object" as const,
+          properties: Object.fromEntries([
+            [field, { type: "array" as const, items: itemSchema }],
+          ]),
+        };
+        const state = Object.fromEntries([[field, []]]);
+        const defs = { b1: def("b1", "taskBoard", state) };
+        const { ctx } = build(defs, new Map([["b1", schema]]));
+        const args = Object.fromEntries([
+          ["id", "b1"],
+          [field, { add: [{ title: "Write tests" }] }],
+        ]);
+
+        const result = (await ctx!.tools["update_taskBoard"]!.execute!(
+          args,
+          {} as never,
+        )) as {
+          addedItemIds: Record<string, string[]>;
+        };
+
+        expect(Object.getPrototypeOf(result.addedItemIds)).toBe(
+          Object.prototype,
+        );
+        expect(Object.hasOwn(result.addedItemIds, field)).toBe(true);
+        expect(result.addedItemIds[field]).toEqual(["generated-id"]);
+        expect(Object.hasOwn(defs.b1.state as object, field)).toBe(true);
+        expect((defs.b1.state as Record<string, unknown>)[field]).toEqual([
+          { title: "Write tests", id: "generated-id" },
+        ]);
+      },
+    );
+
     it("rejects an unknown id and lists valid ids", async () => {
       const defs = { n1: def("n1", "note"), n2: def("n2", "note") };
       const { ctx, setDefState } = build(defs);

package/src/react/client/interactable-model-context.ts

@@ -8,6 +8,7 @@ import {
 } from "../../model-context/interactable-composer-metadata";
 import { generateId } from "../../utils/id";
 import { isRecord } from "../../utils/json/is-json";
+import { nullProtoRecord } from "../../utils/record";
 
 export type PartialJSONSchema = ReturnType<typeof toJSONSchema>;
 
@@ -243,7 +244,7 @@ export function buildInteractableModelContext(
         }
         const baseline = streamBaselines.get(toolCallId);
         streamBaselines.delete(toolCallId);
-        const addedItemIds: Record<string, string[]> = {};
+        const addedItemIds = nullProtoRecord<string[]>();
         setDefState(target.id, (prev) =>
           shallowMergeInteractableState(prev, partial, {
             arrayBaseline:
@@ -264,7 +265,7 @@ export function buildInteractableModelContext(
           addedItemIds?: Record<string, string[]>;
         } = { success: true, id: target.id };
         if (Object.keys(addedItemIds).length > 0) {
-          result.addedItemIds = addedItemIds;
+          result.addedItemIds = { ...addedItemIds };
         }
         return result;
       },

package/src/react/index.ts

@@ -217,8 +217,12 @@ export { useExternalStoreSharedOptions } from "./runtimes/useExternalStoreShared
 export {
   useExternalMessageConverter,
   convertExternalMessages,
+  createExternalMessageConversionCache,
+} from "./runtimes/external-message-converter";
+export type {
+  ExternalMessageConversionCache,
+  JoinStrategy,
 } from "./runtimes/external-message-converter";
-export type { JoinStrategy } from "./runtimes/external-message-converter";
 export { createMessageConverter } from "./runtimes/createMessageConverter";
 export {
   useStreamingTiming,