import React, { useState, useEffect } from 'react';
import { applyTheme, applyCustomTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
import { getAllLocalStorageItems } from '../backend/GetLocalStorage';
import {
changePassword,
changeData,
deleteAccount,
} from '../backend/database';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
const getItemFromLocalStorage = (key: string) => {
const item = localStorage.getItem(key);
if (item) {
try {
return JSON.parse(item); // Attempt to parse the item
} catch (e) {
console.error(`Error parsing JSON for key "${key}":`, e);
return false; // Return false if parsing fails
}
}
return false; // Default to false if item is null or empty
};
interface SettingsProps {
closeSettings: () => void;
accountName: string;
handleLogout: () => void; // Add this line to accept handleLogout as a prop
}
// Active section
const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
// Language setting
const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
// Currency setting
const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
// Date and time format settings
const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
// Online AI and chat history settings
const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
// User credentials
const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
const [currentPassword, setCurrentPassword] = useState('');
// Measurement setting
const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
// Theme settings
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());
const [inputButtonColor, setInputButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
const [inputButtonHoverColor, setInputButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
const [userMessageTextColor, setUserMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
const [aiMessageTextColor, setAiMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
const [buttonBackgroundColor, setButtonBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
const [modelsBackgroundColor, setModelsBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
const [historyBackgroundColor, setHistoryBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
const [conversationBackgroundColor, setConversationBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
const [popUpTextColor, setPopUpTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
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<string>('');
useEffect(() => {
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
setSelectedTheme(savedTheme);
applyTheme(savedTheme);
}
}, []); // Runs only once when the component mounts
// API Keys
const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
const [openai, setopenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogout = () => {
setIsLoggedIn(false);
localStorage.removeItem('accountName');
localStorage.removeItem('accountEmail');
localStorage.removeItem('accountPassword');
};
const settings = {
userPreferences: {
activeSection,
preferredLanguage,
preferredCurrency,
dateFormat,
timeFormat,
timeZone,
selectedOption,
disableChatHistory,
disableAIMemory,
openSourceMode,
newName,
newEmail,
newPassword,
preferredMeasurement,
},
theme: {
backgroundColor,
textColor,
inputBackgroundColor,
inputButtonColor,
inputButtonHoverColor,
userMessageBackgroundColor,
userMessageTextColor,
aiMessageBackgroundColor,
aiMessageTextColor,
buttonBackgroundColor,
buttonHoverBackgroundColor,
modelsBackgroundColor,
historyBackgroundColor,
leftPanelBackgroundColor,
conversationBackgroundColor,
popUpTextColor,
inputBorderColor,
fontFamily,
fontSize,
selectedTheme,
faqSettings: {
faqBackgroundColor,
faqHeadingColor,
faqItemBackgroundColor,
faqItemHeadingColor,
faqItemTextColor,
faqItemHoverBackgroundColor,
},
popupSettings: {
popupBackgroundColor,
overlayTextColor,
},
},
apiKeys: {
mistral,
openai,
anthropic,
google,
},
generalSettings: {
burgerMenu,
},
};
// Effect hooks to update localStorage whenever any state changes
useEffect(() => {
// Flatten nested objects
const flattenedSettings = {
...settings.userPreferences,
...settings.theme,
...settings.theme.faqSettings,
...settings.theme.popupSettings,
...settings.apiKeys,
...settings.generalSettings,
};
// Update localStorage for all settings
for (const [key, value] of Object.entries(flattenedSettings)) {
localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
}
}, [
...Object.values(settings.userPreferences),
...Object.values(settings.theme),
...Object.values(settings.theme.faqSettings),
...Object.values(settings.theme.popupSettings),
...Object.values(settings.apiKeys),
...Object.values(settings.generalSettings),
]);
useEffect(() => {
const savedOption = localStorage.getItem('radioSelection');
if (savedOption) {
setSelectedOption(savedOption); // Set saved selection
}
}, []);
const handleRadioChange = (newValue: string) => {
setSelectedOption(newValue); // Update the state with the selected option
if (openSourceMode){
newValue += " (FOSS)"
}
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
};
// Function to handle updating all credentials
const handleUpdateCredentials = async () => {
// Update account information
const newData = {
name: newName || accountName, // Keep old name if new name is not provided
email: newEmail || '', // Optionally use empty string if not provided
};
// First change the data
const dataSuccess = await changeData(accountName, currentPassword, newData);
// Then change the password if a new password is provided
const passwordSuccess = newPassword ?
await changePassword(accountName, currentPassword, newPassword) :
true; // If no new password, treat as success
if (dataSuccess && passwordSuccess) {
alert('Credentials updated successfully!');
closeSettings(); // Close settings after updating
} else {
alert('Failed to update credentials. Please check your current password.');
}
};
// Function to handle account deletion
const handleDeleteAccount = async () => {
const success = await deleteAccount(accountName, currentPassword);
if (success) {
alert('Account deleted successfully!');
closeSettings(); // Close settings after deletion
// Optionally, redirect or reset state here
} else {
alert('Account deletion failed. Please check your password.');
}
};
// Render settings content based on the active section
const renderSettingsContent = () => {
switch (activeSection) {
case 'general':
return (
<div className="settings-section">
<h2>General Settings</h2>
<div className="settings-option">
<label>Preferred Language</label>
<select
value={preferredLanguage}
onChange={(e) => setPreferredLanguage(e.target.value)}
>
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="zh">Chinese</option>
<option value="ja">Japanese</option>
<option value="ru">Russian</option>
<option value="ar">Arabic</option>
</select>
</div>
<div className="settings-option">
<label>Preferred Currency</label>
<select
value={preferredCurrency}
onChange={(e) => setPreferredCurrency(e.target.value)}
>
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
<option value="jpy">JPY</option>
<option value="cad">CAD</option>
<option value="aud">AUD</option>
<option value="chf">CHF</option>
<option value="cny">CNY</option>
<option value="inr">INR</option>
</select>
</div>
<div className="settings-option">
<label>Date Format</label>
<select
value={dateFormat}
onChange={(e) => setDateFormat(e.target.value)}
>
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
<option value="mm-dd-yyyy">MM-DD-YYYY</option>
<option value="dd-mm-yyyy">DD-MM-YYYY</option>
</select>
</div>
<div className="settings-option">
<label>Time Format</label>
<select
value={timeFormat}
onChange={(e) => setTimeFormat(e.target.value)}
>
<option value="12-hour">12 Hour</option>
<option value="24-hour">24 Hour</option>
</select>
</div>
<div className="settings-option">
<label>Time Zone</label>
<select
value={timeZone}
onChange={(e) => setTimeZone(e.target.value)}
>
<option value="GMT">GMT</option>
<option value="EST">EST</option>
<option value="CST">CST</option>
<option value="MST">MST</option>
<option value="PST">PST</option>
<option value="UTC">UTC</option>
<option value="BST">BST</option>
<option value="IST">IST</option>
<option value="CET">CET</option>
<option value="JST">JST</option>
</select>
</div>
{/* New Preferred Measurement Option */}
<div className="settings-option">
<label>Preferred Measurement</label>
<select
value={preferredMeasurement}
onChange={(e) => setPreferredMeasurement(e.target.value)}
>
<option value="Metric">Metric</option>
<option value="Imperial">Imperial</option>
</select>
</div>
</div>
);
case 'privacy':
return (
<div className="settings-section">
<h2>Privacy Settings</h2>
{/* AI Mode Radio Options */}
<div className="settings-option">
<p>Disable Options:</p>
<div className="slider">
{/* Offline */}
<div
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
>
Offline tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* Online */}
<div
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
onClick={() => handleRadioChange('Online')}
>
Online tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* None */}
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleRadioChange('None')}
>
None{openSourceMode ? ' (FOSS)' : ''}
</div>
</div>
<br />
<p>
After changing the preferred settings, please reload the website so it can update itself properly.
</p>
</div>
{/* Disable Chat History Checkbox */}
<div className="settings-option">
<label>
<input
type="checkbox"
checked={disableChatHistory}
onChange={() => setDisableChatHistory(!disableChatHistory)}
/>
Disable Chat History
</label>
</div>
{/* Disable AI Memory Checkbox */}
<div className="settings-option">
<label>
<input
type="checkbox"
checked={disableAIMemory}
onChange={() => setDisableAIMemory(!disableAIMemory)}
/>
Disable AI Memory
</label>
</div>
</div>
);
case 'theme':
return (
<div className="settings-section">
<h2>Theme Settings</h2>
{/* Dropdown to select theme */}
<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);
// Apply the appropriate theme based on selection
applyTheme(theme);
}
}}
>
<option value="default">Select your style...</option>
<option value="IOMARKET">IOMARKET</option>
<option value="WHITE">WHITE</option>
<option value="BLACK">BLACK</option>
<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
type="range"
min="12"
max="30"
value={parseInt(fontSize, 10)} // Ensure value is a number
onChange={(e) => {
const newSize = `${e.target.value}px`;
setFontSize(newSize);
document.documentElement.style.setProperty('--font-size', newSize);
}}
/>
<span>{fontSize}</span>
</div>
{/* Background Color */}
<div className="settings-option">
<p>Background Color</p>
<input
type="color"
value={backgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setBackgroundColor(newColor);
document.documentElement.style.setProperty('--background-color', newColor);
}}
/>
</div>
{/* Text Color */}
<div className="settings-option">
<p>Text Color</p>
<input
type="color"
value={textColor}
onChange={(e) => {
const newColor = e.target.value;
setTextColor(newColor);
document.documentElement.style.setProperty('--text-color', newColor);
}}
/>
</div>
{/* Input Background Color */}
<div className="settings-option">
<p>Input Background Color</p>
<input
type="color"
value={inputBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setInputBackgroundColor(newColor);
document.documentElement.style.setProperty('--input-background-color', newColor);
}}
/>
</div>
{/* Input Button Color */}
<div className="settings-option">
<p>Input Button Color</p>
<input
type="color"
value={inputButtonColor}
onChange={(e) => {
const newColor = e.target.value;
setInputButtonColor(newColor);
document.documentElement.style.setProperty('--input-button-color', newColor);
}}
/>
</div>
{/* Input Button Hover Color */}
<div className="settings-option">
<p>Input Button Hover Color</p>
<input
type="color"
value={inputButtonHoverColor}
onChange={(e) => {
const newColor = e.target.value;
setInputButtonHoverColor(newColor);
document.documentElement.style.setProperty('--input-button-hover-color', newColor);
}}
/>
</div>
{/* User Message Background Color */}
<div className="settings-option">
<p>User Message Background Color</p>
<input
type="color"
value={userMessageBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setUserMessageBackgroundColor(newColor);
document.documentElement.style.setProperty('--user-message-background-color', newColor);
}}
/>
</div>
{/* User Message Text Color */}
<div className="settings-option">
<p>User Message Text Color</p>
<input
type="color"
value={userMessageTextColor}
onChange={(e) => {
const newColor = e.target.value;
setUserMessageTextColor(newColor);
document.documentElement.style.setProperty('--user-message-text-color', newColor);
}}
/>
</div>
{/* AI Message Background Color */}
<div className="settings-option">
<p>AI Message Background Color</p>
<input
type="color"
value={aiMessageBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setAiMessageBackgroundColor(newColor);
document.documentElement.style.setProperty('--ai-message-background-color', newColor);
}}
/>
</div>
{/* AI Message Text Color */}
<div className="settings-option">
<p>AI Message Text Color</p>
<input
type="color"
value={aiMessageTextColor}
onChange={(e) => {
const newColor = e.target.value;
setAiMessageTextColor(newColor);
document.documentElement.style.setProperty('--ai-message-text-color', newColor);
}}
/>
</div>
{/* Button Background Color */}
<div className="settings-option">
<p>Button Background Color</p>
<input
type="color"
value={buttonBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setButtonBackgroundColor(newColor);
document.documentElement.style.setProperty('--button-background-color', newColor);
}}
/>
</div>
{/* Button Hover Background Color */}
<div className="settings-option">
<p>Button Hover Background Color</p>
<input
type="color"
value={buttonHoverBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setButtonHoverBackgroundColor(newColor);
document.documentElement.style.setProperty('--button-hover-background-color', newColor);
}}
/>
</div>
{/* Models Background Color */}
<div className="settings-option">
<p>Models Background Color</p>
<input
type="color"
value={modelsBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setModelsBackgroundColor(newColor);
document.documentElement.style.setProperty('--models-background-color', newColor);
}}
/>
</div>
{/* History Background Color */}
<div className="settings-option">
<p>History Background Color</p>
<input
type="color"
value={historyBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setHistoryBackgroundColor(newColor);
document.documentElement.style.setProperty('--history-background-color', newColor);
}}
/>
</div>
{/* Left Panel Background Color */}
<div className="settings-option">
<p>Left Panel Background Color</p>
<input
type="color"
value={leftPanelBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setLeftPanelBackgroundColor(newColor);
document.documentElement.style.setProperty('--left-panel-background-color', newColor);
}}
/>
</div>
{/* Conversation Background Color */}
<div className="settings-option">
<p>Conversation Background Color</p>
<input
type="color"
value={conversationBackgroundColor}
onChange={(e) => {
const newColor = e.target.value;
setConversationBackgroundColor(newColor);
document.documentElement.style.setProperty('--conversation-background-color', newColor);
}}
/>
</div>
{/* Pop-up Text Color */}
<div className="settings-option">
<p>Pop-up Text Color</p>
<input
type="color"
value={popUpTextColor}
onChange={(e) => {
const newColor = e.target.value;
setPopUpTextColor(newColor);
document.documentElement.style.setProperty('--pop-up-text', newColor);
}}
/>
</div>
{/* Input Border Color */}
<div className="settings-option">
<p>Input Border Color</p>
<input
type="color"
value={inputBorderColor}
onChange={(e) => {
const newColor = e.target.value;
setInputBorderColor(newColor);
document.documentElement.style.setProperty('--input-border-color', newColor);
}}
/>
</div>
{/* Font Family */}
<div className="settings-option">
<p>Font Family</p>
<select
value={fontFamily}
onChange={(e) => {
const newFont = e.target.value;
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
>
<option value="'Poppins', sans-serif">Poppins</option>
<option value="'Inconsolata', monospace">Inconsolata</option>
<option value="'Merriweather', serif">Merriweather</option>
<option value="'Noto Sans', sans-serif">Noto Sans</option>
<option value="'Noto Serif', serif">Noto Serif</option>
<option value="'Playfair Display', serif">Playfair Display</option>
<option value="'Roboto', sans-serif">Roboto</option>
<option value="'Ubuntu', sans-serif">Ubuntu</option>
<option value="'Bangers', cursive">Bangers</option>
<option value="'Caveat', cursive">Caveat</option>
<option value="'Frederika the Great', cursive">Frederika the Great</option>
<option value="'Rock Salt', cursive">Rock Salt</option>
<option value="'Sofadi One', sans-serif">Sofadi One</option>
<option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
</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>
);
case 'foss':
return (
<div className="settings-section">
<h2>Open Source Settings</h2>
<div className="settings-option">
<label>
<input
type="checkbox"
checked={openSourceMode}
onChange={() => {
const newValue = !openSourceMode;
setOpenSourceMode(newValue);
// Update radio selection based on the new openSourceMode value
if (newValue) {
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
} else {
setSelectedOption('None'); // Or any other default value when disabling
}
}}
/>
Enable Open Source Mode
</label>
</div>
</div>
);
case 'account':
return (
<div className="settings-section">
<h2>Account Settings</h2>
<div className="settings-option">
<label>New Name</label>
<input
type="text"
value={newName}
onChange={(e) => setNewName(e.target.value)}
/>
</div>
<div className="settings-option">
<label>New Email</label>
<input
type="email"
value={newEmail}
onChange={(e) => setNewEmail(e.target.value)}
/>
</div>
<div className="settings-option">
<label>New Password</label>
<input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
/>
</div>
<div className="settings-option">
<label>Current Password</label>
<input
type="password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
/>
</div>
<div className="settings-option">
<button
onClick={handleUpdateCredentials} // Update all credentials
className="update-credentials-button"
>
Update Credentials
</button>
</div>
<div className="settings-option">
<button
onClick={handleDeleteAccount} // Delete account
className="delete-account-button"
>
Delete Account
</button>
</div>
</div>
);
case 'api':
return (
<div className="settings-section">
<div className="settings-option">
<label>La Plateforme</label>
<input
type="text"
value={mistral}
onChange={(e) => setmistral(e.target.value)}
/>
</div>
<div className="settings-option">
<label>OpenAI</label>
<input
type="text"
value={openai}
onChange={(e) => setopenai(e.target.value)}
/>
</div>
<div className="settings-option">
<label>Anthropic</label>
<input
type="text"
value={anthropic}
onChange={(e) => setAnthropic(e.target.value)}
/>
</div>
<div className="settings-option">
<label>Google</label>
<input
type="text"
value={google}
onChange={(e) => setGoogle(e.target.value)}
/>
</div>
</div>
);
case 'im/export':
return (
<div className="settings-section">
<h2>Import & Export</h2>
<div className="settings-option">
<h3>Export the settings</h3>
<button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
</div>
<div className="settings-option">
<h3>Import the settings</h3>
<input type="file" onChange={handleImport} accept=".json" className='import-file'/>
</div>
</div>
);
default:
return null;
}
};
// Handle file import
const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) {
const file = event.target.files[0];
importSettings(file, applyCustomTheme);
}
};
// Gather all settings into an object
// Gather current settings into an object
const currentSettings = {
...settings.userPreferences,
...settings.theme,
...settings.theme.faqSettings,
...settings.theme.popupSettings,
...settings.apiKeys,
...settings.generalSettings,
};
return (
<div className="popup-overlay">
<div className="settings-content">
<div className="settings-container">
<div className="sidebar">
<ul>
<li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
<li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
<li onClick={() => setActiveSection('api')}>API Keys</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul>
</div>
<div className="settings-main">
<h2>Settings for {accountName}</h2>
{renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={() => {
getAllLocalStorageItems();
closeSettings();
}}>
Apply
</button>
</div>
</div>
</div>
</div>
);
};
export default Settings;