Merge pull request 'main' (#45) from React-Group/interstellar_ai:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/45
This commit is contained in:
commit
c64a62a220
5 changed files with 302 additions and 277 deletions
|
|
@ -4,139 +4,140 @@ import React, { useState, useEffect } from 'react';
|
||||||
// Define all models that should be available.
|
// Define all models that should be available.
|
||||||
const modelList = {
|
const modelList = {
|
||||||
'Offline Fast': {
|
'Offline Fast': {
|
||||||
'model_type': 'local',
|
model_type: 'local',
|
||||||
'Math': 'qwen2-math:1.5b',
|
Math: 'qwen2-math:1.5b',
|
||||||
'Code': 'starcoder2',
|
Code: 'starcoder2',
|
||||||
'Language': 'llama3.2',
|
Language: 'llama3.2',
|
||||||
'Character': 'dolphin-phi',
|
Character: 'dolphin-phi',
|
||||||
'Finance': 'qwen2-math:1.5b',
|
Finance: 'qwen2-math:1.5b',
|
||||||
'Weather': 'llama3.2',
|
Weather: 'llama3.2',
|
||||||
'Time': 'llama3.2',
|
Time: 'llama3.2',
|
||||||
'Image': 'llava-phi3'
|
Image: 'llava-phi3'
|
||||||
},
|
},
|
||||||
'Offline Slow': {
|
'Offline Slow': {
|
||||||
'model_type': 'local',
|
model_type: 'local',
|
||||||
'Math': 'wizard-math',
|
Math: 'wizard-math',
|
||||||
'Code': 'starcoder2:7b',
|
Code: 'starcoder2:7b',
|
||||||
'Language': 'llama3.1',
|
Language: 'llama3.1',
|
||||||
'Character': 'dolphin-llama3',
|
Character: 'dolphin-llama3',
|
||||||
'Finance': 'wizard-math',
|
Finance: 'wizard-math',
|
||||||
'Weather': 'llama3.1',
|
Weather: 'llama3.1',
|
||||||
'Time': 'llama3.1',
|
Time: 'llama3.1',
|
||||||
'Image': 'llava'
|
Image: 'llava'
|
||||||
},
|
},
|
||||||
'Offline Fast (FOSS)': {
|
'Offline Fast (FOSS)': {
|
||||||
'model_type': 'local',
|
model_type: 'local',
|
||||||
'Math': 'qwen2-math:1.5b',
|
Math: 'qwen2-math:1.5b',
|
||||||
'Code': 'qwen2.5-coder:1.5b',
|
Code: 'qwen2.5-coder:1.5b',
|
||||||
'Language': 'phi3.5',
|
Language: 'phi3.5',
|
||||||
'Character': 'dolphin-mistral',
|
Character: 'dolphin-mistral',
|
||||||
'Finance': 'qwen2-math:1.5b',
|
Finance: 'qwen2-math:1.5b',
|
||||||
'Weather': 'phi3.5',
|
Weather: 'phi3.5',
|
||||||
'Time': 'phi3.5',
|
Time: 'phi3.5',
|
||||||
'Image': 'llava'
|
Image: 'llava'
|
||||||
},
|
},
|
||||||
'Offline Slow (FOSS)': {
|
'Offline Slow (FOSS)': {
|
||||||
'model_type': 'local',
|
model_type: 'local',
|
||||||
'Math': 'mathstral',
|
Math: 'mathstral',
|
||||||
'Code': 'qwen2.5-coder',
|
Code: 'qwen2.5-coder',
|
||||||
'Language': 'qwen2.5',
|
Language: 'qwen2.5',
|
||||||
'Character': 'dolphin-mistral',
|
Character: 'dolphin-mistral',
|
||||||
'Finance': 'mathstral',
|
Finance: 'mathstral',
|
||||||
'Weather': 'qwen2.5',
|
Weather: 'qwen2.5',
|
||||||
'Time': 'qwen2.5',
|
Time: 'qwen2.5',
|
||||||
'Image': 'llava'
|
Image: 'llava'
|
||||||
},
|
},
|
||||||
'Online Cheap (OpenAI)': {
|
'Online Cheap (OpenAI)': {
|
||||||
'model_type': 'openai',
|
model_type: 'openai',
|
||||||
'Math': 'gpt-4o-mini',
|
Math: 'gpt-4o-mini',
|
||||||
'Code': 'gpt-4o-mini',
|
Code: 'gpt-4o-mini',
|
||||||
'Language': 'gpt-4o-mini',
|
Language: 'gpt-4o-mini',
|
||||||
'Character': 'gpt-4o-mini',
|
Character: 'gpt-4o-mini',
|
||||||
'Finance': 'gpt-4o-mini',
|
Finance: 'gpt-4o-mini',
|
||||||
'Weather': 'gpt-4o-mini',
|
Weather: 'gpt-4o-mini',
|
||||||
'Time': 'gpt-4o-mini',
|
Time: 'gpt-4o-mini',
|
||||||
'Image': 'gpt-4o-mini'
|
Image: 'gpt-4o-mini'
|
||||||
},
|
},
|
||||||
'Online Expensive (OpenAI)': {
|
'Online Expensive (OpenAI)': {
|
||||||
'model_type': 'openai',
|
model_type: 'openai',
|
||||||
'Math': 'gpt-4o',
|
Math: 'gpt-4o',
|
||||||
'Code': 'gpt-4o',
|
Code: 'gpt-4o',
|
||||||
'Language': 'gpt-4o',
|
Language: 'gpt-4o',
|
||||||
'Character': 'gpt-4o',
|
Character: 'gpt-4o',
|
||||||
'Finance': 'gpt-4o',
|
Finance: 'gpt-4o',
|
||||||
'Weather': 'gpt-4o',
|
Weather: 'gpt-4o',
|
||||||
'Time': 'gpt-4o',
|
Time: 'gpt-4o',
|
||||||
'Image': 'gpt-4o'
|
Image: 'gpt-4o'
|
||||||
},
|
},
|
||||||
'Online Cheap (Anthropic)': {
|
'Online Cheap (Anthropic)': {
|
||||||
'model_type': 'anthropic',
|
model_type: 'anthropic',
|
||||||
'Math': 'claude-3-haiku',
|
Math: 'claude-3-haiku',
|
||||||
'Code': 'claude-3-haiku',
|
Code: 'claude-3-haiku',
|
||||||
'Language': 'claude-3-haiku',
|
Language: 'claude-3-haiku',
|
||||||
'Character': 'claude-3-haiku',
|
Character: 'claude-3-haiku',
|
||||||
'Finance': 'claude-3-haiku',
|
Finance: 'claude-3-haiku',
|
||||||
'Weather': 'claude-3-haiku',
|
Weather: 'claude-3-haiku',
|
||||||
'Time': 'claude-3-haiku',
|
Time: 'claude-3-haiku',
|
||||||
'Image': 'claude-3-haiku'
|
Image: 'claude-3-haiku'
|
||||||
},
|
},
|
||||||
'Online Expensive (Anthropic)': {
|
'Online Expensive (Anthropic)': {
|
||||||
'model_type': 'anthropic',
|
model_type: 'anthropic',
|
||||||
'Math': 'claude-3-5-sonnet',
|
Math: 'claude-3-5-sonnet',
|
||||||
'Code': 'claude-3-5-sonnet',
|
Code: 'claude-3-5-sonnet',
|
||||||
'Language': 'claude-3-5-sonnet',
|
Language: 'claude-3-5-sonnet',
|
||||||
'Character': 'claude-3-5-sonnet',
|
Character: 'claude-3-5-sonnet',
|
||||||
'Finance': 'claude-3-5-sonnet',
|
Finance: 'claude-3-5-sonnet',
|
||||||
'Weather': 'claude-3-5-sonnet',
|
Weather: 'claude-3-5-sonnet',
|
||||||
'Time': 'claude-3-5-sonnet',
|
Time: 'claude-3-5-sonnet',
|
||||||
'Image': 'claude-3-5-sonnet'
|
Image: 'claude-3-5-sonnet'
|
||||||
},
|
},
|
||||||
'Online Cheap (Google)': {
|
'Online Cheap (Google)': {
|
||||||
'model_type': 'google',
|
model_type: 'google',
|
||||||
'Math': 'gemini-1.5-flash-latest',
|
Math: 'gemini-1.5-flash-latest',
|
||||||
'Code': 'gemini-1.5-flash-latest',
|
Code: 'gemini-1.5-flash-latest',
|
||||||
'Language': 'gemini-1.5-flash-latest',
|
Language: 'gemini-1.5-flash-latest',
|
||||||
'Character': 'gemini-1.5-flash-latest',
|
Character: 'gemini-1.5-flash-latest',
|
||||||
'Finance': 'gemini-1.5-flash-latest',
|
Finance: 'gemini-1.5-flash-latest',
|
||||||
'Weather': 'gemini-1.5-flash-latest',
|
Weather: 'gemini-1.5-flash-latest',
|
||||||
'Time': 'gemini-1.5-flash-latest',
|
Time: 'gemini-1.5-flash-latest',
|
||||||
'Image': 'gemini-1.5-flash-latest'
|
Image: 'gemini-1.5-flash-latest'
|
||||||
},
|
},
|
||||||
'Online Expensive (Google)': {
|
'Online Expensive (Google)': {
|
||||||
'model_type': 'google',
|
model_type: 'google',
|
||||||
'Math': 'gemini-1.5-pro-latest',
|
Math: 'gemini-1.5-pro-latest',
|
||||||
'Code': 'gemini-1.5-pro-latest',
|
Code: 'gemini-1.5-pro-latest',
|
||||||
'Language': 'gemini-1.5-pro-latest',
|
Language: 'gemini-1.5-pro-latest',
|
||||||
'Character': 'gemini-1.5-pro-latest',
|
Character: 'gemini-1.5-pro-latest',
|
||||||
'Finance': 'gemini-1.5-pro-latest',
|
Finance: 'gemini-1.5-pro-latest',
|
||||||
'Weather': 'gemini-1.5-pro-latest',
|
Weather: 'gemini-1.5-pro-latest',
|
||||||
'Time': 'gemini-1.5-pro-latest',
|
Time: 'gemini-1.5-pro-latest',
|
||||||
'Image': 'gemini-1.5-pro-latest'
|
Image: 'gemini-1.5-pro-latest'
|
||||||
},
|
},
|
||||||
'Online (La Plateforme)': {
|
'Online (La Plateforme)': {
|
||||||
'model_type': 'mistral',
|
model_type: 'mistral',
|
||||||
'Math': 'open-mistral-nemo',
|
Math: 'open-mistral-nemo',
|
||||||
'Code': 'codestral-latest',
|
Code: 'codestral-latest',
|
||||||
'Language': 'mistral-small-latest',
|
Language: 'mistral-small-latest',
|
||||||
'Character': 'mistral-large-latest',
|
Character: 'mistral-large-latest',
|
||||||
'Finance': 'open-mistral-nemo',
|
Finance: 'open-mistral-nemo',
|
||||||
'Weather': 'mistral-small-latest',
|
Weather: 'mistral-small-latest',
|
||||||
'Time': 'mistral-small-latest',
|
Time: 'mistral-small-latest',
|
||||||
'Image': 'pixtral-12b-2409'
|
Image: 'pixtral-12b-2409'
|
||||||
},
|
},
|
||||||
'Online (FOSS) (La Plateforme)': {
|
'Online (FOSS) (La Plateforme)': {
|
||||||
'model_type': 'mistral',
|
model_type: 'mistral',
|
||||||
'Math': 'open-mistral-nemo',
|
Math: 'open-mistral-nemo',
|
||||||
'Code': 'open-codestral-mamba',
|
Code: 'open-codestral-mamba',
|
||||||
'Language': 'open-mistral-nemo',
|
Language: 'open-mistral-nemo',
|
||||||
'Character': 'open-mixtral-8x22b',
|
Character: 'open-mixtral-8x22b',
|
||||||
'Finance': 'open-mixtral-8x22b',
|
Finance: 'open-mixtral-8x22b',
|
||||||
'Weather': 'open-mistral-nemo',
|
Weather: 'open-mistral-nemo',
|
||||||
'Time': 'open-mistral-nemo',
|
Time: 'open-mistral-nemo',
|
||||||
'Image': 'pixtral-12b-2409'
|
Image: 'pixtral-12b-2409'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Define the available selectedAIFunction options
|
// Define the available selectedAIFunction options
|
||||||
const modelDropdown = {
|
const modelDropdown = {
|
||||||
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
|
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
|
||||||
|
|
@ -172,6 +173,7 @@ const ModelSection: React.FC = () => {
|
||||||
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
||||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||||
|
const [isOpenSourceMode, setIsOpenSourceMode] = useState(localStorage.getItem('openSourceMode') || "false")
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
||||||
|
|
@ -233,23 +235,23 @@ const ModelSection: React.FC = () => {
|
||||||
models = [
|
models = [
|
||||||
...modelDropdown.onlineNonFoss,
|
...modelDropdown.onlineNonFoss,
|
||||||
...modelDropdown.onlineFoss,
|
...modelDropdown.onlineFoss,
|
||||||
]; // Show only offline models without FOSS
|
];
|
||||||
break;
|
if (isOpenSourceMode == "true") {
|
||||||
case 'Offline (FOSS)':
|
models = [
|
||||||
models = [
|
...modelDropdown.onlineFoss,
|
||||||
...modelDropdown.onlineFoss,
|
];
|
||||||
]; // Show only offline models with FOSS
|
} // Show only offline models without FOSS
|
||||||
break;
|
break;
|
||||||
case 'Online':
|
case 'Online':
|
||||||
models = [
|
models = [
|
||||||
...modelDropdown.offlineNonFoss,
|
...modelDropdown.offlineNonFoss,
|
||||||
...modelDropdown.offlineFoss,
|
...modelDropdown.offlineFoss,
|
||||||
]; // Show only online models without FOSS
|
];
|
||||||
break;
|
if (isOpenSourceMode == "true") {
|
||||||
case 'Online (FOSS)':
|
models = [
|
||||||
models = [
|
...modelDropdown.offlineFoss,
|
||||||
...modelDropdown.offlineFoss,
|
];
|
||||||
]; // Show only online models with FOSS
|
} // Show only online models without FOSS
|
||||||
break;
|
break;
|
||||||
case 'None':
|
case 'None':
|
||||||
models = [
|
models = [
|
||||||
|
|
@ -257,13 +259,13 @@ const ModelSection: React.FC = () => {
|
||||||
...modelDropdown.offlineFoss,
|
...modelDropdown.offlineFoss,
|
||||||
...modelDropdown.onlineNonFoss,
|
...modelDropdown.onlineNonFoss,
|
||||||
...modelDropdown.onlineFoss,
|
...modelDropdown.onlineFoss,
|
||||||
]; // Show all models if nothing matches
|
];
|
||||||
break;
|
if (isOpenSourceMode == "true") {
|
||||||
case 'None (FOSS)':
|
models = [
|
||||||
models = [
|
...modelDropdown.offlineFoss,
|
||||||
...modelDropdown.offlineFoss,
|
...modelDropdown.onlineFoss,
|
||||||
...modelDropdown.onlineFoss,
|
];
|
||||||
]; // Show all models if nothing matches
|
} // Show all models if nothing matches
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
models = [
|
models = [
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ interface ButtonSettingProps {
|
||||||
const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
|
const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
|
||||||
return (
|
return (
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<button
|
<button
|
||||||
onClick={onClick} // Call the onClick function when the button is clicked
|
onClick={onClick} // Call the onClick function when the button is clicked
|
||||||
className={className} // Apply any additional classes
|
className={className="export-button"} // Apply any additional classes
|
||||||
>
|
>
|
||||||
{label} {/* Display the label on the button */}
|
{label} {/* Display the label on the button */}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -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 [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 [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 [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
|
||||||
|
|
||||||
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
|
// Per default a purple color gradient
|
||||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
|
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
|
||||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
|
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
|
||||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
|
||||||
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
|
||||||
|
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||||
|
|
||||||
// Theme selection
|
// Theme selection
|
||||||
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
||||||
|
|
||||||
// API Keys
|
// 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 [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
|
||||||
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
|
const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
|
||||||
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
|
const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
|
||||||
const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
|
const [google, setGoogle] = useState(localStorage.getItem('google') || "");
|
||||||
|
const [myBoolean, setMyBoolean] = useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
|
||||||
|
|
||||||
const settings = {
|
const settings = {
|
||||||
userPreferences: {
|
userPreferences: {
|
||||||
|
|
@ -129,7 +131,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
preferredCurrency,
|
preferredCurrency,
|
||||||
preferredMeasurement,
|
preferredMeasurement,
|
||||||
dateFormat,
|
dateFormat,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
timeZone,
|
timeZone,
|
||||||
selectedOption,
|
selectedOption,
|
||||||
disableChatHistory,
|
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 Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
|
||||||
{ name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-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" },
|
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
const timeZoneOptions = [
|
const timeZoneOptions = [
|
||||||
|
|
@ -330,15 +332,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const savedOption = localStorage.getItem('radioSelection');
|
const savedOption = localStorage.getItem('radioSelection');
|
||||||
if (savedOption) {
|
if (savedOption) {
|
||||||
|
savedOption.replace(" (FOSS)", "");
|
||||||
setSelectedOption(savedOption); // Set saved selection
|
setSelectedOption(savedOption); // Set saved selection
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleRadioChange = (newValue: string) => {
|
const handleRadioChange = (newValue: string) => {
|
||||||
setSelectedOption(newValue); // Update the state with the selected option
|
setSelectedOption(newValue); // Update the state with the selected option
|
||||||
if (openSourceMode) {
|
|
||||||
newValue += " (FOSS)"
|
|
||||||
}
|
|
||||||
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
|
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -472,85 +472,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
case 'theme':
|
case 'theme':
|
||||||
return (
|
return (
|
||||||
<div className="settings-section">
|
<div className="settings-section">
|
||||||
<h2>Theme Settings</h2>
|
<h2>Theme Settings</h2>
|
||||||
|
|
||||||
<ThemeDropdown
|
<ThemeDropdown
|
||||||
selectedTheme={selectedTheme}
|
selectedTheme={selectedTheme}
|
||||||
setSelectedTheme={setSelectedTheme}
|
setSelectedTheme={setSelectedTheme}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{selectedTheme === 'BASIC-CUSTOM' && (
|
||||||
|
<>
|
||||||
|
<h3>Basic Colors</h3>
|
||||||
|
{/* Basic Color Inputs using ColorSetting Component */}
|
||||||
|
<ColorSetting
|
||||||
|
name="Primary Color"
|
||||||
|
value={primaryColor}
|
||||||
|
setValue={setPrimaryColor}
|
||||||
|
cssVariable=""
|
||||||
/>
|
/>
|
||||||
|
<ColorSetting
|
||||||
{selectedTheme === 'BASIC-CUSTOM' && (
|
name="Secondary Color"
|
||||||
<>
|
value={secondaryColor}
|
||||||
<h3>Basic Colors</h3>
|
setValue={setSecondaryColor}
|
||||||
{/* Basic Color Inputs using ColorSetting Component */}
|
cssVariable=""
|
||||||
<ColorSetting
|
/>
|
||||||
name="Primary Color"
|
<ColorSetting
|
||||||
value={primaryColor}
|
name="Accent Color"
|
||||||
setValue={setPrimaryColor}
|
value={accentColor}
|
||||||
cssVariable=""
|
setValue={setAccentColor}
|
||||||
/>
|
cssVariable=""
|
||||||
<ColorSetting
|
/>
|
||||||
name="Secondary Color"
|
<ColorSetting
|
||||||
value={secondaryColor}
|
name="Background Color"
|
||||||
setValue={setSecondaryColor}
|
value={basicBackgroundColor}
|
||||||
cssVariable=""
|
setValue={setBasicBackgroundColor}
|
||||||
/>
|
cssVariable=""
|
||||||
<ColorSetting
|
/>
|
||||||
name="Accent Color"
|
<ColorSetting
|
||||||
value={accentColor}
|
name="Text Color"
|
||||||
setValue={setAccentColor}
|
value={basicTextColor}
|
||||||
cssVariable=""
|
setValue={setBasicTextColor}
|
||||||
/>
|
cssVariable=""
|
||||||
<ColorSetting
|
/>
|
||||||
name="Background Color"
|
</>
|
||||||
value={basicBackgroundColor}
|
)}
|
||||||
setValue={setBasicBackgroundColor}
|
|
||||||
cssVariable=""
|
{selectedTheme === 'CUSTOM' && (
|
||||||
/>
|
<>
|
||||||
<ColorSetting
|
<h3>Additional Settings</h3>
|
||||||
name="Text Color"
|
{/* Additional Font Size Setting */}
|
||||||
value={basicTextColor}
|
<FontSizeSetting
|
||||||
setValue={setBasicTextColor}
|
fontSize={fontSize}
|
||||||
cssVariable=""
|
setFontSize={setFontSize}
|
||||||
/>
|
/>
|
||||||
</>
|
|
||||||
)}
|
{colorSettings.map((setting) => (
|
||||||
|
<ColorSetting
|
||||||
{selectedTheme === 'CUSTOM' && (
|
key={setting.cssVariable}
|
||||||
<>
|
name={setting.name}
|
||||||
<h3>Additional Settings</h3>
|
value={setting.value}
|
||||||
{/* Additional Font Size Setting */}
|
setValue={setting.setValue}
|
||||||
<FontSizeSetting
|
cssVariable={setting.cssVariable}
|
||||||
fontSize={fontSize}
|
/>
|
||||||
setFontSize={setFontSize}
|
))}
|
||||||
/>
|
|
||||||
|
<DropdownSetting
|
||||||
{colorSettings.map((setting) => (
|
label="Font Family"
|
||||||
<ColorSetting
|
value={fontFamily}
|
||||||
key={setting.cssVariable}
|
setValue={(newFont) => {
|
||||||
name={setting.name}
|
setFontFamily(newFont);
|
||||||
value={setting.value}
|
document.documentElement.style.setProperty('--font-family', newFont);
|
||||||
setValue={setting.setValue}
|
}}
|
||||||
cssVariable={setting.cssVariable}
|
options={fontOptions}
|
||||||
/>
|
/>
|
||||||
))}
|
</>
|
||||||
|
)}
|
||||||
<DropdownSetting
|
</div>
|
||||||
label="Font Family"
|
);
|
||||||
value={fontFamily}
|
|
||||||
setValue={(newFont) => {
|
|
||||||
setFontFamily(newFont);
|
|
||||||
document.documentElement.style.setProperty('--font-family', newFont);
|
|
||||||
}}
|
|
||||||
options={fontOptions}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'foss':
|
case 'foss':
|
||||||
return (
|
return (
|
||||||
|
|
@ -574,24 +574,21 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
value={newName}
|
value={newName}
|
||||||
type='text'
|
type='text'
|
||||||
setValue={setNewName}
|
setValue={setNewName}
|
||||||
|
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={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
|
||||||
/>
|
/>
|
||||||
<TextSettings
|
<TextSettings
|
||||||
label="New Password"
|
label="New Password"
|
||||||
value={newPassword}
|
value={newPassword}
|
||||||
setValue={setNewPassword}
|
setValue={setNewPassword}
|
||||||
type="password" // Input type is password
|
type="password"
|
||||||
/>
|
placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default
|
||||||
<TextSettings
|
|
||||||
label="Current Password"
|
|
||||||
value={currentPassword}
|
|
||||||
setValue={setCurrentPassword}
|
|
||||||
type="password" // Input type is password
|
|
||||||
/>
|
/>
|
||||||
<ButtonSetting
|
<ButtonSetting
|
||||||
label="Log Out" // Button label
|
label="Log Out" // Button label
|
||||||
|
|
@ -619,49 +616,73 @@ 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={localStorage.getItem('mistral') || "Enter the API key"}
|
||||||
/>
|
/>
|
||||||
|
<div className="settings-option">
|
||||||
|
<a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
|
||||||
|
<button className="export-button">Get your API key here</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<TextSettings
|
<TextSettings
|
||||||
label="OpenAI" // Label for the input
|
label="OpenAI" // Label for the input
|
||||||
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={localStorage.getItem('openai') || "Enter the API key"}
|
||||||
/>
|
/>
|
||||||
|
<div className="settings-option">
|
||||||
|
<a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
|
||||||
|
<button className="export-button">Get your API key here</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<TextSettings
|
<TextSettings
|
||||||
label="Anthropic" // Label for the input
|
label="Anthropic" // Label for the input
|
||||||
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={localStorage.getItem('anthropic') || "Enter the API key"}
|
||||||
/>
|
/>
|
||||||
|
<div className="settings-option">
|
||||||
|
<a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
|
||||||
|
<button className="export-button">Get your API key here</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<TextSettings
|
<TextSettings
|
||||||
label="Google" // Label for the input
|
label="Google" // Label for the input
|
||||||
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={localStorage.getItem('google') || "Enter the API key"}
|
||||||
/>
|
/>
|
||||||
|
<div className="settings-option">
|
||||||
|
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
|
||||||
|
<button className="export-button">Get your API key here</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
case 'im/export':
|
case 'im/export':
|
||||||
return (
|
return (
|
||||||
<div className="settings-section">
|
<div className="settings-section">
|
||||||
<h2>Import & Export</h2>
|
<h2>Import & Export</h2>
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<h3>Export the settings</h3>
|
<h3>Export the settings</h3>
|
||||||
<button onClick={handleExport} className="export-button">
|
<button onClick={handleExport} className="export-button">
|
||||||
Export Settings
|
Export Settings
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<h3>Import the settings</h3>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
onChange={handleImport}
|
||||||
|
accept=".json"
|
||||||
|
className="import-file"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="settings-option">
|
);
|
||||||
<h3>Import the settings</h3>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
onChange={handleImport}
|
|
||||||
accept=".json"
|
|
||||||
className="import-file"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
@ -695,36 +716,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="popup-overlay">
|
<div className="popup-overlay">
|
||||||
<div className="settings-content">
|
<div className="settings-content">
|
||||||
<div className="settings-container">
|
<div className="settings-container">
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
<ul>
|
<ul>
|
||||||
<li onClick={() => setActiveSection('general')}>General</li>
|
<li onClick={() => setActiveSection('general')}>General</li>
|
||||||
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
||||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
||||||
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
||||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
<li onClick={() => setActiveSection('account')}>Account</li>
|
||||||
<li onClick={() => setActiveSection('api')}>API Keys</li>
|
<li onClick={() => setActiveSection('api')}>API Keys</li>
|
||||||
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
|
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="settings-main">
|
<div className="settings-main">
|
||||||
<h2>Settings for {accountName}</h2>
|
<h2>Settings for {accountName}</h2>
|
||||||
{renderSettingsContent()}
|
{renderSettingsContent()}
|
||||||
<button className="close-popup" onClick={closeSettings}>Close</button>
|
<button className="close-popup" onClick={closeSettings}>Close</button>
|
||||||
<button className="apply" onClick={async () => {
|
<button className="apply" onClick={async () => {
|
||||||
getAllLocalStorageItems();
|
getAllLocalStorageItems();
|
||||||
closeSettings();
|
closeSettings();
|
||||||
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();
|
window.location.reload();
|
||||||
}}>
|
}}>
|
||||||
Apply
|
Apply
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,10 @@ interface TextSettingProps {
|
||||||
value: string; // The current text value
|
value: string; // The current text value
|
||||||
setValue: (newText: string) => void; // The method to update the state
|
setValue: (newText: string) => void; // The method to update the state
|
||||||
type: 'text' | 'email' | 'password'; // The type of input field
|
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 handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const newText = e.target.value; // Get the new value from the input
|
const newText = e.target.value; // Get the new value from the input
|
||||||
setValue(newText); // Update the state in the parent component
|
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
|
type={type} // Use the type prop for the input
|
||||||
value={value} // Set the current value
|
value={value} // Set the current value
|
||||||
onChange={handleTextChange} // Handle input changes
|
onChange={handleTextChange} // Handle input changes
|
||||||
|
placeholder={placeholder} // Set the placeholder text
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -61,8 +61,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-box.selected {
|
.model-box.selected {
|
||||||
box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* Glowing border */
|
box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
|
||||||
border-color: yellow;
|
border-color: var(--apply-button-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue