@adecore/agents-react 0.23.0 → 0.24.0

package/src/chat/ui/composer/ComposerControls.tsx

@@ -0,0 +1,147 @@
+import { useRef, type Ref } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowUp, Plus, Square } from 'lucide-react';
+import type { ChatInfo } from '@adecore/agent-contracts';
+import { ErrorBoundary, Icon, Tooltip, type Shortcut } from '@adecore/ui';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { useProviders } from '../../../state/providers';
+import { useAccountChoice } from '../../account-choice';
+import type { StashedPrompt } from '../../stash';
+import { composerStopLabel } from '../../subagent-list';
+import { StashPicker } from '../Pickers';
+import { RunSettings } from '../RunSettings';
+import type { ChatControls } from './use-chat-controls';
+
+interface SendProps {
+    /* Absent while a turn runs and the box is empty, when the stop button stands alone. */
+    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;
+}
+
+/* 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
+}: ComposerControlsProps) {
+    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<HTMLInputElement>(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 (
+        // The composer's controls are round, from attach to send, so they keep their own shape instead of `.icon-btn`'s.
+        <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">
+            {attachable && (
+                <Tooltip label={t('composer.attach')} name>
+                    <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()}
+                    >
+                        <Icon icon={Plus} size={16} />
+                    </button>
+                </Tooltip>
+            )}
+            <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                hidden
+                onChange={(e) => {
+                    onFiles(Array.from(e.target.files ?? []));
+                    e.target.value = '';
+                }}
+            />
+            <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 }}
+            />
+            <StashPicker onRestore={onRestore} />
+            {Slot !== null && (
+                <ErrorBoundary label={t('composer.slotFailed')} resetKeys={[chatId]} compact className="relative rounded-lg">
+                    <Slot scopeId={scope.id} chatId={chatId} disabled={!writable} insert={insert} />
+                </ErrorBoundary>
+            )}
+            <span className="grow" />
+            <div className="flex h-9 shrink-0 items-center gap-0.5 rounded-full bg-surface-hover">
+                <div ref={dictationToolbar} className="flex items-center pl-1 empty:hidden [&_.icon-btn]:rounded-full" />
+                {busy && (
+                    <Tooltip label={composerStopLabel()} name>
+                        <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)}
+                        >
+                            <Icon icon={Square} size={16} />
+                        </button>
+                    </Tooltip>
+                )}
+                {send.visible && (
+                    <Tooltip label={send.label} kbd={send.kbd} name>
+                        <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)}
+                        >
+                            <Icon icon={ArrowUp} size={16} />
+                        </button>
+                    </Tooltip>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/chat/ui/composer/ComposerMenu.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+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 type { ComposerMenus as Menus } from './use-composer-menus';
+import { optionIdOf } from './menu-aria';
+
+function splitPath(path: string): { name: string; dir: string } {
+    const slash = path.lastIndexOf('/');
+    return slash < 0 ? { name: path, dir: '' } : { name: path.slice(slash + 1), dir: path.slice(0, slash) };
+}
+
+interface OptionProps {
+    menus: Menus;
+    index: number;
+    className: string;
+    onPick(): void;
+    children: ReactNode;
+}
+
+/* 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 }: OptionProps) {
+    return (
+        <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}
+        </button>
+    );
+}
+
+function CommandMenu({ menus }: { menus: Menus }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div id={menus.listId} role="listbox" aria-label={t('composer.menu.commands')} className="border-b border-border px-1.5 py-1.5">
+            {menus.commands.map((command, index) => (
+                <MenuOption key={command.name} menus={menus} index={index} className="items-center" onPick={() => menus.pickCommand(command, index)}>
+                    <Icon icon={command.skill ? Zap : SquareSlash} size={12} className={clsx('shrink-0', command.skill ? 'text-skill' : 'text-text-faint')} />
+                    <span className="font-mono text-text">/{command.name}</span>
+                    <span className="text-text-faint">{command.hint}</span>
+                </MenuOption>
+            ))}
+        </div>
+    );
+}
+
+function SkillMenu({ menus }: { menus: Menus }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div id={menus.listId} role="listbox" aria-label={t('composer.menu.skills')} className="border-b border-border px-1.5 py-1.5">
+            {menus.skillMatches.map((skill, index) => (
+                <MenuOption key={skill.name} menus={menus} index={index} className="items-start" onPick={() => menus.chooseSkill(skill.name)}>
+                    <Icon icon={Zap} size={12} className="mt-0.5 shrink-0 text-skill" />
+                    <span className="flex min-w-0 flex-col">
+                        <span className="truncate font-mono text-text">${skill.name}</span>
+                        {skill.description !== '' && <span className="line-clamp-1 text-text-faint">{skill.description}</span>}
+                    </span>
+                </MenuOption>
+            ))}
+        </div>
+    );
+}
+
+function MentionMenu({ menus, query }: { menus: Menus; query: string }) {
+    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 (
+        <div className="border-b border-border px-1.5 py-1.5">
+            {mentionCount > 0 && (
+                <div id={listId} role="listbox" aria-label={t('composer.menu.mentions')}>
+                    {chatMatches.length > 0 && (
+                        <div role="group" aria-labelledby={mentionsLabelId}>
+                            <Menu.Label id={mentionsLabelId}>{t('composer.mentions.chats')}</Menu.Label>
+                            {chatMatches.map((chat, index) => (
+                                <MenuOption key={chat.id} menus={menus} index={index} className="items-center" onPick={() => menus.chooseChat(chat.id)}>
+                                    <Icon icon={MessageSquare} size={14} className="shrink-0 text-text-faint" />
+                                    <span className="truncate text-text">{chat.title || t('chatReference.untitled')}</span>
+                                </MenuOption>
+                            ))}
+                        </div>
+                    )}
+                    {files.length > 0 && (
+                        <div role="group" {...(filesLabelShown ? { 'aria-labelledby': filesLabelId } : { 'aria-label': t('composer.mentions.files') })}>
+                            {filesLabelShown && (
+                                <Menu.Label id={filesLabelId}>{query === '' ? t('composer.mentions.here') : t('composer.mentions.files')}</Menu.Label>
+                            )}
+                            {files.map((path, index) => {
+                                const { name, dir } = splitPath(path);
+                                return (
+                                    <MenuOption
+                                        key={path}
+                                        menus={menus}
+                                        index={chatMatches.length + index}
+                                        className="items-center"
+                                        onPick={() => menus.chooseMention(path)}
+                                    >
+                                        <FileIcon path={path} size={14} />
+                                        <span className="truncate font-mono text-text">{name}</span>
+                                        {dir && <MiddleTruncate text={dir} tooltip={false} className="text-text-faint" />}
+                                    </MenuOption>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            )}
+            {mentionCount === 0 && (
+                <div className="px-2 py-1 text-xs text-text-faint">{query ? t('composer.mentions.noMatch') : t('composer.mentions.empty')}</div>
+            )}
+        </div>
+    );
+}
+
+/* Whichever picker the caret opened, over the box. */
+export function ComposerMenu({ menus }: { menus: Menus }) {
+    if (menus.commandMenuOpen) {
+        return <CommandMenu menus={menus} />;
+    }
+    if (menus.skillMenuOpen) {
+        return <SkillMenu menus={menus} />;
+    }
+    if (menus.mentionMenuOpen && menus.mention !== null) {
+        return <MentionMenu menus={menus} query={menus.mention.query} />;
+    }
+    return null;
+}

package/src/chat/ui/composer/DraftParts.tsx

@@ -0,0 +1,86 @@
+import { useTranslation } from 'react-i18next';
+import { Paperclip, X } from 'lucide-react';
+import type { ChatAttachmentUpload } from '@adecore/agent-contracts';
+import { Icon, IconButton, Tooltip } from '@adecore/ui';
+import { useChatScope } from '../../../scope';
+import { formatBytes, isImageAttachment, uploadBytes } from '../../attachments';
+import { jumpToTimelineItem } from '../../timeline-scroll';
+import { ChatReferenceChip } from '../ChatReferenceChip';
+import { UploadThumb } from '../UploadThumb';
+
+const ROW = 'px-5 pt-4 @max-md/composer:px-3.5 @max-md/composer:pt-3';
+
+interface DraftQuoteProps {
+    chatId: string;
+    quote: string;
+    /* The reply the quote came from, which a click scrolls to; null for a quote that names none. */
+    source: string | null;
+    onRemove(): void;
+    onSourceGone(): void;
+}
+
+/* The quote that goes above the message, as a blockquote. */
+export function DraftQuote({ chatId, quote, source, onRemove, onSourceGone }: DraftQuoteProps) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    return (
+        <div className={`flex items-center gap-2 ${ROW}`}>
+            {source === null ? (
+                <span className="min-w-0 grow truncate border-l-2 border-border-strong pl-2.5 text-xs text-text-muted">{quote}</span>
+            ) : (
+                <Tooltip label={t('composer.quote.goToSource')}>
+                    <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 })}
+                    >
+                        {quote}
+                    </button>
+                </Tooltip>
+            )}
+            <IconButton icon={X} size="2xs" label={t('composer.quote.remove')} onClick={onRemove} />
+        </div>
+    );
+}
+
+/* Other chats the message points at, beside the text rather than in it. */
+export function DraftChats({ chats, onRemove }: { chats: readonly string[]; onRemove(id: string): void }) {
+    return (
+        <div className={`flex flex-wrap gap-1.5 ${ROW}`}>
+            {chats.map((id) => (
+                <ChatReferenceChip key={id} chatId={id} onRemove={() => onRemove(id)} />
+            ))}
+        </div>
+    );
+}
+
+/* The files the message carries: an image as a thumbnail, anything else by its name and size. */
+export function DraftAttachments({ attachments, onRemove }: { attachments: readonly ChatAttachmentUpload[]; onRemove(index: number): void }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div className={`flex flex-wrap gap-2 ${ROW}`}>
+            {attachments.map((attachment, index) => (
+                <div key={`${attachment.name}-${index}`} className="group/thumb relative">
+                    {isImageAttachment(attachment.mime) ? (
+                        <UploadThumb upload={attachment} />
+                    ) : (
+                        <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">
+                            <span className="flex items-center gap-1.5 text-xs text-text">
+                                <Icon icon={Paperclip} size={12} className="shrink-0 text-text-faint" />
+                                <span className="truncate">{attachment.name}</span>
+                            </span>
+                            <span className="pl-5 text-xs text-text-faint">{formatBytes(uploadBytes(attachment))}</span>
+                        </span>
+                    )}
+                    <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)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+}

package/src/chat/ui/composer/QueuedMessages.tsx

@@ -0,0 +1,64 @@
+import { useTranslation } from 'react-i18next';
+import { Clock, Copy, FastForward, Pencil, X } from 'lucide-react';
+import type { ChatQueuedMessage } from '@adecore/agent-contracts';
+import { ButtonGroup, ContextMenu, copyText, Icon, IconButton } from '@adecore/ui';
+import { useChatActions } from '../../actions';
+import { scrollTimelineToEnd } from '../../timeline-scroll';
+
+interface QueuedMessagesProps {
+    chatId: string;
+    queue: readonly ChatQueuedMessage[];
+    paused: boolean;
+    /* A message is on its way back into the draft, so no other can follow until it is there. */
+    takingBack: boolean;
+    onEdit(message: ChatQueuedMessage): void;
+}
+
+/* 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 }: QueuedMessagesProps) {
+    const { t } = useTranslation('agent-chat');
+    const actions = useChatActions();
+    return (
+        <div className="flex flex-col gap-1 border-b border-border px-2 py-1.5">
+            {paused && <p className="px-1.5 text-xs text-text-muted">{t('composer.queue.paused')}</p>}
+            {queue.map((message) => {
+                const sendNow = (): void => {
+                    scrollTimelineToEnd(chatId, 'instant');
+                    void actions.sendNow(chatId, message.id).catch(() => undefined);
+                };
+                const unqueue = (): void => void actions.unqueue(chatId, message.id).catch(() => undefined);
+                const edit = (): void => onEdit(message);
+                return (
+                    <ContextMenu.Root key={message.id}>
+                        <ContextMenu.Trigger className="group/queued flex items-center gap-2 rounded-md px-1.5 py-1 text-xs text-text-muted">
+                            <Icon icon={Clock} size={12} className="shrink-0 text-text-faint" />
+                            <span className="min-w-0 grow truncate">
+                                {message.text || t('composer.queue.attachments', { count: message.attachments?.length ?? 0 })}
+                            </span>
+                            <ButtonGroup render={<span />} className="opacity-0 transition-opacity group-hover/queued:opacity-100 focus-within:opacity-100">
+                                <IconButton icon={FastForward} size="2xs" label={t('composer.queue.sendNow')} onClick={sendNow} />
+                                <IconButton icon={Pencil} size="2xs" label={t('common.action.edit')} disabled={takingBack} onClick={edit} />
+                                <IconButton icon={X} size="2xs" label={t('common.action.remove')} onClick={unqueue} />
+                            </ButtonGroup>
+                        </ContextMenu.Trigger>
+                        <ContextMenu.Popup>
+                            <ContextMenu.Item onClick={sendNow}>
+                                <Icon icon={FastForward} size={14} /> {t('composer.queue.sendNow')}
+                            </ContextMenu.Item>
+                            <ContextMenu.Item disabled={takingBack} onClick={edit}>
+                                <Icon icon={Pencil} size={14} /> {t('common.action.edit')}
+                            </ContextMenu.Item>
+                            <ContextMenu.Item disabled={message.text === ''} onClick={() => copyText(message.text)}>
+                                <Icon icon={Copy} size={14} /> {t('common.action.copy')}
+                            </ContextMenu.Item>
+                            <ContextMenu.Separator />
+                            <ContextMenu.Item className="text-status-error" onClick={unqueue}>
+                                <Icon icon={X} size={14} /> {t('common.action.remove')}
+                            </ContextMenu.Item>
+                        </ContextMenu.Popup>
+                    </ContextMenu.Root>
+                );
+            })}
+        </div>
+    );
+}

package/src/chat/ui/composer/key-handler.ts

@@ -0,0 +1,174 @@
+import { indentLess, indentMore, insertNewline } from '@codemirror/commands';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import type { EditorView } from '@codemirror/view';
+import { isModHeld, matchesShortcut } from '@adecore/ui';
+import type { ChatHost } from '../../../host';
+import type { ComposerSend } from '../../composer-send';
+import type { ChatSendKey } from '../../send-key';
+import { STASH_SHORTCUT } from '../../stash';
+import { pageTimeline } from '../../timeline-scroll';
+import type { ComposerMenus } from './use-composer-menus';
+import type { PromptHistory } from './use-prompt-history';
+import { enterAction, inCode, inFenceBody, inOpenFence, listItemAt, recallDirection, tabSpaces } from './keys';
+
+const SEND_HOW: Readonly<Record<'send' | 'send-alternate' | 'send-and-new', ComposerSend>> = {
+    send: 'default',
+    'send-alternate': 'alternate',
+    'send-and-new': 'and-new'
+};
+
+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;
+}
+
+/* In a fence Tab indents like a code editor; anywhere else it keeps moving the focus. */
+function indentInFence(e: KeyboardEvent, view: EditorView): boolean {
+    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: KeyboardEvent, { menus, setText }: KeyHandlerInput): boolean {
+    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: KeyboardEvent, view: EditorView, { host, sendKey, submit }: KeyHandlerInput): boolean {
+    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: KeyHandlerInput): (e: KeyboardEvent, view: EditorView) => boolean {
+    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);
+    };
+}