forked from React-Group/interstellar_ai
Merge branch 'main' of interstellardevelopment.org:YasinOnm08/interstellar_ai
This commit is contained in:
commit
9f70227082
7 changed files with 417 additions and 188 deletions
|
|
@ -1,22 +1,22 @@
|
|||
type ChatMessage = {
|
||||
name: string;
|
||||
message: any;
|
||||
messages: any;
|
||||
timestamp: number;
|
||||
};
|
||||
|
||||
let chatHistory: ChatMessage[] = [];
|
||||
|
||||
function addMessage(name: string, message: any): void {
|
||||
function addMessageHistory(name: string, message: any): void {
|
||||
const newMessage: ChatMessage = {
|
||||
name: name,
|
||||
message: message,
|
||||
messages: message,
|
||||
timestamp: Date.now()
|
||||
};
|
||||
chatHistory.push(newMessage);
|
||||
console.log(`Added message from ${name}: ${message}`);
|
||||
}
|
||||
|
||||
function removeMessage(timestamp: number): void {
|
||||
function removeMessageHistory(timestamp: number): void {
|
||||
const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp);
|
||||
if (index > -1) {
|
||||
chatHistory.splice(index, 1);
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
// ThemeDropdown.tsx
|
||||
import React from 'react';
|
||||
import { applyTheme, applyCustomTheme } from './theme';
|
||||
// ThemeDropdown.tsx
|
||||
import React from 'react';
|
||||
import { applyTheme, applyCustomTheme } from './theme';
|
||||
|
||||
const ThemeDropdown: React.FC<{
|
||||
selectedTheme: string;
|
||||
setSelectedTheme: (theme: string) => void;
|
||||
}> = ({ selectedTheme, setSelectedTheme }) => {
|
||||
const themeOptions = [
|
||||
{ value: 'IOMARKET', label: 'IOMARKET' },
|
||||
{ value: 'WHITE', label: 'WHITE' },
|
||||
{ value: 'BLACK', label: 'BLACK' },
|
||||
{ value: 'CUSTOM', label: 'CUSTOM' },
|
||||
];
|
||||
const ThemeDropdown: React.FC<{
|
||||
selectedTheme: string;
|
||||
setSelectedTheme: (theme: string) => void;
|
||||
}> = ({ selectedTheme, setSelectedTheme }) => {
|
||||
const themeOptions = [
|
||||
{ value: 'IOMARKET', label: 'IOMARKET' },
|
||||
{ value: 'WHITE', label: 'WHITE' },
|
||||
{ value: 'BLACK', label: 'BLACK' },
|
||||
{ value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
|
||||
{ value: 'CUSTOM', label: 'CUSTOM' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<p>Select Theme</p>
|
||||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value;
|
||||
if (theme !== 'default') {
|
||||
setSelectedTheme(theme);
|
||||
localStorage.setItem('selectedTheme', theme);
|
||||
applyTheme(theme); // Ensure you define applyTheme
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
{themeOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="settings-option">
|
||||
<p>Select Theme</p>
|
||||
<select
|
||||
value={selectedTheme}
|
||||
onChange={(e) => {
|
||||
const theme = e.target.value;
|
||||
if (theme !== 'default') {
|
||||
setSelectedTheme(theme);
|
||||
localStorage.setItem('selectedTheme', theme);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
{themeOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeDropdown;
|
||||
export default ThemeDropdown;
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@ 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 [burgerMenuBackgroundColor, setBurgerMenuBackgroundColor] = 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());
|
||||
|
|
@ -100,7 +101,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
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());
|
||||
const [closeButtonColor, setCloseButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-color').trim());
|
||||
const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
|
||||
const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
|
||||
const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
|
||||
|
||||
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
|
||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
|
||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
|
||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
||||
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
||||
|
|
@ -161,6 +171,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
popupBackgroundColor,
|
||||
overlayTextColor,
|
||||
},
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
accentColor,
|
||||
basicBackgroundColor,
|
||||
basicTextColor
|
||||
},
|
||||
apiKeys: {
|
||||
mistral,
|
||||
|
|
@ -200,7 +215,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
{ name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
|
||||
{ name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
|
||||
{ name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
|
||||
];
|
||||
{ name: "Close Button Color", value: closeButtonColor, setValue: setCloseButtonColor, cssVariable: "--close-button-color" },
|
||||
{ name: "Close Button Hover Color", value: closeButtonHoverColor, setValue: setCloseButtonHoverColor, cssVariable: "--close-button-hover-color" },
|
||||
{ name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
|
||||
{ name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
|
||||
{ name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
|
||||
];
|
||||
|
||||
|
||||
const timeZoneOptions = [
|
||||
{ value: 'GMT', label: 'GMT' },
|
||||
|
|
@ -287,7 +308,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const savedTheme = localStorage.getItem('selectedTheme');
|
||||
if (savedTheme) {
|
||||
setSelectedTheme(savedTheme);
|
||||
applyTheme(savedTheme);
|
||||
applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
|
||||
}
|
||||
}, []); // Runs only once when the component mounts
|
||||
|
||||
|
|
@ -453,48 +474,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
);
|
||||
|
||||
|
||||
case 'theme':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
case 'theme':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
|
||||
<ThemeDropdown
|
||||
selectedTheme={selectedTheme}
|
||||
setSelectedTheme={setSelectedTheme}
|
||||
/>
|
||||
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
{/* Font Size */}
|
||||
<FontSizeSetting
|
||||
fontSize={fontSize}
|
||||
setFontSize={setFontSize}
|
||||
<ThemeDropdown
|
||||
selectedTheme={selectedTheme}
|
||||
setSelectedTheme={setSelectedTheme}
|
||||
/>
|
||||
|
||||
{colorSettings.map((setting) => (
|
||||
<ColorSetting
|
||||
key={setting.cssVariable}
|
||||
name={setting.name}
|
||||
value={setting.value}
|
||||
setValue={setting.setValue}
|
||||
cssVariable={setting.cssVariable}
|
||||
/>
|
||||
))}
|
||||
{selectedTheme === 'BASIC-CUSTOM' && (
|
||||
<>
|
||||
<h3>Basic Colors</h3>
|
||||
{/* Basic Color Inputs using ColorSetting Component */}
|
||||
<ColorSetting
|
||||
name="Primary Color"
|
||||
value={primaryColor}
|
||||
setValue={setPrimaryColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Secondary Color"
|
||||
value={secondaryColor}
|
||||
setValue={setSecondaryColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Accent Color"
|
||||
value={accentColor}
|
||||
setValue={setAccentColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Background Color"
|
||||
value={basicBackgroundColor}
|
||||
setValue={setBasicBackgroundColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
<ColorSetting
|
||||
name="Text Color"
|
||||
value={basicTextColor}
|
||||
setValue={setBasicTextColor}
|
||||
cssVariable=""
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<DropdownSetting
|
||||
label="Font Family"
|
||||
value={fontFamily}
|
||||
setValue={(newFont) => {
|
||||
setFontFamily(newFont);
|
||||
document.documentElement.style.setProperty('--font-family', newFont);
|
||||
}}
|
||||
options={fontOptions}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
<h3>Additional Settings</h3>
|
||||
{/* Additional Font Size Setting */}
|
||||
<FontSizeSetting
|
||||
fontSize={fontSize}
|
||||
setFontSize={setFontSize}
|
||||
/>
|
||||
|
||||
{colorSettings.map((setting) => (
|
||||
<ColorSetting
|
||||
key={setting.cssVariable}
|
||||
name={setting.name}
|
||||
value={setting.value}
|
||||
setValue={setting.setValue}
|
||||
cssVariable={setting.cssVariable}
|
||||
/>
|
||||
))}
|
||||
|
||||
<DropdownSetting
|
||||
label="Font Family"
|
||||
value={fontFamily}
|
||||
setValue={(newFont) => {
|
||||
setFontFamily(newFont);
|
||||
document.documentElement.style.setProperty('--font-family', newFont);
|
||||
}}
|
||||
options={fontOptions}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'foss':
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export const applyBlackTheme = () => {
|
|||
document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
|
||||
document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
|
||||
document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background
|
||||
document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
|
||||
document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
|
||||
document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
|
||||
|
|
@ -115,36 +115,46 @@ export const applyBlackTheme = () => {
|
|||
|
||||
export const applyCustomTheme = () => {
|
||||
const themeVariables = {
|
||||
backgroundColor: localStorage.getItem('backgroundColor'),
|
||||
headerBackground: localStorage.getItem('headerBackground'),
|
||||
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'),
|
||||
faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
|
||||
faqHeadingColor: localStorage.getItem('faqHeadingColor'),
|
||||
faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
|
||||
faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
|
||||
faqItemTextColor: localStorage.getItem('faqItemTextColor'),
|
||||
faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
|
||||
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
||||
fontFamily: localStorage.getItem('fontFamily'),
|
||||
fontSize: localStorage.getItem('fontSize'),
|
||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||
backgroundColor: localStorage.getItem('backgroundColor'),
|
||||
headerBackground: localStorage.getItem('headerBackground'),
|
||||
headerTextColor: localStorage.getItem('headerTextColor'),
|
||||
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'),
|
||||
docBackgroundColor: localStorage.getItem('docBackgroundColor'),
|
||||
closeButtonColor: localStorage.getItem('closeButtonColor'),
|
||||
closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
|
||||
applyButtonColor: localStorage.getItem('applyButtonColor'),
|
||||
applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
|
||||
burgerMenu: localStorage.getItem('burgerMenu'),
|
||||
overlayTextColor: localStorage.getItem('overlayTextColor'),
|
||||
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'),
|
||||
popUpText: localStorage.getItem('popUpText'),
|
||||
inputBorderColor: localStorage.getItem('inputBorderColor'),
|
||||
fontFamily: localStorage.getItem('fontFamily'),
|
||||
fontSize: localStorage.getItem('fontSize'),
|
||||
};
|
||||
|
||||
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
|
||||
document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
|
||||
document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
|
||||
document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
|
||||
document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
|
||||
document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
|
||||
document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
|
||||
|
|
@ -159,36 +169,136 @@ export const applyCustomTheme = () => {
|
|||
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('--conversation-background-color', themeVariables.conversationBackgroundColor || '#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-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
|
||||
document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
|
||||
document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
|
||||
document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
|
||||
document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
|
||||
document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
|
||||
document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
|
||||
document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
|
||||
document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
|
||||
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-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
|
||||
document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
|
||||
document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
|
||||
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-size', themeVariables.fontSize || '16px');
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
|
||||
};
|
||||
|
||||
// TypeScript types for color parameters
|
||||
type Color = string;
|
||||
|
||||
export const applyBasicCustomTheme = (
|
||||
primaryColor: Color,
|
||||
secondaryColor: Color,
|
||||
accentColor: Color,
|
||||
backgroundColor: Color,
|
||||
textColor: Color
|
||||
) => {
|
||||
// Calculate additional colors based on the provided colors
|
||||
const headerBackgroundColor = secondaryColor; // Use secondary color for header background
|
||||
const headerTextColor = lightenColor(textColor, 50); // Lighten text color for header
|
||||
const inputButtonColor = primaryColor; // Use primary color for input buttons
|
||||
const userMessageBackgroundColor = accentColor; // Use accent color for user messages
|
||||
const aiMessageBackgroundColor = backgroundColor; // Use background color for AI messages
|
||||
const buttonHoverBackgroundColor = darkenColor(primaryColor, 30); // Darken primary color for hover
|
||||
const closeButtonColor = darkenColor(accentColor, 20); // Darkened accent color for close button
|
||||
const closeButtonHoverColor = darkenColor(closeButtonColor, 10); // Darker close button hover color
|
||||
const darkerAccentColor = darkenColor(accentColor, 20); // Darken accent color for contrast
|
||||
const lightenedPrimaryColor = lightenColor(primaryColor, 10); // Lighten primary color for highlights
|
||||
const lighterBackgroundColor = lightenColor(backgroundColor, 10); // Lighten background for contrast
|
||||
const darkerBackgroundColor = darkenColor(backgroundColor, 20); // More pronounced dark background
|
||||
|
||||
// Set all CSS variables
|
||||
document.documentElement.style.setProperty('--header-background-color', headerBackgroundColor);
|
||||
document.documentElement.style.setProperty('--header-text-color', headerTextColor);
|
||||
document.documentElement.style.setProperty('--background-color', backgroundColor);
|
||||
document.documentElement.style.setProperty('--text-color', textColor);
|
||||
document.documentElement.style.setProperty('--input-background-color', lightenColor(backgroundColor, 10));
|
||||
document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
|
||||
document.documentElement.style.setProperty('--input-button-hover-color', buttonHoverBackgroundColor);
|
||||
document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
|
||||
document.documentElement.style.setProperty('--user-message-text-color', lightenColor(textColor, 60));
|
||||
document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
|
||||
document.documentElement.style.setProperty('--ai-message-text-color', lightenColor(textColor, 60));
|
||||
document.documentElement.style.setProperty('--button-background-color', inputButtonColor);
|
||||
document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
|
||||
document.documentElement.style.setProperty('--models-background-color', darkerBackgroundColor);
|
||||
document.documentElement.style.setProperty('--history-background-color', lighterBackgroundColor);
|
||||
document.documentElement.style.setProperty('--left-panel-background-color', lightenColor(backgroundColor, 5));
|
||||
document.documentElement.style.setProperty('--conversation-background-color', lightenColor(backgroundColor, 5));
|
||||
document.documentElement.style.setProperty('--doc-background-color', lighterBackgroundColor);
|
||||
document.documentElement.style.setProperty('--close-button-color', closeButtonColor);
|
||||
document.documentElement.style.setProperty('--close-button-hover-color', closeButtonHoverColor);
|
||||
document.documentElement.style.setProperty('--apply-button-color', inputButtonColor);
|
||||
document.documentElement.style.setProperty('--apply-button-hover-color', buttonHoverBackgroundColor);
|
||||
document.documentElement.style.setProperty('--burger-menu-background-color', lightenColor(backgroundColor, 5));
|
||||
document.documentElement.style.setProperty('--overlay-text-color', lightenColor(textColor, 80));
|
||||
document.documentElement.style.setProperty('--faq-background-color', lightenColor(backgroundColor, 10));
|
||||
document.documentElement.style.setProperty('--faq-heading-color', lightenedPrimaryColor);
|
||||
document.documentElement.style.setProperty('--faq-item-background-color', darkerAccentColor);
|
||||
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
|
||||
document.documentElement.style.setProperty('--faq-item-text-color', '#000000');
|
||||
document.documentElement.style.setProperty('--faq-item-hover-background-color', lightenColor(accentColor, 10));
|
||||
document.documentElement.style.setProperty('--popup-background-color', accentColor);
|
||||
document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
|
||||
document.documentElement.style.setProperty('--input-border-color', primaryColor);
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
|
||||
document.documentElement.style.setProperty('--font-size', '16px');
|
||||
};
|
||||
|
||||
// Helper function to darken a color (returns a darker version of the provided color)
|
||||
const darkenColor = (color: Color, percent: number): Color => {
|
||||
let r = parseInt(color.slice(1, 3), 16);
|
||||
let g = parseInt(color.slice(3, 5), 16);
|
||||
let b = parseInt(color.slice(5, 7), 16);
|
||||
r = Math.floor(r * (1 - percent / 100));
|
||||
g = Math.floor(g * (1 - percent / 100));
|
||||
b = Math.floor(b * (1 - percent / 100));
|
||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
||||
};
|
||||
|
||||
// Helper function to lighten a color (returns a lighter version of the provided color)
|
||||
const lightenColor = (color: Color, percent: number): Color => {
|
||||
let r = parseInt(color.slice(1, 3), 16);
|
||||
let g = parseInt(color.slice(3, 5), 16);
|
||||
let b = parseInt(color.slice(5, 7), 16);
|
||||
r = Math.min(255, Math.floor(r * (1 + percent / 100)));
|
||||
g = Math.min(255, Math.floor(g * (1 + percent / 100)));
|
||||
b = Math.min(255, Math.floor(b * (1 + percent / 100)));
|
||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
|
||||
};
|
||||
|
||||
// This is the new function that calls the appropriate theme application
|
||||
export const applyTheme = (theme: string) => {
|
||||
export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
|
||||
switch (theme) {
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
case 'BASIC-CUSTOM':
|
||||
applyBasicCustomTheme(
|
||||
primary,
|
||||
secondary,
|
||||
accent,
|
||||
background,
|
||||
text
|
||||
);
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
29
app/page.tsx
29
app/page.tsx
|
|
@ -7,9 +7,7 @@ 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/Settings';
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme'
|
||||
import Head from 'next/head';
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
|
||||
import './styles/master.css';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
|
|
@ -17,6 +15,22 @@ const LandingPage: React.FC = () => {
|
|||
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
|
||||
const conversationRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
|
||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
|
||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
|
||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
||||
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||
|
||||
useEffect(()=>{
|
||||
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
|
||||
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
|
||||
setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
|
||||
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
|
||||
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
|
||||
})
|
||||
|
||||
|
||||
const toggleDivs = () => {
|
||||
setShowDivs(prevState => !prevState);
|
||||
};
|
||||
|
|
@ -48,6 +62,15 @@ const LandingPage: React.FC = () => {
|
|||
case 'CUSTOM':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
case 'BASIC-CUSTOM':
|
||||
applyBasicCustomTheme(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
accentColor,
|
||||
basicBackgroundColor,
|
||||
basicTextColor
|
||||
);
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -22,10 +22,12 @@
|
|||
/* Main container for the settings */
|
||||
.settings-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
|
||||
grid-template-columns: 1fr 3fr;
|
||||
/* 1fr for sidebar, 3fr for main content */
|
||||
grid-auto-flow: column;
|
||||
overflow-x: hidden;
|
||||
height: 100%; /* Ensure it takes full height */
|
||||
height: 100%;
|
||||
/* Ensure it takes full height */
|
||||
}
|
||||
|
||||
/* Settings content */
|
||||
|
|
@ -39,23 +41,30 @@
|
|||
height: 90%;
|
||||
max-height: 600px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden; /* Prevents overflow of the content */
|
||||
position: relative; /* Needed for absolute positioning of close button */
|
||||
overflow: hidden;
|
||||
/* Prevents overflow of the content */
|
||||
position: relative;
|
||||
/* Needed for absolute positioning of close button */
|
||||
display: flex;
|
||||
flex-direction: column; /* Flexbox for vertical stacking */
|
||||
flex-direction: column;
|
||||
/* Flexbox for vertical stacking */
|
||||
}
|
||||
|
||||
/* Sidebar styles */
|
||||
.sidebar {
|
||||
background: var(--settings-background-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
|
||||
border-radius: 10px 0 0 10px;
|
||||
/* Rounded corners on the left side */
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
overflow-y: auto; /* Scroll if content exceeds height */
|
||||
overflow-y: auto;
|
||||
/* Scroll if content exceeds height */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1; /* Places sidebar in the first grid column */
|
||||
height: 100%; /* Ensures sidebar takes full height */
|
||||
grid-column: 1;
|
||||
/* Places sidebar in the first grid column */
|
||||
height: 100%;
|
||||
/* Ensures sidebar takes full height */
|
||||
}
|
||||
|
||||
/* Sidebar item styles */
|
||||
|
|
@ -64,8 +73,10 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column; /* Make the ul a column */
|
||||
flex-grow: 1; /* Allows the list to take available space */
|
||||
flex-direction: column;
|
||||
/* Make the ul a column */
|
||||
flex-grow: 1;
|
||||
/* Allows the list to take available space */
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
|
|
@ -77,66 +88,88 @@
|
|||
}
|
||||
|
||||
.sidebar li:hover {
|
||||
background: var(--input-button-hover-color); /* Highlight on hover */
|
||||
background: var(--input-button-hover-color);
|
||||
/* Highlight on hover */
|
||||
}
|
||||
|
||||
.sidebar li.active {
|
||||
background: var(--button-hover-background-color); /* Active section highlight */
|
||||
background: var(--button-hover-background-color);
|
||||
/* Active section highlight */
|
||||
}
|
||||
|
||||
/* Main settings area */
|
||||
.settings-main {
|
||||
grid-column: 2; /* Places main settings in the second grid column */
|
||||
grid-column: 2;
|
||||
/* Places main settings in the second grid column */
|
||||
padding: 20px;
|
||||
border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
|
||||
overflow-y: auto; /* Scroll if content exceeds height */
|
||||
border-radius: 0 10px 10px 0;
|
||||
/* Rounded corners on the right side */
|
||||
overflow-y: auto;
|
||||
/* Scroll if content exceeds height */
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack content vertically */
|
||||
flex-direction: column;
|
||||
/* Stack content vertically */
|
||||
}
|
||||
|
||||
/* Close button positioning */
|
||||
.close-popup {
|
||||
background: var(--close-button-color); /* Use variable for close button color */
|
||||
color: white; /* Use white for text color */
|
||||
background: var(--close-button-color);
|
||||
/* Use variable for close button color */
|
||||
color: white;
|
||||
/* Use white for text color */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
position: absolute; /* Position the button absolutely */
|
||||
top: 15px; /* Distance from the top */
|
||||
right: 40px; /* Distance from the right */
|
||||
position: absolute;
|
||||
/* Position the button absolutely */
|
||||
top: 15px;
|
||||
/* Distance from the top */
|
||||
right: 40px;
|
||||
/* Distance from the right */
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
/* Close button positioning */
|
||||
.apply {
|
||||
background: var(--apply-button-color); /* Use variable for close button color */
|
||||
color: white; /* Use white for text color */
|
||||
background: var(--apply-button-color);
|
||||
/* Use variable for close button color */
|
||||
color: white;
|
||||
/* Use white for text color */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
position: absolute; /* Position the button absolutely */
|
||||
top: 50px; /* Distance from the top */
|
||||
right: 40px; /* Distance from the right */
|
||||
position: absolute;
|
||||
/* Position the button absolutely */
|
||||
top: 50px;
|
||||
/* Distance from the top */
|
||||
right: 40px;
|
||||
/* Distance from the right */
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.close-popup:hover {
|
||||
background: darkred; /* Optional hover effect */
|
||||
background: darkred;
|
||||
/* Optional hover effect */
|
||||
}
|
||||
|
||||
|
||||
/* Additional styles for inputs and options */
|
||||
.settings-option {
|
||||
margin-bottom: 20px; /* Adds space between each setting option */
|
||||
padding-bottom: 10px; /* Adds internal spacing */
|
||||
border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
|
||||
margin-bottom: 20px;
|
||||
/* Adds space between each setting option */
|
||||
padding-bottom: 10px;
|
||||
/* Adds internal spacing */
|
||||
border-bottom: 1px solid var(--input-border-color);
|
||||
/* Optional, creates a separator between options */
|
||||
}
|
||||
|
||||
.settings-option:last-child {
|
||||
margin-bottom: 0; /* Removes bottom margin from last option */
|
||||
border-bottom: none; /* Removes separator from last option */
|
||||
margin-bottom: 0;
|
||||
/* Removes bottom margin from last option */
|
||||
border-bottom: none;
|
||||
/* Removes separator from last option */
|
||||
}
|
||||
|
||||
.settings-option input[type="text"],
|
||||
|
|
@ -151,7 +184,9 @@
|
|||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px; /* Adds spacing between inputs */
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
/* Adds spacing between inputs */
|
||||
}
|
||||
|
||||
/* Optional additional spacing for labels */
|
||||
|
|
@ -161,14 +196,14 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.export-button{
|
||||
.export-button {
|
||||
background-color: var(--button-hover-background-color);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.import-file{
|
||||
.import-file {
|
||||
background-color: var(--button-hover-background-color);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
|
|
@ -189,17 +224,20 @@
|
|||
}
|
||||
|
||||
.slider-option.active {
|
||||
background-color: #007bff; /* Change to your active color */
|
||||
background-color: #007bff;
|
||||
/* Change to your active color */
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none; /* Hide the default radio buttons */
|
||||
display: none;
|
||||
/* Hide the default radio buttons */
|
||||
}
|
||||
|
||||
.slider-option.disabled {
|
||||
opacity: 0.5; /* Make the option appear greyed out */
|
||||
pointer-events: none; /* Prevent clicks */
|
||||
opacity: 0.5;
|
||||
/* Make the option appear greyed out */
|
||||
pointer-events: none;
|
||||
/* Prevent clicks */
|
||||
}
|
||||
|
||||
6
main.js
6
main.js
|
|
@ -2,12 +2,12 @@ const { app, BrowserWindow } = require('electron');
|
|||
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
width: 1280,
|
||||
height: 720,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
},
|
||||
autoHideMenuBar: true,
|
||||
autoHideMenuBar: true,
|
||||
});
|
||||
|
||||
win.loadURL('http://localhost:3000');
|
||||
|
|
|
|||
Loading…
Reference in a new issue