@lobehub/chat 0.142.3 → 0.142.5

package/src/layout/{AppLayout.desktop.tsx → GlobalLayout/Desktop/Client.tsx}

@@ -1,19 +1,21 @@
+'use client';
+
 import { useTheme } from 'antd-style';
-import { ReactNode, memo } from 'react';
+import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import SideBar from '@/features/SideBar';
+import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { useIsPWA } from '@/hooks/useIsPWA';
-import { SidebarTabKey } from '@/store/global/initialState';
 
-interface AppLayoutDesktopProps {
-  children: ReactNode;
-  sidebarKey?: SidebarTabKey;
-}
-const AppLayoutDesktop = memo<AppLayoutDesktopProps>(({ children, sidebarKey }) => {
+import SideBar from './SideBar';
+
+const Desktop = memo<PropsWithChildren>(({ children }) => {
   const isPWA = useIsPWA();
   const theme = useTheme();
 
+  const sidebarKey = useActiveTabKey();
+
   return (
     <Flexbox
       height={'100%'}
@@ -27,4 +29,4 @@ const AppLayoutDesktop = memo<AppLayoutDesktopProps>(({ children, sidebarKey })
   );
 });
 
-export default AppLayoutDesktop;
+export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });

package/src/layout/GlobalLayout/Desktop/index.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren, memo } from 'react';
+
+import Client from './Client';
+
+const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
+  const pathname = usePathname();
+
+  if (pathname === '/') return children;
+
+  return <Client>{children}</Client>;
+});
+
+export default DesktopLayout;

package/src/layout/{AppLayout.mobile.tsx → GlobalLayout/Mobile/Client.tsx}

@@ -1,7 +1,7 @@
 import { type MobileNavBarTitleProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
+import { CSSProperties, PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
@@ -19,13 +19,6 @@ const useStyles = createStyles(({ css, cx, stylish }) => ({
       height: 100%;
     `,
   ),
-  mobileNavBar: css`
-    position: fixed;
-    z-index: 100;
-    top: 0;
-    right: 0;
-    left: 0;
-  `,
   mobileTabBar: css`
     position: fixed;
     z-index: 100;
@@ -37,7 +30,6 @@ const useStyles = createStyles(({ css, cx, stylish }) => ({
 
 interface AppMobileLayoutProps extends PropsWithChildren {
   className?: string;
-  navBar?: ReactNode;
   showTabBar?: boolean;
   style?: CSSProperties;
   tabBarKey?: SidebarTabKey;
@@ -45,17 +37,11 @@ interface AppMobileLayoutProps extends PropsWithChildren {
 }
 
 const AppLayoutMobile = memo<AppMobileLayoutProps>(
-  ({ children, showTabBar, tabBarKey, navBar, style, className }) => {
+  ({ children, showTabBar, tabBarKey, style, className }) => {
     const { styles, cx } = useStyles();
 
     return (
       <Flexbox className={cx(styles.container, className)} style={style}>
-        {navBar && (
-          <>
-            <div className={styles.mobileNavBar}>{navBar}</div>
-            <SafeSpacing mobile position={'top'} />
-          </>
-        )}
         {children}
         {showTabBar && (
           <>

package/src/layout/GlobalLayout/Mobile/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren, memo } from 'react';
+
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
+import { useIsSubSlug } from '@/hooks/useIsSubSlug';
+
+import Layout from './Client';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  const pathname = usePathname();
+  const tabBarKey = useActiveTabKey();
+  const isSubPath = useIsSubSlug();
+
+  if (pathname === '/') return children;
+
+  return (
+    <Layout showTabBar={!isSubPath} tabBarKey={tabBarKey}>
+      {children}
+    </Layout>
+  );
+});
+
+export default MobileLayout;

package/src/layout/GlobalLayout/index.tsx

@@ -0,0 +1,8 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+const GlobalLayout = ServerLayout({ Desktop, Mobile });
+
+export default GlobalLayout;

package/src/store/session/slices/session/action.test.ts

@@ -31,9 +31,6 @@ beforeEach(() => {
   vi.clearAllMocks();
   useSessionStore.setState({
     refreshSessions: mockRefresh,
-    router: {
-      push: mockRouterPush,
-    } as unknown as AppRouterInstance,
   });
 });
 
@@ -72,9 +69,6 @@ describe('SessionAction', () => {
       expect(call[1]).toMatchObject({ config: { displayMode: 'docs' } });
 
       expect(createdSessionId).toBe(newSessionId);
-      expect(mockRouterPush).toHaveBeenCalledWith(
-        SESSION_CHAT_URL(newSessionId, result.current.isMobile),
-      );
     });
 
     it('should create a new session but not switch to it if isSwitchSession is false', async () => {
@@ -131,35 +125,6 @@ describe('SessionAction', () => {
     });
   });
 
-  describe('switchSession', () => {
-    it('should switch to the provided session id', async () => {
-      const { result } = renderHook(() => useSessionStore());
-      const sessionId = 'session-id';
-
-      act(() => {
-        result.current.switchSession(sessionId);
-      });
-
-      expect(result.current.activeId).toBe(sessionId);
-      expect(mockRouterPush).toHaveBeenCalledWith(
-        SESSION_CHAT_URL(sessionId, result.current.isMobile),
-      );
-    });
-
-    it('should switch to the inbox session id if none is provided', async () => {
-      const { result } = renderHook(() => useSessionStore());
-
-      act(() => {
-        result.current.switchSession();
-      });
-
-      expect(result.current.activeId).toBe(INBOX_SESSION_ID);
-      expect(mockRouterPush).toHaveBeenCalledWith(
-        SESSION_CHAT_URL(INBOX_SESSION_ID, result.current.isMobile),
-      );
-    });
-  });
-
   describe('activeSession', () => {
     it('should set the provided session id as active', async () => {
       const { result } = renderHook(() => useSessionStore());

package/src/store/session/slices/session/action.ts

@@ -5,7 +5,6 @@ import { DeepPartial } from 'utility-types';
 import { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
-import { SESSION_CHAT_URL } from '@/const/url';
 import { useClientDataSWR } from '@/libs/swr';
 import { sessionService } from '@/services/session';
 import { useGlobalStore } from '@/store/global';
@@ -56,10 +55,6 @@ export interface SessionAction {
    * @param id - sessionId
    */
   removeSession: (id: string) => void;
-  /**
-   * switch session url
-   */
-  switchSession: (sessionId?: string) => void;
   /**
    * A custom hook that uses SWR to fetch sessions data.
    */
@@ -86,9 +81,9 @@ export const createSessionSlice: StateCreator<
   },
 
   createSession: async (agent, isSwitchSession = true) => {
-    const { switchSession, refreshSessions } = get();
+    const { activeSession, refreshSessions } = get();
 
-    // 合并 settings 里的 defaultAgent
+    // merge the defaultAgent in settings
     const defaultAgent = merge(
       initLobeSession,
       settingsSelectors.defaultAgent(useGlobalStore.getState()),
@@ -99,14 +94,14 @@ export const createSessionSlice: StateCreator<
     const id = await sessionService.createNewSession(LobeSessionType.Agent, newSession);
     await refreshSessions();
 
-    // 创建后是否跳转到对应会话，默认跳转
-    if (isSwitchSession) switchSession(id);
+    // Whether to goto  to the new session after creation, the default is to switch to
+    if (isSwitchSession) activeSession(id);
 
     return id;
   },
 
   duplicateSession: async (id) => {
-    const { switchSession, refreshSessions } = get();
+    const { activeSession, refreshSessions } = get();
     const session = sessionSelectors.getSessionById(id)(get());
 
     if (!session) return;
@@ -123,7 +118,7 @@ export const createSessionSlice: StateCreator<
     }
 
     await refreshSessions();
-    switchSession(newId);
+    activeSession(newId);
   },
 
   pinSession: async (sessionId, pinned) => {
@@ -140,20 +135,12 @@ export const createSessionSlice: StateCreator<
     await sessionService.removeSession(sessionId);
     await get().refreshSessions();
 
+    // If the active session deleted, switch to the inbox session
     if (sessionId === get().activeId) {
-      get().switchSession();
+      get().activeSession(INBOX_SESSION_ID);
     }
   },
 
-  switchSession: (sessionId = INBOX_SESSION_ID) => {
-    const { isMobile, router } = get();
-
-    get().activeSession(sessionId);
-
-    // TODO: 后续可以把 router 移除
-    router?.push(SESSION_CHAT_URL(sessionId, isMobile));
-  },
-
   useFetchSessions: () =>
     useClientDataSWR<ChatSessionList>(FETCH_SESSIONS_KEY, sessionService.getSessionsWithGroup, {
       onSuccess: (data) => {

package/src/store/session/slices/session/initialState.ts

@@ -1,5 +1,3 @@
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
-
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { CustomSessionGroup, LobeAgentSession, LobeSessionType } from '@/types/session';
@@ -25,11 +23,6 @@ export interface SessionState {
   isSearching: boolean;
   isSessionsFirstFetchFinished: boolean;
   pinnedSessions: LobeAgentSession[];
-  /**
-   * 后续看看是否可以将 router 部分的逻辑移出去
-   * @deprecated
-   */
-  router?: AppRouterInstance;
   searchKeywords: string;
   searchSessions: LobeAgentSession[];
   /**

package/src/styles/mobileHeader.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+
+export const mobileHeaderSticky: CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  zIndex: 100,
+};

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

@@ -1,18 +0,0 @@
-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 './features/Header';
-
-export default memo(({ children }: PropsWithChildren) => (
-  <Layout>
-    <Header />
-    <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'scroll' }}>
-      <SafeSpacing height={HEADER_HEIGHT - 16} />
-      {children}
-    </Flexbox>
-  </Layout>
-));

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren, memo } from 'react';
-
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-
-import Header from './features/Header';
-
-export default memo(({ children }: PropsWithChildren) => (
-  <AppLayoutMobile navBar={<Header />}>{children}</AppLayoutMobile>
-));

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

@@ -1,65 +0,0 @@
-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 SafeSpacing from '@/components/SafeSpacing';
-import { MAX_WIDTH } from '@/const/layoutTokens';
-import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-import Header from './features/Header';
-
-const SideBar = dynamic(() => import('./features/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 MarketLayout = memo<PropsWithChildren>(({ children }) => {
-  const { theme, styles } = useStyles();
-
-  return (
-    <AppLayoutDesktop sidebarKey={SidebarTabKey.Market}>
-      <Flexbox
-        flex={1}
-        height={'100%'}
-        id={'lobe-market-container'}
-        style={{ position: 'relative' }}
-      >
-        <Header />
-        <Flexbox flex={1} height={'calc(100% - 64px)'} horizontal>
-          <Flexbox align={'center'} flex={1} style={{ overflow: 'scroll', padding: 16 }}>
-            <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>
-              {children}
-            </Flexbox>
-          </Flexbox>
-          <SideBar />
-        </Flexbox>
-      </Flexbox>
-    </AppLayoutDesktop>
-  );
-});
-
-export default MarketLayout;

package/src/app/market/(mobile)/features/Header.tsx

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

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

@@ -1,25 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { PropsWithChildren } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-import Header from './features/Header';
-
-const DetailModal = dynamic(() => import('./features/AgentDetail'));
-
-const MarketLayout = ({ children }: PropsWithChildren) => {
-  return (
-    <AppLayoutMobile navBar={<Header />} showTabBar tabBarKey={SidebarTabKey.Market}>
-      <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
-        {children}
-      </Flexbox>
-      <DetailModal />
-    </AppLayoutMobile>
-  );
-};
-
-export default MarketLayout;

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

@@ -1,35 +0,0 @@
-'use client';
-
-import { ReactNode, memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
-
-import Header from './features/Header';
-import SideBar from './features/SideBar';
-
-export interface DesktopLayoutProps {
-  activeTab: SettingsTabs;
-  children: ReactNode;
-}
-
-const DesktopLayout = memo<DesktopLayoutProps>(({ children, activeTab }) => {
-  return (
-    <AppLayoutDesktop sidebarKey={SidebarTabKey.Setting}>
-      <SideBar activeTab={activeTab} />
-      <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
-        <Header activeTab={activeTab} />
-        <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'scroll' }}>
-          <SafeSpacing />
-          <Center gap={16} width={'100%'}>
-            {children}
-          </Center>
-        </Flexbox>
-      </Flexbox>
-    </AppLayoutDesktop>
-  );
-});
-
-export default DesktopLayout;

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

@@ -1,21 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { FC, memo } from 'react';
-
-import MobileSwitchLoading from '@/features/MobileSwitchLoading';
-// TODO: need to be removed
-import ResponsiveLayout from '@/layout/ServerResponsiveLayout/Client';
-
-import DesktopLayout, { DesktopLayoutProps } from './layout.desktop';
-
-const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), {
-  loading: MobileSwitchLoading,
-  ssr: false,
-}) as FC;
-
-export default memo<DesktopLayoutProps>(({ children, activeTab }) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} activeTab={activeTab}>
-    {children}
-  </ResponsiveLayout>
-));

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

@@ -1,8 +0,0 @@
-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/(mobile)/layout.mobile.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
-
-import Header from './features/Header';
-
-export interface SettingLayoutProps {
-  activeTab: SettingsTabs;
-  children: ReactNode;
-}
-export default memo(({ children, activeTab }: SettingLayoutProps) => {
-  return (
-    <AppLayoutMobile navBar={<Header activeTab={activeTab} />} tabBarKey={SidebarTabKey.Setting}>
-      <Flexbox style={{ overflow: 'scroll' }}>{children}</Flexbox>
-    </AppLayoutMobile>
-  );
-});

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

@@ -1,54 +0,0 @@
-'use client';
-
-import { Divider } from 'antd';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { Center } from 'react-layout-kit';
-
-import { CURRENT_VERSION } from '@/const/version';
-import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useGlobalStore } from '@/store/global';
-import { commonSelectors } from '@/store/global/selectors';
-
-import SettingList from '../../features/SettingList';
-import AvatarBanner from '../features/AvatarBanner';
-import ExtraList from '../features/ExtraList';
-import Layout from './layout.mobile';
-
-const useStyles = createStyles(({ css, token }) => ({
-  divider: css`
-    height: 6px;
-    background: ${token.colorFillTertiary};
-  `,
-  footer: css`
-    font-size: 12px;
-    color: ${token.colorTextQuaternary};
-  `,
-}));
-
-const Setting = memo(() => {
-  const avatar = useGlobalStore(commonSelectors.userAvatar);
-  const { styles } = useStyles();
-
-  return (
-    <Layout>
-      <AvatarBanner avatar={avatar}>
-        <Center style={{ position: 'absolute', zIndex: 2 }}>
-          <AvatarWithUpload size={88} />
-        </Center>
-      </AvatarBanner>
-      <div style={{ width: '100%' }}>
-        <SettingList />
-        <div className={styles.divider} />
-        <ExtraList />
-        <Center style={{ paddingInline: 64 }}>
-          <Divider>
-            <span className={styles.footer}>LobeChat v{CURRENT_VERSION}</span>
-          </Divider>
-        </Center>
-      </div>
-    </Layout>
-  );
-});
-
-export default Setting;

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

@@ -1,14 +0,0 @@
-'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: 'scroll' }}>{children}</Flexbox>
-  </AppLayoutMobile>
-));

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { SettingsTabs } from '@/store/global/initialState';
-
-import SettingLayout from '../layout.server';
-
-export default ({ children }: PropsWithChildren) => {
-  return <SettingLayout activeTab={SettingsTabs.About}>{children}</SettingLayout>;
-};

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { SettingsTabs } from '@/store/global/initialState';
-
-import SettingLayout from '../layout.server';
-
-export default ({ children }: PropsWithChildren) => {
-  return <SettingLayout activeTab={SettingsTabs.Agent}>{children}</SettingLayout>;
-};

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { SettingsTabs } from '@/store/global/initialState';
-
-import SettingLayout from '../layout.server';
-
-export default ({ children }: PropsWithChildren) => {
-  return <SettingLayout activeTab={SettingsTabs.Common}>{children}</SettingLayout>;
-};

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

@@ -1,19 +0,0 @@
-import { PropsWithChildren, ReactNode, memo } from 'react';
-
-import ResponsiveLayout from '@/layout/ServerResponsiveLayout';
-import { SettingsTabs } from '@/store/global/initialState';
-
-import DesktopLayout from './(desktop)/layout.responsive';
-import MobileLayout from './(mobile)/layout.mobile';
-
-export interface SettingLayoutProps {
-  activeTab: SettingsTabs;
-  children: ReactNode;
-}
-const SettingLayout = memo<SettingLayoutProps>(({ children, ...res }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} {...res}>
-    {children}
-  </ResponsiveLayout>
-));
-
-export default SettingLayout;

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { SettingsTabs } from '@/store/global/initialState';
-
-import SettingLayout from '../layout.server';
-
-export default ({ children }: PropsWithChildren) => {
-  return <SettingLayout activeTab={SettingsTabs.LLM}>{children}</SettingLayout>;
-};

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

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { SettingsTabs } from '@/store/global/initialState';
-
-import SettingLayout from '../layout.server';
-
-export default ({ children }: PropsWithChildren) => {
-  return <SettingLayout activeTab={SettingsTabs.Sync}>{children}</SettingLayout>;
-};