@lobehub/chat 0.142.3 → 0.142.5

package/src/app/market/_layout/Mobile/Header.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+import ShareAgentButton from '../../features/ShareAgentButton';
+
+const Header = memo(() => {
+  return (
+    <MobileNavBar
+      center={<Logo type={'text'} />}
+      right={<ShareAgentButton mobile />}
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

package/src/app/market/_layout/Mobile/index.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+
+import Header from './Header';
+
+const MobileLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+};
+
+export default MobileLayout;

package/src/app/market/layout.ts

@@ -0,0 +1,8 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const MarketLayout = ServerLayout({ Desktop, Mobile });
+
+export default MarketLayout;

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

@@ -3,23 +3,21 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveContainer from '@/components/ResponsiveContainer';
 import MobileSwitchLoading from '@/features/MobileSwitchLoading';
-import { SettingsTabs } from '@/store/global/initialState';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 import Common from '../common';
 import { SettingsCommonProps } from '../common/Common';
-import DesktopLayout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), {
   loading: MobileSwitchLoading,
   ssr: false,
 }) as FC;
 
-export default memo<SettingsCommonProps>((props) => (
-  <ResponsiveContainer Mobile={Mobile}>
-    <DesktopLayout activeTab={SettingsTabs.Common}>
-      <Common {...props} />
-    </DesktopLayout>
-  </ResponsiveContainer>
-));
+const Desktop = memo<SettingsCommonProps>((props) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : <Common {...props} />;
+});
+
+export default Desktop;

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

@@ -1 +1,53 @@
-export { default } from './mobile';
+'use client';
+
+import { Divider } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { CURRENT_VERSION } from '@/const/version';
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useGlobalStore } from '@/store/global';
+import { commonSelectors } from '@/store/global/selectors';
+
+import SettingList from '../features/SettingList';
+import AvatarBanner from './features/AvatarBanner';
+import ExtraList from './features/ExtraList';
+
+const useStyles = createStyles(({ css, token }) => ({
+  divider: css`
+    height: 6px;
+    background: ${token.colorFillTertiary};
+  `,
+  footer: css`
+    font-size: 12px;
+    color: ${token.colorTextQuaternary};
+  `,
+}));
+
+const Setting = memo(() => {
+  const avatar = useGlobalStore(commonSelectors.userAvatar);
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox style={{ overflow: 'scroll' }}>
+      <AvatarBanner avatar={avatar}>
+        <Center style={{ marginTop: 32, position: 'absolute', zIndex: 2 }}>
+          <AvatarWithUpload size={88} />
+        </Center>
+      </AvatarBanner>
+      <div style={{ width: '100%' }}>
+        <SettingList />
+        <div className={styles.divider} />
+        <ExtraList />
+        <Center style={{ paddingInline: 64 }}>
+          <Divider>
+            <span className={styles.footer}>LobeChat v{CURRENT_VERSION}</span>
+          </Divider>
+        </Center>
+      </div>
+    </Flexbox>
+  );
+});
+
+export default Setting;

package/src/app/settings/{(desktop)/features → _layout/Desktop}/Header.tsx

@@ -1,14 +1,19 @@
+'use client';
+
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { Tag } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(({ activeTab }: { activeTab: SettingsTabs }) => {
+const Header = memo(() => {
   const { t } = useTranslation('setting');
 
+  const activeKey = useActiveSettingsKey();
+
   return (
     <ChatHeader
       left={
@@ -16,9 +21,9 @@ const Header = memo(({ activeTab }: { activeTab: SettingsTabs }) => {
           <ChatHeaderTitle
             title={
               <Flexbox align={'center'} gap={8} horizontal>
-                {t(`tab.${activeTab}`)}
+                {t(`tab.${activeKey}`)}
 
-                {activeTab === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
+                {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
               </Flexbox>
             }
           />

package/src/app/settings/{(desktop)/features → _layout/Desktop}/SideBar.tsx

@@ -1,9 +1,13 @@
+'use client';
+
 import { createStyles, useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SettingList, { SettingListProps } from '../../features/SettingList';
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+
+import SettingList from '../../features/SettingList';
 import UpgradeAlert from '../../features/UpgradeAlert';
 
 const useStyles = createStyles(({ stylish, token, css }) => ({
@@ -20,8 +24,9 @@ const useStyles = createStyles(({ stylish, token, css }) => ({
   `,
 }));
 
-const SideBar = memo<SettingListProps>(({ activeTab }) => {
+const SideBar = memo(() => {
   const { styles } = useStyles();
+  const activeKey = useActiveSettingsKey();
 
   const { t } = useTranslation('common');
   const { mobile } = useResponsive();
@@ -33,7 +38,7 @@ const SideBar = memo<SettingListProps>(({ activeTab }) => {
       </Flexbox>
       <Flexbox gap={8} style={{ paddingInline: 8 }}>
         <UpgradeAlert />
-        <SettingList activeTab={activeTab} mobile={mobile} />
+        <SettingList activeTab={activeKey} mobile={mobile} />
       </Flexbox>
     </Flexbox>
   );

package/src/app/settings/_layout/Desktop/index.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
+
+import Header from './Header';
+import SideBar from './SideBar';
+
+const Desktop = memo<PropsWithChildren>(({ children }) => (
+  <>
+    <SideBar />
+    <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
+      <Header />
+      <Flexbox align={'center'} flex={1} padding={24} style={{ overflowY: 'scroll' }}>
+        <SafeSpacing />
+        <Center gap={16} width={'100%'}>
+          {children}
+        </Center>
+      </Flexbox>
+    </Flexbox>
+  </>
+));
+
+export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });

package/src/app/settings/{(mobile)/features/Header/index.tsx → _layout/Mobile/SubSettingHeader.tsx}

@@ -5,31 +5,32 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
-interface HeaderProps {
-  activeTab: SettingsTabs;
-}
-
-const Header = memo<HeaderProps>(({ activeTab }) => {
+const Header = memo(() => {
   const { t } = useTranslation('setting');
 
   const router = useRouter();
-
+  const activeSettingsKey = useActiveSettingsKey();
   return (
     <MobileNavBar
       center={
         <MobileNavBarTitle
           title={
             <Flexbox align={'center'} gap={4} horizontal>
-              {t(`tab.${activeTab}`)}
-              {activeTab === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
+              {t(`tab.${activeSettingsKey}`)}
+              {activeSettingsKey === SettingsTabs.Sync && (
+                <Tag color={'gold'}>{t('tab.experiment')}</Tag>
+              )}
             </Flexbox>
           }
         />
       }
       onBackClick={() => router.push('/settings')}
       showBackButton
+      style={mobileHeaderSticky}
     />
   );
 });

package/src/app/settings/_layout/Mobile/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import { useIsSubSlug } from '@/hooks/useIsSubSlug';
+
+import SubSettingHeader from './SubSettingHeader';
+
+const MobileLayout = ({ children }: PropsWithChildren) => {
+  const isSubPath = useIsSubSlug();
+
+  if (isSubPath)
+    return (
+      <>
+        <SubSettingHeader />
+        {children}
+      </>
+    );
+
+  return children;
+};
+
+export default MobileLayout;

package/src/app/settings/layout.ts

@@ -0,0 +1,8 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const SettingsLayout = ServerLayout({ Desktop, Mobile });
+
+export default SettingsLayout;

package/src/app/settings/page.tsx

@@ -7,11 +7,13 @@ import MobilePage from './(mobile)';
 const Page = () => {
   const mobile = isMobileDevice();
 
-  const Page = mobile ? MobilePage : DesktopPage;
+  if (mobile) return <MobilePage />;
 
   const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
 
-  return <Page showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />;
+  return (
+    <DesktopPage showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+  );
 };
 
 export default Page;

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

@@ -1,25 +1,17 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
+import { memo } from 'react';
 
-import ResponsiveContainer from '@/components/ResponsiveContainer';
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
 
 import Footer from './features/Footer';
 import Showcase from './features/Showcase';
-import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-export default memo(() => (
-  <ResponsiveContainer Mobile={Mobile}>
-    <Layout>
-      <Showcase />
-      <Footer />
-    </Layout>
-  </ResponsiveContainer>
+const Desktop = memo(() => (
+  <>
+    <Showcase />
+    <Footer />
+  </>
 ));
+
+export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

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

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

package/src/app/welcome/_layout/Desktop.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Logo } from '@lobehub/ui';
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
+
+import { useStyles } from '../features/Banner/style';
+
+const Desktop = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+  return (
+    <Center
+      className={styles.layout}
+      flex={1}
+      height={'100%'}
+      horizontal
+      style={{ position: 'relative' }}
+    >
+      <Logo className={styles.logo} size={36} type={'text'} />
+      <Flexbox className={styles.view} flex={1}>
+        {children}
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default ClientResponsiveLayout({ Desktop, Mobile: () => import('./Mobile') });

package/src/app/welcome/_layout/Mobile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  return <div style={{ height: '100%', paddingInline: 16 }}>{children}</div>;
+});
+
+export default MobileLayout;

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

@@ -10,7 +10,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import DataImporter from '@/features/DataImporter';
 import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 import Hero from './Hero';
 import { useStyles } from './style';
@@ -19,7 +18,6 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
   const router = useRouter();
   const { styles } = useStyles();
-  const [switchSession] = useSessionStore((s) => [s.switchSession]);
   const [switchBackToChat, isMobile] = useGlobalStore((s) => [s.switchBackToChat, s.isMobile]);
 
   return (
@@ -36,7 +34,7 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
       >
         <DataImporter
           onFinishImport={() => {
-            switchSession();
+            router.push('/chat');
           }}
         >
           <Button block={mobile} size={'large'}>

package/src/app/welcome/layout.ts

@@ -0,0 +1,8 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const WelcomeLayout = ServerLayout({ Desktop, Mobile });
+
+export default WelcomeLayout;

package/src/components/client/ClientResponsiveContent/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Loader } from 'next/dist/shared/lib/dynamic';
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
+
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ClientResponsiveContentProps {
+  Desktop: FC;
+  Mobile: Loader;
+}
+
+const ClientResponsiveContent = ({ Mobile, Desktop }: ClientResponsiveContentProps) => {
+  const MobileComponent = dynamic(Mobile, {
+    loading: MobileSwitchLoading,
+    ssr: false,
+  });
+
+  const Content = memo(() => {
+    const mobile = useIsMobile();
+
+    return mobile ? <MobileComponent /> : <Desktop />;
+  });
+
+  Content.displayName = 'ClientResponsiveContent';
+
+  return Content;
+};
+
+export default ClientResponsiveContent;

package/src/components/client/ClientResponsiveLayout.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Loader } from 'next/dist/shared/lib/dynamic';
+import dynamic from 'next/dynamic';
+import { FC, PropsWithChildren, memo } from 'react';
+
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ClientResponsiveLayoutProps {
+  Desktop: FC<PropsWithChildren>;
+  Mobile: Loader;
+}
+
+const ClientResponsiveLayout = ({ Desktop, Mobile }: ClientResponsiveLayoutProps) => {
+  const MobileComponent = dynamic(Mobile, {
+    loading: MobileSwitchLoading,
+    ssr: false,
+  }) as FC<PropsWithChildren>;
+
+  const Layout = memo<PropsWithChildren>(({ children }) => {
+    const mobile = useIsMobile();
+
+    return mobile ? <MobileComponent>{children}</MobileComponent> : <Desktop>{children}</Desktop>;
+  });
+
+  Layout.displayName = 'ClientLayout';
+
+  return Layout;
+};
+
+export default ClientResponsiveLayout;

package/src/components/server/ServerLayout.tsx

@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren } from 'react';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+interface ServerLayoutProps {
+  Desktop: FC<PropsWithChildren>;
+  Mobile: FC<PropsWithChildren>;
+}
+
+const ServerLayout =
+  ({ Desktop, Mobile }: ServerLayoutProps) =>
+  ({ children }: PropsWithChildren) => {
+    const mobile = isMobileDevice();
+
+    return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+  };
+
+ServerLayout.displayName = 'ServerLayout';
+
+export default ServerLayout;

package/src/features/AvatarWithUpload/index.tsx

@@ -1,7 +1,7 @@
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import Avatar from 'next/image';
-import { CSSProperties, memo } from 'react';
+import { CSSProperties, memo, useCallback } from 'react';
 
 import { imageUrl } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
@@ -43,14 +43,17 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(
       s.updateAvatar,
     ]);
 
-    const handleUploadAvatar = createUploadImageHandler((avatar) => {
-      const img = new Image();
-      img.src = avatar;
-      img.addEventListener('load', () => {
-        const webpBase64 = imageToBase64({ img, size: compressSize });
-        updateAvatar(webpBase64);
-      });
-    });
+    const handleUploadAvatar = useCallback(
+      createUploadImageHandler((avatar) => {
+        const img = new Image();
+        img.src = avatar;
+        img.addEventListener('load', () => {
+          const webpBase64 = imageToBase64({ img, size: compressSize });
+          updateAvatar(webpBase64);
+        });
+      }),
+      [],
+    );
 
     return (
       <div className={styles} id={id} style={{ maxHeight: size, maxWidth: size, ...style }}>

package/src/features/MobileSwitchLoading/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useTranslation } from 'react-i18next';
 
 import FullscreenLoading from '@/components/FullscreenLoading';

package/src/hooks/useActiveSettingsKey.ts

@@ -0,0 +1,16 @@
+import { usePathname } from 'next/navigation';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+/**
+ * Returns the active setting page key (common/sync/agent/...)
+ */
+export const useActiveSettingsKey = () => {
+  const pathname = usePathname();
+
+  const tabs = pathname.split('/').at(-1);
+
+  if (tabs === 'settings') return SettingsTabs.Common;
+
+  return tabs as SettingsTabs;
+};

package/src/hooks/useActiveTabKey.ts

@@ -0,0 +1,12 @@
+import { usePathname } from 'next/navigation';
+
+import { SidebarTabKey } from '@/store/global/initialState';
+
+/**
+ * Returns the active tab key (chat/market/settings/...)
+ */
+export const useActiveTabKey = () => {
+  const pathname = usePathname();
+
+  return pathname.split('/').find(Boolean)! as SidebarTabKey;
+};

package/src/hooks/useIsMobile.ts

@@ -1,7 +1,8 @@
 import { useResponsive } from 'antd-style';
+import { useMemo } from 'react';
 
 export const useIsMobile = (): boolean => {
   const { mobile } = useResponsive();
 
-  return !!mobile;
+  return useMemo(() => !!mobile, [mobile]);
 };

package/src/hooks/useIsSubSlug.ts

@@ -0,0 +1,12 @@
+import { usePathname } from 'next/navigation';
+
+/**
+ * Returns true if the current path has a sub slug (`/chat/mobile` or `/chat/settings`)
+ */
+export const useIsSubSlug = () => {
+  const pathname = usePathname();
+
+  const slugs = pathname.split('/').filter(Boolean);
+
+  return slugs.length > 1;
+};

package/src/layout/AuthProvider/index.tsx

@@ -0,0 +1,16 @@
+import { SessionProvider } from 'next-auth/react';
+import { PropsWithChildren } from 'react';
+
+import { getServerConfig } from '@/config/server';
+import { API_ENDPOINTS } from '@/services/_url';
+
+const { ENABLE_OAUTH_SSO = false } = getServerConfig();
+
+const AuthProvider = ({ children }: PropsWithChildren) =>
+  ENABLE_OAUTH_SSO ? (
+    <SessionProvider basePath={API_ENDPOINTS.oauth}>{children}</SessionProvider>
+  ) : (
+    children
+  );
+
+export default AuthProvider;