Merge pull request 'main' (#50 ) from React-Group/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/50
Merge pull request 'main' (#110 ) from sageTheDm/interstellar_ai:main into main
2024-10-07 14:15:43 +02:00 · 2024-10-07 14:15:30 +02:00 · 2024-10-07 14:14:27 +02:00 · 2024-10-07 12:02:05 +02:00 · 2024-10-07 11:51:49 +02:00 · 2024-10-07 11:49:59 +02:00
1 changed files with 78 additions and 159 deletions
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@ -19,12 +19,8 @@ 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) => {
-    if (typeof localStorage !== 'undefined') { 
-      item = localStorage.getItem(key)
-    }
+    const item = localStorage.getItem(key);

    if (item) {
      try {
@ -39,48 +35,32 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  };

  // Active section
-  const [activeSection, setActiveSection] = useState('general');
+  const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');

  // Language setting
-  const [preferredLanguage, setPreferredLanguage] = useState("en");
+  const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');

  // Currency setting
-  const [preferredCurrency, setPreferredCurrency] = useState('usd');
+  const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');

  // Date and time format settings
-  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
-  const [timeFormat, setTimeFormat] = useState('12-hour');
-  const [timeZone, setTimeZone] = useState('GMT');
+  const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
+  const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
+  const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');

  // Online AI and chat history settings
  const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
-  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
-  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
-  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
+  const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
+  const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
+  const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));

  // User credentials
-  const [newName, setNewName] = useState('');
-  const [newEmail, setNewEmail] = useState('');
-  const [newPassword, setNewPassword] = useState('');
+  const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
+  const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
+  const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');

  // Measurement setting
-  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")
-  },[])
+  const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');

  // Theme settings
  const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@ -119,40 +99,22 @@ 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("#dc8add");
-  const [secondaryColor, setSecondaryColor] = useState("#c061cb");
-  const [accentColor, setAccentColor] = useState("#9141ac");
-  const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c");
-  const [basicTextColor, setBasicTextColor] = useState("#fefefe");
-
-  useEffect(() => {
-    setPrimaryColor(getItemFromLocalStorage("primaryColor"))
-    setSecondaryColor(getItemFromLocalStorage("secondaryColor"))
-    setAccentColor(getItemFromLocalStorage("accentColor"))
-    setBasicBackgroundColor(getItemFromLocalStorage("basicBackgroundColor"))
-    setBasicTextColor(getItemFromLocalStorage("basicTextColor"))
-  },[])
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");

  // Theme selection
  const [selectedTheme, setSelectedTheme] = useState<string>('');

  // API Keys

-  const [mistral, setMistral] = useState<string>("");
-  const [openai, setOpenai] = useState<string>("");
-  const [anthropic, setAnthropic] = useState<string>("");
-  const [google, setGoogle] = useState<string>("");
-  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 [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
+  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
+  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
+  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
+  const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean'));

  const settings = {
    userPreferences: {
@ -325,23 +287,17 @@ 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();
-    }
+    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);
-      }
+    const savedTheme = localStorage.getItem('selectedTheme');
+    if (savedTheme) {
+      setSelectedTheme(savedTheme);
+      applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
    }
  }, []); // Runs only once when the component mounts

@ -355,10 +311,8 @@ 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);
-      }
+    for (const [key, value] of Object.entries(flattenedSettings)) {
+      localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
    }
  }, [
    ...Object.values(settings.userPreferences),
@ -368,50 +322,41 @@ 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 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
-    }
+    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")
+    if (useName && useEmail && usePassword) {
+      await deleteAccount(useName, usePassword)

-      let useName = localStorage.getItem("accountName")
-      let useEmail = localStorage.getItem("accountEmail")
-      let usePassword = localStorage.getItem("accountPassword")
-      if (useName && useEmail && usePassword) {
-        await deleteAccount(useName, usePassword)
+      if (newName != "") {
+        useName = newName
+      } if (newEmail != "") {
+        useEmail = newEmail
+      } if (newPassword != "") {
+        usePassword = newPassword
+      }

-        if (newName != "") {
-          useName = newName
-        } if (newEmail != "") {
-          useEmail = newEmail
-        } if (newPassword != "") {
-          usePassword = newPassword
-        }
-
-        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)
-              alert('Account successfully changed!')
-              window.location.reload()
-            }
-          }
+      if (await createAccount(useName, useEmail, usePassword)) {
+        if (await changeData(useName, usePassword, settings)) {
+          localStorage.setItem("currentName", useName)
+          localStorage.setItem("currentPassword", usePassword)
+          localStorage.setItem("currentEmail", useEmail)
+          alert('Account successfully changed!')
+          window.location.reload()
        }
      }
    }
@ -419,25 +364,22 @@ 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 && typeof window !== 'undefined' ) {
-          localStorage.clear();
-          alert('Account deleted successfully!');
-          window.location.reload()
-          // Optionally, redirect or reset state here
-        } else {
-          alert('Account deletion failed. Please check your password.');
-        }
+    const useName = localStorage.getItem("accountName")
+    const usePassword = localStorage.getItem("accountPassword")
+    if (useName && usePassword) {
+      const success = await deleteAccount(useName, usePassword);
+      if (success) {
+        localStorage.clear();
+        alert('Account deleted successfully!');
+        window.location.reload()
+        // 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) {
@ -566,19 +508,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                  setValue={setBasicTextColor}
                  cssVariable=""
                />
-                <FontSizeSetting
-                  fontSize={fontSize}
-                  setFontSize={setFontSize}
-                />
-                <DropdownSetting
-                  label="Font Family"
-                  value={fontFamily}
-                  setValue={(newFont) => {
-                    setFontFamily(newFont);
-                    document.documentElement.style.setProperty('--font-family', newFont);
-                  }}
-                  options={fontOptions}
-                />
              </>
            )}

@ -629,8 +558,6 @@ 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>
@ -639,14 +566,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
              value={newName}
              type='text'
              setValue={setNewName}
-              placeholder={namePlaceholder} // Show current name or a default
+              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
            />
            <TextSettings
              label="New Email"
              value={newEmail}
              setValue={setNewEmail}
              type="email" // Input type is email
-              placeholder={emailPlaceholder} // Show current email or a default
+              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
            />
            <TextSettings
              label="New Password"
@ -674,10 +601,6 @@ 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
@ -685,7 +608,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={mistral_APIKey_PlaceHolder}
+              placeholder={localStorage.getItem('mistral') || "Enter the API key"}
            />
            <div className="settings-option">
              <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
@ -697,7 +620,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={openai_APIKey_PlaceHolder}
+              placeholder={localStorage.getItem('openai') || "Enter the API key"}
            />
            <div className="settings-option">
              <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
@ -709,7 +632,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={anthropic_APIKey_PlaceHolder}
+              placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
            />
            <div className="settings-option">
              <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
@ -721,7 +644,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={google_APIKey_PlaceHolder}
+              placeholder={localStorage.getItem('google') || "Enter the API key"}
            />
            <div className="settings-option">
              <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
@ -806,12 +729,8 @@ 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();
-              }
+              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              window.location.reload();
            }}>
              Apply
            </button>
Author	SHA1	Message	Date
YasinOnm08	a60cc7e941	Merge pull request 'main' (#50 ) from React-Group/interstellar_ai:main into main Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/50	2024-10-07 14:15:43 +02:00
Patrick	1f81828746	Merge pull request 'main' (#110 ) from sageTheDm/interstellar_ai:main into main Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/110	2024-10-07 14:15:30 +02:00
sageTheDM	4cd5c09c6b	Fixed our build problems	2024-10-07 14:14:27 +02:00
sageTheDm	bf26e7c83c	Merge pull request 'main' (#42 ) from React-Group/interstellar_ai:main into main Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/42	2024-10-07 12:02:05 +02:00
Patrick	93ad87b892	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	2024-10-07 11:51:49 +02:00
sageTheDm	bf29313276	Merge pull request 'main' (#41 ) from React-Group/interstellar_ai:main into main Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/41	2024-10-07 11:49:59 +02:00
Patrick	a0aad08f0e	Merge pull request 'main' (#40 ) from React-Group/interstellar_ai:main into main Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/40	2024-10-07 09:11:03 +02:00