@lobehub/chat 0.84.0-beta.1 → 0.84.0

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

@@ -1,13 +1,9 @@
-'use client';
-
 import { PropsWithChildren, memo } from 'react';
 
-import AppMobileLayout from '@/layout/AppMobileLayout';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
 
 import Header from './Header';
 
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
-});
-
-export default MobileLayout;
+export default memo(({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<Header />}>{children}</AppLayoutMobile>
+));

package/src/app/chat/settings/features/EditPage.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import AgentSetting from '@/features/AgentSetting';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+const EditPage = memo(() => {
+  const { t } = useTranslation('setting');
+  const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+  const [updateAgentConfig, updateAgentMeta, title] = useSessionStore((s) => [
+    s.updateAgentConfig,
+    s.updateAgentMeta,
+    agentSelectors.currentAgentTitle(s),
+  ]);
+
+  const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
+
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <AgentSetting
+        config={config}
+        meta={meta}
+        onConfigChange={updateAgentConfig}
+        onMetaChange={updateAgentMeta}
+      />
+    </>
+  );
+});
+
+export default EditPage;

package/src/app/chat/settings/page.tsx

@@ -1,38 +1,14 @@
-'use client';
+import { isMobileDevice } from '@/utils/responsive';
 
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
 
-import PageTitle from '@/components/PageTitle';
-import AgentSetting from '@/features/AgentSetting';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+const Page = () => {
+  const mobile = isMobileDevice();
 
-const EditPage = memo(() => {
-  const { t } = useTranslation('setting');
-  const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
-  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const [updateAgentConfig, updateAgentMeta, title] = useSessionStore((s) => [
-    s.updateAgentConfig,
-    s.updateAgentMeta,
-    agentSelectors.currentAgentTitle(s),
-  ]);
+  const Page = mobile ? MobilePage : DesktopPage;
 
-  const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
+  return <Page />;
+};
 
-  return (
-    <>
-      <PageTitle title={pageTitle} />
-      <AgentSetting
-        config={config}
-        meta={meta}
-        onConfigChange={updateAgentConfig}
-        onMetaChange={updateAgentMeta}
-      />
-    </>
-  );
-});
-
-export default EditPage;
+export default Page;

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

@@ -1,11 +1,13 @@
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ReactNode, memo, useState } from 'react';
+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 useStyles = createStyles(({ css, token, stylish }) => ({
   content: css`
     display: flex;
@@ -20,7 +22,7 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
   noScrollbar: stylish.noScrollbar,
 }));
 
-const SideBar = memo<{ children?: ReactNode }>(({ children }) => {
+const SideBar = memo(() => {
   const { styles } = useStyles();
   const [tempId, setTempId] = useState<string>('');
   const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [
@@ -60,7 +62,7 @@ const SideBar = memo<{ children?: ReactNode }>(({ children }) => {
           className={styles.noScrollbar}
           style={{ padding: 0, position: 'relative' }}
         >
-          {children}
+          <AgentDetailContent />
         </DraggablePanelBody>
       </DraggablePanelContainer>
     </DraggablePanel>

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

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { AgentCardProps } from '@/app/market/features/AgentCard';
+
+import Index from '../index';
+import Layout from './layout.responsive';
+
+export default memo<AgentCardProps>((props) => (
+  <Layout>
+    <Index {...props} />
+  </Layout>
+));

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

@@ -5,12 +5,12 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
+import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import AppLayout from '../../../../layout/AppLayout';
-import SideBar from '../AgentDetail';
-import Header from '../Header';
+import SideBar from './features/AgentDetail';
+import Header from './features/Header';
 
 const useStyles = createStyles(({ css }) => ({
   background: css`
@@ -31,7 +31,7 @@ const MarketLayout = memo<PropsWithChildren>(({ children }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Market);
 
   return (
-    <AppLayout>
+    <AppLayoutDesktop>
       <Flexbox
         flex={1}
         height={'100vh'}
@@ -59,7 +59,7 @@ const MarketLayout = memo<PropsWithChildren>(({ children }) => {
           <SideBar />
         </Flexbox>
       </Flexbox>
-    </AppLayout>
+    </AppLayoutDesktop>
   );
 });
 

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

@@ -0,0 +1,16 @@
+'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/market/{components/AgentDetail/Mobile.tsx → (mobile)/features/AgentDetail.tsx}

@@ -1,10 +1,12 @@
 import { Modal } from '@lobehub/ui';
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const Mobile = memo<PropsWithChildren>(({ children }) => {
+import AgentDetailContent from '../../features/AgentDetailContent';
+
+const AgentDetail = memo(() => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -14,9 +16,9 @@ const Mobile = memo<PropsWithChildren>(({ children }) => {
 
   return (
     <Modal onCancel={deactivateAgent} open={showAgentSidebar} title={t('sidebar.title')}>
-      {children}
+      <AgentDetailContent />
     </Modal>
   );
 });
 
-export default Mobile;
+export default AgentDetail;

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

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { AgentCardProps } from '@/app/market/features/AgentCard';
+
+import Index from '../index';
+import Layout from './layout.mobile';
+
+export default memo<AgentCardProps>((props) => (
+  <Layout>
+    <Index {...props} />
+  </Layout>
+));

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

@@ -3,23 +3,23 @@
 import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import AppMobileLayout from '@/layout/AppMobileLayout';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import DetailModal from './AgentDetail';
-import Header from './Header';
+import DetailModal from './features/AgentDetail';
+import Header from './features/Header';
 
 const MarketLayout = ({ children }: PropsWithChildren) => {
   useSwitchSideBarOnInit(SidebarTabKey.Market);
 
   return (
-    <AppMobileLayout navBar={<Header />} showTabBar>
+    <AppLayoutMobile navBar={<Header />} showTabBar>
       <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
         {children}
       </Flexbox>
       <DetailModal />
-    </AppMobileLayout>
+    </AppLayoutMobile>
   );
 };
 

package/src/app/market/{components/AgentDetail → features/AgentDetailContent}/AgentInfo/Header.tsx

@@ -28,6 +28,7 @@ const Header = memo(() => {
   return (
     <Center className={styles.container} gap={16}>
       <Avatar
+        animation
         avatar={avatar}
         background={backgroundColor || theme.colorFillTertiary}
         className={styles.avatar}

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

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

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

@@ -11,12 +11,13 @@ const TagList = memo(() => {
   const keywords = useMarketStore((s) => s.searchKeywords);
 
   return (
-    <Flexbox gap={8} horizontal style={{ flexWrap: 'wrap' }}>
+    <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
       {agentTagList.map((item) => (
         <Button
           key={item}
           onClick={() => useMarketStore.setState({ searchKeywords: item })}
           shape={'round'}
+          size={'small'}
           type={keywords === item ? 'primary' : 'default'}
         >
           {startCase(item)}

package/src/app/market/page.tsx

@@ -4,8 +4,10 @@ import { LOBE_LOCALE_COOKIE } from '@/const/locale';
 import { getAgentIndexJSON } from '@/const/url';
 import { Locales } from '@/locales/resources';
 import { LobeChatAgentsMarketIndex } from '@/types/market';
+import { isMobileDevice } from '@/utils/responsive';
 
-import Market from './index';
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
 
 const getAgentList = async (): Promise<LobeChatAgentsMarketIndex> => {
   const cookieStore = cookies();
@@ -20,10 +22,11 @@ const getAgentList = async (): Promise<LobeChatAgentsMarketIndex> => {
   }
 };
 
-const Page = async () => {
+export default async () => {
   const data = await getAgentList();
+  const mobile = isMobileDevice();
 
-  return <Market defaultAgents={data.agents} />;
-};
+  const Page = mobile ? MobilePage : DesktopPage;
 
-export default Page;
+  return <Page defaultAgents={data.agents} />;
+};

package/src/app/settings/{features/Header/Desktop.tsx → (desktop)/features/Header.tsx}

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
 
-const Index = memo(() => {
+const Header = memo(() => {
   const { t } = useTranslation('setting');
   const tab = useGlobalStore((s) => s.settingsTab);
 
@@ -19,4 +19,4 @@ const Index = memo(() => {
   );
 });
 
-export default Index;
+export default Header;

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { memo } from 'react';
+
+import ResponsiveIndex from '@/components/ResponsiveIndex';
+
+import Mobile from '../(mobile)';
+import Common from '../common';
+import Layout from './layout.responsive';
+
+export default memo(() => (
+  <ResponsiveIndex Mobile={Mobile}>
+    <Layout>
+      <Common />
+    </Layout>
+  </ResponsiveIndex>
+));

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

@@ -1,15 +1,18 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
-import AppLayout from '@/layout/AppLayout';
+import AppLayoutDesktop from '@/layout/AppLayout.desktop';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
-import Header from '../features/Header';
 import SideBar from '../features/SideBar';
+import Header from './features/Header';
 
-const SettingLayout = ({ children }: PropsWithChildren) => {
+export default memo(({ children }: PropsWithChildren) => {
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   return (
-    <AppLayout>
+    <AppLayoutDesktop>
       <SideBar />
       <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
         <Header />
@@ -20,8 +23,6 @@ const SettingLayout = ({ children }: PropsWithChildren) => {
           </Center>
         </Flexbox>
       </Flexbox>
-    </AppLayout>
+    </AppLayoutDesktop>
   );
-};
-
-export default SettingLayout;
+});

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

@@ -0,0 +1,14 @@
+'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>
+));

package/src/app/settings/{mobile → (mobile)/features}/ExtraList.tsx

@@ -9,7 +9,7 @@ import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { useGlobalStore } from '@/store/global';
 
-import Item from '../features/SideBar/Item';
+import Item from '../../features/SideBar/Item';
 
 const ExtraList = memo(() => {
   const { t } = useTranslation('common');

package/src/app/settings/(mobile)/features/Header/Home.tsx

@@ -0,0 +1,8 @@
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { memo } from 'react';
+
+const Header = memo(() => {
+  return <MobileNavBar center={<Logo type={'text'} />} />;
+});
+
+export default Header;

package/src/app/settings/{features/Header/Mobile.tsx → (mobile)/features/Header/index.tsx}

@@ -8,6 +8,7 @@ import { useGlobalStore } from '@/store/global';
 const Header = memo(() => {
   const { t } = useTranslation('setting');
   const tab = useGlobalStore((s) => s.settingsTab);
+
   const router = useRouter();
 
   return (

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

@@ -0,0 +1,3 @@
+import Index from './mobile';
+
+export default () => <Index />;

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

@@ -0,0 +1,19 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+import Header from './features/Header';
+
+export default memo(({ children }: PropsWithChildren) => {
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+  return (
+    <AppLayoutMobile navBar={<Header />}>
+      <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
+    </AppLayoutMobile>
+  );
+});

package/src/app/settings/{mobile → (mobile)/mobile}/index.tsx

@@ -5,17 +5,16 @@ import { createStyles } from 'antd-style';
 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 { CURRENT_VERSION } from '@/const/version';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import AppMobileLayout from '@/layout/AppMobileLayout';
 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 ExtraList from './ExtraList';
+import List from '../../features/SideBar/List';
+import ExtraList from '../features/ExtraList';
+import Layout from './layout.mobile';
 
 const useStyles = createStyles(({ css, token }) => ({
   divider: css`
@@ -29,11 +28,12 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Setting = memo(() => {
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   const avatar = useGlobalStore((s) => s.settings.avatar);
   const { styles } = useStyles();
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+
   return (
-    <AppMobileLayout navBar={<Header />} showTabBar>
+    <Layout>
       <AgentCardBanner
         mask
         meta={{ avatar: avatar || AVATAR }}
@@ -50,11 +50,11 @@ const Setting = memo(() => {
         <ExtraList />
         <Center style={{ paddingInline: 64 }}>
           <Divider>
-            <span className={styles.footer}>LobeChat v{pkg.version}</span>
+            <span className={styles.footer}>LobeChat v{CURRENT_VERSION}</span>
           </Divider>
         </Center>
       </div>
-    </AppMobileLayout>
+    </Layout>
   );
 });
 

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+import Header from '../features/Header/Home';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<Header />} showTabBar>
+    <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
+  </AppLayoutMobile>
+));

package/src/app/settings/agent/Agent.tsx

@@ -0,0 +1,30 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import AgentSetting from '@/features/AgentSetting';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+const Agent = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Agent);
+
+  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
+  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
+
+  return (
+    <AgentSetting
+      config={config}
+      meta={meta}
+      onConfigChange={(config) => {
+        updateAgent({ config });
+      }}
+      onMetaChange={(meta) => {
+        updateAgent({ meta });
+      }}
+    />
+  );
+});
+
+export default Agent;

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import Agent from './Agent';
+
+export default memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Agent);
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('tab.agent'));
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <Agent />
+    </>
+  );
+});

package/src/app/settings/agent/layout.tsx

@@ -0,0 +1 @@
+export { default } from '../layout.server';

package/src/app/settings/agent/page.tsx

@@ -1,32 +1,3 @@
-'use client';
+import Index from './index';
 
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-
-import AgentSetting from '@/features/AgentSetting';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
-
-const Agent = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Agent);
-
-  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
-  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
-  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
-
-  return (
-    <AgentSetting
-      config={config}
-      meta={meta}
-      onConfigChange={(config) => {
-        updateAgent({ config });
-      }}
-      onMetaChange={(meta) => {
-        updateAgent({ meta });
-      }}
-    />
-  );
-});
-
-export default Agent;
+export default () => <Index />;