mostly working version

app/components/Models.tsx

@@ -1,148 +1,104 @@
 import React, { useState, useEffect } from 'react';
 
 // Define the available model options
-const offlineModels = [
-  'Offline Fast',
-  'Offline Fast (FOSS)',
-  'Offline Slow',
-  'Offline Slow (FOSS)',
-];
+const modelDropdown = {
+  offlineModels: [
+    'Offline Fast',
+    'Offline Fast (FOSS)',
+    'Offline Slow',
+    'Offline Slow (FOSS)',
+  ],
 
-const onlineModels = [
-  'Online (La Plateforme)',
-  'Online (FOSS) (La Plateforme)',
-  'Online Cheap (OpenAI)',
-  'Online Expensive (OpenAI)',
-  'Online Cheap (Anthropic)',
-  'Online Expensive (Anthropic)',
-  'Online Cheap (Google)',
-  'Online Expensive (Google)',
-];
+  onlineModels: [
+    'Online (La Plateforme)',
+    'Online (FOSS) (La Plateforme)',
+    'Online Cheap (OpenAI)',
+    'Online Expensive (OpenAI)',
+    'Online Cheap (Anthropic)',
+    'Online Expensive (Anthropic)',
+    'Online Cheap (Google)',
+    'Online Expensive (Google)',
+  ],
 
-const fossModels = [
-  'Offline Fast (FOSS)',
-  'Offline Slow (FOSS)',
-  'Online (FOSS) (La Plateforme)',
-];
+  fossModels: [
+    'Offline Fast (FOSS)',
+    'Offline Slow (FOSS)',
+    'Online (FOSS) (La Plateforme)',
+  ],
+};
 
-// Define the properties passed to the Models component
-interface ModelsProps {
-  selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
-}
+const Models: React.FC = () => {
+  // Initialize state with value from localStorage or default to ''
+  const [radioSelection, setRadioSelection] = useState(() => localStorage.getItem('radioSelection') || '');
 
-const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
-  const [selectedModel, setSelectedModel] = useState<string>(() => {
-    return localStorage.getItem('selectedModel') || 'Offline Fast';
-  });
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setRadioSelection(localStorage.getItem('radioSelection') || '');
+    };
+
+    // Update dropdown immediately when localStorage changes internally or externally
+    window.addEventListener('storage', handleStorageChange);
+
+    // Cleanup listener on component unmount
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
-    setSelectedModel(newModel);
+    setRadioSelection(newModel);
+    localStorage.setItem('radioSelection', newModel); // Update localStorage directly
   };
 
-  const isOfflineModel = (model: string) => offlineModels.includes(model);
-  const isOnlineModel = (model: string) => onlineModels.includes(model);
-  const isFossModel = (model: string) => fossModels.includes(model);
-
-  useEffect(() => {
-    localStorage.setItem('selectedModel', selectedModel);
-  }, [selectedModel]);
-
+  // Determine the filtered models based on current radioSelection
   const filteredModels = (() => {
-    switch (selectedOption) {
+    switch (radioSelection) {
       case 'Offline':
-        return offlineModels; // Show only offline models
+        return modelDropdown.offlineModels; // Show only offline models
       case 'AI Online':
-        return onlineModels; // Show only online models
+        return modelDropdown.onlineModels; // Show only online models
+      case 'FOSS':
+        return modelDropdown.fossModels; // Show only FOSS models
       default:
-        return [...offlineModels, ...onlineModels]; // Show all models
+        return [...modelDropdown.offlineModels, ...modelDropdown.onlineModels, ...modelDropdown.fossModels]; // Show all models if nothing matches
     }
   })();
 
+  const isOfflineModel = (model: string) => modelDropdown.offlineModels.includes(model);
+
   return (
     <div className="model-background">
-      <div className="models">
-        <div className="title">
-          <h3>Different AI models</h3>
-        </div>
+    <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 Selection Dropdown */}
+      <div className="model-dropdown">
+        <label htmlFor="model-select">Select AI Model:</label>
+        <select id="model-select" value={radioSelection} 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">
+      {/* Model Grid with Cards */}
+      <div className="grid">
+        {['Code', 'Math', 'Language', 'Character', 'Finance', 'Weather', 'Time', 'Image', 'Custom1', 'Custom2'].map((category) => (
+          <button key={category} className={`${category.toLowerCase()}-model model-box`}>
             <div className="overlay">
-              <h3>Code</h3>
-              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+              <h3>{category}</h3>
+              {isOfflineModel(radioSelection) && <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> 
   );
 };