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

Merge pull request 'main' (#72) from sageTheDm/interstellar_ai:main into main

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/72
This commit is contained in:
Patrick 2024-09-30 16:12:45 +02:00
commit 5720511265
3 changed files with 758 additions and 453 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

271
app/components/Settings.tsx
View file

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

63
app/components/theme.ts
View file

@ -92,5 +92,66 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // 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
View file

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