@gendive/chatllm 0.6.5 → 0.6.7

package/dist/react/index.d.mts

@@ -273,6 +273,10 @@ interface HeaderProps {
     onSettingsOpen: () => void;
     onSidebarToggle: () => void;
     sidebarOpen: boolean;
+    /** 모델 선택기 표시 여부 */
+    showModelSelector?: boolean;
+    /** 설정 버튼 표시 여부 */
+    showSettings?: boolean;
 }
 interface EmptyStateProps {
     greeting: string;

package/dist/react/index.d.ts

@@ -273,6 +273,10 @@ interface HeaderProps {
     onSettingsOpen: () => void;
     onSidebarToggle: () => void;
     sidebarOpen: boolean;
+    /** 모델 선택기 표시 여부 */
+    showModelSelector?: boolean;
+    /** 설정 버튼 표시 여부 */
+    showSettings?: boolean;
 }
 interface EmptyStateProps {
     greeting: string;

package/dist/react/index.js

@@ -1073,7 +1073,9 @@ var ChatHeader = ({
   onModelChange,
   onSettingsOpen,
   onSidebarToggle,
-  sidebarOpen
+  sidebarOpen,
+  showModelSelector = true,
+  showSettings = true
 }) => {
   const [modelDropdownOpen, setModelDropdownOpen] = (0, import_react2.useState)(false);
   const currentModel = models.find((m) => m.id === model);
@@ -1130,7 +1132,7 @@ var ChatHeader = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
+          showModelSelector && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "button",
               {
@@ -1297,7 +1299,7 @@ var ChatHeader = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          showSettings && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               onClick: onSettingsOpen,
@@ -1882,18 +1884,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 +2061,210 @@ 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 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...");
+        }
+      }
+      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;
+          }
+          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;
+                }
+                ctx.drawImage(tempImg, 0, 0);
+                const pngBlob = await new Promise((res) => {
+                  canvas.toBlob(res, "image/png");
+                });
+                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);
+              }
+            };
+            tempImg.onerror = () => {
+              URL.revokeObjectURL(blobUrl);
+              reject(new Error("Failed to load image"));
+            };
+            tempImg.src = blobUrl;
+          });
+          return;
+        }
+      } catch {
+        console.log("Fetch method failed, using URL fallback");
+      }
+      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",
+          {
+            ref: imgRef,
+            src,
+            alt,
+            className: "chatllm-image",
+            crossOrigin: "anonymous",
+            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)(
@@ -4372,7 +4571,9 @@ var ChatUI = ({
                   onModelChange: setModel,
                   onSettingsOpen: openSettings,
                   onSidebarToggle: toggleSidebar,
-                  sidebarOpen
+                  sidebarOpen,
+                  showModelSelector,
+                  showSettings
                 }
               ),
               messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(