Fixed the problems delete the branch revert ASAP

app/components/settings/PrivacySettings.tsx

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

app/components/settings/Settings.tsx

@@ -56,14 +56,7 @@ 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(() => {
-    // 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 [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
   const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
   const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
   const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
@@ -112,6 +105,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
   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());
+
   // Per default a purple color gradient
   const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
   const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
@@ -123,6 +117,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
   // API Keys
+
   const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
   const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
   const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
@@ -455,6 +450,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
+
             <PrivacySettings
               selectedOption={selectedOption}
               handleRadioChange={handleRadioChange}
@@ -576,8 +572,8 @@ 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