From 0c78aadf1e2cacc08cc2aa8d5fcf0188782550f2 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 23 Oct 2024 17:52:36 +0700
Subject: [PATCH 1/3] fix: hidden box dropdown hardware if no list (#3872)

---
 web/screens/Settings/Advanced/index.tsx | 42 ++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 5b78194ab..66cf9dc24 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -315,25 +315,25 @@ const Advanced = () => {
               </div>
             </div>
 
-            {gpuList.length > 0 && (
-              <div className="mt-2 flex w-full flex-col rounded-lg px-2 py-4">
-                <label className="mb-2 mr-2 inline-block font-medium">
-                  Choose device(s)
-                </label>
-                <div className="relative w-full md:w-1/2" ref={setToggle}>
-                  <Input
-                    value={selectedGpu.join() || ''}
-                    className="w-full cursor-pointer"
-                    readOnly
-                    placeholder=""
-                    suffixIcon={
-                      <ChevronDownIcon
-                        size={14}
-                        className={twMerge(open && 'rotate-180')}
-                      />
-                    }
-                    onClick={() => setOpen(!open)}
-                  />
+            <div className="mt-2 flex w-full flex-col rounded-lg px-2 py-4">
+              <label className="mb-2 mr-2 inline-block font-medium">
+                Choose device(s)
+              </label>
+              <div className="relative w-full md:w-1/2" ref={setToggle}>
+                <Input
+                  value={selectedGpu.join() || ''}
+                  className="w-full cursor-pointer"
+                  readOnly
+                  placeholder=""
+                  suffixIcon={
+                    <ChevronDownIcon
+                      size={14}
+                      className={twMerge(open && 'rotate-180')}
+                    />
+                  }
+                  onClick={() => setOpen(!open)}
+                />
+                {gpuList.length > 0 && (
                   <div
                     className={twMerge(
                       'absolute right-0 top-0 z-20 mt-10 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
@@ -391,9 +391,9 @@ const Advanced = () => {
                       </div>
                     </div>
                   </div>
-                </div>
+                )}
               </div>
-            )}
+            </div>
           </div>
         )}
 

From 037357e04c9a4c218f5f12e08fff3bb2f0575242 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 24 Oct 2024 09:05:44 +0700
Subject: [PATCH 2/3] fix: placeholder no hardware detect (#3873)

---
 web/screens/Settings/Advanced/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 66cf9dc24..475cc4d58 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -211,6 +211,9 @@ const Advanced = () => {
     saveSettings({ gpusInUse: updatedGpusInUse })
   }
 
+  const gpuSelectionPlaceHolder =
+    gpuList.length > 0 ? 'Select GPU' : "You don't have any compatible GPU"
+
   /**
    * Handle click outside
    */
@@ -322,13 +325,20 @@ const Advanced = () => {
               <div className="relative w-full md:w-1/2" ref={setToggle}>
                 <Input
                   value={selectedGpu.join() || ''}
-                  className="w-full cursor-pointer"
+                  className={twMerge(
+                    'w-full cursor-pointer',
+                    gpuList.length === 0 && 'pointer-events-none'
+                  )}
                   readOnly
-                  placeholder=""
+                  disabled={gpuList.length === 0}
+                  placeholder={gpuSelectionPlaceHolder}
                   suffixIcon={
                     <ChevronDownIcon
                       size={14}
-                      className={twMerge(open && 'rotate-180')}
+                      className={twMerge(
+                        gpuList.length === 0 && 'pointer-events-none',
+                        open && 'rotate-180'
+                      )}
                     />
                   }
                   onClick={() => setOpen(!open)}

From c47d0499205291043f322980bc33b1d8abe171e9 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 24 Oct 2024 14:26:17 +0700
Subject: [PATCH 3/3] fix: placeholder no hardware detect (#3876)

---
 .../ThreadCenterPanel/ChatInput/RichTextEditor.tsx    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
index 8f296368f..6e6beda07 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
@@ -301,6 +301,11 @@ const RichTextEditor = ({
       textareaRef.current.style.overflow =
         textareaRef.current.clientHeight >= 390 ? 'auto' : 'hidden'
     }
+
+    if (currentPrompt.length === 0) {
+      resetEditor()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [textareaRef.current?.clientHeight, currentPrompt, activeSettingInputBox])
 
   const onStopInferenceClick = async () => {
@@ -317,13 +322,15 @@ const RichTextEditor = ({
 
     // Adjust the height of the textarea to its initial state
     if (textareaRef.current) {
-      textareaRef.current.style.height = '40px' // Reset to the initial height or your desired height
+      textareaRef.current.style.height = activeSettingInputBox
+        ? '100px'
+        : '44px'
       textareaRef.current.style.overflow = 'hidden' // Reset overflow style
     }
 
     // Ensure the editor re-renders decorations
     editor.onChange()
-  }, [editor])
+  }, [activeSettingInputBox, editor])
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent) => {