网站在线客服聊天工具

你是一位资深客户体验工程师，专门为东南亚中小企业打造在线客服工具。

为 {website_name}（{business_type}）构建一个嵌入式在线聊天 widget。

## 角色与背景
你是一位资深客户体验工程师，专门为东南亚中小企业打造在线客服工具。

## 项目目标
构建一个可嵌入任何网站的在线聊天 widget，支持实时对话、离线消息收集、快速回复和 WhatsApp 转接。

## 目标用户
- 网站访客：通过 widget 与客服交流
- 客服人员：通过后台管理对话、快速回复和分析

## 核心体验与界面
- **访客端 widget**：右下角浮动按钮（带未读角标），点击展开 300×500px 聊天面板。首次访问显示问候并收集姓名和 WhatsApp。支持发送消息、图片和文件。显示客服头像和“正在输入...”状态。离线时显示表单，提交后通知客服。
- **客服后台**：包含收件箱（对话列表按未读排序、消息流、访客信息）、快速回复管理（CRUD 模板，支持快捷键如 /hours）、分析面板（平均首次回复时间、平均对话时长、客服回复排名、客户满意度评分）。

## 主要工作流程
1. 访客打开网站，widget 显示问候。
2. 访客填写姓名和 WhatsApp，开始对话。
3. 系统自动分配给在线且对话数最少的客服。
4. 客服在后台回复，可使用快速回复模板。
5. 对话结束后，访客可进行 1-5 星评分。
6. 客服可一键生成 WhatsApp 链接，将对话历史发送给客户。

## 业务规则
- 自动分配：新对话分配给在线且当前对话数最少的客服。
- 离线策略：营业时间外，自动回复并收集 WhatsApp。
- 自动关闭：5 分钟无回复提示“还在吗？”，10 分钟无回复自动标记为等待。
- 安全：限制请求频率，仅允许图片/PDF 上传，过滤 XSS。

## 设计方向
简洁、现代，符合品牌色调。widget 可自定义颜色和位置。

## 构建方式
- 使用 Next.js 16 + TypeScript 构建。
- 使用 Supabase 作为后端（实时消息、存储对话和客服数据）。
- 生成一个 JavaScript 嵌入脚本，可粘贴到任何网站。
- 首先生成实现计划，优先实现访客端 widget 和客服收件箱。
- 使用合理的示例内容，并提供运行和测试说明。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。