Setting radioSelection

app/components/Models.tsx

@@ -1,328 +1,255 @@
-"use client";
+import React, { useEffect, useState } from 'react';
-import React, { useState, useEffect } from 'react';
 
-// Define all models that should be available.
+// Sample modelList definition; replace this with your actual modelList
 const modelList = {
   'Offline Fast': {
-    'model_type': 'local',
+    model_type: 'local',
-    'Math': 'qwen2-math:1.5b',
+    Math: 'qwen2-math:1.5b',
-    'Code': 'starcoder2',
+    Code: 'starcoder2',
-    'Language': 'llama3.2',
+    Language: 'llama3.2',
-    'Character': 'dolphin-phi',
+    Character: 'dolphin-phi',
-    'Finance': 'qwen2-math:1.5b',
+    Finance: 'qwen2-math:1.5b',
-    'Weather': 'llama3.2',
+    Weather: 'llama3.2',
-    'Time': 'llama3.2',
+    Time: 'llama3.2',
-    'Image': 'llava-phi3'
+    Image: 'llava-phi3'
   },
   'Offline Slow': {
-    'model_type': 'local',
+    model_type: 'local',
-    'Math': 'wizard-math',
+    Math: 'wizard-math',
-    'Code': 'starcoder2:7b',
+    Code: 'starcoder2:7b',
-    'Language': 'llama3.1',
+    Language: 'llama3.1',
-    'Character': 'dolphin-llama3',
+    Character: 'dolphin-llama3',
-    'Finance': 'wizard-math',
+    Finance: 'wizard-math',
-    'Weather': 'llama3.1',
+    Weather: 'llama3.1',
-    'Time': 'llama3.1',
+    Time: 'llama3.1',
-    'Image': 'llava'
+    Image: 'llava'
   },
   'Offline Fast (FOSS)': {
-    'model_type': 'local',
+    model_type: 'local',
-    'Math': 'qwen2-math:1.5b',
+    Math: 'qwen2-math:1.5b',
-    'Code': 'qwen2.5-coder:1.5b',
+    Code: 'qwen2.5-coder:1.5b',
-    'Language': 'phi3.5',
+    Language: 'phi3.5',
-    'Character': 'dolphin-mistral',
+    Character: 'dolphin-mistral',
-    'Finance': 'qwen2-math:1.5b',
+    Finance: 'qwen2-math:1.5b',
-    'Weather': 'phi3.5',
+    Weather: 'phi3.5',
-    'Time': 'phi3.5',
+    Time: 'phi3.5',
-    'Image': 'llava'
+    Image: 'llava'
   },
   'Offline Slow (FOSS)': {
-    'model_type': 'local',
+    model_type: 'local',
-    'Math': 'mathstral',
+    Math: 'mathstral',
-    'Code': 'qwen2.5-coder',
+    Code: 'qwen2.5-coder',
-    'Language': 'qwen2.5',
+    Language: 'qwen2.5',
-    'Character': 'dolphin-mistral',
+    Character: 'dolphin-mistral',
-    'Finance': 'mathstral',
+    Finance: 'mathstral',
-    'Weather': 'qwen2.5',
+    Weather: 'qwen2.5',
-    'Time': 'qwen2.5',
+    Time: 'qwen2.5',
-    'Image': 'llava'
+    Image: 'llava'
   },
   'Online Cheap (OpenAI)': {
-    'model_type': 'openai',
+    model_type: 'openai',
-    'Math': 'gpt-4o-mini',
+    Math: 'gpt-4o-mini',
-    'Code': 'gpt-4o-mini',
+    Code: 'gpt-4o-mini',
-    'Language': 'gpt-4o-mini',
+    Language: 'gpt-4o-mini',
-    'Character': 'gpt-4o-mini',
+    Character: 'gpt-4o-mini',
-    'Finance': 'gpt-4o-mini',
+    Finance: 'gpt-4o-mini',
-    'Weather': 'gpt-4o-mini',
+    Weather: 'gpt-4o-mini',
-    'Time': 'gpt-4o-mini',
+    Time: 'gpt-4o-mini',
-    'Image': 'gpt-4o-mini'
+    Image: 'gpt-4o-mini'
   },
   'Online Expensive (OpenAI)': {
-    'model_type': 'openai',
+    model_type: 'openai',
-    'Math': 'gpt-4o',
+    Math: 'gpt-4o',
-    'Code': 'gpt-4o',
+    Code: 'gpt-4o',
-    'Language': 'gpt-4o',
+    Language: 'gpt-4o',
-    'Character': 'gpt-4o',
+    Character: 'gpt-4o',
-    'Finance': 'gpt-4o',
+    Finance: 'gpt-4o',
-    'Weather': 'gpt-4o',
+    Weather: 'gpt-4o',
-    'Time': 'gpt-4o',
+    Time: 'gpt-4o',
-    'Image': 'gpt-4o'
+    Image: 'gpt-4o'
   },
   'Online Cheap (Anthropic)': {
-    'model_type': 'anthropic',
+    model_type: 'anthropic',
-    'Math': 'claude-3-haiku',
+    Math: 'claude-3-haiku',
-    'Code': 'claude-3-haiku',
+    Code: 'claude-3-haiku',
-    'Language': 'claude-3-haiku',
+    Language: 'claude-3-haiku',
-    'Character': 'claude-3-haiku',
+    Character: 'claude-3-haiku',
-    'Finance': 'claude-3-haiku',
+    Finance: 'claude-3-haiku',
-    'Weather': 'claude-3-haiku',
+    Weather: 'claude-3-haiku',
-    'Time': 'claude-3-haiku',
+    Time: 'claude-3-haiku',
-    'Image': 'claude-3-haiku'
+    Image: 'claude-3-haiku'
   },
   'Online Expensive (Anthropic)': {
-    'model_type': 'anthropic',
+    model_type: 'anthropic',
-    'Math': 'claude-3-5-sonnet',
+    Math: 'claude-3-5-sonnet',
-    'Code': 'claude-3-5-sonnet',
+    Code: 'claude-3-5-sonnet',
-    'Language': 'claude-3-5-sonnet',
+    Language: 'claude-3-5-sonnet',
-    'Character': 'claude-3-5-sonnet',
+    Character: 'claude-3-5-sonnet',
-    'Finance': 'claude-3-5-sonnet',
+    Finance: 'claude-3-5-sonnet',
-    'Weather': 'claude-3-5-sonnet',
+    Weather: 'claude-3-5-sonnet',
-    'Time': 'claude-3-5-sonnet',
+    Time: 'claude-3-5-sonnet',
-    'Image': 'claude-3-5-sonnet'
+    Image: 'claude-3-5-sonnet'
   },
   'Online Cheap (Google)': {
-    'model_type': 'google',
+    model_type: 'google',
-    'Math': 'gemini-1.5-flash-latest',
+    Math: 'gemini-1.5-flash-latest',
-    'Code': 'gemini-1.5-flash-latest',
+    Code: 'gemini-1.5-flash-latest',
-    'Language': 'gemini-1.5-flash-latest',
+    Language: 'gemini-1.5-flash-latest',
-    'Character': 'gemini-1.5-flash-latest',
+    Character: 'gemini-1.5-flash-latest',
-    'Finance': 'gemini-1.5-flash-latest',
+    Finance: 'gemini-1.5-flash-latest',
-    'Weather': 'gemini-1.5-flash-latest',
+    Weather: 'gemini-1.5-flash-latest',
-    'Time': 'gemini-1.5-flash-latest',
+    Time: 'gemini-1.5-flash-latest',
-    'Image': 'gemini-1.5-flash-latest'
+    Image: 'gemini-1.5-flash-latest'
   },
   'Online Expensive (Google)': {
-    'model_type': 'google',
+    model_type: 'google',
-    'Math': 'gemini-1.5-pro-latest',
+    Math: 'gemini-1.5-pro-latest',
-    'Code': 'gemini-1.5-pro-latest',
+    Code: 'gemini-1.5-pro-latest',
-    'Language': 'gemini-1.5-pro-latest',
+    Language: 'gemini-1.5-pro-latest',
-    'Character': 'gemini-1.5-pro-latest',
+    Character: 'gemini-1.5-pro-latest',
-    'Finance': 'gemini-1.5-pro-latest',
+    Finance: 'gemini-1.5-pro-latest',
-    'Weather': 'gemini-1.5-pro-latest',
+    Weather: 'gemini-1.5-pro-latest',
-    'Time': 'gemini-1.5-pro-latest',
+    Time: 'gemini-1.5-pro-latest',
-    'Image': 'gemini-1.5-pro-latest'
+    Image: 'gemini-1.5-pro-latest'
   },
   'Online (La Plateforme)': {
-    'model_type': 'mistral',
+    model_type: 'mistral',
-    'Math': 'open-mistral-nemo',
+    Math: 'open-mistral-nemo',
-    'Code': 'codestral-latest',
+    Code: 'codestral-latest',
-    'Language': 'mistral-small-latest',
+    Language: 'mistral-small-latest',
-    'Character': 'mistral-large-latest',
+    Character: 'mistral-large-latest',
-    'Finance': 'open-mistral-nemo',
+    Finance: 'open-mistral-nemo',
-    'Weather': 'mistral-small-latest',
+    Weather: 'mistral-small-latest',
-    'Time': 'mistral-small-latest',
+    Time: 'mistral-small-latest',
-    'Image': 'pixtral-12b-2409'
+    Image: 'pixtral-12b-2409'
   },
   'Online (FOSS) (La Plateforme)': {
-    'model_type': 'mistral',
+    model_type: 'mistral',
-    'Math': 'open-mistral-nemo',
+    Math: 'open-mistral-nemo',
-    'Code': 'open-codestral-mamba',
+    Code: 'open-codestral-mamba',
-    'Language': 'open-mistral-nemo',
+    Language: 'open-mistral-nemo',
-    'Character': 'open-mixtral-8x22b',
+    Character: 'open-mixtral-8x22b',
-    'Finance': 'open-mixtral-8x22b',
+    Finance: 'open-mixtral-8x22b',
-    'Weather': 'open-mistral-nemo',
+    Weather: 'open-mistral-nemo',
-    'Time': 'open-mistral-nemo',
+    Time: 'open-mistral-nemo',
-    'Image': 'pixtral-12b-2409'
+    Image: 'pixtral-12b-2409'
   }
 }
+  // Define the keys of modelList
+  type ModelKeys = keyof typeof modelList;
 
-// Define the available selectedAIFunction options
+  const ModelSection: React.FC = () => {
-const modelDropdown = {
+    // Initialize state with value from localStorage or default to ''
-  offlineNonFoss: ['Offline Fast', 'Offline Slow'],
+    const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
-  offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
+    const [radioSelection, setRadioSelection] = useState<string | null>("");
-  onlineNonFoss: [
+    const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
-    'Online Cheap (OpenAI)',
+    const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
-    'Online Expensive (OpenAI)',
-    'Online Cheap (Anthropic)',
-    'Online Expensive (Anthropic)',
-    'Online Cheap (Google)',
-    'Online Expensive (Google)',
-    'Online (La Plateforme)'
-  ],
-  onlineFoss: ['Online (FOSS) (La Plateforme)'],
-};
 
-const selectedAIFunction = [
+    useEffect(() => {
-  'Code', 
+      // Load initial values from localStorage
-  'Math', 
+      const temp = localStorage.getItem("activeSelectedAIFunction") || "";
-  'Language', 
+      setActiveSelectedAIFunction(temp);
-  'Character', 
-  'Finance', 
-  'Weather', 
-  'Time', 
-  'Image', 
-  'Custom1', 
-  'Custom2'
-]
 
-const ModelSection: React.FC = () => {
+      // Check if localStorage keys exist, else set defaults
-  // Initialize state with value from localStorage or default to ''
+      if (!localStorage.getItem('selectedModelDropdown')) {
-  const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
+        localStorage.setItem("selectedModelDropdown", "Offline Fast");
-  const [radioSelection, setRadioSelection] = useState<string | null>("")
+      }
-  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
-  const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
-  
-  useEffect(() => {
-    var temp = localStorage.getItem("activeSelectedAIFunction") || ""
-    setActiveSelectedAIFunction(temp)
-    if (!localStorage.getItem('selectedModelDropdown')) {
-      localStorage.setItem("selectedModelDropdown", "Offline Fast" )
-    }
 
-    if (!localStorage.getItem("activeSelectedAIFunction")) {
+      // Set the dropdown and selected AI function from localStorage
-      setActiveSelectedAIFunction('Code')
+      const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
-      localStorage.setItem('activeSelectedAIFunction' ,'Code')
+      const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
-    }
 
-    if (!localStorage.getItem("model")) {
+      setSelectedModelDropdown(storedSelectedModel);
-      localStorage.setItem("model" ,'starcoder2')
+      setCurrentSelectedAIFunction(storedActiveFunction);
-    }
 
-    if (!localStorage.getItem("radioSelection")) {
+      if (!localStorage.getItem("model")) {
-      localStorage.setItem("radioSelection" ,'None')
+        localStorage.setItem("model", 'starcoder2');
-    }
+      }
 
-    const handleStorageChange = () => {
+      if (!localStorage.getItem("radioSelection")) {
-      setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
+        localStorage.setItem("radioSelection", 'None');
+      }
+
+      // Load radio selection from localStorage
+      setRadioSelection(localStorage.getItem('radioSelection') || '');
+    }, []);
+
+    const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
+
+    const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const selectedModel = event.target.value as ModelKeys;
+      setSelectedModelDropdown(selectedModel);
+      localStorage.setItem('selectedModelDropdown', selectedModel);
+
+      // Update model and type in local storage
+      const modelType = modelList[selectedModel].model_type;
+      const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
+
+      localStorage.setItem('model', model);
+      localStorage.setItem('type', modelType);
     };
 
-    // Update immediately when localStorage changes
+    const isOfflineModel = (model: string) => {
-    window.addEventListener('storage', handleStorageChange);
+      return modelList[model as ModelKeys].model_type === 'local';
-
-    setRadioSelection(localStorage.getItem('radioSelection') || '');
-    setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
-    // Cleanup listener on component unmount
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
     };
-  }, []); // Dependency array can remain empty if you only want this to run on mount
 
-  useEffect(() => {
+    const modelClicked = (model: string) => {
-    var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
+      const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
-    if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
-      setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
-    }
-  }, [activeSelectedAIFunction]);
 
-  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
-    const newModel = event.target.value;
+        const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
-    setSelectedModelDropdown(newModel);
+        const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
-    localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
-  };
 
-  // Determine the filtered models based on current radioSelection
+        localStorage.setItem('activeSelectedAIFunction', model);
-  const filteredModels = (() => {
+        setActiveSelectedAIFunction(model);
-    let models = [];
+        localStorage.setItem('model', newModel);
-    switch (radioSelection) {
+        localStorage.setItem('type', modelType);
-      case 'Offline':
+        setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
-        models = [
+      } else {
-          ...modelDropdown.onlineNonFoss,
+        console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
-          ...modelDropdown.onlineFoss,
+      }
-        ]; // Show only offline models without FOSS
+    };
-        break;
-      case 'Offline (FOSS)':
-        models = [
-          ...modelDropdown.onlineFoss,
-        ]; // Show only offline models with FOSS
-        break;
-      case 'Online':
-        models = [
-          ...modelDropdown.offlineNonFoss,
-          ...modelDropdown.offlineFoss,
-        ]; // Show only online models without FOSS
-        break;
-      case 'Online (FOSS)':
-        models = [
-          ...modelDropdown.offlineFoss,
-        ]; // Show only online models with FOSS
-        break;
-      case 'None':
-        models = [
-          ...modelDropdown.offlineNonFoss,
-          ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineNonFoss,
-          ...modelDropdown.onlineFoss,
-        ]; // Show all models if nothing matches
-        break;
-      case 'None (FOSS)':
-        models = [
-          ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineFoss,
-        ]; // Show all models if nothing matches
-        break;
-      default:
-        models = [
-          ...modelDropdown.offlineNonFoss,
-          ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineNonFoss,
-          ...modelDropdown.onlineFoss,
-        ]; // Show all models if nothing matches
-        break;
-    }
-    return Array.from(new Set(models)); // Remove duplicates using Set
-  })();
 
-  const isOfflineModel = (model: string) =>
+    return (
-    modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
+      <div className="model-background">
+        <div className="models">
+          <div className="title">
+            <h3>Different AI Models</h3>
+          </div>
 
-  const modelClicked = (model: string) => {
+          {/* Model Selection Dropdown */}
-    localStorage.setItem('activeSelectedAIFunction' , model)
+          <div className="model-dropdown">
-    setActiveSelectedAIFunction(model)
+            <label htmlFor="model-select">Select AI Model:</label>
-    const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
+            <select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
-    localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
+              {filteredModels.map((model) => (
-    localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
+                <option key={model} value={model}>
-  }
+                  {model}
+                </option>
+              ))}
+            </select>
+          </div>
 
-  return (
+          {/* Model Grid with Cards */}
-    <div className="model-background">
+          <div className="grid">
-      <div className="models">
+            {Object.keys(modelList[selectedModelDropdown])
-        <div className="title">
+              .filter((key) => key !== 'model_type') // Exclude model_type from display
-          <h3>Different AI Models</h3>
+              .map((displayedCategory) => (
-        </div>
+                <button
-
+                  key={displayedCategory}
-        {/* Model Selection Dropdown */}
+                  className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} 
-        <div className="model-dropdown">
+                  onClick={() => modelClicked(displayedCategory)}
-          <label htmlFor="model-select">Select AI Model:</label>
+                >
-          <select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
+                  <div className="overlay">
-            {filteredModels.map((model) => (
+                    <h3>{displayedCategory}</h3>
-              <option key={model} value={model}>
+                    {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-                {model}
+                  </div>
-              </option>
+                </button>
-            ))}
+              ))
-          </select>
+            }
-        </div>
+          </div>
-
-        {/* Model Grid with Cards */}
-        <div className="grid">
-          {selectedAIFunction.map(
-            (displayedCategory) => (
-              <button
-                key={displayedCategory}
-                className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} 
-                onClick={() => modelClicked(displayedCategory)}
-              >
-                <div className="overlay">
-                  <h3>{displayedCategory}</h3>
-                  {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-                </div>
-              </button>
-            )
-          )}
         </div>
       </div>
-    </div>
+    );
-  );
+  };
-};
 
 export default ModelSection;

app/components/settings/PrivacySettings.tsx

@@ -1,5 +1,4 @@
-// PrivacySettings.tsx
+import React, { useEffect } from 'react';
-import React from 'react';
 
 interface PrivacySettingsProps {
   selectedOption: string; // The currently selected option
@@ -8,39 +7,42 @@ interface PrivacySettingsProps {
 }
 
 const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => {
+  
+  // Set default option based on openSourceMode if no option is selected
+  useEffect(() => {
+    if (!selectedOption) {
+      handleRadioChange(openSourceMode ? 'Offline (FOSS)' : 'None');
+    }
+  }, [selectedOption, handleRadioChange, openSourceMode]);
+
+  // Define your options
+  const options = [
+    { value: 'Online', label: 'Online' },
+    { value: 'Offline', label: 'Offline' },
+    { value: 'None', label: 'None' },
+    { value: 'Offline (FOSS)', label: 'Offline (FOSS)' },
+    { value: 'Online (FOSS)', label: 'Online (FOSS)' },
+    { value: 'None (FOSS)', label: 'None (FOSS)' },
+  ];
+
   return (
-    <>
+    <div className="settings-option">
-      {/* AI Mode Radio Options */}
+      <p>Select Privacy Mode:</p>
-      <div className="settings-option">
+      {options.map((option) => (
-        <p>Disable Options:</p>
+        <div key={option.value}>
-        <div className="slider">
+          <label>
-          {/* Offline */}
+            <input
-          <div
+              type="radio"
-            className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
+              value={option.value}
-            onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
+              checked={selectedOption === option.value}
-          >
+              onChange={() => handleRadioChange(option.value)}
-            Offline tools{openSourceMode ? ' (FOSS)' : ''}
+              disabled={openSourceMode && !option.label.includes('(FOSS)') && selectedOption !== option.value} // Disable non-FOSS options if FOSS is selected
-          </div>
+            />
-
+            {option.label}
-          {/* Online */}
+          </label>
-          <div
-            className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
-            onClick={() => handleRadioChange('Online')}
-          >
-            Online tools{openSourceMode ? ' (FOSS)' : ''}
-          </div>
-
-          {/* None */}
-          <div
-            className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
-            onClick={() => handleRadioChange('None')}
-          >
-            None{openSourceMode ? ' (FOSS)' : ''}
-          </div>
         </div>
-        <br />
+      ))}
-      </div>
+    </div>
-    </>
   );
 };
 

app/components/settings/Settings.tsx

@@ -56,7 +56,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
 
   // Online AI and chat history settings
-  const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
+  const [selectedOption, setSelectedOption] = useState(() => {
+    // Check if openSourceMode exists in localStorage
+    const openSourceMode = localStorage.getItem("openSourceMode");
+    
+    // If it exists and is "true", set selectedOption to None (Foss), otherwise set it to None
+    return openSourceMode === "true" ? "None (FOSS)" : "None";
+  });
+
   const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
   const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
   const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
@@ -106,20 +113,21 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
   const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
   
-  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  // Per default a purple color gradient
-  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
-  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
-  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
   const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); 
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
   // API Keys
-  const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+  const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
-  const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
-  const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
-  const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
   const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
 
   const settings = {
@@ -330,7 +338,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   useEffect(() => {
     const savedOption = localStorage.getItem('radioSelection');
     if (savedOption) {
-      setSelectedOption(savedOption); // Set saved selection
+      handleRadioChange(savedOption); // Set saved selection
     }
   }, []);
 
@@ -450,7 +458,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
-
             <PrivacySettings
               selectedOption={selectedOption}
               handleRadioChange={handleRadioChange}
@@ -572,26 +579,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <TextSettings
               label="New Name"
               value={newName}
-              type='text'
               setValue={setNewName}
+              type="text"
+              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
             />
             <TextSettings
               label="New Email"
               value={newEmail}
               setValue={setNewEmail}
-              type="email" // Input type is email
+              type="email"
+              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
             />
             <TextSettings
               label="New Password"
               value={newPassword}
               setValue={setNewPassword}
-              type="password" // Input type is password
+              type="password"
-            />
+              placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default
-            <TextSettings
-              label="Current Password"
-              value={currentPassword}
-              setValue={setCurrentPassword}
-              type="password" // Input type is password
             />
             <ButtonSetting
               label="Log Out" // Button label
@@ -619,24 +623,28 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={mistral} // State variable for the input
               setValue={setMistral} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('mistral') || "Enter the API key"}
             />
             <TextSettings
               label="OpenAI" // Label for the input
               value={openai} // State variable for the input
               setValue={setOpenai} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('openai') || "Enter the API key"}
             />
             <TextSettings
               label="Anthropic" // Label for the input
               value={anthropic} // State variable for the input
               setValue={setAnthropic} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
             />
             <TextSettings
               label="Google" // Label for the input
               value={google} // State variable for the input
               setValue={setGoogle} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('google') || "Enter the API key"}
             />
           </div>
         );

app/components/settings/TextSettings.tsx

@@ -5,9 +5,10 @@ interface TextSettingProps {
   value: string; // The current text value
   setValue: (newText: string) => void; // The method to update the state
   type: 'text' | 'email' | 'password'; // The type of input field
+  placeholder?: string; // Optional placeholder text
 }
 
-const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
+const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type, placeholder }) => {
   const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newText = e.target.value; // Get the new value from the input
     setValue(newText); // Update the state in the parent component
@@ -20,6 +21,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type
         type={type} // Use the type prop for the input
         value={value} // Set the current value
         onChange={handleTextChange} // Handle input changes
+        placeholder={placeholder} // Set the placeholder text
       />
     </div>
   );

app/styles/models.css

@@ -61,8 +61,8 @@
 }
 
 .model-box.selected {
-    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */
+    box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
-    border-color: yellow;
+    border-color: var(--apply-button-hover-color);
 }
 
 .overlay {