@adecore/agents-react 0.20.1 → 0.21.1

package/dist/chat/ui/intelligent-ui/registry.js

@@ -0,0 +1,51 @@
+import { ChartRenderer } from './renderers/chart.js';
+import { ChoiceRenderer, ChoicesRenderer } from './renderers/choices.js';
+import { CodeBlockRenderer, ImageRenderer, SourceRenderer, SourcesRenderer } from './renderers/content.js';
+import { EntityListRenderer, EntryRenderer, StatRenderer, StatsRenderer, TableRenderer } from './renderers/data.js';
+import { ButtonRenderer, ChecklistRenderer, ItemRenderer, SegmentedRenderer, SliderRenderer, SwitchRenderer } from './renderers/inputs.js';
+import { CommitRenderer, DiffRenderer, FileRenderer, NodeRenderer } from './renderers/links.js';
+import { SectionRenderer, SectionsRenderer, TabRenderer, TabsRenderer } from './renderers/structure.js';
+import { CalloutRenderer, ProgressRenderer, StepRenderer, StepsRenderer, SummaryRenderer, TagRenderer } from './renderers/text.js';
+/*
+ * A renderer for every component of the catalog; a name missing here fails the typecheck. Null draws
+ * nothing for the node itself: the runtime resolves Show and Each before rendering, and Column and
+ * Option are metadata their parent reads from its node (a table its columns, Segmented its segments).
+ */
+export const UI_RENDERERS = {
+    Summary: SummaryRenderer,
+    Callout: CalloutRenderer,
+    Tag: TagRenderer,
+    Progress: ProgressRenderer,
+    Steps: StepsRenderer,
+    Step: StepRenderer,
+    Stats: StatsRenderer,
+    Stat: StatRenderer,
+    EntityList: EntityListRenderer,
+    Entry: EntryRenderer,
+    Table: TableRenderer,
+    Column: null,
+    Chart: ChartRenderer,
+    Tabs: TabsRenderer,
+    Tab: TabRenderer,
+    Sections: SectionsRenderer,
+    Section: SectionRenderer,
+    CodeBlock: CodeBlockRenderer,
+    Image: ImageRenderer,
+    Sources: SourcesRenderer,
+    Source: SourceRenderer,
+    File: FileRenderer,
+    Diff: DiffRenderer,
+    Commit: CommitRenderer,
+    Node: NodeRenderer,
+    Checklist: ChecklistRenderer,
+    Item: ItemRenderer,
+    Switch: SwitchRenderer,
+    Slider: SliderRenderer,
+    Segmented: SegmentedRenderer,
+    Option: null,
+    Button: ButtonRenderer,
+    Show: null,
+    Each: null,
+    Choices: ChoicesRenderer,
+    Choice: ChoiceRenderer
+};

package/dist/chat/ui/intelligent-ui/render-context.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
+export type { UiLinkTarget } from '@adecore/intelligent-ui/links';
+import type { UiLinkTarget } from '@adecore/intelligent-ui/links';
+export interface UiLink {
+    state: 'chip' | 'plain';
+    label?: string;
+    reason?: string;
+    code?: string;
+}
+export interface UiAnswer {
+    choiceId: string;
+    state: 'sending' | 'sent' | 'queued';
+}
+export interface UiLiveStatus {
+    state: 'fresh' | 'reading' | 'failed' | 'refused';
+    sources: readonly string[];
+    readAt: number | null;
+    source?: string;
+    reason?: string;
+    code?: string;
+}
+export interface UiLiveValue {
+    previous?: unknown;
+    changed: boolean;
+    stale: boolean;
+}
+export interface UiRenderContext {
+    scopeId: string;
+    chatId: string;
+    itemId: string;
+    blockId: string;
+    phase: 'streaming' | 'final';
+    answer: UiAnswer | null;
+    failedChoiceId?: string | null;
+    live?: UiLiveStatus | null;
+    link?(target: UiLinkTarget): UiLink;
+    openLink?(target: UiLinkTarget): void;
+    openUrl?(url: string): void;
+    onChoose?(nodeId: string): void;
+    choiceReason?: string | null;
+    liveValue?(nodeId: string, prop: string, path?: readonly [row: number, key: string]): UiLiveValue | undefined;
+}
+export interface UiRendererProps<Props> {
+    node: UiViewNode<Props>;
+    children: ReactNode;
+    context: UiRenderContext;
+}
+export type UiRenderer<Props> = (props: UiRendererProps<Props>) => ReactNode;
+export type UiRenderers = {
+    readonly [Name in UiComponentName]: UiRenderer<UiProps<Name>> | null;
+};
+export declare const UiHeadContext: import("react").Context<string | null | undefined>;

package/dist/chat/ui/intelligent-ui/render-context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+/* The id of the Summary that heads the block. Undefined outside a frame, where every Summary heads. */
+export const UiHeadContext = createContext(undefined);

package/dist/chat/ui/intelligent-ui/renderers/chart.d.ts

@@ -0,0 +1,3 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiRendererProps } from '../render-context.js';
+export declare function ChartRenderer({ node }: UiRendererProps<UiProps<'Chart'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/chart.js

@@ -0,0 +1,123 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { SegmentBar, useMeasuredWidth } from '@adecore/ui';
+import { formatRounded } from '@adecore/ui/format';
+import { niceCeiling, UI_CHART_ROWS, uiChartData } from '../chart-data.js';
+import { uiWithUnit } from '../node-text.js';
+import { UiFallbackPart } from '../UiFallbackPart.js';
+const HEIGHT = 160;
+const HBAR_ROW = 24;
+const STACKED_ROW = 28;
+const AXIS_WIDTH = 44;
+const PLOT_TOP = 8;
+const LABEL_ROOM = 20;
+/* The narrowest band a category label is written under; narrower bands skip labels. */
+const LABEL_BAND = 56;
+/* Points get a dot up to this many categories; more would crowd the line. */
+const DOTS_UP_TO = 30;
+const GROW = 'transition-[scale,opacity] duration-400 ease-out motion-reduce:transition-none';
+function seriesColor(index) {
+    return `var(--chart-${index + 1})`;
+}
+function valueText(value, unit) {
+    return value === null ? '' : uiWithUnit(formatRounded(value, 2), unit);
+}
+/* The height a chart will take, which its place holds while the node streams. */
+function chartHeight(kind, rows) {
+    const count = Math.max(1, Math.min(rows, UI_CHART_ROWS));
+    return kind === 'hbar' ? count * HBAR_ROW : kind === 'stacked' ? count * STACKED_ROW : HEIGHT;
+}
+/* One sentence with the main point, which a screen reader hears in place of the drawing. */
+function chartSummary(chart, unit, t) {
+    let top = null;
+    for (const series of chart.series) {
+        for (let i = 0; i < series.values.length; i++) {
+            const value = series.values[i];
+            if (value !== null && value !== undefined && (top === null || value > top.value)) {
+                top = { label: chart.labels[i] ?? '', series: series.key, value };
+            }
+        }
+    }
+    if (top === null) {
+        return t('blocks.chart.values');
+    }
+    return chart.series.length > 1
+        ? t('blocks.chart.summarySeries', { count: chart.labels.length, series: top.series, label: top.label, value: valueText(top.value, unit) })
+        : t('blocks.chart.summary', { count: chart.labels.length, label: top.label, value: valueText(top.value, unit) });
+}
+function Legend({ chart }) {
+    return (_jsx("div", { "aria-hidden": true, className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted", children: chart.series.map((series, index) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(index) } }), series.key] }, series.key))) }));
+}
+/* The numbers behind the drawing, for a screen reader. */
+function ValuesTable({ chart, unit }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: t('blocks.chart.values') }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), chart.series.map((series) => (_jsx("th", { scope: "col", children: series.key }, series.key)))] }) }), _jsx("tbody", { children: chart.labels.map((label, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: label }), chart.series.map((series) => (_jsx("td", { children: valueText(series.values[index] ?? null, unit) }, series.key)))] }, index))) })] }));
+}
+/* The values of one category beside the pointer. */
+function Readout({ chart, index, left, unit }) {
+    return (_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute top-0 z-1 flex -translate-x-1/2 flex-col gap-0.5 rounded-md bg-surface-raised px-2 py-1 text-xs whitespace-nowrap shadow-raised", style: { left }, children: [_jsx("span", { className: "font-medium text-text", children: chart.labels[index] }), chart.series.map((series, at) => (_jsxs("span", { className: "flex items-center gap-1.5 text-text-muted tabular-nums", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(at) } }), chart.series.length > 1 && _jsx("span", { children: series.key }), _jsx("span", { className: "text-text", children: valueText(series.values[index] ?? null, unit) })] }, series.key)))] }));
+}
+/* Bars and lines over a value axis, in SVG at the measured width. */
+function VerticalChart({ chart, kind, unit, width }) {
+    const [hover, setHover] = useState(null);
+    const low = chart.min < 0 ? -niceCeiling(-chart.min) : 0;
+    const high = chart.max > 0 ? niceCeiling(chart.max) : low === 0 ? 1 : 0;
+    const plotWidth = Math.max(0, width - AXIS_WIDTH);
+    const plotHeight = HEIGHT - PLOT_TOP - LABEL_ROOM;
+    const band = plotWidth / chart.labels.length;
+    const y = (value) => Math.round(PLOT_TOP + ((high - value) / (high - low)) * plotHeight);
+    const baseline = y(0);
+    const ticks = low === 0 ? [0, high / 2, high] : [low, 0, high];
+    const labelEvery = Math.max(1, Math.ceil(LABEL_BAND / Math.max(1, band)));
+    const center = (index) => Math.round(AXIS_WIDTH + band * index + band / 2);
+    const gap = band * 0.2;
+    const barWidth = Math.max(1, (band - gap) / chart.series.length);
+    const segments = (values) => values
+        .map((value, index) => (value === null ? null : `${center(index)} ${y(value)}`))
+        .reduce((paths, point, index, all) => {
+        if (point !== null) {
+            paths.push(`${index === 0 || all[index - 1] === null ? 'M' : 'L'}${point}`);
+        }
+        return paths;
+    }, [])
+        .join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: width, height: HEIGHT, "aria-hidden": true, className: "block overflow-visible", onPointerLeave: () => setHover(null), children: [hover !== null && (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * hover), y: PLOT_TOP, width: Math.round(band), height: plotHeight, className: "fill-surface-hover" })), ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: AXIS_WIDTH, x2: width, y1: y(tick), y2: y(tick), className: tick === 0 ? 'stroke-border' : 'stroke-border-soft', shapeRendering: "crispEdges" }), _jsx("text", { x: AXIS_WIDTH - 6, y: y(tick), dy: "0.32em", textAnchor: "end", className: "fill-text-faint text-xs tabular-nums", children: valueText(tick, unit) })] }, tick))), chart.labels.map((label, index) => index % labelEvery === 0 ? (_jsx("text", { x: center(index), y: HEIGHT - 4, textAnchor: "middle", className: "fill-text-faint text-xs", children: label }, index)) : null), kind === 'bar' ? (_jsx("g", { className: clsx(GROW, 'starting:scale-y-0'), style: { transformOrigin: `0px ${baseline}px` }, children: chart.series.map((series, at) => series.values.map((value, index) => value === null ? null : (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * index + gap / 2 + barWidth * at), y: Math.min(y(value), baseline), width: Math.max(1, Math.round(barWidth) - 1), height: Math.abs(y(value) - baseline), rx: 2, style: { fill: seriesColor(at) } }, `${series.key}:${index}`)))) })) : (_jsx("g", { className: clsx(GROW, 'starting:opacity-0'), children: chart.series.map((series, at) => (_jsxs("g", { style: { color: seriesColor(at) }, children: [_jsx("path", { d: segments(series.values), fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }), chart.labels.length <= DOTS_UP_TO &&
+                                    series.values.map((value, index) => value === null ? null : _jsx("circle", { cx: center(index), cy: y(value), r: 3, fill: "currentColor" }, index))] }, series.key))) })), chart.labels.map((_, index) => (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * index), y: 0, width: Math.max(1, Math.round(band)), height: HEIGHT, fill: "transparent", onPointerEnter: () => setHover(index) }, index)))] }), hover !== null && _jsx(Readout, { chart: chart, index: hover, unit: unit, left: Math.min(Math.max(center(hover), 64), Math.max(64, width - 64)) })] }));
+}
+/* A row of 24px per category, its label beside the bars. */
+function HorizontalChart({ chart, unit }) {
+    // Bars grow right from zero only, so a chart of only negative values has no length to share and keeps a unit scale.
+    const high = niceCeiling(chart.max) || 1;
+    const single = chart.series.length === 1;
+    return (_jsx("div", { "aria-hidden": true, className: "flex flex-col", children: chart.labels.map((label, index) => (_jsxs("div", { className: "flex h-6 items-center gap-2 text-xs", children: [_jsx("span", { className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted", children: label }), _jsx("span", { className: "flex min-w-0 grow flex-col justify-center gap-px", children: chart.series.map((series, at) => (_jsx("span", { className: clsx(GROW, 'block origin-left rounded-sm starting:scale-x-0', single ? 'h-3' : 'h-1'), style: { width: `${(Math.max(0, series.values[index] ?? 0) / high) * 100}%`, backgroundColor: seriesColor(at) } }, series.key))) }), single && (_jsx("span", { className: "w-16 shrink-0 text-right text-text-faint tabular-nums", children: valueText(chart.series[0].values[index] ?? null, unit) }))] }, index))) }));
+}
+/* A bar per category split into its series, on one scale so the rows compare. */
+function StackedChart({ chart, unit }) {
+    return (_jsx("div", { className: "flex flex-col gap-2", children: chart.labels.map((label, index) => (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [chart.labels.length > 1 && _jsx("span", { className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted", children: label }), _jsx(SegmentBar, { size: "sm", className: "grow", label: label, range: [0, chart.max], parts: chart.series.map((series, at) => ({
+                        value: Math.max(0, series.values[index] ?? 0),
+                        color: seriesColor(at),
+                        label: `${series.key} ${valueText(series.values[index] ?? 0, unit)}`
+                    })) })] }, index))) }));
+}
+function DrawnChart({ chart, kind, unit }) {
+    const { t } = useTranslation('agent-chat');
+    const [measure, width] = useMeasuredWidth();
+    return (_jsxs("figure", { className: "flex flex-col gap-2 px-2", children: [chart.series.length > 1 && _jsx(Legend, { chart: chart }), _jsx("div", { ref: measure, role: "img", "aria-label": chartSummary(chart, unit, t), className: "relative", children: kind === 'hbar' ? (_jsx(HorizontalChart, { chart: chart, unit: unit })) : kind === 'stacked' ? (_jsx(StackedChart, { chart: chart, unit: unit })) : (_jsx("div", { style: { height: HEIGHT }, children: width > 0 && _jsx(VerticalChart, { chart: chart, kind: kind, unit: unit, width: width }) })) }), _jsx(ValuesTable, { chart: chart, unit: unit })] }));
+}
+/*
+ * Draws only once its node closed; until then a quiet surface of the height it will take holds its
+ * place. It grows in once, and not at all for a person who asked for less motion.
+ */
+export function ChartRenderer({ node }) {
+    const { kind, data, unit } = node.props;
+    const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
+    if (!node.complete) {
+        return _jsx("div", { "aria-hidden": true, className: "mx-2 rounded-md bg-surface-hover", style: { height: chartHeight(kind, data.length) } });
+    }
+    if (chart === null) {
+        return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
+    }
+    return _jsx(DrawnChart, { chart: chart, kind: kind, unit: unit });
+}

package/dist/chat/ui/intelligent-ui/renderers/choices.d.ts

@@ -0,0 +1,4 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiRendererProps } from '../render-context.js';
+export declare function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'Choices'>>): import("react").JSX.Element;
+export declare function ChoiceRenderer({ node, children, context }: UiRendererProps<UiProps<'Choice'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/choices.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight, Check } from 'lucide-react';
+import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
+import { useLater } from '../use-later.js';
+/* 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 }) {
+    const { t } = useTranslation('agent-chat');
+    const [streamed] = useState(context.phase === 'streaming');
+    return (_jsxs("div", { role: "group", "aria-label": t('blocks.choices'), className: "chat-ui-nodes flex flex-col gap-1.5", children: [children, _jsx("span", { className: "sr-only", role: "status", children: streamed && context.phase === 'final' ? t('blocks.choice.ready') : '' })] }));
+}
+/*
+ * 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 }) {
+    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 = (_jsxs("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);
+            }
+        }, children: [_jsx(Icon, { icon: ArrowRight, size: 14, className: clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint') }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "text-sm font-semibold text-text", children: children }), described && (_jsx("span", { id: descriptionId, className: "line-clamp-2 text-xs text-text-muted", children: detail }))] }), chosen && (_jsxs("span", { className: "mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent", children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: row })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: row })) : (row), failed && (_jsx("p", { role: "alert", className: "px-2 text-xs text-status-error", children: t('blocks.choice.failed') }))] }));
+}

package/dist/chat/ui/intelligent-ui/renderers/content.d.ts

@@ -0,0 +1,14 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiRendererProps } from '../render-context.js';
+export declare function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>>): import("react").JSX.Element;
+export declare function ImageRenderer({ node, children, context }: UiRendererProps<UiProps<'Image'>>): import("react").JSX.Element;
+export declare function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>): import("react").JSX.Element;
+export interface UiSourceCitationProps {
+    number: number;
+    title: string;
+    url: string;
+    onReveal?: () => void;
+    className?: string;
+}
+export declare function UiSourceCitation({ number, title, url, onReveal, className }: UiSourceCitationProps): import("react").JSX.Element;
+export declare function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Source'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/content.js

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PreviewCard } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { chatHost } from '../../../../host.js';
+import { CodeBlock } from '../../CodeBlock.js';
+import { CodeStreamingContext } from '../../code-streaming.js';
+import { ImageThumb } from '../../ImageView.js';
+import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text.js';
+// The number of every source by its node id, which the list counts in its own order.
+const SourceNumbers = createContext(new Map());
+/* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
+export function CodeBlockRenderer({ node }) {
+    return (_jsx(CodeStreamingContext.Provider, { value: !node.complete, children: _jsx(CodeBlock, { code: uiNodeText(node).replace(/^\n|\n$/g, ''), lang: node.props.language ?? 'text' }) }));
+}
+/* Its own component, so the host's hook is only called for an image that names an attachment. */
+function AttachedImage({ scopeId, chatId, attachmentId, alt }) {
+    const source = chatHost().attachments.useUrl(scopeId, chatId, attachmentId);
+    return _jsx(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 }) {
+    const { t } = useTranslation('agent-chat');
+    const { attachment, alt } = node.props;
+    const caption = uiNodeLabel(node);
+    const name = alt ?? (caption === '' ? t('blocks.image.label') : caption);
+    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5", children: [attachment === undefined ? (_jsx(ImageThumb, { source: { url: null, failure: t('blocks.image.unavailable') }, alt: name })) : (_jsx(AttachedImage, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, alt: name })), caption !== '' && _jsx("figcaption", { className: "px-2 text-xs text-text-muted", children: children })] }));
+}
+export function SourcesRenderer({ node, children }) {
+    const { t } = useTranslation('agent-chat');
+    const headingId = useId();
+    const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
+    return (_jsx(SourceNumbers, { value: numbers, children: _jsxs("section", { "aria-labelledby": headingId, className: "flex flex-col", children: [_jsx("span", { id: headingId, className: "px-2 pb-1 text-xs font-medium text-text-muted", children: t('blocks.sources') }), _jsx("ol", { className: "chat-ui-nodes flex flex-col", children: children })] }) }));
+}
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsxs(PreviewCard.Root, { children: [_jsx(PreviewCard.Trigger, { delay: 300, closeDelay: 150, render: onReveal === undefined ? _jsx("span", {}) : _jsx("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, children: formatNumber(number) }), _jsxs(PreviewCard.Popup, { side: "top", align: "center", sideOffset: 4, className: "flex max-w-72 flex-col px-2.5 py-1.5 text-xs", children: [_jsx("span", { className: "line-clamp-2 text-text", children: title }), _jsx("span", { className: "truncate text-text-faint", children: uiUrlDomain(url) })] })] }));
+}
+/*
+ * 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 }) {
+    const number = useContext(SourceNumbers).get(node.id);
+    const { title, url } = node.props;
+    const { openUrl } = context;
+    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 truncate text-text", children: title }), _jsx("span", { className: "shrink-0 text-text-faint", children: uiUrlDomain(url) })] }));
+    return (_jsx("li", { "data-ui-source": node.id, tabIndex: -1, className: "chat-ui-source scroll-my-2 rounded-md", children: openUrl === undefined ? (_jsx("span", { className: "flex h-8 items-center gap-2 px-2 text-xs", children: face })) : (_jsx("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), children: face })) }));
+}

package/dist/chat/ui/intelligent-ui/renderers/data.d.ts

@@ -0,0 +1,7 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiRendererProps } from '../render-context.js';
+export declare function StatsRenderer({ children }: UiRendererProps<UiProps<'Stats'>>): import("react").JSX.Element;
+export declare function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>): import("react").JSX.Element;
+export declare function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'EntityList'>>): import("react").JSX.Element;
+export declare function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry'>>): import("react").JSX.Element;
+export declare function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/data.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
+import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
+import { useBlockLocal } from '../block-local.js';
+import { uiChildrenOf, uiWithUnit } from '../node-text.js';
+import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns } from '../table-data.js';
+import { UI_TONE_TEXT } from '../tones.js';
+import { UiFallbackPart } from '../UiFallbackPart.js';
+/* 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 }) {
+    const lit = live !== undefined && live.changed && !live.stale && previous !== text;
+    return (_jsx("span", { className: clsx(live?.stale ? 'text-text-muted' : 'text-text', lit && 'chat-ui-changed', className), children: text }, text));
+}
+export function StatsRenderer({ children }) {
+    return _jsx("div", { className: "chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-2", children: children });
+}
+/* The arrow and the number say which way a value went; only a tone says whether that is good. */
+export function StatRenderer({ node, context }) {
+    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 (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5", children: [_jsx("span", { className: "truncate text-xs text-text-muted", children: label }), _jsx(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 && (_jsxs("span", { className: clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone]), children: [_jsx(Icon, { icon: arrow, size: 12, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from }) })] }))] }));
+}
+export function EntityListRenderer({ node, children }) {
+    return (_jsx(KeyValueList.Root, { divided: uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM, className: "chat-ui-nodes px-2", children: children }));
+}
+export function EntryRenderer({ node, children }) {
+    return (_jsxs(KeyValueList.Item, { children: [_jsx(KeyValueList.Name, { children: node.props.label }), _jsx(KeyValueList.Value, { children: children })] }));
+}
+function numberText(cell, unit) {
+    return cell.as === 'bytes' ? formatBytes(cell.value) : cell.as === 'duration' ? formatDuration(cell.value) : uiWithUnit(formatRounded(cell.value, 2), unit);
+}
+function Cell({ value, column, live }) {
+    const cell = uiTableCell(value, column);
+    switch (cell.kind) {
+        case 'empty':
+            return null;
+        case 'text':
+            return _jsx(_Fragment, { children: cell.text });
+        case 'number': {
+            const before = live?.previous === undefined ? undefined : uiTableCell(live.previous, column);
+            return (_jsx(LiveFigure, { text: numberText(cell, column.unit), previous: before?.kind === 'number' ? numberText(before, column.unit) : undefined, live: live }));
+        }
+        case 'date':
+            return _jsx("time", { dateTime: new Date(cell.at).toISOString(), children: formatMoment(cell.at) });
+        case 'file':
+            // A cell is no link target the host checked, so its path stays text.
+            return _jsx("span", { className: "font-mono text-code break-all", children: cell.path });
+        case 'tag':
+            return (_jsx(Pill, { shape: "tag", size: "sm", children: cell.text }));
+    }
+}
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-chat');
+    const [all, setAll] = useBlockLocal(context, node.id, () => false);
+    const columns = uiTableColumns(node);
+    if (columns.length === 0) {
+        return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
+    }
+    const { rows } = node.props;
+    const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
+    return (_jsxs("div", { className: "flex flex-col items-start gap-1.5", children: [_jsx("div", { className: "max-h-80 w-full overflow-auto rounded-md border border-border-soft", children: _jsxs("table", { "aria-label": t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') }), className: "w-full border-collapse text-xs tabular-nums", children: [_jsx("thead", { className: "sticky top-0 z-1 bg-surface-hover", children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", className: clsx('h-8 px-2 font-medium whitespace-nowrap text-text-muted', isNumericColumn(column) ? 'text-right' : 'text-left'), children: column.title }, column.key))) }) }), _jsx("tbody", { children: shown.map((row, index) => (_jsx("tr", { className: "border-t border-border-soft", children: columns.map((column) => (_jsx("td", { className: clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left'), children: _jsx(Cell, { value: row[column.key], column: column, live: isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined }) }, column.key))) }, index))) })] }) }), !all && rows.length > UI_TABLE_ROWS && (_jsx(Button, { size: "xs", variant: "secondary", onClick: () => setAll(true), children: t('blocks.table.showAll', { total: formatNumber(rows.length) }) }))] }));
+}

package/dist/chat/ui/intelligent-ui/renderers/inputs.d.ts

@@ -0,0 +1,8 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiRendererProps } from '../render-context.js';
+export declare function ChecklistRenderer({ node, children, context }: UiRendererProps<UiProps<'Checklist'>>): import("react").JSX.Element;
+export declare function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>>): import("react").JSX.Element;
+export declare function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>): import("react").JSX.Element;
+export declare function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slider'>>): import("react").JSX.Element;
+export declare function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Segmented'>>): import("react").JSX.Element;
+export declare function ButtonRenderer({ node, children, context }: UiRendererProps<UiProps<'Button'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/inputs.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text.js';
+const ChecklistContext = createContext({ 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(node, context) {
+    const binding = node.bindings.value;
+    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 }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx("div", { role: "group", "aria-label": t('blocks.checklist'), className: clsx('chat-ui-nodes flex flex-col', pending && PENDING), children: children }));
+}
+export function ChecklistRenderer({ node, children, context }) {
+    const binding = bindingOf(node, context);
+    const values = binding?.value ?? node.props.value;
+    const toggle = (value) => {
+        binding?.onValueChange(values.includes(value) ? values.filter((entry) => entry !== value) : [...values, value]);
+    };
+    return (_jsx(ChecklistContext, { value: { values, enabled: binding !== null, toggle }, children: _jsx(ChecklistGroup, { pending: !node.complete, children: children }) }));
+}
+/* The whole row is the label; a link inside it keeps its own click and checks nothing. */
+export function ItemRenderer({ node, children }) {
+    const list = useContext(ChecklistContext);
+    const { value } = node.props;
+    const toggleRow = (event) => {
+        if (list.enabled && !event.target.closest('button, a')) {
+            list.toggle(value);
+        }
+    };
+    return (_jsxs("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, children: [_jsx(Checkbox, { checked: list.values.includes(value), onCheckedChange: () => list.toggle(value), label: uiNodeLabel(node), disabled: !list.enabled }), _jsx("div", { className: "min-w-0 grow", children: children })] }));
+}
+export function SwitchRenderer({ node, children, context }) {
+    const binding = bindingOf(node, context);
+    return (_jsxs("div", { className: clsx('flex min-h-7 items-center justify-between gap-3 px-2 text-sm', !node.complete && PENDING), children: [_jsx("span", { className: "min-w-0 text-text", children: children }), _jsx(Switch, { checked: binding?.value ?? node.props.value, onCheckedChange: (next) => binding?.onValueChange(next), label: uiNodeLabel(node), disabled: binding === null })] }));
+}
+/* Its children are the label, read as text: the slider writes its own label line. */
+export function SliderRenderer({ node, context }) {
+    const binding = bindingOf(node, context);
+    const { value, min, max, step, unit } = node.props;
+    return (_jsx(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 }) {
+    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 (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(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);
+                }
+            } }) }));
+}
+/* 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 }) {
+    const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Button, { variant: "secondary", size: "sm", disabled: !enabled, onClick: () => node.onAction?.(), children: children }) }));
+}

package/dist/chat/ui/intelligent-ui/renderers/links.d.ts

@@ -0,0 +1,10 @@
+import type { UiProps } from '@adecore/intelligent-ui';
+import type { UiLinkTarget, UiRenderContext, UiRendererProps } from '../render-context.js';
+export declare function UiLinkChip({ target, context }: {
+    target: UiLinkTarget;
+    context: UiRenderContext;
+}): import("react").JSX.Element;
+export declare function FileRenderer({ node, children, context }: UiRendererProps<UiProps<'File'>>): import("react").JSX.Element;
+export declare function DiffRenderer({ node, children, context }: UiRendererProps<UiProps<'Diff'>>): import("react").JSX.Element;
+export declare function CommitRenderer({ node, children, context }: UiRendererProps<UiProps<'Commit'>>): import("react").JSX.Element;
+export declare function NodeRenderer({ node, children, context }: UiRendererProps<UiProps<'Node'>>): import("react").JSX.Element;