@adecore/agents-react 0.0.1 → 0.17.0-beta.2

package/src/prompts/logic/prompts.fixtures.ts

@@ -0,0 +1,84 @@
+import type { ChatQuestion, ChatQuestionItem, ChatApprovalItem } from '@adecore/agent-contracts';
+import type { PendingPrompt } from './prompts';
+
+const endpoints: ChatQuestion = {
+    id: 'endpoints',
+    header: 'Shared backoff',
+    question: 'Which endpoints should share the backoff?',
+    multiSelect: false,
+    choices: [
+        { label: 'All three', description: 'Chat, files and terminal' },
+        { label: 'Only chat and files', description: 'Keep terminal retries separate' }
+    ]
+};
+const checks: ChatQuestion = {
+    id: 'checks',
+    header: 'Validation',
+    question: 'Which checks should run before the change is ready?',
+    multiSelect: true,
+    choices: [
+        { label: 'Type check', description: 'Check all workspaces' },
+        { label: 'Unit tests', description: 'Run the targeted tests' },
+        { label: 'Build', description: 'Verify the production bundle' }
+    ]
+};
+const notes: ChatQuestion = { id: 'notes', header: 'Instructions', question: 'What else should the agent keep in mind?', multiSelect: false, choices: [] };
+function base(id: string) {
+    return { id: `preview-${id}`, requestId: `preview-${id}`, createdAt: 0, turnId: null };
+}
+function question(id: string, questions: ChatQuestion[], async = false): ChatQuestionItem {
+    return {
+        ...base(id),
+        kind: 'question',
+        questions,
+        answers: null,
+        state: 'pending',
+        async
+    };
+}
+function approval(long = false): ChatApprovalItem {
+    return {
+        ...base(long ? 'long' : 'edit'),
+        kind: 'approval',
+        toolUseId: null,
+        toolName: 'Edit',
+        description: 'Replace the reconnect loop with the shared backoff and export it for the three endpoints.',
+        input: {
+            file_path: 'src/transport/pool.ts',
+            old_string: 'const retries = 10;',
+            new_string:
+                'const retries = 5;\nexport const backoff = createBackoff({ max: retries });' +
+                (long ? '\n' + Array.from({ length: 90 }, (_, i) => `// Context line ${i + 1}`).join('\n') : '')
+        },
+        canAllowAlways: false,
+        decision: 'pending'
+    };
+}
+
+// These never enter the chat store or the transport; the preview owns their lifetime.
+export const PROMPT_SAMPLES: Array<{ label: string; items: PendingPrompt[] }> = [
+    { label: 'Permission · File edit', items: [approval()] },
+    {
+        label: 'Permission · Command',
+        items: [
+            {
+                ...base('command'),
+                kind: 'approval',
+                toolName: 'Bash',
+                toolUseId: null,
+                input: { command: 'bun run check && bun test', cwd: '/projects/ruimte' },
+                description: "Run the project's validation checks before continuing.",
+                canAllowAlways: true,
+                allowAlways: { label: 'Allow for this session', description: 'Allow commands in this session until it ends.' },
+                decision: 'pending'
+            }
+        ]
+    },
+    { label: 'Permission · Long diff', items: [approval(true)] },
+    { label: 'Question · Single choice', items: [question('single', [endpoints])] },
+    { label: 'Question · Multiple choices', items: [question('multiple', [checks])] },
+    { label: 'Question · Written answer', items: [question('written', [notes])] },
+    { label: 'Question · Three questions', items: [question('questions', [endpoints, checks, notes])] },
+    { label: 'Question · Optional', items: [question('optional', [endpoints], true)] },
+    { label: 'Several requests', items: [question('optional', [endpoints], true), approval(), question('single', [endpoints])] }
+];

package/src/prompts/logic/prompts.ts

@@ -0,0 +1,58 @@
+import type { ChatApprovalItem, ChatQuestionItem, ChatQuestion } from '@adecore/agent-contracts';
+import { toggleChoice } from '../../chat/logic/answers';
+
+export type PendingPrompt = ChatApprovalItem | ChatQuestionItem;
+export type PromptAction =
+    | { kind: 'approve'; decision: 'allow' | 'allow-always' | 'deny'; message?: string }
+    | { kind: 'answer'; answers: Record<string, string> }
+    | { kind: 'dismiss' }
+    // A terminal's permission request, answered with one of the choices the host offered.
+    | { kind: 'choose'; choiceId: string };
+export interface PromptAnswer {
+    choices: string[];
+    text: string;
+    custom: boolean;
+}
+export interface PromptDraft {
+    index: number;
+    answers: Record<string, PromptAnswer>;
+    reason: string;
+    showReason: boolean;
+}
+
+export function emptyPromptDraft(): PromptDraft {
+    return { index: 0, answers: {}, reason: '', showReason: false };
+}
+export function answerValue(answer: PromptAnswer): string {
+    return answer.custom ? answer.text.trim() : answer.choices.join(', ');
+}
+export function questionAnswer(draft: PromptDraft, question: ChatQuestion): PromptAnswer {
+    return draft.answers[question.id] ?? { choices: [], text: '', custom: question.choices.length === 0 };
+}
+
+export function pickPromptChoice(answer: PromptAnswer, question: ChatQuestion, label: string): PromptAnswer {
+    return { ...answer, custom: false, choices: question.multiSelect ? toggleChoice(answer.choices, label) : [label] };
+}
+
+/* An optional question never stands in front of a request that holds the agent up. */
+export function isBlockingPrompt(item: PendingPrompt): boolean {
+    return item.kind === 'approval' || !item.async;
+}
+
+/* Blocking prompts first and optional ones after, each oldest first. The chat and a canvas's stack both follow it. */
+export function orderPrompts<T>(prompts: readonly T[], blocking: (prompt: T) => boolean, createdAt: (prompt: T) => number): T[] {
+    return [...prompts].sort((a, b) => Number(blocking(b)) - Number(blocking(a)) || createdAt(a) - createdAt(b));
+}
+
+export function nextPrompt(items: readonly PendingPrompt[], activeId: string | null): PendingPrompt | null {
+    const active = items.find((item) => item.requestId === activeId);
+    if (active) {
+        return active;
+    }
+    return orderPrompts(items, isBlockingPrompt, (item) => item.createdAt)[0] ?? null;
+}
+
+export function promptAnswers(item: ChatQuestionItem, draft: PromptDraft): Record<string, string> | null {
+    const answers = Object.fromEntries(item.questions.map((question) => [question.id, answerValue(questionAnswer(draft, question))]));
+    return Object.values(answers).every((answer) => answer !== '') ? answers : null;
+}

package/src/prompts/logic/subjects.ts

@@ -0,0 +1,122 @@
+import i18next from 'i18next';
+import type { ReactNode } from 'react';
+import { chatHost } from '../../host';
+import { isBlockingPrompt, type PendingPrompt, type PromptAction, type PromptDraft } from './prompts';
+
+/*
+ * A prompt the app raises beside a chat's own requests, such as its own approval to operate
+ * something. The app draws it and answers it (`ChatHost.prompts`); the chat only orders it among the
+ * rest and keeps its draft.
+ */
+export interface HostPrompt {
+    /* Unique across the prompts of a surface, and stable while the prompt waits. */
+    id: string;
+    createdAt: number;
+    blocking: boolean;
+    /* The mark a pointer to it wears: a hand for a request, a question mark for anything else. */
+    asks: 'approval' | 'question';
+    /* What the app knows about it, for its own drawing and answering; the same object while nothing about it changed. */
+    data: unknown;
+}
+
+/* What a prompt card draws, whatever asked it. The chat's items pass through unchanged. */
+export type PromptSubject = { kind: 'chat'; nodeId: string; item: PendingPrompt } | { kind: 'host'; nodeId: string; prompt: HostPrompt };
+
+/* The requests a chat's own prompts are answered with. */
+export interface ChatPromptClients {
+    approve(chatId: string, requestId: string, decision: 'allow' | 'allow-always' | 'deny', message?: string): Promise<void>;
+    answer(chatId: string, requestId: string, answers: Record<string, string>): Promise<void>;
+    dismiss(chatId: string, itemId: string): Promise<void>;
+}
+
+/* What a card is given to draw, the chat's and the app's alike. */
+export interface PromptViewProps {
+    subject: PromptSubject;
+    draft: PromptDraft;
+    onDraft(draft: PromptDraft): void;
+    onAction(action: PromptAction): void;
+    more: number;
+    hasDraft: boolean;
+    denyReason: boolean;
+    disabled: boolean;
+    sending: boolean;
+    error: string | null;
+    top?: ReactNode;
+    /* Takes the person to whatever an app's own card is about. */
+    onReveal?: () => void;
+}
+
+export interface ApprovalButtonSpec {
+    id: string;
+    label: string;
+    description?: string;
+    primary: boolean;
+    /* Grants beyond this one request, so the keyboard never starts on it. */
+    lasting?: boolean;
+    action: PromptAction;
+}
+
+/* Unique across the chats of a surface and the app's own prompts, and stable while the prompt waits. */
+export function promptIdOf(subject: PromptSubject): string {
+    return subject.kind === 'chat' ? `agent-chat:${subject.nodeId}:${subject.item.requestId}` : subject.prompt.id;
+}
+
+export function promptCreatedAt(subject: PromptSubject): number {
+    return subject.kind === 'chat' ? subject.item.createdAt : subject.prompt.createdAt;
+}
+
+/* Only a chat's optional question does not hold anything up; the app says so of its own. */
+export function isBlockingSubject(subject: PromptSubject): boolean {
+    return subject.kind === 'chat' ? isBlockingPrompt(subject.item) : subject.prompt.blocking;
+}
+
+/* The buttons of a chat's permission request in the order it draws them: a remembered rule, Deny, then Allow as the primary. */
+export function approvalButtons(subject: PromptSubject, reason: string): ApprovalButtonSpec[] {
+    if (subject.kind !== 'chat' || subject.item.kind !== 'approval') {
+        return [];
+    }
+    const { item } = subject;
+    const message = reason.trim();
+    return [
+        ...(item.canAllowAlways && item.allowAlways
+            ? [
+                  {
+                      id: 'allow-always',
+                      label: item.allowAlways.label,
+                      description: item.allowAlways.description,
+                      primary: false,
+                      lasting: true,
+                      action: { kind: 'approve', decision: 'allow-always' } as const
+                  }
+              ]
+            : []),
+        {
+            id: 'deny',
+            label: i18next.t('agent-prompts:approval.deny'),
+            primary: false,
+            action: { kind: 'approve', decision: 'deny', ...(message ? { message } : {}) }
+        },
+        { id: 'allow', label: i18next.t('agent-prompts:approval.allow'), primary: true, action: { kind: 'approve', decision: 'allow' } }
+    ];
+}
+
+/* Sends a card's action as the request its subject is answered with. A refusal comes back as an error for the card to show. */
+export async function answerPrompt(subject: PromptSubject, action: PromptAction, chat: ChatPromptClients | null): Promise<void> {
+    if (subject.kind === 'host') {
+        return chatHost().prompts.answer(subject.prompt, action);
+    }
+    if (chat === null) {
+        throw new Error(i18next.t('agent-prompts:error.notConnected'));
+    }
+    const { item, nodeId } = subject;
+    if (action.kind === 'approve') {
+        return chat.approve(nodeId, item.requestId, action.decision, action.message);
+    }
+    if (action.kind === 'answer') {
+        return chat.answer(nodeId, item.requestId, action.answers);
+    }
+    if (action.kind === 'dismiss') {
+        return chat.dismiss(nodeId, item.id);
+    }
+    throw new Error(i18next.t('agent-prompts:error.noChoices'));
+}

package/src/prompts/logic/useFocusAfterAnswer.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef, type RefObject } from 'react';
+import { focusPromptStart } from './focus';
+
+export interface FocusAfterAnswer {
+    /* Called before the front card changes, to remember whether the keyboard is in it, since the card is gone by the time the next one shows. */
+    hold(): void;
+    /* The card stays after all, as when its answer failed. */
+    release(): void;
+}
+
+/*
+ * The keyboard stays with the prompts it was answering: on where the card that comes next is answered, or
+ * wherever `onEmpty` puts it once none is left. A card answered with the keyboard elsewhere takes nothing.
+ */
+export function useFocusAfterAnswer(activeId: string | null, container: RefObject<HTMLElement | null>, onEmpty: () => void): FocusAfterAnswer {
+    const pending = useRef(false);
+
+    useEffect(() => {
+        if (!pending.current) {
+            return;
+        }
+        pending.current = false;
+        if (!focusPromptStart(container.current)) {
+            onEmpty();
+        }
+        // Only a change of the front card is news; a new `onEmpty` each render is not.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeId]);
+
+    return {
+        hold: () => {
+            pending.current = container.current?.contains(document.activeElement) === true;
+        },
+        release: () => {
+            pending.current = false;
+        }
+    };
+}

package/src/prompts/logic/usePromptSession.ts

@@ -0,0 +1,114 @@
+import { useRef, useState, type MouseEvent } from 'react';
+import { emptyPromptDraft, type PromptDraft } from './prompts';
+
+interface PromptSessionOptions<T> {
+    prompts: readonly T[];
+    idOf(prompt: T): string;
+    /* Which waiting prompt is in front, given the one that was and where it stood; a new prompt never takes the place of the one being read. */
+    pick(waiting: readonly T[], activeId: string | null, activeIndex: number): T | null;
+    disabled: boolean;
+}
+
+export interface PromptSession<T> {
+    active: T | null;
+    activeId: string | null;
+    /* Where the active prompt stands among the waiting ones. */
+    index: number;
+    /* The prompts not answered yet from this card, in the order they came in. */
+    waiting: readonly T[];
+    setActive(id: string): void;
+    draftOf(id: string): PromptDraft;
+    setDraft(id: string, draft: PromptDraft): void;
+    sending: boolean;
+    errorOf(id: string): string | null;
+    /* `busy` when another answer is still on its way, so this one was never sent. */
+    act(prompt: T, send: () => Promise<void>): Promise<'sent' | 'failed' | 'busy'>;
+    onPointerDownCapture(): void;
+    onClickCapture(event: MouseEvent): void;
+}
+
+/*
+ * What answering a row of prompts needs besides the prompts: a draft per request that survives
+ * paging, one send at a time, the error of the request that failed, and the requests answered here
+ * that the machine has not taken off yet.
+ */
+export function usePromptSession<T>({ prompts, idOf, pick, disabled }: PromptSessionOptions<T>): PromptSession<T> {
+    const [activeId, setActiveId] = useState<string | null>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [completed, setCompleted] = useState<string[]>([]);
+    const [drafts, setDrafts] = useState<Record<string, PromptDraft>>({});
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState<{ id: string; message: string } | null>(null);
+    const busy = useRef(false);
+    const pressedRequest = useRef<string | null>(null);
+    const stillCompleted = completed.filter((id) => prompts.some((prompt) => idOf(prompt) === id));
+    if (stillCompleted.length !== completed.length) {
+        setCompleted(stillCompleted);
+    }
+    const waiting = prompts.filter((prompt) => !completed.includes(idOf(prompt)));
+    const active = pick(waiting, activeId, activeIndex);
+    const activeKey = active === null ? null : idOf(active);
+    const index = active === null ? 0 : waiting.indexOf(active);
+    if (index !== activeIndex) {
+        setActiveIndex(index);
+    }
+
+    if (activeKey !== activeId) {
+        setActiveId(activeKey);
+        setError(null);
+    }
+
+    const finish = (id: string) => {
+        setCompleted((current) => [...current, id]);
+        setDrafts((current) => {
+            const next = { ...current };
+            delete next[id];
+            return next;
+        });
+    };
+    const act = async (prompt: T, send: () => Promise<void>): Promise<'sent' | 'failed' | 'busy'> => {
+        if (busy.current || disabled) {
+            return 'busy';
+        }
+        const id = idOf(prompt);
+        busy.current = true;
+        setSending(true);
+        setError(null);
+        try {
+            await send();
+            finish(id);
+            return 'sent';
+        } catch (cause) {
+            setError({ id, message: cause instanceof Error ? cause.message : String(cause) });
+            return 'failed';
+        } finally {
+            busy.current = false;
+            setSending(false);
+        }
+    };
+    return {
+        active,
+        activeId: activeKey,
+        index,
+        waiting,
+        setActive: (id) => {
+            setActiveId(id);
+            setError(null);
+        },
+        draftOf: (id) => drafts[id] ?? emptyPromptDraft(),
+        setDraft: (id, draft) => setDrafts((current) => ({ ...current, [id]: draft })),
+        sending,
+        errorOf: (id) => (error?.id === id ? error.message : null),
+        act,
+        onPointerDownCapture: () => {
+            pressedRequest.current = activeKey;
+        },
+        onClickCapture: (event) => {
+            // A press that began on Send cannot become Allow when a request arrives underneath it.
+            if (event.detail > 0 && (event.target as HTMLElement).closest('.prompt-card') && pressedRequest.current !== activeKey) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    };
+}

package/src/prompts/ui/ApprovalBody.tsx

@@ -0,0 +1,109 @@
+import { Suspense, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import type { ChatApprovalItem } from '@adecore/agent-contracts';
+import { approvalChanges, fileChanges } from '../../chat/logic/tools';
+import { chatHost } from '../../host';
+import { lazyNamed } from '../../lazy';
+import { isPrimaryKey } from '../logic/keys';
+import type { PromptDraft } from '../logic/prompts';
+import { Button, TextMenu } from '@adecore/ui';
+
+const EditDiff = lazyNamed(() => import('../../chat/ui/EditDiff'), 'default');
+const UnifiedDiff = lazyNamed(() => import('../../chat/ui/UnifiedDiff'), 'default');
+
+/* A command in the sunken box a person reads before allowing it, with the folder it runs in when that is known. */
+export function CommandBox({ command, cwd }: { command: string; cwd?: string }) {
+    return (
+        <TextMenu className="rounded-xl bg-surface-sunken p-3">
+            {cwd !== undefined && <p className="mb-2 break-all font-mono text-xs text-text-muted select-text">{cwd}</p>}
+            <pre className="whitespace-pre-wrap break-words font-mono text-code text-text select-text">{command}</pre>
+        </TextMenu>
+    );
+}
+
+function ApprovalDetails({ item }: { item: ChatApprovalItem }) {
+    const { t } = useTranslation('agent-prompts');
+    const [expanded, setExpanded] = useState(false);
+    const patches = approvalChanges(item.input);
+    const edits = patches.length ? [] : fileChanges(item.toolName, item.input);
+    const input = typeof item.input === 'object' && item.input !== null ? (item.input as Record<string, unknown>) : {};
+    return (
+        <>
+            {item.description && <p className="text-sm text-text-muted">{item.description}</p>}
+            {patches.length + edits.length > 1 && (
+                <p className="text-xs text-text-muted">{t('approval.allChanges', { count: patches.length + edits.length })}</p>
+            )}
+            {patches.length + edits.length > 0 ? (
+                <div className="overflow-hidden rounded-xl bg-surface-sunken">
+                    <div className={clsx('overflow-auto', !expanded && 'max-h-44')}>
+                        <Suspense fallback={<p className="p-3 text-xs text-text-muted">{t('approval.loadingDiff')}</p>}>
+                            {patches.map((change, i) => (
+                                <UnifiedDiff key={i} change={change} />
+                            ))}
+                            {edits.map((change, i) => (
+                                <EditDiff key={i} change={change} />
+                            ))}
+                        </Suspense>
+                    </div>
+                    <div className="flex items-center border-t border-border p-1">
+                        <Button size="sm" aria-expanded={expanded} onClick={() => setExpanded(!expanded)}>
+                            {expanded ? t('approval.collapseDiff') : t('approval.viewDiff')}
+                        </Button>
+                    </div>
+                </div>
+            ) : typeof input.command === 'string' ? (
+                <CommandBox command={input.command} cwd={typeof input.cwd === 'string' ? input.cwd : undefined} />
+            ) : (
+                <details>
+                    <summary className="flex h-7 cursor-pointer items-center text-xs text-text-muted">{t('approval.details')}</summary>
+                    <TextMenu>
+                        <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-sunken p-3 font-mono text-code text-text select-text">
+                            {JSON.stringify(item.input, null, 2)}
+                        </pre>
+                    </TextMenu>
+                </details>
+            )}
+        </>
+    );
+}
+
+/* A chat's permission request: the diff, the command or the raw input, and the reason a Deny may carry. */
+export function ApprovalBody({
+    item,
+    draft,
+    onDraft,
+    denyReason,
+    locked
+}: {
+    item: ChatApprovalItem;
+    draft: PromptDraft;
+    onDraft(draft: PromptDraft): void;
+    denyReason: boolean;
+    locked: boolean;
+}) {
+    const { t } = useTranslation('agent-prompts');
+    const AnswerField = chatHost().dictation.Textarea;
+    return (
+        <>
+            <ApprovalDetails item={item} />
+            {denyReason && draft.showReason && (
+                <AnswerField
+                    className="field min-h-16 text-sm"
+                    autoFocus
+                    aria-label={t('approval.reasonLabel')}
+                    placeholder={t('approval.reasonPlaceholder')}
+                    disabled={locked}
+                    value={draft.reason}
+                    onChange={(e) => onDraft({ ...draft, reason: e.target.value })}
+                    onKeyDown={(e) => {
+                        // Mod+Enter presses Allow everywhere else in the card, which is the opposite of what a reason for declining is typed for.
+                        if (isPrimaryKey(e.nativeEvent, chatHost().isApplePlatform())) {
+                            e.preventDefault();
+                        }
+                    }}
+                />
+            )}
+        </>
+    );
+}

package/src/prompts/ui/PromptActions.tsx

@@ -0,0 +1,109 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowUp, CircleCheck } from 'lucide-react';
+import { Button, Icon } from '@adecore/ui';
+
+/* The one button Mod+Enter presses and ArrowDown from the heading lands on, when the body has nothing to choose. */
+export function PromptPrimary(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+    return <Button variant="inverse" size="sm" data-prompt-primary {...props} />;
+}
+
+export interface ApprovalButton {
+    id: string;
+    label: string;
+    description?: string;
+    /* The Allow: drawn last, filled, and the one that says it is sending. */
+    primary: boolean;
+    lasting?: boolean;
+    onPress(): void;
+}
+
+/* The buttons of a permission request, in the order a chat draws them: the quieter ones first, Allow last. */
+export function ApprovalActions({
+    buttons,
+    onAddReason,
+    locked,
+    sending
+}: {
+    buttons: readonly ApprovalButton[];
+    /* Only where a Deny can carry a reason, and only until the field is open. */
+    onAddReason?: () => void;
+    locked: boolean;
+    sending: boolean;
+}) {
+    const { t } = useTranslation('agent-prompts');
+    return (
+        <>
+            {onAddReason && (
+                <Button size="sm" disabled={locked} onClick={onAddReason}>
+                    {t('approval.addReason')}
+                </Button>
+            )}
+            <div className="ml-auto flex flex-wrap items-center justify-end gap-1.5">
+                {buttons.map((button) =>
+                    button.primary ? (
+                        <PromptPrimary key={button.id} disabled={locked} onClick={button.onPress}>
+                            <Icon icon={CircleCheck} size={16} />
+                            {sending ? t('sending') : button.label}
+                        </PromptPrimary>
+                    ) : (
+                        <Button
+                            key={button.id}
+                            size="sm"
+                            disabled={locked}
+                            aria-description={button.description}
+                            data-prompt-lasting={button.lasting ? '' : undefined}
+                            onClick={button.onPress}
+                        >
+                            {button.label}
+                        </Button>
+                    )
+                )}
+            </div>
+        </>
+    );
+}
+
+/* The buttons of a question: back through its questions, dismissing an optional one, and Next until the last becomes Answer. */
+export function QuestionActions({
+    index,
+    dismissable,
+    last,
+    ready,
+    locked,
+    sending,
+    onPrevious,
+    onDismiss,
+    onCommit
+}: {
+    index: number;
+    dismissable: boolean;
+    last: boolean;
+    ready: boolean;
+    locked: boolean;
+    sending: boolean;
+    onPrevious(): void;
+    onDismiss(): void;
+    onCommit(): void;
+}) {
+    const { t } = useTranslation(['agent-prompts', 'agent-chat']);
+    return (
+        <>
+            {index > 0 && (
+                <Button size="sm" disabled={sending} onClick={onPrevious}>
+                    {t('question.previous')}
+                </Button>
+            )}
+            {dismissable && index === 0 && (
+                <Button size="sm" disabled={locked} onClick={onDismiss}>
+                    {t('agent-chat:common.action.dismiss')}
+                </Button>
+            )}
+            <span className="grow" />
+            <PromptPrimary disabled={locked || !ready} onClick={onCommit}>
+                {sending ? t('sending') : last ? t('question.answer') : t('question.next')}
+                <Icon icon={ArrowUp} size={16} />
+            </PromptPrimary>
+        </>
+    );
+}