Merge pull request #580 from oTToDev-CE/feat/add-tabbed-setting-modal

.github/workflows/commit.yaml

@@ -0,0 +1,32 @@
+name: Update Commit Hash File
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  update-commit:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout the code
+      uses: actions/checkout@v3
+      
+    - name: Get the latest commit hash
+      run: echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
+
+    - name: Update commit file
+      run: |
+        echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json
+
+    - name: Commit and push the update
+      run: |
+        git config --global user.name "github-actions[bot]"
+        git config --global user.email "github-actions[bot]@users.noreply.github.com"
+        git add app/commit.json
+        git commit -m "chore: update commit hash to $COMMIT_HASH"
+        git push

app/commit.json

@@ -0,0 +1 @@
+{ "commit": "228cf1f34fd64b6960460f84c9db47bd7ef03150" }

app/components/chat/BaseChat.tsx

@@ -88,13 +88,65 @@ 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
@@ -184,23 +236,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       }
     };
 
-    const updateApiKey = (provider: string, key: string) => {
-      try {
-        const updatedApiKeys = { ...apiKeys, [provider]: key };
-        setApiKeys(updatedApiKeys);
-
-        // Save updated API keys to cookies with 30 day expiry and secure settings
-        Cookies.set('apiKeys', JSON.stringify(updatedApiKeys), {
-          expires: 30, // 30 days
-          secure: true, // Only send over HTTPS
-          sameSite: 'strict', // Protect against CSRF
-          path: '/', // Accessible across the site
-        });
-      } catch (error) {
-        console.error('Error saving API keys to cookies:', error);
-      }
-    };
-
     const handleFileUpload = () => {
       const input = document.createElement('input');
       input.type = 'file';
@@ -360,11 +395,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,79 @@ 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 +107,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>

app/components/sidebar/Menu.client.tsx

@@ -3,6 +3,8 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
+import { Settings } from '~/components/ui/Settings';
+import { SettingsButton } from '~/components/ui/SettingsButton';
 import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
 import { logger } from '~/utils/logger';
@@ -39,6 +41,7 @@ export const Menu = () => {
   const [list, setList] = useState<ChatHistoryItem[]>([]);
   const [open, setOpen] = useState(false);
   const [dialogContent, setDialogContent] = useState<DialogContent>(null);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({
     items: list,
@@ -200,10 +203,12 @@ export const Menu = () => {
             </Dialog>
           </DialogRoot>
         </div>
-        <div className="flex items-center border-t border-bolt-elements-borderColor p-4">
-          <ThemeSwitch className="ml-auto" />
+        <div className="flex items-center justify-between border-t border-bolt-elements-borderColor p-4">
+          <SettingsButton onClick={() => setIsSettingsOpen(true)} />
+          <ThemeSwitch />
         </div>
       </div>
+      <Settings open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
     </motion.div>
   );
 };

app/components/ui/Settings.tsx

@@ -0,0 +1,395 @@
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import { DialogTitle, dialogVariants, dialogBackdropVariants } from './Dialog';
+import { IconButton } from './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';
+
+interface SettingsProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+type TabType = 'chat-history' | 'providers' | 'features' | 'debug';
+
+// Providers that support base URL configuration
+const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
+
+export const Settings = ({ open, onClose }: SettingsProps) => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState<TabType>('chat-history');
+  const [isDebugEnabled, setIsDebugEnabled] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // 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' },
+    ...(isDebugEnabled ? [{ id: 'debug' as TabType, label: 'Debug Tab', icon: 'i-ph:bug' }] : []),
+  ];
+
+  // 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) => {
+    setProviders((prevProviders) => {
+      const newProviders = prevProviders.map((provider) =>
+        provider.name === providerName ? { ...provider, isEnabled: !provider.isEnabled } : 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) => 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
+
+  return (
+    <RadixDialog.Root open={open}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay asChild>
+          <motion.div
+            className="bg-black/50 fixed inset-0 z-max"
+            initial="closed"
+            animate="open"
+            exit="closed"
+            variants={dialogBackdropVariants}
+          />
+        </RadixDialog.Overlay>
+        <RadixDialog.Content asChild>
+          <motion.div
+            className="fixed top-[50%] left-[50%] z-max h-[85vh] w-[90vw] max-w-[900px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-gray-800 shadow-lg focus:outline-none overflow-hidden"
+            initial="closed"
+            animate="open"
+            exit="closed"
+            variants={dialogVariants}
+          >
+            <div className="flex h-full">
+              <div className="w-48 border-r border-bolt-elements-borderColor bg-gray-700 p-4 flex flex-col justify-between">
+                {tabs.map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={classNames(
+                      'w-full flex items-center gap-2 px-4 py-3 rounded-lg text-left text-sm transition-all mb-2',
+                      activeTab === tab.id ? 'bg-blue-600 text-white' : 'bg-gray-600 text-gray-200 hover:bg-blue-500',
+                    )}
+                  >
+                    <div className={tab.icon} />
+                    {tab.label}
+                  </button>
+                ))}
+                <div className="mt-auto flex flex-col gap-2">
+                  <a
+                    href="https://github.com/coleam00/bolt.new-any-llm"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-center bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-500 transition-colors duration-200"
+                  >
+                    GitHub
+                  </a>
+                  <a
+                    href="https://coleam00.github.io/bolt.new-any-llm"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-center bg-blue-600 text-white rounded-lg py-2 hover:bg-blue-500 transition-colors duration-200"
+                  >
+                    Docs
+                  </a>
+                </div>
+              </div>
+
+              <div className="flex-1 flex flex-col p-8">
+                <DialogTitle className="flex-shrink-0 text-lg font-semibold text-white">Settings</DialogTitle>
+                <div className="flex-1 overflow-y-auto">
+                  {activeTab === 'chat-history' && (
+                    <div className="p-4">
+                      <h3 className="text-lg font-medium text-white mb-4">Chat History</h3>
+                      <button
+                        onClick={handleExportAllChats}
+                        className="bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 mb-4 transition-colors duration-200"
+                      >
+                        Export All Chats
+                      </button>
+
+                      <div className="bg-red-500 text-white rounded-lg p-4 mb-4">
+                        <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-red-700 text-white rounded-lg px-4 py-2 transition-colors duration-200',
+                            isDeleting ? 'opacity-50 cursor-not-allowed' : 'hover:bg-red-800',
+                          )}
+                        >
+                          {isDeleting ? 'Deleting...' : 'Delete All Chats'}
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                  {activeTab === 'providers' && (
+                    <div className="p-4">
+                      <h3 className="text-lg font-medium text-white mb-4">Providers</h3>
+                      <input
+                        type="text"
+                        placeholder="Search providers..."
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="mb-4 p-2 rounded border border-gray-300 w-full"
+                      />
+                      {filteredProviders.map((provider) => (
+                        <div
+                          key={provider.name}
+                          className="flex flex-col mb-6 provider-item hover:bg-gray-600 p-4 rounded-lg"
+                        >
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="text-white">{provider.name}</span>
+                            <label className="relative inline-flex items-center cursor-pointer">
+                              <input
+                                type="checkbox"
+                                className="sr-only"
+                                checked={provider.isEnabled}
+                                onChange={() => handleToggleProvider(provider.name)}
+                              />
+                              <div className="w-11 h-6 bg-gray-300 rounded-full shadow-inner"></div>
+                              <div
+                                className={`absolute left-0 w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 ease-in-out ${
+                                  provider.isEnabled ? 'transform translate-x-full bg-green-500' : ''
+                                }`}
+                              ></div>
+                            </label>
+                          </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-gray-300 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 p-2 rounded border border-gray-600 bg-gray-700 text-white text-sm"
+                              />
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {activeTab === 'features' && (
+                    <div className="p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <span className="text-white">Debug Info</span>
+                        <label className="relative inline-flex items-center cursor-pointer">
+                          <input
+                            type="checkbox"
+                            className="sr-only"
+                            checked={isDebugEnabled}
+                            onChange={() => setIsDebugEnabled(!isDebugEnabled)}
+                          />
+                          <div className="w-11 h-6 bg-gray-300 rounded-full shadow-inner"></div>
+                          <div
+                            className={`absolute left-0 w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 ease-in-out ${
+                              isDebugEnabled ? 'transform translate-x-full bg-green-500' : ''
+                            }`}
+                          ></div>
+                        </label>
+                      </div>
+                      <div className="feature-row">{/* Your feature content here */}</div>
+                    </div>
+                  )}
+                  {activeTab === 'debug' && isDebugEnabled && (
+                    <div className="p-4">
+                      <h3 className="text-lg font-medium text-white 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-white">System Information</h4>
+                      <p className="text-white">OS: {navigator.platform}</p>
+                      <p className="text-white">Browser: {navigator.userAgent}</p>
+
+                      <h4 className="text-md font-medium text-white mt-4">Active Features</h4>
+                      <ul>
+                        {providers
+                          .filter((provider) => provider.isEnabled)
+                          .map((provider) => (
+                            <li key={provider.name} className="text-white">
+                              {provider.name}
+                            </li>
+                          ))}
+                      </ul>
+
+                      <h4 className="text-md font-medium text-white mt-4">Base URLs</h4>
+                      <ul>
+                        <li className="text-white">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
+                        <li className="text-white">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
+                        <li className="text-white">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
+                      </ul>
+
+                      <h4 className="text-md font-medium text-white mt-4">Version Information</h4>
+                      <p className="text-white">Version Hash: {versionHash}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <RadixDialog.Close asChild onClick={onClose}>
+              <IconButton icon="i-ph:x" className="absolute top-[10px] right-[10px]" />
+            </RadixDialog.Close>
+          </motion.div>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+};

app/components/ui/SettingsButton.tsx

@@ -0,0 +1,18 @@
+import { memo } from 'react';
+import { IconButton } from './IconButton';
+
+interface SettingsButtonProps {
+  onClick: () => void;
+}
+
+export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      icon="i-ph:gear"
+      size="xl"
+      title="Settings"
+      className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
+    />
+  );
+});

app/components/ui/SettingsSlider.tsx

@@ -0,0 +1,62 @@
+import { motion } from 'framer-motion';
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface SliderOption<T> {
+  value: T;
+  text: string;
+}
+
+export interface SliderOptions<T> {
+  left: SliderOption<T>;
+  right: SliderOption<T>;
+}
+
+interface SettingsSliderProps<T> {
+  selected: T;
+  options: SliderOptions<T>;
+  setSelected?: (selected: T) => void;
+}
+
+export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: SettingsSliderProps<T>) => {
+  const isLeftSelected = selected === options.left.value;
+
+  return (
+    <div className="relative flex items-center bg-bolt-elements-prompt-background rounded-lg">
+      <motion.div
+        className={classNames(
+          'absolute h-full bg-green-500 transition-all duration-300 rounded-lg',
+          isLeftSelected ? 'left-0 w-1/2' : 'right-0 w-1/2',
+        )}
+        initial={false}
+        animate={{
+          x: isLeftSelected ? 0 : '100%',
+          opacity: 0.2,
+        }}
+        transition={{
+          type: 'spring',
+          stiffness: 300,
+          damping: 30,
+        }}
+      />
+      <button
+        onClick={() => setSelected?.(options.left.value)}
+        className={classNames(
+          'relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200',
+          isLeftSelected ? 'text-white' : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary',
+        )}
+      >
+        {options.left.text}
+      </button>
+      <button
+        onClick={() => setSelected?.(options.right.value)}
+        className={classNames(
+          'relative z-10 flex-1 p-2 rounded-lg text-sm transition-colors duration-200',
+          !isLeftSelected ? 'text-white' : 'text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary',
+        )}
+      >
+        {options.right.text}
+      </button>
+    </div>
+  );
+});

app/lib/stores/settings.ts

@@ -15,10 +15,33 @@ export interface Shortcuts {
   toggleTerminal: Shortcut;
 }
 
+export interface Provider {
+  name: string;
+  isEnabled: boolean;
+}
+
 export interface Settings {
   shortcuts: Shortcuts;
+  providers: Provider[];
 }
 
+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 const shortcutsStore = map<Shortcuts>({
   toggleTerminal: {
     key: 'j',
@@ -29,6 +52,7 @@ export const shortcutsStore = map<Shortcuts>({
 
 export const settingsStore = map<Settings>({
   shortcuts: shortcutsStore.get(),
+  providers: providersList,
 });
 
 shortcutsStore.subscribe((shortcuts) => {

app/types/model.ts

@@ -7,4 +7,5 @@ export type ProviderInfo = {
   getApiKeyLink?: string;
   labelForGetApiKey?: string;
   icon?: string;
+  isEnabled?: boolean;
 };