@lobehub/chat 0.157.2 → 0.158.0

package/src/app/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -0,0 +1,116 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useUserStore } from '@/store/user';
+
+import { useCategory } from '../features/useCategory';
+
+// Mock dependencies
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn(),
+  })),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: vi.fn(() => ({
+    t: vi.fn((key) => key),
+  })),
+}));
+
+vi.mock('../../settings/features/useCategory', () => ({
+  useCategory: vi.fn(() => [{ key: 'extraSetting', label: 'Extra Setting' }]),
+}));
+
+// 定义一个变量来存储 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('useCategory', () => {
+  it('should return correct items when the user is logged in with authentication', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: true });
+    });
+    enableAuth = true;
+    enableClerk = false;
+
+    const { result } = renderHook(() => useCategory());
+
+    act(() => {
+      const items = result.current;
+      expect(items.some((item) => item.key === 'profile')).toBe(false);
+      expect(items.some((item) => item.key === 'setting')).toBe(true);
+      expect(items.some((item) => item.key === 'data')).toBe(true);
+      expect(items.some((item) => item.key === 'docs')).toBe(true);
+      expect(items.some((item) => item.key === 'feedback')).toBe(true);
+      expect(items.some((item) => item.key === 'discord')).toBe(true);
+    });
+  });
+
+  it('should return correct items when the user is logged in with Clerk', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: true });
+    });
+    enableAuth = true;
+    enableClerk = true;
+
+    const { result } = renderHook(() => useCategory());
+
+    act(() => {
+      const items = result.current;
+      expect(items.some((item) => item.key === 'profile')).toBe(true);
+      expect(items.some((item) => item.key === 'setting')).toBe(true);
+      expect(items.some((item) => item.key === 'data')).toBe(true);
+      expect(items.some((item) => item.key === 'docs')).toBe(true);
+      expect(items.some((item) => item.key === 'feedback')).toBe(true);
+      expect(items.some((item) => item.key === 'discord')).toBe(true);
+    });
+  });
+
+  it('should return correct items when the user is not logged in', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: false });
+    });
+    enableAuth = true;
+
+    const { result } = renderHook(() => useCategory());
+
+    act(() => {
+      const items = result.current;
+      expect(items.some((item) => item.key === 'profile')).toBe(false);
+      expect(items.some((item) => item.key === 'setting')).toBe(false);
+      expect(items.some((item) => item.key === 'data')).toBe(false);
+      expect(items.some((item) => item.key === 'docs')).toBe(true);
+      expect(items.some((item) => item.key === 'feedback')).toBe(true);
+      expect(items.some((item) => item.key === 'discord')).toBe(true);
+    });
+  });
+
+  it('should handle settings for non-authenticated users', () => {
+    act(() => {
+      useUserStore.setState({ isSignedIn: false });
+    });
+    enableAuth = false;
+
+    const { result } = renderHook(() => useCategory());
+
+    act(() => {
+      const items = result.current;
+      expect(items.some((item) => item.key === 'extraSetting')).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+import Cell from '@/components/Cell';
+
+import { useCategory } from './useCategory';
+
+const Category = memo(() => {
+  const items = useCategory();
+
+  return items?.map((item, index) => <Cell key={item.key || index} {...item} />);
+});
+
+export default Category;

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { enableAuth } from '@/const/auth';
+import DataStatistics from '@/features/User/DataStatistics';
+import UserInfo from '@/features/User/UserInfo';
+import UserLoginOrSignup from '@/features/User/UserLoginOrSignup';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/selectors';
+
+const UserBanner = memo(() => {
+  const router = useRouter();
+  const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
+
+  return (
+    <Flexbox gap={12} paddingBlock={8}>
+      {!enableAuth ? (
+        <>
+          <UserInfo />
+          <DataStatistics paddingInline={12} />
+        </>
+      ) : isLoginWithAuth ? (
+        <>
+          <UserInfo onClick={() => router.push('/me/profile')} />
+          <DataStatistics paddingInline={12} />
+        </>
+      ) : (
+        <UserLoginOrSignup onClick={() => router.push('/login')} />
+      )}
+    </Flexbox>
+  );
+});
+
+export default UserBanner;

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

@@ -0,0 +1,95 @@
+import { DiscordIcon } from '@lobehub/ui';
+import { Book, CircleUserRound, Database, Feather, Settings2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useTranslation } from 'react-i18next';
+
+import { CellProps } from '@/components/Cell';
+import { enableAuth } from '@/const/auth';
+import { DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/slices/auth/selectors';
+
+import { useCategory as useSettingsCategory } from '../../settings/features/useCategory';
+
+export const useCategory = () => {
+  const router = useRouter();
+  const { t } = useTranslation(['common', 'setting', 'auth']);
+  const [isLogin, isLoginWithAuth, isLoginWithClerk] = useUserStore((s) => [
+    authSelectors.isLogin(s),
+    authSelectors.isLoginWithAuth(s),
+    authSelectors.isLoginWithClerk(s),
+  ]);
+
+  const profile: CellProps[] = [
+    {
+      icon: CircleUserRound,
+      key: 'profile',
+      label: t('userPanel.profile'),
+      onClick: () => router.push('/me/profile'),
+    },
+  ];
+
+  const settings: CellProps[] = [
+    {
+      icon: Settings2,
+      key: 'setting',
+      label: t('userPanel.setting'),
+      onClick: () => router.push('/me/settings'),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
+  const settingsWithoutAuth = [
+    ...useSettingsCategory(),
+    {
+      type: 'divider',
+    },
+  ];
+
+  const data: CellProps[] = [
+    {
+      icon: Database,
+      key: 'data',
+      label: t('userPanel.data'),
+      onClick: () => router.push('/me/data'),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
+  const helps: CellProps[] = [
+    {
+      icon: Book,
+      key: 'docs',
+      label: t('document'),
+      onClick: () => window.open(DOCUMENTS, '__blank'),
+    },
+    {
+      icon: Feather,
+      key: 'feedback',
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+    },
+    {
+      icon: DiscordIcon,
+      key: 'discord',
+      label: 'Discord',
+      onClick: () => window.open(DISCORD, '__blank'),
+    },
+  ];
+
+  const mainItems = [
+    {
+      type: 'divider',
+    },
+    ...(isLoginWithClerk ? profile : []),
+    ...(enableAuth ? (isLoginWithAuth ? settings : []) : settingsWithoutAuth),
+    ...(isLogin ? data : []),
+    ...helps,
+  ].filter(Boolean) as CellProps[];
+
+  return mainItems;
+};

package/src/app/(main)/(mobile)/me/{page.tsx → (home)/page.tsx}

@@ -2,13 +2,10 @@ import { redirect } from 'next/navigation';
 import { Center } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
-import Divider from '@/components/Cell/Divider';
-import DataStatistics from '@/features/User/DataStatistics';
-import UserInfo from '@/features/User/UserInfo';
 import { isMobileDevice } from '@/utils/responsive';
 
-import Cate from './features/Cate';
-import ExtraCate from './features/ExtraCate';
+import Category from './features/Category';
+import UserBanner from './features/UserBanner';
 
 const Page = () => {
   const mobile = isMobileDevice();
@@ -17,11 +14,8 @@ const Page = () => {
 
   return (
     <>
-      <UserInfo />
-      <DataStatistics paddingInline={12} style={{ paddingBottom: 6 }} />
-      <Divider />
-      <Cate />
-      <ExtraCate />
+      <UserBanner />
+      <Category />
       <Center padding={16}>
         <BrandWatermark />
       </Center>
@@ -29,4 +23,6 @@ const Page = () => {
   );
 };
 
+Page.displayName = 'Me';
+
 export default Page;

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Cell, { CellProps } from '@/components/Cell';
+import DataImporter from '@/features/DataImporter';
+import { configService } from '@/services/config';
+
+const Category = memo(() => {
+  const { t } = useTranslation('common');
+  const items: CellProps[] = [
+    {
+      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,
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: 'import',
+      label: <DataImporter>{t('import')}</DataImporter>,
+    },
+  ];
+
+  return items?.map((item, index) => <Cell key={item.key || index} {...item} />);
+});
+
+export default Category;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const { t } = useTranslation('common');
+
+  const router = useRouter();
+  return (
+    <MobileNavBar
+      center={
+        <MobileNavBarTitle
+          title={
+            <Flexbox align={'center'} gap={4} horizontal>
+              {t('userPanel.data')}
+            </Flexbox>
+          }
+        />
+      }
+      onBackClick={() => router.push('/me')}
+      showBackButton
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

package/src/app/(main)/(mobile)/me/data/layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import Header from './features/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
+};
+
+Layout.displayName = 'MeDataLayout';
+
+export default Layout;

package/src/app/(main)/(mobile)/me/data/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return <SkeletonLoading paragraph={{ rows: 8 }} />;
+};

package/src/app/(main)/(mobile)/me/data/page.tsx

@@ -0,0 +1,17 @@
+import { redirect } from 'next/navigation';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  if (!mobile) return redirect('/chat');
+
+  return <Category />;
+};
+
+Page.displayName = 'MeData';
+
+export default Page;

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

@@ -0,0 +1,45 @@
+'use client';
+
+import { LogOut, ShieldCheck, UserCircle } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Cell, { CellProps } from '@/components/Cell';
+import { useUserStore } from '@/store/user';
+
+const Category = memo(() => {
+  const router = useRouter();
+  const { t } = useTranslation('auth');
+  const signOut = useUserStore((s) => s.logout);
+  const items: CellProps[] = [
+    {
+      icon: UserCircle,
+      key: 'profile',
+      label: t('profile'),
+      onClick: () => router.push('/profile'),
+    },
+    {
+      icon: ShieldCheck,
+      key: 'security',
+      label: t('security'),
+      onClick: () => router.push('/profile/security'),
+    },
+    {
+      type: 'divider',
+    },
+    {
+      icon: LogOut,
+      key: 'logout',
+      label: t('signout', { ns: 'auth' }),
+      onClick: () => {
+        signOut();
+        router.push('/login');
+      },
+    },
+  ];
+
+  return items?.map((item, index) => <Cell key={item.key || index} {...item} />);
+});
+
+export default Category;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const { t } = useTranslation('common');
+
+  const router = useRouter();
+  return (
+    <MobileNavBar
+      center={
+        <MobileNavBarTitle
+          title={
+            <Flexbox align={'center'} gap={4} horizontal>
+              {t('userPanel.profile')}
+            </Flexbox>
+          }
+        />
+      }
+      onBackClick={() => router.push('/me')}
+      showBackButton
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

package/src/app/(main)/(mobile)/me/profile/layout.tsx

@@ -0,0 +1,16 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+import { enableClerk } from '@/const/auth';
+
+import Header from './features/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  if (!enableClerk) return notFound();
+  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
+};
+
+Layout.displayName = 'MeProfileLayout';
+
+export default Layout;

package/src/app/(main)/(mobile)/me/profile/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return <SkeletonLoading paragraph={{ rows: 8 }} />;
+};

package/src/app/(main)/(mobile)/me/profile/page.tsx

@@ -0,0 +1,17 @@
+import { redirect } from 'next/navigation';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  if (!mobile) return redirect('/profile');
+
+  return <Category />;
+};
+
+Page.displayName = 'MeProfile';
+
+export default Page;

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+import Cell from '@/components/Cell';
+
+import { useCategory } from './useCategory';
+
+const Category = memo(() => {
+  const items = useCategory();
+
+  return items?.map((item, index) => <Cell key={item.key || index} {...item} />);
+});
+
+export default Category;

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const { t } = useTranslation('common');
+
+  const router = useRouter();
+  return (
+    <MobileNavBar
+      center={
+        <MobileNavBarTitle
+          title={
+            <Flexbox align={'center'} gap={4} horizontal>
+              {t('userPanel.setting')}
+            </Flexbox>
+          }
+        />
+      }
+      onBackClick={() => router.push('/me')}
+      showBackButton
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

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

@@ -0,0 +1,57 @@
+import { Tag } from 'antd';
+import { Bot, Brain, Cloudy, Info, Mic2, Settings2 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { CellProps } from '@/components/Cell';
+import { SettingsTabs } from '@/store/global/initialState';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+export const useCategory = () => {
+  const router = useRouter();
+  const { t } = useTranslation('setting');
+  const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
+
+  const items: CellProps[] = [
+    {
+      icon: Settings2,
+      key: SettingsTabs.Common,
+      label: t('tab.common'),
+    },
+    enableWebrtc && {
+      icon: Cloudy,
+      key: SettingsTabs.Sync,
+      label: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {t('tab.sync')}
+          <Tag bordered={false} color={'warning'}>
+            {t('tab.experiment')}
+          </Tag>
+        </Flexbox>
+      ),
+    },
+    showLLM && {
+      icon: Brain,
+      key: SettingsTabs.LLM,
+      label: t('tab.llm'),
+    },
+    { icon: Mic2, key: SettingsTabs.TTS, label: t('tab.tts') },
+    {
+      icon: Bot,
+      key: SettingsTabs.Agent,
+      label: t('tab.agent'),
+    },
+    {
+      icon: Info,
+      key: SettingsTabs.About,
+      label: t('tab.about'),
+    },
+  ].filter(Boolean) as CellProps[];
+
+  return items.map((item) => ({
+    ...item,
+    onClick: () => router.push(urlJoin('/settings', item.key as SettingsTabs)),
+  }));
+};

package/src/app/(main)/(mobile)/me/settings/layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import Header from './features/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
+};
+
+Layout.displayName = 'MeSettingsLayout';
+
+export default Layout;

package/src/app/(main)/(mobile)/me/settings/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return <SkeletonLoading paragraph={{ rows: 8 }} />;
+};