Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lily-de merged 1 commit into from
Apr 2, 2025
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 55 additions & 32 deletions ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 () => {
Expand All @@ -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>
<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" />
{/* 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>
)}
)}
</div>

{isAddModelModalOpen ? (
<AddModelModal setView={setView} onClose={() => setIsAddModelModalOpen(false)} />
) : null}
Expand Down
Loading