Skip to content

Commit

Permalink
feat: improved providers list style
Browse files Browse the repository at this point in the history 
made the list 2 columns wide and separate out the experimental providers
  • Loading branch information
@dustinwloring1988
dustinwloring1988 committed Dec 17, 2024
1 parent fce8999 commit ba4e788
Showing 1 changed file with 93 additions and 54 deletions.
147 changes: 93 additions & 54 deletions app/components/settings/providers/ProvidersTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<IProviderConfig[]>([]);
const [advancedProviders, setAdvancedProviders] = useState<IProviderConfig[]>([]);
const [regularProviders, setRegularProviders] = useState<IProviderConfig[]>([]);

// Load base URLs from cookies
const [searchTerm, setSearchTerm] = useState('');

useEffect(() => {
Expand All @@ -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 }) => (
<div 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 });
}
}}
/>
</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
type="text"
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 (
<div className="p-4">
<div className="flex mb-4">
Expand All @@ -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"
/>
</div>
{filteredProviders.map((provider) => (
<div
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 "
>
<div className="flex items-center justify-between mb-2">
<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 });
}
}}
/>
{/* Regular Providers Grid */}
<div className="grid grid-cols-2 gap-4 mb-8">
{regularProviders.map((provider) => (
<ProviderCard key={provider.name} provider={provider} />
))}
</div>

{/* Advanced Providers Section */}
{advancedProviders.length > 0 && (
<div className="mb-4 border-t border-bolt-elements-borderColor pt-4">
<h3 className="text-bolt-elements-textSecondary text-lg font-medium mb-2">Experimental Providers</h3>
<p className="text-bolt-elements-textSecondary mb-6">
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.
</p>
<div className="grid grid-cols-2 gap-4">
{advancedProviders.map((provider) => (
<ProviderCard key={provider.name} provider={provider} />
))}
</div>
{/* Base URL input for configurable providers */}
{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
type="text"
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>
))}
)}
</div>
);
}

0 comments on commit ba4e788

Please sign in to comment.