ui: settings v2 click anywhere to exit models bottom bar (#1997)

ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown, ChevronUp } from '../../../icons';
 import { Sliders } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useConfig } from '../../../ConfigContext';
 import { getCurrentModelAndProviderForDisplay } from '../index';
 import { AddModelModal } from '../subcomponents/AddModelModal';
@@ -16,6 +16,7 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
   const [provider, setProvider] = useState<string | null>(null);
   const [model, setModel] = useState<string>('');
   const [isAddModelModalOpen, setIsAddModelModalOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     (async () => {
@@ -28,8 +29,28 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
     })();
   }, [read, getProviders]);
 
+  // Add click outside handler
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsModelMenuOpen(false);
+      }
+    }
+
+    // Add the event listener when the menu is open
+    if (isModelMenuOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    // Clean up the event listener
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isModelMenuOpen]);
+
   return (
     <div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
+      <div ref={menuRef} className="relative">
         <div
           className="flex items-center cursor-pointer"
           onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
@@ -64,6 +85,8 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
             </div>
           </div>
         )}
+      </div>
+
       {isAddModelModalOpen ? (
         <AddModelModal setView={setView} onClose={() => setIsAddModelModalOpen(false)} />
       ) : null}