@tutti-os/agent-gui 0.0.46 → 0.0.47

package/dist/{chunk-QT45WUPQ.js → chunk-XJXSR5XI.js}

@@ -1,14 +1,14 @@
 import {
   getOptionalAgentHostApi,
   useOptionalAgentHostApi
-} from "./chunk-TXXWUG2J.js";
-import {
-  translate,
-  useTranslation
-} from "./chunk-EIC7XS3C.js";
+} from "./chunk-VE6JY2TH.js";
 import {
   resolveAgentWorkspaceFileVisualKind
 } from "./chunk-PJP5BUU6.js";
+import {
+  translate,
+  useTranslation
+} from "./chunk-5QTC2L52.js";
 
 // shared/agentMcpToolTarget.ts
 function extractAgentMcpToolTarget({
@@ -215,6 +215,7 @@ import {
   DownloadIcon,
   RestoreIcon
 } from "@tutti-os/ui-system";
+import { RotateCcwIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
 import Zoom from "react-medium-image-zoom";
 
 // app/renderer/lib/utils.ts
@@ -354,6 +355,9 @@ function ConversationImageContextMenu({
 
 // app/renderer/components/ZoomableImage.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IMAGE_PREVIEW_ZOOM_MIN = 0.5;
+var IMAGE_PREVIEW_ZOOM_MAX = 3;
+var IMAGE_PREVIEW_ZOOM_STEP = 0.25;
 function ZoomableImage({
   alt,
   className,
@@ -369,6 +373,11 @@ function ZoomableImage({
   const hasImageActions = Boolean(actionSource && downloadName !== void 0);
   const [contextMenuPosition, setContextMenuPosition] = useState2(null);
   const [copyStatus, setCopyStatus] = useState2(null);
+  const [imagePreviewZoom, setImagePreviewZoom] = useState2(1);
+  const [isWheelZooming, setIsWheelZooming] = useState2(false);
+  const imagePreviewZoomPercent = Math.round(imagePreviewZoom * 100);
+  const canZoomOut = imagePreviewZoom > IMAGE_PREVIEW_ZOOM_MIN;
+  const canZoomIn = imagePreviewZoom < IMAGE_PREVIEW_ZOOM_MAX;
   const closeContextMenu = useCallback2(() => {
     setContextMenuPosition(null);
   }, []);
@@ -445,6 +454,36 @@ function ZoomableImage({
       resolveImageDownloadName(downloadName, actionSource, alt)
     );
   }, [actionSource, alt, closeContextMenu, downloadName]);
+  const zoomOutPreviewImage = useCallback2(() => {
+    setIsWheelZooming(false);
+    setImagePreviewZoom(
+      (value) => clampSteppedImagePreviewZoom(value - IMAGE_PREVIEW_ZOOM_STEP)
+    );
+  }, []);
+  const zoomInPreviewImage = useCallback2(() => {
+    setIsWheelZooming(false);
+    setImagePreviewZoom(
+      (value) => clampSteppedImagePreviewZoom(value + IMAGE_PREVIEW_ZOOM_STEP)
+    );
+  }, []);
+  const resetPreviewImageZoom = useCallback2(() => {
+    setIsWheelZooming(false);
+    setImagePreviewZoom(1);
+  }, []);
+  const handlePreviewImageWheel = useCallback2(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.deltaY === 0) {
+        return;
+      }
+      setIsWheelZooming(true);
+      setImagePreviewZoom(
+        (value) => clampImagePreviewZoom(value * Math.pow(2, resolveWheelZoomDelta(event)))
+      );
+    },
+    []
+  );
   const actionButtons = hasImageActions ? /* @__PURE__ */ jsx2(
     ImageActionButtons,
     {
@@ -456,30 +495,55 @@ function ZoomableImage({
   ) : null;
   const renderZoomContent = ({
     buttonUnzoom,
-    img
+    img,
+    modalState
   }) => {
+    const typedButtonUnzoom = buttonUnzoom;
+    const buttonUnzoomProps = typedButtonUnzoom.props;
     const zoomSrc = isValidElement(img) && typeof img.props.src === "string" ? img.props.src : null;
+    const isUnzooming = modalState === "UNLOADING";
+    const effectiveImagePreviewZoom = isUnzooming ? 1 : imagePreviewZoom;
+    const renderedImage = img ? cloneImageWithPreviewZoom(
+      img,
+      effectiveImagePreviewZoom,
+      isUnzooming ? false : isWheelZooming,
+      handlePreviewImageWheel
+    ) : null;
     return /* @__PURE__ */ jsxs2(Fragment, { children: [
-      actionButtons && img && zoomSrc ? cloneElement(img, {
-        onContextMenu: handleContextMenu
-      }) : !actionButtons && img && zoomSrc ? /* @__PURE__ */ jsx2(
+      actionButtons && renderedImage && zoomSrc ? cloneElement(
+        renderedImage,
+        {
+          onContextMenu: handleContextMenu
+        }
+      ) : !actionButtons && renderedImage && zoomSrc ? /* @__PURE__ */ jsx2(
         ConversationImageContextMenu,
         {
           src: zoomSrc,
           asChild: true,
           contentStyle: { zIndex: "var(--z-dialog-popover)" },
-          children: img
+          children: renderedImage
         }
-      ) : img,
-      actionButtons ? /* @__PURE__ */ jsx2("div", { className: "tsh-zoom-dialog__image-actions nodrag tsh-desktop-no-drag", children: /* @__PURE__ */ jsx2(
-        ImageActionButtons,
+      ) : renderedImage,
+      /* @__PURE__ */ jsx2(
+        ImagePreviewZoomControls,
         {
-          copyLabel: t("common.copyImage"),
-          downloadLabel: t("common.downloadImage"),
-          onCopy: handleCopyImageAction,
-          onDownload: handleDownloadImage
+          canZoomIn,
+          canZoomOut,
+          percent: imagePreviewZoomPercent,
+          percentLabel: t("common.imageZoomPercent", {
+            percent: imagePreviewZoomPercent
+          }),
+          reportPercentStatus: !copyStatus,
+          resetLabel: t("common.resetImageZoom"),
+          zoomInLabel: t("common.zoomInImage"),
+          zoomOutLabel: t("common.zoomOutImage"),
+          onReset: resetPreviewImageZoom,
+          onZoomIn: zoomInPreviewImage,
+          onZoomOut: zoomOutPreviewImage,
+          onWheel: handlePreviewImageWheel
         }
-      ) }) : null,
+      ),
+      actionButtons ? /* @__PURE__ */ jsx2("div", { className: "tsh-zoom-dialog__image-actions nodrag tsh-desktop-no-drag", children: actionButtons }) : null,
       contextMenuPosition?.inZoomDialog && actionButtons ? /* @__PURE__ */ jsx2(
         "div",
         {
@@ -510,8 +574,14 @@ function ZoomableImage({
           size: "icon",
           variant: "chrome",
           children: cloneElement(
-            buttonUnzoom,
-            void 0,
+            typedButtonUnzoom,
+            {
+              onClick: (event) => {
+                setIsWheelZooming(false);
+                setImagePreviewZoom(1);
+                buttonUnzoomProps.onClick?.(event);
+              }
+            },
             /* @__PURE__ */ jsx2(RestoreIcon, { "aria-hidden": "true", className: "size-4" })
           )
         }
@@ -610,6 +680,73 @@ function ImageCopyStatusToast({
     )
   ] });
 }
+function ImagePreviewZoomControls({
+  canZoomIn,
+  canZoomOut,
+  percent,
+  percentLabel,
+  reportPercentStatus,
+  resetLabel,
+  zoomInLabel,
+  zoomOutLabel,
+  onReset,
+  onZoomIn,
+  onZoomOut,
+  onWheel
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "tsh-zoom-dialog__zoom-controls nodrag tsh-desktop-no-drag",
+      onWheel,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            title: zoomOutLabel,
+            "aria-label": zoomOutLabel,
+            disabled: !canZoomOut,
+            onClick: onZoomOut,
+            children: /* @__PURE__ */ jsx2(ZoomOutIcon, { "aria-hidden": "true", className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            "aria-label": percentLabel,
+            role: reportPercentStatus ? "status" : void 0,
+            children: [
+              percent,
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            title: resetLabel,
+            "aria-label": resetLabel,
+            onClick: onReset,
+            children: /* @__PURE__ */ jsx2(RotateCcwIcon, { "aria-hidden": "true", className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            title: zoomInLabel,
+            "aria-label": zoomInLabel,
+            disabled: !canZoomIn,
+            onClick: onZoomIn,
+            children: /* @__PURE__ */ jsx2(ZoomInIcon, { "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
 function ImageActionButtons({
   copyLabel,
   downloadLabel,
@@ -690,6 +827,90 @@ function ImageActionButtons({
     )
   ] });
 }
+function cloneImageWithPreviewZoom(img, zoom, isWheelZooming, onWheel) {
+  const props = img.props;
+  const style = props.style;
+  const mergedStyle = {
+    ...style,
+    transform: resolveZoomedImageTransform(
+      style?.transform,
+      zoom,
+      resolveImagePreviewDimension(style?.width ?? props.width),
+      resolveImagePreviewDimension(style?.height ?? props.height)
+    ),
+    transition: isWheelZooming ? "none" : mergeImagePreviewTransition(style?.transition)
+  };
+  if (style?.transformOrigin !== void 0) {
+    mergedStyle.transformOrigin = style.transformOrigin;
+  }
+  return cloneElement(img, {
+    "data-tsh-image-zoom": formatImagePreviewZoom(zoom),
+    onWheel: (event) => {
+      props.onWheel?.(event);
+      onWheel(event);
+    },
+    style: mergedStyle
+  });
+}
+function resolveWheelZoomDelta(event) {
+  return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 2e-3) * (event.ctrlKey ? 10 : 1);
+}
+function resolveZoomedImageTransform(transform, zoom, width, height) {
+  const baseTransform = typeof transform === "string" ? transform.trim() : "";
+  const zoomTransform = resolveImagePreviewZoomTransform(zoom, width, height);
+  if (!baseTransform) {
+    return zoomTransform || void 0;
+  }
+  if (!zoomTransform) {
+    return baseTransform;
+  }
+  return `${baseTransform} ${zoomTransform}`;
+}
+function resolveImagePreviewZoomTransform(zoom, width, height) {
+  if (zoom === 1) {
+    return "";
+  }
+  const scale = `scale(${formatImagePreviewZoom(zoom)})`;
+  if (width === null || height === null) {
+    return scale;
+  }
+  const halfWidth = formatCssNumber(width / 2);
+  const halfHeight = formatCssNumber(height / 2);
+  return `translate(${halfWidth}px,${halfHeight}px) ${scale} translate(-${halfWidth}px,-${halfHeight}px)`;
+}
+function resolveImagePreviewDimension(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value > 0 ? value : null;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const dimension = Number.parseFloat(value);
+  return Number.isFinite(dimension) && dimension > 0 ? dimension : null;
+}
+function formatCssNumber(value) {
+  return Number(value.toFixed(3)).toString();
+}
+function mergeImagePreviewTransition(transition) {
+  const zoomTransition = "transform 120ms ease-out";
+  if (typeof transition !== "string" || !transition.trim()) {
+    return zoomTransition;
+  }
+  return transition.includes("transform") ? transition : `${transition}, ${zoomTransition}`;
+}
+function clampSteppedImagePreviewZoom(value) {
+  const stepped = Math.round(value / IMAGE_PREVIEW_ZOOM_STEP) * IMAGE_PREVIEW_ZOOM_STEP;
+  return clampImagePreviewZoom(stepped);
+}
+function clampImagePreviewZoom(value) {
+  return Math.min(
+    IMAGE_PREVIEW_ZOOM_MAX,
+    Math.max(IMAGE_PREVIEW_ZOOM_MIN, value)
+  );
+}
+function formatImagePreviewZoom(value) {
+  return Number(value.toFixed(2)).toString();
+}
 function downloadImage(src, name) {
   const link = document.createElement("a");
   link.href = src;
@@ -2826,6 +3047,8 @@ var styles = {
   userMessageFlow: "agent-gui-conversation__user-message-flow",
   assistantMessageFlow: "agent-gui-conversation__assistant-message-flow",
   messageGroup: "agent-gui-conversation__message-group",
+  messageFooter: "agent-gui-conversation__message-footer",
+  messageTimestamp: "agent-gui-conversation__message-timestamp",
   messageCopyButton: "agent-gui-conversation__message-copy-button",
   userMessageBubble: "agent-gui-conversation__user-message-bubble",
   assistantMarkdown: "agent-gui-conversation__assistant-markdown"
@@ -3261,4 +3484,4 @@ export {
   CustomScrollArea,
   MessageSquareMoreIcon
 };
-//# sourceMappingURL=chunk-QT45WUPQ.js.map
+//# sourceMappingURL=chunk-XJXSR5XI.js.map