@lobehub/chat 0.157.2 → 0.158.1

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,110 @@
+import { DiscordIcon } from '@lobehub/ui';
+import { Book, CircleUserRound, Database, Download, 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 { usePWAInstall } from '@/hooks/usePWAInstall';
+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 { canInstall, install } = usePWAInstall();
+  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 pwa: CellProps[] = [
+    {
+      icon: Download,
+      key: 'pwa',
+      label: t('installPWA'),
+      onClick: () => install(),
+    },
+    {
+      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),
+    ...(canInstall ? pwa : []),
+    ...(isLogin ? data : []),
+    ...helps,
+  ].filter(Boolean) as CellProps[];
+
+  return mainItems;
+};

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

@@ -0,0 +1,38 @@
+import { redirect } from 'next/navigation';
+import { Center } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+import UserBanner from './features/UserBanner';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('common');
+  return metadataModule.generate({
+    title: t('tab.me'),
+    url: '/me',
+  });
+};
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  if (!mobile) return redirect('/chat');
+
+  return (
+    <>
+      <UserBanner />
+      <Category />
+      <Center padding={16}>
+        <BrandWatermark />
+      </Center>
+    </>
+  );
+};
+
+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,27 @@
+import { redirect } from 'next/navigation';
+
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('common');
+  return metadataModule.generate({
+    title: t('userPanel.data'),
+    url: '/me/data',
+  });
+};
+
+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,28 @@
+import { redirect } from 'next/navigation';
+
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('clerk');
+  return metadataModule.generate({
+    description: t('userProfile.navbar.title'),
+    title: t('userProfile.navbar.description'),
+    url: '/me/profile',
+  });
+};
+
+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 }} />;
+};

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

@@ -0,0 +1,28 @@
+import { redirect } from 'next/navigation';
+
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('header.title'),
+    url: '/me/settings',
+  });
+};
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  if (!mobile) return redirect('/settings/common');
+
+  return <Category />;
+};
+
+Page.displayName = 'MeSettings';
+
+export default Page;

package/src/app/(main)/_layout/Mobile.tsx

@@ -1,24 +1,25 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
+import qs from 'query-string';
 import { memo } from 'react';
 
 import { useQuery } from '@/hooks/useQuery';
 
 import { LayoutProps } from './type';
 
-const MOBILE_IGNORE_NAV_ROUTES = ['/settings/', '/chat/'];
+const MOBILE_NAV_ROUTES = new Set(['/chat', '/market', '/me']);
 
 const Layout = memo(({ children, nav }: LayoutProps) => {
   const { showMobileWorkspace } = useQuery();
   const pathname = usePathname();
-  const hideNav =
-    showMobileWorkspace || MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+  const { url } = qs.parseUrl(pathname);
+  const showNav = !showMobileWorkspace && MOBILE_NAV_ROUTES.has(url);
 
   return (
     <>
       {children}
-      {!hideNav && nav}
+      {showNav && nav}
     </>
   );
 });

package/src/app/(main)/chat/(workspace)/page.tsx

@@ -1,13 +1,33 @@
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import PageTitle from '../features/PageTitle';
 import TelemetryNotification from './features/TelemetryNotification';
 
-const Page = () => {
+export const generateMetadata = async () => {
+  const { t } = await translation('metadata');
+  return metadataModule.generate({
+    description: t('chat.description'),
+    title: t('chat.title'),
+    url: '/chat',
+  });
+};
+
+const Page = async () => {
   const mobile = isMobileDevice();
+  const { t } = await translation('metadata');
+  const ld = ldModule.generate({
+    description: t('chat.description'),
+    title: t('chat.title'),
+    url: '/chat',
+  });
 
   return (
     <>
+      <StructuredData ld={ld} />
       <PageTitle />
       <TelemetryNotification mobile={mobile} />
     </>