@lobehub/chat 0.157.1 → 0.158.0

package/src/app/(main)/settings/hooks/useCategory.tsx

@@ -9,26 +9,20 @@ import type { MenuProps } from '@/components/Menu';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-interface UseCategoryOptions {
-  mobile?: boolean;
-}
-
-export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+export const useCategory = () => {
   const { t } = useTranslation('setting');
   const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
 
-  const iconSize = mobile ? { fontSize: 20 } : undefined;
-
   const cateItems: MenuProps['items'] = useMemo(
     () =>
       [
         {
-          icon: <Icon icon={Settings2} size={iconSize} />,
+          icon: <Icon icon={Settings2} />,
           key: SettingsTabs.Common,
           label: t('tab.common'),
         },
         enableWebrtc && {
-          icon: <Icon icon={Cloudy} size={iconSize} />,
+          icon: <Icon icon={Cloudy} />,
           key: SettingsTabs.Sync,
           label: (
             <Flexbox align={'center'} gap={8} horizontal>
@@ -40,18 +34,18 @@ export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
           ),
         },
         showLLM && {
-          icon: <Icon icon={Brain} size={iconSize} />,
+          icon: <Icon icon={Brain} />,
           key: SettingsTabs.LLM,
           label: t('tab.llm'),
         },
-        { icon: <Icon icon={Mic2} size={iconSize} />, key: SettingsTabs.TTS, label: t('tab.tts') },
+        { icon: <Icon icon={Mic2} />, key: SettingsTabs.TTS, label: t('tab.tts') },
         {
-          icon: <Icon icon={Bot} size={iconSize} />,
+          icon: <Icon icon={Bot} />,
           key: SettingsTabs.Agent,
           label: t('tab.agent'),
         },
         {
-          icon: <Icon icon={Info} size={iconSize} />,
+          icon: <Icon icon={Info} />,
           key: SettingsTabs.About,
           label: t('tab.about'),
         },

package/src/app/@modal/layout.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { Modal } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { PropsWithChildren, memo, useState } from 'react';
 
 const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
   const [open, setOpen] = useState(true);
   const router = useRouter();
+  const theme = useTheme();
 
   return (
     <Modal
@@ -18,6 +20,7 @@ const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
       open={open}
       styles={{
         body: { display: 'flex', minHeight: 'min(75vh, 750px)', overflow: 'hidden', padding: 0 },
+        content: { border: 'none', boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}` },
       }}
       title={false}
       width={1024}

package/src/components/Cell/Divider.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 import { memo } from 'react';
 
 const useStyles = createStyles(
-  ({ css, token }) => css`
+  ({ css, token, isDarkMode }) => css`
     flex: none;
     width: 100%;
     height: 6px;
-    background: ${token.colorFillTertiary};
+    background: ${isDarkMode ? rgba(token.colorFillTertiary, 0.04) : token.colorFillTertiary};
   `,
 );
 

package/src/components/Cell/index.tsx

@@ -1,42 +1,52 @@
-import { Icon, List } from '@lobehub/ui';
+import { Icon, IconProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
 import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
-const { Item } = List;
+import Divider from './Divider';
 
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     position: relative;
-
-    gap: 12px;
-
-    padding: 16px !important;
-
-    background: ${token.colorBgLayout};
+    font-size: 15px;
     border-radius: 0;
+
+    &:active {
+      background: ${token.colorFillTertiary};
+    }
   `,
 }));
 
 export interface CellProps {
-  icon: ReactNode;
-  label: string | ReactNode;
+  icon?: IconProps['icon'];
+  key?: string | number;
+  label?: string | ReactNode;
   onClick?: () => void;
+  type?: 'divider';
 }
 
-const Cell = memo<CellProps>(({ label, icon, onClick }) => {
-  const { cx, styles } = useStyles();
+const Cell = memo<CellProps>(({ label, icon, onClick, type }) => {
+  const { cx, styles, theme } = useStyles();
+
+  if (type === 'divider') return <Divider />;
 
   return (
-    <Item
-      active={false}
-      avatar={icon}
+    <Flexbox
+      align={'center'}
       className={cx(styles.container)}
+      gap={12}
+      horizontal
+      justify={'space-between'}
       onClick={onClick}
-      title={label as string}
+      padding={16}
     >
-      <Icon icon={ChevronRight} size={{ fontSize: 16 }} />
-    </Item>
+      <Flexbox align={'center'} gap={12} horizontal>
+        {icon && <Icon color={theme.colorPrimaryBorder} icon={icon} size={{ fontSize: 20 }} />}
+        {label}
+      </Flexbox>
+      <Icon color={theme.colorBorder} icon={ChevronRight} size={{ fontSize: 16 }} />
+    </Flexbox>
   );
 });
 

package/src/features/User/DataStatistics.tsx

@@ -13,6 +13,7 @@ import useSWR from 'swr';
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
 import { topicService } from '@/services/topic';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 const useStyles = createStyles(({ css, token }) => ({
   card: css`
@@ -53,6 +54,7 @@ const formatNumber = (num: any) => {
 };
 
 const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest }) => {
+  const mobile = useServerConfigStore((s) => s.isMobile);
   // sessions
   const { data: sessions, isLoading: sessionsLoading } = useSWR(
     'count-sessions',
@@ -111,7 +113,7 @@ const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
             <Flexbox
               align={'center'}
               className={styles.card}
-              flex={showBadge ? 2 : 1}
+              flex={showBadge && !mobile ? 2 : 1}
               gap={4}
               horizontal
               justify={'space-between'}

package/src/features/User/UserLoginOrSignup.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import UserInfo from '@/features/User/UserInfo';
+import UserInfo from './UserInfo';
 
 const UserLoginOrSignup = memo<{ onClick: () => void }>(({ onClick }) => {
   const { t } = useTranslation('auth');
@@ -11,7 +11,7 @@ const UserLoginOrSignup = memo<{ onClick: () => void }>(({ onClick }) => {
   return (
     <>
       <UserInfo />
-      <Flexbox paddingBlock={'0 12px'} paddingInline={16} width={'100%'}>
+      <Flexbox paddingBlock={12} paddingInline={16} width={'100%'}>
         <Button block onClick={onClick} type={'primary'}>
           {t('loginOrSignup')}
         </Button>

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

@@ -45,13 +45,19 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
   return (
     <Flexbox gap={2} style={{ minWidth: 300 }}>
       {!enableAuth ? (
-        <UserInfo />
+        <>
+          <UserInfo />
+          <DataStatistics />
+        </>
       ) : isLoginWithAuth ? (
-        <UserInfo onClick={handleOpenProfile} />
+        <>
+          <UserInfo onClick={handleOpenProfile} />
+          <DataStatistics />
+        </>
       ) : (
         <UserLoginOrSignup onClick={handleSignIn} />
       )}
-      <DataStatistics />
+
       <Menu items={mainItems} onClick={closePopover} />
       <Flexbox
         align={'center'}

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

@@ -57,7 +57,21 @@ export const useMenu = () => {
   const hasNewVersion = useNewVersion();
   const openSettings = useOpenSettings();
   const { t } = useTranslation(['common', 'setting', 'auth']);
-  const isSignedIn = useUserStore(authSelectors.isLoginWithAuth);
+  const [isLogin, isLoginWithAuth, isLoginWithClerk, openUserProfile] = useUserStore((s) => [
+    authSelectors.isLogin(s),
+    authSelectors.isLoginWithAuth(s),
+    authSelectors.isLoginWithClerk(s),
+    s.openUserProfile,
+  ]);
+
+  const profile: MenuProps['items'] = [
+    {
+      icon: <Icon icon={CircleUserRound} />,
+      key: 'profile',
+      label: t('userPanel.profile'),
+      onClick: () => openUserProfile(),
+    },
+  ];
 
   const settings: MenuProps['items'] = [
     {
@@ -82,7 +96,7 @@ export const useMenu = () => {
     },
   ];
 
-  const exports: MenuProps['items'] = [
+  const data: MenuProps['items'] = [
     {
       icon: <Icon icon={HardDriveUpload} />,
       key: 'import',
@@ -123,22 +137,6 @@ export const useMenu = () => {
     },
   ];
 
-  const openUserProfile = useUserStore((s) => s.openUserProfile);
-
-  const planAndBilling: MenuProps['items'] = [
-    {
-      icon: <Icon icon={CircleUserRound} />,
-      key: 'profile',
-      label: t('userPanel.profile'),
-      onClick: () => {
-        openUserProfile();
-      },
-    },
-    {
-      type: 'divider',
-    },
-  ];
-
   const helps: MenuProps['items'] = [
     {
       icon: <Icon icon={DiscordIcon} />,
@@ -192,19 +190,21 @@ export const useMenu = () => {
     {
       type: 'divider',
     },
-    ...settings,
-    ...(isSignedIn ? planAndBilling : []),
-    ...exports,
+    ...(isLoginWithClerk ? profile : []),
+    ...(isLogin ? settings : []),
+    ...(isLogin ? data : []),
     ...helps,
   ].filter(Boolean) as MenuProps['items'];
 
-  const logoutItems: MenuProps['items'] = [
-    {
-      icon: <Icon icon={LogOut} />,
-      key: 'logout',
-      label: <span>{t('signout', { ns: 'auth' })}</span>,
-    },
-  ];
+  const logoutItems: MenuProps['items'] = isLoginWithAuth
+    ? [
+        {
+          icon: <Icon icon={LogOut} />,
+          key: 'logout',
+          label: <span>{t('signout', { ns: 'auth' })}</span>,
+        },
+      ]
+    : [];
 
   return { logoutItems, mainItems };
-};
+};

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

@@ -57,6 +57,10 @@ vi.mock('../UserLoginOrSignup', () => ({
   )),
 }));
 
+vi.mock('../DataStatistics', () => ({
+  default: vi.fn(() => <div>Mocked DataStatistics</div>),
+}));
+
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
 
@@ -83,6 +87,7 @@ describe('PanelContent', () => {
       render(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
+      expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
       expect(screen.queryByText('Mocked SignInBlock')).not.toBeInTheDocument();
     });
 
@@ -94,6 +99,7 @@ describe('PanelContent', () => {
       render(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked SignInBlock')).toBeInTheDocument();
+      expect(screen.queryByText('Mocked DataStatistics')).not.toBeInTheDocument();
       expect(screen.queryByText('Mocked UserInfo')).not.toBeInTheDocument();
     });
 
@@ -127,6 +133,7 @@ describe('PanelContent', () => {
       render(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
+      expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
       expect(screen.queryByText('Mocked SignInBlock')).not.toBeInTheDocument();
     });
 

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;