@lobehub/chat 0.152.0 → 0.152.2

package/src/app/(main)/chat/settings/features/SubmitAgentButton/SubmitAgentModal.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Alert, Modal, type ModalProps } from '@lobehub/ui';
 import { Button, Divider, Input } from 'antd';
 import { useTheme } from 'antd-style';

package/src/app/(main)/chat/settings/features/SubmitAgentButton/index.tsx

@@ -1,4 +1,5 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
 import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -8,18 +9,25 @@ import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
 import SubmitAgentModal from './SubmitAgentModal';
 
-const SubmitAgentButton = memo(() => {
+const SubmitAgentButton = memo<{ modal?: boolean }>(({ modal }) => {
   const { t } = useTranslation('setting');
   const { mobile } = useResponsive();
   const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <>
-      <ActionIcon
-        icon={Share2}
-        onClick={() => setIsModalOpen(true)}
-        size={HEADER_ICON_SIZE(mobile)}
-        title={t('submitAgentModal.tooltips')}
-      />
+      {modal ? (
+        <Button block icon={<Icon icon={Share2} />} onClick={() => setIsModalOpen(true)}>
+          {t('submitAgentModal.tooltips')}
+        </Button>
+      ) : (
+        <ActionIcon
+          icon={Share2}
+          onClick={() => setIsModalOpen(true)}
+          size={HEADER_ICON_SIZE(mobile)}
+          title={t('submitAgentModal.tooltips')}
+        />
+      )}
       <SubmitAgentModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );

package/src/app/(main)/chat/settings/layout.tsx

@@ -1,14 +1,21 @@
 import { notFound } from 'next/navigation';
 import { PropsWithChildren } from 'react';
 
+import ServerLayout from '@/components/server/ServerLayout';
 import { serverFeatureFlags } from '@/config/server/featureFlags';
 
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const SessionSettingsLayout = ServerLayout({ Desktop, Mobile });
+
 const Layout = ({ children }: PropsWithChildren) => {
   const isAgentEditable = serverFeatureFlags().isAgentEditable;
-
   if (!isAgentEditable) return notFound();
 
-  return children;
+  return <SessionSettingsLayout>{children}</SessionSettingsLayout>;
 };
 
+Layout.displayName = 'SessionSettingsLayout';
+
 export default Layout;

package/src/app/(main)/chat/settings/loading.tsx

@@ -0,0 +1,3 @@
+import SkeletonLoading from '@/components/SkeletonLoading';
+
+export default () => <SkeletonLoading paragraph={{ rows: 8 }} />;

package/src/app/(main)/chat/settings/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'), { ssr: false });

package/src/app/(main)/chat/settings/page.tsx

@@ -1,14 +1,7 @@
-import { isMobileDevice } from '@/utils/responsive';
-
-import DesktopPage from './(desktop)';
-import MobilePage from './(mobile)';
+import EditPage from './features/EditPage';
 
 const Page = () => {
-  const mobile = isMobileDevice();
-
-  const Page = mobile ? MobilePage : DesktopPage;
-
-  return <Page />;
+  return <EditPage />;
 };
 
 export default Page;

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

@@ -0,0 +1,12 @@
+import { isMobileDevice } from '@/utils/responsive';
+
+import AgentDetailContent from './features/AgentDetailContent';
+
+const Detail = () => {
+  const mobile = isMobileDevice();
+  return <AgentDetailContent mobile={mobile} />;
+};
+
+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/@detail/loading.tsx

@@ -0,0 +1 @@
+export default () => null;

package/src/app/(main)/market/_layout/Desktop/{AgentDetail.tsx → DetailSidebar.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 DetailSidebar = 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,19 +66,19 @@ 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>
   );
 });
 
-export default SideBar;
+export default DetailSidebar;

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,41 @@
-'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 DetailSidebar from './DetailSidebar';
 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 />
+        <DetailSidebar>{detail}</DetailSidebar>
       </Flexbox>
     </Flexbox>
   );
-});
+};
+
+Layout.displayName = 'DesktopMarketLayout';
 
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });
+export default Layout;

package/src/app/(main)/market/{(mobile)/features/AgentDetail.tsx → _layout/Mobile/DetailModal.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 DetailModal = memo<PropsWithChildren>(({ children }) => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -17,14 +17,16 @@ const AgentDetail = memo(() => {
   return (
     <Modal
       allowFullscreen
-      onCancel={deactivateAgent}
+      onCancel={() => {
+        deactivateAgent();
+      }}
       open={showAgentSidebar}
       styles={{ body: { padding: 0 } }}
       title={t('sidebar.title')}
     >
-      <AgentDetailContent />
+      {children}
     </Modal>
   );
 });
 
-export default AgentDetail;
+export default DetailModal;

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,25 @@
-import { PropsWithChildren } from 'react';
-
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 
-import AgentSearchBar from '../../features/AgentSearchBar';
+import { LayoutProps } from '../type';
+import DetailModal from './DetailModal';
 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 }}
+        withNav
+      >
+        {children}
+      </MobileContentLayout>
+      <DetailModal>{detail}</DetailModal>
+    </>
   );
 };
 
-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;
+}