@agent-native/toolkit 0.216.0 → 0.218.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/app/sharing/ShareButton.tsx

@@ -1150,6 +1150,12 @@ function MemberAutocomplete({
     activeIndex >= 0 && activeIndex < suggestions.length
       ? suggestions[activeIndex]
       : null;
+  const listOpen =
+    open &&
+    (suggestions.length > 0 ||
+      search.isLoading ||
+      Boolean(search.error) ||
+      value.trim().length > 0);
 
   useEffect(() => {
     setActiveIndex(-1);
@@ -1230,7 +1236,7 @@ function MemberAutocomplete({
   };
 
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
+    <Popover open={listOpen} onOpenChange={onOpenChange}>
       <PopoverAnchor asChild>
         <div className="flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-input bg-card focus-within:ring-1 focus-within:ring-ring">
           <input
@@ -1238,8 +1244,8 @@ function MemberAutocomplete({
             type="text"
             role="combobox"
             aria-autocomplete="list"
-            aria-expanded={open}
-            aria-controls={open ? listboxId : undefined}
+            aria-expanded={listOpen}
+            aria-controls={listOpen ? listboxId : undefined}
             aria-activedescendant={
               activeIndex >= 0 ? optionId(listboxId, activeIndex) : undefined
             }
@@ -1361,13 +1367,9 @@ function MemberAutocomplete({
 
           {!search.isLoading && !search.error && suggestions.length === 0 ? (
             <div className="px-3 py-3 text-sm text-muted-foreground">
-              {value.trim()
-                ? t("agentChat.share.noMatches", {
-                    defaultValue: "No matches.",
-                  })
-                : t("agentChat.share.noPeopleFound", {
-                    defaultValue: "No people found.",
-                  })}
+              {t("agentChat.share.noMatches", {
+                defaultValue: "No matches.",
+              })}
             </div>
           ) : null}
 

package/src/chat-history/ChatHistoryList.spec.tsx

@@ -635,4 +635,55 @@ describe("ChatHistoryList", () => {
     });
     expect(container.querySelector(".an-chat-history-row__menu")).toBeNull();
   });
+
+  it("keeps a read-only row to its owner header and Copy link", async () => {
+    const onCopyLink = vi.fn();
+    const onDelete = vi.fn();
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={[
+            item({
+              id: "shared",
+              readOnly: true,
+              ownerAvatar: <span data-testid="avatar">P</span>,
+              ownerLabel: "pat@example.com",
+              accessLabel: "Shared with your organization",
+              accessBasis: "organization",
+            }),
+          ]}
+          onSelect={() => {}}
+          onRename={() => {}}
+          onDelete={onDelete}
+          onTogglePin={() => {}}
+          onCopyLink={onCopyLink}
+        />,
+      );
+    });
+
+    const row = container.querySelector<HTMLElement>(".an-chat-history-row")!;
+    const mark = row.querySelector(".an-chat-history-row__owner-mark");
+    expect(mark?.getAttribute("data-access-basis")).toBe("organization");
+    expect(mark?.querySelector("[data-testid='avatar']")).not.toBeNull();
+    expect(
+      row.querySelector(".an-chat-history-row__topline")?.textContent,
+    ).toBe("sharedP");
+
+    await openMenu(
+      row.querySelector<HTMLButtonElement>(
+        ".an-chat-history-row__menu-trigger",
+      )!,
+    );
+    expect(
+      document.body.querySelector(".an-chat-history-row__menu-owner")
+        ?.textContent,
+    ).toBe("Ppat@example.comShared with your organization");
+    expect(getMenuItems().map((element) => element.textContent)).toEqual([
+      "Copy link",
+    ]);
+
+    act(() => getMenuItems()[0]?.click());
+    expect(onCopyLink).toHaveBeenCalledWith("shared");
+    expect(onDelete).not.toHaveBeenCalled();
+  });
 });

package/src/chat-history/ChatHistoryList.tsx

@@ -1,6 +1,7 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   IconDots,
+  IconLink,
   IconPencil,
   IconPinned,
   IconPinnedOff,
@@ -9,7 +10,7 @@ import {
 } from "@tabler/icons-react";
 import React, { useMemo, useRef, useState } from "react";
 
-import { Skeleton } from "../design-system/components.js";
+import { Skeleton, Tooltip } from "../design-system/components.js";
 import { cn } from "../utils.js";
 
 /** How the viewer got access to a chat; the app supplies the translated copy. */
@@ -25,7 +26,12 @@ export interface ChatHistoryItem {
   titleText?: string;
   subtitle?: React.ReactNode;
   detail?: React.ReactNode;
-  /** Already-translated owner name, shown on shared rows. */
+  /**
+   * A shared row's owner mark, kept on one line beside the timestamp. Hovering
+   * it shows `ownerLabel` and `accessLabel`, which also head the row menu.
+   */
+  ownerAvatar?: React.ReactNode;
+  /** Already-translated owner name for a shared row. */
   ownerLabel?: React.ReactNode;
   /** Already-translated access description, e.g. "Shared with you". */
   accessLabel?: React.ReactNode;
@@ -33,9 +39,14 @@ export interface ChatHistoryItem {
   timestamp?: React.ReactNode;
   pinned?: boolean;
   disabled?: boolean;
+  /**
+   * The viewer can open the chat but not rename, pin or delete it, e.g. a chat
+   * someone shared. The menu keeps the owner header and Copy link.
+   */
+  readOnly?: boolean;
   /**
    * Presentation only: drops the row menu and context menu while the row stays
-   * selectable. The app decides which rows (e.g. not owned) get no actions.
+   * selectable, e.g. for a draft that has not been saved yet.
    */
   hideActions?: boolean;
 }
@@ -59,6 +70,7 @@ export interface ChatHistoryListLabels {
   rename: string;
   pin: string;
   unpin: string;
+  copyLink: string;
   delete: string;
 }
 
@@ -72,6 +84,8 @@ export interface ChatHistoryListProps {
   onRename?: (id: string, nextTitle: string) => void;
   renameMaxLength?: number;
   onDelete?: (id: string) => void;
+  /** Shown on every row, read-only ones included. */
+  onCopyLink?: (id: string) => void;
   renderRowActions?: (item: ChatHistoryItem) => React.ReactNode;
   renderAdditionalRowActions?: (
     item: ChatHistoryItem,
@@ -104,6 +118,7 @@ const DEFAULT_LABELS: ChatHistoryListLabels = {
   rename: "Rename",
   pin: "Pin to top",
   unpin: "Unpin from top",
+  copyLink: "Copy link",
   delete: "Delete",
 };
 
@@ -117,6 +132,7 @@ export function ChatHistoryList({
   onRename,
   renameMaxLength,
   onDelete,
+  onCopyLink,
   renderRowActions,
   renderAdditionalRowActions,
   searchValue,
@@ -141,9 +157,11 @@ export function ChatHistoryList({
       rename: labels?.rename ?? DEFAULT_LABELS.rename,
       pin: labels?.pin ?? DEFAULT_LABELS.pin,
       unpin: labels?.unpin ?? DEFAULT_LABELS.unpin,
+      copyLink: labels?.copyLink ?? DEFAULT_LABELS.copyLink,
       delete: labels?.delete ?? DEFAULT_LABELS.delete,
     }),
     [
+      labels?.copyLink,
       labels?.delete,
       labels?.options,
       labels?.pin,
@@ -252,6 +270,7 @@ export function ChatHistoryList({
                       onRename={onRename}
                       renameMaxLength={renameMaxLength}
                       onDelete={onDelete}
+                      onCopyLink={onCopyLink}
                       renderRowActions={renderRowActions}
                       renderAdditionalRowActions={renderAdditionalRowActions}
                       labels={resolvedLabels}
@@ -289,6 +308,7 @@ type ChatHistoryRowProps = {
   onRename?: (id: string, nextTitle: string) => void;
   renameMaxLength?: number;
   onDelete?: (id: string) => void;
+  onCopyLink?: (id: string) => void;
   renderRowActions?: (item: ChatHistoryItem) => React.ReactNode;
   renderAdditionalRowActions?: (
     item: ChatHistoryItem,
@@ -297,6 +317,21 @@ type ChatHistoryRowProps = {
   labels: ChatHistoryListLabels;
 };
 
+function ChatHistoryOwnerSummary({ item }: { item: ChatHistoryItem }) {
+  return (
+    <span className="an-chat-history-owner">
+      {item.ownerLabel != null && (
+        <span className="an-chat-history-owner__name">{item.ownerLabel}</span>
+      )}
+      {item.accessLabel != null && (
+        <span className="an-chat-history-owner__access">
+          {item.accessLabel}
+        </span>
+      )}
+    </span>
+  );
+}
+
 const ChatHistoryRow = React.memo(function ChatHistoryRow({
   item,
   active,
@@ -306,6 +341,7 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
   onRename,
   renameMaxLength,
   onDelete,
+  onCopyLink,
   renderRowActions,
   renderAdditionalRowActions,
   labels,
@@ -315,12 +351,13 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
   const [menuOpen, setMenuOpen] = useState(false);
   const renameInputRef = useRef<HTMLInputElement | null>(null);
 
+  const editable = !item.readOnly;
+  const hasOwner = item.ownerLabel != null || item.accessLabel != null;
   const hasMenu =
     !item.hideActions &&
     Boolean(
-      onTogglePin ||
-      onRename ||
-      onDelete ||
+      (editable && (onTogglePin || onRename || onDelete)) ||
+      onCopyLink ||
       renderRowActions ||
       renderAdditionalRowActions,
     );
@@ -402,6 +439,22 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
         >
           <div className="an-chat-history-row__topline">
             <span className="an-chat-history-row__title">{item.title}</span>
+            {item.ownerAvatar != null && (
+              <Tooltip
+                trigger={
+                  <span
+                    className="an-chat-history-row__owner-mark"
+                    data-access-basis={item.accessBasis}
+                  >
+                    {item.ownerAvatar}
+                  </span>
+                }
+                content={
+                  hasOwner ? <ChatHistoryOwnerSummary item={item} /> : null
+                }
+                disabled={!hasOwner}
+              />
+            )}
             {item.timestamp != null && (
               <span className="an-chat-history-row__timestamp">
                 {item.timestamp}
@@ -414,23 +467,6 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
           {item.detail != null && (
             <div className="an-chat-history-row__detail">{item.detail}</div>
           )}
-          {(item.ownerLabel != null || item.accessLabel != null) && (
-            <div
-              className="an-chat-history-row__access"
-              data-access-basis={item.accessBasis}
-            >
-              {item.ownerLabel != null && (
-                <span className="an-chat-history-row__owner">
-                  {item.ownerLabel}
-                </span>
-              )}
-              {item.accessLabel != null && (
-                <span className="an-chat-history-row__access-label">
-                  {item.accessLabel}
-                </span>
-              )}
-            </div>
-          )}
         </button>
       )}
 
@@ -463,11 +499,22 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
                 side="bottom"
                 sideOffset={4}
               >
+                {hasOwner && (
+                  <div
+                    className="an-chat-history-row__menu-owner"
+                    data-access-basis={item.accessBasis}
+                  >
+                    {item.ownerAvatar != null && (
+                      <span aria-hidden="true">{item.ownerAvatar}</span>
+                    )}
+                    <ChatHistoryOwnerSummary item={item} />
+                  </div>
+                )}
                 {renderRowActions ? (
                   renderRowActions(item)
                 ) : (
                   <>
-                    {onRename && (
+                    {editable && onRename && (
                       <button
                         type="button"
                         role="menuitem"
@@ -478,7 +525,7 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
                         <span>{labels.rename}</span>
                       </button>
                     )}
-                    {onTogglePin && (
+                    {editable && onTogglePin && (
                       <button
                         type="button"
                         role="menuitem"
@@ -496,10 +543,24 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
                         <span>{item.pinned ? labels.unpin : labels.pin}</span>
                       </button>
                     )}
+                    {onCopyLink && (
+                      <button
+                        type="button"
+                        role="menuitem"
+                        className="an-chat-history-row__menu-item"
+                        onClick={() => {
+                          setMenuOpen(false);
+                          onCopyLink(item.id);
+                        }}
+                      >
+                        <IconLink size={13} strokeWidth={1.8} />
+                        <span>{labels.copyLink}</span>
+                      </button>
+                    )}
                     {renderAdditionalRowActions?.(item, () =>
                       setMenuOpen(false),
                     )}
-                    {onDelete && (
+                    {editable && onDelete && (
                       <button
                         type="button"
                         role="menuitem"

package/src/chat-history/ChatHistoryRailSections.spec.tsx

@@ -273,7 +273,7 @@ describe("ChatHistoryRail sections", () => {
     expect(onLoadMore).toHaveBeenCalledOnce();
   });
 
-  it("renders owner and access basis on a shared row", () => {
+  it("keeps a shared row on one line with the owner mark", () => {
     renderRail([
       {
         id: "shared",
@@ -281,16 +281,24 @@ describe("ChatHistoryRail sections", () => {
           {
             id: "s1",
             title: "Roadmap",
+            ownerAvatar: <span>P</span>,
             ownerLabel: "Pat Lee",
             accessLabel: "Shared with your organization",
             accessBasis: "organization",
+            readOnly: true,
           },
         ],
       },
     ]);
-    const access = container.querySelector(".an-chat-history-row__access");
-    expect(access?.getAttribute("data-access-basis")).toBe("organization");
-    expect(access?.textContent).toBe("Pat LeeShared with your organization");
+    const row = container.querySelector(".an-chat-history-row")!;
+    expect(
+      row
+        .querySelector(".an-chat-history-row__owner-mark")
+        ?.getAttribute("data-access-basis"),
+    ).toBe("organization");
+    expect(row.querySelector(".an-chat-history-row__button")?.textContent).toBe(
+      "RoadmapP",
+    );
   });
 
   it("selecting a section row and New chat work as in the flat rail", () => {