@lobehub/chat 0.152.10 → 0.152.11

package/src/features/User/UserPanel/useMenu.tsx

@@ -0,0 +1,158 @@
+import { DiscordIcon, Icon } from '@lobehub/ui';
+import { Badge } from 'antd';
+import {
+  Book,
+  Feather,
+  HardDriveDownload,
+  HardDriveUpload,
+  LifeBuoy,
+  Mail,
+  Settings2,
+} from 'lucide-react';
+import Link from 'next/link';
+import { PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { type MenuProps } from '@/components/Menu';
+import { DISCORD, DOCUMENTS, EMAIL_SUPPORT, GITHUB_ISSUES } from '@/const/url';
+import DataImporter from '@/features/DataImporter';
+import { configService } from '@/services/config';
+
+import { useNewVersion } from './useNewVersion';
+
+export const useMenu = () => {
+  const hasNewVersion = useNewVersion();
+  const { t } = useTranslation(['common', 'setting']);
+
+  const NewVersionBadge = useCallback(
+    ({ children, showBadge }: PropsWithChildren & { showBadge?: boolean }) => {
+      if (!showBadge) return children;
+      return (
+        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal width={'100%'}>
+          <span>{children}</span>
+          <Badge count={t('upgradeVersion.hasNew')} />
+        </Flexbox>
+      );
+    },
+    [t],
+  );
+
+  const exports: MenuProps['items'] = [
+    {
+      icon: <Icon icon={HardDriveUpload} />,
+      key: 'import',
+      label: <DataImporter>{t('import')}</DataImporter>,
+    },
+    {
+      children: [
+        {
+          key: 'allAgent',
+          label: t('exportType.allAgent'),
+          onClick: configService.exportAgents,
+        },
+        {
+          key: 'allAgentWithMessage',
+          label: t('exportType.allAgentWithMessage'),
+          onClick: configService.exportSessions,
+        },
+        {
+          key: 'globalSetting',
+          label: t('exportType.globalSetting'),
+          onClick: configService.exportSettings,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          key: 'all',
+          label: t('exportType.all'),
+          onClick: configService.exportAll,
+        },
+      ],
+      icon: <Icon icon={HardDriveDownload} />,
+      key: 'export',
+      label: t('export'),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
+  const settings: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Settings2} />,
+      key: 'setting',
+      label: (
+        <Link href={'/settings'}>
+          <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
+        </Link>
+      ),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
+  const helps: MenuProps['items'] = [
+    {
+      icon: <Icon icon={DiscordIcon} />,
+      key: 'discord',
+      label: (
+        <Link href={DISCORD} target={'_blank'}>
+          {t('userPanel.discord')}
+        </Link>
+      ),
+    },
+    {
+      children: [
+        {
+          icon: <Icon icon={Book} />,
+          key: 'docs',
+          label: (
+            <Link href={DOCUMENTS} target={'_blank'}>
+              {t('userPanel.docs')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={Feather} />,
+          key: 'feedback',
+          label: (
+            <Link href={GITHUB_ISSUES} target={'_blank'}>
+              {t('userPanel.feedback')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={Mail} />,
+          key: 'email',
+          label: (
+            <Link href={`mailto:${EMAIL_SUPPORT}`} target={'_blank'}>
+              {t('userPanel.email')}
+            </Link>
+          ),
+        },
+      ],
+      icon: <Icon icon={LifeBuoy} />,
+      key: 'help',
+      label: t('userPanel.help'),
+    },
+  ];
+
+  const mainItems = [
+    {
+      type: 'divider',
+    },
+    ...settings,
+    ...exports,
+    ...helps,
+    {
+      type: 'divider',
+    },
+  ].filter(Boolean) as MenuProps['items'];
+
+  return {
+    mainItems,
+  };
+};

package/src/features/User/UserPanel/useNewVersion.tsx

@@ -0,0 +1,12 @@
+import { useGlobalStore } from '@/store/global';
+
+export const useNewVersion = () => {
+  const [hasNewVersion, useCheckLatestVersion] = useGlobalStore((s) => [
+    s.hasNewVersion,
+    s.useCheckLatestVersion,
+  ]);
+
+  useCheckLatestVersion();
+
+  return hasNewVersion;
+};

package/src/layout/AuthProvider/NextAuth/UserUpdater.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { memo } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useUserStore } from '@/store/user';
+import { LobeUser } from '@/types/user';
+
+// update the user data into the context
+const UserUpdater = memo(() => {
+  const { data: session, status } = useSession();
+  const isSignedIn = (status === 'authenticated' && session && !!session.user) || false;
+
+  const nextUser = session?.user;
+  const useStoreUpdater = createStoreUpdater(useUserStore);
+
+  const lobeUser = {
+    avatar: nextUser?.image,
+    email: nextUser?.email,
+    fullName: nextUser?.name,
+    id: nextUser?.id,
+  } as LobeUser;
+
+  useStoreUpdater('isLoaded', true);
+  useStoreUpdater('user', lobeUser);
+  useStoreUpdater('isSignedIn', isSignedIn);
+
+  useStoreUpdater('nextSession', session);
+  useStoreUpdater('nextUser', nextUser);
+
+  return null;
+});
+
+export default UserUpdater;

package/src/layout/AuthProvider/NextAuth/index.tsx

@@ -3,8 +3,15 @@ import { PropsWithChildren } from 'react';
 
 import { API_ENDPOINTS } from '@/services/_url';
 
+import UserUpdater from './UserUpdater';
+
 const NextAuth = ({ children }: PropsWithChildren) => {
-  return <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>;
+  return (
+    <SessionProvider basePath={API_ENDPOINTS.oauth}>
+      {children}
+      <UserUpdater />
+    </SessionProvider>
+  );
 };
 
 export default NextAuth;

package/src/locales/default/common.ts

@@ -152,4 +152,18 @@ export default {
     hasNew: '有可用更新',
     newVersion: '有新版本可用：{{version}}',
   },
+  userPanel: {
+    billing: '账单管理',
+    defaultNickname: '社区版用户',
+    discord: '社区支持',
+    docs: '使用文档',
+    email: '邮件支持',
+    feedback: '反馈与建议',
+    help: '帮助中心',
+    moveGuide: '设置按钮搬到这里啦',
+    plans: '订阅方案',
+    profile: '账户管理',
+    setting: '应用设置',
+    usages: '用量统计',
+  },
 };

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

@@ -1,18 +1,16 @@
-export interface LobeUser {
-  avatar?: string;
-  firstName?: string | null;
-  fullName?: string | null;
-  id: string;
-  latestName?: string | null;
-  username?: string | null;
-}
+import { Session, User } from '@auth/core/types';
+
+import { LobeUser } from '@/types/user';
 
 export interface UserAuthState {
   /**
    * @deprecated
    */
   avatar?: string;
+  isLoaded?: boolean;
   isSignedIn?: boolean;
+  nextSession?: Session;
+  nextUser?: User;
   user?: LobeUser;
   userId?: string;
 }

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

@@ -1,6 +1,9 @@
 import { UserStore } from '@/store/user';
+import { LobeUser } from '@/types/user';
 
 export const userProfileSelectors = {
-  userAvatar: (s: UserStore): string => s.avatar || '',
+  userAvatar: (s: UserStore): string => s.user?.avatar || s.avatar || '',
   userId: (s: UserStore) => s.userId,
+  userProfile: (s: UserStore): LobeUser | null | undefined => s.user,
+  username: (s: UserStore): string | null | undefined => s.user?.username,
 };

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

@@ -2,10 +2,9 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { withSWR } from '~test-utils';
 
-import { globalService } from '@/services/global';
 import { useUserStore } from '@/store/user';
 
-import { type Guide } from './initialState';
+import { DEFAULT_PREFERENCE, type Guide, UserPreference } from './initialState';
 
 beforeEach(() => {
   vi.clearAllMocks();
@@ -25,7 +24,7 @@ describe('createPreferenceSlice', () => {
         result.current.updateGuideState(guide);
       });
 
-      expect(result.current.preference.guide).toEqual(guide);
+      expect(result.current.preference.guide!.topic).toBeTruthy();
     });
   });
 
@@ -58,5 +57,44 @@ describe('createPreferenceSlice', () => {
         expect(result.current.isPreferenceInit).toBeTruthy();
       });
     });
+    it('should return default preference when local storage is empty', async () => {
+      const { result } = renderHook(() => useUserStore());
+
+      vi.spyOn(result.current.preferenceStorage, 'getFromLocalStorage').mockResolvedValueOnce(
+        {} as any,
+      );
+
+      renderHook(() => result.current.useInitPreference(), {
+        wrapper: withSWR,
+      });
+
+      await waitFor(() => {
+        expect(result.current.preference).toEqual(DEFAULT_PREFERENCE);
+        expect(result.current.isPreferenceInit).toBeTruthy();
+      });
+    });
+
+    it('should return saved preference when local storage has data', async () => {
+      const { result } = renderHook(() => useUserStore());
+      const savedPreference: UserPreference = {
+        ...DEFAULT_PREFERENCE,
+        hideSyncAlert: true,
+        guide: { topic: false, moveSettingsToAvatar: true },
+      };
+
+      vi.spyOn(result.current.preferenceStorage, 'getFromLocalStorage').mockResolvedValueOnce(
+        savedPreference,
+      );
+
+      const { result: prefernce } = renderHook(() => result.current.useInitPreference(), {
+        wrapper: withSWR,
+      });
+
+      await waitFor(() => {
+        expect(prefernce.current.data).toEqual(savedPreference);
+        expect(result.current.isPreferenceInit).toBeTruthy();
+        expect(result.current.preference).toEqual(savedPreference);
+      });
+    });
   });
 });

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

@@ -6,7 +6,7 @@ import type { UserStore } from '@/store/user';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { Guide, UserPreference } from './initialState';
+import { DEFAULT_PREFERENCE, Guide, UserPreference } from './initialState';
 
 const n = setNamespace('preference');
 
@@ -41,7 +41,13 @@ export const createPreferenceSlice: StateCreator<
       () => get().preferenceStorage.getFromLocalStorage(),
       {
         onSuccess: (preference) => {
-          set({ isPreferenceInit: true, preference }, false, n('initPreference'));
+          const isEmpty = Object.keys(preference).length === 0;
+
+          set(
+            { isPreferenceInit: true, preference: isEmpty ? DEFAULT_PREFERENCE : preference },
+            false,
+            n('initPreference'),
+          );
         },
       },
     ),

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

@@ -1,6 +1,11 @@
 import { AsyncLocalStorage } from '@/utils/localStorage';
 
 export interface Guide {
+  /**
+   * Move the settings button to the avatar dropdown
+   */
+  moveSettingsToAvatar?: boolean;
+
   // Topic 引导
   topic?: boolean;
 }
@@ -24,12 +29,16 @@ export interface UserPreferenceState {
   preferenceStorage: AsyncLocalStorage<UserPreference>;
 }
 
+export const DEFAULT_PREFERENCE: UserPreference = {
+  guide: {
+    moveSettingsToAvatar: true,
+  },
+  telemetry: null,
+  useCmdEnterToSend: false,
+};
+
 export const initialPreferenceState: UserPreferenceState = {
   isPreferenceInit: false,
-  preference: {
-    guide: {},
-    telemetry: null,
-    useCmdEnterToSend: false,
-  },
+  preference: DEFAULT_PREFERENCE,
   preferenceStorage: new AsyncLocalStorage('LOBE_PREFERENCE'),
 };

package/src/store/user/slices/preference/selectors.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+
+import { UserStore } from '@/store/user';
+
+import { initialPreferenceState } from './initialState';
+import { preferenceSelectors } from './selectors';
+
+describe('preferenceSelectors', () => {
+  let store: UserStore;
+
+  beforeEach(() => {
+    store = {
+      ...initialPreferenceState,
+    } as unknown as UserStore;
+  });
+
+  describe('useCmdEnterToSend', () => {
+    it('should return the value of useCmdEnterToSend preference', () => {
+      store.preference.useCmdEnterToSend = true;
+      expect(preferenceSelectors.useCmdEnterToSend(store)).toBe(true);
+
+      store.preference.useCmdEnterToSend = false;
+      expect(preferenceSelectors.useCmdEnterToSend(store)).toBe(false);
+    });
+
+    it('should return false if useCmdEnterToSend preference is undefined', () => {
+      store.preference.useCmdEnterToSend = undefined;
+      expect(preferenceSelectors.useCmdEnterToSend(store)).toBe(false);
+    });
+  });
+
+  describe('userAllowTrace', () => {
+    it('should return the value of telemetry preference', () => {
+      store.preference.telemetry = true;
+      expect(preferenceSelectors.userAllowTrace(store)).toBe(true);
+
+      store.preference.telemetry = false;
+      expect(preferenceSelectors.userAllowTrace(store)).toBe(false);
+
+      store.preference.telemetry = null;
+      expect(preferenceSelectors.userAllowTrace(store)).toBe(null);
+    });
+  });
+
+  describe('hideSyncAlert', () => {
+    it('should return the value of hideSyncAlert preference', () => {
+      store.preference.hideSyncAlert = true;
+      expect(preferenceSelectors.hideSyncAlert(store)).toBe(true);
+
+      store.preference.hideSyncAlert = false;
+      expect(preferenceSelectors.hideSyncAlert(store)).toBe(false);
+
+      store.preference.hideSyncAlert = undefined;
+      expect(preferenceSelectors.hideSyncAlert(store)).toBeUndefined();
+    });
+  });
+
+  describe('hideSettingsMoveGuide', () => {
+    it('should return the value of moveSettingsToAvatar guide preference', () => {
+      store.preference.guide = { moveSettingsToAvatar: true };
+      expect(preferenceSelectors.hideSettingsMoveGuide(store)).toBe(true);
+
+      store.preference.guide = { moveSettingsToAvatar: false };
+      expect(preferenceSelectors.hideSettingsMoveGuide(store)).toBe(false);
+    });
+
+    it('should return undefined if guide preference is undefined', () => {
+      store.preference.guide = undefined;
+      expect(preferenceSelectors.hideSettingsMoveGuide(store)).toBeUndefined();
+    });
+  });
+
+  describe('isPreferenceInit', () => {
+    it('should return the value of isPreferenceInit state', () => {
+      store.isPreferenceInit = true;
+      expect(preferenceSelectors.isPreferenceInit(store)).toBe(true);
+
+      store.isPreferenceInit = false;
+      expect(preferenceSelectors.isPreferenceInit(store)).toBe(false);
+    });
+  });
+});

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

@@ -5,9 +5,13 @@ const useCmdEnterToSend = (s: UserStore): boolean => s.preference.useCmdEnterToS
 const userAllowTrace = (s: UserStore) => s.preference.telemetry;
 
 const hideSyncAlert = (s: UserStore) => s.preference.hideSyncAlert;
+
+const hideSettingsMoveGuide = (s: UserStore) => s.preference.guide?.moveSettingsToAvatar;
+
 const isPreferenceInit = (s: UserStore) => s.isPreferenceInit;
 
 export const preferenceSelectors = {
+  hideSettingsMoveGuide,
   hideSyncAlert,
   isPreferenceInit,
   useCmdEnterToSend,

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

@@ -5,8 +5,10 @@ import type { StateCreator } from 'zustand/vanilla';
 
 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 { switchLang } from '@/utils/client/switchLang';
 import { difference } from '@/utils/difference';
 import { merge } from '@/utils/merge';
 
@@ -14,6 +16,7 @@ export interface GeneralSettingsAction {
   importAppSettings: (settings: GlobalSettings) => Promise<void>;
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<GlobalSettings>) => Promise<void>;
+  switchLocale: (locale: LocaleMode) => Promise<void>;
   switchThemeMode: (themeMode: ThemeMode) => Promise<void>;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
 }
@@ -47,6 +50,11 @@ export const generalSettingsSlice: StateCreator<
     await userService.updateUserSettings(diffs);
     await get().refreshUserConfig();
   },
+  switchLocale: async (locale) => {
+    await get().setSettings({ language: locale });
+
+    switchLang(locale);
+  },
   switchThemeMode: async (themeMode) => {
     await get().setSettings({ themeMode });
   },

package/src/types/user.ts

@@ -0,0 +1,9 @@
+export interface LobeUser {
+  avatar?: string;
+  email?: string | null;
+  firstName?: string | null;
+  fullName?: string | null;
+  id: string;
+  latestName?: string | null;
+  username?: string | null;
+}

package/src/app/(main)/settings/page.tsx

@@ -1,7 +0,0 @@
-import { redirect } from 'next/navigation';
-
-const Page = () => {
-  return redirect('/settings/common');
-};
-
-export default Page;