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

``bash


npm

npm install lumi-feedback-widget

pnpm

pnpm add lumi-feedback-widget

yarn

yarn add lumi-feedback-widget
`

🚀 Quick Start

$3

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

$3

`tsx
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 (

position="bottom-right"
onSubmit={handleSubmit}
metadata={{ version: '1.0.0', userId: 'user123' }}
/>

)
}
`

⚙️ 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 | - | 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:

`bash
pnpm add s3-upload-service
`

`tsx
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

`typescript
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

`tsx
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' },
]


`

🔧 Advanced: Components Export

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

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

$3

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

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

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

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

🛠️ Development

`bash


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