From 102e9c8e4f5fab00167d311520006cfca44e7e0e Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Wed, 6 May 2026 21:08:09 +0800
Subject: [PATCH] refactor: clean up imports and improve ConversationList
 structure

---
 .../_components/conversation-list.tsx         | 166 +++++++++---------
 1 file changed, 82 insertions(+), 84 deletions(-)

diff --git a/web/app/dashboard/conversations/_components/conversation-list.tsx b/web/app/dashboard/conversations/_components/conversation-list.tsx
index b1bbb5c..d2a8c78 100644
--- a/web/app/dashboard/conversations/_components/conversation-list.tsx
+++ b/web/app/dashboard/conversations/_components/conversation-list.tsx
@@ -1,16 +1,16 @@
 "use client"
 
-import { UserIcon } from "lucide-react"
+import { UserIcon } from "lucide-react";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { formatDateTime } from "@/lib/utils"
-import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { getEnumLabel } from "@/lib/enums";
 import {
-  IMConversationStatus,
-  IMConversationStatusLabels,
-} from "@/lib/generated/enums"
-import { getEnumLabel } from "@/lib/enums"
+    IMConversationStatus,
+    IMConversationStatusLabels,
+} from "@/lib/generated/enums";
+import { useAgentConversationsStore } from "@/lib/stores/agent-conversations";
+import { formatDateTime } from "@/lib/utils";
 
 function getStatusVariant(status: number) {
   switch (status) {
@@ -38,86 +38,84 @@ export function ConversationList({ onAfterSelect }: ConversationListProps) {
   const selectConversation = useAgentConversationsStore((state) => state.selectConversation)
 
   return (
-    <ScrollArea className="flex-1 bg-transparent">
-      <div className="divide-y divide-border">
-        {loading ? (
-          <div className="p-6 text-center text-sm text-muted-foreground">
-            加载中...
-          </div>
-        ) : conversations.length > 0 ? (
-          conversations.map((conversation) => {
-            const isSelected = selectedId === conversation.id
-            return (
-              <div
-                key={conversation.id}
-                className={`cursor-pointer px-2.5 py-1.5 transition-colors hover:bg-muted/50 ${
-                  isSelected ? "bg-muted/80" : ""
-                }`}
-                onClick={() => {
-                  void selectConversation(conversation.id).then(
-                    () => {
-                      onAfterSelect?.()
-                    },
-                    () => {},
-                  )
-                }}
-              >
-                <div className="overflow-hidden">
-                  <div className="flex items-center gap-2">
-                    <Avatar className="size-7 shrink-0">
-                      <AvatarImage src="" />
-                      <AvatarFallback className="bg-primary/10">
-                        <UserIcon className="size-3.5 text-primary" />
-                      </AvatarFallback>
-                    </Avatar>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-1.5">
-                        <span className="min-w-0 flex-1 truncate font-medium text-sm leading-4">
-                          {conversation.customerName || `客户 #${conversation.customerId || conversation.id}`}
-                        </span>
-                        {conversation.agentUnreadCount > 0 ? (
-                          <div className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
-                            {conversation.agentUnreadCount > 99
-                              ? "99+"
-                              : conversation.agentUnreadCount}
-                          </div>
-                        ) : null}
-                      </div>
-                      <div className="mt-0.5 text-[11px] text-muted-foreground">
-                        {conversation.lastMessageAt
-                          ? formatDateTime(conversation.lastMessageAt)
-                          : "暂无时间"}
-                      </div>
+    <ScrollArea className="overflow-auto">
+      {loading ? (
+        <div className="p-6 text-center text-sm text-muted-foreground">
+          加载中...
+        </div>
+      ) : conversations.length > 0 ? (
+        conversations.map((conversation) => {
+          const isSelected = selectedId === conversation.id
+          return (
+            <div
+              key={conversation.id}
+              className={`cursor-pointer px-2.5 py-1.5 transition-colors hover:bg-muted/50 border-b ${
+                isSelected ? "bg-muted/80" : ""
+              }`}
+              onClick={() => {
+                void selectConversation(conversation.id).then(
+                  () => {
+                    onAfterSelect?.()
+                  },
+                  () => {},
+                )
+              }}
+            >
+              <div className="overflow-hidden">
+                <div className="flex items-center gap-2">
+                  <Avatar className="size-7 shrink-0">
+                    <AvatarImage src="" />
+                    <AvatarFallback className="bg-primary/10">
+                      <UserIcon className="size-3.5 text-primary" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1.5">
+                      <span className="min-w-0 flex-1 truncate font-medium text-sm leading-4">
+                        {conversation.customerName || `客户 #${conversation.customerId || conversation.id}`}
+                      </span>
+                      {conversation.agentUnreadCount > 0 ? (
+                        <div className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
+                          {conversation.agentUnreadCount > 99
+                            ? "99+"
+                            : conversation.agentUnreadCount}
+                        </div>
+                      ) : null}
+                    </div>
+                    <div className="mt-0.5 text-[11px] text-muted-foreground">
+                      {conversation.lastMessageAt
+                        ? formatDateTime(conversation.lastMessageAt)
+                        : "暂无时间"}
                     </div>
                   </div>
-                  <div className="mt-0.5 truncate text-xs leading-4 text-muted-foreground">
-                    {conversation.lastMessageSummary || "暂无最新消息"}
-                  </div>
-                  <div className="mt-1 flex items-center gap-1 text-[10px] text-muted-foreground">
-                    <span
-                      className={`rounded px-1 py-0.5 ${getStatusVariant(
-                        conversation.status
-                      )}`}
-                    >
-                      {getEnumLabel(IMConversationStatusLabels, conversation.status)}
+                </div>
+                <div className="mt-0.5 truncate text-xs leading-4 text-muted-foreground">
+                  {conversation.lastMessageSummary || "暂无最新消息"}
+                </div>
+                <div className="mt-1 flex items-center gap-1 text-[10px] text-muted-foreground">
+                  <span
+                    className={`rounded px-1 py-0.5 ${getStatusVariant(
+                      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>
-                    {conversation.status === IMConversationStatus.Pending &&
-                    conversation.currentTeamName ? (
-                      <span className="rounded bg-muted px-1 py-0.5">
-                        值班组：{conversation.currentTeamName}
-                      </span>
-                    ) : null}
-                  </div>
+                  ) : null}
                 </div>
               </div>
-            )
-          })
-        ) : (
-          <div className="p-6 text-center text-sm text-muted-foreground">
-            暂无会话
-          </div>
-        )}
-      </div>
+            </div>
+          )
+        })
+      ) : (
+        <div className="p-6 text-center text-sm text-muted-foreground">
+          暂无会话
+        </div>
+      )}
     </ScrollArea>
   )
 }