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(''); const [preferredMessurement, setPreferredMessurement] = useState('Metric'); // Theme settings state const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim()); const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim()); const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim()); const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim()); const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim()); const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim()); const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim()); const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim()); const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim()); const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim()); const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim()); const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim()); const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim()); const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim()); const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim()); const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim()); const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim()); const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim()); // Theme selection const [selectedTheme, setSelectedTheme] = useState<string>('default'); // API Keys const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim()); const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim()); const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim()); const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim()); // 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); } }; // 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={preferredMessurement} onChange={(e) => setPreferredMessurement(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> <div className="settings-option"> <label> <input type="checkbox" checked={disableOnlineAI} onChange={() => setDisableOnlineAI(!disableOnlineAI)} /> Disable Online AI </label> </div> <div className="settings-option"> <label> <input type="checkbox" checked={disableChatHistory} onChange={() => setDisableChatHistory(!disableChatHistory)} /> Disable Chat History </label> </div> <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; setSelectedTheme(theme); // Update state for selected theme // Apply the appropriate theme based on selection switch (theme) { case 'IOMARKET': document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-size', '16px'); // Font size break; case 'WHITE': document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-size', '16px'); // Font size break; case 'BLACK': document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family document.documentElement.style.setProperty('--font-size', '16px'); // Font size break; case 'CUSTOM': // Handle custom theme logic here break; default: break; } }} // Handle theme selection > <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' && ( <> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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="'Arial', sans-serif">Arial</option> <option value="'Calibri', sans-serif">Calibri</option> <option value="'Helvetica', sans-serif">Helvetica</option> <option value="'Times New Roman', serif">Times New Roman</option> </select> </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={() => setOpenSourceMode(!openSourceMode)} /> 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> ); case 'api': return ( <div className="settings-section"> <div className="settings-option"> <label>La Plateforme</label> <input type="text" value={laPlateforme} onChange={(e) => setLaPlateforme(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, applySettings); } }; // Gather all settings into an object const currentSettings = { backgroundColor, textColor, inputBackgroundColor, inputButtonColor, inputButtonHoverColor, userMessageBackgroundColor, userMessageTextColor, aiMessageBackgroundColor, aiMessageTextColor, buttonBackgroundColor, buttonHoverBackgroundColor, modelsBackgroundColor, historyBackgroundColor, leftPanelBackgroundColor, conversationBackgroundColor, popUpTextColor, inputBorderColor, fontFamily, fontSize, preferredLanguage, preferredCurrency, preferredMessurement, dateFormat, timeFormat, timeZone, disableOnlineAI, disableChatHistory, disableAIMemory, openSourceMode, // API Keys laPlateforme, openAI, anthropic, google }; 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> </div> </div> </div> </div> ); }; export default Settings;