app/components/Models.tsx

@@ -135,8 +135,36 @@ const modelList = {
     Image: 'pixtral-12b-2409'
   }
 }
-// Define the keys of modelList
-type ModelKeys = keyof typeof modelList;
+
+
+// Define the available selectedAIFunction options
+const modelDropdown = {
+  offlineNonFoss: ['Offline Fast', 'Offline Slow'],
+  offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
+  onlineNonFoss: [
+    'Online Cheap (OpenAI)',
+    '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 = [
+  'Code',
+  'Math',
+  'Language',
+  'Character',
+  'Finance',
+  'Weather',
+  'Time',
+  'Image',
+  'Custom1',
+  'Custom2'
+]
 
 const ModelSection: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
@@ -144,6 +172,7 @@ const ModelSection: React.FC = () => {
   const [radioSelection, setRadioSelection] = useState<string | null>("");
   const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
   const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
+  const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
 
   useEffect(() => {
     // Load initial values from localStorage
@@ -189,9 +218,60 @@ const ModelSection: React.FC = () => {
     localStorage.setItem('type', modelType);
   };
 
-  const isOfflineModel = (model: string) => {
-    return modelList[model as ModelKeys].model_type === 'local';
-  };
+  // Determine the filtered models based on current radioSelection
+  const filteredModels = (() => {
+    let models = [];
+    switch (radioSelection) {
+      case 'Offline':
+        models = [
+          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineFoss,
+        ];
+        if (isOpenSourceMode == "true") {
+          models = [
+            ...modelDropdown.onlineFoss,
+          ];
+        } // Show only offline models without FOSS
+        break;
+      case 'Online':
+        models = [
+          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineFoss,
+        ];
+        if (isOpenSourceMode == "true") {
+          models = [
+            ...modelDropdown.offlineFoss,
+          ];
+        } // Show only online models without FOSS
+        break;
+      case 'None':
+        models = [
+          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineFoss,
+          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineFoss,
+        ];
+        if (isOpenSourceMode == "true") {
+          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) =>
+    modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
     const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;

app/components/settings/Settings.tsx

@@ -112,7 +112,6 @@ 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");
@@ -128,7 +127,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
   const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
   const [google, setGoogle] = useState(localStorage.getItem('google') || "");
-  const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
+  const [myBoolean, setMyBoolean] = useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
 
   const settings = {
     userPreferences: {
@@ -224,7 +223,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
     { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
     { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
-];
+  ];
 
 
   const timeZoneOptions = [
@@ -338,15 +337,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   useEffect(() => {
     const savedOption = localStorage.getItem('radioSelection');
     if (savedOption) {
-      handleRadioChange(savedOption); // Set saved selection
+      savedOption.replace(" (FOSS)", "");
+      setSelectedOption(savedOption); // Set saved selection
     }
   }, []);
 
   const handleRadioChange = (newValue: string) => {
     setSelectedOption(newValue);  // Update the state with the selected option
-    if (openSourceMode) {
-      newValue += " (FOSS)"
-    }
     localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
   };
 
@@ -580,14 +577,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               label="New Name"
               value={newName}
               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"
+              type="email" // Input type is email
               placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
             />
             <TextSettings