完成客服工作台闭环
This commit is contained in:
yml2213
+299
-209
@@ -1,68 +1,110 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { Input, Spin, message as antMsg } from 'antd'
|
||||
import { SearchOutlined, StarFilled } from '@ant-design/icons'
|
||||
import { Button, Dropdown, Input, Modal, Select, Spin, Tooltip, message as antMsg } from 'antd'
|
||||
import {
|
||||
CheckCircleOutlined, FileTextOutlined, FlagOutlined, PaperClipOutlined,
|
||||
SearchOutlined, SendOutlined, StarFilled, SwapOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { useAuth } from '@/stores/auth'
|
||||
import { endSession, getSessions, getSession, getCustomers, type Session as SessionType, type Customer } from '@/services/api'
|
||||
import {
|
||||
addSessionNote, claimSession, endSession, getAvailableAgents, getCustomers, getKnowledgeEntries,
|
||||
getSession, getSessions, markSessionRead, sendSessionMessage, transferSession, updateSessionPriority,
|
||||
type AvailableAgent, type Customer, type KnowledgeEntry, type Message, type Session, type SessionEvent,
|
||||
} from '@/services/api'
|
||||
|
||||
const priorityColors: Record<string, string> = { urgent: '#dc2626', normal: '#d97706', waiting: '#d97706' }
|
||||
const priorityLabels: Record<string, string> = { urgent: '紧急', waiting: '等待中', active: '进行中', normal: '进行中' }
|
||||
const priorityColors: Record<string, string> = { urgent: '#dc2626', normal: '#2563eb' }
|
||||
const priorityLabels: Record<string, string> = { urgent: '紧急', normal: '普通' }
|
||||
const statusLabels: Record<string, string> = { active: '进行中', waiting: '等待中', ended: '已结束' }
|
||||
const endReasons = [
|
||||
{ value: 'resolved', label: '已解决' },
|
||||
{ value: 'no_response', label: '无人回复' },
|
||||
{ value: 'visitor_left', label: '访客离开' },
|
||||
{ value: 'transferred', label: '已转接' },
|
||||
{ value: 'other', label: '其他' },
|
||||
]
|
||||
const quickReplies = [
|
||||
'您好，正在为您查询，请稍候。',
|
||||
'感谢您的耐心等待，还有什么可以帮您？',
|
||||
'为更快处理，请您提供订单号或截图。',
|
||||
]
|
||||
|
||||
interface SessionDetail {
|
||||
messages: Message[]
|
||||
events: SessionEvent[]
|
||||
pendingCount: number
|
||||
}
|
||||
|
||||
const Dashboard = () => {
|
||||
const { user } = useAuth()
|
||||
const [sessions, setSessions] = useState<SessionType[]>([])
|
||||
const [sessions, setSessions] = useState<Session[]>([])
|
||||
const [customers, setCustomers] = useState<Record<number, Customer>>({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null)
|
||||
const [detail, setDetail] = useState<{ messages: { sender: string; content: string; time: string }[] } | null>(null)
|
||||
const [detail, setDetail] = useState<SessionDetail | null>(null)
|
||||
const [detailLoading, setDetailLoading] = useState(false)
|
||||
const [messageInput, setMessageInput] = useState('')
|
||||
const [search, setSearch] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
const [transferOpen, setTransferOpen] = useState(false)
|
||||
const [availableAgents, setAvailableAgents] = useState<AvailableAgent[]>([])
|
||||
const [targetAgentID, setTargetAgentID] = useState<number>()
|
||||
const [endingOpen, setEndingOpen] = useState(false)
|
||||
const [endReason, setEndReason] = useState('resolved')
|
||||
const [knowledgeOpen, setKnowledgeOpen] = useState(false)
|
||||
const [knowledgeKeyword, setKnowledgeKeyword] = useState('')
|
||||
const [knowledgeEntries, setKnowledgeEntries] = useState<KnowledgeEntry[]>([])
|
||||
const [knowledgeLoading, setKnowledgeLoading] = useState(false)
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null)
|
||||
const [noteInput, setNoteInput] = useState('')
|
||||
const [savingNote, setSavingNote] = useState(false)
|
||||
const initialLoad = useRef(true)
|
||||
const chatEndRef = useRef<HTMLDivElement>(null)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const socketRef = useRef<WebSocket | null>(null)
|
||||
const lastTypingAt = useRef(0)
|
||||
|
||||
const isManager = user?.role === 'admin' || user?.role === 'supervisor'
|
||||
|
||||
const loadAll = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [sRes, cRes] = await Promise.all([
|
||||
getSessions(),
|
||||
getCustomers({ page: 1 }),
|
||||
const [sessionRes, customerRes] = await Promise.all([
|
||||
getSessions({ page: 1, pageSize: 100 }),
|
||||
getCustomers({ page: 1, pageSize: 100 }),
|
||||
])
|
||||
const sessionList = Array.isArray(sRes.list) ? sRes.list : []
|
||||
const customerList = Array.isArray(cRes.list) ? cRes.list : []
|
||||
setSessions(sessionList)
|
||||
const map: Record<number, Customer> = {}
|
||||
customerList.forEach(c => { map[c.id] = c })
|
||||
setCustomers(map)
|
||||
const sessionList = Array.isArray(sessionRes.list) ? sessionRes.list : []
|
||||
const customerList = Array.isArray(customerRes.list) ? customerRes.list : []
|
||||
setSessions(sessionList)
|
||||
setCustomers(Object.fromEntries(customerList.map(customer => [customer.id, customer])))
|
||||
if (sessionList.length > 0 && initialLoad.current) {
|
||||
setSelectedId(sessionList[0].id)
|
||||
const preferred = sessionList.find(session => session.status === 'active') || sessionList[0]
|
||||
setSelectedId(preferred.id)
|
||||
initialLoad.current = false
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载失败:', err)
|
||||
} catch {
|
||||
antMsg.error('加载会话失败')
|
||||
setSessions([])
|
||||
setCustomers({})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const loadDetail = useCallback(async (id: number) => {
|
||||
const loadDetail = useCallback(async (id: number, markRead = true) => {
|
||||
setDetailLoading(true)
|
||||
try {
|
||||
const res = await getSession(id)
|
||||
const msgs: any = res.data as any
|
||||
setDetail({
|
||||
messages: (msgs.messages || []).map((m: any) => ({
|
||||
sender: m.sender_type === 'agent' ? '客服' : '访客',
|
||||
content: m.content,
|
||||
time: new Date(m.sent_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||||
})),
|
||||
})
|
||||
const response = await getSession(id)
|
||||
const data = response.data
|
||||
setDetail({ messages: data.messages || [], events: data.events || [], pendingCount: data.pending_count || 0 })
|
||||
if (markRead) {
|
||||
await markSessionRead(id)
|
||||
setSessions(previous => previous.map(session => session.id === id ? { ...session, unread_count: 0 } : session))
|
||||
}
|
||||
} catch {
|
||||
antMsg.error('加载消息失败')
|
||||
} finally {
|
||||
setDetailLoading(false)
|
||||
}
|
||||
setTimeout(() => chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 200)
|
||||
setTimeout(() => chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 80)
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadAll() }, [loadAll])
|
||||
@@ -71,221 +113,269 @@ const Dashboard = () => {
|
||||
if (!user?.token) return
|
||||
const scheme = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
||||
const socket = new WebSocket(`${scheme}//${window.location.host}/api/ws`, ['kefu-v1', user.token])
|
||||
socket.onmessage = (event) => {
|
||||
socketRef.current = socket
|
||||
socket.onmessage = event => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data)
|
||||
if (payload.type === 'message' && payload.session_id === selectedId) {
|
||||
loadDetail(payload.session_id)
|
||||
}
|
||||
if (payload.type === 'session_created' || payload.type === 'session_updated') {
|
||||
if (payload.type === 'message' || payload.type === 'session_created' || payload.type === 'session_updated') {
|
||||
loadAll()
|
||||
}
|
||||
} catch {
|
||||
// 忽略格式错误的实时消息
|
||||
}
|
||||
}
|
||||
return () => socket.close()
|
||||
return () => {
|
||||
socket.close()
|
||||
socketRef.current = null
|
||||
}
|
||||
}, [user?.token, selectedId, loadAll, loadDetail])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) loadDetail(selectedId)
|
||||
}, [selectedId, loadDetail])
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!messageInput.trim() || !selectedId || sending) return
|
||||
const text = messageInput.trim()
|
||||
setMessageInput('')
|
||||
useEffect(() => {
|
||||
if (!knowledgeOpen) return
|
||||
setKnowledgeLoading(true)
|
||||
getKnowledgeEntries({ search: knowledgeKeyword, page: 1 }).then(response => {
|
||||
setKnowledgeEntries(Array.isArray(response.list) ? response.list : [])
|
||||
}).catch(() => setKnowledgeEntries([])).finally(() => setKnowledgeLoading(false))
|
||||
}, [knowledgeOpen, knowledgeKeyword])
|
||||
|
||||
const selected = sessions.find(session => session.id === selectedId)
|
||||
const selectedCustomer = selected ? customers[selected.customer_id] : null
|
||||
const canOperate = Boolean(selected && (isManager || selected.agent_id === user?.user_id) && selected.status === 'active')
|
||||
const filteredSessions = sessions.filter(session => {
|
||||
if (session.status === 'ended') return false
|
||||
const customer = customers[session.customer_id]
|
||||
const keyword = search.trim().toLowerCase()
|
||||
return !keyword || customer?.name.toLowerCase().includes(keyword) || String(session.id).includes(keyword)
|
||||
})
|
||||
const urgentSessions = filteredSessions.filter(session => session.priority === 'urgent')
|
||||
const waitingSessions = filteredSessions.filter(session => session.status === 'waiting' && session.priority !== 'urgent')
|
||||
const activeSessions = filteredSessions.filter(session => session.status === 'active' && session.priority !== 'urgent')
|
||||
const notes = detail?.events.filter(event => event.action === 'note').slice().reverse() || []
|
||||
|
||||
const emitTyping = () => {
|
||||
if (!selectedId || !canOperate) return
|
||||
const now = Date.now()
|
||||
if (now - lastTypingAt.current < 1200 || socketRef.current?.readyState !== WebSocket.OPEN) return
|
||||
lastTypingAt.current = now
|
||||
socketRef.current.send(JSON.stringify({ type: 'typing', session_id: selectedId }))
|
||||
}
|
||||
|
||||
const sendMessage = async (content: string, type: 'text' | 'image' = 'text') => {
|
||||
if (!selectedId || !canOperate || sending || (type === 'text' && !content.trim())) return
|
||||
setSending(true)
|
||||
try {
|
||||
const token = localStorage.getItem('auth_user')
|
||||
const t = token ? JSON.parse(token).token : ''
|
||||
const res = await fetch(`/api/sessions/${selectedId}/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${t}` },
|
||||
body: JSON.stringify({ content: text, type: 'text' }),
|
||||
})
|
||||
const json = await res.json()
|
||||
if (json.code === 0) {
|
||||
// 本地立即显示
|
||||
setDetail(prev => prev ? {
|
||||
messages: [...prev.messages, {
|
||||
sender: '客服',
|
||||
content: text,
|
||||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||||
}],
|
||||
} : prev)
|
||||
setTimeout(() => chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 100)
|
||||
} else {
|
||||
antMsg.error(json.message || '发送失败')
|
||||
}
|
||||
} catch {
|
||||
antMsg.error('发送失败')
|
||||
await sendSessionMessage(selectedId, content, type)
|
||||
if (type === 'text') setMessageInput('')
|
||||
await loadDetail(selectedId)
|
||||
await loadAll()
|
||||
} catch (error) {
|
||||
antMsg.error(error instanceof Error ? error.message : '发送失败')
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEnd = async () => {
|
||||
if (!selectedId || sending) return
|
||||
const handleImage = (file?: File) => {
|
||||
if (!file) return
|
||||
if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
|
||||
antMsg.error('仅支持 jpg、png、gif 图片')
|
||||
return
|
||||
}
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
antMsg.error('图片不能超过 5 MB')
|
||||
return
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => setImagePreview(String(reader.result))
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
const handleClaim = async (sessionID: number) => {
|
||||
try {
|
||||
await endSession(selectedId, 'resolved')
|
||||
antMsg.success('会话已结束')
|
||||
await claimSession(sessionID)
|
||||
antMsg.success('已领取会话')
|
||||
setSelectedId(sessionID)
|
||||
await loadAll()
|
||||
await loadDetail(selectedId)
|
||||
} catch {
|
||||
antMsg.error('结束会话失败')
|
||||
} catch (error) {
|
||||
antMsg.error(error instanceof Error ? error.message : '领取失败')
|
||||
}
|
||||
}
|
||||
|
||||
const selected = sessions.find(s => s.id === selectedId)
|
||||
const selectedCustomer = selected ? customers[selected.customer_id] : null
|
||||
|
||||
if (loading) {
|
||||
return <div className="h-full flex items-center justify-center"><Spin size="large" /></div>
|
||||
const openTransfer = async () => {
|
||||
if (!selected) return
|
||||
try {
|
||||
const response = await getAvailableAgents()
|
||||
setAvailableAgents((response.data || []).filter(agent => agent.id !== user?.user_id))
|
||||
setTargetAgentID(undefined)
|
||||
setTransferOpen(true)
|
||||
} catch {
|
||||
antMsg.error('加载在线客服失败')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex">
|
||||
{/* 左侧：会话列表 */}
|
||||
<div className="w-[300px] flex-shrink-0 border-r border-neutral-200 bg-white flex flex-col">
|
||||
<div className="px-3 py-3 border-b border-neutral-100">
|
||||
<div className="text-sm font-medium text-neutral-800">{user?.nickname || '客服'}</div>
|
||||
<div className="text-xs text-neutral-400">在线</div>
|
||||
</div>
|
||||
<div className="p-3 border-b border-neutral-100">
|
||||
<Input prefix={<SearchOutlined />} placeholder="搜索会话..." variant="borderless" size="small" />
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{sessions.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-neutral-400 text-sm">暂无会话</div>
|
||||
) : (
|
||||
sessions.map(s => {
|
||||
const c = customers[s.customer_id]
|
||||
return (
|
||||
<div key={s.id}
|
||||
className={`px-3 py-2.5 cursor-pointer border-b border-neutral-50 hover:bg-neutral-50 transition-colors ${selectedId === s.id ? 'bg-blue-50' : ''}`}
|
||||
onClick={() => setSelectedId(s.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-block w-2 h-2 rounded-full" style={{ backgroundColor: priorityColors[s.priority] || '#2563eb' }} />
|
||||
<span className="text-sm font-medium text-neutral-800">{c ? c.name : `客户${s.customer_id}`}</span>
|
||||
</div>
|
||||
<span className="text-xs text-neutral-300">{new Date(s.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-1 pl-4">
|
||||
<span className="text-xs text-neutral-400">{statusLabels[s.status] || s.status}</span>
|
||||
{s.satisfaction_score && <span className="text-xs text-yellow-500">{'★'.repeat(s.satisfaction_score)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
const handleTransfer = async () => {
|
||||
if (!selected || !targetAgentID) return
|
||||
try {
|
||||
await transferSession(selected.id, targetAgentID)
|
||||
antMsg.success('会话已转接')
|
||||
setTransferOpen(false)
|
||||
setSelectedId(null)
|
||||
setDetail(null)
|
||||
await loadAll()
|
||||
} catch (error) {
|
||||
antMsg.error(error instanceof Error ? error.message : '转接失败')
|
||||
}
|
||||
}
|
||||
|
||||
{/* 中间：聊天区 */}
|
||||
<div className="flex-1 flex flex-col min-w-0 bg-white">
|
||||
{selected && selectedCustomer ? (
|
||||
<>
|
||||
<div className="h-12 px-4 flex items-center justify-between border-b border-neutral-100 flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-neutral-800">{selectedCustomer.name}</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${selected.priority === 'urgent' ? 'text-red-600 bg-red-50' : 'text-blue-600 bg-blue-50'}`}>
|
||||
{priorityLabels[selected.priority] || selected.priority}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-400">{statusLabels[selected.status]}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<span className="text-xs text-neutral-400 cursor-not-allowed">转接</span>
|
||||
<span className="text-xs text-neutral-400 cursor-pointer hover:text-red-500" onClick={handleEnd}>结束</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto p-4 flex flex-col gap-3">
|
||||
{detailLoading ? (
|
||||
<div className="flex-1 flex items-center justify-center"><Spin /></div>
|
||||
) : detail && detail.messages.length > 0 ? (
|
||||
detail.messages.map((msg, i) => (
|
||||
<div key={i} className={`flex ${msg.sender === '客服' ? 'justify-start' : 'justify-end'}`}>
|
||||
<div className={`max-w-[65%] rounded-lg px-3 py-2 text-sm ${msg.sender === '客服' ? 'bg-neutral-100 text-neutral-700' : 'bg-blue-500 text-white'}`}>
|
||||
{msg.content}
|
||||
<div className={`text-xs mt-1 ${msg.sender === '客服' ? 'text-neutral-400' : 'text-white/60'}`}>{msg.time}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center text-neutral-400 text-sm">暂无消息，开始对话吧</div>
|
||||
)}
|
||||
<div ref={chatEndRef} />
|
||||
</div>
|
||||
<div className="p-3 border-t border-neutral-100 flex-shrink-0">
|
||||
<div className="flex items-center gap-2 bg-neutral-50 rounded-lg px-3 py-2">
|
||||
<input
|
||||
className="flex-1 bg-transparent outline-none text-sm text-neutral-700 placeholder:text-neutral-400"
|
||||
placeholder="输入消息... (Enter 发送)"
|
||||
value={messageInput}
|
||||
onChange={e => setMessageInput(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter' && !sending) handleSend() }}
|
||||
disabled={sending}
|
||||
/>
|
||||
{sending && <Spin size="small" />}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center text-neutral-400">选择一个会话</div>
|
||||
)}
|
||||
</div>
|
||||
const handlePriority = async (priority: 'normal' | 'urgent') => {
|
||||
if (!selected) return
|
||||
try {
|
||||
await updateSessionPriority(selected.id, priority)
|
||||
antMsg.success('优先级已更新')
|
||||
await loadAll()
|
||||
} catch (error) {
|
||||
antMsg.error(error instanceof Error ? error.message : '更新失败')
|
||||
}
|
||||
}
|
||||
|
||||
{/* 右侧：客户信息面板 */}
|
||||
<div className="w-[300px] flex-shrink-0 border-l border-neutral-200 bg-white overflow-auto">
|
||||
{selectedCustomer ? (
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="flex items-center gap-3 pb-3 border-b border-neutral-100">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 font-semibold">
|
||||
{selectedCustomer.name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-neutral-800">{selectedCustomer.name}</div>
|
||||
<div className="text-xs text-neutral-400">{selectedCustomer.source || '未知渠道'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-neutral-400 mb-1.5">联系方式</div>
|
||||
<div className="text-sm text-neutral-700 space-y-1">
|
||||
{selectedCustomer.phone && <div>{selectedCustomer.phone}</div>}
|
||||
{selectedCustomer.email && <div>{selectedCustomer.email}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-neutral-400 mb-1.5">标签</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{((): string[] => { try { return JSON.parse(selectedCustomer.tags) } catch { return [] } })().map((t: string) => (
|
||||
<span key={t} className="text-xs px-2 py-0.5 rounded bg-blue-50 text-blue-600">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-neutral-400 mb-1.5">统计数据</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="bg-neutral-50 rounded p-2 text-center">
|
||||
<div className="text-lg font-semibold text-neutral-800">{selectedCustomer.conversation_count}</div>
|
||||
<div className="text-xs text-neutral-400">对话次数</div>
|
||||
</div>
|
||||
<div className="bg-neutral-50 rounded p-2 text-center">
|
||||
<div className="text-lg font-semibold text-green-600 flex items-center justify-center gap-0.5">
|
||||
{selected?.satisfaction_score || '-'}
|
||||
{selected?.satisfaction_score ? <StarFilled className="text-xs" /> : null}
|
||||
</div>
|
||||
<div className="text-xs text-neutral-400">满意度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const handleEnd = async () => {
|
||||
if (!selected) return
|
||||
try {
|
||||
await endSession(selected.id, endReason)
|
||||
antMsg.success('会话已结束')
|
||||
setEndingOpen(false)
|
||||
setSelectedId(null)
|
||||
setDetail(null)
|
||||
await loadAll()
|
||||
} catch (error) {
|
||||
antMsg.error(error instanceof Error ? error.message : '结束会话失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddNote = async () => {
|
||||
if (!selected || !noteInput.trim()) return
|
||||
setSavingNote(true)
|
||||
try {
|
||||
await addSessionNote(selected.id, noteInput)
|
||||
setNoteInput('')
|
||||
await loadDetail(selected.id, false)
|
||||
} catch (error) {
|
||||
antMsg.error(error instanceof Error ? error.message : '保存备注失败')
|
||||
} finally {
|
||||
setSavingNote(false)
|
||||
}
|
||||
}
|
||||
|
||||
const renderSessionGroup = (title: string, items: Session[], color: string) => (
|
||||
<div className="mb-3" key={title}>
|
||||
<div className="px-3 py-1.5 text-xs font-medium text-neutral-500 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
{title} · {items.length}
|
||||
</div>
|
||||
{items.map(session => {
|
||||
const customer = customers[session.customer_id]
|
||||
return <button key={session.id} type="button"
|
||||
className={`w-full text-left px-3 py-2.5 border-y border-neutral-50 hover:bg-neutral-50 ${selectedId === session.id ? 'bg-blue-50' : ''}`}
|
||||
onClick={() => setSelectedId(session.id)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: priorityColors[session.priority] || '#2563eb' }} />
|
||||
<span className="text-sm font-medium text-neutral-800 truncate flex-1">{customer?.name || `客户${session.customer_id}`}</span>
|
||||
{session.unread_count > 0 && <span className="min-w-5 h-5 px-1 rounded-full bg-red-500 text-white text-xs text-center leading-5">{session.unread_count > 99 ? '99+' : session.unread_count}</span>}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-1 pl-4 gap-2">
|
||||
<span className="text-xs text-neutral-400">{statusLabels[session.status]}</span>
|
||||
{session.status === 'waiting' && user?.role === 'agent' ? <span role="button" tabIndex={0}
|
||||
className="text-xs text-blue-600 hover:text-blue-700" onClick={event => { event.stopPropagation(); handleClaim(session.id) }}
|
||||
onKeyDown={event => { if (event.key === 'Enter') { event.stopPropagation(); handleClaim(session.id) } }}>领取</span> :
|
||||
<span className="text-xs text-neutral-300">{new Date(session.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</span>}
|
||||
</div>
|
||||
</button>
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
|
||||
if (loading) return <div className="h-full flex items-center justify-center"><Spin size="large" /></div>
|
||||
|
||||
return <div className="h-full flex">
|
||||
<input ref={fileInputRef} type="file" accept="image/jpeg,image/png,image/gif" className="hidden" onChange={event => { handleImage(event.target.files?.[0]); event.currentTarget.value = '' }} />
|
||||
<aside className="w-[300px] flex-shrink-0 border-r border-neutral-200 bg-white flex flex-col">
|
||||
<div className="px-3 py-3 border-b border-neutral-100">
|
||||
<div className="text-sm font-medium text-neutral-800">{user?.nickname || '客服'}</div>
|
||||
<div className="text-xs text-green-600">在线 · 我的会话</div>
|
||||
</div>
|
||||
<div className="p-3 border-b border-neutral-100"><Input prefix={<SearchOutlined />} placeholder="搜索访客或会话 ID" value={search} onChange={event => setSearch(event.target.value)} size="small" allowClear /></div>
|
||||
<div className="flex-1 overflow-auto py-2">
|
||||
{filteredSessions.length === 0 ? <div className="text-center text-sm text-neutral-400 py-10">暂无待处理会话</div> : <>
|
||||
{renderSessionGroup('紧急会话', urgentSessions, '#dc2626')}
|
||||
{renderSessionGroup('等待中', waitingSessions, '#d97706')}
|
||||
{renderSessionGroup('进行中', activeSessions, '#2563eb')}
|
||||
</>}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 flex flex-col min-w-0 bg-white">
|
||||
{selected && selectedCustomer ? <>
|
||||
<div className="h-14 px-4 flex items-center justify-between border-b border-neutral-100 flex-shrink-0">
|
||||
<div className="min-w-0"><div className="flex items-center gap-2"><span className="text-sm font-medium text-neutral-800 truncate">{selectedCustomer.name}</span><span className="text-xs px-1.5 py-0.5 rounded bg-blue-50 text-blue-600">{priorityLabels[selected.priority]}</span><span className="text-xs text-neutral-400">{statusLabels[selected.status]}</span></div><div className="text-xs text-neutral-400 mt-0.5">会话 #{selected.id}</div></div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Dropdown menu={{ items: [{ key: 'urgent', label: '标记紧急', onClick: () => handlePriority('urgent') }, { key: 'normal', label: '标记普通', onClick: () => handlePriority('normal') }] }} disabled={!canOperate}><Button type="text" size="small" icon={<FlagOutlined />}>优先级</Button></Dropdown>
|
||||
<Button type="text" size="small" icon={<FileTextOutlined />} onClick={() => setKnowledgeOpen(true)} disabled={!canOperate}>知识库</Button>
|
||||
<Button type="text" size="small" icon={<SwapOutlined />} onClick={openTransfer} disabled={!canOperate}>转接</Button>
|
||||
<Button type="text" size="small" danger icon={<CheckCircleOutlined />} onClick={() => setEndingOpen(true)} disabled={!canOperate}>结束</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto p-4 flex flex-col gap-3">
|
||||
{detailLoading ? <div className="flex-1 flex items-center justify-center"><Spin /></div> : detail?.messages.length ? detail.messages.map(message => <div key={message.id} className={`flex ${message.sender_type === 'agent' ? 'justify-start' : 'justify-end'}`}>
|
||||
<div className={`max-w-[65%] rounded-lg px-3 py-2 text-sm ${message.sender_type === 'agent' ? 'bg-neutral-100 text-neutral-700' : 'bg-blue-500 text-white'}`}>
|
||||
{message.type === 'image' ? <img src={message.content} alt="聊天图片" className="max-w-64 max-h-64 rounded" /> : <div className="whitespace-pre-wrap break-words">{message.content}</div>}
|
||||
<div className={`text-xs mt-1 ${message.sender_type === 'agent' ? 'text-neutral-400' : 'text-white/60'}`}>{message.sender_type === 'agent' ? '客服' : '访客'} · {new Date(message.sent_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}</div>
|
||||
</div>
|
||||
</div>) : <div className="flex-1 flex items-center justify-center text-neutral-400 text-sm">暂无消息，开始对话吧</div>}
|
||||
<div ref={chatEndRef} />
|
||||
</div>
|
||||
<div className="p-3 border-t border-neutral-100 flex-shrink-0">
|
||||
{selected.status !== 'active' || !canOperate ? <div className="text-center text-sm text-neutral-400 py-2">{selected.status === 'waiting' ? '领取会话后即可回复' : '会话已结束'}</div> : <>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<Dropdown menu={{ items: quickReplies.map((content, index) => ({ key: String(index), label: content, onClick: () => setMessageInput(content) })) }}><Button type="text" size="small">快捷回复</Button></Dropdown>
|
||||
<Tooltip title="搜索知识库"><Button type="text" size="small" icon={<FileTextOutlined />} onClick={() => setKnowledgeOpen(true)} /></Tooltip>
|
||||
<Tooltip title="发送图片"><Button type="text" size="small" icon={<PaperClipOutlined />} onClick={() => fileInputRef.current?.click()} /></Tooltip>
|
||||
</div>
|
||||
<div className="flex items-end gap-2 bg-neutral-50 rounded-lg px-3 py-2">
|
||||
<Input.TextArea autoSize={{ minRows: 1, maxRows: 4 }} bordered={false} className="!bg-transparent" placeholder="输入消息… Enter 发送，Shift+Enter 换行" value={messageInput}
|
||||
onChange={event => { setMessageInput(event.target.value); emitTyping() }}
|
||||
onPaste={event => { const image = Array.from(event.clipboardData.items).find(item => item.type.startsWith('image/')); if (image) { event.preventDefault(); handleImage(image.getAsFile() || undefined) } }}
|
||||
onKeyDown={event => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(messageInput) } }} />
|
||||
<Button type="primary" shape="circle" icon={sending ? <Spin size="small" /> : <SendOutlined />} disabled={!messageInput.trim() || sending} onClick={() => sendMessage(messageInput)} />
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
</> : <div className="flex-1 flex items-center justify-center text-neutral-400">选择一个会话开始处理</div>}
|
||||
</main>
|
||||
|
||||
<aside className="w-[300px] flex-shrink-0 border-l border-neutral-200 bg-white overflow-auto">
|
||||
{selectedCustomer && <div className="p-4 space-y-5">
|
||||
<div className="flex items-center gap-3 pb-3 border-b border-neutral-100"><div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 font-semibold">{selectedCustomer.name[0]}</div><div><div className="text-sm font-medium text-neutral-800">{selectedCustomer.name}</div><div className="text-xs text-neutral-400">{selectedCustomer.source || '未知渠道'}</div></div></div>
|
||||
<div><div className="text-xs text-neutral-400 mb-1.5">联系方式</div><div className="text-sm text-neutral-700 space-y-1">{selectedCustomer.phone && <div>{selectedCustomer.phone}</div>}{selectedCustomer.email && <div>{selectedCustomer.email}</div>}{!selectedCustomer.phone && !selectedCustomer.email && <div>暂无联系方式</div>}</div></div>
|
||||
<div><div className="text-xs text-neutral-400 mb-1.5">客户标签</div><div className="flex flex-wrap gap-1">{((): string[] => { try { return JSON.parse(selectedCustomer.tags) } catch { return [] } })().map(tag => <span key={tag} className="text-xs px-2 py-0.5 rounded bg-blue-50 text-blue-600">{tag}</span>)}</div></div>
|
||||
<div className="grid grid-cols-3 gap-2"><div className="bg-neutral-50 rounded p-2 text-center"><div className="text-lg font-semibold text-neutral-800">{selectedCustomer.conversation_count}</div><div className="text-xs text-neutral-400">对话次数</div></div><div className="bg-neutral-50 rounded p-2 text-center"><div className="text-lg font-semibold text-green-600 flex items-center justify-center gap-0.5">{selected?.satisfaction_score || '-'}{selected?.satisfaction_score ? <StarFilled className="text-xs" /> : null}</div><div className="text-xs text-neutral-400">满意度</div></div><div className="bg-neutral-50 rounded p-2 text-center"><div className="text-lg font-semibold text-neutral-800">{detail?.pendingCount || 0}</div><div className="text-xs text-neutral-400">待处理</div></div></div>
|
||||
<div><div className="text-xs text-neutral-400 mb-2">内部备注</div><div className="space-y-2 max-h-36 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 p-2 text-xs whitespace-pre-wrap">{note.detail}<div className="text-amber-600/70 mt-1">{new Date(note.created_at).toLocaleString('zh-CN')}</div></div>)}</div>{canOperate && <div className="mt-2 flex gap-1"><Input size="small" maxLength={500} placeholder="添加仅客服可见的备注" value={noteInput} onChange={event => setNoteInput(event.target.value)} onPressEnter={handleAddNote} /><Button size="small" loading={savingNote} onClick={handleAddNote}>保存</Button></div>}</div>
|
||||
</div>}
|
||||
</aside>
|
||||
|
||||
<Modal title="转接会话" open={transferOpen} onCancel={() => setTransferOpen(false)} onOk={handleTransfer} okButtonProps={{ disabled: !targetAgentID }}>
|
||||
<p className="text-sm text-neutral-500 mb-3">请选择一位在线客服接手当前会话。</p><Select className="w-full" placeholder="选择客服" value={targetAgentID} onChange={setTargetAgentID} options={availableAgents.map(agent => ({ value: agent.id, label: agent.nickname }))} />
|
||||
</Modal>
|
||||
<Modal title="结束会话" open={endingOpen} onCancel={() => setEndingOpen(false)} onOk={handleEnd} okText="确认结束"><p className="text-sm text-neutral-500 mb-3">请选择本次会话的结束原因。</p><Select className="w-full" value={endReason} onChange={setEndReason} options={endReasons} /></Modal>
|
||||
<Modal title="图片预览" open={Boolean(imagePreview)} onCancel={() => setImagePreview(null)} onOk={() => { if (imagePreview) sendMessage(imagePreview, 'image'); setImagePreview(null) }} okText="发送" okButtonProps={{ loading: sending }}><div className="flex justify-center"><img src={imagePreview || ''} alt="待发送图片预览" className="max-h-[420px] max-w-full rounded-lg" /></div></Modal>
|
||||
<Modal title="知识库与快捷回复" open={knowledgeOpen} onCancel={() => setKnowledgeOpen(false)} footer={null} width={640}><Input prefix={<SearchOutlined />} placeholder="搜索标题或内容" value={knowledgeKeyword} onChange={event => setKnowledgeKeyword(event.target.value)} allowClear className="mb-3" />{knowledgeLoading ? <div className="py-10 text-center"><Spin /></div> : <div className="space-y-2 max-h-96 overflow-auto">{knowledgeEntries.length === 0 ? <div className="text-center text-neutral-400 py-8">未找到可用知识条目</div> : knowledgeEntries.map(entry => <button key={entry.id} type="button" className="w-full text-left border border-neutral-100 rounded-lg p-3 hover:border-blue-300 hover:bg-blue-50" onClick={() => { setMessageInput(entry.content); setKnowledgeOpen(false) }}><div className="text-sm font-medium text-neutral-800">{entry.title}</div><div className="text-xs text-neutral-500 mt-1 line-clamp-2">{entry.content}</div></button>)}</div>}</Modal>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
|
||||
+28
-8
@@ -1,13 +1,24 @@
|
||||
import { get, post, getList } from './request'
|
||||
import { get, post, put, getList } from './request'
|
||||
|
||||
export interface LoginParams { username: string; password: string }
|
||||
export interface LoginResult { token: string; user_id: number; tenant_id: number; nickname: string; role: string }
|
||||
|
||||
export interface Session {
|
||||
id: number; tenant_id: number; channel_id: number; customer_id: number; agent_id: number | null
|
||||
status: string; priority: string; satisfaction_score: number | null; created_at: string; ended_at: string | null
|
||||
id: number; tenant_id: number; channel_id: number; customer_id: number; agent_id: number | null
|
||||
status: string; priority: string; unread_count: number; satisfaction_score: number | null; created_at: string; ended_at: string | null
|
||||
}
|
||||
|
||||
export interface Message {
|
||||
id: number; session_id: number; sender_type: 'visitor' | 'agent'; sender_id: number | null
|
||||
content: string; type: 'text' | 'image'; seq: number; sent_at: string
|
||||
}
|
||||
|
||||
export interface SessionEvent {
|
||||
id: number; session_id: number; operator_id: number; action: string; detail: string; created_at: string
|
||||
}
|
||||
|
||||
export interface AvailableAgent { id: number; nickname: string; status: string }
|
||||
|
||||
export interface Customer {
|
||||
id: number; tenant_id: number; name: string; phone: string; email: string; tags: string
|
||||
source: string; status: string; conversation_count: number; last_contact_at: string
|
||||
@@ -35,23 +46,32 @@ export interface StatisticsKpis {
|
||||
export const login = (params: LoginParams) => post<LoginResult>('/login', params)
|
||||
|
||||
// Sessions
|
||||
export const getSessions = (params?: { status?: string; priority?: string; page?: number }) => {
|
||||
export const getSessions = (params?: { status?: string; priority?: string; page?: number; pageSize?: number }) => {
|
||||
const search = new URLSearchParams()
|
||||
if (params?.status) search.set('status', params.status)
|
||||
if (params?.priority) search.set('priority', params.priority)
|
||||
if (params?.page) search.set('page', String(params.page))
|
||||
if (params?.page) search.set('page', String(params.page))
|
||||
if (params?.pageSize) search.set('pageSize', String(params.pageSize))
|
||||
return getList<Session>(`/sessions?${search}`)
|
||||
}
|
||||
export const getSession = (id: number) => get<{ session: Session; messages: unknown[] }>(`/sessions/${id}`)
|
||||
export const getSession = (id: number) => get<{ session: Session; messages: Message[]; events: SessionEvent[]; pending_count: number }>(`/sessions/${id}`)
|
||||
export const assignSession = (id: number, agentId: number) => post(`/sessions/${id}/assign`, { agent_id: agentId })
|
||||
export const claimSession = (id: number) => post(`/sessions/${id}/assign`, {})
|
||||
export const transferSession = (id: number, agentId: number) => post(`/sessions/${id}/transfer`, { agent_id: agentId })
|
||||
export const endSession = (id: number, reason: string) => post(`/sessions/${id}/end?reason=${reason}`, {})
|
||||
export const updateSessionPriority = (id: number, priority: 'normal' | 'urgent') => put(`/sessions/${id}/priority?priority=${priority}`, {})
|
||||
export const markSessionRead = (id: number) => post(`/sessions/${id}/read`, {})
|
||||
export const addSessionNote = (id: number, content: string) => post<SessionEvent>(`/sessions/${id}/notes`, { content })
|
||||
export const sendSessionMessage = (id: number, content: string, type: 'text' | 'image' = 'text') => post<Message>(`/sessions/${id}/messages`, { content, type })
|
||||
export const getAvailableAgents = () => get<AvailableAgent[]>('/agents/available')
|
||||
|
||||
// Customers
|
||||
export const getCustomers = (params?: { search?: string; status?: string; page?: number }) => {
|
||||
export const getCustomers = (params?: { search?: string; status?: string; page?: number; pageSize?: number }) => {
|
||||
const search = new URLSearchParams()
|
||||
if (params?.search) search.set('search', params.search)
|
||||
if (params?.status) search.set('status', params.status)
|
||||
if (params?.page) search.set('page', String(params.page || 1))
|
||||
if (params?.page) search.set('page', String(params.page || 1))
|
||||
if (params?.pageSize) search.set('pageSize', String(params.pageSize))
|
||||
return getList<Customer>(`/customers?${search}`)
|
||||
}
|
||||
|
||||
|
||||
@@ -28,9 +28,11 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
const [showRating, setShowRating] = useState(false)
|
||||
const [rated, setRated] = useState(false)
|
||||
const [sessionEnded, setSessionEnded] = useState(false)
|
||||
const [agentTyping, setAgentTyping] = useState(false)
|
||||
const [ratingText, setRatingText] = useState('')
|
||||
const pollRef = useRef<number | null>(null)
|
||||
const initRef = useRef(false)
|
||||
const typingTimerRef = useRef<number | null>(null)
|
||||
|
||||
const loadMessages = useCallback(async (sid?: number, token?: string) => {
|
||||
const s = sid || sessionId
|
||||
@@ -101,6 +103,12 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data)
|
||||
if (payload.session_id === sessionId && payload.type === 'typing') {
|
||||
setAgentTyping(true)
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
|
||||
typingTimerRef.current = window.setTimeout(() => setAgentTyping(false), 1800)
|
||||
return
|
||||
}
|
||||
if (payload.session_id === sessionId && (payload.type === 'message' || payload.type === 'session_updated')) {
|
||||
if (payload.type === 'session_updated' && payload.data?.status === 'ended') {
|
||||
setSessionEnded(true)
|
||||
@@ -114,6 +122,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
}
|
||||
return () => {
|
||||
socket.close()
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
|
||||
}
|
||||
}, [sessionId, visitorToken, open, loadMessages])
|
||||
|
||||
@@ -200,6 +209,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
|
||||
<div className="text-sm">欢迎咨询，请描述您的问题</div>
|
||||
</div>
|
||||
)}
|
||||
{agentTyping && <div className="text-xs text-neutral-400">客服正在输入…</div>}
|
||||
{messages.map(msg => (
|
||||
<div key={msg.id} className={`flex ${msg.sender === 'visitor' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${msg.sender === 'visitor' ? 'bg-blue-500 text-white' : 'bg-white text-neutral-700 border border-neutral-200'}`}>
|
||||
|
||||
Reference in New Issue
Block a user