remaining changes

app/components/chat/BaseChat.tsx

@@ -45,6 +45,7 @@ interface BaseChatProps {
   setModel?: (model: string) => void;
   provider?: ProviderInfo;
   setProvider?: (provider: ProviderInfo) => void;
+  providerList?: ProviderInfo[];
   handleStop?: () => void;
   sendMessage?: (event: React.UIEvent, messageInput?: string) => void;
   handleInputChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -70,6 +71,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       setModel,
       provider,
       setProvider,
+      providerList,
       input = '',
       enhancingPrompt,
       handleInputChange,
@@ -108,45 +110,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     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
@@ -377,10 +341,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       modelList={modelList}
                       provider={provider}
                       setProvider={setProvider}
-                      providerList={PROVIDER_LIST}
+                      providerList={providerList || PROVIDER_LIST}
                       apiKeys={apiKeys}
                     />
-                    {enabledProviders.length > 0 && provider && (
+                    {(providerList || []).length > 0 && provider && (
                       <APIKeyManager
                         provider={provider}
                         apiKey={apiKeys[provider.name] || ''}
@@ -476,7 +440,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       <SendButton
                         show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
                         isStreaming={isStreaming}
-                        disabled={enabledProviders.length === 0}
+                        disabled={!providerList || providerList.length === 0}
                         onClick={(event) => {
                           if (isStreaming) {
                             handleStop?.();
@@ -536,7 +500,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             !isModelSettingsCollapsed,
                         })}
                         onClick={() => setIsModelSettingsCollapsed(!isModelSettingsCollapsed)}
-                        disabled={enabledProviders.length === 0}
+                        disabled={!providerList || providerList.length === 0}
                       >
                         <div className={`i-ph:caret-${isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
                         {isModelSettingsCollapsed ? <span className="text-xs">{model}</span> : <span />}

app/components/chat/Chat.client.tsx

@@ -19,6 +19,7 @@ import { BaseChat } from './BaseChat';
 import Cookies from 'js-cookie';
 import type { ProviderInfo } from '~/utils/types';
 import { debounce } from '~/utils/debounce';
+import { useSettings } from '~/lib/hooks/useSettings';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -91,6 +92,7 @@ export const ChatImpl = memo(
     const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
     const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
     const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+    const { activeProviders } = useSettings();
 
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -316,6 +318,7 @@ export const ChatImpl = memo(
         setModel={handleModelChange}
         provider={provider}
         setProvider={handleProviderChange}
+        providerList={activeProviders}
         messageRef={messageRef}
         scrollRef={scrollRef}
         handleInputChange={(e) => {

app/components/settings/SettingsWindow.tsx

@@ -1,17 +1,16 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { motion } from 'framer-motion';
-import { useState } from 'react';
+import { useState, type ReactElement } from 'react';
 import { classNames } from '~/utils/classNames';
 import { DialogTitle, dialogVariants, dialogBackdropVariants } from '~/components/ui/Dialog';
 import { IconButton } from '~/components/ui/IconButton';
-import { providersList } from '~/lib/stores/settings';
-import { db, getAll, deleteById } from '~/lib/persistence';
-import { toast } from 'react-toastify';
-import { useNavigate } from '@remix-run/react';
-import commit from '~/commit.json';
-import Cookies from 'js-cookie';
 import styles from './Settings.module.scss';
-import { Switch } from '~/components/ui/Switch';
+import ChatHistoryTab from './chat-history/ChatHistoryTab';
+import ProvidersTab from './providers/ProvidersTab';
+import { useSettings } from '~/lib/hooks/useSettings';
+import FeaturesTab from './features/FeaturesTab';
+import DebugTab from './debug/DebugTab';
+import ConnectionsTab from './connections/ConnectionsTab';
 
 interface SettingsProps {
   open: boolean;
@@ -21,206 +20,27 @@ interface SettingsProps {
 type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'connection';
 
 // Providers that support base URL configuration
-const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
-
 export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
-  const navigate = useNavigate();
+  const { debug } = useSettings();
   const [activeTab, setActiveTab] = useState<TabType>('chat-history');
-  const [isDebugEnabled, setIsDebugEnabled] = useState(() => {
-    const savedDebugState = Cookies.get('isDebugEnabled');
-    return savedDebugState === 'true';
-  });
-  const [searchTerm, setSearchTerm] = useState('');
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || '');
-  const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || '');
-  const [isLocalModelsEnabled, setIsLocalModelsEnabled] = useState(() => {
-    const savedLocalModelsState = Cookies.get('isLocalModelsEnabled');
-    return savedLocalModelsState === 'true';
-  });
 
-  // Load base URLs from cookies
-  const [baseUrls, setBaseUrls] = useState(() => {
-    const savedUrls = Cookies.get('providerBaseUrls');
-
-    if (savedUrls) {
-      try {
-        return JSON.parse(savedUrls);
-      } catch (error) {
-        console.error('Failed to parse base URLs from cookies:', error);
-        return {
-          Ollama: 'http://localhost:11434',
-          LMStudio: 'http://localhost:1234',
-          OpenAILike: '',
-        };
-      }
-    }
-
-    return {
-      Ollama: 'http://localhost:11434',
-      LMStudio: 'http://localhost:1234',
-      OpenAILike: '',
-    };
-  });
-
-  const handleBaseUrlChange = (provider: string, url: string) => {
-    setBaseUrls((prev: Record<string, string>) => {
-      const newUrls = { ...prev, [provider]: url };
-      Cookies.set('providerBaseUrls', JSON.stringify(newUrls));
-
-      return newUrls;
-    });
-  };
-
-  const tabs: { id: TabType; label: string; icon: string }[] = [
-    { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book' },
-    { id: 'providers', label: 'Providers', icon: 'i-ph:key' },
-    { id: 'features', label: 'Features', icon: 'i-ph:star' },
-    { id: 'connection', label: 'Connection', icon: 'i-ph:link' },
-    ...(isDebugEnabled ? [{ id: 'debug' as TabType, label: 'Debug Tab', icon: 'i-ph:bug' }] : []),
+  const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
+    { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book', component: <ChatHistoryTab /> },
+    { id: 'providers', label: 'Providers', icon: 'i-ph:key', component: <ProvidersTab /> },
+    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
+    { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
+    ...(debug
+      ? [
+          {
+            id: 'debug' as TabType,
+            label: 'Debug Tab',
+            icon: 'i-ph:bug',
+            component: <DebugTab />,
+          },
+        ]
+      : []),
   ];
 
-  // Load providers from cookies on mount
-  const [providers, setProviders] = useState(() => {
-    const savedProviders = Cookies.get('providers');
-
-    if (savedProviders) {
-      try {
-        const parsedProviders = JSON.parse(savedProviders);
-
-        // Merge saved enabled states with the base provider list
-        return providersList.map((provider) => ({
-          ...provider,
-          isEnabled: parsedProviders[provider.name] || false,
-        }));
-      } catch (error) {
-        console.error('Failed to parse providers from cookies:', error);
-      }
-    }
-
-    return providersList;
-  });
-
-  const handleToggleProvider = (providerName: string, enabled: boolean) => {
-    setProviders((prevProviders) => {
-      const newProviders = prevProviders.map((provider) =>
-        provider.name === providerName ? { ...provider, isEnabled: enabled } : provider,
-      );
-
-      // Save to cookies
-      const enabledStates = newProviders.reduce(
-        (acc, provider) => ({
-          ...acc,
-          [provider.name]: provider.isEnabled,
-        }),
-        {},
-      );
-      Cookies.set('providers', JSON.stringify(enabledStates));
-
-      return newProviders;
-    });
-  };
-
-  const filteredProviders = providers
-    .filter((provider) => {
-      const isLocalModelProvider = ['OpenAILike', 'LMStudio', 'Ollama'].includes(provider.name);
-      return isLocalModelsEnabled || !isLocalModelProvider;
-    })
-    .filter((provider) => provider.name.toLowerCase().includes(searchTerm.toLowerCase()))
-    .sort((a, b) => a.name.localeCompare(b.name));
-
-  const handleCopyToClipboard = () => {
-    const debugInfo = {
-      OS: navigator.platform,
-      Browser: navigator.userAgent,
-      ActiveFeatures: providers.filter((provider) => provider.isEnabled).map((provider) => provider.name),
-      BaseURLs: {
-        Ollama: process.env.REACT_APP_OLLAMA_URL,
-        OpenAI: process.env.REACT_APP_OPENAI_URL,
-        LMStudio: process.env.REACT_APP_LM_STUDIO_URL,
-      },
-      Version: versionHash,
-    };
-    navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
-      alert('Debug information copied to clipboard!');
-    });
-  };
-
-  const downloadAsJson = (data: any, filename: string) => {
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDeleteAllChats = async () => {
-    if (!db) {
-      toast.error('Database is not available');
-      return;
-    }
-
-    try {
-      setIsDeleting(true);
-
-      const allChats = await getAll(db);
-
-      // Delete all chats one by one
-      await Promise.all(allChats.map((chat) => deleteById(db!, chat.id)));
-
-      toast.success('All chats deleted successfully');
-      navigate('/', { replace: true });
-    } catch (error) {
-      toast.error('Failed to delete chats');
-      console.error(error);
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const handleExportAllChats = async () => {
-    if (!db) {
-      toast.error('Database is not available');
-      return;
-    }
-
-    try {
-      const allChats = await getAll(db);
-      const exportData = {
-        chats: allChats,
-        exportDate: new Date().toISOString(),
-      };
-
-      downloadAsJson(exportData, `all-chats-${new Date().toISOString()}.json`);
-      toast.success('Chats exported successfully');
-    } catch (error) {
-      toast.error('Failed to export chats');
-      console.error(error);
-    }
-  };
-
-  const versionHash = commit.commit; // Get the version hash from commit.json
-
-  const handleSaveConnection = () => {
-    Cookies.set('githubUsername', githubUsername);
-    Cookies.set('githubToken', githubToken);
-    toast.success('GitHub credentials saved successfully!');
-  };
-
-  const handleToggleDebug = (enabled: boolean) => {
-    setIsDebugEnabled(enabled);
-    Cookies.set('isDebugEnabled', String(enabled));
-  };
-
-  const handleToggleLocalModels = (enabled: boolean) => {
-    setIsLocalModelsEnabled(enabled);
-    Cookies.set('isLocalModelsEnabled', String(enabled));
-  };
-
   return (
     <RadixDialog.Root open={open}>
       <RadixDialog.Portal>
@@ -284,190 +104,7 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
               </div>
 
               <div className="flex-1 flex flex-col p-8 pt-10 bg-bolt-elements-background-depth-2">
-                <div className="flex-1 overflow-y-auto">
-                  {activeTab === 'chat-history' && (
-                    <div className="p-4">
-                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Chat History</h3>
-                      <button
-                        onClick={handleExportAllChats}
-                        className={classNames(
-                          'bg-bolt-elements-button-primary-background',
-                          'rounded-lg px-4 py-2 mb-4 transition-colors duration-200',
-                          'hover:bg-bolt-elements-button-primary-backgroundHover',
-                          'text-bolt-elements-button-primary-text',
-                        )}
-                      >
-                        Export All Chats
-                      </button>
-
-                      <div
-                        className={classNames(
-                          'text-bolt-elements-textPrimary rounded-lg py-4 mb-4',
-                          styles['settings-danger-area'],
-                        )}
-                      >
-                        <h4 className="font-semibold">Danger Area</h4>
-                        <p className="mb-2">This action cannot be undone!</p>
-                        <button
-                          onClick={handleDeleteAllChats}
-                          disabled={isDeleting}
-                          className={classNames(
-                            'bg-bolt-elements-button-danger-background',
-                            'rounded-lg px-4 py-2 transition-colors duration-200',
-                            isDeleting
-                              ? 'opacity-50 cursor-not-allowed'
-                              : 'hover:bg-bolt-elements-button-danger-backgroundHover',
-                            'text-bolt-elements-button-danger-text',
-                          )}
-                        >
-                          {isDeleting ? 'Deleting...' : 'Delete All Chats'}
-                        </button>
-                      </div>
-                    </div>
-                  )}
-                  {activeTab === 'providers' && (
-                    <div className="p-4">
-                      <div className="flex mb-4">
-                        <input
-                          type="text"
-                          placeholder="Search providers..."
-                          value={searchTerm}
-                          onChange={(e) => setSearchTerm(e.target.value)}
-                          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">
-                            <span className="text-bolt-elements-textPrimary">{provider.name}</span>
-                            <Switch
-                              className="ml-auto"
-                              checked={provider.isEnabled}
-                              onCheckedChange={(enabled) => handleToggleProvider(provider.name, enabled)}
-                            />
-                          </div>
-                          {/* Base URL input for configurable providers */}
-                          {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.isEnabled && (
-                            <div className="mt-2">
-                              <label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
-                              <input
-                                type="text"
-                                value={baseUrls[provider.name]}
-                                onChange={(e) => handleBaseUrlChange(provider.name, e.target.value)}
-                                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>
-                  )}
-                  {activeTab === 'features' && (
-                    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
-                      <div className="mb-6">
-                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-bolt-elements-textPrimary">Debug Info</span>
-                          <Switch
-                            className="ml-auto"
-                            checked={isDebugEnabled}
-                            onCheckedChange={handleToggleDebug}
-                          />
-                        </div>
-                      </div>
-
-                      <div className="mb-6 border-t border-bolt-elements-borderColor pt-4">
-                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Experimental Features</h3>
-                        <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                          Disclaimer: Experimental features may be unstable and are subject to change.
-                        </p>
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-bolt-elements-textPrimary">Enable Local Models</span>
-                          <Switch
-                            className="ml-auto"
-                            checked={isLocalModelsEnabled}
-                            onCheckedChange={handleToggleLocalModels}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                  {activeTab === 'debug' && isDebugEnabled && (
-                    <div className="p-4">
-                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Debug Tab</h3>
-                      <button
-                        onClick={handleCopyToClipboard}
-                        className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
-                      >
-                        Copy to Clipboard
-                      </button>
-
-                      <h4 className="text-md font-medium text-bolt-elements-textPrimary">System Information</h4>
-                      <p className="text-bolt-elements-textSecondary">OS: {navigator.platform}</p>
-                      <p className="text-bolt-elements-textSecondary">Browser: {navigator.userAgent}</p>
-
-                      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Active Features</h4>
-                      <ul>
-                        {providers
-                          .filter((provider) => provider.isEnabled)
-                          .map((provider) => (
-                            <li key={provider.name} className="text-bolt-elements-textSecondary">
-                              {provider.name}
-                            </li>
-                          ))}
-                      </ul>
-
-                      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Base URLs</h4>
-                      <ul>
-                        <li className="text-bolt-elements-textSecondary">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
-                        <li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
-                        <li className="text-bolt-elements-textSecondary">
-                          LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}
-                        </li>
-                      </ul>
-
-                      <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Version Information</h4>
-                      <p className="text-bolt-elements-textSecondary">Version Hash: {versionHash}</p>
-                    </div>
-                  )}
-                  {activeTab === 'connection' && (
-                    <div className="p-4 mb-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
-                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">GitHub Connection</h3>
-                      <div className="flex mb-4">
-                        <div className="flex-1 mr-2">
-                          <label className="block text-sm text-bolt-elements-textSecondary mb-1">GitHub Username:</label>
-                          <input
-                            type="text"
-                            value={githubUsername}
-                            onChange={(e) => setGithubUsername(e.target.value)}
-                            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 className="flex-1">
-                          <label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
-                          <input
-                            type="password"
-                            value={githubToken}
-                            onChange={(e) => setGithubToken(e.target.value)}
-                            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 className="flex mb-4">
-                        <button
-                          onClick={handleSaveConnection}
-                          className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text"
-                        >
-                          Save Connection
-                        </button>
-                      </div>
-                    </div>
-                  )}
-                </div>
+                <div className="flex-1 overflow-y-auto">{tabs.find((tab) => tab.id === activeTab)?.component}</div>
               </div>
             </div>
             <RadixDialog.Close asChild onClick={onClose}>

app/lib/stores/settings.ts

@@ -1,5 +1,7 @@
-import { map } from 'nanostores';
+import { atom, map } from 'nanostores';
 import { workbenchStore } from './workbench';
+import type { ProviderInfo } from '~/utils/types';
+import { PROVIDER_LIST } from '~/utils/constants';
 
 export interface Shortcut {
   key: string;
@@ -15,32 +17,18 @@ export interface Shortcuts {
   toggleTerminal: Shortcut;
 }
 
-export interface Provider {
-  name: string;
-  isEnabled: boolean;
+export interface IProviderSetting {
+  enabled?: boolean;
+  baseUrl?: string;
 }
+export type IProviderConfig = ProviderInfo & {
+  settings: IProviderSetting;
+};
 
-export interface Settings {
-  shortcuts: Shortcuts;
-  providers: Provider[];
-}
+export const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
+export const LOCAL_PROVIDERS = ['OpenAILike', 'LMStudio', 'Ollama'];
 
-export const providersList: Provider[] = [
-  { name: 'Groq', isEnabled: false },
-  { name: 'HuggingFace', isEnabled: false },
-  { name: 'OpenAI', isEnabled: false },
-  { name: 'Anthropic', isEnabled: false },
-  { name: 'OpenRouter', isEnabled: false },
-  { name: 'Google', isEnabled: false },
-  { name: 'Ollama', isEnabled: false },
-  { name: 'OpenAILike', isEnabled: false },
-  { name: 'Together', isEnabled: false },
-  { name: 'Deepseek', isEnabled: false },
-  { name: 'Mistral', isEnabled: false },
-  { name: 'Cohere', isEnabled: false },
-  { name: 'LMStudio', isEnabled: false },
-  { name: 'xAI', isEnabled: false },
-];
+export type ProviderSetting = Record<string, IProviderConfig>;
 
 export const shortcutsStore = map<Shortcuts>({
   toggleTerminal: {
@@ -50,14 +38,17 @@ export const shortcutsStore = map<Shortcuts>({
   },
 });
 
-export const settingsStore = map<Settings>({
-  shortcuts: shortcutsStore.get(),
-  providers: providersList,
+const initialProviderSettings: ProviderSetting = {};
+PROVIDER_LIST.forEach((provider) => {
+  initialProviderSettings[provider.name] = {
+    ...provider,
+    settings: {
+      enabled: false,
+    },
+  };
 });
+export const providersStore = map<ProviderSetting>(initialProviderSettings);
 
-shortcutsStore.subscribe((shortcuts) => {
-  settingsStore.set({
-    ...settingsStore.get(),
-    shortcuts,
-  });
-});
+export const isDebugMode = atom(false);
+
+export const isLocalModelsEnabled = atom(true);