@assistant-ui/react 0.14.28 → 0.15.0

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.test.tsx

@@ -0,0 +1,185 @@
+// @vitest-environment jsdom
+
+import { act, render, waitFor } from "@testing-library/react";
+import type { FC } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useAui } from "@assistant-ui/store";
+import { AssistantRuntimeProvider } from "../../../context";
+import {
+  useAssistantTransportRuntime,
+  useAssistantTransportSendCommand,
+} from "./useAssistantTransportRuntime";
+import type {
+  AssistantTransportCommand,
+  AssistantTransportOptions,
+  AssistantTransportStateConverter,
+} from "./types";
+
+const converter: AssistantTransportStateConverter<unknown> = (
+  _state,
+  meta,
+) => ({
+  messages: [],
+  isRunning: meta.isSending,
+});
+
+const createMessageCommand = (text: string): AssistantTransportCommand => ({
+  type: "add-message",
+  message: {
+    role: "user",
+    parts: [{ type: "text", text }],
+  },
+  parentId: null,
+  sourceId: null,
+});
+
+const createStreamResponse = () => {
+  let controller!: ReadableStreamDefaultController<Uint8Array>;
+  const stream = new ReadableStream<Uint8Array>({
+    start(c) {
+      controller = c;
+    },
+  });
+  return {
+    response: new Response(stream, { status: 200 }),
+    close: () => controller.close(),
+  };
+};
+
+type StreamResponse = ReturnType<typeof createStreamResponse>;
+
+type RecordedRequest = {
+  url: string;
+  init: RequestInit;
+  body: Record<string, any>;
+};
+
+const installFetch = () => {
+  const requests: RecordedRequest[] = [];
+  const servers: StreamResponse[] = [];
+
+  vi.stubGlobal(
+    "fetch",
+    async (url: RequestInfo | URL, init: RequestInit = {}) => {
+      requests.push({
+        url: String(url),
+        init,
+        body: JSON.parse(init.body as string),
+      });
+      const server = createStreamResponse();
+      servers.push(server);
+      return server.response;
+    },
+  );
+
+  return { requests, servers };
+};
+
+const mountRuntime = (
+  options?: Partial<AssistantTransportOptions<unknown>>,
+) => {
+  const captured: {
+    aui?: ReturnType<typeof useAui>;
+    sendCommand?: (command: AssistantTransportCommand) => void;
+  } = {};
+  const Capture: FC = () => {
+    captured.aui = useAui();
+    captured.sendCommand = useAssistantTransportSendCommand();
+    return null;
+  };
+  const App: FC = () => {
+    const runtime = useAssistantTransportRuntime({
+      initialState: {},
+      api: "https://example.com/api",
+      headers: {},
+      converter,
+      ...options,
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <Capture />
+      </AssistantRuntimeProvider>
+    );
+  };
+  const utils = render(<App />);
+  return {
+    aui: () => captured.aui!,
+    sendCommand: (command: AssistantTransportCommand) =>
+      captured.sendCommand!(command),
+    ...utils,
+  };
+};
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("useAssistantTransportRuntime", () => {
+  it("no-ops a follow-up run that finds an empty queue", async () => {
+    const fetchMock = installFetch();
+    const onError = vi.fn();
+    const { aui, sendCommand } = mountRuntime({ onError });
+    await waitFor(() =>
+      expect(
+        (aui().thread.getState().extras as { sendCommand?: unknown })
+          ?.sendCommand,
+      ).toBeTypeOf("function"),
+    );
+
+    // Two synchronous sends coalesce into one request plus one follow-up run.
+    act(() => {
+      sendCommand(createMessageCommand("a"));
+      sendCommand(createMessageCommand("b"));
+    });
+
+    await waitFor(() => expect(fetchMock.requests).toHaveLength(1));
+    expect(
+      fetchMock.requests[0]!.body["commands"].map((c: any) => c.type),
+    ).toEqual(["add-message", "add-message"]);
+
+    act(() => fetchMock.servers[0]!.close());
+
+    await waitFor(() => expect(aui().thread.getState().isRunning).toBe(false));
+    await act(async () => {});
+    expect(onError).not.toHaveBeenCalled();
+    expect(fetchMock.requests).toHaveLength(1);
+  });
+
+  it("flushes commands enqueued during a resume run in a follow-up run", async () => {
+    const fetchMock = installFetch();
+    const { aui, sendCommand } = mountRuntime({
+      resumeApi: "https://example.com/resume",
+    });
+    await waitFor(() =>
+      expect(
+        (aui().thread.getState().extras as { sendCommand?: unknown })
+          ?.sendCommand,
+      ).toBeTypeOf("function"),
+    );
+
+    act(() => sendCommand(createMessageCommand("a")));
+    await waitFor(() => expect(fetchMock.requests).toHaveLength(1));
+
+    // Both land while the first run is active and coalesce into one follow-up.
+    act(() => {
+      sendCommand(createMessageCommand("b"));
+      aui().thread.resumeRun({ parentId: null });
+    });
+
+    act(() => fetchMock.servers[0]!.close());
+    await waitFor(() => expect(fetchMock.requests).toHaveLength(2));
+    expect(fetchMock.requests[1]!.url).toBe("https://example.com/resume");
+    expect(fetchMock.requests[1]!.body["commands"]).toEqual([]);
+
+    // "b" coalesced into the resume run and must not starve in the queue.
+    act(() => fetchMock.servers[1]!.close());
+    await waitFor(() => expect(fetchMock.requests).toHaveLength(3));
+    expect(fetchMock.requests[2]!.url).toBe("https://example.com/api");
+    expect(fetchMock.requests[2]!.body["commands"]).toEqual([
+      createMessageCommand("b"),
+    ]);
+
+    act(() => fetchMock.servers[2]!.close());
+    await waitFor(() => expect(aui().thread.getState().isRunning).toBe(false));
+  });
+});

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.ts

@@ -96,7 +96,7 @@ export const useAssistantTransportSendCommand = () => {
   const aui = useAui();
 
   return (command: AssistantTransportCommand) => {
-    const extras = aui.thread().getState().extras;
+    const extras = aui.thread.getState().extras;
     const transportExtras = asAssistantTransportExtras(extras);
     transportExtras.sendCommand(command);
   };
@@ -135,8 +135,13 @@ const useAssistantTransportThreadRuntime = <T>(
       resumeFlagRef.current = false;
       setIsReplaying(false);
       const commands: QueuedCommand[] = isResume ? [] : commandQueue.flush();
-      if (commands.length === 0 && !isResume)
-        throw new Error("No commands to send");
+      if (commands.length === 0 && !isResume) return;
+
+      // The flushed batch consumes the parentId; read it alongside the flush
+      // (before any awaits) so a mid-run append keeps its own value. Resume
+      // runs send no commands, so they neither send nor consume it.
+      const parentId = isResume ? undefined : parentIdRef.current;
+      if (!isResume) parentIdRef.current = undefined;
 
       const headers = await createRequestHeaders(options.headers);
       const bodyValue =
@@ -151,8 +156,8 @@ const useAssistantTransportThreadRuntime = <T>(
         system: context.system,
         tools: context.tools ? toToolsJSONSchema(context.tools) : undefined,
         threadId,
-        ...(parentIdRef.current !== undefined && {
-          parentId: parentIdRef.current,
+        ...(parentId !== undefined && {
+          parentId,
         }),
         // nested (new format, aligned with AssistantChatTransport)
         callSettings: context.callSettings,
@@ -232,6 +237,17 @@ const useAssistantTransportThreadRuntime = <T>(
       if (err) {
         throw new Error(err);
       }
+
+      // A successful run confirms delivery even when no state-changing
+      // chunk was observed.
+      if (!markedDelivered) {
+        commandQueue.markDelivered();
+      }
+
+      // commands that coalesced into this resume run must not starve
+      if (isResume && commandQueue.state.queued.length > 0) {
+        runManager.schedule();
+      }
     },
     onFinish: options.onFinish,
     onCancel: () => {

package/src/mcp-apps/McpAppRenderer.tsx

@@ -162,7 +162,7 @@ function InlineRenderer({
       sendMessage: (params) => {
         const text = extractSendMessageText(params);
         if (!text) return { ok: false, reason: "unrecognised params shape" };
-        aui.thread().append({ content: [{ type: "text", text }] });
+        aui.thread.append({ content: [{ type: "text", text }] });
         return { ok: true };
       },
       callTool: (params) =>

package/src/model-context/makeAssistantVisible.test.tsx

@@ -14,7 +14,7 @@ const { registerMock, auiMock } = vi.hoisted(() => {
   return {
     registerMock: register,
     auiMock: {
-      modelContext: () => ({ register }),
+      modelContext: { register },
     },
   };
 });

package/src/model-context/makeAssistantVisible.tsx

@@ -104,7 +104,7 @@ export const makeAssistantVisible = <T extends ComponentType<any>>(
 
       const { clickable, editable } = config ?? {};
       useEffect(() => {
-        return aui.modelContext().register({
+        return aui.modelContext.register({
           getModelContext: () => {
             return {
               tools: {

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -23,7 +23,7 @@ const useActionBarExportMarkdown = ({
   });
 
   const callback = useCallback(async () => {
-    const content = aui.message().getCopyText();
+    const content = aui.message.getCopyText();
     if (!content) return;
 
     if (onExport) {

package/src/primitives/actionBar/useActionBarFloatStatus.ts

@@ -2,11 +2,13 @@
 
 import { useAuiState } from "@assistant-ui/store";
 
-export enum HideAndFloatStatus {
-  Hidden = "hidden",
-  Floating = "floating",
-  Normal = "normal",
-}
+export const HideAndFloatStatus = {
+  Hidden: "hidden",
+  Floating: "floating",
+  Normal: "normal",
+} as const;
+export type HideAndFloatStatus =
+  (typeof HideAndFloatStatus)[keyof typeof HideAndFloatStatus];
 
 export type UseActionBarFloatStatusProps = {
   hideWhenRunning?: boolean | undefined;

package/src/primitives/attachment/AttachmentRemove.ts

@@ -12,7 +12,7 @@ const useAttachmentRemove = () => {
   const aui = useAui();
 
   const handleRemoveAttachment = useCallback(() => {
-    aui.attachment().remove();
+    aui.attachment.remove();
   }, [aui]);
 
   return handleRemoveAttachment;

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.ts

@@ -13,7 +13,7 @@ const useChainOfThoughtAccordionTrigger = () => {
   const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
 
   const callback = useCallback(() => {
-    aui.chainOfThought().setCollapsed(!collapsed);
+    aui.chainOfThought.setCollapsed(!collapsed);
   }, [aui, collapsed]);
 
   return callback;

package/src/primitives/composer/ComposerAddAttachment.test.tsx

@@ -0,0 +1,108 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type * as CoreReact from "@assistant-ui/core/react";
+import type * as AssistantStore from "@assistant-ui/store";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+
+const { addAttachment } = vi.hoisted(() => ({
+  addAttachment: vi.fn<(file: File) => Promise<void>>(),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreReact>();
+  return {
+    ...actual,
+    useComposerAddAttachment: () => ({
+      disabled: false,
+      addAttachment,
+    }),
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof AssistantStore>();
+  return {
+    ...actual,
+    useAui: () => ({
+      composer: {
+        getState: () => ({ attachmentAccept: "*" }),
+      },
+    }),
+  };
+});
+
+describe("ComposerPrimitiveAddAttachment", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    addAttachment.mockReset();
+    vi.spyOn(HTMLInputElement.prototype, "click").mockImplementation(() => {});
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    document.querySelectorAll('input[type="file"]').forEach((input) => {
+      input.remove();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  it("handles rejected file picker attachments and continues processing", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    addAttachment
+      .mockRejectedValueOnce(new Error("unsupported file"))
+      .mockResolvedValueOnce(undefined);
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAddAttachment>
+          Add attachment
+        </ComposerPrimitiveAddAttachment>,
+      );
+    });
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+
+    await act(async () => {
+      button!.click();
+    });
+
+    const input =
+      document.querySelector<HTMLInputElement>('input[type="file"]');
+    expect(input).not.toBeNull();
+
+    const files = [
+      new File(["a"], "unsupported.bin"),
+      new File(["b"], "supported.txt", { type: "text/plain" }),
+    ];
+    Object.defineProperty(input, "files", {
+      configurable: true,
+      value: files,
+    });
+
+    const result = input!.onchange?.call(input, {
+      target: input,
+    } as unknown as Event);
+
+    await expect(Promise.resolve(result)).resolves.toBeUndefined();
+    expect(addAttachment).toHaveBeenCalledTimes(2);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(input!.isConnected).toBe(false);
+  });
+});

package/src/primitives/composer/ComposerAddAttachment.ts

@@ -24,21 +24,27 @@ const useComposerAddAttachment = ({
     input.multiple = multiple;
     input.hidden = true;
 
-    const attachmentAccept = aui.composer().getState().attachmentAccept;
+    const attachmentAccept = aui.composer.getState().attachmentAccept;
     if (attachmentAccept !== "*") {
       input.accept = attachmentAccept;
     }
 
     document.body.appendChild(input);
 
-    input.onchange = (e) => {
+    input.onchange = async (e) => {
       const fileList = (e.target as HTMLInputElement).files;
       if (!fileList) return;
-      for (const file of fileList) {
-        addAttachment(file);
-      }
+
+      const attachmentPromises = Array.from(fileList, async (file) => {
+        try {
+          await addAttachment(file);
+        } catch {
+          // The composer runtime emits composer.attachmentAddError before rejecting.
+        }
+      });
 
       document.body.removeChild(input);
+      await Promise.all(attachmentPromises);
     };
 
     input.oncancel = () => {

package/src/primitives/composer/ComposerAttachmentDropzone.test.tsx

@@ -15,9 +15,9 @@ vi.mock("@assistant-ui/store", async (importOriginal) => {
   return {
     ...actual,
     useAui: () => ({
-      composer: () => ({
+      composer: {
         addAttachment,
-      }),
+      },
     }),
   };
 });
@@ -95,7 +95,7 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
     });
   });
 
-  it("continues processing other files when one attachment fails", async () => {
+  it("continues processing other files when one attachment fails without console.error", async () => {
     const error = new Error("upload failed");
     const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
 
@@ -120,6 +120,7 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
     });
 
     expect(addAttachment).toHaveBeenCalledTimes(3);
-    expect(errorSpy).toHaveBeenCalledWith("Failed to add attachment:", error);
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
   });
 });

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -70,9 +70,10 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
       await Promise.all(
         files.map(async (file) => {
           try {
-            await aui.composer().addAttachment(file);
-          } catch (error) {
-            console.error("Failed to add attachment:", error);
+            await aui.composer.addAttachment(file);
+          } catch {
+            // The composer runtime emits composer.attachmentAddError before rejecting;
+            // the readonly and empty-thread stubs only throw.
           }
         }),
       );

package/src/primitives/composer/ComposerInput.test.tsx

@@ -9,6 +9,7 @@ import { ComposerPrimitiveInput } from "./ComposerInput";
 const setText = vi.fn<(text: string) => void>();
 const setCursorPosition = vi.fn<(pos: number) => void>();
 const sendSpy = vi.fn<(options?: { steer?: boolean }) => void>();
+const addAttachment = vi.fn<(file: File) => Promise<void>>();
 
 const composerState = {
   isEditing: true,
@@ -37,16 +38,16 @@ let pluginRegistry: { getPlugins: () => (typeof plugin)[] } | null = null;
 
 vi.mock("@assistant-ui/store", () => {
   const aui = {
-    composer: () => ({
-      setText,
+    composer: {
+      setText: (text: string) => setText(text),
       getState: () => composerState,
       cancel: () => {},
-      send: sendSpy,
-      addAttachment: async () => {},
-    }),
-    thread: () => ({
+      send: (options?: { steer?: boolean }) => sendSpy(options),
+      addAttachment: (file: File) => addAttachment(file),
+    },
+    thread: {
       getState: () => threadState,
-    }),
+    },
     on: () => () => {},
   };
   type Selector<T> = (s: {
@@ -140,6 +141,16 @@ const fireKeyDown = (
   return event;
 };
 
+const firePaste = (textarea: HTMLTextAreaElement, files: File[]) => {
+  const event = new Event("paste", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "clipboardData", {
+    value: { files },
+    configurable: true,
+  });
+  textarea.dispatchEvent(event);
+  return event;
+};
+
 const setMatchMedia = (matches: boolean) => {
   Object.defineProperty(window, "matchMedia", {
     writable: true,
@@ -169,6 +180,7 @@ describe("ComposerPrimitiveInput", () => {
     setText.mockReset();
     setCursorPosition.mockReset();
     sendSpy.mockReset();
+    addAttachment.mockReset();
     composerState.isEditing = true;
     composerState.text = "";
     composerState.isEmpty = true;
@@ -501,4 +513,89 @@ describe("ComposerPrimitiveInput", () => {
       expect(event.defaultPrevented).toBe(true);
     });
   });
+
+  describe("paste attachments", () => {
+    it("attempts every pasted file and prevents default when attachments are supported", async () => {
+      threadState.capabilities = { queue: false, attachments: true };
+
+      const textarea = await mount();
+
+      let event!: Event;
+      await act(async () => {
+        event = firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+          new File(["b"], "second.txt", { type: "text/plain" }),
+          new File(["c"], "third.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).toHaveBeenCalledTimes(3);
+      expect(addAttachment.mock.calls.map(([file]) => file.name)).toEqual([
+        "first.txt",
+        "second.txt",
+        "third.txt",
+      ]);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("continues processing other files when one attachment fails without console.error", async () => {
+      threadState.capabilities = { queue: false, attachments: true };
+      const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      addAttachment
+        .mockRejectedValueOnce(new Error("upload failed"))
+        .mockResolvedValueOnce(undefined)
+        .mockResolvedValueOnce(undefined);
+
+      const textarea = await mount();
+
+      await act(async () => {
+        firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+          new File(["b"], "second.txt", { type: "text/plain" }),
+          new File(["c"], "third.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).toHaveBeenCalledTimes(3);
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
+    });
+
+    it("does not add attachments on paste when attachments are unsupported", async () => {
+      threadState.capabilities = { queue: false, attachments: false };
+
+      const textarea = await mount();
+
+      let event!: Event;
+      await act(async () => {
+        event = firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("skips attachment handling when addAttachmentOnPaste is false", async () => {
+      threadState.capabilities = { queue: false, attachments: true };
+
+      const textarea = await mount({ addAttachmentOnPaste: false });
+
+      await act(async () => {
+        firePaste(textarea, [
+          new File(["a"], "first.txt", { type: "text/plain" }),
+        ]);
+        await Promise.resolve();
+      });
+
+      expect(addAttachment).not.toHaveBeenCalled();
+    });
+  });
 });