diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 29ba297..ea1a818 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -44,6 +44,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [newEmail, setNewEmail] = useState<string>('');
const [newPassword, setNewPassword] = useState<string>('');
+ // Theme selection
+ const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
+
+
// Effect to update CSS variables on theme state change
useEffect(() => {
document.documentElement.style.setProperty('--background-color', backgroundColor);
@@ -84,7 +88,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
popUpTextColor,
inputBorderColor,
fontFamily,
- fontSize
+ fontSize,
]);
const renderSettingsContent = () => {
@@ -171,7 +175,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</label>
</div>
<div className="settings-option">
- <button onClick={() => {/* Export data logic */}}>Export My Data</button>
+ <button onClick={() => { /* Export data logic */ }}>Export My Data</button>
</div>
</div>
);
@@ -180,177 +184,300 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return (
<div className="settings-section">
<h2>Theme Settings</h2>
+
+ {/* Dropdown to select theme */}
<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); // Update the CSS variable
- }}
- />
- <span>{fontSize}</span>
- </div>
- <div className="settings-option">
- <p>Background Color</p>
- <input
- type="color"
- value={backgroundColor}
- onChange={(e) => setBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Text Color</p>
- <input
- type="color"
- value={textColor}
- onChange={(e) => setTextColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Input Background Color</p>
- <input
- type="color"
- value={inputBackgroundColor}
- onChange={(e) => setInputBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Input Button Color</p>
- <input
- type="color"
- value={inputButtonColor}
- onChange={(e) => setInputButtonColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Input Button Hover Color</p>
- <input
- type="color"
- value={inputButtonHoverColor}
- onChange={(e) => setInputButtonHoverColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>User Message Background Color</p>
- <input
- type="color"
- value={userMessageBackgroundColor}
- onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>User Message Text Color</p>
- <input
- type="color"
- value={userMessageTextColor}
- onChange={(e) => setUserMessageTextColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>AI Message Background Color</p>
- <input
- type="color"
- value={aiMessageBackgroundColor}
- onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>AI Message Text Color</p>
- <input
- type="color"
- value={aiMessageTextColor}
- onChange={(e) => setAiMessageTextColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Button Background Color</p>
- <input
- type="color"
- value={buttonBackgroundColor}
- onChange={(e) => setButtonBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Button Hover Background Color</p>
- <input
- type="color"
- value={buttonHoverBackgroundColor}
- onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Models Background Color</p>
- <input
- type="color"
- value={modelsBackgroundColor}
- onChange={(e) => setModelsBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>History Background Color</p>
- <input
- type="color"
- value={historyBackgroundColor}
- onChange={(e) => setHistoryBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Left Panel Background Color</p>
- <input
- type="color"
- value={leftPanelBackgroundColor}
- onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Conversation Background Color</p>
- <input
- type="color"
- value={conversationBackgroundColor}
- onChange={(e) => setConversationBackgroundColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Pop-up Text Color</p>
- <input
- type="color"
- value={popUpTextColor}
- onChange={(e) => setPopUpTextColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Input Border Color</p>
- <input
- type="color"
- value={inputBorderColor}
- onChange={(e) => setInputBorderColor(e.target.value)}
- />
- </div>
- <div className="settings-option">
- <p>Font Family</p>
+ <p>Select Theme</p>
<select
- value={fontFamily}
- onChange={(e) => setFontFamily(e.target.value)}
+ 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'); // New 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'); // Background color for input fields
+ document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
+ document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
+ document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
+ document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
+ document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
+ document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
+ 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'); // Background for models section
+ document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
+ document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
+ document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
+ document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
+ document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
+ document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
+ document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
+ document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
+ document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
+ document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default 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 color
+ 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'); // Background color for input fields
+ document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
+ document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
+ document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
+ document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
+ document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
+ document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
+ 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'); // Background for models section
+ document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
+ document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
+ document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
+ document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
+ document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
+ document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
+ document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
+ document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
+ document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
+ document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default 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 color
+ 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'); // Background color for input fields
+ document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
+ document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
+ document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
+ document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
+ document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
+ document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
+ 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'); // Background for models section
+ document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
+ document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
+ document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
+ document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
+ document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
+ document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
+ document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
+ document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
+ document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
+ document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
+ document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+ break;
+ case 'CUSTOM':
+ // Do nothing, CUSTOM will display the customization options
+ break;
+ default:
+ break;
+ }
+ }} // Handle theme selection
>
- <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>
- <option value="'Poppins', sans-serif">Poppins</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); // Update the CSS variable
+ }}
+ />
+ <span>{fontSize}</span>
+ </div>
+ <div className="settings-option">
+ <p>Background Color</p>
+ <input
+ type="color"
+ value={backgroundColor}
+ onChange={(e) => setBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Text Color</p>
+ <input
+ type="color"
+ value={textColor}
+ onChange={(e) => setTextColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Input Background Color</p>
+ <input
+ type="color"
+ value={inputBackgroundColor}
+ onChange={(e) => setInputBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Input Button Color</p>
+ <input
+ type="color"
+ value={inputButtonColor}
+ onChange={(e) => setInputButtonColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Input Button Hover Color</p>
+ <input
+ type="color"
+ value={inputButtonHoverColor}
+ onChange={(e) => setInputButtonHoverColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>User Message Background Color</p>
+ <input
+ type="color"
+ value={userMessageBackgroundColor}
+ onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>User Message Text Color</p>
+ <input
+ type="color"
+ value={userMessageTextColor}
+ onChange={(e) => setUserMessageTextColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>AI Message Background Color</p>
+ <input
+ type="color"
+ value={aiMessageBackgroundColor}
+ onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>AI Message Text Color</p>
+ <input
+ type="color"
+ value={aiMessageTextColor}
+ onChange={(e) => setAiMessageTextColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Button Background Color</p>
+ <input
+ type="color"
+ value={buttonBackgroundColor}
+ onChange={(e) => setButtonBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Button Hover Background Color</p>
+ <input
+ type="color"
+ value={buttonHoverBackgroundColor}
+ onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Models Background Color</p>
+ <input
+ type="color"
+ value={modelsBackgroundColor}
+ onChange={(e) => setModelsBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>History Background Color</p>
+ <input
+ type="color"
+ value={historyBackgroundColor}
+ onChange={(e) => setHistoryBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Left Panel Background Color</p>
+ <input
+ type="color"
+ value={leftPanelBackgroundColor}
+ onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Conversation Background Color</p>
+ <input
+ type="color"
+ value={conversationBackgroundColor}
+ onChange={(e) => setConversationBackgroundColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Pop-up Text Color</p>
+ <input
+ type="color"
+ value={popUpTextColor}
+ onChange={(e) => setPopUpTextColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Input Border Color</p>
+ <input
+ type="color"
+ value={inputBorderColor}
+ onChange={(e) => setInputBorderColor(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <p>Font Family</p>
+ <select
+ value={fontFamily}
+ onChange={(e) => setFontFamily(e.target.value)}
+ >
+ <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>FOSS Settings</h2>
+ <h2>Free and Open Source Software (FOSS) Settings</h2>
<div className="settings-option">
<label>
<input
@@ -360,7 +487,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
/>
Enable Open Source Mode
</label>
- <p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
</div>
</div>
);
@@ -393,10 +519,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
onChange={(e) => setNewPassword(e.target.value)}
/>
</div>
- <div className="danger-zone">
- <h3>DANGER ZONE</h3>
- <button onClick={() => {/* Delete account logic */}}>Delete Account</button>
- </div>
</div>
);
@@ -426,6 +548,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div>
</div>
</div>
+
);
};