UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-05 20:46:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: providers list is now 2 columns

Browse Source 
The providers list in the settings modal is now 2 columns allowing you to see more at once.
This commit is contained in:
Dustin Loring 2024-12-19 13:07:58 -05:00 committed by GitHub
commit 75ec49beb8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 95 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/components/settings/providers/ProvidersTab.tsx
View File

@ -34,35 +34,28 @@ export default function ProvidersTab() {
newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name)); newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
setFilteredProviders(newFilteredProviders); // 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));
setFilteredProviders([...regular, ...urlConfigurable]);
}, [providers, searchTerm, isLocalModel]); }, [providers, searchTerm, isLocalModel]);
return ( const renderProviderCard = (provider: IProviderConfig) => {
<div className="p-4">
<div className="flex mb-4">
<input
type="text"
placeholder="Search providers..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
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>
{filteredProviders.map((provider) => {
const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey; const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined; const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
const isUrlConfigurable = URL_CONFIGURABLE_PROVIDERS.includes(provider.name);
return ( return (
<div <div
key={provider.name} key={provider.name}
className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor " 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 justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<img <img
src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon src={`/icons/${provider.name}.svg`}
onError={(e) => { onError={(e) => {
// Fallback to default icon on error
e.currentTarget.src = DefaultIcon; e.currentTarget.src = DefaultIcon;
}} }}
alt={`${provider.name} icon`} alt={`${provider.name} icon`}
@ -84,8 +77,7 @@ export default function ProvidersTab() {
}} }}
/> />
</div> </div>
{/* Base URL input for configurable providers */} {isUrlConfigurable && provider.settings.enabled && (
{URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
<div className="mt-2"> <div className="mt-2">
{envBaseUrl && ( {envBaseUrl && (
<label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2"> <label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
@ -118,7 +110,40 @@ export default function ProvidersTab() {
)} )}
</div> </div>
); );
})} };
const regularProviders = filteredProviders.filter(p => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
const urlConfigurableProviders = filteredProviders.filter(p => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
return (
<div className="p-4">
<div className="flex mb-4">
<input
type="text"
placeholder="Search providers..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
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>
{/* Regular Providers Grid */}
<div className="grid grid-cols-2 gap-4 mb-8">
{regularProviders.map(renderProviderCard)}
</div>
{/* URL Configurable Providers Section */}
{urlConfigurableProviders.length > 0 && (
<div className="mt-8">
<h3 className="text-lg font-semibold mb-2 text-bolt-elements-textPrimary">Experimental Providers</h3>
<p className="text-sm text-bolt-elements-textSecondary mb-4">
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.
</p>
<div className="space-y-4">
{urlConfigurableProviders.map(renderProviderCard)}
</div>
</div>
)}
</div> </div>
); );
} }