Added a tabbed setting modal

app/components/chat/BaseChat.tsx

@@ -87,13 +87,58 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
-    const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>(() => {
+      const savedKeys = Cookies.get('apiKeys');
+      if (savedKeys) {
+        try {
+          return JSON.parse(savedKeys);
+        } catch (error) {
+          console.error('Failed to parse API keys from cookies:', error);
+          return {};
+        }
+      }
+      return {};
+    });
     const [modelList, setModelList] = useState(MODEL_LIST);
     const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false);
     const [isListening, setIsListening] = useState(false);
     const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
     const [transcript, setTranscript] = useState('');
 
+    // Load enabled providers from cookies
+    const [enabledProviders, setEnabledProviders] = useState(() => {
+      const savedProviders = Cookies.get('providers');
+      if (savedProviders) {
+        try {
+          const parsedProviders = JSON.parse(savedProviders);
+          return PROVIDER_LIST.filter(p => parsedProviders[p.name]);
+        } catch (error) {
+          console.error('Failed to parse providers from cookies:', error);
+          return PROVIDER_LIST;
+        }
+      }
+      return PROVIDER_LIST;
+    });
+
+    // Update enabled providers when cookies change
+    useEffect(() => {
+      const updateProvidersFromCookies = () => {
+        const savedProviders = Cookies.get('providers');
+        if (savedProviders) {
+          try {
+            const parsedProviders = JSON.parse(savedProviders);
+            setEnabledProviders(PROVIDER_LIST.filter(p => parsedProviders[p.name]));
+          } catch (error) {
+            console.error('Failed to parse providers from cookies:', error);
+          }
+        }
+      };
+
+      updateProvidersFromCookies();
+      const interval = setInterval(updateProvidersFromCookies, 1000);
+      return () => clearInterval(interval);
+    }, [PROVIDER_LIST]);
+
     console.log(transcript);
     useEffect(() => {
       // Load API keys from cookies on component mount
@@ -359,11 +404,15 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       providerList={PROVIDER_LIST}
                       apiKeys={apiKeys}
                     />
-                    {provider && (
+                    {enabledProviders.length > 0 && provider && (
                       <APIKeyManager
                         provider={provider}
                         apiKey={apiKeys[provider.name] || ''}
-                        setApiKey={(key) => updateApiKey(provider.name, key)}
+                        setApiKey={(key) => {
+                          const newApiKeys = { ...apiKeys, [provider.name]: key };
+                          setApiKeys(newApiKeys);
+                          Cookies.set('apiKeys', JSON.stringify(newApiKeys));
+                        }}
                       />
                     )}
                   </div>

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>