@malette/agent-sdk 0.1.3-beta.8 → 0.1.3-beta.9

package/dist/index.js

@@ -7862,6 +7862,7 @@ var MessageVideoInternal = React16.memo(function MessageVideoInternal2({ src, cl
   const [duration, setDuration] = React16.useState(0);
   const [currentTime, setCurrentTime] = React16.useState(0);
   const [isFullPlaying, setIsFullPlaying] = React16.useState(false);
+  const [aspectRatio, setAspectRatio] = React16.useState(16 / 9);
   const hoverTimerRef = React16__namespace.default.useRef(null);
   const VideoPreviewComp = useComponent("VideoPreview") || VideoPreviewInternal;
   const [showPreview, setShowPreview] = React16.useState(false);
@@ -7901,6 +7902,9 @@ var MessageVideoInternal = React16.memo(function MessageVideoInternal2({ src, cl
     const video = videoRef.current;
     if (video) {
       setDuration(video.duration);
+      if (video.videoWidth && video.videoHeight) {
+        setAspectRatio(video.videoWidth / video.videoHeight);
+      }
     }
   };
   const handleTimeUpdate = () => {
@@ -7983,13 +7987,16 @@ var MessageVideoInternal = React16.memo(function MessageVideoInternal2({ src, cl
       "div",
       {
         className: cn(
-          "my-2 relative inline-block rounded-xl overflow-hidden bg-black group/video cursor-pointer",
+          "my-2 relative rounded-xl overflow-hidden bg-black group/video cursor-pointer",
           "border border-zinc-800/60 agent-sdk-light:border-zinc-200",
           "transition-shadow duration-200 hover:shadow-xl hover:shadow-black/20",
           "max-w-full",
           className
         ),
-        style: { maxHeight: "400px" },
+        style: {
+          maxHeight: "400px",
+          aspectRatio
+        },
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onClick: handleClick,
@@ -8017,7 +8024,7 @@ var MessageVideoInternal = React16.memo(function MessageVideoInternal2({ src, cl
                 setIsFullPlaying(false);
               },
               className: cn(
-                "w-full max-h-[400px] object-contain",
+                "absolute inset-0 w-full h-full object-contain",
                 !isPlaying && posterUrl && "opacity-0"
               )
             }
@@ -13284,6 +13291,175 @@ var ElegantJsonRenderer = React16.memo(function ElegantJsonRenderer2({
     expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 bg-zinc-900/30 text-xs font-mono overflow-x-auto max-h-80 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(JsonValue, { value: data, depth: 0 }) })
   ] });
 });
+var MediaGrid = React16.memo(function MediaGrid2({
+  imageUrls,
+  videoUrls,
+  imgLoaded,
+  onImgLoad,
+  onPreview,
+  onOpenArtifact,
+  buildMediaMetadata,
+  toolDisplayName
+}) {
+  const totalCount = imageUrls.length + videoUrls.length;
+  const renderMediaItem = (type, media, index, className, showOverlay = true) => {
+    const globalIndex = type === "video" ? index : videoUrls.length + index;
+    const isLoaded = type === "video" || imgLoaded[index];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `relative group/media overflow-hidden rounded-lg bg-zinc-900 ${className}`,
+        children: [
+          type === "image" && !imgLoaded[index] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-zinc-800/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-8 h-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-zinc-700" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-t-[#d8ff00] animate-spin" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500", children: "\u52A0\u8F7D\u4E2D..." })
+          ] }) }),
+          type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+            MessageVideoInternal,
+            {
+              src: media.hdUrl || media.url,
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: media.url,
+              alt: "Generated",
+              onLoad: () => onImgLoad(index),
+              className: `w-full h-full object-cover cursor-zoom-in transition-opacity duration-300 ${imgLoaded[index] ? "opacity-100" : "opacity-0"}`,
+              onClick: () => onPreview(media.hdUrl || media.url)
+            }
+          ),
+          showOverlay && type === "image" && isLoaded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-1.5 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover/media:opacity-100 transition-opacity duration-200 flex items-center justify-between z-20", children: [
+            onOpenArtifact && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onOpenArtifact({
+                    type,
+                    title: `${toolDisplayName || "\u56FE\u7247\u751F\u6210"} #${globalIndex + 1}`,
+                    content: media.hdUrl || media.url,
+                    metadata: buildMediaMetadata(globalIndex)
+                  });
+                },
+                className: "flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-white bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 10 }),
+                  "\u8BE6\u60C5"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onPreview(media.hdUrl || media.url);
+                },
+                className: "p-1 text-white/80 hover:text-white bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded transition-colors",
+                title: "\u653E\u5927\u9884\u89C8",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { size: 12 })
+              }
+            )
+          ] }),
+          showOverlay && type === "video" && onOpenArtifact && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-1.5 bg-gradient-to-b from-black/70 to-transparent opacity-0 group-hover/media:opacity-100 transition-opacity duration-200 flex items-center justify-end z-20", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onOpenArtifact({
+                  type,
+                  title: `${toolDisplayName || "\u89C6\u9891\u751F\u6210"} #${globalIndex + 1}`,
+                  content: media.hdUrl || media.url,
+                  metadata: buildMediaMetadata(globalIndex)
+                });
+              },
+              className: "flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-white bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 10 }),
+                "\u8BE6\u60C5"
+              ]
+            }
+          ) })
+        ]
+      },
+      `${type}-${index}`
+    );
+  };
+  const allMedia = [
+    ...videoUrls.map((v, i) => ({ type: "video", media: v, index: i })),
+    ...imageUrls.map((img, i) => ({ type: "image", media: img, index: i }))
+  ];
+  if (totalCount === 1) {
+    const item = allMedia[0];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[280px]", children: renderMediaItem(item.type, item.media, item.index, "aspect-[4/3] max-h-[210px]") });
+  }
+  if (totalCount === 2) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1.5 max-w-[320px]", children: allMedia.map(
+      (item) => renderMediaItem(item.type, item.media, item.index, "aspect-square")
+    ) });
+  }
+  if (totalCount === 3) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-1.5 max-w-[360px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 row-span-2", children: renderMediaItem(allMedia[0].type, allMedia[0].media, allMedia[0].index, "aspect-square h-full") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        renderMediaItem(allMedia[1].type, allMedia[1].media, allMedia[1].index, "aspect-square"),
+        renderMediaItem(allMedia[2].type, allMedia[2].media, allMedia[2].index, "aspect-square")
+      ] })
+    ] });
+  }
+  if (totalCount === 4) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1.5 max-w-[280px]", children: allMedia.map(
+      (item) => renderMediaItem(item.type, item.media, item.index, "aspect-square")
+    ) });
+  }
+  if (totalCount <= 6) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1.5 max-w-[320px]", children: allMedia.map(
+      (item) => renderMediaItem(item.type, item.media, item.index, "aspect-square")
+    ) });
+  }
+  if (totalCount <= 9) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1.5 max-w-[320px]", children: allMedia.slice(0, 9).map(
+      (item) => renderMediaItem(item.type, item.media, item.index, "aspect-square")
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-1.5 max-w-[320px]", children: [
+    allMedia.slice(0, 8).map(
+      (item) => renderMediaItem(item.type, item.media, item.index, "aspect-square")
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "aspect-square relative rounded-lg overflow-hidden cursor-pointer group/more",
+        onClick: () => onPreview(allMedia[8].media.hdUrl || allMedia[8].media.url),
+        children: [
+          allMedia[8].type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: allMedia[8].media.url,
+              alt: "More",
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            MessageVideoInternal,
+            {
+              src: allMedia[8].media.hdUrl || allMedia[8].media.url,
+              className: "w-full h-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/60 flex items-center justify-center group-hover/more:bg-black/70 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white text-lg font-semibold", children: [
+            "+",
+            totalCount - 8
+          ] }) })
+        ]
+      }
+    )
+  ] });
+});
 var ToolResultRenderer = React16.memo(function ToolResultRenderer2({
   result,
   mediaUrls,
@@ -13343,6 +13519,21 @@ var ToolResultRenderer = React16.memo(function ToolResultRenderer2({
   const handleImgLoad = (index) => {
     setImgLoaded((prev) => ({ ...prev, [index]: true }));
   };
+  const buildMediaMetadata = (mediaIndex) => {
+    if (!toolCallData) return void 0;
+    const resultAny = toolCallData.result;
+    const metadata = {};
+    metadata.toolName = toolCallData?.displayName || toolCallData?.name || "\u5DE5\u5177\u8C03\u7528";
+    if (toolCallData.arguments) metadata.generationParams = toolCallData.arguments;
+    if (resultAny?.relation) metadata.relation = resultAny.relation;
+    if (resultAny?.taskId) metadata.taskId = resultAny.taskId;
+    const work = resultAny?.works?.[mediaIndex];
+    if (work) {
+      if (work.publicId) metadata.workId = work.publicId;
+      if (work.fileId) metadata.fileId = work.fileId;
+    }
+    return metadata;
+  };
   if (!hasMedia && !hasFilteredResult && !hasCustomResponses) {
     return null;
   }
@@ -13355,131 +13546,19 @@ var ToolResultRenderer = React16.memo(function ToolResultRenderer2({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      hasMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: (() => {
-        const totalMedia = imageUrls.length + videoUrls.length;
-        const isMultiple = totalMedia > 1;
-        const buildMediaMetadata = (mediaIndex) => {
-          if (!toolCallData) return void 0;
-          const resultAny = toolCallData.result;
-          const metadata = {};
-          metadata.toolName = toolCallData?.displayName || toolCallData?.name || "\u5DE5\u5177\u8C03\u7528";
-          if (toolCallData.arguments) metadata.generationParams = toolCallData.arguments;
-          if (resultAny?.relation) metadata.relation = resultAny.relation;
-          if (resultAny?.taskId) metadata.taskId = resultAny.taskId;
-          const work = resultAny?.works?.[mediaIndex];
-          if (work) {
-            if (work.publicId) metadata.workId = work.publicId;
-            if (work.fileId) metadata.fileId = work.fileId;
-          }
-          return metadata;
-        };
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isMultiple ? "grid grid-cols-2 gap-2" : "flex", children: [
-          videoUrls.map((video, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: `relative group/media overflow-hidden rounded-lg bg-black ${isMultiple ? "aspect-square" : "max-h-[375px]"}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  MessageVideoInternal,
-                  {
-                    src: video.hdUrl || video.url,
-                    className: isMultiple ? "w-full h-full object-cover" : "max-h-[375px] max-w-full object-contain"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover/media:opacity-100 transition-opacity duration-200 flex items-center justify-between z-[10]", children: [
-                  onOpenArtifact && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        const displayName = toolCallData?.displayName || "\u89C6\u9891\u751F\u6210";
-                        onOpenArtifact({
-                          type: "video",
-                          title: `${displayName} #${i + 1}`,
-                          content: video.hdUrl || video.url,
-                          metadata: buildMediaMetadata(imageUrls.length + i)
-                        });
-                      },
-                      className: "flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 12 }),
-                        "\u67E5\u770B\u8BE6\u60C5"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        window.open(video.hdUrl || video.url, "_blank");
-                      },
-                      className: "p-1.5 text-white/80 hover:text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
-                      title: "\u65B0\u7A97\u53E3\u6253\u5F00",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { size: 14 })
-                    }
-                  )
-                ] })
-              ]
-            },
-            `video-${i}`
-          )),
-          imageUrls.map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: `relative group/media overflow-hidden rounded-lg bg-black ${isMultiple ? "aspect-square" : "max-h-[375px]"}`,
-              children: [
-                !imgLoaded[i] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-zinc-800 animate-pulse flex items-center justify-center w-full aspect-square", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-[#d8ff00]" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: img.url,
-                    alt: "Generated",
-                    onLoad: () => handleImgLoad(i),
-                    className: `cursor-zoom-in ${imgLoaded[i] ? "" : "hidden"} ${isMultiple ? "w-full h-full object-cover" : "max-h-[375px] max-w-full h-auto object-contain"}`,
-                    onClick: () => setPreviewUrl(img.hdUrl)
-                  }
-                ),
-                imgLoaded[i] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover/media:opacity-100 transition-opacity duration-200 flex items-center justify-between", children: [
-                  onOpenArtifact && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        const displayName = toolCallData?.displayName || "\u56FE\u7247\u751F\u6210";
-                        onOpenArtifact({
-                          type: "image",
-                          title: `${displayName} #${i + 1}`,
-                          content: img.hdUrl || img.url,
-                          metadata: buildMediaMetadata(i)
-                        });
-                      },
-                      className: "flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 12 }),
-                        "\u67E5\u770B\u8BE6\u60C5"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setPreviewUrl(img.hdUrl);
-                      },
-                      className: "p-1.5 text-white/80 hover:text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
-                      title: "\u653E\u5927\u9884\u89C8",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { size: 14 })
-                    }
-                  )
-                ] })
-              ]
-            },
-            `img-${i}`
-          ))
-        ] });
-      })() }),
+      hasMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        MediaGrid,
+        {
+          imageUrls,
+          videoUrls,
+          imgLoaded,
+          onImgLoad: handleImgLoad,
+          onPreview: setPreviewUrl,
+          onOpenArtifact,
+          buildMediaMetadata,
+          toolDisplayName: toolCallData?.displayName
+        }
+      ) }),
       hasCustomResponses && customResult
     ] })
   ] });
@@ -22009,23 +22088,115 @@ function useResolvedThumbnailUrl(content, options) {
   }, [content, fileId, type, config, enabled]);
   return url;
 }
+var MIN_ZOOM = 10;
+var MAX_ZOOM = 500;
+var ZOOM_STEP = 10;
+var WHEEL_ZOOM_FACTOR = 0.1;
 var ImageArtifactPreview = React16.memo(function ImageArtifactPreview2({
   content,
   metadata,
   config
 }) {
-  const [isZoomed, setIsZoomed] = React16.useState(false);
   const [showInfo, setShowInfo] = React16.useState(true);
   const [imgNaturalSize, setImgNaturalSize] = React16.useState(null);
   const [copied, setCopied] = React16.useState(null);
+  const [zoom, setZoom] = React16.useState(100);
+  const [fitZoom, setFitZoom] = React16.useState(100);
+  const [isDragging, setIsDragging] = React16.useState(false);
+  const [dragStart, setDragStart] = React16.useState({ x: 0, y: 0 });
+  const [scrollStart, setScrollStart] = React16.useState({ x: 0, y: 0 });
+  const containerRef = React16.useRef(null);
+  const scrollRef = React16.useRef(null);
+  const imageRef = React16.useRef(null);
   const { hdUrl: resolvedHdUrl } = useResolvedMediaUrl(content, {
     fileId: metadata?.fileId,
     type: "image",
     config
   });
-  const generationParams = metadata?.generationParams;
+  const generationParams = metadata?.generationParams || metadata;
   const toolName = metadata?.toolName;
   const relation = metadata?.relation;
+  const calculateFitZoom = React16.useCallback(() => {
+    if (!containerRef.current || !imgNaturalSize) return 100;
+    const container = containerRef.current;
+    const padding = 48;
+    const availableWidth = container.clientWidth - padding;
+    const availableHeight = container.clientHeight - padding;
+    const scaleX = availableWidth / imgNaturalSize.width;
+    const scaleY = availableHeight / imgNaturalSize.height;
+    return Math.min(scaleX, scaleY, 1) * 100;
+  }, [imgNaturalSize]);
+  const handleImageLoad = React16.useCallback((e) => {
+    const img = e.target;
+    const naturalSize = { width: img.naturalWidth, height: img.naturalHeight };
+    setImgNaturalSize(naturalSize);
+  }, []);
+  React16.useEffect(() => {
+    if (imgNaturalSize && containerRef.current) {
+      const fit = calculateFitZoom();
+      setFitZoom(fit);
+      setZoom(fit);
+      requestAnimationFrame(() => {
+        if (scrollRef.current) {
+          const el = scrollRef.current;
+          el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+          el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
+        }
+      });
+    }
+  }, [imgNaturalSize, calculateFitZoom]);
+  const setZoomWithCenter = React16.useCallback((newZoom, centerX, centerY) => {
+    const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom));
+    if (scrollRef.current && imgNaturalSize) {
+      const el = scrollRef.current;
+      const oldZoom = zoom;
+      const cx2 = centerX ?? el.clientWidth / 2;
+      const cy = centerY ?? el.clientHeight / 2;
+      const imgX = (el.scrollLeft + cx2) / (oldZoom / 100);
+      const imgY = (el.scrollTop + cy) / (oldZoom / 100);
+      setZoom(clampedZoom);
+      requestAnimationFrame(() => {
+        el.scrollLeft = imgX * (clampedZoom / 100) - cx2;
+        el.scrollTop = imgY * (clampedZoom / 100) - cy;
+      });
+    } else {
+      setZoom(clampedZoom);
+    }
+  }, [zoom, imgNaturalSize]);
+  const handleWheel = React16.useCallback((e) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      const rect = scrollRef.current?.getBoundingClientRect();
+      const centerX = rect ? e.clientX - rect.left : void 0;
+      const centerY = rect ? e.clientY - rect.top : void 0;
+      const delta = -e.deltaY * WHEEL_ZOOM_FACTOR;
+      setZoomWithCenter(zoom * (1 + delta / 100), centerX, centerY);
+    }
+  }, [zoom, setZoomWithCenter]);
+  const handleMouseDown = React16.useCallback((e) => {
+    if (e.button === 0 && scrollRef.current) {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX, y: e.clientY });
+      setScrollStart({ x: scrollRef.current.scrollLeft, y: scrollRef.current.scrollTop });
+      e.preventDefault();
+    }
+  }, []);
+  const handleMouseMove = React16.useCallback((e) => {
+    if (isDragging && scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollStart.x - (e.clientX - dragStart.x);
+      scrollRef.current.scrollTop = scrollStart.y - (e.clientY - dragStart.y);
+    }
+  }, [isDragging, dragStart, scrollStart]);
+  const handleMouseUp = React16.useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleDoubleClick = React16.useCallback(() => {
+    if (Math.abs(zoom - fitZoom) < 1) {
+      setZoomWithCenter(100);
+    } else {
+      setZoomWithCenter(fitZoom);
+    }
+  }, [zoom, fitZoom, setZoomWithCenter]);
   const handleCopy = React16.useCallback(async (text3, label) => {
     try {
       await navigator.clipboard.writeText(text3);
@@ -22043,6 +22214,20 @@ var ImageArtifactPreview = React16.memo(function ImageArtifactPreview2({
     link2.click();
     document.body.removeChild(link2);
   }, [resolvedHdUrl]);
+  const handleZoomIn = React16.useCallback(() => {
+    setZoomWithCenter(Math.ceil((zoom + ZOOM_STEP) / ZOOM_STEP) * ZOOM_STEP);
+  }, [zoom, setZoomWithCenter]);
+  const handleZoomOut = React16.useCallback(() => {
+    setZoomWithCenter(Math.floor((zoom - ZOOM_STEP) / ZOOM_STEP) * ZOOM_STEP);
+  }, [zoom, setZoomWithCenter]);
+  const handleFitToScreen = React16.useCallback(() => {
+    setZoomWithCenter(fitZoom);
+  }, [fitZoom, setZoomWithCenter]);
+  const handleActualSize = React16.useCallback(() => {
+    setZoomWithCenter(100);
+  }, [setZoomWithCenter]);
+  const displayWidth = imgNaturalSize ? imgNaturalSize.width * (zoom / 100) : 0;
+  const displayHeight = imgNaturalSize ? imgNaturalSize.height * (zoom / 100) : 0;
   const formatParamKey = (key) => {
     const keyMap = {
       content: "Prompt",
@@ -22063,67 +22248,188 @@ var ImageArtifactPreview = React16.memo(function ImageArtifactPreview2({
   const promptText = generationParams?.content ? String(generationParams.content) : null;
   const otherParams = generationParams ? Object.entries(generationParams).filter(([key]) => key !== "content") : [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto flex items-center justify-center p-6 bg-zinc-950 agent-sdk-light:bg-zinc-50 relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-[0.03]", style: {
-        backgroundImage: "linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%)",
-        backgroundSize: "20px 20px",
-        backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px"
-      } }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn3(
-            "relative transition-transform duration-300 cursor-zoom-in z-10",
-            isZoomed && "cursor-zoom-out scale-[2] z-50"
-          ),
-          onClick: () => setIsZoomed((prev) => !prev),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "flex-1 relative bg-zinc-950 agent-sdk-light:bg-zinc-50 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-[0.03] pointer-events-none", style: {
+            backgroundImage: "linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%)",
+            backgroundSize: "20px 20px",
+            backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px"
+          } }),
+          !imgNaturalSize && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-48 h-36 rounded-xl bg-zinc-800/60 overflow-hidden border border-zinc-700/30", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 bg-gradient-to-r from-transparent via-zinc-600/20 to-transparent",
+                  style: {
+                    animation: "shimmer 1.5s ease-in-out infinite"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+                  @keyframes shimmer {
+                    0% { transform: translateX(-100%); }
+                    100% { transform: translateX(100%); }
+                  }
+                ` }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileImage, { size: 32, className: "text-zinc-600" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-5 h-5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-zinc-700" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border-2 border-t-[#d8ff00] animate-spin" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-zinc-500", children: "\u52A0\u8F7D\u4E2D..." })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              src: resolvedHdUrl,
-              alt: "Generated image",
-              className: "max-w-full max-h-[60vh] object-contain rounded-lg shadow-2xl",
-              loading: "lazy",
-              onLoad: (e) => {
-                const img = e.target;
-                setImgNaturalSize({ width: img.naturalWidth, height: img.naturalHeight });
-              }
+              ref: scrollRef,
+              className: cn3(
+                "absolute inset-0 overflow-auto",
+                isDragging ? "cursor-grabbing" : "cursor-grab",
+                !imgNaturalSize && "invisible"
+                // 加载完成前隐藏
+              ),
+              onWheel: handleWheel,
+              onMouseDown: handleMouseDown,
+              onMouseMove: handleMouseMove,
+              onMouseUp: handleMouseUp,
+              onMouseLeave: handleMouseUp,
+              onDoubleClick: handleDoubleClick,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center",
+                  style: {
+                    minWidth: "100%",
+                    minHeight: "100%",
+                    width: displayWidth > 0 ? Math.max(displayWidth + 48, scrollRef.current?.clientWidth || 0) : "100%",
+                    height: displayHeight > 0 ? Math.max(displayHeight + 48, scrollRef.current?.clientHeight || 0) : "100%",
+                    padding: "24px"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      ref: imageRef,
+                      src: resolvedHdUrl,
+                      alt: "Generated image",
+                      className: cn3(
+                        "rounded-lg shadow-2xl select-none transition-opacity duration-300",
+                        imgNaturalSize ? "opacity-100" : "opacity-0"
+                      ),
+                      draggable: false,
+                      style: {
+                        width: displayWidth > 0 ? displayWidth : "auto",
+                        height: displayHeight > 0 ? displayHeight : "auto",
+                        maxWidth: "none",
+                        maxHeight: "none"
+                      },
+                      onLoad: handleImageLoad
+                    }
+                  )
+                }
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 right-4 flex items-center gap-1.5 z-20", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => setShowInfo((prev) => !prev),
-            className: cn3(
-              "p-2 rounded-lg backdrop-blur-sm transition-colors",
-              showInfo ? "bg-[#d8ff00]/20 text-[#d8ff00]" : "bg-black/30 text-white/70 hover:text-white hover:bg-black/50"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-3 right-3 flex items-center gap-1 z-50", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setShowInfo((prev) => !prev),
+                className: cn3(
+                  "p-2 rounded-lg backdrop-blur-md transition-all",
+                  showInfo ? "bg-[#d8ff00]/20 text-[#d8ff00] shadow-lg shadow-[#d8ff00]/10" : "bg-zinc-900/70 text-zinc-400 hover:text-white hover:bg-zinc-800/80"
+                ),
+                title: showInfo ? "\u9690\u85CF\u8BE6\u60C5" : "\u663E\u793A\u8BE6\u60C5",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 15 })
+              }
             ),
-            title: showInfo ? "\u9690\u85CF\u8BE6\u60C5" : "\u663E\u793A\u8BE6\u60C5",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleDownload,
-            className: "p-2 bg-black/30 text-white/70 hover:text-white hover:bg-black/50 rounded-lg backdrop-blur-sm transition-colors",
-            title: "\u4E0B\u8F7D\u56FE\u7247",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 })
-          }
-        )
-      ] }),
-      imgNaturalSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 left-4 z-20 flex items-center gap-2 px-2.5 py-1.5 bg-black/40 backdrop-blur-sm rounded-lg", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileImage, { size: 12, className: "text-white/60" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-white/80 font-mono", children: [
-          imgNaturalSize.width,
-          " \xD7 ",
-          imgNaturalSize.height
-        ] })
-      ] })
-    ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleDownload,
+                className: "p-2 bg-zinc-900/70 text-zinc-400 hover:text-white hover:bg-zinc-800/80 rounded-lg backdrop-blur-md transition-all",
+                title: "\u4E0B\u8F7D\u539F\u56FE",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 15 })
+              }
+            )
+          ] }),
+          imgNaturalSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-3 left-3 z-50 flex items-center gap-1.5 px-2.5 py-1.5 bg-zinc-900/80 backdrop-blur-md rounded-lg border border-zinc-700/50", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileImage, { size: 12, className: "text-zinc-500" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-zinc-300 font-mono", children: [
+              imgNaturalSize.width,
+              " \xD7 ",
+              imgNaturalSize.height
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 px-1.5 py-1 bg-zinc-900/90 backdrop-blur-md rounded-xl border border-zinc-700/50 shadow-xl", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleZoomOut,
+                disabled: zoom <= MIN_ZOOM,
+                className: "p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-700/50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg transition-all",
+                title: "\u7F29\u5C0F (Ctrl+\u6EDA\u8F6E)",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: 14, strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleActualSize,
+                className: "min-w-[52px] px-2 py-1 text-[11px] font-medium text-zinc-200 hover:text-white hover:bg-zinc-700/50 rounded-lg transition-all font-mono",
+                title: "\u70B9\u51FB\u6062\u590D 100%",
+                children: [
+                  Math.round(zoom),
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleZoomIn,
+                disabled: zoom >= MAX_ZOOM,
+                className: "p-1.5 text-zinc-400 hover:text-white hover:bg-zinc-700/50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg transition-all",
+                title: "\u653E\u5927 (Ctrl+\u6EDA\u8F6E)",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14, strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-zinc-700/50 mx-0.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleFitToScreen,
+                className: cn3(
+                  "p-1.5 rounded-lg transition-all",
+                  Math.abs(zoom - fitZoom) < 1 ? "text-[#d8ff00] bg-[#d8ff00]/10" : "text-zinc-400 hover:text-white hover:bg-zinc-700/50"
+                ),
+                title: "\u9002\u5E94\u5C4F\u5E55",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { size: 13, strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleActualSize,
+                className: cn3(
+                  "p-1.5 rounded-lg transition-all",
+                  Math.abs(zoom - 100) < 1 ? "text-[#d8ff00] bg-[#d8ff00]/10" : "text-zinc-400 hover:text-white hover:bg-zinc-700/50"
+                ),
+                title: "\u539F\u59CB\u5C3A\u5BF8 (100%)",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 13, strokeWidth: 2 })
+              }
+            )
+          ] }) })
+        ]
+      }
+    ),
     showInfo && (generationParams || toolName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-t border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/80 agent-sdk-light:bg-zinc-50 max-h-[40%] overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-4 space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
@@ -25525,7 +25831,7 @@ var AgentChat = React16__namespace.default.forwardRef(({
           "div",
           {
             ref: containerRef,
-            className: "flex-1 flex min-h-0 relative",
+            className: "flex-1 relative min-h-0",
             "data-artifact-container": true,
             children: [
               isDragging && /* @__PURE__ */ jsxRuntime.jsx(
@@ -25539,9 +25845,9 @@ var AgentChat = React16__namespace.default.forwardRef(({
                 "div",
                 {
                   className: cn3(
-                    "flex flex-col min-h-0 overflow-hidden",
-                    !isDragging && "transition-[width,opacity,transform] duration-300 ease-out",
-                    isArtifactFullscreen ? "w-0 min-w-0 opacity-0 -translate-x-4" : currentArtifact ? "min-w-[350px]" : "w-full"
+                    "flex flex-col min-h-0 h-full overflow-hidden",
+                    !isDragging && "transition-[width,opacity] duration-300 ease-out",
+                    isArtifactFullscreen ? "w-0 opacity-0 pointer-events-none" : currentArtifact ? "min-w-[350px]" : "w-full"
                   ),
                   style: currentArtifact && !isArtifactFullscreen ? { width: `${100 - artifactPanelWidth}%` } : void 0,
                   children: [
@@ -25630,9 +25936,9 @@ var AgentChat = React16__namespace.default.forwardRef(({
                 "div",
                 {
                   className: cn3(
-                    "flex-shrink-0 overflow-hidden h-full relative",
+                    "absolute right-0 top-0 h-full overflow-hidden",
                     !isDragging && "transition-[width,opacity] duration-300 ease-out",
-                    currentArtifact ? isArtifactFullscreen ? "w-full min-w-0 border-l-0" : "min-w-[400px]" : "w-0 min-w-0 opacity-0"
+                    currentArtifact ? isArtifactFullscreen ? "w-full" : "min-w-[400px]" : "w-0 opacity-0"
                   ),
                   style: currentArtifact && !isArtifactFullscreen ? { width: `${artifactPanelWidth}%` } : void 0,
                   children: [