@adecore/agents-react 0.22.0 → 0.22.1

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

@@ -1,8 +1,8 @@
 import { uiChildrenOf } from './node-text.js';
 /* Rows shown before a person asks for all of them. */
 export const UI_TABLE_ROWS = 50;
-/* Columns a table without Column children takes from its rows. */
-const DERIVED_COLUMNS = 8;
+/* The furthest a JavaScript Date reaches from the epoch either way, in milliseconds. */
+const DATE_RANGE = 8.64e15;
 const NUMERIC_KINDS = new Set(['number', 'bytes', 'duration']);
 export function isNumericColumn(column) {
     return NUMERIC_KINDS.has(column.as);
@@ -29,7 +29,7 @@ export function uiTableColumns(node) {
     const keys = [];
     for (const row of rows) {
         for (const key of Object.keys(row)) {
-            if (!keys.includes(key) && keys.length < DERIVED_COLUMNS) {
+            if (!keys.includes(key)) {
                 keys.push(key);
             }
         }
@@ -67,7 +67,7 @@ export function uiTableCell(value, column) {
         }
         case 'date': {
             const at = typeof value === 'number' ? value : typeof value === 'string' ? Date.parse(value) : Number.NaN;
-            return Number.isFinite(at) ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
+            return Number.isFinite(at) && Math.abs(at) <= DATE_RANGE ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
         }
         case 'file':
             return typeof value === 'string' ? { kind: 'file', path: value } : { kind: 'text', text: textOf(value) };

package/dist/chat/ui/intelligent-ui/use-truncated.d.ts

@@ -0,0 +1 @@
+export declare function useTruncated<T extends HTMLElement>(within?: boolean): [(element: T | null) => (() => void) | undefined, boolean];

package/dist/chat/ui/intelligent-ui/use-truncated.js

@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react';
+function cut(element) {
+    return element.scrollWidth > element.clientWidth + 1;
+}
+/*
+ * Whether an element's text is cut short where it stands, for a tooltip or a list of values that shows
+ * it whole exactly then. `within` asks the same of every `.truncate` element inside it instead. Measured
+ * again when the box resizes or the text changes, since neither moves the other.
+ */
+export function useTruncated(within = false) {
+    const [truncated, setTruncated] = useState(false);
+    const measure = useCallback((element) => {
+        if (element === null || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const check = () => setTruncated(within ? [...element.querySelectorAll('.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();
+        };
+    }, [within]);
+    return [measure, truncated];
+}

package/dist/locales/en/agent-chat.json

@@ -527,7 +527,13 @@
     "chart": {
       "values": "Values",
       "summary": "{{count}} values, highest {{label}} at {{value}}",
-      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}",
+      "rowsLeftOut": "The first {{shown}} of {{total}} rows are drawn.",
+      "seriesLeftOut_one": "{{series}} is not drawn.",
+      "seriesLeftOut_other": "{{series}} are not drawn.",
+      "sideBySide": "Negative values cannot be stacked, so the series stand side by side.",
+      "showValues": "Show all values",
+      "hideValues": "Hide values"
     },
     "image": {
       "label": "Image",
@@ -551,8 +557,8 @@
     "answered": "Answered with “{{label}}”",
     "chose": "Chose “{{label}}”",
     "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
-    "fixes_one": "{{count}} fix",
-    "fixes_other": "{{count}} fixes",
+    "notes_one": "{{count}} note",
+    "notes_other": "{{count}} notes",
     "shownAsText": "Shown as text",
     "unknownComponent": "This version cannot draw {{component}}",
     "renderFailed": "Could not draw this part",

package/dist/locales/nl/agent-chat.json

@@ -527,7 +527,13 @@
     "chart": {
       "values": "Waarden",
       "summary": "{{count}} waarden, hoogste {{label}} met {{value}}",
-      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}"
+      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}",
+      "rowsLeftOut": "De eerste {{shown}} van {{total}} rijen zijn getekend.",
+      "seriesLeftOut_one": "{{series}} is niet getekend.",
+      "seriesLeftOut_other": "{{series}} zijn niet getekend.",
+      "sideBySide": "Negatieve waarden kunnen niet gestapeld worden, dus de reeksen staan naast elkaar.",
+      "showValues": "Alle waarden tonen",
+      "hideValues": "Waarden verbergen"
     },
     "image": {
       "label": "Afbeelding",
@@ -551,8 +557,8 @@
     "answered": "Beantwoord met “{{label}}”",
     "chose": "Gekozen: “{{label}}”",
     "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
-    "fixes_one": "{{count}} correctie",
-    "fixes_other": "{{count}} correcties",
+    "notes_one": "{{count}} opmerking",
+    "notes_other": "{{count}} opmerkingen",
     "shownAsText": "Als tekst getoond",
     "unknownComponent": "Deze versie kan {{component}} niet tekenen",
     "renderFailed": "Dit deel kon niet getekend worden",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -639,6 +639,11 @@
       "types": "./dist/chat/ui/intelligent-ui/use-later.d.ts",
       "default": "./dist/chat/ui/intelligent-ui/use-later.js"
     },
+    "./chat/ui/intelligent-ui/use-truncated": {
+      "source": "./src/chat/ui/intelligent-ui/use-truncated.ts",
+      "types": "./dist/chat/ui/intelligent-ui/use-truncated.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/use-truncated.js"
+    },
     "./chat/ui/intelligent-ui/use-ui-links": {
       "source": "./src/chat/ui/intelligent-ui/use-ui-links.ts",
       "types": "./dist/chat/ui/intelligent-ui/use-ui-links.d.ts",
@@ -1031,8 +1036,8 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.22.0",
-    "@adecore/intelligent-ui": "0.22.0",
+    "@adecore/agent-contracts": "0.22.1",
+    "@adecore/intelligent-ui": "0.22.1",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -1053,7 +1058,7 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.22.0",
+    "@adecore/ui": "^0.22.1",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/chat/ui/intelligent-ui/UiBlockFrame.tsx

@@ -2,14 +2,14 @@ import { useId, useLayoutEffect, useRef, useState, type ReactNode, type RefObjec
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiViewNode } from '@adecore/intelligent-ui';
-import { Lock, Radio, TriangleAlert, Wrench } from 'lucide-react';
+import { Info, Lock, Radio, TriangleAlert } from 'lucide-react';
 import { Icon, Skeleton, Spinner, Tooltip, useTickingText } from '@adecore/ui';
 import { formatAgo, formatMoment } from '@adecore/ui/format';
 import { uiBlockHead, uiReasonText } from './node-text';
 import { UiHeadContext, type UiLiveStatus } from './render-context';
 import { useLater } from './use-later';
 
-/* Something the compiler repaired, such as a prop it dropped; never an error to a person. */
+/* Something the compiler noted about a block: a prop it dropped, or a part it could only draw as text. */
 export interface UiBlockFix {
     code: string;
     message: string;
@@ -82,7 +82,7 @@ function LivePart({ live }: { live: UiLiveStatus }) {
 }
 
 /*
- * The line under a block, only when it has something to say: live, answered, repaired or drawn as
+ * The line under a block, only when it has something to say: live, answered, noted or drawn as
  * text, in that order. A hairline of the soft border runs the full width of the card over it.
  */
 function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAsText = null }: UiBlockFooterProps) {
@@ -111,8 +111,8 @@ function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAs
                         className="flex items-center gap-1.5 rounded-sm hover:text-text-muted"
                         onClick={() => setFixesOpen(!fixesOpen)}
                     >
-                        <Icon icon={Wrench} size={12} />
-                        {t('blocks.fixes', { count: fixes.length })}
+                        <Icon icon={Info} size={12} />
+                        {t('blocks.notes', { count: fixes.length })}
                     </button>
                 )}
                 {shownAsText !== null && (

package/src/chat/ui/intelligent-ui/UiFallbackPart.tsx

@@ -15,7 +15,12 @@ export function UiFallbackPart({ fallback, problem }: { fallback: string; proble
             <span className="text-xs text-text-faint">
                 {problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed')}
             </span>
-            {fallback !== '' && <Markdown text={fallback} fileLinks={false} />}
+            {fallback !== '' && (
+                // A fallback is often data without a space in it, such as the JSON of a chart.
+                <div className="min-w-0 wrap-anywhere">
+                    <Markdown text={fallback} fileLinks={false} />
+                </div>
+            )}
         </div>
     );
 }

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

@@ -5,55 +5,141 @@ export const UI_CHART_SERIES = 6;
 /* Categories a chart draws; more would not fit a column of a thread. */
 export const UI_CHART_ROWS = 60;
 
+type ChartRow = UiProps<'Chart'>['data'][number];
+type ChartKind = UiProps<'Chart'>['kind'];
+
 export interface UiChartSeries {
     key: string;
     /* One per label, null where a row has no number for this series. */
     values: (number | null)[];
 }
 
-export interface UiChartData {
+/* Every row and every numeric series of a chart's data, whatever a drawing can hold. */
+export interface UiChartValues {
     labels: string[];
     series: UiChartSeries[];
+}
+
+export interface UiChartData extends UiChartValues {
+    /* What it is drawn as: stacked data with a negative value stands side by side as bars. */
+    kind: ChartKind;
     /* The range the axis covers, from zero or below it, never empty. */
     min: number;
     max: number;
     /* Whether rows past `UI_CHART_ROWS` were left out. */
     truncated: boolean;
+    /* The rows of the data, drawn or not. */
+    total: number;
+    /* The numeric series past the first six, which only the values hold. */
+    omitted: string[];
 }
 
-/*
- * The series a chart can draw: every key besides `label` with a finite number in some row, the
- * first six of them. A value that is missing or no finite number is a gap. Null when there is no
- * row or no series, which draws the fallback.
- */
-export function uiChartData(data: UiProps<'Chart'>['data'], kind: UiProps<'Chart'>['kind']): UiChartData | null {
-    const rows = data.slice(0, UI_CHART_ROWS);
+function numericKeys(rows: readonly ChartRow[]): string[] {
     const keys: string[] = [];
     for (const row of rows) {
         for (const [key, value] of Object.entries(row)) {
-            if (key !== 'label' && !keys.includes(key) && keys.length < UI_CHART_SERIES && typeof value === 'number' && Number.isFinite(value)) {
+            if (key !== 'label' && !keys.includes(key) && typeof value === 'number' && Number.isFinite(value)) {
                 keys.push(key);
             }
         }
     }
+    return keys;
+}
+
+function valuesOf(rows: readonly ChartRow[], keys: readonly string[]): UiChartValues {
+    return {
+        labels: rows.map((row) => (typeof row.label === 'string' || typeof row.label === 'number' ? String(row.label) : '')),
+        series: keys.map((key) => ({
+            key,
+            values: rows.map((row) => {
+                const value = row[key];
+                return typeof value === 'number' && Number.isFinite(value) ? value : null;
+            })
+        }))
+    };
+}
+
+/* All of a chart's numbers, for the table a person can open beside a drawing that left some out. */
+export function uiChartValues(data: UiProps<'Chart'>['data']): UiChartValues {
+    return valuesOf(data, numericKeys(data));
+}
+
+/*
+ * The rounded ends of a value axis, or null when no drawing can scale to them: the span has to be
+ * finite and above zero, and so does one over it, which rules out a subnormal span as well.
+ */
+export function uiChartRange(min: number, max: number): { low: number; high: number } | null {
+    const low = min < 0 ? -niceCeiling(-min) : 0;
+    const high = max > 0 ? niceCeiling(max) : low === 0 ? 1 : 0;
+    const span = high - low;
+    return span > 0 && Number.isFinite(span) && Number.isFinite(1 / span) ? { low, high } : null;
+}
+
+/*
+ * The series a chart can draw: every key besides `label` with a finite number in some row, the
+ * first six of them. A value that is missing or no finite number is a gap. Null when there is no
+ * row or no series, or when the numbers are too large to scale, which draws the fallback.
+ */
+export function uiChartData(data: UiProps<'Chart'>['data'], kind: ChartKind): UiChartData | null {
+    const rows = data.slice(0, UI_CHART_ROWS);
+    const keys = numericKeys(rows);
     if (rows.length === 0 || keys.length === 0) {
         return null;
     }
-    const series = keys.map((key) => ({
-        key,
-        values: rows.map((row) => {
-            const value = row[key];
-            return typeof value === 'number' && Number.isFinite(value) ? value : null;
-        })
-    }));
-    const labels = rows.map((row) => (typeof row.label === 'string' || typeof row.label === 'number' ? String(row.label) : ''));
+    const { labels, series } = valuesOf(rows, keys.slice(0, UI_CHART_SERIES));
+    const negative = series.some(({ values }) => values.some((value) => value !== null && value < 0));
+    const drawn = kind === 'stacked' && negative ? 'bar' : kind;
     const extents =
-        kind === 'stacked'
-            ? labels.map((_, index) => series.reduce((sum, { values }) => sum + Math.max(0, values[index] ?? 0), 0))
+        drawn === 'stacked'
+            ? labels.map((_, index) => series.reduce((sum, { values }) => sum + (values[index] ?? 0), 0))
             : series.flatMap(({ values }) => values.filter((value) => value !== null));
     const min = Math.min(0, ...extents);
     const max = Math.max(0, ...extents);
-    return { labels, series, min, max: max === min ? min + 1 : max, truncated: data.length > rows.length };
+    if (uiChartRange(min, max) === null) {
+        return null;
+    }
+    return {
+        labels,
+        series,
+        kind: drawn,
+        min,
+        max: max === min ? min + 1 : max,
+        truncated: data.length > rows.length,
+        total: data.length,
+        omitted: numericKeys(data).filter((key) => !series.some((drawnSeries) => drawnSeries.key === key))
+    };
+}
+
+/* The width of one character of a chart's type at a 16px root, an estimate since SVG text cannot wrap or be measured before it draws. */
+export const UI_CHART_CHARACTER = 7.5;
+/* The narrowest a value axis is, and the gap between a tick label and the plot. */
+const AXIS_WIDTH = 44;
+const AXIS_GAP = 8;
+
+/* The character width for a root font size, since chart type is set in rem and follows a person's larger text. */
+export function uiChartCharacter(rootFontSize: number): number {
+    return Number.isFinite(rootFontSize) && rootFontSize > 0 ? (UI_CHART_CHARACTER * rootFontSize) / 16 : UI_CHART_CHARACTER;
+}
+
+export function uiChartTextWidth(text: string, character = UI_CHART_CHARACTER): number {
+    return Math.ceil(text.length * character);
+}
+
+/* Text cut to the room it has, so a label never reaches past its place; the whole of it is in the values. */
+export function uiChartText(text: string, room: number, character = UI_CHART_CHARACTER): string {
+    const fit = Math.floor(room / character);
+    return text.length <= fit ? text : `${text.slice(0, Math.max(1, fit - 1))}…`;
+}
+
+/* A value axis as wide as its longest tick label, at most two fifths of the chart; a label longer than that is cut. */
+export function uiChartAxis(ticks: readonly string[], width: number, character = UI_CHART_CHARACTER): { axisWidth: number; tickTexts: string[] } {
+    const scale = character / UI_CHART_CHARACTER;
+    const room = Math.max(AXIS_WIDTH * scale, Math.floor(width * 0.4));
+    const tickTexts = ticks.map((tick) => uiChartText(tick, room - AXIS_GAP, character));
+    return {
+        axisWidth: Math.round(Math.min(room, Math.max(AXIS_WIDTH * scale, ...tickTexts.map((text) => uiChartTextWidth(text, character) + AXIS_GAP)))),
+        tickTexts
+    };
 }
 
 /* A round number at or above `value`, for the top of an axis: 1, 2, 2.5 or 5 times a power of ten. */