@adecore/agents-react 0.37.3 → 0.38.0

package/dist/chat/logic/visual-height.d.ts

@@ -1,4 +1,5 @@
 import { type ChatVisual } from '@adecore/agent-contracts/visual';
+export declare const DEFAULT_HEIGHT_PX = 240;
 export declare function clampVisualHeight(visual: Pick<ChatVisual, 'maxHeight'>, height: number): number;
 export declare function visualContentHeight(height: number): number;
 export declare function initialVisualContentHeight(visual: Pick<ChatVisual, 'id' | 'heights'>, width: number): number;

package/dist/chat/logic/visual-height.js

@@ -1,6 +1,6 @@
 import { VISUAL_LIMITS, visualFrameHeight } 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/dist/chat/ui/HostMenuItems.d.ts

@@ -0,0 +1,4 @@
+import type { HostMenuAction } from '../../host.js';
+export declare function HostMenuItems({ actions }: {
+    actions: readonly HostMenuAction[];
+}): import("react").JSX.Element[];

package/dist/chat/ui/HostMenuItems.js

@@ -0,0 +1,15 @@
+import { Icon, Menu } from '@adecore/ui';
+/* The items a host adds to a menu of the chat's, in the order it gave them. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function HostMenuItems({
+  actions
+}) {
+  return actions.map(action => /*#__PURE__*/_jsxs(Menu.Item, {
+    disabled: action.disabled,
+    onClick: () => action.run(),
+    children: [action.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+      icon: action.icon,
+      size: 14
+    }), " ", action.label]
+  }, action.id));
+}

package/dist/chat/ui/VisualFrame.d.ts

@@ -5,4 +5,12 @@ export interface VisualFrameProps {
     fill?: boolean;
     className?: string;
 }
+export interface VisualPageFrameProps {
+    page: () => Promise<string>;
+    title: string;
+    maxHeight?: number;
+    fill?: boolean;
+    className?: string;
+}
 export declare function VisualFrame({ chatId, visual, fill, className }: VisualFrameProps): import("react").JSX.Element;
+export declare function VisualPageFrame({ maxHeight, ...props }: VisualPageFrameProps): import("react").JSX.Element;

package/dist/chat/ui/VisualFrame.js

@@ -1,12 +1,12 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { visualThemeFragment } from '@adecore/agent-contracts/visual';
+import { VISUAL_LIMITS, visualThemeFragment } from '@adecore/agent-contracts/visual';
 import { Spinner, useMeasuredWidth } from '@adecore/ui';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
-import { initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height.js';
+import { DEFAULT_HEIGHT_PX, initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height.js';
 import { VisualBridge } from '../visual-bridge.js';
 import { VisualViewportController } from '../visual-viewport.js';
 import { useVisualTheme } from './visual-theme.js';
@@ -19,13 +19,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function personActsIn(frame) {
   return frame.ownerDocument.activeElement === frame && navigator.userActivation?.isActive !== false;
 }
-/*
- * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
- * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
- * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
- */
+const defaultHeight = () => DEFAULT_HEIGHT_PX;
+/* A visual of a chat, its page read from the chat's attachments under the visual's id. */
 export function VisualFrame(t0) {
-  const $ = _c(65);
+  const $ = _c(17);
   const {
     chatId,
     visual,
@@ -34,13 +31,123 @@ export function VisualFrame(t0) {
   } = t0;
   const fill = t1 === undefined ? false : t1;
   const {
-    visuals,
     attachments
   } = useChatHost();
+  const scope = useChatScope();
+  let t2;
+  if ($[0] !== attachments || $[1] !== chatId || $[2] !== scope.id || $[3] !== visual.id) {
+    t2 = () => attachments.read(scope.id, chatId, visual.id).then(_temp);
+    $[0] = attachments;
+    $[1] = chatId;
+    $[2] = scope.id;
+    $[3] = visual.id;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const page = t2;
+  let t3;
+  if ($[5] !== visual) {
+    t3 = width => initialVisualContentHeight(visual, width);
+    $[5] = visual;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== visual.id) {
+    t4 = (width_0, height) => rememberVisualHeight(visual.id, width_0, height);
+    $[7] = visual.id;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== className || $[10] !== fill || $[11] !== page || $[12] !== t3 || $[13] !== t4 || $[14] !== visual.maxHeight || $[15] !== visual.title) {
+    t5 = /*#__PURE__*/_jsx(PageFrame, {
+      page: page,
+      title: visual.title,
+      maxHeight: visual.maxHeight,
+      fill: fill,
+      className: className,
+      initialHeight: t3,
+      onHeight: t4
+    });
+    $[9] = className;
+    $[10] = fill;
+    $[11] = page;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = visual.maxHeight;
+    $[15] = visual.title;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+/*
+ * A visual's page outside a chat thread, such as one an app kept: the same sandboxed frame, theme and
+ * links as in a thread, with the page read through `page`. Draws nothing while the host has no `visuals`.
+ */
+function _temp(blob) {
+  return blob.text();
+}
+export function VisualPageFrame(t0) {
+  const $ = _c(6);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      maxHeight: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const maxHeight = t1 === undefined ? VISUAL_LIMITS.maxHeight : t1;
+  let t2;
+  if ($[3] !== maxHeight || $[4] !== props) {
+    t2 = /*#__PURE__*/_jsx(PageFrame, {
+      ...props,
+      maxHeight: maxHeight,
+      initialHeight: defaultHeight
+    });
+    $[3] = maxHeight;
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+/*
+ * One page in a frame that loads the app's sandbox host page; the bridge hands it the page and the
+ * theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even when
+ * the host page is served on the app's own. Its box keeps one height while it loads or fails.
+ */
+function PageFrame(t0) {
+  const $ = _c(61);
+  const {
+    page,
+    title,
+    maxHeight,
+    fill: t1,
+    className,
+    initialHeight,
+    onHeight
+  } = t0;
+  const fill = t1 === undefined ? false : t1;
+  const {
+    visuals
+  } = useChatHost();
   const {
     t
   } = useTranslation("agent-chat");
-  const scope = useChatScope();
   const frameUrl = visuals?.frameUrl ?? null;
   const boxRef = useRef(null);
   const frameRef = useRef(null);
@@ -63,6 +170,7 @@ export function VisualFrame(t0) {
   const setBox = t2;
   const theme = useVisualTheme(boxRef);
   const widthRef = useRef(width);
+  const onHeightRef = useRef(onHeight);
   const [reported, setReported] = useState(null);
   const [drawn, setDrawn] = useState(null);
   const [failed, setFailed] = useState(false);
@@ -74,11 +182,11 @@ export function VisualFrame(t0) {
     });
   }
   let t3;
-  if ($[2] !== fill || $[3] !== reported || $[4] !== visual || $[5] !== width) {
-    t3 = fill || width === 0 ? undefined : reported ?? initialVisualContentHeight(visual, width);
+  if ($[2] !== fill || $[3] !== initialHeight || $[4] !== reported || $[5] !== width) {
+    t3 = fill || width === 0 ? undefined : reported ?? initialHeight(width);
     $[2] = fill;
-    $[3] = reported;
-    $[4] = visual;
+    $[3] = initialHeight;
+    $[4] = reported;
     $[5] = width;
     $[6] = t3;
   } else {
@@ -87,22 +195,24 @@ export function VisualFrame(t0) {
   const height = t3;
   let t4;
   let t5;
-  if ($[7] !== width) {
+  if ($[7] !== onHeight || $[8] !== width) {
     t4 = () => {
       widthRef.current = width;
+      onHeightRef.current = onHeight;
     };
-    t5 = [width];
-    $[7] = width;
-    $[8] = t4;
-    $[9] = t5;
+    t5 = [width, onHeight];
+    $[7] = onHeight;
+    $[8] = width;
+    $[9] = t4;
+    $[10] = t5;
   } else {
-    t4 = $[8];
-    t5 = $[9];
+    t4 = $[9];
+    t5 = $[10];
   }
   useLayoutEffect(t4, t5);
   let t6;
   let t7;
-  if ($[10] !== attachments || $[11] !== chatId || $[12] !== fill || $[13] !== opening || $[14] !== scope.id || $[15] !== visual.id || $[16] !== visual.maxHeight || $[17] !== visuals) {
+  if ($[11] !== fill || $[12] !== maxHeight || $[13] !== opening || $[14] !== page || $[15] !== visuals) {
     t6 = () => {
       const frame = frameRef.current;
       if (opening === null || frame === null) {
@@ -111,9 +221,9 @@ export function VisualFrame(t0) {
       const bridge = new VisualBridge({
         frame: () => frame.contentWindow,
         visual: {
-          maxHeight: visual.maxHeight
+          maxHeight
         },
-        page: attachments.read(scope.id, chatId, visual.id).then(_temp),
+        page: page(),
         theme: opening.theme,
         mayOpenLink: () => personActsIn(frame),
         openLink: url => visuals?.openLink(url),
@@ -122,7 +232,7 @@ export function VisualFrame(t0) {
             return;
           }
           setReported(next);
-          rememberVisualHeight(visual.id, widthRef.current, next);
+          onHeightRef.current?.(widthRef.current, next);
         },
         ...(!fill ? {
           onViewportReady: () => setViewportReady(true),
@@ -141,24 +251,21 @@ export function VisualFrame(t0) {
         bridgeRef.current = null;
       };
     };
-    t7 = [opening, scope.id, chatId, visual.id, visual.maxHeight, fill, visuals, attachments];
-    $[10] = attachments;
-    $[11] = chatId;
-    $[12] = fill;
+    t7 = [opening, page, maxHeight, fill, visuals];
+    $[11] = fill;
+    $[12] = maxHeight;
     $[13] = opening;
-    $[14] = scope.id;
-    $[15] = visual.id;
-    $[16] = visual.maxHeight;
-    $[17] = visuals;
-    $[18] = t6;
-    $[19] = t7;
+    $[14] = page;
+    $[15] = visuals;
+    $[16] = t6;
+    $[17] = t7;
   } else {
-    t6 = $[18];
-    t7 = $[19];
+    t6 = $[16];
+    t7 = $[17];
   }
   useLayoutEffect(t6, t7);
   let t8;
-  if ($[20] !== fill || $[21] !== viewportReady) {
+  if ($[18] !== fill || $[19] !== viewportReady) {
     t8 = () => {
       const box = boxRef.current;
       const viewport = viewportRef.current;
@@ -174,98 +281,96 @@ export function VisualFrame(t0) {
         controllerRef.current = null;
       };
     };
-    $[20] = fill;
-    $[21] = viewportReady;
-    $[22] = t8;
+    $[18] = fill;
+    $[19] = viewportReady;
+    $[20] = t8;
   } else {
-    t8 = $[22];
+    t8 = $[20];
   }
   let t9;
-  if ($[23] !== chatId || $[24] !== fill || $[25] !== opening || $[26] !== scope.id || $[27] !== viewportReady || $[28] !== visual.id || $[29] !== visual.maxHeight) {
-    t9 = [fill, viewportReady, opening, scope.id, chatId, visual.id, visual.maxHeight];
-    $[23] = chatId;
-    $[24] = fill;
-    $[25] = opening;
-    $[26] = scope.id;
-    $[27] = viewportReady;
-    $[28] = visual.id;
-    $[29] = visual.maxHeight;
-    $[30] = t9;
+  if ($[21] !== fill || $[22] !== maxHeight || $[23] !== opening || $[24] !== page || $[25] !== viewportReady) {
+    t9 = [fill, viewportReady, opening, page, maxHeight];
+    $[21] = fill;
+    $[22] = maxHeight;
+    $[23] = opening;
+    $[24] = page;
+    $[25] = viewportReady;
+    $[26] = t9;
   } else {
-    t9 = $[30];
+    t9 = $[26];
   }
   useLayoutEffect(t8, t9);
   let t10;
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
     t10 = () => controllerRef.current?.refresh();
-    $[31] = t10;
+    $[27] = t10;
   } else {
-    t10 = $[31];
+    t10 = $[27];
   }
   let t11;
-  if ($[32] !== height || $[33] !== width) {
+  if ($[28] !== height || $[29] !== width) {
     t11 = [height, width];
-    $[32] = height;
-    $[33] = width;
-    $[34] = t11;
+    $[28] = height;
+    $[29] = width;
+    $[30] = t11;
   } else {
-    t11 = $[34];
+    t11 = $[30];
   }
   useLayoutEffect(t10, t11);
   let t12;
   let t13;
-  if ($[35] !== theme) {
+  if ($[31] !== theme) {
     t12 = () => {
       if (theme !== null) {
         bridgeRef.current?.setTheme(theme);
       }
     };
     t13 = [theme];
-    $[35] = theme;
-    $[36] = t12;
-    $[37] = t13;
+    $[31] = theme;
+    $[32] = t12;
+    $[33] = t13;
   } else {
-    t12 = $[36];
-    t13 = $[37];
+    t12 = $[32];
+    t13 = $[33];
   }
   useEffect(t12, t13);
   const t14 = fill ? "absolute inset-0" : "relative w-full";
   let t15;
-  if ($[38] !== className || $[39] !== t14) {
+  if ($[34] !== className || $[35] !== t14) {
     t15 = clsx(t14, className);
-    $[38] = className;
-    $[39] = t14;
-    $[40] = t15;
+    $[34] = className;
+    $[35] = t14;
+    $[36] = t15;
   } else {
-    t15 = $[40];
+    t15 = $[36];
   }
   let t16;
-  if ($[41] !== height) {
+  if ($[37] !== height) {
     t16 = {
       height
     };
-    $[41] = height;
-    $[42] = t16;
+    $[37] = height;
+    $[38] = t16;
   } else {
-    t16 = $[42];
+    t16 = $[38];
   }
   const t17 = fill ? "absolute inset-0" : "sticky top-0 w-full";
   let t18;
-  if ($[43] !== fill) {
+  if ($[39] !== fill) {
     t18 = fill ? undefined : {
       height: "100%"
     };
-    $[43] = fill;
-    $[44] = t18;
+    $[39] = fill;
+    $[40] = t18;
   } else {
-    t18 = $[44];
+    t18 = $[40];
   }
   let t19;
-  if ($[45] !== drawn || $[46] !== failed || $[47] !== opening || $[48] !== visual.title) {
+  if ($[41] !== drawn || $[42] !== failed || $[43] !== opening || $[44] !== title) {
     t19 = opening !== null && /*#__PURE__*/_jsx("iframe", {
       ref: frameRef,
       src: opening.src,
-      title: visual.title,
+      title: title,
       loading: "lazy",
       sandbox: "allow-scripts allow-forms",
       className: clsx("block size-full border-0", failed && "invisible"),
@@ -274,72 +379,69 @@ export function VisualFrame(t0) {
       },
       onLoad: () => bridgeRef.current?.loaded()
     });
-    $[45] = drawn;
-    $[46] = failed;
-    $[47] = opening;
-    $[48] = visual.title;
-    $[49] = t19;
+    $[41] = drawn;
+    $[42] = failed;
+    $[43] = opening;
+    $[44] = title;
+    $[45] = t19;
   } else {
-    t19 = $[49];
+    t19 = $[45];
   }
   let t20;
-  if ($[50] !== drawn || $[51] !== failed || $[52] !== t || $[53] !== visual.title) {
+  if ($[46] !== drawn || $[47] !== failed || $[48] !== t || $[49] !== title) {
     t20 = failed ? /*#__PURE__*/_jsx("p", {
       className: "absolute inset-0 grid place-items-center px-4 text-center text-xs text-text-muted",
       children: t("visuals.failed", {
-        title: visual.title
+        title
       })
     }) : drawn === null && /*#__PURE__*/_jsx("span", {
       className: "chat-visual-wait pointer-events-none absolute inset-0 grid place-items-center text-text-faint",
       children: /*#__PURE__*/_jsx(Spinner, {
         size: 16,
         label: t("visuals.loading", {
-          title: visual.title
+          title
         })
       })
     });
-    $[50] = drawn;
-    $[51] = failed;
-    $[52] = t;
-    $[53] = visual.title;
-    $[54] = t20;
+    $[46] = drawn;
+    $[47] = failed;
+    $[48] = t;
+    $[49] = title;
+    $[50] = t20;
   } else {
-    t20 = $[54];
+    t20 = $[50];
   }
   let t21;
-  if ($[55] !== t17 || $[56] !== t18 || $[57] !== t19 || $[58] !== t20) {
+  if ($[51] !== t17 || $[52] !== t18 || $[53] !== t19 || $[54] !== t20) {
     t21 = /*#__PURE__*/_jsxs("div", {
       ref: viewportRef,
       className: t17,
       style: t18,
       children: [t19, t20]
     });
-    $[55] = t17;
-    $[56] = t18;
-    $[57] = t19;
-    $[58] = t20;
-    $[59] = t21;
+    $[51] = t17;
+    $[52] = t18;
+    $[53] = t19;
+    $[54] = t20;
+    $[55] = t21;
   } else {
-    t21 = $[59];
+    t21 = $[55];
   }
   let t22;
-  if ($[60] !== setBox || $[61] !== t15 || $[62] !== t16 || $[63] !== t21) {
+  if ($[56] !== setBox || $[57] !== t15 || $[58] !== t16 || $[59] !== t21) {
     t22 = /*#__PURE__*/_jsx("div", {
       ref: setBox,
       className: t15,
       style: t16,
       children: t21
     });
-    $[60] = setBox;
-    $[61] = t15;
-    $[62] = t16;
-    $[63] = t21;
-    $[64] = t22;
+    $[56] = setBox;
+    $[57] = t15;
+    $[58] = t16;
+    $[59] = t21;
+    $[60] = t22;
   } else {
-    t22 = $[64];
+    t22 = $[60];
   }
   return t22;
-}
-function _temp(blob) {
-  return blob.text();
 }

package/dist/chat/ui/index.d.ts

@@ -21,6 +21,7 @@ export { Timeline } from './Timeline.js';
 export { TimelineMenuPopup } from './TimelineMenu.js';
 export { default as UnifiedDiff } from './UnifiedDiff.js';
 export { UploadThumb } from './UploadThumb.js';
+export { VisualPageFrame, type VisualPageFrameProps } from './VisualFrame.js';
 export { WelcomeGreeting } from './Welcome.js';
 export { externalChange, composerEditorExtensions } from './composer/editor.js';
 export { createDiffSyntaxRuntime, diffSyntaxRuntime, type DiffSyntaxRuntime, type DiffSyntaxRuntimeOptions, type DiffSyntaxSession, type DiffSyntaxMapping, type DiffSourceTokenSession, diffSourceTokens } from './diff-syntax.js';

package/dist/chat/ui/index.js

@@ -22,6 +22,7 @@ export { Timeline } from './Timeline.js';
 export { TimelineMenuPopup } from './TimelineMenu.js';
 export { default as UnifiedDiff } from './UnifiedDiff.js';
 export { UploadThumb } from './UploadThumb.js';
+export { VisualPageFrame } from './VisualFrame.js';
 export { WelcomeGreeting } from './Welcome.js';
 export { externalChange, composerEditorExtensions } from './composer/editor.js';
 export { createDiffSyntaxRuntime, diffSyntaxRuntime, diffSourceTokens } from './diff-syntax.js';

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

@@ -12,6 +12,7 @@ import { attachmentAspect, generatedImageView } from '../../logic/generated-imag
 import { toolStartedAt } from '../../logic/tools.js';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips.js';
 import { useFileLinkCwd, useOpenFileLink } from '../file-links.js';
+import { HostMenuItems } from '../HostMenuItems.js';
 import { ImageThumb } from '../ImageView.js';
 import { ROW_GUTTER } from '../icons.js';
 import { RunningFor, WorkRow } from './WorkRows.js';
@@ -299,6 +300,7 @@ function ReadyImage({
     open,
     saveToProject
   } = attachments;
+  const extra = attachments.actions?.(scopeId, chatId, attachment) ?? [];
   const detail = [attachment.width !== undefined && attachment.height !== undefined ? t('generatedImage.dimensions', {
     width: attachment.width,
     height: attachment.height
@@ -359,21 +361,23 @@ function ReadyImage({
               size: "sm",
               label: t('generatedImage.openLarge'),
               onClick: () => setLightbox(true)
-            }), prompt !== null && /*#__PURE__*/_jsxs(Menu.Root, {
+            }), (prompt !== null || extra.length > 0) && /*#__PURE__*/_jsxs(Menu.Root, {
               children: [/*#__PURE__*/_jsx(IconButton, {
                 icon: Ellipsis,
                 size: "sm",
                 label: t('generatedImage.more'),
                 render: /*#__PURE__*/_jsx(Menu.Trigger, {})
-              }), /*#__PURE__*/_jsx(Menu.Popup, {
+              }), /*#__PURE__*/_jsxs(Menu.Popup, {
                 align: "end",
-                children: /*#__PURE__*/_jsxs(Menu.Item, {
+                children: [prompt !== null && /*#__PURE__*/_jsxs(Menu.Item, {
                   onClick: () => copyText(prompt),
                   children: [/*#__PURE__*/_jsx(Icon, {
                     icon: Copy,
                     size: 14
                   }), " ", t('generatedImage.copyPrompt')]
-                })
+                }), /*#__PURE__*/_jsx(HostMenuItems, {
+                  actions: extra
+                })]
               })]
             })]
           })