lumi-feedback-widget

React feedback widget với khả năng chụp màn hình, annotation tools, và tích hợp S3 upload.

✨ Tính năng

• 📸 Chụp màn hình - Tự động capture trang web
• ✏️ Annotation Tools - Vẽ, highlight, mũi tên, text
• 🏷️ Tag System - Phân loại: Lỗi, Tính năng, Góp ý...
• ☁️ S3 Upload - Tích hợp s3-upload-service để lưu trữ
• 🎨 Customizable - Theme, position, tags tùy chỉnh
• 🌙 Dark Mode - Hỗ trợ sẵn

📦 Cài đặt

# npm
npm install lumi-feedback-widget

# pnpm
pnpm add lumi-feedback-widget

# yarn
yarn add lumi-feedback-widget

🚀 Quick Start

1. Import CSS

// main.tsx hoặc App.tsx
import 'lumi-feedback-widget/styles.css'

2. Sử dụng Component

import { FeedbackWidget } from 'lumi-feedback-widget'

function App() {
  const handleSubmit = async (data) => {
    console.log('Feedback:', data)
    // Gửi tới API của bạn
    await fetch('/api/feedback', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }

  return (
    <div>
      <YourApp />
      
      <FeedbackWidget
        position="bottom-right"
        onSubmit={handleSubmit}
        metadata={{ version: '1.0.0', userId: 'user123' }}
      />
    </div>
  )
}

⚙️ Props

| Prop | Type | Default | Mô tả | |------|------|---------|-------| | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Vị trí nút feedback | | tags | Tag[] | Built-in tags | Danh sách tags tùy chỉnh | | onSubmit | (data: FeedbackData) => Promise<void> | - | Callback khi submit | | metadata | object | {} | Metadata bổ sung (version, userId...) | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Theme | | s3Config | S3Config | - | Cấu hình S3 upload |

☁️ S3 Upload

Để lưu feedback lên S3, cần cài thêm s3-upload-service:

pnpm add s3-upload-service

<FeedbackWidget
  onSubmit={handleSubmit}
  s3Config={{
    apiKey: import.meta.env.VITE_S3_API_KEY,
    serviceUrl: import.meta.env.VITE_S3_SERVICE_URL,
    folderName: 'my-project-feedback',
  }}
/>

Khi bật S3:

• Screenshot sẽ được upload lên S3 (URL thay vì base64)
• Toàn bộ feedback list lưu trong feedback-list.json
• CRUD tự động đồng bộ

📋 FeedbackData Structure

interface FeedbackData {
  id: string
  name: string
  content: string
  tags: string[]
  screenshot?: string  // Base64 hoặc S3 URL
  annotations: Annotation[]
  metadata: {
    url: string
    userAgent: string
    viewport: { width: number; height: number }
    timestamp: string
    version?: string
    userId?: string
  }
  createdAt: string
}

🎨 Custom Tags

const customTags = [
  { id: 'bug', label: 'Lỗi', emoji: '🐛', color: '#ef4444' },
  { id: 'feature', label: 'Tính năng', emoji: '✨', color: '#8b5cf6' },
  { id: 'improvement', label: 'Góp ý', emoji: '💡', color: '#f59e0b' },
  { id: 'question', label: 'Hỏi đáp', emoji: '❓', color: '#3b82f6' },
]

<FeedbackWidget tags={customTags} onSubmit={handleSubmit} />

🔧 Advanced: Components Export

Library cũng export các components riêng lẻ:

import {
  FeedbackWidget,
  FeedbackButton,
  FeedbackModal,
  FeedbackList,
  TagSelector,
  useFeedbackStore,
  captureScreenshot,
} from 'lumi-feedback-widget'

FeedbackList (Admin)

Hiển thị danh sách feedback cho admin:

import { FeedbackList } from 'lumi-feedback-widget'

function AdminPage() {
  const [feedbacks, setFeedbacks] = useState([])

  return (
    <FeedbackList
      feedbacks={feedbacks}
      onDelete={(id) => setFeedbacks(prev => prev.filter(f => f.id !== id))}
    />
  )
}

🛠️ Development

# Clone repo
git clone https://github.com/lumi/feedback-widget

# Install
pnpm install

# Dev mode (demo app)
pnpm dev

# Build library
pnpm build:lib

# Preview
pnpm preview

📁 Project Structure

feedback-widget/
├── src/
│   ├── lib/feedback-widget/     # Library source
│   │   ├── components/
│   │   │   ├── FeedbackButton.tsx
│   │   │   ├── FeedbackModal.tsx
│   │   │   ├── AnnotationCanvas.tsx
│   │   │   ├── TagSelector.tsx
│   │   │   ├── FeedbackList.tsx
│   │   │   └── Toast.tsx
│   │   ├── store/
│   │   │   └── useFeedbackStore.ts
│   │   ├── utils/
│   │   │   └── screenshot.ts
│   │   ├── types/
│   │   │   └── index.ts
│   │   └── index.tsx            # Main exports
│   ├── App.tsx                  # Demo app
│   └── main.tsx
├── package.json
├── vite.config.ts
└── README.md

📄 License

MIT © Lumi Team