@lobehub/chat 0.87.0 → 0.88.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+## [Version 0.88.0](https://github.com/lobehub/lobe-chat/compare/v0.87.0...v0.88.0)
+
+<sup>Released on **2023-10-11**</sup>
+
+#### ✨ Features
+
+- **misc**: Add mobile responsiveness, create new component, modify properties, make API calls, Dynamically import components using "dynamic" function.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add mobile responsiveness, create new component, modify properties, make API calls ([759c920](https://github.com/lobehub/lobe-chat/commit/759c920))
+- **misc**: Dynamically import components using "dynamic" function ([dd9db22](https://github.com/lobehub/lobe-chat/commit/dd9db22))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.87.0](https://github.com/lobehub/lobe-chat/compare/v0.86.5...v0.87.0)
 
 <sup>Released on **2023-10-11**</sup>

package/next.config.mjs

@@ -18,11 +18,31 @@ const withPWA = nextPWA({
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  images: { 
-    unoptimized:!isProd, 
-  }, 
-  experimental: { 
-    forceSwcTransforms: true, 
+  images: {
+    unoptimized: !isProd,
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'registry.npmmirror.com',
+        port: '',
+        pathname: '/@lobehub/assets-emoji/1.3.0/files/assets/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'registry.npmmirror.com',
+        port: '',
+        pathname: '/@lobehub/assets-emoji-anim/1.0.0/files/assets/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'registry.npmmirror.com',
+        port: '',
+        pathname: '/@lobehub/assets-logo/1.1.0/files/assets/**',
+      },
+    ],
+  },
+  experimental: {
+    forceSwcTransforms: true,
   },
   transpilePackages: ['@lobehub/ui', 'antd-style'],
 

package/package.json

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

package/src/app/chat/(desktop)/features/SideBar.tsx

@@ -1,5 +1,6 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
@@ -9,7 +10,8 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
 import TopicListContent from '../../features/TopicListContent';
-import SystemRole from '../../features/TopicListContent/SystemRole';
+
+const SystemRole = dynamic(() => import('../../features/TopicListContent/SystemRole'));
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`

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

@@ -1,17 +1,19 @@
 'use client';
 
-import { memo } from 'react';
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ResponsiveIndex from '@/components/ResponsiveIndex';
 
-import Mobile from '../(mobile)';
 import Conversation from '../features/Conversation';
 import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
 import ChatInput from './features/ChatInput';
 import SideBar from './features/SideBar';
-import Layout from './layout.responsive';
+import Layout from './layout.desktop';
+
+const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
 
 const DesktopPage = memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

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

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

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

@@ -1,13 +1,15 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Conversation from '../../features/Conversation';
 import ChatInput from '../features/ChatInput';
-import TopicList from '../features/TopicList';
 import Layout from './layout.mobile';
 
+const TopicList = dynamic(() => import('../features/TopicList'));
+
 const Chat = memo(() => (
   <Layout>
     <Flexbox height={'calc(100% - 44px)'} horizontal>

package/src/app/chat/features/ChatHeader/ShareButton/index.tsx

@@ -1,13 +1,14 @@
 import { ActionIcon, Modal } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
-import Inner from './Inner';
+const Inner = dynamic(() => import('./Inner'));
 
 const ShareButton = memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);

package/src/app/chat/features/SessionListContent/Inbox/index.tsx

@@ -37,7 +37,7 @@ const Inbox = memo(() => {
 
   return (
     <Link
-      aria-label={INBOX_SESSION_ID}
+      aria-label={t('inbox.title')}
       href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();

package/src/app/chat/settings/(desktop)/index.tsx

@@ -1,14 +1,21 @@
 'use client';
 
-import { memo } from 'react';
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
+
+import ResponsiveIndex from '@/components/ResponsiveIndex';
 
 import EditPage from '../features/EditPage';
-import Layout from './layout.responsive';
+import Layout from './layout.desktop';
+
+const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
 
 const ChatSettings = memo(() => (
-  <Layout>
-    <EditPage />
-  </Layout>
+  <ResponsiveIndex Mobile={Mobile}>
+    <Layout>
+      <EditPage />
+    </Layout>
+  </ResponsiveIndex>
 ));
 
 export default ChatSettings;

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

@@ -1,12 +1,13 @@
 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';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
+const AgentDetailContent = dynamic(() => import('../../features/AgentDetailContent'));
 
 const useStyles = createStyles(({ css, token, stylish }) => ({
   content: css`

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

@@ -1,12 +1,19 @@
-import { memo } from 'react';
+'use client';
+
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
 
 import { AgentCardProps } from '@/app/market/features/AgentCard';
+import ResponsiveIndex from '@/components/ResponsiveIndex';
 
 import Index from '../index';
-import Layout from './layout.responsive';
+import Layout from './layout.desktop';
 
+const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
 export default memo<AgentCardProps>((props) => (
-  <Layout>
-    <Index {...props} />
-  </Layout>
+  <ResponsiveIndex Mobile={Mobile}>
+    <Layout>
+      <Index {...props} />
+    </Layout>
+  </ResponsiveIndex>
 ));

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

@@ -1,5 +1,6 @@
 import { GridBackground } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -9,9 +10,10 @@ import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import SideBar from './features/AgentDetail';
 import Header from './features/Header';
 
+const SideBar = dynamic(() => import('./features/AgentDetail'));
+
 const useStyles = createStyles(({ css }) => ({
   background: css`
     width: 80%;

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

@@ -0,0 +1,31 @@
+import { SpotlightCardProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    overflow: hidden;
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorFillTertiary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+}));
+
+const AgentCard = memo<SpotlightCardProps>(({ items, renderItem, gap = 8, ...props }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox gap={gap} {...props}>
+      {items.map((item, index) => {
+        const children = renderItem(item);
+        return (
+          <div className={styles.container} key={index}>
+            {children}
+          </div>
+        );
+      })}
+    </Flexbox>
+  );
+});
+
+export default AgentCard;

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

@@ -1,10 +1,11 @@
 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';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
+const AgentDetailContent = dynamic(() => import('../../features/AgentDetailContent'));
 
 const AgentDetail = memo(() => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [

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

@@ -1,5 +1,6 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -7,9 +8,10 @@ import AppLayoutMobile from '@/layout/AppLayout.mobile';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import DetailModal from './features/AgentDetail';
 import Header from './features/Header';
 
+const DetailModal = dynamic(() => import('./features/AgentDetail'));
+
 const MarketLayout = ({ children }: PropsWithChildren) => {
   useSwitchSideBarOnInit(SidebarTabKey.Market);
 

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

@@ -1,5 +1,5 @@
-import { SpotlightCard } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
+import dynamic from 'next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -12,6 +12,9 @@ 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 {
@@ -39,17 +42,19 @@ const AgentCard = memo<AgentCardProps>(({ defaultAgents }) => {
 
   if (agentList.length === 0) return <Loading />;
 
+  const CardRender = mobile ? AgentCardMobile : AgentCardDesktop;
+
   return (
     <Flexbox gap={mobile ? 16 : 24}>
       <TagList />
       {keywords ? (
-        <SpotlightCard items={agentListData} renderItem={gridRender} spotlight={false} />
+        <CardRender items={agentListData} renderItem={gridRender} spotlight={false} />
       ) : (
         <>
           <div className={styles.subTitle}>{t('title.recentSubmits')}</div>
-          <SpotlightCard items={agentListData.slice(0, 3)} renderItem={gridRender} />
+          <CardRender items={agentListData.slice(0, 3)} renderItem={gridRender} />
           <div className={styles.subTitle}>{t('title.allAgents')}</div>
-          <SpotlightCard items={agentListData.slice(3)} renderItem={gridRender} spotlight={false} />
+          <CardRender items={agentListData.slice(3)} renderItem={gridRender} spotlight={false} />
         </>
       )}
     </Flexbox>

package/src/app/market/features/AgentCard/style.ts

@@ -7,6 +7,9 @@ export const useStyles = createStyles(({ css, token, responsive }) => ({
     position: relative;
     overflow: hidden;
     border-radius: 11px;
+    ${responsive.mobile} {
+      border-radius: unset;
+    }
   `,
   desc: css`
     color: ${token.colorTextDescription};

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

@@ -1,12 +1,14 @@
 'use client';
 
-import { memo } from 'react';
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
 
 import ResponsiveIndex from '@/components/ResponsiveIndex';
 
-import Mobile from '../(mobile)';
 import Common from '../common';
-import Layout from './layout.responsive';
+import Layout from './layout.desktop';
+
+const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
 
 export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

package/src/app/settings/(desktop)/layout.desktop.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 

package/src/app/settings/(desktop)/layout.responsive.tsx

@@ -1,12 +1,14 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import dynamic from 'next/dynamic';
+import { FC, PropsWithChildren, memo } from 'react';
 
 import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
 
-import MobileLayout from '../(mobile)/layout.mobile';
 import DesktopLayout from './layout.desktop';
 
+const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile')) as FC;
+
 export default memo(({ children }: PropsWithChildren) => (
   <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
     {children}

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

@@ -0,0 +1,70 @@
+import { DivProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Image from 'next/image';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
+
+export const useStyles = createStyles(({ css, token }, maskColor: string) => ({
+  banner: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 172px;
+    min-height: 172px;
+    max-height: 172px;
+
+    background: ${token.colorBgLayout};
+  `,
+  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);
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.banner, className)}
+        justify={'center'}
+        {...props}
+      >
+        <Image
+          alt={'banner'}
+          className={styles.bannerImg}
+          height={size}
+          src={avatar || DEFAULT_USER_AVATAR_URL}
+          width={size}
+        />
+        {mask && <div className={styles.bannerMask} />}
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default AvatarBanner;

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

@@ -5,14 +5,13 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
-import AgentCardBanner from '@/app/market/features/AgentCard/AgentCardBanner';
 import { CURRENT_VERSION } from '@/const/version';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
-import { AVATAR } from '@/store/session/slices/chat/actions/share';
 
 import List from '../../features/SideBar/List';
+import AvatarBanner from '../features/AvatarBanner';
 import ExtraList from '../features/ExtraList';
 import Layout from './layout.mobile';
 
@@ -34,16 +33,11 @@ const Setting = memo(() => {
 
   return (
     <Layout>
-      <AgentCardBanner
-        mask
-        meta={{ avatar: avatar || AVATAR }}
-        size={10}
-        style={{ height: 172, marginBottom: 0 }}
-      >
+      <AvatarBanner avatar={avatar} mask>
         <Center style={{ position: 'absolute', zIndex: 2 }}>
           <AvatarWithUpload size={88} />
         </Center>
-      </AgentCardBanner>
+      </AvatarBanner>
       <div style={{ width: '100%' }}>
         <List />
         <div className={styles.divider} />

package/src/app/settings/features/Footer.tsx

@@ -5,15 +5,15 @@ import { Center } from 'react-layout-kit';
 
 const useStyles = createStyles(
   ({ css, token }) => css`
-    font-size: 14px;
-    color: ${token.colorTextDescription};
+    font-size: 12px;
+    color: ${token.colorTextQuaternary};
   `,
 );
 
 const Footer = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   return (
-    <Center style={{ maxWidth: 600, width: '100%' }}>
+    <Center style={{ maxWidth: 600, paddingInline: 16, width: '100%' }}>
       <Divider>
         <span className={styles}>{children}</span>
       </Divider>

package/src/app/settings/features/UpgradeAlert.tsx

@@ -22,7 +22,8 @@ const UpgradeAlert = memo(() => {
         }
         banner
         closable
-        message={t('upgradeVersion.newVersion', { version: latestVersion })}
+        message={`✨ ${t('upgradeVersion.newVersion', { version: latestVersion })}`}
+        showIcon={false}
         type={'info'}
       />
     )

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

@@ -1,13 +1,15 @@
 'use client';
 
-import { memo } from 'react';
+import dynamic from 'next/dynamic';
+import { FC, memo } from 'react';
 
 import ResponsiveIndex from '@/components/ResponsiveIndex';
 
-import Mobile from '../(mobile)';
 import Footer from './features/Footer';
 import Showcase from './features/Showcase';
-import Layout from './layout.responsive';
+import Layout from './layout.desktop';
+
+const Mobile: FC = dynamic(() => import('../(mobile)')) as FC;
 
 export default memo(() => (
   <ResponsiveIndex Mobile={Mobile}>

package/src/app/welcome/(desktop)/layout.desktop.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Logo } from '@lobehub/ui';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';

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

@@ -1,9 +1,11 @@
-import { LogoThree } from '@lobehub/ui';
+import dynamic from 'next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 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(
     () => ({

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

@@ -4,6 +4,7 @@ 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 { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -11,9 +12,10 @@ 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);

package/src/const/meta.ts

@@ -5,3 +5,5 @@ export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
 export const DEFAULT_AGENT_META: MetaData = {};
 export const DEFAULT_INBOX_AVATAR = '🤯';
+export const DEFAULT_USER_AVATAR_URL =
+  'https://registry.npmmirror.com/@lobehub/assets-logo/1.1.0/files/assets/logo-3d.webp';

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -2,10 +2,10 @@ import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehu
 import { Button } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { UserCircle, Wand2 } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import EmojiPicker from '@/components/EmojiPicker';
 import { FORM_STYLE } from '@/const/layoutTokens';
 
 import { useStore } from '../store';
@@ -13,6 +13,8 @@ import { SessionLoadingState } from '../store/initialState';
 import AutoGenerateInput from './AutoGenerateInput';
 import BackgroundSwatches from './BackgroundSwatches';
 
+const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'));
+
 const AgentMeta = memo(() => {
   const { t } = useTranslation('setting');
   const [hasSystemRole, updateMeta, autocompleteMeta, autocompleteAllMeta] = useStore((s) => [

package/src/features/AvatarWithUpload/index.tsx

@@ -1,6 +1,7 @@
-import { Avatar, Logo } from '@lobehub/ui';
+import { Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
+import Avatar from 'next/image';
 import { CSSProperties, memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
@@ -10,6 +11,7 @@ import { createUploadImageHandler } from '@/utils/uploadFIle';
 const useStyle = createStyles(
   ({ css, token }) => css`
     cursor: pointer;
+    overflow: hidden;
     border-radius: 50%;
     transition:
       scale 400ms ${token.motionEaseOut},
@@ -49,7 +51,11 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(
     return (
       <div className={styles} id={id} style={{ maxHeight: size, maxWidth: size, ...style }}>
         <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-          {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
+          {avatar ? (
+            <Avatar alt={'avatar'} height={size} src={avatar} width={size} />
+          ) : (
+            <Logo size={size} />
+          )}
         </Upload>
       </div>
     );

package/src/features/PluginDevModal/MetaForm.tsx

@@ -1,11 +1,13 @@
 import { Form, FormItemProps, Input } from '@lobehub/ui';
 import { FormInstance } from 'antd';
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import EmojiPicker from '@/components/EmojiPicker';
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 
+const EmojiPicker = dynamic(() => import('@/components/EmojiPicker'));
+
 const MetaForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form, mode }) => {
   const isEditMode = mode === 'edit';
 

package/src/layout/AppLayout.mobile.tsx

@@ -1,10 +1,12 @@
 import { type MobileNavBarTitleProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
 import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
-import MobileTabBar from '@/features/MobileTabBar';
+
+const MobileTabBar = dynamic(() => import('@/features/MobileTabBar'));
 
 const useStyles = createStyles(({ css, cx, stylish }) => ({
   container: cx(

package/src/layout/GlobalLayout/AppTheme.tsx

@@ -1,5 +1,6 @@
-import { NeutralColors, PrimaryColors, ThemeProvider } from '@lobehub/ui';
+import { ConfigProvider, NeutralColors, PrimaryColors, ThemeProvider } from '@lobehub/ui';
 import { ThemeAppearance } from 'antd-style';
+import Image from 'next/image';
 import { ReactNode, memo, useEffect } from 'react';
 
 import {
@@ -51,7 +52,7 @@ const AppTheme = memo<AppThemeProps>(
         themeMode={themeMode}
       >
         <GlobalStyle />
-        {children}
+        <ConfigProvider config={{ imgAs: Image } as any}>{children}</ConfigProvider>
       </ThemeProvider>
     );
   },

package/src/store/session/slices/chat/actions/share.ts

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { genShareGPTUrl } from '@/services/shareGPT';
 import { SessionStore } from '@/store/session';
 import { ShareGPTConversation } from '@/types/share';
@@ -14,8 +15,6 @@ interface ShareMessage {
   from: 'human' | 'gpt';
   value: string;
 }
-export const AVATAR =
-  'data:image/webp;base64,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';
 
 const Footer: ShareMessage = {
   from: 'gpt',
@@ -108,7 +107,7 @@ export const chatShare: StateCreator<
     set({ shareLoading: true });
 
     const res = await genShareGPTUrl({
-      avatarUrl: avatar || AVATAR,
+      avatarUrl: avatar || DEFAULT_USER_AVATAR_URL,
       items: shareMsgs,
     });
     set({ shareLoading: false });

package/src/app/chat/(desktop)/layout.responsive.tsx

@@ -1,12 +0,0 @@
-import { PropsWithChildren, memo } from 'react';
-
-import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
-
-import Mobile from '../(mobile)/layout.mobile';
-import Desktop from './layout.desktop';
-
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile}>
-    {children}
-  </ResponsiveLayout>
-));

package/src/app/chat/settings/(desktop)/layout.responsive.tsx

@@ -1,12 +0,0 @@
-import { PropsWithChildren, memo } from 'react';
-
-import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
-
-import Mobile from '../(mobile)/layout.mobile';
-import Desktop from './layout.desktop';
-
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile}>
-    {children}
-  </ResponsiveLayout>
-));

package/src/app/market/(desktop)/layout.responsive.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-
-import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
-
-import Mobile from '../(mobile)/layout.mobile';
-import Desktop from './layout.desktop';
-
-const Market = ({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile}>
-    {children}
-  </ResponsiveLayout>
-);
-
-export default Market;

package/src/app/welcome/(desktop)/layout.responsive.tsx

@@ -1,14 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
-
-import MobileLayout from '../(mobile)/layout.mobile';
-import DesktopLayout from './layout.desktop';
-
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
-    {children}
-  </ResponsiveLayout>
-));