From ba4e78809c0e45ae132b5d3e7cd5e3d58bc90d7e Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Tue, 17 Dec 2024 17:40:16 -0500 Subject: [PATCH] feat: improved providers list style made the list 2 columns wide and separate out the experimental providers --- .../settings/providers/ProvidersTab.tsx | 147 +++++++++++------- 1 file changed, 93 insertions(+), 54 deletions(-) diff --git a/app/components/settings/providers/ProvidersTab.tsx b/app/components/settings/providers/ProvidersTab.tsx index 281b4c80d..464a54db6 100644 --- a/app/components/settings/providers/ProvidersTab.tsx +++ b/app/components/settings/providers/ProvidersTab.tsx @@ -6,13 +6,17 @@ import type { IProviderConfig } from '~/types/model'; import { logStore } from '~/lib/stores/logs'; // Import a default fallback icon -import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary +import DefaultIcon from '/icons/Default.svg'; + +// List of advanced providers with correct casing +const ADVANCED_PROVIDERS = ['Ollama', 'OpenAILike', 'LMStudio']; export default function ProvidersTab() { const { providers, updateProviderSettings, isLocalModel } = useSettings(); const [filteredProviders, setFilteredProviders] = useState([]); + const [advancedProviders, setAdvancedProviders] = useState([]); + const [regularProviders, setRegularProviders] = useState([]); - // Load base URLs from cookies const [searchTerm, setSearchTerm] = useState(''); useEffect(() => { @@ -31,11 +35,77 @@ export default function ProvidersTab() { newFilteredProviders = newFilteredProviders.filter((provider) => !LOCAL_PROVIDERS.includes(provider.name)); } - newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name)); + // Split providers into regular and advanced + const regular = newFilteredProviders.filter( + (provider) => !ADVANCED_PROVIDERS.includes(provider.name) + ); + const advanced = newFilteredProviders.filter( + (provider) => ADVANCED_PROVIDERS.includes(provider.name) + ); + + // Sort advanced providers in specific order - OpenAILike at the end + const advancedOrder = ['Ollama', 'LMStudio', 'OpenAILike']; + advanced.sort((a, b) => { + return advancedOrder.indexOf(a.name) - advancedOrder.indexOf(b.name); + }); + + // Sort regular providers alphabetically + regular.sort((a, b) => a.name.localeCompare(b.name)); + setRegularProviders(regular); + setAdvancedProviders(advanced); setFilteredProviders(newFilteredProviders); }, [providers, searchTerm, isLocalModel]); + const ProviderCard = ({ provider }: { provider: IProviderConfig }) => ( +
+
+
+ { + e.currentTarget.src = DefaultIcon; + }} + alt={`${provider.name} icon`} + className="w-6 h-6 dark:invert" + /> + {provider.name} +
+ { + updateProviderSettings(provider.name, { ...provider.settings, enabled }); + if (enabled) { + logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name }); + } else { + logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name }); + } + }} + /> +
+ {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && ( +
+ + { + const newBaseUrl = e.target.value; + updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl }); + logStore.logProvider(`Base URL updated for ${provider.name}`, { + provider: provider.name, + baseUrl: newBaseUrl, + }); + }} + placeholder={`Enter ${provider.name} base URL`} + className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" + /> +
+ )} +
+ ); + return (
@@ -47,60 +117,29 @@ export default function ProvidersTab() { className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" />
- {filteredProviders.map((provider) => ( -
-
-
- { - // Fallback to default icon on error - e.currentTarget.src = DefaultIcon; - }} - alt={`${provider.name} icon`} - className="w-6 h-6 dark:invert" - /> - {provider.name} -
- { - updateProviderSettings(provider.name, { ...provider.settings, enabled }); - if (enabled) { - logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name }); - } else { - logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name }); - } - }} - /> + {/* Regular Providers Grid */} +
+ {regularProviders.map((provider) => ( + + ))} +
+ + {/* Advanced Providers Section */} + {advancedProviders.length > 0 && ( +
+

Experimental Providers

+

+ These providers are experimental features that allow you to run AI models locally or connect to your own infrastructure. + They require additional setup but offer more flexibility for advanced users. +

+
+ {advancedProviders.map((provider) => ( + + ))}
- {/* Base URL input for configurable providers */} - {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && ( -
- - { - const newBaseUrl = e.target.value; - updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl }); - logStore.logProvider(`Base URL updated for ${provider.name}`, { - provider: provider.name, - baseUrl: newBaseUrl, - }); - }} - placeholder={`Enter ${provider.name} base URL`} - className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" - /> -
- )}
- ))} + )}
); }