@lobehub/chat 0.42.0 → 0.42.2

package/CHANGELOG.md

@@ -2,6 +2,67 @@
 
 # Changelog
 
+### [Version 0.42.2](https://github.com/lobehub/lobe-chat/compare/v0.42.1...v0.42.2)
+
+<sup>Released on **2023-08-12**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 将 useSettings 更名为 useGlobalStore, 将原本的 settings 更名为 global, 收敛切换 SideBar 方法为 useSwitchSideBarOnInit, 重构需本地缓存的状态为 preference.
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正移除 session 时的路由跳转逻辑.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 将 useSettings 更名为 useGlobalStore ([bdde7df](https://github.com/lobehub/lobe-chat/commit/bdde7df))
+- **misc**: 将原本的 settings 更名为 global ([e42d34c](https://github.com/lobehub/lobe-chat/commit/e42d34c))
+- **misc**: 收敛切换 SideBar 方法为 useSwitchSideBarOnInit ([bbad38f](https://github.com/lobehub/lobe-chat/commit/bbad38f))
+- **misc**: 重构需本地缓存的状态为 preference ([8359b62](https://github.com/lobehub/lobe-chat/commit/8359b62))
+
+#### What's fixed
+
+- **misc**: 修正移除 session 时的路由跳转逻辑 ([8b7838d](https://github.com/lobehub/lobe-chat/commit/8b7838d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.42.1](https://github.com/lobehub/lobe-chat/compare/v0.42.0...v0.42.1)
+
+<sup>Released on **2023-08-12**</sup>
+
+#### 💄 Styles
+
+- **misc**: 优化 App 首页 Loading 态.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 优化 App 首页 Loading 态 ([72104e8](https://github.com/lobehub/lobe-chat/commit/72104e8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.42.0](https://github.com/lobehub/lobe-chat/compare/v0.41.2...v0.42.0)
 
 <sup>Released on **2023-08-11**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.42.0",
+  "version": "0.42.2",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/features/AvatarWithUpload/index.tsx

@@ -3,7 +3,7 @@ import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
 const useStyle = createStyles(
@@ -27,7 +27,7 @@ interface AvatarWithUploadProps {
 }
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40 }) => {
-  const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings]);
+  const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
   const { styles } = useStyle();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {

package/src/features/FolderPanel/index.tsx

@@ -4,7 +4,7 @@ import isEqual from 'fast-deep-equal';
 import { PropsWithChildren, memo, useState } from 'react';
 
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
@@ -16,9 +16,10 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const FolderPanel = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
-  const [sessionsWidth, sessionExpandable] = useSettings((s) => [
-    s.sessionsWidth,
-    s.sessionExpandable,
+  const [sessionsWidth, sessionExpandable, updatePreference] = useGlobalStore((s) => [
+    s.preference.sessionsWidth,
+    s.preference.showSessionPanel,
+    s.updatePreference,
   ]);
   const [tmpWidth, setWidth] = useState(sessionsWidth);
   if (tmpWidth !== sessionsWidth) setWidth(sessionsWidth);
@@ -31,9 +32,9 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
       maxWidth={400}
       minWidth={FOLDER_WIDTH}
       onExpandChange={(expand) => {
-        useSettings.setState({
-          sessionExpandable: expand,
+        updatePreference({
           sessionsWidth: expand ? 320 : 0,
+          showSessionPanel: expand,
         });
       }}
       onSizeChange={(_, size) => {
@@ -44,7 +45,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
         if (isEqual(nextWidth, sessionsWidth)) return;
 
         setWidth(nextWidth);
-        useSettings.setState({ sessionsWidth: nextWidth });
+        updatePreference({ sessionsWidth: nextWidth });
       }}
       placement="left"
       size={{ height: '100vh', width: sessionsWidth }}

package/src/features/SideBar/BottomActions.tsx

@@ -18,11 +18,11 @@ import DiscordIcon from '@/components/DiscordIcon';
 import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
-import { SettingsStore } from '@/store/settings';
+import { GlobalStore } from '@/store/global';
 
 export interface BottomActionProps {
-  setTab: SettingsStore['switchSideBar'];
-  tab: SettingsStore['sidebarKey'];
+  setTab: GlobalStore['switchSideBar'];
+  tab: GlobalStore['sidebarKey'];
 }
 
 const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {

package/src/features/SideBar/TopActions.tsx

@@ -4,11 +4,11 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { SettingsStore } from '@/store/settings';
+import { GlobalStore } from '@/store/global';
 
 export interface TopActionProps {
-  setTab: SettingsStore['switchSideBar'];
-  tab: SettingsStore['sidebarKey'];
+  setTab: GlobalStore['switchSideBar'];
+  tab: GlobalStore['sidebarKey'];
 }
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {

package/src/features/SideBar/index.tsx

@@ -2,13 +2,13 @@ import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
 export default memo(() => {
-  const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar]);
+  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
 
   return (
     <SideNav

package/src/helpers/export.ts

@@ -1,5 +1,5 @@
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { sessionSelectors, useSessionStore } from '@/store/session';
-import { settingsSelectors, useSettings } from '@/store/settings';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
 
 const getAgents = () => sessionSelectors.exportAgents(useSessionStore.getState());
@@ -8,7 +8,7 @@ const getAgent = (id: string) => sessionSelectors.getExportAgent(id)(useSessionS
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
-const getSettings = () => settingsSelectors.exportSettings(useSettings.getState());
+const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
 
 export const exportAgents = () => {
   const sessions = getAgents();

package/src/hooks/useImportConfig.ts

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 import { importConfigFile } from '@/utils/config';
 
 export const useImportConfig = () => {
   const importSessions = useSessionStore((s) => s.importSessions);
-  const importAppSettings = useSettings((s) => s.importAppSettings);
+  const importAppSettings = useGlobalStore((s) => s.importAppSettings);
 
   const importConfig = (info: any) => {
     importConfigFile(info, (config) => {

package/src/layout/index.tsx

@@ -5,8 +5,8 @@ import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
 import { PropsWithChildren, useCallback, useEffect } from 'react';
 
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 import { GlobalStyle } from '@/styles';
 
 import i18n from '../locales';
@@ -28,8 +28,8 @@ const Layout = ({ children }: PropsWithChildren) => {
 };
 
 export default ({ children }: PropsWithChildren) => {
-  const themeMode = useSettings((s) => s.settings.themeMode);
-  const [primaryColor, neutralColor] = useSettings((s) => [
+  const themeMode = useGlobalStore((s) => s.settings.themeMode);
+  const [primaryColor, neutralColor] = useGlobalStore((s) => [
     s.settings.primaryColor,
     s.settings.neutralColor,
   ]);
@@ -40,7 +40,7 @@ export default ({ children }: PropsWithChildren) => {
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
     useSessionStore.persist.rehydrate();
-    useSettings.persist.rehydrate();
+    useGlobalStore.persist.rehydrate();
   }, []);
 
   const genCustomToken: any = useCallback(

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -8,8 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { useGlobalStore } from '@/store/global';
 import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 
 import { useStyles } from './style';
 
@@ -29,7 +29,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
   const { t } = useTranslation('common');
 
   const { styles } = useStyles();
-  const [defaultModel] = useSettings((s) => [s.settings.defaultAgent.config?.model]);
+  const [defaultModel] = useGlobalStore((s) => [s.settings.defaultAgent.config?.model]);
 
   const [
     pin,

package/src/pages/chat/[id]/Conversation/ChatList/Error/ApiKeyForm.tsx

@@ -4,14 +4,14 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 
 import { useStyles } from './style';
 
 const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
   const { t } = useTranslation('error');
   const { styles, theme } = useStyles();
-  const [apiKey, setSettings] = useSettings((s) => [s.settings.OPENAI_API_KEY, s.setSettings]);
+  const [apiKey, setSettings] = useGlobalStore((s) => [s.settings.OPENAI_API_KEY, s.setSettings]);
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>

package/src/pages/chat/[id]/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -5,8 +5,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 
 import OtpInput from '../OTPInput';
 import APIKeyForm from './ApiKeyForm';
@@ -15,7 +15,7 @@ import { ErrorActionContainer, FormAction } from './style';
 const InvalidAccess = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState('password');
-  const [password, setSettings] = useSettings((s) => [s.settings.password, s.setSettings]);
+  const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);
   const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (

package/src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -5,8 +5,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 
 import InputActions from './Action';
 import ActionsRight from './ActionRight';
@@ -17,7 +17,10 @@ const ChatInput = () => {
   const [expand, setExpand] = useState<boolean>(false);
   const [text, setText] = useState('');
 
-  const [inputHeight] = useSettings((s) => [s.inputHeight]);
+  const [inputHeight, updatePreference] = useGlobalStore((s) => [
+    s.preference.inputHeight,
+    s.updatePreference,
+  ]);
   const [sendMessage, hasTopic, saveToTopic] = useSessionStore((s) => [
     s.createOrSendMsg,
     !!s.activeTopicId,
@@ -38,7 +41,8 @@ const ChatInput = () => {
       minHeight={CHAT_TEXTAREA_HEIGHT}
       onSizeChange={(_, size) => {
         if (!size) return;
-        useSettings.setState({
+
+        updatePreference({
           inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
         });
       }}

package/src/pages/chat/[id]/Header/index.tsx

@@ -9,8 +9,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
+import { useGlobalStore } from '@/store/global';
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 
 import PluginTag from './PluginTag';
 
@@ -28,9 +28,9 @@ const Header = memo(() => {
     agentSelectors.currentAgentPlugins(s),
   ]);
 
-  const [showAgentSettings, toggleConfig] = useSettings((s) => [
-    s.showAgentConfig,
-    s.toggleAgentPanel,
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.showChatSideBar,
+    s.toggleChatSideBar,
   ]);
 
   return (

package/src/pages/chat/[id]/Sidebar/Topic/index.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Empty from '@/components/Empty';
+import { useGlobalStore } from '@/store/global';
 import { topicSelectors, useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 
 import TopicItem from './TopicItem';
 
@@ -15,7 +15,10 @@ export const Topic = () => {
   const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
   const { t } = useTranslation('empty');
 
-  const [visible, updateGuideState] = useSettings((s) => [s.guide?.topic, s.updateGuideState]);
+  const [visible, updateGuideState] = useGlobalStore((s) => [
+    s.preference.guide?.topic,
+    s.updateGuideState,
+  ]);
 
   return (
     <Flexbox gap={2}>

package/src/pages/chat/[id]/Sidebar/index.tsx

@@ -4,7 +4,7 @@ import { rgba } from 'polished';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 
 import Inner from './Inner';
 
@@ -22,9 +22,9 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 
 const Config = () => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useSettings((s) => [
-    s.showAgentConfig,
-    s.toggleAgentPanel,
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.showChatSideBar,
+    s.toggleChatSideBar,
   ]);
 
   return (

package/src/pages/chat/[id]/layout.tsx

@@ -4,8 +4,8 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import AppLayout from '@/layout/AppLayout';
+import { useSwitchSideBarOnInit } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { useSettings } from '@/store/settings';
 
 import { Sessions } from '../SessionList';
 
@@ -31,12 +31,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     toggleTopic();
   }, [id]);
 
-  useEffect(() => {
-    const hasRehydrated = useSettings.persist.hasHydrated();
-    if (hasRehydrated) {
-      useSettings.setState({ sidebarKey: 'chat' });
-    }
-  }, []);
+  useSwitchSideBarOnInit('chat');
 
   return (
     <AppLayout>

package/src/pages/index/Loading.tsx

@@ -0,0 +1,35 @@
+import { GridBackground, Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Loader2 } from 'lucide-react';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const Loading = memo(() => {
+  const { t } = useTranslation('common');
+
+  const theme = useTheme();
+
+  return (
+    <Flexbox height={'100vh'} width={'100%'}>
+      <GridBackground
+        animation
+        colorBack={rgba(theme.colorText, 0.12)}
+        colorFront={rgba(theme.colorText, 0.4)}
+        flip
+      />
+      <Center flex={1} gap={12} width={'100%'}>
+        <Icon icon={Loader2} size={{ fontSize: 64 }} spin />
+        {t('appInitializing')}
+      </Center>
+      <GridBackground
+        animation
+        colorBack={rgba(theme.colorText, 0.12)}
+        colorFront={rgba(theme.colorText, 0.4)}
+      />
+    </Flexbox>
+  );
+});
+
+export default Loading;

package/src/pages/index.page.tsx

@@ -1,33 +1,18 @@
-import { Icon } from '@lobehub/ui';
-import { useWhyDidYouUpdate } from 'ahooks';
-import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
 
 import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import Chat from './chat/index.page';
+import Loading from './index/Loading';
 import Welcome from './welcome/index.page';
 
-const Loading = memo(() => {
-  const { t } = useTranslation('common');
-
-  return (
-    <Center gap={12} height={'100vh'} width={'100%'}>
-      <Icon icon={Loader2} size={{ fontSize: 64 }} spin />
-      {t('appInitializing')}
-    </Center>
-  );
-});
-
-export default memo(() => {
+const Home = memo(() => {
   const hydrated = useSessionHydrated();
   const hasSession = useSessionStore(sessionSelectors.hasSessionList);
 
-  useWhyDidYouUpdate('index.page', { hasSession, hydrated });
-
   if (!hydrated) return <Loading />;
 
   return !hasSession ? <Welcome /> : <Chat />;
 });
+
+export default Home;

package/src/pages/settings/Settings/Agent.tsx

@@ -2,12 +2,12 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
-import { settingsSelectors, useSettings } from '@/store/settings';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 const Agent = memo(() => {
-  const config = useSettings(settingsSelectors.currentAgentConfig, isEqual);
-  const meta = useSettings(settingsSelectors.currentAgentMeta, isEqual);
-  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings((s) => [
+  const config = useGlobalStore(settingsSelectors.currentAgentConfig, isEqual);
+  const meta = useGlobalStore(settingsSelectors.currentAgentMeta, isEqual);
+  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useGlobalStore((s) => [
     s.setAgentConfig,
     s.setAgentMeta,
     s.toggleAgentPlugin,

package/src/pages/settings/Settings/Common.tsx

@@ -11,8 +11,8 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { settingsSelectors, useSettings } from '@/store/settings';
 import { ConfigKeys } from '@/types/settings';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
@@ -27,8 +27,8 @@ const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
-  const settings = useSettings(settingsSelectors.currentSettings, isEqual);
-  const [setThemeMode, setSettings, resetSettings] = useSettings((s) => [
+  const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
+  const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
     s.setThemeMode,
     s.setSettings,
     s.resetSettings,

package/src/pages/settings/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -7,10 +7,13 @@ import {
 } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 
 const ThemeSwatchesNeutral = memo(() => {
-  const [neutralColor, setSettings] = useSettings((s) => [s.settings.neutralColor, s.setSettings]);
+  const [neutralColor, setSettings] = useGlobalStore((s) => [
+    s.settings.neutralColor,
+    s.setSettings,
+  ]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('neutral', v) as NeutralColors;

package/src/pages/settings/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -7,10 +7,13 @@ import {
 } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 
 const ThemeSwatchesPrimary = memo(() => {
-  const [primaryColor, setSettings] = useSettings((s) => [s.settings.primaryColor, s.setSettings]);
+  const [primaryColor, setSettings] = useGlobalStore((s) => [
+    s.settings.primaryColor,
+    s.setSettings,
+  ]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('primary', v) as PrimaryColors;

package/src/pages/settings/layout.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
-import { useSettings } from '@/store/settings';
+import { useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 const initI18n = createI18nNext('setting');
@@ -18,12 +18,7 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
     initI18n.finally();
   }, []);
 
-  useEffect(() => {
-    const hasRehydrated = useSettings.persist.hasHydrated();
-    if (hasRehydrated) {
-      useSettings.setState({ sidebarKey: 'settings' });
-    }
-  }, []);
+  useSwitchSideBarOnInit('settings');
 
   return (
     <>

package/src/services/chatModel.ts

@@ -1,8 +1,8 @@
 import { merge } from 'lodash-es';
 
 import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
+import { useGlobalStore } from '@/store/global';
 import { initialLobeAgentConfig } from '@/store/session';
-import { useSettings } from '@/store/settings';
 import type { OpenAIStreamPayload } from '@/types/openai';
 
 import { URLS } from './url';
@@ -31,9 +31,9 @@ export const fetchChatModel = (
     body: JSON.stringify(payload),
     headers: {
       'Content-Type': 'application/json',
-      [LOBE_CHAT_ACCESS_CODE]: useSettings.getState().settings.password || '',
-      [OPENAI_API_KEY_HEADER_KEY]: useSettings.getState().settings.OPENAI_API_KEY || '',
-      [OPENAI_END_POINT]: useSettings.getState().settings.endpoint || '',
+      [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
+      [OPENAI_API_KEY_HEADER_KEY]: useGlobalStore.getState().settings.OPENAI_API_KEY || '',
+      [OPENAI_END_POINT]: useGlobalStore.getState().settings.endpoint || '',
     },
     method: 'POST',
     signal: options?.signal,

package/src/services/plugin.ts

@@ -1,5 +1,5 @@
 import { LOBE_CHAT_ACCESS_CODE } from '@/const/fetch';
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 import { OpenAIPluginPayload } from '@/types/plugin';
 
 import { URLS } from './url';
@@ -20,7 +20,7 @@ export const fetchPlugin = async (
     body: JSON.stringify(params),
     headers: {
       'Content-Type': 'application/json',
-      [LOBE_CHAT_ACCESS_CODE]: useSettings.getState().settings.password || '',
+      [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
     },
     method: 'POST',
     signal: options?.signal,

package/src/store/global/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useHydrated';
+export * from './useSwitchSideBarOnInit';

package/src/store/{settings → global}/hooks/useHydrated.ts

@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
 
-import { useSettings } from '../store';
+import { useGlobalStore } from '../store';
 
 export const useSettingsHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
-  const hasInited = !!Object.values(useSettings.getState().settings).length;
+  const hasInited = !!Object.values(useGlobalStore.getState().settings).length;
 
   const [isInit, setInit] = useState(hasInited);
 
   useEffect(() => {
-    const hasRehydrated = useSettings.persist.hasHydrated();
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
 
     if (hasRehydrated && !isInit) {
       setInit(true);

package/src/store/global/hooks/useSwitchSideBarOnInit.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+import { SidebarTabKey } from '../initialState';
+import { useGlobalStore } from '../store';
+
+/**
+ * 切换侧边栏选项
+ * @desc 只会在应用初始化时（且水合后）执行一次
+ */
+export const useSwitchSideBarOnInit = (key: SidebarTabKey) => {
+  useEffect(() => {
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
+    if (hasRehydrated) {
+      useGlobalStore.getState().switchSideBar(key);
+    }
+  }, []);
+};

package/src/store/global/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './selectors';
+export * from './store';

package/src/store/global/initialState.ts

@@ -0,0 +1,43 @@
+import { DEFAULT_SETTINGS } from '@/const/settings';
+import type { GlobalSettings } from '@/types/settings';
+
+export type SidebarTabKey = 'chat' | 'market' | 'settings';
+
+export interface Guide {
+  // Topic 引导
+  topic?: boolean;
+}
+
+export interface GlobalState {
+  /**
+   *  用户偏好的 UI 状态
+   *  @localStorage
+   */
+  preference: GlobalPreference;
+  /**
+   * @localStorage
+   * 用户设置
+   */
+  settings: GlobalSettings;
+  sidebarKey: SidebarTabKey;
+}
+
+export interface GlobalPreference {
+  guide?: Guide;
+  inputHeight: number;
+  sessionsWidth: number;
+  showChatSideBar?: boolean;
+  showSessionPanel?: boolean;
+}
+
+export const initialState: GlobalState = {
+  preference: {
+    guide: {},
+    inputHeight: 200,
+    sessionsWidth: 320,
+    showChatSideBar: true,
+    showSessionPanel: true,
+  },
+  settings: DEFAULT_SETTINGS,
+  sidebarKey: 'chat',
+};

package/src/store/global/selectors.ts

@@ -0,0 +1,32 @@
+import { merge } from 'lodash-es';
+
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
+import { GlobalSettings } from '@/types/settings';
+
+import { GlobalStore } from './store';
+
+const currentSettings = (s: GlobalStore) => merge({}, DEFAULT_SETTINGS, s.settings);
+
+const currentDefaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
+
+const currentAgentConfig = (s: GlobalStore) =>
+  merge({}, DEFAULT_AGENT_CONFIG, s.settings.defaultAgent.config);
+
+const currentAgentMeta = (s: GlobalStore) =>
+  merge({}, DEFAULT_AGENT_META, s.settings.defaultAgent.meta);
+
+export const exportSettings = (s: GlobalStore) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
+
+  return settings as GlobalSettings;
+};
+
+export const settingsSelectors = {
+  currentAgentConfig,
+  currentAgentMeta,
+  currentDefaultAgent,
+  currentSettings,
+  exportSettings,
+};

package/src/store/{settings → global}/slices/agent.ts

@@ -9,7 +9,7 @@ import { LobeAgentConfig } from '@/types/session';
 import type { GlobalSettings } from '@/types/settings';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { SettingsStore } from '../store';
+import type { GlobalStore } from '../store';
 
 const t = setNamespace('settings');
 
@@ -22,12 +22,11 @@ export interface AgentAction {
   resetDefaultAgent: () => void;
   setAgentConfig: (config: Partial<LobeAgentSession['config']>) => void;
   setAgentMeta: (meta: Partial<LobeAgentSession['meta']>) => void;
-  toggleAgentPanel: (visible?: boolean) => void;
   toggleAgentPlugin: (pluginId: string) => void;
 }
 
 export const createAgentSlice: StateCreator<
-  SettingsStore,
+  GlobalStore,
   [['zustand/devtools', never]],
   [],
   AgentAction
@@ -66,11 +65,7 @@ export const createAgentSlice: StateCreator<
 
     set({ settings }, false, t('setAgentMeta', meta));
   },
-  toggleAgentPanel: (newValue) => {
-    const showAgentConfig = typeof newValue === 'boolean' ? newValue : !get().showAgentConfig;
 
-    set({ showAgentConfig }, false, t('toggleAgentPanel', newValue));
-  },
   toggleAgentPlugin: (id: string) => {
     const settings = produce(get().settings, (draft: GlobalSettings) => {
       const oldConfig = draft.defaultAgent.config as LobeAgentConfig;

package/src/store/global/slices/common.ts

@@ -0,0 +1,56 @@
+import { produce } from 'immer';
+import { merge } from 'lodash-es';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { setNamespace } from '@/utils/storeDebug';
+
+import type { GlobalPreference, GlobalState, Guide, SidebarTabKey } from '../initialState';
+import type { GlobalStore } from '../store';
+
+const t = setNamespace('settings');
+
+/**
+ * 设置操作
+ */
+export interface CommonAction {
+  /**
+   * 切换侧边栏选项
+   * @param key - 选中的侧边栏选项
+   */
+  switchSideBar: (key: SidebarTabKey) => void;
+  toggleChatSideBar: (visible?: boolean) => void;
+  updateGuideState: (guide: Partial<Guide>) => void;
+  updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
+}
+
+export const createCommonSlice: StateCreator<
+  GlobalStore,
+  [['zustand/devtools', never]],
+  [],
+  CommonAction
+> = (set, get) => ({
+  switchSideBar: (key) => {
+    set({ sidebarKey: key }, false, t('switchSideBar', key));
+  },
+  toggleChatSideBar: (newValue) => {
+    const showChatSideBar =
+      typeof newValue === 'boolean' ? newValue : !get().preference.showChatSideBar;
+
+    get().updatePreference({ showChatSideBar }, t('toggleAgentPanel', newValue) as string);
+  },
+  updateGuideState: (guide) => {
+    const { updatePreference } = get();
+    const nextGuide = merge({}, get().preference.guide, guide);
+    updatePreference({ guide: nextGuide });
+  },
+
+  updatePreference: (preference, action) => {
+    set(
+      produce((draft: GlobalState) => {
+        draft.preference = merge({}, draft.preference, preference);
+      }),
+      false,
+      action,
+    );
+  },
+});

package/src/store/{settings/slices/common.ts → global/slices/settings.ts}

@@ -3,31 +3,23 @@ import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { DEFAULT_AGENT, DEFAULT_BASE_SETTINGS, DEFAULT_SETTINGS } from '@/const/settings';
+import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import type { GlobalSettings } from '@/types/settings';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { Guide, SidebarTabKey } from '../initialState';
-import { AppSettingsState } from '../initialState';
-import type { SettingsStore } from '../store';
+import type { GlobalStore } from '../store';
 
 const t = setNamespace('settings');
 
 /**
  * 设置操作
  */
-export interface CommonAction {
+export interface SettingsAction {
   importAppSettings: (settings: GlobalSettings) => void;
-  resetBaseSettings: () => void;
   /**
    * 重置设置
    */
   resetSettings: () => void;
-  /**
-   * 设置全局设置
-   * @param settings - 全局设置
-   */
-  setAppSettings: (settings: AppSettingsState) => void;
   /**
    * 设置部分配置设置
    * @param settings - 部分配置设置
@@ -38,19 +30,13 @@ export interface CommonAction {
    * @param themeMode - 主题模式
    */
   setThemeMode: (themeMode: ThemeMode) => void;
-  /**
-   * 切换侧边栏选项
-   * @param key - 选中的侧边栏选项
-   */
-  switchSideBar: (key: SidebarTabKey) => void;
-  updateGuideState: (guide: Partial<Guide>) => void;
 }
 
-export const createCommonSlice: StateCreator<
-  SettingsStore,
+export const createSettingsSlice: StateCreator<
+  GlobalStore,
   [['zustand/devtools', never]],
   [],
-  CommonAction
+  SettingsAction
 > = (set, get) => ({
   importAppSettings: (importAppSettings) => {
     const { setSettings } = get();
@@ -63,11 +49,6 @@ export const createCommonSlice: StateCreator<
       avatar: !get().settings.avatar ? settings.avatar : get().settings.avatar,
     });
   },
-  resetBaseSettings: () => {
-    const settings = get().settings;
-
-    set({ settings: { ...settings, ...DEFAULT_BASE_SETTINGS } }, false, t('resetBaseSettings'));
-  },
   resetDefaultAgent: () => {
     const settings = produce(get().settings, (draft: GlobalSettings) => {
       draft.defaultAgent = DEFAULT_AGENT;
@@ -77,9 +58,7 @@ export const createCommonSlice: StateCreator<
   resetSettings: () => {
     set({ settings: DEFAULT_SETTINGS }, false, t('resetSettings'));
   },
-  setAppSettings: (settings) => {
-    set({ ...settings }, false, t('setAppSettings', settings));
-  },
+
   setSettings: (settings) => {
     const oldSetting = get().settings;
     set({ settings: merge(oldSetting, settings) }, false, t('setSettings', settings));
@@ -87,10 +66,4 @@ export const createCommonSlice: StateCreator<
   setThemeMode: (themeMode) => {
     get().setSettings({ themeMode });
   },
-  switchSideBar: (key) => {
-    set({ sidebarKey: key }, false, t('switchSideBar', key));
-  },
-  updateGuideState: (guide) => {
-    set({ guide: { ...get().guide, ...guide } });
-  },
 });

package/src/store/{settings → global}/store.ts

@@ -5,37 +5,40 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
 
-import { type AppSettingsState, initialState } from './initialState';
+import { type GlobalState, initialState } from './initialState';
 import { type AgentAction, createAgentSlice } from './slices/agent';
 import { type CommonAction, createCommonSlice } from './slices/common';
+import { type SettingsAction, createSettingsSlice } from './slices/settings';
 
 //  ===============  聚合 createStoreFn ============ //
 
-export type SettingsStore = CommonAction & AppSettingsState & AgentAction;
+export type GlobalStore = CommonAction & GlobalState & AgentAction & SettingsAction;
 
-const createStore: StateCreator<SettingsStore, [['zustand/devtools', never]]> = (
-  ...parameters
-) => ({
+const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
   ...createCommonSlice(...parameters),
   ...createAgentSlice(...parameters),
+  ...createSettingsSlice(...parameters),
 });
 
 //  ===============  persist 本地缓存中间件配置 ============ //
-
-const LOBE_SETTINGS = 'LOBE_SETTINGS';
-
-const persistOptions: PersistOptions<SettingsStore> = {
-  name: LOBE_SETTINGS,
+type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
+
+const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
+  name: 'LOBE_SETTINGS',
+  partialize: (s) => ({
+    preference: s.preference,
+    settings: s.settings,
+  }),
   skipHydration: true,
 };
 
 //  ===============  实装 useStore ============ //
 
-export const useSettings = createWithEqualityFn<SettingsStore>()(
+export const useGlobalStore = createWithEqualityFn<GlobalStore>()(
   persist(
     devtools(createStore, {
-      name: LOBE_SETTINGS + (isDev ? '_DEV' : ''),
+      name: 'LOBE_GLOBAL' + (isDev ? '_DEV' : ''),
     }),
     persistOptions,
   ),

package/src/store/session/slices/chat/selectors/chat.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_USER_AVATAR } from '@/const/meta';
-import { useSettings } from '@/store/settings';
+import { useGlobalStore } from '@/store/global';
 import { ChatMessage } from '@/types/chatMessage';
 
 import type { SessionStore } from '../../../store';
@@ -20,7 +20,7 @@ export const getChatsById =
       {
         assistant: agentSelectors.currentAgentAvatar(s),
         assistantBackground: agentSelectors.currentAgentBackgroundColor(s),
-        user: useSettings.getState().settings.avatar || DEFAULT_USER_AVATAR,
+        user: useGlobalStore.getState().settings.avatar || DEFAULT_USER_AVATAR,
       },
       s.activeTopicId,
     );

package/src/store/session/slices/session/action.ts

@@ -3,8 +3,8 @@ import { merge } from 'lodash-es';
 import Router from 'next/router';
 import { StateCreator } from 'zustand/vanilla';
 
+import { useGlobalStore } from '@/store/global';
 import { SessionStore, initLobeSession } from '@/store/session';
-import { useSettings } from '@/store/settings';
 import { LobeAgentSession, LobeSessions } from '@/types/session';
 import { setNamespace } from '@/utils/storeDebug';
 import { uuid } from '@/utils/uuid';
@@ -79,7 +79,7 @@ export const createSessionSlice: StateCreator<
     const timestamp = Date.now();
 
     // 合并 settings 里的 defaultAgent
-    const globalDefaultAgent = useSettings.getState().settings.defaultAgent;
+    const globalDefaultAgent = useGlobalStore.getState().settings.defaultAgent;
     const newSession: LobeAgentSession = merge({}, initLobeSession, globalDefaultAgent, {
       createAt: timestamp,
       id: uuid(),
@@ -136,7 +136,7 @@ export const createSessionSlice: StateCreator<
     get().dispatchSession({ id: sessionId, type: 'removeSession' });
 
     if (sessionId === get().activeId) {
-      Router.push('/');
+      Router.push('/chat');
     }
   },
 

package/src/store/settings/index.ts

@@ -1,3 +0,0 @@
-export * from './selectors';
-export type { SettingsStore } from './store';
-export { useSettings } from './store';

package/src/store/settings/initialState.ts

@@ -1,29 +0,0 @@
-import { DEFAULT_SETTINGS } from '@/const/settings';
-import type { GlobalSettings } from '@/types/settings';
-
-export type SidebarTabKey = 'chat' | 'market' | 'settings';
-
-export interface Guide {
-  // Topic 引导
-  topic?: boolean;
-}
-
-export interface AppSettingsState {
-  guide?: Guide;
-  inputHeight: number;
-  sessionExpandable?: boolean;
-  sessionsWidth: number;
-  settings: GlobalSettings;
-  showAgentConfig?: boolean;
-  sidebarKey: SidebarTabKey;
-}
-
-export const initialState: AppSettingsState = {
-  guide: {},
-  inputHeight: 200,
-  sessionExpandable: true,
-  sessionsWidth: 320,
-  settings: DEFAULT_SETTINGS,
-  showAgentConfig: true,
-  sidebarKey: 'chat',
-};

package/src/store/settings/selectors.ts

@@ -1,32 +0,0 @@
-import { defaults } from 'lodash-es';
-
-import { DEFAULT_AGENT_META } from '@/const/meta';
-import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
-import { GlobalSettings } from '@/types/settings';
-
-import { SettingsStore } from './store';
-
-const currentSettings = (s: SettingsStore) => defaults(s.settings, DEFAULT_SETTINGS);
-
-const currentDefaultAgent = (s: SettingsStore) => defaults(s.settings.defaultAgent, DEFAULT_AGENT);
-
-const currentAgentConfig = (s: SettingsStore) =>
-  defaults(s.settings.defaultAgent.config, DEFAULT_AGENT_CONFIG);
-
-const currentAgentMeta = (s: SettingsStore) =>
-  defaults(s.settings.defaultAgent.meta, DEFAULT_AGENT_META);
-
-export const exportSettings = (s: SettingsStore) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
-
-  return settings as GlobalSettings;
-};
-
-export const settingsSelectors = {
-  currentAgentConfig,
-  currentAgentMeta,
-  currentDefaultAgent,
-  currentSettings,
-  exportSettings,
-};