@adecore/agents-react 0.23.1 → 0.24.1

package/src/chat/ui/composer/keys.ts

@@ -1,11 +1,15 @@
 import type { SyntaxNode, Tree } from '@lezer/common';
+import { modSends, type ChatSendKey } from '../../send-key';
 
-export type EnterAction = 'send' | 'newline' | 'continue-list' | 'leave-list';
+/* `send-alternate` sends with the delivery a running turn does not get by default; `send-and-new` also opens a new chat once it went. */
+export type EnterAction = 'send' | 'send-alternate' | 'send-and-new' | 'newline' | 'continue-list' | 'leave-list';
 
 export interface EnterKeys {
     shift: boolean;
     /* Cmd on macOS, Ctrl elsewhere. */
     mod: boolean;
+    /* Option on macOS. */
+    alt?: boolean;
 }
 
 export interface ListItem {
@@ -23,6 +27,12 @@ export interface EnterContext {
     list: ListItem | null;
     /* The caret's offset in its line. */
     column: number;
+    /* Which key sends; `enter` when left out. */
+    sendKey?: ChatSendKey;
+    /* The message runs over more than one line, where `mod-enter-multiline` lets Enter add a line. */
+    multiline?: boolean;
+    /* The host opens a new chat after a send, which Mod+Alt+Enter asks for. */
+    startsNewChat?: boolean;
 }
 
 const LIST_ITEM = /^([ \t]*)(?:([-*+])|(\d{1,9})([.)]))([ \t]+)(\[[ xX]\](?:[ \t]+|$))?/;
@@ -41,23 +51,35 @@ export function listItemAt(line: string): ListItem | null {
 /*
  * Enter sends, except where whoever types is still writing: inside a fence nobody has closed yet
  * it adds a line, and in a list it starts the next item, or leaves the list from an empty one, so
- * a second Enter breaks out. Shift adds a plain line and Mod sends from anywhere.
+ * a second Enter breaks out. Shift adds a plain line and Mod sends from anywhere. Where the send key
+ * is Mod+Enter, Enter adds a line instead of sending. Alt sends the other way (queue or steer), and so
+ * does Mod+Shift+Enter where Mod+Enter is the send key; Mod+Alt+Enter is the send that opens a new chat.
  */
-export function enterAction(keys: EnterKeys, { inOpenFence, list, column }: EnterContext): EnterAction {
+export function enterAction(
+    keys: EnterKeys,
+    { inOpenFence, list, column, sendKey = 'enter', multiline = false, startsNewChat = false }: EnterContext
+): EnterAction {
+    const modOnly = modSends(sendKey, multiline);
     if (keys.mod) {
-        return 'send';
+        if (keys.alt && startsNewChat) {
+            return 'send-and-new';
+        }
+        return keys.alt || (modOnly && keys.shift) ? 'send-alternate' : 'send';
     }
     if (keys.shift || inOpenFence) {
         return 'newline';
     }
-    if (list === null) {
-        return 'send';
+    if (list !== null) {
+        // A caret in front of the marker moves the item down rather than splitting its marker.
+        if (column < list.prefix.length) {
+            return 'newline';
+        }
+        return list.empty ? 'leave-list' : 'continue-list';
     }
-    // A caret in front of the marker moves the item down rather than splitting its marker.
-    if (column < list.prefix.length) {
-        return 'newline';
+    if (keys.alt) {
+        return 'send-alternate';
     }
-    return list.empty ? 'leave-list' : 'continue-list';
+    return modOnly ? 'newline' : 'send';
 }
 
 /* The innermost fenced code block around `pos`, if any. */

package/src/chat/ui/composer/placeholder.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+
+/* The empty box names its sigils as key caps, so they read as keys to press rather than as punctuation. */
+function hintedPlaceholder(lead: string, joiner: string, hints: ReadonlyArray<{ key: string; label: string }>): HTMLElement {
+    const root = document.createElement('span');
+    root.className = 'composer-hints';
+    const extra = document.createElement('span');
+    extra.className = 'composer-hints-extra';
+    extra.append(joiner);
+    for (const hint of hints) {
+        const cap = document.createElement('kbd');
+        cap.textContent = hint.key;
+        extra.append(cap, hint.label);
+    }
+    root.append(lead, extra);
+    return root;
+}
+
+interface PlaceholderInput {
+    chatId: string;
+    disabled: boolean;
+    readOnly: boolean;
+    mentionable: boolean;
+    hasSkills: boolean;
+}
+
+/* What the empty box says: why nothing can be written, or the host's words and the keys that open a picker. */
+export function useHintedPlaceholder({ chatId, disabled, readOnly, mentionable, hasSkills }: PlaceholderInput): string | HTMLElement {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const lead = useChatHost().useComposerPlaceholder(scope.id, chatId);
+    return useMemo(() => {
+        if (disabled) {
+            return t('composer.placeholder.disconnected');
+        }
+        if (readOnly) {
+            return t('composer.placeholder.readOnly');
+        }
+        return hintedPlaceholder(lead ?? t('composer.placeholder.lead'), t('composer.placeholder.joiner'), [
+            { key: '/', label: t('composer.placeholder.commands') },
+            ...(mentionable ? [{ key: '@', label: t('composer.placeholder.files') }] : []),
+            ...(hasSkills ? [{ key: '$', label: t('composer.placeholder.skills') }] : [])
+        ]);
+    }, [disabled, readOnly, lead, mentionable, hasSkills, t]);
+}

package/src/chat/ui/composer/surface.ts

@@ -0,0 +1,45 @@
+/* Anything with an action of its own; `data-composer-action` marks one a role cannot name, such as a control of the host's. */
+const ACTIONS = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    '[role="option"]',
+    '[role="listbox"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="tab"]',
+    '[role="slider"]',
+    '[role="combobox"]',
+    '[data-composer-action]'
+].join(', ');
+
+/*
+ * Where a pointer is on the composer: in the text field, on an action, or on the space around them,
+ * which stands in for the text field. A target outside the surface is an action, as an event from a
+ * popup portaled out of it still reaches the surface through React.
+ */
+export function surfacePartOf(target: EventTarget | null, surface: Element): 'input' | 'action' | 'surface' {
+    // Not `instanceof Element`, which fails for an element of another window.
+    const element = target as Element | null;
+    if (typeof element?.closest !== 'function' || !surface.contains(element)) {
+        return 'action';
+    }
+    const input = element.closest('.cm-editor');
+    if (input !== null && surface.contains(input)) {
+        return 'input';
+    }
+    const action = element.closest(ACTIONS);
+    return action !== null && surface.contains(action) ? 'action' : 'surface';
+}

package/src/chat/ui/composer/use-chat-controls.ts

@@ -0,0 +1,134 @@
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { AgentKind, ChatInfo, ModelSelection, RuntimeMode } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { errorCode } from '../../../transport';
+import { useChatActions } from '../../actions';
+import { rememberChatAccount, rememberChatPreferences, rememberChatSelection } from '../../preferences';
+import { composerStopOf } from '../../subagent-list';
+import type { ComposerNotice } from './use-notice';
+
+interface ControlsInput {
+    chatId: string;
+    info: ChatInfo;
+    notice: ComposerNotice;
+    onRetarget(provider: AgentKind, selection: ModelSelection): Promise<void>;
+}
+
+/* What the composer does to the chat rather than to its draft: its settings, a stop, a clear and a compaction. */
+export function useChatControls({ chatId, info, notice: { setNotice, showError }, onRetarget }: ControlsInput) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const scope = useChatScope();
+    const actions = useChatActions();
+    const configuring = useRef(false);
+    const [configurationPending, setConfigurationPending] = useState(false);
+    const [modelPickerOpen, setModelPickerOpen] = useState(false);
+    const [confirmClear, setConfirmClear] = useState(false);
+
+    /* One configuration at a time; a second pick while one is on its way is dropped. */
+    const runConfiguration = (work: () => Promise<void>): void => {
+        if (configuring.current) {
+            return;
+        }
+        configuring.current = true;
+        setConfigurationPending(true);
+        void work()
+            .catch(showError)
+            .finally(() => {
+                configuring.current = false;
+                setConfigurationPending(false);
+            });
+    };
+
+    const configure = (patch: { selection?: ModelSelection; runtimeMode?: RuntimeMode; account?: string }): void => {
+        runConfiguration(() =>
+            actions.configure(chatId, patch).then(() => {
+                if (patch.selection) {
+                    rememberChatSelection(info.provider, patch.selection);
+                }
+                if (patch.runtimeMode) {
+                    rememberChatPreferences({ runtimeMode: patch.runtimeMode });
+                }
+                if (patch.account) {
+                    rememberChatAccount(scope.id, info.provider, patch.account);
+                }
+            })
+        );
+    };
+
+    /* A model of another CLI re-points the whole chat; one of this CLI's own is a configure. */
+    const chooseModel = (provider: AgentKind, slug: string): void => {
+        const selection: ModelSelection = { model: slug, options: {} };
+        if (provider !== info.provider) {
+            runConfiguration(() => onRetarget(provider, selection).then(() => rememberChatSelection(provider, selection)));
+            return;
+        }
+        configure({ selection });
+    };
+
+    const stop = (shiftKey: boolean): void => {
+        if (composerStopOf(shiftKey) === 'turn') {
+            void actions.stopTurn(chatId, false).catch(showError);
+            return;
+        }
+        host.confirm.stopSubagents(scope.id, chatId, () => void actions.stopTurn(chatId, true).catch(showError));
+    };
+
+    /* The host decides whether a turn is in the way; only its refusal asks the person first. */
+    const clearThread = async (): Promise<void> => {
+        try {
+            await actions.clear(chatId, false);
+        } catch (e) {
+            if (errorCode(e) === 'chat-busy') {
+                setConfirmClear(true);
+                return;
+            }
+            setNotice(t('composer.notice.clearFailed'));
+        }
+    };
+
+    const forceClearThread = async (): Promise<void> => {
+        await actions.clear(chatId, true);
+        setConfirmClear(false);
+    };
+
+    const compact = (): void => {
+        void actions.compact(chatId).catch(() => setNotice(t('composer.notice.compactFailed')));
+    };
+
+    /* Runs one of the composer's own commands; false for a name it does not handle. */
+    const runCommand = (name: string): boolean => {
+        switch (name) {
+            case 'model':
+                setModelPickerOpen(true);
+                return true;
+            case 'compact':
+                void actions.compact(chatId).catch(() => undefined);
+                return true;
+            case 'clear':
+                void clearThread();
+                return true;
+            default:
+                return false;
+        }
+    };
+
+    return {
+        configurationPending,
+        configure,
+        chooseModel,
+        chooseAccount: (account: string): void => configure({ account }),
+        stop,
+        compact,
+        runCommand,
+        modelPickerOpen,
+        setModelPickerOpen,
+        confirmClear,
+        cancelClear: (): void => setConfirmClear(false),
+        forceClearThread
+    };
+}
+
+export type ChatControls = ReturnType<typeof useChatControls>;

package/src/chat/ui/composer/use-compaction-offer.ts

@@ -0,0 +1,25 @@
+import type { ChatInfo, ChatItem, ProviderCapabilities } from '@adecore/agent-contracts';
+import { useNow } from '@adecore/ui';
+import { useChatRow } from '../../../state/chats';
+import { RESUME_COMPACTION_TOKENS, resumeCompactionOffer } from '../../logic/resume-compaction';
+import { useResumeCompactionDismissal } from '../../resume-compaction-dismissals';
+
+/* The offer to fold a long context before a chat that sat idle goes on, or null when there is none. */
+export function useCompactionOffer(chatId: string, info: ChatInfo, compaction: ProviderCapabilities['compaction'] | undefined) {
+    const order = useChatRow(chatId, (row) => row?.order);
+    const items = useChatRow(chatId, (row) => row?.structure);
+    const dismissedTurnId = useResumeCompactionDismissal(chatId);
+    // The cheap half of the offer, so a chat that can never make one keeps no timer.
+    const couldOffer = compaction !== undefined && compaction !== 'none' && info.usage.contextTokens >= RESUME_COMPACTION_TOKENS;
+    const now = useNow(60_000, couldOffer);
+    if (!couldOffer) {
+        return null;
+    }
+    return resumeCompactionOffer({
+        info,
+        compaction,
+        items: (order ?? []).map((id) => items?.[id]).filter((item): item is ChatItem => item !== undefined),
+        dismissedTurnId,
+        now
+    });
+}

package/src/chat/ui/composer/use-composer-draft.ts

@@ -0,0 +1,71 @@
+import { useContext, useEffect, useRef, useState, type Dispatch, type RefObject, type SetStateAction } from 'react';
+import { EMPTY_DRAFT, joinDraftText, readDraft, takeDraftOffers, writeDraft, type ChatDraft } from '../../drafts';
+import type { ComposerInputHandle } from '../ComposerInput';
+import { QuoteTakerContext } from '../quote-selection';
+
+export interface ComposerDraft {
+    draft: ChatDraft;
+    setDraft: Dispatch<SetStateAction<ChatDraft>>;
+    /* Taking a queued message back waits on the machine, and what was typed meanwhile is what it merges with. */
+    latest: RefObject<ChatDraft>;
+    /* The mentions and skills default to the draft's own as last rendered. */
+    setText(next: string, mentions?: string[], skills?: string[]): void;
+    clear(): void;
+    removeQuote(): void;
+    removeChat(id: string): void;
+    removeAttachment(index: number): void;
+}
+
+/* The chat's unsent prompt, kept in storage as it changes and open to text and quotes handed in from outside. */
+export function useComposerDraft(chatId: string, inputRef: RefObject<ComposerInputHandle | null>): ComposerDraft {
+    const [draft, setDraft] = useState<ChatDraft>(() => readDraft(chatId));
+    const latest = useRef(draft);
+    const registerQuoteTaker = useContext(QuoteTakerContext);
+
+    useEffect(() => {
+        latest.current = draft;
+        writeDraft(chatId, draft);
+    }, [chatId, draft]);
+
+    useEffect(
+        () =>
+            takeDraftOffers(chatId, (offered) => {
+                setDraft((current) => ({ ...current, text: joinDraftText(current.text, offered) }));
+                inputRef.current?.focus();
+            }),
+        [chatId, inputRef]
+    );
+
+    useEffect(
+        () =>
+            registerQuoteTaker?.((selected, itemId) => {
+                setDraft((current) => ({ ...current, quote: selected, quoteSource: itemId }));
+                inputRef.current?.focus();
+            }),
+        [registerQuoteTaker, inputRef]
+    );
+
+    const setText = (next: string, mentions = draft.mentions, chosen = draft.skills): void => {
+        setDraft((current) => ({ ...current, text: next, mentions, skills: chosen }));
+    };
+
+    const clear = (): void => {
+        setDraft(EMPTY_DRAFT);
+    };
+
+    const removeQuote = (): void => {
+        setDraft((current) => ({ ...current, quote: '', quoteSource: null }));
+        inputRef.current?.focus();
+    };
+
+    const removeChat = (id: string): void => {
+        setDraft((current) => ({ ...current, chats: current.chats.filter((entry) => entry !== id) }));
+        inputRef.current?.focus();
+    };
+
+    const removeAttachment = (index: number): void => {
+        setDraft((current) => ({ ...current, attachments: current.attachments.filter((_, i) => i !== index) }));
+    };
+
+    return { draft, setDraft, latest, setText, clear, removeQuote, removeChat, removeAttachment };
+}