@lobehub/chat 0.152.0 → 0.152.2

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 : '1.75rem 1.5rem 1.75rem 2rem',
+          }}
+          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,122 @@
+'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 { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { ABOUT, CHANGELOG, FEEDBACK, GITHUB, PRIVACY_URL, TERMS_URL } from '@/const/url';
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  card: css`
+    cursor: pointer;
+
+    padding: 24px;
+
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorFillSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+      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 = [
+    {
+      icon: Home,
+      label: t('officialSite'),
+      onClick: () => window.open('https://lobehub.com', '__blank'),
+      value: 'officialSite',
+    },
+
+    {
+      icon: Book,
+      label: t('document'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: Rss,
+      label: t('blog'),
+      onClick: () => window.open('https://lobehub.com/blog', '__blank'),
+      value: 'blog',
+    },
+    {
+      icon: Github,
+      label: 'GitHub',
+      onClick: () => window.open(GITHUB, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: Feather,
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: FileClock,
+      label: t('changelog'),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+      value: 'changelog',
+    },
+    {
+      icon: HeartHandshake,
+      label: t('terms'),
+      onClick: () => window.open(TERMS_URL, '__blank'),
+      value: 'terms',
+    },
+    {
+      icon: Lock,
+      label: t('privacy'),
+      onClick: () => window.open(PRIVACY_URL, '__blank'),
+      value: 'privacy',
+    },
+    {
+      icon: Heart,
+      label: t('about'),
+      onClick: () => window.open(ABOUT, '__blank'),
+      value: 'about',
+    },
+  ];
+
+  return (
+    <Grid className={styles.container} maxItemWidth={144} width={'100%'}>
+      {items.map(({ value, icon, label, onClick }) => (
+        <Flexbox className={styles.card} gap={8} horizontal key={value} onClick={onClick}>
+          <Icon icon={icon} size={{ fontSize: 20 }} />
+          {label}
+        </Flexbox>
+      ))}
+    </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/slices/preference/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/layout.tsx

@@ -0,0 +1,26 @@
+import { Logo, Tag } from '@lobehub/ui';
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { CURRENT_VERSION } from '@/const/version';
+import { isMobileDevice } from '@/utils/responsive';
+
+const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const isMobile = isMobileDevice();
+  return (
+    <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
+      <Logo size={isMobile ? 100 : 120} />
+      <h1 style={{ fontSize: isMobile ? 32 : 36, fontWeight: 900, lineHeight: 1, marginBottom: 0 }}>
+        LobeChat
+      </h1>
+      <Tag>v{CURRENT_VERSION}</Tag>
+      {children}
+      <div>Empowering your AI dreams by LobeHub</div>
+      <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
+    </Flexbox>
+  );
+};
+
+export default Layout;

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

@@ -0,0 +1,5 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return <SkeletonLoading paragraph={{ rows: 3 }} title={false} />;
+};

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

@@ -1,37 +1,32 @@
-'use client';
-
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import PageTitle from '@/components/PageTitle';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { serverConfigSelectors } from '@/store/serverConfig/selectors';
-
-import AboutList from './AboutList';
-import Analytics from './Analytics';
-
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    width: 100%;
-    max-width: 1024px;
-  `,
-}));
+import Follow from '@//features/Follow';
+import AboutList from '@/app/(main)/settings//about/features/AboutList';
+import Analytics from '@/app/(main)/settings/about/features/Analytics';
+import { getServerConfig } from '@/config/server';
+import { translation } from '@/server/translation';
 
-export default memo(() => {
-  const { t } = useTranslation('setting');
+const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
 
-  const { styles } = useStyles();
-  const enabledTelemetryChat = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return {
+    title: t('tab.about'),
+  };
+};
 
+const Page = () => {
   return (
     <>
-      <PageTitle title={t('tab.tts')} />
-      <Flexbox align={'center'} className={styles.container} gap={12}>
+      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
         <AboutList />
         {enabledTelemetryChat && <Analytics />}
       </Flexbox>
+      <Follow />
     </>
   );
-});
+};
+
+Page.displayName = 'AboutSetting';
+
+export default Page;

package/src/app/(main)/settings/agent/layout.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo } from 'react';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
+import { Provider, createStore } from '@/features/AgentSetting/store';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const Layout = memo(({ children }: PropsWithChildren) => {
+  const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
+  const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
+
+  return (
+    <Provider createStore={createStore}>
+      <StoreUpdater
+        config={config}
+        id={INBOX_SESSION_ID}
+        meta={meta}
+        onConfigChange={(config) => {
+          updateAgent({ config });
+        }}
+        onMetaChange={(meta) => {
+          updateAgent({ meta });
+        }}
+      />
+      {children}
+    </Provider>
+  );
+});
+
+export default Layout;

package/src/app/(main)/settings/agent/loading.tsx

@@ -1,3 +1,5 @@
-import { Skeleton } from 'antd';
+import SkeletonLoading from '@/components/SkeletonLoading';
 
-export default () => <Skeleton paragraph={{ rows: 8 }} />;
+export default () => {
+  return <SkeletonLoading paragraph={{ rows: 8 }} />;
+};