@lobehub/chat 0.152.1 → 0.152.2

package/src/app/(main)/chat/settings/features/SubmitAgentButton/index.tsx

@@ -1,4 +1,5 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
 import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -8,18 +9,25 @@ import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
 import SubmitAgentModal from './SubmitAgentModal';
 
-const SubmitAgentButton = memo(() => {
+const SubmitAgentButton = memo<{ modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
   const { mobile } = useResponsive();
   const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <>
-      <ActionIcon
-        icon={Share2}
-        onClick={() => setIsModalOpen(true)}
-        size={HEADER_ICON_SIZE(mobile)}
-        title={t('submitAgentModal.tooltips')}
-      />
+      {modal ? (
+        <Button block icon={<Icon icon={Share2} />} onClick={() => setIsModalOpen(true)}>
+          {t('submitAgentModal.tooltips')}
+        </Button>
+      ) : (
+        <ActionIcon
+          icon={Share2}
+          onClick={() => setIsModalOpen(true)}
+          size={HEADER_ICON_SIZE(mobile)}
+          title={t('submitAgentModal.tooltips')}
+        />
+      )}
       <SubmitAgentModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );

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

@@ -1,14 +1,21 @@
 import { notFound } from 'next/navigation';
 import { PropsWithChildren } from 'react';
 
+import ServerLayout from '@/components/server/ServerLayout';
 import { serverFeatureFlags } from '@/config/server/featureFlags';
 
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const SessionSettingsLayout = ServerLayout({ Desktop, Mobile });
+
 const Layout = ({ children }: PropsWithChildren) => {
   const isAgentEditable = serverFeatureFlags().isAgentEditable;
-
   if (!isAgentEditable) return notFound();
 
-  return children;
+  return <SessionSettingsLayout>{children}</SessionSettingsLayout>;
 };
 
+Layout.displayName = 'SessionSettingsLayout';
+
 export default Layout;

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

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

package/src/app/(main)/chat/settings/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'), { ssr: false });

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

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

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

@@ -1,19 +1,10 @@
-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 (
-    <Layout>
-      <AgentDetailContent mobile={mobile} />
-    </Layout>
-  );
+  return <AgentDetailContent mobile={mobile} />;
 };
 
 Detail.displayName = 'AgentDetail';

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

@@ -0,0 +1 @@
+export default () => null;

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

@@ -24,7 +24,7 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
   noScrollbar: stylish.noScrollbar,
 }));
 
-const SideBar = memo<PropsWithChildren>(({ children }) => {
+const DetailSidebar = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   const { md = true } = useResponsive();
   const [tempId, setTempId] = useState<string>('');
@@ -81,4 +81,4 @@ const SideBar = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default SideBar;
+export default DetailSidebar;

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

@@ -4,6 +4,7 @@ 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';
 
@@ -29,7 +30,7 @@ const Layout = ({ children, detail }: LayoutProps) => {
             {children}
           </Flexbox>
         </Flexbox>
-        {detail}
+        <DetailSidebar>{detail}</DetailSidebar>
       </Flexbox>
     </Flexbox>
   );

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,35 @@
+'use client';
+
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import Menu from '@/components/Menu';
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+import { useCategory } from '../../hooks/useCategory';
+
+const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
+  const activeTab = useActiveSettingsKey();
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+
+  return (
+    <Menu
+      items={cateItems}
+      onClick={({ key }) => {
+        const path = urlJoin('/settings', key);
+        if (modal) {
+          router.replace(path);
+        } else {
+          router.push(path);
+        }
+      }}
+      selectable
+      selectedKeys={[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 : '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;
+}