forked from React-Group/interstellar_ai
main #40
4 changed files with 237 additions and 198 deletions
|
|
@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||||
import {
|
import {
|
||||||
createAccount,
|
createAccount,
|
||||||
checkCredentials,
|
checkCredentials,
|
||||||
|
getData
|
||||||
} from '../backend/database';
|
} from '../backend/database';
|
||||||
import Settings from './settings/Settings'; // Import the Settings component
|
import Settings from './settings/Settings'; // Import the Settings component
|
||||||
|
|
||||||
|
|
@ -54,6 +55,10 @@ const Login: React.FC = () => {
|
||||||
const success = await checkCredentials(accountName, password);
|
const success = await checkCredentials(accountName, password);
|
||||||
if (success) {
|
if (success) {
|
||||||
setIsLoggedIn(true); // Successful login
|
setIsLoggedIn(true); // Successful login
|
||||||
|
var data = await getData(accountName, password)
|
||||||
|
if (data) {
|
||||||
|
localStorage.setItem("dataFromServer", data)
|
||||||
|
}
|
||||||
setShowLoginPopup(false); // Close the login popup
|
setShowLoginPopup(false); // Close the login popup
|
||||||
} else {
|
} else {
|
||||||
alert('Incorrect credentials');
|
alert('Incorrect credentials');
|
||||||
|
|
|
||||||
|
|
@ -137,11 +137,11 @@ const modelList = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Define the available category options
|
// Define the available selectedAIFunction options
|
||||||
const modelDropdown = {
|
const modelDropdown = {
|
||||||
offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
|
offlineNonFoss: ['Offline Fast', 'Offline Slow'],
|
||||||
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
|
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
|
||||||
onlineWithoutFoss: [
|
onlineNonFoss: [
|
||||||
'Online Cheap (OpenAI)',
|
'Online Cheap (OpenAI)',
|
||||||
'Online Expensive (OpenAI)',
|
'Online Expensive (OpenAI)',
|
||||||
'Online Cheap (Anthropic)',
|
'Online Cheap (Anthropic)',
|
||||||
|
|
@ -153,7 +153,7 @@ const modelDropdown = {
|
||||||
onlineFoss: ['Online (FOSS) (La Plateforme)'],
|
onlineFoss: ['Online (FOSS) (La Plateforme)'],
|
||||||
};
|
};
|
||||||
|
|
||||||
const Category = [
|
const selectedAIFunction = [
|
||||||
'Code',
|
'Code',
|
||||||
'Math',
|
'Math',
|
||||||
'Language',
|
'Language',
|
||||||
|
|
@ -166,25 +166,38 @@ const Category = [
|
||||||
'Custom2'
|
'Custom2'
|
||||||
]
|
]
|
||||||
|
|
||||||
const Models: React.FC = () => {
|
const ModelSection: React.FC = () => {
|
||||||
// Initialize state with value from localStorage or default to ''
|
// Initialize state with value from localStorage or default to ''
|
||||||
const [selectedModel, setSelectedModel] = useState('');
|
const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
|
||||||
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
const [radioSelection, setRadioSelection] = useState<string | null>("")
|
||||||
const [activeCategory, setActiveCategory] = useState('');
|
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||||
const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));
|
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Retrieve initial values from localStorage
|
var temp = localStorage.getItem("activeSelectedAIFunction") || ""
|
||||||
setRadioSelection(localStorage.getItem('radioSelection') || '');
|
setActiveSelectedAIFunction(temp)
|
||||||
setSelectedModel(localStorage.getItem('selectedModel') || '');
|
if (!localStorage.getItem('selectedModelDropdown')) {
|
||||||
|
localStorage.setItem("selectedModelDropdown", "Offline Fast" )
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!localStorage.getItem("activeSelectedAIFunction")) {
|
||||||
|
setActiveSelectedAIFunction('Code')
|
||||||
|
localStorage.setItem('activeSelectedAIFunction' ,'Code')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!localStorage.getItem("model")) {
|
||||||
|
localStorage.setItem("model" ,'starcoder2')
|
||||||
|
}
|
||||||
|
|
||||||
const handleStorageChange = () => {
|
const handleStorageChange = () => {
|
||||||
setSelectedModel(localStorage.getItem('selectedModel') || '');
|
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update immediately when localStorage changes
|
// Update immediately when localStorage changes
|
||||||
window.addEventListener('storage', handleStorageChange);
|
window.addEventListener('storage', handleStorageChange);
|
||||||
|
|
||||||
|
setRadioSelection(localStorage.getItem('radioSelection') || '');
|
||||||
|
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
|
||||||
// Cleanup listener on component unmount
|
// Cleanup listener on component unmount
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('storage', handleStorageChange);
|
window.removeEventListener('storage', handleStorageChange);
|
||||||
|
|
@ -192,16 +205,16 @@ const Models: React.FC = () => {
|
||||||
}, []); // Dependency array can remain empty if you only want this to run on mount
|
}, []); // Dependency array can remain empty if you only want this to run on mount
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const storedCategory = localStorage.getItem("activeCategory");
|
var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
|
||||||
if (storedCategory !== currentCategory) {
|
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
|
||||||
setCurrentCategory(storedCategory);
|
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
|
||||||
}
|
}
|
||||||
}, [activeCategory]);
|
}, [activeSelectedAIFunction]);
|
||||||
|
|
||||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
const newModel = event.target.value;
|
const newModel = event.target.value;
|
||||||
setSelectedModel(newModel);
|
setSelectedModelDropdown(newModel);
|
||||||
localStorage.setItem('selectedModel', newModel); // Update localStorage directly
|
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
|
||||||
};
|
};
|
||||||
|
|
||||||
// Determine the filtered models based on current radioSelection
|
// Determine the filtered models based on current radioSelection
|
||||||
|
|
@ -210,7 +223,7 @@ const Models: React.FC = () => {
|
||||||
switch (radioSelection) {
|
switch (radioSelection) {
|
||||||
case 'Offline':
|
case 'Offline':
|
||||||
models = [
|
models = [
|
||||||
...modelDropdown.onlineWithoutFoss,
|
...modelDropdown.onlineNonFoss,
|
||||||
...modelDropdown.onlineFoss,
|
...modelDropdown.onlineFoss,
|
||||||
]; // Show only offline models without FOSS
|
]; // Show only offline models without FOSS
|
||||||
break;
|
break;
|
||||||
|
|
@ -221,7 +234,7 @@ const Models: React.FC = () => {
|
||||||
break;
|
break;
|
||||||
case 'Online':
|
case 'Online':
|
||||||
models = [
|
models = [
|
||||||
...modelDropdown.offlineWithoutFoss,
|
...modelDropdown.offlineNonFoss,
|
||||||
...modelDropdown.offlineFoss,
|
...modelDropdown.offlineFoss,
|
||||||
]; // Show only online models without FOSS
|
]; // Show only online models without FOSS
|
||||||
break;
|
break;
|
||||||
|
|
@ -232,9 +245,9 @@ const Models: React.FC = () => {
|
||||||
break;
|
break;
|
||||||
case 'None':
|
case 'None':
|
||||||
models = [
|
models = [
|
||||||
...modelDropdown.offlineWithoutFoss,
|
...modelDropdown.offlineNonFoss,
|
||||||
...modelDropdown.offlineFoss,
|
...modelDropdown.offlineFoss,
|
||||||
...modelDropdown.onlineWithoutFoss,
|
...modelDropdown.onlineNonFoss,
|
||||||
...modelDropdown.onlineFoss,
|
...modelDropdown.onlineFoss,
|
||||||
]; // Show all models if nothing matches
|
]; // Show all models if nothing matches
|
||||||
break;
|
break;
|
||||||
|
|
@ -246,9 +259,9 @@ const Models: React.FC = () => {
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
models = [
|
models = [
|
||||||
...modelDropdown.offlineWithoutFoss,
|
...modelDropdown.offlineNonFoss,
|
||||||
...modelDropdown.offlineFoss,
|
...modelDropdown.offlineFoss,
|
||||||
...modelDropdown.onlineWithoutFoss,
|
...modelDropdown.onlineNonFoss,
|
||||||
...modelDropdown.onlineFoss,
|
...modelDropdown.onlineFoss,
|
||||||
]; // Show all models if nothing matches
|
]; // Show all models if nothing matches
|
||||||
break;
|
break;
|
||||||
|
|
@ -257,14 +270,14 @@ const Models: React.FC = () => {
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const isOfflineModel = (model: string) =>
|
const isOfflineModel = (model: string) =>
|
||||||
modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
|
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
|
||||||
|
|
||||||
const modelClicked = (model: string) => {
|
const modelClicked = (model: string) => {
|
||||||
localStorage.setItem('activeCategory' , model)
|
localStorage.setItem('activeSelectedAIFunction' , model)
|
||||||
setActiveCategory(model)
|
setActiveSelectedAIFunction(model)
|
||||||
const category = selectedModel as keyof typeof modelList;
|
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
|
||||||
localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
|
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
|
||||||
localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
|
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -277,7 +290,7 @@ const Models: React.FC = () => {
|
||||||
{/* Model Selection Dropdown */}
|
{/* Model Selection Dropdown */}
|
||||||
<div className="model-dropdown">
|
<div className="model-dropdown">
|
||||||
<label htmlFor="model-select">Select AI Model:</label>
|
<label htmlFor="model-select">Select AI Model:</label>
|
||||||
<select id="model-select" value={selectedModel} onChange={handleModelChange}>
|
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
||||||
{filteredModels.map((model) => (
|
{filteredModels.map((model) => (
|
||||||
<option key={model} value={model}>
|
<option key={model} value={model}>
|
||||||
{model}
|
{model}
|
||||||
|
|
@ -288,16 +301,16 @@ const Models: React.FC = () => {
|
||||||
|
|
||||||
{/* Model Grid with Cards */}
|
{/* Model Grid with Cards */}
|
||||||
<div className="grid">
|
<div className="grid">
|
||||||
{Category.map(
|
{selectedAIFunction.map(
|
||||||
(displayedCategory) => (
|
(displayedCategory) => (
|
||||||
<button
|
<button
|
||||||
key={displayedCategory}
|
key={displayedCategory}
|
||||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`}
|
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
||||||
onClick={() => modelClicked(displayedCategory)}
|
onClick={() => modelClicked(displayedCategory)}
|
||||||
>
|
>
|
||||||
<div className="overlay">
|
<div className="overlay">
|
||||||
<h3>{displayedCategory}</h3>
|
<h3>{displayedCategory}</h3>
|
||||||
{isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
|
|
@ -308,4 +321,4 @@ const Models: React.FC = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Models;
|
export default ModelSection;
|
||||||
|
|
|
||||||
|
|
@ -174,8 +174,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
};
|
};
|
||||||
|
|
||||||
const colorSettings = [
|
const colorSettings = [
|
||||||
{ name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" },
|
{ name: "Background Color", value: backgroundColor, setValue: setBackgroundColor, cssVariable: "--background-color" },
|
||||||
{ name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" },
|
{ name: "Header Background Color", value: headerBackground, setValue: setHeaderBackground, cssVariable: "--header-background-color" },
|
||||||
{ name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" },
|
{ name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" },
|
||||||
{ name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" },
|
{ name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" },
|
||||||
{ name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" },
|
{ name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" },
|
||||||
|
|
@ -278,9 +278,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
setIsLoggedIn(false);
|
setIsLoggedIn(false);
|
||||||
localStorage.removeItem('accountName');
|
localStorage.clear();
|
||||||
localStorage.removeItem('accountEmail');
|
|
||||||
localStorage.removeItem('accountPassword');
|
|
||||||
alert('Successfully logged out!');
|
alert('Successfully logged out!');
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
};
|
};
|
||||||
|
|
@ -367,6 +365,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
if (useName && usePassword) {
|
if (useName && usePassword) {
|
||||||
const success = await deleteAccount(useName, usePassword);
|
const success = await deleteAccount(useName, usePassword);
|
||||||
if (success) {
|
if (success) {
|
||||||
|
localStorage.clear();
|
||||||
alert('Account deleted successfully!');
|
alert('Account deleted successfully!');
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
// Optionally, redirect or reset state here
|
// Optionally, redirect or reset state here
|
||||||
|
|
|
||||||
|
|
@ -1,172 +1,194 @@
|
||||||
export const applyIOMarketTheme = () => {
|
export const applyIOMarketTheme = () => {
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
|
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff');
|
document.documentElement.style.setProperty('--header-text-color', '#ffffff');
|
||||||
document.documentElement.style.setProperty('--background-color', '#8B9635');
|
document.documentElement.style.setProperty('--background-color', '#8B9635');
|
||||||
document.documentElement.style.setProperty('--text-color', '#474D22');
|
document.documentElement.style.setProperty('--text-color', '#474D22');
|
||||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--input-background-color', '#ffffff');
|
||||||
document.documentElement.style.setProperty('--input-button-color', '#8B9635');
|
document.documentElement.style.setProperty('--input-button-color', '#8B9635');
|
||||||
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b');
|
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b');
|
||||||
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635');
|
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635');
|
||||||
document.documentElement.style.setProperty('--user-message-text-color', '#000');
|
document.documentElement.style.setProperty('--user-message-text-color', '#000');
|
||||||
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB');
|
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB');
|
||||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000');
|
document.documentElement.style.setProperty('--ai-message-text-color', '#000');
|
||||||
document.documentElement.style.setProperty('--button-background-color', '#8B9635');
|
document.documentElement.style.setProperty('--button-background-color', '#8B9635');
|
||||||
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b');
|
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b');
|
||||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--models-background-color', '#ffffff');
|
||||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
|
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
|
||||||
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e');
|
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e');
|
||||||
document.documentElement.style.setProperty('--conversation-background-color', '#79832e');
|
document.documentElement.style.setProperty('--conversation-background-color', '#79832e');
|
||||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
|
||||||
document.documentElement.style.setProperty('--faq-background-color', '#474D22');
|
document.documentElement.style.setProperty('--close-button-color', 'red');
|
||||||
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
|
document.documentElement.style.setProperty('--close-button-hover-color', '#9e0101');
|
||||||
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
|
document.documentElement.style.setProperty('--apply-button-color', '#8B9635');
|
||||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22');
|
document.documentElement.style.setProperty('--apply-button-hover-color', '#6b7c2b');
|
||||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333');
|
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
|
||||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
|
document.documentElement.style.setProperty('--overlay-text-color', 'white');
|
||||||
document.documentElement.style.setProperty('--pop-up-text', '#000');
|
document.documentElement.style.setProperty('--faq-background-color', '#474D22');
|
||||||
document.documentElement.style.setProperty('--input-border-color', '#8B9635');
|
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
|
||||||
document.documentElement.style.setProperty('--font-size', '16px');
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22');
|
||||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
|
document.documentElement.style.setProperty('--faq-item-text-color', '#333');
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
|
||||||
|
document.documentElement.style.setProperty('--popup-background-color', '#8B9635');
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#000');
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#8B9635');
|
||||||
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
||||||
|
document.documentElement.style.setProperty('--font-size', '16px');
|
||||||
};
|
};
|
||||||
|
|
||||||
export const applyWhiteTheme = () => {
|
export const applyWhiteTheme = () => {
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#000000');
|
document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
|
||||||
document.documentElement.style.setProperty('--background-color', '#f0f0f0');
|
document.documentElement.style.setProperty('--background-color', '#ffffff'); // White background
|
||||||
document.documentElement.style.setProperty('--text-color', '#000000');
|
document.documentElement.style.setProperty('--text-color', '#000'); // Dark text color
|
||||||
document.documentElement.style.setProperty('--input-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--input-background-color', '#f9f9f9'); // Light input background
|
||||||
document.documentElement.style.setProperty('--input-button-color', '#007bff');
|
document.documentElement.style.setProperty('--input-button-color', '#cccccc'); // Light button color
|
||||||
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3');
|
document.documentElement.style.setProperty('--input-button-hover-color', '#b3b3b3'); // Slightly darker on hover
|
||||||
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--user-message-background-color', '#e0e0e0'); // Light grey for user messages
|
||||||
document.documentElement.style.setProperty('--user-message-text-color', '#000000');
|
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Dark text for contrast
|
||||||
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9');
|
document.documentElement.style.setProperty('--ai-message-background-color', '#f7f7f7'); // Very light background for AI messages
|
||||||
document.documentElement.style.setProperty('--ai-message-text-color', '#000000');
|
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Dark text for readability
|
||||||
document.documentElement.style.setProperty('--button-background-color', '#007bff');
|
document.documentElement.style.setProperty('--button-background-color', '#cccccc'); // Light button background
|
||||||
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3');
|
document.documentElement.style.setProperty('--button-hover-background-color', '#b3b3b3'); // Darker on hover
|
||||||
document.documentElement.style.setProperty('--models-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // White background for models section
|
||||||
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
|
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Light background for history section
|
||||||
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--left-panel-background-color', '#e0e0e0'); // Light grey for the left panel
|
||||||
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--conversation-background-color', '#e0e0e0'); // Light grey conversation background
|
||||||
document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // White document background
|
||||||
document.documentElement.style.setProperty('--faq-background-color', '#ffffff');
|
document.documentElement.style.setProperty('--close-button-color', '#ff4d4d'); // Soft red close button
|
||||||
document.documentElement.style.setProperty('--faq-heading-color', '#007bff');
|
document.documentElement.style.setProperty('--close-button-hover-color', '#ff1a1a'); // Brighter red on hover
|
||||||
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9');
|
document.documentElement.style.setProperty('--apply-button-color', '#cccccc'); // Light button color for apply
|
||||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
|
document.documentElement.style.setProperty('--apply-button-hover-color', '#b3b3b3'); // Darker hover color for apply button
|
||||||
document.documentElement.style.setProperty('--faq-item-text-color', '#333333');
|
document.documentElement.style.setProperty('--burger-menu-background-color', '#e0e0e0'); // Light grey burger menu background
|
||||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
|
document.documentElement.style.setProperty('--overlay-text-color', '#333'); // Dark overlay text
|
||||||
document.documentElement.style.setProperty('--pop-up-text', '#000000');
|
document.documentElement.style.setProperty('--faq-background-color', '#f0f0f0'); // Light FAQ section background
|
||||||
document.documentElement.style.setProperty('--input-border-color', '#ced4da');
|
document.documentElement.style.setProperty('--faq-heading-color', '#333'); // Dark heading for contrast
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
document.documentElement.style.setProperty('--faq-item-background-color', '#ffffff'); // White background for FAQ items
|
||||||
document.documentElement.style.setProperty('--font-size', '16px');
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#000'); // Dark headings for FAQ items
|
||||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
|
document.documentElement.style.setProperty('--faq-item-text-color', '#666'); // Medium grey text color for readability
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#eaeaea'); // Slight hover effect for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--popup-background-color', '#ffffff'); // White popup background
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Dark text for pop-ups
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#cccccc'); // Light input border color
|
||||||
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
|
||||||
|
document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
|
||||||
};
|
};
|
||||||
|
|
||||||
export const applyBlackTheme = () => {
|
export const applyBlackTheme = () => {
|
||||||
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a');
|
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
|
||||||
document.documentElement.style.setProperty('--header-text-color', '#ffffff');
|
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
|
||||||
document.documentElement.style.setProperty('--background-color', '#121212');
|
document.documentElement.style.setProperty('--background-color', '#2c2c2c'); // Dark main background
|
||||||
document.documentElement.style.setProperty('--text-color', '#e0e0e0');
|
document.documentElement.style.setProperty('--text-color', '#f0f0f0'); // Light text color
|
||||||
document.documentElement.style.setProperty('--input-background-color', '#1e1e1e');
|
document.documentElement.style.setProperty('--input-background-color', '#3d3d3d'); // Dark input background
|
||||||
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c');
|
document.documentElement.style.setProperty('--input-button-color', '#4caf50'); // Button color
|
||||||
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a');
|
document.documentElement.style.setProperty('--input-button-hover-color', '#66bb6a'); // Button hover color
|
||||||
document.documentElement.style.setProperty('--user-message-background-color', '#000000');
|
document.documentElement.style.setProperty('--user-message-background-color', '#4caf50'); // User message background
|
||||||
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff');
|
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User message text color
|
||||||
document.documentElement.style.setProperty('--ai-message-background-color', '#202020');
|
document.documentElement.style.setProperty('--ai-message-background-color', '#424242'); // AI message background
|
||||||
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff');
|
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI message text color
|
||||||
document.documentElement.style.setProperty('--button-background-color', '#3c3c3c');
|
document.documentElement.style.setProperty('--button-background-color', '#4caf50'); // Button background color
|
||||||
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a');
|
document.documentElement.style.setProperty('--button-hover-background-color', '#66bb6a'); // Button hover color
|
||||||
document.documentElement.style.setProperty('--models-background-color', '#1e1e1e');
|
document.documentElement.style.setProperty('--models-background-color', '#3d3d3d'); // Dark background for models section
|
||||||
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a');
|
document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
|
||||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e');
|
document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
|
||||||
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c');
|
document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
|
||||||
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e');
|
document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
|
||||||
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c');
|
document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
|
||||||
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff');
|
document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
|
||||||
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c');
|
document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
|
||||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff');
|
document.documentElement.style.setProperty('--apply-button-hover-color', '#66bb6a'); // Apply button hover color
|
||||||
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0');
|
document.documentElement.style.setProperty('--burger-menu-background-color', '#1a1a1a'); // Dark burger menu background
|
||||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a');
|
document.documentElement.style.setProperty('--overlay-text-color', '#ffffff'); // White overlay text
|
||||||
document.documentElement.style.setProperty('--pop-up-text', '#ffffff');
|
document.documentElement.style.setProperty('--faq-background-color', '#333333'); // Dark background for FAQ section
|
||||||
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c');
|
document.documentElement.style.setProperty('--faq-heading-color', '#4caf50'); // FAQ heading color
|
||||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
document.documentElement.style.setProperty('--faq-item-background-color', '#4c4c4c'); // Dark FAQ item background
|
||||||
document.documentElement.style.setProperty('--font-size', '16px');
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // White FAQ item heading
|
||||||
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
|
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Light text for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#555555'); // Hover background for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--popup-background-color', '#4caf50'); // Dark popup background
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // White pop-up text
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#4caf50'); // Input border color
|
||||||
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||||
|
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const applyCustomTheme = () => {
|
export const applyCustomTheme = () => {
|
||||||
const themeVariables = {
|
const themeVariables = {
|
||||||
backgroundColor: localStorage.getItem('backgroundColor'),
|
backgroundColor: localStorage.getItem('backgroundColor'),
|
||||||
textColor: localStorage.getItem('textColor'),
|
headerBackground: localStorage.getItem('headerBackground'),
|
||||||
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
|
textColor: localStorage.getItem('textColor'),
|
||||||
inputButtonColor: localStorage.getItem('inputButtonColor'),
|
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
|
||||||
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
|
inputButtonColor: localStorage.getItem('inputButtonColor'),
|
||||||
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
|
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
|
||||||
userMessageTextColor: localStorage.getItem('userMessageTextColor'),
|
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
|
||||||
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
|
userMessageTextColor: localStorage.getItem('userMessageTextColor'),
|
||||||
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
|
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
|
||||||
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
|
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
|
||||||
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
|
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
|
||||||
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
|
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
|
||||||
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
|
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
|
||||||
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
|
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
|
||||||
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
|
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
|
||||||
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
|
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
|
||||||
faqHeadingColor: localStorage.getItem('faqHeadingColor'),
|
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
|
||||||
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
|
faqHeadingColor: localStorage.getItem('faqHeadingColor'),
|
||||||
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
|
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
|
||||||
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
|
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
|
||||||
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
|
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
|
||||||
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
|
||||||
fontFamily: localStorage.getItem('fontFamily'),
|
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
||||||
fontSize: localStorage.getItem('fontSize'),
|
fontFamily: localStorage.getItem('fontFamily'),
|
||||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
fontSize: localStorage.getItem('fontSize'),
|
||||||
};
|
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||||
|
};
|
||||||
|
|
||||||
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
|
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
|
||||||
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
|
document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
|
||||||
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
|
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
|
||||||
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
|
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
|
||||||
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
|
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
|
||||||
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
|
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
|
||||||
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
|
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
|
||||||
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
|
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
|
||||||
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
|
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
|
||||||
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
|
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
|
||||||
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
|
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
|
||||||
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
|
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
|
||||||
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
|
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
|
||||||
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
|
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
|
||||||
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
|
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
|
||||||
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
|
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
|
||||||
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
|
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
|
||||||
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
|
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
|
||||||
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
|
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
|
||||||
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
|
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
|
||||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
|
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
|
||||||
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
|
||||||
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
|
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
|
||||||
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
|
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
|
||||||
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
|
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
|
||||||
|
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
|
||||||
};
|
};
|
||||||
|
|
||||||
// This is the new function that calls the appropriate theme application
|
// This is the new function that calls the appropriate theme application
|
||||||
export const applyTheme = (theme: string) => {
|
export const applyTheme = (theme: string) => {
|
||||||
switch (theme) {
|
switch (theme) {
|
||||||
case 'IOMARKET':
|
case 'IOMARKET':
|
||||||
applyIOMarketTheme();
|
applyIOMarketTheme();
|
||||||
break;
|
break;
|
||||||
case 'WHITE':
|
case 'WHITE':
|
||||||
applyWhiteTheme();
|
applyWhiteTheme();
|
||||||
break;
|
break;
|
||||||
case 'BLACK':
|
case 'BLACK':
|
||||||
applyBlackTheme();
|
applyBlackTheme();
|
||||||
break;
|
break;
|
||||||
case 'CUSTOM':
|
case 'CUSTOM':
|
||||||
// Handle custom theme application here if necessary
|
applyCustomTheme();
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
applyIOMarketTheme();
|
applyIOMarketTheme();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue