feedback-vos 1.0.26 → 1.0.28

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { ChatTeardropDots, ArrowLeft, X, Trash, Camera, CircleNotch } from 'phosphor-react';
+import { ChatTeardropDots, ArrowLeft, X, Paperclip, Trash, Camera, CircleNotch } from 'phosphor-react';
 import { Popover } from '@headlessui/react';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import html2canvas from 'html2canvas';
 
@@ -130,8 +130,210 @@ function ScreenshotButton({
     }
   );
 }
+var DEFAULT_MAX_FILE_SIZE = 5 * 1024 * 1024;
+var DEFAULT_MAX_TOTAL_SIZE = 20 * 1024 * 1024;
+function FileUploadButton({
+  files,
+  onFilesChanged,
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  maxTotalSize = DEFAULT_MAX_TOTAL_SIZE,
+  acceptedTypes = "image/*,.pdf,.doc,.docx,.txt",
+  language = "en"
+}) {
+  const fileInputRef = useRef(null);
+  const [error, setError] = useState(null);
+  const translations2 = {
+    en: {
+      upload: "Upload file",
+      remove: "Remove file",
+      fileTooLarge: "File is too large",
+      totalSizeExceeded: "Total file size exceeded",
+      maxFileSize: "Max file size:",
+      maxTotalSize: "Max total size:",
+      files: "files"
+    },
+    nl: {
+      upload: "Bestand uploaden",
+      remove: "Bestand verwijderen",
+      fileTooLarge: "Bestand is te groot",
+      totalSizeExceeded: "Totale bestandsgrootte overschreden",
+      maxFileSize: "Max bestandsgrootte:",
+      maxTotalSize: "Max totale grootte:",
+      files: "bestanden"
+    }
+  };
+  const t = translations2[language];
+  function formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  }
+  function handleFileSelect(e) {
+    setError(null);
+    const selectedFiles = Array.from(e.target.files || []);
+    if (selectedFiles.length === 0) return;
+    const newFiles = [];
+    let totalSize = files.reduce((sum, f) => sum + f.file.size, 0);
+    for (const file of selectedFiles) {
+      if (file.size > maxFileSize) {
+        setError(`${t.fileTooLarge} (${file.name}): ${formatFileSize(file.size)} > ${formatFileSize(maxFileSize)}`);
+        continue;
+      }
+      if (totalSize + file.size > maxTotalSize) {
+        setError(`${t.totalSizeExceeded} (${formatFileSize(maxTotalSize)})`);
+        continue;
+      }
+      let preview;
+      if (file.type.startsWith("image/")) {
+        preview = URL.createObjectURL(file);
+      }
+      newFiles.push({
+        file,
+        preview,
+        id: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+      });
+      totalSize += file.size;
+    }
+    if (newFiles.length > 0) {
+      onFilesChanged([...files, ...newFiles]);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }
+  function handleRemoveFile(id) {
+    const fileToRemove = files.find((f) => f.id === id);
+    if (fileToRemove?.preview) {
+      URL.revokeObjectURL(fileToRemove.preview);
+    }
+    onFilesChanged(files.filter((f) => f.id !== id));
+    setError(null);
+  }
+  useEffect(() => {
+    return () => {
+      files.forEach((file) => {
+        if (file.preview) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+  }, [files]);
+  function handleButtonClick() {
+    fileInputRef.current?.click();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          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: handleButtonClick,
+          title: t.upload,
+          children: /* @__PURE__ */ jsx(Paperclip, { weight: "bold", className: "w-6 h-6" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: acceptedTypes,
+          onChange: handleFileSelect,
+          className: "hidden"
+        }
+      ),
+      files.map((uploadedFile) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-1 bg-zinc-800 rounded-md px-2 py-1 text-xs",
+          children: [
+            uploadedFile.preview ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: uploadedFile.preview,
+                alt: uploadedFile.file.name,
+                className: "w-6 h-6 object-cover rounded"
+              }
+            ) : /* @__PURE__ */ jsx(Paperclip, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("span", { className: "text-zinc-300 max-w-[100px] truncate", title: uploadedFile.file.name, children: uploadedFile.file.name }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleRemoveFile(uploadedFile.id),
+                className: "text-zinc-400 hover:text-zinc-100 transition-colors",
+                title: t.remove,
+                children: /* @__PURE__ */ jsx(X, { weight: "bold", className: "w-4 h-4" })
+              }
+            )
+          ]
+        },
+        uploadedFile.id
+      ))
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-400", children: error }),
+    files.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-400", children: [
+      files.length,
+      " ",
+      t.files,
+      " (",
+      formatFileSize(files.reduce((sum, f) => sum + f.file.size, 0)),
+      " / ",
+      formatFileSize(maxTotalSize),
+      ")"
+    ] })
+  ] });
+}
 
 // src/lib/integrations/github.ts
+async function uploadFileToRepo(token, owner, repo, file, folderPath, defaultBranch) {
+  const base64Content = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.includes(",") ? result.split(",")[1] : result;
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  const timestamp = Date.now();
+  const randomId = Math.random().toString(36).substring(2, 9);
+  const fileExtension = file.name.split(".").pop() || "bin";
+  const filename = `feedback-${timestamp}-${randomId}.${fileExtension}`;
+  const path = `${folderPath}/${filename}`;
+  const uploadUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
+  const response = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: {
+      "Authorization": `Bearer ${token}`,
+      "Accept": "application/vnd.github.v3+json",
+      "Content-Type": "application/json",
+      "User-Agent": "feedback-vos"
+    },
+    body: JSON.stringify({
+      message: `Add feedback file: ${filename}`,
+      content: base64Content,
+      branch: defaultBranch
+    })
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    const errorMessage = errorData.message || "Unknown error";
+    if (response.status === 409) {
+      throw new Error(`File already exists: ${filename}`);
+    } else if (response.status === 403) {
+      throw new Error(`Permission denied for file: ${filename}`);
+    } else if (response.status === 422) {
+      throw new Error(`File too large or invalid: ${filename} - ${errorMessage}`);
+    }
+    throw new Error(`Failed to upload file ${filename} (${response.status}): ${errorMessage}`);
+  }
+  const rawUrl = `https://github.com/${owner}/${repo}/blob/${defaultBranch}/${path}?raw=true`;
+  return rawUrl;
+}
 async function uploadScreenshotToRepo(token, owner, repo, screenshot, screenshotPath) {
   const compressedScreenshot = await compressScreenshot(screenshot, 1920, 0.7);
   const base64Data = compressedScreenshot.split(",")[1];
@@ -306,7 +508,7 @@ async function verifyRepositoryAccess(token, owner, repo) {
 }
 async function sendToGitHub(config, data) {
   const { token, owner, repo, screenshotPath } = config;
-  const { type, comment, screenshot } = data;
+  const { type, comment, screenshot, files } = data;
   if (!token || !owner || !repo) {
     throw new Error("GitHub configuration is incomplete. Please provide token, owner, and repo.");
   }
@@ -329,6 +531,55 @@ Please verify:
 Please enable Issues in repository Settings \u2192 General \u2192 Features \u2192 Issues`
     );
   }
+  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"
+      }
+    }
+  );
+  let defaultBranch = "main";
+  if (repoResponse.ok) {
+    const repoData = await repoResponse.json();
+    defaultBranch = repoData.default_branch || "main";
+  }
+  const folderPath = screenshotPath || ".feedback-vos";
+  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"
+      }
+    });
+    if (folderCheck.status === 404) {
+      const readmeContent = btoa("# Feedback Files\n\nThis folder contains files from user feedback.\n");
+      try {
+        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 files folder",
+            content: readmeContent,
+            branch: defaultBranch
+          })
+        });
+      } catch (folderCreateError) {
+        console.warn("Could not create folder, proceeding with upload:", folderCreateError);
+      }
+    }
+  } catch (folderError) {
+    console.warn("Could not verify/create files folder:", folderError);
+  }
   const title = `[${type}] Feedback`;
   const ABSOLUTE_MAX_LENGTH = 65536;
   const BASE_BODY_LENGTH = 50;
@@ -343,7 +594,7 @@ ${limitedComment}`;
   if (screenshot) {
     try {
       console.log("Uploading screenshot to repository...");
-      console.log("Screenshot path:", screenshotPath || ".feedback-vos");
+      console.log("Screenshot path:", folderPath);
       const screenshotUrl = await uploadScreenshotToRepo(token, owner, repo, screenshot, screenshotPath);
       console.log("Screenshot uploaded successfully, URL:", screenshotUrl);
       body += `
@@ -359,6 +610,44 @@ ${limitedComment}`;
       console.log("Body length after upload failure:", body.length);
     }
   }
+  if (files && files.length > 0) {
+    const uploadedFileUrls = [];
+    const failedFiles = [];
+    for (const uploadedFile of files) {
+      try {
+        console.log(`Uploading file: ${uploadedFile.file.name}`);
+        const fileUrl = await uploadFileToRepo(
+          token,
+          owner,
+          repo,
+          uploadedFile.file,
+          folderPath,
+          defaultBranch
+        );
+        uploadedFileUrls.push(fileUrl);
+        console.log(`File uploaded successfully: ${fileUrl}`);
+      } catch (error) {
+        console.error(`Failed to upload file ${uploadedFile.file.name}:`, error);
+        failedFiles.push(uploadedFile.file.name);
+      }
+    }
+    if (uploadedFileUrls.length > 0) {
+      body += `
+
+**Uploaded Files:**
+`;
+      uploadedFileUrls.forEach((url2, index) => {
+        const fileName = files[index]?.file.name || "Unknown";
+        body += `- [${fileName}](${url2})
+`;
+      });
+    }
+    if (failedFiles.length > 0) {
+      body += `
+
+**Failed to upload:** ${failedFiles.join(", ")}`;
+    }
+  }
   const SAFE_MAX_LENGTH = 65e3;
   console.log(`Issue body length before final check: ${body.length} characters`);
   if (body.length > SAFE_MAX_LENGTH) {
@@ -515,9 +804,19 @@ function FeedbackContentStep({
   const t = getTranslations(language);
   const feedbackTypes = getFeedbackTypes(language);
   const [screenshot, setScreenshot] = useState(null);
+  const [uploadedFiles, setUploadedFiles] = useState([]);
   const feedbackTypeData = feedbackTypes[feedbackType];
   const [comment, setComment] = useState("");
   const [isSendingFeedback, setIsSendingFeedback] = useState(false);
+  useEffect(() => {
+    return () => {
+      uploadedFiles.forEach((file) => {
+        if (file.preview) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+  }, [uploadedFiles]);
   async function handleSubmitFeedback(e) {
     e.preventDefault();
     setIsSendingFeedback(true);
@@ -525,7 +824,8 @@ function FeedbackContentStep({
       const feedbackData = {
         type: feedbackType,
         comment,
-        screenshot
+        screenshot,
+        files: uploadedFiles
       };
       if (integration === "github") {
         await sendToGitHub(githubConfig, feedbackData);
@@ -546,12 +846,12 @@ function FeedbackContentStep({
         "button",
         {
           type: "button",
-          className: "absolute top-5 left-5 text-zinc-400 hover:text-zinc-100",
+          className: "absolute top-5 left-5 text-zinc-400 hover:text-zinc-100 z-10",
           onClick: onFeedbackRestartRequest,
           children: /* @__PURE__ */ jsx(ArrowLeft, { weight: "bold", className: "w-4 h-4" })
         }
       ),
-      /* @__PURE__ */ jsxs("span", { className: "text-xl leading-6 flex items-center gap-2 mt-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xl leading-6 flex items-center gap-2 mt-2 pl-10", children: [
         /* @__PURE__ */ jsx(
           "img",
           {
@@ -573,6 +873,14 @@ function FeedbackContentStep({
           onChange: (e) => setComment(e.target.value)
         }
       ),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        FileUploadButton,
+        {
+          files: uploadedFiles,
+          onFilesChanged: setUploadedFiles,
+          language
+        }
+      ) }),
       /* @__PURE__ */ jsxs("footer", { className: " flex gap-2 mt-2", children: [
         /* @__PURE__ */ jsx(
           ScreenshotButton,