From ba4e78809c0e45ae132b5d3e7cd5e3d58bc90d7e Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Tue, 17 Dec 2024 17:40:16 -0500 Subject: [PATCH 1/3] 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" - /> -
- )}
- ))} + )}
); } From a7551ecfcca491600a720751b5af778bd1b77143 Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Thu, 19 Dec 2024 12:57:59 -0500 Subject: [PATCH 2/3] Update ProvidersTab.tsx --- .../settings/providers/ProvidersTab.tsx | 228 +++++++----------- 1 file changed, 90 insertions(+), 138 deletions(-) diff --git a/app/components/settings/providers/ProvidersTab.tsx b/app/components/settings/providers/ProvidersTab.tsx index d52d42b47..c9dc27cf2 100644 --- a/app/components/settings/providers/ProvidersTab.tsx +++ b/app/components/settings/providers/ProvidersTab.tsx @@ -6,17 +6,14 @@ import type { IProviderConfig } from '~/types/model'; import { logStore } from '~/lib/stores/logs'; // Import a default fallback icon -import DefaultIcon from '/icons/Default.svg'; -const ADVANCED_PROVIDERS = ['Ollama', 'OpenAILike', 'LMStudio']; +import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary import { providerBaseUrlEnvKeys } from '~/utils/constants'; - 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(() => { @@ -35,76 +32,88 @@ export default function ProvidersTab() { newFilteredProviders = newFilteredProviders.filter((provider) => !LOCAL_PROVIDERS.includes(provider.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); - }); + newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name)); - // Sort regular providers alphabetically - regular.sort((a, b) => a.name.localeCompare(b.name)); + // Split providers into regular and URL-configurable + const regular = newFilteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name)); + const urlConfigurable = newFilteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name)); - setRegularProviders(regular); - setAdvancedProviders(advanced); - setFilteredProviders(newFilteredProviders); + setFilteredProviders([...regular, ...urlConfigurable]); }, [providers, searchTerm, isLocalModel]); - const ProviderCard = ({ provider }: { provider: IProviderConfig }) => ( -
-
-
- { - e.currentTarget.src = DefaultIcon; + const renderProviderCard = (provider: IProviderConfig) => { + const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey; + const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined; + const isUrlConfigurable = URL_CONFIGURABLE_PROVIDERS.includes(provider.name); + + return ( +
+
+
+ { + 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 }); + } }} - 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 }); - } - }} - /> + {isUrlConfigurable && provider.settings.enabled && ( +
+ {envBaseUrl && ( + + )} + + { + let newBaseUrl: string | undefined = e.target.value; + + if (newBaseUrl && newBaseUrl.trim().length === 0) { + newBaseUrl = undefined; + } + + 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" + /> +
+ )}
- {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" - /> -
- )} -
- ); + ); + }; + + const regularProviders = filteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name)); + const urlConfigurableProviders = filteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name)); return (
@@ -118,77 +127,20 @@ export default function ProvidersTab() { />
- {filteredProviders.map((provider) => { - const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey; - const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined; - - return ( -
-
-
- { - // 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 }); - } - }} - /> -
- {/* Base URL input for configurable providers */} - {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && ( -
- {envBaseUrl && ( - - )} - - { - let newBaseUrl: string | undefined = e.target.value; - - if (newBaseUrl && newBaseUrl.trim().length === 0) { - newBaseUrl = undefined; - } - - 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" - /> -
- )} + {/* Regular Providers Grid */} +
+ {regularProviders.map(renderProviderCard)} +
+ + {/* URL Configurable Providers Section */} + {urlConfigurableProviders.length > 0 && ( +
+

Providers with Custom Base URL

+
+ {urlConfigurableProviders.map(renderProviderCard)}
- ); - })} +
+ )}
); -} +} \ No newline at end of file From bbd9a17d3b1bb4010b75d88162aa03eedb5646f5 Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Thu, 19 Dec 2024 13:04:26 -0500 Subject: [PATCH 3/3] Update ProvidersTab.tsx --- app/components/settings/providers/ProvidersTab.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/components/settings/providers/ProvidersTab.tsx b/app/components/settings/providers/ProvidersTab.tsx index c9dc27cf2..58c8dac6b 100644 --- a/app/components/settings/providers/ProvidersTab.tsx +++ b/app/components/settings/providers/ProvidersTab.tsx @@ -135,7 +135,10 @@ export default function ProvidersTab() { {/* URL Configurable Providers Section */} {urlConfigurableProviders.length > 0 && (
-

Providers with Custom Base URL

+

Experimental Providers

+

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

{urlConfigurableProviders.map(renderProviderCard)}