feat: enhance agent management and UI in AddAssistantPopup and AgentsPage

- Updated AddAssistantPopup to improve layout and styling, ensuring better overflow handling and text display.
- Refactored AgentsPage to utilize a new utility function for grouping agents, enhancing data management and organization.
- Exported getAgentsFromSystemAgents function for better modularity and reusability across components.

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -121,7 +121,11 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
             key={agent.id}
             onClick={() => onCreateAssistant(agent)}
             className={agent.id === 'default' ? 'default' : ''}>
-            <HStack alignItems="center" gap={5}>
+            <HStack
+              alignItems="center"
+              gap={5}
+              style={{ overflow: 'hidden', maxWidth: '100%' }}
+              className="text-nowrap">
               {agent.emoji} {agent.name}
             </HStack>
             {agent.id === 'default' && <Tag color="green">{t('agents.tag.system')}</Tag>}
@@ -150,6 +154,7 @@ const AgentItem = styled.div`
   user-select: none;
   margin-bottom: 8px;
   cursor: pointer;
+  overflow: hidden;
   &.default {
     background-color: var(--color-background-mute);
   }

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
-import { useSystemAgents } from '.'
+import { getAgentsFromSystemAgents, useSystemAgents } from '.'
 import { groupTranslations } from './agentGroupTranslations'
 import AgentCard from './components/AgentCard'
 import MyAgents from './components/MyAgents'
@@ -27,7 +27,7 @@ const AgentsPage: FC = () => {
 
   const agentGroups = useMemo(() => {
     if (Object.keys(_agentGroups).length === 0) {
-      _agentGroups = groupBy(systemAgents, 'group')
+      _agentGroups = groupBy(getAgentsFromSystemAgents(systemAgents), 'group')
     }
     return _agentGroups
   }, [systemAgents])

src/renderer/src/pages/agents/index.ts

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 
 let _agents: Agent[] = []
 
-const getAgentsFromSystemAgents = (systemAgents: any) => {
+export const getAgentsFromSystemAgents = (systemAgents: any) => {
   const agents: Agent[] = []
   for (let i = 0; i < systemAgents.length; i++) {
     for (let j = 0; j < systemAgents[i].group.length; j++) {
@@ -24,7 +24,7 @@ export function useSystemAgents() {
     runAsyncFunction(async () => {
       if (_agents.length > 0) return
       const agents = await window.api.fs.read(resourcesPath + '/data/agents.json')
-      _agents = getAgentsFromSystemAgents(JSON.parse(agents) as Agent[])
+      _agents = JSON.parse(agents) as Agent[]
       setAgents(_agents)
     })
   }, [resourcesPath])