@adecore/agents-react 0.20.1 → 0.21.1

package/src/chat/ui/intelligent-ui/renderers/choices.tsx

@@ -0,0 +1,102 @@
+import { useId, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight, Check } from 'lucide-react';
+import type { UiProps } from '@adecore/intelligent-ui';
+import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
+import type { UiRendererProps } from '../render-context';
+import { useLater } from '../use-later';
+
+/* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
+const LONG_CONTEXT = 120;
+const SPINNER_AFTER_MS = 300;
+
+/* Says once, politely, that the choices opened when the reply was done; never on a block that was already done. */
+export function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'Choices'>>) {
+    const { t } = useTranslation('agent-chat');
+    const [streamed] = useState(context.phase === 'streaming');
+    return (
+        <div role="group" aria-label={t('blocks.choices')} className="chat-ui-nodes flex flex-col gap-1.5">
+            {children}
+            <span className="sr-only" role="status">
+                {streamed && context.phase === 'final' ? t('blocks.choice.ready') : ''}
+            </span>
+        </div>
+    );
+}
+
+/*
+ * A row that shows what it sends: the label, and under it the context the agent receives. It stays
+ * closed while the reply streams, once the block is answered and without a host to send it, and
+ * remains focusable then so a screen reader hears why.
+ */
+export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiProps<'Choice'>>) {
+    const { t } = useTranslation('agent-chat');
+    const descriptionId = useId();
+    const { context: detail, primary, disabled } = node.props;
+    const { answer, onChoose } = context;
+    const chosen = answer !== null && answer.choiceId === node.id;
+    const waiting = context.phase === 'streaming';
+    const unavailable = disabled === true || onChoose === undefined;
+    const failed = answer === null && context.failedChoiceId === node.id;
+    const closed = waiting || unavailable || answer !== null;
+    const slow = useLater(chosen && answer.state === 'sending', SPINNER_AFTER_MS);
+    const reason = waiting
+        ? t('blocks.choice.waiting')
+        : answer === null && unavailable
+          ? ((disabled === true ? null : context.choiceReason) ?? t('blocks.choice.unavailable'))
+          : null;
+    const described = detail !== undefined && detail !== '';
+
+    const row = (
+        <button
+            type="button"
+            aria-disabled={closed || undefined}
+            aria-describedby={described ? descriptionId : undefined}
+            className={clsx(
+                'flex w-full items-start gap-2 rounded-md border px-2 py-1.5 text-left transition-[opacity,scale,background-color] duration-150 motion-reduce:transition-none',
+                chosen ? 'border-accent bg-accent-soft' : failed ? 'border-status-error bg-surface-hover' : 'border-border bg-surface-hover',
+                !closed && 'hover:bg-surface-active active:scale-99',
+                waiting ? 'opacity-60' : closed && !chosen && 'opacity-50'
+            )}
+            onClick={() => {
+                if (!closed) {
+                    onChoose?.(node.id);
+                }
+            }}
+        >
+            <Icon icon={ArrowRight} size={14} className={clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint')} />
+            <span className="flex min-w-0 grow flex-col">
+                <span className="text-sm font-semibold text-text">{children}</span>
+                {described && (
+                    <span id={descriptionId} className="line-clamp-2 text-xs text-text-muted">
+                        {detail}
+                    </span>
+                )}
+            </span>
+            {chosen && (
+                <span className="mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent">
+                    {slow ? <Spinner size={12} /> : <Icon icon={Check} size={12} />}
+                    {answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')}
+                </span>
+            )}
+        </button>
+    );
+
+    return (
+        <div className="flex flex-col gap-1">
+            {reason !== null ? (
+                <DisabledReason reason={reason}>{row}</DisabledReason>
+            ) : described && detail.length > LONG_CONTEXT ? (
+                <Tooltip label={detail}>{row}</Tooltip>
+            ) : (
+                row
+            )}
+            {failed && (
+                <p role="alert" className="px-2 text-xs text-status-error">
+                    {t('blocks.choice.failed')}
+                </p>
+            )}
+        </div>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -0,0 +1,140 @@
+import clsx from 'clsx';
+import { createContext, useContext, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { UiProps } from '@adecore/intelligent-ui';
+import { PreviewCard } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { chatHost } from '../../../../host';
+import { CodeBlock } from '../../CodeBlock';
+import { CodeStreamingContext } from '../../code-streaming';
+import { ImageThumb } from '../../ImageView';
+import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
+import type { UiRendererProps } from '../render-context';
+
+// The number of every source by its node id, which the list counts in its own order.
+const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
+
+/* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
+export function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>>) {
+    return (
+        <CodeStreamingContext.Provider value={!node.complete}>
+            <CodeBlock code={uiNodeText(node).replace(/^\n|\n$/g, '')} lang={node.props.language ?? 'text'} />
+        </CodeStreamingContext.Provider>
+    );
+}
+
+/* Its own component, so the host's hook is only called for an image that names an attachment. */
+function AttachedImage({ scopeId, chatId, attachmentId, alt }: { scopeId: string; chatId: string; attachmentId: string; alt: string }) {
+    const source = chatHost().attachments.useUrl(scopeId, chatId, attachmentId);
+    return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full object-contain" />;
+}
+
+/*
+ * An attachment of the chat, never a path or an address the model wrote. An image of the latest
+ * generation stays a quiet square until the daemon resolved it to an attachment.
+ */
+export function ImageRenderer({ node, children, context }: UiRendererProps<UiProps<'Image'>>) {
+    const { t } = useTranslation('agent-chat');
+    const { attachment, alt } = node.props;
+    const caption = uiNodeLabel(node);
+    const name = alt ?? (caption === '' ? t('blocks.image.label') : caption);
+    return (
+        <figure className="flex flex-col items-start gap-1.5">
+            {attachment === undefined ? (
+                <ImageThumb source={{ url: null, failure: t('blocks.image.unavailable') }} alt={name} />
+            ) : (
+                <AttachedImage scopeId={context.scopeId} chatId={context.chatId} attachmentId={attachment} alt={name} />
+            )}
+            {caption !== '' && <figcaption className="px-2 text-xs text-text-muted">{children}</figcaption>}
+        </figure>
+    );
+}
+
+export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>) {
+    const { t } = useTranslation('agent-chat');
+    const headingId = useId();
+    const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
+    return (
+        <SourceNumbers value={numbers}>
+            <section aria-labelledby={headingId} className="flex flex-col">
+                <span id={headingId} className="px-2 pb-1 text-xs font-medium text-text-muted">
+                    {t('blocks.sources')}
+                </span>
+                <ol className="chat-ui-nodes flex flex-col">{children}</ol>
+            </section>
+        </SourceNumbers>
+    );
+}
+
+export interface UiSourceCitationProps {
+    /* The number of the Source, as its row in the list counts it. */
+    number: number;
+    title: string;
+    url: string;
+    /* Shows the Source row the number stands for. Without it the number is no button. */
+    onReveal?: () => void;
+    className?: string;
+}
+
+/*
+ * A source number in running text. Resting on it or focusing it shows the title and the domain, and
+ * a tap reveals the row in the list of sources; only that row opens the address, so nothing loads
+ * before a person asks for it.
+ */
+export function UiSourceCitation({ number, title, url, onReveal, className }: UiSourceCitationProps) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <PreviewCard.Root>
+            <PreviewCard.Trigger
+                delay={300}
+                closeDelay={150}
+                render={onReveal === undefined ? <span /> : <button type="button" />}
+                aria-label={onReveal === undefined ? undefined : t('blocks.citation', { number: formatNumber(number), title })}
+                className={clsx(
+                    'inline-flex h-4 min-w-4.5 items-center justify-center rounded-sm bg-text/7 px-1 align-[1px] text-2xs leading-4 text-text-muted tabular-nums',
+                    onReveal !== undefined && 'cursor-pointer hover:bg-text/12 hover:text-text',
+                    className
+                )}
+                onClick={onReveal}
+            >
+                {formatNumber(number)}
+            </PreviewCard.Trigger>
+            <PreviewCard.Popup side="top" align="center" sideOffset={4} className="flex max-w-72 flex-col px-2.5 py-1.5 text-xs">
+                <span className="line-clamp-2 text-text">{title}</span>
+                <span className="truncate text-text-faint">{uiUrlDomain(url)}</span>
+            </PreviewCard.Popup>
+        </PreviewCard.Root>
+    );
+}
+
+/*
+ * Opens through the host and loads nothing before, not even an icon. The row itself takes focus
+ * when a citation reveals it, apart from the button that opens it.
+ */
+export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Source'>>) {
+    const number = useContext(SourceNumbers).get(node.id);
+    const { title, url } = node.props;
+    const { openUrl } = context;
+    const face = (
+        <>
+            <span className="w-5 shrink-0 text-right text-text-faint tabular-nums">{number}</span>
+            <span className="min-w-0 truncate text-text">{title}</span>
+            <span className="shrink-0 text-text-faint">{uiUrlDomain(url)}</span>
+        </>
+    );
+    return (
+        <li data-ui-source={node.id} tabIndex={-1} className="chat-ui-source scroll-my-2 rounded-md">
+            {openUrl === undefined ? (
+                <span className="flex h-8 items-center gap-2 px-2 text-xs">{face}</span>
+            ) : (
+                <button
+                    type="button"
+                    className="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs hover:bg-surface-hover"
+                    onClick={() => openUrl(url)}
+                >
+                    {face}
+                </button>
+            )}
+        </li>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/data.tsx

@@ -0,0 +1,181 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+import type { UiProps } from '@adecore/intelligent-ui';
+import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
+import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
+import { useBlockLocal } from '../block-local';
+import { uiChildrenOf, uiWithUnit } from '../node-text';
+import type { UiLiveValue, UiRendererProps } from '../render-context';
+import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns, type UiTableCell, type UiTableColumn } from '../table-data';
+import { UI_TONE_TEXT } from '../tones';
+import { UiFallbackPart } from '../UiFallbackPart';
+
+/* EntityList draws a hairline between its rows from this many on. */
+const DIVIDED_FROM = 7;
+
+/*
+ * A number that live readings keep up to date. Keyed by its text, so a value that changed mounts
+ * again and lights up once, even when it changes again before the last light settled.
+ */
+function LiveFigure({ text, previous, live, className }: { text: string; previous?: string; live?: UiLiveValue; className?: string }) {
+    const lit = live !== undefined && live.changed && !live.stale && previous !== text;
+    return (
+        <span key={text} className={clsx(live?.stale ? 'text-text-muted' : 'text-text', lit && 'chat-ui-changed', className)}>
+            {text}
+        </span>
+    );
+}
+
+export function StatsRenderer({ children }: UiRendererProps<UiProps<'Stats'>>) {
+    return <div className="chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-2">{children}</div>;
+}
+
+/* The arrow and the number say which way a value went; only a tone says whether that is good. */
+export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>) {
+    const { t } = useTranslation('agent-chat');
+    const { label, value, previous, unit, tone } = node.props;
+    const live = context.liveValue?.(node.id, 'value');
+    const change = previous === undefined ? null : value - previous;
+    const arrow = change === null || change === 0 ? ArrowRight : change > 0 ? ArrowUp : ArrowDown;
+    const from = previous === undefined ? '' : uiWithUnit(formatRounded(previous, 2), unit);
+    // A change from zero has no percentage.
+    const percent = change === null || previous === undefined || previous === 0 ? null : formatPercent(Math.abs((change / previous) * 100));
+    return (
+        <div className="flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5">
+            <span className="truncate text-xs text-text-muted">{label}</span>
+            <LiveFigure
+                text={uiWithUnit(formatRounded(value, 2), unit)}
+                previous={typeof live?.previous === 'number' ? uiWithUnit(formatRounded(live.previous, 2), unit) : undefined}
+                live={live}
+                className="text-lg font-semibold tabular-nums"
+            />
+            {change !== null && (
+                <span className={clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone])}>
+                    <Icon icon={arrow} size={12} className="shrink-0" />
+                    <span className="min-w-0 truncate">
+                        {percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from })}
+                    </span>
+                </span>
+            )}
+        </div>
+    );
+}
+
+export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'EntityList'>>) {
+    return (
+        <KeyValueList.Root divided={uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM} className="chat-ui-nodes px-2">
+            {children}
+        </KeyValueList.Root>
+    );
+}
+
+export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry'>>) {
+    return (
+        <KeyValueList.Item>
+            <KeyValueList.Name>{node.props.label}</KeyValueList.Name>
+            <KeyValueList.Value>{children}</KeyValueList.Value>
+        </KeyValueList.Item>
+    );
+}
+
+function numberText(cell: Extract<UiTableCell, { kind: 'number' }>, unit: string | undefined): string {
+    return cell.as === 'bytes' ? formatBytes(cell.value) : cell.as === 'duration' ? formatDuration(cell.value) : uiWithUnit(formatRounded(cell.value, 2), unit);
+}
+
+function Cell({ value, column, live }: { value: unknown; column: UiTableColumn; live?: UiLiveValue }) {
+    const cell = uiTableCell(value, column);
+    switch (cell.kind) {
+        case 'empty':
+            return null;
+        case 'text':
+            return <>{cell.text}</>;
+        case 'number': {
+            const before = live?.previous === undefined ? undefined : uiTableCell(live.previous, column);
+            return (
+                <LiveFigure
+                    text={numberText(cell, column.unit)}
+                    previous={before?.kind === 'number' ? numberText(before, column.unit) : undefined}
+                    live={live}
+                />
+            );
+        }
+        case 'date':
+            return <time dateTime={new Date(cell.at).toISOString()}>{formatMoment(cell.at)}</time>;
+        case 'file':
+            // A cell is no link target the host checked, so its path stays text.
+            return <span className="font-mono text-code break-all">{cell.path}</span>;
+        case 'tag':
+            return (
+                <Pill shape="tag" size="sm">
+                    {cell.text}
+                </Pill>
+            );
+    }
+}
+
+/*
+ * Rows under a sticky head, scrolling inside 320px and sideways when wider than the column. Rows
+ * arrive one by one while the block streams, without animation; past fifty a person asks for the rest.
+ */
+export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'>>) {
+    const { t } = useTranslation('agent-chat');
+    const [all, setAll] = useBlockLocal(context, node.id, () => false);
+    const columns = uiTableColumns(node);
+    if (columns.length === 0) {
+        return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
+    }
+    const { rows } = node.props;
+    const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
+    return (
+        <div className="flex flex-col items-start gap-1.5">
+            <div className="max-h-80 w-full overflow-auto rounded-md border border-border-soft">
+                <table
+                    aria-label={t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') })}
+                    className="w-full border-collapse text-xs tabular-nums"
+                >
+                    <thead className="sticky top-0 z-1 bg-surface-hover">
+                        <tr>
+                            {columns.map((column) => (
+                                <th
+                                    key={column.key}
+                                    scope="col"
+                                    className={clsx(
+                                        'h-8 px-2 font-medium whitespace-nowrap text-text-muted',
+                                        isNumericColumn(column) ? 'text-right' : 'text-left'
+                                    )}
+                                >
+                                    {column.title}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {shown.map((row, index) => (
+                            // Rows only ever grow at the end while a block streams, so the place of a row is a stable key.
+                            <tr key={index} className="border-t border-border-soft">
+                                {columns.map((column) => (
+                                    <td
+                                        key={column.key}
+                                        className={clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left')}
+                                    >
+                                        <Cell
+                                            value={row[column.key]}
+                                            column={column}
+                                            live={isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined}
+                                        />
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            {!all && rows.length > UI_TABLE_ROWS && (
+                <Button size="xs" variant="secondary" onClick={() => setAll(true)}>
+                    {t('blocks.table.showAll', { total: formatNumber(rows.length) })}
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/inputs.tsx

@@ -0,0 +1,144 @@
+import { createContext, useContext, type MouseEvent, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import type { UiBinding, UiProps, UiViewNode } from '@adecore/intelligent-ui';
+import { Button, Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text';
+import type { UiRenderContext, UiRendererProps } from '../render-context';
+
+type Scalar = UiProps<'Item'>['value'];
+
+interface ChecklistState {
+    values: readonly Scalar[];
+    enabled: boolean;
+    toggle(value: Scalar): void;
+}
+
+const ChecklistContext = createContext<ChecklistState>({ values: [], enabled: false, toggle: () => undefined });
+
+/*
+ * The binding of an input, or null for a read-only node. An input works once its own node closed and
+ * only through its binding, so the value never leaves the block until a Choice carries it.
+ */
+function bindingOf<Value>(node: UiViewNode<{ value: Value }>, context: UiRenderContext): UiBinding<Value> | null {
+    const binding = node.bindings.value as UiBinding<Value> | undefined;
+    return binding === undefined || !node.complete || context.answer !== null ? null : binding;
+}
+
+/* An input whose node has not closed yet stands at 60% and takes no pointer. */
+const PENDING = 'pointer-events-none opacity-60';
+
+/* The rows of a checklist as one named group. */
+function ChecklistGroup({ pending, children }: { pending: boolean; children: ReactNode }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div role="group" aria-label={t('blocks.checklist')} className={clsx('chat-ui-nodes flex flex-col', pending && PENDING)}>
+            {children}
+        </div>
+    );
+}
+
+export function ChecklistRenderer({ node, children, context }: UiRendererProps<UiProps<'Checklist'>>) {
+    const binding = bindingOf(node, context);
+    const values = binding?.value ?? node.props.value;
+    const toggle = (value: Scalar): void => {
+        binding?.onValueChange(values.includes(value) ? values.filter((entry) => entry !== value) : [...values, value]);
+    };
+    return (
+        <ChecklistContext value={{ values, enabled: binding !== null, toggle }}>
+            <ChecklistGroup pending={!node.complete}>{children}</ChecklistGroup>
+        </ChecklistContext>
+    );
+}
+
+/* The whole row is the label; a link inside it keeps its own click and checks nothing. */
+export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>>) {
+    const list = useContext(ChecklistContext);
+    const { value } = node.props;
+    const toggleRow = (event: MouseEvent<HTMLDivElement>): void => {
+        if (list.enabled && !(event.target as Element).closest('button, a')) {
+            list.toggle(value);
+        }
+    };
+    return (
+        <div
+            className={clsx('flex min-h-8 items-center gap-2 rounded-md px-2 text-sm text-text', list.enabled && 'hover:bg-surface-hover')}
+            onClick={toggleRow}
+        >
+            <Checkbox checked={list.values.includes(value)} onCheckedChange={() => list.toggle(value)} label={uiNodeLabel(node)} disabled={!list.enabled} />
+            <div className="min-w-0 grow">{children}</div>
+        </div>
+    );
+}
+
+export function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>) {
+    const binding = bindingOf(node, context);
+    return (
+        <div className={clsx('flex min-h-7 items-center justify-between gap-3 px-2 text-sm', !node.complete && PENDING)}>
+            <span className="min-w-0 text-text">{children}</span>
+            <Switch
+                checked={binding?.value ?? node.props.value}
+                onCheckedChange={(next) => binding?.onValueChange(next)}
+                label={uiNodeLabel(node)}
+                disabled={binding === null}
+            />
+        </div>
+    );
+}
+
+/* Its children are the label, read as text: the slider writes its own label line. */
+export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slider'>>) {
+    const binding = bindingOf(node, context);
+    const { value, min, max, step, unit } = node.props;
+    return (
+        <Slider
+            value={binding?.value ?? value}
+            onValueChange={(next) => binding?.onValueChange(next)}
+            min={min}
+            max={max}
+            step={step}
+            // The slider prints its unit right after the number, so the space a unit stands apart with comes from here.
+            unit={uiWithUnit('', unit)}
+            label={uiNodeLabel(node)}
+            disabled={binding === null}
+            className={clsx('px-2', !node.complete && PENDING)}
+        />
+    );
+}
+
+/* Left aligned, never the full width. Each Option is a segment by its place, since a value may be any scalar. */
+export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Segmented'>>) {
+    const { t } = useTranslation('agent-chat');
+    const binding = bindingOf(node, context);
+    const current = binding?.value ?? node.props.value;
+    const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
+    const picked = options.find((option) => option.value === current)?.id ?? '';
+    return (
+        <div className={clsx('px-2', !node.complete && PENDING)}>
+            <Segmented
+                value={picked}
+                options={options}
+                label={t('blocks.options')}
+                disabled={binding === null}
+                onValueChange={(id) => {
+                    const option = options[Number(id)];
+                    if (option !== undefined) {
+                        binding?.onValueChange(option.value);
+                    }
+                }}
+            />
+        </div>
+    );
+}
+
+/* Runs its local action once its own node closed; like an input, it closes once the block is answered. */
+export function ButtonRenderer({ node, children, context }: UiRendererProps<UiProps<'Button'>>) {
+    const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+    return (
+        <div className={clsx('px-2', !node.complete && PENDING)}>
+            <Button variant="secondary" size="sm" disabled={!enabled} onClick={() => node.onAction?.()}>
+                {children}
+            </Button>
+        </div>
+    );
+}