@tutti-os/agent-gui 0.0.39 → 0.0.41

package/dist/{chunk-5HQDW73P.js → chunk-OLZP2EFK.js}

@@ -1,11 +1,11 @@
 import {
   getOptionalAgentHostApi,
   useOptionalAgentHostApi
-} from "./chunk-B2JKDZSR.js";
+} from "./chunk-TXXWUG2J.js";
 import {
   translate,
   useTranslation
-} from "./chunk-WJPEKD3F.js";
+} from "./chunk-LKOPLDPM.js";
 import {
   resolveAgentWorkspaceFileVisualKind
 } from "./chunk-PJP5BUU6.js";
@@ -192,7 +192,7 @@ import {
   useEffect as useEffect3,
   useContext,
   memo,
-  useMemo as useMemo2,
+  useMemo,
   useState as useState4
 } from "react";
 
@@ -202,9 +202,14 @@ import {
   isValidElement,
   useCallback as useCallback2,
   useEffect,
-  useMemo,
   useState as useState2
 } from "react";
+import {
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport
+} from "@tutti-os/ui-system";
 import { CopyIcon, DownloadIcon } from "lucide-react";
 import Zoom from "react-medium-image-zoom";
 
@@ -261,12 +266,19 @@ async function blobToBase64(blob) {
     reader.readAsDataURL(blob);
   });
 }
-async function copyImageWithWebClipboard(blob) {
+async function pngBlobFromSrc(src) {
+  const blob = await imageSrcToPngBlob(src);
+  if (!blob) {
+    throw new Error("image conversion failed");
+  }
+  return blob;
+}
+async function copyImageWithWebClipboard(data) {
   if (typeof navigator === "undefined" || typeof navigator.clipboard?.write !== "function" || typeof ClipboardItem === "undefined") {
     return false;
   }
   try {
-    await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+    await navigator.clipboard.write([new ClipboardItem({ "image/png": data })]);
     return true;
   } catch {
     return false;
@@ -274,19 +286,20 @@ async function copyImageWithWebClipboard(blob) {
 }
 async function copyImageToClipboard(src, hostClipboard) {
   try {
+    if (!hostClipboard?.writeImage) {
+      return await copyImageWithWebClipboard(pngBlobFromSrc(src));
+    }
     const blob = await imageSrcToPngBlob(src);
     if (!blob) {
       return false;
     }
-    if (hostClipboard?.writeImage) {
-      try {
-        await hostClipboard.writeImage({
-          data: await blobToBase64(blob),
-          mimeType: "image/png"
-        });
-        return true;
-      } catch {
-      }
+    try {
+      await hostClipboard.writeImage({
+        data: await blobToBase64(blob),
+        mimeType: "image/png"
+      });
+      return true;
+    } catch {
     }
     return copyImageWithWebClipboard(blob);
   } catch {
@@ -338,6 +351,7 @@ function ConversationImageContextMenu({
 // app/renderer/components/ZoomableImage.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ZoomableImage({
+  alt,
   className,
   downloadName,
   onContextMenu,
@@ -346,13 +360,11 @@ function ZoomableImage({
   ...props
 }) {
   const { t } = useTranslation();
+  const agentHostApi = useOptionalAgentHostApi();
   const actionSource = typeof src === "string" && src.trim() ? src.trim() : null;
   const hasImageActions = Boolean(actionSource && downloadName !== void 0);
-  const resolvedDownloadName = useMemo(
-    () => resolveImageDownloadName(downloadName, actionSource),
-    [actionSource, downloadName]
-  );
   const [contextMenuPosition, setContextMenuPosition] = useState2(null);
+  const [copyStatus, setCopyStatus] = useState2(null);
   const closeContextMenu = useCallback2(() => {
     setContextMenuPosition(null);
   }, []);
@@ -367,6 +379,13 @@ function ZoomableImage({
       document.removeEventListener("scroll", closeContextMenu, true);
     };
   }, [closeContextMenu, contextMenuPosition]);
+  useEffect(() => {
+    if (!copyStatus || copyStatus.busy) {
+      return;
+    }
+    const timer = setTimeout(() => setCopyStatus(null), 1600);
+    return () => clearTimeout(timer);
+  }, [copyStatus]);
   const handleContextMenu = useCallback2(
     (event) => {
       onContextMenu?.(event);
@@ -374,7 +393,12 @@ function ZoomableImage({
         return;
       }
       event.preventDefault();
-      setContextMenuPosition({ x: event.clientX, y: event.clientY });
+      event.stopPropagation();
+      setContextMenuPosition({
+        x: event.clientX,
+        y: event.clientY,
+        inZoomDialog: Boolean(event.currentTarget.closest(".tsh-zoom-dialog"))
+      });
     },
     [actionSource, hasImageActions, onContextMenu]
   );
@@ -382,9 +406,28 @@ function ZoomableImage({
     if (!actionSource) {
       return;
     }
+    const copyingMessage = t("common.copying");
+    setCopyStatus({
+      busy: true,
+      message: copyingMessage,
+      variant: "success"
+    });
     closeContextMenu();
-    await copyImageToClipboard(actionSource);
-  }, [actionSource, closeContextMenu]);
+    const copied = await Promise.race([
+      copyImageToClipboard(actionSource, agentHostApi?.clipboard),
+      new Promise((resolve) => {
+        window.setTimeout(() => resolve(false), 5e3);
+      })
+    ]);
+    const message = t(
+      copied ? "agentHost.agentGui.messageCopied" : "common.copyFailed"
+    );
+    setCopyStatus({
+      busy: false,
+      message,
+      variant: copied ? "success" : "destructive"
+    });
+  }, [actionSource, agentHostApi?.clipboard, closeContextMenu, t]);
   const handleCopyImageAction = useCallback2(() => {
     void handleCopyImage().catch(() => void 0);
   }, [handleCopyImage]);
@@ -393,8 +436,11 @@ function ZoomableImage({
       return;
     }
     closeContextMenu();
-    downloadImage(actionSource, resolvedDownloadName);
-  }, [actionSource, closeContextMenu, resolvedDownloadName]);
+    downloadImage(
+      actionSource,
+      resolveImageDownloadName(downloadName, actionSource, alt)
+    );
+  }, [actionSource, alt, closeContextMenu, downloadName]);
   const actionButtons = hasImageActions ? /* @__PURE__ */ jsx2(
     ImageActionButtons,
     {
@@ -410,7 +456,9 @@ function ZoomableImage({
   }) => {
     const zoomSrc = isValidElement(img) && typeof img.props.src === "string" ? img.props.src : null;
     return /* @__PURE__ */ jsxs2(Fragment, { children: [
-      !actionButtons && img && zoomSrc ? /* @__PURE__ */ jsx2(
+      actionButtons && img && zoomSrc ? cloneElement(img, {
+        onContextMenu: handleContextMenu
+      }) : !actionButtons && img && zoomSrc ? /* @__PURE__ */ jsx2(
         ConversationImageContextMenu,
         {
           src: zoomSrc,
@@ -419,7 +467,37 @@ function ZoomableImage({
           children: img
         }
       ) : img,
-      actionButtons ? /* @__PURE__ */ jsx2("div", { className: "tsh-zoom-dialog__image-actions nodrag tsh-desktop-no-drag", children: actionButtons }) : null,
+      actionButtons ? /* @__PURE__ */ jsx2("div", { className: "tsh-zoom-dialog__image-actions nodrag tsh-desktop-no-drag", children: /* @__PURE__ */ jsx2(
+        ImageActionButtons,
+        {
+          copyLabel: t("common.copyImage"),
+          downloadLabel: t("common.downloadImage"),
+          onCopy: handleCopyImageAction,
+          onDownload: handleDownloadImage
+        }
+      ) }) : 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,
       cloneElement(buttonUnzoom, {
         className: cn(
           buttonUnzoom.props.className,
@@ -442,6 +520,7 @@ function ZoomableImage({
           "img",
           {
             ...props,
+            alt,
             src,
             onContextMenu: hasImageActions ? handleContextMenu : onContextMenu,
             className: cn("nodrag tsh-desktop-no-drag cursor-zoom-in", className)
@@ -449,7 +528,7 @@ function ZoomableImage({
         )
       }
     ),
-    contextMenuPosition && actionButtons ? /* @__PURE__ */ jsx2(
+    contextMenuPosition && !contextMenuPosition.inZoomDialog && actionButtons ? /* @__PURE__ */ jsx2(
       "div",
       {
         className: "tsh-image-context-menu nodrag tsh-desktop-no-drag",
@@ -470,9 +549,52 @@ function ZoomableImage({
           }
         )
       }
+    ) : null,
+    copyStatus ? /* @__PURE__ */ jsx2(
+      ImageCopyStatusToast,
+      {
+        busy: copyStatus.busy,
+        message: copyStatus.message,
+        variant: copyStatus.variant,
+        onOpenChange: (open) => {
+          if (!open) {
+            setCopyStatus(null);
+          }
+        }
+      }
     ) : null
   ] });
 }
+function ImageCopyStatusToast({
+  busy,
+  message,
+  onOpenChange,
+  variant
+}) {
+  return /* @__PURE__ */ jsxs2(ToastProvider, { duration: 1600, swipeDirection: "right", children: [
+    /* @__PURE__ */ jsx2(
+      ToastRoot,
+      {
+        open: true,
+        anchor: "viewport",
+        busy,
+        variant,
+        onOpenChange,
+        children: /* @__PURE__ */ jsx2(ToastTitle, { children: message })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      ToastViewport,
+      {
+        className: "nodrag tsh-desktop-no-drag",
+        style: {
+          top: "max(20px, calc(var(--cove-titlebar-reserve, 0px) + 10px))",
+          zIndex: 100303
+        }
+      }
+    )
+  ] });
+}
 function ImageActionButtons({
   copyLabel,
   downloadLabel,
@@ -481,17 +603,34 @@ function ImageActionButtons({
   onDownload
 }) {
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2("button", { type: "button", role: itemRole, title: copyLabel, onClick: onCopy, children: [
-      /* @__PURE__ */ jsx2(CopyIcon, { "aria-hidden": "true", className: "size-4" }),
-      /* @__PURE__ */ jsx2("span", { children: copyLabel })
-    ] }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        role: itemRole,
+        title: copyLabel,
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onCopy();
+        },
+        children: [
+          /* @__PURE__ */ jsx2(CopyIcon, { "aria-hidden": "true", className: "size-4" }),
+          /* @__PURE__ */ jsx2("span", { children: copyLabel })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
         role: itemRole,
         title: downloadLabel,
-        onClick: onDownload,
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onDownload();
+        },
         children: [
           /* @__PURE__ */ jsx2(DownloadIcon, { "aria-hidden": "true", className: "size-4" }),
           /* @__PURE__ */ jsx2("span", { children: downloadLabel })
@@ -509,14 +648,61 @@ function downloadImage(src, name) {
   link.click();
   link.remove();
 }
-function resolveImageDownloadName(name, src) {
-  const trimmedName = name?.trim();
-  if (trimmedName) {
-    return trimmedName;
+function resolveImageDownloadName(name, src, alt) {
+  const semanticName = resolveImageNameBase(name) ?? resolveImageNameBase(alt) ?? resolveImageNameBase(src) ?? "image";
+  const extension = resolveImageNameExtension(name) ?? resolveImageNameExtension(src) ?? resolveDataImageExtension(src) ?? "png";
+  return `${semanticName}-${formatImageDownloadTimestamp(/* @__PURE__ */ new Date())}-${createDownloadRandomSuffix()}.${extension}`;
+}
+function resolveImageNameBase(value) {
+  const segment = imageNameSegment(value);
+  if (!segment) {
+    return null;
+  }
+  const base = segment.replace(/\.[A-Za-z0-9]{2,8}$/u, "");
+  const sanitized = stripControlCharacters(base).replace(/[\\/:*?"<>|#%&{}$!'@+`=]+/gu, "-").replace(/\s+/gu, "-").replace(/-+/gu, "-").replace(/^-|-$/gu, "").slice(0, 80);
+  return sanitized || null;
+}
+function stripControlCharacters(value) {
+  return Array.from(value).filter((char) => char.charCodeAt(0) >= 32).join("");
+}
+function resolveImageNameExtension(value) {
+  const segment = imageNameSegment(value);
+  const match = segment?.match(/\.([A-Za-z0-9]{2,8})$/u);
+  if (!match?.[1]) {
+    return null;
+  }
+  return normalizeImageExtension(match[1]);
+}
+function imageNameSegment(value) {
+  const trimmed = value?.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const withoutQuery = decodeURIComponentSafe(
+    trimmed.split(/[?#]/, 1)[0] ?? ""
+  );
+  return withoutQuery.split(/[\\/]/).pop()?.trim() || null;
+}
+function resolveDataImageExtension(src) {
+  const match = src?.match(/^data:image\/([A-Za-z0-9.+-]+)[;,]/u);
+  return match?.[1] ? normalizeImageExtension(match[1]) : null;
+}
+function normalizeImageExtension(extension) {
+  const normalized = extension.toLowerCase();
+  if (normalized === "jpeg") {
+    return "jpg";
+  }
+  if (normalized === "svg+xml") {
+    return "svg";
   }
-  const srcName = src ? decodeURIComponentSafe(src.split(/[?#]/, 1)[0] ?? "") : "";
-  const lastSegment = srcName.split(/[\\/]/).pop()?.trim();
-  return lastSegment || "image.png";
+  return normalized.replace(/[^a-z0-9]/gu, "") || "png";
+}
+function formatImageDownloadTimestamp(date) {
+  const pad = (value) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(date.getDate())}-${pad(date.getHours())}${pad(date.getMinutes())}${pad(date.getSeconds())}`;
+}
+function createDownloadRandomSuffix() {
+  return Math.random().toString(36).slice(2, 6).padEnd(4, "0");
 }
 function decodeURIComponentSafe(value) {
   try {
@@ -1281,7 +1467,7 @@ function AgentMessageMarkdown({
     maxCharsPerSecond: STREAMING_MARKDOWN_MAX_CHARS_PER_SECOND,
     trailingFlushChars: STREAMING_MARKDOWN_TAIL_FLUSH_CHARS
   });
-  const stabilizedContent = useMemo2(
+  const stabilizedContent = useMemo(
     () => stabilizeStreamingMarkdownTail(visibleContent, {
       streaming
     }).content,
@@ -1295,11 +1481,11 @@ function AgentMessageMarkdown({
   const shouldCollapse = collapsible && isLikelyLongerThanLineLimit(stabilizedContent);
   const isCollapsed = shouldCollapse && !isExpanded;
   const ContainerTag = inline ? "span" : "div";
-  const contentSignature = useMemo2(
+  const contentSignature = useMemo(
     () => hashMarkdownProfilerContent(stabilizedContent),
     [stabilizedContent]
   );
-  const normalizedContent = useMemo2(
+  const normalizedContent = useMemo(
     () => linkBareLocalAbsolutePaths(
       normalizeMentionMarkdownLinks(
         normalizePlainIssueMentionTitle ? normalizePlainIssueMentionTitleContent(
@@ -1345,7 +1531,7 @@ function AgentMessageMarkdown({
     },
     [handleLinkClick]
   );
-  const markdownComponents = useMemo2(
+  const markdownComponents = useMemo(
     () => ({
       a: (props) => /* @__PURE__ */ jsx3(
         MarkdownLink,
@@ -1444,7 +1630,7 @@ function StreamingMarkdownBlocks({
   content,
   components
 }) {
-  const blocks = useMemo2(
+  const blocks = useMemo(
     () => splitStreamingMarkdownBlocks(content),
     [content]
   );
@@ -3018,11 +3204,10 @@ export {
   resolveWorkspaceFilePathCandidate,
   resolveWorkspaceFileLinkAction,
   resolveWorkspaceLinkAction,
-  ConversationImageContextMenu,
   ZoomableImage,
   AgentMessageMarkdown,
   AgentGUIConversation_styles_default,
   CustomScrollArea,
   MessageSquareMoreIcon
 };
-//# sourceMappingURL=chunk-5HQDW73P.js.map
+//# sourceMappingURL=chunk-OLZP2EFK.js.map