@lobehub/chat 0.70.2 → 0.70.3

package/src/pages/settings/index.page.tsx

@@ -2,17 +2,14 @@ import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import SafeSpacing from '@/components/SafeSpacing';
 import { createI18nNext } from '@/locales/create';
 import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import Header from './Header';
-import Settings from './Settings';
-import SettingLayout from './layout';
-import Mobile from './mobile';
+import Settings from './features/Settings';
+import DesktopLayout from './layout';
+import MobileLayout from './layout.mobile';
 
 const initI18n = createI18nNext({ namespace: 'setting' });
 
@@ -21,6 +18,8 @@ const Setting = memo(() => {
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('header.global'));
 
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
+
   useSwitchSideBarOnInit('settings');
 
   useOnFinishHydrationGlobal(() => {
@@ -32,21 +31,9 @@ const Setting = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      {mobile ? (
-        <Mobile>
-          <Flexbox align={'center'} padding={16} style={{ overflow: 'auto' }}>
-            <Settings />
-          </Flexbox>
-        </Mobile>
-      ) : (
-        <SettingLayout>
-          <Header />
-          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
-            <SafeSpacing />
-            <Settings />
-          </Flexbox>
-        </SettingLayout>
-      )}
+      <RenderLayout>
+        <Settings />
+      </RenderLayout>
     </>
   );
 });

package/src/pages/settings/layout.mobile.tsx

@@ -0,0 +1,18 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Header from './features/Header';
+
+const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
+  return (
+    <AppMobileLayout navBar={<Header />}>
+      <Flexbox align={'center'} padding={16} style={{ overflow: 'auto' }}>
+        {children}
+      </Flexbox>
+    </AppMobileLayout>
+  );
+});
+
+export default SettingLayout;

package/src/pages/settings/layout.tsx

@@ -1,13 +1,20 @@
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import SafeSpacing from '@/components/SafeSpacing';
 import AppLayout from '@/layout/AppLayout';
 
+import Header from './features/Header';
+
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   return (
     <AppLayout>
       <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
-        {children}
+        <Header />
+        <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+          <SafeSpacing />
+          {children}
+        </Flexbox>
       </Flexbox>
     </AppLayout>
   );

package/src/pages/welcome/{Banner → features/Banner}/AgentTemplate.tsx

@@ -2,8 +2,8 @@ import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useStyles } from '../style';
 import AgentCard, { type AgentCardProps } from './AgentCard';
+import { useStyles } from './style';
 
 const items: AgentCardProps['meta'][] = [
   {

package/src/pages/welcome/{Banner → features/Banner}/Hero.tsx

@@ -3,7 +3,7 @@ import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { genSize, useStyles } from '../style';
+import { genSize, useStyles } from './style';
 
 const Hero = memo<{ width: number }>(({ width }) => {
   const size = useMemo(

package/src/pages/welcome/{Banner → features/Banner}/index.tsx

@@ -11,8 +11,8 @@ import { SESSION_CHAT_URL } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { useSessionStore } from '@/store/session';
 
-import { useStyles } from '../style';
 import Hero from './Hero';
+import { useStyles } from './style';
 
 const Banner = memo<{ mobile?: boolean }>(() => {
   const { importConfig } = useImportConfig();

package/src/pages/welcome/index.page.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import Banner from './Banner';
-import Footer from './Footer';
+import Banner from './features/Banner';
+import Footer from './features/Footer';
 import Layout from './layout';
-import Mobile from './mobile';
+import Mobile from './layout.mobile';
 
 const Welcome = memo(() => {
   const { mobile } = useResponsive();

package/src/pages/welcome/layout.tsx

@@ -4,7 +4,7 @@ import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import AppLayout from '../../layout/AppLayout';
-import { useStyles } from './style';
+import { useStyles } from './features/Banner/style';
 
 const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();

package/src/pages/chat/setting/Header.tsx

@@ -1,82 +0,0 @@
-import {
-  ActionIcon,
-  ChatHeader,
-  ChatHeaderTitle,
-  MobileNavBar,
-  MobileNavBarTitle,
-} from '@lobehub/ui';
-import { Dropdown, MenuProps } from 'antd';
-import { HardDriveDownload, Share2 } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
-import { useSessionStore } from '@/store/session';
-
-const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { t } = useTranslation('setting');
-  const [id, onBack] = useSessionStore((s) => [s.activeId, s.switchBackToChat]);
-
-  const items = useMemo<MenuProps['items']>(
-    () => [
-      {
-        key: 'agent',
-        label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
-        onClick: () => {
-          if (!id) return;
-
-          exportSingleAgent(id);
-        },
-      },
-      {
-        key: 'agentWithMessage',
-        label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
-        onClick: () => {
-          if (!id) return;
-
-          exportSingleSession(id);
-        },
-      },
-    ],
-    [],
-  );
-
-  if (mobile)
-    return (
-      <MobileNavBar
-        center={<MobileNavBarTitle title={t('header.session')} />}
-        onBackClick={onBack}
-        right={
-          <>
-            <ActionIcon icon={Share2} title={t('share', { ns: 'common' })} />
-            <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-              <ActionIcon icon={HardDriveDownload} title={t('export', { ns: 'common' })} />
-            </Dropdown>
-          </>
-        }
-        showBackButton
-      />
-    );
-
-  return (
-    <ChatHeader
-      left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={onBack}
-      right={
-        <>
-          <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />
-          <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-            <ActionIcon
-              icon={HardDriveDownload}
-              size={{ fontSize: 24 }}
-              title={t('export', { ns: 'common' })}
-            />
-          </Dropdown>
-        </>
-      }
-      showBackButton
-    />
-  );
-});
-
-export default Header;

package/src/pages/chat/setting/mobile.tsx

@@ -1,11 +0,0 @@
-import { PropsWithChildren, memo } from 'react';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
-import Header from './Header';
-
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  return <AppMobileLayout navBar={<Header mobile />}>{children}</AppMobileLayout>;
-});
-
-export default MobileLayout;

package/src/pages/settings/mobile.tsx

@@ -1,20 +0,0 @@
-import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
-const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
-  const { t } = useTranslation('setting');
-
-  return (
-    <AppMobileLayout
-      navBar={<MobileNavBar center={<MobileNavBarTitle title={t('header.global')} />} />}
-      showTabBar
-    >
-      {children}
-    </AppMobileLayout>
-  );
-});
-
-export default SettingLayout;