@adecore/agents-react 0.22.0 → 0.22.1

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

@@ -115,11 +115,11 @@ function LinkRow({ target, context, described, children }: { target: UiLinkTarge
         return <UiLinkChip target={target} context={context} />;
     }
     return (
-        <div className="flex min-w-0 items-baseline gap-2 px-2 text-sm">
-            <span className="shrink-0">
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm">
+            <span className="max-w-full min-w-0">
                 <UiLinkChip target={target} context={context} />
             </span>
-            <span className="min-w-0 text-text-muted">{children}</span>
+            <span className="min-w-0 wrap-break-word text-text-muted">{children}</span>
         </div>
     );
 }

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

@@ -31,20 +31,27 @@ function isLive(context: UiRenderContext): boolean {
     return context.phase === 'streaming' || (context.live !== undefined && context.live !== null && context.live.state !== 'refused');
 }
 
+/* A badge longer than this is a sentence, which a tag cannot wrap; it stands under the title as text instead. */
+const BADGE_AS_TAG = 32;
+
 /* The head of the block when it is the first node, a subheading without an icon further down. */
 export function SummaryRenderer({ node, children }: UiRendererProps<UiProps<'Summary'>>) {
     const headId = useContext(UiHeadContext);
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
+    const tag = badge !== undefined && badge !== '' && badge.length <= BADGE_AS_TAG;
     return (
         <div className="flex items-start gap-2 px-2">
             {head && tone !== undefined && <Icon icon={UI_TONE_ICONS[tone]} size={16} className={clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone])} />}
-            <div className="min-w-0 grow text-sm font-semibold text-balance text-text">{children}</div>
-            {badge !== undefined && badge !== '' && (
-                <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]} className="shrink-0">
-                    {badge}
-                </Pill>
-            )}
+            <div className="flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1">
+                <div className="max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text">{children}</div>
+                {tag && (
+                    <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}>
+                        {badge}
+                    </Pill>
+                )}
+                {!tag && badge !== undefined && badge !== '' && <p className="w-full text-xs wrap-anywhere text-text-muted">{badge}</p>}
+            </div>
         </div>
     );
 }
@@ -117,8 +124,11 @@ export function StepRenderer({ node, children, context }: UiRendererProps<UiProp
                 )}
             </span>
             <span className="sr-only">{t(`blocks.step.${state}`)}</span>
-            <span className={clsx('min-w-0 grow', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
-            {detail !== undefined && detail !== '' && <span className="shrink-0 text-xs text-text-faint tabular-nums">{detail}</span>}
+            {/* A short detail stays beside the title; one that does not fit beside it takes the line under it. */}
+            <span className="flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2">
+                <span className={clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
+                {detail !== undefined && detail !== '' && <span className="max-w-full text-xs wrap-anywhere text-text-faint tabular-nums">{detail}</span>}
+            </span>
         </li>
     );
 }

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

@@ -21,8 +21,8 @@ export type UiTableCell =
 
 /* 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: ReadonlySet<UiColumnKind> = new Set(['number', 'bytes', 'duration']);
 
 export function isNumericColumn(column: UiTableColumn): boolean {
@@ -51,7 +51,7 @@ export function uiTableColumns(node: UiViewNode<UiProps<'Table'>>): UiTableColum
     const keys: string[] = [];
     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);
             }
         }
@@ -92,7 +92,7 @@ export function uiTableCell(value: unknown, column: UiTableColumn): UiTableCell
         }
         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/src/chat/ui/intelligent-ui/use-truncated.ts

@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react';
+
+function cut(element: HTMLElement): boolean {
+    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<T extends HTMLElement>(within = false): [(element: T | null) => (() => void) | undefined, boolean] {
+    const [truncated, setTruncated] = useState(false);
+    const measure = useCallback(
+        (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();
+            };
+        },
+        [within]
+    );
+    return [measure, truncated];
+}

package/src/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/src/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",