💄 style: improve inbox agent modal

Author: arvinxx

src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/CategoryContent/useCategory.tsx

@@ -1,10 +1,13 @@
 import { Icon } from '@lobehub/ui';
+import { MenuItemType } from 'antd/es/menu/interface';
 import { Blocks, Bot, BrainCog, MessagesSquare, Mic2, UserCircle } from 'lucide-react';
 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 +16,44 @@ interface UseCategoryOptions {
 export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
   const { t } = useTranslation('setting');
   const iconSize = mobile ? { fontSize: 20 } : undefined;
+  const id = useSessionStore((s) => s.activeId);
+  const isInbox = id === 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'),
+        }) as MenuItemType,
+        (!isInbox && {
+          icon: <Icon icon={Bot} size={iconSize} />,
+          key: ChatSettingsTabs.Prompt,
+          label: t('agentTab.prompt'),
+        }) as MenuItemType,
+        {
+          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),
+    [t, isInbox],
   );
 
   return cateItems;

src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/index.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Header from '@/app/[variants]/(main)/settings/_layout/Desktop/Header';
+import { INBOX_SESSION_ID } from '@/const/session';
 import AgentChat from '@/features/AgentSetting/AgentChat';
 import AgentMeta from '@/features/AgentSetting/AgentMeta';
 import AgentModal from '@/features/AgentSetting/AgentModal';
@@ -38,8 +39,9 @@ const AgentSettings = memo(() => {
     s.updateSessionMeta,
     sessionMetaSelectors.currentAgentTitle(s),
   ]);
+  const isInbox = id === INBOX_SESSION_ID;
 
-  const [tab, setTab] = useState(ChatSettingsTabs.Meta);
+  const [tab, setTab] = useState(isInbox ? ChatSettingsTabs.Chat : ChatSettingsTabs.Meta);
 
   const ref = useRef<any>(null);
   const theme = useTheme();

src/app/[variants]/(main)/chat/(workspace)/features/SettingButton.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import { useSessionStore } from '@/store/session';
 
 const AgentSettings = dynamic(() => import('./AgentSettings'), {
   ssr: false,
@@ -16,6 +17,7 @@ const AgentSettings = dynamic(() => import('./AgentSettings'), {
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('common');
   const openChatSettings = useOpenChatSettings();
+  const id = useSessionStore((s) => s.activeId);
 
   return (
     <>
@@ -25,7 +27,7 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
         size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
         title={t('header.session', { ns: 'setting' })}
       />
-      <AgentSettings />
+      <AgentSettings key={id} />
     </>
   );
 });

src/hooks/useInterceptingRoutes.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import urlJoin from 'url-join';
 
 import { INBOX_SESSION_ID } from '@/const/session';
+import { isDeprecatedEdition } from '@/const/version';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useAgentStore } from '@/store/agent';
@@ -15,7 +16,7 @@ export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Met
   const router = useQueryRoute();
 
   return useMemo(() => {
-    if (activeId === INBOX_SESSION_ID) {
+    if (isDeprecatedEdition && activeId === INBOX_SESSION_ID) {
       return () => router.push(urlJoin('/settings', SettingsTabs.Agent));
     }