@adecore/agents-react 0.37.2 → 0.38.0

package/dist/chat/ui/MessageActions.js

@@ -9,14 +9,16 @@ import { markdownOf, messageTextOf } from '../logic/timeline-copy.js';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { useChatRow, useChats } from '../../state/chats.js';
-import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
+import { ButtonGroup, IconButton, Tooltip } from '@adecore/ui';
 import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
+import { copyWithChips, messageClipboardChips } from './chip-clipboard.js';
+import { useReferenceLookup } from './thread-references.js';
 import { TIMESTAMP_FORMAT } from './timestamp-format.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COPIED_MS = 1500;
 /* Hidden actions keep their height, so hovering never forces the virtualizer to remeasure. */
 export function MessageActions(t0) {
-  const $ = _c(58);
+  const $ = _c(59);
   const {
     chatId,
     row
@@ -88,6 +90,7 @@ export function MessageActions(t0) {
   }
   const canFork = t5;
   const [copied, setCopied] = useState(false);
+  const lookup = useReferenceLookup(chatId);
   let t6;
   let t7;
   if ($[13] !== copied) {
@@ -108,7 +111,7 @@ export function MessageActions(t0) {
   }
   useEffect(t6, t7);
   let t8;
-  if ($[16] !== chatId || $[17] !== row || $[18] !== scope) {
+  if ($[16] !== chatId || $[17] !== lookup || $[18] !== row || $[19] !== scope) {
     t8 = plain => {
       const item_1 = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
       const current = item_1?.kind === row.kind ? {
@@ -117,37 +120,38 @@ export function MessageActions(t0) {
       } : row;
       const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
       if (text !== null) {
-        copyText(text);
+        copyWithChips(messageClipboardChips(current.item, text, lookup));
         setCopied(true);
       }
     };
     $[16] = chatId;
-    $[17] = row;
-    $[18] = scope;
-    $[19] = t8;
+    $[17] = lookup;
+    $[18] = row;
+    $[19] = scope;
+    $[20] = t8;
   } else {
-    t8 = $[19];
+    t8 = $[20];
   }
   const copy = t8;
   let t9;
-  if ($[20] !== t) {
+  if ($[21] !== t) {
     t9 = t("timeline.actions.label");
-    $[20] = t;
-    $[21] = t9;
+    $[21] = t;
+    $[22] = t9;
   } else {
-    t9 = $[21];
+    t9 = $[22];
   }
   const t10 = row.kind === "user" && "mt-1.5 justify-end";
   let t11;
-  if ($[22] !== t10) {
+  if ($[23] !== t10) {
     t11 = clsx("flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100", t10);
-    $[22] = t10;
-    $[23] = t11;
+    $[23] = t10;
+    $[24] = t11;
   } else {
-    t11 = $[23];
+    t11 = $[24];
   }
   let t12;
-  if ($[24] !== bookmarked || $[25] !== canFork || $[26] !== chatId || $[27] !== copied || $[28] !== copy || $[29] !== fork || $[30] !== hasText || $[31] !== host || $[32] !== row.id || $[33] !== scope || $[34] !== streaming || $[35] !== t || $[36] !== turnId) {
+  if ($[25] !== bookmarked || $[26] !== canFork || $[27] !== chatId || $[28] !== copied || $[29] !== copy || $[30] !== fork || $[31] !== hasText || $[32] !== host || $[33] !== row.id || $[34] !== scope || $[35] !== streaming || $[36] !== t || $[37] !== turnId) {
     t12 = !streaming && /*#__PURE__*/_jsxs(ButtonGroup, {
       render: /*#__PURE__*/_jsx("span", {}),
       children: [!bookmarked && /*#__PURE__*/_jsx(IconButton, {
@@ -167,97 +171,97 @@ export function MessageActions(t0) {
         onClick: e => copy(e.shiftKey)
       })]
     });
-    $[24] = bookmarked;
-    $[25] = canFork;
-    $[26] = chatId;
-    $[27] = copied;
-    $[28] = copy;
-    $[29] = fork;
-    $[30] = hasText;
-    $[31] = host;
-    $[32] = row.id;
-    $[33] = scope;
-    $[34] = streaming;
-    $[35] = t;
-    $[36] = turnId;
-    $[37] = t12;
+    $[25] = bookmarked;
+    $[26] = canFork;
+    $[27] = chatId;
+    $[28] = copied;
+    $[29] = copy;
+    $[30] = fork;
+    $[31] = hasText;
+    $[32] = host;
+    $[33] = row.id;
+    $[34] = scope;
+    $[35] = streaming;
+    $[36] = t;
+    $[37] = turnId;
+    $[38] = t12;
   } else {
-    t12 = $[37];
+    t12 = $[38];
   }
   let t13;
-  if ($[38] !== row.item.createdAt) {
+  if ($[39] !== row.item.createdAt) {
     t13 = formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT);
-    $[38] = row.item.createdAt;
-    $[39] = t13;
+    $[39] = row.item.createdAt;
+    $[40] = t13;
   } else {
-    t13 = $[39];
+    t13 = $[40];
   }
   let t14;
-  if ($[40] !== row.item.createdAt) {
+  if ($[41] !== row.item.createdAt) {
     t14 = new Date(row.item.createdAt).toISOString();
-    $[40] = row.item.createdAt;
-    $[41] = t14;
+    $[41] = row.item.createdAt;
+    $[42] = t14;
   } else {
-    t14 = $[41];
+    t14 = $[42];
   }
   const t15 = row.kind === "assistant" && "order-first";
   let t16;
-  if ($[42] !== t15) {
+  if ($[43] !== t15) {
     t16 = clsx("shrink-0 text-xs text-text-faint tabular-nums select-none", t15);
-    $[42] = t15;
-    $[43] = t16;
+    $[43] = t15;
+    $[44] = t16;
   } else {
-    t16 = $[43];
+    t16 = $[44];
   }
   let t17;
-  if ($[44] !== row.item.createdAt) {
+  if ($[45] !== row.item.createdAt) {
     t17 = formatClock(row.item.createdAt);
-    $[44] = row.item.createdAt;
-    $[45] = t17;
+    $[45] = row.item.createdAt;
+    $[46] = t17;
   } else {
-    t17 = $[45];
+    t17 = $[46];
   }
   let t18;
-  if ($[46] !== t14 || $[47] !== t16 || $[48] !== t17) {
+  if ($[47] !== t14 || $[48] !== t16 || $[49] !== t17) {
     t18 = /*#__PURE__*/_jsx("time", {
       dateTime: t14,
       className: t16,
       children: t17
     });
-    $[46] = t14;
-    $[47] = t16;
-    $[48] = t17;
-    $[49] = t18;
+    $[47] = t14;
+    $[48] = t16;
+    $[49] = t17;
+    $[50] = t18;
   } else {
-    t18 = $[49];
+    t18 = $[50];
   }
   let t19;
-  if ($[50] !== t13 || $[51] !== t18) {
+  if ($[51] !== t13 || $[52] !== t18) {
     t19 = /*#__PURE__*/_jsx(Tooltip, {
       label: t13,
       children: t18
     });
-    $[50] = t13;
-    $[51] = t18;
-    $[52] = t19;
+    $[51] = t13;
+    $[52] = t18;
+    $[53] = t19;
   } else {
-    t19 = $[52];
+    t19 = $[53];
   }
   let t20;
-  if ($[53] !== t11 || $[54] !== t12 || $[55] !== t19 || $[56] !== t9) {
+  if ($[54] !== t11 || $[55] !== t12 || $[56] !== t19 || $[57] !== t9) {
     t20 = /*#__PURE__*/_jsxs("div", {
       role: "toolbar",
       "aria-label": t9,
       className: t11,
       children: [t12, t19]
     });
-    $[53] = t11;
-    $[54] = t12;
-    $[55] = t19;
-    $[56] = t9;
-    $[57] = t20;
+    $[54] = t11;
+    $[55] = t12;
+    $[56] = t19;
+    $[57] = t9;
+    $[58] = t20;
   } else {
-    t20 = $[57];
+    t20 = $[58];
   }
   return t20;
 }

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

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+interface TokenChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    kind: 'mention' | 'skill' | 'reference' | 'gone';
+    value?: string;
+    sigil?: string;
+    icon: ReactNode;
+    label: string;
+    tone: string;
+    onOpen?: () => void;
+}
+export declare function TokenChip({ kind, value, sigil, icon, label, tone, onOpen, className, ...rest }: TokenChipProps): import("react").JSX.Element;
+export declare function ReferenceChip({ id }: {
+    id: string;
+}): import("react").JSX.Element;
+export {};

package/dist/chat/ui/ReferenceChip.js

@@ -0,0 +1,255 @@
+import { c as _c } from "react/compiler-runtime";
+import { useContext } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { CircleOff } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+import { REFERENCE_GONE_TONE, REFERENCE_TONE, TOKEN_ICON, TOKEN_IN_MESSAGE } from './chips.js';
+import { REFERENCE_ICONS } from './reference-icons.js';
+import { ReferenceLookupContext } from './reference-lookup.js';
+/*
+ * One token in the transcript. One that opens is a span with a button's role rather than a button,
+ * since a button is a box with a baseline of its own and would not sit on the line the others sit on.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TokenChip(t0) {
+  const $ = _c(30);
+  let className;
+  let icon;
+  let kind;
+  let label;
+  let onOpen;
+  let rest;
+  let sigil;
+  let t1;
+  let tone;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      kind,
+      value,
+      sigil,
+      icon,
+      label,
+      tone,
+      onOpen,
+      className,
+      ...rest
+    } = t0);
+    t1 = e => {
+      if (onOpen !== undefined && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onOpen();
+      }
+    };
+    $[0] = t0;
+    $[1] = className;
+    $[2] = icon;
+    $[3] = kind;
+    $[4] = label;
+    $[5] = onOpen;
+    $[6] = rest;
+    $[7] = sigil;
+    $[8] = t1;
+    $[9] = tone;
+    $[10] = value;
+  } else {
+    className = $[1];
+    icon = $[2];
+    kind = $[3];
+    label = $[4];
+    onOpen = $[5];
+    rest = $[6];
+    sigil = $[7];
+    t1 = $[8];
+    tone = $[9];
+    value = $[10];
+  }
+  const onKeyDown = t1;
+  const t2 = onOpen !== undefined && "cursor-pointer focus-visible:outline-2 focus-visible:outline-accent";
+  let t3;
+  if ($[11] !== className || $[12] !== t2 || $[13] !== tone) {
+    t3 = clsx(TOKEN_IN_MESSAGE, tone, t2, className);
+    $[11] = className;
+    $[12] = t2;
+    $[13] = tone;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const t4 = kind === "reference" ? label : undefined;
+  const t5 = onOpen === undefined ? undefined : "button";
+  const t6 = onOpen === undefined ? undefined : 0;
+  const t7 = onOpen === undefined ? undefined : onKeyDown;
+  let t8;
+  if ($[15] !== sigil) {
+    t8 = sigil !== undefined && /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: sigil
+    });
+    $[15] = sigil;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== icon || $[18] !== kind || $[19] !== label || $[20] !== onOpen || $[21] !== rest || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== value) {
+    t9 = /*#__PURE__*/_jsxs("span", {
+      ...rest,
+      className: t3,
+      "data-chip": kind,
+      "data-chip-value": value,
+      "data-chip-name": t4,
+      role: t5,
+      tabIndex: t6,
+      onClick: onOpen,
+      onKeyDown: t7,
+      children: [icon, t8, label]
+    });
+    $[17] = icon;
+    $[18] = kind;
+    $[19] = label;
+    $[20] = onOpen;
+    $[21] = rest;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
+    $[28] = value;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  return t9;
+}
+/* A view, node or chat a message points at, under the name it has now; one that went says so. */
+export function ReferenceChip(t0) {
+  const $ = _c(26);
+  const {
+    id
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    items,
+    open
+  } = useContext(ReferenceLookupContext);
+  let t1;
+  if ($[0] !== id || $[1] !== items) {
+    let t2;
+    if ($[3] !== id) {
+      t2 = candidate => candidate.id === id;
+      $[3] = id;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = items.find(t2);
+    $[0] = id;
+    $[1] = items;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const item = t1;
+  if (item === undefined) {
+    let t2;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = /*#__PURE__*/_jsx(Icon, {
+        icon: CircleOff,
+        size: 14,
+        className: TOKEN_ICON
+      });
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[6] !== t) {
+      t3 = t("references.gone");
+      $[6] = t;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== t3) {
+      t4 = /*#__PURE__*/_jsx(TokenChip, {
+        kind: "gone",
+        icon: t2,
+        label: t3,
+        tone: REFERENCE_GONE_TONE
+      });
+      $[8] = t3;
+      $[9] = t4;
+    } else {
+      t4 = $[9];
+    }
+    return t4;
+  }
+  const t2 = item.id;
+  const t3 = REFERENCE_ICONS[item.kind];
+  let t4;
+  if ($[10] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Icon, {
+      icon: t3,
+      size: 14,
+      className: TOKEN_ICON
+    });
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== item.name || $[13] !== t) {
+    t5 = item.name || t("references.untitled");
+    $[12] = item.name;
+    $[13] = t;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  const t6 = open !== null && "hover:bg-text/12";
+  let t7;
+  if ($[15] !== t6) {
+    t7 = clsx(REFERENCE_TONE, t6);
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== item.id || $[18] !== open) {
+    t8 = open === null ? undefined : () => open(item.id);
+    $[17] = item.id;
+    $[18] = open;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== item.id || $[21] !== t4 || $[22] !== t5 || $[23] !== t7 || $[24] !== t8) {
+    t9 = /*#__PURE__*/_jsx(TokenChip, {
+      kind: "reference",
+      value: t2,
+      sigil: "#",
+      icon: t4,
+      label: t5,
+      tone: t7,
+      onOpen: t8
+    });
+    $[20] = item.id;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
+  } else {
+    t9 = $[25];
+  }
+  return t9;
+}