mlogclub
603 lines
22 KiB
TypeScript
603 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { CheckCheckIcon, EyeIcon, MessageCircleMoreIcon } from "lucide-react";
|
|
import Image from "next/image";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useRef,
|
|
} from "react";
|
|
|
|
import { ImMessageHTML } from "@/components/im-message-html";
|
|
import { useImageLightbox } from "@/components/image-lightbox";
|
|
import { ProjectDialog } from "@/components/project-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
type AdminConversation,
|
|
type AdminConversationDetail,
|
|
type AdminMessage,
|
|
} from "@/lib/api/admin";
|
|
import {
|
|
parseMessageAssetPayload,
|
|
renderIMMessageHTML,
|
|
} from "@/lib/im-message";
|
|
import { formatDateTime } from "@/lib/utils";
|
|
import { useI18n } from "@/i18n/provider";
|
|
|
|
type ConversationDetailDialogProps = {
|
|
open: boolean;
|
|
loading: boolean;
|
|
saving: boolean;
|
|
item: AdminConversation | null;
|
|
detail: AdminConversationDetail | null;
|
|
messages?: AdminMessage[] | null;
|
|
/** Whether older messages are available through cursor pagination. */
|
|
messagesHasMore?: boolean;
|
|
loadingMoreMessages?: boolean;
|
|
onLoadMoreMessages?: () => void | Promise<void>;
|
|
onOpenChange: (open: boolean) => void;
|
|
onOpenAssign: () => void;
|
|
onDispatch: () => Promise<void>;
|
|
onOpenTransfer: () => void;
|
|
onRead: () => Promise<void>;
|
|
onOpenClose: () => void;
|
|
};
|
|
|
|
function getStatusMeta(
|
|
status: number,
|
|
t: (key: string, values?: Record<string, string | number>) => string
|
|
) {
|
|
switch (status) {
|
|
case 1:
|
|
return { label: t("conversation.filterAiServing"), variant: "secondary" as const };
|
|
case 2:
|
|
return { label: t("conversation.filterPending"), variant: "outline" as const };
|
|
case 3:
|
|
return { label: t("conversation.filterActive"), variant: "secondary" as const };
|
|
case 4:
|
|
return { label: t("conversation.filterClosed"), variant: "outline" as const };
|
|
default:
|
|
return { label: t("conversationMonitor.unknown"), variant: "outline" as const };
|
|
}
|
|
}
|
|
|
|
function getServiceModeLabel(
|
|
mode: number,
|
|
t: (key: string, values?: Record<string, string | number>) => string
|
|
) {
|
|
switch (mode) {
|
|
case 1:
|
|
return t("conversationMonitor.serviceAi");
|
|
case 2:
|
|
return t("conversationMonitor.serviceHuman");
|
|
case 3:
|
|
return t("conversationMonitor.serviceAiFirst");
|
|
default:
|
|
return t("conversationMonitor.serviceUndefined");
|
|
}
|
|
}
|
|
|
|
function getSenderLabel(
|
|
message: AdminMessage,
|
|
t: (key: string, values?: Record<string, string | number>) => string
|
|
) {
|
|
switch (message.senderType) {
|
|
case "agent":
|
|
return message.senderName || t("conversationMonitor.senderAgent");
|
|
case "customer":
|
|
return message.senderName || t("conversationMonitor.senderCustomer");
|
|
case "ai":
|
|
return "AI";
|
|
case "system":
|
|
return t("conversationMonitor.senderSystem");
|
|
default:
|
|
return message.senderType;
|
|
}
|
|
}
|
|
|
|
function getMessageContent(message: AdminMessage) {
|
|
return message.content || message.payload || "-";
|
|
}
|
|
|
|
function getImageMessageUrl(message: AdminMessage) {
|
|
return parseMessageAssetPayload(message.payload)?.url || "";
|
|
}
|
|
|
|
function getParticipantIdentity(
|
|
participant: NonNullable<AdminConversationDetail["participants"]>[number],
|
|
) {
|
|
return participant.participantId || participant.externalParticipantId || "-";
|
|
}
|
|
|
|
function getMessageLayout(message: AdminMessage) {
|
|
if (message.senderType === "customer") {
|
|
return {
|
|
rowClassName: "justify-start",
|
|
bubbleClassName: "border-border/70 bg-muted/60 text-foreground shadow-sm",
|
|
htmlClassName: "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md",
|
|
recalledBubbleClassName:
|
|
"border-dashed border-border/70 bg-muted/40 text-muted-foreground",
|
|
recalledHtmlClassName: "text-muted-foreground [&_p]:text-muted-foreground",
|
|
metaClassName: "text-left",
|
|
};
|
|
}
|
|
if (message.senderType === "system") {
|
|
return {
|
|
rowClassName: "justify-center",
|
|
bubbleClassName:
|
|
"border-dashed border-border bg-muted/60 text-muted-foreground",
|
|
htmlClassName: "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md",
|
|
recalledBubbleClassName:
|
|
"border-dashed border-border/70 bg-muted/40 text-muted-foreground",
|
|
recalledHtmlClassName: "text-muted-foreground [&_p]:text-muted-foreground",
|
|
metaClassName: "text-center",
|
|
};
|
|
}
|
|
if (message.senderType === "ai") {
|
|
return {
|
|
rowClassName: "justify-end",
|
|
bubbleClassName: "border-primary/15 bg-primary/5 text-foreground shadow-sm",
|
|
htmlClassName: "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md",
|
|
recalledBubbleClassName:
|
|
"border-dashed border-emerald-200 bg-emerald-50 text-emerald-800",
|
|
recalledHtmlClassName: "text-emerald-800 [&_p]:text-emerald-800",
|
|
metaClassName: "text-right",
|
|
};
|
|
}
|
|
return {
|
|
rowClassName: "justify-end",
|
|
bubbleClassName: "border-transparent bg-emerald-600 text-white shadow-sm",
|
|
htmlClassName:
|
|
"[&_p]:text-white [&_a]:text-white [&_a]:underline [&_img]:rounded-md",
|
|
recalledBubbleClassName:
|
|
"border-dashed border-emerald-200 bg-emerald-50 text-emerald-800",
|
|
recalledHtmlClassName: "text-emerald-800 [&_p]:text-emerald-800",
|
|
metaClassName: "text-right",
|
|
};
|
|
}
|
|
|
|
export function ConversationDetailDialog({
|
|
open,
|
|
loading,
|
|
saving,
|
|
item,
|
|
detail,
|
|
messages: rawMessages,
|
|
messagesHasMore = false,
|
|
loadingMoreMessages = false,
|
|
onLoadMoreMessages,
|
|
onOpenChange,
|
|
onOpenAssign,
|
|
onDispatch,
|
|
onOpenTransfer,
|
|
onRead,
|
|
onOpenClose,
|
|
}: ConversationDetailDialogProps) {
|
|
const t = useI18n();
|
|
const messages = Array.isArray(rawMessages) ? rawMessages : [];
|
|
const currentConversation = detail ?? item;
|
|
const isClosedConversation = currentConversation?.status === 4;
|
|
const isPendingConversation = currentConversation?.status === 2;
|
|
const statusMeta = currentConversation
|
|
? getStatusMeta(currentConversation.status, t)
|
|
: null;
|
|
const messageBottomRef = useRef<HTMLDivElement | null>(null);
|
|
const messagesScrollRootRef = useRef<HTMLDivElement | null>(null);
|
|
const loadMoreSentinelRef = useRef<HTMLDivElement | null>(null);
|
|
const pendingScrollAnchorRef = useRef<{
|
|
scrollHeight: number;
|
|
scrollTop: number;
|
|
} | null>(null);
|
|
const prevLoadingMoreRef = useRef(false);
|
|
const { open: openImageLightbox, close: closeImageLightbox } =
|
|
useImageLightbox();
|
|
|
|
const getMessagesViewport = useCallback((): HTMLElement | null => {
|
|
return (
|
|
messagesScrollRootRef.current?.querySelector(
|
|
'[data-slot="scroll-area-viewport"]',
|
|
) ?? null
|
|
);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!open) {
|
|
closeImageLightbox();
|
|
return;
|
|
}
|
|
if (loading) {
|
|
return;
|
|
}
|
|
const bottom = messageBottomRef.current;
|
|
if (!bottom) {
|
|
return;
|
|
}
|
|
bottom.scrollIntoView({ block: "end", behavior: "smooth" });
|
|
}, [open, loading, closeImageLightbox]);
|
|
|
|
useLayoutEffect(() => {
|
|
const wasLoading = prevLoadingMoreRef.current;
|
|
prevLoadingMoreRef.current = loadingMoreMessages;
|
|
if (wasLoading && !loadingMoreMessages && pendingScrollAnchorRef.current) {
|
|
const vp = getMessagesViewport();
|
|
const anchor = pendingScrollAnchorRef.current;
|
|
pendingScrollAnchorRef.current = null;
|
|
if (vp && anchor) {
|
|
const delta = vp.scrollHeight - anchor.scrollHeight;
|
|
vp.scrollTop = anchor.scrollTop + delta;
|
|
}
|
|
}
|
|
}, [loadingMoreMessages, messages, getMessagesViewport]);
|
|
|
|
useEffect(() => {
|
|
if (!open || loading || !messagesHasMore || !onLoadMoreMessages) {
|
|
return;
|
|
}
|
|
const root = getMessagesViewport();
|
|
const sentinel = loadMoreSentinelRef.current;
|
|
if (!root || !sentinel) {
|
|
return;
|
|
}
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const hit = entries.some((e) => e.isIntersecting);
|
|
if (!hit || loadingMoreMessages) {
|
|
return;
|
|
}
|
|
const vp = getMessagesViewport();
|
|
if (vp) {
|
|
pendingScrollAnchorRef.current = {
|
|
scrollHeight: vp.scrollHeight,
|
|
scrollTop: vp.scrollTop,
|
|
};
|
|
}
|
|
void onLoadMoreMessages();
|
|
},
|
|
{ root, rootMargin: "120px 0px 0px 0px", threshold: 0 },
|
|
);
|
|
observer.observe(sentinel);
|
|
return () => observer.disconnect();
|
|
}, [
|
|
open,
|
|
loading,
|
|
messagesHasMore,
|
|
loadingMoreMessages,
|
|
messages.length,
|
|
onLoadMoreMessages,
|
|
getMessagesViewport,
|
|
]);
|
|
|
|
return (
|
|
<ProjectDialog
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
title={
|
|
<div className="flex items-center gap-3">
|
|
<span>{currentConversation?.customerName || t("conversationMonitor.detailFallbackTitle")}</span>
|
|
|
|
<div>
|
|
{statusMeta ? (
|
|
<Badge variant={statusMeta.variant}>{statusMeta.label}</Badge>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
}
|
|
size="xl"
|
|
// allowFullscreen
|
|
defaultFullscreen
|
|
bodyScrollable={false}
|
|
bodyClassName="flex min-h-0 flex-1 flex-col overflow-hidden p-0"
|
|
contentClassName="h-[calc(100vh-40px)] max-h-[calc(100vh-40px)]"
|
|
footer={
|
|
<div className="flex w-full flex-wrap items-center justify-between gap-3">
|
|
<div className="text-sm text-muted-foreground">
|
|
{currentConversation
|
|
? t("conversationMonitor.lastActivePrefix", {
|
|
time: formatDateTime(currentConversation.lastMessageAt),
|
|
})
|
|
: t("conversationMonitor.noConversationInfo")}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onOpenAssign}
|
|
disabled={saving || !currentConversation || currentConversation.status !== 2}
|
|
>
|
|
<MessageCircleMoreIcon />
|
|
{saving ? t("conversationMonitor.processing") : t("conversationMonitor.assign")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => void onDispatch()}
|
|
disabled={
|
|
saving || !currentConversation || !isPendingConversation
|
|
}
|
|
>
|
|
<MessageCircleMoreIcon />
|
|
{saving ? t("conversationMonitor.processing") : t("conversationMonitor.retryDispatch")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => void onRead()}
|
|
disabled={saving || !currentConversation}
|
|
>
|
|
<CheckCheckIcon />
|
|
{saving ? t("conversationMonitor.processing") : t("conversationMonitor.markRead")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={onOpenTransfer}
|
|
disabled={saving || !currentConversation || currentConversation.status !== 3}
|
|
>
|
|
<MessageCircleMoreIcon />
|
|
{saving ? t("conversationMonitor.processing") : t("conversationMonitor.transfer")}
|
|
</Button>
|
|
{!isClosedConversation ? (
|
|
<Button
|
|
variant="outline"
|
|
onClick={onOpenClose}
|
|
disabled={saving || !currentConversation}
|
|
>
|
|
<EyeIcon />
|
|
{saving ? t("conversationMonitor.processing") : t("conversationMonitor.close")}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
{loading ? (
|
|
<div className="flex min-h-0 flex-1 items-center justify-center text-sm text-muted-foreground">
|
|
{t("conversationMonitor.loadingDetail")}
|
|
</div>
|
|
) : currentConversation ? (
|
|
<div className="flex min-h-0 flex-1 flex-row overflow-hidden border-t">
|
|
<aside className="flex w-90 h-full shrink-0 flex-col overflow-hidden bg-muted/20 border-r border-b-0">
|
|
<div className="space-y-4 p-6">
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
<InfoItem
|
|
label={t("conversationMonitor.columnServiceMode")}
|
|
value={getServiceModeLabel(currentConversation.serviceMode, t)}
|
|
/>
|
|
<InfoItem
|
|
label={t("conversationMonitor.currentAssignee")}
|
|
value={currentConversation.currentAssigneeName || "-"}
|
|
/>
|
|
<InfoItem
|
|
label={t("conversation.channelId")}
|
|
value={`${currentConversation.channelId || "-"}`}
|
|
/>
|
|
<InfoItem
|
|
label={t("conversationMonitor.agentUnread")}
|
|
value={`${currentConversation.agentUnreadCount}`}
|
|
/>
|
|
<InfoItem
|
|
label={t("conversationMonitor.customerUnread")}
|
|
value={`${currentConversation.customerUnreadCount}`}
|
|
/>
|
|
<InfoItem
|
|
label={t("conversationMonitor.columnLastActive")}
|
|
value={formatDateTime(currentConversation.lastMessageAt)}
|
|
fullWidth
|
|
/>
|
|
<InfoItem
|
|
label={t("conversationMonitor.closedAt")}
|
|
value={formatDateTime(currentConversation.closedAt)}
|
|
fullWidth
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<ScrollArea className="min-h-0 flex-1">
|
|
<div className="space-y-4 p-6">
|
|
<section className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm font-medium">
|
|
{t("conversationMonitor.participants")}
|
|
</p>
|
|
<span className="text-xs text-muted-foreground">
|
|
{t("conversationMonitor.participantCount", {
|
|
count: detail?.participants?.length ?? 0,
|
|
})}
|
|
</span>
|
|
</div>
|
|
{detail?.participants?.length ? (
|
|
<div className="space-y-3">
|
|
{detail.participants.map((participant) => (
|
|
<div
|
|
key={participant.id}
|
|
className="rounded-lg border bg-background p-3"
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-sm font-medium">
|
|
{participant.participantType || "-"}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 text-sm text-muted-foreground">
|
|
{t("conversationMonitor.participantIdentity", {
|
|
value: getParticipantIdentity(participant),
|
|
})}
|
|
</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{t("conversationMonitor.participantJoinedAt", {
|
|
time: formatDateTime(participant.joinedAt),
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed bg-background p-4 text-sm text-muted-foreground">
|
|
{t("conversationMonitor.emptyParticipants")}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</ScrollArea>
|
|
</aside>
|
|
|
|
<section className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background">
|
|
<div ref={messagesScrollRootRef} className="min-h-0 flex-1">
|
|
<ScrollArea className="h-full min-h-0 bg-muted/10">
|
|
<div className="space-y-4 px-6 py-5">
|
|
{messagesHasMore ? (
|
|
<div
|
|
ref={loadMoreSentinelRef}
|
|
className="flex min-h-8 flex-col items-center justify-center py-2 text-xs text-muted-foreground"
|
|
>
|
|
{loadingMoreMessages
|
|
? t("conversationMonitor.loadingOlder")
|
|
: t("conversationMonitor.loadOlderHint")}
|
|
</div>
|
|
) : null}
|
|
{messages.length ? (
|
|
messages.map((message) => {
|
|
const layout = getMessageLayout(message);
|
|
const isRecalled =
|
|
Boolean(message.recalledAt) || message.sendStatus === 6;
|
|
const isHtmlMessage =
|
|
!isRecalled &&
|
|
(message.messageType === "html" ||
|
|
message.messageType === "attachment");
|
|
const isImageMessage = !isRecalled && message.messageType === "image";
|
|
|
|
return (
|
|
<div
|
|
key={message.id}
|
|
className={`flex ${layout.rowClassName}`}
|
|
>
|
|
<div className="max-w-[85%] space-y-2">
|
|
<div
|
|
className={`text-xs text-muted-foreground ${layout.metaClassName}`}
|
|
>
|
|
<span>{getSenderLabel(message, t)}</span>
|
|
<span className="mx-2">·</span>
|
|
<span>{formatDateTime(message.sentAt)}</span>
|
|
{isRecalled ? (
|
|
<>
|
|
<span className="mx-2">·</span>
|
|
<span>{t("conversationMonitor.messageRecalled")}</span>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={`rounded-2xl border px-4 py-3 text-sm leading-6 ${
|
|
isRecalled
|
|
? layout.recalledBubbleClassName
|
|
: layout.bubbleClassName
|
|
}`}
|
|
>
|
|
{isRecalled ? (
|
|
<div className={layout.recalledHtmlClassName}>
|
|
{t("conversationMonitor.messageRecalledBody")}
|
|
</div>
|
|
) : isHtmlMessage ? (
|
|
<ImMessageHTML
|
|
html={renderIMMessageHTML(message)}
|
|
className={`${layout.htmlClassName} [&_img]:max-w-full [&_img]:cursor-zoom-in`}
|
|
onImageClick={openImageLightbox}
|
|
/>
|
|
) : isImageMessage ? (
|
|
<MessageImage
|
|
src={getImageMessageUrl(message)}
|
|
alt={getMessageContent(message)}
|
|
onPreview={openImageLightbox}
|
|
/>
|
|
) : (
|
|
<div className="whitespace-pre-wrap break-words">
|
|
{getMessageContent(message)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className={`text-xs text-muted-foreground ${layout.metaClassName}`}
|
|
>
|
|
{t("conversationMonitor.readStatus", {
|
|
agent: message.agentRead
|
|
? t("conversationMonitor.read")
|
|
: t("conversationMonitor.unread"),
|
|
customer: message.customerRead
|
|
? t("conversationMonitor.read")
|
|
: t("conversationMonitor.unread"),
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<div className="flex h-full min-h-80 items-center justify-center rounded-xl border border-dashed bg-background text-sm text-muted-foreground">
|
|
{t("conversationMonitor.emptyMessages")}
|
|
</div>
|
|
)}
|
|
<div ref={messageBottomRef} />
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
) : (
|
|
<div className="flex min-h-0 flex-1 items-center justify-center text-sm text-muted-foreground">
|
|
{t("conversationMonitor.emptyDetail")}
|
|
</div>
|
|
)}
|
|
</ProjectDialog>
|
|
);
|
|
}
|
|
|
|
type InfoItemProps = {
|
|
label: string;
|
|
value: string;
|
|
fullWidth?: boolean;
|
|
};
|
|
|
|
function InfoItem({ label, value, fullWidth = false }: InfoItemProps) {
|
|
return (
|
|
<div className={fullWidth ? "col-span-2" : undefined}>
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="mt-1 break-all font-medium">{value || "-"}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type MessageImageProps = {
|
|
src: string;
|
|
alt: string;
|
|
onPreview: (src: string, alt?: string) => void;
|
|
};
|
|
|
|
function MessageImage({ src, alt, onPreview }: MessageImageProps) {
|
|
const t = useI18n();
|
|
if (!src) {
|
|
return (
|
|
<div className="text-sm whitespace-pre-wrap break-words">
|
|
{alt || t("conversationMonitor.imageFallback")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="block cursor-zoom-in"
|
|
onClick={() => onPreview(src, alt)}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={alt || t("conversationMonitor.messageImageAlt")}
|
|
width={480}
|
|
height={360}
|
|
className="max-h-64 w-auto max-w-full rounded-md object-contain"
|
|
unoptimized
|
|
/>
|
|
</button>
|
|
);
|
|
}
|