@assistant-ui/react 0.14.27 → 0.14.29

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

@@ -0,0 +1,189 @@
+// @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

@@ -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/model-context/makeAssistantVisible.test.tsx

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render } from "@testing-library/react";
+import {
+  forwardRef,
+  useState,
+  type ComponentProps,
+  type ChangeEvent,
+} from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { registerMock, auiMock } = vi.hoisted(() => {
+  const register = vi.fn((_provider: unknown) => () => {});
+  return {
+    registerMock: register,
+    auiMock: {
+      modelContext: () => ({ register }),
+    },
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useAui: () => auiMock,
+}));
+
+import { makeAssistantVisible } from "./makeAssistantVisible";
+
+type EditTool = {
+  execute: (args: { editId: string; value: string }) => Promise<unknown>;
+};
+
+type ModelContextProvider = {
+  getModelContext: () => {
+    tools: {
+      edit: EditTool;
+    };
+  };
+};
+
+const ControlledInput = forwardRef<HTMLInputElement, ComponentProps<"input">>(
+  ({ onChange, ...props }, ref) => {
+    const [value, setValue] = useState("initial");
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+      onChange?.(event);
+    };
+
+    return (
+      <input
+        {...props}
+        ref={ref}
+        value={value}
+        data-react-value={value}
+        onChange={handleChange}
+      />
+    );
+  },
+);
+
+const ControlledTextarea = forwardRef<
+  HTMLTextAreaElement,
+  ComponentProps<"textarea">
+>(({ onChange, ...props }, ref) => {
+  const [value, setValue] = useState("initial");
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    onChange?.(event);
+  };
+
+  return (
+    <textarea
+      {...props}
+      ref={ref}
+      value={value}
+      data-react-value={value}
+      onChange={handleChange}
+    />
+  );
+});
+
+const runEditTool = async (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string,
+) => {
+  const editId = element.dataset.editId;
+  if (editId === undefined) throw new Error("Missing edit id");
+
+  const provider = registerMock.mock.calls[0]![0] as ModelContextProvider;
+  const task = provider.getModelContext().tools.edit.execute({
+    editId,
+    value,
+  });
+  await vi.runAllTimersAsync();
+  await task;
+};
+
+describe("makeAssistantVisible editable components", () => {
+  beforeEach(() => {
+    registerMock.mockClear();
+    vi.stubGlobal("CSS", { escape: (value: string) => value });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  it("updates controlled input state through the edit tool", async () => {
+    const EditableInput = makeAssistantVisible(ControlledInput, {
+      editable: true,
+    });
+    const onChange = vi.fn();
+    const input = render(<EditableInput onChange={onChange} />).getByRole(
+      "textbox",
+    );
+
+    await act(async () => {
+      await runEditTool(input as HTMLInputElement, "updated");
+    });
+
+    expect(input).toHaveProperty("value", "updated");
+    expect(input.getAttribute("data-react-value")).toBe("updated");
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+
+  it("updates controlled textarea state through the edit tool", async () => {
+    const EditableTextarea = makeAssistantVisible(ControlledTextarea, {
+      editable: true,
+    });
+    const onChange = vi.fn();
+    const textarea = render(<EditableTextarea onChange={onChange} />).getByRole(
+      "textbox",
+    );
+
+    await act(async () => {
+      await runEditTool(textarea as HTMLTextAreaElement, "updated");
+    });
+
+    expect(textarea).toHaveProperty("value", "updated");
+    expect(textarea.getAttribute("data-react-value")).toBe("updated");
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+});

package/src/model-context/makeAssistantVisible.tsx

@@ -40,6 +40,23 @@ const click = tool({
   },
 });
 
+const setNativeValue = (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string,
+) => {
+  const prototype =
+    element instanceof HTMLInputElement
+      ? HTMLInputElement.prototype
+      : HTMLTextAreaElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+
+  if (setter) {
+    setter.call(element, value);
+  } else {
+    element.value = value;
+  }
+};
+
 const edit = tool({
   parameters: {
     type: "object",
@@ -57,7 +74,7 @@ const edit = tool({
     const escapedEditId = CSS.escape(editId);
     const el = document.querySelector(`[data-edit-id='${escapedEditId}']`);
     if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-      el.value = value;
+      setNativeValue(el, value);
       el.dispatchEvent(new Event("input", { bubbles: true }));
       el.dispatchEvent(new Event("change", { bubbles: true }));
 

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/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

@@ -31,14 +31,20 @@ const useComposerAddAttachment = ({
 
     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

@@ -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

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