From d61aa77b520a1663c5e9201097775674776683d9 Mon Sep 17 00:00:00 2001
From: Lily Delalande <119957291+lily-de@users.noreply.github.com>
Date: Tue, 1 Apr 2025 21:10:10 -0400
Subject: [PATCH] ui: settings v2 click anywhere to exit models bottom bar
 (#1997)

---
 .../models/bottom_bar/ModelsBottomBar.tsx     | 87 ++++++++++++-------
 1 file changed, 55 insertions(+), 32 deletions(-)

diff --git a/ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx b/ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx
index 3391ff7d..4e9c7941 100644
--- a/ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx
+++ b/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,42 +29,64 @@ 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
-        className="flex items-center cursor-pointer"
-        onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
-      >
-        {model}
-        {isModelMenuOpen ? (
-          <ChevronDown className="w-4 h-4 ml-1" />
-        ) : (
-          <ChevronUp className="w-4 h-4 ml-1" />
+      <div ref={menuRef} className="relative">
+        <div
+          className="flex items-center cursor-pointer"
+          onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
+        >
+          {model}
+          {isModelMenuOpen ? (
+            <ChevronDown className="w-4 h-4 ml-1" />
+          ) : (
+            <ChevronUp className="w-4 h-4 ml-1" />
+          )}
+        </div>
+
+        {/* Dropdown Menu */}
+        {isModelMenuOpen && (
+          <div className="absolute bottom-[24px] right-0 w-[300px] bg-bgApp rounded-lg border border-borderSubtle">
+            <div className="">
+              <div className="text-sm text-textProminent mt-3 ml-2">Current:</div>
+              <div className="flex items-center justify-between text-sm ml-2">
+                {model} -- {provider}
+              </div>
+              <div
+                className="flex items-center justify-between text-textStandard p-2 cursor-pointer hover:bg-bgStandard
+                    border-t border-borderSubtle mt-2"
+                onClick={() => {
+                  setIsModelMenuOpen(false);
+                  setIsAddModelModalOpen(true);
+                }}
+              >
+                <span className="text-sm">Change Model</span>
+                <Sliders className="w-5 h-5 ml-2 rotate-90" />
+              </div>
+            </div>
+          </div>
         )}
       </div>
 
-      {/* Dropdown Menu */}
-      {isModelMenuOpen && (
-        <div className="absolute bottom-[24px] right-0 w-[300px] bg-bgApp rounded-lg border border-borderSubtle">
-          <div className="">
-            <div className="text-sm text-textProminent mt-3 ml-2">Current:</div>
-            <div className="flex items-center justify-between text-sm ml-2">
-              {model} -- {provider}
-            </div>
-            <div
-              className="flex items-center justify-between text-textStandard p-2 cursor-pointer hover:bg-bgStandard
-                  border-t border-borderSubtle mt-2"
-              onClick={() => {
-                setIsModelMenuOpen(false);
-                setIsAddModelModalOpen(true);
-              }}
-            >
-              <span className="text-sm">Change Model</span>
-              <Sliders className="w-5 h-5 ml-2 rotate-90" />
-            </div>
-          </div>
-        </div>
-      )}
       {isAddModelModalOpen ? (
         <AddModelModal setView={setView} onClose={() => setIsAddModelModalOpen(false)} />
       ) : null}