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

package/dist/index.d.mts

@@ -67,7 +67,9 @@ interface FeedbackWidgetProps {
     buttonColor?: string;
     /** Keyboard shortcut to toggle the panel, e.g. 'Alt+F'. No default (opt-in only). */
     hotkey?: string;
+    /** URL of the feedback viewer app. Shown as a link in the side panel. */
+    viewerUrl?: string;
 }
-declare function FeedbackWidget({ clientId, apiUrl, position, buttonColor, hotkey, }: FeedbackWidgetProps): React.ReactPortal | null;
+declare function FeedbackWidget({ clientId, apiUrl, position, buttonColor, hotkey, viewerUrl, }: FeedbackWidgetProps): React.ReactPortal | null;
 
 export { type CapturedContext, type ComponentInfo, type Draft, type FeedbackEntry, type FeedbackGroup, FeedbackWidget, type FeedbackWidgetProps, type WidgetPosition };

package/dist/index.d.ts

@@ -67,7 +67,9 @@ interface FeedbackWidgetProps {
     buttonColor?: string;
     /** Keyboard shortcut to toggle the panel, e.g. 'Alt+F'. No default (opt-in only). */
     hotkey?: string;
+    /** URL of the feedback viewer app. Shown as a link in the side panel. */
+    viewerUrl?: string;
 }
-declare function FeedbackWidget({ clientId, apiUrl, position, buttonColor, hotkey, }: FeedbackWidgetProps): React.ReactPortal | null;
+declare function FeedbackWidget({ clientId, apiUrl, position, buttonColor, hotkey, viewerUrl, }: FeedbackWidgetProps): React.ReactPortal | null;
 
 export { type CapturedContext, type ComponentInfo, type Draft, type FeedbackEntry, type FeedbackGroup, FeedbackWidget, type FeedbackWidgetProps, type WidgetPosition };

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)(
@@ -470,7 +498,8 @@ function SidePanel({
   onSubmit,
   onClose,
   api,
-  user
+  user,
+  viewerUrl
 }) {
   const isRight = position.includes("right");
   const allSelected = drafts.length > 0 && selectedDraftIds.size === drafts.length;
@@ -536,7 +565,25 @@ function SidePanel({
               user && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: 6, fontSize: 12, color: "#6b7280", lineHeight: 1.4 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 500, color: "#374151" }, children: user.name }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: user.email })
-              ] })
+              ] }),
+              viewerUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "a",
+                {
+                  href: viewerUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 4,
+                    marginTop: 8,
+                    fontSize: 12,
+                    color: "#3b82f6",
+                    textDecoration: "none"
+                  },
+                  children: "Open Feedback Viewer \u2197"
+                }
+              )
             ]
           }
         ),
@@ -668,6 +715,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 +755,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 +859,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 +1232,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";
@@ -1390,7 +1517,8 @@ function FeedbackWidget({
   apiUrl,
   position = "bottom-right",
   buttonColor = "#3b82f6",
-  hotkey
+  hotkey,
+  viewerUrl
 }) {
   const session = useSession(apiUrl, clientId);
   const [state, dispatch] = (0, import_react7.useReducer)(widgetReducer, initialState);
@@ -1402,7 +1530,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)(() => {
@@ -1582,7 +1709,8 @@ function FeedbackWidget({
           onSubmit: () => dispatch({ type: "OPEN_SUBMIT_MODAL" }),
           onClose: () => dispatch({ type: "CLOSE_PANEL" }),
           api,
-          user: session.user
+          user: session.user,
+          viewerUrl
         }
       ),
       state.pendingContext && !state.picking && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(