@lobehub/chat 0.83.8 → 0.83.10

package/src/app/chat/{components/ChatInput → features/ChatInputContent}/index.tsx

@@ -19,7 +19,7 @@ interface ChatContentProps {
   onExpandChange?: (expand: boolean) => void;
 }
 
-export const ChatInputContent = memo<ChatContentProps>(
+const ChatInputContent = memo<ChatContentProps>(
   ({ expand, onExpandChange, mobile: defaultMobile }) => {
     const { t } = useTranslation('common');
 
@@ -63,3 +63,5 @@ export const ChatInputContent = memo<ChatContentProps>(
     );
   },
 );
+
+export default ChatInputContent;

package/src/app/chat/{components/SessionList → features/SessionListContent}/Inbox/index.tsx

@@ -1,5 +1,6 @@
 import { Avatar, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
+import { useResponsive } from 'antd-style';
 import Link from 'next/link';
 import { memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,10 +16,10 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-
-  const [mobile, activeId, switchSession] = useSessionStore((s) => [
-    s.isMobile,
+  const { mobile } = useResponsive();
+  const [activeId, activeSession, switchSession] = useSessionStore((s) => [
     s.activeId,
+    s.activeSession,
     s.switchSession,
   ]);
 
@@ -39,11 +40,12 @@ const Inbox = memo(() => {
       href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();
-        switchSession(INBOX_SESSION_ID);
+        if (mobile) switchSession(INBOX_SESSION_ID);
+        else activeSession(INBOX_SESSION_ID);
       }}
     >
       <Item
-        active={activeId === INBOX_SESSION_ID}
+        active={mobile ? false : activeId === INBOX_SESSION_ID}
         avatar={avatarRender}
         ref={ref}
         style={{ alignItems: 'center' }}

package/src/app/chat/{components/SessionList → features/SessionListContent}/index.tsx

@@ -6,7 +6,7 @@ import CollapseGroup from './CollapseGroup';
 import Inbox from './Inbox';
 import SessionList from './List';
 
-export const SessionListContent = memo(() => {
+const SessionListContent = memo(() => {
   const { t } = useTranslation('common');
   const items: CollapseProps['items'] = useMemo(
     () => [
@@ -26,3 +26,5 @@ export const SessionListContent = memo(() => {
     </>
   );
 });
+
+export default SessionListContent;

package/src/app/chat/{components/Inspector → features/TopicListContent}/index.tsx

@@ -3,7 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 import { Topic } from './Topic';
 import TopicSearchBar from './TopicSearchBar';
 
-export const InspectorContent = () => {
+const TopicListContent = () => {
   return (
     <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
       <Flexbox padding={16}>
@@ -15,3 +15,5 @@ export const InspectorContent = () => {
     </Flexbox>
   );
 };
+
+export default TopicListContent;

package/src/app/chat/page.tsx

@@ -6,7 +6,9 @@ import MobilePage from './(mobile)';
 const Page = () => {
   const mobile = isMobileDevice();
 
-  return mobile ? <MobilePage /> : <DesktopPage />;
+  const Page = mobile ? MobilePage : DesktopPage;
+
+  return <Page />;
 };
 
 export default Page;

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+
+import EditPage from '../features/EditPage';
+import Layout from './layout.responsive';
+
+const ChatSettings = memo(() => (
+  <Layout>
+    <EditPage />
+  </Layout>
+));
+
+export default ChatSettings;

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

@@ -1,23 +1,18 @@
-'use client';
-
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 
+import Layout from '../../(desktop)/layout.desktop';
 import Header from './Header';
 
-const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
-  return (
-    <>
-      <Header />
-      <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
-        <SafeSpacing height={HEADER_HEIGHT - 16} />
-        {children}
-      </Flexbox>
-    </>
-  );
-});
-
-export default DesktopLayout;
+export default memo(({ children }: PropsWithChildren) => (
+  <Layout>
+    <Header />
+    <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
+      <SafeSpacing height={HEADER_HEIGHT - 16} />
+      {children}
+    </Flexbox>
+  </Layout>
+));

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

@@ -0,0 +1,12 @@
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
+
+import Mobile from '../(mobile)/layout.mobile';
+import Desktop from './layout.desktop';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile}>
+    {children}
+  </ResponsiveLayout>
+));

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+
+import EditPage from '../features/EditPage';
+import Layout from './layout.mobile';
+
+const ChatSettings = memo(() => (
+  <Layout>
+    <EditPage />
+  </Layout>
+));
+
+export default ChatSettings;

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/{features/SideBar/Desktop.tsx → (desktop)/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/{layout.desktop/Desktop.tsx → (desktop)/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 Header from '../features/Header';
-import SideBar from '../features/SideBar';
+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/{features/SideBar/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/{layout.mobile.tsx → (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 './features/AgentDetail';
 import Header from './features/Header';
-import SideBar from './features/SideBar';
 
 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>
-      <SideBar />
-    </AppMobileLayout>
+      <DetailModal />
+    </AppLayoutMobile>
   );
 };
 

package/src/app/market/features/{SideBar → 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/features/{SideBar → AgentDetailContent}/AgentInfo/index.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useMarketStore } from '@/store/market';
 
-import AgentCardBanner from '../../AgentCard/AgentCardBanner';
+import AgentCardBanner from '../../../features/AgentCard/AgentCardBanner';
 import Comment from './Comment';
 import Header from './Header';
 import Loading from './Loading';

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

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AgentInfo from './AgentInfo';
+
+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 />;