diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 220e34f..ecc8a34 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -1,9 +1,22 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; +import { exportSettings, importSettings } from './settingUtils'; // Import utility functions const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { const [activeSection, setActiveSection] = useState('general'); + const [preferredLanguage, setPreferredLanguage] = useState('en'); + const [preferredCurrency, setPreferredCurrency] = useState('usd'); + const [dateFormat, setDateFormat] = useState('mm/dd/yyyy'); + const [timeFormat, setTimeFormat] = useState('12-hour'); + const [timeZone, setTimeZone] = useState('GMT'); + const [disableOnlineAI, setDisableOnlineAI] = useState(false); + const [disableChatHistory, setDisableChatHistory] = useState(false); + const [disableAIMemory, setDisableAIMemory] = useState(false); + const [openSourceMode, setOpenSourceMode] = useState(false); + const [newName, setNewName] = useState(''); + const [newEmail, setNewEmail] = useState(''); + const [newPassword, setNewPassword] = useState(''); - // Theme settings state + // Theme settings state const [backgroundColor, setBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); const [textColor, setTextColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim()); const [inputBackgroundColor, setInputBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim()); @@ -24,73 +37,111 @@ 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()); - // General settings state - const [preferredLanguage, setPreferredLanguage] = useState('English'); - const [preferredCurrency, setPreferredCurrency] = useState('USD'); - const [dateFormat, setDateFormat] = useState('MM/DD/YYYY'); - const [timeFormat, setTimeFormat] = useState('12-hour'); - const [timeZone, setTimeZone] = useState('UTC'); + // Theme selection + const [selectedTheme, setSelectedTheme] = useState('default'); - // Privacy settings state - const [disableOnlineAI, setDisableOnlineAI] = useState(false); - const [disableChatHistory, setDisableChatHistory] = useState(false); - const [disableAIMemory, setDisableAIMemory] = useState(false); + // Apply imported settings to the CSS variables + const applySettings = (settings: any) => { + if (settings.backgroundColor) { + setBackgroundColor(settings.backgroundColor); + document.documentElement.style.setProperty('--background-color', settings.backgroundColor); + } + + if (settings.textColor) { + setTextColor(settings.textColor); + document.documentElement.style.setProperty('--text-color', settings.textColor); + } + + if (settings.inputBackgroundColor) { + setInputBackgroundColor(settings.inputBackgroundColor); + document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor); + } + + if (settings.inputButtonColor) { + setInputButtonColor(settings.inputButtonColor); + document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor); + } + + if (settings.inputButtonHoverColor) { + setInputButtonHoverColor(settings.inputButtonHoverColor); + document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor); + } + + if (settings.userMessageBackgroundColor) { + setUserMessageBackgroundColor(settings.userMessageBackgroundColor); + document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor); + } + + if (settings.userMessageTextColor) { + setUserMessageTextColor(settings.userMessageTextColor); + document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor); + } + + if (settings.aiMessageBackgroundColor) { + setAiMessageBackgroundColor(settings.aiMessageBackgroundColor); + document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor); + } + + if (settings.aiMessageTextColor) { + setAiMessageTextColor(settings.aiMessageTextColor); + document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor); + } + + if (settings.buttonBackgroundColor) { + setButtonBackgroundColor(settings.buttonBackgroundColor); + document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor); + } + + if (settings.buttonHoverBackgroundColor) { + setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor); + document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor); + } + + if (settings.modelsBackgroundColor) { + setModelsBackgroundColor(settings.modelsBackgroundColor); + document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor); + } + + if (settings.historyBackgroundColor) { + setHistoryBackgroundColor(settings.historyBackgroundColor); + document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor); + } + + if (settings.leftPanelBackgroundColor) { + setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor); + document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor); + } + + if (settings.conversationBackgroundColor) { + setConversationBackgroundColor(settings.conversationBackgroundColor); + document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor); + } + + if (settings.popUpTextColor) { + setPopUpTextColor(settings.popUpTextColor); + document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor); + } + + if (settings.inputBorderColor) { + setInputBorderColor(settings.inputBorderColor); + document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor); + } + + if (settings.fontFamily) { + setFontFamily(settings.fontFamily); + document.documentElement.style.setProperty('--font-family', settings.fontFamily); + } + + if (settings.fontSize) { + setFontSize(settings.fontSize); + document.documentElement.style.setProperty('--font-size', settings.fontSize); + } + }; - // FOSS settings state - const [openSourceMode, setOpenSourceMode] = useState(false); - - // Account settings state - const [newName, setNewName] = useState(''); - const [newEmail, setNewEmail] = useState(''); - const [newPassword, setNewPassword] = useState(''); - - // Theme selection - const [selectedTheme, setSelectedTheme] = useState('default'); + - // Effect to update CSS variables on theme state change - useEffect(() => { - document.documentElement.style.setProperty('--background-color', backgroundColor); - document.documentElement.style.setProperty('--text-color', textColor); - document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor); - document.documentElement.style.setProperty('--input-button-color', inputButtonColor); - document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor); - document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor); - document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor); - document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor); - document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor); - document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor); - document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor); - document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor); - document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor); - document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor); - document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor); - document.documentElement.style.setProperty('--pop-up-text', popUpTextColor); - document.documentElement.style.setProperty('--input-border-color', inputBorderColor); - document.documentElement.style.setProperty('--font-family', fontFamily); - document.documentElement.style.setProperty('--font-size', fontSize); - }, [ - backgroundColor, - textColor, - inputBackgroundColor, - inputButtonColor, - inputButtonHoverColor, - userMessageBackgroundColor, - userMessageTextColor, - aiMessageBackgroundColor, - aiMessageTextColor, - buttonBackgroundColor, - buttonHoverBackgroundColor, - modelsBackgroundColor, - historyBackgroundColor, - leftPanelBackgroundColor, - conversationBackgroundColor, - popUpTextColor, - inputBorderColor, - fontFamily, - fontSize, - ]); - + // Render settings content based on the active section const renderSettingsContent = () => { switch (activeSection) { case 'general': @@ -113,7 +164,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( - {/* Add more languages as needed */}
@@ -131,7 +181,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( - {/* Add more currencies as needed */}
@@ -145,7 +194,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( - {/* Add more formats as needed */}
@@ -156,8 +204,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( > - - {/* Add more formats if necessary */}
@@ -176,7 +222,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( - {/* Add more time zones as needed */}
@@ -203,7 +248,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( checked={disableChatHistory} onChange={() => setDisableChatHistory(!disableChatHistory)} /> - Disable Chat History Save + Disable Chat History
@@ -216,9 +261,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( Disable AI Memory
-
- -
); @@ -356,152 +398,242 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( onChange={(e) => { const newSize = `${e.target.value}px`; setFontSize(newSize); - document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable + document.documentElement.style.setProperty('--font-size', newSize); }} /> {fontSize} +

Background Color

setBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setBackgroundColor(newColor); + document.documentElement.style.setProperty('--background-color', newColor); + }} />
+

Text Color

setTextColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setTextColor(newColor); + document.documentElement.style.setProperty('--text-color', newColor); + }} />
+

Input Background Color

setInputBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setInputBackgroundColor(newColor); + document.documentElement.style.setProperty('--input-background-color', newColor); + }} />
+

Input Button Color

setInputButtonColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setInputButtonColor(newColor); + document.documentElement.style.setProperty('--input-button-color', newColor); + }} />
+

Input Button Hover Color

setInputButtonHoverColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setInputButtonHoverColor(newColor); + document.documentElement.style.setProperty('--input-button-hover-color', newColor); + }} />
+

User Message Background Color

setUserMessageBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setUserMessageBackgroundColor(newColor); + document.documentElement.style.setProperty('--user-message-background-color', newColor); + }} />
+

User Message Text Color

setUserMessageTextColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setUserMessageTextColor(newColor); + document.documentElement.style.setProperty('--user-message-text-color', newColor); + }} />
+

AI Message Background Color

setAiMessageBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setAiMessageBackgroundColor(newColor); + document.documentElement.style.setProperty('--ai-message-background-color', newColor); + }} />
+

AI Message Text Color

setAiMessageTextColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setAiMessageTextColor(newColor); + document.documentElement.style.setProperty('--ai-message-text-color', newColor); + }} />
+

Button Background Color

setButtonBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setButtonBackgroundColor(newColor); + document.documentElement.style.setProperty('--button-background-color', newColor); + }} />
+

Button Hover Background Color

setButtonHoverBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setButtonHoverBackgroundColor(newColor); + document.documentElement.style.setProperty('--button-hover-background-color', newColor); + }} />
+

Models Background Color

setModelsBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setModelsBackgroundColor(newColor); + document.documentElement.style.setProperty('--models-background-color', newColor); + }} />
+

History Background Color

setHistoryBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setHistoryBackgroundColor(newColor); + document.documentElement.style.setProperty('--history-background-color', newColor); + }} />
+

Left Panel Background Color

setLeftPanelBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setLeftPanelBackgroundColor(newColor); + document.documentElement.style.setProperty('--left-panel-background-color', newColor); + }} />
+

Conversation Background Color

setConversationBackgroundColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setConversationBackgroundColor(newColor); + document.documentElement.style.setProperty('--conversation-background-color', newColor); + }} />
+

Pop-up Text Color

setPopUpTextColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setPopUpTextColor(newColor); + document.documentElement.style.setProperty('--pop-up-text', newColor); + }} />
+

Input Border Color

setInputBorderColor(e.target.value)} + onChange={(e) => { + const newColor = e.target.value; + setInputBorderColor(newColor); + document.documentElement.style.setProperty('--input-border-color', newColor); + }} />
+

Font Family

+ )} ); - + + case 'foss': return (
-

Free and Open Source Software (FOSS) Settings

+

Open Source Settings