@adecore/agents-react 0.23.1 → 0.24.1

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

@@ -0,0 +1,289 @@
+import { useEffect, useId, useMemo, useState, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
+import type { EditorState } from '@codemirror/state';
+import type { ChatInfo, ChatSkill, ProviderCapabilities } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { chatSuggestions } from '../../chat-references';
+import { usableSlashCommands } from '../../guards';
+import {
+    dropQuery,
+    findMentionQuery,
+    findSkillQuery,
+    insertMention,
+    insertSkill,
+    mentionPick,
+    NO_MENTION_SEARCH,
+    type MentionQuery,
+    type MentionSearch,
+    type TextRange
+} from '../../mentions';
+import type { ComposerInputHandle } from '../ComposerInput';
+import type { ComposerDraft } from './use-composer-draft';
+import { inCode } from './keys';
+import { clampMenuIndex, composerMenuAria } from './menu-aria';
+
+const SEARCH_DEBOUNCE_MS = 80;
+// What fits above the composer without turning the picker into a file tree.
+const MENTION_RESULTS = 8;
+// The chats go above the files, so a few leave the files in view.
+const CHAT_RESULTS = 4;
+
+// Commands the composer handles itself; the CLI's own ones are sent through as text.
+export const LOCAL_COMMANDS = ['model', 'compact', 'clear'];
+
+export interface ComposerCommand {
+    name: string;
+    hint: string;
+    local: boolean;
+    skill: boolean;
+}
+
+interface MenusInput {
+    chatId: string;
+    info: ChatInfo;
+    capabilities: ProviderCapabilities | undefined;
+    providerName: string | undefined;
+    draft: ComposerDraft;
+    inputRef: RefObject<ComposerInputHandle | null>;
+}
+
+function sameQuery(left: MentionQuery | null, right: MentionQuery | null): boolean {
+    return left?.start === right?.start && left?.query === right?.query;
+}
+
+/*
+ * The pickers over the box: `/` for a command, `$` for a skill and `@` for a file or another chat.
+ * One is open at a time, and the arrow keys and the editor's ARIA attributes follow that one.
+ */
+export function useComposerMenus({ chatId, info, capabilities, providerName, draft: { draft, setDraft, setText }, inputRef }: MenusInput) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const host = useChatHost();
+    const { searchFiles } = host;
+    const chats = host.useReferableChats();
+    const [menuIndex, setMenuIndex] = useState(0);
+    const [mention, setMention] = useState<MentionQuery | null>(null);
+    const [skillQuery, setSkillQuery] = useState<MentionQuery | null>(null);
+    const [skills, setSkills] = useState<ChatSkill[]>([]);
+    const [searched, setSearched] = useState<MentionSearch>(NO_MENTION_SEARCH);
+    const text = draft.text;
+    const goals = capabilities?.goals;
+
+    // Every keystroke inside an `@word` searches again; a slow answer must not overwrite a newer one.
+    useEffect(() => {
+        if (mention === null) {
+            return;
+        }
+        let stale = false;
+        const search = (): void => {
+            if (searchFiles === null) {
+                return;
+            }
+            searchFiles(scope.id, info.cwd, mention.query, MENTION_RESULTS)
+                .then((files) => {
+                    if (!stale) {
+                        setSearched({ query: mention.query, files });
+                        setMenuIndex(0);
+                    }
+                })
+                .catch(() => undefined);
+        };
+        // A bare `@` is not a keystroke in a query. It opens the list of what is there, at once.
+        if (mention.query === '') {
+            search();
+            return () => {
+                stale = true;
+            };
+        }
+        const timer = setTimeout(search, SEARCH_DEBOUNCE_MS);
+        return () => {
+            stale = true;
+            clearTimeout(timer);
+        };
+    }, [scope, info.cwd, mention, searchFiles]);
+
+    /*
+     * The host's skill list, once per chat, again once the CLI announced its own after the first message,
+     * and again when its process comes or goes, which is when a restart reads new skills.
+     */
+    useEffect(() => {
+        let stale = false;
+        scope.chats
+            .listSkills(chatId)
+            .then((found) => {
+                if (!stale) {
+                    setSkills(found);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            stale = true;
+        };
+    }, [scope, chatId, info.skills, info.running]);
+
+    const commandQuery = text.startsWith('/') && !text.includes('\n') ? text.slice(1).trim().toLowerCase() : null;
+    const commands = useMemo((): ComposerCommand[] => {
+        if (commandQuery === null) {
+            return [];
+        }
+        const known = new Set(skills.map((skill) => skill.name));
+        const own = LOCAL_COMMANDS.map((name) => ({ name, hint: t(`composer.commands.${name}`), local: true, skill: false }));
+        // Every CLI with goals reads `/goal`, also one that lists no commands of its own.
+        const goal = goals === undefined ? [] : [{ name: 'goal', hint: t('composer.commands.goal'), local: false, skill: false }];
+        const cli = usableSlashCommands(info.slashCommands)
+            .filter((name) => !LOCAL_COMMANDS.includes(name) && (goals === undefined || name !== 'goal'))
+            .map((name) => ({
+                name,
+                hint: known.has(name) ? t('composer.commands.skill') : t('composer.commands.cli', { cli: providerName ?? t('composer.commands.anyCli') }),
+                local: false,
+                skill: known.has(name)
+            }));
+        return [...own, ...goal, ...cli].filter((command) => command.name.startsWith(commandQuery)).slice(0, 8);
+    }, [commandQuery, goals, info.slashCommands, providerName, skills, t]);
+
+    const skillMatches = useMemo(() => {
+        if (skillQuery === null) {
+            return [];
+        }
+        const query = skillQuery.query.toLowerCase();
+        return skills.filter((skill) => skill.name.toLowerCase().includes(query)).slice(0, 8);
+    }, [skillQuery, skills]);
+
+    const commandMenuOpen = commandQuery !== null && commands.length > 0;
+    const skillMenuOpen = !commandMenuOpen && skillQuery !== null && skillMatches.length > 0;
+    const mentionMenuOpen = !commandMenuOpen && !skillMenuOpen && mention !== null;
+    // Results belong to the query that asked for them; a closed picker shows none while the next answer is on its way.
+    const files = mention === null ? [] : searched.files;
+    const chatMatches = useMemo(
+        () => (mention === null ? [] : chatSuggestions(chats, mention.query, [chatId, ...draft.chats], CHAT_RESULTS)),
+        [chatId, chats, draft.chats, mention]
+    );
+    const mentionCount = chatMatches.length + files.length;
+    // One menu is open at a time, so they share an id.
+    const listId = useId();
+    const menuOpen = commandMenuOpen || skillMenuOpen || mentionMenuOpen;
+    const menuCount = commandMenuOpen ? commands.length : skillMenuOpen ? skillMatches.length : mentionCount;
+    // The list can shrink under a stale index; every reader takes the one that still points at an option.
+    const activeIndex = clampMenuIndex(menuIndex, menuCount);
+    const inputAria = useMemo(
+        () => composerMenuAria({ label: t('composer.inputLabel'), listId, open: menuOpen, activeIndex, count: menuCount }),
+        [t, listId, menuOpen, activeIndex, menuCount]
+    );
+
+    /* Which picker the caret opens: `@` for a file, `$` for a skill, or neither. In code a sigil is just text. */
+    const trackTriggers = (value: string, selection: TextRange, state: EditorState): void => {
+        const empty = selection.from === selection.to;
+        const tree = empty ? (ensureSyntaxTree(state, selection.from, 50) ?? syntaxTree(state)) : null;
+        const caret = tree !== null && !inCode(tree, value, selection.from) ? selection.from : null;
+        const skill = caret === null ? null : findSkillQuery(value, caret);
+        setSkillQuery((current) => (sameQuery(current, skill) ? current : skill));
+        // A CLI that does not expand `@path` gets the text as it is, so the picker stays out of the way.
+        const next = caret === null || capabilities?.mentions === false ? null : findMentionQuery(value, caret);
+        setMention((current) => (sameQuery(current, next) ? current : next));
+    };
+
+    // The inserted text reaches the editor with the render it causes, so the caret waits a frame for it.
+    const moveCaret = (caret: number): void => {
+        requestAnimationFrame(() => inputRef.current?.setCaret(caret));
+    };
+
+    const close = (): void => {
+        setMention(null);
+        setSkillQuery(null);
+    };
+
+    const chooseMention = (path: string): void => {
+        if (!mention) {
+            return;
+        }
+        const result = insertMention(text, mention, path);
+        setText(result.text, draft.mentions.includes(path) ? draft.mentions : [...draft.mentions, path]);
+        setMention(null);
+        moveCaret(result.caret);
+    };
+
+    /* A picked chat sits beside the text as a chip, so the `@query` that found it goes. */
+    const chooseChat = (id: string): void => {
+        if (!mention) {
+            return;
+        }
+        const result = dropQuery(text, mention);
+        setDraft((current) => ({ ...current, text: result.text, chats: current.chats.includes(id) ? current.chats : [...current.chats, id] }));
+        setMention(null);
+        moveCaret(result.caret);
+    };
+
+    const chooseMentionAt = (index: number): void => {
+        const pick = mention === null ? null : mentionPick(index, chatMatches, searched, mention.query);
+        if (pick?.kind === 'chat') {
+            chooseChat(pick.chat.id);
+        } else if (pick?.kind === 'file') {
+            chooseMention(pick.path);
+        }
+    };
+
+    /*
+     * A picked skill becomes a `$name` chip in the text and a name on the send, which is what
+     * dispatches it. The `/` menu lands here too, so both spellings end up on the same path.
+     */
+    const chooseSkill = (name: string): void => {
+        const result = skillQuery ? insertSkill(text, skillQuery, name) : { text: `$${name} `, caret: name.length + 2 };
+        setText(result.text, draft.mentions, draft.skills.includes(name) ? draft.skills : [...draft.skills, name]);
+        setSkillQuery(null);
+        moveCaret(result.caret);
+    };
+
+    /* A clicked command; Tab completes one with a space after it instead. */
+    const pickCommand = (command: ComposerCommand, index: number): void => {
+        setMenuIndex(index);
+        if (command.skill) {
+            chooseSkill(command.name);
+            return;
+        }
+        setText(`/${command.name}`);
+        inputRef.current?.focus();
+    };
+
+    /* The arrows walk an open picker round; true when the key was one of them. */
+    const moveInMenu = (key: string, count: number): boolean => {
+        if (key === 'ArrowDown') {
+            setMenuIndex((i) => (i + 1) % count);
+            return true;
+        }
+        if (key === 'ArrowUp') {
+            setMenuIndex((i) => (i - 1 + count) % count);
+            return true;
+        }
+        return false;
+    };
+
+    return {
+        listId,
+        activeIndex,
+        inputAria,
+        hasSkills: skills.length > 0,
+        commandQuery,
+        commands,
+        commandMenuOpen,
+        skillMatches,
+        skillMenuOpen,
+        mention,
+        mentionMenuOpen,
+        mentionCount,
+        chatMatches,
+        files,
+        setMenuIndex,
+        trackTriggers,
+        close,
+        chooseMention,
+        chooseChat,
+        chooseMentionAt,
+        chooseSkill,
+        pickCommand,
+        moveInMenu
+    };
+}
+
+export type ComposerMenus = ReturnType<typeof useComposerMenus>;

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

@@ -0,0 +1,163 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import { useChatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { checkAttachmentLimits, uploadBytes } from '../../attachments';
+import type { ChatSendExtras } from '../../chat-client';
+import { registerComposerSender, type ComposerSend } from '../../composer-send';
+import { isEmptyDraft } from '../../drafts';
+import type { PromptGuard } from '../../guards';
+import { presentMentions, presentSkills } from '../../mentions';
+import { withQuote } from '../../quote';
+import { stashDraft, useStash, type StashedPrompt } from '../../stash';
+import { scrollTimelineToEnd } from '../../timeline-scroll';
+import type { ComposerInputHandle } from '../ComposerInput';
+import type { ChatControls } from './use-chat-controls';
+import type { ComposerDraft } from './use-composer-draft';
+import type { ComposerMenus } from './use-composer-menus';
+import type { PromptHistory } from './use-prompt-history';
+import type { ComposerPromptHold } from './use-prompt-hold';
+
+interface SubmitInput {
+    chatId: string;
+    writable: boolean;
+    guard: PromptGuard;
+    /* Whether the provider lets a send join a running turn; without it every send queues. */
+    steerable: boolean;
+    /* Where a running turn takes a send by default; Alt sends the other way. */
+    sendDelivery: 'queue' | 'steer';
+    draft: ComposerDraft;
+    menus: ComposerMenus;
+    controls: ChatControls;
+    history: PromptHistory;
+    hold: ComposerPromptHold;
+    inputRef: RefObject<ComposerInputHandle | null>;
+    setNotice(notice: string): void;
+    onSend(text: string, extras: ChatSendExtras): void | Promise<boolean>;
+}
+
+/* Sends the draft, or runs the command it names, and puts it away in the stash and back. */
+export function useComposerSubmit({
+    chatId,
+    writable,
+    guard,
+    steerable,
+    sendDelivery,
+    draft: box,
+    menus,
+    controls,
+    history,
+    hold,
+    inputRef,
+    setNotice,
+    onSend
+}: SubmitInput) {
+    const host = useChatHost();
+    const scope = useChatScope();
+    const { draft, setDraft } = box;
+
+    /* Opens the host's new chat once the host took the message; a host that answers nothing took it. */
+    const afterSend = (sent: void | Promise<boolean>, andNew: boolean): void => {
+        const openNewChat = host.openNewChat;
+        if (!andNew || openNewChat === null) {
+            return;
+        }
+        void Promise.resolve(sent)
+            .then((taken) => {
+                if (taken !== false) {
+                    openNewChat(scope.id, chatId);
+                }
+            })
+            .catch(() => undefined);
+    };
+
+    const submit = (how: ComposerSend = 'default'): void => {
+        const alternate = how === 'alternate';
+        const delivery = steerable && (alternate ? sendDelivery === 'queue' : sendDelivery === 'steer') ? 'steer' : 'queue';
+        const { text, quote, quoteSource } = draft;
+        const trimmed = text.trim();
+        if (isEmptyDraft(draft) || !writable || guard.tooLong) {
+            return;
+        }
+        // Recheck restored drafts and files that finished reading concurrently.
+        const rejected = checkAttachmentLimits(
+            0,
+            draft.attachments.map((attachment) => ({ ...attachment, bytes: uploadBytes(attachment) }))
+        ).rejected[0];
+        if (rejected) {
+            setNotice(`${rejected.name}: ${rejected.reason}`);
+            return;
+        }
+        hold.release('send');
+        const { commandQuery } = menus;
+        const chosen = menus.commands[menus.activeIndex];
+        if (commandQuery !== null && chosen?.local && controls.runCommand(chosen.name)) {
+            box.clear();
+            return;
+        }
+        if (commandQuery !== null && chosen?.skill) {
+            menus.chooseSkill(chosen.name);
+            return;
+        }
+        // Whoever sends wants to see what comes back, wherever they were reading.
+        scrollTimelineToEnd(chatId, 'instant');
+        if (commandQuery !== null && chosen && !chosen.local) {
+            afterSend(onSend(`/${chosen.name}`, {}), how === 'and-new');
+            box.clear();
+            return;
+        }
+        const sent = onSend(withQuote(quote, trimmed), {
+            delivery,
+            mentions: presentMentions(trimmed, draft.mentions),
+            skills: presentSkills(trimmed, draft.skills),
+            chats: draft.chats,
+            quoteSource: quote !== '' && quoteSource !== null ? { itemId: quoteSource } : undefined,
+            attachments: draft.attachments
+        });
+        afterSend(sent, how === 'and-new');
+        box.clear();
+        menus.close();
+        history.forget();
+    };
+
+    // A menu row means the draft as it stands when it is picked, so the registration reads the latest submit.
+    const submitRef = useRef(submit);
+    useEffect(() => {
+        submitRef.current = submit;
+    });
+    useEffect(() => registerComposerSender(scope.keyOf(chatId), (how) => submitRef.current(how)), [scope, chatId]);
+
+    /*
+     * A stashed prompt comes back as text, mentions and skills; its files were never kept. Its quote
+     * keeps leading to its reply in the chat it came from, and is plain text in any other.
+     */
+    const restoreStashed = (prompt: StashedPrompt): void => {
+        const stashedQuote = prompt.quote;
+        const here = stashedQuote !== undefined && stashedQuote.chatId === chatId;
+        setDraft((current) => ({
+            ...current,
+            text: stashedQuote === undefined || here ? prompt.text : withQuote(stashedQuote.text, prompt.text),
+            mentions: [...prompt.mentions],
+            skills: [...prompt.skills],
+            ...(here ? { quote: stashedQuote.text, quoteSource: stashedQuote.itemId } : {})
+        }));
+        history.forget();
+        inputRef.current?.focus();
+    };
+
+    /* Cmd+S puts the draft away and clears the box; on an empty box the same key takes the last one back. */
+    const toggleStash = (): void => {
+        if (isEmptyDraft(draft)) {
+            const newest = useStash.getState().prompts[0];
+            if (newest) {
+                restoreStashed(newest);
+            }
+            return;
+        }
+        if (stashDraft(draft, chatId)) {
+            box.clear();
+            menus.close();
+        }
+    };
+
+    return { submit, restoreStashed, toggleStash };
+}

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

@@ -0,0 +1,135 @@
+import { useRef, useState, type DragEvent, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EditorView } from '@codemirror/view';
+import type { ProviderCapabilities } from '@adecore/agent-contracts';
+import { useChatHost } from '../../../host';
+import { checkAttachmentLimits, filesOf, readAttachments, uploadBytes } from '../../attachments';
+import { pasteBecomesAttachment, pastedTextName } from '../../guards';
+import { carriesMentions, droppedMentions, pastedMentions } from '../../mentions';
+import type { ComposerInputHandle } from '../ComposerInput';
+import type { ComposerDraft } from './use-composer-draft';
+
+/* The card turns dropped files and paths into attachments and chips; CodeMirror would also paste their text at the drop point. */
+export const LEAVE_DROPS_TO_THE_CARD = EditorView.domEventHandlers({
+    drop: (event) => event.dataTransfer !== null && (event.dataTransfer.types.includes('Files') || carriesMentions(event.dataTransfer.types))
+});
+
+interface DraftFilesInput {
+    capabilities: ProviderCapabilities | undefined;
+    providerName: string | undefined;
+    writable: boolean;
+    draft: ComposerDraft;
+    inputRef: RefObject<ComposerInputHandle | null>;
+    setNotice(notice: string): void;
+}
+
+/* What reaches the draft besides typing: files as attachments, dragged paths as mentions, and a long paste as a file of its own. */
+export function useDraftFiles({ capabilities, providerName, writable, draft: { draft, setDraft, setText }, inputRef, setNotice }: DraftFilesInput) {
+    const { t } = useTranslation('agent-chat');
+    const { isApplePlatform } = useChatHost();
+    const [dragging, setDragging] = useState(false);
+    // A paste event says nothing about the keys behind it, so the key that asked for text inline is remembered here.
+    const pasteInline = useRef(false);
+
+    /* Paths dragged in from a list of files. With no mention query to insert into, they land at the end of the prompt. */
+    const addMentions = (paths: string[]): void => {
+        const fresh = paths.filter((path) => path !== '');
+        if (fresh.length === 0 || capabilities?.mentions === false) {
+            return;
+        }
+        const appended = fresh.map((path) => `@${path}`).join(' ');
+        const before = draft.text.replace(/\s+$/, '');
+        setText(before === '' ? `${appended} ` : `${before} ${appended} `, [...draft.mentions, ...fresh.filter((path) => !draft.mentions.includes(path))]);
+    };
+
+    const addFiles = (incoming: File[]): void => {
+        if (incoming.length === 0) {
+            return;
+        }
+        if (capabilities?.attachments === false) {
+            setNotice(t('composer.notice.noAttachments', { agent: providerName ?? t('composer.notice.thisAgent') }));
+            return;
+        }
+        const checked = checkAttachmentLimits(
+            draft.attachments.length,
+            incoming.map((file) => ({ name: file.name, mime: file.type, bytes: file.size, file })),
+            draft.attachments.reduce((bytes, attachment) => bytes + uploadBytes(attachment), 0)
+        );
+        if (checked.rejected[0]) {
+            setNotice(t('composer.notice.rejected', { name: checked.rejected[0].name || t('composer.notice.thatFile'), reason: checked.rejected[0].reason }));
+        }
+        if (checked.accepted.length === 0) {
+            return;
+        }
+        readAttachments(checked.accepted.map((entry) => entry.file))
+            .then((attachments) => setDraft((current) => ({ ...current, attachments: [...current.attachments, ...attachments] })))
+            .catch(() => setNotice(t('composer.notice.unreadable')));
+    };
+
+    /* Shift with the paste shortcut pastes a large text inline after all; any other key forgets it. */
+    const noteKey = (e: KeyboardEvent): void => {
+        pasteInline.current = e.shiftKey && e.key.toLowerCase() === 'v' && (isApplePlatform() ? e.metaKey : e.ctrlKey);
+    };
+
+    /* Files become attachments and a long text a file of its own; anything else the editor pastes as plain text. */
+    const onPaste = (e: ClipboardEvent, view: EditorView): boolean => {
+        const data = e.clipboardData;
+        if (!data) {
+            return false;
+        }
+        const pasted = filesOf(data);
+        if (pasted.length > 0) {
+            addFiles(pasted);
+            return true;
+        }
+        const inline = pasteInline.current;
+        pasteInline.current = false;
+        const clip = data.getData('text/plain');
+        const mentions = capabilities?.mentions === false ? [] : pastedMentions(clip);
+        if (mentions.length > 0) {
+            // The editor's own change reads the draft as it was rendered, so the mentions join it after that change.
+            view.dispatch(view.state.replaceSelection(clip), { scrollIntoView: true, userEvent: 'input.paste' });
+            setDraft((current) => ({ ...current, mentions: [...current.mentions, ...mentions.filter((path) => !current.mentions.includes(path))] }));
+            return true;
+        }
+        // Without attachments there is nowhere else for the text to go, so it pastes as it always did.
+        if (inline || capabilities?.attachments === false || !pasteBecomesAttachment(clip)) {
+            return false;
+        }
+        // The paste still replaces what was selected; it just puts nothing in its place.
+        const { from, to } = view.state.selection.main;
+        if (from !== to) {
+            view.dispatch({ changes: { from, to }, userEvent: 'delete' });
+        }
+        const name = pastedTextName(draft.attachments.map((attachment) => attachment.name));
+        addFiles([new File([clip], name, { type: 'text/plain' })]);
+        return true;
+    };
+
+    /* The whole card takes a dropped file, so a layout around it that takes drops of its own leaves it alone. */
+    const dropTarget = {
+        'data-takes-drop': 'all',
+        onDragOver: (e: DragEvent<HTMLDivElement>): void => {
+            if (writable && (e.dataTransfer.types.includes('Files') || carriesMentions(e.dataTransfer.types))) {
+                e.preventDefault();
+                e.stopPropagation();
+                setDragging(true);
+            }
+        },
+        onDragLeave: (e: DragEvent<HTMLDivElement>): void => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+                setDragging(false);
+            }
+        },
+        onDrop: (e: DragEvent<HTMLDivElement>): void => {
+            e.preventDefault();
+            e.stopPropagation();
+            setDragging(false);
+            addMentions(droppedMentions(e.dataTransfer));
+            addFiles(filesOf(e.dataTransfer));
+            inputRef.current?.focus();
+        }
+    };
+
+    return { dragging, dropTarget, addFiles, noteKey, onPaste };
+}

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

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+const NOTICE_MS = 4000;
+
+export interface ComposerNotice {
+    notice: string | null;
+    setNotice(notice: string | null): void;
+    showError(error: unknown): void;
+}
+
+/* A line under the box that says what went wrong, gone again after a few seconds. */
+export function useNotice(): ComposerNotice {
+    const [notice, setNotice] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!notice) {
+            return;
+        }
+        const timer = setTimeout(() => setNotice(null), NOTICE_MS);
+        return () => clearTimeout(timer);
+    }, [notice]);
+
+    return {
+        notice,
+        setNotice,
+        showError: (error) => setNotice(error instanceof Error ? error.message : String(error))
+    };
+}

package/src/chat/ui/composer/use-pending-requests.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import type { ChatApprovalItem, ChatQuestionItem } from '@adecore/agent-contracts';
+import { useChatRow, waitingRequestsOf } from '../../../state/chats';
+
+/* The approvals and then the questions the chat waits on, which take the composer's place until answered. */
+export function usePendingRequests(chatId: string): Array<ChatApprovalItem | ChatQuestionItem> {
+    // The structure, which a delta leaves alone. The prompts and the requests are items of their own.
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    const order = useChatRow(chatId, (row) => row?.order);
+    const waitingBefore = useChatRow(chatId, (row) => row?.waitingBefore);
+    return useMemo(() => {
+        const approvals: ChatApprovalItem[] = [];
+        const questions: ChatQuestionItem[] = [];
+        for (const item of waitingRequestsOf(structure && order ? { structure, order, waitingBefore } : undefined)) {
+            if (item.kind === 'approval') {
+                approvals.push(item);
+            } else {
+                questions.push(item);
+            }
+        }
+        return [...approvals, ...questions];
+    }, [structure, order, waitingBefore]);
+}