@lobehub/chat 0.152.6 → 0.152.7

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

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

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

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

package/src/app/(main)/settings/@category/default.tsx

@@ -0,0 +1,16 @@
+import UpgradeAlert from '@/app/(main)/settings/features/UpgradeAlert';
+
+import CategoryContent from './features/CategoryContent';
+
+const Category = () => {
+  return (
+    <>
+      <CategoryContent />
+      <UpgradeAlert />
+    </>
+  );
+};
+
+Category.displayName = 'SettingCategory';
+
+export default Category;

package/src/app/(main)/settings/@category/features/CategoryContent.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import Menu from '@/components/Menu';
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import { useCategory } from '../../hooks/useCategory';
+
+const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
+  const activeTab = useActiveSettingsKey();
+  const { tab = SettingsTabs.Common } = useQuery();
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+
+  return (
+    <Menu
+      items={cateItems}
+      onClick={({ key }) => {
+        router.push(urlJoin('/settings', key));
+      }}
+      selectable
+      selectedKeys={[modal ? tab : (activeTab as any)]}
+      variant={'compact'}
+    />
+  );
+});
+
+export default CategoryContent;

package/src/app/(main)/settings/@category/features/UpgradeAlert.tsx

@@ -0,0 +1,38 @@
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MANUAL_UPGRADE_URL } from '@/const/url';
+import { useGlobalStore } from '@/store/global';
+
+const UpgradeAlert = memo(() => {
+  const [hasNewVersion, latestVersion] = useGlobalStore((s) => [s.hasNewVersion, s.latestVersion]);
+  const { t } = useTranslation('common');
+
+  if (!hasNewVersion) return null;
+
+  return (
+    <Alert
+      action={
+        <Link
+          aria-label={t('upgradeVersion.action')}
+          href={MANUAL_UPGRADE_URL}
+          style={{ marginBottom: 12 }}
+          target={'_blank'}
+        >
+          <Button block size={'small'} type={'primary'}>
+            {t('upgradeVersion.action')}
+          </Button>
+        </Link>
+      }
+      closable
+      message={t('upgradeVersion.newVersion', { version: latestVersion })}
+      showIcon={false}
+      type={'info'}
+    />
+  );
+});
+
+export default UpgradeAlert;

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

@@ -1,36 +1,91 @@
 'use client';
 
-import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import { Tag } from 'antd';
-import { memo } from 'react';
+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 { 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 Header = memo(() => {
-  const { t } = useTranslation('setting');
+const useStyles = createStyles(({ token, css }) => ({
+  container: css`
+    position: relative;
+    height: 54px;
+    background: ${token.colorBgContainer};
+  `,
+  title: css`
+    font-size: 18px;
+    font-weight: 700;
+  `,
+}));
 
-  const activeKey = useActiveSettingsKey();
+const Header = memo<PropsWithChildren & Pick<DrawerProps, 'getContainer'>>(
+  ({ children, getContainer }) => {
+    const [open, setOpen] = useState(false);
+    const { styles, theme } = useStyles();
+    const { t } = useTranslation('setting');
 
-  return (
-    <ChatHeader
-      left={
-        <div style={{ paddingLeft: 8 }}>
-          <ChatHeaderTitle
-            title={
-              <Flexbox align={'center'} gap={8} horizontal>
-                {t(`tab.${activeKey}`)}
+    const activeKey = useActiveSettingsKey();
 
-                {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
-              </Flexbox>
-            }
-          />
-        </div>
-      }
-    />
-  );
-});
+    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>
+      </>
+    );
+  },
+);
 
 export default Header;

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

@@ -1,47 +1,59 @@
 'use client';
 
-import { createStyles, useResponsive } from 'antd-style';
-import { memo } from 'react';
+import { createStyles } from 'antd-style';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import BrandWatermark from '@/components/BrandWatermark';
 
-import SettingList from '../../features/SettingList';
-import UpgradeAlert from '../../features/UpgradeAlert';
-
-const useStyles = createStyles(({ stylish, token, css }) => ({
-  body: stylish.noScrollbar,
+const useStyles = createStyles(({ token, css }) => ({
   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};
   `,
-  top: css`
-    font-size: 20px;
-    font-weight: bold;
+  title: css`
+    margin: 0;
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 1.3;
   `,
 }));
 
-const SideBar = memo(() => {
-  const { styles } = useStyles();
-  const activeKey = useActiveSettingsKey();
-
-  const { t } = useTranslation('common');
-  const { mobile } = useResponsive();
+interface SidebarLayoutProps extends FlexboxProps {
+  desc?: string;
+  title?: string;
+}
 
+const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLayoutProps) => {
+  const { cx, styles } = useStyles();
+  const { t } = useTranslation('setting');
   return (
-    <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
+      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>
+      {children}
+      <BrandWatermark paddingInline={12} />
     </Flexbox>
   );
-});
+};
 
-export default SideBar;
+export default SidebarLayout;

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

@@ -1,27 +1,51 @@
 '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 { useResponsive } from 'antd-style';
+import { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
+import { LayoutProps } from '../type';
 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%'}>
+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 : '32px 24px',
+          }}
+          width={'100%'}
+        >
           {children}
-        </Center>
+        </Flexbox>
       </Flexbox>
     </Flexbox>
-  </>
-));
+  );
+});
+
+Layout.displayName = 'DesktopSettingsLayout';
 
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });
+export default Layout;

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

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

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

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

package/src/app/(main)/settings/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  category: ReactNode;
+  children: ReactNode;
+}

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { Grid, Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import {
+  Book,
+  Feather,
+  FileClock,
+  Github,
+  Heart,
+  HeartHandshake,
+  Home,
+  Lock,
+  Rss,
+} from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import {
+  ABOUT,
+  BLOG,
+  CHANGELOG,
+  FEEDBACK,
+  GITHUB,
+  OFFICIAL_SITE,
+  PRIVACY_URL,
+  TERMS_URL,
+} from '@/const/url';
+
+const useStyles = createStyles(({ css, token, responsive, isDarkMode }) => ({
+  card: css`
+    cursor: pointer;
+
+    padding: 20px;
+
+    background: ${isDarkMode ? token.colorFillTertiary : token.colorBgContainer};
+    border: 1px solid ${token.colorFillSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    &:hover {
+      background: ${isDarkMode ? token.colorFillSecondary : token.colorBgContainer};
+      border: 1px solid ${token.colorFill};
+    }
+
+    ${responsive.mobile} {
+      padding: 16px;
+    }
+  `,
+  container: css`
+    ${responsive.mobile} {
+      padding-inline: 16px;
+    }
+  `,
+}));
+
+const AboutList = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('common');
+
+  const items = [
+    {
+      href: OFFICIAL_SITE,
+      icon: Home,
+      label: t('officialSite'),
+      value: 'officialSite',
+    },
+
+    {
+      href: FEEDBACK,
+      icon: Book,
+      label: t('document'),
+      value: 'feedback',
+    },
+    {
+      href: BLOG,
+      icon: Rss,
+      label: t('blog'),
+      value: 'blog',
+    },
+    {
+      href: GITHUB,
+      icon: Github,
+      label: 'GitHub',
+      value: 'feedback',
+    },
+    {
+      href: FEEDBACK,
+      icon: Feather,
+      label: t('feedback'),
+      value: 'feedback',
+    },
+    {
+      href: CHANGELOG,
+      icon: FileClock,
+      label: t('changelog'),
+      value: 'changelog',
+    },
+    {
+      href: TERMS_URL,
+      icon: HeartHandshake,
+      label: t('terms'),
+      value: 'terms',
+    },
+    {
+      href: PRIVACY_URL,
+      icon: Lock,
+      label: t('privacy'),
+      value: 'privacy',
+    },
+    {
+      href: ABOUT,
+      icon: Heart,
+      label: t('about'),
+      value: 'about',
+    },
+  ];
+
+  return (
+    <Grid className={styles.container} maxItemWidth={144} width={'100%'}>
+      {items.map(({ value, icon, label, href }) => (
+        <Link href={href} key={value} style={{ color: 'inherit' }} target={'_blank'}>
+          <Flexbox className={styles.card} gap={8} horizontal>
+            <Icon icon={icon} size={{ fontSize: 20 }} />
+            {label}
+          </Flexbox>
+        </Link>
+      ))}
+    </Grid>
+  );
+});
+
+export default AboutList;

package/src/app/(main)/settings/about/features/Analytics.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { Switch } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/selectors';
+
+type SettingItemGroup = ItemGroup;
+
+const Analytics = memo(() => {
+  const { t } = useTranslation('setting');
+  const checked = useUserStore(preferenceSelectors.userAllowTrace);
+  const [updatePreference] = useUserStore((s) => [s.updatePreference]);
+
+  const items: SettingItemGroup = {
+    children: [
+      {
+        children: (
+          <Switch
+            checked={!!checked}
+            onChange={(e) => {
+              updatePreference({ telemetry: e });
+            }}
+          />
+        ),
+        desc: t('analytics.telemetry.desc'),
+        label: t('analytics.telemetry.title'),
+        minWidth: undefined,
+        valuePropName: 'checked',
+      },
+    ],
+    title: t('analytics.title'),
+  };
+
+  return <Form items={[items]} itemsType={'group'} {...FORM_STYLE} />;
+});
+
+export default Analytics;

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { Logo, Tag } from '@lobehub/ui';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { OFFICIAL_SITE, RELEASES_URL } from '@/const/url';
+import { CURRENT_VERSION } from '@/const/version';
+import Follow from '@/features/Follow';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
+
+import AboutList from './features/AboutList';
+import Analytics from './features/Analytics';
+
+const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
+
+const Page = memo(({ mobile }: { mobile?: boolean }) => {
+  const enabledTelemetryChat = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
+
+  return (
+    <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
+      <Link href={OFFICIAL_SITE} target={'_blank'}>
+        <Logo size={mobile ? 100 : 120} />
+      </Link>
+      <h1 style={{ fontSize: mobile ? 32 : 36, fontWeight: 900, lineHeight: 1, marginBottom: 0 }}>
+        LobeChat
+      </h1>
+      <Link href={RELEASES_URL} target={'_blank'}>
+        <Tag>v{CURRENT_VERSION}</Tag>
+      </Link>
+      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
+        <AboutList />
+        {enabledTelemetryChat && <Analytics />}
+      </Flexbox>
+      <Follow />
+      <div>Empowering your AI dreams by LobeHub</div>
+      <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
+    </Flexbox>
+  );
+});
+
+Page.displayName = 'AboutSetting';
+
+export default Page;