@triagly/sdk 0.1.1-beta.4 → 0.1.1-beta.5

package/dist/index.js

@@ -51,26 +51,23 @@
             // Button orientation
             const orientation = this.config.orientation || 'horizontal';
             button.classList.add(`triagly-orientation-${orientation}`);
+            // Speech bubble SVG icon
+            const speechBubbleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="triagly-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>`;
+            const largeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" class="triagly-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>`;
             // Handle button text based on shape
-            const fullText = this.config.buttonText || '🐛 Feedback';
+            const fullText = this.config.buttonText || 'Feedback';
             if (shape === 'circular') {
-                button.innerHTML = '🐛';
+                button.innerHTML = largeIcon;
                 button.setAttribute('aria-label', fullText);
             }
             else if (shape === 'expandable') {
-                // Expandable starts with emoji, expands to full text on hover
-                button.innerHTML = '<span class="triagly-btn-icon">🐛</span><span class="triagly-btn-text"> Feedback</span>';
+                // Expandable starts with icon, expands to full text on hover
+                button.innerHTML = `<span class="triagly-btn-icon">${largeIcon}</span><span class="triagly-btn-text"> ${this.config.buttonText || 'Feedback'}</span>`;
                 button.setAttribute('aria-label', fullText);
-                // Store custom text if provided
-                if (this.config.buttonText) {
-                    const textSpan = button.querySelector('.triagly-btn-text');
-                    if (textSpan) {
-                        textSpan.textContent = ' ' + this.config.buttonText.replace('🐛', '').trim();
-                    }
-                }
             }
             else {
-                button.innerHTML = fullText;
+                // Default: icon + text
+                button.innerHTML = `${speechBubbleIcon}<span class="triagly-btn-label">${fullText}</span>`;
             }
             button.onclick = () => this.toggle();
             // Position button
@@ -136,9 +133,9 @@
                 this.setupKeyboardEvents();
                 // Set up focus trap
                 this.setupFocusTrap();
-                // Focus on title field
-                const titleInput = this.container?.querySelector('input[type="text"]');
-                titleInput?.focus();
+                // Focus on description field
+                const descInput = this.container?.querySelector('#triagly-description');
+                descInput?.focus();
             }, 0);
         }
         /**
@@ -183,7 +180,7 @@
             overlay.className = 'triagly-overlay';
             overlay.setAttribute('role', 'dialog');
             overlay.setAttribute('aria-modal', 'true');
-            overlay.setAttribute('aria-labelledby', 'triagly-modal-title');
+            overlay.setAttribute('aria-label', 'Send feedback');
             overlay.onclick = (e) => {
                 if (e.target === overlay)
                     this.close('overlay');
@@ -194,7 +191,6 @@
             const header = document.createElement('div');
             header.className = 'triagly-header';
             header.innerHTML = `
-      <h3 id="triagly-modal-title">Send Feedback</h3>
       <button type="button" class="triagly-close" aria-label="Close feedback form">×</button>
     `;
             const closeBtn = header.querySelector('.triagly-close');
@@ -203,16 +199,7 @@
             form.className = 'triagly-form';
             form.innerHTML = `
       <div class="triagly-field">
-        <label for="triagly-title">Title (optional)</label>
-        <input
-          type="text"
-          id="triagly-title"
-          placeholder="Brief summary of your feedback"
-        />
-      </div>
-
-      <div class="triagly-field">
-        <label for="triagly-description">Description *</label>
+        <label for="triagly-description">What's on your mind?</label>
         <textarea
           id="triagly-description"
           required
@@ -221,6 +208,15 @@
         ></textarea>
       </div>
 
+      <div class="triagly-field">
+        <label for="triagly-name">Name (optional)</label>
+        <input
+          type="text"
+          id="triagly-name"
+          placeholder="Your name"
+        />
+      </div>
+
       <div class="triagly-field">
         <label for="triagly-email">Email (optional)</label>
         <input
@@ -230,13 +226,6 @@
         />
       </div>
 
-      <div class="triagly-field triagly-checkbox">
-        <label>
-          <input type="checkbox" id="triagly-screenshot" checked />
-          <span>Include screenshot</span>
-        </label>
-      </div>
-
       ${this.config.turnstileSiteKey ? `
       <div class="triagly-field triagly-turnstile">
         <div class="cf-turnstile" data-sitekey="${this.config.turnstileSiteKey}" data-theme="light"></div>
@@ -260,8 +249,16 @@
                 e.preventDefault();
                 this.handleSubmit(form);
             };
+            const footer = document.createElement('div');
+            footer.className = 'triagly-footer';
+            footer.innerHTML = `
+      <a href="https://triagly.com" target="_blank" rel="noopener noreferrer" class="triagly-branding">
+        Powered by <strong>Triagly</strong>
+      </a>
+    `;
             modal.appendChild(header);
             modal.appendChild(form);
+            modal.appendChild(footer);
             overlay.appendChild(modal);
             // Render Turnstile widget if available
             if (this.config.turnstileSiteKey) {
@@ -310,10 +307,9 @@
          * Handle form submission
          */
         async handleSubmit(form) {
-            const titleInput = form.querySelector('#triagly-title');
             const descInput = form.querySelector('#triagly-description');
+            const nameInput = form.querySelector('#triagly-name');
             const emailInput = form.querySelector('#triagly-email');
-            const screenshotCheckbox = form.querySelector('#triagly-screenshot');
             const statusDiv = form.querySelector('#triagly-status');
             const submitBtn = form.querySelector('button[type="submit"]');
             const turnstileContainer = form.querySelector('.cf-turnstile');
@@ -327,10 +323,9 @@
                     turnstileToken = turnstileContainer.getAttribute('data-turnstile-response') || undefined;
                 }
                 const data = {
-                    title: titleInput.value.trim() || undefined,
                     description: descInput.value.trim(),
+                    reporterName: nameInput.value.trim() || undefined,
                     reporterEmail: emailInput.value.trim() || undefined,
-                    includeScreenshot: screenshotCheckbox.checked,
                     turnstileToken,
                 };
                 // Create a promise that waits for actual submission result
@@ -394,21 +389,32 @@
         position: fixed;
         z-index: 999999;
         padding: 12px 20px;
-        background: var(--triagly-button-bg, #6366f1);
+        background: var(--triagly-button-bg, #18181b);
         color: var(--triagly-button-text, #ffffff);
         border: none;
         border-radius: var(--triagly-button-radius, 8px);
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
-        box-shadow: var(--triagly-button-shadow, 0 4px 12px rgba(99, 102, 241, 0.3));
+        box-shadow: var(--triagly-button-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
         transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
       }
 
       .triagly-button:hover {
-        background: var(--triagly-button-bg-hover, #4f46e5);
+        background: var(--triagly-button-bg-hover, #27272a);
         transform: translateY(-2px);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(99, 102, 241, 0.4));
+        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
+      }
+
+      .triagly-button .triagly-icon {
+        flex-shrink: 0;
+      }
+
+      .triagly-button .triagly-btn-label {
+        line-height: 1;
       }
 
       /* Prevent expandable buttons from shifting on hover */
@@ -502,8 +508,8 @@
         min-width: auto;
         padding: 12px 20px;
         border-radius: 30px;
-        background: var(--triagly-button-bg-hover, #4f46e5);
-        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(99, 102, 241, 0.4));
+        background: var(--triagly-button-bg-hover, #27272a);
+        box-shadow: var(--triagly-button-shadow-hover, 0 6px 16px rgba(0, 0, 0, 0.2));
       }
       .triagly-shape-expandable:hover .triagly-btn-text {
         width: auto;
@@ -562,18 +568,10 @@
 
       .triagly-header {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        padding: 20px 24px;
+        padding: 8px 12px 0;
         background: var(--triagly-header-bg, #ffffff);
-        border-bottom: 1px solid var(--triagly-header-border, #e5e7eb);
-      }
-
-      .triagly-header h3 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--triagly-header-text, #111827);
       }
 
       .triagly-close {
@@ -631,46 +629,21 @@
       .triagly-field input:focus,
       .triagly-field textarea:focus {
         outline: none;
-        border-color: var(--triagly-input-border-focus, #6366f1);
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-      }
-
-      .triagly-checkbox label {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-        font-weight: 400;
-      }
-
-      .triagly-checkbox label span {
-        user-select: none;
-      }
-
-      .triagly-checkbox input {
-        width: 16px;
-        height: 16px;
-        margin: 0;
-        cursor: pointer;
+        border-color: var(--triagly-input-border-focus, #a1a1aa);
+        box-shadow: 0 0 0 2px rgba(161, 161, 170, 0.15);
       }
 
       /* Focus visible styles for accessibility */
       .triagly-button:focus-visible,
       .triagly-field input:focus-visible,
       .triagly-field textarea:focus-visible,
-      .triagly-checkbox input:focus-visible,
       .triagly-btn-primary:focus-visible,
       .triagly-btn-secondary:focus-visible,
       .triagly-close:focus-visible {
-        outline: 2px solid #6366f1;
+        outline: 2px solid #a1a1aa;
         outline-offset: 2px;
       }
 
-      /* Checkbox label gets visual indicator when checkbox is focused */
-      .triagly-checkbox input:focus-visible + span {
-        text-decoration: underline;
-      }
-
       .triagly-turnstile {
         display: flex;
         justify-content: center;
@@ -696,12 +669,12 @@
       }
 
       .triagly-btn-primary {
-        background: var(--triagly-btn-primary-bg, #6366f1);
+        background: var(--triagly-btn-primary-bg, #18181b);
         color: var(--triagly-btn-primary-text, #ffffff);
       }
 
       .triagly-btn-primary:hover:not(:disabled) {
-        background: var(--triagly-btn-primary-bg-hover, #4f46e5);
+        background: var(--triagly-btn-primary-bg-hover, #27272a);
       }
 
       .triagly-btn-primary:disabled {
@@ -737,6 +710,29 @@
         background: var(--triagly-error-bg, #fee2e2);
         color: var(--triagly-error-text, #991b1b);
       }
+
+      .triagly-footer {
+        padding: 12px 24px 16px;
+        text-align: right;
+        border-top: 1px solid var(--triagly-footer-border, #e5e7eb);
+        background: var(--triagly-footer-bg, #f9fafb);
+        border-radius: 0 0 var(--triagly-modal-radius, 12px) var(--triagly-modal-radius, 12px);
+      }
+
+      .triagly-branding {
+        font-size: 12px;
+        color: var(--triagly-footer-text, #6b7280);
+        text-decoration: none;
+        transition: color 0.2s;
+      }
+
+      .triagly-branding:hover {
+        color: var(--triagly-footer-text-hover, #18181b);
+      }
+
+      .triagly-branding strong {
+        font-weight: 600;
+      }
     `;
             document.head.appendChild(style);
         }
@@ -902,7 +898,6 @@
                     consoleLogs: data.consoleLogs,
                 },
                 tags: data.tags,
-                screenshot: data.screenshot,
                 reporterEmail: data.reporterEmail,
                 reporterName: data.reporterName,
                 turnstileToken,
@@ -989,34 +984,6 @@
         }
         return browser;
     }
-    /**
-     * Capture screenshot of current page
-     */
-    async function captureScreenshot() {
-        try {
-            // Use html2canvas library if available
-            if (typeof window.html2canvas !== 'undefined') {
-                const canvas = await window.html2canvas(document.body, {
-                    logging: false,
-                    useCORS: true,
-                    allowTaint: true,
-                });
-                return canvas.toDataURL('image/png');
-            }
-            // Fallback to native screenshot API if supported (limited browser support)
-            if ('mediaDevices' in navigator && 'getDisplayMedia' in navigator.mediaDevices) {
-                // This requires user interaction and shows a permission dialog
-                // Not ideal for automatic screenshots
-                console.warn('Screenshot capture requires html2canvas library');
-                return null;
-            }
-            return null;
-        }
-        catch (error) {
-            console.error('Screenshot capture failed:', error);
-            return null;
-        }
-    }
     /**
      * Simple rate limiter using localStorage
      */
@@ -1237,7 +1204,7 @@
                 theme: 'auto',
                 position: 'bottom-right',
                 buttonShape: 'rounded',
-                buttonText: '🐛 Feedback',
+                buttonText: 'Feedback',
                 placeholderText: 'Describe what happened...',
                 successMessage: 'Feedback sent successfully!',
                 errorMessage: 'Failed to send feedback. Please try again.',
@@ -1292,17 +1259,11 @@
                 }
                 // Collect metadata
                 const metadata = collectMetadata(this.config.metadata);
-                // Capture screenshot if requested
-                let screenshot = null;
-                if (data.includeScreenshot) {
-                    screenshot = await captureScreenshot();
-                }
                 // Prepare feedback data
                 const feedbackData = {
                     title: data.title,
                     description: data.description,
                     reporterEmail: data.reporterEmail,
-                    screenshot: screenshot || undefined,
                     consoleLogs: this.consoleLogger?.getLogs(),
                 };
                 // Submit to API with Turnstile token if provided