@tutti-os/agent-gui 0.0.76 → 0.0.78

package/dist/{chunk-3FYA2K4P.js → chunk-5CLGEUWK.js}

@@ -260,17 +260,16 @@ import {
   useContext as useContext2,
   memo,
   useMemo,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 import { Check, Copy, FileText } from "lucide-react";
 
 // app/renderer/components/ZoomableImage.tsx
 import {
-  cloneElement,
-  isValidElement,
   useCallback as useCallback2,
   useEffect,
+  useRef as useRef2,
   useState as useState2
 } from "react";
 import { createPortal } from "react-dom";
@@ -285,7 +284,6 @@ import {
   RestoreIcon
 } from "@tutti-os/ui-system";
 import { RotateCcwIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
-import Zoom from "react-medium-image-zoom";
 
 // shared/agentConversation/components/ConversationImageContextMenu.tsx
 import {
@@ -436,12 +434,60 @@ function ZoomableImage({
   const [imagePreviewZoom, setImagePreviewZoom] = useState2(1);
   const [isWheelZooming, setIsWheelZooming] = useState2(false);
   const [isImagePreviewOpen, setIsImagePreviewOpen] = useState2(false);
+  const [isImagePreviewClosing, setIsImagePreviewClosing] = useState2(false);
+  const closePreviewTimerRef = useRef2(null);
   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);
   }, []);
+  const finishClosePreviewImage = useCallback2(() => {
+    if (closePreviewTimerRef.current !== null) {
+      window.clearTimeout(closePreviewTimerRef.current);
+      closePreviewTimerRef.current = null;
+    }
+    setIsImagePreviewOpen(false);
+    setIsImagePreviewClosing(false);
+    setIsWheelZooming(false);
+    setImagePreviewZoom(1);
+  }, []);
+  const closePreviewImage = useCallback2(() => {
+    if (!isImagePreviewOpen) {
+      return;
+    }
+    if (closePreviewTimerRef.current !== null) {
+      window.clearTimeout(closePreviewTimerRef.current);
+    }
+    setIsImagePreviewClosing(true);
+    setIsWheelZooming(false);
+    setImagePreviewZoom(1);
+    closeContextMenu();
+    closePreviewTimerRef.current = window.setTimeout(
+      finishClosePreviewImage,
+      180
+    );
+  }, [closeContextMenu, finishClosePreviewImage, isImagePreviewOpen]);
+  const openPreviewImage = useCallback2(() => {
+    if (!actionSource) {
+      return;
+    }
+    if (closePreviewTimerRef.current !== null) {
+      window.clearTimeout(closePreviewTimerRef.current);
+      closePreviewTimerRef.current = null;
+    }
+    closeContextMenu();
+    setIsImagePreviewClosing(false);
+    setIsImagePreviewOpen(true);
+  }, [actionSource, closeContextMenu]);
+  useEffect(
+    () => () => {
+      if (closePreviewTimerRef.current !== null) {
+        window.clearTimeout(closePreviewTimerRef.current);
+      }
+    },
+    []
+  );
   useEffect(() => {
     if (!contextMenuPosition) {
       return;
@@ -453,6 +499,23 @@ function ZoomableImage({
       document.removeEventListener("scroll", closeContextMenu, true);
     };
   }, [closeContextMenu, contextMenuPosition]);
+  useEffect(() => {
+    if (!isImagePreviewOpen) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      closePreviewImage();
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [closePreviewImage, isImagePreviewOpen]);
   useEffect(() => {
     if (!copyStatus || copyStatus.busy) {
       return;
@@ -554,141 +617,80 @@ function ZoomableImage({
       onDownload: handleDownloadImage
     }
   ) : null;
-  const renderZoomContent = ({
-    buttonUnzoom,
-    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 && renderedImage && zoomSrc ? cloneElement(
-        renderedImage,
-        {
-          onContextMenu: handleContextMenu
-        }
-      ) : !actionButtons && renderedImage && zoomSrc ? /* @__PURE__ */ jsx2(
-        ConversationImageContextMenu,
-        {
-          src: zoomSrc,
-          asChild: true,
-          contentStyle: { zIndex: "var(--z-dialog-popover)" },
-          children: renderedImage
-        }
-      ) : renderedImage,
-      /* @__PURE__ */ jsx2(
-        ImagePreviewZoomControls,
-        {
-          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
-        }
-      ),
-      actionButtons ? /* @__PURE__ */ jsx2("div", { className: "tsh-zoom-dialog__image-actions nodrag tsh-desktop-no-drag", children: actionButtons }) : null,
-      contextMenuPosition?.inZoomDialog && actionButtons ? /* @__PURE__ */ jsx2(
-        "div",
-        {
-          className: "tsh-image-context-menu nodrag tsh-desktop-no-drag",
-          style: {
-            left: contextMenuPosition.x,
-            top: contextMenuPosition.y
-          },
-          role: "menu",
-          onClick: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx2(
-            ImageActionButtons,
+  const previewImage = (isImagePreviewOpen || isImagePreviewClosing) && actionSource ? /* @__PURE__ */ jsx2(
+    "img",
+    {
+      alt,
+      "data-rmiz-modal-img": "",
+      "data-tsh-image-zoom": formatImagePreviewZoom(imagePreviewZoom),
+      draggable: false,
+      src: actionSource,
+      title: typeof props.title === "string" ? props.title : void 0,
+      className: "tsh-zoom-dialog__image nodrag tsh-desktop-no-drag",
+      style: {
+        transform: resolveZoomedImageTransform(
+          void 0,
+          imagePreviewZoom,
+          null,
+          null
+        ),
+        transition: isWheelZooming ? "none" : mergeImagePreviewTransition(void 0)
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+        closePreviewImage();
+      },
+      onContextMenu: hasImageActions ? handleContextMenu : onContextMenu,
+      onTransitionEnd: isImagePreviewClosing ? finishClosePreviewImage : void 0,
+      onWheel: handlePreviewImageWheel
+    }
+  ) : null;
+  const previewContent = previewImage && !actionButtons && actionSource ? /* @__PURE__ */ jsx2(
+    ConversationImageContextMenu,
+    {
+      src: actionSource,
+      asChild: true,
+      contentStyle: { zIndex: "var(--z-dialog-popover)" },
+      children: previewImage
+    }
+  ) : previewImage;
+  const Wrapper = wrapElement;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      Wrapper,
+      {
+        className: cn(
+          "tsh-zoomable-image nodrag tsh-desktop-no-drag",
+          wrapElement === "div" && "tsh-zoomable-image--block"
+        ),
+        children: [
+          /* @__PURE__ */ jsx2(
+            "img",
             {
-              copyLabel: t("common.copyImage"),
-              downloadLabel: t("common.downloadImage"),
-              itemRole: "menuitem",
-              onCopy: handleCopyImageAction,
-              onDownload: handleDownloadImage
-            }
-          )
-        }
-      ) : null,
-      copyStatus ? /* @__PURE__ */ jsx2(
-        ImageCopyStatusToast,
-        {
-          busy: copyStatus.busy,
-          message: copyStatus.message,
-          variant: copyStatus.variant,
-          onOpenChange: (open) => {
-            if (!open) {
-              setCopyStatus(null);
+              ...props,
+              alt,
+              src,
+              onClick: (event) => {
+                props.onClick?.(event);
+                if (!event.defaultPrevented) {
+                  openPreviewImage();
+                }
+              },
+              onContextMenu: hasImageActions ? handleContextMenu : onContextMenu,
+              className: cn("nodrag tsh-desktop-no-drag cursor-zoom-in", className)
             }
-          }
-        }
-      ) : null,
-      /* @__PURE__ */ jsx2(
-        Button,
-        {
-          asChild: true,
-          className: "tsh-zoom-dialog__icon-button nodrag tsh-desktop-no-drag",
-          size: "icon",
-          variant: "chrome",
-          children: cloneElement(
-            typedButtonUnzoom,
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
             {
-              onClick: (event) => {
-                setIsWheelZooming(false);
-                setImagePreviewZoom(1);
-                buttonUnzoomProps.onClick?.(event);
-              }
-            },
-            /* @__PURE__ */ jsx2(RestoreIcon, { "aria-hidden": "true", className: "size-4" })
+              type: "button",
+              "aria-label": t("common.expandImage"),
+              className: "tsh-zoomable-image__trigger nodrag tsh-desktop-no-drag",
+              onClick: openPreviewImage,
+              onContextMenu: handleContextMenu
+            }
           )
-        }
-      )
-    ] });
-  };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
-      Zoom,
-      {
-        a11yNameButtonZoom: t("common.expandImage"),
-        a11yNameButtonUnzoom: t("common.minimizeImage"),
-        classDialog: "tsh-zoom-dialog nodrag tsh-desktop-no-drag",
-        wrapElement,
-        zoomMargin: 24,
-        ZoomContent: renderZoomContent,
-        onZoomChange: (zoomed) => {
-          setIsImagePreviewOpen(zoomed);
-          if (!zoomed) {
-            setIsWheelZooming(false);
-            setImagePreviewZoom(1);
-          }
-        },
-        children: /* @__PURE__ */ jsx2(
-          "img",
-          {
-            ...props,
-            alt,
-            src,
-            onContextMenu: hasImageActions ? handleContextMenu : onContextMenu,
-            className: cn("nodrag tsh-desktop-no-drag cursor-zoom-in", className)
-          }
-        )
+        ]
       }
     ),
     contextMenuPosition && !contextMenuPosition.inZoomDialog && actionButtons ? createPortal(
@@ -716,6 +718,108 @@ function ZoomableImage({
       ),
       document.body
     ) : null,
+    (isImagePreviewOpen || isImagePreviewClosing) && actionSource ? createPortal(
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "aria-modal": "true",
+          className: "tsh-zoom-dialog nodrag tsh-desktop-no-drag",
+          "data-rmiz-modal": "",
+          role: "dialog",
+          tabIndex: -1,
+          onKeyDown: (event) => {
+            if (event.key === "Escape") {
+              closePreviewImage();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                "data-rmiz-modal-overlay": "visible",
+                onClick: closePreviewImage
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { "data-rmiz-modal-content": "true", children: previewContent }),
+            /* @__PURE__ */ jsx2(
+              ImagePreviewZoomControls,
+              {
+                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
+              }
+            ),
+            actionButtons ? /* @__PURE__ */ jsx2("div", { className: "tsh-zoom-dialog__image-actions nodrag tsh-desktop-no-drag", children: actionButtons }) : null,
+            contextMenuPosition?.inZoomDialog && actionButtons ? /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "tsh-image-context-menu nodrag tsh-desktop-no-drag",
+                style: {
+                  left: contextMenuPosition.x,
+                  top: contextMenuPosition.y
+                },
+                role: "menu",
+                onClick: (event) => event.stopPropagation(),
+                children: /* @__PURE__ */ jsx2(
+                  ImageActionButtons,
+                  {
+                    copyLabel: t("common.copyImage"),
+                    downloadLabel: t("common.downloadImage"),
+                    itemRole: "menuitem",
+                    onCopy: handleCopyImageAction,
+                    onDownload: handleDownloadImage
+                  }
+                )
+              }
+            ) : null,
+            copyStatus ? /* @__PURE__ */ jsx2(
+              ImageCopyStatusToast,
+              {
+                busy: copyStatus.busy,
+                message: copyStatus.message,
+                variant: copyStatus.variant,
+                onOpenChange: (open) => {
+                  if (!open) {
+                    setCopyStatus(null);
+                  }
+                }
+              }
+            ) : null,
+            /* @__PURE__ */ jsx2(
+              Button,
+              {
+                asChild: true,
+                className: "tsh-zoom-dialog__icon-button nodrag tsh-desktop-no-drag",
+                size: "icon",
+                variant: "chrome",
+                children: /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("common.minimizeImage"),
+                    "data-rmiz-btn-unzoom": "",
+                    onClick: closePreviewImage,
+                    children: /* @__PURE__ */ jsx2(RestoreIcon, { "aria-hidden": "true", className: "size-4" })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    ) : null,
     copyStatus && !isImagePreviewOpen ? createPortal(
       /* @__PURE__ */ jsx2(
         ImageCopyStatusToast,
@@ -917,31 +1021,6 @@ 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);
 }
@@ -968,16 +1047,6 @@ function resolveImagePreviewZoomTransform(zoom, width, height) {
   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();
 }
@@ -1669,7 +1738,7 @@ function countChar(value, char) {
 import {
   startTransition,
   useEffect as useEffect2,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState3
 } from "react";
 var DEFAULT_FRAME_MS = 24;
@@ -1683,9 +1752,9 @@ function useStreamingVisibleText(sourceText, options) {
     trailingFlushChars = DEFAULT_TRAILING_FLUSH_CHARS
   } = options;
   const [visibleText, setVisibleText] = useState3(sourceText);
-  const sourceRef = useRef2(sourceText);
-  const visibleRef = useRef2(visibleText);
-  const timerRef = useRef2(null);
+  const sourceRef = useRef3(sourceText);
+  const visibleRef = useRef3(visibleText);
+  const timerRef = useRef3(null);
   useEffect2(() => {
     visibleRef.current = visibleText;
   }, [visibleText]);
@@ -3273,9 +3342,9 @@ function MarkdownPre({
   ...props
 }) {
   "use memo";
-  const preRef = useRef3(null);
+  const preRef = useRef4(null);
   const [copied, setCopied] = useState4(false);
-  const copyResetRef = useRef3(null);
+  const copyResetRef = useRef4(null);
   const handleCopy = useCallback3(() => {
     const text = preRef.current?.textContent?.trim();
     if (!text) {
@@ -3346,7 +3415,7 @@ import {
   forwardRef,
   useCallback as useCallback4,
   useEffect as useEffect4,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState5
 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -3360,8 +3429,8 @@ function CustomScrollbar({
   syncKey
 }) {
   "use memo";
-  const trackRef = useRef4(null);
-  const dragStateRef = useRef4(null);
+  const trackRef = useRef5(null);
+  const dragStateRef = useRef5(null);
   const [scrollbarState, setScrollbarState] = useState5({
     scrollable: false,
     thumbHeight: 0,
@@ -3548,7 +3617,7 @@ var CustomScrollArea = forwardRef(function CustomScrollArea2({
   ...viewportProps
 }, forwardedRef) {
   "use memo";
-  const viewportRef = useRef4(null);
+  const viewportRef = useRef5(null);
   const getViewport = useCallback4(() => viewportRef.current, []);
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -3605,7 +3674,7 @@ import {
   useCallback as useCallback5,
   useEffect as useEffect5,
   useImperativeHandle,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 import {
   motion,
@@ -3656,7 +3725,7 @@ var MessageSquareMoreIcon = forwardRef2(
   }, ref) => {
     const controls = useAnimation();
     const reduceMotion = useReducedMotion();
-    const isControlledRef = useRef5(false);
+    const isControlledRef = useRef6(false);
     const startAnimation = useCallback5(() => {
       if (reduceMotion) {
         return;
@@ -3776,4 +3845,4 @@ export {
   CustomScrollArea,
   MessageSquareMoreIcon
 };
-//# sourceMappingURL=chunk-3FYA2K4P.js.map
+//# sourceMappingURL=chunk-5CLGEUWK.js.map