feedbackkit-web 1.0.42 → 1.0.45

package/dist/feedbackkit.js

@@ -440,7 +440,8 @@ async function encodePayload(report, projectKey, identity = {}) {
     created_at: report.createdAt.toISOString(),
     text: report.text,
     annotations: report.annotations,
-    environment: report.environment
+    environment: report.environment,
+    notify_reporter: report.notifyReporter ?? false
   };
   if (report.screenshotRaw && report.screenshotAnnotated) {
     const [raw, annotated] = await Promise.all([
@@ -495,7 +496,7 @@ async function submitReport(report, configuration2, identity = {}) {
     } catch {
     }
     const detail = code ? ` (${code})` : "";
-    const message = code === "origin_not_allowed" ? `This site (${location.origin}) isn't in the project's allowed origins.` : response.status === 401 || response.status === 403 ? `Server rejected the project key or origin (HTTP ${response.status})${detail}.` : response.status === 429 ? "Too many reports right now — please try again in a minute." : `Server returned HTTP ${response.status}${detail}.`;
+    const message = code === "origin_not_allowed" ? `This site (${location.origin}) isn't in the project's allowed origins.` : response.status === 401 || response.status === 403 ? `Server rejected the project key or origin (HTTP ${response.status})${detail}.` : response.status === 429 ? "Too many reports right now — please try again in a minute." : response.status === 402 ? "Feedback for this site is paused this month. Please try again later." : `Server returned HTTP ${response.status}${detail}.`;
     throw new FeedbackSubmissionError(message, "server", response.status);
   }
 }
@@ -641,9 +642,7 @@ const icons = {
   undo: svg('<path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>'),
   trash: svg('<path d="M4 7h16"/><path d="M10 11v6M14 11v6"/><path d="M6 7l1 13h10l1-13"/><path d="M9 7V4h6v3"/>'),
   close: svg('<path d="M6 6l12 12M18 6L6 18"/>'),
-  paperclip: svg(
-    '<path d="M21 11.5l-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6l7.9-7.9"/>'
-  ),
+  plus: svg('<path d="M12 5v14M5 12h14"/>'),
   send: svg('<path d="M4 12l16-8-6 16-3-7-7-1Z"/>'),
   check: svg('<path d="M5 12.5l4.5 4.5L19 7.5"/>')
 };
@@ -1527,6 +1526,16 @@ button:disabled { cursor: not-allowed; opacity: 0.45; }
   color: var(--fk-secondary);
   font-size: 13px;
 }
+.fk-options-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fk-menu-anchor { position: relative; display: inline-flex; }
+.fk-plus { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px dashed var(--fk-secondary); border-radius: 8px; background: transparent; color: var(--fk-secondary); cursor: pointer; }
+.fk-options-summary { font-size: 12px; color: var(--fk-muted); white-space: nowrap; }
+.fk-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; min-width: 230px; padding: 4px; border: 1px solid var(--fk-border); border-radius: 10px; background: var(--fk-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
+.fk-menu-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px 7px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--fk-text); font-size: 13px; text-align: left; cursor: pointer; }
+.fk-menu-item:hover, .fk-menu-item:focus-visible { background: var(--fk-surface); outline: none; }
+.fk-menu-check { display: inline-flex; width: 16px; height: 16px; color: var(--fk-primary); }
+.fk-menu-check svg { width: 16px; height: 16px; }
+.fk-menu-sep { margin: 4px 0; border: 0; border-top: 1px solid var(--fk-border); }
 .fk-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 8px; background: var(--fk-surface); font-size: 12px; }
 .fk-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fk-file button { display: inline-flex; border: 0; background: transparent; color: var(--fk-muted); padding: 2px; }
@@ -1753,6 +1762,12 @@ class Dialog {
     this.done = done;
     this.editor = null;
     this.includeLogs = true;
+    this.notifyReporter = false;
+    this.optionsMenu = null;
+    this.onPointerDownOutsideMenu = (e) => {
+      const anchor = this.optionsMenu?.parentElement;
+      if (anchor && !e.composedPath().includes(anchor)) this.closeOptionsMenu();
+    };
     this.attachment = null;
     this.selectedProducts = /* @__PURE__ */ new Set();
     this.products = [];
@@ -1882,24 +1897,17 @@ class Dialog {
     productsGroup.dataset.role = "products";
     productsGroup.hidden = true;
     const optionsRow = el("div", "fk-row");
-    const toggle = switchControl("Screenshot", this.includeScreenshot, (on) => {
-      this.includeScreenshot = on;
-      this.stage.dataset.screenshot = on ? "on" : "off";
-      this.refreshState();
-    });
-    if (!this.shot) toggle.querySelector("input").disabled = true;
-    const attachGroup = el("div");
     const fileInput = document.createElement("input");
     fileInput.type = "file";
     fileInput.hidden = true;
-    const attachButton = document.createElement("button");
-    attachButton.type = "button";
-    attachButton.className = "fk-attach";
-    attachButton.innerHTML = `${icons.paperclip}<span>Attach file</span>`;
-    attachButton.addEventListener("click", () => fileInput.click());
-    fileInput.addEventListener("change", () => {
-      const file = fileInput.files?.[0];
-      fileInput.value = "";
+    const cameraInput = document.createElement("input");
+    cameraInput.type = "file";
+    cameraInput.accept = "image/*";
+    cameraInput.setAttribute("capture", "environment");
+    cameraInput.hidden = true;
+    const onFile = (input) => {
+      const file = input.files?.[0];
+      input.value = "";
       if (!file) return;
       if (file.size > MAX_ATTACHMENT_BYTES) {
         this.showError(`"${file.name}" is larger than 10 MB.`);
@@ -1907,26 +1915,84 @@ class Dialog {
       }
       this.attachment = { filename: file.name, mimeType: file.type || "application/octet-stream", data: file };
       renderAttachment();
-    });
-    const renderAttachment = () => {
-      attachGroup.replaceChildren(fileInput);
-      if (this.attachment) {
-        const chip = el("span", "fk-file");
-        const name = el("span");
-        name.textContent = this.attachment.filename;
-        const remove = iconButton("", icons.close, `Remove ${this.attachment.filename}`);
-        remove.addEventListener("click", () => {
-          this.attachment = null;
-          renderAttachment();
+    };
+    fileInput.addEventListener("change", () => onFile(fileInput));
+    cameraInput.addEventListener("change", () => onFile(cameraInput));
+    const menuAnchor = el("div", "fk-menu-anchor");
+    const menuButton = iconButton("fk-plus", icons.plus, "Options and attachments");
+    menuButton.setAttribute("aria-haspopup", "menu");
+    menuButton.setAttribute("aria-expanded", "false");
+    menuButton.addEventListener("click", () => this.optionsMenu ? this.closeOptionsMenu() : openMenu());
+    const summary = el("span", "fk-options-summary");
+    const renderSummary = () => {
+      const parts = [];
+      if (this.shot && !this.includeScreenshot) parts.push("No screenshot");
+      if (this.notifyReporter) parts.push("Notify me");
+      summary.textContent = parts.join(" · ");
+    };
+    const openMenu = () => {
+      const menu = el("div", "fk-menu");
+      menu.setAttribute("role", "menu");
+      const item = (label, onSelect, checked) => {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "fk-menu-item";
+        b.setAttribute("role", checked === void 0 ? "menuitem" : "menuitemcheckbox");
+        if (checked !== void 0) b.setAttribute("aria-checked", String(checked));
+        b.innerHTML = `<span class="fk-menu-check">${checked ? icons.check : ""}</span><span></span>`;
+        b.lastElementChild.textContent = label;
+        b.addEventListener("click", () => {
+          this.closeOptionsMenu();
+          onSelect();
         });
-        chip.append(name, remove);
-        attachGroup.append(chip);
-      } else {
-        attachGroup.append(attachButton);
+        return b;
+      };
+      menu.append(item("Attach file…", () => fileInput.click()));
+      if (window.matchMedia?.("(pointer: coarse)").matches) menu.append(item("Take photo", () => cameraInput.click()));
+      menu.append(el("hr", "fk-menu-sep"));
+      if (this.shot) {
+        menu.append(
+          item("Include screenshot", () => {
+            this.includeScreenshot = !this.includeScreenshot;
+            this.stage.dataset.screenshot = this.includeScreenshot ? "on" : "off";
+            renderSummary();
+            this.refreshState();
+          }, this.includeScreenshot)
+        );
       }
+      menu.append(
+        item("Notify me when it's fixed", () => {
+          this.notifyReporter = !this.notifyReporter;
+          renderSummary();
+        }, this.notifyReporter)
+      );
+      menuAnchor.append(menu);
+      menuButton.setAttribute("aria-expanded", "true");
+      this.optionsMenu = menu;
+      this.overlay.addEventListener("pointerdown", this.onPointerDownOutsideMenu, true);
+      menu.querySelector(".fk-menu-item")?.focus();
+    };
+    const attachGroup = el("div", "fk-attach-group");
+    const renderAttachment = () => {
+      attachGroup.replaceChildren();
+      if (!this.attachment) return;
+      const chip = el("span", "fk-file");
+      const name = el("span");
+      name.textContent = this.attachment.filename;
+      const remove = iconButton("", icons.close, `Remove ${this.attachment.filename}`);
+      remove.addEventListener("click", () => {
+        this.attachment = null;
+        renderAttachment();
+      });
+      chip.append(name, remove);
+      attachGroup.append(chip);
     };
     renderAttachment();
-    optionsRow.append(attachGroup, toggle);
+    renderSummary();
+    menuAnchor.append(menuButton, fileInput, cameraInput);
+    const left = el("div", "fk-options-left");
+    left.append(menuAnchor, attachGroup);
+    optionsRow.append(left, summary);
     const meta = this.buildDiagnostics();
     this.errorBox = el("p", "fk-error");
     this.errorBox.setAttribute("role", "alert");
@@ -2018,6 +2084,12 @@ class Dialog {
     if (this.undoButton) this.undoButton.disabled = !this.editor?.canUndo;
     if (this.clearButton) this.clearButton.disabled = !(this.editor && this.editor.annotations.length > 0);
   }
+  closeOptionsMenu() {
+    this.optionsMenu?.remove();
+    this.optionsMenu = null;
+    this.overlay?.removeEventListener("pointerdown", this.onPointerDownOutsideMenu, true);
+    this.overlay?.querySelector(".fk-plus")?.setAttribute("aria-expanded", "false");
+  }
   // ---------------------------------------------------------------- keyboard
   handleKey(e) {
     if (this.finished) return;
@@ -2025,7 +2097,11 @@ class Dialog {
     const active = this.shadow.activeElement;
     const typing = active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement;
     if (active instanceof HTMLInputElement && active.classList.contains("fk-text-input")) return;
-    if (e.key === "Escape") {
+    if (e.key === "Escape" && this.optionsMenu) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.closeOptionsMenu();
+    } else if (e.key === "Escape") {
       e.preventDefault();
       e.stopPropagation();
       this.cancel();
@@ -2089,7 +2165,8 @@ class Dialog {
       environment: this.environment,
       attachment: this.attachment,
       products: this.products.filter((p) => this.selectedProducts.has(p.key)),
-      logs: this.includeLogs ? this.logs : []
+      logs: this.includeLogs ? this.logs : [],
+      notifyReporter: this.notifyReporter
     };
   }
   async send() {