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

Compare commits

base: YasinOnm08:5f3a2979608b8340b5c694798439e52f32f8b4a0
Branches Tags
YasinOnm08:main
React-Group:main
..
compare: YasinOnm08:8d5cf620ff3fcb6b1f4af2bc01e8ccbee18a8696
Branches Tags
YasinOnm08:main
React-Group:main

No commits in common. "5f3a2979608b8340b5c694798439e52f32f8b4a0" and "8d5cf620ff3fcb6b1f4af2bc01e8ccbee18a8696" have entirely different histories.
5f3a297960 ... 8d5cf620ff

4 changed files with 198 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/components/Login.tsx
View file

@ -2,7 +2,6 @@ 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
@ -55,10 +54,6 @@ 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');

85
app/components/Models.tsx
View file

@ -137,11 +137,11 @@ const modelList = {
} }
} }
// Define the available selectedAIFunction options // Define the available category options
const modelDropdown = { const modelDropdown = {
offlineNonFoss: ['Offline Fast', 'Offline Slow'], offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'], offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
onlineNonFoss: [ onlineWithoutFoss: [
'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 selectedAIFunction = [ const Category = [
'Code', 'Code',
'Math', 'Math',
'Language', 'Language',
@ -166,38 +166,25 @@ const selectedAIFunction = [
'Custom2' 'Custom2'
] ]
const ModelSection: React.FC = () => { const Models: React.FC = () => {
// Initialize state with value from localStorage or default to '' // Initialize state with value from localStorage or default to ''
const [selectedModelDropdown, setSelectedModelDropdown] = useState(''); const [selectedModel, setSelectedModel] = useState('');
const [radioSelection, setRadioSelection] = useState<string | null>("") const [radioSelection, setRadioSelection] = useState<string | null>("")
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState(''); const [activeCategory, setActiveCategory] = useState('');
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>(""); const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));
useEffect(() => { useEffect(() => {
var temp = localStorage.getItem("activeSelectedAIFunction") || "" // Retrieve initial values from localStorage
setActiveSelectedAIFunction(temp) setRadioSelection(localStorage.getItem('radioSelection') || '');
if (!localStorage.getItem('selectedModelDropdown')) { setSelectedModel(localStorage.getItem('selectedModel') || '');
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 = () => {
setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); setSelectedModel(localStorage.getItem('selectedModel') || '');
}; };
// 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);
@ -205,16 +192,16 @@ const ModelSection: 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(() => {
var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || ""; const storedCategory = localStorage.getItem("activeCategory");
if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) { if (storedCategory !== currentCategory) {
setCurrentSelectedAIFunction(storedActiveSelectedAIFunction); setCurrentCategory(storedCategory);
} }
}, [activeSelectedAIFunction]); }, [activeCategory]);
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newModel = event.target.value; const newModel = event.target.value;
setSelectedModelDropdown(newModel); setSelectedModel(newModel);
localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly localStorage.setItem('selectedModel', newModel); // Update localStorage directly
}; };
// Determine the filtered models based on current radioSelection // Determine the filtered models based on current radioSelection
@ -223,7 +210,7 @@ const ModelSection: React.FC = () => {
switch (radioSelection) { switch (radioSelection) {
case 'Offline': case 'Offline':
models = [ models = [
...modelDropdown.onlineNonFoss, ...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show only offline models without FOSS ]; // Show only offline models without FOSS
break; break;
@ -234,7 +221,7 @@ const ModelSection: React.FC = () => {
break; break;
case 'Online': case 'Online':
models = [ models = [
...modelDropdown.offlineNonFoss, ...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
]; // Show only online models without FOSS ]; // Show only online models without FOSS
break; break;
@ -245,9 +232,9 @@ const ModelSection: React.FC = () => {
break; break;
case 'None': case 'None':
models = [ models = [
...modelDropdown.offlineNonFoss, ...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss, ...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show all models if nothing matches ]; // Show all models if nothing matches
break; break;
@ -259,9 +246,9 @@ const ModelSection: React.FC = () => {
break; break;
default: default:
models = [ models = [
...modelDropdown.offlineNonFoss, ...modelDropdown.offlineWithoutFoss,
...modelDropdown.offlineFoss, ...modelDropdown.offlineFoss,
...modelDropdown.onlineNonFoss, ...modelDropdown.onlineWithoutFoss,
...modelDropdown.onlineFoss, ...modelDropdown.onlineFoss,
]; // Show all models if nothing matches ]; // Show all models if nothing matches
break; break;
@ -270,14 +257,14 @@ const ModelSection: React.FC = () => {
})(); })();
const isOfflineModel = (model: string) => const isOfflineModel = (model: string) =>
modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model); modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
const modelClicked = (model: string) => { const modelClicked = (model: string) => {
localStorage.setItem('activeSelectedAIFunction' , model) localStorage.setItem('activeCategory' , model)
setActiveSelectedAIFunction(model) setActiveCategory(model)
const selectedAIFunction = selectedModelDropdown as keyof typeof modelList; const category = selectedModel as keyof typeof modelList;
localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]]) localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]]) localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
} }
return ( return (
@ -290,7 +277,7 @@ const ModelSection: 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={selectedModelDropdown} onChange={handleModelChange}> <select id="model-select" value={selectedModel} onChange={handleModelChange}>
{filteredModels.map((model) => ( {filteredModels.map((model) => (
<option key={model} value={model}> <option key={model} value={model}>
{model} {model}
@ -301,16 +288,16 @@ const ModelSection: React.FC = () => {
{/* Model Grid with Cards */} {/* Model Grid with Cards */}
<div className="grid"> <div className="grid">
{selectedAIFunction.map( {Category.map(
(displayedCategory) => ( (displayedCategory) => (
<button <button
key={displayedCategory} key={displayedCategory}
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`}
onClick={() => modelClicked(displayedCategory)} onClick={() => modelClicked(displayedCategory)}
> >
<div className="overlay"> <div className="overlay">
<h3>{displayedCategory}</h3> <h3>{displayedCategory}</h3>
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
</div> </div>
</button> </button>
) )
@ -321,4 +308,4 @@ const ModelSection: React.FC = () => {
); );
}; };
export default ModelSection; export default Models;

11
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: backgroundColor, setValue: setBackgroundColor, cssVariable: "--background-color" }, { name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" },
{ name: "Header Background Color", value: headerBackground, setValue: setHeaderBackground, cssVariable: "--header-background-color" }, { name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--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,7 +278,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const handleLogout = () => { const handleLogout = () => {
setIsLoggedIn(false); setIsLoggedIn(false);
localStorage.clear(); localStorage.removeItem('accountName');
localStorage.removeItem('accountEmail');
localStorage.removeItem('accountPassword');
alert('Successfully logged out!'); alert('Successfully logged out!');
window.location.reload(); window.location.reload();
}; };
@ -365,7 +367,6 @@ 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
@ -656,4 +657,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
); );
}; };
export default Settings; export default Settings;

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

@ -1,194 +1,172 @@
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('--close-button-color', 'red'); document.documentElement.style.setProperty('--faq-background-color', '#474D22');
document.documentElement.style.setProperty('--close-button-hover-color', '#9e0101'); document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
document.documentElement.style.setProperty('--apply-button-color', '#8B9635'); document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
document.documentElement.style.setProperty('--apply-button-hover-color', '#6b7c2b'); 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('--overlay-text-color', 'white'); document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); document.documentElement.style.setProperty('--pop-up-text', '#000');
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); document.documentElement.style.setProperty('--input-border-color', '#8B9635');
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); document.documentElement.style.setProperty('--font-size', '16px');
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('--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', '#f0f0f0'); // Lighter header background document.documentElement.style.setProperty('--header-background-color', '#ffffff');
document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast document.documentElement.style.setProperty('--header-text-color', '#000000');
document.documentElement.style.setProperty('--background-color', '#ffffff'); // White background document.documentElement.style.setProperty('--background-color', '#f0f0f0');
document.documentElement.style.setProperty('--text-color', '#000'); // Dark text color document.documentElement.style.setProperty('--text-color', '#000000');
document.documentElement.style.setProperty('--input-background-color', '#f9f9f9'); // Light input background document.documentElement.style.setProperty('--input-background-color', '#ffffff');
document.documentElement.style.setProperty('--input-button-color', '#cccccc'); // Light button color document.documentElement.style.setProperty('--input-button-color', '#007bff');
document.documentElement.style.setProperty('--input-button-hover-color', '#b3b3b3'); // Slightly darker on hover document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3');
document.documentElement.style.setProperty('--user-message-background-color', '#e0e0e0'); // Light grey for user messages document.documentElement.style.setProperty('--user-message-background-color', '#ffffff');
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Dark text for contrast document.documentElement.style.setProperty('--user-message-text-color', '#000000');
document.documentElement.style.setProperty('--ai-message-background-color', '#f7f7f7'); // Very light background for AI messages document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9');
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Dark text for readability document.documentElement.style.setProperty('--ai-message-text-color', '#000000');
document.documentElement.style.setProperty('--button-background-color', '#cccccc'); // Light button background document.documentElement.style.setProperty('--button-background-color', '#007bff');
document.documentElement.style.setProperty('--button-hover-background-color', '#b3b3b3'); // Darker on hover document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3');
document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // White background for models section document.documentElement.style.setProperty('--models-background-color', '#ffffff');
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Light background for history section document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
document.documentElement.style.setProperty('--left-panel-background-color', '#e0e0e0'); // Light grey for the left panel document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff');
document.documentElement.style.setProperty('--conversation-background-color', '#e0e0e0'); // Light grey conversation background document.documentElement.style.setProperty('--conversation-background-color', '#ffffff');
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // White document background document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
document.documentElement.style.setProperty('--close-button-color', '#ff4d4d'); // Soft red close button document.documentElement.style.setProperty('--faq-background-color', '#ffffff');
document.documentElement.style.setProperty('--close-button-hover-color', '#ff1a1a'); // Brighter red on hover document.documentElement.style.setProperty('--faq-heading-color', '#007bff');
document.documentElement.style.setProperty('--apply-button-color', '#cccccc'); // Light button color for apply document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9');
document.documentElement.style.setProperty('--apply-button-hover-color', '#b3b3b3'); // Darker hover color for apply button document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
document.documentElement.style.setProperty('--burger-menu-background-color', '#e0e0e0'); // Light grey burger menu background document.documentElement.style.setProperty('--faq-item-text-color', '#333333');
document.documentElement.style.setProperty('--overlay-text-color', '#333'); // Dark overlay text document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
document.documentElement.style.setProperty('--faq-background-color', '#f0f0f0'); // Light FAQ section background document.documentElement.style.setProperty('--pop-up-text', '#000000');
document.documentElement.style.setProperty('--faq-heading-color', '#333'); // Dark heading for contrast document.documentElement.style.setProperty('--input-border-color', '#ced4da');
document.documentElement.style.setProperty('--faq-item-background-color', '#ffffff'); // White background for FAQ items document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--faq-item-heading-color', '#000'); // Dark headings for FAQ items document.documentElement.style.setProperty('--font-size', '16px');
document.documentElement.style.setProperty('--faq-item-text-color', '#666'); // Medium grey text color for readability document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
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'); // Dark header background document.documentElement.style.setProperty('--header-background-color', '#1a1a1a');
document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header document.documentElement.style.setProperty('--header-text-color', '#ffffff');
document.documentElement.style.setProperty('--background-color', '#2c2c2c'); // Dark main background document.documentElement.style.setProperty('--background-color', '#121212');
document.documentElement.style.setProperty('--text-color', '#f0f0f0'); // Light text color document.documentElement.style.setProperty('--text-color', '#e0e0e0');
document.documentElement.style.setProperty('--input-background-color', '#3d3d3d'); // Dark input background document.documentElement.style.setProperty('--input-background-color', '#1e1e1e');
document.documentElement.style.setProperty('--input-button-color', '#4caf50'); // Button color document.documentElement.style.setProperty('--input-button-color', '#3c3c3c');
document.documentElement.style.setProperty('--input-button-hover-color', '#66bb6a'); // Button hover color document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a');
document.documentElement.style.setProperty('--user-message-background-color', '#4caf50'); // User message background document.documentElement.style.setProperty('--user-message-background-color', '#000000');
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User message text color document.documentElement.style.setProperty('--user-message-text-color', '#ffffff');
document.documentElement.style.setProperty('--ai-message-background-color', '#424242'); // AI message background document.documentElement.style.setProperty('--ai-message-background-color', '#202020');
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI message text color document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff');
document.documentElement.style.setProperty('--button-background-color', '#4caf50'); // Button background color document.documentElement.style.setProperty('--button-background-color', '#3c3c3c');
document.documentElement.style.setProperty('--button-hover-background-color', '#66bb6a'); // Button hover color document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a');
document.documentElement.style.setProperty('--models-background-color', '#3d3d3d'); // Dark background for models section document.documentElement.style.setProperty('--models-background-color', '#1e1e1e');
document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background document.documentElement.style.setProperty('--history-background-color', '#1a1a1a');
document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e');
document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c');
document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e');
document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c');
document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color document.documentElement.style.setProperty('--faq-heading-color', '#ffffff');
document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c');
document.documentElement.style.setProperty('--apply-button-hover-color', '#66bb6a'); // Apply button hover color document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff');
document.documentElement.style.setProperty('--burger-menu-background-color', '#1a1a1a'); // Dark burger menu background document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0');
document.documentElement.style.setProperty('--overlay-text-color', '#ffffff'); // White overlay text document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a');
document.documentElement.style.setProperty('--faq-background-color', '#333333'); // Dark background for FAQ section document.documentElement.style.setProperty('--pop-up-text', '#ffffff');
document.documentElement.style.setProperty('--faq-heading-color', '#4caf50'); // FAQ heading color document.documentElement.style.setProperty('--input-border-color', '#3c3c3c');
document.documentElement.style.setProperty('--faq-item-background-color', '#4c4c4c'); // Dark FAQ item background document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // White FAQ item heading document.documentElement.style.setProperty('--font-size', '16px');
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Light text for FAQ items document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
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'),
headerBackground: localStorage.getItem('headerBackground'), textColor: localStorage.getItem('textColor'),
textColor: localStorage.getItem('textColor'), inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), inputButtonColor: localStorage.getItem('inputButtonColor'),
inputButtonColor: localStorage.getItem('inputButtonColor'), inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'), userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'), userMessageTextColor: localStorage.getItem('userMessageTextColor'),
userMessageTextColor: localStorage.getItem('userMessageTextColor'), aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'), aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'), buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'), buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'), modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'), historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'), leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'), conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'), faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), faqHeadingColor: localStorage.getItem('faqHeadingColor'),
faqHeadingColor: localStorage.getItem('faqHeadingColor'), faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), faqItemTextColor: localStorage.getItem('faqItemTextColor'),
faqItemTextColor: localStorage.getItem('faqItemTextColor'), faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), inputBorderColor: localStorage.getItem('inputBorderColor'),
inputBorderColor: localStorage.getItem('inputBorderColor'), fontFamily: localStorage.getItem('fontFamily'),
fontFamily: localStorage.getItem('fontFamily'), fontSize: localStorage.getItem('fontSize'),
fontSize: localStorage.getItem('fontSize'), burgerMenu: localStorage.getItem('burgerMenu'),
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('--header-background-color', themeVariables.headerBackground || '#7e7e7e'); document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
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':
applyCustomTheme(); // Handle custom theme application here if necessary
break; break;
default: default:
applyIOMarketTheme(); applyIOMarketTheme();
break; break;
} }
}; };