@lobehub/chat 0.152.6 → 0.152.8

package/src/layout/GlobalProvider/index.tsx

@@ -13,6 +13,7 @@ import {
 import { getServerGlobalConfig } from '@/server/globalConfig';
 import { ServerConfigStoreProvider } from '@/store/serverConfig';
 import { getAntdLocale } from '@/utils/locale';
+import { isMobileDevice } from '@/utils/responsive';
 
 import AppTheme from './AppTheme';
 import Locale from './Locale';
@@ -48,6 +49,7 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = getServerGlobalConfig();
+  const isMobile = isMobileDevice();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={defaultLang?.value}>
@@ -57,7 +59,11 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
           defaultPrimaryColor={primaryColor?.value as any}
         >
           <StoreInitialization />
-          <ServerConfigStoreProvider featureFlags={serverFeatureFlags} serverConfig={serverConfig}>
+          <ServerConfigStoreProvider
+            featureFlags={serverFeatureFlags}
+            isMobile={isMobile}
+            serverConfig={serverConfig}
+          >
             {children}
           </ServerConfigStoreProvider>
           <DebugUI />

package/src/locales/default/common.ts

@@ -133,6 +133,7 @@ export default {
   tab: {
     chat: '会话',
     market: '发现',
+    me: '我',
     setting: '设置',
   },
   telemetry: {

package/src/locales/default/setting.ts

@@ -27,9 +27,12 @@ export default {
     },
   },
   header: {
+    desc: '偏好与模型设置',
     global: '全局设置',
     session: '会话设置',
+    sessionDesc: '角色设定与会话偏好',
     sessionWithName: '会话设置 · {{name}}',
+    title: '设置',
   },
   llm: {
     checker: {

package/src/services/chat.ts

@@ -15,10 +15,10 @@ import { useToolStore } from '@/store/tool';
 import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
 import { useUserStore } from '@/store/user';
 import {
-  commonSelectors,
   modelConfigSelectors,
   modelProviderSelectors,
   preferenceSelectors,
+  userProfileSelectors,
 } from '@/store/user/selectors';
 import { ChatErrorType } from '@/types/fetch';
 import { ChatMessage } from '@/types/message';
@@ -482,7 +482,7 @@ class ChatService {
       ...trace,
       enabled: true,
       tags: [tag, ...(trace?.tags || []), ...tags].filter(Boolean) as string[],
-      userId: commonSelectors.userId(useUserStore.getState()),
+      userId: userProfileSelectors.userId(useUserStore.getState()),
     };
   }
 

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

@@ -8,7 +8,7 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { ChatMessage } from '@/types/message';
 import { MetaData } from '@/types/meta';
 import { merge } from '@/utils/merge';
@@ -20,7 +20,7 @@ const getMeta = (message: ChatMessage) => {
   switch (message.role) {
     case 'user': {
       return {
-        avatar: commonSelectors.userAvatar(useUserStore.getState()) || DEFAULT_USER_AVATAR,
+        avatar: userProfileSelectors.userAvatar(useUserStore.getState()) || DEFAULT_USER_AVATAR,
       };
     }
 

package/src/store/global/initialState.ts

@@ -6,6 +6,7 @@ import { AsyncLocalStorage } from '@/utils/localStorage';
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
+  Me = 'me',
   Setting = 'settings',
 }
 

package/src/store/serverConfig/Provider.tsx

@@ -10,12 +10,13 @@ import { Provider, createServerConfigStore } from './store';
 interface GlobalStoreProviderProps {
   children: ReactNode;
   featureFlags?: Partial<IFeatureFlags>;
+  isMobile?: boolean;
   serverConfig?: GlobalServerConfig;
 }
 
 export const ServerConfigStoreProvider = memo<GlobalStoreProviderProps>(
-  ({ children, featureFlags, serverConfig }) => (
-    <Provider createStore={() => createServerConfigStore({ featureFlags, serverConfig })}>
+  ({ children, featureFlags, serverConfig, isMobile }) => (
+    <Provider createStore={() => createServerConfigStore({ featureFlags, isMobile, serverConfig })}>
       {children}
     </Provider>
   ),

package/src/store/serverConfig/selectors.ts

@@ -8,4 +8,5 @@ export const featureFlagsSelectors = (s: ServerConfigStore) =>
 export const serverConfigSelectors = {
   enabledOAuthSSO: (s: ServerConfigStore) => s.serverConfig.enabledOAuthSSO,
   enabledTelemetryChat: (s: ServerConfigStore) => s.serverConfig.telemetry.langfuse || false,
+  isMobile: (s: ServerConfigStore) => s.isMobile || false,
 };

package/src/store/serverConfig/store.ts

@@ -20,6 +20,7 @@ const initialState: ServerConfigStore = {
 
 export interface ServerConfigStore {
   featureFlags: IFeatureFlags;
+  isMobile?: boolean;
   serverConfig: GlobalServerConfig;
 }
 

package/src/store/user/initialState.ts

@@ -1,11 +1,13 @@
-import { UserCommonState, initialCommonState } from './slices/common/initialState';
+import { UserAuthState, initialAuthState } from './slices/auth/initialState';
 import { UserPreferenceState, initialPreferenceState } from './slices/preference/initialState';
 import { UserSettingsState, initialSettingsState } from './slices/settings/initialState';
+import { UserSyncState, initialSyncState } from './slices/sync/initialState';
 
-export type UserState = UserCommonState & UserSettingsState & UserPreferenceState;
+export type UserState = UserSyncState & UserSettingsState & UserPreferenceState & UserAuthState;
 
 export const initialState: UserState = {
-  ...initialCommonState,
+  ...initialSyncState,
   ...initialSettingsState,
   ...initialPreferenceState,
+  ...initialAuthState,
 };

package/src/store/user/selectors.ts

@@ -1,4 +1,4 @@
-export { commonSelectors } from './slices/common/selectors';
+export { userProfileSelectors } from './slices/auth/selectors';
 export { preferenceSelectors } from './slices/preference/selectors';
 export {
   modelConfigSelectors,

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

@@ -0,0 +1,118 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { mutate } from 'swr';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { withSWR } from '~test-utils';
+
+import { userService } from '@/services/user';
+import { useUserStore } from '@/store/user';
+import { switchLang } from '@/utils/client/switchLang';
+
+vi.mock('zustand/traditional');
+
+vi.mock('@/utils/client/switchLang', () => ({
+  switchLang: vi.fn(),
+}));
+
+vi.mock('swr', async (importOriginal) => {
+  const modules = await importOriginal();
+  return {
+    ...(modules as any),
+    mutate: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('createAuthSlice', () => {
+  describe('refreshUserConfig', () => {
+    it('should refresh user config', async () => {
+      const { result } = renderHook(() => useUserStore());
+
+      await act(async () => {
+        await result.current.refreshUserConfig();
+      });
+
+      expect(mutate).toHaveBeenCalledWith(['fetchUserConfig', true]);
+    });
+  });
+
+  describe('useFetchUserConfig', () => {
+    it('should not fetch user config if initServer is false', async () => {
+      const mockUserConfig: any = undefined; // 模拟未初始化服务器的情况
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(false), {
+        wrapper: withSWR,
+      });
+
+      // 因为 initServer 为 false，所以不会触发 getUserConfig 的调用
+      expect(userService.getUserConfig).not.toHaveBeenCalled();
+      // 确保状态未改变
+      expect(result.current.data).toBeUndefined();
+    });
+
+    it('should fetch user config correctly when initServer is true', async () => {
+      const mockUserConfig: any = {
+        avatar: 'new-avatar-url',
+        settings: {
+          language: 'en',
+        },
+      };
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
+        wrapper: withSWR,
+      });
+
+      // 等待 SWR 完成数据获取
+      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
+
+      // 验证状态是否正确更新
+      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
+      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
+
+      // 验证是否正确处理了语言设置
+      expect(switchLang).not.toHaveBeenCalledWith('auto');
+    });
+    it('should call switch language when language is auto', async () => {
+      const mockUserConfig: any = {
+        avatar: 'new-avatar-url',
+        settings: {
+          language: 'auto',
+        },
+      };
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
+        wrapper: withSWR,
+      });
+
+      // 等待 SWR 完成数据获取
+      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
+
+      // 验证状态是否正确更新
+      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
+      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
+
+      // 验证是否正确处理了语言设置
+      expect(switchLang).toHaveBeenCalledWith('auto');
+    });
+
+    it('should handle the case when user config is null', async () => {
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(null as any);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
+        wrapper: withSWR,
+      });
+
+      // 等待 SWR 完成数据获取
+      await waitFor(() => expect(result.current.data).toBeNull());
+
+      // 验证状态未被错误更新
+      expect(useUserStore.getState().avatar).toBeUndefined();
+      expect(useUserStore.getState().settings).toEqual({});
+    });
+  });
+});

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

@@ -0,0 +1,81 @@
+import useSWR, { SWRResponse, mutate } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { UserConfig, userService } from '@/services/user';
+import { switchLang } from '@/utils/client/switchLang';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { UserStore } from '../../store';
+import { settingsSelectors } from '../settings/selectors';
+
+const n = setNamespace('auth');
+const USER_CONFIG_FETCH_KEY = 'fetchUserConfig';
+
+export interface UserAuthAction {
+  getUserConfig: () => void;
+  /**
+   * universal login method
+   */
+  login: () => Promise<void>;
+  /**
+   * universal logout method
+   */
+  logout: () => Promise<void>;
+  refreshUserConfig: () => Promise<void>;
+
+  useFetchUserConfig: (initServer: boolean) => SWRResponse<UserConfig | undefined>;
+}
+
+export const createAuthSlice: StateCreator<
+  UserStore,
+  [['zustand/devtools', never]],
+  [],
+  UserAuthAction
+> = (set, get) => ({
+  getUserConfig: () => {
+    console.log(n('userconfig'));
+  },
+  login: async () => {
+    // TODO: 针对开启 next-auth 的场景，需要在这里调用登录方法
+    console.log(n('login'));
+  },
+  logout: async () => {
+    // TODO: 针对开启 next-auth 的场景，需要在这里调用登录方法
+    console.log(n('logout'));
+  },
+  refreshUserConfig: async () => {
+    await mutate([USER_CONFIG_FETCH_KEY, true]);
+
+    // when get the user config ,refresh the model provider list to the latest
+    get().refreshModelProviderList();
+  },
+
+  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, userId: data.uuid },
+            false,
+            n('fetchUserConfig', data),
+          );
+
+          // when get the user config ,refresh the model provider list to the latest
+          get().refreshDefaultModelProviderList({ trigger: 'fetchUserConfig' });
+
+          const { language } = settingsSelectors.currentSettings(get());
+          if (language === 'auto') {
+            switchLang('auto');
+          }
+        },
+        revalidateOnFocus: false,
+      },
+    ),
+});

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

@@ -0,0 +1,20 @@
+export interface LobeUser {
+  avatar?: string;
+  firstName?: string | null;
+  fullName?: string | null;
+  id: string;
+  latestName?: string | null;
+  username?: string | null;
+}
+
+export interface UserAuthState {
+  /**
+   * @deprecated
+   */
+  avatar?: string;
+  isSignedIn?: boolean;
+  user?: LobeUser;
+  userId?: string;
+}
+
+export const initialAuthState: UserAuthState = {};

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

@@ -0,0 +1,6 @@
+import { UserStore } from '@/store/user';
+
+export const userProfileSelectors = {
+  userAvatar: (s: UserStore): string => s.avatar || '',
+  userId: (s: UserStore) => s.userId,
+};

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

@@ -7,18 +7,11 @@ import { globalService } from '@/services/global';
 import { messageService } from '@/services/message';
 import { userService } from '@/services/user';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/slices/common/selectors';
-import { preferenceSelectors } from '@/store/user/slices/preference/selectors';
-import { syncSettingsSelectors } from '@/store/user/slices/settings/selectors';
+import { preferenceSelectors } from '@/store/user/selectors';
 import { GlobalServerConfig } from '@/types/serverConfig';
-import { switchLang } from '@/utils/client/switchLang';
 
 vi.mock('zustand/traditional');
 
-vi.mock('@/utils/client/switchLang', () => ({
-  switchLang: vi.fn(),
-}));
-
 vi.mock('swr', async (importOriginal) => {
   const modules = await importOriginal();
   return {
@@ -32,18 +25,6 @@ afterEach(() => {
 });
 
 describe('createCommonSlice', () => {
-  describe('refreshUserConfig', () => {
-    it('should refresh user config', async () => {
-      const { result } = renderHook(() => useUserStore());
-
-      await act(async () => {
-        await result.current.refreshUserConfig();
-      });
-
-      expect(mutate).toHaveBeenCalledWith(['fetchUserConfig', true]);
-    });
-  });
-
   describe('updateAvatar', () => {
     it('should update avatar', async () => {
       const { result } = renderHook(() => useUserStore());
@@ -76,167 +57,6 @@ describe('createCommonSlice', () => {
     });
   });
 
-  describe('useFetchUserConfig', () => {
-    it('should not fetch user config if initServer is false', async () => {
-      const mockUserConfig: any = undefined; // 模拟未初始化服务器的情况
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(false), {
-        wrapper: withSWR,
-      });
-
-      // 因为 initServer 为 false，所以不会触发 getUserConfig 的调用
-      expect(userService.getUserConfig).not.toHaveBeenCalled();
-      // 确保状态未改变
-      expect(result.current.data).toBeUndefined();
-    });
-
-    it('should fetch user config correctly when initServer is true', async () => {
-      const mockUserConfig: any = {
-        avatar: 'new-avatar-url',
-        settings: {
-          language: 'en',
-        },
-      };
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
-        wrapper: withSWR,
-      });
-
-      // 等待 SWR 完成数据获取
-      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
-
-      // 验证状态是否正确更新
-      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
-      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
-
-      // 验证是否正确处理了语言设置
-      expect(switchLang).not.toHaveBeenCalledWith('auto');
-    });
-    it('should call switch language when language is auto', async () => {
-      const mockUserConfig: any = {
-        avatar: 'new-avatar-url',
-        settings: {
-          language: 'auto',
-        },
-      };
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
-        wrapper: withSWR,
-      });
-
-      // 等待 SWR 完成数据获取
-      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
-
-      // 验证状态是否正确更新
-      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
-      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
-
-      // 验证是否正确处理了语言设置
-      expect(switchLang).toHaveBeenCalledWith('auto');
-    });
-
-    it('should handle the case when user config is null', async () => {
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(null as any);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
-        wrapper: withSWR,
-      });
-
-      // 等待 SWR 完成数据获取
-      await waitFor(() => expect(result.current.data).toBeNull());
-
-      // 验证状态未被错误更新
-      expect(useUserStore.getState().avatar).toBeUndefined();
-      expect(useUserStore.getState().settings).toEqual({});
-    });
-  });
-
-  describe('refreshConnection', () => {
-    it('should not call triggerEnableSync when userId is empty', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const onEvent = vi.fn();
-
-      vi.spyOn(commonSelectors, 'userId').mockReturnValueOnce(undefined);
-      const triggerEnableSyncSpy = vi.spyOn(result.current, 'triggerEnableSync');
-
-      await act(async () => {
-        await result.current.refreshConnection(onEvent);
-      });
-
-      expect(triggerEnableSyncSpy).not.toHaveBeenCalled();
-    });
-
-    it('should call triggerEnableSync when userId exists', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const onEvent = vi.fn();
-      const userId = 'user-id';
-
-      vi.spyOn(commonSelectors, 'userId').mockReturnValueOnce(userId);
-      const triggerEnableSyncSpy = vi.spyOn(result.current, 'triggerEnableSync');
-
-      await act(async () => {
-        await result.current.refreshConnection(onEvent);
-      });
-
-      expect(triggerEnableSyncSpy).toHaveBeenCalledWith(userId, onEvent);
-    });
-  });
-
-  describe('triggerEnableSync', () => {
-    it('should return false when sync.channelName is empty', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const userId = 'user-id';
-      const onEvent = vi.fn();
-
-      vi.spyOn(syncSettingsSelectors, 'webrtcConfig').mockReturnValueOnce({
-        channelName: '',
-        enabled: true,
-      });
-
-      const data = await act(async () => {
-        return result.current.triggerEnableSync(userId, onEvent);
-      });
-
-      expect(data).toBe(false);
-    });
-
-    it('should call globalService.enabledSync when sync.channelName exists', async () => {
-      const userId = 'user-id';
-      const onEvent = vi.fn();
-      const channelName = 'channel-name';
-      const channelPassword = 'channel-password';
-      const deviceName = 'device-name';
-      const signaling = 'signaling';
-
-      vi.spyOn(syncSettingsSelectors, 'webrtcConfig').mockReturnValueOnce({
-        channelName,
-        channelPassword,
-        signaling,
-        enabled: true,
-      });
-      vi.spyOn(syncSettingsSelectors, 'deviceName').mockReturnValueOnce(deviceName);
-      const enabledSyncSpy = vi.spyOn(globalService, 'enabledSync').mockResolvedValueOnce(true);
-      const { result } = renderHook(() => useUserStore());
-
-      const data = await act(async () => {
-        return result.current.triggerEnableSync(userId, onEvent);
-      });
-
-      expect(enabledSyncSpy).toHaveBeenCalledWith({
-        channel: { name: channelName, password: channelPassword },
-        onAwarenessChange: expect.any(Function),
-        onSyncEvent: onEvent,
-        onSyncStatusChange: expect.any(Function),
-        signaling,
-        user: expect.objectContaining({ id: userId, name: deviceName }),
-      });
-      expect(data).toBe(true);
-    });
-  });
-
   describe('useCheckTrace', () => {
     it('should return false when shouldFetch is false', async () => {
       const { result } = renderHook(() => useUserStore().useCheckTrace(false), {
@@ -270,47 +90,4 @@ describe('createCommonSlice', () => {
       expect(messageCountToCheckTraceSpy).toHaveBeenCalled();
     });
   });
-
-  describe('useEnabledSync', () => {
-    it('should return false when userId is empty', async () => {
-      const { result } = renderHook(() => useUserStore().useEnabledSync(true, undefined, vi.fn()), {
-        wrapper: withSWR,
-      });
-
-      await waitFor(() => expect(result.current.data).toBe(false));
-    });
-
-    it('should call globalService.disableSync when userEnableSync is false', async () => {
-      const disableSyncSpy = vi.spyOn(globalService, 'disableSync').mockResolvedValueOnce(false);
-
-      const { result } = renderHook(
-        () => useUserStore().useEnabledSync(false, 'user-id', vi.fn()),
-        { wrapper: withSWR },
-      );
-
-      await waitFor(() => expect(result.current.data).toBeUndefined());
-      expect(disableSyncSpy).toHaveBeenCalled();
-    });
-
-    it('should call triggerEnableSync when userEnableSync and userId exist', async () => {
-      const userId = 'user-id';
-      const onEvent = vi.fn();
-      const triggerEnableSyncSpy = vi.fn().mockResolvedValueOnce(true);
-
-      const { result } = renderHook(() => useUserStore());
-
-      // replace triggerEnableSync as a mock
-      result.current.triggerEnableSync = triggerEnableSyncSpy;
-
-      const { result: swrResult } = renderHook(
-        () => result.current.useEnabledSync(true, userId, onEvent),
-        {
-          wrapper: withSWR,
-        },
-      );
-
-      await waitFor(() => expect(swrResult.current.data).toBe(true));
-      expect(triggerEnableSyncSpy).toHaveBeenCalledWith(userId, onEvent);
-    });
-  });
 });