refactor(agent-popup): replace AddAgentPopup with AddAgentModal component

- Remove deprecated AddAgentPopup implementation
- Implement new AddAgentModal component with improved UI using Button component
- Update related imports and usage in AssistantsTab
- Clean up unused styles and code

src/renderer/src/components/Popups/AddAgentModal.tsx

@@ -12,25 +12,23 @@ import {
   SelectedItemProps,
   SelectedItems,
   SelectItem,
-  Textarea
+  Textarea,
+  useDisclosure
 } from '@heroui/react'
 import { loggerService } from '@logger'
 import ClaudeIcon from '@renderer/assets/images/models/claude.png'
-import { TopView } from '@renderer/components/TopView'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useTimer } from '@renderer/hooks/useTimer'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { AgentEntity, isAgentType } from '@renderer/types'
 import { uuid } from '@renderer/utils'
+import { Plus } from 'lucide-react'
 import { ChangeEvent, FormEvent, useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ErrorBoundary } from '../ErrorBoundary'
 
 const logger = loggerService.withContext('AddAgentPopup')
-interface Props {
-  resolve: (value: AgentEntity | undefined) => void
-}
 
 interface Option {
   key: string
@@ -54,13 +52,14 @@ type AgentForm = {
   model?: AgentEntity['model']
 }
 
-const PopupContainer: React.FC<Props> = ({ resolve }) => {
-  const [open, setOpen] = useState(true)
+export const AddAgentModal: React.FC = () => {
+  const { isOpen, onClose, onOpen } = useDisclosure()
   const { t } = useTranslation()
   const loadingRef = useRef(false)
   const { setTimeoutTimer } = useTimer()
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { addAgent } = useAgents()
+
   // default values. may change to undefined.
   const [form, setForm] = useState<AgentForm>({
     type: 'claude-code',
@@ -211,22 +210,21 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       logger.debug('Agent', agent)
       // addAgent(agent)
       window.toast.success(t('common.add_success'))
+      loadingRef.current = false
 
       setTimeoutTimer('onCreateAgent', () => EventEmitter.emit(EVENT_NAMES.SHOW_ASSISTANTS), 0)
-      resolve(agent)
-      setOpen(false)
+      onClose()
     },
-    [form.type, form.model, form.name, form.description, form.instructions, t, setTimeoutTimer, resolve]
+    [form.type, form.model, form.name, form.description, form.instructions, t, setTimeoutTimer, onClose]
   )
 
-  const onClose = async () => {
-    AddAgentPopup.hide()
-    resolve(undefined)
-  }
-
   return (
     <ErrorBoundary>
-      <Modal isOpen={open} onClose={onClose}>
+      <Button onPress={onOpen} className="justify-start bg-transparent text-foreground-500 hover:bg-accent">
+        <Plus size={16} style={{ marginRight: 4, flexShrink: 0 }} />
+        {t('agent.add.title')}
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose}>
         <ModalContent>
           {(onClose) => (
             <>
@@ -282,16 +280,3 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     </ErrorBoundary>
   )
 }
-
-// FIXME: Under the current TopView design, the close animation will fail.
-export default class AddAgentPopup {
-  static topviewId = 0
-  static hide() {
-    TopView.hide('AddAgentPopup')
-  }
-  static show() {
-    return new Promise<AgentEntity | undefined>((resolve) => {
-      TopView.show(<PopupContainer resolve={resolve} />, 'AddAgentPopup')
-    })
-  }
-}

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

@@ -1,12 +1,14 @@
 import { DownOutlined, RightOutlined } from '@ant-design/icons'
+import { Button } from '@heroui/react'
 import { DraggableList } from '@renderer/components/DraggableList'
+import { AddAgentModal } from '@renderer/components/Popups/AddAgentModal'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useAssistants } from '@renderer/hooks/useAssistant'
 import { useAssistantPresets } from '@renderer/hooks/useAssistantPresets'
 import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
 import { useTags } from '@renderer/hooks/useTags'
 import { Assistant, AssistantsSortType } from '@renderer/types'
-import { Tooltip, Typography } from 'antd'
+import { Tooltip } from 'antd'
 import { Plus } from 'lucide-react'
 import { FC, useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,14 +20,12 @@ interface AssistantsTabProps {
   activeAssistant: Assistant
   setActiveAssistant: (assistant: Assistant) => void
   onCreateAssistant: () => void
-  onCreateAgent: () => void
   onCreateDefaultAssistant: () => void
 }
 const Assistants: FC<AssistantsTabProps> = ({
   activeAssistant,
   setActiveAssistant,
   onCreateAssistant,
-  onCreateAgent,
   onCreateDefaultAssistant
 }) => {
   const { assistants, removeAssistant, copyAssistant, updateAssistants } = useAssistants()
@@ -74,29 +74,25 @@ const Assistants: FC<AssistantsTabProps> = ({
 
   const renderAddAssistantButton = useMemo(() => {
     return (
-      <AssistantAddItem onClick={onCreateAssistant}>
-        <AddItemWrapper>
-          <Plus size={16} style={{ marginRight: 4, flexShrink: 0 }} />
-          <Typography.Text style={{ color: 'inherit' }} ellipsis={{ tooltip: t('chat.add.assistant.title') }}>
-            {t('chat.add.assistant.title')}
-          </Typography.Text>
-        </AddItemWrapper>
-      </AssistantAddItem>
+      <Button onPress={onCreateAssistant} className="justify-start bg-transparent text-foreground-500 hover:bg-accent">
+        <Plus size={16} style={{ marginRight: 4, flexShrink: 0 }} />
+        {t('chat.add.assistant.title')}
+      </Button>
     )
   }, [onCreateAssistant, t])
 
-  const AddAgentButton = useCallback(() => {
-    return (
-      <AssistantAddItem onClick={onCreateAgent}>
-        <AddItemWrapper>
-          <Plus size={16} style={{ marginRight: 4, flexShrink: 0 }} />
-          <Typography.Text style={{ color: 'inherit' }} ellipsis={{ tooltip: t('agent.add.title') }}>
-            {t('agent.add.title')}
-          </Typography.Text>
-        </AddItemWrapper>
-      </AssistantAddItem>
-    )
-  }, [onCreateAgent, t])
+  // const AddAgentButton = useCallback(() => {
+  //   return (
+  //     <AssistantAddItem onClick={onCreateAgent}>
+  //       <AddItemWrapper>
+  //         <Plus size={16} style={{ marginRight: 4, flexShrink: 0 }} />
+  //         <Typography.Text style={{ color: 'inherit' }} ellipsis={{ tooltip: t('agent.add.title') }}>
+  //           {t('agent.add.title')}
+  //         </Typography.Text>
+  //       </AddItemWrapper>
+  //     </AssistantAddItem>
+  //   )
+  // }, [onCreateAgent, t])
 
   if (assistantsTabSortType === 'tags') {
     return (
@@ -147,7 +143,7 @@ const Assistants: FC<AssistantsTabProps> = ({
           ))}
         </div>
         {renderAddAssistantButton}
-        <AddAgentButton />
+        {/* <AddAgentButton /> */}
       </Container>
     )
   }
@@ -175,7 +171,8 @@ const Assistants: FC<AssistantsTabProps> = ({
         )}
       </DraggableList>
       {!dragging && renderAddAssistantButton}
-      {!dragging && <AddAgentButton />}
+      {/* {!dragging && <AddAgentButton />} */}
+      {!dragging && <AddAgentModal />}
       <div style={{ minHeight: 10 }}></div>
     </Container>
   )
@@ -195,22 +192,6 @@ const TagsContainer = styled.div`
   gap: 8px;
 `
 
-const AssistantAddItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 7px 12px;
-  position: relative;
-  padding-right: 35px;
-  border-radius: var(--list-item-border-radius);
-  border: 0.5px solid transparent;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--color-list-item-hover);
-  }
-`
-
 const GroupTitle = styled.div`
   color: var(--color-text-2);
   font-size: 12px;
@@ -243,13 +224,4 @@ const GroupTitleDivider = styled.div`
   border-top: 1px solid var(--color-border);
 `
 
-const AddItemWrapper = styled.div`
-  color: var(--color-text-2);
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`
-
 export default Assistants

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

@@ -1,4 +1,3 @@
-import AddAgentPopup from '@renderer/components/Popups/AddAgentPopup'
 import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { useNavbarPosition, useSettings } from '@renderer/hooks/useSettings'
@@ -63,10 +62,6 @@ const HomeTabs: FC<Props> = ({
     assistant && setActiveAssistant(assistant)
   }
 
-  const onCreateAgent = async () => {
-    await AddAgentPopup.show()
-  }
-
   const onCreateDefaultAssistant = () => {
     const assistant = { ...defaultAssistant, id: uuid() }
     addAssistant(assistant)
@@ -138,7 +133,6 @@ const HomeTabs: FC<Props> = ({
             activeAssistant={activeAssistant}
             setActiveAssistant={setActiveAssistant}
             onCreateAssistant={onCreateAssistant}
-            onCreateAgent={onCreateAgent}
             onCreateDefaultAssistant={onCreateDefaultAssistant}
           />
         )}