fix ssr

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,12 +20,17 @@ 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")
+  if (typeof window !== 'undefined') {
     apiURL.hostname = window.location.hostname;
+  } else {
+    apiURL.hostname = "localhost"
+  }
   
-  // Fetch local storage values and update state on component mount
+  // 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");
@@ -33,10 +38,7 @@ const InputOutputBackend: React.FC = () => {
       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(() => {
     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,14 +176,17 @@ 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 (typeof localStorage !== 'undefined') {
+            type = localStorage.getItem('type') || "local"
             if (type != null && type != 'local') {
               const try_key = localStorage.getItem(type)
               if (try_key) {
                 api_key = try_key
               }
             }
+          }
           setInputMessage("")
           const windowname = window.location.hostname
           postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key, windowname })

app/backend/database.ts

@@ -125,10 +125,12 @@ export const checkCredentials = async (usernameOrEmail: string, password: string
   };
   const sendBack = await sendToDatabase(data);
   if (sendBack) {
+    if (typeof localStorage !== 'undefined') {
       localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, 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")
+    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,9 +23,13 @@ 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') {
+      savedAccountName = localStorage.getItem('accountName');
+      savedAccountEmail = localStorage.getItem('accountEmail');
+      savedAccountPassword = localStorage.getItem('accountPassword');
       
       // If credentials are found in localStorage, log the user in
       if (savedAccountName && savedAccountEmail && savedAccountPassword) {
@@ -33,11 +37,14 @@ const Login: React.FC = () => {
         setEmail(savedAccountEmail);
         setPassword(savedAccountPassword);
         const check = async () => {
+          if (savedAccountName !== null && savedAccountPassword !== null) {
             const success = await checkCredentials(savedAccountName, savedAccountPassword);
             setIsLoggedIn(success); // Automatically log in
+          }
         };
         check();
       }
+    }
   }, []);
 
   // Function to toggle the login popup
@@ -57,8 +64,10 @@ const Login: React.FC = () => {
         setIsLoggedIn(true); // Successful login
         const data = await getData(accountName, password)
         if (data) {
+          if (typeof localStorage !== 'undefined') { 
             localStorage.setItem("dataFromServer", data)
           }
+        }
         setShowLoginPopup(false); // Close the login popup
       } else {
         alert('Incorrect credentials');

app/components/Models.tsx

@@ -173,9 +173,12 @@ 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(() => {
+    if (typeof localStorage !== 'undefined') {
+      
+      setIsOpenSourceMode(localStorage.getItem("openSourceMode"))
       const temp = localStorage.getItem("activeSelectedAIFunction") || ""
       setActiveSelectedAIFunction(temp)
       if (!localStorage.getItem('selectedModelDropdown')) {
@@ -204,29 +207,38 @@ const ModelSection: React.FC = () => {
       };
       
       // 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 () => {
+        if (typeof window !== 'undefined') {
           window.removeEventListener('storage', handleStorageChange);
+        }
       };
+    }
   }, []); // Dependency array can remain empty if you only want this to run on mount
 
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
       const storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
       if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
         setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
       }
+    }
   }, [activeSelectedAIFunction]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
     setSelectedModelDropdown(newModel);
+    if (typeof localStorage !== 'undefined') {
       localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
       const model = localStorage.getItem('activeSelectedAIFunction') || "Code"
       modelClicked(model)
+    }
   };
 
   // Determine the filtered models based on current radioSelection
@@ -285,6 +297,7 @@ const ModelSection: React.FC = () => {
     modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
+    if (typeof localStorage !== 'undefined') {
       localStorage.setItem('activeSelectedAIFunction', model)
       setActiveSelectedAIFunction(model)
       const modelDropdown = localStorage.getItem('selectedModelDropdown') || 'Offline Fast'
@@ -292,6 +305,7 @@ const ModelSection: React.FC = () => {
       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">

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,18 +325,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
   ];
 
+  //#region functions for changing Settings
+
   const handleLogout = () => {
+    if (typeof window !!== "undefined" && typeof localStorage !== 'undefined') {
       localStorage.clear();
       alert('Successfully logged out!');
       window.location.reload();
+    }
   };
 
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
       const savedTheme = localStorage.getItem('selectedTheme');
       if (savedTheme) {
         setSelectedTheme(savedTheme);
         applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
       }
+    }
   }, []); // Runs only once when the component mounts
 
   // Effect hooks to update localStorage whenever any state changes
@@ -311,9 +355,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       ...settings.generalSettings,
     };
     // Update localStorage for all settings
+    if (typeof localStorage !== 'undefined') {
       for (const [key, value] of Object.entries(flattenedSettings)) {
         localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
       }
+    }
   }, [
     ...Object.values(settings.userPreferences),
     ...Object.values(settings.theme),
@@ -322,20 +368,26 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   ]);
 
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
       const savedOption = localStorage.getItem('radioSelection');
       if (savedOption) {
         savedOption.replace(" (FOSS)", "");
         setSelectedOption(savedOption); // Set saved selection
       }
+    }
   }, []);
 
   const handleRadioChange = (newValue: string) => {
+    if (typeof localStorage !== 'undefined') {
       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 () => {
+    if (typeof localStorage !== 'undefined') {
+      
       let useName = localStorage.getItem("accountName")
       let useEmail = localStorage.getItem("accountEmail")
       let usePassword = localStorage.getItem("accountPassword")
@@ -352,6 +404,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
         if (await createAccount(useName, useEmail, usePassword)) {
           if (await changeData(useName, usePassword, settings)) {
+            if (typeof window !== 'undefined') {
               localStorage.setItem("currentName", useName)
               localStorage.setItem("currentPassword", usePassword)
               localStorage.setItem("currentEmail", useEmail)
@@ -360,15 +413,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             }
           }
         }
+      }
+    }
   };
 
   // Function to handle account deletion
   const handleDeleteAccount = async () => {
+    if (typeof localStorage !== 'undefined') {
+      
       const useName = localStorage.getItem("accountName")
       const usePassword = localStorage.getItem("accountPassword")
       if (useName && usePassword) {
         const success = await deleteAccount(useName, usePassword);
-      if (success) {
+        if (success && typeof window !== 'undefined' ) {
           localStorage.clear();
           alert('Account deleted successfully!');
           window.location.reload()
@@ -377,9 +434,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           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();
+              if (typeof localStorage !== 'undefined') {
                 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,6 +5,7 @@ export function exportSettings(): string {
     const settings: { [key: string]: string } = {};
 
     // Loop through all keys in localStorage and add them to the settings object
+    if (typeof localStorage !== 'undefined') { 
         for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
             if (key) {
@@ -13,6 +14,7 @@ export function exportSettings(): string {
                 }
             }
         }
+    }
 
     // Convert settings object to JSON string
     return JSON.stringify(settings, null, 2);
@@ -24,9 +26,11 @@ export function importSettings(jsonData: string): void {
         const parsedSettings = JSON.parse(jsonData);
 
         // Loop through parsed settings and save them in localStorage
+        if (typeof localStorage !== 'undefined') {   
             Object.keys(parsedSettings).forEach((key) => {
                 localStorage.setItem(key, parsedSettings[key]);
             });
+        }
 
         console.log("Settings imported successfully!");
     } catch (error) {

app/components/settings/theme.ts

@@ -114,6 +114,7 @@ export const applyBlackTheme = () => {
 };
 
 export const applyCustomTheme = () => {
+  if (typeof localStorage !== 'undefined') {
     const themeVariables = {
       backgroundColor: localStorage.getItem('backgroundColor'),
       headerBackground: localStorage.getItem('headerBackground'),
@@ -188,6 +189,7 @@ export const applyCustomTheme = () => {
     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);
+  if (typeof localStorage !== 'undefined') {
     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(() => {
+    if (typeof localStorage !== 'undefined') {
       setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
       setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
       setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
       setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
       setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
-  }, []);
+    }
+  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
 
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
@@ -43,6 +45,7 @@ const LandingPage: React.FC = () => {
 
   // Apply theme based on selectedTheme and color settings
   useEffect(() => {
+    if (typeof localStorage !== 'undefined') {
       const savedTheme = localStorage.getItem('selectedTheme');
       if (savedTheme) {
         switch (savedTheme) {
@@ -72,6 +75,7 @@ const LandingPage: React.FC = () => {
             break;
         }
       }
+    }
   }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
 
   return (