在线客服聊天组件
React聊天用户体验Customer Support更新于 2026-08-10
使用场景: 为 SaaS 产品、电商网站或任何需要处理客户咨询的企业添加在线客服功能。
安装
npx skills add chat-widget克隆
git clone https://github.com/skillhub-community/chat-widget.git描述
实现浮动聊天气泡(右下角),点击展开为完整聊天窗口。功能包括:通过 WebSocket 或轮询的实时消息传递、正在输入提示、已读回执、表情选择器、文件/图片附件(带预览)、无限滚动加载历史消息,以及离线模式——当无客服在线时自动切换为邮件表单并提供自动工单创建确认。
可自定义品牌颜色、欢迎语、客服头像/名称和营业时间配置。对话历史保存在 localStorage 中,页面刷新不丢失上下文。气泡上的未读消息徽章和可选的通知提示音。后端无关——提供简单的 REST/WebSocket API 契约,可对接自有客服后端(Intercom、Zendesk 或自建)。
AI Hub
跑 Skill 需要模型接口?
AI Hub 提供 OpenAI 兼容接口,给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@growth_amy
许可证MIT
版本1.0.0
依赖0