From 1e919a908f73a1dd2a34f68f448fb071a3757f21 Mon Sep 17 00:00:00 2001 From: icarus Date: Sun, 14 Sep 2025 04:39:14 +0800 Subject: [PATCH] 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 --- .../{AddAgentPopup.tsx => AddAgentModal.tsx} | 43 ++++------- .../src/pages/home/Tabs/AssistantsTab.tsx | 72 ++++++------------- src/renderer/src/pages/home/Tabs/index.tsx | 6 -- 3 files changed, 36 insertions(+), 85 deletions(-) rename src/renderer/src/components/Popups/{AddAgentPopup.tsx => AddAgentModal.tsx} (90%) diff --git a/src/renderer/src/components/Popups/AddAgentPopup.tsx b/src/renderer/src/components/Popups/AddAgentModal.tsx similarity index 90% rename from src/renderer/src/components/Popups/AddAgentPopup.tsx rename to src/renderer/src/components/Popups/AddAgentModal.tsx index 2cb11b731c..58ab21b066 100644 --- a/src/renderer/src/components/Popups/AddAgentPopup.tsx +++ b/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 = ({ 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({ type: 'claude-code', @@ -211,22 +210,21 @@ const PopupContainer: React.FC = ({ 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 ( - + + {(onClose) => ( <> @@ -282,16 +280,3 @@ const PopupContainer: React.FC = ({ resolve }) => { ) } - -// 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((resolve) => { - TopView.show(, 'AddAgentPopup') - }) - } -} diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx index cb4075f9fa..5bd07e9189 100644 --- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx +++ b/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 = ({ activeAssistant, setActiveAssistant, onCreateAssistant, - onCreateAgent, onCreateDefaultAssistant }) => { const { assistants, removeAssistant, copyAssistant, updateAssistants } = useAssistants() @@ -74,29 +74,25 @@ const Assistants: FC = ({ const renderAddAssistantButton = useMemo(() => { return ( - - - - - {t('chat.add.assistant.title')} - - - + ) }, [onCreateAssistant, t]) - const AddAgentButton = useCallback(() => { - return ( - - - - - {t('agent.add.title')} - - - - ) - }, [onCreateAgent, t]) + // const AddAgentButton = useCallback(() => { + // return ( + // + // + // + // + // {t('agent.add.title')} + // + // + // + // ) + // }, [onCreateAgent, t]) if (assistantsTabSortType === 'tags') { return ( @@ -147,7 +143,7 @@ const Assistants: FC = ({ ))} {renderAddAssistantButton} - + {/* */} ) } @@ -175,7 +171,8 @@ const Assistants: FC = ({ )} {!dragging && renderAddAssistantButton} - {!dragging && } + {/* {!dragging && } */} + {!dragging && }
) @@ -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 diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx index 8afdc05b4a..9362288df7 100644 --- a/src/renderer/src/pages/home/Tabs/index.tsx +++ b/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 = ({ 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 = ({ activeAssistant={activeAssistant} setActiveAssistant={setActiveAssistant} onCreateAssistant={onCreateAssistant} - onCreateAgent={onCreateAgent} onCreateDefaultAssistant={onCreateDefaultAssistant} /> )}