@adecore/agents-react 0.38.0 → 0.40.0

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

@@ -39,6 +39,7 @@ const TIME = 'shrink-0 text-xs text-text-faint tabular-nums';
 
 function Elapsed({ startedAt }: { startedAt: number }) {
     const ref = useTickingText(() => formatElapsedShort(Date.now() - startedAt));
+
     return <span ref={ref} className={TIME} />;
 }
 
@@ -49,6 +50,7 @@ function AgentLine({ view, provider, onOpen }: { view: WorkflowAgentView; provid
     const agentId = agent.agentId;
     // One still waiting has no transcript yet.
     const open = onOpen !== undefined && agentId !== null ? () => onOpen({ toolUseId: workflowAgentRef(agentId), description: agent.label }) : undefined;
+
     return (
         <button
             className="-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left enabled:hover:bg-surface-hover"
@@ -87,6 +89,7 @@ function AgentLine({ view, provider, onOpen }: { view: WorkflowAgentView; provid
 function PhaseBlock({ phase, provider, onOpen }: { phase: WorkflowPhaseView; provider: AgentKind | undefined; onOpen?(step: SubagentStep): void }) {
     const { t } = useTranslation('agent-chat');
     const settled = phase.agents.filter((view) => view.state === 'done' || view.state === 'failed').length;
+
     return (
         <div className="mt-3">
             {phase.title !== null && (
@@ -106,11 +109,13 @@ function PhaseBlock({ phase, provider, onOpen }: { phase: WorkflowPhaseView; pro
 
 function Counts({ counts }: { counts: WorkflowCounts }) {
     const { t } = useTranslation('agent-chat');
+
     const parts = [
         { key: 'working', count: counts.running, tone: 'text-status-running' },
         { key: 'finished', count: counts.done, tone: 'text-status-idle' },
         { key: 'failedCount', count: counts.failed, tone: 'text-status-error' }
     ].filter((part) => part.count > 0);
+
     return (
         <span className="shrink-0 truncate text-xs text-text-faint tabular-nums">
             {t('rows.workflow.agents', { count: counts.total })}
@@ -150,6 +155,7 @@ export function WorkflowRow({
     const opens = hasToolBody(tool);
     const onOpen = refused ? undefined : onOpenAgent;
     const actions = useChatActions();
+
     const stop = (): void => {
         if (chatId && workflow.taskId) {
             void actions.stopTask(chatId, workflow.taskId).catch((error: unknown) => {
@@ -161,7 +167,9 @@ export function WorkflowRow({
             });
         }
     };
+
     const failed = tool.state === 'error';
+
     const header = (
         <>
             <span className={clsx(ROW_GUTTER, running && 'text-accent')}>
@@ -173,11 +181,13 @@ export function WorkflowRow({
             {opens && <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />}
         </>
     );
+
     const headerClasses = clsx(
         '-mx-1 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs',
         failed ? 'text-status-error' : 'text-text-muted',
         opens && 'hover:bg-surface-hover'
     );
+
     return (
         <div data-find-item={tool.id} className="mb-1">
             <div className="flex items-center gap-1">

package/src/chat/ui/rows/row-rhythm.ts

@@ -6,16 +6,14 @@ import { isBlock, type TimelineRow } from '../../logic/timeline';
 export const FOLLOW_THRESHOLD_PX = 40;
 
 /*
- * The gaps a row wears for where it sits: a question is followed by its answer gap, and a seam where
- * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A visual and an
- * app's card have no margin of their own like prose does, so the row under one takes the block gap
- * too. A question already carries the gap before it, and the row after one is the answer, so neither
- * takes a seam.
+ * A seam where tool lines meet prose gets the block gap, and so does the row under a visual or an app's
+ * card, which have no margin of their own. A question and the answer after it never take a seam.
  */
 export function rowRhythm(row: TimelineRow, previous: TimelineRow | null): string {
     const question = row.kind === 'user';
     const bare = previous?.kind === 'visual' || previous?.kind === 'app-card';
     const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || bare);
+
     return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
 }
 
@@ -28,15 +26,19 @@ export function replyHeader(row: TimelineRow, previous: TimelineRow | null): { a
     if (row.kind === 'user' || row.kind === 'turn-start') {
         return null;
     }
+
     if (previous === null) {
         return { at: null };
     }
+
     if (previous.kind === 'user') {
         return { at: previous.item.createdAt };
     }
+
     if (previous.kind === 'turn-start') {
         return { at: previous.turn.createdAt };
     }
+
     return null;
 }
 

package/src/chat/ui/theme-watch.ts

@@ -2,17 +2,14 @@
 const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
 
 /*
- * Calls `changed` after the root of `owner` or its body changes a theme attribute, at most once a
- * frame, for whatever resolves the theme's tokens into colors of its own. A stylesheet that changes
- * changes no attribute, so an app that rewrites its palette that way touches the root's `style` as
- * well, the signal the terminal follows too. Returns what stops it.
- *
- * Any change of those attributes counts, also one that leaves every token as it was (a dialog that
- * locks the scroll writes the root's `style`), so a caller compares what it reads with what it drew.
+ * Calls `changed` at most once a frame after the root or body of `owner` changes a theme attribute. An app
+ * that rewrites its palette through a stylesheet touches the root's `style` as well, as the terminal expects.
+ * Any change counts, also one that leaves every token alone, so a caller compares what it reads with what it drew.
  */
 export function watchTheme(owner: Document, changed: () => void): () => void {
     const view = owner.defaultView ?? window;
     let frame = 0;
+
     const schedule = (): void => {
         if (frame === 0) {
             frame = view.requestAnimationFrame(() => {
@@ -21,14 +18,18 @@ export function watchTheme(owner: Document, changed: () => void): () => void {
             });
         }
     };
+
     const observer = new view.MutationObserver(schedule);
+
     for (const root of [owner.documentElement, owner.body]) {
         if (root !== null) {
             observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
         }
     }
+
     return () => {
         observer.disconnect();
+
         if (frame !== 0) {
             view.cancelAnimationFrame(frame);
             frame = 0;

package/src/chat/ui/thread-references.ts

@@ -16,11 +16,15 @@ export function threadReferencedKey(structure: Record<string, ChatItem> | undefi
     if (structure === undefined) {
         return '';
     }
+
     const cached = referencedOf.get(structure);
+
     if (cached !== undefined) {
         return cached;
     }
+
     const ids = new Set<string>();
+
     for (const item of Object.values(structure)) {
         if (item.kind === 'user') {
             for (const id of [...(item.chats ?? []), ...(item.references ?? [])]) {
@@ -28,8 +32,10 @@ export function threadReferencedKey(structure: Record<string, ChatItem> | undefi
             }
         }
     }
+
     const key = [...ids].join('\n');
     referencedOf.set(structure, key);
+
     return key;
 }
 
@@ -39,6 +45,7 @@ export function useReferenceLookup(chatId: string): ReferenceLookup {
     const { openReference } = useChatHost();
     const referables = useHostReferables(scopeId, chatId);
     const key = useChatRow(chatId, (chat) => threadReferencedKey(chat?.structure));
+
     return {
         items: referables.items,
         open: openReference ? (id: string) => openReference(scopeId, id) : null,

package/src/chat/ui/use-diff-source-tokens.ts

@@ -8,22 +8,27 @@ function createSourceBinding(document: DiffDocument, language: string, theme: st
     const mapping = diffSyntaxDocument(document, language, theme);
     const listeners = new Set<() => void>();
     let source: DiffSourceTokenSession | undefined;
+
     const current = (): DiffSourceTokenSession => {
         if (source === undefined) {
             source = diffSourceTokens(document, mapping, runtime());
+
             source.subscribe(() => {
                 for (const listener of [...listeners]) {
                     listener();
                 }
             });
         }
+
         return source;
     };
+
     return {
         tokens: {
             get: (side, index) => (mapping.locate(side, index) === undefined ? null : current().get(side, index)),
             subscribe(listener) {
                 listeners.add(listener);
+
                 return () => {
                     listeners.delete(listener);
                 };
@@ -40,10 +45,13 @@ function createSourceBinding(document: DiffDocument, language: string, theme: st
 /* Without a `runtime`, the shared one of the host's `code`. */
 export function useDiffSourceTokens(document: DiffDocument, language: string, theme: string, runtime?: DiffSyntaxRuntime): DiffSourceTokens {
     const { code } = useChatHost();
+
     const binding = useMemo(
         () => createSourceBinding(document, language, theme, () => runtime ?? diffSyntaxRuntime(code)),
         [document, language, theme, runtime, code]
     );
+
     useLayoutEffect(() => () => binding.release(), [binding]);
+
     return binding.tokens;
 }

package/src/chat/ui/useToggleSet.ts

@@ -18,13 +18,16 @@ export function useToggleSet(onToggle?: () => void): ToggleSet {
     const toggle = (id: string): void => {
         setIds((current) => {
             const next = new Set(current);
+
             if (next.has(id)) {
                 next.delete(id);
             } else {
                 next.add(id);
             }
+
             return next;
         });
+
         onToggle?.();
     };
 

package/src/chat/ui/visual-theme.ts

@@ -25,6 +25,7 @@ export function visualThemeOf(tokens: VisualTokens, appearance: VisualAppearance
     const raised = tokens.color('--surface-raised');
     const accent = tokens.color('--accent');
     const onAccent = tokens.color('--accent-text');
+
     const variables: Partial<Record<VisualThemeVariable, string>> = {
         '--background': background,
         '--foreground': text,
@@ -61,6 +62,7 @@ export function visualThemeOf(tokens: VisualTokens, appearance: VisualAppearance
         '--font-sans': tokens.value('--font-sans'),
         '--font-mono': tokens.value('--font-mono')
     };
+
     return { appearance, variables: cleanVisualVariables(variables) };
 }
 
@@ -75,10 +77,13 @@ interface Rgba {
 
 function rgbaOf(color: string): Rgba | null {
     const match = RGB.exec(color.trim());
+
     if (match === null) {
         return null;
     }
+
     const alpha = match[4] === undefined ? 1 : Number(match[4]) / (match[5] === '%' ? 100 : 1);
+
     return { red: Number(match[1]), green: Number(match[2]), blue: Number(match[3]), alpha };
 }
 
@@ -93,27 +98,36 @@ function isTransparent(color: string): boolean {
  */
 export function backgroundBehind(layers: readonly string[]): string | null {
     const translucent: Rgba[] = [];
+
     for (const layer of layers) {
         if (layer === '' || isTransparent(layer)) {
             continue;
         }
+
         const color = rgbaOf(layer);
+
         if (color !== null && color.alpha < 1) {
             translucent.push(color);
+
             continue;
         }
+
         if (color === null || translucent.length === 0) {
             // A color in a space other than sRGB stays as the engine wrote it, since there is no laying another over it here.
             return color === null ? layer : `rgb(${color.red}, ${color.green}, ${color.blue})`;
         }
+
         let { red, green, blue } = color;
+
         for (const over of translucent.reverse()) {
             red = over.red * over.alpha + red * (1 - over.alpha);
             green = over.green * over.alpha + green * (1 - over.alpha);
             blue = over.blue * over.alpha + blue * (1 - over.alpha);
         }
+
         return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
     }
+
     return null;
 }
 
@@ -132,27 +146,37 @@ function readTheme(element: HTMLElement, mode: VisualAppearance): VisualTheme {
     probe.style.position = 'absolute';
     probe.style.visibility = 'hidden';
     element.append(probe);
+
     try {
         const probed = view.getComputedStyle(probe);
+
         const declared = (token: string): string => style.getPropertyValue(token).trim();
+
         const computed = (property: 'color' | 'borderTopLeftRadius', token: string): string => {
             if (declared(token) === '') {
                 return '';
             }
+
             probe.style[property] = `var(${token})`;
+
             return probed[property];
         };
+
         const tokens: VisualTokens = {
             color: (token) => computed('color', token),
             length: (token) => computed('borderTopLeftRadius', token),
             value: declared
         };
+
         const layers: string[] = [];
+
         for (let node: Element | null = element; node !== null; node = node.parentElement) {
             layers.push(view.getComputedStyle(node).backgroundColor);
         }
+
         const scheme = style.colorScheme.trim();
         const appearance = scheme === 'light' || scheme === 'dark' ? scheme : mode;
+
         return visualThemeOf(tokens, appearance, backgroundBehind(layers) ?? tokens.color('--surface'));
     } finally {
         probe.remove();
@@ -167,24 +191,30 @@ function readTheme(element: HTMLElement, mode: VisualAppearance): VisualTheme {
 export function useVisualTheme(ref: RefObject<HTMLElement | null>): VisualTheme | null {
     const mode = useHostCodeMode();
     const [theme, setTheme] = useState<VisualTheme | null>(null);
+
     useLayoutEffect(() => {
         const element = ref.current;
+
         if (element === null) {
             return;
         }
+
         const read = (): void => {
             const next = readTheme(element, mode);
             setTheme((current) => (current !== null && sameTheme(current, next) ? current : next));
         };
+
         read();
         const owner = element.ownerDocument;
         const stopWatching = watchTheme(owner, read);
         const scheme = owner.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
         scheme?.addEventListener('change', read);
+
         return () => {
             stopWatching();
             scheme?.removeEventListener('change', read);
         };
     }, [ref, mode]);
+
     return theme;
 }

package/src/chat/visual-bridge.ts

@@ -49,6 +49,7 @@ export interface VisualBridgeOptions {
 
 function timeout(ms: number, run: () => void): () => void {
     const timer = setTimeout(run, ms);
+
     return () => clearTimeout(timer);
 }
 
@@ -78,6 +79,7 @@ export class VisualBridge {
     constructor(options: VisualBridgeOptions) {
         this.options = options;
         this.theme = options.theme;
+
         options.page.then(
             (html) => {
                 this.html = html;
@@ -94,10 +96,13 @@ export class VisualBridge {
     /* A `message` event of the window the frame is in. */
     receive(event: { source: unknown; data: unknown }): void {
         const frame = this.options.frame();
+
         if (this.disposed || frame === null || event.source !== frame) {
             return;
         }
+
         const message = parseVisualMessage(event.data);
+
         switch (message?.method) {
             case VISUAL_BRIDGE_METHODS.sandboxProxyReady:
                 // A frame that loads again starts over from the sandbox host page.
@@ -108,40 +113,50 @@ export class VisualBridge {
                 this.viewportReady = false;
                 this.cancelSilence();
                 this.sendPage();
+
                 return;
             case VISUAL_BRIDGE_METHODS.sizeChanged:
                 if (this.sent === null) {
                     return;
                 }
+
                 if (!this.live) {
                     this.live = true;
                     this.options.onAppearance(this.sent.appearance);
                 }
+
                 this.options.onHeight(
                     this.options.onViewportReady ? visualContentHeight(message.height) : clampVisualHeight(this.options.visual, message.height)
                 );
+
                 return;
             case VISUAL_BRIDGE_METHODS.viewportReady:
                 if (this.sent === null) {
                     return;
                 }
+
                 this.viewportReady = true;
                 this.options.onViewportReady?.();
                 this.setViewport(this.viewport);
+
                 return;
             case VISUAL_BRIDGE_METHODS.scrollRequest:
                 if (this.sent !== null && this.viewportReady && this.viewport !== null) {
                     this.options.onScroll?.(message.request);
                 }
+
                 return;
             case VISUAL_BRIDGE_METHODS.openLink:
                 if (this.sent === null) {
                     return;
                 }
+
                 if (this.options.mayOpenLink()) {
                     this.options.openLink(message.url);
                 }
+
                 frame.postMessage(visualOpenLinkResult(message.id), '*');
+
                 return;
             default:
                 return;
@@ -150,6 +165,7 @@ export class VisualBridge {
 
     setViewport(viewport: VisualViewport | null): void {
         this.viewport = viewport;
+
         if (!this.disposed && this.sent !== null && this.viewportReady) {
             this.options.frame()?.postMessage(visualViewportMessage(viewport), '*');
         }
@@ -159,10 +175,13 @@ export class VisualBridge {
     setTheme(theme: VisualTheme): void {
         this.theme = theme;
         const frame = this.options.frame();
+
         if (this.disposed || this.sent === null || frame === null) {
             return;
         }
+
         this.postTheme(frame);
+
         if (this.live) {
             this.options.onAppearance(theme.appearance);
         }
@@ -173,7 +192,9 @@ export class VisualBridge {
         if (this.heard || this.disposed) {
             return;
         }
+
         this.cancelSilence();
+
         this.cancelSilence = (this.options.after ?? timeout)(SILENCE_MS, () => {
             if (!this.heard && !this.disposed) {
                 this.options.onFailure();
@@ -188,9 +209,11 @@ export class VisualBridge {
 
     private sendPage(): void {
         const frame = this.options.frame();
+
         if (this.disposed || !this.waiting || this.html === null || frame === null) {
             return;
         }
+
         this.waiting = false;
         // Any origin, since the frame's own is opaque; `receive` checks every answer's source instead.
         frame.postMessage(visualResourceReadyMessage(this.html), '*');

package/src/chat/visual-viewport.ts

@@ -29,9 +29,11 @@ export class VisualViewportController {
         this.observer.observe(scroller);
         this.attributes = new MutationObserver(this.onScroll);
         const row = box.closest('[data-index]');
+
         if (row) {
             this.attributes.observe(row, { attributes: true, attributeFilter: ['style'] });
         }
+
         scroller.addEventListener('scroll', this.onScroll, { passive: true });
         this.refresh();
     }
@@ -40,11 +42,13 @@ export class VisualViewportController {
         if (this.disposed) {
             return;
         }
+
         const top = this.offsetInScroller(this.scroller.getBoundingClientRect(), this.box.getBoundingClientRect());
         const available = this.scroller.clientHeight;
         const geometry = visualViewportGeometry(this.box.offsetHeight, available, top);
         this.viewport.style.height = `${geometry.height}px`;
         const key = `${geometry.top}:${geometry.height}`;
+
         if (key !== this.last) {
             this.last = key;
             this.bridge.setViewport(geometry);
@@ -54,14 +58,18 @@ export class VisualViewportController {
     scroll(request: VisualScrollRequest): void {
         const outer = this.scroller.getBoundingClientRect();
         const box = this.box.getBoundingClientRect();
+
         if (this.disposed || box.bottom <= outer.top || box.top >= outer.bottom) {
             return;
         }
+
         if ('by' in request) {
             this.pendingDelta += request.by;
             this.schedule();
+
             return;
         }
+
         this.pendingDelta = 0;
         const start = this.scroller.scrollTop + this.offsetInScroller(outer, box);
         const top = 'to' in request ? start + request.to : request.edge === 'start' ? 0 : this.scroller.scrollHeight;
@@ -82,6 +90,7 @@ export class VisualViewportController {
     private offsetInScroller(outer: DOMRect, box: DOMRect): number {
         // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
         const scale = outer.height / this.scroller.offsetHeight || 1;
+
         return (box.top - outer.top) / scale - this.scroller.clientTop;
     }
 
@@ -89,12 +98,15 @@ export class VisualViewportController {
         if (this.frame || this.disposed) {
             return;
         }
+
         this.frame = this.view.requestAnimationFrame(() => {
             this.frame = 0;
+
             if (this.pendingDelta !== 0) {
                 this.scroller.scrollBy({ top: this.pendingDelta, behavior: 'instant' });
                 this.pendingDelta = 0;
             }
+
             this.refresh();
         });
     }

package/src/host-hooks.ts

@@ -1,13 +1,11 @@
 'use no memo';
 /*
- * The hooks a host hands the views, each called through a hook of its own here. To the React Compiler a
- * hook read from a context may be another function on the next render, so it leaves a component that
- * calls one as written. `ChatHostProvider` pins its host and a command look's hooks stay with its row's
- * key, so they never change under a mounted view; only these wrappers go uncompiled for it.
+ * The React Compiler leaves a component that calls a hook read from a context as written, so the host's
+ * hooks are called through these wrappers only. `ChatHostProvider` pins its host, so they never change.
  */
 import type { ProviderPlatform } from '@adecore/agent-contracts';
 import { referablesOfChats, type Referables } from './chat/chat-references';
-import { useChatHost, type ChatHost, type CommandLook } from './host';
+import { useChatHost, type ChatHost, type CommandLook, type ComposerSendAction } from './host';
 
 export function useHostCodeMode(): 'light' | 'dark' {
     return useChatHost().code.useMode();
@@ -54,6 +52,7 @@ const useReferablesFromChats = (_scopeId: string, _chatId: string): Referables =
 /* A host without views of its own offers its chats. */
 export function useHostReferables(scopeId: string, chatId: string): Referables {
     const useReferables = useChatHost().useReferables ?? useReferablesFromChats;
+
     return useReferables(scopeId, chatId);
 }
 
@@ -66,6 +65,7 @@ const noPlatform = (): ProviderPlatform | null => null;
 /* Null where the host does not say, as it need not. */
 export function useHostMachinePlatform(scopeId: string): ProviderPlatform | null {
     const useMachinePlatform = useChatHost().useMachinePlatform ?? noPlatform;
+
     return useMachinePlatform(scopeId);
 }
 
@@ -101,6 +101,16 @@ export function useHostComposerPlaceholder(...args: Parameters<ChatHost['useComp
     return useChatHost().useComposerPlaceholder(...args);
 }
 
+const NO_SEND_ACTIONS: readonly ComposerSendAction[] = [];
+
+const noSendActions = (): readonly ComposerSendAction[] => NO_SEND_ACTIONS;
+
+export function useHostComposerSendActions(scopeId: string, chatId: string): readonly ComposerSendAction[] {
+    const useSendActions = useChatHost().useComposerSendActions ?? noSendActions;
+
+    return useSendActions(scopeId, chatId);
+}
+
 export function useHostThreadCards(...args: Parameters<ChatHost['useThreadCards']>): ReturnType<ChatHost['useThreadCards']> {
     return useChatHost().useThreadCards(...args);
 }