@adecore/agents-react 0.37.3 → 0.38.0

package/dist/chat/ui/rows/VisualRow.js

@@ -5,6 +5,7 @@ import { ButtonGroup, ErrorBoundary, Icon, IconButton, Menu, Surface } from '@ad
 import { useChatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
 import { useVisualDialog } from '../../visuals.js';
+import { HostMenuItems } from '../HostMenuItems.js';
 import { VisualFrame } from '../VisualFrame.js';
 /*
  * A page an agent published, borderless on the thread's ground, with its width set by the row. Its few
@@ -14,7 +15,7 @@ import { VisualFrame } from '../VisualFrame.js';
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function VisualRow(t0) {
-  const $ = _c(50);
+  const $ = _c(63);
   const {
     chatId,
     visual
@@ -24,223 +25,264 @@ export function VisualRow(t0) {
     t
   } = useTranslation("agent-chat");
   const {
+    id: scopeId,
     keyOf
   } = useChatScope();
   if (host.visuals === null) {
     return null;
   }
   let t1;
-  if ($[0] !== chatId || $[1] !== keyOf || $[2] !== visual.id) {
-    t1 = kind => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);
+  if ($[0] !== chatId || $[1] !== host.visuals || $[2] !== scopeId || $[3] !== visual) {
+    t1 = host.visuals.actions?.(scopeId, chatId, visual) ?? [];
     $[0] = chatId;
-    $[1] = keyOf;
-    $[2] = visual.id;
-    $[3] = t1;
+    $[1] = host.visuals;
+    $[2] = scopeId;
+    $[3] = visual;
+    $[4] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[4];
   }
-  const open = t1;
+  const extra = t1;
   let t2;
-  if ($[4] !== t) {
-    t2 = t("visuals.renderFailed");
-    $[4] = t;
-    $[5] = t2;
+  if ($[5] !== chatId || $[6] !== keyOf || $[7] !== visual.id) {
+    t2 = kind => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);
+    $[5] = chatId;
+    $[6] = keyOf;
+    $[7] = visual.id;
+    $[8] = t2;
   } else {
-    t2 = $[5];
+    t2 = $[8];
   }
+  const open = t2;
   let t3;
-  if ($[6] !== visual) {
-    t3 = [visual];
-    $[6] = visual;
-    $[7] = t3;
+  if ($[9] !== t) {
+    t3 = t("visuals.renderFailed");
+    $[9] = t;
+    $[10] = t3;
   } else {
-    t3 = $[7];
+    t3 = $[10];
   }
   let t4;
-  if ($[8] !== chatId || $[9] !== visual) {
-    t4 = /*#__PURE__*/_jsx(VisualFrame, {
-      chatId: chatId,
-      visual: visual
-    });
-    $[8] = chatId;
-    $[9] = visual;
-    $[10] = t4;
+  if ($[11] !== visual) {
+    t4 = [visual];
+    $[11] = visual;
+    $[12] = t4;
   } else {
-    t4 = $[10];
+    t4 = $[12];
   }
   let t5;
-  if ($[11] !== t || $[12] !== visual.title) {
-    t5 = t("visuals.actions", {
-      title: visual.title
+  if ($[13] !== chatId || $[14] !== visual) {
+    t5 = /*#__PURE__*/_jsx(VisualFrame, {
+      chatId: chatId,
+      visual: visual
     });
-    $[11] = t;
-    $[12] = visual.title;
-    $[13] = t5;
+    $[13] = chatId;
+    $[14] = visual;
+    $[15] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[15];
   }
   let t6;
-  if ($[14] !== t) {
-    t6 = t("visuals.expand");
-    $[14] = t;
-    $[15] = t6;
+  if ($[16] !== t || $[17] !== visual.title) {
+    t6 = t("visuals.actions", {
+      title: visual.title
+    });
+    $[16] = t;
+    $[17] = visual.title;
+    $[18] = t6;
   } else {
-    t6 = $[15];
+    t6 = $[18];
   }
   let t7;
-  if ($[16] !== open) {
-    t7 = () => open("expand");
-    $[16] = open;
-    $[17] = t7;
+  if ($[19] !== t) {
+    t7 = t("visuals.expand");
+    $[19] = t;
+    $[20] = t7;
   } else {
-    t7 = $[17];
+    t7 = $[20];
   }
   let t8;
-  if ($[18] !== t6 || $[19] !== t7) {
-    t8 = /*#__PURE__*/_jsx(IconButton, {
-      icon: Maximize2,
-      size: "sm",
-      label: t6,
-      onClick: t7
-    });
-    $[18] = t6;
-    $[19] = t7;
-    $[20] = t8;
+  if ($[21] !== open) {
+    t8 = () => open("expand");
+    $[21] = open;
+    $[22] = t8;
   } else {
-    t8 = $[20];
+    t8 = $[22];
   }
   let t9;
-  if ($[21] !== t) {
-    t9 = t("visuals.more");
-    $[21] = t;
-    $[22] = t9;
+  if ($[23] !== t7 || $[24] !== t8) {
+    t9 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Maximize2,
+      size: "sm",
+      label: t7,
+      onClick: t8
+    });
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
   } else {
-    t9 = $[22];
+    t9 = $[25];
   }
   let t10;
-  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /*#__PURE__*/_jsx(Menu.Trigger, {});
-    $[23] = t10;
+  if ($[26] !== t) {
+    t10 = t("visuals.more");
+    $[26] = t;
+    $[27] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[27];
   }
   let t11;
-  if ($[24] !== t9) {
-    t11 = /*#__PURE__*/_jsx(IconButton, {
-      icon: Ellipsis,
-      size: "sm",
-      label: t9,
-      render: t10
-    });
-    $[24] = t9;
-    $[25] = t11;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /*#__PURE__*/_jsx(Menu.Trigger, {});
+    $[28] = t11;
   } else {
-    t11 = $[25];
+    t11 = $[28];
   }
   let t12;
-  if ($[26] !== open) {
-    t12 = () => open("remove");
-    $[26] = open;
-    $[27] = t12;
+  if ($[29] !== t10) {
+    t12 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Ellipsis,
+      size: "sm",
+      label: t10,
+      render: t11
+    });
+    $[29] = t10;
+    $[30] = t12;
   } else {
-    t12 = $[27];
+    t12 = $[30];
   }
   let t13;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /*#__PURE__*/_jsx(Icon, {
-      icon: Trash2,
-      size: 14
+  if ($[31] !== extra) {
+    t13 = /*#__PURE__*/_jsx(HostMenuItems, {
+      actions: extra
     });
-    $[28] = t13;
+    $[31] = extra;
+    $[32] = t13;
   } else {
-    t13 = $[28];
+    t13 = $[32];
   }
   let t14;
-  if ($[29] !== t) {
-    t14 = t("visuals.remove");
-    $[29] = t;
-    $[30] = t14;
+  if ($[33] !== extra.length) {
+    t14 = extra.length > 0 && /*#__PURE__*/_jsx(Menu.Separator, {});
+    $[33] = extra.length;
+    $[34] = t14;
   } else {
-    t14 = $[30];
+    t14 = $[34];
   }
   let t15;
-  if ($[31] !== t12 || $[32] !== t14) {
-    t15 = /*#__PURE__*/_jsx(Menu.Popup, {
-      align: "end",
-      children: /*#__PURE__*/_jsxs(Menu.Item, {
-        onClick: t12,
-        children: [t13, " ", t14]
-      })
-    });
-    $[31] = t12;
-    $[32] = t14;
-    $[33] = t15;
+  if ($[35] !== open) {
+    t15 = () => open("remove");
+    $[35] = open;
+    $[36] = t15;
   } else {
-    t15 = $[33];
+    t15 = $[36];
   }
   let t16;
-  if ($[34] !== t11 || $[35] !== t15) {
-    t16 = /*#__PURE__*/_jsxs(Menu.Root, {
-      children: [t11, t15]
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = /*#__PURE__*/_jsx(Icon, {
+      icon: Trash2,
+      size: 14
     });
-    $[34] = t11;
-    $[35] = t15;
-    $[36] = t16;
+    $[37] = t16;
   } else {
-    t16 = $[36];
+    t16 = $[37];
   }
   let t17;
-  if ($[37] !== t16 || $[38] !== t8) {
-    t17 = /*#__PURE__*/_jsxs(ButtonGroup, {
-      children: [t8, t16]
-    });
-    $[37] = t16;
-    $[38] = t8;
+  if ($[38] !== t) {
+    t17 = t("visuals.remove");
+    $[38] = t;
     $[39] = t17;
   } else {
     t17 = $[39];
   }
   let t18;
-  if ($[40] !== t17 || $[41] !== t5) {
-    t18 = /*#__PURE__*/_jsx(Surface, {
-      role: "toolbar",
-      "aria-label": t5,
-      className: "absolute top-2 right-2 rounded-lg p-0.5 opacity-0 transition-opacity group-focus-within/visual:opacity-100 group-hover/visual:opacity-100 has-[[data-popup-open]]:opacity-100 pointer-coarse:opacity-100",
-      children: t17
+  if ($[40] !== t15 || $[41] !== t17) {
+    t18 = /*#__PURE__*/_jsxs(Menu.Item, {
+      onClick: t15,
+      children: [t16, " ", t17]
     });
-    $[40] = t17;
-    $[41] = t5;
+    $[40] = t15;
+    $[41] = t17;
     $[42] = t18;
   } else {
     t18 = $[42];
   }
   let t19;
-  if ($[43] !== t18 || $[44] !== t4) {
-    t19 = /*#__PURE__*/_jsxs("div", {
-      className: "group/visual relative",
-      children: [t4, t18]
+  if ($[43] !== t13 || $[44] !== t14 || $[45] !== t18) {
+    t19 = /*#__PURE__*/_jsxs(Menu.Popup, {
+      align: "end",
+      children: [t13, t14, t18]
     });
-    $[43] = t18;
-    $[44] = t4;
-    $[45] = t19;
+    $[43] = t13;
+    $[44] = t14;
+    $[45] = t18;
+    $[46] = t19;
   } else {
-    t19 = $[45];
+    t19 = $[46];
   }
   let t20;
-  if ($[46] !== t19 || $[47] !== t2 || $[48] !== t3) {
-    t20 = /*#__PURE__*/_jsx(ErrorBoundary, {
-      label: t2,
-      resetKeys: t3,
-      compact: true,
-      className: "relative rounded-lg",
-      children: t19
+  if ($[47] !== t12 || $[48] !== t19) {
+    t20 = /*#__PURE__*/_jsxs(Menu.Root, {
+      children: [t12, t19]
     });
-    $[46] = t19;
-    $[47] = t2;
-    $[48] = t3;
+    $[47] = t12;
+    $[48] = t19;
     $[49] = t20;
   } else {
     t20 = $[49];
   }
-  return t20;
+  let t21;
+  if ($[50] !== t20 || $[51] !== t9) {
+    t21 = /*#__PURE__*/_jsxs(ButtonGroup, {
+      children: [t9, t20]
+    });
+    $[50] = t20;
+    $[51] = t9;
+    $[52] = t21;
+  } else {
+    t21 = $[52];
+  }
+  let t22;
+  if ($[53] !== t21 || $[54] !== t6) {
+    t22 = /*#__PURE__*/_jsx(Surface, {
+      role: "toolbar",
+      "aria-label": t6,
+      className: "absolute top-2 right-2 rounded-lg p-0.5 opacity-0 transition-opacity group-focus-within/visual:opacity-100 group-hover/visual:opacity-100 has-[[data-popup-open]]:opacity-100 pointer-coarse:opacity-100",
+      children: t21
+    });
+    $[53] = t21;
+    $[54] = t6;
+    $[55] = t22;
+  } else {
+    t22 = $[55];
+  }
+  let t23;
+  if ($[56] !== t22 || $[57] !== t5) {
+    t23 = /*#__PURE__*/_jsxs("div", {
+      className: "group/visual relative",
+      children: [t5, t22]
+    });
+    $[56] = t22;
+    $[57] = t5;
+    $[58] = t23;
+  } else {
+    t23 = $[58];
+  }
+  let t24;
+  if ($[59] !== t23 || $[60] !== t3 || $[61] !== t4) {
+    t24 = /*#__PURE__*/_jsx(ErrorBoundary, {
+      label: t3,
+      resetKeys: t4,
+      compact: true,
+      className: "relative rounded-lg",
+      children: t23
+    });
+    $[59] = t23;
+    $[60] = t3;
+    $[61] = t4;
+    $[62] = t24;
+  } else {
+    t24 = $[62];
+  }
+  return t24;
 }

package/dist/chat/ui/rows/row-rhythm.js

@@ -4,13 +4,15 @@ import { isBlock } from '../../logic/timeline.js';
 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 has no
- * margin of its 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.
+ * 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.
  */
 export function rowRhythm(row, previous) {
   const question = row.kind === 'user';
-  const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || previous.kind === 'visual');
+  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)');
 }
 /*

package/dist/host.d.ts

@@ -2,8 +2,9 @@ import { type ComponentProps, type ComponentType, type ReactNode, type RefObject
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { Highlighter, ThemeRegistration } from 'shiki';
+import type { LucideIcon } from 'lucide-react';
 import type { EditorEngine } from '@adecore/editor';
-import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatGoalAction, ChatItem, ChatSubagentItem, ChatUiChoicePayload, ChatUiQueryPayload, ChatUiQueryReading, ChatUiLinkPayload, ChatUiLinkReading, ProviderPlatform } from '@adecore/agent-contracts';
+import type { AgentKind, ChatAttachment, ChatCheckpointDiff, ChatConfigurePayload, ChatGoalAction, ChatItem, ChatSubagentItem, ChatUiChoicePayload, ChatUiQueryPayload, ChatUiQueryReading, ChatUiLinkPayload, ChatUiLinkReading, ChatVisual, ProviderPlatform } from '@adecore/agent-contracts';
 import type { Referables } from './chat/chat-references.js';
 import type { TimelineRow } from './chat/logic/timeline.js';
 import type { FindReveal } from './chat/ui/find-reveal.js';
@@ -121,6 +122,14 @@ export interface ThreadCard {
 export interface VisualHost {
     frameUrl: string;
     openLink(url: string): void;
+    actions?(scopeId: string, chatId: string, visual: ChatVisual): readonly HostMenuAction[];
+}
+export interface HostMenuAction {
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    disabled?: boolean;
+    run(): void;
 }
 export interface ReplyAuthor {
     name: string;
@@ -201,6 +210,7 @@ export interface ChatHost {
         read(scopeId: string, chatId: string, attachmentId: string): Promise<Blob>;
         open?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): void;
         saveToProject?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): Promise<string | null>;
+        actions?(scopeId: string, chatId: string, attachment: ChatAttachment): readonly HostMenuAction[];
     };
     ReadImage: ComponentType<{
         path: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, type UiModelViewProps, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
+export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type HostMenuAction, type ReplyAuthor, type ChatHost, type UiMapSource, type UiModelViewProps, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
 export { type ChatScope, ChatScopeContext, useChatScope } from './scope.js';
 export { type ChatRequestMap, type ChatEventMap, type ChatTransportStatus, type ChatTransport, ChatTransportError, errorCode, isConnectionError } from './transport.js';
 export { portTransport, type PortTransport } from './port-transport.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.37.3",
+  "version": "0.38.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.37.3",
-    "@adecore/editor": "0.37.3",
-    "@adecore/editor-react": "0.37.3",
-    "@adecore/intelligent-ui": "0.37.3",
-    "@adecore/merge": "0.37.3",
+    "@adecore/agent-contracts": "0.38.0",
+    "@adecore/editor": "0.38.0",
+    "@adecore/editor-react": "0.38.0",
+    "@adecore/intelligent-ui": "0.38.0",
+    "@adecore/merge": "0.38.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.37.3",
+    "@adecore/ui": "^0.38.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.37.3",
+    "@adecore/ui": "0.38.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/logic/visual-height.ts

@@ -1,7 +1,7 @@
 import { VISUAL_LIMITS, visualFrameHeight, type ChatVisual } from '@adecore/agent-contracts/visual';
 
 /* A frame before anything measured its page: room for a chart, never taller than the page may grow. */
-const DEFAULT_HEIGHT_PX = 240;
+export const DEFAULT_HEIGHT_PX = 240;
 /* Plenty for the visuals of a long session; the oldest goes first. */
 const REMEMBERED_HEIGHTS = 500;
 // Stay within browser layout coordinates even if a page reports a bogus finite size.

package/src/chat/ui/HostMenuItems.tsx

@@ -0,0 +1,11 @@
+import { Icon, Menu } from '@adecore/ui';
+import type { HostMenuAction } from '../../host';
+
+/* The items a host adds to a menu of the chat's, in the order it gave them. */
+export function HostMenuItems({ actions }: { actions: readonly HostMenuAction[] }) {
+    return actions.map((action) => (
+        <Menu.Item key={action.id} disabled={action.disabled} onClick={() => action.run()}>
+            {action.icon !== undefined && <Icon icon={action.icon} size={14} />} {action.label}
+        </Menu.Item>
+    ));
+}