@assistant-ui/react 0.15.21 → 0.15.23

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/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/message/MessageIf.test.tsx

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import { useAuiState } from "@assistant-ui/store";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { MessagePrimitiveIf } from "./MessageIf";
+
+const messages: ThreadMessageLike[] = [
+  { id: "u", role: "user", content: [{ type: "text", text: "u" }] },
+  { id: "a", role: "assistant", content: [{ type: "text", text: "a" }] },
+  { id: "s", role: "system", content: [{ type: "text", text: "s" }] },
+];
+
+const roles = ["user", "assistant", "system"] as const;
+type Role = (typeof roles)[number];
+
+const roleFilter = (role: Role, value: boolean | undefined) =>
+  ({ [role]: value }) as MessagePrimitiveIf.Props;
+
+const renderRoles = (filter: MessagePrimitiveIf.Props) => {
+  const Message = () => {
+    const role = useAuiState((s) => s.message.role);
+    return (
+      <MessagePrimitiveIf {...filter}>
+        <span data-testid={`shown-${role}`} />
+      </MessagePrimitiveIf>
+    );
+  };
+  const Example = () => {
+    const runtime = useExternalStoreRuntime({
+      messages,
+      convertMessage: (message) => message,
+      onNew: async () => {},
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <ThreadPrimitiveRoot>
+          <ThreadPrimitiveMessages components={{ Message }} />
+        </ThreadPrimitiveRoot>
+      </AssistantRuntimeProvider>
+    );
+  };
+  const { queryByTestId } = render(<Example />);
+  return roles.filter((role) => queryByTestId(`shown-${role}`) !== null);
+};
+
+describe("MessagePrimitive.If role filters", () => {
+  it.each(roles)("%s={true} renders only that role", (role) => {
+    expect(renderRoles(roleFilter(role, true))).toEqual([role]);
+  });
+
+  it.each(roles)("%s={false} renders every other role", (role) => {
+    expect(renderRoles(roleFilter(role, false))).toEqual(
+      roles.filter((r) => r !== role),
+    );
+  });
+
+  it.each(roles)("%s={undefined} renders every role", (role) => {
+    expect(renderRoles(roleFilter(role, undefined))).toEqual([...roles]);
+  });
+
+  it("combines a true filter with a false filter", () => {
+    expect(renderRoles({ assistant: false, system: false })).toEqual(["user"]);
+  });
+});

package/src/primitives/message/MessageIf.ts

@@ -34,9 +34,14 @@ const useMessageIf = (props: UseMessageIfProps) => {
 
     if (props.hasBranches === true && branchCount < 2) return false;
 
-    if (props.user && role !== "user") return false;
-    if (props.assistant && role !== "assistant") return false;
-    if (props.system && role !== "system") return false;
+    if (props.user === true && role !== "user") return false;
+    if (props.user === false && role === "user") return false;
+
+    if (props.assistant === true && role !== "assistant") return false;
+    if (props.assistant === false && role === "assistant") return false;
+
+    if (props.system === true && role !== "system") return false;
+    if (props.system === false && role === "system") return false;
 
     if (props.lastOrHover === true && !isHovering && !isLast) return false;
     if (props.last !== undefined && props.last !== isLast) return false;

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>");
+    });
+  });
 });