@lobehub/chat 1.70.3 → 1.70.5

package/src/store/global/initialState.ts

@@ -1,3 +1,4 @@
+import type { ThemeMode } from 'antd-style';
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
 import { DatabaseLoadingState } from '@/types/clientDB';
@@ -61,6 +62,10 @@ export interface SystemStatus {
   showFilePanel?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
+  /**
+   * theme mode
+   */
+  themeMode?: ThemeMode;
   threadInputHeight: number;
   zenMode?: boolean;
 }
@@ -96,6 +101,7 @@ export const INITIAL_STATUS = {
   showFilePanel: true,
   showSessionPanel: true,
   showSystemRole: false,
+  themeMode: 'auto',
   threadInputHeight: 200,
   zenMode: false,
 } satisfies SystemStatus;

package/src/store/global/selectors/systemStatus.test.ts

@@ -0,0 +1,209 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { DatabaseLoadingState } from '@/types/clientDB';
+import { merge } from '@/utils/merge';
+
+import { GlobalState, INITIAL_STATUS, initialState } from '../initialState';
+import { systemStatusSelectors } from './systemStatus';
+
+// Mock version constants
+vi.mock('@/const/version', () => ({
+  isServerMode: false,
+  isUsePgliteDB: true,
+}));
+
+describe('systemStatusSelectors', () => {
+  describe('sessionGroupKeys', () => {
+    it('should return expandSessionGroupKeys from status', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          expandSessionGroupKeys: ['group1', 'group2'],
+        },
+      });
+      expect(systemStatusSelectors.sessionGroupKeys(s)).toEqual(['group1', 'group2']);
+    });
+
+    it('should return initial value if not set', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          expandSessionGroupKeys: undefined,
+        },
+      });
+      expect(systemStatusSelectors.sessionGroupKeys(s)).toEqual(
+        INITIAL_STATUS.expandSessionGroupKeys,
+      );
+    });
+  });
+
+  describe('basic selectors', () => {
+    const s: GlobalState = merge(initialState, {
+      status: {
+        showSystemRole: true,
+        mobileShowTopic: true,
+        mobileShowPortal: true,
+        showChatSideBar: true,
+        showSessionPanel: true,
+        showFilePanel: true,
+        hidePWAInstaller: true,
+        isShowCredit: true,
+        zenMode: false,
+        sessionsWidth: 300,
+        portalWidth: 500,
+        filePanelWidth: 400,
+        inputHeight: 150,
+        threadInputHeight: 100,
+      },
+    });
+
+    it('should return correct values for basic selectors', () => {
+      expect(systemStatusSelectors.showSystemRole(s)).toBe(true);
+      expect(systemStatusSelectors.mobileShowTopic(s)).toBe(true);
+      expect(systemStatusSelectors.mobileShowPortal(s)).toBe(true);
+      expect(systemStatusSelectors.showChatSideBar(s)).toBe(true);
+      expect(systemStatusSelectors.showSessionPanel(s)).toBe(true);
+      expect(systemStatusSelectors.showFilePanel(s)).toBe(true);
+      expect(systemStatusSelectors.hidePWAInstaller(s)).toBe(true);
+      expect(systemStatusSelectors.isShowCredit(s)).toBe(true);
+      expect(systemStatusSelectors.showChatHeader(s)).toBe(true);
+      expect(systemStatusSelectors.inZenMode(s)).toBe(false);
+      expect(systemStatusSelectors.sessionWidth(s)).toBe(300);
+      expect(systemStatusSelectors.portalWidth(s)).toBe(500);
+      expect(systemStatusSelectors.filePanelWidth(s)).toBe(400);
+      expect(systemStatusSelectors.inputHeight(s)).toBe(150);
+      expect(systemStatusSelectors.threadInputHeight(s)).toBe(100);
+    });
+
+    it('should handle zen mode effects', () => {
+      const zenState = merge(s, {
+        status: { zenMode: true },
+      });
+      expect(systemStatusSelectors.showChatSideBar(zenState)).toBe(false);
+      expect(systemStatusSelectors.showSessionPanel(zenState)).toBe(false);
+      expect(systemStatusSelectors.showChatHeader(zenState)).toBe(false);
+    });
+
+    it('should return default portal width if not set', () => {
+      const noPortalWidth = merge(initialState, {
+        status: { portalWidth: undefined },
+      });
+      expect(systemStatusSelectors.portalWidth(noPortalWidth)).toBe(400);
+    });
+  });
+
+  describe('theme mode', () => {
+    it('should return the correct theme', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          themeMode: 'light',
+        },
+      });
+      expect(systemStatusSelectors.themeMode(s)).toBe('light');
+    });
+
+    it('should return auto if not set', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          themeMode: undefined,
+        },
+      });
+      expect(systemStatusSelectors.themeMode(s)).toBe('auto');
+    });
+  });
+
+  describe('pglite status selectors', () => {
+    describe('isPgliteNotEnabled', () => {
+      it('should return true when conditions are met', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: false,
+          },
+        };
+        expect(systemStatusSelectors.isPgliteNotEnabled(s)).toBe(true);
+      });
+
+      it('should return false when isStatusInit is false', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: false,
+          status: {
+            ...initialState.status,
+            isEnablePglite: false,
+          },
+        };
+        expect(systemStatusSelectors.isPgliteNotEnabled(s)).toBe(false);
+      });
+    });
+
+    describe('isPgliteNotInited', () => {
+      it('should return true when pglite is enabled but not ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Initializing,
+        };
+        expect(systemStatusSelectors.isPgliteNotInited(s)).toBe(true);
+      });
+
+      it('should return false when pglite is ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Ready,
+        };
+        expect(systemStatusSelectors.isPgliteNotInited(s)).toBe(false);
+      });
+
+      it('should return false when pglite is not enabled', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: false,
+          },
+          initClientDBStage: DatabaseLoadingState.Initializing,
+        };
+        expect(systemStatusSelectors.isPgliteNotInited(s)).toBe(false);
+      });
+    });
+
+    describe('isPgliteInited', () => {
+      it('should return true when pglite is enabled and ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Ready,
+        };
+        expect(systemStatusSelectors.isPgliteInited(s)).toBe(true);
+      });
+
+      it('should return false when not ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Initializing,
+        };
+        expect(systemStatusSelectors.isPgliteInited(s)).toBe(false);
+      });
+    });
+  });
+});

package/src/store/global/selectors/systemStatus.ts

@@ -1,38 +1,38 @@
 import { isServerMode, isUsePgliteDB } from '@/const/version';
-import { GlobalStore } from '@/store/global';
 import { DatabaseLoadingState } from '@/types/clientDB';
 
 import { GlobalState, INITIAL_STATUS } from '../initialState';
 
 export const systemStatus = (s: GlobalState) => s.status;
 
-const sessionGroupKeys = (s: GlobalStore): string[] =>
+const sessionGroupKeys = (s: GlobalState): string[] =>
   s.status.expandSessionGroupKeys || INITIAL_STATUS.expandSessionGroupKeys;
 
-const showSystemRole = (s: GlobalStore) => s.status.showSystemRole;
-const mobileShowTopic = (s: GlobalStore) => s.status.mobileShowTopic;
-const mobileShowPortal = (s: GlobalStore) => s.status.mobileShowPortal;
-const showChatSideBar = (s: GlobalStore) => !s.status.zenMode && s.status.showChatSideBar;
-const showSessionPanel = (s: GlobalStore) => !s.status.zenMode && s.status.showSessionPanel;
-const showFilePanel = (s: GlobalStore) => s.status.showFilePanel;
-const hidePWAInstaller = (s: GlobalStore) => s.status.hidePWAInstaller;
-const isShowCredit = (s: GlobalStore) => s.status.isShowCredit;
+const showSystemRole = (s: GlobalState) => s.status.showSystemRole;
+const mobileShowTopic = (s: GlobalState) => s.status.mobileShowTopic;
+const mobileShowPortal = (s: GlobalState) => s.status.mobileShowPortal;
+const showChatSideBar = (s: GlobalState) => !s.status.zenMode && s.status.showChatSideBar;
+const showSessionPanel = (s: GlobalState) => !s.status.zenMode && s.status.showSessionPanel;
+const showFilePanel = (s: GlobalState) => s.status.showFilePanel;
+const hidePWAInstaller = (s: GlobalState) => s.status.hidePWAInstaller;
+const isShowCredit = (s: GlobalState) => s.status.isShowCredit;
+const themeMode = (s: GlobalState) => s.status.themeMode || 'auto';
 
-const showChatHeader = (s: GlobalStore) => !s.status.zenMode;
-const inZenMode = (s: GlobalStore) => s.status.zenMode;
-const sessionWidth = (s: GlobalStore) => s.status.sessionsWidth;
-const portalWidth = (s: GlobalStore) => s.status.portalWidth || 400;
-const filePanelWidth = (s: GlobalStore) => s.status.filePanelWidth;
-const inputHeight = (s: GlobalStore) => s.status.inputHeight;
-const threadInputHeight = (s: GlobalStore) => s.status.threadInputHeight;
+const showChatHeader = (s: GlobalState) => !s.status.zenMode;
+const inZenMode = (s: GlobalState) => s.status.zenMode;
+const sessionWidth = (s: GlobalState) => s.status.sessionsWidth;
+const portalWidth = (s: GlobalState) => s.status.portalWidth || 400;
+const filePanelWidth = (s: GlobalState) => s.status.filePanelWidth;
+const inputHeight = (s: GlobalState) => s.status.inputHeight;
+const threadInputHeight = (s: GlobalState) => s.status.threadInputHeight;
 
-const isPgliteNotEnabled = (s: GlobalStore) =>
+const isPgliteNotEnabled = (s: GlobalState) =>
   isUsePgliteDB && !isServerMode && s.isStatusInit && !s.status.isEnablePglite;
 
 /**
  * 当且仅当 client db 模式，且 pglite 未初始化完成时返回 true
  */
-const isPgliteNotInited = (s: GlobalStore) =>
+const isPgliteNotInited = (s: GlobalState) =>
   isUsePgliteDB &&
   s.isStatusInit &&
   s.status.isEnablePglite &&
@@ -41,14 +41,14 @@ const isPgliteNotInited = (s: GlobalStore) =>
 /**
  * 当且仅当 client db 模式，且 pglite 初始化完成时返回 true
  */
-const isPgliteInited = (s: GlobalStore): boolean =>
+const isPgliteInited = (s: GlobalState): boolean =>
   (s.isStatusInit &&
     s.status.isEnablePglite &&
     s.initClientDBStage === DatabaseLoadingState.Ready) ||
   false;
 
 // 这个变量控制 clientdb 是否完成初始化，正常来说，只有 pgliteDB 模式下，才会存在变化，其他时候都是 true
-const isDBInited = (s: GlobalStore): boolean => (isUsePgliteDB ? isPgliteInited(s) : true);
+const isDBInited = (s: GlobalState): boolean => (isUsePgliteDB ? isPgliteInited(s) : true);
 
 export const systemStatusSelectors = {
   filePanelWidth,
@@ -71,5 +71,6 @@ export const systemStatusSelectors = {
   showSessionPanel,
   showSystemRole,
   systemStatus,
+  themeMode,
   threadInputHeight,
 };

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

@@ -70,7 +70,7 @@ describe('SettingsAction', () => {
   describe('setSettings', () => {
     it('should set partial settings', async () => {
       const { result } = renderHook(() => useUserStore());
-      const partialSettings: DeepPartial<UserSettings> = { general: { themeMode: 'dark' } };
+      const partialSettings: DeepPartial<UserSettings> = { general: { fontSize: 12 } };
 
       // Perform the action
       await act(async () => {
@@ -85,24 +85,6 @@ describe('SettingsAction', () => {
     });
   });
 
-  describe('switchThemeMode', () => {
-    it('should switch theme mode', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const themeMode = 'light';
-
-      // Perform the action
-      await act(async () => {
-        await result.current.switchThemeMode(themeMode);
-      });
-
-      // Assert that updateUserSettings was called with the correct theme mode
-      expect(userService.updateUserSettings).toHaveBeenCalledWith(
-        { general: { themeMode } },
-        expect.any(AbortSignal),
-      );
-    });
-  });
-
   describe('updateDefaultAgent', () => {
     it('should update default agent settings', async () => {
       const { result } = renderHook(() => useUserStore());

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

@@ -1,4 +1,3 @@
-import { ThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { DeepPartial } from 'utility-types';
 import type { StateCreator } from 'zustand/vanilla';
@@ -24,7 +23,6 @@ export interface UserSettingsAction {
   internal_createSignal: () => AbortController;
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<UserSettings>) => 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>;
@@ -92,9 +90,6 @@ export const createSettingsSlice: StateCreator<
     await userService.updateUserSettings(diffs, abortController.signal);
     await get().refreshUserState();
   },
-  switchThemeMode: async (themeMode) => {
-    await get().updateGeneralConfig({ themeMode });
-  },
   updateDefaultAgent: async (defaultAgent) => {
     await get().setSettings({ defaultAgent });
   },

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

@@ -5,27 +5,17 @@ import { merge } from '@/utils/merge';
 import { userGeneralSettingsSelectors } from './general';
 
 describe('settingsSelectors', () => {
-  describe('currentThemeMode', () => {
-    it('should return the correct theme', () => {
+  describe('fontSize', () => {
+    it('should return the fontSize', () => {
       const s: UserState = merge(initialState, {
         settings: {
-          general: { themeMode: 'light' },
+          general: { fontSize: 12 },
         },
       });
 
-      const result = userGeneralSettingsSelectors.currentThemeMode(s as UserStore);
+      const result = userGeneralSettingsSelectors.fontSize(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');
+      expect(result).toBe(12);
     });
   });
 });

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

@@ -3,18 +3,12 @@ import { currentSettings } from './settings';
 
 const generalConfig = (s: UserStore) => currentSettings(s).general || {};
 
-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;
 
 export const userGeneralSettingsSelectors = {
   config: generalConfig,
-  currentThemeMode,
   fontSize,
   neutralColor,
   primaryColor,

package/src/types/user/settings/general.ts

@@ -1,9 +1,7 @@
 import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
-import type { ThemeMode } from 'antd-style';
 
 export interface UserGeneralConfig {
   fontSize: number;
   neutralColor?: NeutralColors;
   primaryColor?: PrimaryColors;
-  themeMode: ThemeMode;
 }