@adecore/agents-react 0.37.1 → 0.37.3

package/dist/chat/ui/TimelineMenu.js

@@ -9,12 +9,14 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow } from '../../state/chats.js';
+import { copyWithChips, rowClipboardChips } from './chip-clipboard.js';
 import { useFileLinkCwd, useFileLinkScopeId, useOpenFileLink } from './file-links.js';
+import { useReferenceLookup } from './thread-references.js';
 import { ContextMenu, copyText, DisabledReason, EDIT_SHORTCUTS, Icon, Kbd, selectAllWithin } from '@adecore/ui';
 /* The menu behind a right-click in a thread, mostly for copying: a whole message, a code block or an answer's markdown. */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function TimelineMenuPopup(t0) {
-  const $ = _c(70);
+  const $ = _c(72);
   const {
     target,
     thread,
@@ -26,10 +28,11 @@ export function TimelineMenuPopup(t0) {
   const {
     t
   } = useTranslation("agent-chat");
+  const row = target.row;
   let t3;
-  if ($[0] !== target.row) {
-    t3 = target.row === null ? null : messageTextOf(target.row);
-    $[0] = target.row;
+  if ($[0] !== row) {
+    t3 = row === null ? null : messageTextOf(row);
+    $[0] = row;
     $[1] = t3;
   } else {
     t3 = $[1];
@@ -47,7 +50,7 @@ export function TimelineMenuPopup(t0) {
   const turnId = t4;
   let t5;
   if ($[5] !== turnId) {
-    t5 = row => turnId === null ? null : forkRefusal(row?.info ?? null, row?.structure[turnId]);
+    t5 = row_0 => turnId === null ? null : forkRefusal(row_0?.info ?? null, row_0?.structure[turnId]);
     $[5] = turnId;
     $[6] = t5;
   } else {
@@ -66,6 +69,7 @@ export function TimelineMenuPopup(t0) {
   const markable = chatId !== null && (target.row?.kind === "user" || target.row?.kind === "assistant") ? target.row.id : null;
   const cwd = useFileLinkCwd();
   const scopeId = useFileLinkScopeId();
+  const lookup = useReferenceLookup(chatId ?? "");
   const {
     fork,
     fileLinks
@@ -150,22 +154,24 @@ export function TimelineMenuPopup(t0) {
     t13 = $[25];
   }
   let t14;
-  if ($[26] !== message || $[27] !== t) {
-    t14 = message !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
-      onClick: () => copyText(message),
+  if ($[26] !== lookup || $[27] !== message || $[28] !== row || $[29] !== t) {
+    t14 = row !== null && message !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
+      onClick: () => copyWithChips(rowClipboardChips(row, message, lookup)),
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: MessageSquare,
         size: 14
       }), " ", t("timeline.menu.copyMessage")]
     });
-    $[26] = message;
-    $[27] = t;
-    $[28] = t14;
+    $[26] = lookup;
+    $[27] = message;
+    $[28] = row;
+    $[29] = t;
+    $[30] = t14;
   } else {
-    t14 = $[28];
+    t14 = $[30];
   }
   let t15;
-  if ($[29] !== t || $[30] !== target.code) {
+  if ($[31] !== t || $[32] !== target.code) {
     t15 = target.code !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
       onClick: () => copyText(target.code ?? ""),
       children: [/*#__PURE__*/_jsx(Icon, {
@@ -173,14 +179,14 @@ export function TimelineMenuPopup(t0) {
         size: 14
       }), " ", t("timeline.menu.copyCode")]
     });
-    $[29] = t;
-    $[30] = target.code;
-    $[31] = t15;
+    $[31] = t;
+    $[32] = target.code;
+    $[33] = t15;
   } else {
-    t15 = $[31];
+    t15 = $[33];
   }
   let t16;
-  if ($[32] !== markdown || $[33] !== t) {
+  if ($[34] !== markdown || $[35] !== t) {
     t16 = markdown !== null && /*#__PURE__*/_jsxs(ContextMenu.Item, {
       onClick: () => copyText(markdown),
       children: [/*#__PURE__*/_jsx(Icon, {
@@ -188,14 +194,14 @@ export function TimelineMenuPopup(t0) {
         size: 14
       }), " ", t("timeline.menu.copyMarkdown")]
     });
-    $[32] = markdown;
-    $[33] = t;
-    $[34] = t16;
+    $[34] = markdown;
+    $[35] = t;
+    $[36] = t16;
   } else {
-    t16 = $[34];
+    t16 = $[36];
   }
   let t17;
-  if ($[35] !== chatId || $[36] !== fork || $[37] !== forkBlocked || $[38] !== t || $[39] !== turnId) {
+  if ($[37] !== chatId || $[38] !== fork || $[39] !== forkBlocked || $[40] !== t || $[41] !== turnId) {
     t17 = chatId !== null && turnId !== null && fork !== null && /*#__PURE__*/_jsx(DisabledReason, {
       reason: forkBlocked,
       children: /*#__PURE__*/_jsxs(ContextMenu.Item, {
@@ -207,74 +213,74 @@ export function TimelineMenuPopup(t0) {
         }), " ", t("timeline.menu.forkFromHere")]
       })
     });
-    $[35] = chatId;
-    $[36] = fork;
-    $[37] = forkBlocked;
-    $[38] = t;
-    $[39] = turnId;
-    $[40] = t17;
+    $[37] = chatId;
+    $[38] = fork;
+    $[39] = forkBlocked;
+    $[40] = t;
+    $[41] = turnId;
+    $[42] = t17;
   } else {
-    t17 = $[40];
+    t17 = $[42];
   }
   let t18;
-  if ($[41] !== chatId || $[42] !== markable) {
+  if ($[43] !== chatId || $[44] !== markable) {
     t18 = chatId !== null && markable !== null && /*#__PURE__*/_jsx(BookmarkMenuItems, {
       chatId: chatId,
       itemId: markable
     });
-    $[41] = chatId;
-    $[42] = markable;
-    $[43] = t18;
+    $[43] = chatId;
+    $[44] = markable;
+    $[45] = t18;
   } else {
-    t18 = $[43];
+    t18 = $[45];
   }
   let t19;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
     t19 = /*#__PURE__*/_jsx(ContextMenu.Separator, {});
-    $[44] = t19;
+    $[46] = t19;
   } else {
-    t19 = $[44];
+    t19 = $[46];
   }
   let t20;
-  if ($[45] !== thread.current) {
+  if ($[47] !== thread.current) {
     t20 = () => selectAllWithin(thread.current);
-    $[45] = thread.current;
-    $[46] = t20;
+    $[47] = thread.current;
+    $[48] = t20;
   } else {
-    t20 = $[46];
+    t20 = $[48];
   }
   let t21;
-  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
     t21 = /*#__PURE__*/_jsx(Icon, {
       icon: Scan,
       size: 14
     });
-    $[47] = t21;
+    $[49] = t21;
   } else {
-    t21 = $[47];
+    t21 = $[49];
   }
   let t22;
-  if ($[48] !== t) {
+  if ($[50] !== t) {
     t22 = t("common.action.selectAll");
-    $[48] = t;
-    $[49] = t22;
+    $[50] = t;
+    $[51] = t22;
   } else {
-    t22 = $[49];
+    t22 = $[51];
   }
   let t23;
-  if ($[50] !== t20 || $[51] !== t22) {
+  if ($[52] !== t20 || $[53] !== t22) {
     t23 = /*#__PURE__*/_jsxs(ContextMenu.Item, {
       onClick: t20,
       children: [t21, " ", t22]
     });
-    $[50] = t20;
-    $[51] = t22;
-    $[52] = t23;
+    $[52] = t20;
+    $[53] = t22;
+    $[54] = t23;
   } else {
-    t23 = $[52];
+    t23 = $[54];
   }
   let t24;
-  if ($[53] !== fileLinks || $[54] !== openInPreview || $[55] !== t || $[56] !== target.path) {
+  if ($[55] !== fileLinks || $[56] !== openInPreview || $[57] !== t || $[58] !== target.path) {
     t24 = target.path !== null && fileLinks !== null && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(ContextMenu.Separator, {}), /*#__PURE__*/_jsxs(ContextMenu.Item, {
         onClick: openInPreview,
@@ -284,41 +290,41 @@ export function TimelineMenuPopup(t0) {
         }), " ", t("timeline.menu.openInPreview")]
       })]
     });
-    $[53] = fileLinks;
-    $[54] = openInPreview;
-    $[55] = t;
-    $[56] = target.path;
-    $[57] = t24;
+    $[55] = fileLinks;
+    $[56] = openInPreview;
+    $[57] = t;
+    $[58] = target.path;
+    $[59] = t24;
   } else {
-    t24 = $[57];
+    t24 = $[59];
   }
   let t25;
-  if ($[58] !== column) {
+  if ($[60] !== column) {
     t25 = column && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(ContextMenu.Separator, {}), /*#__PURE__*/_jsx(ReadingWidthSubmenu, {})]
     });
-    $[58] = column;
-    $[59] = t25;
+    $[60] = column;
+    $[61] = t25;
   } else {
-    t25 = $[59];
+    t25 = $[61];
   }
   let t26;
-  if ($[60] !== t13 || $[61] !== t14 || $[62] !== t15 || $[63] !== t16 || $[64] !== t17 || $[65] !== t18 || $[66] !== t23 || $[67] !== t24 || $[68] !== t25) {
+  if ($[62] !== t13 || $[63] !== t14 || $[64] !== t15 || $[65] !== t16 || $[66] !== t17 || $[67] !== t18 || $[68] !== t23 || $[69] !== t24 || $[70] !== t25) {
     t26 = /*#__PURE__*/_jsxs(ContextMenu.Popup, {
       children: [t13, t14, t15, t16, t17, t18, t19, t23, t24, t25]
     });
-    $[60] = t13;
-    $[61] = t14;
-    $[62] = t15;
-    $[63] = t16;
-    $[64] = t17;
-    $[65] = t18;
-    $[66] = t23;
-    $[67] = t24;
-    $[68] = t25;
-    $[69] = t26;
-  } else {
-    t26 = $[69];
+    $[62] = t13;
+    $[63] = t14;
+    $[64] = t15;
+    $[65] = t16;
+    $[66] = t17;
+    $[67] = t18;
+    $[68] = t23;
+    $[69] = t24;
+    $[70] = t25;
+    $[71] = t26;
+  } else {
+    t26 = $[71];
   }
   return t26;
 }

package/dist/chat/ui/chip-clipboard.d.ts

@@ -0,0 +1,9 @@
+import type { ChatAssistantItem, ChatUserItem } from '@adecore/agent-contracts';
+import { type ClipboardChips } from '../mentions.js';
+import type { TimelineRow } from '../logic/timeline.js';
+import type { ReferenceLookup } from './reference-lookup.js';
+export declare function messageClipboardChips(item: ChatUserItem | ChatAssistantItem, text: string, lookup: Pick<ReferenceLookup, 'items' | 'referenced'>): ClipboardChips;
+export declare function rowClipboardChips(row: TimelineRow, text: string, lookup: Pick<ReferenceLookup, 'items' | 'referenced'>): ClipboardChips;
+export declare function selectionChips(selection: Selection): ClipboardChips;
+export declare function copySelectionWithChips(event: ClipboardEvent): void;
+export declare function copyWithChips(chips: ClipboardChips): void;

package/dist/chat/ui/chip-clipboard.js

@@ -0,0 +1,105 @@
+import { copyText } from '@adecore/ui';
+import { referenceTokens } from '../chat-references.js';
+import { clipboardChipsOf, hasClipboardChips, tokenizeChips, tokenizeNamedReferences, writeClipboardChips } from '../mentions.js';
+/* The chips a copy of a whole message carries: what the person picked, or what a reply names. */
+export function messageClipboardChips(item, text, lookup) {
+  if (item.kind === 'assistant') {
+    return clipboardChipsOf(text, tokenizeNamedReferences(text, lookup.items, lookup.referenced));
+  }
+  const tokens = referenceTokens([...(item.chats ?? []), ...(item.references ?? [])], lookup.items);
+  return clipboardChipsOf(text, tokenizeChips(text, item.mentions ?? [], item.skills ?? [], tokens));
+}
+/* The chips a copy of a row of the thread carries; only a message has any. */
+export function rowClipboardChips(row, text, lookup) {
+  if (row.kind === 'user' || row.kind === 'assistant') {
+    return messageClipboardChips(row.item, text, lookup);
+  }
+  return clipboardChipsOf(text, []);
+}
+/* What a chip the transcript drew stands for, read back from the attributes `TokenChip` writes. */
+function segmentOf(chip) {
+  const value = chip.getAttribute('data-chip-value');
+  if (value === null) {
+    return null;
+  }
+  switch (chip.getAttribute('data-chip')) {
+    case 'mention':
+      return {
+        kind: 'mention',
+        path: value
+      };
+    case 'skill':
+      return {
+        kind: 'skill',
+        name: value
+      };
+    case 'reference':
+      {
+        const name = chip.getAttribute('data-chip-name');
+        return name === null || name === '' ? null : {
+          kind: 'reference',
+          id: value,
+          name
+        };
+      }
+    default:
+      return null;
+  }
+}
+/* The chips a selection holds whole, beside the text it copies; a chip cut in half is only text. */
+export function selectionChips(selection) {
+  const segments = [];
+  for (let i = 0; i < selection.rangeCount; i++) {
+    const container = selection.getRangeAt(i).commonAncestorContainer;
+    const root = container instanceof Element ? container : container.parentElement;
+    const own = root?.closest('[data-chip]');
+    const candidates = own ? [own] : [...(root?.querySelectorAll('[data-chip]') ?? [])];
+    for (const chip of candidates) {
+      const segment = selection.containsNode(chip, false) ? segmentOf(chip) : null;
+      if (segment !== null) {
+        segments.push(segment);
+      }
+    }
+  }
+  return clipboardChipsOf(selection.toString(), segments);
+}
+/* A copy of a selection in the thread, which carries the chips in it as well when it holds any. */
+export function copySelectionWithChips(event) {
+  const selection = document.getSelection();
+  if (event.defaultPrevented || event.clipboardData === null || selection === null || selection.isCollapsed) {
+    return;
+  }
+  const chips = selectionChips(selection);
+  if (!hasClipboardChips(chips)) {
+    return;
+  }
+  writeClipboardChips(event.clipboardData, chips);
+  event.preventDefault();
+}
+/*
+ * Copies a text and its chips. The asynchronous clipboard writes no type of an app's own that a paste
+ * can read, so the copy goes through a copy event, which only a page with the user's gesture gets.
+ */
+export function copyWithChips(chips) {
+  if (!hasClipboardChips(chips) || typeof document.execCommand !== 'function') {
+    void copyText(chips.text);
+    return;
+  }
+  let written = false;
+  const write = event => {
+    if (event.clipboardData !== null) {
+      writeClipboardChips(event.clipboardData, chips);
+      event.preventDefault();
+      written = true;
+    }
+  };
+  document.addEventListener('copy', write, true);
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.removeEventListener('copy', write, true);
+  }
+  if (!written) {
+    void copyText(chips.text);
+  }
+}

package/dist/chat/ui/chips.d.ts

@@ -1,4 +1,9 @@
 export declare const MENTION_TONE = "bg-accent-soft text-accent shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--accent)_25%,transparent)]";
 export declare const SKILL_TONE = "bg-skill-soft text-skill shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--skill)_25%,transparent)]";
+export declare const REFERENCE_TONE = "bg-text/8 text-text shadow-[inset_0_0_0_1px_var(--border-strong)]";
+export declare const REFERENCE_GONE_TONE = "bg-text/4 text-text-faint shadow-[inset_0_0_0_1px_var(--border)]";
 export declare const CHIP_IN_EDITOR = "box-decoration-clone rounded-md px-1 py-0.5";
+export declare const TOKEN_IN_MESSAGE = "box-decoration-clone rounded-md px-1.5 py-0.5 text-xs font-medium";
+export declare const TOKEN_ICON = "mr-1 inline align-[calc(0.5cap-7px)]!";
+export declare const TOKEN_ICON_IN_EDITOR = "mr-1 inline-block align-[calc(0.5cap-6px)]";
 export declare const CHIP_IN_MESSAGE = "inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium";

package/dist/chat/ui/chips.js

@@ -1,11 +1,25 @@
-/* An `@file` or `$skill` token drawn as a pill: the tone says which of the two it is, the shape
+/* An `@file`, `$skill` or `#reference` token drawn as a pill: the tone says which it is, the shape
    says where it is drawn. */
 export const MENTION_TONE = 'bg-accent-soft text-accent shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--accent)_25%,transparent)]';
 /* A skill is the same token shape as a file mention, in its own hue. */
 export const SKILL_TONE = 'bg-skill-soft text-skill shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--skill)_25%,transparent)]';
+/* A `#` to a view, node or chat is neutral, so it never reads as a file or a skill. */
+export const REFERENCE_TONE = 'bg-text/8 text-text shadow-[inset_0_0_0_1px_var(--border-strong)]';
+/* A `#` whose view or node is no longer in the project. */
+export const REFERENCE_GONE_TONE = 'bg-text/4 text-text-faint shadow-[inset_0_0_0_1px_var(--border)]';
 /* The pill in the composer's editor, around the token's own characters: the editor places the caret
    from what it drew, so padding is safe, and a chip that wraps keeps it on every fragment. */
 export const CHIP_IN_EDITOR = 'box-decoration-clone rounded-md px-1 py-0.5';
+/* A picked or named token in a message or a reply, a shade smaller than the text around it. Inline like
+   the editor's pill, so its name sits on the baseline of the sentence, and a selection copies it on the
+   same line as the words around it, where a flex box would put it on lines of its own. */
+export const TOKEN_IN_MESSAGE = 'box-decoration-clone rounded-md px-1.5 py-0.5 text-xs font-medium';
+/* The mark in place of the sigil, a 14px icon. Inline, since the base styles make an svg a block of its
+   own. Its middle goes on the middle of the name's capitals, where a mark reads as centered; the middle
+   of the x-height `Icon` aligns on sits low next to a capital. */
+export const TOKEN_ICON = 'mr-1 inline align-[calc(0.5cap-7px)]!';
+/* The same middle for the 12px mark the composer draws, in a box whose bottom edge is its baseline. */
+export const TOKEN_ICON_IN_EDITOR = 'mr-1 inline-block align-[calc(0.5cap-6px)]';
 /* The same pill in the transcript: a real inline box a shade smaller than the text around it, with
    the icon in place of the sigil. */
 export const CHIP_IN_MESSAGE = 'inline-flex h-5 max-w-full items-center gap-1 rounded-md px-1.5 align-[-3px] text-xs/none font-medium';