From 1c978e0684cc811d458553f983ebf8f09f7afe75 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Thu, 18 Sep 2025 18:47:37 +0800
Subject: [PATCH] feat(agents): add agent selection functionality

- Replace onTagClick with onPress handler in AgentItem
- Add active agent state management in AgentsTab
- Wrap AgentItem content in Button for better interaction
---
 .../src/pages/home/Tabs/AgentsTab.tsx         | 23 +++++++++++++++++--
 .../pages/home/Tabs/components/AgentItem.tsx  | 10 ++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/AgentsTab.tsx b/src/renderer/src/pages/home/Tabs/AgentsTab.tsx
index 9f6e7f9ffc..93c95fa02a 100644
--- a/src/renderer/src/pages/home/Tabs/AgentsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/AgentsTab.tsx
@@ -2,8 +2,11 @@ import { Button } from '@heroui/react'
 import { AgentModal } from '@renderer/components/Popups/AgentModal'
 import { useAgents } from '@renderer/hooks/agents/useAgents'
 import { useRemoveAgent } from '@renderer/hooks/agents/useRemoveAgent'
+import { useRuntime } from '@renderer/hooks/useRuntime'
+import { useAppDispatch } from '@renderer/store'
+import { setActiveAgentId as setActiveAgentIdAction } from '@renderer/store/runtime'
 import { Plus } from 'lucide-react'
-import { FC } from 'react'
+import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import AgentItem from './components/AgentItem'
@@ -14,12 +17,28 @@ export const AgentsTab: FC<AssistantsTabProps> = () => {
   const { agents } = useAgents()
   const { removeAgent } = useRemoveAgent()
   const { t } = useTranslation()
+  const { chat } = useRuntime()
+  const { activeAgentId } = chat
+  const dispatch = useAppDispatch()
+
+  const setActiveAgentId = useCallback(
+    (id: string) => {
+      dispatch(setActiveAgentIdAction(id))
+    },
+    [dispatch]
+  )
 
   return (
     <div className="agents-tab h-full w-full">
       <span className="mb-2 text-foreground-400 text-xs">{t('common.agent_other')}</span>
       {agents.map((agent) => (
-        <AgentItem key={agent.id} agent={agent} isActive={false} onDelete={removeAgent} />
+        <AgentItem
+          key={agent.id}
+          agent={agent}
+          isActive={agent.id === activeAgentId}
+          onDelete={removeAgent}
+          onPress={() => setActiveAgentId(agent.id)}
+        />
       ))}
       <AgentModal
         trigger={{
diff --git a/src/renderer/src/pages/home/Tabs/components/AgentItem.tsx b/src/renderer/src/pages/home/Tabs/components/AgentItem.tsx
index 2c23062ef0..15f2b7b5f1 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 { Avatar, cn, useDisclosure } from '@heroui/react'
+import { Avatar, Button, cn, useDisclosure } from '@heroui/react'
 import { loggerService } from '@logger'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import { AgentModal } from '@renderer/components/Popups/AgentModal'
@@ -14,10 +14,10 @@ interface AgentItemProps {
   agent: AgentEntity
   isActive: boolean
   onDelete: (agent: AgentEntity) => void
-  onTagClick?: (tag: string) => void
+  onPress: () => void
 }
 
-const AgentItem: FC<AgentItemProps> = ({ agent, isActive, onDelete }) => {
+const AgentItem: FC<AgentItemProps> = ({ agent, isActive, onDelete, onPress }) => {
   const { t } = useTranslation()
   const { isOpen, onOpen, onClose } = useDisclosure()
   // const { agents } = useAgents()
@@ -26,10 +26,10 @@ const AgentItem: FC<AgentItemProps> = ({ agent, isActive, onDelete }) => {
     const displayName = agent.name ?? agent.id
     const avatar = getAgentAvatar(agent.type)
     return (
-      <>
+      <Button onPress={onPress}>
         <Avatar className="h-6 w-6" src={avatar} name={displayName} />
         <span className="text-sm">{displayName}</span>
-      </>
+      </Button>
     )
   }, [agent.id, agent.name, agent.type])