From 8e482a97e5580f9328ed1596a30de84362f30e62 Mon Sep 17 00:00:00 2001
From: Phantom <eurfelux@gmail.com>
Date: Mon, 20 Oct 2025 00:04:29 +0800
Subject: [PATCH] style(AgentItem): improve agent item style (#10824)

refactor(AgentItem): simplify BotIcon component and adjust styling

- Replace absolute positioning with flex layout in BotIcon
- Add tooltip for better user experience
- Consolidate styling classes for better maintainability
---
 .../pages/home/Tabs/components/AgentItem.tsx  | 44 ++++++++-----------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/components/AgentItem.tsx b/src/renderer/src/pages/home/Tabs/components/AgentItem.tsx
index c67579dcf5..9836ee5891 100644
--- a/src/renderer/src/pages/home/Tabs/components/AgentItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/AgentItem.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@heroui/react'
+import { cn, Tooltip } from '@heroui/react'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import { useSessions } from '@renderer/hooks/agents/useSessions'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -43,17 +43,13 @@ const AgentItem: FC<AgentItemProps> = ({ agent, isActive, onDelete, onPress }) =
             <AgentNameWrapper>
               <AgentLabel agent={agent} />
             </AgentNameWrapper>
+            {isActive && (
+              <MenuButton>
+                <SessionCount>{sessions.length}</SessionCount>
+              </MenuButton>
+            )}
+            {!isActive && <BotIcon />}
           </AssistantNameRow>
-          {isActive && (
-            <MenuButton>
-              <SessionCount>{sessions.length}</SessionCount>
-            </MenuButton>
-          )}
-          {!isActive && (
-            <BotIcon>
-              <Bot size={16} className="text-primary" />
-            </BotIcon>
-          )}
         </Container>
       </ContextMenuTrigger>
       <ContextMenuContent>
@@ -110,29 +106,27 @@ export const AgentNameWrapper: React.FC<React.HTMLAttributes<HTMLDivElement>> =
 export const MenuButton: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
   <div
     className={cn(
-      'absolute top-[6px] right-[9px] flex h-[22px] min-h-[22px] w-[22px] flex-row items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-background)] px-[5px]',
+      'flex h-5 min-h-5 w-5 flex-row items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-background)]',
       className
     )}
     {...props}
   />
 )
 
-export const BotIcon: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
-  <div
-    className={cn(
-      'absolute top-[8px] right-[12px] flex flex-row items-center justify-center rounded-full text-[14px] text-[var(--color-text)]',
-      className
-    )}
-    {...props}
-  />
-)
+export const BotIcon: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip content={t('common.agent_one')} delay={500} closeDelay={0}>
+      <MenuButton {...props}>
+        <Bot size={14} className="text-primary" />
+      </MenuButton>
+    </Tooltip>
+  )
+}
 
 export const SessionCount: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
   <div
-    className={cn(
-      'flex flex-row items-center justify-center rounded-full text-[10px] text-[var(--color-text)]',
-      className
-    )}
+    className={cn('flex flex-row items-center justify-center rounded-full text-[var(--color-text)] text-xs', className)}
     {...props}
   />
 )