From c018829f8f8d962eef9f9e10882f7c18065f3cad Mon Sep 17 00:00:00 2001
From: Patrick_Pluto <patrick_pluto@noreply.codeberg.org>
Date: Thu, 3 Oct 2024 16:57:24 +0200
Subject: [PATCH] very cool fixes and a bit of a revert
---
app/components/Models.tsx | 256 ++++++++++----------
app/components/settings/Settings.tsx | 291 ++++++++++++-----------
app/components/settings/TextSettings.tsx | 4 +-
app/styles/models.css | 4 +-
4 files changed, 280 insertions(+), 275 deletions(-)
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 7c22ab7..2c56cae 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -4,139 +4,140 @@ import React, { useState, useEffect } from 'react';
// Define all models that should be available.
const modelList = {
'Offline Fast': {
- 'model_type': 'local',
- 'Math': 'qwen2-math:1.5b',
- 'Code': 'starcoder2',
- 'Language': 'llama3.2',
- 'Character': 'dolphin-phi',
- 'Finance': 'qwen2-math:1.5b',
- 'Weather': 'llama3.2',
- 'Time': 'llama3.2',
- 'Image': 'llava-phi3'
+ model_type: 'local',
+ Math: 'qwen2-math:1.5b',
+ Code: 'starcoder2',
+ Language: 'llama3.2',
+ Character: 'dolphin-phi',
+ Finance: 'qwen2-math:1.5b',
+ Weather: 'llama3.2',
+ Time: 'llama3.2',
+ Image: 'llava-phi3'
},
'Offline Slow': {
- 'model_type': 'local',
- 'Math': 'wizard-math',
- 'Code': 'starcoder2:7b',
- 'Language': 'llama3.1',
- 'Character': 'dolphin-llama3',
- 'Finance': 'wizard-math',
- 'Weather': 'llama3.1',
- 'Time': 'llama3.1',
- 'Image': 'llava'
+ model_type: 'local',
+ Math: 'wizard-math',
+ Code: 'starcoder2:7b',
+ Language: 'llama3.1',
+ Character: 'dolphin-llama3',
+ Finance: 'wizard-math',
+ Weather: 'llama3.1',
+ Time: 'llama3.1',
+ Image: 'llava'
},
'Offline Fast (FOSS)': {
- 'model_type': 'local',
- 'Math': 'qwen2-math:1.5b',
- 'Code': 'qwen2.5-coder:1.5b',
- 'Language': 'phi3.5',
- 'Character': 'dolphin-mistral',
- 'Finance': 'qwen2-math:1.5b',
- 'Weather': 'phi3.5',
- 'Time': 'phi3.5',
- 'Image': 'llava'
+ model_type: 'local',
+ Math: 'qwen2-math:1.5b',
+ Code: 'qwen2.5-coder:1.5b',
+ Language: 'phi3.5',
+ Character: 'dolphin-mistral',
+ Finance: 'qwen2-math:1.5b',
+ Weather: 'phi3.5',
+ Time: 'phi3.5',
+ Image: 'llava'
},
'Offline Slow (FOSS)': {
- 'model_type': 'local',
- 'Math': 'mathstral',
- 'Code': 'qwen2.5-coder',
- 'Language': 'qwen2.5',
- 'Character': 'dolphin-mistral',
- 'Finance': 'mathstral',
- 'Weather': 'qwen2.5',
- 'Time': 'qwen2.5',
- 'Image': 'llava'
+ model_type: 'local',
+ Math: 'mathstral',
+ Code: 'qwen2.5-coder',
+ Language: 'qwen2.5',
+ Character: 'dolphin-mistral',
+ Finance: 'mathstral',
+ Weather: 'qwen2.5',
+ Time: 'qwen2.5',
+ Image: 'llava'
},
'Online Cheap (OpenAI)': {
- 'model_type': 'openai',
- 'Math': 'gpt-4o-mini',
- 'Code': 'gpt-4o-mini',
- 'Language': 'gpt-4o-mini',
- 'Character': 'gpt-4o-mini',
- 'Finance': 'gpt-4o-mini',
- 'Weather': 'gpt-4o-mini',
- 'Time': 'gpt-4o-mini',
- 'Image': 'gpt-4o-mini'
+ model_type: 'openai',
+ Math: 'gpt-4o-mini',
+ Code: 'gpt-4o-mini',
+ Language: 'gpt-4o-mini',
+ Character: 'gpt-4o-mini',
+ Finance: 'gpt-4o-mini',
+ Weather: 'gpt-4o-mini',
+ Time: 'gpt-4o-mini',
+ Image: 'gpt-4o-mini'
},
'Online Expensive (OpenAI)': {
- 'model_type': 'openai',
- 'Math': 'gpt-4o',
- 'Code': 'gpt-4o',
- 'Language': 'gpt-4o',
- 'Character': 'gpt-4o',
- 'Finance': 'gpt-4o',
- 'Weather': 'gpt-4o',
- 'Time': 'gpt-4o',
- 'Image': 'gpt-4o'
+ model_type: 'openai',
+ Math: 'gpt-4o',
+ Code: 'gpt-4o',
+ Language: 'gpt-4o',
+ Character: 'gpt-4o',
+ Finance: 'gpt-4o',
+ Weather: 'gpt-4o',
+ Time: 'gpt-4o',
+ Image: 'gpt-4o'
},
'Online Cheap (Anthropic)': {
- 'model_type': 'anthropic',
- 'Math': 'claude-3-haiku',
- 'Code': 'claude-3-haiku',
- 'Language': 'claude-3-haiku',
- 'Character': 'claude-3-haiku',
- 'Finance': 'claude-3-haiku',
- 'Weather': 'claude-3-haiku',
- 'Time': 'claude-3-haiku',
- 'Image': 'claude-3-haiku'
+ model_type: 'anthropic',
+ Math: 'claude-3-haiku',
+ Code: 'claude-3-haiku',
+ Language: 'claude-3-haiku',
+ Character: 'claude-3-haiku',
+ Finance: 'claude-3-haiku',
+ Weather: 'claude-3-haiku',
+ Time: 'claude-3-haiku',
+ Image: 'claude-3-haiku'
},
'Online Expensive (Anthropic)': {
- 'model_type': 'anthropic',
- 'Math': 'claude-3-5-sonnet',
- 'Code': 'claude-3-5-sonnet',
- 'Language': 'claude-3-5-sonnet',
- 'Character': 'claude-3-5-sonnet',
- 'Finance': 'claude-3-5-sonnet',
- 'Weather': 'claude-3-5-sonnet',
- 'Time': 'claude-3-5-sonnet',
- 'Image': 'claude-3-5-sonnet'
+ model_type: 'anthropic',
+ Math: 'claude-3-5-sonnet',
+ Code: 'claude-3-5-sonnet',
+ Language: 'claude-3-5-sonnet',
+ Character: 'claude-3-5-sonnet',
+ Finance: 'claude-3-5-sonnet',
+ Weather: 'claude-3-5-sonnet',
+ Time: 'claude-3-5-sonnet',
+ Image: 'claude-3-5-sonnet'
},
'Online Cheap (Google)': {
- 'model_type': 'google',
- 'Math': 'gemini-1.5-flash-latest',
- 'Code': 'gemini-1.5-flash-latest',
- 'Language': 'gemini-1.5-flash-latest',
- 'Character': 'gemini-1.5-flash-latest',
- 'Finance': 'gemini-1.5-flash-latest',
- 'Weather': 'gemini-1.5-flash-latest',
- 'Time': 'gemini-1.5-flash-latest',
- 'Image': 'gemini-1.5-flash-latest'
+ model_type: 'google',
+ Math: 'gemini-1.5-flash-latest',
+ Code: 'gemini-1.5-flash-latest',
+ Language: 'gemini-1.5-flash-latest',
+ Character: 'gemini-1.5-flash-latest',
+ Finance: 'gemini-1.5-flash-latest',
+ Weather: 'gemini-1.5-flash-latest',
+ Time: 'gemini-1.5-flash-latest',
+ Image: 'gemini-1.5-flash-latest'
},
'Online Expensive (Google)': {
- 'model_type': 'google',
- 'Math': 'gemini-1.5-pro-latest',
- 'Code': 'gemini-1.5-pro-latest',
- 'Language': 'gemini-1.5-pro-latest',
- 'Character': 'gemini-1.5-pro-latest',
- 'Finance': 'gemini-1.5-pro-latest',
- 'Weather': 'gemini-1.5-pro-latest',
- 'Time': 'gemini-1.5-pro-latest',
- 'Image': 'gemini-1.5-pro-latest'
+ model_type: 'google',
+ Math: 'gemini-1.5-pro-latest',
+ Code: 'gemini-1.5-pro-latest',
+ Language: 'gemini-1.5-pro-latest',
+ Character: 'gemini-1.5-pro-latest',
+ Finance: 'gemini-1.5-pro-latest',
+ Weather: 'gemini-1.5-pro-latest',
+ Time: 'gemini-1.5-pro-latest',
+ Image: 'gemini-1.5-pro-latest'
},
'Online (La Plateforme)': {
- 'model_type': 'mistral',
- 'Math': 'open-mistral-nemo',
- 'Code': 'codestral-latest',
- 'Language': 'mistral-small-latest',
- 'Character': 'mistral-large-latest',
- 'Finance': 'open-mistral-nemo',
- 'Weather': 'mistral-small-latest',
- 'Time': 'mistral-small-latest',
- 'Image': 'pixtral-12b-2409'
+ model_type: 'mistral',
+ Math: 'open-mistral-nemo',
+ Code: 'codestral-latest',
+ Language: 'mistral-small-latest',
+ Character: 'mistral-large-latest',
+ Finance: 'open-mistral-nemo',
+ Weather: 'mistral-small-latest',
+ Time: 'mistral-small-latest',
+ Image: 'pixtral-12b-2409'
},
'Online (FOSS) (La Plateforme)': {
- 'model_type': 'mistral',
- 'Math': 'open-mistral-nemo',
- 'Code': 'open-codestral-mamba',
- 'Language': 'open-mistral-nemo',
- 'Character': 'open-mixtral-8x22b',
- 'Finance': 'open-mixtral-8x22b',
- 'Weather': 'open-mistral-nemo',
- 'Time': 'open-mistral-nemo',
- 'Image': 'pixtral-12b-2409'
+ model_type: 'mistral',
+ Math: 'open-mistral-nemo',
+ Code: 'open-codestral-mamba',
+ Language: 'open-mistral-nemo',
+ Character: 'open-mixtral-8x22b',
+ Finance: 'open-mixtral-8x22b',
+ Weather: 'open-mistral-nemo',
+ Time: 'open-mistral-nemo',
+ Image: 'pixtral-12b-2409'
}
}
+
// Define the available selectedAIFunction options
const modelDropdown = {
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
@@ -172,6 +173,7 @@ const ModelSection: React.FC = () => {
const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
+ const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
useEffect(() => {
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
@@ -233,23 +235,23 @@ const ModelSection: React.FC = () => {
models = [
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
- ]; // Show only offline models without FOSS
- break;
- case 'Offline (FOSS)':
- models = [
- ...modelDropdown.onlineFoss,
- ]; // Show only offline models with FOSS
+ ];
+ if (isOpenSourceMode == "true") {
+ models = [
+ ...modelDropdown.onlineFoss,
+ ];
+ } // Show only offline models without FOSS
break;
case 'Online':
models = [
...modelDropdown.offlineNonFoss,
...modelDropdown.offlineFoss,
- ]; // Show only online models without FOSS
- break;
- case 'Online (FOSS)':
- models = [
- ...modelDropdown.offlineFoss,
- ]; // Show only online models with FOSS
+ ];
+ if (isOpenSourceMode == "true") {
+ models = [
+ ...modelDropdown.offlineFoss,
+ ];
+ } // Show only online models without FOSS
break;
case 'None':
models = [
@@ -257,13 +259,13 @@ const ModelSection: React.FC = () => {
...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss,
...modelDropdown.onlineFoss,
- ]; // Show all models if nothing matches
- break;
- case 'None (FOSS)':
- models = [
- ...modelDropdown.offlineFoss,
- ...modelDropdown.onlineFoss,
- ]; // Show all models if nothing matches
+ ];
+ if (isOpenSourceMode == "true") {
+ models = [
+ ...modelDropdown.offlineFoss,
+ ...modelDropdown.onlineFoss,
+ ];
+ } // Show all models if nothing matches
break;
default:
models = [
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 583442e..530b3da 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -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>
);
};
diff --git a/app/components/settings/TextSettings.tsx b/app/components/settings/TextSettings.tsx
index ef8aafc..eca3071 100644
--- a/app/components/settings/TextSettings.tsx
+++ b/app/components/settings/TextSettings.tsx
@@ -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>
);
diff --git a/app/styles/models.css b/app/styles/models.css
index 258f71a..7b833ae 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -61,8 +61,8 @@
}
.model-box.selected {
- box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */
- border-color: yellow;
+ box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
+ border-color: var(--apply-button-hover-color);
}
.overlay {