diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 2c56cae..7c22ab7 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -4,140 +4,139 @@ 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'], @@ -173,7 +172,6 @@ const ModelSection: React.FC = () => { const [radioSelection, setRadioSelection] = useState("") const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState(""); - const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false") useEffect(() => { var temp = localStorage.getItem("activeSelectedAIFunction") || "" @@ -235,23 +233,23 @@ const ModelSection: React.FC = () => { models = [ ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, - ]; - if (isOpenSourceMode == "true") { - models = [ - ...modelDropdown.onlineFoss, - ]; - } // Show only offline models without FOSS + ]; // Show only offline models without FOSS + break; + case 'Offline (FOSS)': + models = [ + ...modelDropdown.onlineFoss, + ]; // Show only offline models with FOSS break; case 'Online': models = [ ...modelDropdown.offlineNonFoss, ...modelDropdown.offlineFoss, - ]; - if (isOpenSourceMode == "true") { - models = [ - ...modelDropdown.offlineFoss, - ]; - } // Show only online models without FOSS + ]; // Show only online models without FOSS + break; + case 'Online (FOSS)': + models = [ + ...modelDropdown.offlineFoss, + ]; // Show only online models with FOSS break; case 'None': models = [ @@ -259,13 +257,13 @@ const ModelSection: React.FC = () => { ...modelDropdown.offlineFoss, ...modelDropdown.onlineNonFoss, ...modelDropdown.onlineFoss, - ]; - if (isOpenSourceMode == "true") { - models = [ - ...modelDropdown.offlineFoss, - ...modelDropdown.onlineFoss, - ]; - } // Show all models if nothing matches + ]; // Show all models if nothing matches + break; + case 'None (FOSS)': + models = [ + ...modelDropdown.offlineFoss, + ...modelDropdown.onlineFoss, + ]; // Show all models if nothing matches break; default: models = [ diff --git a/app/components/settings/ButtonSettings.tsx b/app/components/settings/ButtonSettings.tsx index 3724a15..3352fbf 100644 --- a/app/components/settings/ButtonSettings.tsx +++ b/app/components/settings/ButtonSettings.tsx @@ -9,9 +9,9 @@ interface ButtonSettingProps { const ButtonSetting: React.FC = ({ label, onClick, className }) => { return (
- diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 0d77b0b..583442e 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -105,24 +105,22 @@ 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()); - - // 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"); + + 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"); // Theme selection const [selectedTheme, setSelectedTheme] = useState(''); // API Keys - - 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(() => getItemFromLocalStorage('myBoolean')); + 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(() => getItemFromLocalStorage('myBoolean')); const settings = { userPreferences: { @@ -131,7 +129,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( preferredCurrency, preferredMeasurement, dateFormat, - timeFormat, + timeFormat, timeZone, selectedOption, disableChatHistory, @@ -218,7 +216,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 = [ @@ -332,13 +330,15 @@ 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 ( -
-

Theme Settings

- - - - {selectedTheme === 'BASIC-CUSTOM' && ( - <> -

Basic Colors

- {/* Basic Color Inputs using ColorSetting Component */} - +

Theme Settings

+ + - - - - - - )} - - {selectedTheme === 'CUSTOM' && ( - <> -

Additional Settings

- {/* Additional Font Size Setting */} - - - {colorSettings.map((setting) => ( - - ))} - - { - setFontFamily(newFont); - document.documentElement.style.setProperty('--font-family', newFont); - }} - options={fontOptions} - /> - - )} -
- ); + + {selectedTheme === 'BASIC-CUSTOM' && ( + <> +

Basic Colors

+ {/* Basic Color Inputs using ColorSetting Component */} + + + + + + + )} + + {selectedTheme === 'CUSTOM' && ( + <> +

Additional Settings

+ {/* Additional Font Size Setting */} + + + {colorSettings.map((setting) => ( + + ))} + + { + setFontFamily(newFont); + document.documentElement.style.setProperty('--font-family', newFont); + }} + options={fontOptions} + /> + + )} +
+ ); case 'foss': return ( @@ -574,21 +574,24 @@ 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 /> + 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"} /> - - - - ); case 'im/export': return (
-

Import & Export

-
-

Export the settings

- -
-
-

Import the settings

- -
+

Import & Export

+
+

Export the settings

+
- ); +
+

Import the settings

+ +
+
+ ); default: return null; } @@ -716,36 +695,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( }; return ( -
-
-
-
-
    -
  • setActiveSection('general')}>General
    • -
  • setActiveSection('privacy')}>Privacy
    • -
  • setActiveSection('theme')}>Theme
    • -
  • setActiveSection('foss')}>FOSS
    • -
  • setActiveSection('account')}>Account
    • -
  • setActiveSection('api')}>API Keys
    • -
  • setActiveSection('im/export')}>Import/Export
    • -
-
-
-

Settings for {accountName}

- {renderSettingsContent()} - - +
+
+
+
+
    +
  • setActiveSection('general')}>General
    • +
  • setActiveSection('privacy')}>Privacy
    • +
  • setActiveSection('theme')}>Theme
    • +
  • setActiveSection('foss')}>FOSS
    • +
  • setActiveSection('account')}>Account
    • +
  • setActiveSection('api')}>API Keys
    • +
  • setActiveSection('im/export')}>Import/Export
    • +
+
+
+

Settings for {accountName}

+ {renderSettingsContent()} + + +
-
); }; diff --git a/app/components/settings/TextSettings.tsx b/app/components/settings/TextSettings.tsx index eca3071..ef8aafc 100644 --- a/app/components/settings/TextSettings.tsx +++ b/app/components/settings/TextSettings.tsx @@ -5,10 +5,9 @@ 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 = ({ label, value, setValue, type, placeholder }) => { +const TextSetting: React.FC = ({ label, value, setValue, type }) => { const handleTextChange = (e: React.ChangeEvent) => { const newText = e.target.value; // Get the new value from the input setValue(newText); // Update the state in the parent component @@ -21,7 +20,6 @@ const TextSetting: React.FC = ({ 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 />
); diff --git a/app/styles/models.css b/app/styles/models.css index 7b833ae..258f71a 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -61,8 +61,8 @@ } .model-box.selected { - box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ - border-color: var(--apply-button-hover-color); + box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */ + border-color: yellow; } .overlay {