@adecore/agents-react 0.20.0 → 0.21.0

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

@@ -4,7 +4,9 @@ import type { ThreadCard } from '../../../host';
 import type { TimelineRow } from '../../logic/timeline';
 import type { SubagentStep } from '../../subagent-view';
 import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows';
+import { isImageGeneration } from '../../logic/generated-image';
 import { ForksRow } from './ForksRow';
+import { GeneratedImageRow } from './GeneratedImageRow';
 import { SubagentBranchRow } from './SubagentRow';
 import { VisualRow } from './VisualRow';
 import { WorkflowRow } from './WorkflowRow';
@@ -51,9 +53,9 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'thinking':
             return <ThinkingRow chatId={chatId} item={row.item} />;
         case 'work':
-            return <WorkRow tool={row.tool} />;
+            return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkRow tool={row.tool} />;
         case 'work-live':
-            return <WorkLiveRow chatId={chatId} tool={row.tool} />;
+            return isImageGeneration(row.tool) ? <GeneratedImageRow chatId={chatId} tool={row.tool} /> : <WorkLiveRow chatId={chatId} tool={row.tool} />;
         case 'workflow':
             return <WorkflowRow chatId={chatId} tool={row.tool} workflow={row.workflow} onOpenAgent={openConversation} />;
         case 'work-group':

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';
@@ -56,10 +67,22 @@ export interface FileRef {
     path: string;
     /* One-based, when the reference named a line. */
     line?: number;
+    column?: number;
+    endLine?: number;
     /* A trailing separator is the only thing that says a reference means a directory. */
     directory: boolean;
 }
 
+export interface ShellCodeBlockContext {
+    scopeId: string;
+    chatId: string;
+    itemId: string;
+    language: 'sh' | 'bash' | 'zsh';
+    code: string;
+    /* A closed fence in a main reply that has stopped streaming. */
+    complete: boolean;
+}
+
 /* Where another chat stands and how to get there; a null title is a chat that is gone. */
 export interface ChatPlace {
     title: string | null;
@@ -177,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[];
@@ -197,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;
@@ -210,12 +248,16 @@ export interface ChatHost {
     };
     /* How a reply appears while it streams: a word, a block or the whole of it at a time. */
     useStreaming(): 'words' | 'blocks' | 'whole';
+    /* How Send handles a running turn; Option or Alt selects the other behavior. */
+    useSendDelivery(): 'queue' | 'steer';
     /* Paths in an answer as links; null leaves them text. */
     fileLinks: {
         /* The reference a piece of text names, where the folder it counts from lets it be opened. */
-        target(text: string, cwd: string | null): FileRef | null;
-        open(cwd: string | null, ref: FileRef): void;
+        target(text: string, cwd: string | null, scopeId?: string | null): FileRef | null;
+        open(cwd: string | null, ref: FileRef, scopeId?: string | null): void;
     } | null;
+    /* Renders in a main reply's shell block action group. Rendering must not execute an action. */
+    renderShellCodeBlock?: (context: ShellCodeBlockContext) => ReactNode;
     /* Find in a thread; without one the thread has no find. */
     useTimelineFind(options: TimelineFindOptions): TimelineFind;
     dictation: {
@@ -296,6 +338,7 @@ const DEFAULT_HOST: ChatHost = {
     ReadImage: null,
     code: { useMode: () => 'light', useThemes: () => ({ light: 'github-light', dark: 'github-dark' }), custom: [] },
     useStreaming: () => 'words',
+    useSendDelivery: () => 'queue',
     fileLinks: null,
     useTimelineFind: () => NO_FIND,
     dictation: { Textarea: PlainTextarea, composer: null },

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

@@ -307,7 +307,9 @@
       "description": "A turn is running. Stop it and clear the thread?",
       "confirm": "Stop and clear"
     },
-    "waitingBelow": "Waiting for your answer below"
+    "waitingBelow": "Waiting for your answer below",
+    "steerButton": "Send to the running agent. Hold Option or Alt to queue after this turn.",
+    "queueWithSteerButton": "Queue after this turn. Hold Option or Alt to send to the running agent."
   },
   "activity": {
     "subagents_one": "{{count}} sub-agent",
@@ -433,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}}"
   },
@@ -454,5 +475,72 @@
       "failed": "failed",
       "cancelled": "cancelled"
     }
+  },
+  "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

@@ -307,7 +307,9 @@
       "description": "Er loopt een turn. Die stoppen en de thread wissen?",
       "confirm": "Stoppen en wissen"
     },
-    "waitingBelow": "Wacht hieronder op je antwoord"
+    "waitingBelow": "Wacht hieronder op je antwoord",
+    "steerButton": "Stuur naar de werkende agent. Houd Option of Alt ingedrukt om te wachten tot deze beurt klaar is.",
+    "queueWithSteerButton": "Wacht tot deze beurt klaar is. Houd Option of Alt ingedrukt om naar de werkende agent te sturen."
   },
   "activity": {
     "subagents_one": "{{count}} sub-agent",
@@ -433,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}}"
   },
@@ -454,5 +475,72 @@
       "failed": "mislukt",
       "cancelled": "geannuleerd"
     }
+  },
+  "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; }
 
@@ -193,9 +212,26 @@
 .chat-markdown :is(th, td) { border: 1px solid var(--tw-prose-td-borders); padding: 4px 8px; text-align: left; }
 
 /* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
-.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: auto; }
-.chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
+.chat-code { position: relative; min-height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: hidden; }
+.chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); overflow: auto; user-select: text; background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
 .chat-code code { font-family: inherit; }
+.chat-code-actions { position: absolute; top: 4px; right: 4px; border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); box-shadow: 0 0 0 1px var(--border); }
+.chat-code-error { margin: 0; padding: 0 12px 10px; color: var(--status-error); font-size: var(--text-sm); }
+@media (hover: hover) and (pointer: fine) {
+    .chat-code-actions { opacity: 0; pointer-events: none; }
+    .chat-code:hover .chat-code-actions, .chat-code:focus-within .chat-code-actions,
+    .chat-code[data-copy-state="failed"] .chat-code-actions, .chat-code-actions:has([aria-busy="true"]) { opacity: 1; pointer-events: auto; }
+}
+@media (pointer: coarse) {
+    .chat-code { min-height: 54px; }
+    .chat-code-actions { padding: 8px; gap: 17px; }
+    .chat-code-actions .icon-btn { position: relative; }
+    .chat-code-actions .icon-btn::after { content: ''; position: absolute; inset: -8px; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .chat-code-actions .icon-btn { transition: none; }
+    .chat-code-actions .icon-btn:active { scale: 1; }
+}
 
 /* The chat composer is a CodeMirror editor, whose base theme lands in an unlayered style tag at
    mount. These rules stay unlayered too, and carry one class more than the theme's selectors. */