Merge pull request 'main' (#109) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/109

app/backend/GetLocalStorage.ts

@@ -2,7 +2,7 @@
 
 export const getAllLocalStorageItems = (): Record<string, string | null> => {
     const allData: Record<string, string | null> = {};
-    
+  if (typeof localStorage !== 'undefined') {
     for (let i = 0; i < localStorage.length; i++) {
       const key = localStorage.key(i);
       if (key) {
@@ -10,6 +10,7 @@ export const getAllLocalStorageItems = (): Record<string, string | null> => {
         allData[key] = value;
       }
     }
+  }
     return allData;
   };
   

app/backend/InputOutputHandler.tsx

@@ -20,23 +20,25 @@ const InputOutputBackend: React.FC = () => {
   const [timeZone, setTimeZone] = useState<string>("GMT");
   const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
   const [messages, setMessages] = useState<Message[]>([]);
-  const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
+  const [myBoolean, setMyBoolean] = useState<boolean>(false);
   const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create")
-  apiURL.hostname = window.location.hostname;
+  if (typeof window !== 'undefined') {
-
+    apiURL.hostname = window.location.hostname;
-  // Fetch local storage values and update state on component mount
+  } else {
-  useEffect(() => {
+    apiURL.hostname = "localhost"
-    setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD");
+  }
-    setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english");
+  
-    setTimeFormat(localStorage.getItem("timeFormat") || "24-hour");
-    setPreferredMeasurement(localStorage.getItem("preferredMeasurement") || "metric");
-    setTimeZone(localStorage.getItem("timeZone") || "GMT");
-    setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
-    setMyBoolean(localStorage.getItem('myBoolean') === 'true');
-  }, []);
-
   // Update messages when any of the settings change
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
+      setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD");
+      setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english");
+      setTimeFormat(localStorage.getItem("timeFormat") || "24-hour");
+      setPreferredMeasurement(localStorage.getItem("preferredMeasurement") || "metric");
+      setTimeZone(localStorage.getItem("timeZone") || "GMT");
+      setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
+      setMyBoolean(localStorage.getItem('myBoolean') === 'true');
+    }
     const measurementString = (preferredMeasurement == "Metric")
       ? "All measurements follow the metric system. Refuse to use any other measurement system."
       : "All measurements follow the imperial system. Refuse to use any other measurement system.";
@@ -113,7 +115,12 @@ const InputOutputBackend: React.FC = () => {
     if (!getWorkerRef.current) {
       getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url))
 
-      const windowname = window.location.hostname
+      let windowname = "localhost"
+      if (typeof window !== 'undefined') {
+        windowname = window.location.hostname
+      } else {
+        windowname = "localhost"
+      }
 
       getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname })
 
@@ -169,12 +176,15 @@ const InputOutputBackend: React.FC = () => {
         setInputDisabled(true)
         if (postWorkerRef.current) {
           addMessage("user", inputValue)
-          const type = localStorage.getItem('type')
+          let type:string = "local"
           let api_key: string = ""
-          if (type != null && type != 'local') {
+          if (typeof localStorage !== 'undefined') {
-            const try_key = localStorage.getItem(type)
+            type = localStorage.getItem('type') || "local"
-            if (try_key) {
+            if (type != null && type != 'local') {
-              api_key = try_key
+              const try_key = localStorage.getItem(type)
+              if (try_key) {
+                api_key = try_key
+              }
             }
           }
           setInputMessage("")

app/backend/database.ts

@@ -125,9 +125,11 @@ export const checkCredentials = async (usernameOrEmail: string, password: string
   };
   const sendBack = await sendToDatabase(data);
   if (sendBack) {
-    localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, password))
+    if (typeof localStorage !== 'undefined') {
-    localStorage.setItem("accountName", await getName(usernameOrEmail, password))
+      localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, password))
-    localStorage.setItem("accountPassword", password)
+      localStorage.setItem("accountName", await getName(usernameOrEmail, password))
+      localStorage.setItem("accountPassword", password)
+    }
   }
   return sendBack
 };

app/backend/voice_backend.ts

@@ -6,7 +6,11 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
     formdata.append("audio", audio_data)
 
     const apiURL = new URL("http://localhost:5000/interstellar_ai/api/voice_recognition")
-    apiURL.hostname = window.location.hostname;
+    if (typeof window !== 'undefined') {
+        apiURL.hostname = window.location.hostname;
+    } else {
+        apiURL.hostname = "localhost"
+    }
 
     return axios.post(apiURL.href, formdata)
         .then((response) => {

app/components/Login.tsx

@@ -23,20 +23,27 @@ const Login: React.FC = () => {
 
   // On component mount, check if there are credentials in localStorage
   useEffect(() => {
-    const savedAccountName = localStorage.getItem('accountName');
+    let savedAccountName:string|null;
-    const savedAccountEmail = localStorage.getItem('accountEmail');
+    let savedAccountEmail:string|null;
-    const savedAccountPassword = localStorage.getItem('accountPassword');
+    let savedAccountPassword:string|null;
-
+    if (typeof localStorage !== 'undefined') {
-    // If credentials are found in localStorage, log the user in
+      savedAccountName = localStorage.getItem('accountName');
-    if (savedAccountName && savedAccountEmail && savedAccountPassword) {
+      savedAccountEmail = localStorage.getItem('accountEmail');
-      setAccountName(savedAccountName);
+      savedAccountPassword = localStorage.getItem('accountPassword');
-      setEmail(savedAccountEmail);
+      
-      setPassword(savedAccountPassword);
+      // If credentials are found in localStorage, log the user in
-      const check = async () => {
+      if (savedAccountName && savedAccountEmail && savedAccountPassword) {
-        const success = await checkCredentials(savedAccountName, savedAccountPassword);
+        setAccountName(savedAccountName);
-        setIsLoggedIn(success); // Automatically log in
+        setEmail(savedAccountEmail);
-      };
+        setPassword(savedAccountPassword);
-      check();
+        const check = async () => {
+          if (savedAccountName !== null && savedAccountPassword !== null) {
+            const success = await checkCredentials(savedAccountName, savedAccountPassword);
+            setIsLoggedIn(success); // Automatically log in
+          }
+        };
+        check();
+      }
     }
   }, []);
 
@@ -57,7 +64,9 @@ const Login: React.FC = () => {
         setIsLoggedIn(true); // Successful login
         const data = await getData(accountName, password)
         if (data) {
-          localStorage.setItem("dataFromServer", data)
+          if (typeof localStorage !== 'undefined') { 
+            localStorage.setItem("dataFromServer", data)
+          }
         }
         setShowLoginPopup(false); // Close the login popup
       } else {

app/components/Models.tsx

@@ -173,60 +173,72 @@ const ModelSection: React.FC = () => {
   const [radioSelection, setRadioSelection] = useState<string | null>("")
   const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
   const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
-  const [isOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
+  const [isOpenSourceMode, setIsOpenSourceMode] = useState<string|null>("false")
 
   useEffect(() => {
-    const temp = localStorage.getItem("activeSelectedAIFunction") || ""
+    if (typeof localStorage !== 'undefined') {
-    setActiveSelectedAIFunction(temp)
+      
-    if (!localStorage.getItem('selectedModelDropdown')) {
+      setIsOpenSourceMode(localStorage.getItem("openSourceMode"))
-      localStorage.setItem("selectedModelDropdown", "Offline Fast")
+      const temp = localStorage.getItem("activeSelectedAIFunction") || ""
-    }
+      setActiveSelectedAIFunction(temp)
-
+      if (!localStorage.getItem('selectedModelDropdown')) {
-    if (!localStorage.getItem("activeSelectedAIFunction")) {
+        localStorage.setItem("selectedModelDropdown", "Offline Fast")
-      setActiveSelectedAIFunction('Code')
+      }
-      localStorage.setItem('activeSelectedAIFunction', 'Code')
+      
-    }
+      if (!localStorage.getItem("activeSelectedAIFunction")) {
-
+        setActiveSelectedAIFunction('Code')
-    if (!localStorage.getItem("model")) {
+        localStorage.setItem('activeSelectedAIFunction', 'Code')
-      localStorage.setItem("model", 'starcoder2')
+      }
-    }
+      
-
+      if (!localStorage.getItem("model")) {
-    if (!localStorage.getItem("radioSelection")) {
+        localStorage.setItem("model", 'starcoder2')
-      localStorage.setItem("radioSelection", 'None')
+      }
-    }
+      
-
+      if (!localStorage.getItem("radioSelection")) {
-    if (!localStorage.getItem("type")) {
+        localStorage.setItem("radioSelection", 'None')
-      localStorage.setItem("type", 'local')
+      }
-    }
+      
-
+      if (!localStorage.getItem("type")) {
-    const handleStorageChange = () => {
+        localStorage.setItem("type", 'local')
+      }
+      
+      const handleStorageChange = () => {
+        setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
+      };
+      
+      // Update immediately when localStorage changes
+      if (typeof window !== 'undefined') {
+        window.addEventListener('storage', handleStorageChange);
+      }
+      
+      setRadioSelection(localStorage.getItem('radioSelection') || '');
       setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
-    };
+      // Cleanup listener on component unmount
-
+      return () => {
-    // Update immediately when localStorage changes
+        if (typeof window !== 'undefined') {
-    window.addEventListener('storage', handleStorageChange);
+          window.removeEventListener('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(() => {
-    const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
+    if (typeof localStorage !== 'undefined') {
-    if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
+      const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
-      setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
+      if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
+        setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
+      }
     }
   }, [activeSelectedAIFunction]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
     setSelectedModelDropdown(newModel);
-    localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
+    if (typeof localStorage !== 'undefined') {
-    const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
+      localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
-    modelClicked(model)
+      const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
+      modelClicked(model)
+    }
   };
 
   // Determine the filtered models based on current radioSelection
@@ -285,12 +297,14 @@ const ModelSection: React.FC = () => {
     modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
-    localStorage.setItem('activeSelectedAIFunction', model)
+    if (typeof localStorage !== 'undefined') {
-    setActiveSelectedAIFunction(model)
+      localStorage.setItem('activeSelectedAIFunction', model)
-    const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast'
+      setActiveSelectedAIFunction(model)
-    const selectedAIFunction = modelDropdown as keyof typeof modelList;
+      const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast'
-    localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
+      const selectedAIFunction = modelDropdown as keyof typeof modelList;
-    localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
+      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 (

app/components/settings/DropDownTheme.tsx

@@ -20,7 +20,7 @@ const ThemeDropdown: React.FC<{
         value={selectedTheme}
         onChange={(e) => {
           const theme = e.target.value;
-          if (theme !== 'default') {
+          if (theme !== 'default' && typeof localStorage !== 'undefined') {
             setSelectedTheme(theme);
             localStorage.setItem('selectedTheme', theme);
           }

app/components/settings/Settings.tsx

@@ -19,8 +19,12 @@ import ThemeDropdown from './DropDownTheme';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
+  //#region initialize Variables
+  let item:string|null;
   const getItemFromLocalStorage = (key: string) => {
-    const item = localStorage.getItem(key);
+    if (typeof localStorage !== 'undefined') { 
+      item = localStorage.getItem(key)
+    }
 
     if (item) {
       try {
@@ -35,32 +39,48 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   // Active section
-  const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
+  const [activeSection, setActiveSection] = useState('general');
 
   // Language setting
-  const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
+  const [preferredLanguage, setPreferredLanguage] = useState("en");
 
   // Currency setting
-  const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
+  const [preferredCurrency, setPreferredCurrency] = useState('usd');
 
   // Date and time format settings
-  const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
+  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
-  const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
+  const [timeFormat, setTimeFormat] = useState('12-hour');
-  const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
+  const [timeZone, setTimeZone] = useState('GMT');
 
   // Online AI and chat history settings
   const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
-  const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
+  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
-  const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
+  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
-  const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
+  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
 
   // User credentials
-  const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
+  const [newName, setNewName] = useState('');
-  const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
+  const [newEmail, setNewEmail] = useState('');
-  const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
+  const [newPassword, setNewPassword] = useState('');
 
   // Measurement setting
-  const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
+  const [preferredMeasurement, setPreferredMeasurement] = useState('Metric');
+
+  useEffect(() => {
+    setActiveSection(getItemFromLocalStorage("activeSection") || "general")
+    setPreferredLanguage(getItemFromLocalStorage("preferredLanguage") || 'en')
+    setPreferredCurrency(getItemFromLocalStorage("preferredCurrency") || "usd")
+    setDateFormat(getItemFromLocalStorage("dateFormat") || "mm/dd/yyyy")
+    setTimeFormat(getItemFromLocalStorage("timeFormat") || "12-hour")
+    setTimeZone(getItemFromLocalStorage("timeZone") || "GMT")
+    setDisableChatHistory(getItemFromLocalStorage('disableChatHistory').toLowerCase()==="true") //#TODO Idk if it works
+    setDisableAIMemory(getItemFromLocalStorage('disableAIMemory').toLowerCase()==="true")
+    setOpenSourceMode(getItemFromLocalStorage('openSourceMode').toLowerCase() === "true")
+    setNewName(getItemFromLocalStorage("newName") || "")
+    setNewEmail(getItemFromLocalStorage("newEmail") || "")
+    setNewPassword(getItemFromLocalStorage("newPassword") || "")
+    setPreferredMeasurement(getItemFromLocalStorage("preferredMeasurement") || "Metric")
+  },[])
 
   // Theme settings
   const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@@ -99,22 +119,40 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   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 [primaryColor, setPrimaryColor] = useState("#dc8add");
-  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
+  const [secondaryColor, setSecondaryColor] = useState("#c061cb");
-  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
+  const [accentColor, setAccentColor] = useState("#9141ac");
-  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c");
-  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState("#fefefe");
+
+  useEffect(() => {
+    setPrimaryColor(getItemFromLocalStorage("primaryColor"))
+    setSecondaryColor(getItemFromLocalStorage("secondaryColor"))
+    setAccentColor(getItemFromLocalStorage("accentColor"))
+    setBasicBackgroundColor(getItemFromLocalStorage("basicBackgroundColor"))
+    setBasicTextColor(getItemFromLocalStorage("basicTextColor"))
+  },[])
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
   // API Keys
 
-  const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
+  const [mistral, setMistral] = useState<string>("");
-  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
+  const [openai, setOpenai] = useState<string>("");
-  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
+  const [anthropic, setAnthropic] = useState<string>("");
-  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
+  const [google, setGoogle] = useState<string>("");
-  const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean'));
+  const [myBoolean, setMyBoolean] = useState<boolean>(false);
+
+  useEffect(() => {
+    setMistral(getItemFromLocalStorage("mistral") || "")
+    setOpenai(getItemFromLocalStorage("openai") || "")
+    setAnthropic(getItemFromLocalStorage("anthropic") || "")
+    setGoogle(getItemFromLocalStorage("google") || "")
+    setMyBoolean(getItemFromLocalStorage("myBoolean").toLowerCase() === "true")
+  },[])
+
+  //#region set Settings
 
   const settings = {
     userPreferences: {
@@ -287,17 +325,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
   ];
 
+  //#region functions for changing Settings
+
   const handleLogout = () => {
-    localStorage.clear();
+    if (typeof window !!== "undefined" && typeof localStorage !== 'undefined') {
-    alert('Successfully logged out!');
+      localStorage.clear();
-    window.location.reload();
+      alert('Successfully logged out!');
+      window.location.reload();
+    }
   };
 
   useEffect(() => {
-    const savedTheme = localStorage.getItem('selectedTheme');
+    if (typeof localStorage !== 'undefined') {
-    if (savedTheme) {
+      const savedTheme = localStorage.getItem('selectedTheme');
-      setSelectedTheme(savedTheme);
+      if (savedTheme) {
-      applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
+        setSelectedTheme(savedTheme);
+        applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
+      }
     }
   }, []); // Runs only once when the component mounts
 
@@ -311,8 +355,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       ...settings.generalSettings,
     };
     // Update localStorage for all settings
-    for (const [key, value] of Object.entries(flattenedSettings)) {
+    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
+      for (const [key, value] of Object.entries(flattenedSettings)) {
+        localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
+      }
     }
   }, [
     ...Object.values(settings.userPreferences),
@@ -322,41 +368,50 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   ]);
 
   useEffect(() => {
-    const savedOption = localStorage.getItem('radioSelection');
+    if (typeof localStorage !== 'undefined') {
-    if (savedOption) {
+      const savedOption = localStorage.getItem('radioSelection');
-      savedOption.replace(" (FOSS)", "");
+      if (savedOption) {
-      setSelectedOption(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 (typeof localStorage !== 'undefined') {
-    localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
+      setSelectedOption(newValue);  // Update the state with the selected option
+      localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
+    }
   };
 
   // Function to handle updating all credentials
   const handleUpdateCredentials = async () => {
-    let useName = localStorage.getItem("accountName")
+    if (typeof localStorage !== 'undefined') {
-    let useEmail = localStorage.getItem("accountEmail")
+      
-    let usePassword = localStorage.getItem("accountPassword")
+      let useName = localStorage.getItem("accountName")
-    if (useName && useEmail && usePassword) {
+      let useEmail = localStorage.getItem("accountEmail")
-      await deleteAccount(useName, usePassword)
+      let usePassword = localStorage.getItem("accountPassword")
+      if (useName && useEmail && usePassword) {
+        await deleteAccount(useName, usePassword)
 
-      if (newName != "") {
+        if (newName != "") {
-        useName = newName
+          useName = newName
-      } if (newEmail != "") {
+        } if (newEmail != "") {
-        useEmail = newEmail
+          useEmail = newEmail
-      } if (newPassword != "") {
+        } if (newPassword != "") {
-        usePassword = newPassword
+          usePassword = newPassword
-      }
+        }
 
-      if (await createAccount(useName, useEmail, usePassword)) {
+        if (await createAccount(useName, useEmail, usePassword)) {
-        if (await changeData(useName, usePassword, settings)) {
+          if (await changeData(useName, usePassword, settings)) {
-          localStorage.setItem("currentName", useName)
+            if (typeof window !== 'undefined') {
-          localStorage.setItem("currentPassword", usePassword)
+              localStorage.setItem("currentName", useName)
-          localStorage.setItem("currentEmail", useEmail)
+              localStorage.setItem("currentPassword", usePassword)
-          alert('Account successfully changed!')
+              localStorage.setItem("currentEmail", useEmail)
-          window.location.reload()
+              alert('Account successfully changed!')
+              window.location.reload()
+            }
+          }
         }
       }
     }
@@ -364,22 +419,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   // Function to handle account deletion
   const handleDeleteAccount = async () => {
-    const useName = localStorage.getItem("accountName")
+    if (typeof localStorage !== 'undefined') {
-    const usePassword = localStorage.getItem("accountPassword")
+      
-    if (useName && usePassword) {
+      const useName = localStorage.getItem("accountName")
-      const success = await deleteAccount(useName, usePassword);
+      const usePassword = localStorage.getItem("accountPassword")
-      if (success) {
+      if (useName && usePassword) {
-        localStorage.clear();
+        const success = await deleteAccount(useName, usePassword);
-        alert('Account deleted successfully!');
+        if (success && typeof window !== 'undefined' ) {
-        window.location.reload()
+          localStorage.clear();
-        // Optionally, redirect or reset state here
+          alert('Account deleted successfully!');
-      } else {
+          window.location.reload()
-        alert('Account deletion failed. Please check your password.');
+          // Optionally, redirect or reset state here
+        } else {
+          alert('Account deletion failed. Please check your password.');
+        }
       }
     }
   };
 
-
+  //#region rendering
   // Render settings content based on the active section
   const renderSettingsContent = () => {
     switch (activeSection) {
@@ -571,6 +629,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
 
       case 'account':
+        const namePlaceholder = getItemFromLocalStorage("accountName") || "Current Name"
+        const emailPlaceholder = getItemFromLocalStorage("accountEmail") || "Current Email"
         return (
           <div className="settings-section">
             <h2>Account Settings</h2>
@@ -579,14 +639,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={newName}
               type='text'
               setValue={setNewName}
-              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
+              placeholder={namePlaceholder} // Show current name or a default
             />
             <TextSettings
               label="New Email"
               value={newEmail}
               setValue={setNewEmail}
               type="email" // Input type is email
-              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
+              placeholder={emailPlaceholder} // Show current email or a default
             />
             <TextSettings
               label="New Password"
@@ -614,6 +674,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
       case 'api':
+        const mistral_APIKey_PlaceHolder = getItemFromLocalStorage("mistral") || "Enter the API key"
+        const openai_APIKey_PlaceHolder = getItemFromLocalStorage("openai") || "Enter the API key"
+        const anthropic_APIKey_PlaceHolder = getItemFromLocalStorage("anthropic") || "Enter the API key"
+        const google_APIKey_PlaceHolder = getItemFromLocalStorage("google") || "Enter the API key"
         return (
           <div className="settings-section">
             <TextSettings
@@ -621,7 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={mistral} // State variable for the input
               setValue={setMistral} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('mistral') || "Enter the API key"}
+              placeholder={mistral_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
@@ -633,7 +697,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={openai} // State variable for the input
               setValue={setOpenai} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('openai') || "Enter the API key"}
+              placeholder={openai_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
@@ -645,7 +709,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={anthropic} // State variable for the input
               setValue={setAnthropic} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
+              placeholder={anthropic_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
@@ -657,7 +721,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={google} // State variable for the input
               setValue={setGoogle} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('google') || "Enter the API key"}
+              placeholder={google_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
@@ -742,8 +806,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={async () => {
               getAllLocalStorageItems();
               closeSettings();
-              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              if (typeof localStorage !== 'undefined') {
-              window.location.reload();
+                await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              }
+              if (typeof window !== 'undefined') {
+                window.location.reload();
+              }
             }}>
               Apply
             </button>

app/components/settings/settingUtils.ts

@@ -5,11 +5,13 @@ export function exportSettings(): string {
     const settings: { [key: string]: string } = {};
 
     // Loop through all keys in localStorage and add them to the settings object
-    for (let i = 0; i < localStorage.length; i++) {
+    if (typeof localStorage !== 'undefined') { 
-        const key = localStorage.key(i);
+        for (let i = 0; i < localStorage.length; i++) {
-        if (key) {
+            const key = localStorage.key(i);
-            if (key !== "accountName" && key !== "accountPassword" && key !== "accountEmail") {
+            if (key) {
-                settings[key] = localStorage.getItem(key) || "";
+                if (key !== "accountName" && key !== "accountPassword" && key !== "accountEmail") {
+                    settings[key] = localStorage.getItem(key) || "";
+                }
             }
         }
     }
@@ -24,9 +26,11 @@ export function importSettings(jsonData: string): void {
         const parsedSettings = JSON.parse(jsonData);
 
         // Loop through parsed settings and save them in localStorage
-        Object.keys(parsedSettings).forEach((key) => {
+        if (typeof localStorage !== 'undefined') {   
-            localStorage.setItem(key, parsedSettings[key]);
+            Object.keys(parsedSettings).forEach((key) => {
-        });
+                localStorage.setItem(key, parsedSettings[key]);
+            });
+        }
 
         console.log("Settings imported successfully!");
     } catch (error) {

app/components/settings/theme.ts

@@ -114,80 +114,82 @@ export const applyBlackTheme = () => {
 };
 
 export const applyCustomTheme = () => {
-  const themeVariables = {
+  if (typeof localStorage !== 'undefined') {
-    backgroundColor: localStorage.getItem('backgroundColor'),
+    const themeVariables = {
-    headerBackground: localStorage.getItem('headerBackground'),
+      backgroundColor: localStorage.getItem('backgroundColor'),
-    headerTextColor: localStorage.getItem('headerTextColor'),
+      headerBackground: localStorage.getItem('headerBackground'),
-    textColor: localStorage.getItem('textColor'),
+      headerTextColor: localStorage.getItem('headerTextColor'),
-    inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
+      textColor: localStorage.getItem('textColor'),
-    inputButtonColor: localStorage.getItem('inputButtonColor'),
+      inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
-    inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
+      inputButtonColor: localStorage.getItem('inputButtonColor'),
-    userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
+      inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
-    userMessageTextColor: localStorage.getItem('userMessageTextColor'),
+      userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
-    aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
+      userMessageTextColor: localStorage.getItem('userMessageTextColor'),
-    aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
+      aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
-    buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
+      aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
-    buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
+      buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
-    modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
+      buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
-    historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
+      modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
-    leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
+      historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
-    conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+      leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
-    docBackgroundColor: localStorage.getItem('docBackgroundColor'),
+      conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
-    closeButtonColor: localStorage.getItem('closeButtonColor'),
+      docBackgroundColor: localStorage.getItem('docBackgroundColor'),
-    closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
+      closeButtonColor: localStorage.getItem('closeButtonColor'),
-    applyButtonColor: localStorage.getItem('applyButtonColor'),
+      closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
-    applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
+      applyButtonColor: localStorage.getItem('applyButtonColor'),
-    burgerMenu: localStorage.getItem('burgerMenu'),
+      applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
-    overlayTextColor: localStorage.getItem('overlayTextColor'),
+      burgerMenu: localStorage.getItem('burgerMenu'),
-    faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+      overlayTextColor: localStorage.getItem('overlayTextColor'),
-    faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+      faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
-    faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+      faqHeadingColor: localStorage.getItem('faqHeadingColor'),
-    faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+      faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
-    faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+      faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
-    faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+      faqItemTextColor: localStorage.getItem('faqItemTextColor'),
-    popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
+      faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
-    popUpText: localStorage.getItem('popUpText'),
+      popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
-    inputBorderColor: localStorage.getItem('inputBorderColor'),
+      popUpText: localStorage.getItem('popUpText'),
-    fontFamily: localStorage.getItem('fontFamily'),
+      inputBorderColor: localStorage.getItem('inputBorderColor'),
-    fontSize: localStorage.getItem('fontSize'),
+      fontFamily: localStorage.getItem('fontFamily'),
+      fontSize: localStorage.getItem('fontSize'),
+    };
+    
+    document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
+    document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
+    document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
+    document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
+    document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
+    document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
+    document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
+    document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
+    document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
+    document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
+    document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
+    document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
+    document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+    document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
+    document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
+    document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
+    document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
+    document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
+    document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
+    document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
   };
-
+}
-  document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
-  document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
-  document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
-  document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
-  document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
-  document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
-  document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
-  document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
-  document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
-  document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
-  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
-  document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
-  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
-  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
-  document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
-  document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
-  document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
-  document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
-  document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
-};
 
 // TypeScript types for color parameters
 type Color = string;
@@ -247,8 +249,10 @@ export const applyBasicCustomTheme = (
   document.documentElement.style.setProperty('--popup-background-color', accentColor);
   document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
   document.documentElement.style.setProperty('--input-border-color', primaryColor);
-  document.documentElement.style.setProperty('--font-family', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'");
+  if (typeof localStorage !== 'undefined') {
-  document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px');
+    document.documentElement.style.setProperty('--font-family', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px');
+  }
 };
 
 // Helper function to darken a color (returns a darker version of the provided color)

app/page.tsx

@@ -15,20 +15,22 @@ const LandingPage: React.FC = () => {
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
   const conversationRef = useRef<HTMLDivElement>(null);
 
-  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+    const [primaryColor, setPrimaryColor] = useState("#fefefe");
-  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+    const [secondaryColor, setSecondaryColor] = useState("#fefefe");
-  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+    const [accentColor, setAccentColor] = useState("#fefefe");
-  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+    const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe");
-  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+    const [basicTextColor, setBasicTextColor] = useState("#fefefe");
 
   // Synchronize state with local storage on mount
   useEffect(() => {
-    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
+    if (typeof localStorage !== 'undefined') {
-    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
+      setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
-    setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
+      setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
-    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+      setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
-    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
+      setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
-  }, []);
+      setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
+    }
+  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
 
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
@@ -43,33 +45,35 @@ const LandingPage: React.FC = () => {
 
   // Apply theme based on selectedTheme and color settings
   useEffect(() => {
-    const savedTheme = localStorage.getItem('selectedTheme');
+    if (typeof localStorage !== 'undefined') {
-    if (savedTheme) {
+      const savedTheme = localStorage.getItem('selectedTheme');
-      switch (savedTheme) {
+      if (savedTheme) {
-        case 'IOMARKET':
+        switch (savedTheme) {
-          applyIOMarketTheme();
+          case 'IOMARKET':
-          break;
+            applyIOMarketTheme();
-        case 'WHITE':
+            break;
-          applyWhiteTheme();
+            case 'WHITE':
-          break;
+              applyWhiteTheme();
-        case 'BLACK':
+            break;
-          applyBlackTheme();
+          case 'BLACK':
-          break;
+            applyBlackTheme();
-        case 'CUSTOM':
+            break;
-          applyCustomTheme();
+          case 'CUSTOM':
-          break;
+            applyCustomTheme();
-        case 'BASIC-CUSTOM':
+            break;
-          applyBasicCustomTheme(
+            case 'BASIC-CUSTOM':
-            primaryColor,
+              applyBasicCustomTheme(
-            secondaryColor,
+              primaryColor,
-            accentColor,
+              secondaryColor,
-            basicBackgroundColor,
+              accentColor,
-            basicTextColor
+              basicBackgroundColor,
-          );
+              basicTextColor
-          break;
+            );
-        default:
+            break;
-          applyIOMarketTheme();
+          default:
-          break;
+            applyIOMarketTheme();
+            break;
+        }
       }
     }
   }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly