@lobehub/chat 0.83.8 → 0.83.10

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+import Header from './features/Header';
+
+export default memo(({ children }: PropsWithChildren) => {
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+  return (
+    <AppLayoutMobile navBar={<Header />}>
+      <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
+    </AppLayoutMobile>
+  );
+});

package/src/app/settings/{mobile → (mobile)/mobile}/index.tsx

@@ -7,15 +7,14 @@ import { Center } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
 import AgentCardBanner from '@/app/market/features/AgentCard/AgentCardBanner';
-import Header from '@/app/market/features/Header';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import AppMobileLayout from '@/layout/AppMobileLayout';
 import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { AVATAR } from '@/store/session/slices/chat/actions/share';
 
-import List from '../features/SideBar/List';
-import ExtraList from './ExtraList';
+import List from '../../features/SideBar/List';
+import ExtraList from '../features/ExtraList';
+import Layout from './layout.mobile';
 
 const useStyles = createStyles(({ css, token }) => ({
   divider: css`
@@ -29,11 +28,12 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Setting = memo(() => {
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   const avatar = useGlobalStore((s) => s.settings.avatar);
   const { styles } = useStyles();
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+
   return (
-    <AppMobileLayout navBar={<Header />} showTabBar>
+    <Layout>
       <AgentCardBanner
         mask
         meta={{ avatar: avatar || AVATAR }}
@@ -54,7 +54,7 @@ const Setting = memo(() => {
           </Divider>
         </Center>
       </div>
-    </AppMobileLayout>
+    </Layout>
   );
 });
 

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+import Header from '../features/Header/Home';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<Header />} showTabBar>
+    <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
+  </AppLayoutMobile>
+));

package/src/app/settings/agent/Agent.tsx

@@ -0,0 +1,30 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import AgentSetting from '@/features/AgentSetting';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+const Agent = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Agent);
+
+  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
+  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
+
+  return (
+    <AgentSetting
+      config={config}
+      meta={meta}
+      onConfigChange={(config) => {
+        updateAgent({ config });
+      }}
+      onMetaChange={(meta) => {
+        updateAgent({ meta });
+      }}
+    />
+  );
+});
+
+export default Agent;

package/src/app/settings/agent/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import Agent from './Agent';
+
+export default memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Agent);
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('tab.agent'));
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <Agent />
+    </>
+  );
+});

package/src/app/settings/agent/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../layout.server';

package/src/app/settings/agent/page.tsx

@@ -1,32 +1,3 @@
-'use client';
+import Index from './index';
 
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-
-import AgentSetting from '@/features/AgentSetting';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-const Agent = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Agent);
-
-  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
-  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
-  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
-
-  return (
-    <AgentSetting
-      config={config}
-      meta={meta}
-      onConfigChange={(config) => {
-        updateAgent({ config });
-      }}
-      onMetaChange={(meta) => {
-        updateAgent({ meta });
-      }}
-    />
-  );
-});
-
-export default Agent;
+export default () => <Index />;

package/src/app/settings/common/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import Common from './Common';
+
+export default memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Common);
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('tab.common'));
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <Common />
+    </>
+  );
+});

package/src/app/settings/common/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../layout.server';

package/src/app/settings/common/page.tsx

@@ -1,15 +1,3 @@
-'use client';
+import Index from './index';
 
-import { memo } from 'react';
-
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import Common from './Common';
-
-const CommonSetting = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Common);
-  return <Common />;
-});
-
-export default CommonSetting;
+export default () => <Index />;

package/src/app/settings/layout.server.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/layout/ResponsiveLayout.server';
+
+import DesktopLayout from './(desktop)/layout.responsive';
+import MobileLayout from './(mobile)/layout.mobile';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+    {children}
+  </ResponsiveLayout>
+));

package/src/app/settings/llm/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import LLM from './LLM';
+
+export default memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.LLM);
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('tab.llm'));
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <LLM />
+    </>
+  );
+});

package/src/app/settings/llm/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../layout.server';

package/src/app/settings/llm/page.tsx

@@ -1,15 +1,3 @@
-'use client';
+import Index from './index';
 
-import { memo } from 'react';
-
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import LLM from './LLM';
-
-const LLMSetting = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.LLM);
-  return <LLM />;
-});
-
-export default LLMSetting;
+export default () => <Index />;

package/src/app/settings/page.tsx

@@ -1 +1,14 @@
-export { default } from './common/page';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  const Page = mobile ? MobilePage : DesktopPage;
+
+  return <Page />;
+};
+
+export default Page;

package/src/app/welcome/(desktop)/features/Showcase.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { GridShowcase } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Banner from '@/app/welcome/features/Banner';
+
+const Showcase = memo(() => (
+  <Flexbox
+    flex={1}
+    justify={'center'}
+    style={{ height: '100vh', position: 'relative', width: '100%' }}
+  >
+    <GridShowcase>
+      <Banner />
+    </GridShowcase>
+    {/*TODO：暂时隐藏，待模板完成后再补回*/}
+    {/*<AgentTemplate width={width} />*/}
+  </Flexbox>
+));
+
+export default Showcase;

package/src/app/welcome/(desktop)/index.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { memo } from 'react';
+
+import ResponsiveIndex from '@/components/ResponsiveIndex';
+
+import Mobile from '../(mobile)';
+import Footer from './features/Footer';
+import Showcase from './features/Showcase';
+import Layout from './layout.responsive';
+
+export default memo(() => (
+  <ResponsiveIndex Mobile={Mobile}>
+    <Layout>
+      <Showcase />
+      <Footer />
+    </Layout>
+  </ResponsiveIndex>
+));

package/src/app/welcome/{DesktopLayout/Desktop.tsx → (desktop)/layout.desktop.tsx}

@@ -3,14 +3,14 @@ import Link from 'next/link';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import AppLayout from '@/layout/AppLayout';
+import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 
 import { useStyles } from '../features/Banner/style';
 
 const Desktop = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   return (
-    <AppLayout>
+    <AppLayoutDesktop>
       <Center
         className={styles.layout}
         flex={1}
@@ -21,11 +21,11 @@ const Desktop = memo<PropsWithChildren>(({ children }) => {
         <Link href={'/'}>
           <Logo className={styles.logo} size={36} type={'text'} />
         </Link>
-        <Flexbox className={styles.view} flex={1} style={{ maxWidth: 1024 }}>
+        <Flexbox className={styles.view} flex={1}>
           {children}
         </Flexbox>
       </Center>
-    </AppLayout>
+    </AppLayoutDesktop>
   );
 });
 

package/src/app/welcome/(desktop)/layout.responsive.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
+
+import MobileLayout from '../(mobile)/layout.mobile';
+import DesktopLayout from './layout.desktop';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+    {children}
+  </ResponsiveLayout>
+));

package/src/app/welcome/(mobile)/features/Header.tsx

@@ -0,0 +1,6 @@
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+const Header = memo(() => <MobileNavBar center={<Logo type={'text'} />} />);
+
+export default Header;

package/src/app/welcome/(mobile)/features/Showcase.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import Banner from '@/app/welcome/features/Banner';
+
+const Showcase = memo(() => (
+  <Flexbox align={'center'} justify={'center'} style={{ height: 'calc(100vh - 44px)' }}>
+    <Center gap={16}>
+      <Banner mobile />
+    </Center>
+    {/*TODO：暂时隐藏，待模板完成后再补回*/}
+    {/*<AgentTemplate width={width} />*/}
+  </Flexbox>
+));
+
+export default Showcase;

package/src/app/welcome/(mobile)/index.tsx

@@ -0,0 +1,10 @@
+import { memo } from 'react';
+
+import Showcase from './features/Showcase';
+import Layout from './layout.mobile';
+
+export default memo(() => (
+  <Layout>
+    <Showcase />
+  </Layout>
+));

package/src/app/welcome/(mobile)/layout.mobile.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+import Header from './features/Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <AppLayoutMobile navBar={<Header />} showTabBar style={{ background: theme.colorBgLayout }}>
+      <div style={{ paddingInline: 16 }}>{children}</div>
+    </AppLayoutMobile>
+  );
+});
+
+export default MobileLayout;

package/src/app/welcome/features/Banner/Hero.tsx

@@ -1,11 +1,10 @@
 import { LogoThree } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { genSize, useStyles } from './style';
 
-const Hero = memo<{ width: number }>(({ width }) => {
+const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
   const size = useMemo(
     () => ({
       base: genSize(width / 3.5, 240),
@@ -16,7 +15,7 @@ const Hero = memo<{ width: number }>(({ width }) => {
     [width],
   );
   const { styles } = useStyles(size.base);
-  const { mobile } = useResponsive();
+
   const { t } = useTranslation('welcome');
 
   return (

package/src/app/welcome/features/Banner/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { GridShowcase, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
@@ -16,13 +16,12 @@ import { useSessionStore } from '@/store/session';
 import Hero from './Hero';
 import { useStyles } from './style';
 
-const Banner = memo<{ mobile?: boolean }>(() => {
+const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { importConfig } = useImportConfig();
   const ref = useRef(null);
   const domSize = useSize(ref);
   const width = domSize?.width || 1024;
   const { t } = useTranslation('welcome');
-
   const { styles } = useStyles();
 
   const switchSession = useSessionStore((s) => s.switchSession);
@@ -32,34 +31,38 @@ const Banner = memo<{ mobile?: boolean }>(() => {
   }, []);
 
   return (
-    <Flexbox height={'80vh'} style={{ paddingTop: '10vh' }}>
-      <GridShowcase>
-        <div className={styles.container} ref={ref}>
-          <Hero width={width} />
-        </div>
-        <Flexbox gap={16} horizontal style={{ marginTop: 16 }}>
-          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
-            <Button size={'large'}>{t('button.import')}</Button>
-          </Upload>
-          <Link
-            href={SESSION_CHAT_URL()}
-            onClick={(e) => {
-              e.preventDefault();
-              switchSession();
-            }}
-          >
-            <Button size={'large'} type={'primary'}>
-              <Flexbox align={'center'} gap={4} horizontal>
-                {t('button.start')}
-                <Icon icon={SendHorizonal} />
-              </Flexbox>
-            </Button>
-          </Link>
-        </Flexbox>
-      </GridShowcase>
-      {/*TODO：暂时隐藏，待模板完成后再补回*/}
-      {/*<AgentTemplate width={width} />*/}
-    </Flexbox>
+    <>
+      <div className={styles.container} ref={ref}>
+        <Hero mobile={mobile} width={width} />
+      </div>
+      <Flexbox
+        className={styles.buttonGroup}
+        gap={16}
+        horizontal={!mobile}
+        justify={'center'}
+        width={'100%'}
+      >
+        <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
+          <Button block={mobile} size={'large'}>
+            {t('button.import')}
+          </Button>
+        </Upload>
+        <Link
+          href={SESSION_CHAT_URL()}
+          onClick={(e) => {
+            e.preventDefault();
+            switchSession();
+          }}
+        >
+          <Button block={mobile} size={'large'} type={'primary'}>
+            <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
+              {t('button.start')}
+              <Icon icon={SendHorizonal} />
+            </Flexbox>
+          </Button>
+        </Link>
+      </Flexbox>
+    </>
   );
 });
 

package/src/app/welcome/features/Banner/style.ts

@@ -1,8 +1,13 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token, stylish, cx }) => {
+export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) => {
   return {
+    buttonGroup: css`
+      .${prefixCls}-upload {
+        width: 100% !important;
+      }
+    `,
     container: css`
       z-index: 10;
 
@@ -49,8 +54,12 @@ export const useStyles = createStyles(({ css, token, stylish, cx }) => {
     view: cx(
       stylish.noScrollbar,
       css`
+        position: relative;
+
         overflow-x: hidden;
         overflow-y: auto;
+
+        max-width: 1024px;
         height: 100vh;
         padding: 32px 16px;
       `,

package/src/app/welcome/page.tsx

@@ -1,12 +1,14 @@
-import { t } from 'i18next';
-import { Metadata } from 'next';
+import { isMobileDevice } from '@/utils/responsive';
 
-import Banner from './features/Banner';
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
 
-export const generateMetadata = (): Metadata => ({
-  title: t('header', { ns: 'welcome' }),
-});
+const Page = () => {
+  const mobile = isMobileDevice();
 
-const Page = () => <Banner />;
+  const Page = mobile ? MobilePage : DesktopPage;
+
+  return <Page />;
+};
 
 export default Page;

package/src/components/ResponsiveIndex.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { FC, ReactNode } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ResponsiveIndexProps {
+  Mobile: FC;
+  children: ReactNode;
+}
+const ResponsiveIndex = ({ children, Mobile }: ResponsiveIndexProps) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : children;
+};
+
+export default ResponsiveIndex;

package/src/features/MobileTabBar/index.tsx

@@ -49,7 +49,7 @@ export default memo<{ className?: string }>(({ className }) => {
         key: SidebarTabKey.Setting,
         onClick: () => {
           setTab(SidebarTabKey.Setting);
-          router.push('/settings/mobile');
+          router.push('/settings');
         },
         title: t('tab.setting'),
       },

package/src/features/SideBar/BottomActions.tsx

@@ -102,7 +102,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         label: t('setting'),
         onClick: () => {
           setTab(SidebarTabKey.Setting);
-          router.push('/settings');
+          router.push('/settings/common');
         },
       },
     ],