Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-30 07:39:06 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

style(AgentItem): improve agent item style (#10824)

Browse Source 
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
This commit is contained in:
Phantom 2025-10-20 00:04:29 +08:00 committed by GitHub
parent 036f61bf12
commit 8e482a97e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/renderer/src/pages/home/Tabs/components/AgentItem.tsx
View File

@ -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}
/>
)