Added a tabbed setting modal

app/components/chat/ModelSelector.tsx

@@ -1,5 +1,7 @@
 import type { ProviderInfo } from '~/types/model';
 import type { ModelInfo } from '~/utils/types';
+import { useEffect, useState } from 'react';
+import Cookies from 'js-cookie';
 
 interface ModelSelectorProps {
   model?: string;
@@ -19,12 +21,74 @@ export const ModelSelector = ({
   modelList,
   providerList,
 }: ModelSelectorProps) => {
+  // Load enabled providers from cookies
+  const [enabledProviders, setEnabledProviders] = useState(() => {
+    const savedProviders = Cookies.get('providers');
+    if (savedProviders) {
+      try {
+        const parsedProviders = JSON.parse(savedProviders);
+        return providerList.filter(p => parsedProviders[p.name]);
+      } catch (error) {
+        console.error('Failed to parse providers from cookies:', error);
+        return providerList;
+      }
+    }
+    return providerList;
+  });
+
+  // Update enabled providers when cookies change
+  useEffect(() => {
+    // Function to update providers from cookies
+    const updateProvidersFromCookies = () => {
+      const savedProviders = Cookies.get('providers');
+      if (savedProviders) {
+        try {
+          const parsedProviders = JSON.parse(savedProviders);
+          const newEnabledProviders = providerList.filter(p => parsedProviders[p.name]);
+          setEnabledProviders(newEnabledProviders);
+
+          // If current provider is disabled, switch to first enabled provider
+          if (provider && !parsedProviders[provider.name] && newEnabledProviders.length > 0) {
+            const firstEnabledProvider = newEnabledProviders[0];
+            setProvider?.(firstEnabledProvider);
+            
+            // Also update the model to the first available one for the new provider
+            const firstModel = modelList.find(m => m.provider === firstEnabledProvider.name);
+            if (firstModel) {
+              setModel?.(firstModel.name);
+            }
+          }
+        } catch (error) {
+          console.error('Failed to parse providers from cookies:', error);
+        }
+      }
+    };
+
+    // Initial update
+    updateProvidersFromCookies();
+
+    // Set up an interval to check for cookie changes
+    const interval = setInterval(updateProvidersFromCookies, 1000);
+
+    return () => clearInterval(interval);
+  }, [providerList, provider, setProvider, modelList, setModel]);
+
+  if (enabledProviders.length === 0) {
+    return (
+      <div className="mb-2 p-4 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary">
+        <p className="text-center">
+          No providers are currently enabled. Please enable at least one provider in the settings to start using the chat.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="mb-2 flex gap-2 flex-col sm:flex-row">
       <select
         value={provider?.name ?? ''}
         onChange={(e) => {
-          const newProvider = providerList.find((p: ProviderInfo) => p.name === e.target.value);
+          const newProvider = enabledProviders.find((p: ProviderInfo) => p.name === e.target.value);
 
           if (newProvider && setProvider) {
             setProvider(newProvider);
@@ -38,7 +102,7 @@ export const ModelSelector = ({
         }}
         className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
-        {providerList.map((provider: ProviderInfo) => (
+        {enabledProviders.map((provider: ProviderInfo) => (
           <option key={provider.name} value={provider.name}>
             {provider.name}
           </option>