feat: add AgentsTab component for managing agents

src/renderer/src/pages/home/Tabs/AgentsTab.tsx

@@ -0,0 +1,38 @@
+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 { Plus } from 'lucide-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import AgentItem from './components/AgentItem'
+
+interface AssistantsTabProps {}
+
+export const AgentsTab: FC<AssistantsTabProps> = () => {
+  const { agents } = useAgents()
+  const { removeAgent } = useRemoveAgent()
+  const { t } = useTranslation()
+
+  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} />
+      ))}
+      <AgentModal
+        trigger={{
+          content: (
+            <Button
+              onPress={(e) => e.continuePropagation()}
+              className="w-full justify-start bg-transparent text-foreground-500 hover:bg-accent">
+              <Plus size={16} className="mr-1 shrink-0" />
+              {t('agent.add.title')}
+            </Button>
+          )
+        }}
+      />
+    </div>
+  )
+}