@lobehub/lobehub 2.0.0-next.34 → 2.0.0-next.35

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.35](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.34...v2.0.0-next.35)
+
+<sup>Released on **2025-11-07**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Use react-router-dom change /chat page to spa mode.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Use react-router-dom change /chat page to spa mode, closes [#10077](https://github.com/lobehub/lobe-chat/issues/10077) ([9154606](https://github.com/lobehub/lobe-chat/commit/9154606))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.34](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.33...v2.0.0-next.34)
 
 <sup>Released on **2025-11-07**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Use react-router-dom change /chat page to spa mode."
+      ]
+    },
+    "date": "2025-11-07",
+    "version": "2.0.0-next.35"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.34",
+  "version": "2.0.0-next.35",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/chat/ChatRouter.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { memo, useEffect } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { MemoryRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+
+import MainChatPage from './components/MainChatPage';
+import SettingsPage from './components/SettingsPage';
+
+// Get initial path from URL
+const getInitialPath = () => {
+  if (typeof window === 'undefined') return '/';
+  const fullPath = window.location.pathname;
+  const searchParams = window.location.search;
+  const chatIndex = fullPath.indexOf('/chat');
+
+  if (chatIndex !== -1) {
+    const pathAfterChat = fullPath.slice(chatIndex + '/chat'.length) || '/';
+    return pathAfterChat + searchParams;
+  }
+  return '/';
+};
+
+// Helper component to sync URL with MemoryRouter
+const UrlSynchronizer = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Sync initial URL
+  useEffect(() => {
+    const fullPath = window.location.pathname;
+    const searchParams = window.location.search;
+    const chatIndex = fullPath.indexOf('/chat');
+
+    if (chatIndex !== -1) {
+      const pathAfterChat = fullPath.slice(chatIndex + '/chat'.length) || '/';
+      const targetPath = pathAfterChat + searchParams;
+
+      if (location.pathname + location.search !== targetPath) {
+        navigate(targetPath, { replace: true });
+      }
+    }
+  }, []);
+
+  // Update browser URL when location changes
+  useEffect(() => {
+    const normalizedPath = location.pathname === '/' ? '' : location.pathname;
+    const newUrl = `/chat${normalizedPath}${location.search}`;
+    if (window.location.pathname + window.location.search !== newUrl) {
+      window.history.replaceState({}, '', newUrl);
+    }
+  }, [location.pathname, location.search]);
+
+  return null;
+};
+
+const ChatRouter = memo(() => {
+  const mobile = useMediaQuery({ maxWidth: 768 });
+  const routes = (
+    <Routes>
+      <Route element={<MainChatPage mobile={true} />} path="/" />
+      <Route element={<SettingsPage mobile={true} />} path="/settings" />
+      <Route element={<Navigate replace to="/" />} path="*" />
+    </Routes>
+  );
+
+  return (
+    <MemoryRouter initialEntries={[getInitialPath()]} initialIndex={0}>
+      <UrlSynchronizer />
+      {mobile ? (
+        // Mobile Layout
+        routes
+      ) : (
+        // Desktop Layout
+        <MainChatPage mobile={false} />
+      )}
+    </MemoryRouter>
+  );
+});
+
+ChatRouter.displayName = 'ChatRouter';
+
+export default ChatRouter;

package/src/app/[variants]/(main)/chat/_layout/ChatLayout.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+interface ChatLayoutProps extends PropsWithChildren {
+  mobile?: boolean;
+}
+
+const ChatLayout = memo<ChatLayoutProps>(({ children, mobile }) => {
+  if (mobile) {
+    return <Mobile>{children}</Mobile>;
+  }
+
+  return <Desktop>{children}</Desktop>;
+});
+
+ChatLayout.displayName = 'ChatLayout';
+
+export default ChatLayout;

package/src/app/[variants]/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -3,7 +3,7 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive, useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 
 import { withSuspense } from '@/components/withSuspense';
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
@@ -12,6 +12,7 @@ import { usePinnedAgentState } from '@/hooks/usePinnedAgentState';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+import SessionPanelContent from '../../components/SessionPanel';
 import { TOOGLE_PANEL_BUTTON_ID } from '../../features/TogglePanelButton';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -33,7 +34,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SessionPanel = memo<PropsWithChildren>(({ children }) => {
+const SessionPanel = memo(() => {
   const isSingleMode = useIsSingleMode();
 
   const { md = true } = useResponsive();
@@ -75,11 +76,15 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
 
   const { appearance } = useThemeMode();
 
-  const SessionPanel = useMemo(() => {
+  const PanelContent = useMemo(() => {
     if (isSingleMode) {
-      // 在单一模式下，仍然渲染 children 以确保 SessionHydration 等逻辑组件正常工作
+      // 在单一模式下，仍然渲染 SessionPanelContent 以确保 SessionHydration 等逻辑组件正常工作
       // 但使用隐藏样式而不是 return null
-      return <div style={{ display: 'none' }}>{children}</div>;
+      return (
+        <div style={{ display: 'none' }}>
+          <SessionPanelContent mobile={false} />
+        </div>
+      );
     }
 
     return (
@@ -98,13 +103,13 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
         size={{ height: '100%', width: sessionsWidth }}
       >
         <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
-          {children}
+          <SessionPanelContent mobile={false} />
         </DraggablePanelContainer>
       </DraggablePanel>
     );
   }, [sessionsWidth, md, isPinned, sessionExpandable, tmpWidth, appearance, isSingleMode]);
 
-  return SessionPanel;
+  return PanelContent;
 });
 
 export default withSuspense(SessionPanel);

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -9,7 +9,7 @@ import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
 import Workspace from './Workspace';
 
-const Layout = ({ children, session }: LayoutProps) => {
+const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <Flexbox
@@ -18,7 +18,7 @@ const Layout = ({ children, session }: LayoutProps) => {
         style={{ maxWidth: '100%', overflow: 'hidden', position: 'relative' }}
         width={'100%'}
       >
-        <SessionPanel>{session}</SessionPanel>
+        <SessionPanel />
         <Workspace>{children}</Workspace>
       </Flexbox>
       {/* ↓ cloud slot ↓ */}

package/src/app/[variants]/(main)/chat/_layout/FeatureFlagsProvider.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { PropsWithChildren, createContext, useContext } from 'react';
+
+interface FeatureFlags {
+  hideDocs?: boolean;
+  showChangelog?: boolean;
+}
+
+const FeatureFlagsContext = createContext<FeatureFlags>({});
+
+export const useFeatureFlags = () => useContext(FeatureFlagsContext);
+
+export const FeatureFlagsProvider = ({
+  children,
+  hideDocs,
+  showChangelog,
+}: PropsWithChildren<FeatureFlags>) => {
+  return (
+    <FeatureFlagsContext.Provider value={{ hideDocs, showChangelog }}>
+      {children}
+    </FeatureFlagsContext.Provider>
+  );
+};

package/src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -7,6 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 import { withSuspense } from '@/components/withSuspense';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
+import SessionPanelContent from '../components/SessionPanel';
 import { LayoutProps } from './type';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -17,7 +18,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Layout = memo<LayoutProps>(({ children, session }) => {
+const Layout = memo<LayoutProps>(({ children }) => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
@@ -29,7 +30,7 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
         style={showMobileWorkspace ? { display: 'none' } : undefined}
         width="100%"
       >
-        {session}
+        <SessionPanelContent mobile />
       </Flexbox>
       <Flexbox
         className={styles.main}

package/src/app/[variants]/(main)/chat/_layout/type.ts

@@ -2,5 +2,4 @@ import { ReactNode } from 'react';
 
 export interface LayoutProps {
   children: ReactNode;
-  session: ReactNode;
 }

package/src/app/[variants]/(main)/chat/components/ConversationArea.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+
+import ChatHydration from './conversation/features/ChatHydration';
+import ChatInput from './conversation/features/ChatInput';
+import ChatList from './conversation/features/ChatList';
+import ChatMinimap from './conversation/features/ChatMinimap';
+import ThreadHydration from './conversation/features/ThreadHydration';
+import ZenModeToast from './conversation/features/ZenModeToast';
+
+interface ConversationAreaProps {
+  mobile?: boolean;
+}
+
+const ConversationArea = memo<ConversationAreaProps>(({ mobile = false }) => {
+  return (
+    <>
+      <ZenModeToast />
+      <ChatList mobile={mobile} />
+      <ChatInput mobile={mobile} />
+      <ChatHydration />
+      <ThreadHydration />
+      {!mobile && <ChatMinimap />}
+    </>
+  );
+});
+
+ConversationArea.displayName = 'ConversationArea';
+
+export default ConversationArea;

package/src/app/[variants]/(main)/chat/components/MainChatPage.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+
+import TelemetryNotification from '../components/features/TelemetryNotification';
+import PageTitle from '../features/PageTitle';
+import WorkspaceLayout from './WorkspaceLayout';
+
+interface MainChatPageProps {
+  mobile?: boolean;
+}
+
+const MainChatPage = memo<MainChatPageProps>(({ mobile }) => {
+  return (
+    <>
+      <PageTitle />
+      <WorkspaceLayout mobile={mobile} />
+      <TelemetryNotification mobile={mobile} />
+    </>
+  );
+});
+
+MainChatPage.displayName = 'MainChatPage';
+
+export default MainChatPage;

package/src/app/[variants]/(main)/chat/components/PortalPanel.tsx

@@ -0,0 +1,28 @@
+import { Suspense, lazy, memo } from 'react';
+
+import Loading from '@/components/Loading/BrandTextLoading';
+
+import DesktopLayout from './portal/_layout/Desktop';
+import MobileLayout from './portal/_layout/Mobile';
+
+const PortalBody = lazy(() => import('@/features/Portal/router'));
+
+interface PortalPanelProps {
+  mobile?: boolean;
+}
+
+const PortalPanel = memo<PortalPanelProps>(({ mobile }) => {
+  const Layout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Layout>
+        <PortalBody />
+      </Layout>
+    </Suspense>
+  );
+});
+
+PortalPanel.displayName = 'PortalPanel';
+
+export default PortalPanel;

package/src/app/[variants]/(main)/chat/components/SessionPanel.tsx

@@ -0,0 +1,33 @@
+import { Suspense, lazy, memo } from 'react';
+
+import CircleLoading from '@/components/Loading/CircleLoading';
+
+import DesktopLayout from '../session/layout/Desktop';
+import MobileLayout from '../session/layout/Mobile';
+import SessionHydration from '../session/features/SessionHydration';
+import SkeletonList from '../session/features/SkeletonList';
+
+const SessionListContent = lazy(() => import('../session/features/SessionListContent'));
+
+interface SessionPanelProps {
+  mobile?: boolean;
+}
+
+const SessionPanel = memo<SessionPanelProps>(({ mobile }) => {
+  const Layout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <Suspense fallback={<CircleLoading />}>
+      <Layout>
+        <Suspense fallback={<SkeletonList />}>
+          <SessionListContent />
+        </Suspense>
+      </Layout>
+      <SessionHydration />
+    </Suspense>
+  );
+});
+
+SessionPanel.displayName = 'SessionPanel';
+
+export default SessionPanel;

package/src/app/[variants]/(main)/chat/{settings/page.tsx → components/SettingsPage.tsx}

@@ -6,9 +6,14 @@ import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
 import PageTitle from '@/components/PageTitle';
+import SafeSpacing from '@/components/SafeSpacing';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
 import AgentSettings from '@/features/AgentSetting/AgentSettings';
+import Footer from '@/features/Setting/Footer';
+import SettingContainer from '@/features/Setting/SettingContainer';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -16,7 +21,14 @@ import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
-const EditPage = memo(() => {
+import DesktopHeader from '../settings/_layout/Desktop/Header';
+import MobileHeader from '../settings/_layout/Mobile/Header';
+
+interface SettingsPageProps {
+  mobile?: boolean;
+}
+
+const SettingsPage = memo<SettingsPageProps>(({ mobile = false }) => {
   const { t } = useTranslation('setting');
   const [tab, setTab] = useState(ChatSettingsTabs.Prompt);
   const theme = useTheme();
@@ -34,7 +46,7 @@ const EditPage = memo(() => {
 
   const { isLoading } = useInitAgentConfig();
 
-  return (
+  const content = (
     <>
       <PageTitle title={t('header.sessionWithName', { name: title })} />
       <Tabs
@@ -57,6 +69,26 @@ const EditPage = memo(() => {
       />
     </>
   );
+
+  if (mobile) {
+    return (
+      <MobileContentLayout header={<MobileHeader />}>
+        {content}
+        <Footer />
+      </MobileContentLayout>
+    );
+  }
+
+  return (
+    <>
+      <DesktopHeader />
+      <SettingContainer addonAfter={<Footer />} addonBefore={<SafeSpacing height={HEADER_HEIGHT} />}>
+        {content}
+      </SettingContainer>
+    </>
+  );
 });
 
-export default EditPage;
+SettingsPage.displayName = 'SettingsPage';
+
+export default SettingsPage;

package/src/app/[variants]/(main)/chat/components/TopicSidebar.tsx

@@ -0,0 +1,30 @@
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+
+import DesktopLayout from './topic/_layout/Desktop';
+import MobileLayout from './topic/_layout/Mobile';
+import SkeletonList from './topic/features/SkeletonList';
+import Topic from './topic/features/Topic';
+
+const ConfigSwitcher = dynamic(() => import('./topic/features/ConfigSwitcher'), {
+  loading: () => <SkeletonList />,
+});
+
+interface TopicSidebarProps {
+  mobile?: boolean;
+}
+
+const TopicSidebar = memo<TopicSidebarProps>(({ mobile }) => {
+  const Layout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <Layout>
+      <ConfigSwitcher />
+      <Topic />
+    </Layout>
+  );
+});
+
+TopicSidebar.displayName = 'TopicSidebar';
+
+export default TopicSidebar;

package/src/app/[variants]/(main)/chat/components/WorkspaceLayout.tsx

@@ -0,0 +1,73 @@
+import { Suspense, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import MainInterfaceTracker from '@/components/Analytics/MainInterfaceTracker';
+import BrandTextLoading from '@/components/Loading/BrandTextLoading';
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
+import ChatHeaderDesktop from '../components/layout/Desktop/ChatHeader';
+import Portal from '../components/layout/Desktop/Portal';
+import TopicPanel from '../components/layout/Desktop/TopicPanel';
+import ChatHeaderMobile from '../components/layout/Mobile/ChatHeader';
+import TopicModal from '../components/layout/Mobile/TopicModal';
+import ConversationArea from './ConversationArea';
+import PortalPanel from './PortalPanel';
+import TopicSidebar from './TopicSidebar';
+
+interface WorkspaceLayoutProps {
+  mobile?: boolean;
+}
+
+const DesktopWorkspace = memo(() => (
+  <>
+    <ChatHeaderDesktop />
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{ overflow: 'hidden', position: 'relative' }}
+      width={'100%'}
+    >
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        <ConversationArea mobile={false} />
+      </Flexbox>
+      <Portal>
+        <Suspense fallback={<BrandTextLoading />}>
+          <PortalPanel mobile={false} />
+        </Suspense>
+      </Portal>
+      <TopicPanel>
+        <TopicSidebar mobile={false} />
+      </TopicPanel>
+    </Flexbox>
+    <MainInterfaceTracker />
+  </>
+));
+
+DesktopWorkspace.displayName = 'DesktopWorkspace';
+
+const MobileWorkspace = memo(() => (
+  <>
+    <MobileContentLayout header={<ChatHeaderMobile />} style={{ overflowY: 'hidden' }}>
+      <ConversationArea mobile />
+    </MobileContentLayout>
+    <TopicModal>
+      <TopicSidebar mobile />
+    </TopicModal>
+    <PortalPanel mobile />
+    <MainInterfaceTracker />
+  </>
+));
+
+MobileWorkspace.displayName = 'MobileWorkspace';
+
+const WorkspaceLayout = memo<WorkspaceLayoutProps>(({ mobile }) => {
+  if (mobile) {
+    return <MobileWorkspace />;
+  }
+
+  return <DesktopWorkspace />;
+});
+
+WorkspaceLayout.displayName = 'WorkspaceLayout';
+
+export default WorkspaceLayout;

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/conversation}/features/ChatList/ChatItem/index.tsx

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 
-import SupervisorThinkingTag from '@/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/OrchestratorThinking';
+import SupervisorThinkingTag from '@/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/OrchestratorThinking';
 import { ChatItem } from '@/features/Conversation';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';

package/src/app/[variants]/(main)/chat/{layout.ts → layout.tsx}

@@ -1,5 +1,4 @@
 import ServerLayout from '@/components/server/ServerLayout';
-
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 import { LayoutProps } from './_layout/type';

package/src/app/[variants]/(main)/chat/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { BrandTextLoading } from '@/components/Loading';
+
+const ChatRouter = dynamic(() => import('./ChatRouter'), {
+  loading: BrandTextLoading,
+  ssr: false,
+});
+
+export default ChatRouter;

package/src/features/Portal/GroupThread/Body/index.tsx

@@ -3,7 +3,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ChatInput from '@/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput';
+import ChatInput from '@/app/[variants]/(main)/chat/components/conversation/features/ChatInput';
 import { useChatGroupStore } from '@/store/chatGroup';
 
 import ThreadChatList from './ThreadChatList';

package/src/hooks/useHotkeys/chatScope.ts

@@ -2,7 +2,7 @@ import isEqual from 'fast-deep-equal';
 import { useEffect } from 'react';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 
-import { useSend } from '@/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend';
+import { useSend } from '@/app/[variants]/(main)/chat/components/conversation/features/ChatInput/useSend';
 import { useClearCurrentMessages } from '@/features/ChatInput/ActionBar/Clear';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useActionSWR } from '@/libs/swr';

package/src/app/[variants]/(main)/chat/(workspace)/layout.ts

@@ -1,11 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './_layout/Desktop';
-import Mobile from './_layout/Mobile';
-import { LayoutProps } from './_layout/type';
-
-const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
-
-Layout.displayName = 'ChatConversationLayout';
-
-export default Layout;