From 947695fdc719a4009d334b8cb58dc4ebf7a56d67 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 26 Sep 2025 13:54:27 +0800
Subject: [PATCH] feat(sessions): replace manual list with virtual list for
 better performance

---
 .../pages/home/Tabs/components/Sessions.tsx   | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/components/Sessions.tsx b/src/renderer/src/pages/home/Tabs/components/Sessions.tsx
index cf4f50e122..4479aaa89a 100644
--- a/src/renderer/src/pages/home/Tabs/components/Sessions.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/Sessions.tsx
@@ -1,4 +1,5 @@
 import { Alert, Button, Spinner } from '@heroui/react'
+import { DynamicVirtualList } from '@renderer/components/VirtualList'
 import { useAgent } from '@renderer/hooks/agents/useAgent'
 import { useSessions } from '@renderer/hooks/agents/useSessions'
 import { useRuntime } from '@renderer/hooks/useRuntime'
@@ -108,22 +109,25 @@ const Sessions: React.FC<SessionsProps> = ({ agentId }) => {
         </Button>
       </motion.div>
       <AnimatePresence>
-        {sessions.map((session, index) => (
-          <motion.div
-            key={session.id}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.3, delay: index * 0.05 }}>
-            <SessionItem
-              session={session}
-              agentId={agentId}
-              isDisabled={sessionWaiting[session.id]}
-              isLoading={sessionWaiting[session.id]}
-              onDelete={() => handleDeleteSession(session.id)}
-              onPress={() => setActiveSessionId(agentId, session.id)}
-            />
-          </motion.div>
-        ))}
+        {/* h-9 */}
+        <DynamicVirtualList list={sessions} estimateSize={() => 9 * 4}>
+          {(session, index) => (
+            <motion.div
+              key={session.id}
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.3, delay: index * 0.05 }}>
+              <SessionItem
+                session={session}
+                agentId={agentId}
+                isDisabled={sessionWaiting[session.id]}
+                isLoading={sessionWaiting[session.id]}
+                onDelete={() => handleDeleteSession(session.id)}
+                onPress={() => setActiveSessionId(agentId, session.id)}
+              />
+            </motion.div>
+          )}
+        </DynamicVirtualList>
       </AnimatePresence>
     </motion.div>
   )