实现 P0 自动分配、离线留言与可嵌入 Widget SDK
- 会话创建时按负载自动分配在线客服，无客服则进入离线模式 - 新增 /api/widget/leave-message 沉淀联系方式与留言事件 - 访客端离线留言表单；工作台展示离线留言/自动分配事件 - 提供 public/widget.js + /widget/embed 嵌入方案
This commit is contained in:
yml2213
@@ -68,7 +68,7 @@ func seed() {
|
||||
|
||||
// Channels for Tenant 1
|
||||
channels := []model.Channel{
|
||||
{TenantID: tenants[0].ID, Type: "web", Name: "网页聊天", Status: "enabled", ScriptCode: `<script src="https://cs.example.com/widget.js" data-id="WK_8a3f2e"></script>`},
|
||||
{TenantID: tenants[0].ID, Type: "web", Name: "网页聊天", Status: "enabled", ScriptCode: `<script src="/widget.js" data-id="WK_8a3f2e"></script>`},
|
||||
{TenantID: tenants[0].ID, Type: "wechat", Name: "微信公众号", Status: "enabled"},
|
||||
{TenantID: tenants[0].ID, Type: "app", Name: "APP内嵌", Status: "disabled"},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
package handler
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
|
||||
"kefu-sys/server/internal/model"
|
||||
"kefu-sys/server/internal/ws"
|
||||
)
|
||||
|
||||
const offlineLeavePrompt = "当前无客服在线，请留言并留下联系方式，我们上线后会尽快回复您。"
|
||||
|
||||
// pickLeastLoadedAgent 在在线一线客服中选择当前进行中会话最少的一位。
|
||||
func pickLeastLoadedAgent(tenantID uint) (*model.User, error) {
|
||||
var agents []model.User
|
||||
if err := model.DB.Where("tenant_id = ? AND role = ? AND status = ?", tenantID, "agent", "online").
|
||||
Order("id asc").Find(&agents).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
if len(agents) == 0 {
|
||||
return nil, nil
|
||||
}
|
||||
|
||||
best := &agents[0]
|
||||
bestCount := int64(-1)
|
||||
for i := range agents {
|
||||
var count int64
|
||||
if err := model.DB.Model(&model.Session{}).
|
||||
Where("tenant_id = ? AND agent_id = ? AND status = ?", tenantID, agents[i].ID, "active").
|
||||
Count(&count).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
if bestCount < 0 || count < bestCount {
|
||||
bestCount = count
|
||||
best = &agents[i]
|
||||
}
|
||||
}
|
||||
return best, nil
|
||||
}
|
||||
|
||||
// countOnlineAgents 统计租户当前可接待的在线客服数。
|
||||
func countOnlineAgents(tenantID uint) (int64, error) {
|
||||
var count int64
|
||||
err := model.DB.Model(&model.User{}).
|
||||
Where("tenant_id = ? AND role = ? AND status = ?", tenantID, "agent", "online").
|
||||
Count(&count).Error
|
||||
return count, err
|
||||
}
|
||||
|
||||
// tryAutoAssign 将会话自动分配给负载最低的在线客服；无可分配客服时返回 nil。
|
||||
func tryAutoAssign(session *model.Session) (*model.User, error) {
|
||||
if session == nil || session.ID == 0 {
|
||||
return nil, nil
|
||||
}
|
||||
if session.Status != "waiting" || session.AgentID != nil {
|
||||
return nil, nil
|
||||
}
|
||||
|
||||
agent, err := pickLeastLoadedAgent(session.TenantID)
|
||||
if err != nil || agent == nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
result := model.DB.Model(&model.Session{}).
|
||||
Where("id = ? AND tenant_id = ? AND status = ? AND agent_id IS NULL", session.ID, session.TenantID, "waiting").
|
||||
Updates(map[string]interface{}{
|
||||
"agent_id": agent.ID,
|
||||
"status": "active",
|
||||
"last_read_seq": 0,
|
||||
})
|
||||
if result.Error != nil {
|
||||
return nil, result.Error
|
||||
}
|
||||
if result.RowsAffected == 0 {
|
||||
// 并发下可能已被他人领取
|
||||
if err := model.DB.First(session, session.ID).Error; err != nil {
|
||||
return nil, err
|
||||
}
|
||||
return nil, nil
|
||||
}
|
||||
|
||||
session.AgentID = &agent.ID
|
||||
session.Status = "active"
|
||||
detail := fmt.Sprintf("系统自动分配给 %s", agent.Nickname)
|
||||
model.DB.Create(&model.SessionEvent{
|
||||
SessionID: session.ID,
|
||||
OperatorID: 0,
|
||||
Action: "auto_assign",
|
||||
Detail: detail,
|
||||
})
|
||||
|
||||
if payload, err := ws.NewEvent("session_updated", session.ID, session); err == nil {
|
||||
ws.DefaultHub.BroadcastToTenantStaff(session.TenantID, payload)
|
||||
ws.DefaultHub.BroadcastToVisitor(session.TenantID, session.ID, payload)
|
||||
}
|
||||
return agent, nil
|
||||
}
|
||||
@@ -25,6 +25,7 @@ func SetupRoutes(r *gin.Engine) {
|
||||
widgetApi.POST("/init", widget.Init)
|
||||
widgetApi.GET("/init", widget.Init)
|
||||
widgetApi.POST("/message", widget.SendMessage)
|
||||
widgetApi.POST("/leave-message", widget.LeaveMessage)
|
||||
widgetApi.GET("/messages", widget.GetMessages)
|
||||
widgetApi.GET("/ws", widget.Connect)
|
||||
widgetApi.POST("/rating", widget.SubmitRating)
|
||||
|
||||
@@ -438,3 +438,105 @@ func TestWorkbenchSessionLifecycleUnreadNotesTransferAndImage(t *testing.T) {
|
||||
t.Fatalf("会话领取/转接/已读状态错误: %+v", savedSession)
|
||||
}
|
||||
}
|
||||
|
||||
func TestWidgetAutoAssignAndOfflineLeave(t *testing.T) {
|
||||
router := setupRouter(t)
|
||||
tenant := createTenant(t, "自动分配租户", "normal")
|
||||
channel := model.Channel{
|
||||
TenantID: tenant.ID, Type: "web", Name: "网页", Status: "enabled",
|
||||
ScriptCode: `<script data-id="WK_auto_001"></script>`,
|
||||
}
|
||||
if err := model.DB.Create(&channel).Error; err != nil {
|
||||
t.Fatalf("创建渠道失败: %v", err)
|
||||
}
|
||||
|
||||
// 无在线客服 → 离线模式
|
||||
initRecorder := httptest.NewRecorder()
|
||||
initReq := httptest.NewRequest(http.MethodPost, "/api/widget/init", bytes.NewBufferString(`{"channel_key":"WK_auto_001","visitor_name":"离线访客"}`))
|
||||
initReq.Header.Set("Content-Type", "application/json")
|
||||
router.ServeHTTP(initRecorder, initReq)
|
||||
if initRecorder.Code != http.StatusOK {
|
||||
t.Fatalf("离线初始化失败: %s", initRecorder.Body.String())
|
||||
}
|
||||
var offlineInit struct {
|
||||
Data struct {
|
||||
SessionID uint `json:"session_id"`
|
||||
VisitorToken string `json:"visitor_token"`
|
||||
AgentsOnline bool `json:"agents_online"`
|
||||
OfflinePrompt string `json:"offline_prompt"`
|
||||
SessionStatus string `json:"session_status"`
|
||||
} `json:"data"`
|
||||
}
|
||||
if err := json.Unmarshal(initRecorder.Body.Bytes(), &offlineInit); err != nil {
|
||||
t.Fatalf("解析离线初始化失败: %v", err)
|
||||
}
|
||||
if offlineInit.Data.AgentsOnline || offlineInit.Data.OfflinePrompt == "" || offlineInit.Data.SessionStatus != "waiting" {
|
||||
t.Fatalf("期望离线等待会话: %+v", offlineInit.Data)
|
||||
}
|
||||
|
||||
leaveRecorder := httptest.NewRecorder()
|
||||
leaveBody := fmt.Sprintf(`{"session_id":%d,"content":"请回电处理订单问题","name":"张留言","phone":"13800138000","email":"leave@example.com"}`, offlineInit.Data.SessionID)
|
||||
leaveReq := httptest.NewRequest(http.MethodPost, "/api/widget/leave-message", bytes.NewBufferString(leaveBody))
|
||||
leaveReq.Header.Set("Content-Type", "application/json")
|
||||
leaveReq.Header.Set("X-Visitor-Token", offlineInit.Data.VisitorToken)
|
||||
router.ServeHTTP(leaveRecorder, leaveReq)
|
||||
if leaveRecorder.Code != http.StatusOK {
|
||||
t.Fatalf("离线留言失败: %s", leaveRecorder.Body.String())
|
||||
}
|
||||
var session model.Session
|
||||
if err := model.DB.First(&session, offlineInit.Data.SessionID).Error; err != nil {
|
||||
t.Fatalf("查询会话失败: %v", err)
|
||||
}
|
||||
var customer model.Customer
|
||||
if err := model.DB.First(&customer, session.CustomerID).Error; err != nil {
|
||||
t.Fatalf("查询客户失败: %v", err)
|
||||
}
|
||||
if customer.Phone != "13800138000" || customer.Email != "leave@example.com" || customer.Name != "张留言" {
|
||||
t.Fatalf("联系方式未沉淀: %+v", customer)
|
||||
}
|
||||
var msgCount int64
|
||||
model.DB.Model(&model.Message{}).Where("session_id = ?", session.ID).Count(&msgCount)
|
||||
if msgCount != 1 {
|
||||
t.Fatalf("留言消息数 = %d", msgCount)
|
||||
}
|
||||
var event model.SessionEvent
|
||||
if err := model.DB.Where("session_id = ? AND action = ?", session.ID, "offline_leave").First(&event).Error; err != nil {
|
||||
t.Fatalf("未记录离线留言事件: %v", err)
|
||||
}
|
||||
|
||||
// 有在线客服 → 自动分配
|
||||
agent := createUser(t, tenant.ID, "auto-agent-1", "agent")
|
||||
init2 := httptest.NewRecorder()
|
||||
init2Req := httptest.NewRequest(http.MethodPost, "/api/widget/init", bytes.NewBufferString(`{"channel_key":"WK_auto_001","visitor_name":"在线访客"}`))
|
||||
init2Req.Header.Set("Content-Type", "application/json")
|
||||
router.ServeHTTP(init2, init2Req)
|
||||
if init2.Code != http.StatusOK {
|
||||
t.Fatalf("在线初始化失败: %s", init2.Body.String())
|
||||
}
|
||||
var onlineInit struct {
|
||||
Data struct {
|
||||
SessionID uint `json:"session_id"`
|
||||
AgentsOnline bool `json:"agents_online"`
|
||||
SessionStatus string `json:"session_status"`
|
||||
AgentID uint `json:"agent_id"`
|
||||
AgentName string `json:"agent_name"`
|
||||
} `json:"data"`
|
||||
}
|
||||
if err := json.Unmarshal(init2.Body.Bytes(), &onlineInit); err != nil {
|
||||
t.Fatalf("解析在线初始化失败: %v", err)
|
||||
}
|
||||
if !onlineInit.Data.AgentsOnline || onlineInit.Data.SessionStatus != "active" || onlineInit.Data.AgentID != agent.ID {
|
||||
t.Fatalf("期望自动分配给在线客服: %+v agent=%d", onlineInit.Data, agent.ID)
|
||||
}
|
||||
var assigned model.Session
|
||||
if err := model.DB.First(&assigned, onlineInit.Data.SessionID).Error; err != nil {
|
||||
t.Fatalf("查询已分配会话失败: %v", err)
|
||||
}
|
||||
if assigned.AgentID == nil || *assigned.AgentID != agent.ID || assigned.Status != "active" {
|
||||
t.Fatalf("会话分配状态不正确: %+v", assigned)
|
||||
}
|
||||
var assignEvent model.SessionEvent
|
||||
if err := model.DB.Where("session_id = ? AND action = ?", assigned.ID, "auto_assign").First(&assignEvent).Error; err != nil {
|
||||
t.Fatalf("未记录自动分配事件: %v", err)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,18 @@ type WidgetRatingReq struct {
|
||||
VisitorToken string `json:"visitor_token"`
|
||||
}
|
||||
|
||||
type WidgetLeaveReq struct {
|
||||
SessionID uint `json:"session_id" binding:"required"`
|
||||
Content string `json:"content" binding:"required"`
|
||||
Name string `json:"name"`
|
||||
Phone string `json:"phone"`
|
||||
Email string `json:"email"`
|
||||
VisitorToken string `json:"visitor_token"`
|
||||
}
|
||||
|
||||
var channelKeyPattern = regexp.MustCompile(`^[A-Za-z0-9_-]{3,64}$`)
|
||||
var phonePattern = regexp.MustCompile(`^1[3-9]\d{9}$`)
|
||||
var emailPattern = regexp.MustCompile(`^[^\s@]+@[^\s@]+\.[^\s@]+$`)
|
||||
|
||||
func (h *WidgetHandler) Init(c *gin.Context) {
|
||||
var req WidgetInitReq
|
||||
@@ -68,7 +79,7 @@ func (h *WidgetHandler) Init(c *gin.Context) {
|
||||
return
|
||||
}
|
||||
|
||||
name := req.VisitorName
|
||||
name := strings.TrimSpace(req.VisitorName)
|
||||
if name == "" {
|
||||
name = "访客"
|
||||
}
|
||||
@@ -107,20 +118,45 @@ func (h *WidgetHandler) Init(c *gin.Context) {
|
||||
}
|
||||
model.DB.Model(&model.Customer{}).Where("id = ? AND tenant_id = ?", customer.ID, channel.TenantID).
|
||||
Updates(map[string]interface{}{"conversation_count": gorm.Expr("conversation_count + 1"), "last_contact_at": time.Now()})
|
||||
|
||||
onlineCount, err := countOnlineAgents(channel.TenantID)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 500, "message": "查询在线客服失败"})
|
||||
return
|
||||
}
|
||||
|
||||
var assignedAgent *model.User
|
||||
if onlineCount > 0 {
|
||||
assignedAgent, err = tryAutoAssign(&session)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 500, "message": "自动分配失败"})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if payload, err := ws.NewEvent("session_created", session.ID, session); err == nil {
|
||||
ws.DefaultHub.BroadcastToTenantStaff(session.TenantID, payload)
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"code": 0,
|
||||
"data": gin.H{
|
||||
agentsOnline := onlineCount > 0
|
||||
resp := gin.H{
|
||||
"session_id": session.ID,
|
||||
"customer_id": customer.ID,
|
||||
"channel_id": channel.ID,
|
||||
"tenant_id": channel.TenantID,
|
||||
"visitor_token": visitorToken,
|
||||
},
|
||||
})
|
||||
"agents_online": agentsOnline,
|
||||
"session_status": session.Status,
|
||||
}
|
||||
if !agentsOnline {
|
||||
resp["offline_prompt"] = offlineLeavePrompt
|
||||
}
|
||||
if assignedAgent != nil {
|
||||
resp["agent_id"] = assignedAgent.ID
|
||||
resp["agent_name"] = assignedAgent.Nickname
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"code": 0, "data": resp})
|
||||
}
|
||||
|
||||
func visitorTokenFromRequest(c *gin.Context, bodyToken string) string {
|
||||
@@ -182,6 +218,14 @@ func (h *WidgetHandler) SendMessage(c *gin.Context) {
|
||||
return
|
||||
}
|
||||
model.DB.Model(&model.Customer{}).Where("id = ? AND tenant_id = ?", session.CustomerID, session.TenantID).Update("last_contact_at", time.Now())
|
||||
|
||||
// 仍在排队时尝试自动分配（客服刚上线的场景）
|
||||
if session.Status == "waiting" && session.AgentID == nil {
|
||||
if _, err := tryAutoAssign(session); err == nil {
|
||||
_ = model.DB.First(session, session.ID)
|
||||
}
|
||||
}
|
||||
|
||||
if payload, err := ws.NewEvent("message", session.ID, msg); err == nil {
|
||||
if session.AgentID == nil {
|
||||
// 等待会话的消息要通知全部客服，便于任一在线客服及时领取。
|
||||
@@ -194,6 +238,123 @@ func (h *WidgetHandler) SendMessage(c *gin.Context) {
|
||||
c.JSON(http.StatusOK, gin.H{"code": 0, "data": msg})
|
||||
}
|
||||
|
||||
// LeaveMessage 无客服在线时提交留言并沉淀联系方式。
|
||||
func (h *WidgetHandler) LeaveMessage(c *gin.Context) {
|
||||
var req WidgetLeaveReq
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 400, "message": "参数错误"})
|
||||
return
|
||||
}
|
||||
content, err := validateMessageContent("text", req.Content)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 400, "message": err.Error()})
|
||||
return
|
||||
}
|
||||
name := strings.TrimSpace(req.Name)
|
||||
phone := strings.TrimSpace(req.Phone)
|
||||
email := strings.TrimSpace(req.Email)
|
||||
if phone == "" && email == "" {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 400, "message": "请至少填写手机号或邮箱，便于我们回复"})
|
||||
return
|
||||
}
|
||||
if phone != "" && !phonePattern.MatchString(phone) {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 400, "message": "手机号格式不正确"})
|
||||
return
|
||||
}
|
||||
if email != "" && !emailPattern.MatchString(email) {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 400, "message": "邮箱格式不正确"})
|
||||
return
|
||||
}
|
||||
if name != "" && (len([]rune(name)) < 2 || len([]rune(name)) > 50) {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 400, "message": "姓名需为 2 至 50 个字符"})
|
||||
return
|
||||
}
|
||||
|
||||
session, ok := loadVisitorSession(c, req.SessionID, visitorTokenFromRequest(c, req.VisitorToken))
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
if session.Status == "ended" || session.Status == "archived" {
|
||||
c.JSON(http.StatusConflict, gin.H{"code": 409, "message": "会话已结束，请重新发起咨询"})
|
||||
return
|
||||
}
|
||||
|
||||
// 若此刻已有客服在线，直接走自动分配，留言仍作为普通消息入库
|
||||
onlineCount, _ := countOnlineAgents(session.TenantID)
|
||||
if onlineCount > 0 && session.Status == "waiting" {
|
||||
if _, err := tryAutoAssign(session); err == nil {
|
||||
_ = model.DB.First(session, session.ID)
|
||||
}
|
||||
}
|
||||
|
||||
updates := map[string]interface{}{"last_contact_at": time.Now()}
|
||||
if name != "" {
|
||||
updates["name"] = name
|
||||
}
|
||||
if phone != "" {
|
||||
updates["phone"] = phone
|
||||
}
|
||||
if email != "" {
|
||||
updates["email"] = email
|
||||
}
|
||||
if err := model.DB.Model(&model.Customer{}).Where("id = ? AND tenant_id = ?", session.CustomerID, session.TenantID).
|
||||
Updates(updates).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 500, "message": "更新联系方式失败"})
|
||||
return
|
||||
}
|
||||
|
||||
custID := session.CustomerID
|
||||
msg := model.Message{
|
||||
SessionID: session.ID,
|
||||
SenderType: "visitor",
|
||||
SenderID: &custID,
|
||||
Content: content,
|
||||
Type: "text",
|
||||
SentAt: time.Now(),
|
||||
}
|
||||
if err := model.CreateMessage(&msg); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 500, "message": "留言失败"})
|
||||
return
|
||||
}
|
||||
|
||||
contactBits := make([]string, 0, 3)
|
||||
if name != "" {
|
||||
contactBits = append(contactBits, "姓名:"+name)
|
||||
}
|
||||
if phone != "" {
|
||||
contactBits = append(contactBits, "手机:"+phone)
|
||||
}
|
||||
if email != "" {
|
||||
contactBits = append(contactBits, "邮箱:"+email)
|
||||
}
|
||||
model.DB.Create(&model.SessionEvent{
|
||||
SessionID: session.ID,
|
||||
OperatorID: 0,
|
||||
Action: "offline_leave",
|
||||
Detail: "离线留言 · " + strings.Join(contactBits, " · "),
|
||||
})
|
||||
|
||||
if payload, err := ws.NewEvent("message", session.ID, msg); err == nil {
|
||||
if session.AgentID == nil {
|
||||
ws.DefaultHub.BroadcastToTenantStaff(session.TenantID, payload)
|
||||
} else {
|
||||
ws.DefaultHub.BroadcastToSession(session.TenantID, session.ID, session.AgentID, payload)
|
||||
}
|
||||
}
|
||||
if payload, err := ws.NewEvent("session_updated", session.ID, session); err == nil {
|
||||
ws.DefaultHub.BroadcastToTenantStaff(session.TenantID, payload)
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"code": 0,
|
||||
"data": gin.H{
|
||||
"message": msg,
|
||||
"session_status": session.Status,
|
||||
"agents_online": onlineCount > 0,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func visitorTokenFromWebSocket(c *gin.Context) string {
|
||||
protocols := strings.Split(c.GetHeader("Sec-WebSocket-Protocol"), ",")
|
||||
if len(protocols) == 2 && strings.TrimSpace(protocols[0]) == "kefu-visitor-v1" {
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* 客服云访客 Widget 嵌入脚本
|
||||
* 用法: <script src="https://your-host/widget.js" data-id="WK_xxxx"></script>
|
||||
*/
|
||||
(function () {
|
||||
if (window.__KEFU_WIDGET_LOADED__) return;
|
||||
window.__KEFU_WIDGET_LOADED__ = true;
|
||||
|
||||
var script = document.currentScript;
|
||||
if (!script) {
|
||||
var scripts = document.getElementsByTagName('script');
|
||||
script = scripts[scripts.length - 1];
|
||||
}
|
||||
var channelKey = (script && script.getAttribute('data-id')) || '';
|
||||
if (!channelKey) {
|
||||
console.warn('[kefu-widget] missing data-id on script tag');
|
||||
return;
|
||||
}
|
||||
|
||||
var src = script && script.src ? script.src : '';
|
||||
var base = '';
|
||||
try {
|
||||
var u = new URL(src, window.location.href);
|
||||
base = u.origin;
|
||||
} catch (e) {
|
||||
base = window.location.origin;
|
||||
}
|
||||
|
||||
var open = false;
|
||||
var iframe = null;
|
||||
|
||||
var btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.setAttribute('aria-label', '打开在线客服');
|
||||
btn.style.cssText = [
|
||||
'position:fixed', 'right:24px', 'bottom:24px', 'z-index:2147483000',
|
||||
'width:56px', 'height:56px', 'border:none', 'border-radius:9999px',
|
||||
'background:#2563eb', 'color:#fff', 'cursor:pointer',
|
||||
'box-shadow:0 8px 24px rgba(0,0,0,0.12)',
|
||||
'display:flex', 'align-items:center', 'justify-content:center',
|
||||
'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif',
|
||||
].join(';');
|
||||
btn.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
|
||||
|
||||
var panel = document.createElement('div');
|
||||
panel.style.cssText = [
|
||||
'position:fixed', 'right:24px', 'bottom:24px', 'z-index:2147483001',
|
||||
'width:400px', 'height:600px', 'max-width:calc(100vw - 32px)', 'max-height:calc(100vh - 32px)',
|
||||
'border-radius:12px', 'overflow:hidden',
|
||||
'box-shadow:0 8px 24px rgba(0,0,0,0.12)',
|
||||
'display:none', 'background:#fff',
|
||||
].join(';');
|
||||
|
||||
function ensureIframe() {
|
||||
if (iframe) return;
|
||||
iframe = document.createElement('iframe');
|
||||
iframe.title = '在线客服';
|
||||
iframe.allow = 'clipboard-write';
|
||||
iframe.style.cssText = 'width:100%;height:100%;border:0;display:block;background:#fff;';
|
||||
iframe.src = base + '/widget/embed?channel_key=' + encodeURIComponent(channelKey) + '&embedded=1';
|
||||
panel.appendChild(iframe);
|
||||
}
|
||||
|
||||
function setOpen(next) {
|
||||
open = next;
|
||||
if (open) {
|
||||
ensureIframe();
|
||||
panel.style.display = 'block';
|
||||
btn.style.display = 'none';
|
||||
} else {
|
||||
panel.style.display = 'none';
|
||||
btn.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function () { setOpen(true); });
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
if (!event || !event.data) return;
|
||||
if (event.data.type === 'kefu-widget-close' || event.data.type === 'kefu-widget-minimize') {
|
||||
setOpen(false);
|
||||
}
|
||||
});
|
||||
|
||||
function mount() {
|
||||
document.body.appendChild(btn);
|
||||
document.body.appendChild(panel);
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', mount);
|
||||
} else {
|
||||
mount();
|
||||
}
|
||||
|
||||
window.KefuWidget = {
|
||||
open: function () { setOpen(true); },
|
||||
close: function () { setOpen(false); },
|
||||
channelKey: channelKey,
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,23 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import VisitorChat from '@/widgets/VisitorChat'
|
||||
|
||||
/** 供 widget.js iframe 嵌入的无边框页面 */
|
||||
const WidgetEmbed = () => {
|
||||
const [params] = useSearchParams()
|
||||
const channelKey = useMemo(() => params.get('channel_key') || 'WK_8a3f2e', [params])
|
||||
const embedded = params.get('embedded') === '1'
|
||||
|
||||
return (
|
||||
<div className="h-screen w-screen overflow-hidden bg-transparent">
|
||||
<VisitorChat
|
||||
defaultOpen
|
||||
channelKey={channelKey}
|
||||
embedded={embedded}
|
||||
layout={embedded ? 'fill' : 'floating'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WidgetEmbed
|
||||
@@ -1,9 +1,10 @@
|
||||
import VisitorChat from '@/widgets/VisitorChat'
|
||||
|
||||
const WidgetPreview = () => {
|
||||
const origin = typeof window !== 'undefined' ? window.location.origin : 'https://your-host'
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-100 relative overflow-hidden">
|
||||
{/* 模拟宿主站点骨架，贴近设计稿模糊背景 */}
|
||||
<div className="max-w-[960px] mx-auto px-6 py-10 opacity-40 select-none pointer-events-none">
|
||||
<div className="h-10 w-3/5 bg-neutral-200 rounded mb-4" />
|
||||
<div className="h-4 w-[90%] bg-neutral-200 rounded mb-3" />
|
||||
@@ -15,16 +16,28 @@ const WidgetPreview = () => {
|
||||
</div>
|
||||
<div className="h-4 w-[85%] bg-neutral-200 rounded mb-3" />
|
||||
<div className="h-4 w-[70%] bg-neutral-200 rounded mb-3" />
|
||||
<div className="h-4 w-4/5 bg-neutral-200 rounded mb-6" />
|
||||
<div className="h-[200px] w-full bg-neutral-200 rounded-lg" />
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-16 pointer-events-none">
|
||||
<div className="text-center pointer-events-auto">
|
||||
<h1 className="text-xl font-semibold text-neutral-700 mb-1">访客 Widget 预览</h1>
|
||||
<p className="text-sm text-neutral-400">右下角为可嵌入聊天组件 · 消息会写入数据库</p>
|
||||
|
||||
<div className="absolute top-6 left-1/2 -translate-x-1/2 w-full max-w-xl px-4 pointer-events-auto">
|
||||
<div className="bg-white/95 backdrop-blur border border-neutral-200 rounded-xl shadow-sm p-4">
|
||||
<h1 className="text-base font-semibold text-neutral-800 m-0 mb-1">访客 Widget 预览</h1>
|
||||
<p className="text-xs text-neutral-500 m-0 mb-3">
|
||||
右下角为聊天组件。任意站点可嵌入下方脚本（iframe 版 SDK）。
|
||||
</p>
|
||||
<pre className="m-0 text-[11px] leading-relaxed bg-neutral-50 border border-neutral-100 rounded-lg p-3 overflow-x-auto text-neutral-700 whitespace-pre-wrap">
|
||||
{`<script src="${origin}/widget.js" data-id="WK_8a3f2e"></script>`}
|
||||
</pre>
|
||||
<p className="text-[11px] text-neutral-400 mt-2 mb-0">
|
||||
也可打开独立嵌入页：
|
||||
<a className="text-blue-600 ml-1" href="/widget/embed?channel_key=WK_8a3f2e&embedded=1" target="_blank" rel="noreferrer">
|
||||
/widget/embed
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<VisitorChat defaultOpen />
|
||||
|
||||
<VisitorChat defaultOpen channelKey="WK_8a3f2e" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -253,7 +253,7 @@ const Dashboard = () => {
|
||||
return tb - ta
|
||||
})
|
||||
|
||||
const notes = detail?.events.filter(event => event.action === 'note').slice().reverse() || []
|
||||
const notes = detail?.events.filter(event => event.action === 'note' || event.action === 'offline_leave' || event.action === 'auto_assign').slice().reverse() || []
|
||||
|
||||
const emitTyping = () => {
|
||||
if (!selectedId || !canOperate) return
|
||||
@@ -899,12 +899,25 @@ const Dashboard = () => {
|
||||
<div className="space-y-2 max-h-40 overflow-auto">
|
||||
{notes.length === 0 ? (
|
||||
<div className="text-xs text-neutral-400">暂无内部备注</div>
|
||||
) : notes.map(note => (
|
||||
<div key={note.id} className="bg-amber-50 text-amber-900 rounded-lg p-2 text-xs whitespace-pre-wrap border border-amber-100">
|
||||
) : notes.map(note => {
|
||||
const isLeave = note.action === 'offline_leave'
|
||||
const isAssign = note.action === 'auto_assign'
|
||||
const box = isLeave
|
||||
? 'bg-orange-50 text-orange-900 border-orange-100'
|
||||
: isAssign
|
||||
? 'bg-blue-50 text-blue-900 border-blue-100'
|
||||
: 'bg-amber-50 text-amber-900 border-amber-100'
|
||||
const timeCls = isLeave ? 'text-orange-600/70' : isAssign ? 'text-blue-600/70' : 'text-amber-600/70'
|
||||
return (
|
||||
<div key={note.id} className={`rounded-lg p-2 text-xs whitespace-pre-wrap border ${box}`}>
|
||||
{(isLeave || isAssign) && (
|
||||
<div className="font-medium mb-0.5">{isLeave ? '离线留言' : '自动分配'}</div>
|
||||
)}
|
||||
{note.detail}
|
||||
<div className="text-amber-600/70 mt-1">{new Date(note.created_at).toLocaleString('zh-CN')}</div>
|
||||
<div className={`mt-1 ${timeCls}`}>{new Date(note.created_at).toLocaleString('zh-CN')}</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{canOperate && (
|
||||
<div className="mt-2 flex gap-1">
|
||||
|
||||
@@ -17,6 +17,7 @@ const Tenants = lazy(() => import('@/pages/admin/Tenants'))
|
||||
const Plans = lazy(() => import('@/pages/admin/Plans'))
|
||||
const Ops = lazy(() => import('@/pages/admin/Ops'))
|
||||
const WidgetPreview = lazy(() => import('@/pages/WidgetPreview'))
|
||||
const WidgetEmbed = lazy(() => import('@/pages/WidgetEmbed'))
|
||||
|
||||
const loading = (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
@@ -31,6 +32,7 @@ function Lazy({ children }: { children: React.ReactNode }) {
|
||||
export const router = createBrowserRouter([
|
||||
{ path: '/login', element: <Lazy><Login /></Lazy> },
|
||||
{ path: '/widget/preview', element: <Lazy><WidgetPreview /></Lazy> },
|
||||
{ path: '/widget/embed', element: <Lazy><WidgetEmbed /></Lazy> },
|
||||
{
|
||||
path: '/',
|
||||
element: <RequireAuth />,
|
||||
|
||||
+216
-79
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
|
||||
import {
|
||||
CloseOutlined, MessageOutlined, SmileOutlined, SendOutlined,
|
||||
StarFilled, MinusOutlined, PictureOutlined, CustomerServiceOutlined,
|
||||
@@ -12,19 +12,36 @@ interface Message {
|
||||
type?: 'text' | 'image'
|
||||
}
|
||||
|
||||
const quickQuestions = ['查询订单状态', '退换货政策', '配送时效说明']
|
||||
const STORAGE_KEY = 'kefu_widget_session'
|
||||
const VISITOR_TOKEN_KEY = 'kefu_widget_visitor_token'
|
||||
const defaultQuickQuestions = ['查询订单状态', '退换货政策', '配送时效说明']
|
||||
|
||||
const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
const [open, setOpen] = useState(defaultOpen)
|
||||
type LayoutMode = 'floating' | 'fill'
|
||||
|
||||
interface VisitorChatProps {
|
||||
defaultOpen?: boolean
|
||||
channelKey?: string
|
||||
/** 是否在 iframe 嵌入模式（关闭/最小化会 postMessage 给宿主） */
|
||||
embedded?: boolean
|
||||
layout?: LayoutMode
|
||||
}
|
||||
|
||||
const VisitorChat = ({
|
||||
defaultOpen = false,
|
||||
channelKey = 'WK_8a3f2e',
|
||||
embedded = false,
|
||||
layout = 'floating',
|
||||
}: VisitorChatProps) => {
|
||||
const storageKey = useMemo(() => `kefu_widget_session_${channelKey}`, [channelKey])
|
||||
const tokenKey = useMemo(() => `kefu_widget_visitor_token_${channelKey}`, [channelKey])
|
||||
const msgsKey = useMemo(() => `${storageKey}_msgs`, [storageKey])
|
||||
|
||||
const [open, setOpen] = useState(defaultOpen || layout === 'fill')
|
||||
const [sessionId, setSessionId] = useState<number | null>(() => {
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
const saved = localStorage.getItem(storageKey)
|
||||
return saved ? Number(saved) : null
|
||||
})
|
||||
const [visitorToken, setVisitorToken] = useState<string>(() => localStorage.getItem(VISITOR_TOKEN_KEY) || '')
|
||||
const [visitorToken, setVisitorToken] = useState<string>(() => localStorage.getItem(tokenKey) || '')
|
||||
const [messages, setMessages] = useState<Message[]>(() => {
|
||||
const saved = localStorage.getItem(STORAGE_KEY + '_msgs')
|
||||
const saved = localStorage.getItem(msgsKey)
|
||||
return saved ? JSON.parse(saved) : []
|
||||
})
|
||||
const [input, setInput] = useState('')
|
||||
@@ -37,6 +54,13 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
const [hoverStar, setHoverStar] = useState(0)
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null)
|
||||
const [sendError, setSendError] = useState('')
|
||||
const [agentsOnline, setAgentsOnline] = useState(true)
|
||||
const [offlinePrompt, setOfflinePrompt] = useState('当前无客服在线，请留言并留下联系方式，我们上线后会尽快回复您。')
|
||||
const [agentName, setAgentName] = useState('')
|
||||
const [leaveName, setLeaveName] = useState('')
|
||||
const [leavePhone, setLeavePhone] = useState('')
|
||||
const [leaveEmail, setLeaveEmail] = useState('')
|
||||
const [leaveSent, setLeaveSent] = useState(false)
|
||||
const pollRef = useRef<number | null>(null)
|
||||
const initRef = useRef(false)
|
||||
const typingTimerRef = useRef<number | null>(null)
|
||||
@@ -47,7 +71,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
|
||||
const loadMessages = useCallback(async (sid?: number, token?: string) => {
|
||||
const s = sid || sessionId
|
||||
const visitorCredential = token || visitorToken || localStorage.getItem(VISITOR_TOKEN_KEY) || ''
|
||||
const visitorCredential = token || visitorToken || localStorage.getItem(tokenKey) || ''
|
||||
if (!s || !visitorCredential) return
|
||||
try {
|
||||
const res = await fetch(`/api/widget/messages?session_id=${s}`, {
|
||||
@@ -63,10 +87,10 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
time: new Date(m.sent_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||||
}))
|
||||
setMessages(msgs)
|
||||
localStorage.setItem(STORAGE_KEY + '_msgs', JSON.stringify(msgs))
|
||||
localStorage.setItem(msgsKey, JSON.stringify(msgs))
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}, [sessionId, visitorToken])
|
||||
}, [sessionId, visitorToken, tokenKey, msgsKey])
|
||||
|
||||
const initSession = useCallback(async () => {
|
||||
if (sessionId && visitorToken) {
|
||||
@@ -76,21 +100,31 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
if (initRef.current) return
|
||||
initRef.current = true
|
||||
try {
|
||||
const res = await fetch(`/api/widget/init?channel_key=WK_8a3f2e&visitor_name=客服云访客`, { method: 'POST' })
|
||||
const res = await fetch(`/api/widget/init?channel_key=${encodeURIComponent(channelKey)}&visitor_name=${encodeURIComponent('访客')}`, {
|
||||
method: 'POST',
|
||||
})
|
||||
const json = await res.json()
|
||||
if (json.code === 0) {
|
||||
const sid = json.data.session_id
|
||||
const token = json.data.visitor_token
|
||||
const data = json.data
|
||||
const sid = data.session_id
|
||||
const token = data.visitor_token
|
||||
setSessionId(sid)
|
||||
setVisitorToken(token)
|
||||
localStorage.setItem(STORAGE_KEY, String(sid))
|
||||
localStorage.setItem(VISITOR_TOKEN_KEY, token)
|
||||
setAgentsOnline(Boolean(data.agents_online))
|
||||
if (data.offline_prompt) setOfflinePrompt(data.offline_prompt)
|
||||
if (data.agent_name) setAgentName(data.agent_name)
|
||||
if (data.session_status === 'ended') setSessionEnded(true)
|
||||
localStorage.setItem(storageKey, String(sid))
|
||||
localStorage.setItem(tokenKey, token)
|
||||
await loadMessages(sid, token)
|
||||
} else {
|
||||
setSendError(json.message || '初始化会话失败')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Init failed:', e)
|
||||
setSendError('连接客服失败，请稍后重试')
|
||||
}
|
||||
}, [sessionId, visitorToken, loadMessages])
|
||||
}, [sessionId, visitorToken, loadMessages, channelKey, storageKey, tokenKey])
|
||||
|
||||
useEffect(() => {
|
||||
if (open) initSession()
|
||||
@@ -115,7 +149,6 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data)
|
||||
if (payload.session_id === sessionId && payload.type === 'typing') {
|
||||
// 仅展示客服侧输入状态
|
||||
if (payload.data?.from && payload.data.from !== 'agent') return
|
||||
setAgentTyping(true)
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
|
||||
@@ -123,10 +156,16 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
return
|
||||
}
|
||||
if (payload.session_id === sessionId && (payload.type === 'message' || payload.type === 'session_updated')) {
|
||||
if (payload.type === 'session_updated' && payload.data?.status === 'ended') {
|
||||
if (payload.type === 'session_updated') {
|
||||
if (payload.data?.status === 'ended') {
|
||||
setSessionEnded(true)
|
||||
setShowRating(true)
|
||||
}
|
||||
if (payload.data?.status === 'active') {
|
||||
setAgentsOnline(true)
|
||||
setAgentName(payload.data?.agent_name || agentName)
|
||||
}
|
||||
}
|
||||
setAgentTyping(false)
|
||||
loadMessages(sessionId, visitorToken)
|
||||
}
|
||||
@@ -139,14 +178,20 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
socketRef.current = null
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
|
||||
}
|
||||
}, [sessionId, visitorToken, open, loadMessages])
|
||||
}, [sessionId, visitorToken, open, loadMessages, agentName])
|
||||
|
||||
useEffect(() => {
|
||||
chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, [messages, agentTyping, open, imagePreview])
|
||||
|
||||
const notifyHost = (type: 'kefu-widget-close' | 'kefu-widget-minimize') => {
|
||||
if (embedded && window.parent && window.parent !== window) {
|
||||
window.parent.postMessage({ type }, '*')
|
||||
}
|
||||
}
|
||||
|
||||
const emitTyping = () => {
|
||||
if (!sessionId || sessionEnded) return
|
||||
if (!sessionId || sessionEnded || !agentsOnline) return
|
||||
const now = Date.now()
|
||||
if (now - lastTypingAt.current < 1200 || socketRef.current?.readyState !== WebSocket.OPEN) return
|
||||
lastTypingAt.current = now
|
||||
@@ -169,6 +214,10 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
|
||||
const sendMessage = async (text: string) => {
|
||||
if (!text.trim() || sending || sessionEnded) return
|
||||
if (!agentsOnline) {
|
||||
setSendError('当前无客服在线，请使用下方留言表单')
|
||||
return
|
||||
}
|
||||
const content = text.trim()
|
||||
setInput('')
|
||||
setSendError('')
|
||||
@@ -194,8 +243,42 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const submitLeaveMessage = async () => {
|
||||
if (!sessionId || !visitorToken || sending || leaveSent) return
|
||||
const content = input.trim() || '请尽快与我联系，谢谢。'
|
||||
if (!leavePhone.trim() && !leaveEmail.trim()) {
|
||||
setSendError('请至少填写手机号或邮箱')
|
||||
return
|
||||
}
|
||||
setSending(true)
|
||||
setSendError('')
|
||||
try {
|
||||
const res = await fetch('/api/widget/leave-message', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-Visitor-Token': visitorToken },
|
||||
body: JSON.stringify({
|
||||
session_id: sessionId,
|
||||
content,
|
||||
name: leaveName.trim(),
|
||||
phone: leavePhone.trim(),
|
||||
email: leaveEmail.trim(),
|
||||
}),
|
||||
})
|
||||
const json = await res.json()
|
||||
if (json.code !== 0) throw new Error(json.message || '留言失败')
|
||||
setLeaveSent(true)
|
||||
setInput('')
|
||||
if (json.data?.agents_online) setAgentsOnline(true)
|
||||
await loadMessages(sessionId, visitorToken)
|
||||
} catch (e) {
|
||||
setSendError(e instanceof Error ? e.message : '留言失败')
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleImageFile = (file?: File | null) => {
|
||||
if (!file || sessionEnded || !sessionId) return
|
||||
if (!file || sessionEnded || !sessionId || !agentsOnline) return
|
||||
if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
|
||||
setSendError('仅支持 jpg、png、gif 图片')
|
||||
return
|
||||
@@ -211,7 +294,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
}
|
||||
|
||||
const sendImage = async () => {
|
||||
if (!imagePreview || sending || sessionEnded) return
|
||||
if (!imagePreview || sending || sessionEnded || !agentsOnline) return
|
||||
setSending(true)
|
||||
setSendError('')
|
||||
const localMsg: Message = {
|
||||
@@ -241,11 +324,13 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false)
|
||||
notifyHost('kefu-widget-close')
|
||||
if (sessionEnded && !rated) setShowRating(true)
|
||||
}
|
||||
|
||||
const handleMinimize = () => {
|
||||
setOpen(false)
|
||||
notifyHost('kefu-widget-minimize')
|
||||
}
|
||||
|
||||
const submitRating = async (score: number) => {
|
||||
@@ -266,28 +351,15 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const showWelcome = messages.length === 0
|
||||
const showQuick = messages.length <= 1 && !sessionEnded
|
||||
const showWelcome = messages.length === 0 && !leaveSent
|
||||
const showQuick = messages.length <= 1 && !sessionEnded && agentsOnline
|
||||
const isFill = layout === 'fill'
|
||||
const shellClass = isFill
|
||||
? 'relative w-full h-full flex flex-col bg-white overflow-hidden'
|
||||
: 'fixed z-50 right-6 bottom-6 w-[400px] h-[600px] max-w-[calc(100vw-32px)] max-h-[calc(100vh-32px)] flex flex-col rounded-xl overflow-hidden bg-white'
|
||||
|
||||
return (
|
||||
<>
|
||||
{!open && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpen}
|
||||
className="fixed right-6 bottom-6 w-14 h-14 rounded-full bg-[#2563eb] hover:bg-[#1d4ed8] text-white flex items-center justify-center z-50 transition-transform hover:scale-105"
|
||||
style={{ boxShadow: 'var(--shadow-floating)' }}
|
||||
aria-label="打开在线客服"
|
||||
>
|
||||
<MessageOutlined className="text-xl" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{open && (
|
||||
<div
|
||||
className="fixed z-50 right-6 bottom-6 w-[400px] h-[600px] max-w-[calc(100vw-32px)] max-h-[calc(100vh-32px)] flex flex-col rounded-xl overflow-hidden bg-white"
|
||||
style={{ boxShadow: 'var(--shadow-floating)' }}
|
||||
>
|
||||
const panel = open && (
|
||||
<div className={shellClass} style={isFill ? undefined : { boxShadow: 'var(--shadow-floating)' }}>
|
||||
<header className="shrink-0 px-4 py-4 bg-[#2563eb] text-white flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center shrink-0">
|
||||
<CustomerServiceOutlined className="text-lg text-white" />
|
||||
@@ -295,11 +367,19 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="m-0 text-[15px] font-semibold leading-tight text-white">在线客服</h1>
|
||||
<p className="m-0 text-xs leading-normal text-white/80 flex items-center gap-1 mt-0.5">
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-[#16a34a]" />
|
||||
{sessionEnded ? '会话已结束' : '正在为您服务'}
|
||||
<span
|
||||
className="inline-block w-1.5 h-1.5 rounded-full"
|
||||
style={{ background: sessionEnded ? '#94a3b8' : agentsOnline ? '#16a34a' : '#d97706' }}
|
||||
/>
|
||||
{sessionEnded
|
||||
? '会话已结束'
|
||||
: agentsOnline
|
||||
? (agentName ? `${agentName} 为您服务` : '正在为您服务')
|
||||
: '客服离线 · 可留言'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{!isFill && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleMinimize}
|
||||
@@ -308,6 +388,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
>
|
||||
<MinusOutlined className="text-xs" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
@@ -324,7 +405,9 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="px-4 py-2 rounded-xl bg-white border border-neutral-200 max-w-[85%] text-center">
|
||||
<p className="m-0 text-[13px] text-neutral-600 leading-normal">
|
||||
您好！欢迎咨询，请问有什么可以帮您？
|
||||
{agentsOnline
|
||||
? '您好！欢迎咨询，请问有什么可以帮您？'
|
||||
: offlinePrompt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -332,7 +415,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
|
||||
{showQuick && (
|
||||
<div className="flex flex-wrap gap-2 justify-center">
|
||||
{quickQuestions.map((q, i) => (
|
||||
{defaultQuickQuestions.map((q, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
@@ -396,30 +479,50 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
className="absolute top-0 left-0 right-0 h-[3px] pointer-events-none opacity-40"
|
||||
style={{ background: 'linear-gradient(90deg, transparent 0%, #2563eb 50%, transparent 100%)' }}
|
||||
/>
|
||||
{sendError && (
|
||||
<div className="mb-2 text-xs text-red-500">{sendError}</div>
|
||||
{sendError && <div className="mb-2 text-xs text-red-500">{sendError}</div>}
|
||||
|
||||
{!agentsOnline && !sessionEnded && (
|
||||
<div className="mb-3 p-3 rounded-lg border border-amber-100 bg-amber-50 space-y-2">
|
||||
{leaveSent ? (
|
||||
<div className="text-xs text-amber-800 leading-relaxed">
|
||||
留言已提交，客服上线后会尽快联系您。您也可继续补充留言内容。
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-xs text-amber-800 font-medium">离线留言</div>
|
||||
<input
|
||||
className="w-full h-8 px-2 rounded-md border border-neutral-200 bg-white text-xs outline-none"
|
||||
placeholder="您的姓名（可选）"
|
||||
value={leaveName}
|
||||
onChange={e => setLeaveName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="w-full h-8 px-2 rounded-md border border-neutral-200 bg-white text-xs outline-none"
|
||||
placeholder="手机号"
|
||||
value={leavePhone}
|
||||
onChange={e => setLeavePhone(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="w-full h-8 px-2 rounded-md border border-neutral-200 bg-white text-xs outline-none"
|
||||
placeholder="邮箱"
|
||||
value={leaveEmail}
|
||||
onChange={e => setLeaveEmail(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{imagePreview && (
|
||||
</div>
|
||||
)}
|
||||
|
||||
{imagePreview && agentsOnline && (
|
||||
<div className="mb-2 p-2 rounded-lg border border-neutral-200 bg-neutral-50 flex items-center gap-2">
|
||||
<img src={imagePreview} alt="预览" className="w-14 h-14 object-cover rounded" />
|
||||
<div className="flex-1 min-w-0 text-xs text-neutral-500">确认发送图片？</div>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-neutral-400 hover:text-neutral-600 border-0 bg-transparent cursor-pointer"
|
||||
onClick={() => setImagePreview(null)}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={sending}
|
||||
className="text-xs px-2 py-1 rounded-md bg-[#2563eb] text-white border-0 cursor-pointer disabled:opacity-50"
|
||||
onClick={sendImage}
|
||||
>
|
||||
发送
|
||||
</button>
|
||||
<button type="button" className="text-xs text-neutral-400 border-0 bg-transparent cursor-pointer" onClick={() => setImagePreview(null)}>取消</button>
|
||||
<button type="button" disabled={sending} className="text-xs px-2 py-1 rounded-md bg-[#2563eb] text-white border-0 cursor-pointer disabled:opacity-50" onClick={sendImage}>发送</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{agentsOnline && (
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
@@ -430,11 +533,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
>
|
||||
<PictureOutlined className="text-base" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-8 h-8 rounded-md border-0 bg-transparent cursor-pointer flex items-center justify-center text-neutral-400 hover:bg-neutral-50"
|
||||
aria-label="表情"
|
||||
>
|
||||
<button type="button" className="w-8 h-8 rounded-md border-0 bg-transparent cursor-pointer flex items-center justify-center text-neutral-400 hover:bg-neutral-50" aria-label="表情">
|
||||
<SmileOutlined className="text-base" />
|
||||
</button>
|
||||
<input
|
||||
@@ -442,28 +541,41 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif"
|
||||
className="hidden"
|
||||
onChange={e => {
|
||||
handleImageFile(e.target.files?.[0])
|
||||
e.currentTarget.value = ''
|
||||
}}
|
||||
onChange={e => { handleImageFile(e.target.files?.[0]); e.currentTarget.value = '' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className="flex-1 min-w-0 h-10 px-3 rounded-xl border border-neutral-200 bg-neutral-50 text-[13px] text-neutral-800 outline-none focus:border-[#2563eb]"
|
||||
placeholder={sessionEnded ? '会话已结束' : sessionId ? '输入消息...' : '正在连接...'}
|
||||
placeholder={
|
||||
sessionEnded
|
||||
? '会话已结束'
|
||||
: !sessionId
|
||||
? '正在连接...'
|
||||
: agentsOnline
|
||||
? '输入消息...'
|
||||
: '描述您的问题（留言）'
|
||||
}
|
||||
value={input}
|
||||
onChange={e => { setInput(e.target.value); emitTyping() }}
|
||||
onChange={e => { setInput(e.target.value); if (agentsOnline) emitTyping() }}
|
||||
onPaste={e => {
|
||||
if (!agentsOnline) return
|
||||
const item = Array.from(e.clipboardData.items).find(i => i.type.startsWith('image/'))
|
||||
if (item) {
|
||||
e.preventDefault()
|
||||
handleImageFile(item.getAsFile())
|
||||
}
|
||||
}}
|
||||
onKeyDown={e => { if (e.key === 'Enter') sendMessage(input) }}
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') {
|
||||
if (agentsOnline) sendMessage(input)
|
||||
}
|
||||
}}
|
||||
disabled={sending || !sessionId || sessionEnded}
|
||||
/>
|
||||
{agentsOnline ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => sendMessage(input)}
|
||||
@@ -473,6 +585,16 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
>
|
||||
<SendOutlined className="text-white text-sm" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={submitLeaveMessage}
|
||||
disabled={sending || !sessionId || sessionEnded}
|
||||
className="h-10 px-3 rounded-full border-0 bg-[#d97706] hover:bg-[#b45309] disabled:opacity-40 cursor-pointer text-white text-xs shrink-0"
|
||||
>
|
||||
{leaveSent ? '再留言' : '提交留言'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -508,7 +630,22 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
{!open && layout === 'floating' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpen}
|
||||
className="fixed right-6 bottom-6 w-14 h-14 rounded-full bg-[#2563eb] hover:bg-[#1d4ed8] text-white flex items-center justify-center z-50 transition-transform hover:scale-105"
|
||||
style={{ boxShadow: 'var(--shadow-floating)' }}
|
||||
aria-label="打开在线客服"
|
||||
>
|
||||
<MessageOutlined className="text-xl" />
|
||||
</button>
|
||||
)}
|
||||
{panel}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user