@assistant-ui/core 0.3.20 → 0.3.21

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

@@ -1,10 +1,15 @@
 // @vitest-environment jsdom
 
+import { getEventListeners } from "node:events";
 import { act, render, waitFor } from "@testing-library/react";
-import type { FC } from "react";
+import { Activity, type FC } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { AuiProvider, useAui } from "@assistant-ui/store";
-import { CompositeAttachmentAdapter } from "../adapters/attachment";
+import { AuiConfig, AuiProvider, useAui } from "@assistant-ui/store";
+import { useAssistantClientDestroySignal } from "@assistant-ui/store/internal";
+import {
+  type AttachmentAdapter,
+  CompositeAttachmentAdapter,
+} from "../adapters/attachment";
 import type {
   ExternalThreadMessage,
   ExternalThreadProps,
@@ -75,7 +80,343 @@ const renderThread = () => {
   return () => captured.aui!;
 };
 
+const deferred = () => Promise.withResolvers<void>();
+
+const setupPartialSend = (type: "thread" | "edit" = "thread") => {
+  const successfulUpload = deferred();
+  const failedUpload = deferred();
+  const remove = vi.fn(async () => {});
+  const onNew = vi.fn();
+  const send = vi.fn(async (attachment: PendingAttachment) => {
+    await (attachment.name === "a" ? successfulUpload : failedUpload).promise;
+    return {
+      ...attachment,
+      status: { type: "complete" as const },
+      content: [{ type: "text" as const, text: attachment.name }],
+    };
+  });
+  const aui = renderThreadWithProps({
+    onNew,
+    onEdit: onNew,
+    messages:
+      type === "edit"
+        ? [
+            {
+              id: "u1",
+              role: "user",
+              content: [{ type: "text", text: "original" }],
+              attachments: [],
+              createdAt: new Date(0),
+              metadata: { custom: {} },
+            },
+          ]
+        : [],
+    attachmentAdapter: {
+      accept: "*",
+      add: async ({ file }) => ({
+        id: file.name,
+        type: "file",
+        name: file.name,
+        file,
+        status: { type: "requires-action", reason: "composer-send" },
+      }),
+      remove,
+      send,
+    },
+  });
+  return {
+    aui,
+    composer: () =>
+      type === "edit"
+        ? aui().thread.message({ id: "u1" }).composer()
+        : aui().thread.composer(),
+    successfulUpload,
+    failedUpload,
+    send,
+    remove,
+    onNew,
+  };
+};
+
 describe("ExternalThread attachments", () => {
+  it.each([
+    ["thread", "before"],
+    ["thread", "after"],
+    ["edit", "before"],
+    ["edit", "after"],
+  ] as const)(
+    "%s reuses successful uploads when a sibling fails %s they finish",
+    async (type, order) => {
+      const consoleError = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+      const { composer, successfulUpload, failedUpload, send, remove, onNew } =
+        setupPartialSend(type);
+      await act(async () => {
+        if (type === "edit") composer().beginEdit();
+        await composer().addAttachment(new File(["a"], "a"));
+        await composer().addAttachment(new File(["b"], "b"));
+        composer().setText("hello");
+        composer().send();
+      });
+      if (order === "after") await act(async () => successfulUpload.resolve());
+      await act(async () => failedUpload.reject(new Error("upload failed")));
+      expect(composer().getState().text).toBe(
+        type === "edit" || order === "after" ? "hello" : "",
+      );
+      if (order === "before") {
+        expect(composer().getState().canSend).toBe(false);
+        act(() => composer().send());
+        expect(send).toHaveBeenCalledTimes(2);
+        await act(async () => successfulUpload.resolve());
+      }
+      await waitFor(() => expect(composer().getState().canSend).toBe(true));
+      expect(consoleError).toHaveBeenCalled();
+      send.mockImplementation(async (attachment) => {
+        if (attachment.name === "a") throw new Error("Already consumed");
+        return { ...attachment, status: { type: "complete" }, content: [] };
+      });
+      await act(async () => composer().send());
+
+      expect(send.mock.calls.map(([attachment]) => attachment.name)).toEqual([
+        "a",
+        "b",
+        "b",
+      ]);
+      expect(onNew).toHaveBeenCalledOnce();
+      expect(onNew.mock.calls[0]![0]).toMatchObject({
+        content: [{ type: "text", text: "hello" }],
+        attachments: [
+          {
+            id: "a",
+            status: { type: "complete" },
+            content: [{ type: "text", text: "a" }],
+          },
+          { id: "b", status: { type: "complete" } },
+        ],
+      });
+      expect(composer().getState().attachments).toEqual(
+        type === "thread"
+          ? []
+          : expect.arrayContaining([
+              expect.objectContaining({ id: "a" }),
+              expect.objectContaining({ id: "b" }),
+            ]),
+      );
+      expect(remove).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each(["remove", "clearAttachments", "reset"] as const)(
+    "keeps retained uploads removable after failure with %s",
+    async (action) => {
+      vi.spyOn(console, "error").mockImplementation(() => {});
+      const { composer, successfulUpload, failedUpload, remove, onNew } =
+        setupPartialSend();
+      await act(async () => {
+        await composer().addAttachment(new File(["a"], "a"));
+        await composer().addAttachment(new File(["b"], "b"));
+        composer().send();
+        successfulUpload.resolve();
+        failedUpload.reject(new Error("upload failed"));
+      });
+      await waitFor(() => expect(composer().getState().canSend).toBe(true));
+      await act(async () => {
+        if (action === "remove")
+          await composer().attachment({ id: "a" }).remove();
+        else await composer()[action]();
+      });
+      expect(remove).toHaveBeenCalledWith(expect.objectContaining({ id: "a" }));
+      expect(onNew).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each(["before", "after"])(
+    "reuses a retained upload when a sibling fails %s it finishes and removal fails",
+    async (order) => {
+      vi.spyOn(console, "error").mockImplementation(() => {});
+      const { composer, successfulUpload, failedUpload, send, remove, onNew } =
+        setupPartialSend();
+      remove.mockRejectedValue(new Error("remove failed"));
+      await act(async () => {
+        await composer().addAttachment(new File(["a"], "a"));
+        await composer().addAttachment(new File(["b"], "b"));
+        composer().send();
+        if (order === "after") successfulUpload.resolve();
+        failedUpload.reject(new Error("upload failed"));
+      });
+      if (order === "before") {
+        await act(async () => successfulUpload.resolve());
+      }
+      await waitFor(() => expect(composer().getState().canSend).toBe(true));
+      await act(async () => {
+        await expect(
+          composer().attachment({ id: "a" }).remove(),
+        ).rejects.toThrow("remove failed");
+      });
+      send.mockImplementation(async (attachment) => {
+        if (attachment.name === "a") throw new Error("Already consumed");
+        return { ...attachment, status: { type: "complete" }, content: [] };
+      });
+      await act(async () => composer().send());
+      expect(send.mock.calls.map(([attachment]) => attachment.name)).toEqual([
+        "a",
+        "b",
+        "b",
+      ]);
+      expect(onNew).toHaveBeenCalledOnce();
+      expect(onNew.mock.calls[0]![0].attachments).toHaveLength(2);
+    },
+  );
+
+  it("does not dispatch an attachment whose removal is still pending", async () => {
+    const removal = deferred();
+    const { composer, successfulUpload, failedUpload, remove, onNew } =
+      setupPartialSend();
+    remove.mockReturnValue(removal.promise);
+    await act(async () => {
+      await composer().addAttachment(new File(["a"], "a"));
+      await composer().addAttachment(new File(["b"], "b"));
+      composer().send();
+    });
+    let removing!: Promise<void>;
+    await act(async () => {
+      removing = composer().attachment({ id: "a" }).remove();
+      successfulUpload.resolve();
+      failedUpload.resolve();
+    });
+    expect(onNew).toHaveBeenCalledOnce();
+    expect(onNew.mock.calls[0]![0].attachments).toMatchObject([{ id: "b" }]);
+    await act(async () => {
+      removal.resolve();
+      await removing;
+    });
+  });
+
+  it("renders in-flight submission attachments as a thread message", async () => {
+    const { aui, composer, successfulUpload, failedUpload, onNew } =
+      setupPartialSend();
+    await act(async () => {
+      await composer().addAttachment(new File(["a"], "a"));
+      await composer().addAttachment(new File(["b"], "b"));
+      composer().setText("hello");
+      composer().send();
+    });
+    expect(aui().thread().getState().messages).toMatchObject([
+      {
+        attachments: [],
+        content: [{ type: "text", text: "hello" }],
+        submission: {
+          text: "hello",
+          attachments: [{ id: "a" }, { id: "b" }],
+        },
+      },
+    ]);
+    expect(
+      aui().thread().message({ index: 0 }).attachment({ id: "a" }).getState(),
+    ).toMatchObject({ id: "a" });
+    await act(async () => {
+      successfulUpload.resolve();
+      failedUpload.resolve();
+    });
+    expect(onNew).toHaveBeenCalledOnce();
+    expect(onNew.mock.calls[0]![0].attachments).toMatchObject([
+      { id: "a" },
+      { id: "b" },
+    ]);
+  });
+
+  it("does not dispatch an attachment whose removal was pending when send started", async () => {
+    const removal = deferred();
+    const { composer, successfulUpload, failedUpload, send, remove, onNew } =
+      setupPartialSend();
+    remove.mockReturnValue(removal.promise);
+    await act(async () => {
+      await composer().addAttachment(new File(["a"], "a"));
+      await composer().addAttachment(new File(["b"], "b"));
+    });
+    let removing!: Promise<void>;
+    await act(async () => {
+      removing = composer().attachment({ id: "a" }).remove();
+    });
+    await act(async () => {
+      composer().send();
+      successfulUpload.resolve();
+      failedUpload.resolve();
+    });
+    expect(send.mock.calls.map(([attachment]) => attachment.name)).toEqual([
+      "b",
+    ]);
+    expect(onNew).toHaveBeenCalledOnce();
+    expect(onNew.mock.calls[0]![0].attachments).toMatchObject([{ id: "b" }]);
+    await act(async () => {
+      removal.resolve();
+      await removing;
+    });
+    expect(composer().getState().attachments).toEqual([]);
+  });
+
+  it.each(["reset", "cancel"] as const)(
+    "does not dispatch an old edit or unlock a newer send after %s",
+    async (action) => {
+      const { composer, successfulUpload, failedUpload, send, onNew } =
+        setupPartialSend("edit");
+      await act(async () => {
+        composer().beginEdit();
+        await composer().addAttachment(new File(["a"], "a"));
+        composer().send();
+        await composer()[action]();
+        if (action === "cancel") composer().beginEdit();
+        await composer().addAttachment(new File(["b"], "b"));
+        composer().send();
+        successfulUpload.resolve();
+      });
+      expect(composer().getState().canSend).toBe(false);
+      expect(onNew).not.toHaveBeenCalled();
+      expect(send).toHaveBeenCalledTimes(2);
+      await act(async () => failedUpload.resolve());
+      expect(onNew).toHaveBeenCalledOnce();
+      expect(onNew.mock.calls[0]![0].attachments).toMatchObject([{ id: "b" }]);
+    },
+  );
+
+  it.each(["clearAttachments", "reset"] as const)(
+    "handles an attachment replaced with the same ID after %s",
+    async (action) => {
+      vi.spyOn(console, "error").mockImplementation(() => {});
+      const { composer, successfulUpload, failedUpload, send, onNew } =
+        setupPartialSend();
+      await act(async () => {
+        await composer().addAttachment(new File(["old"], "a"));
+        await composer().addAttachment(new File(["b"], "b"));
+        composer().send();
+        failedUpload.reject(new Error("upload failed"));
+      });
+      await act(async () => {
+        await composer()[action]();
+        await composer().addAttachment(new File(["replacement"], "a"));
+        successfulUpload.resolve();
+      });
+      await waitFor(() => expect(composer().getState().canSend).toBe(true));
+      if (action === "clearAttachments") {
+        send.mockImplementation(async (attachment) => {
+          if (attachment.name === "a") throw new Error("Already consumed");
+          return { ...attachment, status: { type: "complete" }, content: [] };
+        });
+      }
+      await act(async () => composer().send());
+      expect(send.mock.calls.map(([attachment]) => attachment.name)).toEqual([
+        "a",
+        "b",
+        action === "clearAttachments" ? "b" : "a",
+      ]);
+      expect(onNew).toHaveBeenCalledOnce();
+      expect(onNew.mock.calls[0]![0].attachments).toHaveLength(
+        action === "clearAttachments" ? 2 : 1,
+      );
+    },
+  );
+
   describe.each(["clearAttachments", "reset"] as const)(
     "%s cleanup",
     (method) => {
@@ -678,6 +1019,77 @@ describe("ExternalThread attachments", () => {
     expect(drainedAfterSend).not.toHaveBeenCalled();
   });
 
+  it("waits for an attachment still uploading in add() before sending it", async () => {
+    let finishUpload!: () => void;
+    const onNew = vi.fn();
+    const file = new File(["data"], "notes.txt", { type: "text/plain" });
+    const attachment = {
+      id: "att-1",
+      type: "file",
+      name: file.name,
+      contentType: file.type,
+      file,
+    };
+    const send = vi.fn(async (pending: PendingAttachment) => ({
+      ...pending,
+      status: { type: "complete" as const },
+      content: [],
+    }));
+    const aui = renderThreadWithProps({
+      attachmentAdapter: {
+        accept: "*",
+        async *add() {
+          yield {
+            ...attachment,
+            status: { type: "running", reason: "uploading", progress: 0 },
+          } satisfies PendingAttachment;
+          await new Promise<void>((resolve) => {
+            finishUpload = resolve;
+          });
+          yield {
+            ...attachment,
+            status: { type: "requires-action", reason: "composer-send" },
+          } satisfies PendingAttachment;
+        },
+        send,
+        remove: async () => {},
+      },
+      onNew,
+    });
+    const composer = () => aui().thread.composer();
+
+    let adding!: Promise<void>;
+    act(() => {
+      adding = composer().addAttachment(file);
+    });
+    await waitFor(() =>
+      expect(composer().getState().attachments[0]?.status.type).toBe("running"),
+    );
+
+    await act(async () => {
+      composer().setText("hello");
+      composer().send();
+    });
+    expect(send).not.toHaveBeenCalled();
+    expect(onNew).not.toHaveBeenCalled();
+
+    await act(async () => {
+      finishUpload();
+      await adding;
+    });
+    await waitFor(() => expect(onNew).toHaveBeenCalledTimes(1));
+
+    expect(send.mock.calls[0]![0].status).toEqual({
+      type: "requires-action",
+      reason: "composer-send",
+    });
+    expect(onNew.mock.calls[0]![0]).toMatchObject({
+      content: [{ type: "text", text: "hello" }],
+      attachments: [{ id: "att-1", status: { type: "complete" } }],
+    });
+    expect(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",
@@ -876,6 +1288,45 @@ describe("ExternalThread attachments", () => {
 });
 
 describe("cancelled edit sessions", () => {
+  it("sends a prefilled attachment again after cancelling its removal in an earlier edit", async () => {
+    const attachment: CompleteAttachment = {
+      id: "saved",
+      type: "file",
+      name: "saved.txt",
+      content: [],
+      status: { type: "complete" },
+    };
+    const onEdit = vi.fn();
+    const send = vi.fn();
+    const aui = renderThreadWithProps({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          createdAt: new Date(0),
+          content: [{ type: "text", text: "hello" }],
+          attachments: [attachment],
+          metadata: { custom: {} },
+        },
+      ],
+      onEdit,
+      attachmentAdapter: { accept: "*", add: vi.fn(), send, remove: vi.fn() },
+    });
+    const composer = () => aui().thread.message({ id: "u1" }).composer();
+    await act(async () => {
+      composer().beginEdit();
+    });
+    await act(async () => {
+      await composer().attachment({ id: "saved" }).remove();
+      composer().cancel();
+      composer().beginEdit();
+      composer().send();
+    });
+    expect(onEdit).toHaveBeenCalledOnce();
+    expect(onEdit.mock.calls[0]![0].attachments).toEqual([attachment]);
+    expect(send).not.toHaveBeenCalled();
+  });
+
   const editSetup = (
     add: (arg: { file: File }) => Promise<PendingAttachment>,
   ) =>
@@ -1046,3 +1497,290 @@ describe("cancelled edit sessions", () => {
     ]);
   });
 });
+
+describe("attachment sends and the client lifetime", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const userMessage: ExternalThreadMessage = {
+    id: "u1",
+    role: "user",
+    content: [{ type: "text", text: "original" }],
+    attachments: [],
+    createdAt: new Date(0),
+    metadata: { custom: {} },
+  };
+
+  const renderOwnedThread = (props: Partial<ExternalThreadProps>) => {
+    const captured: {
+      aui?: ReturnType<typeof useAui>;
+      destroySignal?: AbortSignal | undefined;
+    } = {};
+    const Capture: FC = () => {
+      captured.aui = useAui();
+      captured.destroySignal = useAssistantClientDestroySignal();
+      return null;
+    };
+    const Chat: FC = () => (
+      <AuiProvider
+        config={AuiConfig({
+          thread: ExternalThread({ messages: [], isRunning: false, ...props }),
+        })}
+      >
+        <Capture />
+      </AuiProvider>
+    );
+    const App: FC<{ hidden: boolean }> = ({ hidden }) => (
+      <Activity mode={hidden ? "hidden" : "visible"}>
+        <Chat />
+      </Activity>
+    );
+    const view = render(<App hidden={false} />);
+    return {
+      aui: () => captured.aui!,
+      destroyListeners: () =>
+        getEventListeners(captured.destroySignal!, "abort").length,
+      hide: () => act(async () => view.rerender(<App hidden />)),
+      reveal: () => act(async () => view.rerender(<App hidden={false} />)),
+      destroy: async () => {
+        view.unmount();
+        // The owner's destroy signal aborts in a microtask after the unmount.
+        await act(async () => {});
+      },
+    };
+  };
+
+  const slowAdapter = ({ honorsAbort = false } = {}) => {
+    const upload = deferred();
+    const signals: (AbortSignal | undefined)[] = [];
+    const send = vi.fn(
+      (attachment: PendingAttachment, options?: { signal?: AbortSignal }) =>
+        new Promise<CompleteAttachment>((resolve, reject) => {
+          const signal = options?.signal;
+          signals.push(signal);
+          if (honorsAbort)
+            signal?.addEventListener("abort", () => reject(signal.reason));
+          void upload.promise.then(() =>
+            resolve({
+              ...attachment,
+              status: { type: "complete" },
+              content: [],
+            }),
+          );
+        }),
+    );
+    const adapter: AttachmentAdapter = {
+      accept: "*",
+      add: async ({ file }) => ({
+        id: file.name,
+        type: "file",
+        name: file.name,
+        file,
+        status: { type: "requires-action", reason: "composer-send" },
+      }),
+      remove: async () => {},
+      send,
+    };
+    return { adapter, upload, send, signals };
+  };
+
+  it.each([
+    ["thread", "rejects on abort"],
+    ["thread", "ignores the abort"],
+    ["edit", "rejects on abort"],
+    ["edit", "ignores the abort"],
+  ] as const)(
+    "aborts the %s composer's send and never dispatches it once the client is destroyed, when the adapter %s",
+    async (type, behavior) => {
+      const consoleError = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+      const { adapter, upload, send, signals } = slowAdapter({
+        honorsAbort: behavior === "rejects on abort",
+      });
+      const onNew = vi.fn();
+      const onEdit = vi.fn();
+      const thread = renderOwnedThread({
+        messages: type === "edit" ? [userMessage] : [],
+        onNew,
+        onEdit,
+        attachmentAdapter: adapter,
+      });
+      const composer = () =>
+        type === "edit"
+          ? thread.aui().thread.message({ id: "u1" }).composer()
+          : thread.aui().thread.composer();
+      await act(async () => {
+        if (type === "edit") composer().beginEdit();
+        await composer().addAttachment(new File(["a"], "a"));
+        composer().setText("hello");
+        composer().send();
+      });
+      expect(send).toHaveBeenCalledOnce();
+      expect(signals[0]?.aborted).toBe(false);
+
+      await thread.destroy();
+      expect(signals[0]?.aborted).toBe(true);
+      await act(async () => upload.resolve());
+
+      expect(onNew).not.toHaveBeenCalled();
+      expect(onEdit).not.toHaveBeenCalled();
+      expect(consoleError).not.toHaveBeenCalled();
+    },
+  );
+
+  it("finishes a send while the client is hidden", async () => {
+    const { adapter, upload, signals } = slowAdapter();
+    const onNew = vi.fn();
+    const thread = renderOwnedThread({ onNew, attachmentAdapter: adapter });
+    const composer = () => thread.aui().thread.composer();
+    await act(async () => {
+      await composer().addAttachment(new File(["a"], "a"));
+      composer().setText("hello");
+      composer().send();
+    });
+
+    await thread.hide();
+    await act(async () => upload.resolve());
+    expect(onNew).toHaveBeenCalledOnce();
+    expect(signals[0]?.aborted).toBe(false);
+
+    await thread.reveal();
+    expect(onNew).toHaveBeenCalledOnce();
+    expect(composer().getState().submission).toBeUndefined();
+  });
+
+  it("never calls send for an upload that finishes after the client is destroyed", async () => {
+    const finishUpload = deferred();
+    const onNew = vi.fn();
+    const send = vi.fn();
+    const file = new File(["data"], "notes.txt", { type: "text/plain" });
+    const attachment = { id: "att-1", type: "file", name: file.name, file };
+    const thread = renderOwnedThread({
+      onNew,
+      attachmentAdapter: {
+        accept: "*",
+        async *add() {
+          yield {
+            ...attachment,
+            status: { type: "running", reason: "uploading", progress: 0 },
+          } satisfies PendingAttachment;
+          await finishUpload.promise;
+          yield {
+            ...attachment,
+            status: { type: "requires-action", reason: "composer-send" },
+          } satisfies PendingAttachment;
+        },
+        send,
+        remove: async () => {},
+      },
+    });
+    const composer = () => thread.aui().thread.composer();
+    let adding!: Promise<void>;
+    act(() => {
+      adding = composer().addAttachment(file);
+    });
+    await waitFor(() =>
+      expect(composer().getState().attachments[0]?.status.type).toBe("running"),
+    );
+    await act(async () => {
+      composer().send();
+    });
+
+    await thread.destroy();
+    await act(async () => {
+      finishUpload.resolve();
+      await adding;
+    });
+
+    expect(send).not.toHaveBeenCalled();
+    expect(onNew).not.toHaveBeenCalled();
+  });
+
+  it("leaves a finished send's signal alone when the client is destroyed later", async () => {
+    const { adapter, upload, signals } = slowAdapter();
+    const onNew = vi.fn();
+    const thread = renderOwnedThread({ onNew, attachmentAdapter: adapter });
+    const composer = () => thread.aui().thread.composer();
+    const listeners = thread.destroyListeners();
+    await act(async () => {
+      await composer().addAttachment(new File(["a"], "a"));
+      composer().send();
+    });
+    await act(async () => upload.resolve());
+    expect(onNew).toHaveBeenCalledOnce();
+    expect(thread.destroyListeners()).toBe(listeners);
+
+    await thread.destroy();
+    expect(signals[0]?.aborted).toBe(false);
+  });
+
+  it("never calls the adapter for a send made after the client is destroyed", async () => {
+    const { adapter, send } = slowAdapter();
+    const onNew = vi.fn();
+    const thread = renderOwnedThread({ onNew, attachmentAdapter: adapter });
+    const composer = () => thread.aui().thread.composer();
+    await act(async () => {
+      await composer().addAttachment(new File(["a"], "a"));
+      composer().setText("hello");
+    });
+
+    await thread.destroy();
+    await act(async () => composer().send());
+
+    expect(send).not.toHaveBeenCalled();
+    expect(onNew).not.toHaveBeenCalled();
+  });
+
+  it.each(["the adapter's send", "an upload in add()"] as const)(
+    "releases the destroy signal when a send stalled on %s is cancelled",
+    async (stall) => {
+      const { adapter } = slowAdapter();
+      const file = new File(["a"], "a");
+      const thread = renderOwnedThread({
+        attachmentAdapter:
+          stall === "the adapter's send"
+            ? adapter
+            : {
+                ...adapter,
+                async *add() {
+                  yield {
+                    id: file.name,
+                    type: "file",
+                    name: file.name,
+                    file,
+                    status: {
+                      type: "running",
+                      reason: "uploading",
+                      progress: 0,
+                    },
+                  } satisfies PendingAttachment;
+                  await new Promise<never>(() => {});
+                },
+              },
+      });
+      const composer = () => thread.aui().thread.composer();
+      const listeners = thread.destroyListeners();
+      act(() => {
+        void composer().addAttachment(file);
+      });
+      await waitFor(() =>
+        expect(composer().getState().attachments).toHaveLength(1),
+      );
+
+      for (let round = 0; round < 3; round++) {
+        await act(async () => {
+          composer().setText("hello");
+          composer().send();
+        });
+        expect(composer().getState().submission).toBeDefined();
+        expect(thread.destroyListeners()).toBe(listeners + 1);
+        await act(async () => composer().cancel());
+      }
+
+      expect(composer().getState().submission).toBeUndefined();
+      expect(thread.destroyListeners()).toBe(listeners);
+    },
+  );
+});