@lobehub/chat 0.88.0 → 0.89.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.89.1](https://github.com/lobehub/lobe-chat/compare/v0.89.0...v0.89.1)
+
+<sup>Released on **2023-10-12**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Remove useless dynamic import.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Remove useless dynamic import ([4a9c426](https://github.com/lobehub/lobe-chat/commit/4a9c426))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.89.0](https://github.com/lobehub/lobe-chat/compare/v0.88.0...v0.89.0)
+
+<sup>Released on **2023-10-12**</sup>
+
+#### ✨ Features
+
+- **agent-card**: Add and modify features for agent card.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **agent-card**: Add and modify features for agent card ([3e3090a](https://github.com/lobehub/lobe-chat/commit/3e3090a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.88.0](https://github.com/lobehub/lobe-chat/compare/v0.87.0...v0.88.0)
 
 <sup>Released on **2023-10-11**</sup>

package/locales/en_US/common.json

@@ -73,6 +73,7 @@
     "shareToShareGPT": "Generate ShareGPT sharing link"
   },
   "stop": "Stop",
+  "switchMobileLayout": "Switching to mobile layout...",
   "tab": {
     "chat": "Chat",
     "market": "Discover",

package/locales/en_US/error.json

@@ -31,7 +31,8 @@
   "unlock": {
     "apikey": {
       "title": "Use Custom API Key",
-      "description": "Enter your OpenAI API Key to start the conversation. The application will not record your API Key."
+      "description": "Enter your OpenAI API Key to start the conversation. The application will not record your API Key.",
+      "addProxyUrl": "Add OpenAI Proxy URL (optional)"
     },
     "confirm": "Confirm and Retry",
     "password": {

package/locales/en_US/setting.json

@@ -75,6 +75,11 @@
         "fetch": "Get list",
         "title": "Azure OpenAI",
         "serverConfig": "The administrator has enabled Azure OpenAI on the server side, switching is prohibited"
+      },
+      "customModelName": {
+        "desc": "Add custom models, separate multiple models with commas (,)",
+        "placeholder": "model1,model2,model3",
+        "title": "Custom Model Name"
       }
     },
     "waitingForMore": "<1>Access to other models is planned</1>, so stay tuned ✨"

package/locales/ja_JP/common.json

@@ -73,6 +73,7 @@
     "withSystemRole": "アシスタントの役割設定を含む"
   },
   "stop": "停止",
+  "switchMobileLayout": "モバイルレイアウトに切り替え中...",
   "tab": {
     "chat": "チャット",
     "market": "発見",

package/locales/ja_JP/error.json

@@ -31,7 +31,8 @@
   "unlock": {
     "apikey": {
       "title": "カスタムAPIキーの使用",
-      "description": "OpenAI APIキーを入力すると、会話を開始できます。アプリはあなたのAPIキーを記録しません。"
+      "description": "OpenAI APIキーを入力すると、会話を開始できます。アプリはあなたのAPIキーを記録しません。",
+      "addProxyUrl": "OpenAIプロキシURLを追加（オプション）"
     },
     "closeMessage": "ヒントを閉じる",
     "confirm": "確認して再試行",

package/locales/ja_JP/setting.json

@@ -75,6 +75,11 @@
         "fetch": "リストを取得",
         "serverConfig": "管理者がサーバー側でAzure OpenAIを設定しており、切り替えが禁止されています",
         "title": "Azure OpenAI"
+      },
+      "customModelName": {
+        "desc": "カスタムモデルを追加します。複数のモデルはカンマ（,）で区切ってください",
+        "placeholder": "model1,model2,model3",
+        "title": "カスタムモデル名"
       }
     },
     "waitingForMore": "他のモデルは現在 <1>計画中</1> です。お楽しみに ✨"

package/locales/ko_KR/common.json

@@ -73,6 +73,7 @@
     "withSystemRole": "어시스턴트 역할 포함"
   },
   "stop": "중지",
+  "switchMobileLayout": "모바일 레이아웃으로 전환 중...",
   "tab": {
     "chat": "채팅",
     "market": "탐색",

package/locales/ko_KR/error.json

@@ -31,7 +31,8 @@
   "unlock": {
     "apikey": {
       "title": "사용자 정의 API 키 사용",
-      "description": "OpenAI API 키를 입력하면 대화를 시작할 수 있습니다. 애플리케이션은 API 키를 기록하지 않습니다."
+      "description": "OpenAI API 키를 입력하면 대화를 시작할 수 있습니다. 애플리케이션은 API 키를 기록하지 않습니다.",
+      "addProxyUrl": "OpenAI 프록시 주소 추가하기 (선택 사항)"
     },
     "closeMessage": "알림 닫기",
     "confirm": "확인 및 다시 시도",

package/locales/ko_KR/setting.json

@@ -75,6 +75,11 @@
         "fetch": "목록 가져오기",
         "serverConfig": "관리자가 서버에서 Azure OpenAI를 구성했으므로 변경이 금지되었습니다.",
         "title": "Azure OpenAI"
+      },
+      "customModelName": {
+        "desc": "사용자 정의 모델 추가, 여러 모델은 쉼표(,)로 구분합니다",
+        "placeholder": "model1,model2,model3",
+        "title": "사용자 정의 모델 이름"
       }
     },
     "waitingForMore": "더 많은 모델이 <1>계획 중</1>에 있으니 기대해주세요 ✨"

package/locales/ru_RU/common.json

@@ -73,6 +73,7 @@
     "shareToShareGPT": "Создать ссылку для обмена ShareGPT"
   },
   "stop": "Остановить",
+  "switchMobileLayout": "Переключение на мобильный макет...",
   "tab": {
     "chat": "Чат",
     "market": "Магазин ассистентов",

package/locales/ru_RU/error.json

@@ -31,7 +31,8 @@
   "unlock": {
     "apikey": {
       "title": "Использовать собственный ключ API",
-      "description": "Введите свой ключ API OpenAI, чтобы начать сеанс. Приложение не будет сохранять ваш ключ API."
+      "description": "Введите свой ключ API OpenAI, чтобы начать сеанс. Приложение не будет сохранять ваш ключ API.",
+      "addProxyUrl": "Добавить адрес прокси OpenAI (необязательно)"
     },
     "confirm": "Подтвердить и повторить попытку",
     "password": {

package/locales/ru_RU/setting.json

@@ -75,6 +75,11 @@
         "fetch": "Получить список",
         "title": "Azure OpenAI",
         "serverConfig": "Администратор настроил сервер для использования Azure OpenAI. Переключение запрещено."
+      },
+      "customModelName": {
+        "desc": "Добавьте пользовательскую модель, разделяя их запятыми (,)",
+        "placeholder": "model1,model2,model3",
+        "title": "Название пользовательской модели"
       }
     },
     "waitingForMore": "<1>Планируется доступ к другим моделям</1>, так что следите за обновлениями ✨"

package/locales/zh_CN/common.json

@@ -73,6 +73,7 @@
     "withSystemRole": "包含助手角色设定"
   },
   "stop": "停止",
+  "switchMobileLayout": "正在切换到移动端布局...",
   "tab": {
     "chat": "会话",
     "market": "发现",

package/locales/zh_CN/error.json

@@ -30,6 +30,7 @@
   },
   "unlock": {
     "apikey": {
+      "addProxyUrl": "添加 OpenAI 代理地址（可选）",
       "description": "输入你的 OpenAI API Key 即可开始会话。应用不会记录你的 API Key",
       "title": "使用自定义 API Key"
     },

package/locales/zh_CN/setting.json

@@ -50,6 +50,11 @@
         "pass": "检查通过",
         "title": "连通性检查"
       },
+      "customModelName": {
+        "desc": "增加自定义模型，多个模型使用逗号（,） 隔开",
+        "placeholder": "model1,model2,model3",
+        "title": "自定义模型名称"
+      },
       "endpoint": {
         "desc": "除默认地址外，必须包含 http(s)://",
         "placeholder": "https://api.openai.com/v1",

package/locales/zh_TW/common.json

@@ -73,6 +73,7 @@
     "shareToShareGPT": "生成 ShareGPT 分享連結"
   },
   "stop": "停止",
+  "switchMobileLayout": "正在切換到行動端佈局...",
   "tab": {
     "chat": "聊天",
     "market": "探索",

package/locales/zh_TW/error.json

@@ -31,7 +31,8 @@
   "unlock": {
     "apikey": {
       "title": "使用自定義 API Key",
-      "description": "輸入你的 OpenAI API Key 即可開始會話。應用程式不會記錄你的 API Key"
+      "description": "輸入你的 OpenAI API Key 即可開始會話。應用程式不會記錄你的 API Key",
+      "addProxyUrl": "添加 OpenAI 代理地址（可選）"
     },
     "confirm": "確認並重試",
     "password": {

package/locales/zh_TW/setting.json

@@ -75,6 +75,11 @@
         "fetch": "取得列表",
         "title": "Azure OpenAI",
         "serverConfig": "管理員已在伺服器端啟用 Azure OpenAI，禁止切換"
+      },
+      "customModelName": {
+        "desc": "增加自訂模型，多個模型使用逗號（,） 隔開",
+        "placeholder": "model1,model2,model3",
+        "title": "自訂模型名稱"
       }
     },
     "waitingForMore": "<1>計劃支援其他模型</1>，敬請期待 ✨"

package/next.config.mjs

@@ -16,8 +16,8 @@ const withPWA = nextPWA({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  compress: isProd,
   reactStrictMode: true,
-  swcMinify: true,
   images: {
     unoptimized: !isProd,
     remotePatterns: [
@@ -39,12 +39,20 @@ const nextConfig = {
         port: '',
         pathname: '/@lobehub/assets-logo/1.1.0/files/assets/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'registry.npmmirror.com',
+        port: '',
+        pathname: '/@lobehub/assets-favicons/latest/files/assets/**',
+      },
     ],
   },
   experimental: {
+    webVitalsAttribution: ['CLS', 'LCP'],
     forceSwcTransforms: true,
+    optimizePackageImports: ['modern-screenshot','emoji-mart','@emoji-mart/react','@emoji-mart/data','@icons-pack/react-simple-icons','gpt-tokenizer','chroma-js'],
   },
-  transpilePackages: ['@lobehub/ui', 'antd-style'],
+  transpilePackages: ['@lobehub/ui', 'antd-style', 'lodash-es'],
 
   webpack(config) {
     config.experiments = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.88.0",
+  "version": "0.89.1",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -66,7 +66,6 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7",
-    "@ant-design/icons": "^5",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",

package/src/app/chat/(mobile)/features/TopicList.tsx

@@ -1,11 +1,10 @@
 import { Modal } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
 
-const TopicListContent = dynamic(() => import('../../features/TopicListContent'));
+import TopicListContent from '../../features/TopicListContent';
 
 const Topics = memo(() => {
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [

package/src/app/home/index.tsx

@@ -1,24 +1,13 @@
 'use client';
 
-import { Icon, Logo } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+
+import FullscreenLoading from '@/components/FullscreenLoading';
 
 const Loading = () => {
   const { t } = useTranslation();
 
-  return (
-    <Flexbox height={'100%'} width={'100%'}>
-      <Center flex={1} gap={12} width={'100%'}>
-        <Logo extra={'Chat'} size={48} type={'combine'} />
-        <Center gap={16} horizontal>
-          <Icon icon={Loader2} spin />
-          {t('appInitializing', { ns: 'common' })}
-        </Center>
-      </Center>
-    </Flexbox>
-  );
+  return <FullscreenLoading title={t('switchMobileLayout')} />;
 };
 
 export default Loading;

package/src/app/market/(desktop)/features/AgentDetail.tsx

@@ -1,13 +1,12 @@
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import dynamic from 'next/dynamic';
 import { memo, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const AgentDetailContent = dynamic(() => import('../../features/AgentDetailContent'));
+import AgentDetailContent from '../../features/AgentDetailContent';
 
 const useStyles = createStyles(({ css, token, stylish }) => ({
   content: css`

package/src/app/market/(desktop)/index.tsx

@@ -1,19 +1,22 @@
 'use client';
 
+import { SpotlightCard } from '@lobehub/ui';
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import { AgentCardProps } from '@/app/market/features/AgentCard';
+import AgentCard from '@/app/market/features/AgentCard';
 import ResponsiveIndex from '@/components/ResponsiveIndex';
+import { AgentsMarketIndexItem } from '@/types/market';
 
 import Index from '../index';
 import Layout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
-export default memo<AgentCardProps>((props) => (
+export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
   <ResponsiveIndex Mobile={Mobile}>
     <Layout>
-      <Index {...props} />
+      <Index />
+      <AgentCard CardRender={SpotlightCard} defaultAgents={defaultAgents} />
     </Layout>
   </ResponsiveIndex>
 ));

package/src/app/market/(mobile)/features/AgentCard.tsx

@@ -3,11 +3,11 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     overflow: hidden;
     background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorFillTertiary};
+    border: 1px solid ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
     border-radius: ${token.borderRadiusLG}px;
   `,
 }));

package/src/app/market/(mobile)/features/AgentDetail.tsx

@@ -1,11 +1,10 @@
 import { Modal } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const AgentDetailContent = dynamic(() => import('../../features/AgentDetailContent'));
+import AgentDetailContent from '../../features/AgentDetailContent';
 
 const AgentDetail = memo(() => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [

package/src/app/market/(mobile)/index.tsx

@@ -1,12 +1,17 @@
+'use client';
+
 import { memo } from 'react';
 
-import { AgentCardProps } from '@/app/market/features/AgentCard';
+import AgentCard from '@/app/market/features/AgentCard';
+import { AgentsMarketIndexItem } from '@/types/market';
 
 import Index from '../index';
+import CardRender from './features/AgentCard';
 import Layout from './layout.mobile';
 
-export default memo<AgentCardProps>((props) => (
+export default memo<{ defaultAgents?: AgentsMarketIndexItem[] }>(({ defaultAgents }) => (
   <Layout>
-    <Index {...props} />
+    <Index />
+    <AgentCard CardRender={CardRender} defaultAgents={defaultAgents} />
   </Layout>
 ));

package/src/app/market/features/AgentCard/AgentCardBanner.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { MetaData } from '@/types/meta';
 
-export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+export const useStyles = createStyles(({ css, token }) => ({
   banner: css`
     position: relative;
 
@@ -14,20 +14,14 @@ export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
     height: 64px;
     margin-bottom: -56px;
 
-    background: ${token.colorFill};
+    background: ${token.colorFillSecondary};
+
+    mask-image: linear-gradient(to bottom, #fff, transparent);
   `,
   bannerImg: css`
-    filter: blur(6px) saturate(1.6);
-  `,
-  bannerMask: css`
     position: absolute;
-    bottom: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout});
+    top: -50%;
+    filter: blur(50px) saturate(2);
   `,
 }));
 
@@ -39,8 +33,8 @@ interface AgentCardBannerProps extends DivProps {
 }
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
-  ({ meta, className, mask, size = 8, maskColor, children, ...props }) => {
-    const { styles, theme, cx } = useStyles(maskColor);
+  ({ meta, className, size = 200, children, ...props }) => {
+    const { styles, cx } = useStyles();
 
     return (
       <Flexbox
@@ -49,14 +43,7 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
         justify={'center'}
         {...props}
       >
-        <Avatar
-          alt={'banner'}
-          avatar={meta.avatar}
-          background={meta.backgroundColor || theme.colorBgContainer}
-          className={styles.bannerImg}
-          style={{ transform: `scale(${size})` }}
-        />
-        {mask && <div className={styles.bannerMask} />}
+        <Avatar alt={'banner'} avatar={meta.avatar} className={styles.bannerImg} size={size} />
         {children}
       </Flexbox>
     );

package/src/app/market/features/AgentCard/AgentCardItem.tsx

@@ -22,12 +22,7 @@ const AgentCardItem = memo<AgentsMarketIndexItem>(({ meta, identifier }) => {
   const { isDarkMode } = useThemeMode();
   return (
     <Flexbox className={styles.container} onClick={() => onAgentCardClick(identifier)}>
-      <AgentCardBanner
-        mask
-        maskColor={theme.colorBgContainer}
-        meta={meta}
-        style={{ opacity: isDarkMode ? 0.9 : 0.4 }}
-      />
+      <AgentCardBanner meta={meta} style={{ opacity: isDarkMode ? 0.9 : 0.4 }} />
       <Flexbox className={styles.inner} gap={8} ref={ref}>
         <Avatar
           animation={isHovering}

package/src/app/market/features/AgentCard/index.tsx

@@ -1,6 +1,6 @@
+import { SpotlightCardProps } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import dynamic from 'next/dynamic';
-import { memo, useMemo } from 'react';
+import { FC, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -12,16 +12,14 @@ import AgentCardItem from './AgentCardItem';
 import Loading from './Loading';
 import { useStyles } from './style';
 
-const AgentCardMobile = dynamic(() => import('../../(mobile)/features/AgentCard'));
-const AgentCardDesktop = dynamic(() => import('@lobehub/ui/es/SpotlightCard'));
-
 const gridRender = (item: any) => <AgentCardItem {...item} />;
 
 export interface AgentCardProps {
+  CardRender: FC<SpotlightCardProps>;
   defaultAgents?: AgentsMarketIndexItem[];
 }
 
-const AgentCard = memo<AgentCardProps>(({ defaultAgents }) => {
+const AgentCard = memo<AgentCardProps>(({ defaultAgents, CardRender }) => {
   const { t } = useTranslation('market');
   const { mobile } = useResponsive();
   const { styles } = useStyles();
@@ -42,8 +40,6 @@ const AgentCard = memo<AgentCardProps>(({ defaultAgents }) => {
 
   if (agentList.length === 0) return <Loading />;
 
-  const CardRender = mobile ? AgentCardMobile : AgentCardDesktop;
-
   return (
     <Flexbox gap={mobile ? 16 : 24}>
       <TagList />

package/src/app/market/features/AgentDetailContent/AgentInfo/index.tsx

@@ -1,5 +1,4 @@
 import { Markdown, TabsNav } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -23,8 +22,8 @@ const AgentModalInner = memo(() => {
     s.useFetchAgent,
     s.currentIdentifier,
   ]);
-  const { styles, theme } = useStyles();
-  const { mobile } = useResponsive();
+  const { styles } = useStyles();
+
   const { data, isLoading } = useFetchAgent(currentIdentifier);
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
@@ -36,13 +35,7 @@ const AgentModalInner = memo(() => {
 
   return (
     <>
-      <AgentCardBanner
-        mask
-        maskColor={mobile ? theme.colorBgContainer : undefined}
-        meta={meta}
-        size={10}
-        style={{ height: 120, marginBottom: -60 }}
-      />
+      <AgentCardBanner meta={meta} size={400} style={{ height: 120, marginBottom: -60 }} />
       <Header />
       <Flexbox align={'center'}>
         <TabsNav

package/src/app/market/features/TagList/index.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
 import { memo } from 'react';
@@ -12,17 +12,21 @@ const TagList = memo(() => {
 
   return (
     <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-      {agentTagList.map((item) => (
-        <Button
-          key={item}
-          onClick={() => useMarketStore.setState({ searchKeywords: item })}
-          shape={'round'}
-          size={'small'}
-          type={keywords === item ? 'primary' : 'default'}
-        >
-          {startCase(item)}
-        </Button>
-      ))}
+      {agentTagList?.length > 0
+        ? agentTagList.map((item) => (
+            <Button
+              key={item}
+              onClick={() => useMarketStore.setState({ searchKeywords: item })}
+              shape={'round'}
+              size={'small'}
+              type={keywords === item ? 'primary' : 'default'}
+            >
+              {startCase(item)}
+            </Button>
+          ))
+        : Array.from({ length: 5 })
+            .fill('')
+            .map((_, index) => <Skeleton.Button key={index} shape={'round'} size={'small'} />)}
     </Flexbox>
   );
 });

package/src/app/market/index.tsx

@@ -7,10 +7,9 @@ import PageTitle from '@/components/PageTitle';
 import { useMarketStore } from '@/store/market';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import AgentCard, { AgentCardProps } from './features/AgentCard';
 import AgentSearchBar from './features/AgentSearchBar';
 
-const Market = memo<AgentCardProps>(({ defaultAgents }) => {
+const Market = memo(() => {
   const { t } = useTranslation('common');
   const pageTitle = genSiteHeadTitle(t('tab.market'));
 
@@ -23,7 +22,6 @@ const Market = memo<AgentCardProps>(({ defaultAgents }) => {
     <>
       <PageTitle title={pageTitle} />
       <AgentSearchBar />
-      <AgentCard defaultAgents={defaultAgents} />
     </>
   );
 });

package/src/app/metadata.ts

@@ -9,9 +9,9 @@ const { description, homepage } = pkg;
 const metadata: Metadata = {
   appleWebApp: {
     statusBarStyle: 'black-translucent',
-    title: title,
+    title,
   },
-  description: description,
+  description,
   icons: {
     apple:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png',
@@ -26,13 +26,13 @@ const metadata: Metadata = {
       {
         alt: title,
         height: 360,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-480x270.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-480x270.png',
         width: 480,
       },
       {
         alt: title,
         height: 720,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-960x540.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x540.png',
         width: 960,
       },
     ],
@@ -50,6 +50,15 @@ const metadata: Metadata = {
     default: title,
     template: '%s · LobeChat',
   },
+  twitter: {
+    card: 'summary_large_image',
+    creator: '@lobehub',
+    description,
+    images: [
+      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x540.png',
+    ],
+    title,
+  },
   viewport: {
     initialScale: 1,
     maximumScale: 1,

package/src/app/settings/(mobile)/features/AvatarBanner.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 
-export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+export const useStyles = createStyles(({ css, token }) => ({
   banner: css`
     position: relative;
 
@@ -15,36 +15,32 @@ export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
     height: 172px;
     min-height: 172px;
     max-height: 172px;
+  `,
+  bannerBox: css`
+    position: relative;
+
+    width: 100%;
+    height: 100%;
 
     background: ${token.colorBgLayout};
+
+    mask-image: linear-gradient(to bottom, #fff, transparent);
   `,
   bannerImg: css`
     position: absolute;
     top: -50%;
     filter: blur(100px) saturate(2);
   `,
-  bannerMask: css`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    background: linear-gradient(to bottom, transparent, ${maskColor || token.colorBgLayout});
-  `,
 }));
 
 interface AgentCardBannerProps extends DivProps {
   avatar: string;
-  mask?: boolean;
-  maskColor?: string;
   size?: number;
 }
 
 const AvatarBanner = memo<AgentCardBannerProps>(
-  ({ avatar, className, mask, size = 200, maskColor, children, ...props }) => {
-    const { styles, cx } = useStyles(maskColor);
+  ({ avatar, className, size = 200, children, ...props }) => {
+    const { styles, cx } = useStyles();
 
     return (
       <Flexbox
@@ -53,14 +49,15 @@ const AvatarBanner = memo<AgentCardBannerProps>(
         justify={'center'}
         {...props}
       >
-        <Image
-          alt={'banner'}
-          className={styles.bannerImg}
-          height={size}
-          src={avatar || DEFAULT_USER_AVATAR_URL}
-          width={size}
-        />
-        {mask && <div className={styles.bannerMask} />}
+        <Flexbox align={'center'} className={styles.bannerBox} justify={'center'}>
+          <Image
+            alt={'banner'}
+            className={styles.bannerImg}
+            height={size}
+            src={avatar || DEFAULT_USER_AVATAR_URL}
+            width={size}
+          />
+        </Flexbox>
         {children}
       </Flexbox>
     );

package/src/app/settings/(mobile)/mobile/index.tsx

@@ -33,7 +33,7 @@ const Setting = memo(() => {
 
   return (
     <Layout>
-      <AvatarBanner avatar={avatar} mask>
+      <AvatarBanner avatar={avatar}>
         <Center style={{ position: 'absolute', zIndex: 2 }}>
           <AvatarWithUpload size={88} />
         </Center>

package/src/app/welcome/features/Banner/Hero.tsx

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { genSize, useStyles } from './style';
@@ -7,24 +7,23 @@ import { genSize, useStyles } from './style';
 const LogoThree = dynamic(() => import('@lobehub/ui/es/LogoThree'));
 
 const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
-  const size = useMemo(
-    () => ({
-      base: genSize(width / 3.5, 240),
-      desc: genSize(width / 50, 14),
-      logo: genSize(width / 3.8, 180),
-      title: genSize(width / 20, 32),
-    }),
-    [width],
-  );
+  const size = {
+    base: genSize(width / 3.5, 240),
+    desc: genSize(width / 50, 14),
+    logo: genSize(width / 3.8, 180),
+    title: genSize(width / 20, 32),
+  };
   const { styles } = useStyles(size.base);
 
   const { t } = useTranslation('welcome');
 
   return (
     <>
-      <LogoThree size={size.logo} style={{ marginTop: -size.logo / 5 }} />
+      <div style={{ height: size.logo, marginTop: -size.logo / 5, width: size.logo }}>
+        <LogoThree size={size.logo} />
+      </div>
       <div className={styles.title} style={{ fontSize: size.title }}>
-        <span style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</span>
+        <strong style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</strong>
         {mobile ? <br /> : ' '}
         {t('slogan.title')}
       </div>

package/src/app/welcome/features/Banner/index.tsx

@@ -1,26 +1,20 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
-import dynamic from 'next/dynamic';
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { useSessionStore } from '@/store/session';
 
+import Hero from './Hero';
 import { useStyles } from './style';
 
-const Hero = dynamic(() => import('./Hero'));
-
 const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { importConfig } = useImportConfig();
-  const ref = useRef(null);
-  const domSize = useSize(ref);
-  const width = domSize?.width || 1024;
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
   const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [
@@ -36,8 +30,8 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   return (
     <>
-      <div className={styles.container} ref={ref}>
-        <Hero mobile={mobile} width={width} />
+      <div className={styles.container}>
+        <Hero mobile={mobile} width={mobile ? 640 : 1024} />
       </div>
       <Flexbox
         className={styles.buttonGroup}

package/src/components/FullscreenLoading/index.tsx

@@ -0,0 +1,20 @@
+import { Icon, Logo } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const FullscreenLoading = memo<{ title?: string }>(({ title }) => {
+  return (
+    <Flexbox height={'100%'} width={'100%'}>
+      <Center flex={1} gap={12} width={'100%'}>
+        <Logo extra={'Chat'} size={48} type={'combine'} />
+        <Center gap={16} horizontal>
+          <Icon icon={Loader2} spin />
+          {title}
+        </Center>
+      </Center>
+    </Flexbox>
+  );
+});
+
+export default FullscreenLoading;

package/src/const/layoutTokens.ts

@@ -2,9 +2,9 @@ import type { FormProps } from '@lobehub/ui';
 
 export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
-export const MOBILE_TABBAR_HEIGHT = 60;
+export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
-export const CHAT_TEXTAREA_HEIGHT_MOBILE = 120;
+export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;

package/src/layout/ResponsiveLayout.client.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
 
+import FullscreenLoading from '@/components/FullscreenLoading';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface ServerResponsiveLayoutProps {
@@ -10,9 +12,14 @@ interface ServerResponsiveLayoutProps {
   children?: ReactNode;
 }
 const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+  const { t } = useTranslation();
   const mobile = useIsMobile();
 
-  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+  return (
+    <Suspense fallback={<FullscreenLoading title={t('appInitializing')} />}>
+      {mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>}
+    </Suspense>
+  );
 };
 
 export default ResponsiveLayout;

package/src/locales/default/common.ts

@@ -75,6 +75,7 @@ export default {
     withSystemRole: '包含助手角色设定',
   },
   stop: '停止',
+  switchMobileLayout: '正在切换到移动端布局...',
   tab: {
     chat: '会话',
     market: '发现',