@lobehub/chat 0.157.2 → 0.158.0

package/src/features/User/__tests__/useMenu.test.tsx

@@ -0,0 +1,142 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useUserStore } from '@/store/user';
+
+import { useMenu } from '../UserPanel/useMenu';
+
+// Mock dependencies
+vi.mock('next/link', () => ({
+  default: vi.fn(({ children }) => <div>{children}</div>),
+}));
+
+vi.mock('@/hooks/useQueryRoute', () => ({
+  useQueryRoute: vi.fn(() => ({
+    push: vi.fn(),
+  })),
+}));
+
+vi.mock('@/hooks/useInterceptingRoutes', () => ({
+  useOpenSettings: vi.fn(() => vi.fn()),
+}));
+
+vi.mock('@/features/DataImporter', () => ({
+  default: vi.fn(({ children }) => <div>{children}</div>),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: vi.fn(() => ({
+    t: vi.fn((key) => key),
+  })),
+}));
+
+vi.mock('@/services/config', () => ({
+  configService: {
+    exportAgents: vi.fn(),
+    exportAll: vi.fn(),
+    exportSessions: vi.fn(),
+    exportSettings: vi.fn(),
+  },
+}));
+
+vi.mock('./useNewVersion', () => ({
+  useNewVersion: vi.fn(() => false),
+}));
+
+// 定义一个变量来存储 enableAuth 的值
+let enableAuth = true;
+let enableClerk = true;
+// 模拟 @/const/auth 模块
+vi.mock('@/const/auth', () => ({
+  get enableAuth() {
+    return enableAuth;
+  },
+  get enableClerk() {
+    return enableClerk;
+  },
+}));
+
+afterEach(() => {
+  enableAuth = true;
+  enableClerk = true;
+});
+
+describe('useMenu', () => {
+  it('should provide correct menu items when user is logged in with auth', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: true });
+    });
+    enableAuth = true;
+    enableClerk = false;
+
+    const { result } = renderHook(() => useMenu());
+
+    act(() => {
+      const { mainItems, logoutItems } = result.current;
+      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(logoutItems.some((item) => item?.key === 'logout')).toBe(true);
+    });
+  });
+
+  it('should provide correct menu items when user is logged in with Clerk', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: true });
+    });
+    enableAuth = true;
+    enableClerk = true;
+
+    const { result } = renderHook(() => useMenu());
+
+    act(() => {
+      const { mainItems, logoutItems } = result.current;
+      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(logoutItems.some((item) => item?.key === 'logout')).toBe(true);
+    });
+  });
+
+  it('should provide correct menu items when user is logged in without auth', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: false });
+    });
+    enableAuth = false;
+
+    const { result } = renderHook(() => useMenu());
+
+    act(() => {
+      const { mainItems, logoutItems } = result.current;
+      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(logoutItems.some((item) => item?.key === 'logout')).toBe(false);
+    });
+  });
+
+  it('should provide correct menu items when user is not logged in', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: false });
+    });
+    enableAuth = true;
+
+    const { result } = renderHook(() => useMenu());
+
+    act(() => {
+      const { mainItems, logoutItems } = result.current;
+      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'setting')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'import')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'export')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(logoutItems.some((item) => item?.key === 'logout')).toBe(false);
+    });
+  });
+});

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -7,13 +7,14 @@ import { createStyles, useThemeMode } from 'antd-style';
 const prefixCls = 'cl';
 
 export const useStyles = createStyles(
-  ({ css, token }) =>
+  ({ css, token, isDarkMode }) =>
     ({
       avatarBox: css`
         width: 40px;
         height: 40px;
       `,
       cardBox: css`
+        background: ${token.colorBgContainer};
         border-radius: ${token.borderRadiusLG}px;
         box-shadow: 0 0 0 1px ${token.colorBorderSecondary};
       `,
@@ -42,7 +43,7 @@ export const useStyles = createStyles(
         }
       `,
       navbar: css`
-        background: ${token.colorBgContainer};
+        background: ${isDarkMode ? token.colorBgContainer : token.colorFillTertiary};
       `,
       navbarButton: css`
         line-height: 2;
@@ -68,10 +69,10 @@ export const useStyles = createStyles(
         }
       `,
       scrollBox: css`
-        background: ${token.colorBgLayout};
+        background: ${isDarkMode ? token.colorFillQuaternary : token.colorBgElevated};
         border: unset;
         border-radius: unset;
-        box-shadow: 0 1px 0 1px ${token.colorSplit};
+        box-shadow: 0 1px 0 1px ${token.colorFillTertiary};
       `,
       socialButtons: css`
         display: flex;

package/src/locales/default/auth.ts

@@ -1,6 +1,8 @@
 export default {
   login: '登录',
   loginOrSignup: '登录 / 注册',
+  profile: '个人资料',
+  security: '安全',
   signout: '退出登录',
   signup: '注册',
 };

package/src/locales/default/common.ts

@@ -163,6 +163,7 @@ export default {
   userPanel: {
     anonymousNickName: '匿名用户',
     billing: '账单管理',
+    data: '数据存储',
     defaultNickname: '社区版用户',
     discord: '社区支持',
     docs: '使用文档',

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

@@ -1,6 +1,6 @@
 import { t } from 'i18next';
 
-import { enableAuth } from '@/const/auth';
+import { enableAuth, enableClerk } from '@/const/auth';
 import { UserStore } from '@/store/user';
 import { LobeUser } from '@/types/user';
 
@@ -43,4 +43,5 @@ const isLogin = (s: UserStore) => {
 export const authSelectors = {
   isLogin,
   isLoginWithAuth: (s: UserStore) => s.isSignedIn,
+  isLoginWithClerk: (s: UserStore) => s.isSignedIn && enableClerk,
 };

package/src/app/(auth)/profile/[[...slugs]]/PageTitle.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-
-const Title = memo(() => {
-  const { t } = useTranslation('auth');
-
-  return <PageTitle title={t('signup')} />;
-});
-export default Title;

package/src/app/(auth)/profile/[[...slugs]]/page.tsx

@@ -1,14 +0,0 @@
-import { UserProfile } from '@clerk/nextjs';
-
-import PageTitle from './PageTitle';
-
-const Page = () => {
-  return (
-    <>
-      <PageTitle />
-      <UserProfile />
-    </>
-  );
-};
-
-export default Page;

package/src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { useCategory } from '@/app/(main)/settings/hooks/useCategory';
-import Cell from '@/components/Cell';
-import Divider from '@/components/Cell/Divider';
-
-const SettingCate = memo(() => {
-  const settingItems = useCategory({ mobile: true });
-  const router = useRouter();
-
-  return (
-    <Flexbox width={'100%'}>
-      {settingItems?.map(({ key, icon, label, type }: any, index) => {
-        if (type === 'divider') return <Divider key={index} />;
-        return (
-          <Cell
-            icon={icon}
-            key={key}
-            label={label}
-            onClick={() => router.push(urlJoin('/settings', key))}
-          />
-        );
-      })}
-    </Flexbox>
-  );
-});
-
-export default SettingCate;

package/src/app/(main)/(mobile)/me/features/ExtraCate.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Cell from '@/components/Cell';
-import Divider from '@/components/Cell/Divider';
-
-import { useExtraCate } from './useExtraCate';
-
-const ExtraCate = memo(() => {
-  const mainItems = useExtraCate();
-
-  return (
-    <Flexbox width={'100%'}>
-      {mainItems?.map(({ key, icon, label, type, onClick }: any, index) => {
-        if (type === 'divider') return <Divider key={index} />;
-        return <Cell icon={icon} key={key} label={label} onClick={onClick} />;
-      })}
-    </Flexbox>
-  );
-});
-
-export default ExtraCate;

package/src/app/(main)/(mobile)/me/features/useExtraCate.tsx

@@ -1,62 +0,0 @@
-import { DiscordIcon, Icon } from '@lobehub/ui';
-import { Book, Feather, HardDriveDownload, HardDriveUpload } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-import { type MenuProps } from '@/components/Menu';
-import { DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
-import DataImporter from '@/features/DataImporter';
-import { configService } from '@/services/config';
-
-export const useExtraCate = () => {
-  const { t } = useTranslation(['common', 'setting']);
-
-  const iconSize = { fontSize: 20 };
-
-  const exports: MenuProps['items'] = [
-    {
-      icon: <Icon icon={HardDriveUpload} size={iconSize} />,
-      key: 'import',
-      label: <DataImporter>{t('import')}</DataImporter>,
-    },
-    {
-      icon: <Icon icon={HardDriveDownload} size={iconSize} />,
-      key: 'export',
-      label: t('export'),
-      onClick: configService.exportAll,
-    },
-    {
-      type: 'divider',
-    },
-  ];
-
-  const helps: MenuProps['items'] = [
-    {
-      icon: <Icon icon={Book} size={iconSize} />,
-      key: 'docs',
-      label: t('document'),
-      onClick: () => window.open(DOCUMENTS, '__blank'),
-    },
-    {
-      icon: <Icon icon={Feather} size={iconSize} />,
-      key: 'feedback',
-      label: t('feedback'),
-      onClick: () => window.open(FEEDBACK, '__blank'),
-    },
-    {
-      icon: <Icon icon={DiscordIcon} size={iconSize} />,
-      key: 'discord',
-      label: 'Discord',
-      onClick: () => window.open(DISCORD, '__blank'),
-    },
-  ];
-
-  const mainItems = [
-    {
-      type: 'divider',
-    },
-    ...exports,
-    ...helps,
-  ].filter(Boolean) as MenuProps['items'];
-
-  return mainItems;
-};