@adecore/agents-react 0.23.1 → 0.24.0

package/dist/chat/ui/VisualFrame.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { visualThemeFragment } from '@adecore/agent-contracts/visual';
 import { Spinner, useMeasuredWidth } from '@adecore/ui';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height.js';
 import { VisualBridge } from '../visual-bridge.js';
@@ -24,9 +24,10 @@ function personActsIn(frame) {
  * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
  */
 export function VisualFrame({ chatId, visual, fill = false, className }) {
+    const { visuals, attachments } = useChatHost();
     const { t } = useTranslation('agent-chat');
     const scope = useChatScope();
-    const frameUrl = chatHost().visuals?.frameUrl ?? null;
+    const frameUrl = visuals?.frameUrl ?? null;
     const boxRef = useRef(null);
     const frameRef = useRef(null);
     const bridgeRef = useRef(null);
@@ -61,12 +62,10 @@ export function VisualFrame({ chatId, visual, fill = false, className }) {
         const bridge = new VisualBridge({
             frame: () => frame.contentWindow,
             visual: { maxHeight: visual.maxHeight },
-            page: chatHost()
-                .attachments.read(scope.id, chatId, visual.id)
-                .then((blob) => blob.text()),
+            page: attachments.read(scope.id, chatId, visual.id).then((blob) => blob.text()),
             theme: opening.theme,
             mayOpenLink: () => personActsIn(frame),
-            openLink: (url) => chatHost().visuals?.openLink(url),
+            openLink: (url) => visuals?.openLink(url),
             onHeight: (next) => {
                 if (fill) {
                     return;
@@ -92,7 +91,7 @@ export function VisualFrame({ chatId, visual, fill = false, className }) {
             bridge.dispose();
             bridgeRef.current = null;
         };
-    }, [opening, scope.id, chatId, visual.id, visual.maxHeight, fill]);
+    }, [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments]);
     useLayoutEffect(() => {
         const box = boxRef.current;
         const viewport = viewportRef.current;

package/dist/chat/ui/code-theme.d.ts

@@ -1,3 +1,4 @@
 import type { ThemeRegistration } from 'shiki';
+import { type ChatHost } from '../../host.js';
 export declare function useCodeTheme(): string;
-export declare function shikiThemeOf(id: string): string | ThemeRegistration;
+export declare function shikiThemeOf(id: string, custom: ChatHost['code']['custom']): string | ThemeRegistration;

package/dist/chat/ui/code-theme.js

@@ -1,12 +1,12 @@
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 /* The Shiki theme code is drawn in under the app's current light or dark. */
 export function useCodeTheme() {
-    const { code } = chatHost();
+    const { code } = useChatHost();
     const mode = code.useMode();
     const themes = code.useThemes();
     return mode === 'dark' ? themes.dark : themes.light;
 }
 /* What to hand Shiki for a theme id: a theme the app ships itself, or the id of a bundled one for Shiki to load. */
-export function shikiThemeOf(id) {
-    return chatHost().code.custom.find((theme) => theme.name === id) ?? id;
+export function shikiThemeOf(id, custom) {
+    return custom.find((theme) => theme.name === id) ?? id;
 }

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

@@ -0,0 +1,27 @@
+import { type Ref } from 'react';
+import type { ChatInfo } from '@adecore/agent-contracts';
+import { type Shortcut } from '@adecore/ui';
+import type { StashedPrompt } from '../../stash.js';
+import type { ChatControls } from './use-chat-controls.js';
+interface SendProps {
+    visible: boolean;
+    disabled: boolean;
+    label: string;
+    kbd: Shortcut;
+    onSend(alternate: boolean): void;
+}
+interface ComposerControlsProps {
+    chatId: string;
+    info: ChatInfo;
+    providerFixed: boolean;
+    writable: boolean;
+    attachable: boolean;
+    controls: ChatControls;
+    send: SendProps;
+    dictationToolbar: Ref<HTMLDivElement>;
+    onFiles(files: File[]): void;
+    onRestore(prompt: StashedPrompt): void;
+    insert(text: string): void;
+}
+export declare function ComposerControls({ chatId, info, providerFixed, writable, attachable, controls, send, dictationToolbar, onFiles, onRestore, insert }: ComposerControlsProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowUp, Plus, Square } from 'lucide-react';
+import { ErrorBoundary, Icon, 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 { 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. */
+export function ComposerControls({ chatId, info, providerFixed, writable, attachable, controls, send, dictationToolbar, onFiles, onRestore, insert }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const Slot = useChatHost().ComposerSlot;
+    const providers = useProviders((row) => row.providers);
+    const accountChoice = useAccountChoice(info.provider, info.account);
+    const fileInputRef = useRef(null);
+    const busy = info.activeTurnId !== null;
+    const model = providers.find((entry) => entry.kind === info.provider)?.models.find((entry) => entry.slug === info.selection.model);
+    // The CLI announces its session on the first message, so anything before that is still a blank chat.
+    const started = info.agentSessionId !== null || info.usage.turns > 0;
+    // A chat that has started keeps its provider (the CLI holds the thread), and so does one opened for a
+    // named CLI; its models stay switchable, since the CLI takes a new one on the restart the next send does.
+    const pickable = started || providerFixed
+        ? providers.filter((entry) => entry.kind === info.provider)
+        : providers.filter((entry) => entry.installed && entry.capabilities.chat);
+    return (_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: [attachable && (_jsx(Tooltip, { label: t('composer.attach'), name: true, children: _jsx("button", { type: "button", className: "grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50", disabled: !writable, onClick: () => fileInputRef.current?.click(), children: _jsx(Icon, { icon: Plus, size: 16 }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, onChange: (e) => {
+                    onFiles(Array.from(e.target.files ?? []));
+                    e.target.value = '';
+                } }), _jsx(RunSettings, { disabled: controls.configurationPending || !writable, providers: pickable, provider: info.provider, selection: info.selection, model: model, runtimeMode: info.runtimeMode, effectiveRuntimeMode: info.effectiveRuntimeMode, permissionMode: info.permissionMode, open: controls.modelPickerOpen, onOpenChange: controls.setModelPickerOpen, onModel: controls.chooseModel, onOption: (id, value) => controls.configure({ selection: { ...info.selection, options: { ...info.selection.options, [id]: value } } }), onMode: (runtimeMode) => controls.configure({ runtimeMode }), usage: info.usage, compactDisabled: busy || !writable, onCompact: controls.compact, account: accountChoice === null ? null : { choice: accountChoice, started, onPick: controls.chooseAccount } }), _jsx(StashPicker, { onRestore: onRestore }), Slot !== null && (_jsx(ErrorBoundary, { label: t('composer.slotFailed'), resetKeys: [chatId], compact: true, className: "relative rounded-lg", children: _jsx(Slot, { scopeId: scope.id, chatId: chatId, disabled: !writable, insert: insert }) })), _jsx("span", { className: "grow" }), _jsxs("div", { className: "flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover", children: [_jsx("div", { ref: dictationToolbar, className: "flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" }), busy && (_jsx(Tooltip, { label: composerStopLabel(), name: true, children: _jsx("button", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-status-error text-accent-text", onClick: (event) => controls.stop(event.shiftKey), children: _jsx(Icon, { icon: Square, size: 16 }) }) })), send.visible && (_jsx(Tooltip, { label: send.label, kbd: send.kbd, name: true, children: _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) => send.onSend(event.altKey), children: _jsx(Icon, { icon: ArrowUp, size: 16 }) }) }))] })] }));
+}

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

@@ -0,0 +1,4 @@
+import type { ComposerMenus as Menus } from './use-composer-menus.js';
+export declare function ComposerMenu({ menus }: {
+    menus: Menus;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { MessageSquare, SquareSlash, Zap } from 'lucide-react';
+import { FileIcon, Icon, Menu, MiddleTruncate } from '@adecore/ui';
+import { optionIdOf } from './menu-aria.js';
+function splitPath(path) {
+    const slash = path.lastIndexOf('/');
+    return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
+}
+/* A row of a picker. The focus stays in the editor, which names the active row through `aria-activedescendant`. */
+function MenuOption({ menus, index, className, onPick, children }) {
+    return (_jsx("button", { id: optionIdOf(menus.listId, index), role: "option", "aria-selected": index === menus.activeIndex, tabIndex: -1, "data-active": index === menus.activeIndex, className: clsx('cursor-row flex w-full gap-2 rounded-md px-2 py-1 text-left text-xs text-text-muted', className), onMouseEnter: () => menus.setMenuIndex(index), onMouseDown: (e) => e.preventDefault(), onClick: onPick, children: children }));
+}
+function CommandMenu({ menus }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx("div", { id: menus.listId, role: "listbox", "aria-label": t('composer.menu.commands'), className: "border-b border-border px-1.5 py-1.5", children: menus.commands.map((command, index) => (_jsxs(MenuOption, { menus: menus, index: index, className: "items-center", onPick: () => menus.pickCommand(command, index), children: [_jsx(Icon, { icon: command.skill ? Zap : SquareSlash, size: 12, className: clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint') }), _jsxs("span", { className: "font-mono text-text", children: ["/", command.name] }), _jsx("span", { className: "text-text-faint", children: command.hint })] }, command.name))) }));
+}
+function SkillMenu({ menus }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx("div", { id: menus.listId, role: "listbox", "aria-label": t('composer.menu.skills'), className: "border-b border-border px-1.5 py-1.5", children: menus.skillMatches.map((skill, index) => (_jsxs(MenuOption, { menus: menus, index: index, className: "items-start", onPick: () => menus.chooseSkill(skill.name), children: [_jsx(Icon, { icon: Zap, size: 12, className: "mt-0.5 shrink-0 text-skill" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "truncate font-mono text-text", children: ["$", skill.name] }), skill.description !== '' && _jsx("span", { className: "line-clamp-1 text-text-faint", children: skill.description })] })] }, skill.name))) }));
+}
+function MentionMenu({ menus, query }) {
+    const { t } = useTranslation('agent-chat');
+    const { listId, chatMatches, files, mentionCount } = menus;
+    const mentionsLabelId = `${listId}-chats`;
+    const filesLabelId = `${listId}-files`;
+    const filesLabelShown = query === '' || chatMatches.length > 0;
+    return (_jsxs("div", { className: "border-b border-border px-1.5 py-1.5", children: [mentionCount > 0 && (_jsxs("div", { id: listId, role: "listbox", "aria-label": t('composer.menu.mentions'), children: [chatMatches.length > 0 && (_jsxs("div", { role: "group", "aria-labelledby": mentionsLabelId, children: [_jsx(Menu.Label, { id: mentionsLabelId, children: t('composer.mentions.chats') }), chatMatches.map((chat, index) => (_jsxs(MenuOption, { menus: menus, index: index, className: "items-center", onPick: () => menus.chooseChat(chat.id), children: [_jsx(Icon, { icon: MessageSquare, size: 14, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate text-text", children: chat.title || t('chatReference.untitled') })] }, chat.id)))] })), files.length > 0 && (_jsxs("div", { role: "group", ...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') }), children: [filesLabelShown && (_jsx(Menu.Label, { id: filesLabelId, children: query === '' ? t('composer.mentions.here') : t('composer.mentions.files') })), files.map((path, index) => {
+                                const { name, dir } = splitPath(path);
+                                return (_jsxs(MenuOption, { menus: menus, index: chatMatches.length + index, className: "items-center", onPick: () => menus.chooseMention(path), children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate font-mono text-text", children: name }), dir && _jsx(MiddleTruncate, { text: dir, tooltip: false, className: "text-text-faint" })] }, path));
+                            })] }))] })), mentionCount === 0 && (_jsx("div", { className: "px-2 py-1 text-xs text-text-faint", children: query ? t('composer.mentions.noMatch') : t('composer.mentions.empty') }))] }));
+}
+/* Whichever picker the caret opened, over the box. */
+export function ComposerMenu({ menus }) {
+    if (menus.commandMenuOpen) {
+        return _jsx(CommandMenu, { menus: menus });
+    }
+    if (menus.skillMenuOpen) {
+        return _jsx(SkillMenu, { menus: menus });
+    }
+    if (menus.mentionMenuOpen && menus.mention !== null) {
+        return _jsx(MentionMenu, { menus: menus, query: menus.mention.query });
+    }
+    return null;
+}

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

@@ -0,0 +1,18 @@
+import type { ChatAttachmentUpload } from '@adecore/agent-contracts';
+interface DraftQuoteProps {
+    chatId: string;
+    quote: string;
+    source: string | null;
+    onRemove(): void;
+    onSourceGone(): void;
+}
+export declare function DraftQuote({ chatId, quote, source, onRemove, onSourceGone }: DraftQuoteProps): import("react").JSX.Element;
+export declare function DraftChats({ chats, onRemove }: {
+    chats: readonly string[];
+    onRemove(id: string): void;
+}): import("react").JSX.Element;
+export declare function DraftAttachments({ attachments, onRemove }: {
+    attachments: readonly ChatAttachmentUpload[];
+    onRemove(index: number): void;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Paperclip, X } from 'lucide-react';
+import { Icon, IconButton, Tooltip } from '@adecore/ui';
+import { useChatScope } from '../../../scope.js';
+import { formatBytes, isImageAttachment, uploadBytes } from '../../attachments.js';
+import { jumpToTimelineItem } from '../../timeline-scroll.js';
+import { ChatReferenceChip } from '../ChatReferenceChip.js';
+import { UploadThumb } from '../UploadThumb.js';
+const ROW = 'px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3';
+/* The quote that goes above the message, as a blockquote. */
+export function DraftQuote({ chatId, quote, source, onRemove, onSourceGone }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    return (_jsxs("div", { className: `flex items-center gap-2 ${ROW}`, children: [source === null ? (_jsx("span", { className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted", children: quote })) : (_jsx(Tooltip, { label: t('composer.quote.goToSource'), children: _jsx("button", { type: "button", className: "min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-left text-xs text-text-muted hover:text-text", onClick: () => jumpToTimelineItem(scope.keyOf(chatId), source, { flash: true, onMissing: onSourceGone }), children: quote }) })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.quote.remove'), onClick: onRemove })] }));
+}
+/* Other chats the message points at, beside the text rather than in it. */
+export function DraftChats({ chats, onRemove }) {
+    return (_jsx("div", { className: `flex flex-wrap gap-1.5 ${ROW}`, children: chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id, onRemove: () => onRemove(id) }, id))) }));
+}
+/* The files the message carries: an image as a thumbnail, anything else by its name and size. */
+export function DraftAttachments({ attachments, onRemove }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx("div", { className: `flex flex-wrap gap-2 ${ROW}`, children: attachments.map((attachment, index) => (_jsxs("div", { className: "group/thumb relative", children: [isImageAttachment(attachment.mime) ? (_jsx(UploadThumb, { upload: attachment })) : (_jsxs("span", { className: "flex h-14 w-36 flex-col justify-center gap-0.5 rounded-lg border border-border bg-surface-sunken px-2.5", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-text", children: [_jsx(Icon, { icon: Paperclip, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "truncate", children: attachment.name })] }), _jsx("span", { className: "pl-5 text-xs text-text-faint", children: formatBytes(uploadBytes(attachment)) })] })), _jsx(IconButton, { icon: X, size: "2xs", label: t('composer.removeAttachment', { name: attachment.name }), className: "absolute -top-1.5 -right-1.5 border border-border bg-surface-raised opacity-0 transition-opacity group-hover/thumb:opacity-100 focus-visible:opacity-100", onClick: () => onRemove(index) })] }, `${attachment.name}-${index}`))) }));
+}

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

@@ -0,0 +1,10 @@
+import type { ChatQueuedMessage } from '@adecore/agent-contracts';
+interface QueuedMessagesProps {
+    chatId: string;
+    queue: readonly ChatQueuedMessage[];
+    paused: boolean;
+    takingBack: boolean;
+    onEdit(message: ChatQueuedMessage): void;
+}
+export declare function QueuedMessages({ chatId, queue, paused, takingBack, onEdit }: QueuedMessagesProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Clock, Copy, FastForward, Pencil, X } from 'lucide-react';
+import { ButtonGroup, ContextMenu, copyText, Icon, IconButton } from '@adecore/ui';
+import { useChatActions } from '../../actions.js';
+import { scrollTimelineToEnd } from '../../timeline-scroll.js';
+/* The messages waiting for the running turn to end, each with a way to send it now, edit it or drop it. */
+export function QueuedMessages({ chatId, queue, paused, takingBack, onEdit }) {
+    const { t } = useTranslation('agent-chat');
+    const actions = useChatActions();
+    return (_jsxs("div", { className: "flex flex-col gap-1 border-b border-border px-2 py-1.5", children: [paused && _jsx("p", { className: "px-1.5 text-xs text-text-muted", children: t('composer.queue.paused') }), queue.map((message) => {
+                const sendNow = () => {
+                    scrollTimelineToEnd(chatId, 'instant');
+                    void actions.sendNow(chatId, message.id).catch(() => undefined);
+                };
+                const unqueue = () => void actions.unqueue(chatId, message.id).catch(() => undefined);
+                const edit = () => onEdit(message);
+                return (_jsxs(ContextMenu.Root, { children: [_jsxs(ContextMenu.Trigger, { className: "group/queued flex items-center gap-2 rounded-md px-1.5 py-1 text-xs text-text-muted", children: [_jsx(Icon, { icon: Clock, size: 12, className: "shrink-0 text-text-faint" }), _jsx("span", { className: "min-w-0 grow truncate", children: message.text || t('composer.queue.attachments', { count: message.attachments?.length ?? 0 }) }), _jsxs(ButtonGroup, { render: _jsx("span", {}), className: "opacity-0 transition-opacity group-hover/queued:opacity-100 focus-within:opacity-100", children: [_jsx(IconButton, { icon: FastForward, size: "2xs", label: t('composer.queue.sendNow'), onClick: sendNow }), _jsx(IconButton, { icon: Pencil, size: "2xs", label: t('common.action.edit'), disabled: takingBack, onClick: edit }), _jsx(IconButton, { icon: X, size: "2xs", label: t('common.action.remove'), onClick: unqueue })] })] }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { onClick: sendNow, children: [_jsx(Icon, { icon: FastForward, size: 14 }), " ", t('composer.queue.sendNow')] }), _jsxs(ContextMenu.Item, { disabled: takingBack, onClick: edit, children: [_jsx(Icon, { icon: Pencil, size: 14 }), " ", t('common.action.edit')] }), _jsxs(ContextMenu.Item, { disabled: message.text === '', onClick: () => copyText(message.text), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('common.action.copy')] }), _jsx(ContextMenu.Separator, {}), _jsxs(ContextMenu.Item, { className: "text-status-error", onClick: unqueue, children: [_jsx(Icon, { icon: X, size: 14 }), " ", t('common.action.remove')] })] })] }, message.id));
+            })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { EditorView } from '@codemirror/view';
+import type { ChatHost } from '../../../host.js';
+import type { ComposerSend } from '../../composer-send.js';
+import type { ChatSendKey } from '../../send-key.js';
+import type { ComposerMenus } from './use-composer-menus.js';
+import type { PromptHistory } from './use-prompt-history.js';
+interface KeyHandlerInput {
+    chatId: string;
+    host: Pick<ChatHost, 'isApplePlatform' | 'isAppShortcut' | 'openNewChat'>;
+    sendKey: ChatSendKey;
+    text: string;
+    menus: ComposerMenus;
+    history: PromptHistory;
+    noteKey(e: KeyboardEvent): void;
+    toggleStash(): void;
+    setText(next: string): void;
+    submit(how: ComposerSend): void;
+}
+export declare function composerKeyHandler(input: KeyHandlerInput): (e: KeyboardEvent, view: EditorView) => boolean;
+export {};

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

@@ -0,0 +1,150 @@
+import { indentLess, indentMore, insertNewline } from '@codemirror/commands';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import { isModHeld, matchesShortcut } from '@adecore/ui';
+import { STASH_SHORTCUT } from '../../stash.js';
+import { pageTimeline } from '../../timeline-scroll.js';
+import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './keys.js';
+const SEND_HOW = {
+    send: 'default',
+    'send-alternate': 'alternate',
+    'send-and-new': 'and-new'
+};
+/* In a fence Tab indents like a code editor; anywhere else it keeps moving the focus. */
+function indentInFence(e, view) {
+    const { state } = view;
+    const { from, to, head } = state.selection.main;
+    const tree = ensureSyntaxTree(state, state.doc.length, 50) ?? syntaxTree(state);
+    if (!inFenceBody(tree, state.doc.toString(), head)) {
+        return false;
+    }
+    // Handled even when there is nothing to outdent, so Shift+Tab never throws the focus out of a block.
+    if (e.shiftKey) {
+        indentLess(view);
+    }
+    else if (from !== to) {
+        indentMore(view);
+    }
+    else {
+        view.dispatch(state.replaceSelection(tabSpaces(head - state.doc.lineAt(head).from)), { scrollIntoView: true, userEvent: 'input' });
+    }
+    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 }) {
+    const { activeIndex } = menus;
+    if (menus.commandMenuOpen) {
+        if (menus.moveInMenu(e.key, menus.commands.length)) {
+            return true;
+        }
+        if (e.key === 'Tab') {
+            const chosen = menus.commands[activeIndex];
+            if (chosen.skill) {
+                menus.chooseSkill(chosen.name);
+            }
+            else {
+                setText(`/${chosen.name} `);
+            }
+            return true;
+        }
+    }
+    if (menus.skillMenuOpen) {
+        if (menus.moveInMenu(e.key, menus.skillMatches.length)) {
+            return true;
+        }
+        if (e.key === 'Tab' || e.key === 'Enter') {
+            menus.chooseSkill((menus.skillMatches[activeIndex] ?? menus.skillMatches[0]).name);
+            return true;
+        }
+    }
+    if (menus.mentionMenuOpen && menus.mentionCount > 0) {
+        if (menus.moveInMenu(e.key, menus.mentionCount)) {
+            return true;
+        }
+        if (e.key === 'Tab' || e.key === 'Enter') {
+            menus.chooseMentionAt(activeIndex);
+            return true;
+        }
+    }
+    return false;
+}
+/* Enter sends, adds a line, or carries a list on, by the send key and where the caret is. */
+function enter(e, view, { host, sendKey, submit }) {
+    const { state } = view;
+    const { from, to, head } = state.selection.main;
+    // Parsed to the end, since the fence that closes the block can sit after the caret.
+    const tree = ensureSyntaxTree(state, state.doc.length, 50) ?? syntaxTree(state);
+    const line = state.doc.lineAt(head);
+    const list = from === to && !inCode(tree, state.doc.toString(), head) ? listItemAt(line.text) : null;
+    const action = enterAction({ shift: e.shiftKey, mod: isModHeld(e, host.isApplePlatform()), alt: e.altKey }, {
+        inOpenFence: inOpenFence(tree, head),
+        list,
+        column: head - line.from,
+        sendKey,
+        multiline: state.doc.lines > 1,
+        startsNewChat: host.openNewChat !== null
+    });
+    if (action === 'newline') {
+        return insertNewline(view);
+    }
+    if (action === 'continue-list') {
+        if (list) {
+            view.dispatch({
+                changes: { from: head, insert: `\n${list.next}` },
+                selection: { anchor: head + 1 + list.next.length },
+                scrollIntoView: true,
+                userEvent: 'input'
+            });
+        }
+        return true;
+    }
+    if (action === 'leave-list') {
+        view.dispatch({ changes: { from: line.from, to: line.to }, selection: { anchor: line.from }, userEvent: 'delete' });
+        return true;
+    }
+    submit(SEND_HOW[action]);
+    return true;
+}
+/* Runs before the editor's own keymap; true means the key is handled and its default prevented. */
+export function composerKeyHandler(input) {
+    const { chatId, host, text, history } = input;
+    return (e, view) => {
+        input.noteKey(e);
+        // Escape leaves the node, unless it first has a recalled prompt to put back.
+        if (e.key === 'Escape' && !e.isComposing) {
+            if (!history.leave()) {
+                return false;
+            }
+            e.stopPropagation();
+            return true;
+        }
+        // The app's own shortcuts stay the app's while you type: Mod+Shift+Enter would otherwise send as well.
+        if (host.isAppShortcut(e)) {
+            return false;
+        }
+        e.stopPropagation();
+        // A key inside an IME composition belongs to the composition, Enter and the arrows included.
+        if (e.isComposing) {
+            return false;
+        }
+        // Reading back through a long answer should not mean leaving the box you are typing in.
+        if (e.key === 'PageUp' || e.key === 'PageDown') {
+            return pageTimeline(chatId, e.key === 'PageUp' ? -1 : 1);
+        }
+        if (matchesShortcut(STASH_SHORTCUT, e, host.isApplePlatform())) {
+            input.toggleStash();
+            return true;
+        }
+        if (pickInMenu(e, input)) {
+            return true;
+        }
+        if (e.key === 'Tab' && !e.altKey && !e.metaKey && !e.ctrlKey && indentInFence(e, view)) {
+            return true;
+        }
+        if (e.key === 'Enter') {
+            return enter(e, view, input);
+        }
+        const { from, to } = view.state.selection.main;
+        const direction = recallDirection({ key: e.key, text, from, to, recalled: history.recalled(text) });
+        return direction !== null && history.recall(direction);
+    };
+}

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

@@ -1,8 +1,10 @@
 import type { Tree } from '@lezer/common';
-export type EnterAction = 'send' | 'newline' | 'continue-list' | 'leave-list';
+import { type ChatSendKey } from '../../send-key.js';
+export type EnterAction = 'send' | 'send-alternate' | 'send-and-new' | 'newline' | 'continue-list' | 'leave-list';
 export interface EnterKeys {
     shift: boolean;
     mod: boolean;
+    alt?: boolean;
 }
 export interface ListItem {
     prefix: string;
@@ -13,9 +15,12 @@ export interface EnterContext {
     inOpenFence: boolean;
     list: ListItem | null;
     column: number;
+    sendKey?: ChatSendKey;
+    multiline?: boolean;
+    startsNewChat?: boolean;
 }
 export declare function listItemAt(line: string): ListItem | null;
-export declare function enterAction(keys: EnterKeys, { inOpenFence, list, column }: EnterContext): EnterAction;
+export declare function enterAction(keys: EnterKeys, { inOpenFence, list, column, sendKey, multiline, startsNewChat }: EnterContext): EnterAction;
 export declare function inOpenFence(tree: Tree, pos: number): boolean;
 export declare function inFenceBody(tree: Tree, text: string, pos: number): boolean;
 export declare function tabSpaces(column: number): string;

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

@@ -1,3 +1,4 @@
+import { modSends } from '../../send-key.js';
 const LIST_ITEM = /^([ \t]*)(?:([-*+])|(\d{1,9})([.)]))([ \t]+)(\[[ xX]\](?:[ \t]+|$))?/;
 /* The list item a line starts, if it starts one. */
 export function listItemAt(line) {
@@ -12,23 +13,32 @@ export function listItemAt(line) {
 /*
  * 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, { inOpenFence, list, column }) {
+export function enterAction(keys, { inOpenFence, list, column, sendKey = 'enter', multiline = false, startsNewChat = false }) {
+    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. */
 function enclosingFence(tree, pos) {

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

@@ -0,0 +1,9 @@
+interface PlaceholderInput {
+    chatId: string;
+    disabled: boolean;
+    readOnly: boolean;
+    mentionable: boolean;
+    hasSkills: boolean;
+}
+export declare function useHintedPlaceholder({ chatId, disabled, readOnly, mentionable, hasSkills }: PlaceholderInput): string | HTMLElement;
+export {};

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

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useChatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+/* The empty box names its sigils as key caps, so they read as keys to press rather than as punctuation. */
+function hintedPlaceholder(lead, joiner, hints) {
+    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;
+}
+/* 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 }) {
+    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/dist/chat/ui/composer/use-chat-controls.d.ts

@@ -0,0 +1,28 @@
+import type { AgentKind, ChatInfo, ModelSelection, RuntimeMode } from '@adecore/agent-contracts';
+import type { ComposerNotice } from './use-notice.js';
+interface ControlsInput {
+    chatId: string;
+    info: ChatInfo;
+    notice: ComposerNotice;
+    onRetarget(provider: AgentKind, selection: ModelSelection): Promise<void>;
+}
+export declare function useChatControls({ chatId, info, notice: { setNotice, showError }, onRetarget }: ControlsInput): {
+    configurationPending: boolean;
+    configure: (patch: {
+        selection?: ModelSelection;
+        runtimeMode?: RuntimeMode;
+        account?: string;
+    }) => void;
+    chooseModel: (provider: AgentKind, slug: string) => void;
+    chooseAccount: (account: string) => void;
+    stop: (shiftKey: boolean) => void;
+    compact: () => void;
+    runCommand: (name: string) => boolean;
+    modelPickerOpen: boolean;
+    setModelPickerOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    confirmClear: boolean;
+    cancelClear: () => void;
+    forceClearThread: () => Promise<void>;
+};
+export type ChatControls = ReturnType<typeof useChatControls>;
+export {};