1316 lines
49 KiB
TypeScript
1316 lines
49 KiB
TypeScript
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
|
||
import {
|
||
CloseOutlined, MessageOutlined, SendOutlined,
|
||
StarFilled, MinusOutlined, PictureOutlined, CustomerServiceOutlined,
|
||
} from '@ant-design/icons'
|
||
import EmojiPicker, { insertAtCursor } from '@/components/common/EmojiPicker'
|
||
import { ChatImage } from '@/components/common/ImagePreview'
|
||
import MarkdownBody from '@/components/common/MarkdownBody'
|
||
import SafeHtml, { looksLikeHtml } from '@/components/common/SafeHtml'
|
||
|
||
interface Message {
|
||
id: number
|
||
sender: 'visitor' | 'agent'
|
||
content: string
|
||
time: string
|
||
type?: 'text' | 'image'
|
||
/** 服务端单调序号，用于增量同步 */
|
||
seq?: number
|
||
}
|
||
|
||
const defaultQuickQuestions = ['查询订单状态', '退换货政策', '配送时效说明']
|
||
|
||
type WelcomeSegment = { type: 'text' | 'image'; content: string }
|
||
|
||
const defaultWelcomeSegments: WelcomeSegment[] = [
|
||
{ type: 'text', content: '您好！欢迎咨询，请问有什么可以帮您？' },
|
||
]
|
||
|
||
function parseWelcomeSegments(data: {
|
||
welcome_messages?: unknown
|
||
welcome_message?: string
|
||
}): WelcomeSegment[] {
|
||
if (Array.isArray(data.welcome_messages) && data.welcome_messages.length > 0) {
|
||
const segs: WelcomeSegment[] = []
|
||
for (const raw of data.welcome_messages) {
|
||
if (!raw || typeof raw !== 'object') continue
|
||
const item = raw as { type?: string; content?: string }
|
||
const content = typeof item.content === 'string' ? item.content.trim() : ''
|
||
if (!content) continue
|
||
if (item.type === 'image') segs.push({ type: 'image', content })
|
||
else segs.push({ type: 'text', content })
|
||
}
|
||
if (segs.length > 0) return segs
|
||
}
|
||
if (typeof data.welcome_message === 'string' && data.welcome_message.trim()) {
|
||
return [{ type: 'text', content: data.welcome_message.trim() }]
|
||
}
|
||
return defaultWelcomeSegments
|
||
}
|
||
|
||
type LayoutMode = 'floating' | 'fill'
|
||
|
||
export type HostPageInfo = { url?: string; title?: string; referrer?: string }
|
||
|
||
interface VisitorChatProps {
|
||
defaultOpen?: boolean
|
||
channelKey?: string
|
||
/** 是否在 iframe 嵌入模式（关闭/最小化会 postMessage 给宿主） */
|
||
embedded?: boolean
|
||
layout?: LayoutMode
|
||
/** 宿主页初始 URL（由 widget.js 经 query 传入） */
|
||
initialPage?: HostPageInfo
|
||
}
|
||
|
||
const VisitorChat = ({
|
||
defaultOpen = false,
|
||
channelKey = 'WK_8a3f2e',
|
||
embedded = false,
|
||
layout = 'floating',
|
||
initialPage,
|
||
}: 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(storageKey)
|
||
return saved ? Number(saved) : null
|
||
})
|
||
const [visitorToken, setVisitorToken] = useState<string>(() => localStorage.getItem(tokenKey) || '')
|
||
const [messages, setMessages] = useState<Message[]>(() => {
|
||
const saved = localStorage.getItem(msgsKey)
|
||
return saved ? JSON.parse(saved) : []
|
||
})
|
||
const [input, setInput] = useState('')
|
||
const [sending, setSending] = useState(false)
|
||
const [showRating, setShowRating] = useState(false)
|
||
const [rated, setRated] = useState(false)
|
||
const [sessionEnded, setSessionEnded] = useState(false)
|
||
const [agentTyping, setAgentTyping] = useState(false)
|
||
const [ratingScore, setRatingScore] = useState(0)
|
||
const [ratingText, setRatingText] = useState('')
|
||
const [hoverStar, setHoverStar] = useState(0)
|
||
const [ratingSubmitting, setRatingSubmitting] = useState(false)
|
||
|
||
/** 评价快捷文案：按星级展示更贴切的选项 */
|
||
const ratingPresets = useMemo(() => {
|
||
if (ratingScore >= 5) {
|
||
return ['服务很棒，非常感谢！', '回复及时，专业耐心', '问题已顺利解决', '下次还会咨询']
|
||
}
|
||
if (ratingScore === 4) {
|
||
return ['整体不错，体验良好', '基本解决了问题', '态度很好，继续加油', '回复比较及时']
|
||
}
|
||
if (ratingScore >= 1 && ratingScore <= 3) {
|
||
return ['等待时间偏长', '问题未完全解决', '希望回复更清晰一些', '需要再跟进一下']
|
||
}
|
||
return ['服务很好，感谢！', '回复及时，很专业', '问题已解决', '等待时间稍长']
|
||
}, [ratingScore])
|
||
const [pendingImage, setPendingImage] = useState<{ file: File; preview: string } | null>(null)
|
||
const [sendError, setSendError] = useState('')
|
||
const [agentsOnline, setAgentsOnline] = useState(true)
|
||
const [offlinePrompt, setOfflinePrompt] = useState('当前无客服在线，请留言并留下联系方式，我们上线后会尽快回复您。')
|
||
const [welcomeSegments, setWelcomeSegments] = useState<WelcomeSegment[]>(defaultWelcomeSegments)
|
||
const [displayName, setDisplayName] = 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)
|
||
const chatEndRef = useRef<HTMLDivElement>(null)
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
const textInputRef = useRef<HTMLInputElement>(null)
|
||
const socketRef = useRef<WebSocket | null>(null)
|
||
const lastTypingAt = useRef(0)
|
||
const sessionIdRef = useRef<number | null>(sessionId)
|
||
const visitorTokenRef = useRef(visitorToken)
|
||
const agentNameRef = useRef(agentName)
|
||
const loadMessagesRef = useRef<(sid?: number, token?: string, opts?: { afterSeq?: number; full?: boolean }) => Promise<void>>(async () => {})
|
||
const msgsKeyRef = useRef(msgsKey)
|
||
/** 宿主页信息（嵌入时由 postMessage / 初始 query 更新） */
|
||
const hostPageRef = useRef<HostPageInfo>({
|
||
url: initialPage?.url || (typeof window !== 'undefined' ? window.location.href : ''),
|
||
title: initialPage?.title || (typeof document !== 'undefined' ? document.title : ''),
|
||
referrer: initialPage?.referrer || (typeof document !== 'undefined' ? document.referrer : ''),
|
||
})
|
||
const lastPageKeyRef = useRef('') // url + title，避免同 URL 标题更新被吞
|
||
/** 本地已同步到的最大 seq（从缓存消息初始化） */
|
||
const lastSeqRef = useRef((() => {
|
||
try {
|
||
const saved = localStorage.getItem(msgsKey)
|
||
if (!saved) return 0
|
||
const cached = JSON.parse(saved) as Message[]
|
||
return cached.reduce((acc, m) => Math.max(acc, m.seq || 0), 0)
|
||
} catch {
|
||
return 0
|
||
}
|
||
})())
|
||
|
||
const insertEmoji = (emoji: string) => {
|
||
const { next, cursor } = insertAtCursor(textInputRef.current, input, emoji)
|
||
setInput(next)
|
||
if (agentsOnline) emitTyping()
|
||
requestAnimationFrame(() => {
|
||
const el = textInputRef.current
|
||
if (!el) return
|
||
el.focus()
|
||
el.setSelectionRange(cursor, cursor)
|
||
})
|
||
}
|
||
|
||
const mapServerMessage = (m: {
|
||
id: number
|
||
sender_type?: string
|
||
content?: string
|
||
type?: string
|
||
sent_at?: string
|
||
seq?: number
|
||
}): Message => ({
|
||
id: Number(m.id),
|
||
sender: m.sender_type === 'agent' ? 'agent' : 'visitor',
|
||
content: String(m.content ?? ''),
|
||
type: m.type === 'image' ? 'image' : 'text',
|
||
seq: typeof m.seq === 'number' ? m.seq : Number(m.seq || 0) || undefined,
|
||
time: m.sent_at
|
||
? new Date(m.sent_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||
: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||
})
|
||
|
||
const rememberSeq = (seq?: number) => {
|
||
if (seq && seq > lastSeqRef.current) lastSeqRef.current = seq
|
||
}
|
||
|
||
const mergeVisitorMessages = (existing: Message[], incoming: Message[]): Message[] => {
|
||
const map = new Map<number, Message>()
|
||
for (const item of existing) {
|
||
if (item.id > 0) map.set(item.id, item)
|
||
}
|
||
// 保留未确认的乐观气泡
|
||
const temps = existing.filter(item => item.id < 0)
|
||
for (const item of incoming) map.set(item.id, item)
|
||
const merged = Array.from(map.values())
|
||
// 去掉已被服务端确认的乐观气泡
|
||
const remainingTemps = temps.filter(temp =>
|
||
!incoming.some(srv =>
|
||
srv.sender === 'visitor'
|
||
&& srv.content === temp.content
|
||
&& (srv.type || 'text') === (temp.type || 'text'),
|
||
),
|
||
)
|
||
return [...merged, ...remainingTemps].sort((a, b) => {
|
||
const as = a.seq || 0
|
||
const bs = b.seq || 0
|
||
if (as && bs && as !== bs) return as - bs
|
||
if (a.id > 0 && b.id > 0) return a.id - b.id
|
||
return a.id - b.id
|
||
})
|
||
}
|
||
|
||
const applySessionStatus = useCallback((status?: string, satisfactionScore?: number | null) => {
|
||
if (!status) return
|
||
if (status === 'ended' || status === 'archived') {
|
||
setSessionEnded(true)
|
||
const alreadyRated = satisfactionScore != null && Number(satisfactionScore) > 0
|
||
if (alreadyRated) {
|
||
setRated(true)
|
||
setShowRating(false)
|
||
} else {
|
||
setRated(false)
|
||
setShowRating(true)
|
||
}
|
||
} else if (status === 'active') {
|
||
setAgentsOnline(true)
|
||
}
|
||
}, [])
|
||
|
||
const loadMessages = useCallback(async (
|
||
sid?: number,
|
||
token?: string,
|
||
opts?: { afterSeq?: number; full?: boolean },
|
||
) => {
|
||
const s = sid || sessionIdRef.current || sessionId
|
||
const visitorCredential = token || visitorTokenRef.current || visitorToken || localStorage.getItem(tokenKey) || ''
|
||
if (!s || !visitorCredential) return
|
||
const full = opts?.full === true || (opts?.afterSeq == null && lastSeqRef.current <= 0)
|
||
const afterSeq = full ? 0 : (opts?.afterSeq ?? lastSeqRef.current)
|
||
try {
|
||
const qs = new URLSearchParams({ session_id: String(s) })
|
||
if (afterSeq > 0) qs.set('after_seq', String(afterSeq))
|
||
const res = await fetch(`/api/widget/messages?${qs}`, {
|
||
headers: { 'X-Visitor-Token': visitorCredential },
|
||
})
|
||
const json = await res.json()
|
||
if (json.code !== 0 || !json.data) return
|
||
|
||
// 兼容旧版 data 为数组的响应
|
||
const payload = json.data
|
||
const list: any[] = Array.isArray(payload)
|
||
? payload
|
||
: (Array.isArray(payload.messages) ? payload.messages : [])
|
||
const maxSeq = Array.isArray(payload)
|
||
? list.reduce((acc, m) => Math.max(acc, Number(m.seq || 0)), 0)
|
||
: Number(payload.max_seq || 0)
|
||
const hasMore = !Array.isArray(payload) && Boolean(payload.has_more)
|
||
|
||
if (!Array.isArray(payload)) {
|
||
applySessionStatus(payload.session_status, payload.satisfaction_score)
|
||
}
|
||
|
||
if (list.length === 0) {
|
||
if (maxSeq > 0) rememberSeq(maxSeq)
|
||
return
|
||
}
|
||
|
||
const mapped = list.map((m: any) => mapServerMessage(m))
|
||
setMessages(prev => {
|
||
const next = afterSeq > 0 ? mergeVisitorMessages(prev, mapped) : mapped
|
||
localStorage.setItem(msgsKeyRef.current, JSON.stringify(next.filter(m => m.id > 0)))
|
||
return next
|
||
})
|
||
const localMax = mapped.reduce((acc, m) => Math.max(acc, m.seq || 0), 0)
|
||
rememberSeq(Math.max(maxSeq, localMax))
|
||
|
||
// 一次未拉完则继续增量
|
||
if (hasMore && localMax > afterSeq) {
|
||
await loadMessages(s, visitorCredential, { afterSeq: localMax })
|
||
}
|
||
} catch { /* ignore */ }
|
||
}, [sessionId, visitorToken, tokenKey, applySessionStatus])
|
||
|
||
const appendPushedMessage = useCallback((raw: {
|
||
id?: number
|
||
sender_type?: string
|
||
content?: string
|
||
type?: string
|
||
sent_at?: string
|
||
seq?: number
|
||
}) => {
|
||
if (!raw?.id) return false
|
||
const msg = mapServerMessage(raw as {
|
||
id: number
|
||
sender_type?: string
|
||
content?: string
|
||
type?: string
|
||
sent_at?: string
|
||
seq?: number
|
||
})
|
||
const known = lastSeqRef.current
|
||
// seq 空洞 → 走增量拉取补齐
|
||
if (known > 0 && msg.seq && msg.seq > known + 1) {
|
||
void loadMessagesRef.current(undefined, undefined, { afterSeq: known })
|
||
return true
|
||
}
|
||
setMessages(prev => {
|
||
if (prev.some(item => item.id === msg.id)) return prev
|
||
const next = mergeVisitorMessages(prev, [msg])
|
||
localStorage.setItem(msgsKeyRef.current, JSON.stringify(next.filter(m => m.id > 0)))
|
||
return next
|
||
})
|
||
if (msg.seq) rememberSeq(msg.seq)
|
||
return true
|
||
}, [])
|
||
|
||
const reportPageView = useCallback(async (url: string, title: string) => {
|
||
const sid = sessionIdRef.current
|
||
const token = visitorTokenRef.current
|
||
if (!url) return
|
||
// 会话尚未 Init 完成：只缓存宿主页，避免丢掉打开前/初始化中的换页
|
||
if (!sid || !token) {
|
||
hostPageRef.current = {
|
||
...hostPageRef.current,
|
||
url,
|
||
title: title || hostPageRef.current.title,
|
||
}
|
||
return
|
||
}
|
||
if (sessionEnded) return
|
||
const key = `${url}\0${title || ''}`
|
||
// 同 URL 但标题变了仍要上报（服务端会更新 current_title；新 URL 会插轨迹）
|
||
if (key === lastPageKeyRef.current) return
|
||
lastPageKeyRef.current = key
|
||
try {
|
||
const res = await fetch('/api/widget/pageview', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-Visitor-Token': token,
|
||
},
|
||
body: JSON.stringify({
|
||
session_id: sid,
|
||
visitor_token: token,
|
||
page_url: url,
|
||
page_title: title || '',
|
||
}),
|
||
})
|
||
if (!res.ok) {
|
||
lastPageKeyRef.current = ''
|
||
}
|
||
} catch {
|
||
lastPageKeyRef.current = ''
|
||
}
|
||
}, [sessionEnded])
|
||
|
||
/** 调用 Init 创建新会话并写入本地状态（不复用已结束会话） */
|
||
const bootstrapNewSession = useCallback(async () => {
|
||
const page = hostPageRef.current
|
||
const res = await fetch('/api/widget/init', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
channel_key: channelKey,
|
||
visitor_name: '访客',
|
||
page_url: page.url || '',
|
||
page_title: page.title || '',
|
||
referrer: page.referrer || '',
|
||
}),
|
||
})
|
||
const json = await res.json()
|
||
if (json.code !== 0) {
|
||
throw new Error(json.message || '初始化会话失败')
|
||
}
|
||
const data = json.data
|
||
const sid = data.session_id as number
|
||
const token = data.visitor_token as string
|
||
setSessionId(sid)
|
||
setVisitorToken(token)
|
||
sessionIdRef.current = sid
|
||
visitorTokenRef.current = token
|
||
setAgentsOnline(Boolean(data.agents_online))
|
||
if (data.offline_prompt) setOfflinePrompt(data.offline_prompt)
|
||
setWelcomeSegments(parseWelcomeSegments(data))
|
||
if (data.display_name) setDisplayName(data.display_name)
|
||
if (data.agent_name) setAgentName(data.agent_name)
|
||
else if (data.agent_nickname) setAgentName(data.agent_nickname)
|
||
else setAgentName('')
|
||
setSessionEnded(false)
|
||
setRated(false)
|
||
setShowRating(false)
|
||
setLeaveSent(false)
|
||
setMessages([])
|
||
localStorage.setItem(storageKey, String(sid))
|
||
localStorage.setItem(tokenKey, token)
|
||
localStorage.removeItem(msgsKey)
|
||
lastSeqRef.current = 0
|
||
// init 已写入落地页；标记已上报，避免立刻重复；宿主若已换页则补报
|
||
const latest = hostPageRef.current
|
||
if (page.url) lastPageKeyRef.current = `${page.url}\0${page.title || ''}`
|
||
await loadMessages(sid, token, { full: true })
|
||
if (latest.url && (latest.url !== page.url || (latest.title || '') !== (page.title || ''))) {
|
||
lastPageKeyRef.current = ''
|
||
void reportPageView(latest.url, latest.title || '')
|
||
}
|
||
}, [channelKey, loadMessages, storageKey, tokenKey, msgsKey, reportPageView])
|
||
|
||
const closeSocket = useCallback(() => {
|
||
const sock = socketRef.current
|
||
if (!sock) return
|
||
try {
|
||
sock.onclose = null
|
||
sock.close()
|
||
} catch { /* ignore */ }
|
||
socketRef.current = null
|
||
}, [])
|
||
|
||
/** 会话结束后重新咨询：清本地凭证并 Init 新会话 */
|
||
const startNewSession = useCallback(async () => {
|
||
if (sending) return
|
||
setSending(true)
|
||
setSendError('')
|
||
setShowRating(false)
|
||
closeSocket()
|
||
localStorage.removeItem(storageKey)
|
||
localStorage.removeItem(tokenKey)
|
||
localStorage.removeItem(msgsKey)
|
||
setSessionId(null)
|
||
setVisitorToken('')
|
||
sessionIdRef.current = null
|
||
visitorTokenRef.current = ''
|
||
setMessages([])
|
||
setInput('')
|
||
setSessionEnded(false)
|
||
setRated(false)
|
||
setRatingScore(0)
|
||
setRatingText('')
|
||
setHoverStar(0)
|
||
setAgentTyping(false)
|
||
setAgentName('')
|
||
setLeaveSent(false)
|
||
setPendingImage(prev => {
|
||
if (prev?.preview) URL.revokeObjectURL(prev.preview)
|
||
return null
|
||
})
|
||
lastSeqRef.current = 0
|
||
initRef.current = true
|
||
try {
|
||
await bootstrapNewSession()
|
||
} catch (e) {
|
||
console.error('Start new session failed:', e)
|
||
setSendError(e instanceof Error ? e.message : '发起新咨询失败，请稍后重试')
|
||
initRef.current = false
|
||
} finally {
|
||
setSending(false)
|
||
}
|
||
}, [sending, closeSocket, storageKey, tokenKey, msgsKey, bootstrapNewSession])
|
||
|
||
const initSession = useCallback(async () => {
|
||
if (sessionId && visitorToken) {
|
||
// 本地有 seq 游标时增量补齐，否则全量（若已结束会由 loadMessages 带回状态）
|
||
const after = lastSeqRef.current
|
||
await loadMessages(sessionId, visitorToken, after > 0 ? { afterSeq: after } : { full: true })
|
||
return
|
||
}
|
||
if (initRef.current) return
|
||
initRef.current = true
|
||
try {
|
||
await bootstrapNewSession()
|
||
} catch (e) {
|
||
console.error('Init failed:', e)
|
||
setSendError(e instanceof Error ? e.message : '连接客服失败，请稍后重试')
|
||
initRef.current = false
|
||
}
|
||
}, [sessionId, visitorToken, loadMessages, bootstrapNewSession])
|
||
|
||
useEffect(() => {
|
||
sessionIdRef.current = sessionId
|
||
visitorTokenRef.current = visitorToken
|
||
agentNameRef.current = agentName
|
||
loadMessagesRef.current = loadMessages
|
||
msgsKeyRef.current = msgsKey
|
||
}, [sessionId, visitorToken, agentName, loadMessages, msgsKey])
|
||
|
||
useEffect(() => {
|
||
if (open) initSession()
|
||
}, [open, initSession])
|
||
|
||
// 嵌入模式：通知宿主就绪，并接收宿主页 URL 变更
|
||
useEffect(() => {
|
||
if (!embedded) return
|
||
try {
|
||
window.parent.postMessage({ type: 'kefu-widget-ready' }, '*')
|
||
} catch { /* ignore */ }
|
||
const onMsg = (event: MessageEvent) => {
|
||
const data = event?.data
|
||
if (!data || data.type !== 'kefu-host-page') return
|
||
const url = typeof data.url === 'string' ? data.url : ''
|
||
const title = typeof data.title === 'string' ? data.title : ''
|
||
const referrer = typeof data.referrer === 'string' ? data.referrer : hostPageRef.current.referrer
|
||
if (!url) return
|
||
hostPageRef.current = { url, title, referrer }
|
||
void reportPageView(url, title)
|
||
}
|
||
window.addEventListener('message', onMsg)
|
||
return () => window.removeEventListener('message', onMsg)
|
||
}, [embedded, reportPageView])
|
||
|
||
// 非嵌入预览：用当前页作为来源
|
||
useEffect(() => {
|
||
if (embedded || !sessionId || !visitorToken || sessionEnded) return
|
||
const url = window.location.href
|
||
const title = document.title
|
||
hostPageRef.current = {
|
||
url,
|
||
title,
|
||
referrer: document.referrer || hostPageRef.current.referrer,
|
||
}
|
||
void reportPageView(url, title)
|
||
}, [embedded, sessionId, visitorToken, sessionEnded, reportPageView])
|
||
|
||
// 心跳：刷新 last_seen_at，供客服端在线读秒
|
||
useEffect(() => {
|
||
if (!sessionId || !visitorToken || sessionEnded || !open) return
|
||
const beat = () => {
|
||
void fetch('/api/widget/heartbeat', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-Visitor-Token': visitorToken,
|
||
},
|
||
body: JSON.stringify({ session_id: sessionId, visitor_token: visitorToken }),
|
||
}).catch(() => {})
|
||
}
|
||
beat()
|
||
const t = window.setInterval(beat, 20000)
|
||
return () => clearInterval(t)
|
||
}, [sessionId, visitorToken, sessionEnded, open])
|
||
|
||
// 兜底轮询：按 after_seq 增量对齐
|
||
useEffect(() => {
|
||
if (sessionId && visitorToken && open) {
|
||
pollRef.current = window.setInterval(() => {
|
||
const after = lastSeqRef.current
|
||
void loadMessages(undefined, undefined, after > 0 ? { afterSeq: after } : { full: true })
|
||
}, 8000)
|
||
return () => { if (pollRef.current) clearInterval(pollRef.current) }
|
||
}
|
||
}, [sessionId, visitorToken, open, loadMessages])
|
||
|
||
// 访客 WS：session / token 就绪后建连；断线指数退避重连；消息直接追加
|
||
useEffect(() => {
|
||
if (!sessionId || !visitorToken || !open) return
|
||
let disposed = false
|
||
let reconnectTimer: number | null = null
|
||
let attempt = 0
|
||
|
||
const clearReconnect = () => {
|
||
if (reconnectTimer != null) {
|
||
window.clearTimeout(reconnectTimer)
|
||
reconnectTimer = null
|
||
}
|
||
}
|
||
|
||
const connect = () => {
|
||
if (disposed) return
|
||
const sid = sessionIdRef.current
|
||
const token = visitorTokenRef.current
|
||
if (!sid || !token) return
|
||
|
||
const scheme = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
||
const socket = new WebSocket(
|
||
`${scheme}//${window.location.host}/api/widget/ws?session_id=${sid}`,
|
||
['kefu-visitor-v1', token],
|
||
)
|
||
socketRef.current = socket
|
||
|
||
socket.onopen = () => {
|
||
attempt = 0
|
||
// 重连后按 seq 增量 catch-up
|
||
const after = lastSeqRef.current
|
||
void loadMessagesRef.current(sid, token, after > 0 ? { afterSeq: after } : { full: true })
|
||
}
|
||
|
||
socket.onmessage = (event) => {
|
||
try {
|
||
const payload = JSON.parse(event.data) as {
|
||
type?: string
|
||
session_id?: number | string
|
||
data?: {
|
||
id?: number
|
||
sender_type?: string
|
||
content?: string
|
||
type?: string
|
||
sent_at?: string
|
||
from?: string
|
||
status?: string
|
||
agent_name?: string
|
||
}
|
||
}
|
||
const eventSid = Number(payload.session_id)
|
||
const currentSid = Number(sessionIdRef.current)
|
||
if (!Number.isFinite(eventSid) || eventSid !== currentSid) return
|
||
|
||
if (payload.type === 'typing') {
|
||
if (payload.data?.from && payload.data.from !== 'agent') return
|
||
setAgentTyping(true)
|
||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
|
||
typingTimerRef.current = window.setTimeout(() => setAgentTyping(false), 1800)
|
||
return
|
||
}
|
||
|
||
if (payload.type === 'session_updated') {
|
||
const status = payload.data?.status
|
||
if (status === 'ended' || status === 'archived') {
|
||
setSessionEnded(true)
|
||
setShowRating(true)
|
||
setAgentTyping(false)
|
||
return
|
||
}
|
||
if (status === 'active') {
|
||
setAgentsOnline(true)
|
||
setAgentName(payload.data?.agent_name || agentNameRef.current)
|
||
}
|
||
setAgentTyping(false)
|
||
const after = lastSeqRef.current
|
||
void loadMessagesRef.current(
|
||
currentSid,
|
||
visitorTokenRef.current,
|
||
after > 0 ? { afterSeq: after } : { full: true },
|
||
)
|
||
return
|
||
}
|
||
|
||
if (payload.type === 'message') {
|
||
setAgentTyping(false)
|
||
const ok = appendPushedMessage(payload.data || {})
|
||
if (!ok) {
|
||
const after = lastSeqRef.current
|
||
void loadMessagesRef.current(
|
||
currentSid,
|
||
visitorTokenRef.current,
|
||
after > 0 ? { afterSeq: after } : { full: true },
|
||
)
|
||
}
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
socket.onclose = () => {
|
||
if (socketRef.current === socket) socketRef.current = null
|
||
if (disposed) return
|
||
const delay = Math.min(1000 * (2 ** attempt), 15000)
|
||
attempt += 1
|
||
clearReconnect()
|
||
reconnectTimer = window.setTimeout(connect, delay)
|
||
}
|
||
|
||
socket.onerror = () => {
|
||
try { socket.close() } catch { /* ignore */ }
|
||
}
|
||
}
|
||
|
||
connect()
|
||
|
||
return () => {
|
||
disposed = true
|
||
clearReconnect()
|
||
const sock = socketRef.current
|
||
socketRef.current = null
|
||
if (sock) {
|
||
sock.onclose = null
|
||
sock.close()
|
||
}
|
||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current)
|
||
}
|
||
}, [sessionId, visitorToken, open, appendPushedMessage])
|
||
|
||
useEffect(() => {
|
||
chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||
}, [messages, agentTyping, open, pendingImage])
|
||
|
||
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 || !agentsOnline) 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: sessionId }))
|
||
}
|
||
|
||
const postMessage = async (content: string, type: 'text' | 'image') => {
|
||
if (!sessionId || !visitorToken) throw new Error('会话未就绪')
|
||
const res = await fetch('/api/widget/message', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'X-Visitor-Token': visitorToken },
|
||
body: JSON.stringify({ session_id: sessionId, content, type }),
|
||
})
|
||
const json = await res.json()
|
||
if (json.code !== 0) {
|
||
throw new Error(json.message || '发送失败')
|
||
}
|
||
return json.data
|
||
}
|
||
|
||
const uploadVisitorImage = async (file: File) => {
|
||
if (!sessionId || !visitorToken) throw new Error('会话未就绪')
|
||
const form = new FormData()
|
||
form.append('file', file)
|
||
form.append('session_id', String(sessionId))
|
||
form.append('visitor_token', visitorToken)
|
||
const res = await fetch('/api/widget/upload', {
|
||
method: 'POST',
|
||
headers: { 'X-Visitor-Token': visitorToken },
|
||
body: form,
|
||
})
|
||
const json = await res.json()
|
||
if (json.code !== 0) throw new Error(json.message || '上传失败')
|
||
return json.data as { url: string; thumb_url: string }
|
||
}
|
||
|
||
const sendMessage = async (text: string) => {
|
||
if (!text.trim() || sending || sessionEnded) return
|
||
if (!agentsOnline) {
|
||
setSendError('当前无客服在线，请使用下方留言表单')
|
||
return
|
||
}
|
||
const content = text.trim()
|
||
setInput('')
|
||
setSendError('')
|
||
setSending(true)
|
||
|
||
const localMsg: Message = {
|
||
id: -Date.now(),
|
||
sender: 'visitor',
|
||
content,
|
||
type: 'text',
|
||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||
}
|
||
setMessages(prev => [...prev, localMsg])
|
||
|
||
try {
|
||
await postMessage(content, 'text')
|
||
await loadMessages(sessionId || undefined)
|
||
} catch (e) {
|
||
setSendError(e instanceof Error ? e.message : '发送失败')
|
||
setMessages(prev => prev.filter(m => m.id !== localMsg.id))
|
||
} finally {
|
||
setSending(false)
|
||
}
|
||
}
|
||
|
||
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 || !agentsOnline) return
|
||
const okTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
|
||
if (!okTypes.includes(file.type)) {
|
||
setSendError('仅支持 jpg、png、gif、webp 图片')
|
||
return
|
||
}
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
setSendError('图片不能超过 10 MB')
|
||
return
|
||
}
|
||
setSendError('')
|
||
if (pendingImage?.preview) URL.revokeObjectURL(pendingImage.preview)
|
||
setPendingImage({ file, preview: URL.createObjectURL(file) })
|
||
}
|
||
|
||
const sendImage = async () => {
|
||
if (!pendingImage || sending || sessionEnded || !agentsOnline) return
|
||
setSending(true)
|
||
setSendError('')
|
||
try {
|
||
const uploaded = await uploadVisitorImage(pendingImage.file)
|
||
const localMsg: Message = {
|
||
id: -Date.now(),
|
||
sender: 'visitor',
|
||
content: uploaded.url,
|
||
type: 'image',
|
||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||
}
|
||
setMessages(prev => [...prev, localMsg])
|
||
URL.revokeObjectURL(pendingImage.preview)
|
||
setPendingImage(null)
|
||
await postMessage(uploaded.url, 'image')
|
||
await loadMessages(sessionId || undefined)
|
||
} catch (e) {
|
||
setSendError(e instanceof Error ? e.message : '图片发送失败')
|
||
} finally {
|
||
setSending(false)
|
||
}
|
||
}
|
||
|
||
const handleOpen = () => {
|
||
setOpen(true)
|
||
setShowRating(sessionEnded && !rated)
|
||
}
|
||
|
||
const handleClose = () => {
|
||
setOpen(false)
|
||
notifyHost('kefu-widget-close')
|
||
if (sessionEnded && !rated) setShowRating(true)
|
||
}
|
||
|
||
const handleMinimize = () => {
|
||
setOpen(false)
|
||
notifyHost('kefu-widget-minimize')
|
||
}
|
||
|
||
const submitRating = async () => {
|
||
if (!sessionId || !visitorToken || rated || ratingSubmitting) return
|
||
if (ratingScore < 1 || ratingScore > 5) {
|
||
setSendError('请先点击星星选择评分')
|
||
return
|
||
}
|
||
setRatingSubmitting(true)
|
||
setSendError('')
|
||
try {
|
||
const res = await fetch('/api/widget/rating', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'X-Visitor-Token': visitorToken },
|
||
body: JSON.stringify({
|
||
session_id: sessionId,
|
||
score: ratingScore,
|
||
text: ratingText.trim(),
|
||
}),
|
||
})
|
||
const json = await res.json()
|
||
if (json.code === 0) {
|
||
setRated(true)
|
||
setShowRating(false)
|
||
setRatingScore(0)
|
||
setRatingText('')
|
||
setSendError('')
|
||
} else {
|
||
setSendError(json.message || '评价提交失败')
|
||
}
|
||
} catch {
|
||
setSendError('评价提交失败，请稍后重试')
|
||
} finally {
|
||
setRatingSubmitting(false)
|
||
}
|
||
}
|
||
|
||
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'
|
||
|
||
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" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h1 className="m-0 text-[15px] font-semibold leading-tight text-white">{displayName || '在线客服'}</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"
|
||
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}
|
||
className="w-7 h-7 rounded bg-white/15 hover:bg-white/25 border-0 cursor-pointer flex items-center justify-center text-white"
|
||
aria-label="最小化"
|
||
>
|
||
<MinusOutlined className="text-xs" />
|
||
</button>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={handleClose}
|
||
className="w-7 h-7 rounded bg-white/15 hover:bg-white/25 border-0 cursor-pointer flex items-center justify-center text-white"
|
||
aria-label="关闭"
|
||
>
|
||
<CloseOutlined className="text-xs" />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section className="flex-1 overflow-y-auto p-4 flex flex-col gap-3 bg-neutral-50 no-scrollbar">
|
||
{showWelcome && (
|
||
<div className="flex flex-col items-start gap-2 max-w-[90%]">
|
||
{agentsOnline ? (
|
||
welcomeSegments.map((seg, i) =>
|
||
seg.type === 'image' ? (
|
||
<div
|
||
key={`w-${i}`}
|
||
className="rounded-xl bg-white border border-neutral-200 p-1.5"
|
||
>
|
||
<ChatImage
|
||
src={seg.content}
|
||
alt="欢迎图"
|
||
className="max-w-[220px] max-h-[220px]"
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div
|
||
key={`w-${i}`}
|
||
className="px-4 py-2.5 rounded-xl bg-white border border-neutral-200 text-[13px] text-neutral-700 leading-normal"
|
||
>
|
||
{looksLikeHtml(seg.content) ? (
|
||
<SafeHtml html={seg.content} />
|
||
) : (
|
||
<MarkdownBody>{seg.content}</MarkdownBody>
|
||
)}
|
||
</div>
|
||
),
|
||
)
|
||
) : (
|
||
<div className="px-4 py-2.5 rounded-xl bg-white border border-neutral-200 text-[13px] text-neutral-600 leading-normal">
|
||
{looksLikeHtml(offlinePrompt) ? (
|
||
<SafeHtml html={offlinePrompt} />
|
||
) : (
|
||
<MarkdownBody>{offlinePrompt}</MarkdownBody>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{showQuick && (
|
||
<div className="flex flex-wrap gap-2 justify-center">
|
||
{defaultQuickQuestions.map((q, i) => (
|
||
<button
|
||
key={i}
|
||
type="button"
|
||
onClick={() => sendMessage(q)}
|
||
disabled={!sessionId || sending || sessionEnded}
|
||
className="px-3 py-1 rounded-full border border-[#2563eb] bg-white text-[#2563eb] text-xs cursor-pointer whitespace-nowrap hover:bg-[#eff6ff] disabled:opacity-50"
|
||
>
|
||
{q}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{messages.map(msg => (
|
||
msg.sender === 'visitor' ? (
|
||
<div key={msg.id} className="flex flex-col items-end max-w-[85%] ml-auto gap-1">
|
||
<div className={`rounded-xl bg-[#2563eb] text-white text-[13px] leading-normal ${msg.type === 'image' ? 'p-1.5' : 'px-4 py-3'}`}>
|
||
{msg.type === 'image' ? (
|
||
<ChatImage src={msg.content} alt="图片" className="max-w-[180px] max-h-[180px]" />
|
||
) : (
|
||
<MarkdownBody tone="inverse">{msg.content}</MarkdownBody>
|
||
)}
|
||
</div>
|
||
{msg.time && (
|
||
<span className="text-[11px] text-neutral-400 pr-0.5">{msg.time}</span>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div key={msg.id} className="flex gap-2 max-w-[85%]">
|
||
<div className="w-8 h-8 rounded-full bg-neutral-200 flex items-center justify-center shrink-0 mt-0.5">
|
||
<CustomerServiceOutlined className="text-xs text-neutral-500" />
|
||
</div>
|
||
<div className="min-w-0 flex flex-col gap-1">
|
||
<div className={`rounded-xl bg-white border border-neutral-200 text-[13px] text-neutral-800 leading-normal ${msg.type === 'image' ? 'p-1.5' : 'px-4 py-3'}`}>
|
||
{msg.type === 'image' ? (
|
||
<ChatImage src={msg.content} alt="图片" className="max-w-[180px] max-h-[180px]" />
|
||
) : (
|
||
<MarkdownBody>{msg.content}</MarkdownBody>
|
||
)}
|
||
</div>
|
||
{msg.time && (
|
||
<span className="text-[11px] text-neutral-400 pl-0.5">{msg.time}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
))}
|
||
|
||
{agentTyping && (
|
||
<>
|
||
<div className="flex gap-2 max-w-[85%]">
|
||
<div className="w-8 h-8 rounded-full bg-neutral-200 flex items-center justify-center shrink-0 mt-0.5">
|
||
<CustomerServiceOutlined className="text-xs text-neutral-500" />
|
||
</div>
|
||
<div className="px-4 py-3 rounded-xl bg-white border border-neutral-200 flex items-center gap-1">
|
||
<span className="typing-dot" style={{ animationDelay: '0s' }} />
|
||
<span className="typing-dot" style={{ animationDelay: '0.2s' }} />
|
||
<span className="typing-dot" style={{ animationDelay: '0.4s' }} />
|
||
</div>
|
||
</div>
|
||
<p className="text-left text-xs text-neutral-400 m-0 pl-[42px]">客服正在输入...</p>
|
||
</>
|
||
)}
|
||
<div ref={chatEndRef} />
|
||
</section>
|
||
|
||
<footer className="shrink-0 px-4 py-3 bg-white border-t border-neutral-200">
|
||
{sendError && <div className="mb-2 text-xs text-red-500">{sendError}</div>}
|
||
|
||
{sessionEnded && (
|
||
<div className="mb-3 space-y-2">
|
||
{!rated && (
|
||
<div className="rounded-lg bg-amber-50 border border-amber-100 px-3 py-2 flex items-center justify-between gap-2">
|
||
<span className="text-xs text-amber-800">会话已结束，欢迎为本次服务打分</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowRating(true)}
|
||
className="shrink-0 text-xs font-medium text-amber-900 bg-amber-100 hover:bg-amber-200 border-0 rounded-md px-2 py-1 cursor-pointer"
|
||
>
|
||
去评价
|
||
</button>
|
||
</div>
|
||
)}
|
||
<button
|
||
type="button"
|
||
onClick={() => { void startNewSession() }}
|
||
disabled={sending}
|
||
className="w-full h-10 rounded-xl border-0 bg-[#2563eb] hover:bg-[#1d4ed8] disabled:opacity-50 cursor-pointer text-white text-sm font-medium"
|
||
>
|
||
{sending ? '正在接入...' : '重新咨询'}
|
||
</button>
|
||
<p className="m-0 text-center text-[11px] text-neutral-400">将开启新会话，历史消息仅保留在本页展示到重新接入前</p>
|
||
</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)}
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{!sessionEnded && pendingImage && agentsOnline && (
|
||
<div className="mb-2 p-2 rounded-lg border border-neutral-200 bg-neutral-50 flex items-center gap-2">
|
||
<img src={pendingImage.preview} alt="预览" className="w-14 h-14 object-cover rounded" />
|
||
<div className="flex-1 min-w-0 text-xs text-neutral-500">确认上传并发送？（自动转 WebP）</div>
|
||
<button
|
||
type="button"
|
||
className="text-xs text-neutral-400 border-0 bg-transparent cursor-pointer"
|
||
onClick={() => {
|
||
URL.revokeObjectURL(pendingImage.preview)
|
||
setPendingImage(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>
|
||
)}
|
||
|
||
{!sessionEnded && agentsOnline && (
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<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 disabled:opacity-40"
|
||
aria-label="发送图片"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={!sessionId || sending}
|
||
>
|
||
<PictureOutlined className="text-base" />
|
||
</button>
|
||
<EmojiPicker
|
||
onSelect={insertEmoji}
|
||
disabled={!sessionId || sending}
|
||
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 disabled:opacity-40"
|
||
placement="topLeft"
|
||
/>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/gif,image/webp"
|
||
className="hidden"
|
||
onChange={e => { handleImageFile(e.target.files?.[0]); e.currentTarget.value = '' }}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{!sessionEnded && (
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
ref={textInputRef}
|
||
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={
|
||
!sessionId
|
||
? '正在连接...'
|
||
: agentsOnline
|
||
? '输入消息...'
|
||
: '描述您的问题（留言）'
|
||
}
|
||
value={input}
|
||
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') {
|
||
if (agentsOnline) sendMessage(input)
|
||
}
|
||
}}
|
||
disabled={sending || !sessionId}
|
||
/>
|
||
{agentsOnline ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => sendMessage(input)}
|
||
disabled={!input.trim() || sending || !sessionId}
|
||
className="w-10 h-10 rounded-full border-0 bg-[#2563eb] hover:bg-[#1d4ed8] disabled:opacity-40 cursor-pointer flex items-center justify-center shrink-0"
|
||
aria-label="发送"
|
||
>
|
||
<SendOutlined className="text-white text-sm" />
|
||
</button>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
onClick={submitLeaveMessage}
|
||
disabled={sending || !sessionId}
|
||
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>
|
||
|
||
{showRating && (
|
||
<div className="absolute inset-0 bg-black/40 flex items-center justify-center z-10 p-4">
|
||
<div className="bg-white rounded-xl p-5 w-full max-w-xs text-center shadow-lg">
|
||
<div className="text-lg font-semibold text-neutral-800 mb-1">本次服务如何？</div>
|
||
<div className="text-sm text-neutral-400 mb-3">先点亮星级，可补充感受后再提交</div>
|
||
<div className="flex justify-center gap-1.5 mb-1">
|
||
{[1, 2, 3, 4, 5].map(star => {
|
||
const active = star <= (hoverStar || ratingScore)
|
||
return (
|
||
<StarFilled
|
||
key={star}
|
||
className="text-2xl cursor-pointer transition-colors"
|
||
style={{ color: active ? '#facc15' : '#e2e8f0' }}
|
||
onMouseEnter={() => setHoverStar(star)}
|
||
onMouseLeave={() => setHoverStar(0)}
|
||
onClick={() => {
|
||
setRatingScore(star)
|
||
setSendError('')
|
||
}}
|
||
/>
|
||
)
|
||
})}
|
||
</div>
|
||
<div className="text-xs text-neutral-400 mb-3 h-4">
|
||
{ratingScore > 0 ? `${ratingScore} 星` : '请选择 1～5 星'}
|
||
</div>
|
||
<div className="flex flex-wrap gap-1.5 justify-center mb-3">
|
||
{ratingPresets.map(preset => {
|
||
const selected = ratingText === preset
|
||
return (
|
||
<button
|
||
key={preset}
|
||
type="button"
|
||
onClick={() => setRatingText(prev => (prev === preset ? '' : preset))}
|
||
className={`px-2 py-1 rounded-full text-[11px] border cursor-pointer transition-colors ${
|
||
selected
|
||
? 'bg-[#2563eb] border-[#2563eb] text-white'
|
||
: 'bg-neutral-50 border-neutral-200 text-neutral-600 hover:border-blue-300 hover:text-blue-600'
|
||
}`}
|
||
>
|
||
{preset}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
<textarea
|
||
className="w-full rounded-lg border border-neutral-200 p-2 text-sm outline-none focus:border-blue-400 mb-3 resize-none text-left"
|
||
rows={3}
|
||
maxLength={500}
|
||
value={ratingText}
|
||
onChange={e => setRatingText(e.target.value)}
|
||
placeholder="可选：点击上方标签快速填入，或自行输入"
|
||
/>
|
||
<button
|
||
type="button"
|
||
disabled={ratingSubmitting || ratingScore < 1}
|
||
onClick={() => { void submitRating() }}
|
||
className="w-full h-10 rounded-xl border-0 bg-[#2563eb] hover:bg-[#1d4ed8] disabled:opacity-40 cursor-pointer text-white text-sm font-medium mb-2"
|
||
>
|
||
{ratingSubmitting ? '提交中...' : '提交评价'}
|
||
</button>
|
||
<div className="flex flex-col gap-1.5">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setShowRating(false)
|
||
setRatingScore(0)
|
||
setHoverStar(0)
|
||
}}
|
||
className="text-sm text-neutral-400 hover:text-neutral-600 border-0 bg-transparent cursor-pointer"
|
||
>
|
||
跳过
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={sending || ratingSubmitting}
|
||
onClick={() => {
|
||
setShowRating(false)
|
||
setRatingScore(0)
|
||
setHoverStar(0)
|
||
void startNewSession()
|
||
}}
|
||
className="text-sm text-[#2563eb] hover:text-[#1d4ed8] border-0 bg-transparent cursor-pointer disabled:opacity-50"
|
||
>
|
||
跳过并重新咨询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</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}
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default VisitorChat
|