@lobehub/chat 0.127.0 → 0.127.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.127.2](https://github.com/lobehub/lobe-chat/compare/v0.127.1...v0.127.2)
+
+<sup>Released on **2024-02-14**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the sidebar to fix first render state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the sidebar to fix first render state, closes [#1301](https://github.com/lobehub/lobe-chat/issues/1301) ([c477491](https://github.com/lobehub/lobe-chat/commit/c477491))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.127.1](https://github.com/lobehub/lobe-chat/compare/v0.127.0...v0.127.1)
+
+<sup>Released on **2024-02-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve settings tabs style and refactor the LLM setting page.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve settings tabs style and refactor the LLM setting page, closes [#1299](https://github.com/lobehub/lobe-chat/issues/1299) ([31f6f15](https://github.com/lobehub/lobe-chat/commit/31f6f15))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.127.0](https://github.com/lobehub/lobe-chat/compare/v0.126.5...v0.127.0)
 
 <sup>Released on **2024-02-13**</sup>

package/README.md

@@ -225,14 +225,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                                 | Description                                                                                                                                                                  |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Product Review](https://chat-preview.lobehub.com/market?agent=product-reviews)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-11**</sup>                      | Expert in creating persuasive product testimonials highlighting the benefits and value proposition of \[your product/service].<br/>`ecommerce`                               |
-| [Tarot Reader](https://chat-preview.lobehub.com/market?agent=augur)<br/><sup>By **[CLOT-LIU](https://github.com/CLOT-LIU)** on **2024-02-10**</sup>                            | Specializes in tarot reading and interpreting tarot cards<br/>`tarot-reading` `interpretation` `advice`                                                                      |
-| [Happy Loong Year](https://chat-preview.lobehub.com/market?agent=happy-loong-year)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2024-02-10**</sup> | Loong Year's Assistant combines traditional and modern elements to create interesting New Year blessings.<br/>`new-years-greetings` `creativity` `copywriting` `dragon-year` |
-| [Vocabulary Wizard](https://chat-preview.lobehub.com/market?agent=awl-vocab-wizard)<br/><sup>By **[bentwnghk](https://github.com/bentwnghk)** on **2024-02-09**</sup>          | Expert in generating vocabulary lists and MCQ tests<br/>`vocabulary` `academic-word-list` `language-learning` `testing`                                                      |
-
-> 📊 Total agents: [<kbd>**173**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                              | Description                                                                                                                                                                                                                                                                          |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Product Copywriting](https://chat-preview.lobehub.com/market?agent=copywriting)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>                  | Expert in persuasive copywriting and consumer psychology<br/>`ecommerce`                                                                                                                                                                                                             |
+| [Private Domain Operations Expert](https://chat-preview.lobehub.com/market?agent=gl-syyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup> | Specializing in private domain operations, traffic acquisition, user retention, conversion, and content planning. Familiar with marketing theories and related classic works.<br/>`private-domain-operations` `traffic-acquisition` `user-retention` `conversion` `content-planning` |
+| [Self-Media Operation Expert](https://chat-preview.lobehub.com/market?agent=gl-zmtyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup>     | Specialized in self-media operation and content creation<br/>`self-media-operation` `social-media` `content-creation` `fan-growth` `brand-promotion`                                                                                                                                 |
+| [Product Description](https://chat-preview.lobehub.com/market?agent=product-description)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>          | Craft compelling product descriptions that boost e-commerce sales<br/>`ecommerce`                                                                                                                                                                                                    |
+
+> 📊 Total agents: [<kbd>**177**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -205,14 +205,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                               | 助手说明                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| [产品评价](https://chat-preview.lobehub.com/market?agent=product-reviews)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-11**</sup>                    | 擅长撰写有说服力的产品推荐，突出 \[您的产品 / 服务] 的优势和价值主张。<br/>`电子商务`          |
-| [塔罗占卜师](https://chat-preview.lobehub.com/market?agent=augur)<br/><sup>By **[CLOT-LIU](https://github.com/CLOT-LIU)** on **2024-02-10**</sup>                      | 擅长塔罗占卜，会对塔罗牌进行解读<br/>`塔罗占卜` `解读` `建议`                                  |
-| [新年快乐](https://chat-preview.lobehub.com/market?agent=happy-loong-year)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2024-02-10**</sup> | 龙年拜年小助手，结合传统与现代元素，创造有趣的龙年祝福语。<br/>`拜年祝福` `创意` `文案` `龙年` |
-| [词汇大师](https://chat-preview.lobehub.com/market?agent=awl-vocab-wizard)<br/><sup>By **[bentwnghk](https://github.com/bentwnghk)** on **2024-02-09**</sup>           | 擅长生成词汇列表和多项选择测试<br/>`词汇` `学术词汇表` `语言学习` `测试`                       |
-
-> 📊 Total agents: [<kbd>**173**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                   | 助手说明                                                                                                              |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| [产品文案撰写](https://chat-preview.lobehub.com/market?agent=copywriting)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>        | 精通有说服力的文案撰写和消费者心理学<br/>`电子商务`                                                                   |
+| [私域运营专家](https://chat-preview.lobehub.com/market?agent=gl-syyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup>    | 擅长私域运营、引流、承接、转化和内容策划，熟悉营销理论和相关经典著作。<br/>`私域运营` `引流` `承接` `转化` `内容策划` |
+| [自媒体运营专家](https://chat-preview.lobehub.com/market?agent=gl-zmtyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup> | 擅长自媒体运营与内容创作<br/>`自媒体运营` `社交媒体` `内容创作` `粉丝增长` `品牌推广`                                 |
+| [产品描述](https://chat-preview.lobehub.com/market?agent=product-description)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>    | 打造引人入胜的产品描述，提升电子商务销售业绩<br/>`电子商务`                                                           |
+
+> 📊 Total agents: [<kbd>**177**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.127.0",
+  "version": "0.127.2",
   "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/chat/(desktop)/layout.desktop.tsx

@@ -4,15 +4,13 @@ import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import ResponsiveSessionList from './features/SessionList';
 
 export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Chat}>
       <ResponsiveSessionList />
       <Flexbox
         flex={1}

package/src/app/chat/(mobile)/index.tsx

@@ -4,16 +4,13 @@ import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import PageTitle from '../features/PageTitle';
 import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
 
 const ChatMobilePage = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-
   const router = useRouter();
   useEffect(() => {
     router.prefetch('/chat/mobile');
@@ -21,7 +18,7 @@ const ChatMobilePage = memo(() => {
   }, []);
 
   return (
-    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
+    <AppLayoutMobile navBar={<SessionHeader />} showTabBar tabBarKey={SidebarTabKey.Chat}>
       <PageTitle />
       <SessionList />
     </AppLayoutMobile>

package/src/app/chat/features/ChatHeader/SettingButton.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { SettingsTabs, SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
@@ -22,7 +22,6 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
       onClick={() => {
         if (isInbox) {
           useGlobalStore.setState({
-            settingsTab: SettingsTabs.Agent,
             sidebarKey: SidebarTabKey.Setting,
           });
           router.push('/settings/agent');

package/src/app/home/Redirect.tsx

@@ -5,8 +5,6 @@ import { memo, useEffect } from 'react';
 
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 const checkHasConversation = async () => {
@@ -21,8 +19,6 @@ const Redirect = memo(() => {
 
   useEffect(() => {
     checkHasConversation().then((hasData) => {
-      useGlobalStore.getState().switchSideBar(SidebarTabKey.Chat);
-
       if (hasData) {
         router.replace('/chat');
 

package/src/app/market/(desktop)/layout.desktop.tsx

@@ -7,7 +7,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -30,10 +29,8 @@ const useStyles = createStyles(({ css }) => ({
 const MarketLayout = memo<PropsWithChildren>(({ children }) => {
   const { theme, styles } = useStyles();
 
-  useSwitchSideBarOnInit(SidebarTabKey.Market);
-
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Market}>
       <Flexbox
         flex={1}
         height={'100%'}

package/src/app/market/(mobile)/layout.mobile.tsx

@@ -5,7 +5,6 @@ import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -13,10 +12,8 @@ import Header from './features/Header';
 const DetailModal = dynamic(() => import('./features/AgentDetail'));
 
 const MarketLayout = ({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Market);
-
   return (
-    <AppLayoutMobile navBar={<Header />} showTabBar>
+    <AppLayoutMobile navBar={<Header />} showTabBar tabBarKey={SidebarTabKey.Market}>
       <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
         {children}
       </Flexbox>

package/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -5,8 +5,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 import { useSessionStore } from '@/store/session';
 
@@ -18,7 +16,6 @@ const Header = memo(() => {
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
-  const switchSideBar = useGlobalStore((s) => s.switchSideBar);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
   const { message } = App.useApp();
 
@@ -56,7 +53,6 @@ const Header = memo(() => {
           if (!agentItem) return;
 
           createSession({ config, meta });
-          switchSideBar(SidebarTabKey.Chat);
         }}
         type={'primary'}
       >

package/src/app/settings/(desktop)/features/Header.tsx

@@ -2,17 +2,16 @@ import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(() => {
+const Header = memo(({ activeTab }: { activeTab: SettingsTabs }) => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
 
   return (
     <ChatHeader
       left={
         <div style={{ paddingLeft: 8 }}>
-          <ChatHeaderTitle title={t(`tab.${tab}`)} />
+          <ChatHeaderTitle title={t(`tab.${activeTab}`)} />
         </div>
       }
     />

package/src/app/settings/(desktop)/features/SideBar.tsx

@@ -0,0 +1,42 @@
+import { createStyles, useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SettingList, { SettingListProps } from '../../features/SettingList';
+import UpgradeAlert from '../../features/UpgradeAlert';
+
+const useStyles = createStyles(({ stylish, token, css }) => ({
+  body: stylish.noScrollbar,
+  container: css`
+    border-inline-end: 1px solid ${token.colorBorder};
+  `,
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    font-size: 20px;
+    font-weight: bold;
+  `,
+}));
+
+const SideBar = memo<SettingListProps>(({ activeTab }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('common');
+  const { mobile } = useResponsive();
+
+  return (
+    <Flexbox className={styles.container} width={280}>
+      <Flexbox className={styles.top} padding={16}>
+        {t('setting')}
+      </Flexbox>
+      <Flexbox gap={8} style={{ paddingInline: 8 }}>
+        <UpgradeAlert />
+        <SettingList activeTab={activeTab} mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default SideBar;

package/src/app/settings/(desktop)/index.tsx

@@ -4,17 +4,18 @@ import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
 import ResponsiveIndex from '@/components/ResponsiveIndex';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import Common from '../common';
 import { SettingsCommonProps } from '../common/Common';
-import Layout from './layout.desktop';
+import DesktopLayout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 export default memo<SettingsCommonProps>((props) => (
   <ResponsiveIndex Mobile={Mobile}>
-    <Layout>
+    <DesktopLayout activeTab={SettingsTabs.Common}>
       <Common {...props} />
-    </Layout>
+    </DesktopLayout>
   </ResponsiveIndex>
 ));

package/src/app/settings/(desktop)/layout.desktop.tsx

@@ -1,23 +1,26 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
-import SideBar from '../features/SideBar';
 import Header from './features/Header';
+import SideBar from './features/SideBar';
 
-export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+export interface DesktopLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+
+const DesktopLayout = memo<DesktopLayoutProps>(({ children, activeTab }) => {
   return (
-    <AppLayoutDesktop>
-      <SideBar />
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Setting}>
+      <SideBar activeTab={activeTab} />
       <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
-        <Header />
+        <Header activeTab={activeTab} />
         <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
           <SafeSpacing />
           <Center gap={16} width={'100%'}>
@@ -28,3 +31,5 @@ export default memo(({ children }: PropsWithChildren) => {
     </AppLayoutDesktop>
   );
 });
+
+export default DesktopLayout;

package/src/app/settings/(desktop)/layout.responsive.tsx

@@ -1,16 +1,16 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { FC, PropsWithChildren, memo } from 'react';
+import { FC, memo } from 'react';
 
 import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
 
-import DesktopLayout from './layout.desktop';
+import DesktopLayout, { DesktopLayoutProps } from './layout.desktop';
 
 const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), { ssr: false }) as FC;
 
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+export default memo<DesktopLayoutProps>(({ children, activeTab }) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} activeTab={activeTab}>
     {children}
   </ResponsiveLayout>
 ));

package/src/app/settings/(mobile)/features/ExtraList.tsx

@@ -7,15 +7,17 @@ import { useTranslation } from 'react-i18next';
 import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-import Item from '../../features/SideBar/Item';
+import Item from '../../features/SettingList/Item';
 
-const ExtraList = memo(() => {
+interface ExtraListProps {
+  activeTab?: SettingsTabs;
+}
+const ExtraList = memo<ExtraListProps>(({ activeTab }) => {
   const { t } = useTranslation('common');
 
   const { importConfig } = useImportConfig();
-  const tab = useGlobalStore((s) => s.settingsTab);
   const { mobile } = useResponsive();
   const items = [
     {
@@ -59,7 +61,7 @@ const ExtraList = memo(() => {
       </Upload>
       {items.map(({ value, icon, label, onClick }) => (
         <div key={value} onClick={onClick}>
-          <Item active={mobile ? false : tab === value} icon={icon} label={label} />
+          <Item active={mobile ? false : activeTab === value} icon={icon} label={label} />
         </div>
       ))}
     </>

package/src/app/settings/(mobile)/features/Header/index.tsx

@@ -3,18 +3,21 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(() => {
+interface HeaderProps {
+  activeTab: SettingsTabs;
+}
+
+const Header = memo<HeaderProps>(({ activeTab }) => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
 
   const router = useRouter();
 
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle title={t(`tab.${tab}`)} />}
-      onBackClick={() => router.back()}
+      center={<MobileNavBarTitle title={t(`tab.${activeTab}`)} />}
+      onBackClick={() => router.push('/settings')}
       showBackButton
     />
   );

package/src/app/settings/(mobile)/index.tsx

@@ -1,3 +1 @@
-import Index from './mobile';
-
-export default () => <Index />;
+export { default } from './mobile';

package/src/app/settings/(mobile)/layout.mobile.tsx

@@ -1,18 +1,20 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
 
-export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+export interface SettingLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+export default memo(({ children, activeTab }: SettingLayoutProps) => {
   return (
-    <AppLayoutMobile navBar={<Header />}>
+    <AppLayoutMobile navBar={<Header activeTab={activeTab} />} tabBarKey={SidebarTabKey.Setting}>
       <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
     </AppLayoutMobile>
   );

package/src/app/settings/(mobile)/mobile/index.tsx

@@ -7,11 +7,10 @@ import { Center } from 'react-layout-kit';
 
 import { CURRENT_VERSION } from '@/const/version';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useGlobalStore } from '@/store/global';
 import { commonSelectors } from '@/store/global/selectors';
 
-import List from '../../features/SideBar/List';
+import SettingList from '../../features/SettingList';
 import AvatarBanner from '../features/AvatarBanner';
 import ExtraList from '../features/ExtraList';
 import Layout from './layout.mobile';
@@ -28,7 +27,6 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Setting = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   const avatar = useGlobalStore(commonSelectors.userAvatar);
   const { styles } = useStyles();
 
@@ -40,7 +38,7 @@ const Setting = memo(() => {
         </Center>
       </AvatarBanner>
       <div style={{ width: '100%' }}>
-        <List />
+        <SettingList />
         <div className={styles.divider} />
         <ExtraList />
         <Center style={{ paddingInline: 64 }}>

package/src/app/settings/agent/Agent.tsx

@@ -3,13 +3,9 @@ import { memo } from 'react';
 
 import AgentSetting from '@/features/AgentSetting';
 import { useGlobalStore } from '@/store/global';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
 import { settingsSelectors } from '@/store/global/selectors';
 
 const Agent = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Agent);
-
   const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);

package/src/app/settings/agent/layout.tsx

@@ -1 +1,9 @@
-export { default } from '../layout.server';
+import { PropsWithChildren } from 'react';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+import SettingLayout from '../layout.server';
+
+export default ({ children }: PropsWithChildren) => {
+  return <SettingLayout activeTab={SettingsTabs.Agent}>{children}</SettingLayout>;
+};

package/src/app/settings/agent/page.tsx

@@ -1,3 +1,18 @@
-import Index from './index';
+'use client';
 
-export default () => <Index />;
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+import Agent from './Agent';
+
+export default memo(() => {
+  const { t } = useTranslation('setting');
+  return (
+    <>
+      <PageTitle title={t('tab.agent')} />
+      <Agent />
+    </>
+  );
+});

package/src/app/settings/common/index.tsx

@@ -5,14 +5,11 @@ import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
 import { CURRENT_VERSION } from '@/const/version';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
 
 import Footer from '../features/Footer';
 import Common, { SettingsCommonProps } from './Common';
 
 export default memo<SettingsCommonProps>((props) => {
-  useSwitchSideBarOnInit(SettingsTabs.Common);
   const { t } = useTranslation('setting');
 
   return (

package/src/app/settings/common/layout.tsx

@@ -1 +1,9 @@
-export { default } from '../layout.server';
+import { PropsWithChildren } from 'react';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+import SettingLayout from '../layout.server';
+
+export default ({ children }: PropsWithChildren) => {
+  return <SettingLayout activeTab={SettingsTabs.Common}>{children}</SettingLayout>;
+};