react-visual-feedback 1.3.7 → 1.4.0

package/README.md

@@ -1,34 +1,33 @@
 # React Visual Feedback
 
-A powerful, visual feedback collection tool for React applications with an integrated dashboard for managing user feedback. Users can select any element on your page, and the widget automatically captures a screenshot and context information.
+A powerful, visual feedback collection tool for React applications with screen recording, session replay, and an integrated dashboard for managing user feedback.
 
 ## Features
 
 ### Feedback Collection
-- 🎯 Visual element selection with hover highlighting
-- 📸 Automatic screenshot capture with perfect CSS rendering
-- 📝 Rich feedback form with context
-- ⚡ Lightweight and performant
-- 🎨 Works with any CSS framework (Tailwind, Bootstrap, Material-UI, etc.)
-- ⌨️ Keyboard shortcuts (Ctrl+Q to activate, Esc to cancel)
-- 🌓 Dark mode support
-
-### Feedback Dashboard
-- 📊 Professional dashboard with localStorage or custom data source
-- 👨‍💻 Developer mode with full technical details
-- 👤 User mode for simplified feedback view
-- 🏷️ Status management with 7 professional status options
-- 💬 Status change modal with developer comments
-- 🔒 Permission system - Users can only view, developers can manage
-- 🔄 Status change callbacks for database synchronization
-- ⌨️ Dashboard keyboard shortcut (Ctrl+Shift+Q)
-
-### Update Notifications
-- 🔔 Beautiful notification component for feedback updates
-- 📬 Show users when their feedback status changes
-- 🎨 Grouped by status (Completed, In Progress, Other)
-- 👋 Dismiss individual updates or all at once
-- ⏰ Smart time formatting (e.g., "2 hours ago", "3 days ago")
+- **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
+- **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
+
+### Session Replay
+- **Video Playback** - Watch recorded user sessions
+- **Console Logs** - See console.log, errors, warnings synced with video
+- **Network Requests** - Track API calls and responses
+- **Expandable Logs Panel** - Slide-out panel on the right side (customizable)
+
+### 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
+
+### Theming
+- **Light/Dark Mode** - Full theme support
+- **styled-components** - No external CSS required
 
 ## Installation
 
@@ -36,25 +35,22 @@ A powerful, visual feedback collection tool for React applications with an integ
 npm install react-visual-feedback
 ```
 
-**Important:** Import the CSS file in your application:
-
-```jsx
-import 'react-visual-feedback/dist/index.css';
+**Peer Dependencies:**
+```bash
+npm install react react-dom styled-components
 ```
 
 ## Quick Start
 
-### Basic Usage (Feedback Only)
+### Basic Usage
 
 ```jsx
 import React from 'react';
 import { FeedbackProvider } from 'react-visual-feedback';
-import 'react-visual-feedback/dist/index.css';
 
 function App() {
   const handleFeedbackSubmit = async (feedbackData) => {
     console.log('Feedback received:', feedbackData);
-    // Send to your backend
     await fetch('/api/feedback', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -68,27 +64,23 @@ function App() {
     </FeedbackProvider>
   );
 }
-
-export default App;
 ```
 
-### With Dashboard (Full Feature Set)
+### With Dashboard & Screen Recording
 
 ```jsx
 import React from 'react';
 import { FeedbackProvider, useFeedback } from 'react-visual-feedback';
-import 'react-visual-feedback/dist/index.css';
 
 function FeedbackButtons() {
-  const { isActive, setIsActive, setIsDashboardOpen } = useFeedback();
+  const { isActive, setIsActive, setIsDashboardOpen, startRecording } = useFeedback();
 
   return (
     <div style={{ position: 'fixed', bottom: 20, right: 20, display: 'flex', gap: 10 }}>
-      <button onClick={() => setIsDashboardOpen(true)}>
-        📊 Dashboard
-      </button>
+      <button onClick={() => setIsDashboardOpen(true)}>Dashboard</button>
+      <button onClick={startRecording}>Record Screen</button>
       <button onClick={() => setIsActive(!isActive)}>
-        {isActive ? '✕ Cancel' : '💬 Report Issue'}
+        {isActive ? 'Cancel' : 'Report Issue'}
       </button>
     </div>
   );
@@ -96,6 +88,7 @@ function FeedbackButtons() {
 
 function App() {
   const handleFeedbackSubmit = async (feedbackData) => {
+    // feedbackData contains: feedback, screenshot, video, eventLogs, elementInfo, etc.
     await fetch('/api/feedback', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -104,7 +97,6 @@ function App() {
   };
 
   const handleStatusChange = async ({ id, status, comment }) => {
-    // Update your database with status and developer comment
     await fetch(`/api/feedback/${id}/status`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
@@ -117,286 +109,477 @@ function App() {
       onSubmit={handleFeedbackSubmit}
       onStatusChange={handleStatusChange}
       dashboard={true}
-      isDeveloper={true}  // Set to false for user mode
+      isDeveloper={true}
       userName="John Doe"
       userEmail="john@example.com"
+      mode="light"
     >
       <YourApp />
       <FeedbackButtons />
     </FeedbackProvider>
   );
 }
-
-export default App;
 ```
 
-### With Update Notifications
-
-```jsx
-import React, { useState } from 'react';
-import {
-  FeedbackProvider,
-  FeedbackUpdatesNotification
-} from 'react-visual-feedback';
-import 'react-visual-feedback/dist/index.css';
-
-function App() {
-  const [showNotifications, setShowNotifications] = useState(false);
-  const [updates, setUpdates] = useState([
-    {
-      id: '1',
-      title: 'Button not working on mobile',
-      feedback: 'The submit button is not clickable',
-      status: 'resolved',
-      responseMessage: 'Fixed! The button now works on all devices.',
-      resolvedBy: 'John Developer',
-      updatedAt: '2025-11-02T14:30:00Z'
-    },
-    {
-      id: '2',
-      title: 'Add dark mode',
-      feedback: 'Would be great to have dark mode',
-      status: 'inProgress',
-      responseMessage: 'Working on it! Should be ready next week.',
-      assignedTo: 'Sarah Designer',
-      estimatedResolutionDate: '2025-11-10T00:00:00Z',
-      updatedAt: '2025-11-01T11:00:00Z'
-    }
-  ]);
-
-  const handleDismissUpdate = (updateId) => {
-    setUpdates(prev => prev.filter(u => u.id !== updateId));
-  };
-
-  const handleDismissAll = () => {
-    setUpdates([]);
-    setShowNotifications(false);
-  };
-
-  return (
-    <FeedbackProvider onSubmit={handleFeedbackSubmit}>
-      <YourApp />
-
-      <button onClick={() => setShowNotifications(true)}>
-        🔔 Updates ({updates.length})
-      </button>
-
-      <FeedbackUpdatesNotification
-        isOpen={showNotifications}
-        onClose={() => setShowNotifications(false)}
-        updates={updates}
-        onDismissUpdate={handleDismissUpdate}
-        onDismissAll={handleDismissAll}
-      />
-    </FeedbackProvider>
-  );
-}
-
-export default App;
-```
-
-## Status Options
-
-The dashboard includes 7 professional status options:
-
-| Status | Color | Description |
-|--------|-------|-------------|
-| **Reported** 🔴 | Red | Initial feedback submission |
-| **Opened** 🟠 | Amber | Acknowledged and under review |
-| **In Progress** 🔵 | Blue | Actively being worked on |
-| **Resolved** 🟢 | Green | Fixed and ready |
-| **Released** 🟣 | Purple | Deployed to production |
-| **Blocked** 🔴 | Red | Waiting on dependencies |
-| **Won't Fix** ⚪ | Gray | Not planned for implementation |
-
 ## API Reference
 
 ### FeedbackProvider Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `onSubmit` | `(feedbackData) => Promise<void>` | Yes | - | Callback when feedback is submitted |
-| `onStatusChange` | `({ id, status, comment }) => void` | No | - | Callback when status changes (includes optional developer comment) |
-| `children` | `ReactNode` | Yes | - | Your app components |
-| `dashboard` | `boolean` | No | `false` | Enable dashboard feature |
-| `dashboardData` | `Array` | No | `undefined` | Custom feedback data (uses localStorage if undefined) |
-| `isDeveloper` | `boolean` | No | `false` | Enable developer mode with full permissions |
-| `isUser` | `boolean` | No | `true` | Enable user mode (read-only) |
-| `userName` | `string` | No | `'Anonymous'` | User name for feedback submissions |
-| `userEmail` | `string` | No | `null` | User email for feedback submissions |
-| `mode` | `'light' \| 'dark'` | No | `'light'` | Theme mode |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSubmit` | `(data) => Promise` | required | Callback when feedback is submitted |
+| `onStatusChange` | `({id, status, comment}) => void` | - | Callback when status changes |
+| `dashboard` | `boolean` | `false` | Enable dashboard feature |
+| `dashboardData` | `Array` | - | Custom data (uses localStorage if undefined) |
+| `isDeveloper` | `boolean` | `false` | Enable developer mode |
+| `isUser` | `boolean` | `true` | Enable user mode |
+| `userName` | `string` | `'Anonymous'` | User name |
+| `userEmail` | `string` | `null` | User email |
+| `mode` | `'light' \| 'dark'` | `'light'` | Theme mode |
+| `isActive` | `boolean` | - | Controlled active state |
+| `onActiveChange` | `(active) => void` | - | Callback for controlled mode |
 
 ### useFeedback Hook
 
 ```jsx
-const { isActive, setIsActive, setIsDashboardOpen } = useFeedback();
+const {
+  isActive,           // boolean - feedback mode active
+  setIsActive,        // (active: boolean) => void
+  setIsDashboardOpen, // (open: boolean) => void
+  startRecording      // () => void - start screen recording
+} = useFeedback();
 ```
 
-**Returns:**
-- `isActive`: `boolean` - Whether feedback mode is active
-- `setIsActive`: `(active: boolean) => void` - Activate/deactivate feedback mode
-- `setIsDashboardOpen`: `(open: boolean) => void` - Open/close dashboard
+### SessionReplay Props (for custom implementations)
 
-### FeedbackUpdatesNotification Props
+```jsx
+import { SessionReplay } from 'react-visual-feedback';
+
+<SessionReplay
+  videoSrc={videoDataUrl}      // Video source (data URL, blob URL, or http URL)
+  eventLogs={logs}             // Array of log objects with timestamp
+  mode="light"                 // Theme mode
+  showLogsButton={true}        // Show/hide logs toggle button
+  logsPanelWidth="320px"       // Width of logs panel
+  defaultLogsOpen={false}      // Start with logs panel open
+/>
+```
+
+## Data Structures
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `isOpen` | `boolean` | Yes | - | Controls notification visibility |
-| `onClose` | `() => void` | Yes | - | Callback when notification is closed |
-| `updates` | `Array` | Yes | - | Array of feedback updates to display |
-| `onDismissUpdate` | `(id: string) => void` | No | - | Callback when a single update is dismissed |
-| `onDismissAll` | `() => void` | No | - | Callback when all updates are dismissed |
+### Feedback Data (submitted via onSubmit)
 
-**Update Object Structure:**
 ```typescript
-{
-  id: string,
-  title?: string,
-  feedback: string,
-  status: 'reported' | 'opened' | 'inProgress' | 'resolved' | 'released' | 'blocked' | 'wontFix',
-  responseMessage?: string,
-  assignedTo?: string,
-  resolvedBy?: string,
-  estimatedResolutionDate?: string,
-  updatedAt: string,
-  createdAt?: string
-}
-```
+interface FeedbackData {
+  id: string;                    // UUID
+  feedback: string;              // User's feedback text
+  type: 'bug' | 'feature' | 'improvement' | 'question' | 'other';
+  userName: string;
+  userEmail: string | null;
+  status: string;                // 'new', 'open', 'inProgress', etc.
+  timestamp: string;             // ISO 8601
+  url: string;                   // Page URL
+  userAgent: string;
+  viewport: {
+    width: number;
+    height: number;
+  };
 
-### Feedback Data Structure
+  // Screenshot (for element selection)
+  screenshot?: string;           // Base64 PNG data URL
+
+  // Video (for screen recording)
+  video?: string;                // Base64 webm data URL
+  eventLogs?: EventLog[];        // Console/network logs
+
+  // Element info (for element selection)
+  elementInfo?: {
+    tagName: string;
+    id: string;
+    className: string;
+    selector: string;
+    text: string;
+    position: { x: number; y: number; width: number; height: number };
+    styles: { backgroundColor: string; color: string; fontSize: string };
+    sourceFile?: string;         // React source file path
+    lineNumber?: number;
+    columnNumber?: number;
+    componentStack?: string[];   // React component hierarchy
+  };
+}
 
-```typescript
-{
-  id: string,
-  feedback: string,
-  userName: string,
-  userEmail: string | null,
-  status: 'reported' | 'opened' | 'inProgress' | 'resolved' | 'released' | 'blocked' | 'wontFix',
-  timestamp: string, // ISO 8601 format
-  url: string,
-  elementInfo: {
-    tagName: string,
-    id: string,
-    className: string,
-    selector: string,
-    text: string,
-    position: { x: number, y: number, width: number, height: number },
-    styles: { backgroundColor: string, color: string, fontSize: string, fontFamily: string }
-  },
-  screenshot: string, // Base64 encoded PNG
-  viewport: { width: number, height: number },
-  userAgent: string
+interface EventLog {
+  timestamp: number;             // Milliseconds from recording start
+  type: 'log' | 'warn' | 'error' | 'info' | 'network';
+  message: string;
+  data?: any;
 }
 ```
 
-## Keyboard Shortcuts
-
-| Shortcut | Action |
-|----------|--------|
-| `Ctrl+Q` | Activate feedback mode |
-| `Ctrl+Shift+Q` | Open dashboard (when dashboard is enabled) |
-| `Esc` | Cancel/close feedback mode or dashboard |
-| `Ctrl+Enter` | Submit feedback (when form is open) |
-
-## Developer vs User Mode
-
-### Developer Mode (`isDeveloper={true}`)
-- ✅ View all technical details (element info, CSS, viewport, user agent)
-- ✅ Change feedback status with optional comments
-- ✅ Delete feedback items
-- ✅ Full control over feedback management
-
-### User Mode (`isDeveloper={false}`)
-- ✅ View feedback submissions
-- ✅ See current status and developer responses
-- ❌ Cannot change status
-- ❌ Cannot delete items
-
-## How It Works
-
-### Feedback Collection Flow
-
-1. User activates the widget (Ctrl+Q or button click)
-2. User hovers over elements to see them highlighted
-3. User clicks on the problematic element
-4. Widget captures a pixel-perfect screenshot
-5. Feedback form appears with context pre-filled
-6. User enters feedback and submits
-7. Your `onSubmit` handler receives all data
-
-### Dashboard Flow
-
-1. User opens dashboard (Ctrl+Shift+Q or programmatically)
-2. Dashboard displays all feedback submissions
-3. Developer clicks status dropdown and selects new status
-4. Status change modal appears for optional developer comment
-5. Developer adds comment (optional) and confirms
-6. `onStatusChange` callback triggered with `{ id, status, comment }`
-7. Your backend updates the database
-8. Dashboard reflects the new status
-
-## Browser Support
+## Database Schema (SQL)
+
+### PostgreSQL
+
+```sql
+-- Enable UUID extension
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Main feedback table
+CREATE TABLE feedback (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    feedback TEXT NOT NULL,
+    type VARCHAR(20) DEFAULT 'bug' CHECK (type IN ('bug', 'feature', 'improvement', 'question', 'other')),
+    status VARCHAR(20) DEFAULT 'new' CHECK (status IN ('new', 'open', 'inProgress', 'underReview', 'onHold', 'resolved', 'closed', 'wontFix')),
+
+    -- User info
+    user_name VARCHAR(255) DEFAULT 'Anonymous',
+    user_email VARCHAR(255),
+
+    -- Page context
+    url TEXT,
+    user_agent TEXT,
+    viewport_width INTEGER,
+    viewport_height INTEGER,
+
+    -- Timestamps
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Screenshots table (separate for large data)
+CREATE TABLE feedback_screenshots (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    feedback_id UUID NOT NULL REFERENCES feedback(id) ON DELETE CASCADE,
+    screenshot TEXT NOT NULL,  -- Base64 encoded PNG
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Videos table (for screen recordings)
+CREATE TABLE feedback_videos (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    feedback_id UUID NOT NULL REFERENCES feedback(id) ON DELETE CASCADE,
+    video_data TEXT,           -- Base64 encoded webm (for small videos)
+    video_url TEXT,            -- URL to cloud storage (for large videos)
+    duration_ms INTEGER,
+    file_size_bytes BIGINT,
+    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(),
+    feedback_id UUID NOT NULL REFERENCES feedback(id) ON DELETE CASCADE,
+    timestamp_ms INTEGER NOT NULL,  -- Milliseconds from recording start
+    log_type VARCHAR(20) NOT NULL CHECK (log_type IN ('log', 'warn', 'error', 'info', 'network')),
+    message TEXT NOT NULL,
+    data JSONB,                     -- Additional log data
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Element info table (for element selection feedback)
+CREATE TABLE feedback_element_info (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    feedback_id UUID NOT NULL REFERENCES feedback(id) ON DELETE CASCADE,
+    tag_name VARCHAR(50),
+    element_id VARCHAR(255),
+    class_name TEXT,
+    css_selector TEXT,
+    inner_text TEXT,
+    position_x INTEGER,
+    position_y INTEGER,
+    width INTEGER,
+    height INTEGER,
+    background_color VARCHAR(50),
+    color VARCHAR(50),
+    font_size VARCHAR(20),
+
+    -- React component info
+    source_file TEXT,
+    line_number INTEGER,
+    column_number INTEGER,
+    component_stack TEXT[],
+
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Status history table (track status changes)
+CREATE TABLE feedback_status_history (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    feedback_id UUID NOT NULL REFERENCES feedback(id) ON DELETE CASCADE,
+    old_status VARCHAR(20),
+    new_status VARCHAR(20) NOT NULL,
+    comment TEXT,
+    changed_by VARCHAR(255),
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Indexes for performance
+CREATE INDEX idx_feedback_status ON feedback(status);
+CREATE INDEX idx_feedback_user_email ON feedback(user_email);
+CREATE INDEX idx_feedback_created_at ON feedback(created_at DESC);
+CREATE INDEX idx_feedback_type ON feedback(type);
+CREATE INDEX idx_event_logs_feedback_id ON feedback_event_logs(feedback_id);
+CREATE INDEX idx_event_logs_timestamp ON feedback_event_logs(timestamp_ms);
+CREATE INDEX idx_status_history_feedback_id ON feedback_status_history(feedback_id);
+
+-- Update timestamp trigger
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = CURRENT_TIMESTAMP;
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+CREATE TRIGGER update_feedback_updated_at
+    BEFORE UPDATE ON feedback
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+```
 
-- ✅ Chrome/Edge
-- ✅ Firefox
-- ✅ Safari
-- ✅ Opera
+### MySQL
+
+```sql
+-- Main feedback table
+CREATE TABLE feedback (
+    id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
+    feedback TEXT NOT NULL,
+    type ENUM('bug', 'feature', 'improvement', 'question', 'other') DEFAULT 'bug',
+    status ENUM('new', 'open', 'inProgress', 'underReview', 'onHold', 'resolved', 'closed', 'wontFix') DEFAULT 'new',
+
+    -- User info
+    user_name VARCHAR(255) DEFAULT 'Anonymous',
+    user_email VARCHAR(255),
+
+    -- Page context
+    url TEXT,
+    user_agent TEXT,
+    viewport_width INT,
+    viewport_height INT,
+
+    -- Timestamps
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+
+    INDEX idx_status (status),
+    INDEX idx_user_email (user_email),
+    INDEX idx_created_at (created_at DESC),
+    INDEX idx_type (type)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Screenshots table
+CREATE TABLE feedback_screenshots (
+    id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
+    feedback_id CHAR(36) NOT NULL,
+    screenshot LONGTEXT NOT NULL,
+    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;
+
+-- Videos table
+CREATE TABLE feedback_videos (
+    id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
+    feedback_id CHAR(36) NOT NULL,
+    video_data LONGTEXT,
+    video_url TEXT,
+    duration_ms INT,
+    file_size_bytes BIGINT,
+    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()),
+    feedback_id CHAR(36) NOT NULL,
+    timestamp_ms INT NOT NULL,
+    log_type ENUM('log', 'warn', 'error', 'info', 'network') NOT NULL,
+    message TEXT NOT NULL,
+    data JSON,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+
+    FOREIGN KEY (feedback_id) REFERENCES feedback(id) ON DELETE CASCADE,
+    INDEX idx_feedback_id (feedback_id),
+    INDEX idx_timestamp (timestamp_ms)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Element info table
+CREATE TABLE feedback_element_info (
+    id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
+    feedback_id CHAR(36) NOT NULL,
+    tag_name VARCHAR(50),
+    element_id VARCHAR(255),
+    class_name TEXT,
+    css_selector TEXT,
+    inner_text TEXT,
+    position_x INT,
+    position_y INT,
+    width INT,
+    height INT,
+    background_color VARCHAR(50),
+    color VARCHAR(50),
+    font_size VARCHAR(20),
+    source_file TEXT,
+    line_number INT,
+    column_number INT,
+    component_stack JSON,
+    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;
+
+-- Status history table
+CREATE TABLE feedback_status_history (
+    id CHAR(36) PRIMARY KEY DEFAULT (UUID()),
+    feedback_id CHAR(36) NOT NULL,
+    old_status VARCHAR(20),
+    new_status VARCHAR(20) NOT NULL,
+    comment TEXT,
+    changed_by VARCHAR(255),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+
+    FOREIGN KEY (feedback_id) REFERENCES feedback(id) ON DELETE CASCADE,
+    INDEX idx_feedback_id (feedback_id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+```
 
-## Local Development
+### Example API Endpoints (Node.js/Express)
+
+```javascript
+// 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;
+
+  // Start transaction
+  const client = await pool.connect();
+  try {
+    await client.query('BEGIN');
+
+    // Insert main feedback
+    const feedbackResult = await client.query(`
+      INSERT INTO feedback (feedback, type, user_name, user_email, url, user_agent, viewport_width, viewport_height)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+      RETURNING id
+    `, [feedback, type, userName, userEmail, url, userAgent, viewport?.width, viewport?.height]);
+
+    const feedbackId = feedbackResult.rows[0].id;
+
+    // Insert screenshot if exists
+    if (screenshot) {
+      await client.query(`
+        INSERT INTO feedback_screenshots (feedback_id, screenshot)
+        VALUES ($1, $2)
+      `, [feedbackId, screenshot]);
+    }
 
-```bash
-# Clone repository
-git clone https://github.com/Murali1889/react-feedback-widget.git
-cd react-feedback-widget
+    // Insert video if exists
+    if (video) {
+      await client.query(`
+        INSERT INTO feedback_videos (feedback_id, video_data)
+        VALUES ($1, $2)
+      `, [feedbackId, video]);
+    }
 
-# Install dependencies
-npm install
+    // Insert event logs if exist
+    if (eventLogs?.length) {
+      for (const log of eventLogs) {
+        await client.query(`
+          INSERT INTO feedback_event_logs (feedback_id, timestamp_ms, log_type, message, data)
+          VALUES ($1, $2, $3, $4, $5)
+        `, [feedbackId, log.timestamp, log.type, log.message, JSON.stringify(log.data)]);
+      }
+    }
 
-# Build the widget
-npm run build
+    // Insert element info if exists
+    if (elementInfo) {
+      await client.query(`
+        INSERT INTO feedback_element_info
+        (feedback_id, tag_name, element_id, class_name, css_selector, inner_text,
+         position_x, position_y, width, height, source_file, line_number, column_number, component_stack)
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
+      `, [feedbackId, elementInfo.tagName, elementInfo.id, elementInfo.className,
+          elementInfo.selector, elementInfo.text, elementInfo.position?.x, elementInfo.position?.y,
+          elementInfo.position?.width, elementInfo.position?.height, elementInfo.sourceFile,
+          elementInfo.lineNumber, elementInfo.columnNumber, elementInfo.componentStack]);
+    }
 
-# Run example app
-cd example
-npm install
-npm run dev
+    await client.query('COMMIT');
+    res.json({ success: true, id: feedbackId });
+  } catch (error) {
+    await client.query('ROLLBACK');
+    res.status(500).json({ error: error.message });
+  } finally {
+    client.release();
+  }
+});
+
+// PATCH /api/feedback/:id/status - Update status
+app.patch('/api/feedback/:id/status', async (req, res) => {
+  const { id } = req.params;
+  const { status, comment, changedBy } = req.body;
+
+  const client = await pool.connect();
+  try {
+    await client.query('BEGIN');
+
+    // Get current status
+    const current = await client.query('SELECT status FROM feedback WHERE id = $1', [id]);
+    const oldStatus = current.rows[0]?.status;
+
+    // Update status
+    await client.query('UPDATE feedback SET status = $1 WHERE id = $2', [status, id]);
+
+    // Record history
+    await client.query(`
+      INSERT INTO feedback_status_history (feedback_id, old_status, new_status, comment, changed_by)
+      VALUES ($1, $2, $3, $4, $5)
+    `, [id, oldStatus, status, comment, changedBy]);
+
+    await client.query('COMMIT');
+    res.json({ success: true });
+  } catch (error) {
+    await client.query('ROLLBACK');
+    res.status(500).json({ error: error.message });
+  } finally {
+    client.release();
+  }
+});
 ```
 
-Visit `http://localhost:8080` to see the demo!
+## Keyboard Shortcuts
 
-## Components Exported
+| Shortcut | Action |
+|----------|--------|
+| `Alt+Q` | Activate feedback mode |
+| `Alt+Shift+Q` | Open dashboard |
+| `Esc` | Cancel/close |
 
-```jsx
-import {
-  FeedbackProvider,           // Main provider component
-  useFeedback,               // Hook to control feedback state
-  FeedbackUpdatesNotification // Notification component for updates
-} from 'react-visual-feedback';
-```
+## Status Options
 
-## What's New in v1.3.0
+| Status | Description |
+|--------|-------------|
+| **New** | Initial submission |
+| **Open** | Acknowledged |
+| **In Progress** | Being worked on |
+| **Under Review** | Code review |
+| **On Hold** | Paused |
+| **Resolved** | Fixed |
+| **Closed** | Completed |
+| **Won't Fix** | Not planned |
 
-### Status Change with Comments
-- 💬 Developers can add optional comments when changing status
-- 📝 Comments are passed to `onStatusChange` callback
-- 👥 Comments visible to users as developer responses
+## Browser Support
 
-### Update Notifications Component
-- 🔔 New `FeedbackUpdatesNotification` component
-- 📬 Show users updates on their feedback
-- 🎨 Beautifully grouped by status
-- 👋 Dismiss individual or all updates
+- Chrome/Edge (recommended for screen recording)
+- Firefox
+- Safari
+- Opera
 
 ## License
 
-MIT © 2025 Murali Vvrsn Gurajapu
-
-## Contributing
-
-Contributions welcome! Please submit a Pull Request.
-
-## Issues
-
-Report issues at: https://github.com/Murali1889/react-feedback-widget/issues
+MIT
 
 ## Author
 
@@ -405,4 +588,4 @@ Email: murali.g@hyperverge.co
 
 ---
 
-Made with ❤️ for better user feedback collection
+Made with care for better user feedback collection