@lobehub/chat 0.153.0 → 0.153.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.153.1](https://github.com/lobehub/lobe-chat/compare/v0.153.0...v0.153.1)
+
+<sup>Released on **2024-05-04**</sup>
+
+#### 💄 Styles
+
+- **misc**: Imporve mobile styles and loading skeleton.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Imporve mobile styles and loading skeleton, closes [#2363](https://github.com/lobehub/lobe-chat/issues/2363) ([8ee3591](https://github.com/lobehub/lobe-chat/commit/8ee3591))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.153.0](https://github.com/lobehub/lobe-chat/compare/v0.152.12...v0.153.0)
 
 <sup>Released on **2024-05-04**</sup>

package/locales/ar/common.json

@@ -169,6 +169,7 @@
     "help": "مركز المساعدة",
     "moveGuide": "تم نقل زر الإعدادات إلى هنا",
     "plans": "خطط الاشتراك",
+    "preview": "المعاينة",
     "profile": "إدارة الحساب",
     "setting": "إعدادات التطبيق",
     "usages": "إحصاءات الاستخدام"

package/locales/bg-BG/common.json

@@ -169,6 +169,7 @@
     "help": "Център за помощ",
     "moveGuide": "Бутонът за настройки е преместен тук",
     "plans": "Планове за абонамент",
+    "preview": "Преглед",
     "profile": "Управление на профила",
     "setting": "Настройки на приложението",
     "usages": "Статистика за използване"

package/locales/de-DE/common.json

@@ -169,6 +169,7 @@
     "help": "Hilfezentrum",
     "moveGuide": "Die Einstellungen wurden hierher verschoben.",
     "plans": "Abonnementpläne",
+    "preview": "Vorschau",
     "profile": "Kontoverwaltung",
     "setting": "App-Einstellungen",
     "usages": "Nutzungsstatistiken"

package/locales/en-US/common.json

@@ -169,6 +169,7 @@
     "help": "Help Center",
     "moveGuide": "The settings button has been moved here",
     "plans": "Subscription Plans",
+    "preview": "Preview",
     "profile": "Account Management",
     "setting": "App Settings",
     "usages": "Usage Statistics"

package/locales/es-ES/common.json

@@ -169,6 +169,7 @@
     "help": "Centro de ayuda",
     "moveGuide": "El botón de configuración se ha movido aquí",
     "plans": "Planes de suscripción",
+    "preview": "Vista previa",
     "profile": "Gestión de cuenta",
     "setting": "Configuración de la aplicación",
     "usages": "Estadísticas de uso"

package/locales/fr-FR/common.json

@@ -169,6 +169,7 @@
     "help": "Centre d'aide",
     "moveGuide": "Le bouton de configuration a été déplacé ici",
     "plans": "Forfaits d'abonnement",
+    "preview": "Aperçu",
     "profile": "Gestion du compte",
     "setting": "Paramètres de l'application",
     "usages": "Statistiques d'utilisation"

package/locales/it-IT/common.json

@@ -169,6 +169,7 @@
     "help": "Centro assistenza",
     "moveGuide": "Il pulsante delle impostazioni è stato spostato qui",
     "plans": "Piani di abbonamento",
+    "preview": "Anteprima",
     "profile": "Gestione account",
     "setting": "Impostazioni app",
     "usages": "Statistiche di utilizzo"

package/locales/ja-JP/common.json

@@ -169,6 +169,7 @@
     "help": "ヘルプセンター",
     "moveGuide": "設定ボタンがこちらに移動しました",
     "plans": "サブスクリプションプラン",
+    "preview": "プレビュー",
     "profile": "アカウント管理",
     "setting": "アプリ設定",
     "usages": "利用量統計"

package/locales/ko-KR/common.json

@@ -169,6 +169,7 @@
     "help": "도움말 센터",
     "moveGuide": "설정 버튼을 여기로 이동했습니다",
     "plans": "요금제",
+    "preview": "미리보기",
     "profile": "계정 관리",
     "setting": "앱 설정",
     "usages": "사용량 통계"

package/locales/nl-NL/common.json

@@ -169,6 +169,7 @@
     "help": "帮助中心",
     "moveGuide": "De instellingenknop is hierheen verplaatst",
     "plans": "订阅方案",
+    "preview": "Voorbeeld",
     "profile": "账户管理",
     "setting": "应用设置",
     "usages": "用量统计"

package/locales/pl-PL/common.json

@@ -169,6 +169,7 @@
     "help": "Centrum pomocy",
     "moveGuide": "Przenieś przycisk ustawień tutaj",
     "plans": "Plan abonamentu",
+    "preview": "Podgląd",
     "profile": "Zarządzanie kontem",
     "setting": "Ustawienia aplikacji",
     "usages": "Statystyki użycia"

package/locales/pt-BR/common.json

@@ -169,6 +169,7 @@
     "help": "Central de Ajuda",
     "moveGuide": "O botão de configurações foi movido para cá",
     "plans": "Planos de Assinatura",
+    "preview": "Versão de visualização",
     "profile": "Gerenciamento de Conta",
     "setting": "Configurações do Aplicativo",
     "usages": "Estatísticas de Uso"

package/locales/ru-RU/common.json

@@ -169,6 +169,7 @@
     "help": "Центр помощи",
     "moveGuide": "Кнопка настроек перемещена сюда",
     "plans": "Планы подписки",
+    "preview": "Предпросмотр",
     "profile": "Управление аккаунтом",
     "setting": "Настройки приложения",
     "usages": "Статистика использования"

package/locales/tr-TR/common.json

@@ -169,6 +169,7 @@
     "help": "Yardım Merkezi",
     "moveGuide": "Ayarlar düğmesini buraya taşıyın",
     "plans": "Planlar",
+    "preview": "Önizleme",
     "profile": "Hesap Yönetimi",
     "setting": "Uygulama Ayarları",
     "usages": "Kullanım İstatistikleri"

package/locales/vi-VN/common.json

@@ -169,6 +169,7 @@
     "help": "Trung tâm trợ giúp",
     "moveGuide": "Đã di chuyển nút cài đặt đến đây",
     "plans": "Kế hoạch đăng ký",
+    "preview": "Phiên bản xem trước",
     "profile": "Quản lý tài khoản",
     "setting": "Cài đặt ứng dụng",
     "usages": "Thống kê sử dụng"

package/locales/zh-CN/common.json

@@ -169,6 +169,7 @@
     "help": "帮助中心",
     "moveGuide": "设置按钮搬到这里啦",
     "plans": "订阅方案",
+    "preview": "预览版",
     "profile": "账户管理",
     "setting": "应用设置",
     "usages": "用量统计"

package/locales/zh-TW/common.json

@@ -169,6 +169,7 @@
     "help": "幫助中心",
     "moveGuide": "設置按鈕搬到這裡啦",
     "plans": "訂閱方案",
+    "preview": "預覽",
     "profile": "帳戶管理",
     "setting": "應用設定",
     "usages": "用量統計"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.153.0",
+  "version": "0.153.1",
   "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

@@ -1,55 +1,27 @@
 'use client';
 
-import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
-export const AVATAR_SIZE = 80;
-
-export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  avatar: css`
-    z-index: 10;
-
-    flex: none;
-
-    margin-top: -${AVATAR_SIZE / 2 + 6}px;
+import UserAvatar from '@/features/User/UserAvatar';
+import UserInfo from '@/features/User/UserInfo';
 
-    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-    border: 6px solid ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-    border-radius: 50%;
-  `,
-  banner: css`
-    position: relative;
-    flex: none;
-    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
-  `,
-  bannerBox: css`
-    position: relative;
+import { useStyles } from './style';
 
-    overflow: hidden;
-
-    width: 100%;
-    height: 100px;
-
-    background: ${token.colorBgLayout};
-  `,
-  bannerImg: css`
-    position: absolute;
-    scale: 5;
-    filter: blur(24px) saturate(2);
-  `,
-}));
+export const AVATAR_SIZE = 80;
 
-const AvatarBanner = memo<PropsWithChildren>(({ children }) => {
+const AvatarBanner = memo<PropsWithChildren>(() => {
   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>
+        <div className={styles.bannerImg}>
+          <UserAvatar shape={'square'} size={AVATAR_SIZE} />
+        </div>
       </Flexbox>
-      <Center className={styles.avatar}>{children}</Center>
-    </Flexbox>
+      <UserInfo className={styles.info} />
+    </>
   );
 });
 

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { ActionIcon, MobileNavBar } from '@lobehub/ui';
+import { useScroll } from 'ahooks';
+import { useTheme } from 'antd-style';
+import { Moon, Sun } from 'lucide-react';
+import { memo } from 'react';
+
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useUserStore } from '@/store/user';
+import { mobileHeaderFixed } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const theme = useTheme();
+  const scroll = useScroll(() => document.querySelector('#lobe-mobile-scroll-container'));
+  const switchThemeMode = useUserStore((s) => s.switchThemeMode);
+  const showBackground = (scroll as any)?.top > 44;
+
+  return (
+    <MobileNavBar
+      right={
+        <ActionIcon
+          color={showBackground ? undefined : theme.colorBgLayout}
+          icon={theme.isDarkMode ? Moon : Sun}
+          onClick={() => switchThemeMode(theme.isDarkMode ? 'light' : 'dark')}
+          size={MOBILE_HEADER_ICON_SIZE}
+        />
+      }
+      style={{
+        ...mobileHeaderFixed,
+        background: showBackground ? undefined : 'transparent',
+      }}
+    />
+  );
+});
+
+export default Header;

package/src/app/(main)/(mobile)/me/features/style.ts

@@ -0,0 +1,29 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  bannerBox: css`
+    position: relative;
+
+    overflow: hidden;
+    flex: none;
+
+    width: 100%;
+    height: 100px;
+
+    background: ${token.colorFill};
+  `,
+  bannerImg: css`
+    position: absolute;
+    scale: 8;
+    filter: blur(6px) saturate(2);
+  `,
+  info: css`
+    position: relative;
+
+    margin-top: ${-token.borderRadiusLG}px;
+
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
+    border-top-left-radius: ${token.borderRadiusLG}px;
+    border-top-right-radius: ${token.borderRadiusLG}px;
+  `,
+}));

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

@@ -2,8 +2,14 @@ import { PropsWithChildren } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 
+import Header from './features/Header';
+
 const Layout = ({ children }: PropsWithChildren) => {
-  return <MobileContentLayout withNav>{children}</MobileContentLayout>;
+  return (
+    <MobileContentLayout header={<Header />} withNav>
+      {children}
+    </MobileContentLayout>
+  );
 };
 
 Layout.displayName = 'MeLayout';

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

@@ -1,17 +1,32 @@
 'use client';
 
 import { Skeleton } from 'antd';
-import { Center } from 'react-layout-kit';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import SkeletonLoading from '@/components/SkeletonLoading';
 
-export default () => {
+import { useStyles } from './features/style';
+
+const Loading = memo(() => {
+  const { styles } = useStyles();
   return (
     <>
-      <Center height={180}>
-        <Skeleton.Avatar shape={'circle'} size={88} />
-      </Center>
-      <SkeletonLoading paragraph={{ rows: 8 }} title={false} />
+      <Flexbox align={'center'} className={styles.bannerBox} justify={'center'} />
+      <Flexbox
+        align={'center'}
+        className={styles.info}
+        gap={12}
+        horizontal
+        paddingBlock={12}
+        paddingInline={12}
+      >
+        <Skeleton.Avatar active shape={'circle'} size={48} />
+        <Skeleton active paragraph={{ rows: 1 }} title={false} />
+      </Flexbox>
+      <SkeletonLoading active paragraph={{ rows: 8 }} title={false} />
     </>
   );
-};
+});
+
+export default Loading;

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

@@ -2,10 +2,10 @@ import { redirect } from 'next/navigation';
 import { Center } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
-import UserAvatar from '@/features/User/UserAvatar';
+import Divider from '@/components/Cell/Divider';
 import { isMobileDevice } from '@/utils/responsive';
 
-import AvatarBanner, { AVATAR_SIZE } from './features/AvatarBanner';
+import AvatarBanner from './features/AvatarBanner';
 import Cate from './features/Cate';
 import ExtraCate from './features/ExtraCate';
 
@@ -16,9 +16,8 @@ const Page = () => {
 
   return (
     <>
-      <AvatarBanner>
-        <UserAvatar size={AVATAR_SIZE} />
-      </AvatarBanner>
+      <AvatarBanner />
+      <Divider />
       <Cate />
       <ExtraCate />
       <Center padding={16}>

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

@@ -2,7 +2,7 @@
 
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Bot, MessageSquare, User } from 'lucide-react';
+import { Compass, MessageSquare, User } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
@@ -44,7 +44,7 @@ const Nav = memo(() => {
         title: t('tab.chat'),
       },
       {
-        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Compass} />,
         key: SidebarTabKey.Market,
         onClick: () => {
           router.push('/market');

package/src/app/(main)/market/@detail/features/{AgentDetailContent/index.tsx → AgentDetailContent.tsx}

@@ -5,21 +5,20 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import AgentCardBanner from '@/app/(main)/market/features/AgentCard/AgentCardBanner';
+import Banner from '@/app/(main)/market/@detail/features/Banner';
 import { useMarketStore } from '@/store/market';
 
 import Comment from './Comment';
 import Header from './Header';
 import Loading from './Loading';
 import TokenTag from './TokenTag';
-import { useStyles } from './style';
 
 enum InfoTabs {
   comment = 'comment',
   prompt = 'prompt',
 }
 
-const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
+const AgentDetailContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [useFetchAgent, currentIdentifier] = useMarketStore((s) => [
     s.useFetchAgent,
     s.currentIdentifier,
@@ -27,7 +26,6 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
   const { data, isLoading } = useFetchAgent(currentIdentifier);
-  const { styles } = useStyles();
 
   if (isLoading || !data?.meta) return <Loading />;
 
@@ -36,16 +34,11 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   return (
     <>
-      <AgentCardBanner
-        avatar={meta?.avatar}
-        size={800}
-        style={{ height: 120, marginBottom: -60 }}
-      />
-      <Header mobile={mobile} />
+      <Banner avatar={meta.avatar} backgroundColor={meta.backgroundColor} mobile={mobile} />
+      <Header />
       <Flexbox align={'center'}>
         <TabsNav
           activeKey={tab}
-          className={styles.nav}
           items={[
             {
               key: InfoTabs.prompt,
@@ -61,6 +54,7 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
             },
           ]}
           onChange={setTab}
+          style={{ paddingTop: 8 }}
           variant={'compact'}
         />
       </Flexbox>
@@ -76,4 +70,4 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
   );
 });
 
-export default AgentModalInner;
+export default AgentDetailContent;

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

@@ -0,0 +1,46 @@
+import { Avatar } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import AgentCardBanner from '../../features/AgentCard/AgentCardBanner';
+
+const Banner = memo<{
+  avatar?: string;
+  backgroundColor?: string;
+  loading?: boolean;
+  mobile?: boolean;
+}>(({ avatar, backgroundColor, mobile, loading }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox align={'center'}>
+      <AgentCardBanner
+        avatar={loading ? undefined : avatar}
+        size={800}
+        style={{ height: 120, marginBottom: -60 }}
+      />
+      <Center
+        flex={'none'}
+        height={120}
+        style={{
+          backgroundColor:
+            backgroundColor || mobile ? theme.colorBgElevated : theme.colorBgContainer,
+          borderRadius: '50%',
+          overflow: 'hidden',
+          zIndex: 2,
+        }}
+        width={120}
+      >
+        {loading ? (
+          <Skeleton.Avatar active size={100} />
+        ) : (
+          <Avatar animation avatar={avatar} shape={'circle'} size={100} />
+        )}
+      </Center>
+    </Flexbox>
+  );
+});
+
+export default Banner;

package/src/app/(main)/market/@detail/features/{AgentDetailContent/Header.tsx → Header.tsx}

@@ -1,4 +1,4 @@
-import { Avatar, Tag } from '@lobehub/ui';
+import { Tag } from '@lobehub/ui';
 import { App, Button, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
@@ -16,18 +16,18 @@ import { useStyles } from './style';
 
 const { Link } = Typography;
 
-const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
+const Header = memo(() => {
   const setSearchKeywords = useMarketStore((s) => s.setSearchKeywords);
   const router = useRouter();
   const { t } = useTranslation('market');
-  const { styles, theme } = useStyles();
+  const { styles } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem, isEqual);
 
   const { message } = App.useApp();
 
   const { meta, createAt, author, homepage, config } = agentItem;
-  const { avatar, title, description, tags, backgroundColor } = meta;
+  const { title, description, tags } = meta;
 
   const isMobile = useIsMobile();
 
@@ -47,20 +47,6 @@ const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   return (
     <Center className={styles.container} gap={16}>
-      <Center
-        flex={'none'}
-        height={120}
-        style={{
-          backgroundColor:
-            backgroundColor || mobile ? theme.colorBgElevated : theme.colorBgContainer,
-          borderRadius: '50%',
-          overflow: 'hidden',
-          zIndex: 2,
-        }}
-        width={120}
-      >
-        <Avatar animation avatar={avatar} size={100} />
-      </Center>
       <h2 className={styles.title}>{title}</h2>
       <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
         {(tags as string[]).map((tag: string, index) => (

package/src/app/(main)/market/@detail/features/{AgentDetailContent/Loading.tsx → Loading.tsx}

@@ -2,25 +2,26 @@ import { Skeleton } from 'antd';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import Banner from './Banner';
 import { useStyles } from './style';
 
 const Loading = memo(() => {
   const { styles } = useStyles();
   return (
     <>
-      <Center className={styles.container} gap={16} style={{ paddingTop: 80 }}>
-        <Skeleton.Avatar active shape={'circle'} size={100} />
+      <Banner loading />
+      <Center className={styles.container} gap={16}>
         <Skeleton
           active
           className={styles.loading}
           paragraph={{
-            rows: 3,
+            rows: 2,
             style: {
               alignItems: 'center',
               display: 'flex',
               flexDirection: 'column',
             },
-            width: ['60%', '80%', '20%'],
+            width: ['60%', '80%'],
           }}
           title={{
             style: {

package/src/app/(main)/market/@detail/features/{AgentDetailContent/style.ts → style.ts}

@@ -19,9 +19,6 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
       flex-direction: column;
     }
   `,
-  nav: css`
-    padding-top: 8px;
-  `,
   time: css`
     font-size: 12px;
     color: ${token.colorTextDescription};

package/src/app/(main)/market/features/AgentCard/AgentCardBanner.tsx

@@ -22,6 +22,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 interface AgentCardBannerProps extends DivProps {
   avatar?: string;
+  loading?: boolean;
   mask?: boolean;
   maskColor?: string;
   size?: number;
@@ -29,22 +30,26 @@ interface AgentCardBannerProps extends DivProps {
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
   ({ avatar, className, size = 600, children, ...props }) => {
-    const { styles, cx } = useStyles();
+    const { styles, theme, cx } = useStyles();
 
     return (
       <Flexbox
         align={'center'}
         className={cx(styles.banner, className)}
         justify={'center'}
+        style={avatar ? {} : { backgroundColor: theme.colorFillTertiary }}
+        width={'100%'}
         {...props}
       >
-        <Avatar
-          alt={'banner'}
-          avatar={avatar}
-          className={styles.bannerImg}
-          shape={'square'}
-          size={size}
-        />
+        {avatar && (
+          <Avatar
+            alt={'banner'}
+            avatar={avatar}
+            className={styles.bannerImg}
+            shape={'square'}
+            size={size}
+          />
+        )}
         {children}
       </Flexbox>
     );

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

@@ -1,3 +1,15 @@
+'use client';
+
 import { Skeleton } from 'antd';
+import { Flexbox } from 'react-layout-kit';
 
-export default () => <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />;
+export default () => (
+  <Flexbox gap={16}>
+    <Skeleton.Input active block />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+    <Skeleton.Button active />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+    <Skeleton.Button active />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+  </Flexbox>
+);

package/src/components/Cell/Divider.tsx

@@ -5,6 +5,8 @@ import { memo } from 'react';
 
 const useStyles = createStyles(
   ({ css, token, isDarkMode }) => css`
+    flex: none;
+    width: 100%;
     height: 6px;
     background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
   `,

package/src/components/Cell/index.tsx

@@ -8,7 +8,11 @@ const { Item } = List;
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: relative;
-    padding-block: 16px !important;
+
+    gap: 12px;
+
+    padding: 16px !important;
+
     background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 0;
   `,

package/src/components/server/MobileNavLayout.tsx

@@ -38,6 +38,7 @@ const MobileContentLayout = ({
       {header}
       <Flexbox
         height="100%"
+        id={'lobe-mobile-scroll-container'}
         style={{
           overflowX: 'hidden',
           overflowY: 'auto',

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -14,10 +14,12 @@ import { useMarketStore } from '@/store/market';
 
 const { Paragraph } = Typography;
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     position: relative;
 
+    overflow: hidden;
+
     height: 100%;
     min-height: 110px;
     padding: 16px;
@@ -30,6 +32,10 @@ const useStyles = createStyles(({ css, token }) => ({
     &:hover {
       background: ${token.colorBgElevated};
     }
+
+    ${responsive.mobile} {
+      min-height: 72px;
+    }
   `,
   cardDesc: css`
     margin-block: 0 !important;
@@ -48,15 +54,18 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const AgentsSuggest = memo(() => {
+const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
+
   const [sliceStart, setSliceStart] = useState(0);
   const useFetchAgentList = useMarketStore((s) => s.useFetchAgentList);
   const { isLoading } = useFetchAgentList();
   const agentList = useMarketStore((s) => s.agentList, isEqual);
   const { styles } = useStyles();
 
-  const loadingCards = Array.from({ length: 4 }).map((_, index) => (
+  const agentLength = mobile ? 3 : 4;
+
+  const loadingCards = Array.from({ length: agentLength }).map((_, index) => (
     <Flexbox className={styles.card} key={index}>
       <Skeleton active avatar paragraph={{ rows: 2 }} title={false} />
     </Flexbox>
@@ -64,15 +73,15 @@ const AgentsSuggest = memo(() => {
 
   const cards = useMemo(
     () =>
-      agentList.slice(sliceStart, sliceStart + 4).map((agent) => (
+      agentList.slice(sliceStart, sliceStart + agentLength).map((agent) => (
         <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
           <Flexbox className={styles.card} gap={8} horizontal>
             <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
-            <Flexbox gap={8}>
+            <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
               <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
                 {agent.meta.title}
               </Paragraph>
-              <Paragraph className={styles.cardDesc} ellipsis={{ rows: 2 }}>
+              <Paragraph className={styles.cardDesc} ellipsis={{ rows: mobile ? 1 : 2 }}>
                 {agent.meta.description}
               </Paragraph>
             </Flexbox>

package/src/features/Conversation/components/InboxWelcome/QuestionSuggest.tsx

@@ -13,7 +13,7 @@ import { USAGE_DOCUMENTS } from '@/const/url';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     cursor: pointer;
 
@@ -27,6 +27,10 @@ const useStyles = createStyles(({ css, token }) => ({
     &:hover {
       background: ${token.colorBgElevated};
     }
+
+    ${responsive.mobile} {
+      padding: 8px 16px;
+    }
   `,
   icon: css`
     color: ${token.colorTextSecondary};
@@ -52,10 +56,11 @@ const qa = shuffle([
   'q13',
   'q14',
   'q15',
-]).slice(0, 5);
+]);
 
-const QuestionSuggest = memo(() => {
+const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage]);
+
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
   const sendMessage = useSendMessage();
@@ -73,7 +78,7 @@ const QuestionSuggest = memo(() => {
         </Link>
       </Flexbox>
       <Flexbox gap={8} horizontal wrap={'wrap'}>
-        {qa.map((item) => {
+        {qa.slice(0, mobile ? 2 : 5).map((item) => {
           const text = t(`guide.qa.${item}` as any);
           return (
             <Flexbox

package/src/features/Conversation/components/InboxWelcome/index.tsx

@@ -6,6 +6,8 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
+
 import AgentsSuggest from './AgentsSuggest';
 import QuestionSuggest from './QuestionSuggest';
 
@@ -40,7 +42,7 @@ const InboxWelcome = memo(() => {
   const { t } = useTranslation('welcome');
   const [greeting, setGreeting] = useState<'morning' | 'noon' | 'afternoon' | 'night'>();
   const { styles } = useStyles();
-
+  const mobile = useIsMobile();
   useEffect(() => {
     const now = new Date();
     const hours = now.getHours();
@@ -66,8 +68,8 @@ const InboxWelcome = memo(() => {
         <Markdown className={styles.desc} variant={'chat'}>
           {t('guide.defaultMessage')}
         </Markdown>
-        <AgentsSuggest />
-        <QuestionSuggest />
+        <AgentsSuggest mobile={mobile} />
+        <QuestionSuggest mobile={mobile} />
       </Flexbox>
     </Center>
   );

package/src/features/DataImporter/index.tsx

@@ -22,7 +22,6 @@ const useStyles = createStyles(({ css, token }) => {
         background-color: transparent;
       }
     `,
-
     loader: css`
       transform: translateX(-${size * 2}px);
 
@@ -125,6 +124,9 @@ const useStyles = createStyles(({ css, token }) => {
         }
       }
     `,
+    wrapper: css`
+      font-size: inherit;
+    `,
   };
 });
 
@@ -237,6 +239,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
 
           return false;
         }}
+        className={styles.wrapper}
         maxCount={1}
         showUploadList={false}
       >

package/src/features/User/PlanTag.tsx

@@ -0,0 +1,45 @@
+import { Tooltip } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { useTheme } from 'antd-style';
+import { CSSProperties, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export enum PlanType {
+  Preview = 'preview',
+}
+
+export interface PlanTagProps {
+  type?: PlanType;
+}
+
+const PlanTag = memo<PlanTagProps>(({ type = PlanType.Preview }) => {
+  const { t } = useTranslation('common');
+  const theme = useTheme();
+  const tag: {
+    desc: string;
+    style: CSSProperties;
+    title: string;
+  } = useMemo(() => {
+    switch (type) {
+      case PlanType.Preview: {
+        return {
+          desc: t('userPanel.preview'),
+          style: {
+            background: theme.colorFill,
+          },
+          title: 'Preview',
+        };
+      }
+    }
+  }, []);
+
+  return (
+    <Tooltip title={tag.desc}>
+      <Tag bordered={false} style={{ ...tag.style, borderRadius: 12, cursor: 'pointer' }}>
+        {tag.title}
+      </Tag>
+    </Tooltip>
+  );
+});
+
+export default PlanTag;

package/src/features/User/UserInfo.tsx

@@ -3,11 +3,13 @@
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-import UserAvatar from './UserAvatar';
+import PlanTag from '@/features/User/PlanTag';
 
-const DEFAULT_USERNAME = 'LobeChat Community Edition';
+import UserAvatar, { type UserAvatarProps } from './UserAvatar';
+
+const DEFAULT_USERNAME = 'LobeChat';
 
 const useStyles = createStyles(({ css, token }) => ({
   nickname: css`
@@ -21,19 +23,34 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const UserInfo = memo<{ onClick?: () => void }>(({ onClick }) => {
+export interface UserInfoProps extends FlexboxProps {
+  avatarProps?: Partial<UserAvatarProps>;
+}
+
+const UserInfo = memo<UserInfoProps>(({ avatarProps, ...rest }) => {
   const { t } = useTranslation('common');
   const { styles, theme } = useStyles();
 
   const DEFAULT_NICKNAME = t('userPanel.defaultNickname');
 
   return (
-    <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={16}>
-      <UserAvatar background={theme.colorFill} onClick={onClick} size={48} />
-      <Flexbox flex={1} gap={6}>
-        <div className={styles.nickname}>{DEFAULT_NICKNAME}</div>
-        <div className={styles.username}>{DEFAULT_USERNAME}</div>
+    <Flexbox
+      align={'center'}
+      gap={12}
+      horizontal
+      justify={'space-between'}
+      paddingBlock={12}
+      paddingInline={12}
+      {...rest}
+    >
+      <Flexbox align={'center'} gap={12} horizontal>
+        <UserAvatar background={theme.colorFill} size={48} {...avatarProps} />
+        <Flexbox flex={1} gap={6}>
+          <div className={styles.nickname}>{DEFAULT_NICKNAME}</div>
+          <div className={styles.username}>{DEFAULT_USERNAME}</div>
+        </Flexbox>
       </Flexbox>
+      <PlanTag />
     </Flexbox>
   );
 });

package/src/locales/default/common.ts

@@ -137,6 +137,7 @@ export default {
     me: '我',
     setting: '设置',
   },
+
   telemetry: {
     allow: '允许',
     deny: '拒绝',
@@ -144,7 +145,6 @@ export default {
     learnMore: '了解更多',
     title: '帮助 LobeChat 做得更好',
   },
-
   temp: '临时',
   terms: '服务条款',
   updateAgent: '更新助理信息',
@@ -163,6 +163,7 @@ export default {
     help: '帮助中心',
     moveGuide: '设置按钮搬到这里啦',
     plans: '订阅方案',
+    preview: '预览版',
     profile: '账户管理',
     setting: '应用设置',
     usages: '用量统计',

package/src/styles/mobileHeader.ts

@@ -6,3 +6,10 @@ export const mobileHeaderSticky: CSSProperties = {
   width: '100%',
   zIndex: 100,
 };
+
+export const mobileHeaderFixed: CSSProperties = {
+  position: 'fixed',
+  top: 0,
+  width: '100%',
+  zIndex: 100,
+};