@adecore/agents-react 0.37.1 → 0.37.3

package/dist/chat/ui/Pickers.js

@@ -10,7 +10,7 @@ import { useChatHost } from '../../host.js';
 import { ChatScopeContext } from '../../scope.js';
 import { useReportedModels } from '../../state/chats.js';
 import { ModelMarks } from './ModelMarks.js';
-import { pickerEntriesOf } from '../logic/picker-entries.js';
+import { inPickerOrder, pickerEntriesOf, separatesGroups } from '../logic/picker-entries.js';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences.js';
 import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash.js';
 import { Button, Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
@@ -23,7 +23,7 @@ const triggerClass = 'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rou
  * provider's model is also how a chat picks its provider; with one CLI the group headers drop.
  */
 export function ModelPicker(t0) {
-  const $ = _c(76);
+  const $ = _c(49);
   const {
     providers,
     provider,
@@ -111,7 +111,7 @@ export function ModelPicker(t0) {
   } else {
     t8 = $[15];
   }
-  const entries = pickerEntriesOf(providers, trimmed, legacyOpen, expanded, {
+  const entries = pickerEntriesOf(inPickerOrder(providers), trimmed, legacyOpen, expanded, {
     provider,
     model: selection.model
   }, t8);
@@ -127,6 +127,10 @@ export function ModelPicker(t0) {
     t9 = $[17];
   }
   const requirementOf = t9;
+  const kindBefore = i => {
+    const before = entries[i - 1];
+    return before === undefined || before.kind === "legacy" ? undefined : before.provider.kind;
+  };
   let t10;
   if ($[18] !== requirementOf) {
     t10 = entry_1 => entry_1.kind === "model" && requirementOf(entry_1) !== null ? [entry_1.provider.kind] : [];
@@ -173,83 +177,63 @@ export function ModelPicker(t0) {
     t13 = $[24];
   }
   useEffect(t12, t13);
-  let t14;
-  if ($[25] !== onChange || $[26] !== requirementOf || $[27] !== setOpen) {
-    t14 = entry_2 => {
-      if (!entry_2) {
-        return;
-      }
-      if (entry_2.kind === "legacy") {
-        setLegacyOpen(true);
-        inputRef.current?.focus();
-        return;
-      }
-      if (entry_2.kind === "all") {
-        const kind_0 = entry_2.provider.kind;
-        setExpanded(now => {
-          const next_0 = new Set(now);
-          if (!next_0.delete(kind_0)) {
-            next_0.add(kind_0);
-          }
-          return next_0;
-        });
-        inputRef.current?.focus();
-        return;
-      }
-      if (requirementOf(entry_2) !== null) {
-        return;
-      }
-      onChange(entry_2.provider.kind, entry_2.model.slug);
-      setOpen(false);
-    };
-    $[25] = onChange;
-    $[26] = requirementOf;
-    $[27] = setOpen;
-    $[28] = t14;
-  } else {
-    t14 = $[28];
-  }
-  const choose = t14;
-  let t15;
-  if ($[29] !== choose || $[30] !== entries || $[31] !== index) {
-    t15 = e => {
-      if (e.key === "ArrowDown") {
+  const choose = entry_2 => {
+    if (!entry_2) {
+      return;
+    }
+    if (entry_2.kind === "legacy") {
+      setLegacyOpen(true);
+      inputRef.current?.focus();
+      return;
+    }
+    if (entry_2.kind === "all") {
+      const kind_0 = entry_2.provider.kind;
+      setExpanded(now => {
+        const next_0 = new Set(now);
+        if (!next_0.delete(kind_0)) {
+          next_0.add(kind_0);
+        }
+        return next_0;
+      });
+      inputRef.current?.focus();
+      return;
+    }
+    if (requirementOf(entry_2) !== null) {
+      return;
+    }
+    onChange(entry_2.provider.kind, entry_2.model.slug);
+    setOpen(false);
+  };
+  const onKeyDown = e => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setIndex(i_0 => entries.length === 0 ? 0 : (i_0 + 1) % entries.length);
+    } else {
+      if (e.key === "ArrowUp") {
         e.preventDefault();
-        setIndex(i => entries.length === 0 ? 0 : (i + 1) % entries.length);
+        setIndex(i_1 => entries.length === 0 ? 0 : (i_1 - 1 + entries.length) % entries.length);
       } else {
-        if (e.key === "ArrowUp") {
+        if (e.key === "Enter") {
           e.preventDefault();
-          setIndex(i_0 => entries.length === 0 ? 0 : (i_0 - 1 + entries.length) % entries.length);
-        } else {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            choose(entries[index]);
-          }
+          choose(entries[index]);
         }
       }
-    };
-    $[29] = choose;
-    $[30] = entries;
-    $[31] = index;
-    $[32] = t15;
+    }
+  };
+  let t14;
+  if ($[25] !== current || $[26] !== owner || $[27] !== t) {
+    t14 = owner ? `${owner.name} · ${current}` : t("pickers.model.choose");
+    $[25] = current;
+    $[26] = owner;
+    $[27] = t;
+    $[28] = t14;
   } else {
-    t15 = $[32];
+    t14 = $[28];
   }
-  const onKeyDown = t15;
+  const t15 = kbd ?? undefined;
   let t16;
-  if ($[33] !== current || $[34] !== owner || $[35] !== t) {
-    t16 = owner ? `${owner.name} · ${current}` : t("pickers.model.choose");
-    $[33] = current;
-    $[34] = owner;
-    $[35] = t;
-    $[36] = t16;
-  } else {
-    t16 = $[36];
-  }
-  const t17 = kbd ?? undefined;
-  let t18;
-  if ($[37] !== chip || $[38] !== current || $[39] !== provider || $[40] !== trigger) {
-    t18 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
+  if ($[29] !== chip || $[30] !== current || $[31] !== provider || $[32] !== trigger) {
+    t16 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
       render: /*#__PURE__*/_jsx(Button, {
         variant: "secondary",
         size: "sm",
@@ -286,117 +270,89 @@ export function ModelPicker(t0) {
         className: "text-text-faint"
       })]
     });
-    $[37] = chip;
-    $[38] = current;
-    $[39] = provider;
-    $[40] = trigger;
-    $[41] = t18;
-  } else {
-    t18 = $[41];
-  }
-  let t19;
-  if ($[42] !== t16 || $[43] !== t17 || $[44] !== t18) {
-    t19 = /*#__PURE__*/_jsx(Tooltip, {
-      label: t16,
-      kbd: t17,
-      children: t18
+    $[29] = chip;
+    $[30] = current;
+    $[31] = provider;
+    $[32] = trigger;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  let t17;
+  if ($[34] !== t14 || $[35] !== t15 || $[36] !== t16) {
+    t17 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t14,
+      kbd: t15,
+      children: t16
     });
-    $[42] = t16;
-    $[43] = t17;
-    $[44] = t18;
-    $[45] = t19;
+    $[34] = t14;
+    $[35] = t15;
+    $[36] = t16;
+    $[37] = t17;
   } else {
-    t19 = $[45];
+    t17 = $[37];
   }
-  let t20;
-  if ($[46] !== finalFocus) {
-    t20 = finalFocus === undefined ? {} : {
+  let t18;
+  if ($[38] !== finalFocus) {
+    t18 = finalFocus === undefined ? {} : {
       finalFocus
     };
-    $[46] = finalFocus;
-    $[47] = t20;
+    $[38] = finalFocus;
+    $[39] = t18;
   } else {
-    t20 = $[47];
+    t18 = $[39];
   }
-  let t21;
-  if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
-    t21 = /*#__PURE__*/_jsx(Icon, {
+  let t19;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /*#__PURE__*/_jsx(Icon, {
       icon: Search,
       size: 14,
       className: "shrink-0 text-text-faint"
     });
-    $[48] = t21;
+    $[40] = t19;
   } else {
-    t21 = $[48];
+    t19 = $[40];
   }
-  let t22;
-  if ($[49] !== t) {
-    t22 = t("pickers.model.search");
-    $[49] = t;
-    $[50] = t22;
+  let t20;
+  if ($[41] !== t) {
+    t20 = t("pickers.model.search");
+    $[41] = t;
+    $[42] = t20;
   } else {
-    t22 = $[50];
+    t20 = $[42];
   }
-  let t23;
-  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-    t23 = e_0 => {
+  let t21;
+  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = e_0 => {
       setQuery(e_0.target.value);
       setIndex(0);
     };
-    $[51] = t23;
+    $[43] = t21;
   } else {
-    t23 = $[51];
+    t21 = $[43];
   }
-  let t24;
-  if ($[52] !== onKeyDown || $[53] !== query || $[54] !== t22) {
-    t24 = /*#__PURE__*/_jsxs("div", {
-      className: "flex items-center gap-2 border-b border-border px-2.5",
-      children: [t21, /*#__PURE__*/_jsx("input", {
-        ref: inputRef,
-        className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
-        placeholder: t22,
-        spellCheck: false,
-        value: query,
-        onChange: t23,
-        onKeyDown: onKeyDown
-      })]
-    });
-    $[52] = onKeyDown;
-    $[53] = query;
-    $[54] = t22;
-    $[55] = t24;
-  } else {
-    t24 = $[55];
-  }
-  let t25;
-  if ($[56] !== entries.length || $[57] !== providers.length || $[58] !== t) {
-    t25 = entries.length === 0 && /*#__PURE__*/_jsx("div", {
-      className: "px-3 py-6 text-center text-xs text-text-faint",
-      children: providers.length === 0 ? t("pickers.model.noProvider") : t("pickers.model.noMatch")
-    });
-    $[56] = entries.length;
-    $[57] = providers.length;
-    $[58] = t;
-    $[59] = t25;
-  } else {
-    t25 = $[59];
-  }
-  const t26 = entries.map((entry_3, i_1) => {
+  const t22 = "max-h-72 overflow-auto p-1";
+  const t23 = "listbox";
+  const t24 = entries.length === 0 && /*#__PURE__*/_jsx("div", {
+    className: "px-3 py-6 text-center text-xs text-text-faint",
+    children: providers.length === 0 ? t("pickers.model.noProvider") : t("pickers.model.noMatch")
+  });
+  const t25 = entries.map((entry_3, i_2) => {
     if (entry_3.kind === "all") {
-      const before = entries[i_1 - 1];
-      const header = grouped && (before === undefined || before.kind === "legacy" || before.provider.kind !== entry_3.provider.kind);
+      const before_0 = entries[i_2 - 1];
+      const header = grouped && (before_0 === undefined || before_0.kind === "legacy" || before_0.provider.kind !== entry_3.provider.kind);
       return /*#__PURE__*/_jsxs("div", {
-        children: [header && /*#__PURE__*/_jsxs(Menu.Label, {
+        children: [separatesGroups(kindBefore(i_2), entry_3.provider.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), header && /*#__PURE__*/_jsxs(Menu.Label, {
           className: "flex items-center gap-1.5",
           children: [/*#__PURE__*/_jsx(AgentIcon, {
             kind: entry_3.provider.kind,
             size: 12
           }), entry_3.provider.name]
         }), /*#__PURE__*/_jsxs("button", {
-          "data-active": i_1 === index,
+          "data-active": i_2 === index,
           "aria-expanded": entry_3.open,
           className: "cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted",
-          onMouseEnter: () => setIndex(i_1),
+          onMouseEnter: () => setIndex(i_2),
           onClick: () => choose(entry_3),
           children: [/*#__PURE__*/_jsx(Icon, {
             icon: entry_3.open ? ChevronDown : ChevronRight,
@@ -409,9 +365,9 @@ export function ModelPicker(t0) {
     }
     if (entry_3.kind === "legacy") {
       return /*#__PURE__*/_jsxs("button", {
-        "data-active": i_1 === index,
+        "data-active": i_2 === index,
         className: "cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-faint",
-        onMouseEnter: () => setIndex(i_1),
+        onMouseEnter: () => setIndex(i_2),
         onClick: () => choose(entry_3),
         children: [/*#__PURE__*/_jsx(Icon, {
           icon: legacyOpen ? ChevronDown : ChevronRight,
@@ -421,17 +377,17 @@ export function ModelPicker(t0) {
         })]
       }, "legacy");
     }
-    const previous = entries[i_1 - 1];
+    const previous = entries[i_2 - 1];
     const first = grouped && (previous === undefined || previous.kind === "legacy" || previous.provider.kind !== entry_3.provider.kind);
     const vendorOpen = trimmed !== "" || expanded.has(entry_3.provider.kind);
     const vendorFirst = vendorOpen && entry_3.model.vendor !== undefined && !starredHere(entry_3) && (previous === undefined || previous.kind !== "model" || previous.provider.kind !== entry_3.provider.kind || starredHere(previous) || previous.model.vendor !== entry_3.model.vendor);
     const requirement = requirementOf(entry_3);
-    const next_1 = entries[i_1 + 1];
+    const next_1 = entries[i_2 + 1];
     const lastOfGroup = next_1 === undefined || next_1.kind !== "model" || next_1.provider.kind !== entry_3.provider.kind;
     const chosen = entry_3.provider.kind === provider && entry_3.model.slug === selection.model;
     const starred = starredHere(entry_3);
     return /*#__PURE__*/_jsxs("div", {
-      children: [first && /*#__PURE__*/_jsxs(Menu.Label, {
+      children: [separatesGroups(kindBefore(i_2), entry_3.provider.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), first && /*#__PURE__*/_jsxs(Menu.Label, {
         className: "flex items-center gap-1.5",
         children: [/*#__PURE__*/_jsx(AgentIcon, {
           kind: entry_3.provider.kind,
@@ -445,9 +401,9 @@ export function ModelPicker(t0) {
           role: "option",
           "aria-selected": chosen,
           "aria-disabled": requirement !== null || undefined,
-          "data-active": i_1 === index,
+          "data-active": i_2 === index,
           className: `cursor-row flex min-w-0 grow flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? "text-text-muted" : "text-text-faint"}`,
-          onMouseEnter: () => setIndex(i_1),
+          onMouseEnter: () => setIndex(i_2),
           onClick: () => choose(entry_3),
           children: [/*#__PURE__*/_jsxs("span", {
             className: "flex w-full items-center gap-2",
@@ -496,65 +452,53 @@ export function ModelPicker(t0) {
       })]
     }, `${entry_3.provider.kind}/${entry_3.model.slug}`);
   });
-  let t27;
-  if ($[60] !== t25 || $[61] !== t26) {
-    t27 = /*#__PURE__*/_jsxs("div", {
+  let t26;
+  if ($[44] !== t24 || $[45] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
       ref: listRef,
-      className: "max-h-72 overflow-auto p-1",
-      role: "listbox",
-      children: [t25, t26]
+      className: t22,
+      role: t23,
+      children: [t24, t25]
     });
-    $[60] = t25;
-    $[61] = t26;
-    $[62] = t27;
+    $[44] = t24;
+    $[45] = t25;
+    $[46] = t26;
   } else {
-    t27 = $[62];
+    t26 = $[46];
   }
-  let t28;
-  if ($[63] !== footer) {
-    t28 = footer !== undefined && /*#__PURE__*/_jsx("div", {
+  let t27;
+  if ($[47] !== footer) {
+    t27 = footer !== undefined && /*#__PURE__*/_jsx("div", {
       className: "border-t border-border-soft px-3 py-2 text-xs text-text-faint",
       children: footer
     });
-    $[63] = footer;
-    $[64] = t28;
+    $[47] = footer;
+    $[48] = t27;
   } else {
-    t28 = $[64];
+    t27 = $[48];
   }
-  let t29;
-  if ($[65] !== side || $[66] !== t20 || $[67] !== t24 || $[68] !== t27 || $[69] !== t28) {
-    t29 = /*#__PURE__*/_jsxs(Popover.Popup, {
+  return /*#__PURE__*/_jsxs(Popover.Root, {
+    open: open,
+    onOpenChange: setOpen,
+    children: [t17, /*#__PURE__*/_jsxs(Popover.Popup, {
       variant: "picker",
       side: side,
       initialFocus: inputRef,
-      ...t20,
-      children: [t24, t27, t28]
-    });
-    $[65] = side;
-    $[66] = t20;
-    $[67] = t24;
-    $[68] = t27;
-    $[69] = t28;
-    $[70] = t29;
-  } else {
-    t29 = $[70];
-  }
-  let t30;
-  if ($[71] !== open || $[72] !== setOpen || $[73] !== t19 || $[74] !== t29) {
-    t30 = /*#__PURE__*/_jsxs(Popover.Root, {
-      open: open,
-      onOpenChange: setOpen,
-      children: [t19, t29]
-    });
-    $[71] = open;
-    $[72] = setOpen;
-    $[73] = t19;
-    $[74] = t29;
-    $[75] = t30;
-  } else {
-    t30 = $[75];
-  }
-  return t30;
+      ...t18,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-2 border-b border-border px-2.5",
+        children: [t19, /*#__PURE__*/_jsx("input", {
+          ref: inputRef,
+          className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
+          placeholder: t20,
+          spellCheck: false,
+          value: query,
+          onChange: t21,
+          onKeyDown: onKeyDown
+        })]
+      }), t26, t27]
+    })]
+  });
 }
 /*
  * Prompts put aside with Cmd+S, on a shelf the whole app shares, since a stashed prompt usually moves

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