+ ) {
+ 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Enter 发送
+
+
+
+
+
<\/p>/g, "")
+ .replace(/
<\/p>/g, "")
+ .replace(/\s+/g, "")
+ if (//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>, 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>,
+ 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)
+}
diff --git a/web/components/kefu/message-list.tsx b/web/components/kefu/message-list.tsx
new file mode 100644
index 0000000..f41639b
--- /dev/null
+++ b/web/components/kefu/message-list.tsx
@@ -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
+}
+
+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(
+ function KefuMessageList(
+ {
+ messages,
+ onNearBottomVisible,
+ hasMoreOlder = false,
+ loadingOlder = false,
+ onLoadOlder,
+ },
+ ref
+ ) {
+ const containerRef = useRef(null)
+ const contentRef = useRef(null)
+ const frameRef = useRef(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 (
+
+
+ {hasMoreOlder && onLoadOlder ? (
+
+
+
+ ) : null}
+
+ {messages.map((message, index) => {
+ const previousMessage = index > 0 ? messages[index - 1] : null
+ const showTimeline =
+ index === 0 ||
+ getDayKey(previousMessage?.sentAt) !== getDayKey(message.sentAt)
+
+ return (
+
+ )
+ })}
+
+
+ {showTimeline ? (
+
+
+ {getTimelineLabel(message.sentAt)}
+
+
+ ) : null}
+
+
+ {!isCustomer && avatarSrc ? (
+
+ ) : null}
+
+
+
+ {senderName}
+ {formatDateTime(message.sentAt)}
+ {isCustomer ? (
+ {message.agentRead ? "客服已读" : "客服未读"}
+ ) : null}
+
+
+
+
+
+
+