@lobehub/chat 0.83.10 → 0.84.0-beta.1

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

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

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

@@ -28,7 +28,6 @@ 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/{(mobile)/features/AgentDetail.tsx → components/AgentDetail/Mobile.tsx}

@@ -1,12 +1,10 @@
 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 Mobile = memo<PropsWithChildren>(({ children }) => {
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -16,9 +14,9 @@ const AgentDetail = memo(() => {
 
   return (
     <Modal onCancel={deactivateAgent} open={showAgentSidebar} title={t('sidebar.title')}>
-      <AgentDetailContent />
+      {children}
     </Modal>
   );
 });
 
-export default AgentDetail;
+export default Mobile;

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

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

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

@@ -11,13 +11,12 @@ const TagList = memo(() => {
   const keywords = useMarketStore((s) => s.searchKeywords);
 
   return (
-    <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+    <Flexbox gap={8} 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/layout.tsx

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

package/src/app/market/page.tsx

@@ -4,10 +4,8 @@ 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 DesktopPage from './(desktop)';
-import MobilePage from './(mobile)';
+import Market from './index';
 
 const getAgentList = async (): Promise<LobeChatAgentsMarketIndex> => {
   const cookieStore = cookies();
@@ -22,11 +20,10 @@ const getAgentList = async (): Promise<LobeChatAgentsMarketIndex> => {
   }
 };
 
-export default async () => {
+const Page = async () => {
   const data = await getAgentList();
-  const mobile = isMobileDevice();
 
-  const Page = mobile ? MobilePage : DesktopPage;
-
-  return <Page defaultAgents={data.agents} />;
+  return <Market defaultAgents={data.agents} />;
 };
+
+export default Page;

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

@@ -1,3 +1,32 @@
-import Index from './index';
+'use client';
 
-export default () => <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;

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

@@ -1,3 +1,15 @@
-import Index from './index';
+'use client';
 
-export default () => <Index />;
+import { memo } from 'react';
+
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Common from './Common';
+
+const CommonSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Common);
+  return <Common />;
+});
+
+export default CommonSetting;

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

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

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

@@ -8,7 +8,6 @@ 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/features/Header/index.tsx

@@ -0,0 +1,14 @@
+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/settings/{(desktop)/layout.desktop.tsx → layout.desktop/Desktop.tsx}

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

package/src/app/settings/layout.desktop/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import MobileLayout from '../layout.mobile';
+import DesktopLayout from './Desktop';
+
+const Setting = ({ children }: PropsWithChildren) => {
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('header.global'));
+
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} isMobile={useIsMobile}>
+        {children}
+      </ResponsiveLayout>
+    </>
+  );
+};
+
+export default Setting;

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Header from './features/Header';
+
+const SettingLayout = ({ children }: PropsWithChildren) => (
+  <AppMobileLayout navBar={<Header />}>
+    <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
+  </AppMobileLayout>
+);
+
+export default SettingLayout;

package/src/app/settings/layout.tsx

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

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

@@ -1,3 +1,15 @@
-import Index from './index';
+'use client';
 
-export default () => <Index />;
+import { memo } from 'react';
+
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import LLM from './LLM';
+
+const LLMSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.LLM);
+  return <LLM />;
+});
+
+export default LLMSetting;

package/src/app/settings/{(mobile)/features → mobile}/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)/mobile → mobile}/index.tsx

@@ -6,15 +6,16 @@ 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 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 '../features/ExtraList';
-import Layout from './layout.mobile';
+import List from '../features/SideBar/List';
+import ExtraList from './ExtraList';
 
 const useStyles = createStyles(({ css, token }) => ({
   divider: css`
@@ -28,12 +29,11 @@ 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 (
-    <Layout>
+    <AppMobileLayout navBar={<Header />} showTabBar>
       <AgentCardBanner
         mask
         meta={{ avatar: avatar || AVATAR }}
@@ -54,7 +54,7 @@ const Setting = memo(() => {
           </Divider>
         </Center>
       </div>
-    </Layout>
+    </AppMobileLayout>
   );
 });
 

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

@@ -0,0 +1,7 @@
+import Page from './index';
+
+const Index = () => {
+  return <Page />;
+};
+
+export default Index;

package/src/app/settings/page.tsx

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

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

@@ -3,14 +3,14 @@ import Link from 'next/link';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import AppLayoutDesktop from '@/layout/AppLayout.desktop';
+import AppLayout from '@/layout/AppLayout';
 
 import { useStyles } from '../features/Banner/style';
 
 const Desktop = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   return (
-    <AppLayoutDesktop>
+    <AppLayout>
       <Center
         className={styles.layout}
         flex={1}
@@ -21,11 +21,11 @@ const Desktop = memo<PropsWithChildren>(({ children }) => {
         <Link href={'/'}>
           <Logo className={styles.logo} size={36} type={'text'} />
         </Link>
-        <Flexbox className={styles.view} flex={1}>
+        <Flexbox className={styles.view} flex={1} style={{ maxWidth: 1024 }}>
           {children}
         </Flexbox>
       </Center>
-    </AppLayoutDesktop>
+    </AppLayout>
   );
 });
 

package/src/app/welcome/DesktopLayout/index.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import Mobile from '../MobileLayout';
+import Desktop from './Desktop';
+
+const ResponsiveLayout = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+});
+
+export default ResponsiveLayout;

package/src/app/welcome/MobileLayout.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <AppMobileLayout
+      navBar={<MobileNavBar center={<Logo type={'text'} />} />}
+      showTabBar
+      style={{ background: theme.colorBgLayout }}
+    >
+      {children}
+    </AppMobileLayout>
+  );
+});
+
+export default MobileLayout;

package/src/app/welcome/features/Banner/Hero.tsx

@@ -1,10 +1,11 @@
 import { LogoThree } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { genSize, useStyles } from './style';
 
-const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
+const Hero = memo<{ width: number }>(({ width }) => {
   const size = useMemo(
     () => ({
       base: genSize(width / 3.5, 240),
@@ -15,7 +16,7 @@ const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
     [width],
   );
   const { styles } = useStyles(size.base);
-
+  const { mobile } = useResponsive();
   const { t } = useTranslation('welcome');
 
   return (

package/src/app/welcome/features/Banner/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
+import { GridShowcase, Icon } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
@@ -16,12 +16,13 @@ import { useSessionStore } from '@/store/session';
 import Hero from './Hero';
 import { useStyles } from './style';
 
-const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
+const Banner = memo<{ mobile?: boolean }>(() => {
   const { importConfig } = useImportConfig();
   const ref = useRef(null);
   const domSize = useSize(ref);
   const width = domSize?.width || 1024;
   const { t } = useTranslation('welcome');
+
   const { styles } = useStyles();
 
   const switchSession = useSessionStore((s) => s.switchSession);
@@ -31,38 +32,34 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   }, []);
 
   return (
-    <>
-      <div className={styles.container} ref={ref}>
-        <Hero mobile={mobile} width={width} />
-      </div>
-      <Flexbox
-        className={styles.buttonGroup}
-        gap={16}
-        horizontal={!mobile}
-        justify={'center'}
-        width={'100%'}
-      >
-        <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
-          <Button block={mobile} size={'large'}>
-            {t('button.import')}
-          </Button>
-        </Upload>
-        <Link
-          href={SESSION_CHAT_URL()}
-          onClick={(e) => {
-            e.preventDefault();
-            switchSession();
-          }}
-        >
-          <Button block={mobile} size={'large'} type={'primary'}>
-            <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
-              {t('button.start')}
-              <Icon icon={SendHorizonal} />
-            </Flexbox>
-          </Button>
-        </Link>
-      </Flexbox>
-    </>
+    <Flexbox height={'80vh'} style={{ paddingTop: '10vh' }}>
+      <GridShowcase>
+        <div className={styles.container} ref={ref}>
+          <Hero width={width} />
+        </div>
+        <Flexbox gap={16} horizontal style={{ marginTop: 16 }}>
+          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
+            <Button size={'large'}>{t('button.import')}</Button>
+          </Upload>
+          <Link
+            href={SESSION_CHAT_URL()}
+            onClick={(e) => {
+              e.preventDefault();
+              switchSession();
+            }}
+          >
+            <Button size={'large'} type={'primary'}>
+              <Flexbox align={'center'} gap={4} horizontal>
+                {t('button.start')}
+                <Icon icon={SendHorizonal} />
+              </Flexbox>
+            </Button>
+          </Link>
+        </Flexbox>
+      </GridShowcase>
+      {/*TODO：暂时隐藏，待模板完成后再补回*/}
+      {/*<AgentTemplate width={width} />*/}
+    </Flexbox>
   );
 });
 

package/src/app/welcome/features/Banner/style.ts

@@ -1,13 +1,8 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) => {
+export const useStyles = createStyles(({ css, token, stylish, cx }) => {
   return {
-    buttonGroup: css`
-      .${prefixCls}-upload {
-        width: 100% !important;
-      }
-    `,
     container: css`
       z-index: 10;
 
@@ -54,12 +49,8 @@ export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) =
     view: cx(
       stylish.noScrollbar,
       css`
-        position: relative;
-
         overflow-x: hidden;
         overflow-y: auto;
-
-        max-width: 1024px;
         height: 100vh;
         padding: 32px 16px;
       `,