react-visual-feedback 1.4.8 → 1.4.9

package/README.md

@@ -8,9 +8,11 @@ A powerful, visual feedback collection tool for React applications with screen r
 - **Visual Element Selection** - Click any element with hover highlighting
 - **Screenshot Capture** - Automatic pixel-perfect screenshot with CSS rendering
 - **Screen Recording** - Record screen with audio and capture console/network logs
+- **Manual Feedback** - `Alt+A` to open form directly without selection
+- **File Attachments** - Drag & drop support for Images, Videos, PDFs, and other files
 - **Canvas Drawing** - Annotate screenshots with drawings and highlights
 - **React Component Detection** - Automatically detects React component names and source files
-- **Keyboard Shortcuts** - `Alt+Q` to activate, `Esc` to cancel
+- **Keyboard Shortcuts** - `Alt+Q` (Selection), `Alt+A` (Manual), `Alt+W` (Record), `Esc` (Cancel)
 
 ### Session Replay
 - **Video Playback** - Watch recorded user sessions
@@ -51,6 +53,7 @@ import { FeedbackProvider } from 'react-visual-feedback';
 function App() {
   const handleFeedbackSubmit = async (feedbackData) => {
     console.log('Feedback received:', feedbackData);
+    // feedbackData.attachment contains any manually uploaded file
     await fetch('/api/feedback', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -88,7 +91,7 @@ function FeedbackButtons() {
 
 function App() {
   const handleFeedbackSubmit = async (feedbackData) => {
-    // feedbackData contains: feedback, screenshot, video, eventLogs, elementInfo, etc.
+    // feedbackData contains: feedback, screenshot, video, attachment, eventLogs, elementInfo, etc.
     await fetch('/api/feedback', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -113,6 +116,7 @@ function App() {
       userName="John Doe"
       userEmail="john@example.com"
       mode="light"
+      defaultOpen={false} // Set to true to open feedback form on mount
     >
       <YourApp />
       <FeedbackButtons />
@@ -138,6 +142,7 @@ function App() {
 | `mode` | `'light' \| 'dark'` | `'light'` | Theme mode |
 | `isActive` | `boolean` | - | Controlled active state |
 | `onActiveChange` | `(active) => void` | - | Callback for controlled mode |
+| `defaultOpen` | `boolean` | `false` | Open manual feedback form immediately on mount |
 
 ### FeedbackDashboard Props
 
@@ -204,11 +209,11 @@ interface FeedbackData {
     height: number;
   };
 
-  // Screenshot (for element selection)
-  screenshot?: string;           // Base64 PNG data URL
+  // Attachments
+  screenshot?: string;           // Base64 PNG data URL (Automatic)
+  video?: string;                // Base64 webm data URL (Recording)
+  attachment?: File;             // Generic file (Manual Upload)
 
-  // Video (for screen recording)
-  video?: string;                // Base64 webm data URL
   eventLogs?: EventLog[];        // Console/network logs
 
   // Element info (for element selection)
@@ -284,6 +289,17 @@ CREATE TABLE feedback_videos (
     created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
 );
 
+-- Generic attachments table
+CREATE TABLE feedback_attachments (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    feedback_id UUID NOT NULL REFERENCES feedback(id) ON DELETE CASCADE,
+    file_name VARCHAR(255),
+    file_type VARCHAR(100),
+    file_size_bytes BIGINT,
+    file_data TEXT,            -- Base64 or URL
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
 -- Event logs table (console logs, network requests)
 CREATE TABLE feedback_event_logs (
     id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
@@ -409,6 +425,19 @@ CREATE TABLE feedback_videos (
     FOREIGN KEY (feedback_id) REFERENCES feedback(id) ON DELETE CASCADE
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+-- Attachments table
+CREATE TABLE feedback_attachments (
+    id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
+    feedback_id CHAR(36) NOT NULL,
+    file_name VARCHAR(255),
+    file_type VARCHAR(100),
+    file_size_bytes BIGINT,
+    file_data LONGTEXT,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+
+    FOREIGN KEY (feedback_id) REFERENCES feedback(id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 -- Event logs table
 CREATE TABLE feedback_event_logs (
     id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
@@ -470,7 +499,7 @@ CREATE TABLE feedback_status_history (
 // POST /api/feedback - Submit new feedback
 app.post('/api/feedback', async (req, res) => {
   const { feedback, type, userName, userEmail, url, userAgent,
-          viewport, screenshot, video, eventLogs, elementInfo } = req.body;
+          viewport, screenshot, video, attachment, eventLogs, elementInfo } = req.body;
 
   // Start transaction
   const client = await pool.connect();
@@ -501,6 +530,16 @@ app.post('/api/feedback', async (req, res) => {
         VALUES ($1, $2)
       `, [feedbackId, video]);
     }
+    
+    // Insert manual attachment (generic file)
+    if (attachment) {
+       // Note: 'attachment' here is assumed to be pre-processed/uploaded file metadata + content
+       // In a real app, you might handle file upload separately (multipart/form-data)
+       await client.query(`
+        INSERT INTO feedback_attachments (feedback_id, file_name, file_data)
+        VALUES ($1, $2, $3)
+      `, [feedbackId, attachment.name, attachment.data]);
+    }
 
     // Insert event logs if exist
     if (eventLogs?.length) {
@@ -573,6 +612,7 @@ app.patch('/api/feedback/:id/status', async (req, res) => {
 | Shortcut | Action |
 |----------|--------|
 | `Alt+Q` | Activate feedback mode (element selection) |
+| `Alt+A` | Open Manual Feedback form |
 | `Alt+W` | Start screen recording |
 | `Alt+Shift+Q` | Open dashboard |
 | `Esc` | Cancel/close |
@@ -845,6 +885,15 @@ import {
 
 ## Changelog
 
+### v1.5.0
+- **Added**: Manual feedback mode (`Alt+A`) - open form without selecting an element
+- **Added**: `defaultOpen` prop to automatically open form on mount
+- **Added**: Drag & Drop file upload support
+- **Added**: Support for generic file attachments (PDF, etc.)
+- **Improved**: Dark mode colors for better contrast and readability
+- **Improved**: Dashboard status badges now have solid backgrounds for better visibility
+- **Improved**: Screenshot preview in dashboard with zoom overlay
+
 ### v1.4.2
 - **Fixed**: Modal state not resetting after submission (was showing "Sending..." on reopen)
 - **Added**: `Alt+W` keyboard shortcut for video recording