@lobehub/chat 0.152.2 → 0.152.4

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.152.4](https://github.com/lobehub/lobe-chat/compare/v0.152.3...v0.152.4)
+
+<sup>Released on **2024-05-01**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix router path in UserPanel.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix router path in UserPanel ([c779e02](https://github.com/lobehub/lobe-chat/commit/c779e02))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.152.3](https://github.com/lobehub/lobe-chat/compare/v0.152.2...v0.152.3)
+
+<sup>Released on **2024-05-01**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix intercepting-routes on mobile.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix intercepting-routes on mobile ([abe228c](https://github.com/lobehub/lobe-chat/commit/abe228c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.152.2](https://github.com/lobehub/lobe-chat/compare/v0.152.1...v0.152.2)
 
 <sup>Released on **2024-05-01**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.2",
+  "version": "0.152.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useTheme } from 'antd-style';
+import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
@@ -8,11 +9,11 @@ import urlJoin from 'url-join';
 import { useCategory } from '@/app/(main)/settings//hooks/useCategory';
 import Cell from '@/components/Cell';
 import Divider from '@/components/Cell/Divider';
-import redirectHard from '@/server/redirectHard';
 
 const SettingCate = memo(() => {
   const theme = useTheme();
   const settingItems = useCategory({ mobile: true });
+  const router = useRouter();
 
   return (
     <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
@@ -23,7 +24,7 @@ const SettingCate = memo(() => {
             icon={icon}
             key={key}
             label={label}
-            onClick={() => redirectHard(urlJoin('/settings', key))}
+            onClick={() => router.replace(urlJoin('/settings', key))}
           />
         );
       })}

package/src/app/(main)/@nav/features/UserPanel/useMenu.tsx

@@ -86,9 +86,7 @@ export const useMenu = () => {
       icon: <Icon icon={Settings2} />,
       key: 'setting',
       label: <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>,
-      onClick: () => {
-        router.push('/settings/common');
-      },
+      onClick: () => router.push('/settings/m', { tab: 'common' }),
     },
     {
       type: 'divider',

package/src/app/(main)/chat/features/SettingButton.tsx

@@ -1,23 +1,19 @@
 import { ActionIcon } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import redirectHard from '@/server/redirectHard';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const isInbox = useSessionStore(sessionSelectors.isInboxSession);
   const { t } = useTranslation('common');
-  const router = useRouter();
-
-  const push = mobile ? redirectHard : router.push;
+  const router = useQueryRoute();
 
   return (
     <ActionIcon
@@ -27,9 +23,9 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
           useGlobalStore.setState({
             sidebarKey: SidebarTabKey.Setting,
           });
-          push('/settings/agent');
+          router.push(mobile ? '/settings/agent' : '/settings/m', mobile ? {} : { tab: 'agent' });
         } else {
-          push(pathString('/chat/settings', { search: location.search }));
+          router.push(mobile ? '/chat/settings' : '/chat/settings/m');
         }
       }}
       size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}

package/src/app/(main)/chat/settings/m/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+export default () => {
+  const router = useQueryRoute();
+
+  useLayoutEffect(() => {
+    router.replace('/chat/settings');
+  }, []);
+
+  return null;
+};

package/src/app/(main)/settings/@category/features/CategoryContent.tsx

@@ -5,12 +5,15 @@ import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import { useCategory } from '../../hooks/useCategory';
 
 const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
   const activeTab = useActiveSettingsKey();
+  const { tab = SettingsTabs.Common } = useQuery();
   const cateItems = useCategory();
   const router = useQueryRoute();
 
@@ -18,15 +21,14 @@ const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
     <Menu
       items={cateItems}
       onClick={({ key }) => {
-        const path = urlJoin('/settings', key);
         if (modal) {
-          router.replace(path);
+          router.replace('/settings/m', { tab: key });
         } else {
-          router.push(path);
+          router.push(urlJoin('/settings', key));
         }
       }}
       selectable
-      selectedKeys={[activeTab as any]}
+      selectedKeys={[modal ? tab : (activeTab as any)]}
       variant={'compact'}
     />
   );

package/src/app/(main)/settings/about/index.tsx

@@ -0,0 +1,35 @@
+import { Logo, Tag } from '@lobehub/ui';
+import { Flexbox } from 'react-layout-kit';
+
+import Follow from '@//features/Follow';
+import AboutList from '@/app/(main)/settings//about/features/AboutList';
+import Analytics from '@/app/(main)/settings/about/features/Analytics';
+import { getServerConfig } from '@/config/server';
+import { CURRENT_VERSION } from '@/const/version';
+
+const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
+
+const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
+
+const Page = ({ mobile }: { mobile?: boolean }) => {
+  return (
+    <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
+      <Logo size={mobile ? 100 : 120} />
+      <h1 style={{ fontSize: mobile ? 32 : 36, fontWeight: 900, lineHeight: 1, marginBottom: 0 }}>
+        LobeChat
+      </h1>
+      <Tag>v{CURRENT_VERSION}</Tag>
+      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
+        <AboutList />
+        {enabledTelemetryChat && <Analytics />}
+      </Flexbox>
+      <Follow />
+      <div>Empowering your AI dreams by LobeHub</div>
+      <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
+    </Flexbox>
+  );
+};
+
+Page.displayName = 'AboutSetting';
+
+export default Page;

package/src/app/(main)/settings/about/page.tsx

@@ -1,12 +1,7 @@
-import { Flexbox } from 'react-layout-kit';
-
-import Follow from '@//features/Follow';
-import AboutList from '@/app/(main)/settings//about/features/AboutList';
-import Analytics from '@/app/(main)/settings/about/features/Analytics';
-import { getServerConfig } from '@/config/server';
 import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
 
-const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
+import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
@@ -15,18 +10,8 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
-  return (
-    <>
-      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
-        <AboutList />
-        {enabledTelemetryChat && <Analytics />}
-      </Flexbox>
-      <Follow />
-    </>
-  );
-};
-
-Page.displayName = 'AboutSetting';
+export default () => {
+  const isMobile = isMobileDevice();
 
-export default Page;
+  return <Page mobile={isMobile} />;
+};

package/src/app/(main)/settings/agent/{layout.tsx → index.tsx}

@@ -1,15 +1,21 @@
 'use client';
 
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
 
 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';
+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 { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-const Layout = memo(({ children }: PropsWithChildren) => {
+const Page = memo(() => {
   const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
@@ -27,9 +33,16 @@ const Layout = memo(({ children }: PropsWithChildren) => {
           updateAgent({ meta });
         }}
       />
-      {children}
+      <AgentPrompt />
+      <AgentMeta />
+      <AgentChat />
+      <AgentModal />
+      <AgentTTS />
+      <AgentPlugin />
     </Provider>
   );
 });
 
-export default Layout;
+Page.displayName = 'AgentSetting';
+
+export default Page;

package/src/app/(main)/settings/agent/page.tsx

@@ -1,9 +1,3 @@
-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 { translation } from '@/server/translation';
 
 export const generateMetadata = async () => {
@@ -13,19 +7,4 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
-  return (
-    <>
-      <AgentPrompt />
-      <AgentMeta />
-      <AgentChat />
-      <AgentModal />
-      <AgentTTS />
-      <AgentPlugin />
-    </>
-  );
-};
-
-Page.displayName = 'AgentSetting';
-
-export default Page;
+export { default } from './index';

package/src/app/(main)/settings/common/index.tsx

@@ -0,0 +1,19 @@
+import { getServerConfig } from '@/config/server';
+
+import Common from './features/Common';
+import Theme from './features/Theme';
+
+const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+
+const Page = () => {
+  return (
+    <>
+      <Theme />
+      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+    </>
+  );
+};
+
+Page.displayName = 'CommonSetting';
+
+export default Page;

package/src/app/(main)/settings/common/page.tsx

@@ -1,9 +1,5 @@
-import { getServerConfig } from '@/config/server';
 import { translation } from '@/server/translation';
 
-import Common from './features/Common';
-import Theme from './features/Theme';
-
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
   return {
@@ -11,16 +7,4 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
-  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
-  return (
-    <>
-      <Theme />
-      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
-    </>
-  );
-};
-
-Page.displayName = 'CommonSetting';
-
-export default Page;
+export { default } from './index';

package/src/app/(main)/settings/llm/index.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Flexbox } from 'react-layout-kit';
+
+import Anthropic from './Anthropic';
+import Azure from './Azure';
+import Bedrock from './Bedrock';
+import Google from './Google';
+import Groq from './Groq';
+import Minimax from './Minimax';
+import Mistral from './Mistral';
+import Moonshot from './Moonshot';
+import Ollama from './Ollama';
+import OpenAI from './OpenAI';
+import OpenRouter from './OpenRouter';
+import Perplexity from './Perplexity';
+import TogetherAI from './TogetherAI';
+import ZeroOne from './ZeroOne';
+import Zhipu from './Zhipu';
+import Footer from './components/Footer';
+
+const Page = () => {
+  return (
+    <Flexbox gap={24}>
+      <OpenAI />
+      <Azure />
+      <Ollama />
+      <Google />
+      <Anthropic />
+      <Bedrock />
+      <OpenRouter />
+      <TogetherAI />
+      <Groq />
+      <Perplexity />
+      <Minimax />
+      <Mistral />
+      <Moonshot />
+      <Zhipu />
+      <ZeroOne />
+      <Footer />
+    </Flexbox>
+  );
+};
+
+Page.displayName = 'LlmSetting';
+
+export default Page;

package/src/app/(main)/settings/llm/page.tsx

@@ -1,25 +1,9 @@
 import { notFound } from 'next/navigation';
-import { Flexbox } from 'react-layout-kit';
 
 import { serverFeatureFlags } from '@/config/server/featureFlags';
 import { translation } from '@/server/translation';
 
-import Anthropic from './Anthropic';
-import Azure from './Azure';
-import Bedrock from './Bedrock';
-import Google from './Google';
-import Groq from './Groq';
-import Minimax from './Minimax';
-import Mistral from './Mistral';
-import Moonshot from './Moonshot';
-import Ollama from './Ollama';
-import OpenAI from './OpenAI';
-import OpenRouter from './OpenRouter';
-import Perplexity from './Perplexity';
-import TogetherAI from './TogetherAI';
-import ZeroOne from './ZeroOne';
-import Zhipu from './Zhipu';
-import Footer from './components/Footer';
+import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
@@ -28,32 +12,9 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
+export default () => {
   const showLLM = serverFeatureFlags().showLLM;
   if (!showLLM) return notFound();
 
-  return (
-    <Flexbox gap={24}>
-      <OpenAI />
-      <Azure />
-      <Ollama />
-      <Google />
-      <Anthropic />
-      <Bedrock />
-      <OpenRouter />
-      <TogetherAI />
-      <Groq />
-      <Perplexity />
-      <Minimax />
-      <Mistral />
-      <Moonshot />
-      <Zhipu />
-      <ZeroOne />
-      <Footer />
-    </Flexbox>
-  );
+  return <Page />;
 };
-
-Page.displayName = 'LlmSetting';
-
-export default Page;

package/src/app/(main)/settings/m/page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+import urlJoin from 'url-join';
+
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { SettingsTabs } from '@/store/global/initialState';
+
+export default () => {
+  const { tab = SettingsTabs.Common } = useQuery();
+  const router = useQueryRoute();
+
+  useLayoutEffect(() => {
+    router.replace(urlJoin('/settings', tab as string), { tab: null });
+  }, []);
+
+  return null;
+};

package/src/app/(main)/settings/sync/index.tsx

@@ -0,0 +1,17 @@
+import Alert from './features/Alert';
+import DeviceInfo from './features/DeviceInfo';
+import WebRTC from './features/WebRTC';
+
+const Page = ({ browser, os, mobile }: { browser?: string; mobile?: boolean; os?: string }) => {
+  return (
+    <>
+      <DeviceInfo browser={browser} os={os} />
+      <WebRTC />
+      <Alert mobile={mobile} />
+    </>
+  );
+};
+
+Page.displayName = 'SyncSetting';
+
+export default Page;

package/src/app/(main)/settings/sync/page.tsx

@@ -4,9 +4,7 @@ import { serverFeatureFlags } from '@/config/server/featureFlags';
 import { translation } from '@/server/translation';
 import { gerServerDeviceInfo, isMobileDevice } from '@/utils/responsive';
 
-import Alert from './features/Alert';
-import DeviceInfo from './features/DeviceInfo';
-import WebRTC from './features/WebRTC';
+import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
@@ -15,22 +13,12 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
+export default () => {
   const enableWebrtc = serverFeatureFlags().enableWebrtc;
   if (!enableWebrtc) return notFound();
 
   const isMobile = isMobileDevice();
   const { os, browser } = gerServerDeviceInfo();
 
-  return (
-    <>
-      <DeviceInfo browser={browser} os={os} />
-      <WebRTC />
-      <Alert mobile={isMobile} />
-    </>
-  );
+  return <Page browser={browser} mobile={isMobile} os={os} />;
 };
-
-Page.displayName = 'SyncSetting';
-
-export default Page;

package/src/app/(main)/settings/tts/index.tsx

@@ -0,0 +1,15 @@
+import OpenAI from './features/OpenAI';
+import STT from './features/STT';
+
+const Page = () => {
+  return (
+    <>
+      <STT />
+      <OpenAI />
+    </>
+  );
+};
+
+Page.displayName = 'TtsSetting';
+
+export default Page;

package/src/app/(main)/settings/tts/page.tsx

@@ -1,8 +1,5 @@
 import { translation } from '@/server/translation';
 
-import OpenAI from './features/OpenAI';
-import STT from './features/STT';
-
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
   return {
@@ -10,15 +7,4 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
-  return (
-    <>
-      <STT />
-      <OpenAI />
-    </>
-  );
-};
-
-Page.displayName = 'TtsSetting';
-
-export default Page;
+export { default } from './index';

package/src/app/@modal/(.)settings/m/index.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import Common from '@/app/(main)/settings/common';
+import { useQuery } from '@/hooks/useQuery';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Skeleton from './loading';
+
+const loading = () => <Skeleton />;
+const About = dynamic(() => import('@/app/(main)/settings/about'), { loading });
+const LLM = dynamic(() => import('@/app/(main)/settings/llm'), { loading });
+const TTS = dynamic(() => import('@/app/(main)/settings/tts'), { loading });
+const Agent = dynamic(() => import('@/app/(main)/settings/agent'), { loading });
+const Sync = dynamic(() => import('@/app/(main)/settings/sync'), { loading });
+
+const Page = ({ browser, os, mobile }: { browser?: string; mobile?: boolean; os?: string }) => {
+  const { tab = SettingsTabs.Common } = useQuery();
+  return (
+    <>
+      {tab === SettingsTabs.Common && <Common />}
+      {tab === SettingsTabs.Sync && <Sync browser={browser} mobile={mobile} os={os} />}
+      {tab === SettingsTabs.LLM && <LLM />}
+      {tab === SettingsTabs.TTS && <TTS />}
+      {tab === SettingsTabs.Agent && <Agent />}
+      {tab === SettingsTabs.About && <About mobile={mobile} />}
+    </>
+  );
+};
+
+Page.displayName = 'SettingModal';
+
+export default Page;

package/src/app/@modal/(.)settings/{layout.tsx → m/layout.tsx}

@@ -2,7 +2,7 @@ import { Skeleton } from 'antd';
 import dynamic from 'next/dynamic';
 import { PropsWithChildren } from 'react';
 
-import SettingModalLayout from '../_layout/SettingModalLayout';
+import SettingModalLayout from '../../_layout/SettingModalLayout';
 
 const CategoryContent = dynamic(
   () => import('@/app/(main)/settings/@category/features/CategoryContent'),

package/src/app/@modal/(.)settings/m/page.tsx

@@ -0,0 +1,10 @@
+import { gerServerDeviceInfo, isMobileDevice } from '@/utils/responsive';
+
+import Page from './index';
+
+export default () => {
+  const isMobile = isMobileDevice();
+  const { os, browser } = gerServerDeviceInfo();
+
+  return <Page browser={browser} mobile={isMobile} os={os} />;
+};

package/src/app/@modal/_layout/Desktop.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { PropsWithChildren, useState } from 'react';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const [open, setOpen] = useState(true);
+  const router = useRouter();
+
+  return (
+    <Modal
+      footer={null}
+      onCancel={() => {
+        setOpen(false);
+        setTimeout(() => router.back(), 250);
+      }}
+      open={open}
+      styles={{
+        body: { display: 'flex', minHeight: 'min(75vh, 750px)', overflow: 'hidden', padding: 0 },
+      }}
+      title={false}
+      width={1024}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+Layout.displayName = 'ModalLayout';
+
+export default Layout;

package/src/app/@modal/_layout/Mobile.tsx

@@ -0,0 +1 @@
+export default () => null;

package/src/app/@modal/chat/(.)settings/{features → m/features}/CategoryContent.tsx

@@ -20,7 +20,7 @@ const CategoryContent = memo(() => {
       <Menu
         items={cateItems}
         onClick={({ key }) => {
-          router.replace('/chat/settings', { tab: key });
+          router.replace('/chat/settings/m', { tab: key });
         }}
         selectable
         selectedKeys={[tab as any]}

package/src/app/@modal/chat/(.)settings/{layout.tsx → m/layout.tsx}

@@ -13,7 +13,7 @@ import { agentSelectors } from '@/store/agent/slices/chat';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
-import SettingModalLayout from '../../_layout/SettingModalLayout';
+import SettingModalLayout from '../../../_layout/SettingModalLayout';
 
 const CategoryContent = dynamic(() => import('./features/CategoryContent'), {
   loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} />,

package/src/app/@modal/chat/(.)settings/{page.tsx → m/page.tsx}

@@ -1,28 +1,22 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { useSearchParams } from 'next/navigation';
-import qs from 'query-string';
 
 import AgentMeta from '@/features/AgentSetting/AgentMeta';
+import { useQuery } from '@/hooks/useQuery';
 
 import { SettingsTabs } from './features/useCategory';
 import Skeleton from './loading';
 
 const loading = () => <Skeleton />;
-
 const AgentChat = dynamic(() => import('@/features/AgentSetting/AgentChat'), { loading });
-
 const AgentPrompt = dynamic(() => import('@/features/AgentSetting/AgentPrompt'), { loading });
-
 const AgentPlugin = dynamic(() => import('@/features/AgentSetting/AgentPlugin'), { loading });
-
 const AgentModal = dynamic(() => import('@/features/AgentSetting/AgentModal'), { loading });
-
 const AgentTTS = dynamic(() => import('@/features/AgentSetting/AgentTTS'), { loading });
+
 const Page = () => {
-  const rawQuery = useSearchParams();
-  const { tab = SettingsTabs.Meta } = qs.parse(rawQuery.toString());
+  const { tab = SettingsTabs.Meta } = useQuery();
   return (
     <>
       {tab === SettingsTabs.Meta && <AgentMeta />}

package/src/app/(main)/settings/about/layout.tsx

@@ -1,26 +0,0 @@
-import { Logo, Tag } from '@lobehub/ui';
-import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { CURRENT_VERSION } from '@/const/version';
-import { isMobileDevice } from '@/utils/responsive';
-
-const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
-
-const Layout = ({ children }: PropsWithChildren) => {
-  const isMobile = isMobileDevice();
-  return (
-    <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
-      <Logo size={isMobile ? 100 : 120} />
-      <h1 style={{ fontSize: isMobile ? 32 : 36, fontWeight: 900, lineHeight: 1, marginBottom: 0 }}>
-        LobeChat
-      </h1>
-      <Tag>v{CURRENT_VERSION}</Tag>
-      {children}
-      <div>Empowering your AI dreams by LobeHub</div>
-      <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
-    </Flexbox>
-  );
-};
-
-export default Layout;

package/src/app/(main)/settings/about/loading.tsx

@@ -1,5 +0,0 @@
-import SkeletonLoading from '@/components/SkeletonLoading';
-
-export default () => {
-  return <SkeletonLoading paragraph={{ rows: 3 }} title={false} />;
-};

package/src/app/(main)/settings/agent/loading.tsx

@@ -1,5 +0,0 @@
-import SkeletonLoading from '@/components/SkeletonLoading';
-
-export default () => {
-  return <SkeletonLoading paragraph={{ rows: 8 }} />;
-};

package/src/app/@modal/(.)settings/about/layout.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/about/layout';

package/src/app/@modal/(.)settings/about/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/about/page';

package/src/app/@modal/(.)settings/agent/layout.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/agent/layout';

package/src/app/@modal/(.)settings/agent/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/agent/page';

package/src/app/@modal/(.)settings/common/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/common/page';

package/src/app/@modal/(.)settings/llm/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/llm/page';

package/src/app/@modal/(.)settings/sync/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/sync/page';

package/src/app/@modal/(.)settings/tts/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/settings/tts/page';