@adecore/agents-react 0.37.1 → 0.37.3

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;
+}

package/dist/chat/ui/RunSettings.js

@@ -10,7 +10,7 @@ import { AgentIcon } from '../../agents/AgentIcon.js';
 import { modelName, shortModelName } from '../../agents/model-name.js';
 import { ModelMarks } from './ModelMarks.js';
 import { SessionLine } from './SessionLine.js';
-import { favoritesFirst, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries.js';
+import { favoritesFirst, inPickerOrder, searchModels, separatesGroups, shortlistOf, wantsModelSearch } from '../logic/picker-entries.js';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences.js';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions } from '../logic/context-usage.js';
 import { RUNTIME_MODES } from '../runtime-modes.js';
@@ -56,7 +56,7 @@ function modelValue(provider, slug) {
 }
 /* Each provider's current or legacy models; a provider with none of them is left out. */
 function modelGroupsOf(providers, legacy) {
-  return providers.map(entry => ({
+  return inPickerOrder(providers).map(entry => ({
     entry,
     models: entry.models.filter(row => row.legacy === true === legacy)
   })).filter(group => group.models.length > 0);
@@ -196,7 +196,7 @@ export function RunSettings(t0) {
   const favoritesOf = t8;
   let t9;
   if ($[19] !== favoritesOf || $[20] !== providers || $[21] !== query) {
-    t9 = query.trim() === "" ? null : searchModels(providers, query, favoritesOf);
+    t9 = query.trim() === "" ? null : searchModels(inPickerOrder(providers), query, favoritesOf);
     $[19] = favoritesOf;
     $[20] = providers;
     $[21] = query;
@@ -391,19 +391,21 @@ export function RunSettings(t0) {
   const providerModels = t17;
   let t18;
   if ($[51] !== grouped || $[52] !== providerModels) {
-    t18 = groups => groups.map(t19 => {
+    t18 = groups => groups.map((t19, i_0) => {
       const {
         entry: entry_3,
         models: models_1
       } = t19;
-      return /*#__PURE__*/_jsxs(Menu.Group, {
-        children: [grouped && /*#__PURE__*/_jsxs(Menu.GroupLabel, {
-          className: "flex items-center gap-1.5",
-          children: [/*#__PURE__*/_jsx(AgentIcon, {
-            kind: entry_3.kind,
-            size: 12
-          }), entry_3.name]
-        }), providerModels(entry_3, models_1)]
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [separatesGroups(groups[i_0 - 1]?.entry.kind, entry_3.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), /*#__PURE__*/_jsxs(Menu.Group, {
+          children: [grouped && /*#__PURE__*/_jsxs(Menu.GroupLabel, {
+            className: "flex items-center gap-1.5",
+            children: [/*#__PURE__*/_jsx(AgentIcon, {
+              kind: entry_3.kind,
+              size: 12
+            }), entry_3.name]
+          }), providerModels(entry_3, models_1)]
+        })]
       }, entry_3.kind);
     });
     $[51] = grouped;
@@ -657,19 +659,21 @@ export function RunSettings(t0) {
     t47 = found !== null && found.length > 0 && /*#__PURE__*/_jsx(Menu.RadioGroup, {
       value: chosenModel,
       onValueChange: chooseModel,
-      children: found.map(t48 => {
+      children: found.map((t48, i_1) => {
         const {
           entry: entry_5,
           models: models_2
         } = t48;
-        return /*#__PURE__*/_jsxs(Menu.Group, {
-          children: [grouped && /*#__PURE__*/_jsxs(Menu.GroupLabel, {
-            className: "flex items-center gap-1.5",
-            children: [/*#__PURE__*/_jsx(AgentIcon, {
-              kind: entry_5.kind,
-              size: 12
-            }), entry_5.name]
-          }), byMaker(entry_5, models_2)]
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [separatesGroups(found[i_1 - 1]?.entry.kind, entry_5.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), /*#__PURE__*/_jsxs(Menu.Group, {
+            children: [grouped && /*#__PURE__*/_jsxs(Menu.GroupLabel, {
+              className: "flex items-center gap-1.5",
+              children: [/*#__PURE__*/_jsx(AgentIcon, {
+                kind: entry_5.kind,
+                size: 12
+              }), entry_5.name]
+            }), byMaker(entry_5, models_2)]
+          })]
         }, entry_5.kind);
       })
     });

package/dist/chat/ui/Timeline.js

@@ -457,6 +457,8 @@ export function Timeline({
   });
   const [loadingEarlier, setLoadingEarlier] = useState(false);
   const loadingEarlierRef = useRef(false);
+  const anchorRef = useRef(null);
+  const headRef = useRef(undefined);
   const loadEarlier = useCallback(() => {
     if (cursor === null || loadingEarlierRef.current) {
       return;
@@ -559,7 +561,7 @@ export function Timeline({
   const [, settleLayout] = useReducer(count => count + 1, 0);
   // Changing this callback invalidates every cached measurement, including on a scroll.
   const getItemKey = useCallback(index => rows[index].id, [rows]);
-  // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
+  // Follow the browser's actual end below. Virtual end anchoring drifts when growth still fits without scrolling.
   // oxlint-disable-next-line react/incompatible-library
   const virtualizer = useVirtualizer({
     count: loadingHistory ? 0 : rows.length,
@@ -567,7 +569,6 @@ export function Timeline({
     estimateSize: () => ESTIMATED_ROW_PX,
     getItemKey,
     overscan: 8,
-    anchorTo: 'end',
     // Include the end before the first pin, so its actual heights are known before revealing it.
     rangeExtractor: range => {
       const indexes = defaultRangeExtractor(range);
@@ -617,10 +618,32 @@ export function Timeline({
       viewport: element_2.clientHeight
     };
   }, [rows.length, totalSize, composerHeight, frame.height]);
+  // Prepending history moves rows; keep the reader on the same row at the same height.
+  useLayoutEffect(() => {
+    const element_3 = scrollRef.current;
+    const head = order?.[0];
+    const moved = head !== headRef.current;
+    headRef.current = head;
+    if (element_3 === null) {
+      return;
+    }
+    const anchor = anchorRef.current;
+    const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_8 => row_8.id === anchor.id) : -1;
+    if (anchor !== null && index_2 !== -1) {
+      virtualizer.getTotalSize();
+      element_3.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
+      return;
+    }
+    const row_9 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
+    anchorRef.current = row_9 === undefined ? null : {
+      id: String(row_9.key),
+      offset: row_9.start - element_3.scrollTop
+    };
+  });
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
   useEffect(() => {
-    const element_3 = scrollRef.current;
-    if (element_3 !== null && wantsEarlier(element_3)) {
+    const element_4 = scrollRef.current;
+    if (element_4 !== null && wantsEarlier(element_4)) {
       loadEarlier();
     }
   }, [rows, loadEarlier, frame.height]);
@@ -634,8 +657,8 @@ export function Timeline({
   const measurements = virtualizer.measurementsCache;
   const starts = {
     length: ticks.length,
-    at: index_2 => {
-      const tick = ticks.at(index_2);
+    at: index_3 => {
+      const tick = ticks.at(index_3);
       return tick === undefined ? undefined : measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX;
     }
   };
@@ -662,7 +685,7 @@ export function Timeline({
     starts,
     inView
   };
-  const followStrip = element_4 => {
+  const followStrip = element_5 => {
     const {
       starts: current_0,
       inView: shown
@@ -672,7 +695,7 @@ export function Timeline({
     }
     const next = messagesInView({
       starts: current_0,
-      scrollTop: element_4.scrollTop,
+      scrollTop: element_5.scrollTop,
       visibleHeight: visibleHeightRef.current
     });
     if (next?.first !== shown.first || next?.last !== shown.last) {
@@ -697,11 +720,11 @@ export function Timeline({
     openGroup: groups.add,
     openSubagent: subagents.add,
     // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
-    scrollToRow: index_3 => {
+    scrollToRow: index_4 => {
       const top_0 = scrollRef.current?.scrollTop ?? 0;
       const bottom = top_0 + visibleHeightRef.current;
-      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_3 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
-        virtualizer.scrollToIndex(index_3, {
+      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_4 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
+        virtualizer.scrollToIndex(index_4, {
           align: 'center'
         });
       }
@@ -719,8 +742,8 @@ export function Timeline({
   }, [searching, loadEarlier]);
   const found = useMemo(() => searching ? ticksWithHits(ticks, chatFind.hitRows) : [], [searching, ticks, chatFind.hitRows]);
   const foundCurrent = chatFind.currentRow === null ? null : tickOfRow(ticks, chatFind.currentRow);
-  const jumpTo = index_4 => {
-    const tick_0 = ticks[index_4];
+  const jumpTo = index_5 => {
+    const tick_0 = ticks[index_5];
     if (!tick_0) {
       return;
     }
@@ -763,10 +786,10 @@ export function Timeline({
       }
       return;
     }
-    const index_5 = rows.findIndex(row_8 => row_8.id === seeking.itemId);
-    if (index_5 !== -1) {
+    const index_6 = rows.findIndex(row_10 => row_10.id === seeking.itemId);
+    if (index_6 !== -1) {
       setSeeking(null);
-      showRowAtTop(virtualizer, followRef, index_5);
+      showRowAtTop(virtualizer, followRef, index_6);
       if (seeking.options?.flash) {
         useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
       }
@@ -837,9 +860,9 @@ export function Timeline({
       turnId: turnId_0,
       target: target_0
     } = revealing;
-    const changes = target_0 === 'changes' ? rows.findIndex(row_9 => row_9.kind === 'changed-files' && row_9.turnId === turnId_0) : -1;
+    const changes = target_0 === 'changes' ? rows.findIndex(row_11 => row_11.kind === 'changed-files' && row_11.turnId === turnId_0) : -1;
     const opening = order?.map(id_0 => items?.[id_0]).find(item_0 => item_0?.kind === 'user' && item_0.turnId === turnId_0);
-    const found_0 = changes !== -1 ? changes : rows.findIndex(row_10 => row_10.id === opening?.id || row_10.id === `start-${turnId_0}` || row_10.id === `fold-${turnId_0}`);
+    const found_0 = changes !== -1 ? changes : rows.findIndex(row_12 => row_12.id === opening?.id || row_12.id === `start-${turnId_0}` || row_12.id === `fold-${turnId_0}`);
     if (found_0 !== -1) {
       setRevealing(null);
       showRowAtTop(virtualizer, followRef, found_0);
@@ -860,7 +883,7 @@ export function Timeline({
   // The strip is memoized and draws on every scroll, so it gets one callback for its life.
   const jumpRef = useRef(jumpTo);
   jumpRef.current = jumpTo;
-  const pick = useCallback(index_6 => jumpRef.current(index_6), []);
+  const pick = useCallback(index_7 => jumpRef.current(index_7), []);
   // Read when the card asks rather than on every render, so the strip's memo holds while the thread streams.
   const cardChat = useMemo(() => ({
     chatId,
@@ -868,8 +891,8 @@ export function Timeline({
       if (fork === null) {
         return false;
       }
-      const row_11 = useChats.getState().byKey[keyOf(chatId)];
-      return forkRefusal(row_11?.info ?? null, row_11?.structure[turnId_2]) === null;
+      const row_13 = useChats.getState().byKey[keyOf(chatId)];
+      return forkRefusal(row_13?.info ?? null, row_13?.structure[turnId_2]) === null;
     },
     fork: turnId_3 => fork?.(chatId, turnId_3)
   }), [keyOf, chatId, fork]);
@@ -878,11 +901,11 @@ export function Timeline({
     if (!onMainAgent) {
       return false;
     }
-    const index_7 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
-    if (index_7 === null) {
+    const index_8 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
+    if (index_8 === null) {
       return false;
     }
-    jumpTo(index_7);
+    jumpTo(index_8);
     return true;
   };
   useEffect(() => registerMessageStepper(keyOf(chatId), direction_0 => stepRef.current(direction_0)), [keyOf, chatId]);
@@ -993,22 +1016,22 @@ export function Timeline({
                     children: /*#__PURE__*/_jsx(FindRevealContext.Provider, {
                       value: chatFind.reveal,
                       children: virtualRows.map(virtualRow_1 => {
-                        const row_12 = rows[virtualRow_1.index];
+                        const row_14 = rows[virtualRow_1.index];
                         return /*#__PURE__*/_jsx(ThreadRow, {
-                          row: row_12,
+                          row: row_14,
                           previous: virtualRow_1.index > 0 ? rows[virtualRow_1.index - 1] : null,
                           index: virtualRow_1.index,
                           top: virtualRow_1.start,
                           measure: virtualizer.measureElement,
                           chatId: chatId,
-                          flashNonce: flash !== null && flashedRow === row_12.id ? flash.nonce : null,
-                          bookmark: marks.get(row_12.id) ?? null,
+                          flashNonce: flash !== null && flashedRow === row_14.id ? flash.nonce : null,
+                          bookmark: marks.get(row_14.id) ?? null,
                           toggleGroup: groups.toggle,
                           toggleTurn: turns.toggle,
                           toggleSubagent: subagents.toggle,
                           openSubagent: openSubagent,
                           openConversation: openConversation
-                        }, row_12.id);
+                        }, row_14.id);
                       })
                     })
                   })