very cool fixes and a bit of a revert
This commit is contained in:
Patrick_Pluto
parent
091744d75b
commit
c018829f8f
4 changed files with 280 additions and 275 deletions
|
|
@ -105,22 +105,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
|
||||
const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
|
||||
const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
|
||||
|
||||
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
|
||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
|
||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
|
||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
||||
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||
|
||||
// Per default a purple color gradient
|
||||
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(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
|
||||
const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
|
||||
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
|
||||
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
|
||||
const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
|
||||
|
||||
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 | any>(() => getItemFromLocalStorage('myBoolean'));
|
||||
|
||||
const settings = {
|
||||
userPreferences: {
|
||||
|
|
@ -129,7 +131,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
preferredCurrency,
|
||||
preferredMeasurement,
|
||||
dateFormat,
|
||||
timeFormat,
|
||||
timeFormat,
|
||||
timeZone,
|
||||
selectedOption,
|
||||
disableChatHistory,
|
||||
|
|
@ -216,7 +218,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
|
||||
{ name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
|
||||
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
|
||||
];
|
||||
];
|
||||
|
||||
|
||||
const timeZoneOptions = [
|
||||
|
|
@ -330,15 +332,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
useEffect(() => {
|
||||
const savedOption = localStorage.getItem('radioSelection');
|
||||
if (savedOption) {
|
||||
savedOption.replace(" (FOSS)", "");
|
||||
setSelectedOption(savedOption); // Set saved selection
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleRadioChange = (newValue: string) => {
|
||||
setSelectedOption(newValue); // Update the state with the selected option
|
||||
if (openSourceMode) {
|
||||
newValue += " (FOSS)"
|
||||
}
|
||||
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
|
||||
};
|
||||
|
||||
|
|
@ -472,85 +472,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
);
|
||||
|
||||
|
||||
case 'theme':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
|
||||
<ThemeDropdown
|
||||
selectedTheme={selectedTheme}
|
||||
setSelectedTheme={setSelectedTheme}
|
||||
case 'theme':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
|
||||
<ThemeDropdown
|
||||
selectedTheme={selectedTheme}
|
||||
setSelectedTheme={setSelectedTheme}
|
||||
/>
|
||||
|
||||
{selectedTheme === 'BASIC-CUSTOM' && (
|
||||
<>
|
||||
<h3>Basic Colors</h3>
|
||||
{/* Basic Color Inputs using ColorSetting Component */}
|
||||
<ColorSetting
|
||||
name="Primary Color"
|
||||
value={primaryColor}
|
||||
setValue={setPrimaryColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
|
||||
{selectedTheme === 'BASIC-CUSTOM' && (
|
||||
<>
|
||||
<h3>Basic Colors</h3>
|
||||
{/* Basic Color Inputs using ColorSetting Component */}
|
||||
<ColorSetting
|
||||
name="Primary Color"
|
||||
value={primaryColor}
|
||||
setValue={setPrimaryColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Secondary Color"
|
||||
value={secondaryColor}
|
||||
setValue={setSecondaryColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Accent Color"
|
||||
value={accentColor}
|
||||
setValue={setAccentColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Background Color"
|
||||
value={basicBackgroundColor}
|
||||
setValue={setBasicBackgroundColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Text Color"
|
||||
value={basicTextColor}
|
||||
setValue={setBasicTextColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
<h3>Additional Settings</h3>
|
||||
{/* Additional Font Size Setting */}
|
||||
<FontSizeSetting
|
||||
fontSize={fontSize}
|
||||
setFontSize={setFontSize}
|
||||
/>
|
||||
|
||||
{colorSettings.map((setting) => (
|
||||
<ColorSetting
|
||||
key={setting.cssVariable}
|
||||
name={setting.name}
|
||||
value={setting.value}
|
||||
setValue={setting.setValue}
|
||||
cssVariable={setting.cssVariable}
|
||||
/>
|
||||
))}
|
||||
|
||||
<DropdownSetting
|
||||
label="Font Family"
|
||||
value={fontFamily}
|
||||
setValue={(newFont) => {
|
||||
setFontFamily(newFont);
|
||||
document.documentElement.style.setProperty('--font-family', newFont);
|
||||
}}
|
||||
options={fontOptions}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<ColorSetting
|
||||
name="Secondary Color"
|
||||
value={secondaryColor}
|
||||
setValue={setSecondaryColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Accent Color"
|
||||
value={accentColor}
|
||||
setValue={setAccentColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Background Color"
|
||||
value={basicBackgroundColor}
|
||||
setValue={setBasicBackgroundColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Text Color"
|
||||
value={basicTextColor}
|
||||
setValue={setBasicTextColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
<h3>Additional Settings</h3>
|
||||
{/* Additional Font Size Setting */}
|
||||
<FontSizeSetting
|
||||
fontSize={fontSize}
|
||||
setFontSize={setFontSize}
|
||||
/>
|
||||
|
||||
{colorSettings.map((setting) => (
|
||||
<ColorSetting
|
||||
key={setting.cssVariable}
|
||||
name={setting.name}
|
||||
value={setting.value}
|
||||
setValue={setting.setValue}
|
||||
cssVariable={setting.cssVariable}
|
||||
/>
|
||||
))}
|
||||
|
||||
<DropdownSetting
|
||||
label="Font Family"
|
||||
value={fontFamily}
|
||||
setValue={(newFont) => {
|
||||
setFontFamily(newFont);
|
||||
document.documentElement.style.setProperty('--font-family', newFont);
|
||||
}}
|
||||
options={fontOptions}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'foss':
|
||||
return (
|
||||
|
|
@ -574,24 +574,21 @@ 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
|
||||
/>
|
||||
<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
|
||||
/>
|
||||
<TextSettings
|
||||
label="New Password"
|
||||
value={newPassword}
|
||||
setValue={setNewPassword}
|
||||
type="password" // Input type is password
|
||||
/>
|
||||
<TextSettings
|
||||
label="Current Password"
|
||||
value={currentPassword}
|
||||
setValue={setCurrentPassword}
|
||||
type="password" // Input type is password
|
||||
type="password"
|
||||
placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default
|
||||
/>
|
||||
<ButtonSetting
|
||||
label="Log Out" // Button label
|
||||
|
|
@ -619,24 +616,28 @@ 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"}
|
||||
/>
|
||||
<TextSettings
|
||||
label="OpenAI" // Label for the input
|
||||
value={openai} // State variable for the input
|
||||
setValue={setOpenai} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('openai') || "Enter the API key"}
|
||||
/>
|
||||
<TextSettings
|
||||
label="Anthropic" // Label for the input
|
||||
value={anthropic} // State variable for the input
|
||||
setValue={setAnthropic} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
|
||||
/>
|
||||
<TextSettings
|
||||
label="Google" // Label for the input
|
||||
value={google} // State variable for the input
|
||||
setValue={setGoogle} // State updater function
|
||||
type="text" // Input type
|
||||
placeholder={localStorage.getItem('google') || "Enter the API key"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -644,24 +645,24 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
case 'im/export':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Import & Export</h2>
|
||||
<div className="settings-option">
|
||||
<h3>Export the settings</h3>
|
||||
<button onClick={handleExport} className="export-button">
|
||||
Export Settings
|
||||
</button>
|
||||
<h2>Import & Export</h2>
|
||||
<div className="settings-option">
|
||||
<h3>Export the settings</h3>
|
||||
<button onClick={handleExport} className="export-button">
|
||||
Export Settings
|
||||
</button>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<h3>Import the settings</h3>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleImport}
|
||||
accept=".json"
|
||||
className="import-file"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<h3>Import the settings</h3>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleImport}
|
||||
accept=".json"
|
||||
className="import-file"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -695,36 +696,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="popup-overlay">
|
||||
<div className="settings-content">
|
||||
<div className="settings-container">
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<li onClick={() => setActiveSection('general')}>General</li>
|
||||
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
||||
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
||||
<li onClick={() => setActiveSection('api')}>API Keys</li>
|
||||
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="settings-main">
|
||||
<h2>Settings for {accountName}</h2>
|
||||
{renderSettingsContent()}
|
||||
<button className="close-popup" onClick={closeSettings}>Close</button>
|
||||
<button className="apply" onClick={async () => {
|
||||
getAllLocalStorageItems();
|
||||
closeSettings();
|
||||
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
|
||||
window.location.reload();
|
||||
}}>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
<div className="popup-overlay">
|
||||
<div className="settings-content">
|
||||
<div className="settings-container">
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<li onClick={() => setActiveSection('general')}>General</li>
|
||||
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
||||
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
||||
<li onClick={() => setActiveSection('api')}>API Keys</li>
|
||||
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="settings-main">
|
||||
<h2>Settings for {accountName}</h2>
|
||||
{renderSettingsContent()}
|
||||
<button className="close-popup" onClick={closeSettings}>Close</button>
|
||||
<button className="apply" onClick={async () => {
|
||||
getAllLocalStorageItems();
|
||||
closeSettings();
|
||||
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
|
||||
window.location.reload();
|
||||
}}>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ interface TextSettingProps {
|
|||
value: string; // The current text value
|
||||
setValue: (newText: string) => void; // The method to update the state
|
||||
type: 'text' | 'email' | 'password'; // The type of input field
|
||||
placeholder?: string; // Optional placeholder text
|
||||
}
|
||||
|
||||
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
|
||||
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type, placeholder }) => {
|
||||
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newText = e.target.value; // Get the new value from the input
|
||||
setValue(newText); // Update the state in the parent component
|
||||
|
|
@ -20,6 +21,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type
|
|||
type={type} // Use the type prop for the input
|
||||
value={value} // Set the current value
|
||||
onChange={handleTextChange} // Handle input changes
|
||||
placeholder={placeholder} // Set the placeholder text
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue