@adecore/agents-react 0.38.0 → 0.40.0

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

@@ -20,6 +20,7 @@ export function TabsRenderer({ node, children, context }: UiRendererProps<UiProp
     const tabs = uiChildrenOf(node, 'Tab');
     const [picked, setPicked] = useBlockLocal<string | null>(context, node.id, () => null);
     const value = picked !== null && tabs.some((tab) => tab.id === picked) ? picked : (tabs[0]?.id ?? null);
+
     return (
         <Tabs.Root value={value} onValueChange={(next) => setPicked(String(next))} className="flex flex-col gap-3">
             <Tabs.List variant="pill" overflow="scroll" className="w-fit max-w-full rounded-xl bg-ui-tile p-0.75">
@@ -44,6 +45,7 @@ export function TabRenderer({ node, children }: UiRendererProps<UiProps<'Tab'>>)
 
 export function SectionsRenderer({ node, children, context }: UiRendererProps<UiProps<'Sections'>>) {
     const [touched, setTouched] = useBlockLocal(context, node.id, () => false);
+
     return (
         <SectionsContext value={{ touched, touch: () => setTouched(true) }}>
             <div className="chat-ui-nodes flex flex-col gap-1.5">{children}</div>
@@ -56,6 +58,7 @@ export function SectionRenderer({ node, children, context }: UiRendererProps<UiP
     const fold = useContext(SectionsContext);
     const [open, setOpen] = useBlockLocal(context, node.id, () => !fold.touched);
     const contentId = useId();
+
     return (
         <section className="rounded-xl bg-ui-tile">
             <button

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

@@ -49,6 +49,7 @@ export function SummaryRenderer({ node, children }: UiRendererProps<UiProps<'Sum
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
     const shown = tone ?? 'neutral';
+
     return (
         <div className={clsx(ICON_ROW, tone === undefined ? 'bg-ui-tile' : UI_TONE_SURFACE[tone])}>
             {head && (
@@ -69,6 +70,7 @@ export function SummaryRenderer({ node, children }: UiRendererProps<UiProps<'Sum
 /* A quiet tile whatever its tone: only the square of its icon wears the tone. */
 export function CalloutRenderer({ node, children }: UiRendererProps<UiProps<'Callout'>>) {
     const { tone, title } = node.props;
+
     return (
         <div className={clsx('chat-ui-flat bg-ui-tile text-xs', ICON_ROW)}>
             <span aria-hidden className={clsx(ICON_SQUARE, UI_TONE_SURFACE[tone], UI_TONE_TEXT[tone])}>
@@ -84,6 +86,7 @@ export function CalloutRenderer({ node, children }: UiRendererProps<UiProps<'Cal
 
 export function TagRenderer({ node, children }: UiRendererProps<UiProps<'Tag'>>) {
     const { tone } = node.props;
+
     return (
         <Pill shape="tag" size="sm" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}>
             {children}
@@ -96,9 +99,12 @@ export function ProgressRenderer({ node, children, context }: UiRendererProps<Ui
     const { t } = useTranslation('agent-chat');
     const { value, max } = node.props;
     const limit = max ?? 100;
+
     const reading =
         value === undefined ? null : limit === 100 ? formatPercent(value) : t('blocks.progress.of', { value: formatNumber(value), max: formatNumber(limit) });
+
     const label = uiNodeLabel(node);
+
     return (
         <div className="chat-ui-flat flex flex-col gap-2 rounded-xl bg-ui-tile p-3">
             <div className="flex items-baseline justify-between gap-3 text-xs">
@@ -123,6 +129,7 @@ export function StepRenderer({ node, children, context }: UiRendererProps<UiProp
     const { t } = useTranslation('agent-chat');
     const { state, detail } = node.props;
     const quiet = state === 'pending' || state === 'skipped';
+
     return (
         <li className="flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs">
             <span className={clsx('mt-0.5 grid size-4 shrink-0 place-items-center', STEP_TONES[state])}>
@@ -162,6 +169,7 @@ export function EventRenderer({ node, children }: UiRendererProps<UiProps<'Event
     const label = [time, uiNodeLabel(node), tone === 'neutral' ? '' : t(`blocks.event.tone.${tone}`), detail ?? ''].filter((part) => part !== '').join(', ');
     const described = detail !== undefined && detail !== '';
     const tagged = described && detail.length <= DETAIL_AS_TAG;
+
     return (
         <li aria-label={label} className="flex min-h-9 items-start gap-3 py-2 text-xs">
             {/* A time nobody could read stays as written and is no `dateTime` for a machine to read. */}

package/src/chat/ui/intelligent-ui/reply-parts.ts

@@ -5,18 +5,23 @@ export type UiReplyPart = { kind: 'text'; text: string } | { kind: 'ui'; block:
 export function uiReplyParts(text: string, blocks: readonly UiBlock[], streaming = false): UiReplyPart[] {
     const parts: UiReplyPart[] = [];
     let position = 0;
+
     for (const block of [...blocks].sort((left, right) => left.start - right.start)) {
         if (!Number.isInteger(block.start) || !Number.isInteger(block.end) || block.start < position || block.end < block.start || block.end > text.length) {
             continue;
         }
+
         if (block.start > position) {
             parts.push({ kind: 'text', text: text.slice(position, block.start) });
         }
+
         parts.push({ kind: 'ui', block });
         position = streaming && !block.complete ? text.length : block.end;
     }
+
     if (position < text.length) {
         parts.push({ kind: 'text', text: text.slice(position) });
     }
+
     return parts;
 }

package/src/chat/ui/intelligent-ui/table-data.ts

@@ -21,6 +21,7 @@ export type UiTableCell =
 
 /* Rows shown before a person asks for all of them. */
 export const UI_TABLE_ROWS = 50;
+
 /* The furthest a JavaScript Date reaches from the epoch either way, in milliseconds. */
 const DATE_RANGE = 8.64e15;
 const NUMERIC_KINDS: ReadonlySet<UiColumnKind> = new Set(['number', 'bytes', 'duration']);
@@ -36,19 +37,27 @@ export function isNumericColumn(column: UiTableColumn): boolean {
  */
 export function uiTableColumns(node: UiViewNode<UiProps<'Table'>>): UiTableColumn[] {
     const rows = node.props.rows;
+
     const present = (key: string): boolean => rows.some((row) => Object.hasOwn(row, key));
+
     const declared = uiChildrenOf(node, 'Column');
+
     if (declared.length > 0) {
         const seen = new Set<string>();
+
         return declared.flatMap(({ props }) => {
             if (seen.has(props.key) || (rows.length > 0 && !present(props.key))) {
                 return [];
             }
+
             seen.add(props.key);
+
             return [{ key: props.key, title: props.title ?? props.key, unit: props.unit, as: props.as ?? 'text' }];
         });
     }
+
     const keys: string[] = [];
+
     for (const row of rows) {
         for (const key of Object.keys(row)) {
             if (!keys.includes(key)) {
@@ -56,9 +65,11 @@ export function uiTableColumns(node: UiViewNode<UiProps<'Table'>>): UiTableColum
             }
         }
     }
+
     return keys.map((key) => {
         const values = rows.map((row) => row[key]).filter((value) => value !== undefined && value !== null);
         const numeric = values.length > 0 && values.every((value) => typeof value === 'number' && Number.isFinite(value));
+
         return { key, title: key, as: numeric ? 'number' : 'text' };
     });
 }
@@ -71,10 +82,13 @@ function numberOf(value: unknown): number | null {
     if (typeof value === 'number') {
         return Number.isFinite(value) ? value : null;
     }
+
     if (typeof value === 'string' && value.trim() !== '') {
         const parsed = Number(value);
+
         return Number.isFinite(parsed) ? parsed : null;
     }
+
     return null;
 }
 
@@ -83,15 +97,18 @@ export function uiTableCell(value: unknown, column: UiTableColumn): UiTableCell
     if (value === undefined || value === null || value === '') {
         return { kind: 'empty' };
     }
+
     switch (column.as) {
         case 'number':
         case 'bytes':
         case 'duration': {
             const number = numberOf(value);
+
             return number === null ? { kind: 'text', text: textOf(value) } : { kind: 'number', as: column.as, value: number };
         }
         case 'date': {
             const at = typeof value === 'number' ? value : typeof value === 'string' ? Date.parse(value) : Number.NaN;
+
             return Number.isFinite(at) && Math.abs(at) <= DATE_RANGE ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
         }
         case 'file':

package/src/chat/ui/intelligent-ui/use-in-view.ts

@@ -6,13 +6,17 @@ import { useEffect, useState } from 'react';
  */
 export function useInView(element: Element | null, margin = '200px'): boolean {
     const [inView, setInView] = useState(typeof IntersectionObserver === 'undefined');
+
     useEffect(() => {
         if (element === null || typeof IntersectionObserver === 'undefined') {
             return;
         }
+
         const observer = new IntersectionObserver((entries) => setInView(entries.at(-1)?.isIntersecting ?? false), { rootMargin: margin });
         observer.observe(element);
+
         return () => observer.disconnect();
     }, [element, margin]);
+
     return inView;
 }

package/src/chat/ui/intelligent-ui/use-later.ts

@@ -3,15 +3,19 @@ import { useEffect, useState } from 'react';
 /* True once `on` has held for `ms`, for a spinner that only shows when waiting takes long. */
 export function useLater(on: boolean, ms: number): boolean {
     const [late, setLate] = useState(false);
+
     useEffect(() => {
         if (!on) {
             return;
         }
+
         const timer = setTimeout(() => setLate(true), ms);
+
         return () => {
             clearTimeout(timer);
             setLate(false);
         };
     }, [on, ms]);
+
     return on && late;
 }

package/src/chat/ui/intelligent-ui/use-truncated.ts

@@ -11,20 +11,25 @@ function cut(element: HTMLElement): boolean {
  */
 export function useTruncated<T extends HTMLElement>(within = false): [(element: T | null) => (() => void) | undefined, boolean] {
     const [truncated, setTruncated] = useState(false);
+
     const measure = (element: T | null) => {
         if (element === null || typeof ResizeObserver === 'undefined') {
             return undefined;
         }
+
         const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
+
         check();
         const resize = new ResizeObserver(check);
         resize.observe(element);
         const text = new MutationObserver(check);
         text.observe(element, { characterData: true, childList: true, subtree: true });
+
         return () => {
             resize.disconnect();
             text.disconnect();
         };
     };
+
     return [measure, truncated];
 }

package/src/chat/ui/intelligent-ui/use-ui-links.ts

@@ -26,39 +26,49 @@ export function useUiLinks(
     const host = useChatHost().intelligentUi;
     const values = uiInputValues(block, state);
     const scope = state.scope();
+
     const queryValues = Object.fromEntries(
         Object.keys(block.queries)
             .filter((name) => Object.hasOwn(scope, name))
             .map((name) => [name, scope[name]])
     );
+
     let targets: Record<string, UiLinkTarget> = {};
+
     try {
         if (block.complete) {
             targets = uiLinkTargets(block, values, queryValues);
         }
     } catch {}
+
     const signature = JSON.stringify(targets);
     const input = JSON.stringify(values);
     const tickets = JSON.stringify(reads);
     const defaultInput = JSON.stringify(uiInputValues(block, new UiState(block)));
     const link = host?.link;
+
     useEffect(() => {
         asked.current.clear();
     }, [block.id, block.revision, context.scopeId, context.chatId, context.itemId, link]);
+
     useEffect(() => {
         if (!link || !block.revision || context.phase !== 'final') {
             return;
         }
+
         let stopped = false;
+
         const validate = async () => {
             const moved = Object.entries(JSON.parse(signature) as Record<string, UiLinkTarget>)
                 .slice(0, UI_HOST_LIMITS.links)
                 .filter(([nodeId, target]) => asked.current.get(nodeId) !== JSON.stringify(target));
+
             for (const [nodeId, target] of moved) {
                 const record = (reading: ChatUiLinkReading) => {
                     asked.current.set(nodeId, JSON.stringify(target));
                     setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading } }));
                 };
+
                 try {
                     const reading = await link(context.scopeId, {
                         chatId: context.chatId,
@@ -69,51 +79,66 @@ export function useUiLinks(
                         values: JSON.parse(input),
                         reads: JSON.parse(tickets)
                     });
+
                     if (stopped) {
                         return;
                     }
+
                     record(reading);
                 } catch {
                     if (stopped) {
                         return;
                     }
+
                     record({ state: 'plain' });
                 }
             }
         };
+
         // The first check runs at once; a later one waits until the inputs rested.
         const timer = setTimeout(() => void validate(), asked.current.size === 0 ? 0 : LINK_SETTLE_MS);
+
         return () => {
             stopped = true;
             clearTimeout(timer);
         };
     }, [block.id, block.revision, context.scopeId, context.chatId, context.itemId, context.phase, signature, input, tickets, link]);
+
     const idOf = (target: UiLinkTarget) => Object.entries(targets).find(([, entry]) => JSON.stringify(entry) === JSON.stringify(target))?.[0];
+
     const resolution = (target: UiLinkTarget): ChatUiLinkReading => {
         const id = idOf(target);
+
         if (id === undefined) {
             return { state: 'plain' };
         }
+
         if (checked[id]?.target === JSON.stringify(target)) {
             return checked[id].reading;
         }
+
         if (input === defaultInput && frozen && frozen.revision === block.revision) {
             const firstQueries = Object.fromEntries(
                 Object.entries(frozen.readings)
                     .filter(([, reading]) => reading.state === 'fresh')
                     .map(([name, reading]) => [name, reading.value])
             );
+
             if (JSON.stringify(queryValues) === JSON.stringify(firstQueries)) {
                 return frozen.links?.[id] ?? { state: 'plain' };
             }
         }
+
         return { state: 'plain' };
     };
+
     const open = (target: UiLinkTarget) => {
         const nodeId = idOf(target);
+
         if (!nodeId || !link || !block.revision) {
             return;
         }
+
         void link(context.scopeId, {
             chatId: context.chatId,
             itemId: context.itemId,
@@ -125,6 +150,7 @@ export function useUiLinks(
         })
             .then((reading) => {
                 setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading } }));
+
                 if (reading.state === 'chip' && reading.target) {
                     host?.openLink?.(context.scopeId, reading);
                 }
@@ -133,8 +159,11 @@ export function useUiLinks(
                 setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading: { state: 'plain' } } }));
             });
     };
+
     const hostOpenUrl = host?.openUrl;
+
     const openUrl = (url: string) => hostOpenUrl?.(context.scopeId, url);
+
     return {
         link: link ? resolution : undefined,
         openLink: link && host?.openLink ? open : undefined,

package/src/chat/ui/intelligent-ui/use-ui-queries.ts

@@ -25,6 +25,7 @@ function successfulReading(
     if (local?.identity === identity && local.successful?.inputs === signature) {
         return local.successful.reading;
     }
+
     return signature === defaultInputs && initial?.state === 'fresh' ? initial : undefined;
 }
 
@@ -54,34 +55,45 @@ export function useUiQueries(
     const reading = busyInput === inputKey;
     const defaultInputs = useMemo(() => JSON.stringify(uiInputValues(block, new UiState(block))), [block]);
     const initial = frozen && frozen.revision === block.revision ? frozen.readings : NO_READINGS;
+
     const successfulFor = (name: string, signature: string): ChatUiQueryReading | undefined =>
         successfulReading(readings[name], initial[name], identity, signature, defaultInputs);
+
     const readsFor = (values: Readonly<Record<string, unknown>>): Record<string, string> | null => {
         const signature = JSON.stringify(values);
         const reads: Record<string, string> = {};
+
         for (const name of names) {
             const local = readings[name];
             const successful = successfulFor(name, signature);
+
             if (!successful?.readId || (local?.identity === identity && local.reading.state === 'refused')) {
                 return null;
             }
+
             reads[name] = successful.readId;
         }
+
         return reads;
     };
+
     const reads = readsFor(JSON.parse(inputs));
     const ready = reads !== null;
     const query = host.intelligentUi?.query;
     const subscribe = host.intelligentUi?.subscribe;
+
     useEffect(() => {
         const scope = state.scope();
+
         for (const name of Object.keys(block.queries)) {
             const successful = successfulReading(readings[name], initial[name], identity, inputs, defaultInputs);
+
             if (successful && JSON.stringify(scope[name]) !== JSON.stringify(successful.value)) {
                 state.setQuery(name, successful.value, block);
             }
         }
     }, [state, block, readings, identity, inputs, defaultInputs, initial]);
+
     useEffect(() => {
         if (
             !query ||
@@ -94,6 +106,7 @@ export function useUiQueries(
         ) {
             return;
         }
+
         let stopped = false;
         let visible = typeof IntersectionObserver === 'undefined';
         let busy = false;
@@ -102,33 +115,41 @@ export function useUiQueries(
         // The first read of this block reads at once; a changed input waits until it rests.
         const changed = lastRead.current.inputKey !== '' && lastRead.current.inputKey !== inputKey;
         const settledAt = changed ? settleDeadline() : 0;
+
         const refresh = async () => {
             if (stopped || !visible || !documentVisible() || busy) {
                 return;
             }
+
             const wait = Math.max(
                 settledAt - Date.now(),
                 lastRead.current.inputKey === inputKey ? UI_HOST_LIMITS.refreshMilliseconds - (Date.now() - lastRead.current.at) : 0
             );
+
             if (wait > 0) {
                 if (timer === null) {
                     if (!visible || !documentVisible()) {
                         return;
                     }
+
                     timer = setTimeout(() => {
                         timer = null;
                         void refresh();
                     }, wait);
                 }
+
                 return;
             }
+
             busy = true;
             lastRead.current = { inputKey, at: Date.now() };
             setBusyInput(inputKey);
+
             for (const name of Object.keys(block.queries).slice(0, UI_HOST_LIMITS.queries)) {
                 if (!visible || !documentVisible()) {
                     break;
                 }
+
                 try {
                     const reading = await query(context.scopeId, {
                         chatId: context.chatId,
@@ -138,12 +159,15 @@ export function useUiQueries(
                         query: name,
                         values: JSON.parse(inputs)
                     });
+
                     if (stopped) {
                         return;
                     }
+
                     if (reading.state === 'fresh') {
                         state.setQuery(name, reading.value, block);
                     }
+
                     setReadings((previous) => ({
                         ...previous,
                         [name]: {
@@ -157,6 +181,7 @@ export function useUiQueries(
                     if (stopped) {
                         return;
                     }
+
                     setReadings((previous) => ({
                         ...previous,
                         [name]: {
@@ -167,21 +192,27 @@ export function useUiQueries(
                     }));
                 }
             }
+
             busy = false;
+
             if (stopped) {
                 return;
             }
+
             setBusyInput(null);
+
             timer = setTimeout(() => {
                 timer = null;
                 void refresh();
             }, UI_HOST_LIMITS.refreshMilliseconds);
         };
+
         const observer =
             typeof IntersectionObserver === 'undefined'
                 ? null
                 : new IntersectionObserver((entries) => {
                       visible = entries.some((entry) => entry.isIntersecting);
+
                       if (visible) {
                           void refresh();
                       } else if (timer !== null) {
@@ -189,15 +220,19 @@ export function useUiQueries(
                           timer = null;
                       }
                   });
+
         if (element) {
             observer?.observe(element);
         }
+
         const focus = () => {
             void refresh();
         };
+
         document.addEventListener('visibilitychange', focus);
         const unsubscribe = subscribe?.(context.scopeId, context.chatId, focus);
         void refresh();
+
         return () => {
             stopped = true;
             // A read cut short by this cleanup never reaches its own reset, which would leave the choices closed.
@@ -205,19 +240,24 @@ export function useUiQueries(
             observer?.disconnect();
             unsubscribe?.();
             document.removeEventListener('visibilitychange', focus);
+
             if (timer !== null) {
                 clearTimeout(timer);
             }
         };
     }, [block, state, context.scopeId, context.chatId, context.itemId, context.phase, inputs, query, subscribe, element, identity, inputKey]);
+
     const currentReadings = Object.fromEntries(
         names.flatMap((name) => {
             const local = readings[name];
             const reading = local?.identity === identity ? local.reading : initial[name];
+
             return reading ? [[name, reading]] : [];
         })
     );
+
     const failed = Object.entries(currentReadings).find(([, value]) => value.state !== 'fresh');
+
     const live: UiLiveStatus | undefined = names.length
         ? {
               state: reading || (!ready && !failed) ? 'reading' : (failed?.[1].state ?? 'fresh'),
@@ -230,6 +270,7 @@ export function useUiQueries(
               code: failed?.[1].code
           }
         : undefined;
+
     return { live, reads: reads ?? {}, reading, ready, readsFor, currentReadings };
 }
 
@@ -241,16 +282,21 @@ export function useUiLiveValues(block: UiBlock, nodes: readonly UiViewNode[], re
             previous: new Map()
         }
     );
+
     const dependencies = new Map<string, Set<string>>();
     const names = new Set(Object.keys(block.queries));
+
     const references = (value: unknown, into: Set<string>) => {
         if (!value || typeof value !== 'object') {
             return;
         }
+
         const expression = value as Record<string, unknown>;
+
         if (expression.kind === 'reference' && names.has(String(expression.name))) {
             into.add(String(expression.name));
         }
+
         for (const child of Object.values(expression)) {
             if (Array.isArray(child)) {
                 child.forEach((item) => references(item, into));
@@ -259,6 +305,7 @@ export function useUiLiveValues(block: UiBlock, nodes: readonly UiViewNode[], re
             }
         }
     };
+
     const written = (nodes: readonly UiNode[], inherited = new Set<string>()) => {
         for (const node of nodes) {
             const related = new Set(inherited);
@@ -267,39 +314,52 @@ export function useUiLiveValues(block: UiBlock, nodes: readonly UiViewNode[], re
             written(node.children, node.type === 'Each' ? related : inherited);
         }
     };
+
     written(block.nodes);
     const values = new Map<string, Record<string, unknown>>();
     const sources = new Map<string, Set<string>>();
+
     const collect = (nodes: readonly UiViewNode[]) => {
         for (const node of nodes) {
             const related = dependencies.get(node.sourceId ?? node.id);
+
             if (related?.size && !node.error) {
                 values.set(node.id, node.props);
                 sources.set(node.id, related);
             }
+
             collect(node.children);
         }
     };
+
     collect(nodes);
     const token = JSON.stringify([block.revision, Object.entries(readings).map(([name, reading]) => [name, reading.state, reading.readId, reading.readAt])]);
     const previous = committed.token === token ? committed.previous : committed.values;
+
     if (committed.token !== token) {
         setCommitted({ token, values, previous });
     }
+
     if (!names.size) {
         return undefined;
     }
+
     return (id: string, prop: string, path?: readonly [number, string]): UiLiveValue | undefined => {
         const related = sources.get(id);
+
         if (!related) {
             return undefined;
         }
+
         const get = (props?: Record<string, unknown>): unknown => {
             const value = props?.[prop];
+
             return path && Array.isArray(value) ? value[path[0]]?.[path[1]] : value;
         };
+
         const before = get(previous.get(id));
         const value = get(values.get(id));
+
         return {
             previous: before,
             changed: before !== undefined && JSON.stringify(before) !== JSON.stringify(value),