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

package/src/chat/ui/PromptComposer.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ArrowDown, Hand, MessageCircleQuestionMark } from 'lucide-react';
+import { focusPromptHeading, focusPromptStart } from '../../prompts/logic/focus';
+import { orderPrompts, type PendingPrompt } from '../../prompts/logic/prompts';
+import { answerPrompt, isBlockingSubject, promptCreatedAt, promptIdOf, type PromptSubject } from '../../prompts/logic/subjects';
+import { useFocusAfterAnswer } from '../../prompts/logic/useFocusAfterAnswer';
+import { usePromptSession } from '../../prompts/logic/usePromptSession';
+import { PromptView } from '../../prompts/ui/PromptView';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatActions } from '../actions';
+import { Icon } from '@adecore/ui';
+
+/* The one being read stays in front; otherwise blocking before optional, oldest first, as everywhere else. */
+function pickSubject(waiting: readonly PromptSubject[], activeId: string | null): PromptSubject | null {
+    return waiting.find((subject) => promptIdOf(subject) === activeId) ?? orderPrompts(waiting, isBlockingSubject, promptCreatedAt)[0] ?? null;
+}
+
+export function PromptComposer({
+    chatId,
+    pending,
+    focused,
+    onShowElsewhere,
+    disabled,
+    hasDraft,
+    denyReason,
+    onAllAnswered,
+    children
+}: {
+    chatId: string;
+    pending: PendingPrompt[];
+    focused: boolean;
+    /* Set where the prompts are answered somewhere else; the composer only says where they went, and this goes there. */
+    onShowElsewhere?: () => void;
+    disabled: boolean;
+    hasDraft: boolean;
+    denyReason: boolean;
+    /* Takes the keyboard back to the composer once the last prompt was answered from its card. */
+    onAllAnswered?: () => void;
+    children: ReactNode;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const actions = useChatActions();
+    const elsewhere = onShowElsewhere !== undefined;
+    // A card the app raises itself waits in the chat beside the CLI's own requests.
+    const extra = chatHost().prompts.useExtra(id, chatId);
+    const subjects = useMemo(
+        (): PromptSubject[] => [
+            ...pending.map((item): PromptSubject => ({ kind: 'chat', nodeId: chatId, item })),
+            ...extra.map((prompt): PromptSubject => ({ kind: 'host', nodeId: chatId, prompt }))
+        ],
+        [pending, extra, chatId]
+    );
+    const session = usePromptSession({ prompts: subjects, idOf: promptIdOf, pick: pickSubject, disabled });
+    const ref = useRef<HTMLDivElement>(null);
+    const { active, activeId: activeKey } = session;
+    const expanded = !!active;
+    const refocus = useFocusAfterAnswer(activeKey, ref, () => onAllAnswered?.());
+
+    useEffect(() => {
+        if (focused && expanded && !elsewhere && !ref.current?.querySelector('.prompt-card')?.contains(document.activeElement)) {
+            // Keys meant for the draft may still be coming, and on a button the next Space would answer the card.
+            if (hasDraft) {
+                focusPromptHeading(ref.current);
+            } else {
+                focusPromptStart(ref.current);
+            }
+        }
+    }, [activeKey, expanded, focused, elsewhere, hasDraft]);
+
+    return (
+        <div ref={ref} onPointerDownCapture={session.onPointerDownCapture} onClickCapture={session.onClickCapture}>
+            {active && elsewhere && (
+                <button
+                    type="button"
+                    className="flex w-full items-center gap-2 px-3.5 py-3 text-left text-sm text-text-muted hover:text-text"
+                    onClick={onShowElsewhere}
+                >
+                    <Icon
+                        icon={(active.kind === 'chat' ? active.item.kind === 'approval' : active.prompt.asks === 'approval') ? Hand : MessageCircleQuestionMark}
+                        size={16}
+                        className="shrink-0 text-status-needs-you"
+                    />
+                    <span className="grow">{t('composer.waitingBelow')}</span>
+                    <Icon icon={ArrowDown} size={16} className="shrink-0" />
+                </button>
+            )}
+            {active && !elsewhere && (
+                <div hidden={!expanded}>
+                    <PromptView
+                        key={activeKey}
+                        subject={active}
+                        draft={session.draftOf(promptIdOf(active))}
+                        onDraft={(draft) => session.setDraft(promptIdOf(active), draft)}
+                        onAction={(action) => {
+                            refocus.hold();
+                            void session
+                                .act(active, () => answerPrompt(active, action, actions))
+                                .then((result) => {
+                                    if (result === 'failed') {
+                                        refocus.release();
+                                    }
+                                });
+                        }}
+                        more={session.waiting.length - 1}
+                        hasDraft={hasDraft}
+                        denyReason={denyReason}
+                        disabled={disabled}
+                        sending={session.sending}
+                        error={session.errorOf(promptIdOf(active))}
+                    />
+                </div>
+            )}
+            <div hidden={expanded}>{children}</div>
+        </div>
+    );
+}

package/src/chat/ui/QuoteButton.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState, type RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Quote } from 'lucide-react';
+import { selectedAnswerQuote, type QuoteTaker } from './quote-selection';
+import { Button, Icon, Surface } from '@adecore/ui';
+
+const GAP_PX = 6;
+// Keeps the button's middle far enough from the edges that it never sticks out of the thread.
+const EDGE_PX = 40;
+
+interface Offer {
+    quote: string;
+    x: number;
+    y: number;
+}
+
+/* The last line the range covers. A triple-click ends on an empty rect at the start of the next row. */
+function lastLineOf(range: Range): DOMRect | null {
+    const rects = [...range.getClientRects()].filter((rect) => rect.width > 0);
+    return rects.at(-1) ?? null;
+}
+
+/*
+ * A button under a selection in an answer that hands it to the composer. Quoting on the selection
+ * alone grew the composer while the person was still selecting, which moved the thread under the
+ * pointer. It only shows once the pointer is up, so a drag never has it jump along.
+ */
+export function QuoteButton({
+    thread,
+    frame,
+    taker
+}: {
+    thread: RefObject<HTMLElement | null>;
+    frame: RefObject<HTMLElement | null>;
+    taker: RefObject<QuoteTaker | null>;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const [offer, setOffer] = useState<Offer | null>(null);
+
+    useEffect(() => {
+        let pressed = false;
+        const read = (): void => {
+            const selection = document.getSelection();
+            const quote = taker.current === null ? null : selectedAnswerQuote(selection, thread.current);
+            const box = frame.current;
+            const line = quote === null || selection === null ? null : lastLineOf(selection.getRangeAt(0));
+            if (quote === null || box === null || line === null) {
+                setOffer(null);
+                return;
+            }
+            const bounds = box.getBoundingClientRect();
+            // The canvas may zoom the cell; the button is placed in the frame's own pixels.
+            const zoom = box.offsetWidth > 0 ? bounds.width / box.offsetWidth : 1;
+            const x = Math.min(Math.max((line.right - bounds.left) / zoom, EDGE_PX), box.offsetWidth - EDGE_PX);
+            const y = (line.bottom - bounds.top) / zoom + GAP_PX;
+            setOffer({ quote, x: Math.round(x), y: Math.round(y) });
+        };
+        const press = (): void => {
+            pressed = true;
+        };
+        const release = (): void => {
+            pressed = false;
+            read();
+        };
+        const change = (): void => {
+            if (pressed) {
+                setOffer(null);
+                return;
+            }
+            read();
+        };
+        document.addEventListener('pointerdown', press, true);
+        document.addEventListener('pointerup', release, true);
+        document.addEventListener('selectionchange', change);
+        return () => {
+            document.removeEventListener('pointerdown', press, true);
+            document.removeEventListener('pointerup', release, true);
+            document.removeEventListener('selectionchange', change);
+        };
+    }, [thread, frame, taker]);
+
+    if (offer === null) {
+        return null;
+    }
+
+    return (
+        <Surface
+            render={<Button size="sm" />}
+            className="absolute z-10 -translate-x-1/2 select-none"
+            style={{ left: offer.x, top: offer.y }}
+            // Pressing a button moves the selection, and the selection is what it quotes.
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => {
+                document.getSelection()?.removeAllRanges();
+                taker.current?.(offer.quote);
+                setOffer(null);
+            }}
+        >
+            <Icon icon={Quote} size={12} />
+            {t('composer.quote.add')}
+        </Surface>
+    );
+}

package/src/chat/ui/ResumeCompactionDock.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import { Minimize2 } from 'lucide-react';
+import { formatTokens } from '@adecore/ui/format';
+import { Button, Icon } from '@adecore/ui';
+
+/*
+ * The offer at the top of the composer, for a chat that lay still long enough that the next message
+ * pays for the whole thread again. It takes no keys and blocks nothing: typing and sending keeps the
+ * full history, which is what a person who ignores this does.
+ */
+export function ResumeCompactionDock({ tokens, onCompact, onDismiss }: { tokens: number; onCompact(): void; onDismiss(): void }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div className="flex items-center gap-2 border-b border-border px-3.5 py-2.5">
+            <Icon icon={Minimize2} size={16} className="shrink-0 text-text-faint" />
+            <span className="flex min-w-0 grow flex-col">
+                <span className="truncate text-sm text-text">{t('resumeCompaction.title')}</span>
+                <span className="truncate text-xs tabular-nums text-text-faint">{t('resumeCompaction.carried', { tokens: formatTokens(tokens) })}</span>
+            </span>
+            <Button size="sm" onClick={onDismiss}>
+                {t('resumeCompaction.keep')}
+            </Button>
+            <Button size="sm" variant="primary" onClick={onCompact}>
+                {t('resumeCompaction.compact')}
+            </Button>
+        </div>
+    );
+}