@adecore/agents-react 0.38.0 → 0.40.0

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;

package/dist/chat/ui/composer/ComposerControls.js

@@ -1,19 +1,225 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ArrowUp, Play, Plus, Square } from 'lucide-react';
-import { Button, ErrorBoundary, Icon, Tooltip } from '@adecore/ui';
+import clsx from 'clsx';
+import { ArrowUp, ChevronDown, Play, Plus, Square } from 'lucide-react';
+import { Button, ErrorBoundary, Icon, Menu, Tooltip } from '@adecore/ui';
 import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { useProviders } from '../../../state/providers.js';
 import { useAccountChoice } from '../../account-choice.js';
 import { composerStopLabel } from '../../subagent-list.js';
+import { HostMenuItems } from '../HostMenuItems.js';
 import { StashPicker } from '../Pickers.js';
 import { RunSettings } from '../RunSettings.js';
-/* The row under the box: attach, the chat's settings, the stash, the app's own control, and stop and send. */
+/* The send button, split with a chevron that opens the host's send actions when it has any. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SendButton(t0) {
+  const $ = _c(38);
+  const {
+    send,
+    writable
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [box, setBox] = useState(null);
+  const split = send.actions.length > 0;
+  const t1 = send.label;
+  const t2 = send.kbd;
+  const t3 = split ? "focus-visible:-outline-offset-2" : "rounded-full";
+  let t4;
+  if ($[0] !== t3) {
+    t4 = clsx("flex h-9 w-9 shrink-0 items-center justify-center bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100", t3);
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== send) {
+    t5 = event => send.onSend(event.altKey);
+    $[2] = send;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/_jsx(Icon, {
+      icon: ArrowUp,
+      size: 16
+    });
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== send.disabled || $[6] !== t4 || $[7] !== t5) {
+    t7 = /*#__PURE__*/_jsx("button", {
+      className: t4,
+      disabled: send.disabled,
+      onClick: t5,
+      children: t6
+    });
+    $[5] = send.disabled;
+    $[6] = t4;
+    $[7] = t5;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== send.kbd || $[10] !== send.label || $[11] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t1,
+      kbd: t2,
+      name: true,
+      children: t7
+    });
+    $[9] = send.kbd;
+    $[10] = send.label;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const button = t8;
+  if (!split) {
+    return button;
+  }
+  const {
+    draft
+  } = send;
+  let t9;
+  if ($[13] !== t) {
+    t9 = t("composer.sendActions");
+    $[13] = t;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "relative flex h-9 w-6 shrink-0 items-center justify-center bg-accent text-accent-text before:absolute before:inset-y-0 before:left-0 before:my-auto before:h-4 before:w-px before:bg-current/30 before:content-[\"\"] hover:brightness-90 focus-visible:-outline-offset-2 disabled:opacity-50 disabled:hover:brightness-100"
+    });
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  const t11 = !writable;
+  let t12;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronDown,
+      size: 14
+    });
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== t11) {
+    t13 = /*#__PURE__*/_jsx(Menu.Trigger, {
+      render: t10,
+      disabled: t11,
+      children: t12
+    });
+    $[17] = t11;
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] !== t13 || $[20] !== t9) {
+    t14 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t9,
+      name: true,
+      children: t13
+    });
+    $[19] = t13;
+    $[20] = t9;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  let t15;
+  if ($[22] !== draft || $[23] !== send.actions) {
+    let t16;
+    if ($[25] !== draft) {
+      t16 = action => ({
+        ...action,
+        run: () => action.run(draft)
+      });
+      $[25] = draft;
+      $[26] = t16;
+    } else {
+      t16 = $[26];
+    }
+    t15 = send.actions.map(t16);
+    $[22] = draft;
+    $[23] = send.actions;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  let t16;
+  if ($[27] !== t15) {
+    t16 = /*#__PURE__*/_jsx(HostMenuItems, {
+      actions: t15
+    });
+    $[27] = t15;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  let t17;
+  if ($[29] !== box || $[30] !== t16) {
+    t17 = /*#__PURE__*/_jsx(Menu.Popup, {
+      anchor: box,
+      side: "top",
+      sideOffset: 8,
+      align: "end",
+      className: "min-w-48",
+      children: t16
+    });
+    $[29] = box;
+    $[30] = t16;
+    $[31] = t17;
+  } else {
+    t17 = $[31];
+  }
+  let t18;
+  if ($[32] !== t14 || $[33] !== t17) {
+    t18 = /*#__PURE__*/_jsxs(Menu.Root, {
+      children: [t14, t17]
+    });
+    $[32] = t14;
+    $[33] = t17;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  let t19;
+  if ($[35] !== button || $[36] !== t18) {
+    t19 = /*#__PURE__*/_jsxs("div", {
+      ref: setBox,
+      className: "flex h-9 shrink-0 overflow-clip rounded-full",
+      children: [button, t18]
+    });
+    $[35] = button;
+    $[36] = t18;
+    $[37] = t19;
+  } else {
+    t19 = $[37];
+  }
+  return t19;
+}
+/* The row under the box: attach, the chat's settings, the stash, the app's own control, and stop and send. */
 export function ComposerControls(t0) {
-  const $ = _c(75);
+  const $ = _c(76);
   const {
     chatId,
     info,
@@ -282,55 +488,46 @@ export function ComposerControls(t0) {
     t16 = $[60];
   }
   let t17;
-  if ($[61] !== send) {
-    t17 = send.onContinue === null && send.visible && /*#__PURE__*/_jsx(Tooltip, {
-      label: send.label,
-      kbd: send.kbd,
-      name: true,
-      children: /*#__PURE__*/_jsx("button", {
-        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-text hover:brightness-90 disabled:opacity-50 disabled:hover:brightness-100",
-        disabled: send.disabled,
-        onClick: event_0 => send.onSend(event_0.altKey),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: ArrowUp,
-          size: 16
-        })
-      })
+  if ($[61] !== send || $[62] !== writable) {
+    t17 = send.onContinue === null && send.visible && /*#__PURE__*/_jsx(SendButton, {
+      send: send,
+      writable: writable
     });
     $[61] = send;
-    $[62] = t17;
+    $[62] = writable;
+    $[63] = t17;
   } else {
-    t17 = $[62];
+    t17 = $[63];
   }
   let t18;
-  if ($[63] !== t14 || $[64] !== t15 || $[65] !== t16 || $[66] !== t17) {
+  if ($[64] !== t14 || $[65] !== t15 || $[66] !== t16 || $[67] !== t17) {
     t18 = /*#__PURE__*/_jsxs("div", {
       className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover",
       children: [t14, t15, t16, t17]
     });
-    $[63] = t14;
-    $[64] = t15;
-    $[65] = t16;
-    $[66] = t17;
-    $[67] = t18;
+    $[64] = t14;
+    $[65] = t15;
+    $[66] = t16;
+    $[67] = t17;
+    $[68] = t18;
   } else {
-    t18 = $[67];
+    t18 = $[68];
   }
   let t19;
-  if ($[68] !== t10 || $[69] !== t11 || $[70] !== t12 || $[71] !== t18 || $[72] !== t3 || $[73] !== t4) {
+  if ($[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t18 || $[73] !== t3 || $[74] !== t4) {
     t19 = /*#__PURE__*/_jsxs("div", {
       className: "flex items-center gap-2 pt-3 pr-3.5 pb-3.5 pl-5 @max-md/composer:gap-1.5 @max-md/composer:p-3 @max-md/composer:pt-2.5",
       children: [t3, t4, t10, t11, t12, t13, t18]
     });
-    $[68] = t10;
-    $[69] = t11;
-    $[70] = t12;
-    $[71] = t18;
-    $[72] = t3;
-    $[73] = t4;
-    $[74] = t19;
-  } else {
-    t19 = $[74];
+    $[69] = t10;
+    $[70] = t11;
+    $[71] = t12;
+    $[72] = t18;
+    $[73] = t3;
+    $[74] = t4;
+    $[75] = t19;
+  } else {
+    t19 = $[75];
   }
   return t19;
 }

package/dist/chat/ui/composer/key-handler.d.ts

@@ -13,8 +13,8 @@ interface KeyHandlerInput {
     history: PromptHistory;
     noteKey(e: KeyboardEvent): void;
     toggleStash(): void;
-    setText(next: string): void;
     submit(how: ComposerSend): void;
 }
+export declare function pickInMenu(e: KeyboardEvent, menus: ComposerMenus): boolean;
 export declare function composerKeyHandler(input: KeyHandlerInput): (e: KeyboardEvent, view: EditorView) => boolean;
 export {};

package/dist/chat/ui/composer/key-handler.js

@@ -37,10 +37,7 @@ function indentInFence(e, view) {
   return true;
 }
 /* The keys an open picker takes: the arrows walk it, and Tab (or Enter, outside the commands) picks. */
-function pickInMenu(e, {
-  menus,
-  setText
-}) {
+export function pickInMenu(e, menus) {
   const {
     activeIndex
   } = menus;
@@ -49,12 +46,7 @@ function pickInMenu(e, {
       return true;
     }
     if (e.key === 'Tab') {
-      const chosen = menus.commands[activeIndex];
-      if (chosen.skill) {
-        menus.chooseSkill(chosen.name);
-      } else {
-        setText(`/${chosen.name} `);
-      }
+      menus.completeCommand(menus.commands[activeIndex]);
       return true;
     }
   }
@@ -187,7 +179,7 @@ export function composerKeyHandler(input) {
       input.toggleStash();
       return true;
     }
-    if (pickInMenu(e, input)) {
+    if (pickInMenu(e, input.menus)) {
       return true;
     }
     if (e.key === 'Tab' && !e.altKey && !e.metaKey && !e.ctrlKey && indentInFence(e, view)) {

package/dist/chat/ui/composer/prompt-picks.d.ts

@@ -0,0 +1,4 @@
+import type { ChatSendExtras } from '../../chat-client.js';
+import { type Referables } from '../../chat-references.js';
+import type { PromptDraft } from './use-prompt-menus.js';
+export declare function promptPicks(value: PromptDraft, referables: Referables): Pick<ChatSendExtras, 'mentions' | 'skills' | 'chats' | 'references'>;

package/dist/chat/ui/composer/prompt-picks.js

@@ -0,0 +1,14 @@
+import { referenceTokens } from '../../chat-references.js';
+import { presentMentions, presentReferences, presentSkills } from '../../mentions.js';
+/* What a prompt still holds of what was picked in it, as a send of the composer carries it. */
+export function promptPicks(value, referables) {
+  const text = value.text.trim();
+  const tokens = referenceTokens([...value.chats, ...value.references], referables.items, value.referenceNames);
+  return {
+    mentions: presentMentions(text, value.mentions),
+    skills: presentSkills(text, value.skills),
+    chats: presentReferences(text, value.chats, tokens),
+    // A machine that resolves only chats would drop the rest.
+    references: referables.chatsOnly ? [] : presentReferences(text, value.references, tokens)
+  };
+}

package/dist/chat/ui/composer/use-composer-menus.d.ts

@@ -1,17 +1,10 @@
 import { type RefObject } from 'react';
-import type { EditorState } from '@codemirror/state';
 import type { ChatInfo, ProviderCapabilities } from '@adecore/agent-contracts';
-import { type Referable } from '../../chat-references.js';
-import { type MentionQuery, type TextRange } from '../../mentions.js';
 import type { ComposerInputHandle } from '../ComposerInput.js';
 import type { ComposerDraft } from './use-composer-draft.js';
+import { type PromptMenus } from './use-prompt-menus.js';
+export type { ComposerCommand } from './use-prompt-menus.js';
 export declare const LOCAL_COMMANDS: string[];
-export interface ComposerCommand {
-    name: string;
-    hint: string;
-    local: boolean;
-    skill: boolean;
-}
 interface MenusInput {
     chatId: string;
     info: ChatInfo;
@@ -20,43 +13,5 @@ interface MenusInput {
     draft: ComposerDraft;
     inputRef: RefObject<ComposerInputHandle | null>;
 }
-export declare function useComposerMenus({ chatId, info, capabilities, providerName, draft: { draft, setDraft, setText }, inputRef }: MenusInput): {
-    listId: string;
-    activeIndex: number;
-    inputAria: Record<string, string>;
-    hasSkills: boolean;
-    skillNames: string[];
-    commandQuery: string | null;
-    commands: ComposerCommand[];
-    commandMenuOpen: boolean;
-    skillMatches: {
-        name: string;
-        description: string;
-        source: "plugin" | "project" | "user";
-    }[];
-    skillMenuOpen: boolean;
-    mention: MentionQuery | null;
-    mentionMenuOpen: boolean;
-    mentionCount: number;
-    files: string[];
-    referenceMenuOpen: boolean;
-    referenceMatches: Referable[];
-    referables: import("../../index.js").Referables;
-    referenceChips: {
-        id: string;
-        name: string;
-        kind: import("../../index.js").ReferableKind | null;
-    }[];
-    setMenuIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    trackTriggers: (value: string, selection: TextRange, state: EditorState) => void;
-    close: () => void;
-    chooseMention: (path: string) => void;
-    chooseMentionAt: (index: number) => void;
-    chooseReference: (item: Referable) => void;
-    chooseReferenceAt: (index: number) => void;
-    chooseSkill: (name: string) => void;
-    pickCommand: (command: ComposerCommand, index: number) => void;
-    moveInMenu: (key: string, count: number) => boolean;
-};
-export type ComposerMenus = ReturnType<typeof useComposerMenus>;
-export {};
+export declare function useComposerMenus({ chatId, info, capabilities, providerName, draft, inputRef }: MenusInput): PromptMenus;
+export type ComposerMenus = PromptMenus;