YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

main #40

Merged
YasinOnm08 merged 10 commits from React-Group/interstellar_ai:main into main 2024-10-02 09:38:37 +02:00
Conversation 0 Commits 10 Files changed 4 +237 -198
4 changed files with 237 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/components/Login.tsx
View file

@ -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');

83
app/components/Models.tsx
View file

@ -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;

9
app/components/settings/Settings.tsx
View file

@ -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

334
app/components/settings/theme.ts
View file

@ -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;
} }
}; };