@lobehub/chat 0.151.11 → 0.152.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # 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>
+
+#### ✨ Features
+
+- **misc**: Import settings from url.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Import settings from url, closes [#2226](https://github.com/lobehub/lobe-chat/issues/2226) ([b1f6c20](https://github.com/lobehub/lobe-chat/commit/b1f6c20))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.151.11](https://github.com/lobehub/lobe-chat/compare/v0.151.10...v0.151.11)
 
 <sup>Released on **2024-04-30**</sup>

package/README.md

@@ -261,14 +261,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Jailbreak Assistant DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>         | Bypass OpenAI review mechanism, ChatGPT after jailbreak<br/>`creative` `artificial-intelligence` `conversation` `jailbreak`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                          | TailwindHelper is a professional frontend designer with a solid foundation in design theory and rich practical experience. Created by a leading software development company, it aims to help developers and designers accelerate the development process of web interfaces. TailwindHelper is proficient in the Tailwind CSS framework and can translate complex design requirements into efficient and responsive CSS class names.<br/>`tailwindcss` `css` `tailwind-helper`                                                                                                   |
-| [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup>         | Specializes in converting JSON schema to TypeScript types.<br/>`typescript` `development`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| [Chinese Academic Paper Editor](https://chat-preview.lobehub.com/market?agent=chinese-paper-polishing)<br/><sup>By **[y22emc2](https://github.com/y22emc2)** on **2024-04-15**</sup> | As an assistant for improving Chinese academic paper writing, your task is to enhance the provided text in terms of spelling, grammar, clarity, conciseness, and overall readability, to improve the text's academic standards and literary quality. This includes breaking down long sentences, reducing repetition, and providing improvement suggestions. Please provide the corrected version of the text first, then list the modifications in the markdown table below, along with the reasons for the changes.<br/>`academic-paper-writing` `proofreading` `text-editing` |
-
-> 📊 Total agents: [<kbd>**243**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Sales Description Specialist](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup> | Assists in the sale of used items through research, pricing, description, and title creation.<br/>`product-sales` `research` `description`                                                                                                                                                                                                                                                                                                                                     |
+| [Jailbreak Assistant DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>        | Bypass OpenAI review mechanism, ChatGPT after jailbreak<br/>`creative` `artificial-intelligence` `conversation` `jailbreak`                                                                                                                                                                                                                                                                                                                                                    |
+| [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                         | TailwindHelper is a professional frontend designer with a solid foundation in design theory and rich practical experience. Created by a leading software development company, it aims to help developers and designers accelerate the development process of web interfaces. TailwindHelper is proficient in the Tailwind CSS framework and can translate complex design requirements into efficient and responsive CSS class names.<br/>`tailwindcss` `css` `tailwind-helper` |
+| [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup>        | Specializes in converting JSON schema to TypeScript types.<br/>`typescript` `development`                                                                                                                                                                                                                                                                                                                                                                                      |
+
+> 📊 Total agents: [<kbd>**244**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -251,12 +251,12 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 | 最近新增                                                                                                                                                                     | 助手说明                                                                                                                                                                                                                                                                                                 |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [销售描述专家](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>          | 通过研究、定价、描述和标题设计帮助销售二手物品。<br/>`产品销售` `研究` `描述`                                                                                                                                                                                                                            |
 | [越狱助手 DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>            | 突破 OpenAI 审核机制，越狱之后的 ChatGPT<br/>`创意` `人工智能` `对话` `越狱`                                                                                                                                                                                                                             |
 | [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                  | TailwindHelper 是一位专业的前端设计师，拥有深厚的设计理论基础和丰富的实践经验。它由一家领先的软件开发公司创建，旨在帮助开发者和设计师加速 Web 界面的开发过程。TailwindHelper 精通 Tailwind CSS 框架，并能够理解复杂的设计要求，转化为高效且响应式的 CSS 类名。<br/>`tailwindcss` `css` `tailwind-helper` |
 | [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup> | 擅长将 JSON schema 转换为 TypeScript 类型。<br/>`typescript` `开发`                                                                                                                                                                                                                                      |
-| [中文论文编辑师](https://chat-preview.lobehub.com/market?agent=chinese-paper-polishing)<br/><sup>By **[y22emc2](https://github.com/y22emc2)** on **2024-04-15**</sup>        | 作为一名中文学术论文写作改进助理，你的任务是改进所提供文本的拼写、语法、清晰、简洁和整体可读性，提高文本的学术规范性、文学性，同时分解长句，减少重复，并提供改进建议。请先提供文本的更正版本，然后在 markdown 表格中列出修改的内容，并给出修改的理由。<br/>`学术论文写作` `校对` `文本编辑`              |
 
-> 📊 Total agents: [<kbd>**243**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**244**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

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