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,7 +318,6 @@ 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)
@@ -323,17 +325,25 @@ 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)}
                 />
+                {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,10 +401,10 @@ const Advanced = () => {
                       </div>
                     </div>
                   </div>
-                </div>
-              </div>
                 )}
               </div>
+            </div>
+          </div>
         )}
 
         {/* Vulkan for AMD GPU/ APU and Intel Arc GPU */}

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