@adecore/agents-react 0.20.1 → 0.21.0

package/src/chat/ui/rows/SubagentRow.tsx

@@ -9,6 +9,8 @@ import { Icon, useNow } from '@adecore/ui';
 import { useOpenForFind } from '../find-reveal';
 import { Markdown } from '../Markdown';
 import { TaskRow } from './TaskRow';
+import { isImageGeneration } from '../../logic/generated-image';
+import { GeneratedImageRow } from './GeneratedImageRow';
 import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list';
 import { useSubagentSupport } from '../../subagent-support';
@@ -27,6 +29,9 @@ const CHILDREN_MAX_PX = 320;
  */
 function ChildRow({ chatId, item }: { chatId: string; item: ChatItem }) {
     if (item.kind === 'tool') {
+        if (isImageGeneration(item)) {
+            return <GeneratedImageRow chatId={chatId} tool={item} />;
+        }
         return item.state === 'running' ? <WorkLiveRow chatId={chatId} tool={item} /> : <WorkRow tool={item} />;
     }
     if (item.kind === 'assistant') {

package/src/chat/ui/rows/WorkRows.tsx

@@ -114,8 +114,23 @@ function ToolBody({ tool }: { tool: ChatToolItem }) {
 }
 
 /* One settled tool call: a line, and its input and output behind it. An image the call looked at
-   is drawn under the line, because a picture says more about that read than its path does. */
-export function WorkRow({ tool, nested, detail }: { tool: ChatToolItem; nested?: boolean; detail?: string }) {
+   is drawn under the line, because a picture says more about that read than its path does.
+   `icon`, `label` and `failed` let a row that knows the call better name it in its own words. */
+export function WorkRow({
+    tool,
+    nested,
+    detail,
+    icon,
+    label,
+    failed
+}: {
+    tool: ChatToolItem;
+    nested?: boolean;
+    detail?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    failed?: boolean;
+}) {
     const [open, setOpen] = useState(false);
     const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
     const { ReadImage } = chatHost();
@@ -123,12 +138,12 @@ export function WorkRow({ tool, nested, detail }: { tool: ChatToolItem; nested?:
     return (
         <div data-find-item={tool.id} className={nested ? 'ml-6' : undefined}>
             <ToggleLine
-                icon={toolIcon(tool.name)}
-                label={tool.name}
+                icon={icon ?? toolIcon(tool.name)}
+                label={label ?? tool.name}
                 detail={detail ?? toolSummary(tool.name, tool.input)}
                 open={open}
                 onToggle={() => setOpen((o) => !o)}
-                failed={tool.state === 'error'}
+                failed={failed ?? tool.state === 'error'}
             />
             {image !== null && ReadImage !== null && <ReadImage path={image} />}
             {open && <ToolBody tool={tool} />}

package/src/host.ts

@@ -2,7 +2,18 @@ import type { ComponentProps, ComponentType, ReactNode, RefObject } from 'react'
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { ThemeRegistration } from 'shiki';
-import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import type {
+    AgentKind,
+    ChatCheckpointDiff,
+    ChatConfigurePayload,
+    ChatItem,
+    ChatSubagentItem,
+    ChatUiChoicePayload,
+    ChatUiQueryPayload,
+    ChatUiQueryReading,
+    ChatUiLinkPayload,
+    ChatUiLinkReading
+} from '@adecore/agent-contracts';
 import { isApplePlatform } from '@adecore/ui';
 import type { TimelineRow } from './chat/logic/timeline';
 import type { FindReveal } from './chat/ui/find-reveal';
@@ -189,6 +200,14 @@ export interface ReplyAuthor {
  */
 export interface ChatHost {
     storage?: ChatStorageOptions;
+    intelligentUi?: {
+        subscribe?(scopeId: string, chatId: string, changed: () => void): () => void;
+        link?(scopeId: string, payload: ChatUiLinkPayload): Promise<ChatUiLinkReading>;
+        openLink?(scopeId: string, reading: ChatUiLinkReading): void;
+        openUrl?(scopeId: string, url: string): void;
+        query?(scopeId: string, payload: ChatUiQueryPayload): Promise<ChatUiQueryReading>;
+        sendChoice(scopeId: string, payload: ChatUiChoicePayload): Promise<'sent' | 'queued'>;
+    };
     /* The colors an account may wear in the order a picker offers them, the few it shows first, and their names. */
     accents: {
         all: readonly AccentChoice[];
@@ -209,6 +228,13 @@ export interface ChatHost {
     attachments: {
         useUrl(scopeId: string, chatId: string, attachmentId: string): ResourceUrl;
         read(scopeId: string, chatId: string, attachmentId: string): Promise<Blob>;
+        /* Opens the file outside the chat, such as in the system's own app or as a download named `suggestedName`; left out, a generated image offers no Open. */
+        open?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): void;
+        /*
+         * Saves a copy into the folder the chat works for, through the host's own dialog, which also shows a failure.
+         * Resolves with the path as a file link opens it, or null when the person cancels; left out, a generated image offers no Save.
+         */
+        saveToProject?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): Promise<string | null>;
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;

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

@@ -435,6 +435,25 @@
     "zoomOut": "Zoom out",
     "reset": "Reset"
   },
+  "generatedImage": {
+    "label": "Generated image",
+    "generating": "Generating image",
+    "failed": "Image generation failed",
+    "empty": "The image came back empty",
+    "notImage": "The result is not an image",
+    "tooLarge": "The image is larger than {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparent",
+    "actions": "Image actions",
+    "more": "More actions",
+    "copyPrompt": "Copy prompt",
+    "open": "Open",
+    "openLarge": "Open large",
+    "save": "Save to project…",
+    "saved": "Saved",
+    "savedTo": "Saved to <file>{{path}}</file>",
+    "renderFailed": "This image failed to render"
+  },
   "account": {
     "pill": "{{provider}} account {{account}}"
   },
@@ -460,5 +479,68 @@
   "code": {
     "actions": "Code actions",
     "copyFailed": "Could not copy the code. Try again."
+  },
+  "blocks": {
+    "label": "Interactive block",
+    "progress": {
+      "label": "Progress",
+      "of": "{{value}} of {{max}}"
+    },
+    "step": {
+      "done": "Done",
+      "running": "Running",
+      "pending": "Waiting",
+      "failed": "Failed",
+      "skipped": "Skipped"
+    },
+    "stat": {
+      "change": "{{change}} from {{previous}}",
+      "from": "from {{previous}}"
+    },
+    "table": {
+      "showAll": "Show all {{total}} rows"
+    },
+    "chart": {
+      "values": "Values",
+      "summary": "{{count}} values, highest {{label}} at {{value}}",
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+    },
+    "image": {
+      "label": "Image",
+      "unavailable": "The image is not available"
+    },
+    "sources": "Sources",
+    "citation": "Source {{number}}: {{title}}",
+    "outsideProject": "Outside the project, shown as text",
+    "options": "Options",
+    "choices": "Choices",
+    "choice": {
+      "waiting": "Available when the reply is done",
+      "unavailable": "Not available",
+      "sent": "Sent",
+      "queued": "Queued",
+      "failed": "Could not send. Try again.",
+      "ready": "Choices are ready"
+    },
+    "answered": "Answered with “{{label}}”",
+    "chose": "Chose “{{label}}”",
+    "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
+    "sendContext": "Send",
+    "copyText": "Copy text",
+    "fixes_one": "{{count}} fix",
+    "fixes_other": "{{count}} fixes",
+    "shownAsText": "Shown as text",
+    "unknownComponent": "This version cannot draw {{component}}",
+    "renderFailed": "Could not draw this part",
+    "tooLarge": "The block is too large to draw",
+    "unreadable": "The block could not be read",
+    "live": {
+      "label": "Live",
+      "read": "read {{time}}",
+      "sources": "Reads {{sources}}",
+      "failed": "Could not read {{source}}",
+      "refused": "Not allowed to read {{source}}",
+      "notRead": "Not read"
+    }
   }
 }

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

@@ -435,6 +435,25 @@
     "zoomOut": "Uitzoomen",
     "reset": "Herstellen"
   },
+  "generatedImage": {
+    "label": "Gegenereerde afbeelding",
+    "generating": "Afbeelding wordt gemaakt",
+    "failed": "Afbeelding maken mislukt",
+    "empty": "De afbeelding kwam leeg terug",
+    "notImage": "Het resultaat is geen afbeelding",
+    "tooLarge": "De afbeelding is groter dan {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparant",
+    "actions": "Acties voor de afbeelding",
+    "more": "Meer acties",
+    "copyPrompt": "Prompt kopiëren",
+    "open": "Openen",
+    "openLarge": "Groot openen",
+    "save": "Opslaan in project…",
+    "saved": "Opgeslagen",
+    "savedTo": "Opgeslagen in <file>{{path}}</file>",
+    "renderFailed": "Deze afbeelding kon niet worden getoond"
+  },
   "account": {
     "pill": "{{provider}}-account {{account}}"
   },
@@ -460,5 +479,68 @@
   "code": {
     "actions": "Codeacties",
     "copyFailed": "De code kon niet worden gekopieerd. Probeer het opnieuw."
+  },
+  "blocks": {
+    "label": "Interactief blok",
+    "progress": {
+      "label": "Voortgang",
+      "of": "{{value}} van {{max}}"
+    },
+    "step": {
+      "done": "Klaar",
+      "running": "Bezig",
+      "pending": "Wacht",
+      "failed": "Mislukt",
+      "skipped": "Overgeslagen"
+    },
+    "stat": {
+      "change": "{{change}} vanaf {{previous}}",
+      "from": "vanaf {{previous}}"
+    },
+    "table": {
+      "showAll": "Alle {{total}} rijen tonen"
+    },
+    "chart": {
+      "values": "Waarden",
+      "summary": "{{count}} waarden, hoogste {{label}} met {{value}}",
+      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}"
+    },
+    "image": {
+      "label": "Afbeelding",
+      "unavailable": "De afbeelding is niet beschikbaar"
+    },
+    "sources": "Bronnen",
+    "citation": "Bron {{number}}: {{title}}",
+    "outsideProject": "Buiten het project, als tekst getoond",
+    "options": "Opties",
+    "choices": "Keuzes",
+    "choice": {
+      "waiting": "Beschikbaar zodra het antwoord klaar is",
+      "unavailable": "Niet beschikbaar",
+      "sent": "Verstuurd",
+      "queued": "In de wachtrij",
+      "failed": "Versturen lukte niet. Probeer het opnieuw.",
+      "ready": "De keuzes staan klaar"
+    },
+    "answered": "Beantwoord met “{{label}}”",
+    "chose": "Gekozen: “{{label}}”",
+    "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
+    "sendContext": "Versturen",
+    "copyText": "Tekst kopiëren",
+    "fixes_one": "{{count}} correctie",
+    "fixes_other": "{{count}} correcties",
+    "shownAsText": "Als tekst getoond",
+    "unknownComponent": "Deze versie kan {{component}} niet tekenen",
+    "renderFailed": "Dit deel kon niet getekend worden",
+    "tooLarge": "Het blok is te groot om te tekenen",
+    "unreadable": "Het blok kon niet gelezen worden",
+    "live": {
+      "label": "Live",
+      "read": "gelezen {{time}}",
+      "sources": "Leest {{sources}}",
+      "failed": "{{source}} lezen lukte niet",
+      "refused": "Geen toegang tot {{source}}",
+      "notRead": "Niet gelezen"
+    }
   }
 }

package/src/state/chats.ts

@@ -159,6 +159,15 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
         }
         case 'delta': {
             const item = state.items[event.itemId];
+            if (event.uiQueries && item?.kind === 'assistant') {
+                return { ...state, items: { ...state.items, [event.itemId]: { ...item, uiQueries: event.uiQueries } } };
+            }
+            if (event.ui !== undefined && event.text === '') {
+                if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {
+                    return { ...state, items: { ...state.items, [event.itemId]: { ...item, ui: event.ui } } };
+                }
+                return state;
+            }
             if (item?.kind === 'assistant' || item?.kind === 'thinking') {
                 const grown = { ...item, text: item.text + event.text };
                 // The first text is structure after all, since an empty reply that is not streaming has no row.

package/src/theme.css

@@ -117,6 +117,11 @@
     }
     @keyframes chat-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
 
+    /* What shows through a transparent image: a checkerboard of two grounds, so its edges read in both themes. */
+    .chat-checkerboard {
+        background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface-raised) 0 50%) 0 0 / 16px 16px;
+    }
+
     /* A word of a reply that just arrived. The duration is REVEAL_FADE_MS in chat/ui/reveal.ts, which
        keeps the spans until it is over; ease-in-out, because ease-out jumps up and then trails. */
     .chat-fade { animation: chat-fade 300ms ease-in-out both; }
@@ -129,6 +134,20 @@
         @starting-style { opacity: 0; }
     }
     @keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
+    /* A node of an intelligent UI block that lands inside another, such as a step or a row: 160ms like
+       the card's own children, but only a fade, so a parent arriving with its children rises once. */
+    .chat-ui-nodes > * {
+        transition: opacity 160ms ease-out;
+        @starting-style { opacity: 0; }
+    }
+    /* A value a live reading changed lights up in the accent once and settles back in 800ms. */
+    .chat-ui-changed { animation: chat-ui-changed 800ms ease-out; }
+    @keyframes chat-ui-changed { from { color: var(--accent); } }
+    @media (prefers-reduced-motion: reduce) {
+        .chat-ui-changed { animation: none; }
+    }
+    /* A source row a citation revealed. The row only takes focus from code, since its own button takes a click. */
+    .chat-ui-source:focus { animation: chat-flash 1600ms ease-out both; }
     /* A visual still on its way says so only once it takes long enough to be noticed. */
     .chat-visual-wait { animation: chat-fade 200ms ease-out 600ms both; }