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