diff --git a/app/backend/ChatHistory.ts b/app/backend/ChatHistory.ts index 62c9a50..f050898 100644 --- a/app/backend/ChatHistory.ts +++ b/app/backend/ChatHistory.ts @@ -1,22 +1,22 @@ type ChatMessage = { name: string; - messages: any; + message: any; timestamp: number; }; let chatHistory: ChatMessage[] = []; -function addMessageHistory(name: string, message: any): void { +function addMessage(name: string, message: any): void { const newMessage: ChatMessage = { name: name, - messages: message, + message: message, timestamp: Date.now() }; chatHistory.push(newMessage); console.log(`Added message from ${name}: ${message}`); } -function removeMessageHistory(timestamp: number): void { +function removeMessage(timestamp: number): void { const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp); if (index > -1) { chatHistory.splice(index, 1); diff --git a/app/components/settings/DropDownTheme.tsx b/app/components/settings/DropDownTheme.tsx index c816129..955158f 100644 --- a/app/components/settings/DropDownTheme.tsx +++ b/app/components/settings/DropDownTheme.tsx @@ -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: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' }, - { 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: 'CUSTOM', label: 'CUSTOM' }, + ]; - return ( -
-

Select Theme

- -
- ); - }; + return ( +
+

Select Theme

+ +
+ ); +}; - export default ThemeDropdown; +export default ThemeDropdown; diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 7bce4cc..38e7862 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -92,7 +92,6 @@ 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()); @@ -101,16 +100,7 @@ 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(''); @@ -171,11 +161,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( popupBackgroundColor, overlayTextColor, }, - primaryColor, - secondaryColor, - accentColor, - basicBackgroundColor, - basicTextColor }, apiKeys: { mistral, @@ -215,13 +200,7 @@ 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' }, @@ -308,7 +287,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const savedTheme = localStorage.getItem('selectedTheme'); if (savedTheme) { setSelectedTheme(savedTheme); - applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor); + applyTheme(savedTheme); } }, []); // Runs only once when the component mounts @@ -474,85 +453,48 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ); - case 'theme': - return ( -
-

Theme Settings

- - +

Theme Settings

+ + + + {selectedTheme === 'CUSTOM' && ( + <> + {/* Font Size */} + - - {selectedTheme === 'BASIC-CUSTOM' && ( - <> -

Basic Colors

- {/* Basic Color Inputs using ColorSetting Component */} - - - - - - - )} - - {selectedTheme === 'CUSTOM' && ( - <> -

Additional Settings

- {/* Additional Font Size Setting */} - - - {colorSettings.map((setting) => ( - - ))} - - { - setFontFamily(newFont); - document.documentElement.style.setProperty('--font-family', newFont); - }} - options={fontOptions} - /> - - )} -
- ); + + {colorSettings.map((setting) => ( + + ))} + + { + setFontFamily(newFont); + document.documentElement.style.setProperty('--font-family', newFont); + }} + options={fontOptions} + /> + + )} + + ); + case 'foss': return ( diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts index 2cef5cc..e88ca18 100644 --- a/app/components/settings/theme.ts +++ b/app/components/settings/theme.ts @@ -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', '#000000'); // Dark document background + document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // 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,46 +115,36 @@ export const applyBlackTheme = () => { export const applyCustomTheme = () => { const themeVariables = { - 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'), + 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'), }; - 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('--header-background-color', themeVariables.headerBackground || '#7e7e7e'); 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'); @@ -169,136 +159,36 @@ 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('--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-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('--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 || '#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('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); 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'); -}; - -// 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)}`; + document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); }; // This is the new function that calls the appropriate theme application -export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => { +export const applyTheme = (theme: string) => { switch (theme) { - 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; + case 'IOMARKET': + applyIOMarketTheme(); + break; + case 'WHITE': + applyWhiteTheme(); + break; + case 'BLACK': + applyBlackTheme(); + break; + case 'CUSTOM': + applyCustomTheme(); + break; + default: + applyIOMarketTheme(); + break; } }; + diff --git a/app/page.tsx b/app/page.tsx index 02bcf6c..cca5ac1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,7 +7,9 @@ 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 { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme' +import Settings from './components/settings/Settings'; +import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme' +import Head from 'next/head'; import './styles/master.css'; const LandingPage: React.FC = () => { @@ -15,22 +17,6 @@ const LandingPage: React.FC = () => { const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here const conversationRef = useRef(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); }; @@ -62,15 +48,6 @@ const LandingPage: React.FC = () => { case 'CUSTOM': applyCustomTheme(); break; - case 'BASIC-CUSTOM': - applyBasicCustomTheme( - primaryColor, - secondaryColor, - accentColor, - basicBackgroundColor, - basicTextColor - ); - break; default: applyIOMarketTheme(); break;