Fixed the problems delete the branch revert ASAP

app/components/Models.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+"use client";
+import React, { useState, useEffect } from 'react';
 
-// Sample modelList definition; replace this with your actual modelList
+// Define all models that should be available.
 const modelList = {
   'Offline Fast': {
     model_type: 'local',
@@ -168,54 +169,62 @@ const selectedAIFunction = [
 
 const ModelSection: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
-  const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
-  const [radioSelection, setRadioSelection] = useState<string | null>("");
+  const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
+  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
-    const temp = localStorage.getItem("activeSelectedAIFunction") || "";
-    setActiveSelectedAIFunction(temp);
-
-    // Check if localStorage keys exist, else set defaults
+    var temp = localStorage.getItem("activeSelectedAIFunction") || ""
+    setActiveSelectedAIFunction(temp)
     if (!localStorage.getItem('selectedModelDropdown')) {
-      localStorage.setItem("selectedModelDropdown", "Offline Fast");
+      localStorage.setItem("selectedModelDropdown", "Offline Fast")
     }
 
-    // Set the dropdown and selected AI function from localStorage
-    const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
-    const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
-
-    setSelectedModelDropdown(storedSelectedModel);
-    setCurrentSelectedAIFunction(storedActiveFunction);
+    if (!localStorage.getItem("activeSelectedAIFunction")) {
+      setActiveSelectedAIFunction('Code')
+      localStorage.setItem('activeSelectedAIFunction', 'Code')
+    }
 
     if (!localStorage.getItem("model")) {
-      localStorage.setItem("model", 'starcoder2');
+      localStorage.setItem("model", 'starcoder2')
     }
 
     if (!localStorage.getItem("radioSelection")) {
-      localStorage.setItem("radioSelection", 'None');
+      localStorage.setItem("radioSelection", 'None')
     }
 
-    // Load radio selection from localStorage
-    setRadioSelection(localStorage.getItem('radioSelection') || '');
-  }, []);
+    if (!localStorage.getItem("type")) {
+      localStorage.setItem("type", 'local')
+    }
 
-  const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
+    const handleStorageChange = () => {
+      setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
+    };
+
+    // Update immediately when localStorage changes
+    window.addEventListener('storage', handleStorageChange);
+
+    setRadioSelection(localStorage.getItem('radioSelection') || '');
+    setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
+    // Cleanup listener on component unmount
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []); // Dependency array can remain empty if you only want this to run on mount
+
+  useEffect(() => {
+    var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
+    if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
+      setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
+    }
+  }, [activeSelectedAIFunction]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedModel = event.target.value as ModelKeys;
-    setSelectedModelDropdown(selectedModel);
-    localStorage.setItem('selectedModelDropdown', selectedModel);
-
-    // Update model and type in local storage
-    const modelType = modelList[selectedModel].model_type;
-    const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
-
-    localStorage.setItem('model', model);
-    localStorage.setItem('type', modelType);
+    const newModel = event.target.value;
+    setSelectedModelDropdown(newModel);
+    localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
   };
 
   // Determine the filtered models based on current radioSelection
@@ -274,21 +283,12 @@ const ModelSection: React.FC = () => {
     modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
-    const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
-
-    if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
-      const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
-      const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
-
-      localStorage.setItem('activeSelectedAIFunction', model);
-      setActiveSelectedAIFunction(model);
-      localStorage.setItem('model', newModel);
-      localStorage.setItem('type', modelType);
-      setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
-    } else {
-      console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
-    }
-  };
+    localStorage.setItem('activeSelectedAIFunction', model)
+    setActiveSelectedAIFunction(model)
+    const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
+    localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
+    localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
+  }
 
   return (
     <div className="model-background">
@@ -311,9 +311,8 @@ const ModelSection: React.FC = () => {
 
         {/* Model Grid with Cards */}
         <div className="grid">
-          {Object.keys(modelList[selectedModelDropdown])
-            .filter((key) => key !== 'model_type') // Exclude model_type from display
-            .map((displayedCategory) => (
+          {selectedAIFunction.map(
+            (displayedCategory) => (
               <button
                 key={displayedCategory}
                 className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
@@ -324,8 +323,8 @@ const ModelSection: React.FC = () => {
                   {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
                 </div>
               </button>
-            ))
-          }
+            )
+          )}
         </div>
       </div>
     </div>