@assistant-ui/react 0.15.20 → 0.15.22

package/src/primitives/actionBar/ActionBarExportMarkdown.test.tsx

@@ -41,6 +41,36 @@ describe("ActionBarPrimitiveExportMarkdown", () => {
     vi.restoreAllMocks();
   });
 
+  it("clicks a download anchor that is attached to the document", async () => {
+    const createObjectURL = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:export");
+    vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
+    const connectedAtClick: boolean[] = [];
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
+      this: HTMLAnchorElement,
+    ) {
+      connectedAtClick.push(this.isConnected);
+    });
+
+    await act(async () => {
+      root.render(
+        <ActionBarPrimitiveExportMarkdown filename="message.md">
+          Export
+        </ActionBarPrimitiveExportMarkdown>,
+      );
+    });
+
+    await act(async () => {
+      container.querySelector("button")!.click();
+    });
+
+    expect(createObjectURL).toHaveBeenCalled();
+    // Firefox ignores a programmatic click on a detached anchor.
+    expect(connectedAtClick).toEqual([true]);
+    expect(document.querySelector('a[download="message.md"]')).toBeNull();
+  });
+
   it("handles rejected asynchronous exports", async () => {
     const error = new Error("remote save failed");
     const onExport = vi.fn().mockRejectedValue(error);

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -36,7 +36,11 @@ const useActionBarExportMarkdown = ({
     const a = document.createElement("a");
     a.href = url;
     a.download = filename ?? `message-${Date.now()}.md`;
+    a.rel = "noopener";
+    // Firefox starts a download only for an anchor that is in the document.
+    document.body.appendChild(a);
     a.click();
+    document.body.removeChild(a);
     setTimeout(() => URL.revokeObjectURL(url), 40_000);
   }, [aui, filename, onExport]);
 

package/src/primitives/actionBar/ActionBarFeedback.test.tsx

@@ -0,0 +1,87 @@
+/** @vitest-environment jsdom */
+import { render } from "@testing-library/react";
+import type * as CoreReact from "@assistant-ui/core/react";
+import type * as AssistantStore from "@assistant-ui/store";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ActionBarPrimitiveFeedbackNegative } from "./ActionBarFeedbackNegative";
+import { ActionBarPrimitiveFeedbackPositive } from "./ActionBarFeedbackPositive";
+
+const { storeState } = vi.hoisted(() => ({
+  storeState: {
+    message: {
+      metadata: {
+        submittedFeedback: undefined as
+          | { type: "positive" | "negative" }
+          | undefined,
+      },
+    },
+  },
+}));
+
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof CoreReact>();
+  return {
+    ...actual,
+    useActionBarFeedbackPositive: () => ({ submit: vi.fn() }),
+    useActionBarFeedbackNegative: () => ({ submit: vi.fn() }),
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof AssistantStore>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (state: typeof storeState) => T) =>
+      selector(storeState),
+  };
+});
+
+afterEach(() => {
+  storeState.message.metadata.submittedFeedback = undefined;
+});
+
+describe("ActionBar feedback primitives", () => {
+  it.each([
+    [undefined, "false", "false"],
+    [{ type: "positive" as const }, "true", "false"],
+    [{ type: "negative" as const }, "false", "true"],
+  ])(
+    "exposes the submitted state for %s",
+    (submittedFeedback, positivePressed, negativePressed) => {
+      storeState.message.metadata.submittedFeedback = submittedFeedback;
+
+      const { container } = render(
+        <>
+          <ActionBarPrimitiveFeedbackPositive aria-label="Helpful" />
+          <ActionBarPrimitiveFeedbackNegative aria-label="Not helpful" />
+        </>,
+      );
+
+      const [positive, negative] = Array.from(
+        container.querySelectorAll("button"),
+      );
+      expect(positive?.getAttribute("aria-pressed")).toBe(positivePressed);
+      expect(negative?.getAttribute("aria-pressed")).toBe(negativePressed);
+      expect(positive?.hasAttribute("data-submitted")).toBe(
+        positivePressed === "true",
+      );
+      expect(negative?.hasAttribute("data-submitted")).toBe(
+        negativePressed === "true",
+      );
+    },
+  );
+
+  it("forwards the submitted state through asChild", () => {
+    storeState.message.metadata.submittedFeedback = { type: "positive" };
+
+    const { container } = render(
+      <ActionBarPrimitiveFeedbackPositive asChild>
+        <button type="button">Helpful</button>
+      </ActionBarPrimitiveFeedbackPositive>,
+    );
+
+    expect(
+      container.querySelector("button")?.getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+});

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -28,6 +28,7 @@ export const ActionBarPrimitiveFeedbackNegative = forwardRef<
   return (
     <Primitive.button
       type="button"
+      aria-pressed={isSubmitted}
       {...(isSubmitted ? { "data-submitted": "true" } : {})}
       {...props}
       ref={forwardedRef}

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -28,6 +28,7 @@ export const ActionBarPrimitiveFeedbackPositive = forwardRef<
   return (
     <Primitive.button
       type="button"
+      aria-pressed={isSubmitted}
       {...(isSubmitted ? { "data-submitted": "true" } : {})}
       {...props}
       ref={forwardedRef}

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

@@ -78,14 +78,16 @@ describe("ComposerPrimitiveAddAttachment", () => {
 
     const button = container.querySelector("button");
     expect(button).not.toBeNull();
+    if (!button) throw new Error("Attachment button was not rendered");
 
     await act(async () => {
-      button!.click();
+      button.click();
     });
 
     const input =
       document.querySelector<HTMLInputElement>('input[type="file"]');
     expect(input).not.toBeNull();
+    if (!input) throw new Error("File input was not rendered");
 
     const files = [
       new File(["a"], "unsupported.bin"),
@@ -96,13 +98,13 @@ describe("ComposerPrimitiveAddAttachment", () => {
       value: files,
     });
 
-    const result = input!.onchange?.call(input, {
-      target: input,
-    } as unknown as Event);
+    const event = new Event("change");
+    Object.defineProperty(event, "target", { value: input });
+    const result = input.onchange?.call(input, event);
 
     await expect(Promise.resolve(result)).resolves.toBeUndefined();
     expect(addAttachment).toHaveBeenCalledTimes(2);
     expect(errorSpy).not.toHaveBeenCalled();
-    expect(input!.isConnected).toBe(false);
+    expect(input.isConnected).toBe(false);
   });
 });

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

@@ -196,6 +196,60 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
     expect(event.defaultPrevented).toBe(true);
   });
 
+  it("clears the drag highlight when disabled during a drag", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    await act(async () => {
+      dropzone!.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone" disabled />,
+      );
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone" />,
+      );
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+
+    await act(async () => {
+      dropzone!.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+  });
+
+  it("prevents a disabled file drop from navigating away without adding attachments", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone" disabled />,
+      );
+    });
+    const dropzone = container.querySelector("[data-testid='dropzone']")!;
+    const over = createDragEvent("dragover", ["Files"]);
+    const drop = createDropEvent([
+      new File(["file"], "photo.png", { type: "image/png" }),
+    ]);
+
+    await act(async () => {
+      dropzone.dispatchEvent(over);
+      dropzone.dispatchEvent(drop);
+    });
+
+    expect(over.defaultPrevented).toBe(true);
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+    expect(dropzone.hasAttribute("data-dragging")).toBe(false);
+  });
+
   it("ignores non-file drags", async () => {
     const dropzone = container.querySelector("[data-testid='dropzone']");
     expect(dropzone).not.toBeNull();

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -3,6 +3,7 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useState,
   type ReactElement,
   isValidElement,
@@ -30,14 +31,20 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   const [isDragging, setIsDragging] = useState(false);
   const aui = useAui();
 
+  useEffect(() => {
+    if (!disabled) return;
+    // Disabled handlers cannot clear the latch, so reset it when the enabled period ends.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setIsDragging(false);
+  }, [disabled]);
+
   // An unprevented file drop navigates the tab to the file, so file drags are
   // claimed via preventDefault even when the runtime does not support attachments.
   const handleDragEnterCapture = useCallback(
     (e: React.DragEvent) => {
-      if (disabled) return;
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (!aui.thread.getState().capabilities.attachments) {
+      if (disabled || !aui.thread.getState().capabilities.attachments) {
         e.dataTransfer.dropEffect = "none";
         return;
       }
@@ -48,10 +55,9 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
 
   const handleDragOverCapture = useCallback(
     (e: React.DragEvent) => {
-      if (disabled) return;
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (!aui.thread.getState().capabilities.attachments) {
+      if (disabled || !aui.thread.getState().capabilities.attachments) {
         e.dataTransfer.dropEffect = "none";
         return;
       }
@@ -75,10 +81,10 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
 
   const handleDrop = useCallback(
     async (e: React.DragEvent) => {
-      if (disabled) return;
       setIsDragging(false);
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
+      if (disabled) return;
       const files = Array.from(e.dataTransfer.files);
       if (!aui.thread.getState().capabilities.attachments || files.length === 0)
         return;
@@ -97,7 +103,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   );
 
   const mergedProps = {
-    ...(isDragging ? { "data-dragging": "true" } : null),
+    ...(isDragging && !disabled ? { "data-dragging": "true" } : null),
     ...rest,
     onDragEnterCapture: composeEventHandlers(
       rest.onDragEnterCapture,

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

@@ -26,6 +26,7 @@ const threadState = {
   isDisabled: false,
   isRunning: false,
   capabilities: { queue: false, attachments: false },
+  voice: undefined as undefined | { status: { type: "running" } },
 };
 
 const plugin = {
@@ -197,6 +198,7 @@ describe("ComposerPrimitiveInput", () => {
     threadState.isDisabled = false;
     threadState.isRunning = false;
     threadState.capabilities = { queue: false, attachments: false };
+    threadState.voice = undefined;
     pluginRegistry = null;
     activeAria = null;
     escapeKeydownHandler = null;
@@ -399,6 +401,22 @@ describe("ComposerPrimitiveInput", () => {
       expect(event.defaultPrevented).toBe(true);
     });
 
+    it("blocks Enter while a run is in progress without a queue, except during a voice session", async () => {
+      threadState.isRunning = true;
+      const textarea = await mount();
+
+      await act(async () => {
+        fireKeyDown(textarea, { key: "Enter" });
+      });
+      expect(requestSubmitSpy).not.toHaveBeenCalled();
+
+      threadState.voice = { status: { type: "running" } };
+      await act(async () => {
+        fireKeyDown(textarea, { key: "Enter" });
+      });
+      expect(requestSubmitSpy).toHaveBeenCalledTimes(1);
+    });
+
     it("inserts a newline on Shift+Enter without submitting", async () => {
       const textarea = await mount();
 

package/src/primitives/composer/ComposerInput.tsx

@@ -251,8 +251,14 @@ export const ComposerPrimitiveInput = forwardRef<
         // Regular newline: Shift+Enter
         if (e.shiftKey) return;
 
-        // Block submission when running unless queue is supported
-        if (threadState.isRunning && !hasQueue) return;
+        // Block submission when running unless queue is supported; a voice
+        // session leaves the decision to canSend
+        if (
+          threadState.isRunning &&
+          !hasQueue &&
+          threadState.voice === undefined
+        )
+          return;
 
         let shouldSubmit = false;
         if (effectiveSubmitMode === "ctrlEnter") {

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

@@ -354,9 +354,11 @@ describe("ComposerPrimitiveRoot compact mode", () => {
   );
 
   it("updates compact mode when the compact context multiline latch changes", async () => {
-    let compactContext: ComposerCompactContextValue | null = null;
+    const compactContext: { current: ComposerCompactContextValue | null } = {
+      current: null,
+    };
     const Probe = () => {
-      compactContext = useComposerCompactContextOptional();
+      compactContext.current = useComposerCompactContextOptional();
       return null;
     };
 
@@ -364,7 +366,7 @@ describe("ComposerPrimitiveRoot compact mode", () => {
       compact: true,
       children: <Probe />,
     });
-    const context = compactContext;
+    const context = compactContext.current;
     expect(context).not.toBeNull();
     if (!context) throw new Error("Composer compact context was not provided");
     expect(form.hasAttribute("data-compact")).toBe(true);

package/src/primitives/message/MessagePartsGrouped.test.tsx

@@ -1,14 +1,20 @@
 // @vitest-environment jsdom
 
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { useEffect, type FC, type ReactNode } from "react";
 import { describe, expect, it } from "vitest";
 import type { ThreadMessageLike } from "@assistant-ui/core";
 import {
   AssistantRuntimeProvider,
+  useAssistantDataUI,
   useExternalStoreRuntime,
 } from "@assistant-ui/core/react";
+import { useAui } from "@assistant-ui/store";
 import { ThreadPrimitiveMessageByIndex } from "../thread/ThreadMessages";
-import { MessagePrimitiveUnstable_PartsGroupedByParentId } from "./MessagePartsGrouped";
+import {
+  type MessagePrimitiveUnstable_PartsGrouped,
+  MessagePrimitiveUnstable_PartsGroupedByParentId,
+} from "./MessagePartsGrouped";
 
 const Message = () => (
   <MessagePrimitiveUnstable_PartsGroupedByParentId
@@ -27,7 +33,41 @@ const Message = () => (
   />
 );
 
-const Example = ({ content }: { content: ThreadMessageLike["content"] }) => {
+const partsMessage =
+  (components: MessagePrimitiveUnstable_PartsGrouped.Props["components"]): FC =>
+  () => (
+    <MessagePrimitiveUnstable_PartsGroupedByParentId components={components} />
+  );
+
+const Named = () => <b>named</b>;
+const Fallback = () => <i>fallback</i>;
+const GlobalFallback = () => <b>global-fallback</b>;
+
+const RegisterFallbackDataUI: FC<{ render: typeof GlobalFallback }> = ({
+  render,
+}) => {
+  const aui = useAui();
+  useEffect(() => aui.dataRenderers.setFallbackDataUI(render), [aui, render]);
+  return null;
+};
+
+const RegisterNamedDataUI: FC<{ name: string; render: typeof Named }> = ({
+  name,
+  render,
+}) => {
+  useAssistantDataUI({ name, render });
+  return null;
+};
+
+const Example = ({
+  content,
+  Message: MessageComponent = Message,
+  extra,
+}: {
+  content: ThreadMessageLike["content"];
+  Message?: FC;
+  extra?: ReactNode;
+}) => {
   const messages: ThreadMessageLike[] = [
     { id: "message", role: "assistant", content },
   ];
@@ -38,7 +78,11 @@ const Example = ({ content }: { content: ThreadMessageLike["content"] }) => {
   });
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-      <ThreadPrimitiveMessageByIndex index={0} components={{ Message }} />
+      {extra}
+      <ThreadPrimitiveMessageByIndex
+        index={0}
+        components={{ Message: MessageComponent }}
+      />
     </AssistantRuntimeProvider>
   );
 };
@@ -90,4 +134,107 @@ describe("MessagePrimitive.Unstable_PartsGroupedByParentId", () => {
       { parent: null, indices: "5", text: "trailing" },
     ]);
   });
+
+  it.each(["toString", "constructor", "__proto__"])(
+    "falls back for a tool call named %s that only Object.prototype has",
+    (toolName) => {
+      const { container } = render(
+        <Example
+          content={[
+            { type: "tool-call", toolCallId: "call", toolName, args: {} },
+          ]}
+          Message={partsMessage({
+            tools: { by_name: { other: Named }, Fallback },
+          })}
+        />,
+      );
+
+      expect(container.innerHTML).toBe("<i>fallback</i>");
+    },
+  );
+
+  it.each(["toString", "constructor", "__proto__"])(
+    "falls back for a data part named %s that only Object.prototype has",
+    (name) => {
+      const { container } = render(
+        <Example
+          content={[{ type: "data", name, data: 1 }]}
+          Message={partsMessage({
+            data: { by_name: { other: Named }, Fallback },
+          })}
+        />,
+      );
+
+      expect(container.innerHTML).toBe("<i>fallback</i>");
+    },
+  );
+
+  it("renders tool and data UIs registered under an inherited name", () => {
+    const { container } = render(
+      <Example
+        content={[
+          {
+            type: "tool-call",
+            toolCallId: "call",
+            toolName: "toString",
+            args: {},
+          },
+          { type: "data", name: "toString", data: 1 },
+        ]}
+        Message={partsMessage({
+          tools: { by_name: { toString: Named }, Fallback },
+          data: { by_name: { toString: Named }, Fallback },
+        })}
+      />,
+    );
+
+    expect(container.innerHTML).toBe("<b>named</b><b>named</b>");
+  });
+
+  it("uses dataRenderers.fallbacks[0] before inline data.Fallback", async () => {
+    const { container } = render(
+      <Example
+        content={[{ type: "data", name: "chart", data: 1 }]}
+        Message={partsMessage({ data: { Fallback } })}
+        extra={<RegisterFallbackDataUI render={GlobalFallback} />}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(container.innerHTML).toBe("<b>global-fallback</b>");
+    });
+  });
+
+  it("uses dataRenderers.fallbacks[0] when no named renderer or inline Fallback is set", async () => {
+    const { container } = render(
+      <Example
+        content={[{ type: "data", name: "chart", data: 1 }]}
+        Message={partsMessage({})}
+        extra={<RegisterFallbackDataUI render={GlobalFallback} />}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(container.innerHTML).toBe("<b>global-fallback</b>");
+    });
+  });
+
+  it("prefers a named data renderer over dataRenderers.fallbacks", async () => {
+    const { container } = render(
+      <Example
+        content={[{ type: "data", name: "chart", data: 1 }]}
+        Message={partsMessage({ data: { Fallback } })}
+        extra={
+          <>
+            <RegisterFallbackDataUI render={GlobalFallback} />
+            <RegisterNamedDataUI name="chart" render={Named} />
+          </>
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      expect(container.innerHTML).toBe("<b>named</b>");
+    });
+  });
 });

package/src/primitives/message/MessagePartsGrouped.tool-interaction.test.tsx

@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+import { cleanup, render } from "@testing-library/react";
+import { useEffect, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  MessagePrimitiveUnstable_PartsGroupedByParentId,
+  type MessagePrimitiveUnstable_PartsGrouped,
+} from "./MessagePartsGrouped";
+
+const fixture = vi.hoisted(() => ({
+  recordInteraction: vi.fn(),
+  part: {
+    type: "tool-call",
+    toolCallId: "call-1",
+    toolName: "weather",
+    args: {},
+    argsText: "{}",
+    status: { type: "complete" },
+  },
+  state: {
+    message: { parts: [] as unknown[] },
+    tools: { toolUIs: {} as Record<string, unknown> },
+    dataRenderers: { renderers: {}, fallbacks: [] },
+  },
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => ({
+    part: {
+      addToolResult: vi.fn(),
+      resumeToolCall: vi.fn(),
+      respondToToolApproval: vi.fn(),
+      unstable_recordInteraction: fixture.recordInteraction,
+    },
+  }),
+  useAuiState: <T,>(selector: (state: unknown) => T) =>
+    selector({ ...fixture.state, part: fixture.part }),
+}));
+
+vi.mock(
+  "../../context/providers/PartByIndexProvider",
+  async (importOriginal) => ({
+    ...(await importOriginal<
+      typeof import("../../context/providers/PartByIndexProvider")
+    >()),
+    PartByIndexProvider: ({ children }: { children: ReactNode }) => children,
+  }),
+);
+
+const interaction = { type: "action" as const, payload: { choice: "retry" } };
+
+afterEach(cleanup);
+
+beforeEach(() => {
+  fixture.recordInteraction.mockReset();
+  fixture.state.message.parts = [fixture.part];
+  fixture.state.tools.toolUIs = {};
+});
+
+describe("MessagePrimitive.Unstable_PartsGrouped", () => {
+  it.each(["override", "registered"] as const)(
+    "forwards unstable_recordInteraction to the %s tool UI",
+    async (kind) => {
+      const Tool = ({
+        unstable_recordInteraction,
+      }: {
+        unstable_recordInteraction?:
+          | ((input: typeof interaction) => Promise<void>)
+          | undefined;
+      }) => {
+        useEffect(() => {
+          void unstable_recordInteraction?.(interaction);
+        }, [unstable_recordInteraction]);
+        return null;
+      };
+      const components = (
+        kind === "override" ? { tools: { Override: Tool } } : {}
+      ) satisfies MessagePrimitiveUnstable_PartsGrouped.Props["components"];
+      if (kind === "registered") {
+        fixture.state.tools.toolUIs = { weather: [{ render: Tool }] };
+      }
+
+      render(
+        <MessagePrimitiveUnstable_PartsGroupedByParentId
+          components={components}
+        />,
+      );
+
+      await vi.waitFor(() =>
+        expect(fixture.recordInteraction).toHaveBeenCalledExactlyOnceWith(
+          interaction,
+        ),
+      );
+    },
+  );
+});