@gendive/chatllm 0.6.6 → 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,
@@ -2062,53 +2064,99 @@ 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 {
-      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";
+      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) => {
-            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) => {
+            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) {
-                  imageBlob = pngBlob;
+                  await navigator.clipboard.write([
+                    new ClipboardItem({ "image/png": pngBlob })
+                  ]);
+                  setCopyState("copied");
+                  setTimeout(() => setCopyState("idle"), 2e3);
                   resolve();
                 } else {
-                  reject(new Error("Failed to convert to PNG"));
+                  reject(new Error("Failed to create PNG blob"));
                 }
-              }, "image/png");
+              } catch (err) {
+                reject(err);
+              }
+            };
+            tempImg.onerror = () => {
+              URL.revokeObjectURL(blobUrl);
+              reject(new Error("Failed to load image"));
             };
-            img.onerror = () => reject(new Error("Failed to load image"));
-            img.src = URL.createObjectURL(blob);
+            tempImg.src = blobUrl;
           });
+          return;
         }
-        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 {
+        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");
@@ -2151,9 +2199,11 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "img",
           {
+            ref: imgRef,
             src,
             alt,
             className: "chatllm-image",
+            crossOrigin: "anonymous",
             style: {
               maxWidth: "100%",
               borderRadius: "8px",
@@ -4521,7 +4571,9 @@ var ChatUI = ({
                   onModelChange: setModel,
                   onSettingsOpen: openSettings,
                   onSidebarToggle: toggleSidebar,
-                  sidebarOpen
+                  sidebarOpen,
+                  showModelSelector,
+                  showSettings
                 }
               ),
               messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(