feat: implement Kefu message list component and related functionality
- Add KefuMessageList component for displaying chat messages with support for loading older messages and scrolling behavior. - Introduce ImWidgetConfig type and fetchImWidgetConfig function for retrieving widget configuration. - Create im-realtime module for managing WebSocket connections and handling real-time events. - Implement kefu-host-bridge for communication between the chat widget and the host application. - Establish kefu-chat store using Zustand for managing chat state, including message handling, socket connection, and notifications. - Enhance message handling with support for image uploads and attachments.
This commit is contained in:
mlogclub
@@ -0,0 +1,5 @@
|
||||
import { KefuChatShell } from "@/components/kefu/chat-shell"
|
||||
|
||||
export default function Page() {
|
||||
return <KefuChatShell />
|
||||
}
|
||||
@@ -0,0 +1,314 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Maximize2Icon,
|
||||
Minimize2Icon,
|
||||
MinusIcon,
|
||||
RotateCwIcon,
|
||||
XIcon,
|
||||
} from "lucide-react"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { useShallow } from "zustand/react/shallow"
|
||||
|
||||
import { KefuConnectionStatus } from "@/components/kefu/connection-status"
|
||||
import { KefuMessageEditor } from "@/components/kefu/message-editor"
|
||||
import {
|
||||
KefuMessageList,
|
||||
type KefuMessageListHandle,
|
||||
} from "@/components/kefu/message-list"
|
||||
import {
|
||||
bindKefuHostBridge,
|
||||
requestKefuHostClose,
|
||||
requestKefuHostMinimize,
|
||||
requestKefuHostToggleMaximize,
|
||||
} from "@/lib/kefu-host-bridge"
|
||||
import { useKefuChatStore } from "@/lib/stores/kefu-chat"
|
||||
|
||||
export function KefuChatShell() {
|
||||
const messageListRef = useRef<KefuMessageListHandle | null>(null)
|
||||
const [isMaximized, setIsMaximized] = useState(false)
|
||||
const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false)
|
||||
const [isClosingConversation, setIsClosingConversation] = useState(false)
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
themeColor,
|
||||
conversation,
|
||||
messages,
|
||||
messagesHasMore,
|
||||
messagesLoadingMore,
|
||||
loadOlderMessages,
|
||||
status,
|
||||
error,
|
||||
isOpen,
|
||||
isVisible,
|
||||
setIsOpen,
|
||||
setIsVisible,
|
||||
bootstrap,
|
||||
handleSendMessage,
|
||||
uploadMessageImage,
|
||||
sendAttachment,
|
||||
retry,
|
||||
disconnectSocket,
|
||||
markConversationRead,
|
||||
closeConversation,
|
||||
} = useKefuChatStore(
|
||||
useShallow((state) => ({
|
||||
title: state.title,
|
||||
subtitle: state.subtitle,
|
||||
themeColor: state.themeColor,
|
||||
conversation: state.conversation,
|
||||
messages: state.messages,
|
||||
messagesHasMore: state.messagesHasMore,
|
||||
messagesLoadingMore: state.messagesLoadingMore,
|
||||
loadOlderMessages: state.loadOlderMessages,
|
||||
status: state.status,
|
||||
error: state.error,
|
||||
isOpen: state.isOpen,
|
||||
isVisible: state.isVisible,
|
||||
setIsOpen: state.setIsOpen,
|
||||
setIsVisible: state.setIsVisible,
|
||||
bootstrap: state.bootstrap,
|
||||
handleSendMessage: state.handleSendMessage,
|
||||
uploadMessageImage: state.uploadMessageImage,
|
||||
sendAttachment: state.sendAttachment,
|
||||
retry: state.retry,
|
||||
disconnectSocket: state.disconnectSocket,
|
||||
markConversationRead: state.markConversationRead,
|
||||
closeConversation: state.closeConversation,
|
||||
}))
|
||||
)
|
||||
|
||||
const maybeMarkConversationRead = useCallback(() => {
|
||||
if (!isVisible || !conversation || typeof document === "undefined") {
|
||||
return
|
||||
}
|
||||
if (document.visibilityState !== "visible") {
|
||||
return
|
||||
}
|
||||
void markConversationRead().catch((readError) => {
|
||||
console.error("Failed to mark kefu conversation read", readError)
|
||||
})
|
||||
}, [conversation, isVisible, markConversationRead])
|
||||
|
||||
useEffect(() => {
|
||||
return bindKefuHostBridge({
|
||||
onOpen: () => {
|
||||
setIsOpen(true)
|
||||
setIsVisible(true)
|
||||
},
|
||||
onMinimize: () => {
|
||||
setIsVisible(false)
|
||||
},
|
||||
onMaximizedChange: (nextIsMaximized) => {
|
||||
setIsMaximized(nextIsMaximized)
|
||||
},
|
||||
})
|
||||
}, [setIsOpen, setIsVisible])
|
||||
|
||||
useEffect(() => {
|
||||
bootstrap()
|
||||
|
||||
return () => {
|
||||
if (!isOpen) {
|
||||
disconnectSocket()
|
||||
}
|
||||
}
|
||||
}, [isOpen, bootstrap, disconnectSocket])
|
||||
|
||||
useEffect(() => {
|
||||
maybeMarkConversationRead()
|
||||
}, [maybeMarkConversationRead, messages.length])
|
||||
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.visibilityState === "visible") {
|
||||
maybeMarkConversationRead()
|
||||
}
|
||||
}
|
||||
const handleFocus = () => {
|
||||
maybeMarkConversationRead()
|
||||
}
|
||||
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange)
|
||||
window.addEventListener("focus", handleFocus)
|
||||
return () => {
|
||||
document.removeEventListener("visibilitychange", handleVisibilityChange)
|
||||
window.removeEventListener("focus", handleFocus)
|
||||
}
|
||||
}, [maybeMarkConversationRead])
|
||||
|
||||
async function handleSend(content: string) {
|
||||
await handleSendMessage(content)
|
||||
messageListRef.current?.scrollToBottom()
|
||||
}
|
||||
|
||||
function handleMinimize() {
|
||||
setIsVisible(false)
|
||||
requestKefuHostMinimize()
|
||||
}
|
||||
|
||||
function handleToggleMaximize() {
|
||||
requestKefuHostToggleMaximize()
|
||||
}
|
||||
|
||||
async function confirmCloseConversation() {
|
||||
if (isClosingConversation) {
|
||||
return
|
||||
}
|
||||
setIsClosingConversation(true)
|
||||
try {
|
||||
if (conversation?.id) {
|
||||
await closeConversation()
|
||||
}
|
||||
setIsCloseDialogOpen(false)
|
||||
requestKefuHostClose()
|
||||
} catch (closeError) {
|
||||
window.alert(closeError instanceof Error ? closeError.message : "关闭会话失败")
|
||||
} finally {
|
||||
setIsClosingConversation(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCloseDialogOpen) {
|
||||
return
|
||||
}
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape" && !isClosingConversation) {
|
||||
setIsCloseDialogOpen(false)
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [isCloseDialogOpen, isClosingConversation])
|
||||
|
||||
return (
|
||||
<main
|
||||
className="cs-agent-shell relative flex h-screen overflow-hidden bg-(--background)"
|
||||
style={{ "--primary": themeColor } as React.CSSProperties}
|
||||
>
|
||||
<section className="cs-agent-panel flex h-full w-full flex-col overflow-hidden border border-white/70">
|
||||
<header className="relative shrink-0 overflow-hidden border-b border-white/60 px-4 pb-3 pt-3 shadow-[0_10px_24px_rgba(15,23,42,0.05)]">
|
||||
<div className="absolute inset-x-0 top-0 h-20 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.14),transparent_52%)]" />
|
||||
<div className="relative flex items-center justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-[16px] font-semibold tracking-[0.01em] text-slate-950">
|
||||
{title}
|
||||
</div>
|
||||
<div className="mt-1 text-[12px] text-slate-500">{subtitle}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{status !== "connected" ? (
|
||||
<KefuConnectionStatus status={status} />
|
||||
) : null}
|
||||
<div className="inline-flex items-center gap-1 rounded-[18px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(241,245,249,0.82))] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_12px_28px_rgba(15,23,42,0.07)] backdrop-blur-xl">
|
||||
<button
|
||||
type="button"
|
||||
onClick={retry}
|
||||
aria-label="重新连接"
|
||||
title="重新连接"
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(239,246,255,0.96))] hover:text-sky-600 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(56,189,248,0.16)]"
|
||||
>
|
||||
<RotateCwIcon className="size-3.75 transition duration-200 group-hover:rotate-[-20deg]" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleMinimize}
|
||||
aria-label="收起聊天窗口"
|
||||
title="收起聊天窗口"
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96))] hover:text-slate-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(15,23,42,0.10)]"
|
||||
>
|
||||
<MinusIcon className="size-3.75 transition duration-200 group-hover:scale-x-[0.88]" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleToggleMaximize}
|
||||
aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
|
||||
title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(238,249,244,0.96))] hover:text-emerald-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(16,185,129,0.14)]"
|
||||
>
|
||||
{isMaximized ? (
|
||||
<Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" />
|
||||
) : (
|
||||
<Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsCloseDialogOpen(true)}
|
||||
aria-label="关闭聊天窗口"
|
||||
title="关闭聊天窗口"
|
||||
className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-rose-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,241,242,0.98))] hover:text-rose-600 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(244,63,94,0.16)]"
|
||||
>
|
||||
<XIcon className="size-3.75 transition duration-200 group-hover:scale-[0.92]" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className=".cs-agent-grid-bg grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden">
|
||||
<KefuMessageList
|
||||
ref={messageListRef}
|
||||
messages={messages}
|
||||
onNearBottomVisible={maybeMarkConversationRead}
|
||||
hasMoreOlder={messagesHasMore}
|
||||
loadingOlder={messagesLoadingMore}
|
||||
onLoadOlder={loadOlderMessages}
|
||||
/>
|
||||
<KefuMessageEditor
|
||||
disabled={!conversation}
|
||||
onSend={handleSend}
|
||||
onUploadImage={uploadMessageImage}
|
||||
onSendAttachment={sendAttachment}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="border-t border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
{isCloseDialogOpen ? (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.16),transparent_38%),rgba(15,23,42,0.24)] px-5 backdrop-blur-sm">
|
||||
<div className="cs-agent-fade-up w-full max-w-[320px] rounded-[26px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(241,245,249,0.94))] p-5 shadow-[0_28px_80px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.92)]">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[15px] font-semibold tracking-[0.01em] text-slate-950">
|
||||
结束当前对话？
|
||||
</div>
|
||||
<div className="mt-1.5 text-[12px] leading-5 text-slate-500">
|
||||
结束会话，客服将无法再查看您的消息记录，如需再次联系请重新发起对话。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isClosingConversation}
|
||||
onClick={() => setIsCloseDialogOpen(false)}
|
||||
className="inline-flex h-9 items-center justify-center rounded-2xl border border-slate-200/80 bg-white/80 px-4 text-[12px] font-medium text-slate-600 shadow-[0_10px_20px_rgba(15,23,42,0.05)] transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white hover:text-slate-800 disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
继续对话
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isClosingConversation}
|
||||
onClick={() => void confirmCloseConversation()}
|
||||
className="inline-flex h-9 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,#f43f5e,#fb7185)] px-4 text-[12px] font-semibold text-white shadow-[0_14px_28px_rgba(244,63,94,0.24)] transition hover:-translate-y-0.5 hover:opacity-92 disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{isClosingConversation ? "结束中..." : "确认结束"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
"use client"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type KefuConnectionStatusProps = {
|
||||
status: "connecting" | "connected" | "disconnected"
|
||||
}
|
||||
|
||||
const statusText: Record<KefuConnectionStatusProps["status"], string> = {
|
||||
connecting: "连接中",
|
||||
connected: "在线服务",
|
||||
disconnected: "连接已断开",
|
||||
}
|
||||
|
||||
export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
|
||||
const toneClass =
|
||||
status === "connected"
|
||||
? "border-emerald-200/80 bg-emerald-50 text-emerald-700"
|
||||
: status === "connecting"
|
||||
? "border-amber-200/80 bg-amber-50 text-amber-700"
|
||||
: "border-slate-200/80 bg-slate-100 text-slate-600"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-[0_6px_16px_rgba(15,23,42,0.06)]",
|
||||
toneClass
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-block size-2 rounded-full",
|
||||
status === "connected"
|
||||
? "bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.14)]"
|
||||
: status === "connecting"
|
||||
? "bg-amber-500 shadow-[0_0_0_4px_rgba(245,158,11,0.16)]"
|
||||
: "bg-slate-400 shadow-[0_0_0_4px_rgba(148,163,184,0.14)]"
|
||||
)}
|
||||
/>
|
||||
<span>{statusText[status]}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,368 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { EditorContent, useEditor } from "@tiptap/react"
|
||||
import Image from "@tiptap/extension-image"
|
||||
import Placeholder from "@tiptap/extension-placeholder"
|
||||
import StarterKit from "@tiptap/starter-kit"
|
||||
import { ImageIcon, PaperclipIcon, SendHorizonalIcon } from "lucide-react"
|
||||
|
||||
import { generateUUID } from "@/lib/utils"
|
||||
|
||||
type UploadedImage = {
|
||||
assetId: string
|
||||
provider: string
|
||||
storageKey: string
|
||||
url: string
|
||||
filename?: string
|
||||
}
|
||||
|
||||
const MessageImage = Image.extend({
|
||||
addAttributes() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
dataAssetId: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-asset-id"),
|
||||
renderHTML: (attributes) =>
|
||||
attributes.dataAssetId ? { "data-asset-id": attributes.dataAssetId } : {},
|
||||
},
|
||||
dataProvider: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-provider"),
|
||||
renderHTML: (attributes) =>
|
||||
attributes.dataProvider ? { "data-provider": attributes.dataProvider } : {},
|
||||
},
|
||||
dataStorageKey: {
|
||||
default: null,
|
||||
parseHTML: (element) => element.getAttribute("data-storage-key"),
|
||||
renderHTML: (attributes) =>
|
||||
attributes.dataStorageKey ? { "data-storage-key": attributes.dataStorageKey } : {},
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
type KefuMessageEditorProps = {
|
||||
disabled?: boolean
|
||||
uploadingAsset?: boolean
|
||||
onSend: (html: string) => Promise<void>
|
||||
onUploadImage: (file: File) => Promise<UploadedImage | null>
|
||||
onSendAttachment: (file: File) => Promise<void>
|
||||
}
|
||||
|
||||
export function KefuMessageEditor({
|
||||
disabled = false,
|
||||
uploadingAsset = false,
|
||||
onSend,
|
||||
onUploadImage,
|
||||
onSendAttachment,
|
||||
}: KefuMessageEditorProps) {
|
||||
const [localUploading, setLocalUploading] = useState(false)
|
||||
const imageInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const attachmentInputRef = useRef<HTMLInputElement | null>(null)
|
||||
const onSendRef = useRef(onSend)
|
||||
const onUploadImageRef = useRef(onUploadImage)
|
||||
const onSendAttachmentRef = useRef(onSendAttachment)
|
||||
const shouldRestoreFocusRef = useRef(false)
|
||||
const isUploading = uploadingAsset || localUploading
|
||||
|
||||
useEffect(() => {
|
||||
onSendRef.current = onSend
|
||||
}, [onSend])
|
||||
|
||||
useEffect(() => {
|
||||
onUploadImageRef.current = onUploadImage
|
||||
}, [onUploadImage])
|
||||
|
||||
useEffect(() => {
|
||||
onSendAttachmentRef.current = onSendAttachment
|
||||
}, [onSendAttachment])
|
||||
|
||||
const editor = useEditor({
|
||||
immediatelyRender: false,
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
heading: false,
|
||||
blockquote: false,
|
||||
codeBlock: false,
|
||||
bulletList: false,
|
||||
orderedList: false,
|
||||
horizontalRule: false,
|
||||
}),
|
||||
MessageImage,
|
||||
Placeholder.configure({
|
||||
placeholder: "输入消息，Enter 发送，Shift + Enter 换行",
|
||||
}),
|
||||
],
|
||||
content: "",
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
"min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-[13px] leading-6 text-slate-900 outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-xl [&_img]:object-contain",
|
||||
},
|
||||
handleKeyDown: (_view, event) => {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault()
|
||||
void handleSend()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
handlePaste: (_view, event) => {
|
||||
if (disabled || isUploading) {
|
||||
return false
|
||||
}
|
||||
const imageFile = getClipboardImageFile(event.clipboardData)
|
||||
if (!imageFile) {
|
||||
return false
|
||||
}
|
||||
event.preventDefault()
|
||||
void insertUploadedImage(imageFile)
|
||||
return true
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor) {
|
||||
return
|
||||
}
|
||||
editor.setEditable(!disabled && !isUploading)
|
||||
}, [disabled, editor, isUploading])
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor || disabled || isUploading || !shouldRestoreFocusRef.current) {
|
||||
return
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
editor.commands.focus()
|
||||
})
|
||||
}, [disabled, editor, isUploading])
|
||||
|
||||
async function handleSend() {
|
||||
if (!editor || disabled || isUploading) {
|
||||
return
|
||||
}
|
||||
const html = editor.getHTML()
|
||||
if (!isMeaningfulHTML(html)) {
|
||||
return
|
||||
}
|
||||
await onSendRef.current(html)
|
||||
editor.commands.clearContent(true)
|
||||
}
|
||||
|
||||
async function handleSelectImage(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = event.target.files?.[0]
|
||||
event.target.value = ""
|
||||
if (!file || !editor || disabled || isUploading) {
|
||||
if (editor && shouldRestoreFocusRef.current) {
|
||||
requestAnimationFrame(() => {
|
||||
editor.commands.focus()
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
await insertUploadedImage(file)
|
||||
}
|
||||
|
||||
async function insertUploadedImage(file: File) {
|
||||
if (!editor || disabled || isUploading) {
|
||||
return
|
||||
}
|
||||
|
||||
shouldRestoreFocusRef.current = true
|
||||
const objectUrl = URL.createObjectURL(file)
|
||||
const placeholderId = `uploading-${generateUUID()}`
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.setImage({
|
||||
src: objectUrl,
|
||||
alt: file.name || "uploading-image",
|
||||
title: placeholderId,
|
||||
})
|
||||
.run()
|
||||
|
||||
try {
|
||||
setLocalUploading(true)
|
||||
const uploaded = await onUploadImageRef.current(file)
|
||||
if (!uploaded?.url) {
|
||||
removeImageByTitle(editor, placeholderId)
|
||||
return
|
||||
}
|
||||
replaceImageSourceByTitle(editor, placeholderId, uploaded)
|
||||
} finally {
|
||||
setLocalUploading(false)
|
||||
URL.revokeObjectURL(objectUrl)
|
||||
requestAnimationFrame(() => {
|
||||
if (!disabled && shouldRestoreFocusRef.current) {
|
||||
editor.commands.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSelectAttachment(
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) {
|
||||
const file = event.target.files?.[0]
|
||||
event.target.value = ""
|
||||
if (!file || disabled || isUploading) {
|
||||
if (editor && shouldRestoreFocusRef.current) {
|
||||
requestAnimationFrame(() => {
|
||||
editor.commands.focus()
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
shouldRestoreFocusRef.current = editor?.isFocused ?? true
|
||||
setLocalUploading(true)
|
||||
try {
|
||||
await onSendAttachmentRef.current(file)
|
||||
} finally {
|
||||
setLocalUploading(false)
|
||||
requestAnimationFrame(() => {
|
||||
if (editor && !disabled && shouldRestoreFocusRef.current) {
|
||||
editor.commands.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-3 pb-3 pt-2">
|
||||
<div className="rounded-xl border border-white/60 bg-white/78 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.05)] backdrop-blur">
|
||||
<input
|
||||
ref={imageInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleSelectImage}
|
||||
/>
|
||||
<input
|
||||
ref={attachmentInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={handleSelectAttachment}
|
||||
/>
|
||||
<div className="min-h-10">
|
||||
<EditorContent editor={editor} />
|
||||
</div>
|
||||
<div className="mt-1.5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(event) => event.preventDefault()}
|
||||
onClick={() => {
|
||||
shouldRestoreFocusRef.current = editor?.isFocused ?? true
|
||||
imageInputRef.current?.click()
|
||||
}}
|
||||
disabled={disabled || isUploading}
|
||||
aria-label={isUploading ? "图片上传中" : "发送图片"}
|
||||
className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl border border-slate-200/80 bg-white/90 text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.05)] transition duration-200 hover:-translate-y-0.5 hover:text-slate-700 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-300"
|
||||
>
|
||||
<ImageIcon className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(event) => event.preventDefault()}
|
||||
onClick={() => {
|
||||
shouldRestoreFocusRef.current = editor?.isFocused ?? true
|
||||
attachmentInputRef.current?.click()
|
||||
}}
|
||||
disabled={disabled || isUploading}
|
||||
aria-label={isUploading ? "附件上传中" : "发送附件"}
|
||||
className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl border border-slate-200/80 bg-white/90 text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.05)] transition duration-200 hover:-translate-y-0.5 hover:text-slate-700 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-300"
|
||||
>
|
||||
<PaperclipIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="text-[10px] text-slate-400">Enter 发送</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleSend()}
|
||||
disabled={disabled || isUploading}
|
||||
aria-label="发送"
|
||||
className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[linear-gradient(135deg,var(--primary),color-mix(in_srgb,var(--primary)_75%,white_25%))] text-white shadow-[0_10px_20px_color-mix(in_srgb,var(--primary)_28%,transparent)] transition duration-200 hover:-translate-y-0.5 hover:brightness-105 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
|
||||
>
|
||||
<SendHorizonalIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function isMeaningfulHTML(html: string) {
|
||||
const normalized = html
|
||||
.replace(/<p><\/p>/g, "")
|
||||
.replace(/<p><br><\/p>/g, "")
|
||||
.replace(/\s+/g, "")
|
||||
if (/<img[\s\S]*?>/i.test(normalized)) {
|
||||
return true
|
||||
}
|
||||
const plainText = normalized.replace(/<[^>]+>/g, "").trim()
|
||||
return plainText !== ""
|
||||
}
|
||||
|
||||
function getClipboardImageFile(data: DataTransfer | null) {
|
||||
if (!data) {
|
||||
return null
|
||||
}
|
||||
|
||||
for (const item of Array.from(data.items)) {
|
||||
if (item.kind === "file" && item.type.startsWith("image/")) {
|
||||
return item.getAsFile()
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function removeImageByTitle(editor: NonNullable<ReturnType<typeof useEditor>>, title: string) {
|
||||
const { state } = editor
|
||||
let targetPos: number | null = null
|
||||
state.doc.descendants((node, pos) => {
|
||||
if (node.type.name === "image" && node.attrs.title === title) {
|
||||
targetPos = pos
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
if (targetPos === null) {
|
||||
return
|
||||
}
|
||||
editor.chain().focus().deleteRange({ from: targetPos, to: targetPos + 1 }).run()
|
||||
}
|
||||
|
||||
function replaceImageSourceByTitle(
|
||||
editor: NonNullable<ReturnType<typeof useEditor>>,
|
||||
title: string,
|
||||
uploaded: UploadedImage
|
||||
) {
|
||||
const { state, view } = editor
|
||||
let targetPos: number | null = null
|
||||
state.doc.descendants((node, pos) => {
|
||||
if (node.type.name === "image" && node.attrs.title === title) {
|
||||
targetPos = pos
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
if (targetPos === null) {
|
||||
return
|
||||
}
|
||||
const transaction = view.state.tr.setNodeMarkup(targetPos, undefined, {
|
||||
...view.state.doc.nodeAt(targetPos)?.attrs,
|
||||
src: uploaded.url,
|
||||
alt: uploaded.filename || "image",
|
||||
dataAssetId: uploaded.assetId,
|
||||
dataProvider: uploaded.provider,
|
||||
dataStorageKey: uploaded.storageKey,
|
||||
title: "",
|
||||
})
|
||||
view.dispatch(transaction)
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import {
|
||||
forwardRef,
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
} from "react"
|
||||
|
||||
import { ImMessageHTML } from "@/components/im-message-html"
|
||||
import { useImageLightbox } from "@/components/image-lightbox"
|
||||
import type { ImMessage } from "@/lib/api/im"
|
||||
import { renderIMMessageHTML } from "@/lib/im-message"
|
||||
import { cn, formatDateTime } from "@/lib/utils"
|
||||
|
||||
type KefuMessageListProps = {
|
||||
messages: ImMessage[]
|
||||
onNearBottomVisible?: () => void
|
||||
hasMoreOlder?: boolean
|
||||
loadingOlder?: boolean
|
||||
onLoadOlder?: () => Promise<void>
|
||||
}
|
||||
|
||||
export type KefuMessageListHandle = {
|
||||
scrollToBottom: () => void
|
||||
}
|
||||
|
||||
function getDayKey(value?: string) {
|
||||
if (!value) {
|
||||
return "unknown"
|
||||
}
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value.slice(0, 10)
|
||||
}
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
|
||||
date.getDate()
|
||||
).padStart(2, "0")}`
|
||||
}
|
||||
|
||||
function getTimelineLabel(value?: string) {
|
||||
if (!value) {
|
||||
return "刚刚"
|
||||
}
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value
|
||||
}
|
||||
const currentDayKey = getDayKey(value)
|
||||
const todayDayKey = getDayKey(new Date().toISOString())
|
||||
const timeText = `${String(date.getHours()).padStart(2, "0")}:${String(
|
||||
date.getMinutes()
|
||||
).padStart(2, "0")}`
|
||||
if (currentDayKey === todayDayKey) {
|
||||
return `今天 ${timeText}`
|
||||
}
|
||||
return `${currentDayKey} ${timeText}`
|
||||
}
|
||||
|
||||
export const KefuMessageList = forwardRef<KefuMessageListHandle, KefuMessageListProps>(
|
||||
function KefuMessageList(
|
||||
{
|
||||
messages,
|
||||
onNearBottomVisible,
|
||||
hasMoreOlder = false,
|
||||
loadingOlder = false,
|
||||
onLoadOlder,
|
||||
},
|
||||
ref
|
||||
) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const contentRef = useRef<HTMLDivElement>(null)
|
||||
const frameRef = useRef<number | null>(null)
|
||||
const shouldStickToBottomRef = useRef(true)
|
||||
const lastMessageId = messages.at(-1)?.id
|
||||
|
||||
const isNearBottom = useCallback(
|
||||
(element: HTMLElement, threshold = 80) =>
|
||||
element.scrollHeight - element.scrollTop - element.clientHeight <= threshold,
|
||||
[]
|
||||
)
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
const container = containerRef.current
|
||||
if (!container) {
|
||||
return
|
||||
}
|
||||
container.scrollTop = container.scrollHeight
|
||||
}, [])
|
||||
|
||||
const scheduleScrollToBottom = useCallback(
|
||||
(attempts = 4) => {
|
||||
if (frameRef.current !== null) {
|
||||
cancelAnimationFrame(frameRef.current)
|
||||
}
|
||||
|
||||
const run = (remaining: number, previousHeight = -1) => {
|
||||
frameRef.current = requestAnimationFrame(() => {
|
||||
const container = containerRef.current
|
||||
if (!container) {
|
||||
frameRef.current = null
|
||||
return
|
||||
}
|
||||
|
||||
const currentHeight = container.scrollHeight
|
||||
scrollToBottom()
|
||||
if (remaining > 1 && currentHeight !== previousHeight) {
|
||||
run(remaining - 1, currentHeight)
|
||||
return
|
||||
}
|
||||
frameRef.current = null
|
||||
})
|
||||
}
|
||||
|
||||
run(attempts)
|
||||
},
|
||||
[scrollToBottom]
|
||||
)
|
||||
|
||||
const handleImageSettled = useCallback(() => {
|
||||
if (shouldStickToBottomRef.current) {
|
||||
scheduleScrollToBottom()
|
||||
onNearBottomVisible?.()
|
||||
}
|
||||
}, [onNearBottomVisible, scheduleScrollToBottom])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
scrollToBottom,
|
||||
}))
|
||||
|
||||
useLayoutEffect(() => {
|
||||
shouldStickToBottomRef.current = true
|
||||
scheduleScrollToBottom()
|
||||
return () => {
|
||||
if (frameRef.current !== null) {
|
||||
cancelAnimationFrame(frameRef.current)
|
||||
frameRef.current = null
|
||||
}
|
||||
}
|
||||
}, [lastMessageId, scheduleScrollToBottom])
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current
|
||||
const content = contentRef.current
|
||||
if (!container || !content) {
|
||||
return
|
||||
}
|
||||
|
||||
const handleScroll = () => {
|
||||
shouldStickToBottomRef.current = isNearBottom(container)
|
||||
if (shouldStickToBottomRef.current) {
|
||||
onNearBottomVisible?.()
|
||||
}
|
||||
}
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
if (shouldStickToBottomRef.current) {
|
||||
scheduleScrollToBottom()
|
||||
}
|
||||
})
|
||||
|
||||
handleScroll()
|
||||
container.addEventListener("scroll", handleScroll)
|
||||
resizeObserver.observe(content)
|
||||
scrollToBottom()
|
||||
|
||||
return () => {
|
||||
container.removeEventListener("scroll", handleScroll)
|
||||
resizeObserver.disconnect()
|
||||
}
|
||||
}, [isNearBottom, onNearBottomVisible, scheduleScrollToBottom, scrollToBottom])
|
||||
|
||||
const handleLoadOlder = useCallback(async () => {
|
||||
if (!onLoadOlder || loadingOlder || !hasMoreOlder) {
|
||||
return
|
||||
}
|
||||
const container = containerRef.current
|
||||
if (!container) {
|
||||
return
|
||||
}
|
||||
const anchor = {
|
||||
height: container.scrollHeight,
|
||||
top: container.scrollTop,
|
||||
}
|
||||
try {
|
||||
await onLoadOlder()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const current = containerRef.current
|
||||
if (!current) {
|
||||
return
|
||||
}
|
||||
current.scrollTop = current.scrollHeight - anchor.height + anchor.top
|
||||
})
|
||||
})
|
||||
}, [hasMoreOlder, loadingOlder, onLoadOlder])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="cs-agent-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4"
|
||||
>
|
||||
<div ref={contentRef} className="flex flex-col gap-4">
|
||||
{hasMoreOlder && onLoadOlder ? (
|
||||
<div className="flex justify-center py-1">
|
||||
<button
|
||||
type="button"
|
||||
disabled={loadingOlder}
|
||||
onClick={() => void handleLoadOlder()}
|
||||
className="rounded-full border border-white/70 bg-white/75 px-3 py-1 text-[11px] font-medium text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.04)] backdrop-blur transition hover:-translate-y-0.5 hover:border-sky-200 hover:text-sky-700 disabled:translate-y-0 disabled:opacity-60"
|
||||
>
|
||||
{loadingOlder ? "加载中…" : "加载更早的消息"}
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{messages.map((message, index) => {
|
||||
const previousMessage = index > 0 ? messages[index - 1] : null
|
||||
const showTimeline =
|
||||
index === 0 ||
|
||||
getDayKey(previousMessage?.sentAt) !== getDayKey(message.sentAt)
|
||||
|
||||
return (
|
||||
<MessageItem
|
||||
key={message.id}
|
||||
message={message}
|
||||
showTimeline={showTimeline}
|
||||
onImageSettled={handleImageSettled}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
type MessageItemProps = {
|
||||
message: ImMessage
|
||||
showTimeline: boolean
|
||||
onImageSettled: () => void
|
||||
}
|
||||
|
||||
const MessageItem = memo(
|
||||
function MessageItem({ message, showTimeline, onImageSettled }: MessageItemProps) {
|
||||
const { open } = useImageLightbox()
|
||||
const isCustomer = message.senderType === "customer"
|
||||
const senderName = isCustomer ? "我" : message.senderName?.trim() || "客服"
|
||||
const avatarSrc =
|
||||
!isCustomer && message.senderAvatar?.trim() ? message.senderAvatar.trim() : undefined
|
||||
const htmlContent = renderIMMessageHTML(message)
|
||||
|
||||
return (
|
||||
<div className="cs-agent-fade-up">
|
||||
{showTimeline ? (
|
||||
<div className="mb-3 flex items-center justify-center">
|
||||
<div className="rounded-full border border-white/70 bg-white/80 px-3 py-1 text-[11px] font-medium text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.04)] backdrop-blur">
|
||||
{getTimelineLabel(message.sentAt)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={cn("flex gap-2", isCustomer ? "justify-end" : "justify-start")}>
|
||||
{!isCustomer && avatarSrc ? (
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
className="size-8 shrink-0 rounded-full object-cover ring-1 ring-white/80"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"flex max-w-[86%] flex-col gap-1",
|
||||
isCustomer ? "items-end" : "items-start"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-1 text-[11px] text-slate-400">
|
||||
<span className="font-medium">{senderName}</span>
|
||||
<span>{formatDateTime(message.sentAt)}</span>
|
||||
{isCustomer ? (
|
||||
<span>{message.agentRead ? "客服已读" : "客服未读"}</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_14px_28px_rgba(15,23,42,0.08)]",
|
||||
isCustomer
|
||||
? "bg-[#A9EA7A] text-[#161616]"
|
||||
: "border border-white/80 bg-white/94 text-slate-900"
|
||||
)}
|
||||
>
|
||||
<ImMessageHTML
|
||||
html={htmlContent}
|
||||
className={cn(
|
||||
isCustomer
|
||||
? "[&_p]:text-[#161616] [&_a]:text-[#161616] [&_a]:underline [&_img]:cursor-zoom-in"
|
||||
: "[&_a]:text-slate-900 [&_a]:underline [&_img]:cursor-zoom-in"
|
||||
)}
|
||||
onImageSettled={onImageSettled}
|
||||
onImageClick={open}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
(prevProps, nextProps) =>
|
||||
prevProps.message === nextProps.message &&
|
||||
prevProps.showTimeline === nextProps.showTimeline &&
|
||||
prevProps.onImageSettled === nextProps.onImageSettled
|
||||
)
|
||||
@@ -10,6 +10,8 @@ export type Paging = {
|
||||
export type PageResult<T> = {
|
||||
results: T[]
|
||||
page: Paging
|
||||
cursor?: string
|
||||
hasMore?: boolean
|
||||
}
|
||||
|
||||
export type ImConversationTag = {
|
||||
@@ -99,6 +101,13 @@ export type ImAsset = {
|
||||
updateUserName: string
|
||||
}
|
||||
|
||||
export type ImWidgetConfig = {
|
||||
title?: string
|
||||
subtitle?: string
|
||||
welcomeText?: string
|
||||
themeColor?: string
|
||||
}
|
||||
|
||||
const VISITOR_STORAGE_KEY = "cs_agent_im_visitor_id"
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL?.trim() || ""
|
||||
@@ -171,6 +180,25 @@ export function createOrMatchImConversation() {
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchImWidgetConfig() {
|
||||
return request<ImWidgetConfig>(
|
||||
`/api/open/im/widget/config${toQueryString({
|
||||
channelId: OPEN_IM_CHANNEL_ID,
|
||||
})}`,
|
||||
{
|
||||
headers: createImHeaders(),
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
export function closeImConversation(conversationId: number) {
|
||||
return request<void>("/api/open/im/conversation/close", {
|
||||
method: "POST",
|
||||
headers: createImHeaders(),
|
||||
body: JSON.stringify({ conversationId }),
|
||||
})
|
||||
}
|
||||
|
||||
export function sendImMessage(payload: {
|
||||
conversationId: number
|
||||
messageType: string
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { createWebSocketBaseUrl } from "@/lib/api/websocket"
|
||||
import { getImVisitorId } from "@/lib/api/im"
|
||||
|
||||
const OPEN_IM_CHANNEL_ID =
|
||||
process.env.NEXT_PUBLIC_OPEN_IM_CHANNEL_ID?.trim() || ""
|
||||
const OPEN_IM_EXTERNAL_SOURCE =
|
||||
process.env.NEXT_PUBLIC_OPEN_IM_EXTERNAL_SOURCE?.trim() || "web_chat"
|
||||
|
||||
export type ImRealtimeEnvelope = {
|
||||
type: string
|
||||
topic?: string
|
||||
data?: {
|
||||
conversationId?: number
|
||||
messageId?: number
|
||||
}
|
||||
payload?: {
|
||||
conversationId?: number
|
||||
messageId?: number
|
||||
}
|
||||
}
|
||||
|
||||
export function createImRealtimeConnection() {
|
||||
const baseUrl = createWebSocketBaseUrl()
|
||||
const externalId = encodeURIComponent(getImVisitorId())
|
||||
const externalSource = encodeURIComponent(OPEN_IM_EXTERNAL_SOURCE)
|
||||
const channelId = encodeURIComponent(OPEN_IM_CHANNEL_ID)
|
||||
return new WebSocket(
|
||||
`${baseUrl}/api/open/im/ws?externalId=${externalId}&externalSource=${externalSource}&channelId=${channelId}`
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
type HostBridgeOptions = {
|
||||
onOpen?: () => void
|
||||
onMinimize?: () => void
|
||||
onMaximizedChange?: (isMaximized: boolean) => void
|
||||
}
|
||||
|
||||
const OPEN_MESSAGE_TYPE = "cs-agent:open"
|
||||
const MINIMIZE_MESSAGE_TYPE = "cs-agent:minimize"
|
||||
const MAXIMIZED_MESSAGE_TYPE = "cs-agent:maximized"
|
||||
const READY_MESSAGE_TYPE = "cs-agent:ready"
|
||||
const REQUEST_MINIMIZE_MESSAGE_TYPE = "cs-agent:request-minimize"
|
||||
const REQUEST_CLOSE_MESSAGE_TYPE = "cs-agent:request-close"
|
||||
const REQUEST_TOGGLE_MAXIMIZE_MESSAGE_TYPE = "cs-agent:request-toggle-maximize"
|
||||
|
||||
export function bindKefuHostBridge(options: HostBridgeOptions = {}) {
|
||||
if (typeof window === "undefined") {
|
||||
return () => undefined
|
||||
}
|
||||
|
||||
if (window.parent && window.parent !== window) {
|
||||
window.parent.postMessage({ type: READY_MESSAGE_TYPE }, "*")
|
||||
}
|
||||
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
const data = event.data as
|
||||
| {
|
||||
type?: string
|
||||
payload?: { isMaximized?: boolean }
|
||||
}
|
||||
| undefined
|
||||
if (!data?.type) {
|
||||
return
|
||||
}
|
||||
|
||||
if (data.type === OPEN_MESSAGE_TYPE) {
|
||||
options.onOpen?.()
|
||||
return
|
||||
}
|
||||
|
||||
if (data.type === MINIMIZE_MESSAGE_TYPE) {
|
||||
options.onMinimize?.()
|
||||
return
|
||||
}
|
||||
|
||||
if (data.type === MAXIMIZED_MESSAGE_TYPE) {
|
||||
options.onMaximizedChange?.(Boolean(data.payload?.isMaximized))
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", handleMessage)
|
||||
return () => window.removeEventListener("message", handleMessage)
|
||||
}
|
||||
|
||||
function postToParent(type: string) {
|
||||
if (typeof window === "undefined") {
|
||||
return
|
||||
}
|
||||
if (window.parent && window.parent !== window) {
|
||||
window.parent.postMessage({ type }, "*")
|
||||
}
|
||||
}
|
||||
|
||||
export function requestKefuHostMinimize() {
|
||||
postToParent(REQUEST_MINIMIZE_MESSAGE_TYPE)
|
||||
}
|
||||
|
||||
export function requestKefuHostClose() {
|
||||
postToParent(REQUEST_CLOSE_MESSAGE_TYPE)
|
||||
}
|
||||
|
||||
export function requestKefuHostToggleMaximize() {
|
||||
postToParent(REQUEST_TOGGLE_MAXIMIZE_MESSAGE_TYPE)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,686 @@
|
||||
"use client"
|
||||
|
||||
import { create } from "zustand"
|
||||
|
||||
import {
|
||||
closeImConversation,
|
||||
createOrMatchImConversation,
|
||||
fetchImMessages,
|
||||
fetchImWidgetConfig,
|
||||
markImMessageRead,
|
||||
sendImMessage,
|
||||
uploadImAttachment,
|
||||
uploadImImage,
|
||||
type ImAsset,
|
||||
type ImConversation,
|
||||
type ImMessage,
|
||||
type ImWidgetConfig,
|
||||
} from "@/lib/api/im"
|
||||
import {
|
||||
createImRealtimeConnection,
|
||||
type ImRealtimeEnvelope,
|
||||
} from "@/lib/im-realtime"
|
||||
import { summarizeIMMessage } from "@/lib/im-message"
|
||||
import { generateUUID } from "@/lib/utils"
|
||||
|
||||
type ChatStatus = "connecting" | "connected" | "disconnected"
|
||||
|
||||
const RECONNECT_BASE_DELAY = 2000
|
||||
const RECONNECT_MAX_DELAY = 30000
|
||||
const DEFAULT_PAGE_LIMIT = 50
|
||||
|
||||
function getNotificationBody(message: ImMessage): string {
|
||||
return summarizeIMMessage(message)
|
||||
}
|
||||
|
||||
function showNotification(title: string, body: string, onClick?: () => void) {
|
||||
if (typeof window === "undefined" || !("Notification" in window)) {
|
||||
return
|
||||
}
|
||||
|
||||
const create = () => {
|
||||
const notification = new Notification(title, { body })
|
||||
notification.onclick = () => {
|
||||
window.focus()
|
||||
onClick?.()
|
||||
notification.close()
|
||||
}
|
||||
}
|
||||
|
||||
if (Notification.permission === "granted") {
|
||||
create()
|
||||
return
|
||||
}
|
||||
|
||||
if (Notification.permission === "default") {
|
||||
void Notification.requestPermission().then((permission) => {
|
||||
if (permission === "granted") {
|
||||
create()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function mergeMessagesByIdAsc(a: ImMessage[], b: ImMessage[]): ImMessage[] {
|
||||
const byId = new Map<number, ImMessage>()
|
||||
for (const message of a) {
|
||||
byId.set(message.id, message)
|
||||
}
|
||||
for (const message of b) {
|
||||
byId.set(message.id, message)
|
||||
}
|
||||
return Array.from(byId.values()).sort((x, y) => x.id - y.id)
|
||||
}
|
||||
|
||||
function parseCursorId(cursor: string): number {
|
||||
const value = Number.parseInt(cursor, 10)
|
||||
return Number.isFinite(value) && value > 0 ? value : 0
|
||||
}
|
||||
|
||||
function cursorFromLoadedMessages(messages: ImMessage[]): string {
|
||||
if (messages.length === 0) {
|
||||
return ""
|
||||
}
|
||||
return String(Math.min(...messages.map((message) => message.id)))
|
||||
}
|
||||
|
||||
function minMessageId(messages: ImMessage[]): number | null {
|
||||
if (messages.length === 0) {
|
||||
return null
|
||||
}
|
||||
return Math.min(...messages.map((message) => message.id))
|
||||
}
|
||||
|
||||
function hasMoreAfterLatestSyncMerge(args: {
|
||||
previousMessages: ImMessage[]
|
||||
previousHasMore: boolean
|
||||
merged: ImMessage[]
|
||||
apiHasMore: boolean
|
||||
}): boolean {
|
||||
const prevMin = minMessageId(args.previousMessages)
|
||||
const mergedMin = minMessageId(args.merged)
|
||||
|
||||
if (mergedMin === null) {
|
||||
return Boolean(args.apiHasMore)
|
||||
}
|
||||
|
||||
if (!args.previousHasMore && prevMin !== null && mergedMin >= prevMin) {
|
||||
return false
|
||||
}
|
||||
|
||||
return args.previousHasMore || Boolean(args.apiHasMore)
|
||||
}
|
||||
|
||||
export type KefuChatStore = {
|
||||
title: string
|
||||
subtitle: string
|
||||
welcomeText: string
|
||||
themeColor: string
|
||||
conversation: ImConversation | null
|
||||
messages: ImMessage[]
|
||||
messagesCursor: string
|
||||
messagesHasMore: boolean
|
||||
messagesLoadingMore: boolean
|
||||
initialized: boolean
|
||||
status: ChatStatus
|
||||
error: string
|
||||
sending: boolean
|
||||
uploadingAsset: boolean
|
||||
closingConversation: boolean
|
||||
isOpen: boolean
|
||||
isVisible: boolean
|
||||
socket: WebSocket | null
|
||||
readingMessageId: number
|
||||
|
||||
setIsOpen: (isOpen: boolean) => void
|
||||
setIsVisible: (isVisible: boolean) => void
|
||||
bootstrap: () => void
|
||||
disconnectSocket: () => void
|
||||
refreshMessages: () => Promise<void>
|
||||
syncLatestMessages: () => Promise<void>
|
||||
loadOlderMessages: () => Promise<void>
|
||||
markConversationRead: () => Promise<void>
|
||||
handleSendMessage: (content: string) => Promise<void>
|
||||
sendMessage: (content: string) => Promise<void>
|
||||
uploadMessageImage: (file: File) => Promise<ImAsset | null>
|
||||
sendAttachment: (file: File) => Promise<void>
|
||||
closeConversation: () => Promise<void>
|
||||
retry: () => Promise<void>
|
||||
}
|
||||
|
||||
let bootstrapToken = 0
|
||||
|
||||
export const useKefuChatStore = create<KefuChatStore>((set, get) => {
|
||||
let reconnectTimer: number | null = null
|
||||
let pingTimer: number | null = null
|
||||
let reconnectAttempt = 0
|
||||
let shouldReconnect = false
|
||||
|
||||
const clearRealtimeTimers = () => {
|
||||
if (reconnectTimer !== null) {
|
||||
window.clearTimeout(reconnectTimer)
|
||||
reconnectTimer = null
|
||||
}
|
||||
if (pingTimer !== null) {
|
||||
window.clearInterval(pingTimer)
|
||||
pingTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const scheduleReconnect = () => {
|
||||
if (!shouldReconnect || reconnectTimer !== null) {
|
||||
return
|
||||
}
|
||||
|
||||
const delay = Math.min(
|
||||
RECONNECT_BASE_DELAY * 2 ** reconnectAttempt,
|
||||
RECONNECT_MAX_DELAY
|
||||
)
|
||||
set({ status: "connecting" })
|
||||
reconnectTimer = window.setTimeout(() => {
|
||||
reconnectTimer = null
|
||||
reconnectAttempt += 1
|
||||
if (!shouldReconnect || !get().isOpen) {
|
||||
return
|
||||
}
|
||||
connectSocket()
|
||||
}, delay)
|
||||
}
|
||||
|
||||
const closeSocket = (options?: { reconnect?: boolean }) => {
|
||||
shouldReconnect = options?.reconnect ?? false
|
||||
clearRealtimeTimers()
|
||||
if (!shouldReconnect) {
|
||||
reconnectAttempt = 0
|
||||
}
|
||||
|
||||
const socket = get().socket
|
||||
if (
|
||||
socket &&
|
||||
(socket.readyState === WebSocket.OPEN ||
|
||||
socket.readyState === WebSocket.CONNECTING)
|
||||
) {
|
||||
socket.close()
|
||||
}
|
||||
|
||||
set({ socket: null })
|
||||
}
|
||||
|
||||
const connectSocket = () => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return
|
||||
}
|
||||
|
||||
closeSocket({ reconnect: false })
|
||||
shouldReconnect = true
|
||||
|
||||
const socket = createImRealtimeConnection()
|
||||
set({ socket })
|
||||
|
||||
const handleRealtimeEvent = (event: ImRealtimeEnvelope) => {
|
||||
const payload = event.data ?? event.payload
|
||||
const needsRefresh =
|
||||
event.type === "message.created" ||
|
||||
event.type?.startsWith("conversation.")
|
||||
|
||||
if (needsRefresh && payload?.conversationId === conversationId) {
|
||||
void get()
|
||||
.syncLatestMessages()
|
||||
.then(() => {
|
||||
if (event.type !== "message.created") {
|
||||
return
|
||||
}
|
||||
const state = get()
|
||||
const lastMessage = state.messages.at(-1)
|
||||
if (
|
||||
lastMessage &&
|
||||
lastMessage.senderType !== "customer" &&
|
||||
typeof document !== "undefined" &&
|
||||
document.visibilityState !== "visible"
|
||||
) {
|
||||
showNotification("新消息", getNotificationBody(lastMessage), () => {
|
||||
state.setIsOpen(true)
|
||||
state.setIsVisible(true)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
socket.addEventListener("message", (event) => {
|
||||
try {
|
||||
handleRealtimeEvent(JSON.parse(event.data) as ImRealtimeEnvelope)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
socket.addEventListener("open", () => {
|
||||
clearRealtimeTimers()
|
||||
reconnectAttempt = 0
|
||||
pingTimer = window.setInterval(() => {
|
||||
if (socket.readyState === WebSocket.OPEN) {
|
||||
socket.send(JSON.stringify({ type: "ping" }))
|
||||
}
|
||||
}, 20000)
|
||||
if (get().isOpen && get().socket === socket) {
|
||||
set({ status: "connected" })
|
||||
}
|
||||
})
|
||||
|
||||
socket.addEventListener("error", () => {
|
||||
if (get().socket === socket) {
|
||||
scheduleReconnect()
|
||||
}
|
||||
})
|
||||
|
||||
socket.addEventListener("close", () => {
|
||||
if (pingTimer !== null) {
|
||||
window.clearInterval(pingTimer)
|
||||
pingTimer = null
|
||||
}
|
||||
if (get().socket === socket) {
|
||||
set({ socket: null })
|
||||
}
|
||||
if (get().isOpen) {
|
||||
if (shouldReconnect) {
|
||||
scheduleReconnect()
|
||||
} else {
|
||||
set({ status: "disconnected" })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
title: "在线客服",
|
||||
subtitle: "",
|
||||
welcomeText: "",
|
||||
themeColor: "#2563eb",
|
||||
conversation: null,
|
||||
messages: [],
|
||||
messagesCursor: "",
|
||||
messagesHasMore: false,
|
||||
messagesLoadingMore: false,
|
||||
initialized: false,
|
||||
status: "connecting",
|
||||
error: "",
|
||||
sending: false,
|
||||
uploadingAsset: false,
|
||||
closingConversation: false,
|
||||
isOpen: typeof window !== "undefined" ? window.self === window.top : false,
|
||||
isVisible:
|
||||
typeof window !== "undefined" ? window.self === window.top : false,
|
||||
socket: null,
|
||||
readingMessageId: 0,
|
||||
|
||||
setIsOpen: (isOpen: boolean) => {
|
||||
set({ isOpen })
|
||||
},
|
||||
|
||||
setIsVisible: (isVisible: boolean) => {
|
||||
set({ isVisible })
|
||||
},
|
||||
|
||||
bootstrap: () => {
|
||||
const token = ++bootstrapToken
|
||||
|
||||
if (!get().isOpen) {
|
||||
closeSocket({ reconnect: false })
|
||||
set({ status: "disconnected" })
|
||||
return
|
||||
}
|
||||
|
||||
const activateChat = async () => {
|
||||
try {
|
||||
set({ error: "", status: "connecting" })
|
||||
|
||||
const widgetConfig: ImWidgetConfig = await fetchImWidgetConfig().catch(
|
||||
() => ({})
|
||||
)
|
||||
if (bootstrapToken !== token || !get().isOpen) {
|
||||
return
|
||||
}
|
||||
|
||||
set({
|
||||
title: widgetConfig.title || "在线客服",
|
||||
subtitle: widgetConfig.subtitle || "",
|
||||
welcomeText: widgetConfig.welcomeText || "",
|
||||
themeColor: widgetConfig.themeColor || "#2563eb",
|
||||
})
|
||||
|
||||
let currentConversation = get().conversation
|
||||
if (!get().initialized || !currentConversation) {
|
||||
currentConversation = await createOrMatchImConversation()
|
||||
if (bootstrapToken !== token || !get().isOpen) {
|
||||
return
|
||||
}
|
||||
set({ initialized: true, conversation: currentConversation })
|
||||
}
|
||||
|
||||
await get().refreshMessages()
|
||||
if (bootstrapToken !== token || !get().isOpen) {
|
||||
return
|
||||
}
|
||||
|
||||
connectSocket()
|
||||
} catch (error) {
|
||||
if (bootstrapToken !== token || !get().isOpen) {
|
||||
return
|
||||
}
|
||||
set({
|
||||
status: "disconnected",
|
||||
error: error instanceof Error ? error.message : "初始化失败",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
void activateChat()
|
||||
},
|
||||
|
||||
disconnectSocket: () => {
|
||||
closeSocket({ reconnect: false })
|
||||
},
|
||||
|
||||
refreshMessages: async () => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const page = await fetchImMessages({
|
||||
conversationId,
|
||||
limit: DEFAULT_PAGE_LIMIT,
|
||||
})
|
||||
set({
|
||||
messages: page.results,
|
||||
messagesCursor: cursorFromLoadedMessages(page.results) || page.cursor || "",
|
||||
messagesHasMore: Boolean(page.hasMore) || page.results.length >= DEFAULT_PAGE_LIMIT,
|
||||
})
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error instanceof Error ? error.message : "加载消息失败",
|
||||
})
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
syncLatestMessages: async () => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const page = await fetchImMessages({
|
||||
conversationId,
|
||||
limit: DEFAULT_PAGE_LIMIT,
|
||||
})
|
||||
const batch = page.results
|
||||
if (batch.length === 0) {
|
||||
return
|
||||
}
|
||||
const firstId = batch[0]!.id
|
||||
set((state) => {
|
||||
const preserved = state.messages.filter((message) => message.id < firstId)
|
||||
const merged = mergeMessagesByIdAsc(preserved, batch)
|
||||
return {
|
||||
messages: merged,
|
||||
messagesCursor: cursorFromLoadedMessages(merged) || page.cursor || "",
|
||||
messagesHasMore: hasMoreAfterLatestSyncMerge({
|
||||
previousMessages: state.messages,
|
||||
previousHasMore: state.messagesHasMore,
|
||||
merged,
|
||||
apiHasMore: Boolean(page.hasMore) || batch.length >= DEFAULT_PAGE_LIMIT,
|
||||
}),
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error instanceof Error ? error.message : "同步消息失败",
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
loadOlderMessages: async () => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (
|
||||
!conversationId ||
|
||||
get().messagesLoadingMore ||
|
||||
!get().messagesHasMore
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
const cursorId = parseCursorId(get().messagesCursor)
|
||||
if (cursorId <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
set({ messagesLoadingMore: true })
|
||||
try {
|
||||
const page = await fetchImMessages({
|
||||
conversationId,
|
||||
cursor: cursorId,
|
||||
limit: DEFAULT_PAGE_LIMIT,
|
||||
})
|
||||
set((state) => {
|
||||
const merged = mergeMessagesByIdAsc(page.results, state.messages)
|
||||
return {
|
||||
messages: merged,
|
||||
messagesCursor: cursorFromLoadedMessages(merged) || page.cursor || "",
|
||||
messagesHasMore: Boolean(page.hasMore) || page.results.length >= DEFAULT_PAGE_LIMIT,
|
||||
messagesLoadingMore: false,
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
set({
|
||||
messagesLoadingMore: false,
|
||||
error: error instanceof Error ? error.message : "加载历史消息失败",
|
||||
})
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
markConversationRead: async () => {
|
||||
const state = get()
|
||||
const conversation = state.conversation
|
||||
const lastMessage = state.messages.at(-1)
|
||||
if (!conversation?.id || !lastMessage) {
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
conversation.customerUnreadCount <= 0 &&
|
||||
conversation.customerLastReadMessageId >= lastMessage.id
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (state.readingMessageId === lastMessage.id) {
|
||||
return
|
||||
}
|
||||
|
||||
set({ readingMessageId: lastMessage.id })
|
||||
try {
|
||||
await markImMessageRead(conversation.id, lastMessage.id)
|
||||
set((current) => ({
|
||||
readingMessageId: 0,
|
||||
messages: current.messages.map((item) =>
|
||||
(item.seqNo ?? 0) <= (lastMessage.seqNo ?? 0)
|
||||
? { ...item, customerRead: true }
|
||||
: item
|
||||
),
|
||||
conversation: current.conversation
|
||||
? {
|
||||
...current.conversation,
|
||||
customerUnreadCount: 0,
|
||||
customerLastReadMessageId: lastMessage.id,
|
||||
customerLastReadSeqNo: lastMessage.seqNo,
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
} catch (error) {
|
||||
set({ readingMessageId: 0 })
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
handleSendMessage: async (content: string) => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return
|
||||
}
|
||||
|
||||
set({ error: "", sending: true })
|
||||
try {
|
||||
const nextMessage = await sendImMessage({
|
||||
conversationId,
|
||||
messageType: "html",
|
||||
content,
|
||||
clientMsgId: `kefu_html_${generateUUID()}`,
|
||||
})
|
||||
set((state) => ({
|
||||
sending: false,
|
||||
messages: state.messages.some((message) => message.id === nextMessage.id)
|
||||
? state.messages.map((message) =>
|
||||
message.id === nextMessage.id ? nextMessage : message
|
||||
)
|
||||
: [...state.messages, nextMessage],
|
||||
conversation: state.conversation
|
||||
? {
|
||||
...state.conversation,
|
||||
customerLastReadMessageId: nextMessage.id,
|
||||
customerLastReadSeqNo: nextMessage.seqNo,
|
||||
customerUnreadCount: 0,
|
||||
lastMessageAt: nextMessage.sentAt,
|
||||
lastMessageSummary: summarizeIMMessage(nextMessage),
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
} catch (error) {
|
||||
set({
|
||||
sending: false,
|
||||
error: error instanceof Error ? error.message : "发送消息失败",
|
||||
})
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
sendMessage: async (content: string) => {
|
||||
return get().handleSendMessage(content)
|
||||
},
|
||||
|
||||
uploadMessageImage: async (file: File) => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return null
|
||||
}
|
||||
|
||||
set({ error: "", uploadingAsset: true })
|
||||
try {
|
||||
return await uploadImImage(conversationId, file)
|
||||
} catch (error) {
|
||||
set({
|
||||
error: error instanceof Error ? error.message : "上传图片失败",
|
||||
})
|
||||
return null
|
||||
} finally {
|
||||
set({ uploadingAsset: false })
|
||||
}
|
||||
},
|
||||
|
||||
sendAttachment: async (file: File) => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return
|
||||
}
|
||||
|
||||
set({ error: "", uploadingAsset: true })
|
||||
try {
|
||||
const asset = await uploadImAttachment(conversationId, file)
|
||||
const nextMessage = await sendImMessage({
|
||||
conversationId,
|
||||
messageType: "attachment",
|
||||
content: asset.filename,
|
||||
payload: JSON.stringify({ assetId: asset.assetId }),
|
||||
clientMsgId: `kefu_attachment_${generateUUID()}`,
|
||||
})
|
||||
set((state) => ({
|
||||
uploadingAsset: false,
|
||||
messages: state.messages.some((message) => message.id === nextMessage.id)
|
||||
? state.messages.map((message) =>
|
||||
message.id === nextMessage.id ? nextMessage : message
|
||||
)
|
||||
: [...state.messages, nextMessage],
|
||||
conversation: state.conversation
|
||||
? {
|
||||
...state.conversation,
|
||||
customerLastReadMessageId: nextMessage.id,
|
||||
customerLastReadSeqNo: nextMessage.seqNo,
|
||||
customerUnreadCount: 0,
|
||||
lastMessageAt: nextMessage.sentAt,
|
||||
lastMessageSummary: summarizeIMMessage(nextMessage),
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
} catch (error) {
|
||||
set({
|
||||
uploadingAsset: false,
|
||||
error: error instanceof Error ? error.message : "发送附件失败",
|
||||
})
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
closeConversation: async () => {
|
||||
const conversationId = get().conversation?.id
|
||||
if (!conversationId) {
|
||||
return
|
||||
}
|
||||
|
||||
set({ error: "", closingConversation: true })
|
||||
try {
|
||||
await closeImConversation(conversationId)
|
||||
closeSocket({ reconnect: false })
|
||||
set((state) => ({
|
||||
closingConversation: false,
|
||||
status: "disconnected",
|
||||
conversation: state.conversation
|
||||
? {
|
||||
...state.conversation,
|
||||
status: 2,
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
} catch (error) {
|
||||
set({
|
||||
closingConversation: false,
|
||||
error: error instanceof Error ? error.message : "关闭会话失败",
|
||||
})
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
retry: async () => {
|
||||
if (!get().conversation?.id) {
|
||||
return
|
||||
}
|
||||
|
||||
set({ error: "", status: "connecting" })
|
||||
try {
|
||||
await get().refreshMessages()
|
||||
if (get().isOpen) {
|
||||
shouldReconnect = true
|
||||
connectSocket()
|
||||
}
|
||||
} catch (error) {
|
||||
set({
|
||||
status: "disconnected",
|
||||
error: error instanceof Error ? error.message : "刷新失败",
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user