@lobehub/chat 0.83.8 → 0.83.9

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.83.9](https://github.com/lobehub/lobe-chat/compare/v0.83.8...v0.83.9)
+
+<sup>Released on **2023-10-08**</sup>
+
+#### ♻ Code Refactoring
+
+- **agent-market**: Refactor desktop and mobile to improve mobile performance.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **agent-market**: Refactor desktop and mobile to improve mobile performance, closes [#278](https://github.com/lobehub/lobe-chat/issues/278) ([82b7f60](https://github.com/lobehub/lobe-chat/commit/82b7f60))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.83.8](https://github.com/lobehub/lobe-chat/compare/v0.83.7...v0.83.8)
 
 <sup>Released on **2023-10-07**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.83.8",
+  "version": "0.83.9",
   "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/market/{features/SideBar → (desktop)/AgentDetail}/Desktop.tsx

@@ -20,7 +20,7 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
   noScrollbar: stylish.noScrollbar,
 }));
 
-const SideBar = memo<{ children: ReactNode }>(({ children }) => {
+const SideBar = memo<{ children?: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
   const [tempId, setTempId] = useState<string>('');
   const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [

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

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import Mobile from '@/app/market/components/AgentDetail/Mobile';
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import { AgentDetailContent } from '../../components/AgentDetail';
+import Desktop from './Desktop';
+
+const AgentDetail = memo(() => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
+    <AgentDetailContent />
+  </ResponsiveLayout>
+));
+
+export default AgentDetail;

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

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import Mobile from '../../(mobile)/Header';
+import Desktop from './Desktop';
+
+const Header = memo(() => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile} />
+));
+
+export default Header;

package/src/app/market/{layout.desktop → (desktop)/layout}/Desktop.tsx

@@ -8,9 +8,9 @@ import { MAX_WIDTH } from '@/const/layoutTokens';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import AppLayout from '../../../layout/AppLayout';
-import Header from '../features/Header';
-import SideBar from '../features/SideBar';
+import AppLayout from '../../../../layout/AppLayout';
+import SideBar from '../AgentDetail';
+import Header from '../Header';
 
 const useStyles = createStyles(({ css }) => ({
   background: css`

package/src/app/market/{layout.desktop → (desktop)/layout}/index.tsx

@@ -5,7 +5,7 @@ import { PropsWithChildren } from 'react';
 import ResponsiveLayout from '@/components/ResponsiveLayout';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
-import Mobile from '../layout.mobile';
+import Mobile from '../../(mobile)/layout.mobile';
 import Desktop from './Desktop';
 
 const Market = ({ children }: PropsWithChildren) => (

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

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { AgentDetailContent } from '../components/AgentDetail';
+import Mobile from '../components/AgentDetail/Mobile';
+
+const AgentDetail = memo(() => (
+  <Mobile>
+    <AgentDetailContent />
+  </Mobile>
+));
+
+export default AgentDetail;

package/src/app/market/{layout.mobile.tsx → (mobile)/layout.mobile.tsx}

@@ -7,8 +7,8 @@ import AppMobileLayout from '@/layout/AppMobileLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import Header from './features/Header';
-import SideBar from './features/SideBar';
+import DetailModal from './AgentDetail';
+import Header from './Header';
 
 const MarketLayout = ({ children }: PropsWithChildren) => {
   useSwitchSideBarOnInit(SidebarTabKey.Market);
@@ -18,7 +18,7 @@ const MarketLayout = ({ children }: PropsWithChildren) => {
       <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
         {children}
       </Flexbox>
-      <SideBar />
+      <DetailModal />
     </AppMobileLayout>
   );
 };

package/src/app/market/{features/SideBar → components/AgentDetail}/AgentInfo/index.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useMarketStore } from '@/store/market';
 
-import AgentCardBanner from '../../AgentCard/AgentCardBanner';
+import AgentCardBanner from '../../../features/AgentCard/AgentCardBanner';
 import Comment from './Comment';
 import Header from './Header';
 import Loading from './Loading';

package/src/app/market/components/AgentDetail/index.tsx

@@ -0,0 +1,10 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AgentInfo from './AgentInfo';
+
+export const AgentDetailContent = memo(() => (
+  <Flexbox>
+    <AgentInfo />
+  </Flexbox>
+));

package/src/app/market/layout.tsx

@@ -3,8 +3,8 @@ import { PropsWithChildren } from 'react';
 import ResponsiveLayout from '@/components/ResponsiveLayout';
 import { isMobileDevice } from '@/utils/responsive';
 
-import Desktop from './layout.desktop';
-import Mobile from './layout.mobile';
+import Desktop from './(desktop)/layout';
+import Mobile from './(mobile)/layout.mobile';
 
 export default ({ children }: PropsWithChildren) => (
   <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>

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

@@ -6,8 +6,8 @@ import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
+import Header from '@/app/market/(mobile)/Header';
 import AgentCardBanner from '@/app/market/features/AgentCard/AgentCardBanner';
-import Header from '@/app/market/features/Header';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import AppMobileLayout from '@/layout/AppMobileLayout';
 import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';

package/src/components/ResponsiveLayout.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren, ReactNode } from 'react';
 interface ServerResponsiveLayoutProps {
   Desktop: (props: PropsWithChildren) => ReactNode;
   Mobile: (props: PropsWithChildren) => ReactNode;
-  children: ReactNode;
+  children?: ReactNode;
   isMobile: () => boolean;
 }
 const ResponsiveLayout = ({ children, Desktop, Mobile, isMobile }: ServerResponsiveLayoutProps) => {

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

@@ -1,13 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-const Header = memo(() => {
-  const { mobile } = useResponsive();
-  const Render = mobile ? Mobile : Desktop;
-  return <Render />;
-});
-
-export default Header;

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

@@ -1,23 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AgentInfo from './AgentInfo';
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-const SideBar = memo(() => {
-  const { mobile } = useResponsive();
-
-  const Render = mobile ? Mobile : Desktop;
-
-  return (
-    <Render>
-      <Flexbox>
-        <AgentInfo />
-      </Flexbox>
-    </Render>
-  );
-});
-
-export default SideBar;