enhancement: update app layout with system monitor open (#4528)

web/containers/MainViewContainer/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { memo, useEffect, useState } from 'react'
 
 import { motion as m } from 'framer-motion'
 import { useAtomValue } from 'jotai'
@@ -12,10 +12,27 @@ import LocalServerScreen from '@/screens/LocalServer'
 import SettingsScreen from '@/screens/Settings'
 import ThreadScreen from '@/screens/Thread'
 
-import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
+import {
+  mainViewStateAtom,
+  showSystemMonitorPanelAtom,
+} from '@/helpers/atoms/App.atom'
 
 const MainViewContainer = () => {
   const mainViewState = useAtomValue(mainViewStateAtom)
+  const showSystemMonitorPanel = useAtomValue(showSystemMonitorPanelAtom)
+  const [height, setHeight] = useState<number>(0)
+
+  useEffect(() => {
+    if (showSystemMonitorPanel) {
+      const element = document.querySelector('.system-monitor-panel')
+
+      if (element) {
+        setHeight(element.clientHeight) // You can also use offsetHeight if needed
+      }
+    } else {
+      setHeight(0)
+    }
+  }, [showSystemMonitorPanel])
 
   let children = null
   switch (mainViewState) {
@@ -37,7 +54,10 @@ const MainViewContainer = () => {
   }
 
   return (
-    <div className={twMerge('relative flex w-[calc(100%-48px)]')}>
+    <div
+      className={twMerge('relative flex w-[calc(100%-48px)]')}
+      style={{ height: `calc(100% - ${height}px)` }}
+    >
       <div className="w-full">
         <m.div
           key={mainViewState}

web/screens/Thread/ThreadCenterPanel/index.tsx

@@ -27,7 +27,6 @@ import { uploader } from '@/utils/file'
 import ChatInput from './ChatInput'
 import RequestDownloadModel from './RequestDownloadModel'
 
-import { showSystemMonitorPanelAtom } from '@/helpers/atoms/App.atom'
 import { experimentalFeatureEnabledAtom } from '@/helpers/atoms/AppConfig.atom'
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
 import { chatWidthAtom } from '@/helpers/atoms/Setting.atom'
@@ -158,22 +157,6 @@ const ThreadCenterPanel = () => {
 
   const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
 
-  const showSystemMonitorPanel = useAtomValue(showSystemMonitorPanelAtom)
-
-  const [height, setHeight] = useState<number>(0)
-
-  useEffect(() => {
-    if (showSystemMonitorPanel) {
-      const element = document.querySelector('.system-monitor-panel')
-
-      if (element) {
-        setHeight(element.clientHeight) // You can also use offsetHeight if needed
-      }
-    } else {
-      setHeight(0)
-    }
-  }, [showSystemMonitorPanel])
-
   return (
     <CenterPanelContainer>
       <div
@@ -217,13 +200,7 @@ const ThreadCenterPanel = () => {
             </div>
           </div>
         )}
-        <div
-          className={twMerge(
-            'flex h-full w-full flex-col justify-between'
-            // showSystemMonitorPanel && `h-[calc(100%-${height}px)]`
-          )}
-          style={{ height: `calc(100% - ${height}px)` }}
-        >
+        <div className={twMerge('flex h-full w-full flex-col justify-between')}>
           {activeThread ? (
             <div className="flex h-full w-full overflow-x-hidden">
               <ChatBody />