forked from React-Group/interstellar_ai
1029 lines
48 KiB
TypeScript
1029 lines
48 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
|
|
|
|
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
|
|
|
const getItemFromLocalStorage = (key: string) => {
|
|
const item = localStorage.getItem(key);
|
|
return item ? JSON.parse(item) : false; // Default to false if item is null
|
|
};
|
|
|
|
// 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
|
|
// State declarations
|
|
const [disableOnlineAI, setDisableOnlineAI] = useState(() => getItemFromLocalStorage('disableOnlineAI'));
|
|
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') || '');
|
|
|
|
// 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());
|
|
|
|
// Theme selection
|
|
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
|
|
|
|
// API Keys
|
|
const [laPlateforme, setLaPlateforme] = 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());
|
|
|
|
// Effect hooks to update localStorage whenever any state changes
|
|
useEffect(() => {
|
|
localStorage.setItem('activeSection', activeSection);
|
|
}, [activeSection]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('preferredLanguage', preferredLanguage);
|
|
}, [preferredLanguage]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('preferredCurrency', preferredCurrency);
|
|
}, [preferredCurrency]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('dateFormat', dateFormat);
|
|
}, [dateFormat]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('timeFormat', timeFormat);
|
|
}, [timeFormat]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('timeZone', timeZone);
|
|
}, [timeZone]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('disableOnlineAI', JSON.stringify(disableOnlineAI));
|
|
}, [disableOnlineAI]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('disableChatHistory', JSON.stringify(disableChatHistory));
|
|
}, [disableChatHistory]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('disableAIMemory', JSON.stringify(disableAIMemory));
|
|
}, [disableAIMemory]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('openSourceMode', JSON.stringify(openSourceMode));
|
|
}, [openSourceMode]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('newName', newName);
|
|
}, [newName]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('newEmail', newEmail);
|
|
}, [newEmail]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('newPassword', newPassword);
|
|
}, [newPassword]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('preferredMeasurement', preferredMeasurement);
|
|
}, [preferredMeasurement]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('backgroundColor', backgroundColor);
|
|
}, [backgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('textColor', textColor);
|
|
}, [textColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('inputBackgroundColor', inputBackgroundColor);
|
|
}, [inputBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('inputButtonColor', inputButtonColor);
|
|
}, [inputButtonColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('inputButtonHoverColor', inputButtonHoverColor);
|
|
}, [inputButtonHoverColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('userMessageBackgroundColor', userMessageBackgroundColor);
|
|
}, [userMessageBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('userMessageTextColor', userMessageTextColor);
|
|
}, [userMessageTextColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('aiMessageBackgroundColor', aiMessageBackgroundColor);
|
|
}, [aiMessageBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('aiMessageTextColor', aiMessageTextColor);
|
|
}, [aiMessageTextColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('buttonBackgroundColor', buttonBackgroundColor);
|
|
}, [buttonBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('buttonHoverBackgroundColor', buttonHoverBackgroundColor);
|
|
}, [buttonHoverBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('modelsBackgroundColor', modelsBackgroundColor);
|
|
}, [modelsBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('historyBackgroundColor', historyBackgroundColor);
|
|
}, [historyBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('leftPanelBackgroundColor', leftPanelBackgroundColor);
|
|
}, [leftPanelBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('conversationBackgroundColor', conversationBackgroundColor);
|
|
}, [conversationBackgroundColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('popUpTextColor', popUpTextColor);
|
|
}, [popUpTextColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('inputBorderColor', inputBorderColor);
|
|
}, [inputBorderColor]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('fontFamily', fontFamily);
|
|
}, [fontFamily]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('fontSize', fontSize);
|
|
}, [fontSize]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('selectedTheme', selectedTheme);
|
|
}, [selectedTheme]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('laPlateforme', laPlateforme);
|
|
}, [laPlateforme]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('openAI', openAI);
|
|
}, [openAI]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('anthropic', anthropic);
|
|
}, [anthropic]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('google', google);
|
|
}, [google]);
|
|
|
|
// 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={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>
|
|
<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,
|
|
preferredMeasurement,
|
|
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;
|