如何构建实时客户支持聊天窗口（Chat Widget）
解决产品用户反馈与实时支持痛点：通过构建一个前端悬浮聊天组件与后端管理面板，实现用户与管理员之间的实时消息交互。
为什么需要这个技能
在现代 Web 应用中，提供即时沟通渠道能显著提升用户体验和转化率。如果依赖邮件，响应周期过长；如果使用第三方工具，则无法深度集成业务数据。
本技能提供了一套完整的实时支持系统架构，涵盖了从数据库模型设计、WebSocket 实时推送、前端状态管理到异步邮件提醒的闭环流程，帮助开发者快速搭建一个可商业化运行的内嵌客服系统。
适用场景
- 为 SaaS 产品添加原生的实时在线客服功能。
- 需要在应用内建立用户与管理员的 1 对 1 沟通渠道。
- 构建需要实时反馈、低延迟消息传递的支持系统。
- 实现一个具备“未读提醒”和“会话归档”功能的管理后台。
核心工作流
1. 数据模型设计
建立 support_chats（会话表）和 support_messages（消息表）。核心逻辑是每个用户仅拥有一个唯一会话，通过 archived_at 字段实现会话的软删除（归档），当用户在归档会话中再次发送消息时，自动触发取消归档。
2. 实时通信机制
采用 WebSocket（如 ActionCable, Socket.IO 或 Pusher）建立双向通道：
- ChatChannel：绑定特定会话 ID，用户和当前处理该会话的管理员共同订阅。
- AdminNotificationChannel：全局通道，所有管理员订阅，用于实时接收“新用户发起对话”的通知。
3. 前端组件实现
- 用户端 (Widget)：实现一个固定在右下角的悬浮按钮
展开聊天面板 维护消息列表状态 处理 WebSocket 接收到的新消息并自动滚动到底部。 - 管理端 (Dashboard)：实现会话列表页（按最后消息时间排序）和会话详情页，支持一键归档和状态标记。
4. 异步通知闭环
为防止用户在关闭页面后错过回复，实施延迟邮件提醒：当管理员发送消息后，启动一个 5 分钟延迟的后台任务，检查该消息是否已被用户读取，若未读取则发送邮件通知。
下载和安装
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐