@agent-native/toolkit 0.217.0 → 0.219.0

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", () => {

package/src/chat-history.css

@@ -46,6 +46,11 @@
   min-height: 0;
 }
 
+/* A rail inside a popover, such as All chats, scrolls instead of growing. */
+.an-chat-history--rail.an-chat-history--capped .an-chat-history__list {
+  max-height: 16rem;
+}
+
 .an-chat-history-rail .an-chat-history__state:empty {
   display: none;
 }
@@ -71,19 +76,60 @@
   padding: 0 4px;
 }
 
-.an-chat-history-row__access {
+.an-chat-history-row__owner-mark {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+/* The active row has no timestamp; keep its avatar clear of the ⋯ trigger. */
+.an-chat-history--rail
+  .an-chat-history-row--has-menu
+  .an-chat-history-row__owner-mark:last-child {
+  margin-inline-end: 18px;
+}
+
+.an-chat-owner-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: hsl(var(--muted));
+  /* guard:allow-raw-color — the initial sits on an emailToColor badge in both themes */
+  color: #fff;
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.an-chat-owner-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.an-chat-history-owner {
   display: flex;
-  gap: 6px;
+  flex-direction: column;
+  gap: 1px;
   min-width: 0;
-  margin-top: 2px;
-  font-size: 10px;
-  color: hsl(var(--muted-foreground) / 0.7);
+  text-align: start;
 }
 
-.an-chat-history-row__owner {
+.an-chat-history-owner__name {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: 500;
+}
+
+.an-chat-history-owner__access {
+  color: hsl(var(--muted-foreground));
 }
 
 .an-chat-history__state--error {
@@ -149,7 +195,10 @@
 }
 
 .an-chat-history-rail__disclosure,
-.an-chat-history-rail__new-chat {
+.an-chat-history-rail__new-chat,
+.an-chat-history-rail__section-toggle,
+.an-chat-history-rail__load-more,
+.an-chat-history-rail__retry {
   display: flex;
   align-items: center;
   border: 0;
@@ -160,17 +209,52 @@
 }
 
 .an-chat-history-rail__disclosure:hover,
-.an-chat-history-rail__new-chat:hover {
+.an-chat-history-rail__new-chat:hover,
+.an-chat-history-rail__section-toggle:hover,
+.an-chat-history-rail__load-more:hover,
+.an-chat-history-rail__retry:hover {
   background: hsl(var(--accent) / 0.5);
   color: hsl(var(--accent-foreground));
 }
 
 .an-chat-history-rail__disclosure:focus-visible,
-.an-chat-history-rail__new-chat:focus-visible {
+.an-chat-history-rail__new-chat:focus-visible,
+.an-chat-history-rail__section-toggle:focus-visible,
+.an-chat-history-rail__load-more:focus-visible,
+.an-chat-history-rail__retry:focus-visible {
   outline: 2px solid hsl(var(--ring));
   outline-offset: -2px;
 }
 
+/* Show all, Load more and Retry match New chat: 12px muted text, not a button. */
+.an-chat-history-rail__section-toggle,
+.an-chat-history-rail__load-more,
+.an-chat-history-rail__retry {
+  flex: 0 0 auto;
+  gap: 4px;
+  height: auto;
+  min-height: 26px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  box-shadow: none;
+}
+
+.an-chat-history-rail__section-toggle svg,
+.an-chat-history-rail__load-more svg,
+.an-chat-history-rail__retry svg {
+  width: 13px;
+  height: 13px;
+}
+
+.an-chat-history__state .an-chat-history-rail__retry {
+  display: inline-flex;
+  min-height: 22px;
+  margin-inline-start: 4px;
+  padding: 2px 6px;
+}
+
 .an-chat-history-rail__disclosure {
   justify-content: center;
   flex: 0 0 auto;
@@ -267,6 +351,7 @@
 
 .an-chat-history-row__title {
   min-width: 0;
+  margin-inline-end: auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -435,6 +520,21 @@
   box-shadow: var(--agent-kit-overlay-elevation);
 }
 
+.an-chat-history-row__menu-owner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 260px;
+  margin-bottom: 4px;
+  padding: 6px 8px 8px;
+  border-bottom: 1px solid hsl(var(--border));
+  font-size: 12px;
+}
+
+.an-chat-history-row__menu-owner .an-chat-history-owner__access {
+  font-size: 11px;
+}
+
 .an-chat-history-row__menu-item {
   display: flex;
   align-items: center;

package/src/composer/TiptapComposer.tsx

@@ -2207,7 +2207,7 @@ function ModelSelector({
               ? `. Agent: ${selectedAgentLabel}`
               : ""
           }`}
-          className="agent-composer-model-button flex min-w-0 max-w-none shrink-0 items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          className="agent-composer-model-button flex min-w-0 max-w-none shrink items-center gap-1 overflow-hidden rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground"
         >
           <span className="min-w-0 truncate">
             {selectedAgentOption?.icon ? (