♻️ refactor(layout): Refactor layout

src/app/chat/(desktop)/features/ChatHeader/Desktop.tsx → src/app/chat/(desktop)/features/ChatHeader.tsx

@@ -12,8 +12,8 @@ import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import PluginTag from '../../../components/ChatHeader/PluginTag';
-import ShareButton from '../../../components/ChatHeader/ShareButton';
+import PluginTag from '../../features/ChatHeader/PluginTag';
+import ShareButton from '../../features/ChatHeader/ShareButton';
 
 const Header = memo(() => {
   const init = useSessionChatInit();

src/app/chat/(desktop)/features/ChatInput/Desktop.tsx → src/app/chat/(desktop)/features/ChatInput.tsx

@@ -1,15 +1,13 @@
 import { DraggablePanel } from '@lobehub/ui';
-import { ReactNode, memo } from 'react';
+import { memo, useState } from 'react';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
-interface ChatInputDesktopLayoutProps {
-  children: ReactNode;
-  expand?: boolean;
-}
+import ChatInputContent from '../../features/ChatInputContent';
 
-const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, expand }) => {
+const ChatInputDesktopLayout = memo(() => {
+  const [expand, setExpand] = useState<boolean>(false);
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
     s.preference.inputHeight,
     s.updatePreference,
@@ -32,7 +30,7 @@ const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, ex
       size={{ height: inputHeight, width: '100%' }}
       style={{ zIndex: 10 }}
     >
-      {children}
+      <ChatInputContent expand={expand} onExpandChange={setExpand} />
     </DraggablePanel>
   );
 });

src/app/chat/(desktop)/features/SessionHeader/Desktop.tsx → src/app/chat/(desktop)/features/SessionHeader.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
-import SessionSearchBar from '../../../features/SessionSearchBar';
+import SessionSearchBar from '../../features/SessionSearchBar';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`

src/app/chat/(desktop)/features/SessionList/Desktop.tsx → src/app/chat/(desktop)/features/SessionList.tsx

@@ -1,21 +1,22 @@
 import { DraggablePanelBody } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
+import { memo } from 'react';
 
 import FolderPanel from '@/features/FolderPanel';
 
-import Header from '../SessionHeader';
+import SessionListContent from '../../features/SessionListContent';
+import Header from './SessionHeader';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 
-const Sessions = memo<{ children: ReactNode }>(({ children }) => {
+const Sessions = memo(() => {
   const { styles } = useStyles();
 
   return (
     <FolderPanel>
       <Header />
       <DraggablePanelBody className={styles} style={{ padding: 0 }}>
-        {children}
+        <SessionListContent />
       </DraggablePanelBody>
     </FolderPanel>
   );

src/app/chat/(desktop)/features/SideBar/Desktop.tsx → src/app/chat/(desktop)/features/SideBar.tsx

@@ -1,14 +1,15 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
+import { memo } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import SystemRole from '../../../components/Inspector/SystemRole';
+import TopicListContent from '../../features/TopicListContent';
+import SystemRole from '../../features/TopicListContent/SystemRole';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -23,7 +24,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Desktop = memo<{ children: ReactNode }>(({ children }) => {
+const Desktop = memo(() => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -49,7 +50,7 @@ const Desktop = memo<{ children: ReactNode }>(({ children }) => {
       >
         <SafeSpacing />
         {!isInbox && <SystemRole />}
-        {children}
+        <TopicListContent />
       </DraggablePanelContainer>
     </DraggablePanel>
   );

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

@@ -3,19 +3,18 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import ResponsiveIndex from '@/components/ResponsiveIndex';
 
+import Mobile from '../(mobile)';
 import Conversation from '../features/Conversation';
 import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
 import ChatInput from './features/ChatInput';
 import SideBar from './features/SideBar';
 import Layout from './layout.responsive';
 
-const DesktopPage = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-  return (
+const DesktopPage = memo(() => (
+  <ResponsiveIndex Mobile={Mobile}>
     <Layout>
       <PageTitle />
       <ChatHeader />
@@ -24,6 +23,6 @@ const DesktopPage = memo(() => {
         <SideBar />
       </Flexbox>
     </Layout>
-  );
-});
+  </ResponsiveIndex>
+));
 export default DesktopPage;

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

@@ -1,20 +1,27 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import ResponsiveSessionList from './features/SessionList';
 
-export default memo(({ children }: PropsWithChildren) => (
-  <AppLayoutDesktop>
-    <ResponsiveSessionList />
-    <Flexbox
-      flex={1}
-      height={'100vh'}
-      id={'lobe-conversion-container'}
-      style={{ position: 'relative' }}
-    >
-      {children}
-    </Flexbox>
-  </AppLayoutDesktop>
-));
+export default memo(({ children }: PropsWithChildren) => {
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
+  return (
+    <AppLayoutDesktop>
+      <ResponsiveSessionList />
+      <Flexbox
+        flex={1}
+        height={'100vh'}
+        id={'lobe-conversion-container'}
+        style={{ position: 'relative' }}
+      >
+        {children}
+      </Flexbox>
+    </AppLayoutDesktop>
+  );
+});

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

@@ -1,15 +1,12 @@
-'use client';
-
 import { PropsWithChildren, memo } from 'react';
 
-import ResponsiveLayout from '@/components/ResponsiveLayout';
-import { useIsMobile } from '@/hooks/useIsMobile';
+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} isMobile={useIsMobile}>
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile}>
     {children}
   </ResponsiveLayout>
 ));

src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -1 +1,54 @@
-export { default } from '../../components/ChatHeader/Mobile';
+import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { LayoutList, Settings } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
+import { pathString } from '@/utils/url';
+
+import ShareButton from '../../features/ChatHeader/ShareButton';
+
+const MobileHeader = memo(() => {
+  const { t } = useTranslation('common');
+  const router = useRouter();
+
+  const [isInbox, title] = useSessionStore((s) => [
+    sessionSelectors.isInboxSession(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+
+  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle title={displayTitle} />}
+      onBackClick={() => router.push('/chat')}
+      right={
+        <>
+          <ShareButton />
+          <ActionIcon
+            icon={LayoutList}
+            onClick={() => toggleConfig()}
+            size={MOBILE_HEADER_ICON_SIZE}
+          />
+          {!isInbox && (
+            <ActionIcon
+              icon={Settings}
+              onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))}
+              size={MOBILE_HEADER_ICON_SIZE}
+            />
+          )}
+        </>
+      }
+      showBackButton
+    />
+  );
+});
+
+export default MobileHeader;

src/app/chat/(mobile)/features/ChatInput.tsx

@@ -1,14 +1,34 @@
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
-import { ChatInputContent } from '../../components/ChatInput';
-import Mobile from '../../components/ChatInput/Mobile';
+import SafeSpacing from '@/components/SafeSpacing';
+import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
 
-const ChatInput = () => {
+import ChatInputContent from '../../features/ChatInputContent';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100vw;
+
+    background: ${token.colorBgLayout};
+  `,
+);
+
+const ChatInputMobileLayout = memo(() => {
+  const { styles } = useStyles();
   return (
-    <Mobile>
-      <ChatInputContent mobile />
-    </Mobile>
+    <>
+      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
+      <div className={styles}>
+        <ChatInputContent mobile />
+      </div>
+    </>
   );
-};
+});
 
-export default memo(ChatInput);
+export default ChatInputMobileLayout;