From 6482f8a33253ee8c722cc9f49aa0d71ea970c80f Mon Sep 17 00:00:00 2001 From: Arvin Xu Date: Mon, 10 Feb 2025 23:25:19 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=92=84=20style:=20refactor=20agent=20?= =?UTF-8?q?settings=20modal=20(#5987)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * remove setting modal * refactor the agent settings modal * fix tests * fix tests --- .../AgentSettings/CategoryContent/index.tsx} | 13 +- .../CategoryContent}/useCategory.tsx | 0 .../features/AgentSettings/index.tsx | 114 ++++++++++++++++++ .../(workspace)/features/SettingButton.tsx | 20 ++- .../(main)/chat/settings/modal/page.tsx | 23 ---- .../@modal/chat/(.)settings/modal/layout.tsx | 61 ---------- .../@modal/chat/(.)settings/modal/loading.tsx | 5 - .../@modal/chat/(.)settings/modal/page.tsx | 56 --------- src/hooks/useChatSettingsTab.ts | 12 -- src/hooks/useInterceptingRoutes.test.ts | 15 ++- src/hooks/useInterceptingRoutes.ts | 18 +-- src/store/agent/slices/chat/initialState.ts | 2 + 12 files changed, 157 insertions(+), 182 deletions(-) rename src/app/[variants]/{@modal/chat/(.)settings/modal/features/CategoryContent.tsx => (main)/chat/(workspace)/features/AgentSettings/CategoryContent/index.tsx} (68%) rename src/app/[variants]/{@modal/chat/(.)settings/modal/features => (main)/chat/(workspace)/features/AgentSettings/CategoryContent}/useCategory.tsx (100%) create mode 100644 src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/index.tsx delete mode 100644 src/app/[variants]/(main)/chat/settings/modal/page.tsx delete mode 100644 src/app/[variants]/@modal/chat/(.)settings/modal/layout.tsx delete mode 100644 src/app/[variants]/@modal/chat/(.)settings/modal/loading.tsx delete mode 100644 src/app/[variants]/@modal/chat/(.)settings/modal/page.tsx delete mode 100644 src/hooks/useChatSettingsTab.ts diff --git a/src/app/[variants]/@modal/chat/(.)settings/modal/features/CategoryContent.tsx b/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent/index.tsx similarity index 68% rename from src/app/[variants]/@modal/chat/(.)settings/modal/features/CategoryContent.tsx rename to src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent/index.tsx index fac656b4fe921..1560849079722 100644 --- a/src/app/[variants]/@modal/chat/(.)settings/modal/features/CategoryContent.tsx +++ b/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent/index.tsx @@ -5,22 +5,23 @@ import { Flexbox } from 'react-layout-kit'; import HeaderContent from '@/app/[variants]/(main)/chat/settings/features/HeaderContent'; import Menu from '@/components/Menu'; -import { useChatSettingsTab } from '@/hooks/useChatSettingsTab'; -import { useQueryRoute } from '@/hooks/useQueryRoute'; +import { ChatSettingsTabs } from '@/store/global/initialState'; import { useCategory } from './useCategory'; -const CategoryContent = memo(() => { +interface CategoryContentProps { + setTab: (tab: ChatSettingsTabs) => void; + tab: string; +} +const CategoryContent = memo(({ setTab, tab }) => { const cateItems = useCategory(); - const tab = useChatSettingsTab(); - const router = useQueryRoute(); return ( <> { - router.replace('/chat/settings/modal', { query: { tab: key } }); + setTab(key as ChatSettingsTabs); }} selectable selectedKeys={[tab as any]} diff --git a/src/app/[variants]/@modal/chat/(.)settings/modal/features/useCategory.tsx b/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent/useCategory.tsx similarity index 100% rename from src/app/[variants]/@modal/chat/(.)settings/modal/features/useCategory.tsx rename to src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent/useCategory.tsx diff --git a/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/index.tsx b/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/index.tsx new file mode 100644 index 0000000000000..6958aafeec15c --- /dev/null +++ b/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/index.tsx @@ -0,0 +1,114 @@ +'use client'; + +import { Drawer } from 'antd'; +import { useResponsive, useTheme } from 'antd-style'; +import isEqual from 'fast-deep-equal'; +import { memo, useRef, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Flexbox } from 'react-layout-kit'; + +import Header from '@/app/[variants]/(main)/settings/_layout/Desktop/Header'; +import AgentChat from '@/features/AgentSetting/AgentChat'; +import AgentMeta from '@/features/AgentSetting/AgentMeta'; +import AgentModal from '@/features/AgentSetting/AgentModal'; +import AgentPlugin from '@/features/AgentSetting/AgentPlugin'; +import AgentPrompt from '@/features/AgentSetting/AgentPrompt'; +import AgentTTS from '@/features/AgentSetting/AgentTTS'; +import StoreUpdater from '@/features/AgentSetting/StoreUpdater'; +import { Provider, createStore } from '@/features/AgentSetting/store'; +import Footer from '@/features/Setting/Footer'; +import { useAgentStore } from '@/store/agent'; +import { agentSelectors } from '@/store/agent/slices/chat'; +import { ChatSettingsTabs } from '@/store/global/initialState'; +import { useSessionStore } from '@/store/session'; +import { sessionMetaSelectors } from '@/store/session/selectors'; + +import CategoryContent from './CategoryContent'; + +const AgentSettings = memo(() => { + const { t } = useTranslation('setting'); + const id = useSessionStore((s) => s.activeId); + const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual); + const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual); + const [showAgentSetting, updateAgentConfig] = useAgentStore((s) => [ + s.showAgentSetting, + s.updateAgentConfig, + ]); + const [updateAgentMeta] = useSessionStore((s) => [ + s.updateSessionMeta, + sessionMetaSelectors.currentAgentTitle(s), + ]); + + const [tab, setTab] = useState(ChatSettingsTabs.Meta); + + const ref = useRef(null); + const theme = useTheme(); + const { md = true, mobile = false } = useResponsive(); + + const category = ; + return ( + + + { + useAgentStore.setState({ showAgentSetting: false }); + }} + open={showAgentSetting} + placement={'bottom'} + styles={{ + body: { padding: 0 }, + content: { + background: theme.colorBgContainer, + }, + }} + title={t('header.session')} + > + + {md ? ( + {category} + ) : ( +
ref.current} + title={t(`agentTab.${tab as ChatSettingsTabs}`)} + > + {category} +
+ )} + + {tab === ChatSettingsTabs.Meta && } + {tab === ChatSettingsTabs.Prompt && } + {tab === ChatSettingsTabs.Chat && } + {tab === ChatSettingsTabs.Modal && } + {tab === ChatSettingsTabs.TTS && } + {tab === ChatSettingsTabs.Plugin && }