Trying to fix the settings

app/components/Models.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+  import React, { useState, useEffect } from 'react';
 
-const Models: React.FC = () => {
+  // Define the available model options
   const modelOptions = [
     'Offline Fast',
     'Offline Fast (FOSS)',
@@ -16,106 +16,134 @@ const Models: React.FC = () => {
     'Online Expensive (Google)',
   ];
 
-  const [selectedModel, setSelectedModel] = useState<string>(() => {
+  // Define the properties passed to the Models component
-    // Load the selected model from localStorage on initial render
+  interface ModelsProps {
-    return localStorage.getItem('selectedModel') || 'Offline Fast';
+    selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
-  });
+  }
 
-  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
-    const newModel = event.target.value;
+    // State for the selected model, default is loaded from localStorage or defaults to 'Offline Fast'
-    setSelectedModel(newModel);
+    const [selectedModel, setSelectedModel] = useState<string>(() => {
-  };
+      return localStorage.getItem('selectedModel') || 'Offline Fast';
+    });
 
-  const isOfflineModel = (model: string) => {
+    // Handle changes in the selected model from the dropdown
-    return model.includes('Offline');
+    const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-  };
+      const newModel = event.target.value;
+      setSelectedModel(newModel);
+    };
 
-  // Save selected model to localStorage whenever it changes
+    // Utility function to check if a model is an offline model
-  useEffect(() => {
+    const isOfflineModel = (model: string) => {
-    localStorage.setItem('selectedModel', selectedModel);
+      return model.includes('Offline');
-  }, [selectedModel]);
+    };
 
-  return (
+    // Utility function to check if a model is an online model
-    <div className="model-background">
+    const isOnlineModel = (model: string) => {
-      <div className="models">
+      return model.includes('Online');
-        <div className="titel">
+    };
-          <h1>Different AI models</h1>
+
-        </div>
+    // Save selected model to localStorage whenever it changes
-        <div className="model-dropdown">
+    useEffect(() => {
-          <label htmlFor="model-select">Select AI Model:</label>
+      localStorage.setItem('selectedModel', selectedModel);
-          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
+    }, [selectedModel]);
-            {modelOptions.map((model) => (
+
-              <option key={model} value={model}>
+    // Filter models based on the selected privacy option (Offline, AI Online, None)
-                {model}
+    const filteredModels = modelOptions.filter((model) => {
-              </option>
+      if (selectedOption === 'Offline') {
-            ))}
+        return !isOnlineModel(model);  // Hide online models
-          </select>
+      } else if (selectedOption === 'AI Online') {
-        </div>
+        return !isOfflineModel(model);  // Hide offline models
-        <div className="grid">
+      } else {
-          <button className="code-model model-box">
+        return true;  // Show all models for "None"
-            <div className="overlay">
+      }
-              <h3>Code</h3>
+    });
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+
-            </div>
+    return (
-          </button>
+      <div className="model-background">
-          <button className="math-model model-box">
+        <div className="models">
-            <div className="overlay">
+          <div className="title">
-              <h3>Math</h3>
+            <h3>Different AI models</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+          </div>
-            </div>
+
-          </button>
+          {/* Model Selection Dropdown */}
-          <button className="language-model model-box">
+          <div className="model-dropdown">
-            <div className="overlay">
+            <label htmlFor="model-select">Select AI Model:</label>
-              <h3>Language</h3>
+            <select id="model-select" value={selectedModel} onChange={handleModelChange}>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              {filteredModels.map((model) => (
-            </div>
+                <option key={model} value={model}>
-          </button>
+                  {model}
-          <button className="character-model model-box">
+                </option>
-            <div className="overlay">
+              ))}
-              <h3>Character</h3>
+            </select>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+          </div>
-            </div>
+
-          </button>
+          {/* Model Grid with Cards */}
-          <button className="financial-model model-box">
+          <div className="grid">
-            <div className="overlay">
+            <button className="code-model model-box">
-              <h3>Finance</h3>
+              <div className="overlay">
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                <h3>Code</h3>
-            </div>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-          </button>
+              </div>
-          <button className="weather-model model-box">
+            </button>
-            <div className="overlay">
+            <button className="math-model model-box">
-              <h3>Weather</h3>
+              <div className="overlay">
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                <h3>Math</h3>
-            </div>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-          </button>
+              </div>
-          <button className="time-planner-model model-box">
+            </button>
-            <div className="overlay">
+            <button className="language-model model-box">
-              <h3>Time</h3>
+              <div className="overlay">
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                <h3>Language</h3>
-            </div>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-          </button>
+              </div>
-          <button className="image-model model-box">
+            </button>
-            <div className="overlay">
+            <button className="character-model model-box">
-              <h3>Image</h3>
+              <div className="overlay">
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                <h3>Character</h3>
-            </div>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-          </button>
+              </div>
-          <button className="default-model model-box">
+            </button>
-            <div className="overlay"> 
+            <button className="financial-model model-box">
-              <h3>Custom1</h3>
+              <div className="overlay">
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                <h3>Finance</h3>
-            </div>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-          </button>
+              </div>
-          <button className="default-model model-box">
+            </button>
-            <div className="overlay"> 
+            <button className="weather-model model-box">
-              <h3>Custom2</h3>
+              <div className="overlay">
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                <h3>Weather</h3>
-            </div>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
-          </button>
+              </div>
+            </button>
+            <button className="time-planner-model model-box">
+              <div className="overlay">
+                <h3>Time</h3>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              </div>
+            </button>
+            <button className="image-model model-box">
+              <div className="overlay">
+                <h3>Image</h3>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay"> 
+                <h3>Custom1</h3>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              </div>
+            </button>
+            <button className="default-model model-box">
+              <div className="overlay"> 
+                <h3>Custom2</h3>
+                {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              </div>
+            </button>
+          </div>
         </div>
       </div>
-    </div>
+    );
-  );
+  };
-};
 
-export default Models;
+  export default Models;

app/components/Settings.tsx

@@ -6,7 +6,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
     const getItemFromLocalStorage = (key: string) => {
       const item = localStorage.getItem(key);
-      return item ? JSON.parse(item) : false; // Default to false if item is null
+      
+      if (item) {
+        try {
+          return JSON.parse(item); // Attempt to parse the item
+        } catch (e) {
+          console.error(`Error parsing JSON for key "${key}":`, e);
+          return false; // Return false if parsing fails
+        }
+      }
+      
+      return false; // Default to false if item is null or empty
     };
 
     // Active section
@@ -24,8 +34,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
 
     // Online AI and chat history settings
-    // State declarations
+    const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
-    const [disableOnlineAI, setDisableOnlineAI] = useState(() => getItemFromLocalStorage('disableOnlineAI'));
     const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
     const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
     const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
@@ -58,7 +67,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
-    const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color:').trim());
+    const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
 
     // Theme selection
     const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
@@ -69,162 +78,112 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
     const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
 
+
     // Effect hooks to update localStorage whenever any state changes
     useEffect(() => {
-      localStorage.setItem('activeSection', activeSection);
+      const settings = {
-    }, [activeSection]);
+          activeSection,
+          preferredLanguage,
+          preferredCurrency,
+          dateFormat,
+          timeFormat,
+          timeZone,
+          selectedOption,
+          disableChatHistory,
+          disableAIMemory,
+          openSourceMode,
+          newName,
+          newEmail,
+          newPassword,
+          preferredMeasurement,
+          backgroundColor,
+          textColor,
+          inputBackgroundColor,
+          inputButtonColor,
+          inputButtonHoverColor,
+          userMessageBackgroundColor,
+          userMessageTextColor,
+          aiMessageBackgroundColor,
+          aiMessageTextColor,
+          buttonBackgroundColor,
+          buttonHoverBackgroundColor,
+          modelsBackgroundColor,
+          historyBackgroundColor,
+          leftPanelBackgroundColor,
+          conversationBackgroundColor,
+          popUpTextColor,
+          inputBorderColor,
+          fontFamily,
+          fontSize,
+          burgerMenu,
+          selectedTheme,
+          laPlateforme,
+          openAI,
+          anthropic,
+          google,
+      };
 
-    useEffect(() => {
+      // Update local storage
-      localStorage.setItem('preferredLanguage', preferredLanguage);
+      for (const [key, value] of Object.entries(settings)) {
-    }, [preferredLanguage]);
+          if (typeof value === 'boolean') {
+              localStorage.setItem(key, JSON.stringify(value));
+          } else {
+              localStorage.setItem(key, value);
+          }
+      }
+  }, [
+      activeSection,
+      preferredLanguage,
+      preferredCurrency,
+      dateFormat,
+      timeFormat,
+      timeZone,
+      selectedOption,
+      disableChatHistory,
+      disableAIMemory,
+      openSourceMode,
+      newName,
+      newEmail,
+      newPassword,
+      preferredMeasurement,
+      backgroundColor,
+      textColor,
+      inputBackgroundColor,
+      inputButtonColor,
+      inputButtonHoverColor,
+      userMessageBackgroundColor,
+      userMessageTextColor,
+      aiMessageBackgroundColor,
+      aiMessageTextColor,
+      buttonBackgroundColor,
+      buttonHoverBackgroundColor,
+      modelsBackgroundColor,
+      historyBackgroundColor,
+      leftPanelBackgroundColor,
+      conversationBackgroundColor,
+      popUpTextColor,
+      inputBorderColor,
+      fontFamily,
+      fontSize,
+      burgerMenu,
+      selectedTheme,
+      laPlateforme,
+      openAI,
+      anthropic,
+      google,
+  ]);
 
-    useEffect(() => {
+  useEffect(() => {
-      localStorage.setItem('preferredCurrency', preferredCurrency);
+    const savedOption = localStorage.getItem('radioSelection');
-    }, [preferredCurrency]);
+    if (savedOption) {
+      setSelectedOption(savedOption); // Set saved selection
+    }
+  }, []);
 
-    useEffect(() => {
+  const handleRadioChange = (newValue: string) => {
-      localStorage.setItem('dateFormat', dateFormat);
+    setSelectedOption(newValue);  // Update the state with the selected option
-    }, [dateFormat]);
+    localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
-  
+  };
-    useEffect(() => {
-      localStorage.setItem('timeFormat', timeFormat);
-    }, [timeFormat]);
-  
-    useEffect(() => {
-      localStorage.setItem('timeZone', timeZone);
-    }, [timeZone]);
-  
-    useEffect(() => {
-      localStorage.setItem('disableOnlineAI', JSON.stringify(disableOnlineAI));
-    }, [disableOnlineAI]);
-  
-    useEffect(() => {
-      localStorage.setItem('disableChatHistory', JSON.stringify(disableChatHistory));
-    }, [disableChatHistory]);
-  
-    useEffect(() => {
-      localStorage.setItem('disableAIMemory', JSON.stringify(disableAIMemory));
-    }, [disableAIMemory]);
-  
-    useEffect(() => {
-      localStorage.setItem('openSourceMode', JSON.stringify(openSourceMode));
-    }, [openSourceMode]);
-  
-    useEffect(() => {
-      localStorage.setItem('newName', newName);
-    }, [newName]);
-  
-    useEffect(() => {
-      localStorage.setItem('newEmail', newEmail);
-    }, [newEmail]);
-  
-    useEffect(() => {
-      localStorage.setItem('newPassword', newPassword);
-    }, [newPassword]);
-  
-    useEffect(() => {
-      localStorage.setItem('preferredMeasurement', preferredMeasurement);
-    }, [preferredMeasurement]);
-  
-    useEffect(() => {
-      localStorage.setItem('backgroundColor', backgroundColor);
-    }, [backgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('textColor', textColor);
-    }, [textColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('inputBackgroundColor', inputBackgroundColor);
-    }, [inputBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('inputButtonColor', inputButtonColor);
-    }, [inputButtonColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('inputButtonHoverColor', inputButtonHoverColor);
-    }, [inputButtonHoverColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('userMessageBackgroundColor', userMessageBackgroundColor);
-    }, [userMessageBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('userMessageTextColor', userMessageTextColor);
-    }, [userMessageTextColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('aiMessageBackgroundColor', aiMessageBackgroundColor);
-    }, [aiMessageBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('aiMessageTextColor', aiMessageTextColor);
-    }, [aiMessageTextColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('buttonBackgroundColor', buttonBackgroundColor);
-    }, [buttonBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('buttonHoverBackgroundColor', buttonHoverBackgroundColor);
-    }, [buttonHoverBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('modelsBackgroundColor', modelsBackgroundColor);
-    }, [modelsBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('historyBackgroundColor', historyBackgroundColor);
-    }, [historyBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('leftPanelBackgroundColor', leftPanelBackgroundColor);
-    }, [leftPanelBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('conversationBackgroundColor', conversationBackgroundColor);
-    }, [conversationBackgroundColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('popUpTextColor', popUpTextColor);
-    }, [popUpTextColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('inputBorderColor', inputBorderColor);
-    }, [inputBorderColor]);
-  
-    useEffect(() => {
-      localStorage.setItem('fontFamily', fontFamily);
-    }, [fontFamily]);
-  
-    useEffect(() => {
-      localStorage.setItem('fontSize', fontSize);
-    }, [fontSize]);
-
-    useEffect(() => {
-      localStorage.setItem('burgerMenu', burgerMenu);
-    }, [fontSize]);
-  
-    useEffect(() => {
-      localStorage.setItem('selectedTheme', selectedTheme);
-    }, [selectedTheme]);
-  
-    useEffect(() => {
-      localStorage.setItem('laPlateforme', laPlateforme);
-    }, [laPlateforme]);
-  
-    useEffect(() => {
-      localStorage.setItem('openAI', openAI);
-    }, [openAI]);
-  
-    useEffect(() => {
-      localStorage.setItem('anthropic', anthropic);
-    }, [anthropic]);
-  
-    useEffect(() => {
-      localStorage.setItem('google', google);
-    }, [google]);
 
   // Apply imported settings to the CSS variables
   const applySettings = (settings: any) => {
@@ -439,16 +398,33 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
+            
+            {/* AI Mode Radio Options */}
             <div className="settings-option">
-              <label>
+              <p>Disable Options:</p>
-                <input
+              <div className="slider">
-                  type="checkbox"
+                <div
-                  checked={disableOnlineAI}
+                  className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
-                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
+                  onClick={() => handleRadioChange('Offline')} // Handle selection
-                />
+                >
-                Disable Online AI
+                  Offline tools
-              </label>
+                </div>
+                <div
+                  className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''}`}
+                  onClick={() => handleRadioChange('AI Online')}
+                >
+                  Online tools
+                </div>
+                <div
+                  className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
+                  onClick={() => handleRadioChange('None')}
+                >
+                  None
+                </div>
+              </div>
             </div>
+
+            {/* Disable Chat History Checkbox */}
             <div className="settings-option">
               <label>
                 <input
@@ -459,6 +435,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 Disable Chat History
               </label>
             </div>
+
+            {/* Disable AI Memory Checkbox */}
             <div className="settings-option">
               <label>
                 <input
@@ -941,7 +919,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     dateFormat,
     timeFormat,
     timeZone,
-    disableOnlineAI,
+    selectedOption,
     disableChatHistory,
     disableAIMemory,
     openSourceMode,

app/styles/Settings.css

@@ -160,3 +160,28 @@
     padding: 10px;
     margin: 10px;
 }
+
+.slider {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+  
+.slider-option {
+    cursor: pointer;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+  
+.slider-option.active {
+    background-color: #007bff; /* Change to your active color */
+    color: white;
+    border-color: #007bff;
+}
+  
+input[type="radio"] {
+    display: none; /* Hide the default radio buttons */
+  }
+