Update ProvidersTab.tsx

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<IProviderConfig[]>([]);
-  const [advancedProviders, setAdvancedProviders] = useState<IProviderConfig[]>([]);
-  const [regularProviders, setRegularProviders] = useState<IProviderConfig[]>([]);
 
+  // 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 }) => (
-    <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;
+  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 (
+      <div
+        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>
-        <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 });
-            }
-          }}
-        />
+        {isUrlConfigurable && 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>
-      {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>
-  );
+    );
+  };
+
+  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">
@@ -118,77 +127,20 @@ export default function ProvidersTab() {
         />
       </div>
 
-      {filteredProviders.map((provider) => {
-        const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
-        const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;
-
-        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>
-            )}
+      {/* 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-4 text-bolt-elements-textPrimary">Providers with Custom Base URL</h3>
+          <div className="space-y-4">
+            {urlConfigurableProviders.map(renderProviderCard)}
           </div>
-        );
-      })}
+        </div>
+      )}
     </div>
   );
-}
+}