wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: clean up imports and improve ConversationList structure

Browse Source
This commit is contained in:
mlogclub
2026-05-06 21:08:09 +08:00
parent 3734e8ec03
commit 102e9c8e4f
1 changed files with 82 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/conversations/_components/conversation-list.tsx
+82 -84
View File
@@ -1,16 +1,16 @@
"use client" "use client"
import { UserIcon } from "lucide-react" import { UserIcon } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ScrollArea } from "@/components/ui/scroll-area" import { ScrollArea } from "@/components/ui/scroll-area";
import { formatDateTime } from "@/lib/utils" import { getEnumLabel } from "@/lib/enums";
import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
import { import {
IMConversationStatus, IMConversationStatus,
IMConversationStatusLabels, IMConversationStatusLabels,
} from "@/lib/generated/enums" } from "@/lib/generated/enums";
import { getEnumLabel } from "@/lib/enums" import { useAgentConversationsStore } from "@/lib/stores/agent-conversations";
import { formatDateTime } from "@/lib/utils";
function getStatusVariant(status: number) { function getStatusVariant(status: number) {
switch (status) { switch (status) {
@@ -38,86 +38,84 @@ export function ConversationList({ onAfterSelect }: ConversationListProps) {
const selectConversation = useAgentConversationsStore((state) => state.selectConversation) const selectConversation = useAgentConversationsStore((state) => state.selectConversation)
return ( return (
<ScrollArea className="flex-1 bg-transparent"> <ScrollArea className="overflow-auto">
<div className="divide-y divide-border"> {loading ? (
{loading ? ( <div className="p-6 text-center text-sm text-muted-foreground">
<div className="p-6 text-center text-sm text-muted-foreground"> 加载中...
加载中... </div>
</div> ) : conversations.length > 0 ? (
) : conversations.length > 0 ? ( conversations.map((conversation) => {
conversations.map((conversation) => { const isSelected = selectedId === conversation.id
const isSelected = selectedId === conversation.id return (
return ( <div
<div key={conversation.id}
key={conversation.id} className={`cursor-pointer px-2.5 py-1.5 transition-colors hover:bg-muted/50 border-b ${
className={`cursor-pointer px-2.5 py-1.5 transition-colors hover:bg-muted/50 ${ isSelected ? "bg-muted/80" : ""
isSelected ? "bg-muted/80" : "" }`}
}`} onClick={() => {
onClick={() => { void selectConversation(conversation.id).then(
void selectConversation(conversation.id).then( () => {
() => { onAfterSelect?.()
onAfterSelect?.() },
}, () => {},
() => {}, )
) }}
}} >
> <div className="overflow-hidden">
<div className="overflow-hidden"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <Avatar className="size-7 shrink-0">
<Avatar className="size-7 shrink-0"> <AvatarImage src="" />
<AvatarImage src="" /> <AvatarFallback className="bg-primary/10">
<AvatarFallback className="bg-primary/10"> <UserIcon className="size-3.5 text-primary" />
<UserIcon className="size-3.5 text-primary" /> </AvatarFallback>
</AvatarFallback> </Avatar>
</Avatar> <div className="min-w-0 flex-1">
<div className="min-w-0 flex-1"> <div className="flex items-center gap-1.5">
<div className="flex items-center gap-1.5"> <span className="min-w-0 flex-1 truncate font-medium text-sm leading-4">
<span className="min-w-0 flex-1 truncate font-medium text-sm leading-4"> {conversation.customerName || `客户 #${conversation.customerId || conversation.id}`}
{conversation.customerName || `客户 #${conversation.customerId || conversation.id}`} </span>
</span> {conversation.agentUnreadCount > 0 ? (
{conversation.agentUnreadCount > 0 ? ( <div className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
<div className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground"> {conversation.agentUnreadCount > 99
{conversation.agentUnreadCount > 99 ? "99+"
? "99+" : conversation.agentUnreadCount}
: conversation.agentUnreadCount} </div>
</div> ) : null}
) : null} </div>
</div> <div className="mt-0.5 text-[11px] text-muted-foreground">
<div className="mt-0.5 text-[11px] text-muted-foreground"> {conversation.lastMessageAt
{conversation.lastMessageAt ? formatDateTime(conversation.lastMessageAt)
? formatDateTime(conversation.lastMessageAt) : "暂无时间"}
: "暂无时间"}
</div>
</div> </div>
</div> </div>
<div className="mt-0.5 truncate text-xs leading-4 text-muted-foreground"> </div>
{conversation.lastMessageSummary || "暂无最新消息"} <div className="mt-0.5 truncate text-xs leading-4 text-muted-foreground">
</div> {conversation.lastMessageSummary || "暂无最新消息"}
<div className="mt-1 flex items-center gap-1 text-[10px] text-muted-foreground"> </div>
<span <div className="mt-1 flex items-center gap-1 text-[10px] text-muted-foreground">
className={`rounded px-1 py-0.5 ${getStatusVariant( <span
conversation.status className={`rounded px-1 py-0.5 ${getStatusVariant(
)}`} conversation.status
> )}`}
{getEnumLabel(IMConversationStatusLabels, conversation.status)} >
{getEnumLabel(IMConversationStatusLabels, conversation.status)}
</span>
{conversation.status === IMConversationStatus.Pending &&
conversation.currentTeamName ? (
<span className="rounded bg-muted px-1 py-0.5">
值班组：{conversation.currentTeamName}
</span> </span>
{conversation.status === IMConversationStatus.Pending && ) : null}
conversation.currentTeamName ? (
<span className="rounded bg-muted px-1 py-0.5">
值班组：{conversation.currentTeamName}
</span>
) : null}
</div>
</div> </div>
</div> </div>
) </div>
}) )
) : ( })
<div className="p-6 text-center text-sm text-muted-foreground"> ) : (
暂无会话 <div className="p-6 text-center text-sm text-muted-foreground">
</div> 暂无会话
)} </div>
</div> )}
</ScrollArea> </ScrollArea>
) )
} }