🐛 fix: fix avatar missing on client DB mode (lobehub#2645)

* 🐛 fix: fix avatar missing

* 🐛 fix: fix user avatar

* ♻️ refactor: refactor to remove deprecated userId and avatar field

* ✅ test: improve test

src/database/client/models/__tests__/sessionGroup.test.ts

@@ -6,6 +6,8 @@ import { SessionGroups } from '@/types/session';
 import { DB_SessionGroup } from '../../schemas/sessionGroup';
 import { SessionGroupModel } from '../sessionGroup';
 
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 describe('SessionGroupModel', () => {
   let sessionGroupData: DB_SessionGroup;
 
@@ -135,9 +137,14 @@ describe('SessionGroupModel', () => {
 
     it('should return session groups sorted by sort field first and then by createdAt', async () => {
       const group0 = await SessionGroupModel.create('group0');
+      await sleep(10);
       const group1 = await SessionGroupModel.create('group1', 1);
+      await sleep(10);
       const group2 = await SessionGroupModel.create('group2');
+      await sleep(10);
       const group3 = await SessionGroupModel.create('group3', 2);
+      await sleep(10);
+
       const fetchedGroups = await SessionGroupModel.query();
       expect(fetchedGroups[0].id).toEqual(group1.id);
       expect(fetchedGroups[1].id).toEqual(group3.id);

src/hooks/useSyncData.ts

@@ -4,7 +4,7 @@ import { useChatStore } from '@/store/chat';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
-import { syncSettingsSelectors } from '@/store/user/selectors';
+import { syncSettingsSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 export const useSyncEvent = () => {
   const [refreshMessages, refreshTopic] = useChatStore((s) => [s.refreshMessages, s.refreshTopic]);
@@ -38,7 +38,7 @@ export const useSyncEvent = () => {
 
 export const useEnabledDataSync = () => {
   const [userId, userEnableSync, useEnabledSync] = useUserStore((s) => [
-    s.userId,
+    userProfileSelectors.userId(s),
     syncSettingsSelectors.enableWebRTC(s),
     s.useEnabledSync,
   ]);

src/layout/AuthProvider/Clerk/UserUpdater.tsx

@@ -27,7 +27,6 @@ const UserUpdater = memo(() => {
   useStoreUpdater('isLoaded', isLoaded);
   useStoreUpdater('user', lobeUser);
   useStoreUpdater('isSignedIn', isSignedIn);
-  useStoreUpdater('userId', user?.id);
 
   useStoreUpdater('clerkUser', user);
   useStoreUpdater('clerkSession', session);

src/store/user/slices/auth/initialState.ts

@@ -10,11 +10,6 @@ import {
 import { LobeUser } from '@/types/user';
 
 export interface UserAuthState {
-  /**
-   * 未来收到 user.avatar 中
-   * @deprecated
-   */
-  avatar?: string;
   clerkOpenUserProfile?: (props?: UserProfileProps) => void;
 
   clerkSession?: ActiveSessionResource;
@@ -28,7 +23,6 @@ export interface UserAuthState {
   nextSession?: Session;
   nextUser?: User;
   user?: LobeUser;
-  userId?: string;
 }
 
 export const initialAuthState: UserAuthState = {};

src/store/user/slices/auth/selectors.ts

@@ -24,8 +24,8 @@ const username = (s: UserStore) => {
 
 export const userProfileSelectors = {
   nickName,
-  userAvatar: (s: UserStore): string => s.user?.avatar || s.avatar || '',
-  userId: (s: UserStore) => s.userId,
+  userAvatar: (s: UserStore): string => s.user?.avatar || '',
+  userId: (s: UserStore) => s.user?.id,
   userProfile: (s: UserStore): LobeUser | null | undefined => s.user,
   username,
 };

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

@@ -105,7 +105,7 @@ describe('createCommonSlice', () => {
       await waitFor(() => expect(result.current.data).toEqual(mockUserState));
 
       // 验证状态是否正确更新
-      expect(useUserStore.getState().avatar).toBe(mockUserState.avatar);
+      expect(useUserStore.getState().user?.avatar).toBe(mockUserState.avatar);
       expect(useUserStore.getState().settings).toEqual(mockUserState.settings);
       expect(successCallback).toHaveBeenCalledWith(mockUserState);
 
@@ -183,13 +183,14 @@ describe('createCommonSlice', () => {
       });
     });
 
-    it('should handle the case when user config is null', async () => {
+    it('should handle the case when user state have avatar', async () => {
       const { result } = renderHook(() => useUserStore());
       const mockUserState: UserInitializationState = {
         userId: 'user-id',
         isOnboard: true,
         preference: undefined as any,
         settings: null as any,
+        avatar: 'abc',
       };
 
       vi.spyOn(userService, 'getUserState').mockResolvedValueOnce(mockUserState);
@@ -202,7 +203,7 @@ describe('createCommonSlice', () => {
       await waitFor(() => {
         expect(result.current.isUserStateInit).toBeTruthy();
         // 验证状态未被错误更新
-        expect(result.current.avatar).toBeUndefined();
+        expect(result.current.user?.avatar).toEqual('abc');
         expect(result.current.settings).toEqual({});
       });
     });

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

@@ -88,6 +88,12 @@ export const createCommonSlice: StateCreator<
             const isEmpty = Object.keys(data.preference || {}).length === 0;
             const preference = isEmpty ? DEFAULT_PREFERENCE : data.preference;
 
+            // if there is avatar or userId (from client DB), update it into user
+            const user =
+              data.avatar || data.userId
+                ? merge(get().user, { avatar: data.avatar, id: data.userId })
+                : get().user;
+
             set(
               {
                 defaultSettings,
@@ -97,11 +103,10 @@ export const createCommonSlice: StateCreator<
                 isUserCanEnableTrace: data.canEnableTrace,
                 isUserHasConversation: data.hasConversation,
                 isUserStateInit: true,
-
                 preference,
                 serverLanguageModel: serverConfig.languageModel,
                 settings: data.settings || {},
-                userId: data.userId,
+                user,
               },
               false,
               n('initUserState'),

src/types/user/index.ts

@@ -40,5 +40,5 @@ export interface UserInitializationState {
   isOnboard?: boolean;
   preference: UserPreference;
   settings: DeepPartial<GlobalSettings>;
-  userId: string;
+  userId?: string;
 }