@lobehub/chat 0.122.1 → 0.122.3

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

@@ -1,4 +1,3 @@
 export * from './useEffectAfterHydrated';
-export * from './useHydrated';
 export * from './useOnFinishHydrationGlobal';
 export * from './useSwitchSideBarOnInit';

package/src/store/global/initialState.ts

@@ -1,11 +1,13 @@
 import { GlobalCommonState, initialCommonState } from './slices/common/initialState';
+import { GlobalPreferenceState, initialPreferenceState } from './slices/preference/initialState';
 import { GlobalSettingsState, initialSettingsState } from './slices/settings/initialState';
 
 export { SettingsTabs, SidebarTabKey } from './slices/common/initialState';
 
-export type GlobalState = GlobalCommonState & GlobalSettingsState;
+export type GlobalState = GlobalCommonState & GlobalSettingsState & GlobalPreferenceState;
 
 export const initialState: GlobalState = {
   ...initialCommonState,
   ...initialSettingsState,
+  ...initialPreferenceState,
 };

package/src/store/global/selectors.ts

@@ -1,2 +1,3 @@
 export * from './slices/common/selectors';
+export * from './slices/preference/selectors';
 export * from './slices/settings/selectors';

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

@@ -4,7 +4,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { globalService } from '@/services/global';
 import { useGlobalStore } from '@/store/global';
-import { type Guide, SidebarTabKey } from '@/store/global/slices/common/initialState';
+
+import { SidebarTabKey } from './initialState';
 
 // Mock globalService
 vi.mock('@/services/global', () => ({
@@ -49,82 +50,4 @@ describe('createCommonSlice', () => {
       expect(result.current.sidebarKey).toEqual(SidebarTabKey.Market);
     });
   });
-
-  describe('toggleChatSideBar', () => {
-    it('should toggle chat sidebar', () => {
-      const { result } = renderHook(() => useGlobalStore());
-
-      act(() => {
-        useGlobalStore.getState().updatePreference({ showChatSideBar: false });
-        result.current.toggleChatSideBar();
-      });
-
-      expect(result.current.preference.showChatSideBar).toBe(true);
-    });
-
-    // Add more tests for other actions in createCommonSlice
-  });
-
-  describe('toggleExpandSessionGroup', () => {
-    it('should toggle expand session group', () => {
-      const { result } = renderHook(() => useGlobalStore());
-      const groupId = 'group-id';
-
-      act(() => {
-        result.current.toggleExpandSessionGroup(groupId, true);
-      });
-
-      expect(result.current.preference.expandSessionGroupKeys).toContain(groupId);
-    });
-  });
-
-  describe('toggleMobileTopic', () => {
-    it('should toggle mobile topic', () => {
-      const { result } = renderHook(() => useGlobalStore());
-
-      act(() => {
-        result.current.toggleMobileTopic();
-      });
-
-      expect(result.current.preference.mobileShowTopic).toBe(true);
-    });
-  });
-
-  describe('toggleSystemRole', () => {
-    it('should toggle system role', () => {
-      const { result } = renderHook(() => useGlobalStore());
-
-      act(() => {
-        result.current.toggleSystemRole(true);
-      });
-
-      expect(result.current.preference.showSystemRole).toBe(true);
-    });
-  });
-
-  describe('updateGuideState', () => {
-    it('should update guide state', () => {
-      const { result } = renderHook(() => useGlobalStore());
-      const guide: Guide = { topic: true };
-
-      act(() => {
-        result.current.updateGuideState(guide);
-      });
-
-      expect(result.current.preference.guide).toEqual(guide);
-    });
-  });
-
-  describe('updatePreference', () => {
-    it('should update preference', () => {
-      const { result } = renderHook(() => useGlobalStore());
-      const preference = { inputHeight: 200 };
-
-      act(() => {
-        result.current.updatePreference(preference);
-      });
-
-      expect(result.current.preference.inputHeight).toEqual(200);
-    });
-  });
 });

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

@@ -1,97 +1,54 @@
-import { produce } from 'immer';
 import { gt } from 'semver';
-import useSWR, { SWRResponse } from 'swr';
+import useSWR, { SWRResponse, mutate } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { CURRENT_VERSION } from '@/const/version';
 import { globalService } from '@/services/global';
+import { UserConfig, userService } from '@/services/user';
 import type { GlobalStore } from '@/store/global';
 import type { GlobalServerConfig } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { GlobalCommonState, GlobalPreference, Guide, SidebarTabKey } from './initialState';
+import type { SidebarTabKey } from './initialState';
 
-const n = setNamespace('settings');
+const n = setNamespace('common');
 
 /**
  * 设置操作
  */
 export interface CommonAction {
+  refreshUserConfig: () => Promise<void>;
   switchBackToChat: (sessionId?: string) => void;
-  /**
-   * 切换侧边栏选项
-   * @param key - 选中的侧边栏选项
-   */
   switchSideBar: (key: SidebarTabKey) => void;
-  toggleChatSideBar: (visible?: boolean) => void;
-  toggleExpandSessionGroup: (id: string, expand: boolean) => void;
-  toggleMobileTopic: (visible?: boolean) => void;
-  toggleSystemRole: (visible?: boolean) => void;
-  updateGuideState: (guide: Partial<Guide>) => void;
-  updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
+  updateAvatar: (avatar: string) => Promise<void>;
   useCheckLatestVersion: () => SWRResponse<string>;
-  useFetchGlobalConfig: () => SWRResponse;
+  useFetchServerConfig: () => SWRResponse;
+  useFetchUserConfig: (initServer: boolean) => SWRResponse<UserConfig | undefined>;
 }
 
+const USER_CONFIG_FETCH_KEY = 'fetchUserConfig';
+
 export const createCommonSlice: StateCreator<
   GlobalStore,
   [['zustand/devtools', never]],
   [],
   CommonAction
 > = (set, get) => ({
+  refreshUserConfig: async () => {
+    await mutate([USER_CONFIG_FETCH_KEY, true]);
+  },
   switchBackToChat: (sessionId) => {
     get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
   },
   switchSideBar: (key) => {
     set({ sidebarKey: key }, false, n('switchSideBar', key));
   },
-  toggleChatSideBar: (newValue) => {
-    const showChatSideBar =
-      typeof newValue === 'boolean' ? newValue : !get().preference.showChatSideBar;
-
-    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue) as string);
-  },
-  toggleExpandSessionGroup: (id, expand) => {
-    const { preference } = get();
-    const nextExpandSessionGroup = produce(preference.expandSessionGroupKeys, (draft) => {
-      if (expand) {
-        if (draft.includes(id)) return;
-        draft.push(id);
-      } else {
-        const index = draft.indexOf(id);
-        if (index !== -1) draft.splice(index, 1);
-      }
-    });
-    get().updatePreference({ expandSessionGroupKeys: nextExpandSessionGroup });
-  },
-  toggleMobileTopic: (newValue) => {
-    const mobileShowTopic =
-      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
-
-    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue) as string);
-  },
-  toggleSystemRole: (newValue) => {
-    const showSystemRole =
-      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
-
-    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue) as string);
-  },
-  updateGuideState: (guide) => {
-    const { updatePreference } = get();
-    const nextGuide = merge(get().preference.guide, guide);
-    updatePreference({ guide: nextGuide });
-  },
-  updatePreference: (preference, action) => {
-    set(
-      produce((draft: GlobalCommonState) => {
-        draft.preference = merge(draft.preference, preference);
-      }),
-      false,
-      action,
-    );
+  updateAvatar: async (avatar) => {
+    await userService.updateAvatar(avatar);
+    await get().refreshUserConfig();
   },
   useCheckLatestVersion: () =>
     useSWR('checkLatestVersion', globalService.getLatestVersion, {
@@ -102,11 +59,30 @@ export const createCommonSlice: StateCreator<
           set({ hasNewVersion: true, latestVersion: data }, false, n('checkLatestVersion'));
       },
     }),
-  useFetchGlobalConfig: () =>
+  useFetchServerConfig: () =>
     useSWR<GlobalServerConfig>('fetchGlobalConfig', globalService.getGlobalConfig, {
       onSuccess: (data) => {
-        if (data) set({ serverConfig: data });
+        if (data) {
+          const defaultSettings = merge(get().defaultSettings, { defaultAgent: data.defaultAgent });
+          set({ defaultSettings, serverConfig: data }, false, n('initGlobalConfig'));
+        }
       },
       revalidateOnFocus: false,
     }),
+  useFetchUserConfig: (initServer) =>
+    useSWR<UserConfig | undefined>(
+      [USER_CONFIG_FETCH_KEY, initServer],
+      async () => {
+        if (!initServer) return;
+        return userService.getUserConfig();
+      },
+      {
+        onSuccess: (data) => {
+          if (!data) return;
+
+          set({ avatar: data.avatar, settings: data.settings }, false, n('fetchUserConfig', data));
+        },
+        revalidateOnFocus: false,
+      },
+    ),
 });

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

@@ -1,6 +1,5 @@
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
-import { SessionDefaultGroup, SessionGroupId } from '@/types/session';
 
 export enum SidebarTabKey {
   Chat = 'chat',
@@ -20,32 +19,10 @@ export interface Guide {
   topic?: boolean;
 }
 
-export interface GlobalPreference {
-  // which sessionGroup should expand
-  expandSessionGroupKeys: SessionGroupId[];
-  guide?: Guide;
-  inputHeight: number;
-  mobileShowTopic?: boolean;
-  sessionsWidth: number;
-
-  showChatSideBar?: boolean;
-  showSessionPanel?: boolean;
-  showSystemRole?: boolean;
-  /**
-   * whether to use cmd + enter to send message
-   */
-  useCmdEnterToSend?: boolean;
-}
-
 export interface GlobalCommonState {
   hasNewVersion?: boolean;
   isMobile?: boolean;
   latestVersion?: string;
-  /**
-   *  用户偏好的 UI 状态
-   *  @localStorage
-   */
-  preference: GlobalPreference;
   router?: AppRouterInstance;
   settingsTab: SettingsTabs;
   sidebarKey: SidebarTabKey;
@@ -53,17 +30,6 @@ export interface GlobalCommonState {
 
 export const initialCommonState: GlobalCommonState = {
   isMobile: false,
-  preference: {
-    expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
-    guide: {},
-    inputHeight: 200,
-    mobileShowTopic: false,
-    sessionsWidth: 320,
-    showChatSideBar: true,
-    showSessionPanel: true,
-    showSystemRole: false,
-    useCmdEnterToSend: false,
-  },
   settingsTab: SettingsTabs.Common,
   sidebarKey: SidebarTabKey.Chat,
 };

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

@@ -1,10 +1,5 @@
 import { GlobalStore } from '@/store/global';
 
-const sessionGroupKeys = (s: GlobalStore): string[] => s.preference.expandSessionGroupKeys || [];
-
-const useCmdEnterToSend = (s: GlobalStore): boolean => s.preference.useCmdEnterToSend || false;
-
-export const preferenceSelectors = {
-  sessionGroupKeys,
-  useCmdEnterToSend,
+export const commonSelectors = {
+  userAvatar: (s: GlobalStore) => s.avatar || '',
 };

package/src/store/global/slices/preference/action.test.ts

@@ -0,0 +1,92 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useGlobalStore } from '@/store/global';
+
+import { type Guide } from './initialState';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('createPreferenceSlice', () => {
+  describe('toggleChatSideBar', () => {
+    it('should toggle chat sidebar', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        useGlobalStore.getState().updatePreference({ showChatSideBar: false });
+        result.current.toggleChatSideBar();
+      });
+
+      expect(result.current.preference.showChatSideBar).toBe(true);
+    });
+  });
+
+  describe('toggleExpandSessionGroup', () => {
+    it('should toggle expand session group', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const groupId = 'group-id';
+
+      act(() => {
+        result.current.toggleExpandSessionGroup(groupId, true);
+      });
+
+      expect(result.current.preference.expandSessionGroupKeys).toContain(groupId);
+    });
+  });
+
+  describe('toggleMobileTopic', () => {
+    it('should toggle mobile topic', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.toggleMobileTopic();
+      });
+
+      expect(result.current.preference.mobileShowTopic).toBe(true);
+    });
+  });
+
+  describe('toggleSystemRole', () => {
+    it('should toggle system role', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.toggleSystemRole(true);
+      });
+
+      expect(result.current.preference.showSystemRole).toBe(true);
+    });
+  });
+
+  describe('updateGuideState', () => {
+    it('should update guide state', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const guide: Guide = { topic: true };
+
+      act(() => {
+        result.current.updateGuideState(guide);
+      });
+
+      expect(result.current.preference.guide).toEqual(guide);
+    });
+  });
+
+  describe('updatePreference', () => {
+    it('should update preference', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const preference = { inputHeight: 200 };
+
+      act(() => {
+        result.current.updatePreference(preference);
+      });
+
+      expect(result.current.preference.inputHeight).toEqual(200);
+    });
+  });
+});

package/src/store/global/slices/preference/action.ts

@@ -0,0 +1,75 @@
+import { produce } from 'immer';
+import type { StateCreator } from 'zustand/vanilla';
+
+import type { GlobalStore } from '@/store/global';
+import { merge } from '@/utils/merge';
+import { setNamespace } from '@/utils/storeDebug';
+
+import type { GlobalPreference, GlobalPreferenceState, Guide } from './initialState';
+
+const n = setNamespace('preference');
+
+/**
+ * 设置操作
+ */
+export interface PreferenceAction {
+  toggleChatSideBar: (visible?: boolean) => void;
+  toggleExpandSessionGroup: (id: string, expand: boolean) => void;
+  toggleMobileTopic: (visible?: boolean) => void;
+  toggleSystemRole: (visible?: boolean) => void;
+  updateGuideState: (guide: Partial<Guide>) => void;
+  updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
+}
+
+export const createPreferenceSlice: StateCreator<
+  GlobalStore,
+  [['zustand/devtools', never]],
+  [],
+  PreferenceAction
+> = (set, get) => ({
+  toggleChatSideBar: (newValue) => {
+    const showChatSideBar =
+      typeof newValue === 'boolean' ? newValue : !get().preference.showChatSideBar;
+
+    get().updatePreference({ showChatSideBar }, n('toggleAgentPanel', newValue) as string);
+  },
+  toggleExpandSessionGroup: (id, expand) => {
+    const { preference } = get();
+    const nextExpandSessionGroup = produce(preference.expandSessionGroupKeys, (draft) => {
+      if (expand) {
+        if (draft.includes(id)) return;
+        draft.push(id);
+      } else {
+        const index = draft.indexOf(id);
+        if (index !== -1) draft.splice(index, 1);
+      }
+    });
+    get().updatePreference({ expandSessionGroupKeys: nextExpandSessionGroup });
+  },
+  toggleMobileTopic: (newValue) => {
+    const mobileShowTopic =
+      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+
+    get().updatePreference({ mobileShowTopic }, n('toggleMobileTopic', newValue) as string);
+  },
+  toggleSystemRole: (newValue) => {
+    const showSystemRole =
+      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+
+    get().updatePreference({ showSystemRole }, n('toggleMobileTopic', newValue) as string);
+  },
+  updateGuideState: (guide) => {
+    const { updatePreference } = get();
+    const nextGuide = merge(get().preference.guide, guide);
+    updatePreference({ guide: nextGuide });
+  },
+  updatePreference: (preference, action) => {
+    set(
+      produce((draft: GlobalPreferenceState) => {
+        draft.preference = merge(draft.preference, preference);
+      }),
+      false,
+      action,
+    );
+  },
+});

package/src/store/global/slices/preference/initialState.ts

@@ -0,0 +1,45 @@
+import { SessionDefaultGroup, SessionGroupId } from '@/types/session';
+
+export interface Guide {
+  // Topic 引导
+  topic?: boolean;
+}
+
+export interface GlobalPreference {
+  // which sessionGroup should expand
+  expandSessionGroupKeys: SessionGroupId[];
+  guide?: Guide;
+  inputHeight: number;
+  mobileShowTopic?: boolean;
+  sessionsWidth: number;
+
+  showChatSideBar?: boolean;
+  showSessionPanel?: boolean;
+  showSystemRole?: boolean;
+  /**
+   * whether to use cmd + enter to send message
+   */
+  useCmdEnterToSend?: boolean;
+}
+
+export interface GlobalPreferenceState {
+  /**
+   *  用户偏好的 UI 状态
+   *  @localStorage
+   */
+  preference: GlobalPreference;
+}
+
+export const initialPreferenceState: GlobalPreferenceState = {
+  preference: {
+    expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
+    guide: {},
+    inputHeight: 200,
+    mobileShowTopic: false,
+    sessionsWidth: 320,
+    showChatSideBar: true,
+    showSessionPanel: true,
+    showSystemRole: false,
+    useCmdEnterToSend: false,
+  },
+};

package/src/store/global/slices/preference/selectors.ts

@@ -0,0 +1,10 @@
+import { GlobalStore } from '@/store/global';
+
+const sessionGroupKeys = (s: GlobalStore): string[] => s.preference.expandSessionGroupKeys || [];
+
+const useCmdEnterToSend = (s: GlobalStore): boolean => s.preference.useCmdEnterToSend || false;
+
+export const preferenceSelectors = {
+  sessionGroupKeys,
+  useCmdEnterToSend,
+};