chore: import clean Agent Desk snapshot (6/7)
This commit is contained in:
335
web/components/support-chat/message-list.tsx
Normal file
335
web/components/support-chat/message-list.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
forwardRef,
|
||||
memo,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from "react"
|
||||
|
||||
import { AgentActivityBubble } from "@/components/chat/agent-activity-bubble"
|
||||
import { ConversationMessageBubble } from "@/components/chat/conversation-message-bubble"
|
||||
import { ConversationMessageRow } from "@/components/chat/conversation-message-row"
|
||||
import {
|
||||
ConversationMessageScroller,
|
||||
ConversationMessageScrollerItem,
|
||||
type ConversationMessageScrollerHandle,
|
||||
} from "@/components/chat/conversation-message-scroller"
|
||||
import { ImMessageHTML } from "@/components/im-message-html"
|
||||
import { useImageLightbox } from "@/components/image-lightbox"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { PromptStarters } from "@/components/support-chat/prompt-starters"
|
||||
import type { AgentActivityInfo } from "@/lib/agent-activity-state"
|
||||
import type { ImMessage } from "@/lib/api/im"
|
||||
import { renderIMMessageHTML } from "@/lib/im-message"
|
||||
import { useSupportChatStore } from "@/lib/stores/support-chat"
|
||||
import { cn, formatDateTime } from "@/lib/utils"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
|
||||
type SupportChatMessageListProps = {
|
||||
messages?: ImMessage[] | null
|
||||
agentActivity?: AgentActivityInfo | null
|
||||
promptStarters?: string[]
|
||||
onSelectPromptStarter?: (starter: string) => void
|
||||
onNearBottomVisible?: () => void
|
||||
hasMoreOlder?: boolean
|
||||
loadingOlder?: boolean
|
||||
onLoadOlder?: () => Promise<void>
|
||||
}
|
||||
|
||||
export type SupportChatMessageListHandle = {
|
||||
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 | undefined,
|
||||
t: (key: string, values?: Record<string, string | number>) => string
|
||||
) {
|
||||
if (!value) {
|
||||
return t("supportChat.justNow")
|
||||
}
|
||||
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 t("supportChat.todayAt", { time: timeText })
|
||||
}
|
||||
return `${currentDayKey} ${timeText}`
|
||||
}
|
||||
|
||||
export const SupportChatMessageList = forwardRef<SupportChatMessageListHandle, SupportChatMessageListProps>(
|
||||
function SupportChatMessageList(
|
||||
{
|
||||
messages,
|
||||
agentActivity,
|
||||
promptStarters,
|
||||
onSelectPromptStarter,
|
||||
onNearBottomVisible,
|
||||
hasMoreOlder = false,
|
||||
loadingOlder = false,
|
||||
onLoadOlder,
|
||||
},
|
||||
ref
|
||||
) {
|
||||
const t = useI18n()
|
||||
const scrollerRef = useRef<ConversationMessageScrollerHandle | null>(null)
|
||||
const shouldStickToBottomRef = useRef(true)
|
||||
const onNearBottomVisibleRef = useRef(onNearBottomVisible)
|
||||
const safeMessages = Array.isArray(messages) ? messages : []
|
||||
|
||||
const storeAgentActivity = useSupportChatStore((state) => state.activeAgentActivity)
|
||||
const storePromptStarters = useSupportChatStore((state) => state.promptStarters)
|
||||
const storeHandleSendMessage = useSupportChatStore((state) => state.handleSendMessage)
|
||||
const storeSending = useSupportChatStore((state) => state.sending)
|
||||
|
||||
const resolvedAgentActivity = agentActivity !== undefined ? agentActivity : storeAgentActivity
|
||||
const resolvedPromptStarters = promptStarters !== undefined ? promptStarters : storePromptStarters
|
||||
const handleSelectPromptStarter = onSelectPromptStarter ?? storeHandleSendMessage
|
||||
useEffect(() => {
|
||||
onNearBottomVisibleRef.current = onNearBottomVisible
|
||||
}, [onNearBottomVisible])
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
scrollerRef.current?.scrollToBottom()
|
||||
}, [])
|
||||
|
||||
const prevWasActiveRef = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
const wasActive = prevWasActiveRef.current
|
||||
const isNowActive = Boolean(resolvedAgentActivity)
|
||||
prevWasActiveRef.current = isNowActive
|
||||
|
||||
if (!wasActive && isNowActive && shouldStickToBottomRef.current) {
|
||||
scrollToBottom()
|
||||
}
|
||||
}, [resolvedAgentActivity, scrollToBottom])
|
||||
|
||||
const handleImageSettled = useCallback(() => {
|
||||
if (shouldStickToBottomRef.current) {
|
||||
scrollToBottom()
|
||||
onNearBottomVisibleRef.current?.()
|
||||
}
|
||||
}, [scrollToBottom])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
scrollToBottom,
|
||||
}))
|
||||
|
||||
const handleLoadOlder = useCallback(async () => {
|
||||
if (!onLoadOlder || loadingOlder || !hasMoreOlder) {
|
||||
return
|
||||
}
|
||||
await onLoadOlder()
|
||||
}, [hasMoreOlder, loadingOlder, onLoadOlder])
|
||||
|
||||
return (
|
||||
<ConversationMessageScroller
|
||||
ref={scrollerRef}
|
||||
className="flex min-h-0 flex-1"
|
||||
viewportClassName="bg-transparent"
|
||||
contentClassName="gap-4 px-4 py-4"
|
||||
hasMoreOlder={hasMoreOlder}
|
||||
loadingOlder={loadingOlder}
|
||||
onLoadOlder={onLoadOlder}
|
||||
onNearBottomChange={(nearBottom) => {
|
||||
shouldStickToBottomRef.current = nearBottom
|
||||
}}
|
||||
onNearBottomVisible={onNearBottomVisible}
|
||||
topSlot={
|
||||
hasMoreOlder && onLoadOlder ? (
|
||||
<div className="flex justify-center py-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={loadingOlder}
|
||||
onClick={() => void handleLoadOlder()}
|
||||
className="h-7 rounded-full bg-background/90 text-xs text-muted-foreground shadow-sm hover:bg-background hover:text-sky-700 dark:hover:text-sky-400"
|
||||
>
|
||||
{loadingOlder ? t("supportChat.loadingOlder") : t("supportChat.loadOlder")}
|
||||
</Button>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{safeMessages.length === 0 && !resolvedAgentActivity ? (
|
||||
<div className="flex min-h-32 flex-col items-center justify-center gap-4 px-3 py-6 text-center text-sm leading-6 text-muted-foreground">
|
||||
<p className="max-w-xs">{t("supportChat.emptyPrompt")}</p>
|
||||
{resolvedPromptStarters && resolvedPromptStarters.length > 0 ? (
|
||||
<PromptStarters
|
||||
items={resolvedPromptStarters}
|
||||
disabled={storeSending}
|
||||
onSelect={(starter) => {
|
||||
void handleSelectPromptStarter?.(starter)
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{safeMessages.map((message, index) => {
|
||||
const previousMessage = index > 0 ? safeMessages[index - 1] : null
|
||||
const showTimeline =
|
||||
index === 0 ||
|
||||
getDayKey(previousMessage?.sentAt) !== getDayKey(message.sentAt)
|
||||
|
||||
return (
|
||||
<ConversationMessageScrollerItem
|
||||
key={message.id}
|
||||
messageId={`${message.id}`}
|
||||
>
|
||||
<MessageItem
|
||||
message={message}
|
||||
showTimeline={showTimeline}
|
||||
onImageSettled={handleImageSettled}
|
||||
timelineLabel={getTimelineLabel(message.sentAt, t)}
|
||||
/>
|
||||
</ConversationMessageScrollerItem>
|
||||
)
|
||||
})}
|
||||
|
||||
{resolvedAgentActivity ? (
|
||||
<AgentActivityBubble
|
||||
stepCode={resolvedAgentActivity.stepCode}
|
||||
toolName={resolvedAgentActivity.toolName}
|
||||
isCustomer
|
||||
/>
|
||||
) : null}
|
||||
</ConversationMessageScroller>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
type MessageItemProps = {
|
||||
message: ImMessage
|
||||
showTimeline: boolean
|
||||
onImageSettled: () => void
|
||||
timelineLabel: string
|
||||
}
|
||||
|
||||
const MessageItem = memo(
|
||||
function MessageItem({ message, showTimeline, onImageSettled, timelineLabel }: MessageItemProps) {
|
||||
const t = useI18n()
|
||||
const { open } = useImageLightbox()
|
||||
const isCustomer = message.senderType === "customer"
|
||||
// The server substitutes recalled messages with its own placeholder text, so
|
||||
// rendering content as-is would show a visitor that placeholder in the
|
||||
// server's language. The dashboard already replaces it; the portal did not.
|
||||
const isRecalled = Boolean(message.recalledAt) || message.sendStatus === 6
|
||||
const senderName = isCustomer ? t("supportChat.customerSelf") : message.senderName?.trim() || t("supportChat.agentLabel")
|
||||
const avatarSrc =
|
||||
!isCustomer && message.senderAvatar?.trim() ? message.senderAvatar.trim() : undefined
|
||||
const htmlContent = isRecalled
|
||||
? `<p>${t("conversation.messageRecalledHtml")}</p>`
|
||||
: renderIMMessageHTML(message)
|
||||
const fallbackName = senderName.slice(0, 1).toUpperCase()
|
||||
|
||||
return (
|
||||
<div>
|
||||
{showTimeline ? (
|
||||
<div className="mb-3 flex items-center justify-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-border bg-background/85 text-[11px] font-medium text-muted-foreground shadow-sm"
|
||||
>
|
||||
{timelineLabel}
|
||||
</Badge>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<ConversationMessageRow
|
||||
align={isCustomer ? "end" : "start"}
|
||||
avatar={
|
||||
!isCustomer ? (
|
||||
<Avatar>
|
||||
{avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null}
|
||||
<AvatarFallback className="bg-muted text-muted-foreground">
|
||||
{fallbackName || t("supportChat.customerFallback")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
) : null
|
||||
}
|
||||
contentClassName="max-w-[86%] gap-1.5"
|
||||
headerClassName="flex-wrap gap-x-2 gap-y-1 px-1 text-[11px]"
|
||||
header={
|
||||
<>
|
||||
<span className="font-medium">{senderName}</span>
|
||||
<span>{formatDateTime(message.sentAt)}</span>
|
||||
{isCustomer ? (
|
||||
<span>{message.agentRead ? t("supportChat.agentRead") : t("supportChat.agentUnread")}</span>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<ConversationMessageBubble
|
||||
variant={isRecalled ? "recalled" : isCustomer ? "customer" : "system"}
|
||||
className={cn(
|
||||
"rounded-lg border-0 px-3 py-2 text-sm leading-normal shadow-[0_10px_22px_rgba(15,23,42,0.06)]",
|
||||
isRecalled
|
||||
? "!border-border !bg-muted !text-muted-foreground"
|
||||
: isCustomer
|
||||
? "!bg-[#a9ea7a] !text-[#161616] dark:!bg-emerald-500 dark:!text-emerald-950"
|
||||
: "!border-border !bg-card !text-card-foreground dark:!bg-background"
|
||||
)}
|
||||
>
|
||||
<ImMessageHTML
|
||||
html={htmlContent}
|
||||
className={cn(
|
||||
isRecalled
|
||||
? "[&_p]:text-muted-foreground"
|
||||
: isCustomer
|
||||
? "[&_p]:text-[#161616] dark:[&_p]:text-emerald-950 [&_a]:text-[#161616] dark:[&_a]:text-emerald-950 [&_a]:underline [&_img]:cursor-zoom-in"
|
||||
: "[&_a]:text-card-foreground [&_a]:underline [&_img]:cursor-zoom-in"
|
||||
)}
|
||||
onImageSettled={onImageSettled}
|
||||
onImageClick={isRecalled ? undefined : open}
|
||||
/>
|
||||
</ConversationMessageBubble>
|
||||
</ConversationMessageRow>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
(prevProps, nextProps) =>
|
||||
isSameMessageItemRender(prevProps.message, nextProps.message) &&
|
||||
prevProps.showTimeline === nextProps.showTimeline &&
|
||||
prevProps.timelineLabel === nextProps.timelineLabel &&
|
||||
prevProps.onImageSettled === nextProps.onImageSettled
|
||||
)
|
||||
|
||||
function isSameMessageItemRender(prev: ImMessage, next: ImMessage) {
|
||||
return (
|
||||
prev.id === next.id &&
|
||||
prev.senderType === next.senderType &&
|
||||
prev.senderName === next.senderName &&
|
||||
prev.senderAvatar === next.senderAvatar &&
|
||||
prev.messageType === next.messageType &&
|
||||
prev.content === next.content &&
|
||||
prev.payload === next.payload &&
|
||||
prev.sentAt === next.sentAt &&
|
||||
prev.agentRead === next.agentRead
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user