@lobehub/chat 0.152.3 → 0.152.5

package/src/app/(main)/market/{_layout/Mobile/DetailModal.tsx → @detail/_layout/Mobile.tsx}

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const DetailModal = memo<PropsWithChildren>(({ children }) => {
+const AgentDetail = memo<PropsWithChildren>(({ children }) => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -29,4 +29,4 @@ const DetailModal = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default DetailModal;
+export default AgentDetail;

package/src/app/(main)/market/@detail/default.tsx

@@ -1,10 +1,19 @@
+import ServerLayout from '@/components/server/ServerLayout';
 import { isMobileDevice } from '@/utils/responsive';
 
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
 import AgentDetailContent from './features/AgentDetailContent';
 
+const Layout = ServerLayout({ Desktop, Mobile });
+
 const Detail = () => {
   const mobile = isMobileDevice();
-  return <AgentDetailContent mobile={mobile} />;
+  return (
+    <Layout>
+      <AgentDetailContent mobile={mobile} />
+    </Layout>
+  );
 };
 
 Detail.displayName = 'AgentDetail';

package/src/app/(main)/market/_layout/Desktop/index.tsx

@@ -4,7 +4,6 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 
 import { LayoutProps } from '../type';
-import DetailSidebar from './DetailSidebar';
 import Header from './Header';
 import Hero from './Hero';
 
@@ -30,7 +29,7 @@ const Layout = ({ children, detail }: LayoutProps) => {
             {children}
           </Flexbox>
         </Flexbox>
-        <DetailSidebar>{detail}</DetailSidebar>
+        {detail}
       </Flexbox>
     </Flexbox>
   );

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

@@ -1,7 +1,6 @@
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 
 import { LayoutProps } from '../type';
-import DetailModal from './DetailModal';
 import Header from './Header';
 
 const Layout = ({ children, detail }: LayoutProps) => {
@@ -11,11 +10,10 @@ const Layout = ({ children, detail }: LayoutProps) => {
         gap={16}
         header={<Header />}
         style={{ paddingInline: 16, paddingTop: 8 }}
-        withNav
       >
         {children}
       </MobileContentLayout>
-      <DetailModal>{detail}</DetailModal>
+      {detail}
     </>
   );
 };

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

@@ -0,0 +1,23 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
+
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import Common from '../common';
+import { SettingsCommonProps } from '../common/Common';
+
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
+
+const Desktop = memo<SettingsCommonProps>((props) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : <Common {...props} />;
+});
+
+export default Desktop;

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

@@ -0,0 +1,68 @@
+import { DivProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Image from 'next/image';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  banner: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 172px;
+    min-height: 172px;
+    max-height: 172px;
+  `,
+  bannerBox: css`
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+
+    background: ${token.colorBgLayout};
+
+    mask-image: linear-gradient(to bottom, #fff, transparent);
+  `,
+  bannerImg: css`
+    position: absolute;
+    top: -50%;
+    filter: blur(100px) saturate(2);
+  `,
+}));
+
+interface AgentCardBannerProps extends DivProps {
+  avatar: string;
+  size?: number;
+}
+
+const AvatarBanner = memo<AgentCardBannerProps>(
+  ({ avatar, className, size = 200, children, ...props }) => {
+    const { styles, cx } = useStyles();
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.banner, className)}
+        justify={'center'}
+        {...props}
+      >
+        <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
+          <Image
+            alt={'banner'}
+            className={styles.bannerImg}
+            height={size}
+            src={avatar || DEFAULT_USER_AVATAR_URL}
+            unoptimized
+            width={size}
+          />
+        </Flexbox>
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default AvatarBanner;

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

@@ -0,0 +1,65 @@
+import { Upload } from 'antd';
+import { useResponsive } from 'antd-style';
+import { Feather, FileClock, HardDriveDownload, HardDriveUpload } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CHANGELOG, FEEDBACK } from '@/const/url';
+import { useImportConfig } from '@/hooks/useImportConfig';
+import { configService } from '@/services/config';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Item from '../../features/SettingList/Item';
+
+interface ExtraListProps {
+  activeTab?: SettingsTabs;
+}
+const ExtraList = memo<ExtraListProps>(({ activeTab }) => {
+  const { t } = useTranslation('common');
+
+  const { importConfig } = useImportConfig();
+  const { mobile } = useResponsive();
+  const items = [
+    {
+      icon: HardDriveDownload,
+      label: t('export'),
+      onClick: configService.exportAll,
+      value: 'export',
+    },
+    {
+      icon: Feather,
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: FileClock,
+      label: t('changelog'),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+      value: 'changelog',
+    },
+  ];
+
+  return (
+    <>
+      <Upload
+        beforeUpload={(file) => {
+          importConfig(file);
+
+          return false;
+        }}
+        maxCount={1}
+        showUploadList={false}
+      >
+        <Item icon={HardDriveUpload} label={t('import')} style={{ width: '100vw' }} />
+      </Upload>
+      {items.map(({ value, icon, label, onClick }) => (
+        <div key={value} onClick={onClick}>
+          <Item active={mobile ? false : activeTab === value} icon={icon} label={label} />
+        </div>
+      ))}
+    </>
+  );
+});
+
+export default ExtraList;

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

@@ -0,0 +1,53 @@
+'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 { useUserStore } from '@/store/user';
+import { commonSelectors } from '@/store/user/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 = useUserStore(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/(main)/settings/_layout/Desktop/Header.tsx

@@ -1,91 +1,36 @@
 'use client';
 
-import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import { Drawer, type DrawerProps, Tag } from 'antd';
-import { createStyles } from 'antd-style';
-import { Menu } from 'lucide-react';
-import { PropsWithChildren, memo, useState } from 'react';
+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 BrandWatermark from '@/components/BrandWatermark';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
 
-const useStyles = createStyles(({ token, css }) => ({
-  container: css`
-    position: relative;
-    height: 54px;
-    background: ${token.colorBgContainer};
-  `,
-  title: css`
-    font-size: 18px;
-    font-weight: 700;
-  `,
-}));
+const Header = memo(() => {
+  const { t } = useTranslation('setting');
 
-const Header = memo<PropsWithChildren & Pick<DrawerProps, 'getContainer'>>(
-  ({ children, getContainer }) => {
-    const [open, setOpen] = useState(false);
-    const { styles, theme } = useStyles();
-    const { t } = useTranslation('setting');
+  const activeKey = useActiveSettingsKey();
 
-    const activeKey = useActiveSettingsKey();
+  return (
+    <ChatHeader
+      left={
+        <div style={{ paddingLeft: 8 }}>
+          <ChatHeaderTitle
+            title={
+              <Flexbox align={'center'} gap={8} horizontal>
+                {t(`tab.${activeKey}`)}
 
-    return (
-      <>
-        <ChatHeader
-          className={styles.container}
-          left={
-            <div style={{ paddingLeft: 8 }}>
-              <ChatHeaderTitle
-                title={
-                  <Flexbox align={'center'} className={styles.title} gap={4} horizontal>
-                    <ActionIcon
-                      color={theme.colorText}
-                      icon={Menu}
-                      onClick={() => setOpen(true)}
-                      size={{ blockSize: 32, fontSize: 18 }}
-                    />
-                    {t(`tab.${activeKey}`)}
-                    {activeKey === SettingsTabs.Sync && (
-                      <Tag color={'gold'}>{t('tab.experiment')}</Tag>
-                    )}
-                  </Flexbox>
-                }
-              />
-            </div>
-          }
-        />
-        <Drawer
-          bodyStyle={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 20,
-            justifyContent: 'space-between',
-            padding: 16,
-          }}
-          getContainer={getContainer}
-          headerStyle={{ display: 'none' }}
-          maskStyle={{ background: 'transparent' }}
-          onClick={() => setOpen(false)}
-          onClose={() => setOpen(false)}
-          open={open}
-          placement={'left'}
-          rootStyle={{ position: 'absolute' }}
-          style={{
-            background: theme.colorBgContainer,
-            borderRight: `1px solid ${theme.colorSplit}`,
-          }}
-          width={260}
-          zIndex={10}
-        >
-          {children}
-          <BrandWatermark paddingInline={12} />
-        </Drawer>
-      </>
-    );
-  },
-);
+                {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
+              </Flexbox>
+            }
+          />
+        </div>
+      }
+    />
+  );
+});
 
 export default Header;

package/src/app/(main)/settings/_layout/Desktop/SideBar.tsx

@@ -1,59 +1,47 @@
 'use client';
 
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
-import BrandWatermark from '@/components/BrandWatermark';
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 
-const useStyles = createStyles(({ token, css }) => ({
+import SettingList from '../../features/SettingList';
+import UpgradeAlert from '../../features/UpgradeAlert';
+
+const useStyles = createStyles(({ stylish, token, css }) => ({
+  body: stylish.noScrollbar,
   container: css`
-    padding: 24px 12px 16px;
-    background: ${token.colorBgContainer};
     border-inline-end: 1px solid ${token.colorBorder};
   `,
-  desc: css`
-    line-height: 1.4;
-    color: ${token.colorTextDescription};
-  `,
-  header: css`
-    padding: 0 0.75rem;
-  `,
   logo: css`
     fill: ${token.colorText};
   `,
-  title: css`
-    margin: 0;
-    font-size: 26px;
-    font-weight: 600;
-    line-height: 1.3;
+  top: css`
+    font-size: 20px;
+    font-weight: bold;
   `,
 }));
 
-interface SidebarLayoutProps extends FlexboxProps {
-  desc?: string;
-  title?: string;
-}
+const SideBar = memo(() => {
+  const { styles } = useStyles();
+  const activeKey = useActiveSettingsKey();
+
+  const { t } = useTranslation('common');
+  const { mobile } = useResponsive();
 
-const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLayoutProps) => {
-  const { cx, styles } = useStyles();
-  const { t } = useTranslation('setting');
   return (
-    <Flexbox
-      className={cx(styles.container, className)}
-      flex={'none'}
-      gap={20}
-      width={280}
-      {...rest}
-    >
-      <Flexbox className={styles.header} gap={4}>
-        <h1 className={styles.title}>{title || t('header.title')}</h1>
-        <p className={styles.desc}>{desc || t('header.desc')}</p>
+    <Flexbox className={styles.container} width={280}>
+      <Flexbox className={styles.top} padding={16}>
+        {t('setting')}
+      </Flexbox>
+      <Flexbox gap={8} style={{ paddingInline: 8 }}>
+        <UpgradeAlert />
+        <SettingList activeTab={activeKey} mobile={mobile} />
       </Flexbox>
-      {children}
-      <BrandWatermark paddingInline={12} />
     </Flexbox>
   );
-};
+});
 
-export default SidebarLayout;
+export default SideBar;

package/src/app/(main)/settings/_layout/Desktop/index.tsx

@@ -1,51 +1,27 @@
 'use client';
 
-import { useResponsive } from 'antd-style';
-import { memo, useRef } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
 
-import { LayoutProps } from '../type';
 import Header from './Header';
 import SideBar from './SideBar';
 
-const Layout = memo<LayoutProps>(({ children, category }) => {
-  const ref = useRef<any>(null);
-  const { md = true, mobile = false } = useResponsive();
-
-  return (
-    <Flexbox
-      height={'100%'}
-      horizontal={md}
-      ref={ref}
-      style={{ position: 'relative' }}
-      width={'100%'}
-    >
-      {md ? (
-        <SideBar>{category}</SideBar>
-      ) : (
-        <Header getContainer={() => ref.current}>{category}</Header>
-      )}
-      <Flexbox
-        align={'center'}
-        height={'100%'}
-        style={{ overflowX: 'hidden', overflowY: 'auto' }}
-        width={'100%'}
-      >
-        <Flexbox
-          gap={64}
-          style={{
-            maxWidth: 1024,
-            padding: mobile ? undefined : '1.75rem 1.5rem 1.75rem 2rem',
-          }}
-          width={'100%'}
-        >
+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}
-        </Flexbox>
+        </Center>
       </Flexbox>
     </Flexbox>
-  );
-});
-
-Layout.displayName = 'DesktopSettingsLayout';
+  </>
+));
 
-export default Layout;
+export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });

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

@@ -1,5 +1,3 @@
-'use client';
-
 import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
 import { Tag } from 'antd';
 import { useRouter } from 'next/navigation';
@@ -30,7 +28,7 @@ const Header = memo(() => {
           }
         />
       }
-      onBackClick={() => router.push('/me')}
+      onBackClick={() => router.push('/settings')}
       showBackButton
       style={mobileHeaderSticky}
     />

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

@@ -1,12 +1,23 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import { useIsSubSlug } from '@/hooks/useIsSubSlug';
 
-import { LayoutProps } from '../type';
-import Header from './Header';
+import SubSettingHeader from './SubSettingHeader';
 
-const Layout = ({ children }: LayoutProps) => {
-  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
-};
+const MobileLayout = ({ children }: PropsWithChildren) => {
+  const isSubPath = useIsSubSlug();
 
-Layout.displayName = 'MobileSettingsLayout';
+  if (isSubPath)
+    return (
+      <MobileContentLayout header={<SubSettingHeader />} withNav={false}>
+        {children}
+      </MobileContentLayout>
+    );
+
+  return children;
+};
 
-export default Layout;
+export default MobileLayout;

package/src/app/(main)/settings/about/AboutList.tsx

@@ -0,0 +1,53 @@
+import { Feather, FileClock, Heart } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url';
+
+import Item from '../features/SettingList/Item';
+import { useStyles } from './style';
+
+const AboutList = memo(() => {
+  const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+  const items = [
+    {
+      icon: Feather,
+      label: t('feedback', { ns: 'common' }),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: FileClock,
+      label: t('changelog', { ns: 'common' }),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+      value: 'changelog',
+    },
+    {
+      icon: Heart,
+      label: t('about', { ns: 'common' }),
+      onClick: () => window.open(ABOUT, '__blank'),
+      value: 'about',
+    },
+  ];
+
+  return (
+    <div className={styles.wrapper}>
+      <Flexbox className={styles.container} gap={24} padding={16}>
+        <Flexbox className={styles.title} gap={8} horizontal>
+          {t('about.title')}
+        </Flexbox>
+        <Flexbox width={'100%'}>
+          {items.map(({ value, icon, label, onClick }) => (
+            <div key={value} onClick={onClick}>
+              <Item active={false} icon={icon} label={label} />
+            </div>
+          ))}
+        </Flexbox>
+      </Flexbox>
+    </div>
+  );
+});
+
+export default AboutList;