@agent-native/toolkit 0.214.0 → 0.217.0

package/src/app/shared/ConsentBanner.spec.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const consentStateKey = Symbol.for("agent-native.client.consent");
+
+let root: Root | null = null;
+let container: HTMLElement | null = null;
+
+async function renderBanner(region: "consent" | "none") {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => new Response(JSON.stringify({ region }))),
+  );
+  vi.resetModules();
+  const consent = await import("@agent-native/core/client/consent");
+  const { ConsentBanner } = await import("./ConsentBanner.js");
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  await act(async () => {
+    root!.render(<ConsentBanner />);
+  });
+  await act(async () => {
+    await consent.resolveConsentRegion();
+  });
+  return consent;
+}
+
+function banner() {
+  return document.querySelector("[data-agent-native-consent-banner]");
+}
+
+function button(name: string) {
+  const match = [...document.querySelectorAll("button")].find(
+    (el) => el.textContent === name,
+  );
+  if (!match) throw new Error(`no ${name} button`);
+  return match;
+}
+
+async function click(name: string) {
+  await act(async () => {
+    button(name).click();
+  });
+}
+
+describe("ConsentBanner", () => {
+  afterEach(() => {
+    act(() => root?.unmount());
+    container?.remove();
+    root = null;
+    delete (globalThis as any)[consentStateKey];
+    window.sessionStorage.clear();
+    for (const cookie of document.cookie.split(";")) {
+      const name = cookie.split("=")[0]?.trim();
+      if (name) document.cookie = `${name}=; path=/; max-age=0`;
+    }
+    vi.unstubAllGlobals();
+  });
+
+  it("shows nothing outside the consent region", async () => {
+    await renderBanner("none");
+    expect(banner()).toBeNull();
+  });
+
+  it("shows on a later page once the region is already known this session", async () => {
+    window.sessionStorage.setItem("an_consent_region", "consent");
+    const fetchMock = vi.fn(async () => new Response("{}"));
+    vi.stubGlobal("fetch", fetchMock);
+    vi.resetModules();
+    const { ConsentBanner } = await import("./ConsentBanner.js");
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root!.render(<ConsentBanner />);
+    });
+
+    expect(banner()).not.toBeNull();
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("stores accept-all and closes", async () => {
+    const consent = await renderBanner("consent");
+    expect(banner()).not.toBeNull();
+
+    await click("Accept all");
+
+    expect(consent.getConsentChoice()).toEqual({
+      performance: true,
+      targeting: true,
+    });
+    expect(banner()).toBeNull();
+  });
+
+  it("stores reject-all and closes", async () => {
+    const consent = await renderBanner("consent");
+
+    await click("Reject all");
+
+    expect(consent.getConsentChoice()).toEqual({
+      performance: false,
+      targeting: false,
+    });
+    expect(banner()).toBeNull();
+  });
+
+  it("saves one category from the settings", async () => {
+    const consent = await renderBanner("consent");
+
+    await click("Manage settings");
+    await act(async () => {
+      (
+        document.getElementById("an-consent-performance") as HTMLElement
+      ).click();
+    });
+    await click("Save choices");
+
+    expect(consent.getConsentChoice()).toEqual({
+      performance: true,
+      targeting: false,
+    });
+  });
+
+  it("reopens from the settings link with the stored choice", async () => {
+    const consent = await renderBanner("consent");
+    await click("Accept all");
+
+    await act(async () => consent.openConsentSettings());
+    await click("Manage settings");
+
+    expect(
+      document
+        .getElementById("an-consent-targeting")
+        ?.getAttribute("aria-checked"),
+    ).toBe("true");
+  });
+});

package/src/app/shared/ConsentBanner.tsx

@@ -0,0 +1,141 @@
+import {
+  getConsentChoice,
+  resolveConsentRegion,
+  setConsentChoice,
+  shouldShowConsentBanner,
+  subscribeConsent,
+} from "@agent-native/core/client/consent";
+import { useT } from "@agent-native/core/client/i18n";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { Switch } from "@agent-native/toolkit/ui/switch";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+const DEFAULT_PRIVACY_POLICY_HREF = "https://www.agent-native.com/privacy";
+
+/**
+ * The cookie banner for visitors in the consent region. Renders nothing
+ * elsewhere, and nothing once the visitor has chosen, until
+ * `openConsentSettings()` reopens it.
+ */
+export function ConsentBanner({
+  privacyPolicyHref = DEFAULT_PRIVACY_POLICY_HREF,
+}: {
+  privacyPolicyHref?: string;
+}) {
+  const t = useT();
+  const open = useSyncExternalStore(
+    subscribeConsent,
+    shouldShowConsentBanner,
+    () => false,
+  );
+  const [managing, setManaging] = useState(false);
+  const [performance, setPerformance] = useState(false);
+  const [targeting, setTargeting] = useState(false);
+
+  useEffect(() => {
+    void resolveConsentRegion();
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const stored = getConsentChoice();
+    setPerformance(stored?.performance ?? false);
+    setTargeting(stored?.targeting ?? false);
+    setManaging(false);
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <section
+      role="region"
+      aria-label={t("consentBanner.label")}
+      data-agent-native-consent-banner
+      className="fixed bottom-4 left-4 z-[100] flex w-[min(420px,calc(100vw-2rem))] flex-col gap-3 rounded-lg border bg-popover p-4 text-sm text-popover-foreground shadow-lg"
+    >
+      <p className="m-0 leading-relaxed">
+        {t("consentBanner.message")}{" "}
+        <a
+          href={privacyPolicyHref}
+          target="_blank"
+          rel="noreferrer"
+          className="underline underline-offset-2"
+        >
+          {t("consentBanner.privacyPolicy")}
+        </a>
+      </p>
+      {managing ? (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-3">
+            <Label htmlFor="an-consent-necessary">
+              {t("consentBanner.necessary")}
+            </Label>
+            <Switch id="an-consent-necessary" checked disabled />
+          </div>
+          <div className="flex items-center justify-between gap-3">
+            <Label htmlFor="an-consent-performance">
+              {t("consentBanner.performance")}
+            </Label>
+            <Switch
+              id="an-consent-performance"
+              checked={performance}
+              onCheckedChange={setPerformance}
+            />
+          </div>
+          <div className="flex items-center justify-between gap-3">
+            <Label htmlFor="an-consent-targeting">
+              {t("consentBanner.targeting")}
+            </Label>
+            <Switch
+              id="an-consent-targeting"
+              checked={targeting}
+              onCheckedChange={setTargeting}
+            />
+          </div>
+        </div>
+      ) : null}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex-1"
+          onClick={() =>
+            setConsentChoice({ performance: false, targeting: false })
+          }
+        >
+          {t("consentBanner.rejectAll")}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex-1"
+          onClick={() =>
+            setConsentChoice({ performance: true, targeting: true })
+          }
+        >
+          {t("consentBanner.acceptAll")}
+        </Button>
+        {managing ? (
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => setConsentChoice({ performance, targeting })}
+          >
+            {t("consentBanner.save")}
+          </Button>
+        ) : (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex-1"
+            onClick={() => setManaging(true)}
+          >
+            {t("consentBanner.manage")}
+          </Button>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/composer/ComposerContextBanner.spec.tsx

@@ -55,11 +55,12 @@ describe("ComposerContextBanner", () => {
       "Improve answers by adding data definitions.",
     );
 
-    await act(async () =>
-      Array.from(container.querySelectorAll("button"))
-        .find((button) => button.textContent?.includes("Add context"))!
-        .click(),
-    );
+    const addContextButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>("button"),
+    ).find((button) => button.textContent?.includes("Add context"))!;
+    expect(addContextButton.classList).toContain("px-1.5");
+
+    await act(async () => addContextButton.click());
     await act(async () =>
       container
         .querySelector<HTMLButtonElement>(
@@ -71,4 +72,29 @@ describe("ComposerContextBanner", () => {
     expect(onAddContext).toHaveBeenCalledOnce();
     expect(onDismiss).toHaveBeenCalledOnce();
   });
+
+  it("renders a host-provided decorative add-context icon", async () => {
+    await act(async () =>
+      root.render(
+        <ComposerContextBanner
+          ariaLabel="Context guidance"
+          addContextLabel="Add context"
+          addContextIcon={<svg data-testid="custom-action-icon" />}
+          onAddContext={vi.fn()}
+        >
+          Improve answers by adding data definitions.
+        </ComposerContextBanner>,
+      ),
+    );
+
+    const button = container.querySelector<HTMLButtonElement>("button")!;
+    const actionIcon = container.querySelector<SVGSVGElement>(
+      '[data-testid="custom-action-icon"]',
+    )!;
+
+    expect(button.textContent).toBe("Add context");
+    expect(button.classList).toContain("px-1.5");
+    expect(Array.from(button.querySelectorAll("svg"))).toEqual([actionIcon]);
+    expect(actionIcon.parentElement?.getAttribute("aria-hidden")).toBe("true");
+  });
 });

package/src/composer/ComposerContextBanner.tsx

@@ -11,6 +11,8 @@ interface ComposerContextBannerBaseProps {
   /** Localized label for the action that opens or adds context. */
   addContextLabel: string;
   onAddContext: () => void;
+  /** Optional decorative icon displayed after the add-context label. */
+  addContextIcon?: ReactNode;
   icon?: ReactNode;
   className?: string;
 }
@@ -27,6 +29,7 @@ export function ComposerContextBanner({
   children,
   addContextLabel,
   onAddContext,
+  addContextIcon,
   dismissLabel,
   onDismiss,
   icon,
@@ -46,14 +49,16 @@ export function ComposerContextBanner({
       </span>
       <span className="min-w-0 flex-1">{children}</span>
       <Button
-        className="shrink-0"
+        className="shrink-0 px-1.5"
         onClick={onAddContext}
         size="xs"
         type="button"
         variant="outline"
       >
         {addContextLabel}
-        <IconPlus aria-hidden="true" />
+        <span aria-hidden="true">
+          {addContextIcon ?? <IconPlus aria-hidden="true" />}
+        </span>
       </Button>
       {onDismiss ? (
         <Button

package/src/ui/sonner.spec.ts

@@ -0,0 +1,10 @@
+import { toast } from "sonner";
+import { describe, expect, it } from "vitest";
+
+import { sonnerToast } from "./sonner.js";
+
+describe("shared Sonner API", () => {
+  it("re-exports the toast helper", () => {
+    expect(sonnerToast).toBe(toast);
+  });
+});

package/src/ui/sonner.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 
 import { cn } from "../utils.js";
 
@@ -55,4 +55,4 @@ const Toaster = ({ className, toastOptions, ...props }: ToasterProps) => {
   );
 };
 
-export { Toaster };
+export { Toaster, sonnerToast };