enhancement: Update app layout with an expanded system monitor

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 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'
@@ -39,18 +38,18 @@
 } from '@/helpers/atoms/Thread.atom'
 
 const renderError = (code: string) => {
   switch (code) {
     case 'multiple-upload':
       return 'Currently, we only support 1 attachment at the same time'
 
     case 'retrieval-off':
       return 'Turn on Retrieval in Assistant Settings to use this feature'
 
     case 'file-invalid-type':
       return 'We do not support this file type'
 
     default:
       return 'Oops, something error, please try again.'
   }
 }
 
@@ -80,23 +79,23 @@
 
     onDragOver: (e) => {
       // Retrieval file drag and drop is experimental feature
       if (!experimentalFeature) return
       if (
         e.dataTransfer.items.length === 1 &&
         ((activeAssistant?.tools && activeAssistant?.tools[0]?.enabled) ||
           activeAssistant?.model.settings?.vision_model)
       ) {
         setDragOver(true)
       } else if (
         activeAssistant?.tools &&
         !activeAssistant?.tools[0]?.enabled
       ) {
         setDragRejected({ code: 'retrieval-off' })
       } else {
         setDragRejected({ code: 'multiple-upload' })
       }
     },
     onDragLeave: () => setDragOver(false),
     onDrop: async (files, rejectFiles) => {
       // Retrieval file drag and drop is experimental feature
       if (!experimentalFeature) return
@@ -158,22 +157,6 @@
 
   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 @@
             </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 />