Merge branch 'main' into feat/improved-providers-list

app/components/settings/providers/ProvidersTab.tsx

@@ -7,9 +7,9 @@ import { logStore } from '~/lib/stores/logs';
 
 // Import a default fallback icon
 import DefaultIcon from '/icons/Default.svg';
-
-// List of advanced providers with correct casing
 const ADVANCED_PROVIDERS = ['Ollama', 'OpenAILike', 'LMStudio'];
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+
 
 export default function ProvidersTab() {
   const { providers, updateProviderSettings, isLocalModel } = useSettings();
@@ -118,28 +118,77 @@ export default function ProvidersTab() {
         />
       </div>
 
-      {/* Regular Providers Grid */}
-      <div className="grid grid-cols-2 gap-4 mb-8">
-        {regularProviders.map((provider) => (
-          <ProviderCard key={provider.name} provider={provider} />
-        ))}
-      </div>
+      {filteredProviders.map((provider) => {
+        const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
+        const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
 
-      {/* 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} />
-            ))}
+        return (
+          <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 });
+                  }
+                }}
+              />
+            </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>
   );
 }