refactor(AgentItem): replace antd dropdown with custom context menu component

The antd dropdown component was replaced with a custom context menu implementation to improve consistency with the application's UI components and remove dependency on antd. The functionality remains the same but is now implemented using the custom context menu component.

src/renderer/src/components/ContextMenu/index.tsx

@@ -6,6 +6,7 @@ interface ContextMenuProps {
   children: React.ReactNode
 }
 
+// FIXME: Why does this component name look like a generic component but is not customizable at all?
 const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
   const { t } = useTranslation()
   const [selectedText, setSelectedText] = useState<string | undefined>(undefined)

src/renderer/src/pages/home/Tabs/components/AgentItem.tsx

@@ -2,8 +2,8 @@ import { Avatar, cn } from '@heroui/react'
 import { loggerService } from '@logger'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import { AgentEntity } from '@renderer/types'
-import { Dropdown, MenuProps } from 'antd'
-import { FC, memo, useCallback, useMemo } from 'react'
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@renderer/ui/context-menu'
+import { FC, memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const logger = loggerService.withContext('AgentItem')
@@ -19,16 +19,6 @@ const AgentItem: FC<AgentItemProps> = ({ agent, isActive, onDelete }) => {
   const { t } = useTranslation()
   // const { agents } = useAgents()
 
-  const menuItems = useMemo(
-    () =>
-      getMenuItems({
-        agent,
-        t,
-        onDelete
-      }),
-    [agent, t, onDelete]
-  )
-
   const AgentLabel = useCallback(() => {
     return (
       <>
@@ -41,46 +31,39 @@ const AgentItem: FC<AgentItemProps> = ({ agent, isActive, onDelete }) => {
   const handleClick = () => logger.debug('not implemented')
 
   return (
-    <Dropdown
-      menu={{ items: menuItems }}
-      trigger={['contextMenu']}
-      popupRender={(menu) => <div onPointerDown={(e) => e.stopPropagation()}>{menu}</div>}>
-      <Container onClick={handleClick} className={isActive ? 'active' : ''}>
-        <AssistantNameRow className="name" title={agent.name}>
-          <AgentLabel />
-        </AssistantNameRow>
-      </Container>
-    </Dropdown>
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <Container onClick={handleClick} className={isActive ? 'active' : ''}>
+          <AssistantNameRow className="name" title={agent.name}>
+            <AgentLabel />
+          </AssistantNameRow>
+        </Container>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem key="edit" onClick={() => window.toast.info('not implemented')}>
+          <EditIcon size={14} />
+          {t('common.edit')}
+        </ContextMenuItem>
+        <ContextMenuItem
+          key="delete"
+          className="text-danger"
+          onClick={() => {
+            window.modal.confirm({
+              title: t('agent.delete.title'),
+              content: t('agent.delete.content'),
+              centered: true,
+              okButtonProps: { danger: true },
+              onOk: () => onDelete(agent)
+            })
+          }}>
+          <DeleteIcon size={14} className="lucide-custom text-danger" />
+          <span className="text-danger">{t('common.delete')}</span>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   )
 }
 
-// 提取创建菜单配置的函数
-function getMenuItems({ agent, t, onDelete }): MenuProps['items'] {
-  return [
-    {
-      label: t('common.edit'),
-      key: 'edit',
-      icon: <EditIcon size={14} />,
-      onClick: () => window.toast.info('not implemented')
-    },
-    {
-      label: t('common.delete'),
-      key: 'delete',
-      icon: <DeleteIcon size={14} className="lucide-custom" />,
-      danger: true,
-      onClick: () => {
-        window.modal.confirm({
-          title: t('agent.delete.title'),
-          content: t('agent.delete.content'),
-          centered: true,
-          okButtonProps: { danger: true },
-          onOk: () => onDelete(agent)
-        })
-      }
-    }
-  ]
-}
-
 const Container: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
   <div
     {...props}