forked from React-Group/interstellar_ai
Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai
This commit is contained in:
commit
238e82bb95
15 changed files with 806 additions and 501 deletions
|
@ -11,6 +11,7 @@ import {
|
|||
checkCredentials,
|
||||
deleteAccount,
|
||||
} from '../backend/database';
|
||||
import { equal } from 'assert';
|
||||
|
||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
||||
|
||||
|
@ -85,9 +86,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
|
||||
const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
|
||||
const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
|
||||
const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
|
||||
const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
|
||||
const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
|
||||
const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
|
||||
const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
|
||||
const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
|
||||
const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
|
||||
const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
|
||||
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('selectedTheme');
|
||||
if (savedTheme) {
|
||||
setSelectedTheme(savedTheme);
|
||||
// Apply the saved theme on initial load
|
||||
switch (savedTheme) {
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Handle custom theme application here if necessary
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, []); // Runs only once when the component mounts
|
||||
|
||||
// API Keys
|
||||
const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
|
||||
|
@ -146,8 +181,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
openai,
|
||||
anthropic,
|
||||
google,
|
||||
// Additional theme settings
|
||||
faqBackgroundColor,
|
||||
faqHeadingColor,
|
||||
faqItemBackgroundColor,
|
||||
faqItemHeadingColor,
|
||||
faqItemTextColor,
|
||||
faqItemHoverBackgroundColor,
|
||||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
};
|
||||
|
||||
// Update local storage
|
||||
for (const [key, value] of Object.entries(settings)) {
|
||||
if (typeof value === 'boolean') {
|
||||
|
@ -196,6 +239,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
openai,
|
||||
anthropic,
|
||||
google,
|
||||
// Additional theme settings
|
||||
faqBackgroundColor,
|
||||
faqHeadingColor,
|
||||
faqItemBackgroundColor,
|
||||
faqItemHeadingColor,
|
||||
faqItemTextColor,
|
||||
faqItemHoverBackgroundColor,
|
||||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -311,11 +363,45 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
}
|
||||
|
||||
if (settings.burgerMenu) {
|
||||
setBurgerMenu(settings.fontSize);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
|
||||
setBurgerMenu(settings.burgerMenu);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
|
||||
}
|
||||
|
||||
// Additional theme settings
|
||||
if (settings.faqBackgroundColor) {
|
||||
document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
|
||||
}
|
||||
|
||||
if (settings.faqHeadingColor) {
|
||||
document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
|
||||
}
|
||||
|
||||
if (settings.faqItemBackgroundColor) {
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
|
||||
}
|
||||
|
||||
if (settings.faqItemHeadingColor) {
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
|
||||
}
|
||||
|
||||
if (settings.faqItemTextColor) {
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
|
||||
}
|
||||
|
||||
if (settings.faqItemHoverBackgroundColor) {
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
|
||||
}
|
||||
|
||||
if (settings.popupBackgroundColor) {
|
||||
document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
|
||||
}
|
||||
|
||||
if (settings.overlayTextColor) {
|
||||
document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Function to handle updating all credentials
|
||||
const handleUpdateCredentials = async () => {
|
||||
// Update account information
|
||||
|
@ -532,28 +618,31 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value; // Get the selected value from the event
|
||||
setSelectedTheme(theme); // Update state for selected theme
|
||||
const theme = e.target.value;
|
||||
if (theme !== "default") {
|
||||
setSelectedTheme(theme);
|
||||
localStorage.setItem("selectedTheme", theme);
|
||||
|
||||
// Apply the appropriate theme based on selection
|
||||
switch (theme) { // Use 'theme' instead of 'selectedTheme'
|
||||
switch (theme) {
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme(); // Call the function to apply the WHITE theme
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme(); // Call the function to apply the BLACK theme
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Handle custom theme logic here if necessary
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme(); // Fallback to the IOMARKET theme
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
}} // Handle theme selection
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
<option value="IOMARKET">IOMARKET</option>
|
||||
|
@ -562,10 +651,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<option value="CUSTOM">CUSTOM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
{/* Font Size */}
|
||||
<div className="settings-option">
|
||||
<p>Font Size</p>
|
||||
<input
|
||||
|
@ -582,6 +671,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<span>{fontSize}</span>
|
||||
</div>
|
||||
|
||||
{/* Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Background Color</p>
|
||||
<input
|
||||
|
@ -595,6 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>Text Color</p>
|
||||
<input
|
||||
|
@ -608,6 +699,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Background Color</p>
|
||||
<input
|
||||
|
@ -621,6 +713,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Button Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Button Color</p>
|
||||
<input
|
||||
|
@ -634,6 +727,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Button Hover Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Button Hover Color</p>
|
||||
<input
|
||||
|
@ -647,6 +741,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* User Message Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>User Message Background Color</p>
|
||||
<input
|
||||
|
@ -660,6 +755,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* User Message Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>User Message Text Color</p>
|
||||
<input
|
||||
|
@ -673,6 +769,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* AI Message Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>AI Message Background Color</p>
|
||||
<input
|
||||
|
@ -686,6 +783,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* AI Message Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>AI Message Text Color</p>
|
||||
<input
|
||||
|
@ -699,6 +797,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Button Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Button Background Color</p>
|
||||
<input
|
||||
|
@ -712,6 +811,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Button Hover Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Button Hover Background Color</p>
|
||||
<input
|
||||
|
@ -725,6 +825,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Models Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Models Background Color</p>
|
||||
<input
|
||||
|
@ -738,6 +839,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* History Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>History Background Color</p>
|
||||
<input
|
||||
|
@ -751,6 +853,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Left Panel Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Left Panel Background Color</p>
|
||||
<input
|
||||
|
@ -764,6 +867,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Conversation Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Conversation Background Color</p>
|
||||
<input
|
||||
|
@ -777,6 +881,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Pop-up Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>Pop-up Text Color</p>
|
||||
<input
|
||||
|
@ -790,19 +895,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-option">
|
||||
<p>Burger Menu Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={burgerMenu}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setBurgerMenu(newColor);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input Border Color */}
|
||||
<div className="settings-option">
|
||||
<p>Input Border Color</p>
|
||||
<input
|
||||
|
@ -816,6 +909,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
/>
|
||||
</div>
|
||||
|
||||
{/* Font Family */}
|
||||
<div className="settings-option">
|
||||
<p>Font Family</p>
|
||||
<select
|
||||
|
@ -843,6 +937,117 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
</select>
|
||||
</div>
|
||||
|
||||
{/* FAQ Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Heading Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Heading Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqHeadingColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqHeadingColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-heading-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Heading Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Heading Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemHeadingColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemHeadingColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemTextColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemTextColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* FAQ Item Hover Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>FAQ Item Hover Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={faqItemHoverBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setFaqItemHoverBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Popup Background Color */}
|
||||
<div className="settings-option">
|
||||
<p>Popup Background Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={popupBackgroundColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setPopupBackgroundColor(newColor);
|
||||
document.documentElement.style.setProperty('--popup-background-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Overlay Text Color */}
|
||||
<div className="settings-option">
|
||||
<p>Overlay Text Color</p>
|
||||
<input
|
||||
type="color"
|
||||
value={overlayTextColor}
|
||||
onChange={(e) => {
|
||||
const newColor = e.target.value;
|
||||
setOverlayTextColor(newColor);
|
||||
document.documentElement.style.setProperty('--overlay-text-color', newColor);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
@ -1033,7 +1238,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
mistral,
|
||||
openai,
|
||||
anthropic,
|
||||
google
|
||||
google,
|
||||
|
||||
// Additional theme settings if needed
|
||||
faqBackgroundColor,
|
||||
faqHeadingColor,
|
||||
faqItemBackgroundColor,
|
||||
faqItemHeadingColor,
|
||||
faqItemTextColor,
|
||||
faqItemHoverBackgroundColor,
|
||||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
};
|
||||
|
||||
|
||||
|
@ -1059,7 +1274,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<button className="apply" onClick={() => {
|
||||
applySettings;
|
||||
getAllLocalStorageItems();
|
||||
closeSettings(); // This is invoked when the button is clicked
|
||||
closeSettings();
|
||||
}}>
|
||||
Apply
|
||||
</button>
|
||||
|
|
|
@ -94,3 +94,64 @@ export const applyBlackTheme = () => {
|
|||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
|
||||
};
|
||||
|
||||
export const applyCustomTheme = () => {
|
||||
// Theme variables
|
||||
const themeVariables = {
|
||||
backgroundColor: localStorage.getItem('backgroundColor'),
|
||||
textColor: localStorage.getItem('textColor'),
|
||||
inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
|
||||
inputButtonColor: localStorage.getItem('inputButtonColor'),
|
||||
inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
|
||||
userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
|
||||
userMessageTextColor: localStorage.getItem('userMessageTextColor'),
|
||||
aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
|
||||
aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
|
||||
buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
|
||||
buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
|
||||
modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
|
||||
historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
|
||||
leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
|
||||
conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
|
||||
popUpTextColor: localStorage.getItem('popUpTextColor'),
|
||||
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
||||
fontFamily: localStorage.getItem('fontFamily'),
|
||||
fontSize: localStorage.getItem('fontSize'),
|
||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
|
||||
faqHeadingColor: localStorage.getItem('faqHeadingColor'),
|
||||
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
|
||||
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
|
||||
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
|
||||
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
|
||||
popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
|
||||
overlayTextColor: localStorage.getItem('overlayTextColor'),
|
||||
};
|
||||
|
||||
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
|
||||
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
|
||||
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
|
||||
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
|
||||
document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
|
||||
document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
|
||||
document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
|
||||
document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
|
||||
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
|
||||
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
|
||||
document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
|
||||
document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
|
||||
|
||||
}
|
||||
|
|
29
app/page.tsx
29
app/page.tsx
|
@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat
|
|||
import History from './components/History';
|
||||
import Models from './components/Models';
|
||||
import Credits from './components/Credits';
|
||||
import Settings from './components/Settings';
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
|
||||
import Head from 'next/head';
|
||||
import './styles/master.css';
|
||||
|
||||
|
@ -26,6 +28,33 @@ const LandingPage: React.FC = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('selectedTheme');
|
||||
if (savedTheme) {
|
||||
setSelectedTheme(savedTheme);
|
||||
// Apply the saved theme on initial load
|
||||
switch (savedTheme) {
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, []); // Runs only once when the component mounts
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
.container{
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding-top: 12vh;
|
||||
height: 90dvh;
|
||||
padding-top: 1dvh;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
|
@ -13,13 +13,13 @@
|
|||
border-radius: 0 1em 0 0;
|
||||
margin-left: 0;
|
||||
padding-right: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-panel.hidden {
|
||||
opacity: 0; /* Fade out when hidden */
|
||||
width: 0; /* Collapse width to 0 */
|
||||
visibility: hidden; /* Hide visibility while collapsing */
|
||||
|
||||
}
|
||||
|
||||
.conversation-container {
|
||||
|
@ -27,15 +27,10 @@
|
|||
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
|
||||
background-color: var(--conversation-background-color); /* Use variable for background color */
|
||||
border-radius: 1em 0 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Adjust margin-left when panel is shown or hidden */
|
||||
.conversation-container.expanded {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
|
||||
.conversation-container.collapsed {
|
||||
margin-left: 1vw; /* Space for the left panel */
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
.credits-section {
|
||||
max-width: 900px;
|
||||
height: 80vh;
|
||||
margin: 0 auto;
|
||||
height: 80dvh;
|
||||
margin: auto;
|
||||
background: var(--doc-background-color); /* Use variable for background */
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
|
@ -15,20 +15,20 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-size: calc(var(--font-size)*2);
|
||||
color: var(--doc-title-color); /* Use variable for title color */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-size: calc(var(--font-size)*1.5);
|
||||
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 1rem;
|
||||
font-size: calc(var(--font-size));
|
||||
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
|
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
.documentation-section {
|
||||
max-width: 900px;
|
||||
height: 80vh;
|
||||
margin: 0 auto;
|
||||
height: 80dvh;
|
||||
margin: auto;
|
||||
background: var(--doc-background-color); /* Use variable for background */
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
|
@ -17,27 +17,27 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-size: calc(var(--font-size)*2);
|
||||
color: var(--doc-title-color); /* Use variable for title color */
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-size: calc(var(--font-size)*1.5);
|
||||
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: calc(var(--font-size)*1.25);
|
||||
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 1rem;
|
||||
font-size: calc(var(--font-size));
|
||||
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
|
|
|
@ -1,14 +1,10 @@
|
|||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
|
@ -19,11 +15,6 @@ body {
|
|||
header {
|
||||
background-color: var(--header-background-color);
|
||||
color: var(--header-text-color);
|
||||
padding: 1rem; /* Adjust padding as needed */
|
||||
}
|
||||
|
||||
main{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
header{
|
||||
position: absolute;
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
height: 10dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.history-background {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
height: 45%;
|
||||
height: 40dvh;
|
||||
overflow: hidden;
|
||||
background-color: var(--history-background-color);
|
||||
padding: 1em;
|
||||
|
@ -39,5 +39,7 @@
|
|||
}
|
||||
|
||||
.history-models{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
height: 90dvh;
|
||||
/* padding-bottom: 3dvh; */
|
||||
}
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
/* Input Section */
|
||||
.input {
|
||||
grid-column: 2/3;
|
||||
grid-row: 4/5;
|
||||
border-radius: 8px;
|
||||
background-color: var(--input-background-color);
|
||||
padding: 1em;
|
||||
|
@ -13,7 +11,12 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
height: 10vh;
|
||||
height: 10dvh;
|
||||
position: absolute;
|
||||
left: 0.25vw;
|
||||
bottom: 3dvh;
|
||||
right: 0.25vw;
|
||||
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.input input {
|
||||
|
@ -44,8 +47,8 @@
|
|||
border-radius: 8px;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
width: 75px;
|
||||
height: 8dvh;
|
||||
width: 8vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
.model-background {
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
bottom: 4dvh;
|
||||
right: 0;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
height: 45%;
|
||||
padding-bottom: 1px;
|
||||
overflow: scroll;
|
||||
overflow: hidden;
|
||||
background-color: var(--history-background-color);
|
||||
padding: 1em;
|
||||
margin: 0 1em;
|
||||
margin-right: 0;
|
||||
border-radius: 1em;
|
||||
height: 45dvh;
|
||||
}
|
||||
|
||||
.models {
|
||||
|
@ -69,6 +74,7 @@
|
|||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.overlay img {
|
||||
|
|
|
@ -4,13 +4,14 @@
|
|||
grid-row: 1 / 4;
|
||||
background-color: var(--output-background-color);
|
||||
margin: 1em;
|
||||
padding-bottom: 14dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 1em;
|
||||
overflow-y: auto;
|
||||
width: calc(100% - 2em); /* Corrected calculation for width */
|
||||
height: 70vh;
|
||||
height: 90dvh;
|
||||
}
|
||||
|
||||
#conversation {
|
||||
|
|
|
@ -2,4 +2,6 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
|
||||
/* Header styles */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-top: 0px;
|
||||
|
@ -20,11 +19,10 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
overflow: scroll;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 7em 0 0 0 ;
|
||||
padding: 1dvh 0 0 0 ;
|
||||
}
|
||||
|
||||
/* Left panel styles */
|
||||
|
@ -58,6 +56,7 @@
|
|||
min-width: 100%;
|
||||
margin-left: 0;
|
||||
border-radius: none;
|
||||
height: 10vh;
|
||||
}
|
||||
|
||||
/* Grid styles */
|
||||
|
@ -79,6 +78,7 @@
|
|||
margin: 0 auto;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
bottom: 10dvh
|
||||
}
|
||||
|
||||
.input input {
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
border-bottom-right-radius: 0;
|
||||
margin-left: auto;
|
||||
text-align: left;
|
||||
margin-right: 1.5vw;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
|
@ -27,6 +28,7 @@
|
|||
}
|
||||
|
||||
.ai-container{
|
||||
position: relative;
|
||||
height: min-content;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
|
Loading…
Reference in a new issue