♻️ refactor: Refactor inbox agent setting

lobehub · May 24, 2024 · 2cc75a5 · 2cc75a5
1 parent 73989e7
commit 2cc75a5
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 50 deletions.
diff --git a/src/app/@modal/chat/(.)settings/modal/features/useCategory.tsx b/src/app/@modal/chat/(.)settings/modal/features/useCategory.tsx
@@ -4,7 +4,9 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { MenuProps } from '@/components/Menu';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { ChatSettingsTabs } from '@/store/global/initialState';
+import { useSessionStore } from '@/store/session';
 
 interface UseCategoryOptions {
   mobile?: boolean;
@@ -13,41 +15,43 @@ interface UseCategoryOptions {
 export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
   const { t } = useTranslation('setting');
   const iconSize = mobile ? { fontSize: 20 } : undefined;
+  const isInbox = useSessionStore((s) => s.activeId === INBOX_SESSION_ID);
 
   const cateItems: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={UserCircle} size={iconSize} />,
-        key: ChatSettingsTabs.Meta,
-        label: t('agentTab.meta'),
-      },
-      {
-        icon: <Icon icon={Bot} size={iconSize} />,
-        key: ChatSettingsTabs.Prompt,
-        label: t('agentTab.prompt'),
-      },
-      {
-        icon: <Icon icon={MessagesSquare} size={iconSize} />,
-        key: ChatSettingsTabs.Chat,
-        label: t('agentTab.chat'),
-      },
-      {
-        icon: <Icon icon={BrainCog} size={iconSize} />,
-        key: ChatSettingsTabs.Modal,
-        label: t('agentTab.modal'),
-      },
-      {
-        icon: <Icon icon={Mic2} size={iconSize} />,
-        key: ChatSettingsTabs.TTS,
-        label: t('agentTab.tts'),
-      },
-      {
-        icon: <Icon icon={Blocks} size={iconSize} />,
-        key: ChatSettingsTabs.Plugin,
-        label: t('agentTab.plugin'),
-      },
-    ],
-    [t],
+    () =>
+      [
+        !isInbox && {
+          icon: <Icon icon={UserCircle} size={iconSize} />,
+          key: ChatSettingsTabs.Meta,
+          label: t('agentTab.meta'),
+        },
+        {
+          icon: <Icon icon={Bot} size={iconSize} />,
+          key: ChatSettingsTabs.Prompt,
+          label: t('agentTab.prompt'),
+        },
+        {
+          icon: <Icon icon={MessagesSquare} size={iconSize} />,
+          key: ChatSettingsTabs.Chat,
+          label: t('agentTab.chat'),
+        },
+        {
+          icon: <Icon icon={BrainCog} size={iconSize} />,
+          key: ChatSettingsTabs.Modal,
+          label: t('agentTab.modal'),
+        },
+        {
+          icon: <Icon icon={Mic2} size={iconSize} />,
+          key: ChatSettingsTabs.TTS,
+          label: t('agentTab.tts'),
+        },
+        {
+          icon: <Icon icon={Blocks} size={iconSize} />,
+          key: ChatSettingsTabs.Plugin,
+          label: t('agentTab.plugin'),
+        },
+      ].filter(Boolean) as MenuProps['items'],
+    [t, isInbox],
   );
 
   return cateItems;

diff --git a/src/features/AgentSetting/AgentMeta/index.tsx b/src/features/AgentSetting/AgentMeta/index.tsx
@@ -10,6 +10,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
@@ -31,9 +32,11 @@ const AgentMeta = memo(() => {
     s.autocompleteAllMeta,
   ]);
   const locale = useUserStore(settingsSelectors.currentLanguage);
-  const loading = useStore((s) => s.autocompleteLoading);
+  const [isInbox, loading] = useStore((s) => [s.id === INBOX_SESSION_ID, s.autocompleteLoading]);
   const meta = useStore((s) => s.meta, isEqual);
 
+  if (isInbox) return;
+
   const basic = [
     {
       Render: AutoGenerateInput,
@@ -132,4 +135,4 @@ const AgentMeta = memo(() => {
   return <Form items={[metaData]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />;
 });
 
-export default AgentMeta;
+export default AgentMeta;
diff --git a/src/hooks/useInterceptingRoutes.test.ts b/src/hooks/useInterceptingRoutes.test.ts
@@ -1,10 +1,8 @@
 import { renderHook } from '@testing-library/react';
-import urlJoin from 'url-join';
 import { describe, expect, it, vi } from 'vitest';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { useGlobalStore } from '@/store/global';
 import { ChatSettingsTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
@@ -51,20 +49,20 @@ describe('useOpenChatSettings', () => {
     vi.mocked(useSessionStore).mockReturnValue(INBOX_SESSION_ID);
     const { result } = renderHook(() => useOpenChatSettings());
 
-    expect(result.current()).toBe('/settings/modal?session=inbox&tab=agent'); // Assuming openSettings returns a function
+    expect(result.current()).toBe('/chat/settings/modal?session=inbox&tab=prompt'); // Assuming openSettings returns a function
   });
 
   it('should handle mobile route for chat settings', () => {
     vi.mocked(useSessionStore).mockReturnValue('123');
     vi.mocked(useIsMobile).mockReturnValue(true);
-    const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
+    const { result } = renderHook(() => useOpenChatSettings());
     expect(result.current()).toBe('/chat/settings');
   });
 
   it('should handle desktop route for chat settings with session and tab', () => {
     vi.mocked(useSessionStore).mockReturnValue('456');
     vi.mocked(useIsMobile).mockReturnValue(false);
-    const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
+    const { result } = renderHook(() => useOpenChatSettings());
     expect(result.current()).toBe('/chat/settings/modal?session=456&tab=meta');
   });
 });
diff --git a/src/hooks/useInterceptingRoutes.ts b/src/hooks/useInterceptingRoutes.ts
@@ -4,8 +4,7 @@ import urlJoin from 'url-join';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { useGlobalStore } from '@/store/global';
-import { ChatSettingsTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+import { ChatSettingsTabs, SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export const useOpenSettings = (tab: SettingsTabs = SettingsTabs.Common) => {
@@ -23,24 +22,27 @@ export const useOpenSettings = (tab: SettingsTabs = SettingsTabs.Common) => {
   }, [mobile, tab, activeId, router]);
 };
 
-export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Meta) => {
+export const useOpenChatSettings = (tab?: ChatSettingsTabs) => {
   const activeId = useSessionStore((s) => s.activeId);
   const openSettings = useOpenSettings(SettingsTabs.Agent);
   const router = useQueryRoute();
   const mobile = useIsMobile();
 
   return useMemo(() => {
-    if (activeId === INBOX_SESSION_ID) {
-      useGlobalStore.setState({
-        sidebarKey: SidebarTabKey.Setting,
-      });
-      return openSettings;
-    }
     if (mobile) {
       return () => router.push('/chat/settings');
     } else {
       // use Intercepting Routes on Desktop
-      return () => router.push('/chat/settings/modal', { query: { session: activeId, tab } });
+      return () =>
+        router.push('/chat/settings/modal', {
+          query: {
+            session: activeId,
+            tab:
+              tab || activeId === INBOX_SESSION_ID
+                ? ChatSettingsTabs.Prompt
+                : ChatSettingsTabs.Meta,
+          },
+        });
     }
   }, [openSettings, mobile, activeId, router, tab]);
 };