@lobehub/chat 0.152.0 → 0.152.2

package/locales/ru-RU/common.json

@@ -140,6 +140,7 @@
   "tab": {
     "chat": "Чат",
     "market": "Обзор",
+    "me": "我",
     "setting": "Настройки"
   },
   "telemetry": {
@@ -156,5 +157,18 @@
     "action": "обновить",
     "hasNew": "Доступно обновление",
     "newVersion": "Доступна новая версия: {{version}}"
+  },
+  "userPanel": {
+    "billing": "Управление счетами",
+    "discord": "Поддержка сообщества",
+    "docs": "Документация",
+    "email": "Поддержка по электронной почте",
+    "feedback": "Обратная связь и предложения",
+    "help": "Центр помощи",
+    "plans": "Планы подписки",
+    "profile": "Управление аккаунтом",
+    "setting": "Настройки приложения",
+    "usages": "Статистика использования",
+    "warn": "Этот раздел скоро будет закрыт, пожалуйста, воспользуйтесь этим меню, вызвав его из левого верхнего угла"
   }
 }

package/locales/ru-RU/setting.json

@@ -27,9 +27,12 @@
     }
   },
   "header": {
+    "desc": "Настройки предпочтений и моделей.",
     "global": "Глобальные настройки",
     "session": "Настройки сеанса",
-    "sessionWithName": "Настройки сеанса · {{name}}"
+    "sessionDesc": "Настройки персонажа и предпочтения сессии.",
+    "sessionWithName": "Настройки сеанса · {{name}}",
+    "title": "Настройки"
   },
   "llm": {
     "checker": {

package/locales/tr-TR/common.json

@@ -140,6 +140,7 @@
   "tab": {
     "chat": "Chat",
     "market": "Keşfet",
+    "me": "我",
     "setting": "Ayarlar"
   },
   "telemetry": {
@@ -156,5 +157,18 @@
     "action": "Güncelle",
     "hasNew": "Yeni güncelleme mevcut",
     "newVersion": "Yeni sürüm mevcut: {{version}}"
+  },
+  "userPanel": {
+    "billing": "Fatura Yönetimi",
+    "discord": "Topluluk Destek",
+    "docs": "Belgeler",
+    "email": "E-posta Destek",
+    "feedback": "Geribildirim ve Öneriler",
+    "help": "Yardım Merkezi",
+    "plans": "Abonelik Planları",
+    "profile": "Hesap Yönetimi",
+    "setting": "Uygulama Ayarları",
+    "usages": "Kullanım İstatistikleri",
+    "warn": "Bu giriş yakında kaldırılacak, ileride bu menüyü sol üst köşedeki profil resminizden açabilirsiniz"
   }
 }

package/locales/tr-TR/setting.json

@@ -27,9 +27,12 @@
     }
   },
   "header": {
+    "desc": "Tercihler ve model ayarları.",
     "global": "Genel Ayarlar",
     "session": "Oturum Ayarları",
-    "sessionWithName": "Oturum Ayarları · {{name}}"
+    "sessionDesc": "Karakter ayarları ve oturum tercihleri.",
+    "sessionWithName": "Oturum Ayarları · {{name}}",
+    "title": "Ayarlar"
   },
   "llm": {
     "checker": {

package/locales/vi-VN/common.json

@@ -140,6 +140,7 @@
   "tab": {
     "chat": "Trò chuyện",
     "market": "Thị trường",
+    "me": "我",
     "setting": "Cài đặt"
   },
   "telemetry": {
@@ -156,5 +157,18 @@
     "action": "Nâng cấp",
     "hasNew": "Có bản cập nhật mới",
     "newVersion": "Có phiên bản mới: {{version}}"
+  },
+  "userPanel": {
+    "billing": "Quản lý thanh toán",
+    "discord": "Hỗ trợ cộng đồng",
+    "docs": "Tài liệu sử dụng",
+    "email": "Hỗ trợ qua email",
+    "feedback": "Phản hồi và đề xuất",
+    "help": "Trung tâm trợ giúp",
+    "plans": "Kế hoạch đăng ký",
+    "profile": "Quản lý tài khoản",
+    "setting": "Cài đặt ứng dụng",
+    "usages": "Thống kê sử dụng",
+    "warn": "Mục này sẽ sớm bị loại bỏ, vui lòng mở menu từ biểu tượng ở góc trên bên trái"
   }
 }

package/locales/vi-VN/setting.json

@@ -27,9 +27,12 @@
     }
   },
   "header": {
+    "desc": "Thiết lập Ưu tiên và Mô hình.",
     "global": "Cài đặt toàn cầu",
     "session": "Cài đặt cuộc trò chuyện",
-    "sessionWithName": "Cài đặt cuộc trò chuyện · {{name}}"
+    "sessionDesc": "Thiết lập nhân vật và ưu tiên phiên hội thoại.",
+    "sessionWithName": "Cài đặt cuộc trò chuyện · {{name}}",
+    "title": "Cài đặt"
   },
   "llm": {
     "checker": {

package/locales/zh-CN/common.json

@@ -140,6 +140,7 @@
   "tab": {
     "chat": "会话",
     "market": "发现",
+    "me": "我",
     "setting": "设置"
   },
   "telemetry": {
@@ -156,5 +157,18 @@
     "action": "升级",
     "hasNew": "有可用更新",
     "newVersion": "有新版本可用：{{version}}"
+  },
+  "userPanel": {
+    "billing": "账单管理",
+    "discord": "社区支持",
+    "docs": "使用文档",
+    "email": "邮件支持",
+    "feedback": "反馈与建议",
+    "help": "帮助中心",
+    "plans": "订阅方案",
+    "profile": "账户管理",
+    "setting": "应用设置",
+    "usages": "用量统计",
+    "warn": "此入口即将下线，后续请从左上角头像唤起本菜单"
   }
 }

package/locales/zh-CN/setting.json

@@ -27,9 +27,12 @@
     }
   },
   "header": {
+    "desc": "偏好与模型设置。",
     "global": "全局设置",
     "session": "会话设置",
-    "sessionWithName": "会话设置 · {{name}}"
+    "sessionDesc": "角色设定与会话偏好。",
+    "sessionWithName": "会话设置 · {{name}}",
+    "title": "设置"
   },
   "llm": {
     "checker": {

package/locales/zh-TW/common.json

@@ -140,6 +140,7 @@
   "tab": {
     "chat": "對話",
     "market": "發現",
+    "me": "我",
     "setting": "設定"
   },
   "telemetry": {
@@ -156,5 +157,18 @@
     "action": "升級",
     "hasNew": "有可用更新",
     "newVersion": "有新版本可用：{{version}}"
+  },
+  "userPanel": {
+    "billing": "帳單管理",
+    "discord": "社群支援",
+    "docs": "使用文件",
+    "email": "郵件支援",
+    "feedback": "意見回饋",
+    "help": "幫助中心",
+    "plans": "訂閱方案",
+    "profile": "帳戶管理",
+    "setting": "應用設定",
+    "usages": "用量統計",
+    "warn": "此入口即將下線，後續請從左上角頭像喚起本選單"
   }
 }

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.0",
+  "version": "0.152.2",
   "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,34 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+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';
+import redirectHard from '@/server/redirectHard';
+
+const SettingCate = memo(() => {
+  const theme = useTheme();
+  const settingItems = useCategory({ mobile: true });
+
+  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={() => redirectHard(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,68 @@
+import { DiscordIcon, Icon } from '@lobehub/ui';
+import { Book, Feather, HardDriveDownload, HardDriveUpload, Mail } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { type MenuProps } from '@/components/Menu';
+import { AGENTS_INDEX_GITHUB_ISSUE, DISCORD, DOCUMENTS, EMAIL_SUPPORT } 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('userPanel.docs'),
+      onClick: () => window.open(DOCUMENTS, '__blank'),
+    },
+    {
+      icon: <Icon icon={Feather} size={iconSize} />,
+      key: 'feedback',
+      label: t('userPanel.feedback'),
+      onClick: () => window.open(AGENTS_INDEX_GITHUB_ISSUE, '__blank'),
+    },
+    {
+      icon: <Icon icon={DiscordIcon} size={iconSize} />,
+      key: 'discord',
+      label: t('userPanel.discord'),
+      onClick: () => window.open(DISCORD, '__blank'),
+    },
+    {
+      icon: <Icon icon={Mail} size={iconSize} />,
+      key: 'email',
+      label: t('userPanel.email'),
+      onClick: () => window.open(`mailto:${EMAIL_SUPPORT}`, '__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 Avatar from '@/app/(main)/@nav/features/UserAvatar';
+import BrandWatermark from '@/components/BrandWatermark';
+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/BottomActions.tsx

@@ -1,26 +1,11 @@
-import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
-import { Badge, ConfigProvider, Dropdown, MenuProps } from 'antd';
-import {
-  Book,
-  Feather,
-  FileClock,
-  Github,
-  HardDriveDownload,
-  HardDriveUpload,
-  Heart,
-  Settings,
-  Settings2,
-} from 'lucide-react';
+import { ActionIcon } from '@lobehub/ui';
+import { Book, Github, Settings2 } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { ABOUT, CHANGELOG, DISCORD, DOCUMENTS, FEEDBACK, GITHUB } from '@/const/url';
-import DataImporter from '@/features/DataImporter';
-import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
+import UserPanel from '@/app/(main)/@nav/features/UserPanel';
+import { DOCUMENTS, GITHUB } from '@/const/url';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
@@ -28,96 +13,8 @@ export interface BottomActionProps {
 }
 
 const BottomActions = memo<BottomActionProps>(({ tab }) => {
-  const router = useRouter();
   const { t } = useTranslation('common');
 
-  const [hasNewVersion, useCheckLatestVersion] = useGlobalStore((s) => [
-    s.hasNewVersion,
-    s.useCheckLatestVersion,
-  ]);
-
-  useCheckLatestVersion();
-
-  const items: MenuProps['items'] = [
-    {
-      icon: <Icon icon={HardDriveUpload} />,
-      key: 'import',
-      label: <DataImporter>{t('import')}</DataImporter>,
-    },
-    {
-      children: [
-        {
-          key: 'allAgent',
-          label: <div>{t('exportType.allAgent')}</div>,
-          onClick: configService.exportAgents,
-        },
-        {
-          key: 'allAgentWithMessage',
-          label: <div>{t('exportType.allAgentWithMessage')}</div>,
-          onClick: configService.exportSessions,
-        },
-        {
-          key: 'globalSetting',
-          label: <div>{t('exportType.globalSetting')}</div>,
-          onClick: configService.exportSettings,
-        },
-        {
-          type: 'divider',
-        },
-        {
-          key: 'all',
-          label: <div>{t('exportType.all')}</div>,
-          onClick: configService.exportAll,
-        },
-      ],
-      icon: <Icon icon={HardDriveDownload} />,
-      key: 'export',
-      label: t('export'),
-    },
-    {
-      type: 'divider',
-    },
-    {
-      icon: <Icon icon={Feather} />,
-      key: 'feedback',
-      label: t('feedback'),
-      onClick: () => window.open(FEEDBACK, '__blank'),
-    },
-    {
-      icon: <Icon icon={FileClock} />,
-      key: 'changelog',
-      label: t('changelog'),
-      onClick: () => window.open(CHANGELOG, '__blank'),
-    },
-    {
-      icon: <Icon icon={DiscordIcon} />,
-      key: 'wiki',
-      label: 'Discord',
-      onClick: () => window.open(DISCORD, '__blank'),
-    },
-    {
-      icon: <Icon icon={Heart} />,
-      key: 'about',
-      label: t('about'),
-      onClick: () => window.open(ABOUT, '__blank'),
-    },
-    {
-      type: 'divider',
-    },
-    {
-      icon: <Icon icon={Settings} />,
-      key: 'setting',
-      label: (
-        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
-          {t('setting')} {hasNewVersion && <Badge count={t('upgradeVersion.hasNew')} />}
-        </Flexbox>
-      ),
-      onClick: () => {
-        router.push('/settings/common');
-      },
-    },
-  ];
-
   return (
     <>
       <Link aria-label={'GitHub'} href={GITHUB} target={'_blank'}>
@@ -126,19 +23,9 @@ const BottomActions = memo<BottomActionProps>(({ tab }) => {
       <Link aria-label={t('document')} href={DOCUMENTS} target={'_blank'}>
         <ActionIcon icon={Book} placement={'right'} title={t('document')} />
       </Link>
-      <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        {hasNewVersion ? (
-          <Flexbox>
-            <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
-              <Badge dot offset={[-4, 4]}>
-                <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
-              </Badge>
-            </ConfigProvider>
-          </Flexbox>
-        ) : (
-          <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
-        )}
-      </Dropdown>
+      <UserPanel bottom>
+        <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+      </UserPanel>
     </>
   );
 });

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

@@ -3,9 +3,10 @@
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
+import UserPanel from '@/app/(main)/@nav/features/UserPanel';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 
-import Avatar from './Avatar';
+import Avatar from '../../features/UserAvatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
@@ -13,7 +14,11 @@ const Nav = memo(() => {
   const sidebarKey = useActiveTabKey();
   return (
     <SideNav
-      avatar={<Avatar />}
+      avatar={
+        <UserPanel>
+          <Avatar />
+        </UserPanel>
+      }
       bottomActions={<BottomActions tab={sidebarKey} />}
       style={{ height: '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],