@gendive/chatllm 0.6.4 → 0.6.6

package/dist/react/index.js

@@ -1882,18 +1882,11 @@ var parseInlineElements = (text, key) => {
       if (match) {
         elements.push(
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "img",
+            ImageWithCopyButton,
             {
               src: match[2],
               alt: match[1] || "",
-              className: "chatllm-image",
-              style: {
-                maxWidth: "100%",
-                borderRadius: "8px",
-                margin: "8px 0",
-                display: "block"
-              },
-              loading: "lazy"
+              imageKey: `${key}-image-${index}`
             },
             `${key}-image-${index}`
           )
@@ -2066,6 +2059,162 @@ var CodeBlock = ({ language, code }) => {
     }
   );
 };
+var ImageWithCopyButton = ({ src, alt, imageKey }) => {
+  const [isHovered, setIsHovered] = import_react5.default.useState(false);
+  const [copyState, setCopyState] = import_react5.default.useState("idle");
+  const handleCopyImage = async () => {
+    setCopyState("copying");
+    try {
+      const response = await fetch(src);
+      if (!response.ok) throw new Error("Failed to fetch image");
+      const blob = await response.blob();
+      if (navigator.clipboard && navigator.clipboard.write) {
+        let imageBlob = blob;
+        if (blob.type !== "image/png") {
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          await new Promise((resolve, reject) => {
+            img.onload = () => {
+              const canvas = document.createElement("canvas");
+              canvas.width = img.naturalWidth;
+              canvas.height = img.naturalHeight;
+              const ctx = canvas.getContext("2d");
+              if (!ctx) {
+                reject(new Error("Failed to get canvas context"));
+                return;
+              }
+              ctx.drawImage(img, 0, 0);
+              canvas.toBlob((pngBlob) => {
+                if (pngBlob) {
+                  imageBlob = pngBlob;
+                  resolve();
+                } else {
+                  reject(new Error("Failed to convert to PNG"));
+                }
+              }, "image/png");
+            };
+            img.onerror = () => reject(new Error("Failed to load image"));
+            img.src = URL.createObjectURL(blob);
+          });
+        }
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [imageBlob.type]: imageBlob
+          })
+        ]);
+        setCopyState("copied");
+        setTimeout(() => setCopyState("idle"), 2e3);
+      } else {
+        await navigator.clipboard.writeText(src);
+        setCopyState("copied");
+        setTimeout(() => setCopyState("idle"), 2e3);
+      }
+    } catch (error) {
+      console.error("Failed to copy image:", error);
+      setCopyState("error");
+      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 getCopyButtonColor = () => {
+    switch (copyState) {
+      case "copied":
+        return "var(--chatllm-success, #22c55e)";
+      case "error":
+        return "var(--chatllm-error, #ef4444)";
+      default:
+        return "var(--chatllm-text, #ffffff)";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "inline-block",
+        margin: "8px 0"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src,
+            alt,
+            className: "chatllm-image",
+            style: {
+              maxWidth: "100%",
+              borderRadius: "8px",
+              display: "block"
+            },
+            loading: "lazy"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "button",
+          {
+            onClick: handleCopyImage,
+            disabled: copyState === "copying",
+            style: {
+              position: "absolute",
+              top: "8px",
+              right: "8px",
+              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)",
+              transition: "opacity 0.2s ease, transform 0.2s ease",
+              backdropFilter: "blur(4px)",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "svg",
+                {
+                  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: [
+                    /* @__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()
+            ]
+          }
+        )
+      ]
+    },
+    imageKey
+  );
+};
 var ChoiceButtons = ({ choices, onChoiceClick }) => {
   const [hoveredIndex, setHoveredIndex] = import_react5.default.useState(null);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -4422,7 +4571,7 @@ var ChatUI = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showSettings && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           MemoryPanel,
           {
             items: memoryItems,