mlogclub
349 lines
10 KiB
TypeScript
349 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
forwardRef,
|
|
memo,
|
|
useCallback,
|
|
useEffect,
|
|
useImperativeHandle,
|
|
useLayoutEffect,
|
|
useRef,
|
|
} from "react";
|
|
import Image from "next/image";
|
|
|
|
import { MessageHTML } from "@/components/im/message-html";
|
|
import { useImageLightbox } from "@/components/image-lightbox";
|
|
import { renderMessageHTML } from "@/lib/services/message-asset";
|
|
import type { WidgetMessage } from "@/lib/services/types";
|
|
import { cn, formatDateTime } from "@/lib/utils";
|
|
|
|
type MessageListProps = {
|
|
messages: WidgetMessage[];
|
|
onNearBottomVisible?: () => void;
|
|
hasMoreOlder?: boolean;
|
|
loadingOlder?: boolean;
|
|
onLoadOlder?: () => Promise<void>;
|
|
};
|
|
|
|
export type MessageListHandle = {
|
|
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 now = new Date();
|
|
const currentDayKey = getDayKey(value);
|
|
const todayDayKey = getDayKey(now.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 MessageList = forwardRef<MessageListHandle, MessageListProps>(
|
|
function MessageList(
|
|
{
|
|
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 c = containerRef.current;
|
|
if (!c) {
|
|
return;
|
|
}
|
|
c.scrollTop = c.scrollHeight - anchor.height + anchor.top;
|
|
});
|
|
});
|
|
}, [hasMoreOlder, loadingOlder, onLoadOlder]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4 cs-agent-scrollbar"
|
|
>
|
|
<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}
|
|
{/* <WelcomePanel title={title} welcomeText={welcomeText} /> */}
|
|
|
|
{/* {messages.length === 0 ? (
|
|
<div className="cs-agent-fade-up rounded-3xl border border-dashed border-slate-200 bg-white/72 px-4 py-5 text-sm leading-6 text-slate-500 shadow-[0_10px_22px_rgba(15,23,42,0.04)] backdrop-blur">
|
|
开始发送第一条消息后，会在这里保留完整会话记录。
|
|
</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: WidgetMessage;
|
|
showTimeline: boolean;
|
|
onImageSettled: () => void;
|
|
};
|
|
|
|
const MessageItem = memo(
|
|
function MessageItem({
|
|
message,
|
|
showTimeline,
|
|
onImageSettled,
|
|
}: MessageItemProps) {
|
|
const { open: openImageLightbox } = useImageLightbox();
|
|
const isCustomer = message.senderType === "customer";
|
|
const senderName = isCustomer ? "我" : message.senderName?.trim() || "客服";
|
|
const agentAvatarSrc =
|
|
!isCustomer && message.senderAvatar?.trim()
|
|
? message.senderAvatar.trim()
|
|
: undefined;
|
|
const htmlContent = buildMessageHTML(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 && agentAvatarSrc ? (
|
|
<Image
|
|
src={agentAvatarSrc}
|
|
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",
|
|
)}
|
|
>
|
|
<MessageHTML
|
|
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={openImageLightbox}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
(prevProps, nextProps) =>
|
|
prevProps.message === nextProps.message &&
|
|
prevProps.showTimeline === nextProps.showTimeline &&
|
|
prevProps.onImageSettled === nextProps.onImageSettled,
|
|
);
|
|
|
|
function buildMessageHTML(message: WidgetMessage) {
|
|
return renderMessageHTML(message);
|
|
}
|