@lobehub/chat 0.152.6 → 0.152.8

package/locales/zh-TW/setting.json

@@ -27,9 +27,12 @@
     }
   },
   "header": {
+    "desc": "偏好與模型設定",
     "global": "全域設定",
     "session": "對話設定",
-    "sessionWithName": "對話設定 · {{name}}"
+    "sessionDesc": "角色設定與會話偏好",
+    "sessionWithName": "對話設定 · {{name}}",
+    "title": "設定"
   },
   "llm": {
     "checker": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.6",
+  "version": "0.152.8",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  avatar: css`
+    position: absolute;
+    z-index: 10;
+
+    flex: none;
+
+    background: ${token.colorBgContainer};
+    border: 6px solid ${token.colorBgContainer};
+    border-radius: 50%;
+  `,
+  banner: css`
+    position: relative;
+    flex: none;
+  `,
+  bannerBox: css`
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    height: 180px;
+
+    background: ${token.colorBgLayout};
+  `,
+  bannerImg: css`
+    position: absolute;
+    scale: 5;
+    filter: blur(24px) saturate(2);
+  `,
+}));
+
+const AvatarBanner = memo<PropsWithChildren>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} className={styles.banner} justify={'center'} width={'100%'}>
+      <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
+        <div className={styles.bannerImg}>{children}</div>
+      </Flexbox>
+      <Center className={styles.avatar}>{children}</Center>
+    </Flexbox>
+  );
+});
+
+export default AvatarBanner;

package/src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { useCategory } from '@/app/(main)/settings/hooks/useCategory';
+import Cell from '@/components/Cell';
+import Divider from '@/components/Cell/Divider';
+
+const SettingCate = memo(() => {
+  const theme = useTheme();
+  const settingItems = useCategory({ mobile: true });
+  const router = useRouter();
+
+  return (
+    <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
+      {settingItems?.map(({ key, icon, label, type }: any, index) => {
+        if (type === 'divider') return <Divider key={index} />;
+        return (
+          <Cell
+            icon={icon}
+            key={key}
+            label={label}
+            onClick={() => router.push(urlJoin('/settings', key))}
+          />
+        );
+      })}
+    </Flexbox>
+  );
+});
+
+export default SettingCate;

package/src/app/(main)/(mobile)/me/features/ExtraCate.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Cell from '@/components/Cell';
+import Divider from '@/components/Cell/Divider';
+
+import { useExtraCate } from './useExtraCate';
+
+const ExtraCate = memo(() => {
+  const theme = useTheme();
+  const mainItems = useExtraCate();
+
+  return (
+    <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
+      {mainItems?.map(({ key, icon, label, type, onClick }: any, index) => {
+        if (type === 'divider') return <Divider key={index} />;
+        return <Cell icon={icon} key={key} label={label} onClick={onClick} />;
+      })}
+    </Flexbox>
+  );
+});
+
+export default ExtraCate;

package/src/app/(main)/(mobile)/me/features/useExtraCate.tsx

@@ -0,0 +1,62 @@
+import { DiscordIcon, Icon } from '@lobehub/ui';
+import { Book, Feather, HardDriveDownload, HardDriveUpload } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { type MenuProps } from '@/components/Menu';
+import { DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
+import DataImporter from '@/features/DataImporter';
+import { configService } from '@/services/config';
+
+export const useExtraCate = () => {
+  const { t } = useTranslation(['common', 'setting']);
+
+  const iconSize = { fontSize: 20 };
+
+  const exports: MenuProps['items'] = [
+    {
+      icon: <Icon icon={HardDriveUpload} size={iconSize} />,
+      key: 'import',
+      label: <DataImporter>{t('import')}</DataImporter>,
+    },
+    {
+      icon: <Icon icon={HardDriveDownload} size={iconSize} />,
+      key: 'export',
+      label: t('export'),
+      onClick: configService.exportAll,
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
+  const helps: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Book} size={iconSize} />,
+      key: 'docs',
+      label: t('document'),
+      onClick: () => window.open(DOCUMENTS, '__blank'),
+    },
+    {
+      icon: <Icon icon={Feather} size={iconSize} />,
+      key: 'feedback',
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+    },
+    {
+      icon: <Icon icon={DiscordIcon} size={iconSize} />,
+      key: 'discord',
+      label: 'Discord',
+      onClick: () => window.open(DISCORD, '__blank'),
+    },
+  ];
+
+  const mainItems = [
+    {
+      type: 'divider',
+    },
+    ...exports,
+    ...helps,
+  ].filter(Boolean) as MenuProps['items'];
+
+  return mainItems;
+};

package/src/app/(main)/(mobile)/me/layout.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return <MobileContentLayout withNav>{children}</MobileContentLayout>;
+};
+
+Layout.displayName = 'MeLayout';
+
+export default Layout;

package/src/app/(main)/(mobile)/me/loading.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { Center } from 'react-layout-kit';
+
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => {
+  return (
+    <>
+      <Center height={180}>
+        <Skeleton.Avatar shape={'circle'} size={88} />
+      </Center>
+      <SkeletonLoading paragraph={{ rows: 8 }} title={false} />
+    </>
+  );
+};

package/src/app/(main)/(mobile)/me/page.tsx

@@ -0,0 +1,31 @@
+import { redirect } from 'next/navigation';
+import { Center } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+import Avatar from '@/features/AvatarWithUpload';
+import { isMobileDevice } from '@/utils/responsive';
+
+import AvatarBanner from './features/AvatarBanner';
+import Cate from './features/Cate';
+import ExtraCate from './features/ExtraCate';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  if (!mobile) return redirect('/chat');
+
+  return (
+    <>
+      <AvatarBanner>
+        <Avatar size={88} />
+      </AvatarBanner>
+      <Cate />
+      <ExtraCate />
+      <Center padding={16}>
+        <BrandWatermark />
+      </Center>
+    </>
+  );
+};
+
+export default Page;

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

@@ -15,7 +15,7 @@ const Nav = memo(() => {
     <SideNav
       avatar={<Avatar />}
       bottomActions={<BottomActions tab={sidebarKey} />}
-      style={{ height: '100%' }}
+      style={{ height: '100%', zIndex: 100 }}
       topActions={<TopActions tab={sidebarKey} />}
     />
   );

package/src/app/(main)/@nav/_layout/Mobile.tsx

@@ -53,11 +53,11 @@ const Nav = memo(() => {
       },
       {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
-        key: SidebarTabKey.Setting,
+        key: SidebarTabKey.Me,
         onClick: () => {
-          router.push('/settings');
+          router.push('/me');
         },
-        title: t('tab.setting'),
+        title: t('tab.me'),
       },
     ],
     [t],

package/src/app/(main)/chat/(mobile)/features/SessionHeader.tsx

@@ -10,7 +10,7 @@ import SyncStatusInspector from '@/features/SyncStatusInspector';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -26,14 +26,14 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
   const router = useRouter();
-  const avatar = useUserStore(commonSelectors.userAvatar);
+  const avatar = useUserStore(userProfileSelectors.userAvatar);
   const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <MobileNavBar
       left={
         <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 8 }}>
-          <div onClick={() => router.push('/settings')}>
+          <div onClick={() => router.push('/me')}>
             {avatar ? <Avatar avatar={avatar} size={28} /> : <Logo size={28} />}
           </div>
           <Logo type={'text'} />

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

@@ -1,13 +1,9 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
-
+import { LayoutProps } from '../type';
 import ResponsiveSessionList from './SessionList';
 
-const Desktop = memo(({ children }: PropsWithChildren) => {
+const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <ResponsiveSessionList />
@@ -21,6 +17,8 @@ const Desktop = memo(({ children }: PropsWithChildren) => {
       </Flexbox>
     </>
   );
-});
+};
+
+Layout.displayName = 'DesktopChatLayout';
 
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });
+export default Layout;

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

@@ -1,7 +1,9 @@
-import { PropsWithChildren } from 'react';
+import { LayoutProps } from '../type';
 
-const MobileLayout = ({ children }: PropsWithChildren) => {
+const Layout = ({ children }: LayoutProps) => {
   return children;
 };
 
-export default MobileLayout;
+Layout.displayName = 'MobileChatLayout';
+
+export default Layout;

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

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

package/src/app/(main)/chat/features/SettingButton.tsx

@@ -1,20 +1,19 @@
 import { ActionIcon } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const isInbox = useSessionStore(sessionSelectors.isInboxSession);
   const { t } = useTranslation('common');
-  const router = useRouter();
+  const router = useQueryRoute();
 
   return (
     <ActionIcon
@@ -26,7 +25,7 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
           });
           router.push('/settings/agent');
         } else {
-          router.push(pathString('/chat/settings', { search: location.search }));
+          router.push('/chat/settings');
         }
       }}
       size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}

package/src/app/(main)/chat/features/ShareButton/ShareModal.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 
 import Preview from './Preview';
 import { FieldType, ImageType } from './type';
@@ -49,7 +49,7 @@ const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
   const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
   const [tab, setTab] = useState<Tab>(Tab.Screenshot);
   const { t } = useTranslation('chat');
-  const avatar = useUserStore(commonSelectors.userAvatar);
+  const avatar = useUserStore(userProfileSelectors.userAvatar);
   const [shareLoading, shareToShareGPT] = useChatStore((s) => [s.shareLoading, s.shareToShareGPT]);
   const { loading, onDownload, title } = useScreenshot(fieldValue.imageType);
 

package/src/app/(main)/chat/layout.ts

@@ -2,7 +2,10 @@ import ServerLayout from '@/components/server/ServerLayout';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
 
-const ChatLayout = ServerLayout({ Desktop, Mobile });
+const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
 
-export default ChatLayout;
+Layout.displayName = 'ChatLayout';
+
+export default Layout;

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
+
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => (
+  <>
+    <Header />
+    <Flexbox
+      align={'center'}
+      height={'100%'}
+      style={{ overflowX: 'hidden', overflowY: 'auto' }}
+      width={'100%'}
+    >
+      <SafeSpacing height={HEADER_HEIGHT - 16} />
+      <Flexbox gap={64} style={{ maxWidth: 1024, padding: '32px 24px' }} width={'100%'}>
+        {children}
+      </Flexbox>
+    </Flexbox>
+  </>
+);
+
+Layout.displayName = 'DesktopSessionSettingsLayout';
+
+export default Layout;

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

@@ -1,13 +1,14 @@
+'use client';
+
 import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 import { pathString } from '@/utils/url';
 
-import HeaderContent from '../features/HeaderContent';
-
 const Header = memo(() => {
   const { t } = useTranslation('setting');
   const router = useRouter();

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => (
+  <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>
+);
+
+Layout.displayName = 'MobileSessionSettingsLayout';
+
+export default Layout;

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

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

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

@@ -1,5 +1,5 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Dropdown, MenuProps } from 'antd';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Dropdown, MenuProps } from 'antd';
 import { useResponsive } from 'antd-style';
 import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -11,7 +11,7 @@ import { useSessionStore } from '@/store/session';
 
 import SubmitAgentButton from './SubmitAgentButton';
 
-export const HeaderContent = memo<{ mobile?: boolean }>(() => {
+export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
 
@@ -43,13 +43,19 @@ export const HeaderContent = memo<{ mobile?: boolean }>(() => {
 
   return (
     <>
-      <SubmitAgentButton />
+      <SubmitAgentButton modal={modal} />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon
-          icon={HardDriveDownload}
-          size={HEADER_ICON_SIZE(mobile)}
-          title={t('export', { ns: 'common' })}
-        />
+        {modal ? (
+          <Button block icon={<Icon icon={HardDriveDownload} />}>
+            {t('export', { ns: 'common' })}
+          </Button>
+        ) : (
+          <ActionIcon
+            icon={HardDriveDownload}
+            size={HEADER_ICON_SIZE(mobile)}
+            title={t('export', { ns: 'common' })}
+          />
+        )}
       </Dropdown>
     </>
   );

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Alert, Modal, type ModalProps } from '@lobehub/ui';
 import { Button, Divider, Input } from 'antd';
 import { useTheme } from 'antd-style';

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'));

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;