@gendive/chatllm 0.6.8 → 0.6.9

package/dist/react/index.js

@@ -2065,97 +2065,80 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
   const [isHovered, setIsHovered] = import_react5.default.useState(false);
   const [copyState, setCopyState] = import_react5.default.useState("idle");
   const imgRef = import_react5.default.useRef(null);
-  const handleCopyImage = async () => {
-    setCopyState("copying");
-    try {
-      if (!navigator.clipboard || !navigator.clipboard.write) {
-        await navigator.clipboard.writeText(src);
-        setCopyState("copied");
-        setTimeout(() => setCopyState("idle"), 2e3);
-        return;
-      }
-      const img = imgRef.current;
-      if (img && img.complete && img.naturalWidth > 0) {
-        try {
-          const canvas = document.createElement("canvas");
-          canvas.width = img.naturalWidth;
-          canvas.height = img.naturalHeight;
-          const ctx = canvas.getContext("2d");
-          if (ctx) {
-            ctx.drawImage(img, 0, 0);
-            const blob = await new Promise((resolve) => {
-              canvas.toBlob(resolve, "image/png");
-            });
-            if (blob) {
-              await navigator.clipboard.write([
-                new ClipboardItem({ "image/png": blob })
-              ]);
-              setCopyState("copied");
-              setTimeout(() => setCopyState("idle"), 2e3);
-              return;
-            }
-          }
-        } catch {
-          console.log("Canvas method failed (CORS), trying fetch...");
+  const getImageBlob = async () => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth > 0) {
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(img, 0, 0);
+          const blob = await new Promise((resolve) => {
+            canvas.toBlob(resolve, "image/png");
+          });
+          if (blob) return blob;
         }
+      } catch {
+        console.log("Canvas method failed (CORS), trying fetch...");
       }
+    }
+    if (!src.startsWith("data:")) {
       try {
         const response = await fetch(src, { mode: "cors" });
         if (response.ok) {
           const blob = await response.blob();
-          if (blob.type === "image/png") {
-            await navigator.clipboard.write([
-              new ClipboardItem({ "image/png": blob })
-            ]);
-            setCopyState("copied");
-            setTimeout(() => setCopyState("idle"), 2e3);
-            return;
-          }
+          if (blob.type === "image/png") return blob;
           const tempImg = new Image();
           const blobUrl = URL.createObjectURL(blob);
-          await new Promise((resolve, reject) => {
-            tempImg.onload = async () => {
-              try {
-                const canvas = document.createElement("canvas");
-                canvas.width = tempImg.naturalWidth;
-                canvas.height = tempImg.naturalHeight;
-                const ctx = canvas.getContext("2d");
-                if (!ctx) {
-                  reject(new Error("Failed to get canvas context"));
-                  return;
-                }
+          return new Promise((resolve) => {
+            tempImg.onload = () => {
+              const canvas = document.createElement("canvas");
+              canvas.width = tempImg.naturalWidth;
+              canvas.height = tempImg.naturalHeight;
+              const ctx = canvas.getContext("2d");
+              if (ctx) {
                 ctx.drawImage(tempImg, 0, 0);
-                const pngBlob = await new Promise((res) => {
-                  canvas.toBlob(res, "image/png");
-                });
+                canvas.toBlob((pngBlob) => {
+                  URL.revokeObjectURL(blobUrl);
+                  resolve(pngBlob);
+                }, "image/png");
+              } else {
                 URL.revokeObjectURL(blobUrl);
-                if (pngBlob) {
-                  await navigator.clipboard.write([
-                    new ClipboardItem({ "image/png": pngBlob })
-                  ]);
-                  setCopyState("copied");
-                  setTimeout(() => setCopyState("idle"), 2e3);
-                  resolve();
-                } else {
-                  reject(new Error("Failed to create PNG blob"));
-                }
-              } catch (err) {
-                reject(err);
+                resolve(null);
               }
             };
             tempImg.onerror = () => {
               URL.revokeObjectURL(blobUrl);
-              reject(new Error("Failed to load image"));
+              resolve(null);
             };
             tempImg.src = blobUrl;
           });
-          return;
         }
       } catch {
-        console.log("Fetch method failed, using URL fallback");
+        console.log("Fetch method failed");
+      }
+    }
+    return null;
+  };
+  const handleCopy = async () => {
+    setCopyState("copying");
+    try {
+      if (!navigator.clipboard?.write) {
+        await navigator.clipboard.writeText(src);
+        setCopyState("copied");
+        setTimeout(() => setCopyState("idle"), 2e3);
+        return;
+      }
+      const blob = await getImageBlob();
+      if (blob) {
+        await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+        setCopyState("copied");
+      } else {
+        await navigator.clipboard.writeText(src);
+        setCopyState("copied");
       }
-      await navigator.clipboard.writeText(src);
-      setCopyState("copied");
       setTimeout(() => setCopyState("idle"), 2e3);
     } catch (error) {
       console.error("Failed to copy image:", error);
@@ -2163,27 +2146,34 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
       setTimeout(() => setCopyState("idle"), 2e3);
     }
   };
-  const getCopyButtonText = () => {
-    switch (copyState) {
-      case "copying":
-        return "\uBCF5\uC0AC \uC911...";
-      case "copied":
-        return "\uBCF5\uC0AC\uB428!";
-      case "error":
-        return "\uBCF5\uC0AC \uC2E4\uD328";
-      default:
-        return "\uC774\uBBF8\uC9C0 \uBCF5\uC0AC";
+  const handleDownload = async () => {
+    try {
+      const blob = await getImageBlob();
+      const url = blob ? URL.createObjectURL(blob) : src;
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = alt || `image-${Date.now()}.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      if (blob) URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to download image:", error);
+      window.open(src, "_blank");
     }
   };
-  const getCopyButtonColor = () => {
-    switch (copyState) {
-      case "copied":
-        return "var(--chatllm-success, #22c55e)";
-      case "error":
-        return "var(--chatllm-error, #ef4444)";
-      default:
-        return "var(--chatllm-text, #ffffff)";
-    }
+  const toolbarButtonStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "36px",
+    height: "36px",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "8px",
+    cursor: "pointer",
+    color: "var(--chatllm-text-muted, #9ca3af)",
+    transition: "background-color 0.2s, color 0.2s"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
@@ -2213,50 +2203,71 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          "button",
+          "div",
           {
-            onClick: handleCopyImage,
-            disabled: copyState === "copying",
             style: {
               position: "absolute",
-              top: "8px",
-              right: "8px",
+              bottom: "0",
+              left: "0",
+              right: "0",
               display: "flex",
               alignItems: "center",
-              gap: "6px",
-              padding: "6px 12px",
-              backgroundColor: "rgba(0, 0, 0, 0.7)",
-              color: getCopyButtonColor(),
-              border: "none",
-              borderRadius: "6px",
-              fontSize: "12px",
-              fontWeight: 500,
-              cursor: copyState === "copying" ? "wait" : "pointer",
-              opacity: isHovered || copyState !== "idle" ? 1 : 0,
-              transform: isHovered || copyState !== "idle" ? "translateY(0)" : "translateY(-4px)",
+              gap: "4px",
+              padding: "8px 12px",
+              backgroundColor: "var(--chatllm-bg, #ffffff)",
+              borderTop: "1px solid var(--chatllm-border-light, #e5e7eb)",
+              borderRadius: "0 0 8px 8px",
+              opacity: isHovered ? 1 : 0,
+              transform: isHovered ? "translateY(0)" : "translateY(8px)",
               transition: "opacity 0.2s ease, transform 0.2s ease",
-              backdropFilter: "blur(4px)",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)"
+              pointerEvents: isHovered ? "auto" : "none"
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                "svg",
+                "button",
                 {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: copyState === "copied" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "20 6 9 17 4 12" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                  onClick: handleCopy,
+                  disabled: copyState === "copying",
+                  style: {
+                    ...toolbarButtonStyle,
+                    color: copyState === "copied" ? "var(--chatllm-success, #22c55e)" : copyState === "error" ? "var(--chatllm-error, #ef4444)" : "var(--chatllm-text-muted, #9ca3af)"
+                  },
+                  title: copyState === "copied" ? "\uBCF5\uC0AC\uB428!" : copyState === "error" ? "\uBCF5\uC0AC \uC2E4\uD328" : "\uBCF5\uC0AC\uD558\uAE30",
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+                    e.currentTarget.style.color = "var(--chatllm-text, #1f2937)";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = copyState === "copied" ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-text-muted, #9ca3af)";
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: copyState === "copied" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "20 6 9 17 4 12" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                  ] })
+                  ] }) })
                 }
               ),
-              getCopyButtonText()
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handleDownload,
+                  style: toolbarButtonStyle,
+                  title: "\uB2E4\uC6B4\uB85C\uB4DC",
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+                    e.currentTarget.style.color = "var(--chatllm-text, #1f2937)";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = "var(--chatllm-text-muted, #9ca3af)";
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                  ] })
+                }
+              )
             ]
           }
         )