From 92906ea2fa790be7e06e43e1a2dace893319c9c5 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 4 Nov 2024 20:36:25 +0700
Subject: [PATCH] ui: system monitor should not cover input box (#3942)

---
 .../Layout/BottomPanel/SystemMonitor/index.tsx         |  2 +-
 web/screens/Thread/ThreadCenterPanel/index.tsx         | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
index 7fdc598ec..ae91cfa9d 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -94,7 +94,7 @@ const SystemMonitor = () => {
         <div
           ref={setElementExpand}
           className={twMerge(
-            'fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
+            'fixed bottom-9 left-[49px] z-50 flex h-[200px] w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
             showFullScreen && 'h-[calc(100%-63px)]',
             reduceTransparent && 'w-[calc(100%-48px)] rounded-none'
           )}
diff --git a/web/screens/Thread/ThreadCenterPanel/index.tsx b/web/screens/Thread/ThreadCenterPanel/index.tsx
index b12f859bd..5213a016a 100644
--- a/web/screens/Thread/ThreadCenterPanel/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/index.tsx
@@ -25,6 +25,7 @@ import ChatBody from '@/screens/Thread/ThreadCenterPanel/ChatBody'
 import ChatInput from './ChatInput'
 import RequestDownloadModel from './RequestDownloadModel'
 
+import { showSystemMonitorPanelAtom } from '@/helpers/atoms/App.atom'
 import { experimentalFeatureEnabledAtom } from '@/helpers/atoms/AppConfig.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
@@ -144,6 +145,8 @@ const ThreadCenterPanel = () => {
 
   const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
 
+  const showSystemMonitorPanel = useAtomValue(showSystemMonitorPanelAtom)
+
   return (
     <CenterPanelContainer>
       <div
@@ -188,7 +191,12 @@ const ThreadCenterPanel = () => {
             </div>
           </div>
         )}
-        <div className="flex h-full w-full flex-col justify-between">
+        <div
+          className={twMerge(
+            'flex h-full w-full flex-col justify-between',
+            showSystemMonitorPanel && 'h-[calc(100%-200px)]'
+          )}
+        >
           {activeThread ? (
             <div className="flex h-full w-full overflow-x-hidden">
               <ChatBody />