@adecore/agents-react 0.28.0 → 0.29.1

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

@@ -18,10 +18,18 @@ const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
 
 /* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
 export function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>>) {
+    const { language } = node.props;
     return (
-        <CodeStreamingContext.Provider value={!node.complete}>
-            <CodeBlock code={uiNodeText(node).replace(/^\n|\n$/g, '')} lang={node.props.language ?? 'text'} />
-        </CodeStreamingContext.Provider>
+        <div className="chat-ui-code chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5">
+            {language !== undefined && language !== '' && (
+                <div className="chat-ui-flat-inner flex px-1.5 pt-0.5 pb-1.5">
+                    <span className="rounded-md bg-ui-inset px-1.5 font-mono text-2xs text-text shadow-[inset_0_0_0_1px_var(--border)]">{language}</span>
+                </div>
+            )}
+            <CodeStreamingContext.Provider value={!node.complete}>
+                <CodeBlock code={uiNodeText(node).replace(/^\n|\n$/g, '')} lang={language ?? 'text'} />
+            </CodeStreamingContext.Provider>
+        </div>
     );
 }
 
@@ -50,7 +58,7 @@ function AttachedImage({
     const host = useChatHost();
     const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
     if (!cell) {
-        return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full object-contain" />;
+        return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full rounded-xl object-contain" />;
     }
     return (
         <>
@@ -77,7 +85,7 @@ export function ImageRenderer({ node, children, context }: UiRendererProps<UiPro
             ) : (
                 <AttachedImage scopeId={context.scopeId} chatId={context.chatId} attachmentId={attachment} alt={name} cell={cell} unnamed={caption === ''} />
             )}
-            {caption !== '' && <figcaption className={cell ? 'text-xs wrap-anywhere text-text-muted' : 'px-2 text-xs text-text-muted'}>{children}</figcaption>}
+            {caption !== '' && <figcaption className="px-0.5 text-2xs wrap-anywhere text-text-muted">{children}</figcaption>}
             {cell && caption === '' && attachment === undefined && (
                 <figcaption className="text-xs wrap-anywhere text-text-faint">{alt ?? t('blocks.image.unavailable')}</figcaption>
             )}
@@ -90,7 +98,7 @@ export function GalleryRenderer({ node, children }: UiRendererProps<UiProps<'Gal
     const { t } = useTranslation('agent-chat');
     return (
         <GalleryContext value>
-            <div role="group" aria-label={t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length })} className="@container px-2">
+            <div role="group" aria-label={t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length })} className="@container">
                 <div className="chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3">{children}</div>
             </div>
         </GalleryContext>
@@ -129,7 +137,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
         body = (
             // The frame keeps the picture's shape inside its tallest height: past it the width follows, so a portrait picture is not letterboxed.
             <div
-                className="relative max-h-96 overflow-hidden rounded-lg border border-border bg-surface-sunken"
+                className="relative max-h-96 overflow-hidden rounded-xl bg-ui-tile"
                 style={{ aspectRatio: aspect, width: `min(100%, ${COMPARE_MAX_HEIGHT * aspect}px)` }}
             >
                 <Wipe
@@ -163,14 +171,14 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
         body = (
             <>
                 <ImageThumb source={shown.source} alt={shown.name} className="max-h-70 max-w-full object-contain" />
-                <span className="px-2 text-xs text-text-faint">{t('blocks.compare.missing')}</span>
+                <span className="text-2xs text-text-faint">{t('blocks.compare.missing')}</span>
             </>
         );
     }
     return (
-        <figure className="flex flex-col items-start gap-1.5 px-2">
+        <figure className="flex w-full flex-col items-start gap-1.5">
             {body}
-            {caption !== '' && <figcaption className="text-xs text-text-muted">{children}</figcaption>}
+            {caption !== '' && <figcaption className="px-0.5 text-2xs text-text-muted">{children}</figcaption>}
         </figure>
     );
 }
@@ -204,7 +212,7 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
     let body: ReactNode;
     if (View !== undefined && source.url !== null) {
         body = (
-            <div role="group" aria-label={label} className="relative h-80 w-full overflow-hidden rounded-lg border border-border bg-surface-sunken">
+            <div role="group" aria-label={label} className="relative h-80 w-full overflow-hidden rounded-xl bg-ui-tile">
                 <ErrorBoundary label={t('blocks.model.crashed')} resetKeys={[attachment, source.url]} compact>
                     <View
                         scopeId={context.scopeId}
@@ -219,10 +227,10 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
             </div>
         );
     } else if (View !== undefined && source.failure === null) {
-        body = <div aria-busy="true" aria-label={label} className="h-80 w-full rounded-lg border border-border bg-surface-sunken" />;
+        body = <div aria-busy="true" aria-label={label} className="h-80 w-full rounded-xl bg-ui-tile" />;
     } else {
         body = (
-            <div className="flex w-full min-w-0 items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs">
+            <div className="flex w-full min-w-0 items-center gap-2 rounded-xl bg-ui-tile px-3 py-2 text-xs">
                 <Icon icon={Box} size={14} className="shrink-0 text-text-muted" />
                 <span className="min-w-0 truncate text-text">{alt ?? attachment}</span>
                 <span className="ml-auto shrink-0 text-text-faint">{source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable')}</span>
@@ -230,9 +238,9 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
         );
     }
     return (
-        <figure className="flex flex-col items-start gap-1.5 px-2">
+        <figure className="flex w-full flex-col items-start gap-1.5">
             {body}
-            {caption !== '' && <figcaption className="text-xs text-text-muted">{children}</figcaption>}
+            {caption !== '' && <figcaption className="px-0.5 text-2xs text-text-muted">{children}</figcaption>}
         </figure>
     );
 }
@@ -243,8 +251,8 @@ export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sou
     const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
     return (
         <SourceNumbers value={numbers}>
-            <section aria-labelledby={headingId} className="flex flex-col">
-                <span id={headingId} className="px-2 pb-1 text-xs font-medium text-text-muted">
+            <section aria-labelledby={headingId} className="chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5">
+                <span id={headingId} className="chat-ui-flat-inner px-1.5 pt-0.5 pb-1 text-2xs font-medium text-text-muted">
                     {t('blocks.sources')}
                 </span>
                 <ol className="chat-ui-nodes flex flex-col">{children}</ol>
@@ -305,10 +313,12 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
     const [measureDomain, domainCut] = useTruncated<HTMLSpanElement>();
     const face = (
         <>
-            <span className="w-5 shrink-0 self-start text-right text-text-faint tabular-nums">{number}</span>
-            <span className="min-w-0 grow wrap-anywhere text-text">{title}</span>
-            <span ref={measureDomain} className="max-w-1/2 min-w-0 shrink-0 self-start truncate text-text-faint">
-                {uiUrlDomain(url)}
+            <span className="grid size-5 shrink-0 place-items-center rounded-md bg-ui-inset text-2xs font-semibold text-text tabular-nums">{number}</span>
+            <span className="flex min-w-0 grow flex-col">
+                <span className="font-medium wrap-anywhere text-text">{title}</span>
+                <span ref={measureDomain} className="truncate text-text-muted">
+                    {uiUrlDomain(url)}
+                </span>
             </span>
         </>
     );
@@ -324,13 +334,16 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
                 }
             >
                 {openUrl === undefined ? (
-                    <span tabIndex={domainCut ? 0 : undefined} className="flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs">
+                    <span
+                        tabIndex={domainCut ? 0 : undefined}
+                        className="chat-ui-flat-inner flex min-h-8 items-start gap-2.5 rounded-lg px-1.5 py-1.5 text-2xs"
+                    >
                         {face}
                     </span>
                 ) : (
                     <button
                         type="button"
-                        className="flex min-h-8 w-full items-start gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-surface-hover"
+                        className="chat-ui-flat-inner flex min-h-8 w-full items-start gap-2.5 rounded-lg px-1.5 py-1.5 text-left text-2xs hover:bg-text/4"
                         onClick={() => openUrl(url)}
                     >
                         {face}

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

@@ -1,19 +1,25 @@
+import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
-import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
+import { Button, Icon, KeyValueList, Pill, Tooltip } from '@adecore/ui';
 import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
 import { useBlockLocal } from '../block-local';
 import { uiChildrenOf, uiWithUnit } from '../node-text';
 import type { UiLiveValue, UiRendererProps } from '../render-context';
 import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns, type UiTableCell, type UiTableColumn } from '../table-data';
-import { UI_TONE_TEXT } from '../tones';
+import { UI_TONE_PILL } from '../tones';
 import { UiFallbackPart } from '../UiFallbackPart';
 
 /* EntityList draws a hairline between its rows from this many on. */
 const DIVIDED_FROM = 7;
 
+/* Up to this many entries an EntityList is a row of tiles; a longer one is a list in one tile. */
+const TILED_UP_TO = 4;
+
+const EntityTiles = createContext(false);
+
 /*
  * 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.
@@ -31,7 +37,7 @@ export function StatsRenderer({ children }: UiRendererProps<UiProps<'Stats'>>) {
     return <div className="chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-2">{children}</div>;
 }
 
-/* The arrow and the number say which way a value went; only a tone says whether that is good. */
+/* The arrow and the number say which way a value went; only a tone says whether that is good. The tag says the change, its tooltip from what. */
 export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>) {
     const { t } = useTranslation('agent-chat');
     const { label, value, previous, unit, tone } = node.props;
@@ -41,36 +47,63 @@ export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>
     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));
+    const said = percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from });
     return (
-        <div className="flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5">
-            <span className="truncate text-xs text-text-muted">{label}</span>
+        <div className="flex min-w-0 flex-col items-start gap-1.5 rounded-xl bg-ui-tile p-3">
+            <span className="max-w-full truncate text-2xs text-text-muted">{label}</span>
             <LiveFigure
                 text={uiWithUnit(formatRounded(value, 2), unit)}
                 previous={typeof live?.previous === 'number' ? uiWithUnit(formatRounded(live.previous, 2), unit) : undefined}
                 live={live}
-                className="text-lg font-semibold tabular-nums"
+                className="max-w-full truncate text-lg font-semibold tabular-nums"
             />
             {change !== null && (
-                <span className={clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone])}>
-                    <Icon icon={arrow} size={12} className="shrink-0" />
-                    <span className="min-w-0 truncate">
-                        {percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from })}
+                <Tooltip label={said}>
+                    <span tabIndex={0} className="max-w-full rounded-md">
+                        <Pill
+                            shape="tag"
+                            size="sm"
+                            tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}
+                            icon={<Icon icon={arrow} size={12} className="shrink-0" />}
+                        >
+                            <span aria-hidden className="tabular-nums">
+                                {percent ?? from}
+                            </span>
+                            <span className="sr-only">{said}</span>
+                        </Pill>
                     </span>
-                </span>
+                </Tooltip>
             )}
         </div>
     );
 }
 
 export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'EntityList'>>) {
+    const count = uiChildrenOf(node, 'Entry').length;
+    if (count <= TILED_UP_TO) {
+        return (
+            <EntityTiles value>
+                <div className="chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-2">{children}</div>
+            </EntityTiles>
+        );
+    }
     return (
-        <KeyValueList.Root divided={uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM} className="chat-ui-nodes px-2">
+        <KeyValueList.Root divided={count >= DIVIDED_FROM} className="chat-ui-nodes chat-ui-flat rounded-xl bg-ui-tile px-3 py-2">
             {children}
         </KeyValueList.Root>
     );
 }
 
 export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry'>>) {
+    const tiled = useContext(EntityTiles);
+    if (tiled) {
+        return (
+            <div className="flex min-w-0 flex-col gap-0.5 rounded-xl bg-ui-tile px-3 py-2">
+                <span className="truncate text-2xs text-text-muted">{node.props.label}</span>
+                <span className="text-2xs font-semibold wrap-break-word text-text">{children}</span>
+            </div>
+        );
+    }
     return (
         <KeyValueList.Item>
             <KeyValueList.Name>{node.props.label}</KeyValueList.Name>
@@ -129,19 +162,23 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
     const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
     return (
         <div className="flex flex-col items-start gap-1.5">
-            <div className="max-h-80 w-full overflow-auto rounded-md border border-border-soft">
+            <div className="chat-ui-flat max-h-80 w-full overflow-auto rounded-xl bg-ui-tile px-1.5 pb-1.5">
                 <table
                     aria-label={t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') })}
-                    className="w-full border-collapse text-xs tabular-nums"
+                    className={clsx(
+                        'w-full border-separate border-spacing-0 text-xs tabular-nums',
+                        '[&_tbody_tr:first-child_td:first-child]:rounded-tl-lg [&_tbody_tr:first-child_td:last-child]:rounded-tr-lg',
+                        '[&_tbody_tr:last-child_td:first-child]:rounded-bl-lg [&_tbody_tr:last-child_td:last-child]:rounded-br-lg'
+                    )}
                 >
-                    <thead className="sticky top-0 z-1 bg-surface-hover">
+                    <thead className="sticky top-0 z-1 bg-ui-tile">
                         <tr>
                             {columns.map((column) => (
                                 <th
                                     key={column.key}
                                     scope="col"
                                     className={clsx(
-                                        'h-8 px-2 font-medium whitespace-nowrap text-text-muted',
+                                        'h-8 px-2 text-2xs font-medium whitespace-nowrap text-text-muted',
                                         isNumericColumn(column) ? 'text-right' : 'text-left'
                                     )}
                                 >
@@ -153,11 +190,16 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
                     <tbody>
                         {shown.map((row, index) => (
                             // Rows only ever grow at the end while a block streams, so the place of a row is a stable key.
-                            <tr key={index} className="border-t border-border-soft">
-                                {columns.map((column) => (
+                            <tr key={index}>
+                                {columns.map((column, at) => (
                                     <td
                                         key={column.key}
-                                        className={clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left')}
+                                        className={clsx(
+                                            'h-9 bg-ui-inset px-2 text-text',
+                                            index > 0 && 'border-t border-border-soft',
+                                            at === 0 && 'font-medium',
+                                            isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left'
+                                        )}
                                     >
                                         <Cell
                                             value={row[column.key]}

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

@@ -23,7 +23,7 @@ const ChecklistContext = createContext<ChecklistState>({ values: [], enabled: fa
 function ChecklistGroup({ pending, children }: { pending: boolean; children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
     return (
-        <div role="group" aria-label={t('blocks.checklist')} className={clsx('chat-ui-nodes flex flex-col', pending && PENDING)}>
+        <div role="group" aria-label={t('blocks.checklist')} className={clsx('chat-ui-nodes flex flex-col gap-1.5', pending && PENDING)}>
             {children}
         </div>
     );
@@ -42,10 +42,11 @@ export function ChecklistRenderer({ node, children, context }: UiRendererProps<U
     );
 }
 
-/* The whole row is the label; a link inside it keeps its own click and checks nothing. */
+/* The whole tile is the label, ringed in the accent while checked; a link inside it keeps its own click and checks nothing. */
 export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>>) {
     const list = useContext(ChecklistContext);
     const { value } = node.props;
+    const checked = list.values.includes(value);
     const toggleRow = (event: MouseEvent<HTMLDivElement>): void => {
         if (list.enabled && !(event.target as Element).closest('button, a')) {
             list.toggle(value);
@@ -53,10 +54,14 @@ export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>
     };
     return (
         <div
-            className={clsx('flex min-h-8 items-center gap-2 rounded-md px-2 text-sm text-text', list.enabled && 'hover:bg-surface-hover')}
+            className={clsx(
+                'flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs text-text',
+                checked && 'ring-2 ring-accent ring-inset',
+                list.enabled && 'hover:bg-surface-active'
+            )}
             onClick={toggleRow}
         >
-            <Checkbox checked={list.values.includes(value)} onCheckedChange={() => list.toggle(value)} label={uiNodeLabel(node)} disabled={!list.enabled} />
+            <Checkbox className="mt-0.5" checked={checked} onCheckedChange={() => list.toggle(value)} label={uiNodeLabel(node)} disabled={!list.enabled} />
             <div className="min-w-0 grow">{children}</div>
         </div>
     );
@@ -65,8 +70,10 @@ export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>
 export function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>) {
     const binding = bindingOf(node, context);
     return (
-        <div className={clsx('flex min-h-7 items-center justify-between gap-3 px-2 text-sm', !node.complete && PENDING)}>
-            <span className="min-w-0 text-text">{children}</span>
+        <div
+            className={clsx('chat-ui-flat flex min-h-11 items-center justify-between gap-3 rounded-xl bg-ui-tile px-3 py-2 text-xs', !node.complete && PENDING)}
+        >
+            <span className="min-w-0 font-medium text-text">{children}</span>
             <Switch
                 checked={binding?.value ?? node.props.value}
                 onCheckedChange={(next) => binding?.onValueChange(next)}
@@ -92,7 +99,7 @@ export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slide
             unit={uiWithUnit('', unit)}
             label={uiNodeLabel(node)}
             disabled={binding === null}
-            className={clsx('px-2', !node.complete && PENDING)}
+            className={clsx('chat-ui-flat rounded-xl bg-ui-tile p-3', !node.complete && PENDING)}
         />
     );
 }
@@ -108,7 +115,7 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const picked = options.find((option) => option.value === current)?.id ?? '';
     return (
-        <div className={clsx('px-2', !node.complete && PENDING)}>
+        <div className={clsx(!node.complete && PENDING)}>
             <Segmented
                 value={picked}
                 options={options}
@@ -145,8 +152,8 @@ export function TextFieldRenderer({ node, children, context }: UiRendererProps<U
     const countId = `${id}-count`;
     const counting = value.length >= maxLength * COUNT_FROM;
     return (
-        <div className={clsx('flex flex-col gap-1 px-2', !node.complete && PENDING)}>
-            <label htmlFor={id} className="text-sm text-text-muted">
+        <div className={clsx('flex flex-col gap-1.5', !node.complete && PENDING)}>
+            <label htmlFor={id} className="px-0.5 text-2xs text-text-muted">
                 {children}
             </label>
             <Input
@@ -157,7 +164,7 @@ export function TextFieldRenderer({ node, children, context }: UiRendererProps<U
                 placeholder={placeholder}
                 disabled={binding === null}
                 aria-describedby={counting ? countId : undefined}
-                className="max-w-96 bg-surface-sunken"
+                className="border-transparent bg-ui-tile"
                 onChange={(event) => binding?.onValueChange(event.target.value)}
             />
             {counting && (
@@ -180,8 +187,8 @@ export function SelectRenderer({ node, context }: UiRendererProps<UiProps<'Selec
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const label = uiOwnLabel(node);
     return (
-        <div className={clsx('flex flex-col items-start gap-1 px-2', !node.complete && PENDING)}>
-            {label !== '' && <span className="text-sm text-text-muted">{label}</span>}
+        <div className={clsx('flex flex-col items-start gap-1.5', !node.complete && PENDING)}>
+            {label !== '' && <span className="px-0.5 text-2xs text-text-muted">{label}</span>}
             <Select
                 value={options.find((option) => option.value === current)?.id ?? null}
                 items={options.map((option) => ({ value: option.id, label: option.label }))}
@@ -204,7 +211,7 @@ export function ButtonRenderer({ node, children, context }: UiRendererProps<UiPr
     const label = uiNodeLabel(node);
     const [measure, truncated] = useTruncated<HTMLSpanElement>();
     return (
-        <div className={clsx('px-2', !node.complete && PENDING)}>
+        <div className={clsx(!node.complete && PENDING)}>
             <Tooltip label={label} disabled={!truncated}>
                 <Button variant="secondary" size="sm" className="max-w-full" disabled={!enabled} onClick={() => node.onAction?.()}>
                     <span ref={measure} className="min-w-0 truncate">

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

@@ -4,12 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { FileDiff, GitCommitHorizontal, SquareDashed } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
 import { FileIcon, Icon, Tooltip } from '@adecore/ui';
-import { CHIP_IN_MESSAGE, MENTION_TONE } from '../../chips';
+import { CHIP_IN_MESSAGE } from '../../chips';
 import { uiReasonText } from '../node-text';
 import type { UiLink, UiLinkTarget, UiRenderContext, UiRendererProps } from '../render-context';
 
 const PLAIN: UiLink = { state: 'plain' };
 
+/* A link in a block is a quiet card on its tile, unlike a mention in a message, which wears the accent. */
+const UI_CHIP = 'bg-ui-inset font-mono text-text shadow-[inset_0_0_0_1px_var(--border)]';
+
 function baseName(path: string): string {
     const trimmed = path.replace(/\/+$/, '');
     return trimmed.slice(trimmed.lastIndexOf('/') + 1) || path;
@@ -96,11 +99,11 @@ export function UiLinkChip({ target, context }: { target: UiLinkTarget; context:
     const { openLink } = context;
     const chip =
         openLink === undefined ? (
-            <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 starting:opacity-0')}>{face}</span>
+            <span className={clsx(CHIP_IN_MESSAGE, UI_CHIP, 'transition-opacity duration-120 starting:opacity-0')}>{face}</span>
         ) : (
             <button
                 type="button"
-                className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 hover:brightness-95 starting:opacity-0')}
+                className={clsx(CHIP_IN_MESSAGE, UI_CHIP, 'transition-opacity duration-120 hover:bg-surface-hover starting:opacity-0')}
                 onClick={() => openLink(target)}
             >
                 {face}
@@ -115,7 +118,7 @@ function LinkRow({ target, context, described, children }: { target: UiLinkTarge
         return <UiLinkChip target={target} context={context} />;
     }
     return (
-        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm">
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 text-xs">
             <span className="max-w-full min-w-0">
                 <UiLinkChip target={target} context={context} />
             </span>

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

@@ -34,8 +34,8 @@ function NumberChip({ number, selected }: { number: number; selected: boolean })
         <span
             aria-hidden
             className={clsx(
-                'mt-px flex size-5 shrink-0 items-center justify-center rounded-full text-xs tabular-nums',
-                selected ? 'bg-accent text-accent-text' : 'bg-map-marker text-map-marker-text'
+                'mt-px flex size-5 shrink-0 items-center justify-center rounded-md text-2xs font-semibold tabular-nums',
+                selected ? 'bg-accent text-accent-text' : 'bg-ui-inset text-text'
             )}
         >
             {number}
@@ -50,7 +50,7 @@ function PlaceRow({ listed, number, selected, onPick }: { listed: ListedPlace; n
         <>
             <NumberChip number={number} selected={selected} />
             <span className="flex min-w-0 grow flex-col gap-0.5">
-                <span className="text-sm wrap-break-word text-text">{listed.name}</span>
+                <span className="text-xs font-medium wrap-break-word text-text">{listed.name}</span>
                 {detail !== undefined && detail !== '' && <span className="text-xs wrap-break-word text-text-muted">{detail}</span>}
                 {address !== undefined && address !== '' && <span className="text-xs wrap-break-word text-text-faint">{address}</span>}
                 {listed.point === undefined && <span className="text-xs text-text-faint">{t('blocks.map.lookingUp')}</span>}
@@ -58,13 +58,18 @@ function PlaceRow({ listed, number, selected, onPick }: { listed: ListedPlace; n
             </span>
         </>
     );
-    const row = 'flex w-full min-h-8 items-start gap-2 rounded-md px-2 py-1.5 text-left';
+    const row = 'flex h-full w-full min-h-12 items-start gap-2.5 rounded-xl bg-ui-tile px-3 py-2 text-left';
     return (
         <li>
             {onPick === null ? (
-                <div className={clsx(row, selected && 'bg-surface-hover')}>{body}</div>
+                <div className={clsx(row, selected && 'ring-2 ring-accent ring-inset')}>{body}</div>
             ) : (
-                <button type="button" aria-pressed={selected} className={clsx(row, 'hover:bg-surface-hover', selected && 'bg-surface-hover')} onClick={onPick}>
+                <button
+                    type="button"
+                    aria-pressed={selected}
+                    className={clsx(row, 'hover:bg-surface-active', selected && 'ring-2 ring-accent ring-inset')}
+                    onClick={onPick}
+                >
                     {body}
                 </button>
             )}
@@ -150,7 +155,7 @@ function MapFrame({ markers, source, selected, onPick }: FrameProps) {
     }
     return (
         <>
-            <div ref={setElement} className="relative h-50 overflow-hidden rounded-lg border border-border bg-surface-sunken @min-[420px]:h-60">
+            <div ref={setElement} className="relative h-50 overflow-hidden rounded-xl bg-ui-tile @min-[420px]:h-60">
                 {body}
                 {waiting && (
                     <div className="pointer-events-none absolute inset-0 grid place-items-center">
@@ -200,9 +205,9 @@ export function MapRenderer({ node, children, context }: UiRendererProps<UiProps
         <MapFrame markers={markers} source={null} selected={selectedId} onPick={onPick} />
     );
     return (
-        <div className={clsx('@container flex flex-col gap-1.5 px-2', !node.complete && PENDING)}>
+        <div className={clsx('@container flex flex-col gap-1.5', !node.complete && PENDING)}>
             {frame}
-            <ol aria-label={t('blocks.map.label', { count: places.length })} className="flex flex-col">
+            <ol aria-label={t('blocks.map.label', { count: places.length })} className="grid gap-1.5 @min-[420px]:grid-cols-2">
                 {places.map((listed, index) => {
                     const { value } = listed.node.props;
                     return (
@@ -216,9 +221,7 @@ export function MapRenderer({ node, children, context }: UiRendererProps<UiProps
                     );
                 })}
             </ol>
-            {node.omitted !== undefined && node.omitted > 0 && (
-                <p className="px-2 text-xs text-text-faint">{t('blocks.map.omitted', { count: node.omitted })}</p>
-            )}
+            {node.omitted !== undefined && node.omitted > 0 && <p className="text-2xs text-text-faint">{t('blocks.map.omitted', { count: node.omitted })}</p>}
             {/* A place the catalog refused draws as its text, which is all its node renders. */}
             <div className="chat-ui-nodes flex flex-col gap-1.5 empty:hidden">{children}</div>
         </div>

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

@@ -22,7 +22,7 @@ export function TabsRenderer({ node, children, context }: UiRendererProps<UiProp
     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 className="px-2">
+            <Tabs.List variant="pill" overflow="scroll" className="w-fit max-w-full rounded-xl bg-ui-tile p-0.75">
                 {tabs.map((tab) => (
                     <Tabs.Tab key={tab.id} value={tab.id} data-ui-reveal={tab.id}>
                         {tab.props.title}
@@ -46,24 +46,24 @@ export function SectionsRenderer({ node, children, context }: UiRendererProps<Ui
     const [touched, setTouched] = useBlockLocal(context, node.id, () => false);
     return (
         <SectionsContext value={{ touched, touch: () => setTouched(true) }}>
-            <div className="chat-ui-nodes flex flex-col divide-y divide-border-soft">{children}</div>
+            <div className="chat-ui-nodes flex flex-col gap-1.5">{children}</div>
         </SectionsContext>
     );
 }
 
-/* Arrives open until the person folds a section of the set themselves; the content starts under the title. */
+/* Arrives open until the person folds a section of the set themselves; the content keeps one margin on both sides. */
 export function SectionRenderer({ node, children, context }: UiRendererProps<UiProps<'Section'>>) {
     const fold = useContext(SectionsContext);
     const [open, setOpen] = useBlockLocal(context, node.id, () => !fold.touched);
     const contentId = useId();
     return (
-        <section>
+        <section className="rounded-xl bg-ui-tile">
             <button
                 type="button"
                 data-ui-reveal={node.id}
                 aria-expanded={open}
                 aria-controls={contentId}
-                className="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm font-medium text-text hover:bg-surface-hover"
+                className="flex min-h-10 w-full items-center gap-2 rounded-xl px-3 text-left text-xs font-medium text-text hover:bg-text/4"
                 onClick={() => {
                     fold.touch();
                     setOpen(!open);
@@ -76,7 +76,7 @@ export function SectionRenderer({ node, children, context }: UiRendererProps<UiP
                 />
                 <span className="min-w-0 truncate">{node.props.title}</span>
             </button>
-            <div id={contentId} hidden={!open} className="chat-ui-nodes flex flex-col gap-3 pt-1 pr-2 pb-2 pl-7.5">
+            <div id={contentId} hidden={!open} className="chat-ui-section-body chat-ui-nodes flex flex-col gap-3 px-3 pb-3">
                 {children}
             </div>
         </section>