@assistant-ui/react 0.14.28 → 0.15.0

package/src/tests/external-thread-attachments.test.tsx

@@ -2,10 +2,35 @@
 
 import { act, render, waitFor } from "@testing-library/react";
 import type { FC } from "react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { AuiProvider, useAui } from "@assistant-ui/store";
+import type {
+  ExternalThreadMessage,
+  ExternalThreadProps,
+} from "../client/ExternalThread";
 import { ExternalThread } from "../client/ExternalThread";
 
+const renderThreadWithProps = (props: Partial<ExternalThreadProps>) => {
+  const captured: { aui?: ReturnType<typeof useAui> } = {};
+  const Capture: FC = () => {
+    captured.aui = useAui();
+    return null;
+  };
+  const App: FC = () => {
+    const aui = useAui({
+      thread: ExternalThread({ messages: [], isRunning: false, ...props }),
+    });
+    return (
+      <AuiProvider value={aui}>
+        <Capture />
+      </AuiProvider>
+    );
+  };
+
+  render(<App />);
+  return () => captured.aui!;
+};
+
 const renderThread = () => {
   const captured: { aui?: ReturnType<typeof useAui> } = {};
   const Capture: FC = () => {
@@ -49,14 +74,12 @@ describe("ExternalThread attachments", () => {
     }
 
     await waitFor(() => {
-      expect(aui().thread().composer().getState().attachments[0]).toMatchObject(
-        {
-          type: "document",
-          name: "notes.txt",
-          contentType: "text/plain",
-          content: [{ type: "text", text: "hello" }],
-        },
-      );
+      expect(aui().thread.composer().getState().attachments[0]).toMatchObject({
+        type: "document",
+        name: "notes.txt",
+        contentType: "text/plain",
+        content: [{ type: "text", text: "hello" }],
+      });
     });
   });
 
@@ -69,13 +92,279 @@ describe("ExternalThread attachments", () => {
       content: [{ type: "text", text: "implementation detail" }],
     } as File;
 
-    await act(() => aui().thread().composer().addAttachment(foreignFile));
+    await act(() => aui().thread.composer().addAttachment(foreignFile));
 
-    expect(aui().thread().composer().getState().attachments[0]).toMatchObject({
+    expect(aui().thread.composer().getState().attachments[0]).toMatchObject({
       type: "file",
       name: "photo.png",
       contentType: "image/png",
       file: foreignFile,
     });
   });
+
+  it("rejects files that do not match the adapter accept string", async () => {
+    const add = vi.fn(async () => ({}) as never);
+    const aui = renderThreadWithProps({
+      attachmentAdapter: {
+        accept: "image/*",
+        add,
+        send: async () => ({}) as never,
+        remove: async () => {},
+      },
+    });
+
+    await expect(
+      aui()
+        .thread()
+        .composer()
+        .addAttachment(
+          new File(["data"], "archive.zip", { type: "application/zip" }),
+        ),
+    ).rejects.toThrow(
+      "File type application/zip is not accepted. Accepted types: image/*",
+    );
+    expect(add).not.toHaveBeenCalled();
+    expect(aui().thread.composer().getState().attachments).toHaveLength(0);
+  });
+
+  it("rejects prepared attachments that do not match the adapter accept string", async () => {
+    const aui = renderThreadWithProps({
+      attachmentAdapter: {
+        accept: ".pdf",
+        add: async () => ({}) as never,
+        send: async () => ({}) as never,
+        remove: async () => {},
+      },
+    });
+
+    await expect(
+      aui()
+        .thread()
+        .composer()
+        .addAttachment({
+          name: "notes.txt",
+          contentType: "text/plain",
+          content: [{ type: "text", text: "hello" }],
+        }),
+    ).rejects.toThrow(
+      "File type text/plain is not accepted. Accepted types: .pdf",
+    );
+    expect(aui().thread.composer().getState().attachments).toHaveLength(0);
+  });
+
+  it("restores the draft when an attachment upload fails on send", async () => {
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    const sent: unknown[] = [];
+    let rejectSend!: (reason: unknown) => void;
+    const adapter = {
+      accept: "*",
+      add: async ({ file }: { file: File }) => ({
+        id: "att-1",
+        type: "file" as const,
+        name: file.name,
+        contentType: file.type,
+        file,
+        status: {
+          type: "requires-action" as const,
+          reason: "composer-send" as const,
+        },
+      }),
+      send: () =>
+        new Promise((_resolve, reject) => {
+          rejectSend = reject;
+        }) as never,
+      remove: async () => {},
+    };
+
+    const aui = renderThreadWithProps({
+      attachmentAdapter: adapter,
+      onNew: (message) => sent.push(message),
+    });
+
+    await act(() =>
+      aui()
+        .thread()
+        .composer()
+        .addAttachment(new File(["data"], "notes.txt", { type: "text/plain" })),
+    );
+    await act(async () => {
+      aui().thread.composer().setText("hello");
+    });
+    await act(async () => {
+      aui().thread.composer().send();
+    });
+
+    // The draft is cleared optimistically while the upload runs.
+    expect(aui().thread.composer().getState().text).toBe("");
+
+    await act(async () => {
+      rejectSend(new Error("upload failed"));
+    });
+
+    await waitFor(() => {
+      const state = aui().thread.composer().getState();
+      expect(state.text).toBe("hello");
+      expect(state.attachments).toHaveLength(1);
+    });
+    expect(sent).toHaveLength(0);
+    expect(consoleError).toHaveBeenCalledWith(
+      "Failed to send attachments",
+      expect.any(Error),
+    );
+  });
+
+  it.each([
+    [
+      "clearAttachments",
+      (c: { clearAttachments(): Promise<void> }) => c.clearAttachments(),
+    ],
+    ["reset", (c: { reset(): Promise<void> }) => c.reset()],
+  ] as const)(
+    "calls adapter.remove for pending attachments on %s",
+    async (_name, invoke) => {
+      const remove = vi.fn(async () => {});
+      const adapter = {
+        accept: "*",
+        add: async ({ file }: { file: File }) => ({
+          id: "att-1",
+          type: "file" as const,
+          name: file.name,
+          contentType: file.type,
+          file,
+          status: {
+            type: "requires-action" as const,
+            reason: "composer-send" as const,
+          },
+        }),
+        send: async () => ({}) as never,
+        remove,
+      };
+
+      const aui = renderThreadWithProps({ attachmentAdapter: adapter });
+
+      await act(() =>
+        aui()
+          .thread()
+          .composer()
+          .addAttachment(
+            new File(["data"], "notes.txt", { type: "text/plain" }),
+          ),
+      );
+
+      await act(() => invoke(aui().thread.composer()));
+
+      expect(remove).toHaveBeenCalledTimes(1);
+      expect(remove).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "att-1" }),
+      );
+      expect(aui().thread.composer().getState().attachments).toHaveLength(0);
+    },
+  );
+
+  it("routes edit-composer attachments through the adapter", async () => {
+    const add = vi.fn(async ({ file }: { file: File }) => ({
+      id: "att-edit",
+      type: "file" as const,
+      name: file.name,
+      contentType: file.type,
+      file,
+      status: {
+        type: "requires-action" as const,
+        reason: "composer-send" as const,
+      },
+    }));
+    const aui = renderThreadWithProps({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          content: [{ type: "text", text: "hi" }],
+          createdAt: new Date(0),
+          attachments: [],
+          metadata: { custom: {} },
+        } as unknown as ExternalThreadMessage,
+      ],
+      onEdit: () => {},
+      attachmentAdapter: {
+        accept: "*",
+        add,
+        send: async () => ({}) as never,
+        remove: async () => {},
+      },
+    });
+
+    const composer = () => aui().thread.message({ id: "u1" }).composer();
+    await act(async () => {
+      composer().beginEdit();
+    });
+    await act(() =>
+      composer().addAttachment(
+        new File(["data"], "notes.txt", { type: "text/plain" }),
+      ),
+    );
+
+    expect(add).toHaveBeenCalledTimes(1);
+    expect(composer().getState().attachments[0]).toMatchObject({
+      id: "att-edit",
+      name: "notes.txt",
+    });
+  });
+
+  it("merges the failed send into a draft the user already modified", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    let rejectSend!: (reason: unknown) => void;
+    const adapter = {
+      accept: "*",
+      add: async ({ file }: { file: File }) => ({
+        id: "att-1",
+        type: "file" as const,
+        name: file.name,
+        contentType: file.type,
+        file,
+        status: {
+          type: "requires-action" as const,
+          reason: "composer-send" as const,
+        },
+      }),
+      send: () =>
+        new Promise((_resolve, reject) => {
+          rejectSend = reject;
+        }) as never,
+      remove: async () => {},
+    };
+
+    const aui = renderThreadWithProps({
+      attachmentAdapter: adapter,
+      onNew: () => {},
+    });
+
+    await act(() =>
+      aui()
+        .thread()
+        .composer()
+        .addAttachment(new File(["data"], "notes.txt", { type: "text/plain" })),
+    );
+    await act(async () => {
+      aui().thread.composer().setText("hello");
+      aui().thread.composer().send();
+    });
+    await act(async () => {
+      aui().thread.composer().setText("meanwhile");
+    });
+
+    await act(async () => {
+      rejectSend(new Error("upload failed"));
+    });
+
+    const state = aui().thread.composer().getState();
+    expect(state.text).toBe("hello\nmeanwhile");
+    expect(state.attachments).toHaveLength(1);
+    expect(state.attachments[0]).toMatchObject({ id: "att-1" });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
 });

package/src/tests/external-thread-branches.test.tsx

@@ -66,18 +66,18 @@ const adapterFor = (
 describe("ExternalThread branches", () => {
   it("defaults to single-branch state without an adapter", () => {
     const { aui } = renderThread(baseProps());
-    const state = aui().thread().getState();
+    const state = aui().thread.getState();
     expect(state.messages[1]!.branchNumber).toBe(1);
     expect(state.messages[1]!.branchCount).toBe(1);
     expect(state.capabilities.switchToBranch).toBe(false);
     expect(() =>
-      aui().thread().message({ index: 1 }).switchToBranch({ position: "next" }),
+      aui().thread.message({ index: 1 }).switchToBranch({ position: "next" }),
     ).not.toThrow();
   });
 
   it("derives branchNumber and branchCount from the adapter", () => {
     const { aui } = renderThread(baseProps(adapterFor(["a1", "a2", "a3"])));
-    const state = aui().thread().getState();
+    const state = aui().thread.getState();
     expect(state.messages[1]!.branchNumber).toBe(2);
     expect(state.messages[1]!.branchCount).toBe(3);
     expect(state.capabilities.switchToBranch).toBe(true);
@@ -88,7 +88,7 @@ describe("ExternalThread branches", () => {
     const { aui } = renderThread(
       baseProps(adapterFor(["a1", "a2", "a3"], switchToBranch)),
     );
-    const msg = () => aui().thread().message({ index: 1 });
+    const msg = () => aui().thread.message({ index: 1 });
 
     msg().switchToBranch({ position: "previous" });
     expect(switchToBranch).toHaveBeenLastCalledWith("a1");
@@ -101,7 +101,7 @@ describe("ExternalThread branches", () => {
       isRunning: false,
       branches: adapterFor(["a1", "a2"], switchToBranch),
     });
-    edge.aui().thread().message({ index: 1 }).switchToBranch({
+    edge.aui().thread.message({ index: 1 }).switchToBranch({
       position: "previous",
     });
     expect(switchToBranch).not.toHaveBeenCalled();
@@ -112,7 +112,7 @@ describe("ExternalThread branches", () => {
     const { aui } = renderThread(
       baseProps(adapterFor(["a1", "a2"], switchToBranch)),
     );
-    const msg = () => aui().thread().message({ index: 1 });
+    const msg = () => aui().thread.message({ index: 1 });
 
     msg().switchToBranch({ branchId: "not-in-the-list" });
     expect(switchToBranch).toHaveBeenLastCalledWith("not-in-the-list");
@@ -130,11 +130,11 @@ describe("ExternalThread branches", () => {
         switchToBranch,
       }),
     );
-    const state = aui().thread().getState();
+    const state = aui().thread.getState();
     expect(state.messages[1]!.branchNumber).toBe(1);
     expect(state.messages[1]!.branchCount).toBe(1);
 
-    aui().thread().message({ index: 1 }).switchToBranch({ position: "next" });
+    aui().thread.message({ index: 1 }).switchToBranch({ position: "next" });
     expect(switchToBranch).not.toHaveBeenCalled();
   });
 
@@ -145,14 +145,14 @@ describe("ExternalThread branches", () => {
       isRunning: false,
       branches: adapterFor(["a1", "a2", "a3"]),
     });
-    const before = aui().thread().getState().messages[1];
+    const before = aui().thread.getState().messages[1];
 
     rerender({
       messages,
       isRunning: false,
       branches: adapterFor(["a1", "a2", "a3"]),
     });
-    const after = aui().thread().getState().messages[1];
+    const after = aui().thread.getState().messages[1];
 
     expect(after!.branchNumber).toBe(2);
     expect(before!.parts[0]).toBe(after!.parts[0]);

package/src/tests/external-thread-parity.test.tsx

@@ -0,0 +1,230 @@
+// @vitest-environment jsdom
+
+// Legacy-runtime parity: part statuses derive from the message status, and
+// imperative composer call sequences observe writes before React re-renders.
+
+import { render, waitFor } from "@testing-library/react";
+import type { FC } from "react";
+import { describe, it, expect, vi } from "vitest";
+import { useAui, AuiProvider } from "@assistant-ui/store";
+import type { ThreadMessage } from "@assistant-ui/core";
+import {
+  ExternalThread,
+  type ExternalThreadProps,
+  type ExternalThreadMessage,
+} from "../client/ExternalThread";
+
+const renderThread = (props: ExternalThreadProps) => {
+  const captured: { aui?: ReturnType<typeof useAui> } = {};
+  const Capture: FC = () => {
+    captured.aui = useAui();
+    return null;
+  };
+  const App: FC<{ threadProps: ExternalThreadProps }> = ({ threadProps }) => {
+    const aui = useAui({ thread: ExternalThread(threadProps) });
+    return (
+      <AuiProvider value={aui}>
+        <Capture />
+      </AuiProvider>
+    );
+  };
+  const utils = render(<App threadProps={props} />);
+  return {
+    aui: () => captured.aui!,
+    rerender: (next: ExternalThreadProps) =>
+      utils.rerender(<App threadProps={next} />),
+  };
+};
+
+const assistantMessage = (
+  status: ThreadMessage["status"],
+  result?: string,
+): ExternalThreadMessage =>
+  ({
+    id: "a1",
+    role: "assistant",
+    content: [
+      { type: "text", text: "let me check" },
+      {
+        type: "tool-call",
+        toolCallId: "tc1",
+        toolName: "probe_tool",
+        args: {},
+        argsText: "{}",
+        ...(result !== undefined && { result }),
+      },
+    ],
+    createdAt: new Date(0),
+    status,
+    metadata: { custom: {} },
+  }) as unknown as ExternalThreadMessage;
+
+describe("ExternalThread part status", () => {
+  it("gives an unresolved tool call its message's status", () => {
+    const { aui } = renderThread({
+      messages: [assistantMessage({ type: "running" })],
+      isRunning: true,
+    });
+    const part = (toolCallId: string) =>
+      aui().thread.message({ id: "a1" }).part({ toolCallId }).getState();
+    expect(part("tc1").status).toEqual({ type: "running" });
+  });
+
+  it("marks a resolved tool call complete and streams only the last part", () => {
+    const { aui } = renderThread({
+      messages: [assistantMessage({ type: "running" }, "ok")],
+      isRunning: true,
+    });
+    const state = aui().thread.message({ id: "a1" }).getState();
+    expect(state.parts[0]!.status).toEqual({ type: "complete" });
+    expect(state.parts[1]!.status).toEqual({ type: "complete" });
+  });
+
+  it("keeps parts complete on requires-action and user messages", () => {
+    const { aui } = renderThread({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          content: [{ type: "text", text: "hi" }],
+          createdAt: new Date(0),
+          attachments: [],
+          metadata: { custom: {} },
+        } as unknown as ExternalThreadMessage,
+        assistantMessage({ type: "requires-action", reason: "tool-calls" }),
+      ],
+      isRunning: false,
+    });
+    expect(
+      aui().thread.message({ id: "u1" }).part({ index: 0 }).getState().status,
+    ).toEqual({ type: "complete" });
+    expect(
+      aui()
+        .thread()
+        .message({ id: "a1" })
+        .part({ toolCallId: "tc1" })
+        .getState().status,
+    ).toEqual({ type: "requires-action", reason: "tool-calls" });
+    expect(
+      aui().thread.message({ id: "a1" }).part({ index: 0 }).getState().status,
+    ).toEqual({ type: "complete" });
+  });
+});
+
+describe("ExternalThread unset optional callbacks", () => {
+  it("throws a capability error when the callback prop is not set", () => {
+    const { aui } = renderThread({
+      messages: [
+        assistantMessage({ type: "requires-action", reason: "tool-calls" }),
+      ],
+      isRunning: false,
+    });
+    const part = () =>
+      aui().thread.message({ id: "a1" }).part({ toolCallId: "tc1" });
+
+    expect(() => part().addToolResult("ok")).toThrow(
+      "Runtime does not support tool results (onAddToolResult is not set).",
+    );
+    expect(() => part().resumeToolCall(undefined)).toThrow(
+      "Runtime does not support resuming tool calls (onResumeToolCall is not set).",
+    );
+    expect(() => aui().thread.resumeRun()).toThrow(
+      "Runtime does not support resuming runs (onResume is not set).",
+    );
+    expect(() => aui().thread.importExternalState({})).toThrow(
+      "Runtime does not support importing external states (onLoadExternalState is not set).",
+    );
+  });
+});
+
+describe("ExternalThread composer", () => {
+  it("dispatches a synchronous setText + send sequence", async () => {
+    const onNew = vi.fn();
+    const { aui } = renderThread({ messages: [], isRunning: false, onNew });
+
+    aui().thread.composer().setText("hello");
+    aui().thread.composer().send();
+
+    await waitFor(() => expect(onNew).toHaveBeenCalledTimes(1));
+    expect(onNew.mock.calls[0]![0].content).toEqual([
+      { type: "text", text: "hello" },
+    ]);
+    await waitFor(() => expect(aui().thread.getState().composer.text).toBe(""));
+  });
+
+  it("stamps the thread head as parentId on queue-adapter sends", async () => {
+    const enqueue = vi.fn();
+    const { aui } = renderThread({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          content: [{ type: "text", text: "hi" }],
+          createdAt: new Date(0),
+          attachments: [],
+          metadata: { custom: {} },
+        } as unknown as ExternalThreadMessage,
+      ],
+      isRunning: true,
+      queue: {
+        items: [],
+        enqueue,
+        steer: vi.fn(),
+        remove: vi.fn(),
+        clear: vi.fn(),
+      },
+    });
+
+    aui().thread.composer().setText("queued");
+    aui().thread.composer().send();
+
+    await waitFor(() => expect(enqueue).toHaveBeenCalledTimes(1));
+    expect(enqueue.mock.calls[0]![0].parentId).toBe("u1");
+  });
+
+  it("still refuses to send an empty composer synchronously after a send", async () => {
+    const onNew = vi.fn();
+    const { aui } = renderThread({ messages: [], isRunning: false, onNew });
+
+    aui().thread.composer().send();
+    aui().thread.composer().setText("first");
+    aui().thread.composer().send();
+    aui().thread.composer().send();
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(onNew).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("ExternalThread duplicate message ids", () => {
+  const userMessage = (id: string, text: string): ExternalThreadMessage =>
+    ({
+      id,
+      role: "user",
+      content: [{ type: "text", text }],
+      createdAt: new Date(0),
+      metadata: { custom: {} },
+    }) as unknown as ExternalThreadMessage;
+
+  it("warns and keeps the last occurrence instead of throwing on a duplicate id", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const { aui } = renderThread({
+        messages: [
+          userMessage("u1", "hi"),
+          userMessage("dup", "stale"),
+          userMessage("dup", "fresh"),
+        ],
+      });
+
+      const state = aui().thread.getState();
+      expect(state.messages.map((m) => m.id)).toEqual(["u1", "dup"]);
+
+      const dup = aui().thread.message({ id: "dup" }).getState();
+      expect(dup.parts[0]).toMatchObject({ type: "text", text: "fresh" });
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('"dup"'));
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});