@lobehub/chat 0.152.0 → 0.152.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.152.1](https://github.com/lobehub/lobe-chat/compare/v0.152.0...v0.152.1)
+
+<sup>Released on **2024-05-01**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor Market Layout.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor Market Layout, closes [#2320](https://github.com/lobehub/lobe-chat/issues/2320) ([c05c3c1](https://github.com/lobehub/lobe-chat/commit/c05c3c1))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.152.0](https://github.com/lobehub/lobe-chat/compare/v0.151.11...v0.152.0)
 
 <sup>Released on **2024-04-30**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.0",
+  "version": "0.152.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)/market/{_layout/Desktop/AgentDetail.tsx → @detail/_layout/Desktop.tsx}

@@ -1,13 +1,14 @@
+'use client';
+
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo, useCallback, useState } from 'react';
+import { createStyles, useResponsive } from 'antd-style';
+import { PropsWithChildren, memo, useCallback, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
-
 const useStyles = createStyles(({ css, token, stylish }) => ({
   content: css`
     display: flex;
@@ -15,7 +16,7 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
     height: 100% !important;
   `,
   drawer: css`
-    background: ${token.colorBgLayout};
+    background: ${token.colorBgContainer};
   `,
   header: css`
     border-bottom: 1px solid ${token.colorBorder};
@@ -23,8 +24,9 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
   noScrollbar: stylish.noScrollbar,
 }));
 
-const SideBar = memo(() => {
+const SideBar = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
+  const { md = true } = useResponsive();
   const [tempId, setTempId] = useState<string>('');
   const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
@@ -44,6 +46,8 @@ const SideBar = memo(() => {
     [deactivateAgent, activateAgent, tempId],
   );
 
+  const minWidth = md ? MARKET_SIDEBAR_WIDTH : 350;
+
   return (
     <DraggablePanel
       className={styles.drawer}
@@ -51,8 +55,9 @@ const SideBar = memo(() => {
         content: styles.content,
       }}
       expand={showAgentSidebar}
-      minWidth={MARKET_SIDEBAR_WIDTH}
-      mode={'fixed'}
+      maxWidth={'80vw' as any}
+      minWidth={minWidth}
+      mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpandChange}
       placement={'right'}
       showHandlerWideArea={false}
@@ -61,15 +66,15 @@ const SideBar = memo(() => {
         style={{
           flex: 'none',
           height: '100%',
-          minWidth: MARKET_SIDEBAR_WIDTH,
+          minWidth: minWidth,
         }}
       >
-        <SafeSpacing />
+        {md && <SafeSpacing />}
         <DraggablePanelBody
           className={styles.noScrollbar}
           style={{ padding: 0, position: 'relative' }}
         >
-          <AgentDetailContent />
+          <Flexbox>{children}</Flexbox>
         </DraggablePanelBody>
       </DraggablePanelContainer>
     </DraggablePanel>

package/src/app/(main)/market/{(mobile)/features/AgentDetail.tsx → @detail/_layout/Mobile.tsx}

@@ -1,12 +1,12 @@
+'use client';
+
 import { Modal } from '@lobehub/ui';
-import { memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
-
-const AgentDetail = memo(() => {
+const AgentDetail = memo<PropsWithChildren>(({ children }) => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -17,12 +17,14 @@ const AgentDetail = memo(() => {
   return (
     <Modal
       allowFullscreen
-      onCancel={deactivateAgent}
+      onCancel={() => {
+        deactivateAgent();
+      }}
       open={showAgentSidebar}
       styles={{ body: { padding: 0 } }}
       title={t('sidebar.title')}
     >
-      <AgentDetailContent />
+      {children}
     </Modal>
   );
 });

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

@@ -0,0 +1,21 @@
+import ServerLayout from '@/components/server/ServerLayout';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import AgentDetailContent from './features/AgentDetailContent';
+
+const Layout = ServerLayout({ Desktop, Mobile });
+
+const Detail = () => {
+  const mobile = isMobileDevice();
+  return (
+    <Layout>
+      <AgentDetailContent mobile={mobile} />
+    </Layout>
+  );
+};
+
+Detail.displayName = 'AgentDetail';
+
+export default Detail;

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

@@ -1,10 +1,11 @@
 import { Avatar, Tag } from '@lobehub/ui';
 import { App, Button, Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -15,12 +16,14 @@ import { useStyles } from './style';
 
 const { Link } = Typography;
 
-const Header = memo(() => {
+const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const setSearchKeywords = useMarketStore((s) => s.setSearchKeywords);
   const router = useRouter();
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
-  const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
+  const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem, isEqual);
+
   const { message } = App.useApp();
 
   const { meta, createAt, author, homepage, config } = agentItem;
@@ -38,43 +41,49 @@ const Header = memo(() => {
 
   const handleAddAgent = () => {
     if (!agentItem) return;
-
     createSession({ config, meta }, false);
     message.success(t('addAgentSuccess'));
   };
 
   return (
     <Center className={styles.container} gap={16}>
-      <Avatar
-        animation
-        avatar={avatar}
-        background={backgroundColor || theme.colorFillTertiary}
-        className={styles.avatar}
-        size={100}
-      />
-      <div className={styles.title}>{title}</div>
+      <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) => (
-          <Tag
-            key={index}
-            onClick={() => useMarketStore.setState({ searchKeywords: tag })}
-            style={{ margin: 0 }}
-          >
+          <Tag key={index} onClick={() => setSearchKeywords(tag)} style={{ margin: 0 }}>
             {startCase(tag).trim()}
           </Tag>
         ))}
       </Center>
       <div className={styles.desc}>{description}</div>
-      <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
-        @{author}
-      </Link>
       <Button block onClick={handleAddAgentAndConverse} type={'primary'}>
         {t('addAgentAndConverse')}
       </Button>
       <Button block onClick={handleAddAgent}>
         {t('addAgent')}
       </Button>
-      <div className={styles.date}>{createAt}</div>
+      <Flexbox align={'center'} gap={12} horizontal>
+        <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
+          @{author}
+        </Link>
+        <time className={styles.time} dateTime={new Date(createAt).toISOString()}>
+          {createAt}
+        </time>
+      </Flexbox>
     </Center>
   );
 });

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

@@ -1,11 +1,13 @@
+'use client';
+
 import { Markdown, TabsNav } from '@lobehub/ui';
 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 { useMarketStore } from '@/store/market';
 
-import AgentCardBanner from '../../../features/AgentCard/AgentCardBanner';
 import Comment from './Comment';
 import Header from './Header';
 import Loading from './Loading';
@@ -17,7 +19,7 @@ enum InfoTabs {
   prompt = 'prompt',
 }
 
-const AgentModalInner = memo(() => {
+const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [useFetchAgent, currentIdentifier] = useMarketStore((s) => [
     s.useFetchAgent,
     s.currentIdentifier,
@@ -34,8 +36,12 @@ const AgentModalInner = memo(() => {
 
   return (
     <>
-      <AgentCardBanner meta={meta} size={400} style={{ height: 120, marginBottom: -60 }} />
-      <Header />
+      <AgentCardBanner
+        avatar={meta?.avatar}
+        size={800}
+        style={{ height: 120, marginBottom: -60 }}
+      />
+      <Header mobile={mobile} />
       <Flexbox align={'center'}>
         <TabsNav
           activeKey={tab}

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

@@ -4,21 +4,13 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   author: css`
     font-size: 12px;
   `,
-
-  avatar: css`
-    flex: none;
-  `,
   container: css`
     position: relative;
     padding: 16px 16px 24px;
     border-bottom: 1px solid ${token.colorBorderSecondary};
   `,
-  date: css`
-    font-size: 12px;
-    color: ${token.colorTextDescription};
-  `,
   desc: css`
-    color: ${token.colorTextDescription};
+    color: ${token.colorTextSecondary};
     text-align: center;
   `,
   loading: css`
@@ -30,9 +22,13 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   nav: css`
     padding-top: 8px;
   `,
+  time: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
   title: css`
-    font-size: 20px;
-    font-weight: 600;
+    margin-bottom: 0;
+    font-weight: bold;
     text-align: center;
   `,
 }));

package/src/app/(main)/market/_layout/Desktop/Header.tsx

@@ -1,6 +1,7 @@
+'use client';
+
 import { ChatHeader, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 
 import ShareAgentButton from '../../features/ShareAgentButton';
@@ -17,11 +18,7 @@ const Header = memo(() => {
 
   return (
     <ChatHeader
-      left={
-        <Link aria-label={'home'} href={'/'}>
-          <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
-        </Link>
-      }
+      left={<Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />}
       right={<ShareAgentButton />}
     />
   );

package/src/app/(main)/market/_layout/Desktop/Hero.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { GridBackground } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  background: css`
+    width: 80%;
+    margin: -60px 0 -20px;
+
+    ${responsive.md} {
+      display: none;
+    }
+  `,
+  title: css`
+    z-index: 2;
+
+    margin-top: 24px;
+
+    font-size: min(56px, 5vw);
+    font-weight: 800;
+    line-height: 1.2;
+    text-align: center;
+  `,
+}));
+
+const Hero = memo(() => {
+  const { theme, styles } = useStyles();
+  return (
+    <Center>
+      <h1 className={styles.title}>Find & Use The Best Agents</h1>
+      <GridBackground animation className={styles.background} colorFront={theme.colorText} random />
+    </Center>
+  );
+});
+
+export default Hero;

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

@@ -1,61 +1,40 @@
-'use client';
-
-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';
+import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
-import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 
-import AgentSearchBar from '../../features/AgentSearchBar';
+import { LayoutProps } from '../type';
 import Header from './Header';
+import Hero from './Hero';
 
-const SideBar = dynamic(() => import('./AgentDetail'));
-
-const useStyles = createStyles(({ css }) => ({
-  background: css`
-    width: 80%;
-    margin: -60px 0 -20px;
-  `,
-  title: css`
-    z-index: 2;
-    margin-top: 24px;
-    font-size: 56px;
-    font-weight: 800;
-  `,
-}));
-
-const Desktop = memo<PropsWithChildren>(({ children }) => {
-  const { theme, styles } = useStyles();
-
+const Layout = ({ children, detail }: LayoutProps) => {
   return (
-    <Flexbox flex={1} height={'100%'} id={'lobe-market-container'} style={{ position: 'relative' }}>
+    <Flexbox
+      height={'100%'}
+      id={'lobe-market-container'}
+      style={{ position: 'relative' }}
+      width={'100%'}
+    >
       <Header />
-      <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
-        <Flexbox align={'center'} flex={1} style={{ overflowY: 'scroll', padding: 16 }}>
+      <Flexbox height={'100%'} horizontal style={{ position: 'relative' }} width={'100%'}>
+        <Flexbox
+          align={'center'}
+          flex={1}
+          padding={16}
+          style={{ overflowX: 'hidden', overflowY: 'scroll', position: 'relative' }}
+        >
           <SafeSpacing />
-
           <Flexbox gap={16} style={{ maxWidth: MAX_WIDTH, position: 'relative', width: '100%' }}>
-            <Center>
-              <h1 className={styles.title}>Find & Use The Best Agents</h1>
-              <GridBackground
-                animation
-                className={styles.background}
-                colorFront={theme.colorText}
-                random
-              />
-            </Center>
-            <AgentSearchBar />
+            <Hero />
             {children}
           </Flexbox>
         </Flexbox>
-        <SideBar />
+        {detail}
       </Flexbox>
     </Flexbox>
   );
-});
+};
+
+Layout.displayName = 'DesktopMarketLayout';
 
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });
+export default Layout;

package/src/app/(main)/market/_layout/Mobile/Header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Logo, MobileNavBar } from '@lobehub/ui';
+import { MobileNavBar } from '@lobehub/ui';
 import { memo } from 'react';
 
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -10,7 +10,7 @@ import ShareAgentButton from '../../features/ShareAgentButton';
 const Header = memo(() => {
   return (
     <MobileNavBar
-      center={<Logo type={'text'} />}
+      center={<div style={{ fontSize: 20, fontWeight: 900 }}>Discover</div>}
       right={<ShareAgentButton mobile />}
       style={mobileHeaderSticky}
     />

package/src/app/(main)/market/_layout/Mobile/index.tsx

@@ -1,17 +1,23 @@
-import { PropsWithChildren } from 'react';
-
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 
-import AgentSearchBar from '../../features/AgentSearchBar';
+import { LayoutProps } from '../type';
 import Header from './Header';
 
-const MobileLayout = ({ children }: PropsWithChildren) => {
+const Layout = ({ children, detail }: LayoutProps) => {
   return (
-    <MobileContentLayout gap={16} header={<Header />} style={{ paddingInline: 16 }} withNav>
-      <AgentSearchBar mobile />
-      {children}
-    </MobileContentLayout>
+    <>
+      <MobileContentLayout
+        gap={16}
+        header={<Header />}
+        style={{ paddingInline: 16, paddingTop: 8 }}
+      >
+        {children}
+      </MobileContentLayout>
+      {detail}
+    </>
   );
 };
 
-export default MobileLayout;
+Layout.displayName = 'MobileMarketLayout';
+
+export default Layout;

package/src/app/(main)/market/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  detail: ReactNode;
+}

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

@@ -3,8 +3,6 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { MetaData } from '@/types/meta';
-
 export const useStyles = createStyles(({ css, token }) => ({
   banner: css`
     position: relative;
@@ -15,25 +13,22 @@ export const useStyles = createStyles(({ css, token }) => ({
     margin-bottom: -56px;
 
     background: ${token.colorFillSecondary};
-
-    mask-image: linear-gradient(to bottom, #fff, transparent);
   `,
   bannerImg: css`
     position: absolute;
-    top: -50%;
-    filter: blur(50px) saturate(2);
+    filter: blur(40px) saturate(1.5);
   `,
 }));
 
 interface AgentCardBannerProps extends DivProps {
+  avatar?: string;
   mask?: boolean;
   maskColor?: string;
-  meta: MetaData;
   size?: number;
 }
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
-  ({ meta, className, size = 200, children, ...props }) => {
+  ({ avatar, className, size = 600, children, ...props }) => {
     const { styles, cx } = useStyles();
 
     return (
@@ -43,7 +38,13 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
         justify={'center'}
         {...props}
       >
-        <Avatar alt={'banner'} avatar={meta.avatar} className={styles.bannerImg} size={size} />
+        <Avatar
+          alt={'banner'}
+          avatar={avatar}
+          className={styles.bannerImg}
+          shape={'square'}
+          size={size}
+        />
         {children}
       </Flexbox>
     );