@lobehub/chat 0.161.21 → 0.161.23

package/src/store/market/store.ts

@@ -1,11 +1,11 @@
-import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { PersistOptions, persist } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import type { StateCreator } from 'zustand/vanilla';
 
 import { createHyperStorage } from '@/store/middleware/createHyperStorage';
-import { isDev } from '@/utils/env';
 
+import { createDevtools } from '../middleware/createDevtools';
 import { type StoreAction, createMarketAction } from './action';
 import { type StoreState, initialState } from './initialState';
 
@@ -40,12 +40,9 @@ const createStore: StateCreator<Store, [['zustand/devtools', never]]> = (...para
   ...createMarketAction(...parameters),
 });
 
+const devtools = createDevtools('market');
+
 export const useMarketStore = createWithEqualityFn<Store>()(
-  persist(
-    devtools(createStore, {
-      name: LOBE_AGENT_MARKET + (isDev ? '_DEV' : ''),
-    }),
-    persistOptions,
-  ),
+  persist(devtools(createStore), persistOptions),
   shallow,
 );

package/src/store/middleware/createDevtools.ts

@@ -0,0 +1,23 @@
+import { optionalDevtools } from 'zustand-utils';
+import { devtools as _devtools } from 'zustand/middleware';
+
+import { isDev } from '@/utils/env';
+
+export const createDevtools =
+  (name: string): typeof _devtools =>
+  (initializer) => {
+    let showDevtools = false;
+
+    // check url to show devtools
+    if (typeof window !== 'undefined') {
+      const url = new URL(window.location.href);
+      const debug = url.searchParams.get('debug');
+      if (debug?.includes(name)) {
+        showDevtools = true;
+      }
+    }
+
+    return optionalDevtools(showDevtools)(initializer, {
+      name: `LobeChat_${name}` + (isDev ? '_DEV' : ''),
+    });
+  };

package/src/store/serverConfig/store.ts

@@ -1,13 +1,12 @@
 import { StoreApi } from 'zustand';
 import { createContext } from 'zustand-utils';
-import { devtools } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_FEATURE_FLAGS, IFeatureFlags } from '@/config/featureFlags';
+import { createDevtools } from '@/store/middleware/createDevtools';
 import { GlobalServerConfig } from '@/types/serverConfig';
-import { isDev } from '@/utils/env';
 import { merge } from '@/utils/merge';
 import { StoreApiWithSelector } from '@/utils/zustand';
 
@@ -42,21 +41,16 @@ declare global {
   }
 }
 
+const devtools = createDevtools('serverConfig');
+
 export const initServerConfigStore = (initState: Partial<ServerConfigStore>) =>
-  createWithEqualityFn<ServerConfigStore>()(
-    devtools(createStore(initState || {}), {
-      name: 'LobeChat_ServerConfig' + (isDev ? '_DEV' : ''),
-    }),
-    shallow,
-  );
+  createWithEqualityFn<ServerConfigStore>()(devtools(createStore(initState || {})), shallow);
 
 export const createServerConfigStore = (initState?: Partial<ServerConfigStore>) => {
   // make sure there is only one store
   if (!store) {
     store = createWithEqualityFn<ServerConfigStore>()(
-      devtools(createStore(initState || {}), {
-        name: 'LobeChat_ServerConfig' + (isDev ? '_DEV' : ''),
-      }),
+      devtools(createStore(initState || {})),
       shallow,
     );
 

package/src/store/session/store.ts

@@ -1,10 +1,11 @@
-import { devtools, subscribeWithSelector } from 'zustand/middleware';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
 
+import { createDevtools } from '../middleware/createDevtools';
 import { SessionStoreState, initialState } from './initialState';
 import { SessionAction, createSessionSlice } from './slices/session/action';
 import { SessionGroupAction, createSessionGroupSlice } from './slices/sessionGroup/action';
@@ -20,6 +21,7 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
 });
 
 //  ===============  implement useStore ============ //
+const devtools = createDevtools('session');
 
 export const useSessionStore = createWithEqualityFn<SessionStore>()(
   subscribeWithSelector(

package/src/store/tool/store.ts

@@ -1,10 +1,8 @@
-import { devtools } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
-import { isDev } from '@/utils/env';
-
+import { createDevtools } from '../middleware/createDevtools';
 import { ToolStoreState, initialState } from './initialState';
 import { BuiltinToolAction, createBuiltinToolSlice } from './slices/builtin';
 import { CustomPluginAction, createCustomPluginSlice } from './slices/customPlugin';
@@ -29,9 +27,6 @@ const createStore: StateCreator<ToolStore, [['zustand/devtools', never]]> = (...
 
 //  ===============  实装 useStore ============ //
 
-export const useToolStore = createWithEqualityFn<ToolStore>()(
-  devtools(createStore, {
-    name: 'LobeChat_Tool' + (isDev ? '_DEV' : ''),
-  }),
-  shallow,
-);
+const devtools = createDevtools('tools');
+
+export const useToolStore = createWithEqualityFn<ToolStore>()(devtools(createStore), shallow);

package/src/store/user/helpers.ts

@@ -1,7 +1,8 @@
-import { settingsSelectors } from './slices/settings/selectors';
+import { userGeneralSettingsSelectors } from './slices/settings/selectors';
 import { useUserStore } from './store';
 
-const getCurrentLanguage = () => settingsSelectors.currentLanguage(useUserStore.getState());
+const getCurrentLanguage = () =>
+  userGeneralSettingsSelectors.currentLanguage(useUserStore.getState());
 
 export const globalHelpers = {
   getCurrentLanguage,

package/src/store/user/selectors.ts

@@ -1,5 +1,13 @@
 export { authSelectors, userProfileSelectors } from './slices/auth/selectors';
-export { modelConfigSelectors, modelProviderSelectors } from './slices/modelList/selectors';
+export {
+  keyVaultsConfigSelectors,
+  modelConfigSelectors,
+  modelProviderSelectors,
+} from './slices/modelList/selectors';
 export { preferenceSelectors } from './slices/preference/selectors';
-export { settingsSelectors, systemAgentSelectors } from './slices/settings/selectors';
+export {
+  settingsSelectors,
+  systemAgentSelectors,
+  userGeneralSettingsSelectors,
+} from './slices/settings/selectors';
 export { syncSettingsSelectors } from './slices/sync/selectors';

package/src/store/user/slices/common/action.test.ts

@@ -84,7 +84,7 @@ describe('createCommonSlice', () => {
           telemetry: true,
         },
         settings: {
-          language: 'en-US',
+          general: { language: 'en-US' },
         },
       };
 
@@ -166,7 +166,7 @@ describe('createCommonSlice', () => {
         isOnboard: true,
         preference: savedPreference,
         settings: {
-          language: 'en-US',
+          general: { language: 'en-US' },
         },
       };
       vi.spyOn(userService, 'getUserState').mockResolvedValueOnce(mockUserState);
@@ -216,7 +216,7 @@ describe('createCommonSlice', () => {
         isOnboard: true,
         preference: {} as any,
         settings: {
-          language: 'en-US',
+          general: { language: 'en-US' },
         },
       };
 

package/src/store/user/slices/common/action.ts

@@ -7,14 +7,14 @@ import { userService } from '@/services/user';
 import { ClientService } from '@/services/user/client';
 import type { UserStore } from '@/store/user';
 import type { GlobalServerConfig } from '@/types/serverConfig';
-import type { GlobalSettings } from '@/types/settings';
 import { UserInitializationState } from '@/types/user';
+import type { UserSettings } from '@/types/user/settings';
 import { switchLang } from '@/utils/client/switchLang';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { preferenceSelectors } from '../preference/selectors';
-import { settingsSelectors } from '../settings/selectors';
+import { userGeneralSettingsSelectors } from '../settings/selectors';
 
 const n = setNamespace('common');
 
@@ -78,7 +78,7 @@ export const createCommonSlice: StateCreator<
 
           if (data) {
             // merge settings
-            const serverSettings: DeepPartial<GlobalSettings> = {
+            const serverSettings: DeepPartial<UserSettings> = {
               defaultAgent: serverConfig.defaultAgent,
               languageModel: serverConfig.languageModel,
             };
@@ -115,7 +115,7 @@ export const createCommonSlice: StateCreator<
             get().refreshDefaultModelProviderList({ trigger: 'fetchUserState' });
 
             // auto switch language
-            const { language } = settingsSelectors.currentSettings(get());
+            const language = userGeneralSettingsSelectors.config(get()).language;
             if (language === 'auto') {
               switchLang('auto');
             }

package/src/store/user/slices/modelList/action.test.ts

@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { modelsService } from '@/services/models';
 import { userService } from '@/services/user';
 import { useUserStore } from '@/store/user';
-import { GeneralModelProviderConfig } from '@/types/settings';
+import { ProviderConfig } from '@/types/user/settings';
 
 import { settingsSelectors } from '../settings/selectors';
 import { CustomModelCardDispatch } from './reducers/customModelCard';
@@ -24,7 +24,7 @@ describe('LLMSettingsSliceAction', () => {
   describe('setModelProviderConfig', () => {
     it('should set OpenAI configuration', async () => {
       const { result } = renderHook(() => useUserStore());
-      const openAIConfig: Partial<GeneralModelProviderConfig> = { apiKey: 'test-key' };
+      const openAIConfig: Partial<ProviderConfig> = { fetchOnClient: true };
 
       // Perform the action
       await act(async () => {

package/src/store/user/slices/modelList/action.ts

@@ -6,7 +6,11 @@ import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { ModelProvider } from '@/libs/agent-runtime';
 import { UserStore } from '@/store/user';
 import { ChatModelCard } from '@/types/llm';
-import { GlobalLLMConfig, GlobalLLMProviderKey } from '@/types/settings';
+import {
+  GlobalLLMProviderKey,
+  UserKeyVaults,
+  UserModelProviderConfig,
+} from '@/types/user/settings';
 
 import { settingsSelectors } from '../settings/selectors';
 import { CustomModelCardDispatch, customModelCardsReducer } from './reducers/customModelCard';
@@ -28,9 +32,8 @@ export interface ModelListAction {
   removeEnabledModels: (provider: GlobalLLMProviderKey, model: string) => Promise<void>;
   setModelProviderConfig: <T extends GlobalLLMProviderKey>(
     provider: T,
-    config: Partial<GlobalLLMConfig[T]>,
+    config: Partial<UserModelProviderConfig[T]>,
   ) => Promise<void>;
-
   toggleEditingCustomModelCard: (params?: { id: string; provider: GlobalLLMProviderKey }) => void;
 
   toggleProviderEnabled: (provider: GlobalLLMProviderKey, enabled: boolean) => Promise<void>;
@@ -41,6 +44,11 @@ export interface ModelListAction {
     options: { label?: string; value?: string }[],
   ) => Promise<void>;
 
+  updateKeyVaultConfig: <T extends GlobalLLMProviderKey>(
+    provider: T,
+    config: Partial<UserKeyVaults[T]>,
+  ) => Promise<void>;
+
   useFetchProviderModelList: (
     provider: GlobalLLMProviderKey,
     enabledAutoFetch: boolean,
@@ -137,10 +145,10 @@ export const createModelListSlice: StateCreator<
   toggleEditingCustomModelCard: (params) => {
     set({ editingCustomCardModel: params }, false, 'toggleEditingCustomModelCard');
   },
+
   toggleProviderEnabled: async (provider, enabled) => {
     await get().setSettings({ languageModel: { [provider]: { enabled } } });
   },
-
   updateEnabledModels: async (provider, value, options) => {
     const { dispatchCustomModelCards, setModelProviderConfig } = get();
     const enabledModels = modelProviderSelectors.getEnableModelsById(provider)(get());
@@ -171,6 +179,10 @@ export const createModelListSlice: StateCreator<
     await setModelProviderConfig(provider, { enabledModels: value.filter(Boolean) });
   },
 
+  updateKeyVaultConfig: async (provider, config) => {
+    await get().setSettings({ keyVaults: { [provider]: config } });
+  },
+
   useFetchProviderModelList: (provider, enabledAutoFetch) =>
     useSWR<ChatModelCard[] | undefined>(
       [provider, enabledAutoFetch],

package/src/store/user/slices/modelList/selectors/index.ts

@@ -1,2 +1,3 @@
+export { keyVaultsConfigSelectors } from './keyVaults';
 export { modelConfigSelectors } from './modelConfig';
 export { modelProviderSelectors } from './modelProvider';

package/src/store/user/slices/modelList/selectors/keyVaults.ts

@@ -0,0 +1,25 @@
+import { UserStore } from '@/store/user';
+import { GlobalLLMProviderKey, OpenAICompatibleKeyVault } from '@/types/user/settings';
+
+import { currentSettings } from '../../settings/selectors/settings';
+
+export const keyVaultsSettings = (s: UserStore) => currentSettings(s).keyVaults;
+
+const openAIConfig = (s: UserStore) => keyVaultsSettings(s).openai || {};
+const bedrockConfig = (s: UserStore) => keyVaultsSettings(s).bedrock || {};
+const ollamaConfig = (s: UserStore) => keyVaultsSettings(s).ollama || {};
+const azureConfig = (s: UserStore) => keyVaultsSettings(s).azure || {};
+const getVaultByProvider = (provider: GlobalLLMProviderKey) => (s: UserStore) =>
+  (keyVaultsSettings(s)[provider] || {}) as OpenAICompatibleKeyVault;
+
+const isProviderEndpointNotEmpty = (provider: string) => (s: UserStore) =>
+  !!getVaultByProvider(provider as GlobalLLMProviderKey)(s)?.baseURL;
+
+export const keyVaultsConfigSelectors = {
+  azureConfig,
+  bedrockConfig,
+  getVaultByProvider,
+  isProviderEndpointNotEmpty,
+  ollamaConfig,
+  openAIConfig,
+};

package/src/store/user/slices/modelList/selectors/modelConfig.test.ts

@@ -38,7 +38,7 @@ describe('modelConfigSelectors', () => {
     it('client fetch should disabled on default', () => {
       const s = merge(initialSettingsState, {
         settings: {
-          languageModel: {
+          keyVaults: {
             azure: {
               endpoint: 'endpoint',
               apiKey: 'apikey',

package/src/store/user/slices/modelList/selectors/modelConfig.ts

@@ -1,4 +1,4 @@
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { UserStore } from '../../../store';
 import { currentLLMSettings, getProviderConfigById } from '../../settings/selectors/settings';
@@ -6,9 +6,6 @@ import { currentLLMSettings, getProviderConfigById } from '../../settings/select
 const isProviderEnabled = (provider: GlobalLLMProviderKey) => (s: UserStore) =>
   getProviderConfigById(provider)(s)?.enabled || false;
 
-const isProviderEndpointNotEmpty = (provider: GlobalLLMProviderKey | string) => (s: UserStore) =>
-  !!getProviderConfigById(provider)(s)?.endpoint;
-
 const isProviderFetchOnClient = (provider: GlobalLLMProviderKey | string) => (s: UserStore) => {
   const config = getProviderConfigById(provider)(s);
   if (typeof config?.fetchOnClient !== 'undefined') return config?.fetchOnClient;
@@ -56,10 +53,8 @@ export const modelConfigSelectors = {
   isAutoFetchModelsEnabled,
   isAzureEnabled,
   isProviderEnabled,
-  isProviderEndpointNotEmpty,
   isProviderFetchOnClient,
 
   ollamaConfig,
-
   openAIConfig,
 };

package/src/store/user/slices/modelList/selectors/modelProvider.ts

@@ -3,7 +3,7 @@ import { uniqBy } from 'lodash-es';
 import { filterEnabledModels } from '@/config/modelProviders';
 import { ChatModelCard, ModelProviderCard } from '@/types/llm';
 import { ServerModelProviderConfig } from '@/types/serverConfig';
-import { GlobalLLMProviderKey } from '@/types/settings';
+import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import { UserStore } from '../../../store';
 import { currentSettings, getProviderConfigById } from '../../settings/selectors/settings';

package/src/store/user/slices/settings/action.test.ts

@@ -7,7 +7,10 @@ import { DEFAULT_AGENT, DEFAULT_SETTINGS } from '@/const/settings';
 import { userService } from '@/services/user';
 import { useUserStore } from '@/store/user';
 import { LobeAgentSettings } from '@/types/session';
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
+import { merge } from '@/utils/merge';
+
+vi.mock('zustand/traditional');
 
 // Mock userService
 vi.mock('@/services/user', () => ({
@@ -21,10 +24,9 @@ describe('SettingsAction', () => {
   describe('importAppSettings', () => {
     it('should import app settings', async () => {
       const { result } = renderHook(() => useUserStore());
-      const newSettings: GlobalSettings = {
-        ...DEFAULT_SETTINGS,
-        themeMode: 'dark',
-      };
+      const newSettings: UserSettings = merge(DEFAULT_SETTINGS, {
+        general: { themeMode: 'dark' },
+      });
 
       // Mock the internal setSettings function call
       const setSettingsSpy = vi.spyOn(result.current, 'setSettings');
@@ -35,14 +37,12 @@ describe('SettingsAction', () => {
       });
 
       // Assert that setSettings was called with the correct settings
-      expect(setSettingsSpy).toHaveBeenCalledWith({
-        ...DEFAULT_SETTINGS,
-        password: undefined,
-        themeMode: 'dark',
-      });
+      expect(setSettingsSpy).toHaveBeenCalledWith(newSettings);
 
       // Assert that the state has been updated
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({ themeMode: 'dark' });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith({
+        general: { themeMode: 'dark' },
+      });
 
       // Restore the spy
       setSettingsSpy.mockRestore();
@@ -69,7 +69,7 @@ describe('SettingsAction', () => {
   describe('setSettings', () => {
     it('should set partial settings', async () => {
       const { result } = renderHook(() => useUserStore());
-      const partialSettings: Partial<GlobalSettings> = { themeMode: 'dark' };
+      const partialSettings: DeepPartial<UserSettings> = { general: { themeMode: 'dark' } };
 
       // Perform the action
       await act(async () => {
@@ -92,7 +92,9 @@ describe('SettingsAction', () => {
       });
 
       // Assert that updateUserSettings was called with the correct theme mode
-      expect(userService.updateUserSettings).toHaveBeenCalledWith({ themeMode });
+      expect(userService.updateUserSettings).toHaveBeenCalledWith({
+        general: { themeMode },
+      });
     });
   });
 
@@ -116,7 +118,7 @@ describe('SettingsAction', () => {
   describe('setTranslationSystemAgent', () => {
     it('should set partial settings', async () => {
       const { result } = renderHook(() => useUserStore());
-      const systemAgentSettings: Partial<GlobalSettings> = {
+      const systemAgentSettings: Partial<UserSettings> = {
         systemAgent: {
           translation: {
             model: 'testmodel',

package/src/store/user/slices/settings/action.ts

@@ -7,19 +7,21 @@ import { userService } from '@/services/user';
 import type { UserStore } from '@/store/user';
 import { LocaleMode } from '@/types/locale';
 import { LobeAgentSettings } from '@/types/session';
-import { GlobalSettings } from '@/types/settings';
+import { UserGeneralConfig, UserKeyVaults, UserSettings } from '@/types/user/settings';
 import { switchLang } from '@/utils/client/switchLang';
 import { difference } from '@/utils/difference';
 import { merge } from '@/utils/merge';
 
 export interface UserSettingsAction {
-  importAppSettings: (settings: GlobalSettings) => Promise<void>;
+  importAppSettings: (settings: UserSettings) => Promise<void>;
   resetSettings: () => Promise<void>;
-  setSettings: (settings: DeepPartial<GlobalSettings>) => Promise<void>;
+  setSettings: (settings: DeepPartial<UserSettings>) => Promise<void>;
   setTranslationSystemAgent: (provider: string, model: string) => Promise<void>;
   switchLocale: (locale: LocaleMode) => Promise<void>;
   switchThemeMode: (themeMode: ThemeMode) => Promise<void>;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
+  updateGeneralConfig: (settings: Partial<UserGeneralConfig>) => Promise<void>;
+  updateKeyVaults: (settings: Partial<UserKeyVaults>) => Promise<void>;
 }
 
 export const createSettingsSlice: StateCreator<
@@ -30,10 +32,8 @@ export const createSettingsSlice: StateCreator<
 > = (set, get) => ({
   importAppSettings: async (importAppSettings) => {
     const { setSettings } = get();
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { password: _, ...settings } = importAppSettings;
 
-    await setSettings(settings);
+    await setSettings(importAppSettings);
   },
   resetSettings: async () => {
     await userService.resetUserSettings();
@@ -62,14 +62,20 @@ export const createSettingsSlice: StateCreator<
     });
   },
   switchLocale: async (locale) => {
-    await get().setSettings({ language: locale });
+    await get().updateGeneralConfig({ language: locale });
 
     switchLang(locale);
   },
   switchThemeMode: async (themeMode) => {
-    await get().setSettings({ themeMode });
+    await get().updateGeneralConfig({ themeMode });
   },
   updateDefaultAgent: async (defaultAgent) => {
     await get().setSettings({ defaultAgent });
   },
+  updateGeneralConfig: async (general) => {
+    await get().setSettings({ general });
+  },
+  updateKeyVaults: async (keyVaults) => {
+    await get().setSettings({ keyVaults });
+  },
 });

package/src/store/user/slices/settings/initialState.ts

@@ -1,11 +1,11 @@
 import { DeepPartial } from 'utility-types';
 
 import { DEFAULT_SETTINGS } from '@/const/settings';
-import { GlobalSettings } from '@/types/settings';
+import { UserSettings } from '@/types/user/settings';
 
 export interface UserSettingsState {
-  defaultSettings: GlobalSettings;
-  settings: DeepPartial<GlobalSettings>;
+  defaultSettings: UserSettings;
+  settings: DeepPartial<UserSettings>;
 }
 
 export const initialSettingsState: UserSettingsState = {

package/src/store/user/slices/settings/selectors/general.test.ts

@@ -0,0 +1,45 @@
+import { UserStore } from '@/store/user';
+import { UserState, initialState } from '@/store/user/initialState';
+import { merge } from '@/utils/merge';
+
+import { userGeneralSettingsSelectors } from './general';
+
+describe('settingsSelectors', () => {
+  describe('currentLanguage', () => {
+    it('should return the correct language setting', () => {
+      const s: UserState = merge(initialState, {
+        settings: {
+          general: { language: 'fr' },
+        },
+      });
+
+      const result = userGeneralSettingsSelectors.currentLanguage(s as UserStore);
+
+      expect(result).toBe('fr');
+    });
+  });
+
+  describe('currentThemeMode', () => {
+    it('should return the correct theme', () => {
+      const s: UserState = merge(initialState, {
+        settings: {
+          general: { themeMode: 'light' },
+        },
+      });
+
+      const result = userGeneralSettingsSelectors.currentThemeMode(s as UserStore);
+
+      expect(result).toBe('light');
+    });
+    it('should return the auto if not set the themeMode', () => {
+      const s: UserState = merge(initialState, {
+        settings: {
+          general: { themeMode: undefined },
+        },
+      });
+      const result = userGeneralSettingsSelectors.currentThemeMode(s as UserStore);
+
+      expect(result).toBe('auto');
+    });
+  });
+});

package/src/store/user/slices/settings/selectors/general.ts

@@ -0,0 +1,40 @@
+import { DEFAULT_LANG } from '@/const/locale';
+import { Locales } from '@/locales/resources';
+import { isOnServerSide } from '@/utils/env';
+
+import { UserStore } from '../../../store';
+import { currentSettings } from './settings';
+
+const generalConfig = (s: UserStore) => currentSettings(s).general || {};
+
+const currentLanguage = (s: UserStore) => {
+  const locale = generalConfig(s).language;
+
+  if (locale === 'auto') {
+    if (isOnServerSide) return DEFAULT_LANG;
+
+    return navigator.language as Locales;
+  }
+
+  return locale;
+};
+
+const currentThemeMode = (s: UserStore) => {
+  const themeMode = generalConfig(s).themeMode;
+  return themeMode || 'auto';
+};
+
+const neutralColor = (s: UserStore) => generalConfig(s).neutralColor;
+const primaryColor = (s: UserStore) => generalConfig(s).primaryColor;
+const fontSize = (s: UserStore) => generalConfig(s).fontSize;
+const language = (s: UserStore) => generalConfig(s).language;
+
+export const userGeneralSettingsSelectors = {
+  config: generalConfig,
+  currentLanguage,
+  currentThemeMode,
+  fontSize,
+  language,
+  neutralColor,
+  primaryColor,
+};

package/src/store/user/slices/settings/selectors/index.ts

@@ -1,2 +1,3 @@
+export { userGeneralSettingsSelectors } from './general';
 export { settingsSelectors } from './settings';
 export { systemAgentSelectors } from './systemAgent';