@david-xpn/llm-ui-feedback 0.1.7 → 0.1.8

package/dist/index.js

@@ -66,31 +66,59 @@ function FloatingButton({ onPickClick, onPanelToggle, draftCount, panelOpen, pos
     gap: 8
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: anchor, children: [
-    draftCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    draftCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
         onClick: onPanelToggle,
         "aria-label": panelOpen ? "Close drafts panel" : `Open drafts panel (${draftCount})`,
         style: {
-          width: 32,
-          height: 32,
+          width: 36,
+          height: 36,
           borderRadius: "50%",
           border: "none",
           background: panelOpen ? "#ef4444" : buttonColor,
           color: panelOpen ? "#fff" : getContrastColor(buttonColor),
-          fontFamily: "system-ui, -apple-system, sans-serif",
-          fontSize: 13,
-          fontWeight: 700,
-          lineHeight: 1,
           cursor: "pointer",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
           transition: "background 0.15s",
-          padding: 0
+          padding: 0,
+          position: "relative"
         },
-        children: draftCount
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "3", width: "2", height: "2", rx: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "3", width: "10", height: "2", rx: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "8", width: "2", height: "2", rx: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "8", width: "10", height: "2", rx: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "13", width: "2", height: "2", rx: "0.5", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "13", width: "10", height: "2", rx: "0.5", fill: "currentColor" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: -4,
+                right: -4,
+                minWidth: 16,
+                height: 16,
+                borderRadius: 8,
+                background: "#ef4444",
+                color: "#fff",
+                fontSize: 10,
+                fontWeight: 700,
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                lineHeight: "16px",
+                textAlign: "center",
+                padding: "0 3px"
+              },
+              children: draftCount
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -668,6 +696,20 @@ function SidePanel({
 
 // src/components/DraftModal.tsx
 var import_react4 = require("react");
+
+// src/utils/blob.ts
+function dataUrlToBlob(dataUrl) {
+  const [header, base64] = dataUrl.split(",");
+  const mime = header.match(/:(.*?);/)?.[1] || "image/png";
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+}
+
+// src/components/DraftModal.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var WIDGET_CONTAINER_ID2 = "llm-ui-feedback-root";
 function DraftModal({ pendingContext, addingDraft, onAdd, onCancel }) {
@@ -694,6 +736,46 @@ function DraftModal({ pendingContext, addingDraft, onAdd, onCancel }) {
     }
   };
   const { context, screenshot } = pendingContext;
+  const [copiedText, setCopiedText] = (0, import_react4.useState)(false);
+  const [copiedImage, setCopiedImage] = (0, import_react4.useState)(false);
+  const handleCopyText = (0, import_react4.useCallback)(async () => {
+    const lines = [
+      `Component: ${context.componentPath}`,
+      `Path: ${context.urlPath}`,
+      ...context.elementText ? [`Element: "${context.elementText}"`] : [],
+      ...comment.trim() ? [`
+Comment: ${comment.trim()}`] : []
+    ];
+    try {
+      await navigator.clipboard.writeText(lines.join("\n"));
+      setCopiedText(true);
+      setTimeout(() => setCopiedText(false), 2e3);
+    } catch {
+    }
+  }, [context, comment]);
+  const handleCopyImage = (0, import_react4.useCallback)(async () => {
+    if (!screenshot) return;
+    try {
+      const blob = dataUrlToBlob(screenshot);
+      const pngBlob = blob.type === "image/png" ? blob : await new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = img.naturalWidth;
+          canvas.height = img.naturalHeight;
+          canvas.getContext("2d").drawImage(img, 0, 0);
+          canvas.toBlob((b) => resolve(b), "image/png");
+        };
+        img.src = screenshot;
+      });
+      await navigator.clipboard.write([
+        new ClipboardItem({ "image/png": pngBlob })
+      ]);
+      setCopiedImage(true);
+      setTimeout(() => setCopiedImage(false), 2e3);
+    } catch {
+    }
+  }, [screenshot]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
@@ -758,6 +840,44 @@ function DraftModal({ pendingContext, addingDraft, onAdd, onCancel }) {
                 }
               }
             ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleCopyText,
+                  style: {
+                    padding: "5px 12px",
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db",
+                    background: copiedText ? "#22c55e" : "#f3f4f6",
+                    color: copiedText ? "#fff" : "#374151",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    transition: "background 0.15s, color 0.15s"
+                  },
+                  children: copiedText ? "Copied!" : "Copy Text"
+                }
+              ),
+              screenshot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: handleCopyImage,
+                  style: {
+                    padding: "5px 12px",
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db",
+                    background: copiedImage ? "#22c55e" : "#f3f4f6",
+                    color: copiedImage ? "#fff" : "#374151",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    transition: "background 0.15s, color 0.15s"
+                  },
+                  children: copiedImage ? "Copied!" : "Copy Image"
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "textarea",
               {
@@ -1093,18 +1213,6 @@ ${propsStr}`);
   return lines.join("\n");
 }
 
-// src/utils/blob.ts
-function dataUrlToBlob(dataUrl) {
-  const [header, base64] = dataUrl.split(",");
-  const mime = header.match(/:(.*?);/)?.[1] || "image/png";
-  const binary = atob(base64);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return new Blob([bytes], { type: mime });
-}
-
 // src/hooks/useSession.ts
 var import_react6 = require("react");
 var SESSION_TOKEN_KEY = "llm_feedback_session_token";
@@ -1402,7 +1510,6 @@ function FeedbackWidget({
   (0, import_react7.useEffect)(() => {
     if (session.status === "authenticated" && pendingOpenRef.current) {
       pendingOpenRef.current = false;
-      dispatch({ type: "OPEN_PANEL" });
     }
   }, [session.status]);
   (0, import_react7.useEffect)(() => {