mirror of
https://github.com/coleam00/bolt.new-any-llm
synced 2024-12-28 06:42:56 +00:00
Update ProvidersTab.tsx
This commit is contained in:
Dustin Loring
parent
db769e0c90
commit
a7551ecfcc
@ -6,17 +6,14 @@ import type { IProviderConfig } from '~/types/model';
|
|||||||
import { logStore } from '~/lib/stores/logs';
|
import { logStore } from '~/lib/stores/logs';
|
||||||
|
|
||||||
// Import a default fallback icon
|
// Import a default fallback icon
|
||||||
import DefaultIcon from '/icons/Default.svg';
|
import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary
|
||||||
const ADVANCED_PROVIDERS = ['Ollama', 'OpenAILike', 'LMStudio'];
|
|
||||||
import { providerBaseUrlEnvKeys } from '~/utils/constants';
|
import { providerBaseUrlEnvKeys } from '~/utils/constants';
|
||||||
|
|
||||||
|
|
||||||
export default function ProvidersTab() {
|
export default function ProvidersTab() {
|
||||||
const { providers, updateProviderSettings, isLocalModel } = useSettings();
|
const { providers, updateProviderSettings, isLocalModel } = useSettings();
|
||||||
const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
|
const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
|
||||||
const [advancedProviders, setAdvancedProviders] = useState<IProviderConfig[]>([]);
|
|
||||||
const [regularProviders, setRegularProviders] = useState<IProviderConfig[]>([]);
|
|
||||||
|
|
||||||
|
// Load base URLs from cookies
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -35,76 +32,88 @@ export default function ProvidersTab() {
|
|||||||
newFilteredProviders = newFilteredProviders.filter((provider) => !LOCAL_PROVIDERS.includes(provider.name));
|
newFilteredProviders = newFilteredProviders.filter((provider) => !LOCAL_PROVIDERS.includes(provider.name));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Split providers into regular and advanced
|
newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
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
|
// Split providers into regular and URL-configurable
|
||||||
const advancedOrder = ['Ollama', 'LMStudio', 'OpenAILike'];
|
const regular = newFilteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
|
||||||
advanced.sort((a, b) => {
|
const urlConfigurable = newFilteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
|
||||||
return advancedOrder.indexOf(a.name) - advancedOrder.indexOf(b.name);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sort regular providers alphabetically
|
setFilteredProviders([...regular, ...urlConfigurable]);
|
||||||
regular.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
|
|
||||||
setRegularProviders(regular);
|
|
||||||
setAdvancedProviders(advanced);
|
|
||||||
setFilteredProviders(newFilteredProviders);
|
|
||||||
}, [providers, searchTerm, isLocalModel]);
|
}, [providers, searchTerm, isLocalModel]);
|
||||||
|
|
||||||
const ProviderCard = ({ provider }: { provider: IProviderConfig }) => (
|
const renderProviderCard = (provider: IProviderConfig) => {
|
||||||
<div className="flex flex-col provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor">
|
const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
|
||||||
<div className="flex items-center justify-between mb-2">
|
const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
|
||||||
<div className="flex items-center gap-2">
|
const isUrlConfigurable = URL_CONFIGURABLE_PROVIDERS.includes(provider.name);
|
||||||
<img
|
|
||||||
src={`/icons/${provider.name}.svg`}
|
return (
|
||||||
onError={(e) => {
|
<div
|
||||||
e.currentTarget.src = DefaultIcon;
|
key={provider.name}
|
||||||
|
className="flex flex-col provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
src={`/icons/${provider.name}.svg`}
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = DefaultIcon;
|
||||||
|
}}
|
||||||
|
alt={`${provider.name} icon`}
|
||||||
|
className="w-6 h-6 dark:invert"
|
||||||
|
/>
|
||||||
|
<span className="text-bolt-elements-textPrimary">{provider.name}</span>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
className="ml-auto"
|
||||||
|
checked={provider.settings.enabled}
|
||||||
|
onCheckedChange={(enabled) => {
|
||||||
|
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"
|
|
||||||
/>
|
/>
|
||||||
<span className="text-bolt-elements-textPrimary">{provider.name}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<Switch
|
{isUrlConfigurable && provider.settings.enabled && (
|
||||||
className="ml-auto"
|
<div className="mt-2">
|
||||||
checked={provider.settings.enabled}
|
{envBaseUrl && (
|
||||||
onCheckedChange={(enabled) => {
|
<label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
|
||||||
updateProviderSettings(provider.name, { ...provider.settings, enabled });
|
Set On (.env) : {envBaseUrl}
|
||||||
if (enabled) {
|
</label>
|
||||||
logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
|
)}
|
||||||
} else {
|
<label className="block text-sm text-bolt-elements-textSecondary mb-2">
|
||||||
logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
|
{envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
|
||||||
}
|
</label>
|
||||||
}}
|
<input
|
||||||
/>
|
type="text"
|
||||||
|
value={provider.settings.baseUrl || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
|
);
|
||||||
<div className="mt-2">
|
};
|
||||||
<label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
|
|
||||||
<input
|
const regularProviders = filteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
|
||||||
type="text"
|
const urlConfigurableProviders = filteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
|
||||||
value={provider.settings.baseUrl || ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
@ -118,77 +127,20 @@ export default function ProvidersTab() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{filteredProviders.map((provider) => {
|
{/* Regular Providers Grid */}
|
||||||
const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
||||||
const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
|
{regularProviders.map(renderProviderCard)}
|
||||||
|
</div>
|
||||||
|
|
||||||
return (
|
{/* URL Configurable Providers Section */}
|
||||||
<div
|
{urlConfigurableProviders.length > 0 && (
|
||||||
key={provider.name}
|
<div className="mt-8">
|
||||||
className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
|
<h3 className="text-lg font-semibold mb-4 text-bolt-elements-textPrimary">Providers with Custom Base URL</h3>
|
||||||
>
|
<div className="space-y-4">
|
||||||
<div className="flex items-center justify-between mb-2">
|
{urlConfigurableProviders.map(renderProviderCard)}
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<img
|
|
||||||
src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
|
|
||||||
onError={(e) => {
|
|
||||||
// Fallback to default icon on error
|
|
||||||
e.currentTarget.src = DefaultIcon;
|
|
||||||
}}
|
|
||||||
alt={`${provider.name} icon`}
|
|
||||||
className="w-6 h-6 dark:invert"
|
|
||||||
/>
|
|
||||||
<span className="text-bolt-elements-textPrimary">{provider.name}</span>
|
|
||||||
</div>
|
|
||||||
<Switch
|
|
||||||
className="ml-auto"
|
|
||||||
checked={provider.settings.enabled}
|
|
||||||
onCheckedChange={(enabled) => {
|
|
||||||
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 });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* Base URL input for configurable providers */}
|
|
||||||
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
|
|
||||||
<div className="mt-2">
|
|
||||||
{envBaseUrl && (
|
|
||||||
<label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
|
|
||||||
Set On (.env) : {envBaseUrl}
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
<label className="block text-sm text-bolt-elements-textSecondary mb-2">
|
|
||||||
{envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={provider.settings.baseUrl || ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
})}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user