aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2026-01-02 14:04:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lily Delalande
2025-04-01 21:10:10 -04:00
committed by GitHub
parent a2169932dc
commit d61aa77b52
1 changed files with 55 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx
View File

@@ -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}