react-visual-feedback 1.4.8 → 2.2.0

package/README.md

@@ -8,22 +8,39 @@ 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
-- **Console Logs** - See console.log, errors, warnings synced with video
+- **Video Playback** - Watch recorded user sessions with fullscreen support
+- **Console Logs** - See console.log, errors, warnings synced with video timeline
 - **Network Requests** - Track API calls and responses
+- **Video Mode** - Fullscreen playback with synced logs panel (scrollable even when paused)
 - **Expandable Logs Panel** - Slide-out panel on the right side (customizable)
 
+### Screen Recording
+- **Draggable Indicator** - Recording overlay can be moved around the screen
+- **Audio Capture** - Record microphone and system audio (mixed)
+- **IndexedDB Storage** - Large videos stored locally to prevent quota errors
+- **Download Videos** - Export recordings as WebM files
+
 ### Dashboard
 - **Professional UI** - Clean 700px slide-out panel
 - **Developer Mode** - Full technical details (source file, component stack, viewport)
 - **User Mode** - Simplified view for end users
 - **8 Status Options** - New, Open, In Progress, Under Review, On Hold, Resolved, Closed, Won't Fix
 - **Status Callbacks** - Sync with your database on status changes
+- **Search** - Search through feedback by title, description, or user
+
+### Updates Modal
+- **What's New** - Display product updates, bug fixes, and new features to users
+- **Filter Tabs** - Filter by Fixed or New Feature
+- **Smooth Animations** - Beautiful fade-in animations with staggered item entry
+- **Mobile Responsive** - Works as a centered popup on all screen sizes
+- **Dark/Light Mode** - Full theme support
 
 ### Theming
 - **Light/Dark Mode** - Full theme support
@@ -51,6 +68,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 +106,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 +131,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 +157,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
 
@@ -184,6 +204,65 @@ import { SessionReplay } from 'react-visual-feedback';
 />
 ```
 
+### UpdatesModal Props
+
+Display product updates, bug fixes, and new features to your users with a beautiful modal.
+
+```jsx
+import { UpdatesModal } from 'react-visual-feedback';
+
+const updates = [
+  {
+    id: '1',
+    type: 'solved',           // 'solved' | 'new_feature'
+    title: 'Fixed login page performance issues',
+    description: 'Optimized the authentication flow, reducing load time by 40%',
+    date: '2024-11-30',
+    version: '2.1.0',
+    category: 'Performance'
+  },
+  {
+    id: '2',
+    type: 'new_feature',
+    title: 'Dark mode support added',
+    description: 'Full dark mode support across all components with smooth transitions',
+    date: '2024-11-28',
+    version: '2.1.0',
+    category: 'Feature'
+  }
+];
+
+<UpdatesModal
+  isOpen={showUpdates}         // Control visibility
+  onClose={() => setShowUpdates(false)}
+  updates={updates}            // Array of update objects
+  title="What's New"           // Modal title (default: "What's New")
+  mode="light"                 // Theme mode: 'light' | 'dark'
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | required | Control modal visibility |
+| `onClose` | `() => void` | required | Callback when modal closes |
+| `updates` | `Update[]` | `[]` | Array of update objects |
+| `title` | `string` | `"What's New"` | Modal header title |
+| `mode` | `'light' \| 'dark'` | `'light'` | Theme mode |
+
+#### Update Object Structure
+
+```typescript
+interface Update {
+  id: string;                  // Unique identifier
+  type: 'solved' | 'new_feature';  // Update type
+  title: string;               // Update title
+  description?: string;        // Optional description
+  date?: string;               // Date string (displayed as "Mon DD")
+  version?: string;            // Version number (displayed as "vX.X.X")
+  category?: string;           // Category tag
+}
+```
+
 ## Data Structures
 
 ### Feedback Data (submitted via onSubmit)
@@ -204,11 +283,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 +363,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 +499,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 +573,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 +604,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 +686,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 |
@@ -813,6 +927,7 @@ import {
   FeedbackDashboard,
   FeedbackTrigger,
   CanvasOverlay,
+  UpdatesModal,          // What's New modal for updates
 
   // Hooks
   useFeedback,
@@ -845,6 +960,26 @@ import {
 
 ## Changelog
 
+### v2.2.0
+- **Added**: `UpdatesModal` component - Display product updates, bug fixes, and new features
+- **Added**: Draggable recording indicator - Move the recording overlay anywhere on screen
+- **Added**: Video Mode with fullscreen playback and synced logs panel
+- **Added**: Search functionality in feedback dashboard
+- **Added**: IndexedDB storage for large video recordings (prevents quota errors)
+- **Added**: Video download/export functionality
+- **Improved**: Logs panel now scrollable when video is paused
+- **Improved**: Audio mixing for microphone and system audio in recordings
+- **Fixed**: Mobile responsive UpdatesModal - displays as centered popup
+
+### v2.1.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