@adecore/agents-react 0.38.0 → 0.39.0

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

@@ -11,10 +11,11 @@ interface ModelPickerProps {
     kbd?: string | null;
     side?: 'top' | 'bottom';
     trigger?: 'plain' | 'chip';
+    chipSize?: 'sm' | 'md';
     finalFocus?: RefObject<HTMLElement | null>;
     footer?: ReactNode;
 }
-export declare function ModelPicker({ providers, provider, selection, open, onOpenChange, onChange, kbd, side, trigger, finalFocus, footer }: ModelPickerProps): import("react").JSX.Element;
+export declare function ModelPicker({ providers, provider, selection, open, onOpenChange, onChange, kbd, side, trigger, chipSize, finalFocus, footer }: ModelPickerProps): import("react").JSX.Element;
 export declare function StashPicker({ onRestore }: {
     onRestore(prompt: StashedPrompt): void;
 }): import("react").JSX.Element | null;

package/dist/chat/ui/Pickers.js

@@ -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(49);
+  const $ = _c(50);
   const {
     providers,
     provider,
@@ -34,115 +34,117 @@ export function ModelPicker(t0) {
     kbd: t1,
     side: t2,
     trigger: t3,
+    chipSize: t4,
     finalFocus,
     footer
   } = t0;
   const kbd = t1 === undefined ? "/model" : t1;
   const side = t2 === undefined ? "top" : t2;
   const trigger = t3 === undefined ? "plain" : t3;
+  const chipSize = t4 === undefined ? "sm" : t4;
   const host = useChatHost();
   const {
     t
   } = useTranslation("agent-chat");
   const [query, setQuery] = useState("");
   const [legacyOpen, setLegacyOpen] = useState(false);
-  let t4;
+  let t5;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = new Set();
-    $[0] = t4;
+    t5 = new Set();
+    $[0] = t5;
   } else {
-    t4 = $[0];
+    t5 = $[0];
   }
-  const [expanded, setExpanded] = useState(t4);
+  const [expanded, setExpanded] = useState(t5);
   const [index, setIndex] = useState(0);
   const inputRef = useRef(null);
   const listRef = useRef(null);
   let owner;
-  let t5;
+  let t6;
   if ($[1] !== provider || $[2] !== providers || $[3] !== selection.model) {
-    let t6;
+    let t7;
     if ($[6] !== provider) {
-      t6 = entry => entry.kind === provider;
+      t7 = entry => entry.kind === provider;
       $[6] = provider;
-      $[7] = t6;
+      $[7] = t7;
     } else {
-      t6 = $[7];
+      t7 = $[7];
     }
-    owner = providers.find(t6);
-    t5 = modelName(selection.model, owner?.models);
+    owner = providers.find(t7);
+    t6 = modelName(selection.model, owner?.models);
     $[1] = provider;
     $[2] = providers;
     $[3] = selection.model;
     $[4] = owner;
-    $[5] = t5;
+    $[5] = t6;
   } else {
     owner = $[4];
-    t5 = $[5];
+    t6 = $[5];
   }
-  const current = t5;
-  let t6;
+  const current = t6;
+  let t7;
   if ($[8] !== provider || $[9] !== providers || $[10] !== selection.model) {
-    t6 = agentChipOf(providers, provider, selection.model);
+    t7 = agentChipOf(providers, provider, selection.model);
     $[8] = provider;
     $[9] = providers;
     $[10] = selection.model;
-    $[11] = t6;
+    $[11] = t7;
   } else {
-    t6 = $[11];
+    t7 = $[11];
   }
-  const chip = t6;
+  const chip = t7;
   const grouped = providers.length > 1;
   const trimmed = query.trim().toLowerCase();
   const favorites = useChatPreferences(_temp);
-  let t7;
+  let t8;
   if ($[12] !== favorites) {
-    t7 = row => row?.kind === "model" && favorites[row.provider.kind]?.includes(row.model.slug) === true;
+    t8 = row => row?.kind === "model" && favorites[row.provider.kind]?.includes(row.model.slug) === true;
     $[12] = favorites;
-    $[13] = t7;
+    $[13] = t8;
   } else {
-    t7 = $[13];
+    t8 = $[13];
   }
-  const starredHere = t7;
-  let t8;
+  const starredHere = t8;
+  let t9;
   if ($[14] !== favorites) {
-    t8 = kind => favoriteModelsOf(favorites, kind);
+    t9 = kind => favoriteModelsOf(favorites, kind);
     $[14] = favorites;
-    $[15] = t8;
+    $[15] = t9;
   } else {
-    t8 = $[15];
+    t9 = $[15];
   }
   const entries = pickerEntriesOf(inPickerOrder(providers), trimmed, legacyOpen, expanded, {
     provider,
     model: selection.model
-  }, t8);
+  }, t9);
   const scope = useContext(ChatScopeContext);
   const machine = useHostMachineLabel(scope?.id ?? "");
   const reported = useReportedModels(provider);
-  let t9;
+  let t10;
   if ($[16] !== reported) {
-    t9 = entry_0 => modelRequirementOf(entry_0.model, entry_0.provider, reported);
+    t10 = entry_0 => modelRequirementOf(entry_0.model, entry_0.provider, reported);
     $[16] = reported;
-    $[17] = t9;
+    $[17] = t10;
   } else {
-    t9 = $[17];
+    t10 = $[17];
   }
-  const requirementOf = t9;
+  const requirementOf = t10;
   const kindBefore = i => {
     const before = entries[i - 1];
     return before === undefined || before.kind === "legacy" ? undefined : before.provider.kind;
   };
-  let t10;
+  let t11;
   if ($[18] !== requirementOf) {
-    t10 = entry_1 => entry_1.kind === "model" && requirementOf(entry_1) !== null ? [entry_1.provider.kind] : [];
+    t11 = entry_1 => entry_1.kind === "model" && requirementOf(entry_1) !== null ? [entry_1.provider.kind] : [];
     $[18] = requirementOf;
-    $[19] = t10;
+    $[19] = t11;
   } else {
-    t10 = $[19];
+    t11 = $[19];
   }
-  const blockedKinds = new Set(entries.flatMap(t10));
-  let t11;
+  const blockedKinds = new Set(entries.flatMap(t11));
+  let t12;
   if ($[20] !== onOpenChange) {
-    t11 = next => {
+    t12 = next => {
       if (!next) {
         setQuery("");
         setLegacyOpen(false);
@@ -152,31 +154,31 @@ export function ModelPicker(t0) {
       onOpenChange(next);
     };
     $[20] = onOpenChange;
-    $[21] = t11;
+    $[21] = t12;
   } else {
-    t11 = $[21];
+    t12 = $[21];
   }
-  const setOpen = t11;
-  let t12;
+  const setOpen = t12;
+  let t13;
   if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = () => {
+    t13 = () => {
       listRef.current?.querySelector("[data-active=\"true\"]")?.scrollIntoView({
         block: "nearest"
       });
     };
-    $[22] = t12;
+    $[22] = t13;
   } else {
-    t12 = $[22];
+    t13 = $[22];
   }
-  let t13;
+  let t14;
   if ($[23] !== index) {
-    t13 = [index];
+    t14 = [index];
     $[23] = index;
-    $[24] = t13;
+    $[24] = t14;
   } else {
-    t13 = $[24];
+    t14 = $[24];
   }
-  useEffect(t12, t13);
+  useEffect(t13, t14);
   const choose = entry_2 => {
     if (!entry_2) {
       return;
@@ -220,23 +222,23 @@ export function ModelPicker(t0) {
       }
     }
   };
-  let t14;
+  let t15;
   if ($[25] !== current || $[26] !== owner || $[27] !== t) {
-    t14 = owner ? `${owner.name} · ${current}` : t("pickers.model.choose");
+    t15 = owner ? `${owner.name} · ${current}` : t("pickers.model.choose");
     $[25] = current;
     $[26] = owner;
     $[27] = t;
-    $[28] = t14;
+    $[28] = t15;
   } else {
-    t14 = $[28];
+    t15 = $[28];
   }
-  const t15 = kbd ?? undefined;
-  let t16;
-  if ($[29] !== chip || $[30] !== current || $[31] !== provider || $[32] !== trigger) {
-    t16 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
+  const t16 = kbd ?? undefined;
+  let t17;
+  if ($[29] !== chip || $[30] !== chipSize || $[31] !== current || $[32] !== provider || $[33] !== trigger) {
+    t17 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
       render: /*#__PURE__*/_jsx(Button, {
         variant: "secondary",
-        size: "sm",
+        size: chipSize,
         className: "min-w-0 shrink gap-1.5"
       }),
       children: [chip.mark === "logo" ? /*#__PURE__*/_jsx(ProviderLogo, {
@@ -271,73 +273,74 @@ export function ModelPicker(t0) {
       })]
     });
     $[29] = chip;
-    $[30] = current;
-    $[31] = provider;
-    $[32] = trigger;
-    $[33] = t16;
+    $[30] = chipSize;
+    $[31] = current;
+    $[32] = provider;
+    $[33] = trigger;
+    $[34] = t17;
   } else {
-    t16 = $[33];
+    t17 = $[34];
   }
-  let t17;
-  if ($[34] !== t14 || $[35] !== t15 || $[36] !== t16) {
-    t17 = /*#__PURE__*/_jsx(Tooltip, {
-      label: t14,
-      kbd: t15,
-      children: t16
+  let t18;
+  if ($[35] !== t15 || $[36] !== t16 || $[37] !== t17) {
+    t18 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t15,
+      kbd: t16,
+      children: t17
     });
-    $[34] = t14;
     $[35] = t15;
     $[36] = t16;
     $[37] = t17;
+    $[38] = t18;
   } else {
-    t17 = $[37];
+    t18 = $[38];
   }
-  let t18;
-  if ($[38] !== finalFocus) {
-    t18 = finalFocus === undefined ? {} : {
+  let t19;
+  if ($[39] !== finalFocus) {
+    t19 = finalFocus === undefined ? {} : {
       finalFocus
     };
-    $[38] = finalFocus;
-    $[39] = t18;
+    $[39] = finalFocus;
+    $[40] = t19;
   } else {
-    t18 = $[39];
+    t19 = $[40];
   }
-  let t19;
-  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
-    t19 = /*#__PURE__*/_jsx(Icon, {
+  let t20;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = /*#__PURE__*/_jsx(Icon, {
       icon: Search,
       size: 14,
       className: "shrink-0 text-text-faint"
     });
-    $[40] = t19;
+    $[41] = t20;
   } else {
-    t19 = $[40];
+    t20 = $[41];
   }
-  let t20;
-  if ($[41] !== t) {
-    t20 = t("pickers.model.search");
-    $[41] = t;
-    $[42] = t20;
+  let t21;
+  if ($[42] !== t) {
+    t21 = t("pickers.model.search");
+    $[42] = t;
+    $[43] = t21;
   } else {
-    t20 = $[42];
+    t21 = $[43];
   }
-  let t21;
-  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
-    t21 = e_0 => {
+  let t22;
+  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = e_0 => {
       setQuery(e_0.target.value);
       setIndex(0);
     };
-    $[43] = t21;
+    $[44] = t22;
   } else {
-    t21 = $[43];
+    t22 = $[44];
   }
-  const t22 = "max-h-72 overflow-auto p-1";
-  const t23 = "listbox";
-  const t24 = entries.length === 0 && /*#__PURE__*/_jsx("div", {
+  const t23 = "max-h-72 overflow-auto p-1";
+  const t24 = "listbox";
+  const 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")
   });
-  const t25 = entries.map((entry_3, i_2) => {
+  const t26 = entries.map((entry_3, i_2) => {
     if (entry_3.kind === "all") {
       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);
@@ -452,51 +455,51 @@ export function ModelPicker(t0) {
       })]
     }, `${entry_3.provider.kind}/${entry_3.model.slug}`);
   });
-  let t26;
-  if ($[44] !== t24 || $[45] !== t25) {
-    t26 = /*#__PURE__*/_jsxs("div", {
+  let t27;
+  if ($[45] !== t25 || $[46] !== t26) {
+    t27 = /*#__PURE__*/_jsxs("div", {
       ref: listRef,
-      className: t22,
-      role: t23,
-      children: [t24, t25]
+      className: t23,
+      role: t24,
+      children: [t25, t26]
     });
-    $[44] = t24;
     $[45] = t25;
     $[46] = t26;
+    $[47] = t27;
   } else {
-    t26 = $[46];
+    t27 = $[47];
   }
-  let t27;
-  if ($[47] !== footer) {
-    t27 = footer !== undefined && /*#__PURE__*/_jsx("div", {
+  let t28;
+  if ($[48] !== footer) {
+    t28 = footer !== undefined && /*#__PURE__*/_jsx("div", {
       className: "border-t border-border-soft px-3 py-2 text-xs text-text-faint",
       children: footer
     });
-    $[47] = footer;
-    $[48] = t27;
+    $[48] = footer;
+    $[49] = t28;
   } else {
-    t27 = $[48];
+    t28 = $[49];
   }
   return /*#__PURE__*/_jsxs(Popover.Root, {
     open: open,
     onOpenChange: setOpen,
-    children: [t17, /*#__PURE__*/_jsxs(Popover.Popup, {
+    children: [t18, /*#__PURE__*/_jsxs(Popover.Popup, {
       variant: "picker",
       side: side,
       initialFocus: inputRef,
-      ...t18,
+      ...t19,
       children: [/*#__PURE__*/_jsxs("div", {
         className: "flex items-center gap-2 border-b border-border px-2.5",
-        children: [t19, /*#__PURE__*/_jsx("input", {
+        children: [t20, /*#__PURE__*/_jsx("input", {
           ref: inputRef,
           className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
-          placeholder: t20,
+          placeholder: t21,
           spellCheck: false,
           value: query,
-          onChange: t21,
+          onChange: t22,
           onKeyDown: onKeyDown
         })]
-      }), t26, t27]
+      }), t27, t28]
     })]
   });
 }

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

@@ -0,0 +1,19 @@
+import type { ChatSkill } from '@adecore/agent-contracts';
+import type { Referables } from '../chat-references.js';
+import { type PromptDraft } from './composer/use-prompt-menus.js';
+interface PromptEditorProps {
+    value: PromptDraft;
+    onChange(next: PromptDraft): void;
+    label: string;
+    placeholder: string;
+    skills: readonly ChatSkill[];
+    slashCommands?: readonly string[];
+    goals?: boolean;
+    cwd: string | null;
+    referables: Referables;
+    providerName?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function PromptEditor({ value, onChange, label, placeholder, skills, slashCommands, goals, cwd, referables, providerName, disabled, className }: PromptEditorProps): import("react").JSX.Element;
+export {};

package/dist/chat/ui/PromptEditor.js

@@ -0,0 +1,115 @@
+import { useLayoutEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { Surface } from '@adecore/ui';
+import { ComposerInput } from './ComposerInput.js';
+import { chipDecorations } from './composer/chips.js';
+import { ComposerMenu } from './composer/ComposerMenu.js';
+import { pickInMenu } from './composer/key-handler.js';
+import { usePromptMenus } from './composer/use-prompt-menus.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NO_COMMANDS = [];
+/*
+ * A prompt written now and sent later, as a form field: the composer's editor with its pickers and chips,
+ * without a chat behind it. The host hands in what the CLI it goes to has, and keeps what was picked.
+ */
+export function PromptEditor({
+  value,
+  onChange,
+  label,
+  placeholder,
+  skills,
+  slashCommands = NO_COMMANDS,
+  goals = false,
+  cwd,
+  referables,
+  providerName,
+  disabled = false,
+  className
+}) {
+  const inputRef = useRef(null);
+  // A pick writes twice in one event (the text, then what it picked), and the second must build on the first.
+  const latest = useRef(value);
+  useLayoutEffect(() => {
+    latest.current = value;
+  }, [value]);
+  const setDraft = action => {
+    const next = typeof action === 'function' ? action(latest.current) : action;
+    latest.current = next;
+    onChange(next);
+  };
+  const setText = (next_0, mentions = value.mentions, chosen = value.skills) => {
+    setDraft(current => ({
+      ...current,
+      text: next_0,
+      mentions,
+      skills: chosen
+    }));
+  };
+  const menus = usePromptMenus({
+    draft: {
+      draft: value,
+      setDraft,
+      setText
+    },
+    inputRef,
+    cwd,
+    skills,
+    slashCommands,
+    goals,
+    providerName,
+    referables,
+    label
+  });
+  const extensions = chipDecorations({
+    mentions: value.mentions,
+    skills: value.skills,
+    references: menus.referenceChips
+  });
+  const onKeyDown = e => {
+    if (e.isComposing) {
+      return false;
+    }
+    // Escape closes the picker, and only that: the dialog around the field stays.
+    if (e.key === 'Escape' && menus.menuOpen) {
+      menus.close();
+      e.stopPropagation();
+      return true;
+    }
+    // Enter adds a line here rather than sending, so on a command it completes like Tab.
+    if (e.key === 'Enter' && menus.commandMenuOpen) {
+      menus.completeCommand(menus.commands[menus.activeIndex]);
+      return true;
+    }
+    return pickInMenu(e, menus);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx('relative', className),
+    children: [menus.menuOpen && /*#__PURE__*/_jsx(Surface, {
+      className: "absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-lg bg-clip-padding *:border-b-0",
+      children: /*#__PURE__*/_jsx(ComposerMenu, {
+        menus: menus
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "field h-auto overflow-hidden p-0 focus-ring-within",
+      children: /*#__PURE__*/_jsx(ComposerInput, {
+        ref: inputRef,
+        dictationToolbar: null,
+        className: "composer-input prompt-editor select-text text-sm leading-normal text-text",
+        value: value.text,
+        placeholder: placeholder,
+        disabled: disabled,
+        tabbable: true,
+        extensions: extensions,
+        aria: menus.inputAria,
+        onChange: (text, selection, state) => {
+          setText(text);
+          menus.setMenuIndex(0);
+          menus.trackTriggers(text, selection, state);
+        },
+        onSelectionChange: menus.trackTriggers,
+        onBlur: menus.close,
+        onKeyDown: onKeyDown
+      })
+    })]
+  });
+}

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

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
-export declare function Timeline({ chatId, composer, overlay }: {
+export declare function Timeline({ chatId, composer, overlay, onContentHeight }: {
     chatId: string;
     composer?: ReactNode;
     overlay?: ReactNode;
+    onContentHeight?: (height: number) => void;
 }): import("react").JSX.Element;

package/dist/chat/ui/Timeline.js

@@ -388,11 +388,15 @@ const ThreadRow = memo(function ThreadRow(t0) {
 /*
  * `overlay` stands in the thread's place and ends where the composer starts, so the thread keeps
  * where it was underneath and the composer stays in reach for the prompts it answers.
+ * `onContentHeight` hears what the thread's rows and its padding take, without the composer, once
+ * the rows in view are laid out at their real heights, for a host that sizes its frame to the thread.
+ * Rows out of view still count at an estimate, so a frame up to the viewport's height gets it exact.
  */
 export function Timeline({
   chatId,
   composer,
-  overlay
+  overlay,
+  onContentHeight
 }) {
   const host = useChatHost();
   const {
@@ -605,6 +609,14 @@ export function Timeline({
       setMeasuredThread(keyOf(chatId));
     }
   }, [initialLayout, empty, loadingHistory, frame.height, virtualRows, virtualizer, rows.length, keyOf, chatId]);
+  useLayoutEffect(() => {
+    const thread = threadRef.current;
+    if (onContentHeight === undefined || initialLayout || empty || loadingHistory || thread === null) {
+      return;
+    }
+    const style = getComputedStyle(thread);
+    onContentHeight(totalSize + (Number.parseFloat(style.paddingTop) || 0) + (Number.parseFloat(style.paddingBottom) || 0));
+  }, [onContentHeight, initialLayout, empty, loadingHistory, totalSize]);
   useLayoutEffect(() => {
     const element_2 = scrollRef.current;
     if (!followRef.current || element_2 === null) {

package/dist/chat/ui/composer/ComposerControls.d.ts

@@ -1,6 +1,7 @@
 import { type Ref } from 'react';
 import type { ChatInfo } from '@adecore/agent-contracts';
 import { type Shortcut } from '@adecore/ui';
+import { type ComposerSendAction, type ComposerSendDraft } from '../../../host.js';
 import type { StashedPrompt } from '../../stash.js';
 import type { ChatControls } from './use-chat-controls.js';
 interface SendProps {
@@ -10,6 +11,8 @@ interface SendProps {
     kbd: Shortcut;
     onSend(alternate: boolean): void;
     onContinue: (() => void) | null;
+    actions: readonly ComposerSendAction[];
+    draft: ComposerSendDraft;
 }
 interface ComposerControlsProps {
     chatId: string;