feedback-vos 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -54,7 +54,7 @@ function ScreenshotButton({
       "button",
       {
         type: "button",
-        className: "p-1 w-10 h-10 rounded-md border-transparent flex \r\n                justify-end items-end text-zinc-400 hover:text-zinc-100 transition-colors",
+        className: "p-1 w-10 h-10 rounded-md border-transparent flex \n                justify-end items-end text-zinc-400 hover:text-zinc-100 transition-colors",
         onClick: () => onScreenshotTook(null),
         style: {
           backgroundImage: `url(${screenshot})`,
@@ -69,119 +69,384 @@ function ScreenshotButton({
     "button",
     {
       type: "button",
-      className: "p-2 bg-zinc-800 rounded-md border-transparent hover:bg-zinc-700\r\n         transitions-colors focus:outline-none focus:ring-2\r\n         focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500",
+      className: "p-2 bg-zinc-800 rounded-md border-transparent hover:bg-zinc-700\n         transitions-colors focus:outline-none focus:ring-2\n         focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500",
       onClick: handleTakeScreenshot,
       children: isTakenScreenshot ? /* @__PURE__ */ jsx(Loading, {}) : /* @__PURE__ */ jsx(Camera, { weight: "bold", className: "w-6 h-6" })
     }
   );
 }
 
-// src/lib/integrations/notion.ts
-async function sendToNotion(config, data) {
-  const { apiKey, databaseId } = config;
-  const { type, comment, screenshot } = data;
-  const typeMap = {
-    BUG: "Bug",
-    IDEA: "Idea",
-    OTHER: "Other"
-  };
-  const properties = {
-    Type: {
-      select: {
-        name: typeMap[type]
+// src/lib/integrations/github.ts
+async function uploadScreenshotToRepo(token, owner, repo, screenshot, screenshotPath) {
+  const compressedScreenshot = await compressScreenshot(screenshot, 1920, 0.7);
+  const base64Data = compressedScreenshot.split(",")[1];
+  const binaryData = Uint8Array.from(atob(base64Data), (c) => c.charCodeAt(0));
+  const repoResponse = await fetch(
+    `https://api.github.com/repos/${owner}/${repo}`,
+    {
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Accept": "application/vnd.github.v3+json",
+        "User-Agent": "feedback-vos"
       }
-    },
-    Comment: {
-      rich_text: [
-        {
-          text: {
-            content: comment
-          }
-        }
-      ]
     }
-  };
-  const children = [];
-  if (screenshot) {
-    children.push({
-      object: "block",
-      type: "paragraph",
-      paragraph: {
-        rich_text: [
-          {
-            text: {
-              content: "Screenshot provided (see comment for details)"
-            }
-          }
-        ]
+  );
+  let defaultBranch = "main";
+  if (repoResponse.ok) {
+    const repoData = await repoResponse.json();
+    defaultBranch = repoData.default_branch || "main";
+  }
+  const folderPath = screenshotPath || ".feedback-vos";
+  const timestamp = Date.now();
+  const randomId = Math.random().toString(36).substring(2, 9);
+  const filename = `feedback-${timestamp}-${randomId}.jpg`;
+  const path = `${folderPath}/${filename}`;
+  const base64Content = btoa(String.fromCharCode(...binaryData));
+  const folderCheckUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${folderPath}`;
+  try {
+    const folderCheck = await fetch(folderCheckUrl, {
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Accept": "application/vnd.github.v3+json",
+        "User-Agent": "feedback-vos"
       }
     });
-    properties.Screenshot = {
-      rich_text: [
-        {
-          text: {
-            content: screenshot.substring(0, 2e3)
-            // Truncate if too long
-          }
+    if (folderCheck.status === 404) {
+      const readmeContent = btoa("# Feedback Screenshots\n\nThis folder contains screenshots from user feedback.\n");
+      try {
+        const folderCreateResponse = await fetch(`https://api.github.com/repos/${owner}/${repo}/contents/${folderPath}/README.md`, {
+          method: "PUT",
+          headers: {
+            "Authorization": `Bearer ${token}`,
+            "Accept": "application/vnd.github.v3+json",
+            "Content-Type": "application/json",
+            "User-Agent": "feedback-vos"
+          },
+          body: JSON.stringify({
+            message: "Create feedback screenshots folder",
+            content: readmeContent,
+            branch: defaultBranch
+          })
+        });
+        if (!folderCreateResponse.ok) {
+          const folderError = await folderCreateResponse.json().catch(() => ({}));
+          console.warn("Could not create folder, proceeding with upload anyway:", folderError);
+        } else {
+          console.log(`Folder ${folderPath} created successfully`);
         }
-      ]
-    };
+      } catch (folderCreateError) {
+        console.warn("Could not create folder, proceeding with upload:", folderCreateError);
+      }
+    } else if (folderCheck.status === 200) {
+      const folderData = await folderCheck.json().catch(() => null);
+      if (folderData && !Array.isArray(folderData)) {
+        throw new Error(`Path "${folderPath}" exists as a file, not a folder. Please use a different path or remove the file.`);
+      }
+      console.log(`Folder ${folderPath} already exists`);
+    }
+  } catch (folderError) {
+    if (folderError instanceof Error && folderError.message.includes("exists as a file")) {
+      throw folderError;
+    }
+    console.warn("Could not verify/create screenshots folder:", folderError);
   }
-  const response = await fetch("https://api.notion.com/v1/pages", {
-    method: "POST",
+  const uploadUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
+  const response = await fetch(uploadUrl, {
+    method: "PUT",
     headers: {
-      "Authorization": `Bearer ${apiKey}`,
+      "Authorization": `Bearer ${token}`,
+      "Accept": "application/vnd.github.v3+json",
       "Content-Type": "application/json",
-      "Notion-Version": "2022-06-28"
+      "User-Agent": "feedback-vos"
     },
     body: JSON.stringify({
-      parent: {
-        database_id: databaseId
-      },
-      properties,
-      children
+      message: `Add feedback screenshot: ${filename}`,
+      content: base64Content,
+      branch: defaultBranch
     })
   });
   if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`Notion API error: ${error}`);
+    const errorData = await response.json().catch(() => ({}));
+    const errorMessage = errorData.message || "Unknown error";
+    if (response.status === 409) {
+      throw new Error(`File already exists. This is unexpected - please try again.`);
+    } else if (response.status === 403) {
+      throw new Error(`Permission denied. Make sure your token has write access to the repository.`);
+    } else if (response.status === 422) {
+      throw new Error(`Validation failed: ${errorMessage}. The file might be too large.`);
+    }
+    throw new Error(`Failed to upload screenshot (${response.status}): ${errorMessage}`);
+  }
+  await response.json();
+  const rawUrl = `https://github.com/${owner}/${repo}/blob/${defaultBranch}/${path}?raw=true`;
+  console.log(`Screenshot uploaded successfully to: ${rawUrl}`);
+  return rawUrl;
+}
+function compressScreenshot(dataUrl, maxWidth = 1920, quality = 0.7) {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      reject(new Error("Screenshot compression only works in browser environments"));
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      let width = img.width;
+      let height = img.height;
+      if (width > maxWidth) {
+        height = height * maxWidth / width;
+        width = maxWidth;
+      }
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Could not get canvas context"));
+        return;
+      }
+      ctx.drawImage(img, 0, 0, width, height);
+      const compressedDataUrl = canvas.toDataURL("image/jpeg", quality);
+      resolve(compressedDataUrl);
+    };
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = dataUrl;
+  });
+}
+async function verifyRepositoryAccess(token, owner, repo) {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/${owner}/${repo}`,
+      {
+        headers: {
+          "Authorization": `Bearer ${token}`,
+          "Accept": "application/vnd.github.v3+json",
+          "User-Agent": "feedback-vos"
+        }
+      }
+    );
+    if (response.status === 404) {
+      return { exists: false, hasIssues: false, error: "Repository not found" };
+    }
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      return {
+        exists: false,
+        hasIssues: false,
+        error: errorData.message || `HTTP ${response.status}`
+      };
+    }
+    const repoData = await response.json();
+    return {
+      exists: true,
+      hasIssues: repoData.has_issues !== false
+      // Default is true if not specified
+    };
+  } catch (error) {
+    return {
+      exists: false,
+      hasIssues: false,
+      error: error instanceof Error ? error.message : "Unknown error"
+    };
   }
 }
-
-// src/lib/integrations/github.ts
 async function sendToGitHub(config, data) {
-  const { token, owner, repo } = config;
+  const { token, owner, repo, screenshotPath } = config;
   const { type, comment, screenshot } = data;
+  if (!token || !owner || !repo) {
+    throw new Error("GitHub configuration is incomplete. Please provide token, owner, and repo.");
+  }
+  const verification = await verifyRepositoryAccess(token, owner, repo);
+  if (!verification.exists) {
+    throw new Error(
+      `Repository "${owner}/${repo}" not found or not accessible.
+Error: ${verification.error || "Unknown error"}
+
+Please verify:
+- Repository exists at https://github.com/${owner}/${repo}
+- Your token has access to this repository
+- Token has "repo" scope (for private) or "public_repo" scope (for public)`
+    );
+  }
+  if (!verification.hasIssues) {
+    throw new Error(
+      `Issues are disabled for repository "${owner}/${repo}".
+
+Please enable Issues in repository Settings \u2192 General \u2192 Features \u2192 Issues`
+    );
+  }
   const title = `[${type}] Feedback`;
+  const ABSOLUTE_MAX_LENGTH = 65536;
+  const BASE_BODY_LENGTH = 50;
+  const SCREENSHOT_URL_LENGTH = 150;
+  const SAFETY_MARGIN = 1e3;
+  const MAX_COMMENT_LENGTH = ABSOLUTE_MAX_LENGTH - BASE_BODY_LENGTH - SCREENSHOT_URL_LENGTH - SAFETY_MARGIN;
+  const limitedComment = comment.length > MAX_COMMENT_LENGTH ? comment.substring(0, MAX_COMMENT_LENGTH) + "\n\n... (comment truncated)" : comment;
   let body = `**Type:** ${type}
 
 **Comment:**
-${comment}`;
+${limitedComment}`;
   if (screenshot) {
-    body += `
+    try {
+      console.log("Uploading screenshot to repository...");
+      console.log("Screenshot path:", screenshotPath || ".feedback-vos");
+      const screenshotUrl = await uploadScreenshotToRepo(token, owner, repo, screenshot, screenshotPath);
+      console.log("Screenshot uploaded successfully, URL:", screenshotUrl);
+      body += `
 
 **Screenshot:**
-![Screenshot](${screenshot})`;
+![Screenshot](${screenshotUrl})`;
+      console.log("Body length after adding screenshot URL:", body.length);
+    } catch (error) {
+      console.error("Failed to upload screenshot to repository:", error);
+      body += `
+
+**Screenshot:** Upload failed - screenshot not included.`;
+      console.log("Body length after upload failure:", body.length);
+    }
   }
-  const response = await fetch(
-    `https://api.github.com/repos/${owner}/${repo}/issues`,
-    {
+  const SAFE_MAX_LENGTH = 65e3;
+  console.log(`Issue body length before final check: ${body.length} characters`);
+  if (body.length > SAFE_MAX_LENGTH) {
+    console.warn(`Body is too long (${body.length}), truncating...`);
+    const excess = body.length - SAFE_MAX_LENGTH;
+    const commentStartMarker = "\n\n**Comment:**\n";
+    const commentStart = body.indexOf(commentStartMarker);
+    const screenshotStart = body.indexOf("\n\n**Screenshot:**");
+    if (commentStart > 0) {
+      const commentStartPos = commentStart + commentStartMarker.length;
+      const commentEndPos = screenshotStart > 0 ? screenshotStart : body.length;
+      const currentComment = body.substring(commentStartPos, commentEndPos);
+      const newCommentLength = Math.max(100, currentComment.length - excess - 500);
+      const truncatedComment = currentComment.substring(0, newCommentLength) + "\n\n... (truncated due to size limit)";
+      const beforeComment = body.substring(0, commentStartPos);
+      const afterComment = screenshotStart > 0 ? body.substring(screenshotStart) : "";
+      body = beforeComment + truncatedComment + afterComment;
+    }
+  }
+  if (body.length >= ABSOLUTE_MAX_LENGTH) {
+    console.error(`Body STILL too long after truncation: ${body.length} characters. Force truncating.`);
+    const baseText = `**Type:** ${type}
+
+**Comment:**
+`;
+    const maxCommentLength = ABSOLUTE_MAX_LENGTH - baseText.length - 1e3;
+    const safeComment = comment.substring(0, Math.max(100, maxCommentLength)) + "\n\n... (truncated due to size limit)";
+    body = baseText + safeComment;
+    const screenshotIndex = body.indexOf("\n\n**Screenshot:**");
+    if (screenshotIndex > 0) {
+      body = body.substring(0, screenshotIndex) + "\n\n**Screenshot:** Not included due to size limit.";
+    }
+  }
+  if (body.length >= ABSOLUTE_MAX_LENGTH) {
+    const minimalBase = `**Type:** ${type}
+
+**Comment:**
+`;
+    const maxSafeComment = ABSOLUTE_MAX_LENGTH - minimalBase.length - 100;
+    const minimalComment = comment.substring(0, Math.max(50, maxSafeComment)) + "\n\n... (truncated)";
+    body = minimalBase + minimalComment;
+  }
+  console.log(`Final issue body length: ${body.length} characters (limit: ${ABSOLUTE_MAX_LENGTH})`);
+  if (body.length >= ABSOLUTE_MAX_LENGTH) {
+    throw new Error(`CRITICAL: Cannot create issue - body is ${body.length} characters, exceeds GitHub limit of ${ABSOLUTE_MAX_LENGTH}.`);
+  }
+  const url = `https://api.github.com/repos/${owner}/${repo}/issues`;
+  try {
+    const response = await fetch(url, {
       method: "POST",
       headers: {
-        "Authorization": `token ${token}`,
+        "Authorization": `Bearer ${token}`,
         "Accept": "application/vnd.github.v3+json",
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        "User-Agent": "feedback-vos"
       },
       body: JSON.stringify({
         title,
         body,
+        // Note: Labels must exist in the repository. If they don't exist, GitHub will ignore them.
+        // You can create these labels in your repository settings if needed.
         labels: ["feedback", type.toLowerCase()]
       })
+    });
+    if (!response.ok) {
+      let errorMessage = `GitHub API error (${response.status}): `;
+      try {
+        const errorData = await response.json();
+        errorMessage += errorData.message || JSON.stringify(errorData);
+        if (response.status === 404) {
+          errorMessage += `
+
+Trying to access: ${url}`;
+          errorMessage += `
+
+Possible causes:
+`;
+          errorMessage += `- Repository "${owner}/${repo}" does not exist or is not accessible
+`;
+          errorMessage += `- Token does not have access to this repository
+`;
+          errorMessage += `- Check that owner and repo names are correct (case-sensitive)
+`;
+          errorMessage += `- Verify the repository URL: https://github.com/${owner}/${repo}
+`;
+          errorMessage += `- Make sure Issues are enabled in repository settings
+`;
+          errorMessage += `
+To debug:
+`;
+          errorMessage += `1. Visit https://github.com/${owner}/${repo} to verify it exists
+`;
+          errorMessage += `2. Check repository Settings \u2192 General \u2192 Features \u2192 Issues (must be enabled)
+`;
+          errorMessage += `3. Verify your token has "repo" scope (for private) or "public_repo" scope (for public)
+`;
+          errorMessage += `4. Test token access: curl -H "Authorization: Bearer YOUR_TOKEN" https://api.github.com/repos/${owner}/${repo}`;
+        } else if (response.status === 401) {
+          errorMessage += `
+
+Possible causes:
+`;
+          errorMessage += `- Invalid or expired GitHub token
+`;
+          errorMessage += `- Token does not have the required "repo" or "public_repo" scope
+`;
+          errorMessage += `- Generate a new token at https://github.com/settings/tokens`;
+        } else if (response.status === 422) {
+          errorMessage += `
+
+Possible causes:
+`;
+          errorMessage += `- Issue body is too long (maximum is 65536 characters)
+`;
+          errorMessage += `- Screenshot is too large - it will be automatically compressed
+`;
+          errorMessage += `- Try reducing the comment length or removing the screenshot
+`;
+          errorMessage += `- Invalid label names (labels must exist in the repository)`;
+        } else if (response.status === 403) {
+          errorMessage += `
+
+Possible causes:
+`;
+          errorMessage += `- Token does not have permission to create issues
+`;
+          errorMessage += `- Repository has issues disabled
+`;
+          errorMessage += `- Rate limit exceeded (check GitHub API rate limits)
+`;
+          errorMessage += `- Check repository Settings \u2192 General \u2192 Features \u2192 Issues`;
+        }
+      } catch (parseError) {
+        const errorText = await response.text();
+        errorMessage += errorText || "Unknown error";
+      }
+      throw new Error(errorMessage);
     }
-  );
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`GitHub API error: ${error}`);
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error(`Failed to create GitHub issue: ${String(error)}`);
   }
 }
 function FeedbackContentStep({
@@ -189,7 +454,6 @@ function FeedbackContentStep({
   onFeedbackRestartRequest,
   onFeedbackSent,
   integration,
-  notionConfig,
   githubConfig
 }) {
   const [screenshot, setScreenshot] = useState(null);
@@ -205,9 +469,7 @@ function FeedbackContentStep({
         comment,
         screenshot
       };
-      if (integration === "notion" && notionConfig) {
-        await sendToNotion(notionConfig, feedbackData);
-      } else if (integration === "github" && githubConfig) {
+      if (integration === "github") {
         await sendToGitHub(githubConfig, feedbackData);
       } else {
         throw new Error("Invalid integration configuration");
@@ -248,7 +510,7 @@ function FeedbackContentStep({
       /* @__PURE__ */ jsx(
         "textarea",
         {
-          className: "min-w-[384px] w-full min-h-[112px] text-sm \r\n        placeholder-zinc-400 text-zinc-100 border-zinc-600 bg-transparent rounded-md \r\n        focus:border-brand-500 focus:ring-brand-500 focus:ring-1  resize-none focus:outline-none\r\n          scrollbar-thumb-zinc-700 scrollbar-track-transparent scrollbar-thin",
+          className: "min-w-[384px] w-full min-h-[112px] text-sm \n        placeholder-zinc-400 text-zinc-100 border-zinc-600 bg-transparent rounded-md \n        focus:border-brand-500 focus:ring-brand-500 focus:ring-1  resize-none focus:outline-none\n          scrollbar-thumb-zinc-700 scrollbar-track-transparent scrollbar-thin",
           placeholder: "Tell in detail what is happening",
           onChange: (e) => setComment(e.target.value)
         }
@@ -266,7 +528,7 @@ function FeedbackContentStep({
           {
             type: "submit",
             disabled: comment.length === 0 || isSendingFeedback,
-            className: "p-2 bg-brand-500 rounded-md border-transparent flex-1 justify-center\r\n          items-center text-sm hover:bg-brand-300 focus:outline-none focus:ring-2\r\n           focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500\r\n           transition-colors disabled:opacity-50 disabled:cursor-not-allowed\r\n           disabled:hover:bg-brand-500",
+            className: "p-2 bg-brand-500 rounded-md border-transparent flex-1 justify-center\n          items-center text-sm hover:bg-brand-300 focus:outline-none focus:ring-2\n           focus:ring-offset-2 focus:ring-offset-zinc-900 focus:ring-brand-500\n           transition-colors disabled:opacity-50 disabled:cursor-not-allowed\n           disabled:hover:bg-brand-500",
             children: isSendingFeedback ? /* @__PURE__ */ jsx(Loading, {}) : "Send feedback"
           }
         )
@@ -318,7 +580,7 @@ var feedbackTypes = {
     }
   }
 };
-function WidgetForm({ integration, notionConfig, githubConfig }) {
+function WidgetForm({ integration, githubConfig }) {
   const [feedbackType, setFeedbackType] = useState(null);
   const [feedbackSent, setFeedbackSent] = useState(false);
   function handleRestartFeedback() {
@@ -333,7 +595,6 @@ function WidgetForm({ integration, notionConfig, githubConfig }) {
         onFeedbackRestartRequest: handleRestartFeedback,
         onFeedbackSent: () => setFeedbackSent(true),
         integration,
-        notionConfig,
         githubConfig
       }
     ) }),
@@ -353,7 +614,6 @@ function WidgetForm({ integration, notionConfig, githubConfig }) {
 }
 function Widget({
   integration,
-  notionConfig,
   githubConfig,
   position = "bottom-right"
 }) {
@@ -368,7 +628,6 @@ function Widget({
       WidgetForm,
       {
         integration,
-        notionConfig,
         githubConfig
       }
     ) }),