@adecore/agents-react 0.31.11 → 0.32.0

package/dist/chat/ui/ImageView.js

@@ -1,87 +1,643 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
 import { ButtonGroup, CloseButton, Dialog, Icon, IconButton, Tooltip } from '@adecore/ui';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
 // One wheel notch, small enough that a trackpad flick does not jump past the detail it aimed at.
 const WHEEL_STEP = 1.0015;
 const BUTTON_STEP = 1.5;
-const START = { scale: 1, x: 0, y: 0 };
+const START = {
+  scale: 1,
+  x: 0,
+  y: 0
+};
 /*
  * Zooms around a point, which is what makes a wheel over a detail feel like a magnifier instead of
  * a slider. The pixel under the pointer stays where it is while everything else moves away from it.
  * `x` and `y` are offsets from the middle of the frame, so a scale of 1 is always centered.
  */
 function zoomed(view, factor, pointX, pointY) {
-    const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
-    if (scale === MIN_SCALE) {
-        return START;
-    }
-    const ratio = scale / view.scale;
-    return { scale, x: pointX - (pointX - view.x) * ratio, y: pointY - (pointY - view.y) * ratio };
+  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, view.scale * factor));
+  if (scale === MIN_SCALE) {
+    return START;
+  }
+  const ratio = scale / view.scale;
+  return {
+    scale,
+    x: pointX - (pointX - view.x) * ratio,
+    y: pointY - (pointY - view.y) * ratio
+  };
 }
 /* An image on its own, large: the wheel and the buttons zoom, dragging pans, Escape closes. */
-function Lightbox({ src, alt, open, onOpenChange, actions }) {
-    const { t } = useTranslation('agent-chat');
-    const [view, setView] = useState(START);
-    // The alt of an image an agent read is its path; the header shows the file and keeps the path on a tooltip.
-    const name = alt.slice(alt.lastIndexOf('/') + 1);
-    const title = _jsx("span", { className: "min-w-0 truncate text-xs text-text", children: name });
-    const frameRef = useRef(null);
-    const dragRef = useRef(null);
-    if (!open && view !== START) {
-        setView(START);
-    }
-    /* Where the pointer sits against the middle of the frame, which is what the transform counts from. */
-    const pointIn = (event) => {
-        const rect = frameRef.current?.getBoundingClientRect();
-        if (!rect) {
-            return { x: 0, y: 0 };
-        }
-        return { x: event.clientX - rect.left - rect.width / 2, y: event.clientY - rect.top - rect.height / 2 };
+function Lightbox(t0) {
+  const $ = _c(83);
+  const {
+    src,
+    alt,
+    open,
+    onOpenChange,
+    actions
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [view, setView] = useState(START);
+  let t1;
+  if ($[0] !== alt) {
+    t1 = alt.slice(alt.lastIndexOf("/") + 1);
+    $[0] = alt;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const name = t1;
+  let t2;
+  if ($[2] !== name) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 truncate text-xs text-text",
+      children: name
+    });
+    $[2] = name;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const title = t2;
+  const frameRef = useRef(null);
+  const dragRef = useRef(null);
+  if (!open && view !== START) {
+    setView(START);
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = event => {
+      const rect = frameRef.current?.getBoundingClientRect();
+      if (!rect) {
+        return {
+          x: 0,
+          y: 0
+        };
+      }
+      return {
+        x: event.clientX - rect.left - rect.width / 2,
+        y: event.clientY - rect.top - rect.height / 2
+      };
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const pointIn = t3;
+  let t4;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = factor => setView(current => zoomed(current, factor, 0, 0));
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const zoomButton = t4;
+  let t5;
+  if ($[6] !== alt) {
+    t5 = /*#__PURE__*/_jsx(Dialog.Title, {
+      className: "sr-only",
+      children: alt
+    });
+    $[6] = alt;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== alt || $[9] !== name || $[10] !== title) {
+    t6 = name === alt ? title : /*#__PURE__*/_jsx(Tooltip, {
+      label: alt,
+      children: title
+    });
+    $[8] = alt;
+    $[9] = name;
+    $[10] = title;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      className: "grow"
+    });
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== view.scale) {
+    t8 = Math.round(view.scale * 100);
+    $[13] = view.scale;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("span", {
+      className: "tabular-nums text-xs text-text-faint",
+      children: [t8, "%"]
+    });
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /*#__PURE__*/_jsx("span", {});
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== t) {
+    t11 = t("image.zoomOut");
+    $[18] = t;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  const t12 = view.scale <= MIN_SCALE;
+  let t13;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = () => zoomButton(1 / BUTTON_STEP);
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== t11 || $[22] !== t12) {
+    t14 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Minus,
+      size: "sm",
+      label: t11,
+      disabled: t12,
+      onClick: t13
+    });
+    $[21] = t11;
+    $[22] = t12;
+    $[23] = t14;
+  } else {
+    t14 = $[23];
+  }
+  let t15;
+  if ($[24] !== t) {
+    t15 = t("image.zoomIn");
+    $[24] = t;
+    $[25] = t15;
+  } else {
+    t15 = $[25];
+  }
+  const t16 = view.scale >= MAX_SCALE;
+  let t17;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = () => zoomButton(BUTTON_STEP);
+    $[26] = t17;
+  } else {
+    t17 = $[26];
+  }
+  let t18;
+  if ($[27] !== t15 || $[28] !== t16) {
+    t18 = /*#__PURE__*/_jsx(IconButton, {
+      icon: Plus,
+      size: "sm",
+      label: t15,
+      disabled: t16,
+      onClick: t17
+    });
+    $[27] = t15;
+    $[28] = t16;
+    $[29] = t18;
+  } else {
+    t18 = $[29];
+  }
+  let t19;
+  if ($[30] !== t) {
+    t19 = t("image.reset");
+    $[30] = t;
+    $[31] = t19;
+  } else {
+    t19 = $[31];
+  }
+  const t20 = view.scale === MIN_SCALE;
+  let t21;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = () => setView(START);
+    $[32] = t21;
+  } else {
+    t21 = $[32];
+  }
+  let t22;
+  if ($[33] !== t19 || $[34] !== t20) {
+    t22 = /*#__PURE__*/_jsx(IconButton, {
+      icon: RotateCcw,
+      size: "sm",
+      label: t19,
+      disabled: t20,
+      onClick: t21
+    });
+    $[33] = t19;
+    $[34] = t20;
+    $[35] = t22;
+  } else {
+    t22 = $[35];
+  }
+  let t23;
+  if ($[36] !== t14 || $[37] !== t18 || $[38] !== t22) {
+    t23 = /*#__PURE__*/_jsxs(ButtonGroup, {
+      render: t10,
+      children: [t14, t18, t22]
+    });
+    $[36] = t14;
+    $[37] = t18;
+    $[38] = t22;
+    $[39] = t23;
+  } else {
+    t23 = $[39];
+  }
+  let t24;
+  if ($[40] !== t) {
+    t24 = t("common.action.close");
+    $[40] = t;
+    $[41] = t24;
+  } else {
+    t24 = $[41];
+  }
+  let t25;
+  if ($[42] !== t24) {
+    t25 = /*#__PURE__*/_jsx(CloseButton, {
+      label: t24,
+      kbd: "esc",
+      className: "ml-1",
+      dialog: true
+    });
+    $[42] = t24;
+    $[43] = t25;
+  } else {
+    t25 = $[43];
+  }
+  let t26;
+  if ($[44] !== actions || $[45] !== t23 || $[46] !== t25 || $[47] !== t6 || $[48] !== t9) {
+    t26 = /*#__PURE__*/_jsxs("div", {
+      className: "flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3",
+      children: [t6, t7, t9, t23, actions, t25]
+    });
+    $[44] = actions;
+    $[45] = t23;
+    $[46] = t25;
+    $[47] = t6;
+    $[48] = t9;
+    $[49] = t26;
+  } else {
+    t26 = $[49];
+  }
+  const t27 = view.scale > MIN_SCALE && "cursor-grab";
+  let t28;
+  if ($[50] !== t27) {
+    t28 = clsx("lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken", t27);
+    $[50] = t27;
+    $[51] = t28;
+  } else {
+    t28 = $[51];
+  }
+  let t29;
+  let t30;
+  if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+    t29 = e => {
+      const point = pointIn(e);
+      setView(current_0 => zoomed(current_0, WHEEL_STEP ** -e.deltaY, point.x, point.y));
+    };
+    t30 = e_0 => {
+      const point_0 = pointIn(e_0);
+      setView(current_1 => current_1.scale > MIN_SCALE ? START : zoomed(current_1, 2, point_0.x, point_0.y));
+    };
+    $[52] = t29;
+    $[53] = t30;
+  } else {
+    t29 = $[52];
+    t30 = $[53];
+  }
+  let t31;
+  if ($[54] !== view.scale || $[55] !== view.x || $[56] !== view.y) {
+    t31 = e_1 => {
+      if (view.scale <= MIN_SCALE) {
+        return;
+      }
+      e_1.currentTarget.setPointerCapture(e_1.pointerId);
+      dragRef.current = {
+        pointerId: e_1.pointerId,
+        x: e_1.clientX - view.x,
+        y: e_1.clientY - view.y
+      };
+    };
+    $[54] = view.scale;
+    $[55] = view.x;
+    $[56] = view.y;
+    $[57] = t31;
+  } else {
+    t31 = $[57];
+  }
+  let t32;
+  let t33;
+  let t34;
+  if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = e_2 => {
+      const drag = dragRef.current;
+      if (drag?.pointerId === e_2.pointerId) {
+        setView(current_2 => ({
+          ...current_2,
+          x: e_2.clientX - drag.x,
+          y: e_2.clientY - drag.y
+        }));
+      }
+    };
+    t33 = () => {
+      dragRef.current = null;
     };
-    const zoomButton = (factor) => setView((current) => zoomed(current, factor, 0, 0));
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Popup, { backdropClassName: "lightbox-backdrop", className: "flex min-w-72 flex-col", children: [_jsx(Dialog.Title, { className: "sr-only", children: alt }), _jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border pr-2 pl-3", children: [name === alt ? title : _jsx(Tooltip, { label: alt, children: title }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "tabular-nums text-xs text-text-faint", children: [Math.round(view.scale * 100), "%"] }), _jsxs(ButtonGroup, { render: _jsx("span", {}), children: [_jsx(IconButton, { icon: Minus, size: "sm", label: t('image.zoomOut'), disabled: view.scale <= MIN_SCALE, onClick: () => zoomButton(1 / BUTTON_STEP) }), _jsx(IconButton, { icon: Plus, size: "sm", label: t('image.zoomIn'), disabled: view.scale >= MAX_SCALE, onClick: () => zoomButton(BUTTON_STEP) }), _jsx(IconButton, { icon: RotateCcw, size: "sm", label: t('image.reset'), disabled: view.scale === MIN_SCALE, onClick: () => setView(START) })] }), actions, _jsx(CloseButton, { label: t('common.action.close'), kbd: "esc", className: "ml-1", dialog: true })] }), _jsx("div", { ref: frameRef, className: clsx('lightbox-frame grid place-items-center overflow-hidden bg-surface-sunken', view.scale > MIN_SCALE && 'cursor-grab'), onWheel: (e) => {
-                        const point = pointIn(e);
-                        setView((current) => zoomed(current, WHEEL_STEP ** -e.deltaY, point.x, point.y));
-                    }, onDoubleClick: (e) => {
-                        const point = pointIn(e);
-                        setView((current) => (current.scale > MIN_SCALE ? START : zoomed(current, 2, point.x, point.y)));
-                    }, onPointerDown: (e) => {
-                        if (view.scale <= MIN_SCALE) {
-                            return;
-                        }
-                        e.currentTarget.setPointerCapture(e.pointerId);
-                        dragRef.current = { pointerId: e.pointerId, x: e.clientX - view.x, y: e.clientY - view.y };
-                    }, onPointerMove: (e) => {
-                        const drag = dragRef.current;
-                        if (drag?.pointerId === e.pointerId) {
-                            setView((current) => ({ ...current, x: e.clientX - drag.x, y: e.clientY - drag.y }));
-                        }
-                    }, onPointerUp: () => {
-                        dragRef.current = null;
-                    }, onPointerCancel: () => {
-                        dragRef.current = null;
-                    }, children: _jsx("img", { src: src, alt: alt, draggable: false, className: "select-none", style: { transform: `translate(${Math.round(view.x)}px, ${Math.round(view.y)}px) scale(${view.scale})` } }) })] }) }));
+    t34 = () => {
+      dragRef.current = null;
+    };
+    $[58] = t32;
+    $[59] = t33;
+    $[60] = t34;
+  } else {
+    t32 = $[58];
+    t33 = $[59];
+    t34 = $[60];
+  }
+  let t35;
+  if ($[61] !== view.x) {
+    t35 = Math.round(view.x);
+    $[61] = view.x;
+    $[62] = t35;
+  } else {
+    t35 = $[62];
+  }
+  let t36;
+  if ($[63] !== view.y) {
+    t36 = Math.round(view.y);
+    $[63] = view.y;
+    $[64] = t36;
+  } else {
+    t36 = $[64];
+  }
+  const t37 = `translate(${t35}px, ${t36}px) scale(${view.scale})`;
+  let t38;
+  if ($[65] !== t37) {
+    t38 = {
+      transform: t37
+    };
+    $[65] = t37;
+    $[66] = t38;
+  } else {
+    t38 = $[66];
+  }
+  let t39;
+  if ($[67] !== alt || $[68] !== src || $[69] !== t38) {
+    t39 = /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt,
+      draggable: false,
+      className: "select-none",
+      style: t38
+    });
+    $[67] = alt;
+    $[68] = src;
+    $[69] = t38;
+    $[70] = t39;
+  } else {
+    t39 = $[70];
+  }
+  let t40;
+  if ($[71] !== t28 || $[72] !== t31 || $[73] !== t39) {
+    t40 = /*#__PURE__*/_jsx("div", {
+      ref: frameRef,
+      className: t28,
+      onWheel: t29,
+      onDoubleClick: t30,
+      onPointerDown: t31,
+      onPointerMove: t32,
+      onPointerUp: t33,
+      onPointerCancel: t34,
+      children: t39
+    });
+    $[71] = t28;
+    $[72] = t31;
+    $[73] = t39;
+    $[74] = t40;
+  } else {
+    t40 = $[74];
+  }
+  let t41;
+  if ($[75] !== t26 || $[76] !== t40 || $[77] !== t5) {
+    t41 = /*#__PURE__*/_jsxs(Dialog.Popup, {
+      backdropClassName: "lightbox-backdrop",
+      className: "flex min-w-72 flex-col",
+      children: [t5, t26, t40]
+    });
+    $[75] = t26;
+    $[76] = t40;
+    $[77] = t5;
+    $[78] = t41;
+  } else {
+    t41 = $[78];
+  }
+  let t42;
+  if ($[79] !== onOpenChange || $[80] !== open || $[81] !== t41) {
+    t42 = /*#__PURE__*/_jsx(Dialog.Root, {
+      open: open,
+      onOpenChange: onOpenChange,
+      children: t41
+    });
+    $[79] = onOpenChange;
+    $[80] = open;
+    $[81] = t41;
+    $[82] = t42;
+  } else {
+    t42 = $[82];
+  }
+  return t42;
 }
 /*
  * A thumbnail that opens the same image large. The button is the picture, so there is nothing to aim at.
  * The image is bytes where the host keeps them; until they are here a quiet square stands in for it.
  */
-export function ImageThumb({ source, alt, className, aspect, actions, open: openProp, onOpenChange }) {
-    const [ownOpen, setOwnOpen] = useState(false);
-    const open = openProp ?? ownOpen;
-    const setOpen = (next) => {
-        setOwnOpen(next);
-        onOpenChange?.(next);
+export function ImageThumb(t0) {
+  const $ = _c(37);
+  const {
+    source,
+    alt,
+    className,
+    aspect,
+    actions,
+    open: openProp,
+    onOpenChange
+  } = t0;
+  const [ownOpen, setOwnOpen] = useState(false);
+  const open = openProp ?? ownOpen;
+  let t1;
+  if ($[0] !== onOpenChange) {
+    t1 = next => {
+      setOwnOpen(next);
+      onOpenChange?.(next);
+    };
+    $[0] = onOpenChange;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const setOpen = t1;
+  const {
+    url: src,
+    failure
+  } = source;
+  let t2;
+  if ($[2] !== aspect) {
+    t2 = aspect === undefined ? undefined : {
+      aspectRatio: aspect
     };
-    const { url: src, failure } = source;
-    const ratio = aspect === undefined ? undefined : { aspectRatio: aspect };
-    if (src === null) {
-        return (_jsx("span", { className: clsx('grid place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint', aspect === undefined ? 'size-16' : 'w-full'), style: ratio, children: failure !== null && (_jsx(Tooltip, { label: failure, children: _jsx(Icon, { icon: ImageOff, size: 14 }) })) }));
+    $[2] = aspect;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const ratio = t2;
+  if (src === null) {
+    const t3 = aspect === undefined ? "size-16" : "w-full";
+    let t4;
+    if ($[4] !== t3) {
+      t4 = clsx("grid place-items-center rounded-lg border border-border bg-surface-sunken text-text-faint", t3);
+      $[4] = t3;
+      $[5] = t4;
+    } else {
+      t4 = $[5];
     }
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: clsx('block overflow-hidden rounded-lg border border-border', aspect !== undefined && 'w-full'), style: ratio, onClick: () => setOpen(true), children: _jsx("img", { src: src, alt: alt, className: clsx(aspect !== undefined && 'size-full object-contain', className) }) }), _jsx(Lightbox, { src: src, alt: alt, open: open, onOpenChange: setOpen, actions: actions })] }));
-}
+    let t5;
+    if ($[6] !== failure) {
+      t5 = failure !== null && /*#__PURE__*/_jsx(Tooltip, {
+        label: failure,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ImageOff,
+          size: 14
+        })
+      });
+      $[6] = failure;
+      $[7] = t5;
+    } else {
+      t5 = $[7];
+    }
+    let t6;
+    if ($[8] !== ratio || $[9] !== t4 || $[10] !== t5) {
+      t6 = /*#__PURE__*/_jsx("span", {
+        className: t4,
+        style: ratio,
+        children: t5
+      });
+      $[8] = ratio;
+      $[9] = t4;
+      $[10] = t5;
+      $[11] = t6;
+    } else {
+      t6 = $[11];
+    }
+    return t6;
+  }
+  const t3 = aspect !== undefined && "w-full";
+  let t4;
+  if ($[12] !== t3) {
+    t4 = clsx("block overflow-hidden rounded-lg border border-border", t3);
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== setOpen) {
+    t5 = () => setOpen(true);
+    $[14] = setOpen;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const t6 = aspect !== undefined && "size-full object-contain";
+  let t7;
+  if ($[16] !== className || $[17] !== t6) {
+    t7 = clsx(t6, className);
+    $[16] = className;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== alt || $[20] !== src || $[21] !== t7) {
+    t8 = /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt,
+      className: t7
+    });
+    $[19] = alt;
+    $[20] = src;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== ratio || $[24] !== t4 || $[25] !== t5 || $[26] !== t8) {
+    t9 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: t4,
+      style: ratio,
+      onClick: t5,
+      children: t8
+    });
+    $[23] = ratio;
+    $[24] = t4;
+    $[25] = t5;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  let t10;
+  if ($[28] !== actions || $[29] !== alt || $[30] !== open || $[31] !== setOpen || $[32] !== src) {
+    t10 = /*#__PURE__*/_jsx(Lightbox, {
+      src: src,
+      alt: alt,
+      open: open,
+      onOpenChange: setOpen,
+      actions: actions
+    });
+    $[28] = actions;
+    $[29] = alt;
+    $[30] = open;
+    $[31] = setOpen;
+    $[32] = src;
+    $[33] = t10;
+  } else {
+    t10 = $[33];
+  }
+  let t11;
+  if ($[34] !== t10 || $[35] !== t9) {
+    t11 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t9, t10]
+    });
+    $[34] = t10;
+    $[35] = t9;
+    $[36] = t11;
+  } else {
+    t11 = $[36];
+  }
+  return t11;
+}