Merge pull request #3880 from janhq/main

Sync release 0.5.7 with dev

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
    */
@@ -315,25 +318,32 @@ 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={twMerge(
+                    'w-full cursor-pointer',
+                    gpuList.length === 0 && 'pointer-events-none'
+                  )}
+                  readOnly
+                  disabled={gpuList.length === 0}
+                  placeholder={gpuSelectionPlaceHolder}
+                  suffixIcon={
+                    <ChevronDownIcon
+                      size={14}
+                      className={twMerge(
+                        gpuList.length === 0 && 'pointer-events-none',
+                        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 +401,9 @@ const Advanced = () => {
                       </div>
                     </div>
                   </div>
-                </div>
+                )}
               </div>
-            )}
+            </div>
           </div>
         )}
 

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) => {