sageTheDm/interstellar_ai
1
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Merge pull request 'main' (#110) from sageTheDm/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/110
This commit is contained in:
Patrick 2024-10-07 14:15:30 +02:00
commit 1f81828746
1 changed files with 78 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

237
app/components/settings/Settings.tsx
View file

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