@assistant-ui/core 0.3.18 → 0.3.19

package/src/react/client/RemoteThreadList.test.ts

@@ -118,8 +118,9 @@ const mountList = (
   refetch?: () => Promise<void>,
   onSwitchToThread?: (id: string) => void,
   onDelete?: (id: string) => void,
+  providedOnThreadIdChange?: (id: string | undefined) => void,
 ) => {
-  const onThreadIdChange = vi.fn();
+  const onThreadIdChange = providedOnThreadIdChange ?? vi.fn();
   const handle = createAssistantClient(
     AuiConfig({
       threads: RemoteThreadList({
@@ -1929,4 +1930,43 @@ describe("RemoteThreadList", () => {
     });
     handle.destroy();
   });
+
+  it("keeps a completed switch when onThreadIdChange throws", async () => {
+    const callbackError = new Error("host callback failed");
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const onThreadIdChange = vi.fn(() => {
+      throw callbackError;
+    });
+    const adapter = makeAdapter({
+      list: vi.fn(async () => ({
+        threads: [{ status: "regular" as const, remoteId: "t1", title: "One" }],
+      })),
+    });
+    const { handle } = mountList(
+      adapter,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      onThreadIdChange,
+    );
+    const threads = handle.getClient().threads;
+    try {
+      await threads.getLoadThreadsPromise();
+
+      flushTapSync(() => threads.switchToThread("t1"));
+
+      await vi.waitFor(() => {
+        expect(handle.getClient().threads.getState().mainThreadId).toBe("t1");
+        expect(onThreadIdChange).toHaveBeenCalledExactlyOnceWith("t1");
+        expect(errorSpy).toHaveBeenCalledWith(
+          "[assistant-ui] onThreadIdChange callback threw an error",
+          callbackError,
+        );
+      });
+    } finally {
+      handle.destroy();
+      errorSpy.mockRestore();
+    }
+  });
 });

package/src/react/client/RemoteThreadList.ts

@@ -57,6 +57,7 @@ import {
   startThreadTitleRename,
   type ThreadTitleState,
 } from "../../runtimes/remote-thread-list/title-generation";
+import { invokeUserCallback } from "../../utils/invoke-user-callback";
 
 const RESOLVED_PROMISE = Promise.resolve();
 
@@ -550,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],
   );
@@ -1255,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(() => {

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,

package/src/react/interactables-legacy/useAssistantInteractable.test.tsx

@@ -0,0 +1,132 @@
+// @vitest-environment jsdom
+
+import { cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const unregister = vi.fn();
+  const register = vi.fn(() => unregister);
+  return {
+    register,
+    unregister,
+    aui: { interactables: { register } },
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => mocks.aui,
+}));
+
+import { useAssistantInteractable } from "./useAssistantInteractable";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("useAssistantInteractable", () => {
+  it("refreshes the registration when its JSON schema changes", async () => {
+    const schemaA = {
+      type: "object" as const,
+      properties: { first: { type: "string" } },
+    };
+    const schemaB = {
+      type: "object" as const,
+      properties: { second: { type: "number" } },
+    };
+    const initialA = { first: "one" };
+    const initialB = { second: 2 };
+
+    const hook = renderHook(
+      ({ stateSchema, initialState }) =>
+        useAssistantInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState,
+        }),
+      { initialProps: { stateSchema: schemaA, initialState: initialA } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ stateSchema: schemaB, initialState: initialB });
+
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(2));
+    expect(mocks.unregister).toHaveBeenCalledTimes(1);
+    expect(mocks.register).toHaveBeenLastCalledWith(
+      expect.objectContaining({ stateSchema: schemaB, initialState: initialB }),
+    );
+
+    hook.rerender({
+      stateSchema: {
+        type: "object",
+        properties: { second: { type: "number" } },
+      },
+      initialState: { second: 3 },
+    });
+    expect(mocks.register).toHaveBeenCalledTimes(2);
+  });
+
+  it("stabilizes equivalent rebuilt standard schemas", async () => {
+    const createSchema = (property: string) => ({
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (value: unknown) => ({ value }),
+        toJSONSchema: () => ({
+          type: "object" as const,
+          properties: { [property]: { type: "string" as const } },
+        }),
+      },
+    });
+    const firstSchema = createSchema("value");
+
+    const hook = renderHook(
+      ({ stateSchema }) =>
+        useAssistantInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState: {},
+        }),
+      { initialProps: { stateSchema: firstSchema } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ stateSchema: createSchema("value") });
+    expect(mocks.register).toHaveBeenCalledTimes(1);
+
+    const changedSchema = createSchema("other");
+    hook.rerender({ stateSchema: changedSchema });
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(2));
+    expect(mocks.register).toHaveBeenLastCalledWith(
+      expect.objectContaining({ stateSchema: changedSchema }),
+    );
+  });
+
+  it("keeps unsupported standard schemas from failing during render", async () => {
+    const createSchema = () => ({
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (value: unknown) => ({ value }),
+      },
+    });
+
+    const hook = renderHook(
+      ({ stateSchema }) =>
+        useAssistantInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState: {},
+        }),
+      { initialProps: { stateSchema: createSchema() } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ stateSchema: createSchema() });
+    expect(mocks.register).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,5 +1,6 @@
 import { useEffect, useId, useRef } from "react";
 import { useAui } from "@assistant-ui/store";
+import { useJSONSchemaDependency } from "../utils/useJSONSchemaDependency";
 import type { InteractableStateSchema } from "./scopes";
 
 /**
@@ -38,6 +39,7 @@ export const useAssistantInteractable = (
 
   const stateSchemaRef = useRef(config.stateSchema);
   stateSchemaRef.current = config.stateSchema;
+  const normalizedStateSchema = useJSONSchemaDependency(config.stateSchema);
   const initialStateRef = useRef(config.initialState);
   initialStateRef.current = config.initialState;
 
@@ -50,7 +52,14 @@ export const useAssistantInteractable = (
       initialState: initialStateRef.current,
       selected: config.selected,
     });
-  }, [aui, id, name, config.description, config.selected]);
+  }, [
+    aui,
+    id,
+    name,
+    config.description,
+    normalizedStateSchema,
+    config.selected,
+  ]);
 
   return id;
 };

package/src/react/model-context/useInteractable.test.tsx

@@ -0,0 +1,177 @@
+// @vitest-environment jsdom
+
+import { cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const unregister = vi.fn();
+  const register = vi.fn(() => unregister);
+  return {
+    register,
+    unregister,
+    aui: { unstable_interactables: { register } },
+    state: { optional: { part: undefined }, thread: { messages: [] } },
+    methods: {
+      setState: vi.fn(),
+      isPending: false,
+      error: undefined,
+      flush: vi.fn(async () => undefined),
+    },
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => mocks.aui,
+  useAuiState: (selector: (state: typeof mocks.state) => unknown) =>
+    selector(mocks.state),
+}));
+
+vi.mock("./useInteractableState", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./useInteractableState")>()),
+  unstable_useInteractableState: () => [undefined, mocks.methods],
+}));
+
+import { unstable_useInteractable } from "./useInteractable";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("unstable_useInteractable", () => {
+  it("refreshes the registration when its JSON schema changes", async () => {
+    const schemaA = {
+      type: "object" as const,
+      properties: { first: { type: "string" } },
+    };
+    const schemaB = {
+      type: "object" as const,
+      properties: { second: { type: "number" } },
+    };
+    const initialA = { first: "one" };
+    const initialB = { second: 2 };
+
+    const hook = renderHook(
+      ({ stateSchema, initialState }) =>
+        unstable_useInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState,
+        }),
+      { initialProps: { stateSchema: schemaA, initialState: initialA } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ stateSchema: schemaB, initialState: initialB });
+
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(2));
+    expect(mocks.unregister).toHaveBeenCalledTimes(1);
+    expect(mocks.register).toHaveBeenLastCalledWith(
+      expect.objectContaining({ stateSchema: schemaB, initialState: initialB }),
+    );
+
+    hook.rerender({
+      stateSchema: {
+        type: "object",
+        properties: { second: { type: "number" } },
+      },
+      initialState: { second: 3 },
+    });
+    expect(mocks.register).toHaveBeenCalledTimes(2);
+  });
+
+  it("stabilizes equivalent rebuilt standard schemas", async () => {
+    const createSchema = (property: string) => ({
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (value: unknown) => ({ value }),
+        toJSONSchema: () => ({
+          type: "object" as const,
+          properties: { [property]: { type: "string" as const } },
+        }),
+      },
+    });
+    const firstSchema = createSchema("value");
+
+    const hook = renderHook(
+      ({ stateSchema }) =>
+        unstable_useInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState: {},
+        }),
+      { initialProps: { stateSchema: firstSchema } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ stateSchema: createSchema("value") });
+    expect(mocks.register).toHaveBeenCalledTimes(1);
+
+    const changedSchema = createSchema("other");
+    hook.rerender({ stateSchema: changedSchema });
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(2));
+    expect(mocks.register).toHaveBeenLastCalledWith(
+      expect.objectContaining({ stateSchema: changedSchema }),
+    );
+  });
+
+  it("keeps unsupported standard schemas from failing during render", async () => {
+    const createSchema = () => ({
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (value: unknown) => ({ value }),
+      },
+    });
+
+    const hook = renderHook(
+      ({ stateSchema }) =>
+        unstable_useInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState: {},
+        }),
+      { initialProps: { stateSchema: createSchema() } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ stateSchema: createSchema() });
+    expect(mocks.register).toHaveBeenCalledTimes(1);
+  });
+
+  it("converts a referentially stable schema only once", async () => {
+    const toJSONSchema = vi.fn(() => ({
+      type: "object" as const,
+      properties: { value: { type: "string" as const } },
+    }));
+    const stateSchema = {
+      "~standard": {
+        version: 1 as const,
+        vendor: "test",
+        validate: (value: unknown) => ({ value }),
+        toJSONSchema,
+      },
+    };
+
+    const hook = renderHook(
+      ({ initialState }) =>
+        unstable_useInteractable("panel", {
+          id: "panel-1",
+          description: "A panel",
+          stateSchema,
+          initialState,
+        }),
+      { initialProps: { initialState: { value: "first" } } },
+    );
+    await waitFor(() => expect(mocks.register).toHaveBeenCalledTimes(1));
+
+    hook.rerender({ initialState: { value: "second" } });
+    expect(toJSONSchema).toHaveBeenCalledTimes(1);
+    expect(mocks.register).toHaveBeenCalledTimes(1);
+  });
+});

package/src/react/model-context/useInteractable.ts

@@ -10,6 +10,7 @@ import {
 } from "../../model-context/interactable-composer-metadata";
 import { unstable_useInteractableState as useInteractableState } from "./useInteractableState";
 import { useJSONEqual } from "../utils/useJSONEqual";
+import { useJSONSchemaDependency } from "../utils/useJSONSchemaDependency";
 
 /**
  * The state type described by an interactable's `stateSchema`. Resolves the
@@ -116,6 +117,7 @@ const useInteractable = <TSchema extends Unstable_InteractableStateSchema>(
 
   const stateSchemaRef = useRef(config.stateSchema);
   stateSchemaRef.current = config.stateSchema;
+  const normalizedStateSchema = useJSONSchemaDependency(config.stateSchema);
   const initialStateRef = useRef(config.initialState);
   initialStateRef.current = config.initialState;
 
@@ -138,6 +140,7 @@ const useInteractable = <TSchema extends Unstable_InteractableStateSchema>(
     id,
     name,
     config.description,
+    normalizedStateSchema,
     internalScope,
     config.updateRender,
   ]);

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

@@ -45,7 +45,6 @@ import { useActionBarCopy } from "./useActionBarCopy";
 
 afterEach(() => {
   cleanup();
-  vi.clearAllMocks();
   vi.useRealTimers();
   mocks.currentAui = mocks.aui;
 });

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

@@ -47,7 +47,6 @@ import { useSuggestionTrigger } from "./useSuggestionTrigger";
 
 afterEach(() => {
   cleanup();
-  vi.clearAllMocks();
   mocks.state.thread.isDisabled = false;
   mocks.state.thread.isRunning = false;
   mocks.state.thread.capabilities = { queue: false };

package/src/react/primitives/message/MessageGroupedParts.test.tsx

@@ -0,0 +1,96 @@
+// @vitest-environment jsdom
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "../../../runtime/utils/thread-message-like";
+import { AssistantRuntimeProvider } from "../../AssistantRuntimeProvider";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { useExternalStoreRuntime } from "../../runtimes/useExternalStoreRuntime";
+import { groupPartByType } from "../../utils/groupParts";
+import { MessagePrimitiveGroupedParts } from "./MessageGroupedParts";
+
+type Msg = {
+  id: string;
+  content: readonly {
+    type: "tool-call";
+    toolCallId: string;
+    toolName: string;
+    args: {};
+    result?: { ok: true };
+  }[];
+};
+
+const task = (toolCallId: string, hasResult: boolean) => ({
+  type: "tool-call" as const,
+  toolCallId,
+  toolName: "task",
+  args: {},
+  ...(hasResult ? { result: { ok: true } } : {}),
+});
+
+const convertMessage = (message: Msg): ThreadMessageLike => ({
+  id: message.id,
+  role: "assistant",
+  content: message.content,
+});
+
+afterEach(cleanup);
+
+describe("MessagePrimitive.GroupedParts", () => {
+  it("passes status counts to a tool-name group", () => {
+    let group:
+      | {
+          counts: MessagePrimitiveGroupedParts.GroupCounts;
+          indices: readonly number[];
+        }
+      | undefined;
+
+    const GroupedParts = () => (
+      <MessagePrimitiveGroupedParts
+        groupBy={groupPartByType({
+          "tool-call:task": ["group-subagents"],
+        })}
+      >
+        {({ part, children }) => {
+          if (part.type === "group-subagents") {
+            group = { counts: part.counts, indices: part.indices };
+            return children;
+          }
+          return null;
+        }}
+      </MessagePrimitiveGroupedParts>
+    );
+
+    const App = () => {
+      const runtime = useExternalStoreRuntime<Msg>({
+        messages: [
+          {
+            id: "assistant-1",
+            content: [
+              task("task-1", true),
+              task("task-2", true),
+              task("task-3", false),
+            ],
+          },
+        ],
+        isRunning: true,
+        convertMessage,
+        onNew: async () => {},
+      });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <ThreadPrimitiveMessages components={{ Message: GroupedParts }} />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    render(<App />);
+
+    expect(group?.counts).toEqual({
+      running: 1,
+      complete: 2,
+      incomplete: 0,
+      requiresAction: 0,
+    });
+    expect(group?.indices).toHaveLength(3);
+  });
+});