YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Further Refactoring of the Settings

Browse source
This commit is contained in:
sageTheDM 2024-10-01 12:45:21 +02:00
parent 003e353073
commit 92f880c3f8
11 changed files with 557 additions and 496 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/components/settings/ButtonSettings.tsx Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
interface ButtonSettingProps {
label: string; // The label to display on the button
onClick: () => void; // The function to call when the button is clicked
className?: string; // Optional additional classes for styling
}
const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
return (
<div className="settings-option">
<button
onClick={onClick} // Call the onClick function when the button is clicked
className={className} // Apply any additional classes
>
{label} {/* Display the label on the button */}
</button>
</div>
);
};
export default ButtonSetting;

28
app/components/settings/CheckBox.tsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
interface CheckboxSettingProps {
label: string; // The label to display
checked: boolean; // The checked state of the checkbox
setChecked: (value: boolean) => void; // Method to update the state
}
const CheckboxSetting: React.FC<CheckboxSettingProps> = ({ label, checked, setChecked }) => {
const handleCheckboxChange = () => {
setChecked(!checked);
};
return (
<div className="settings-option">
<label>
<input
type="checkbox"
checked={checked}
onChange={handleCheckboxChange}
/>
{label}
</label>
</div>
);
};
export default CheckboxSetting;

50
app/components/settings/ColorSettings.tsx
View file

@ -1,29 +1,29 @@
import React from 'react';
import React from 'react';
interface ColorSettingProps {
name: string; // The name to display in the <p> tag
value: string; // The current color value
setValue: (newColor: string) => void; // The method to update the state
cssVariable: string; // The CSS variable name to set
}
interface ColorSettingProps {
name: string; // The name to display in the <p> tag
value: string; // The current color value
setValue: (newColor: string) => void; // The method to update the state
cssVariable: string; // The CSS variable name to set
}
const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newColor = e.target.value;
setValue(newColor);
document.documentElement.style.setProperty(cssVariable, newColor);
};
const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newColor = e.target.value;
setValue(newColor);
document.documentElement.style.setProperty(cssVariable, newColor);
};
return (
<div className="settings-option">
<p>{name}</p>
<input
type="color"
value={value}
onChange={handleColorChange}
/>
</div>
);
};
return (
<div className="settings-option">
<p>{name}</p>
<input
type="color"
value={value}
onChange={handleColorChange}
/>
</div>
);
};
export default ColorSetting;
export default ColorSetting;

35
app/components/settings/DropDown.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
interface Option {
value: string; // The actual value to be used
label: string; // The label to display for the option
}
interface DropdownSettingProps {
label: string; // The label to display
value: string; // The current selected value
setValue: (newValue: string) => void; // The method to update the state
options: Option[]; // List of options for the dropdown
}
const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const newValue = e.target.value;
setValue(newValue);
};
return (
<div className="settings-option">
<label>{label}</label>
<select value={value} onChange={handleSelectChange}>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
);
};
export default DropdownSetting;

41
app/components/settings/DropDownTheme.tsx Normal file
View file

@ -0,0 +1,41 @@
// ThemeDropdown.tsx
import React from 'react';
import { applyTheme, applyCustomTheme } from './theme';
const ThemeDropdown: React.FC<{
selectedTheme: string;
setSelectedTheme: (theme: string) => void;
}> = ({ selectedTheme, setSelectedTheme }) => {
const themeOptions = [
{ value: 'IOMARKET', label: 'IOMARKET' },
{ value: 'WHITE', label: 'WHITE' },
{ value: 'BLACK', label: 'BLACK' },
{ value: 'CUSTOM', label: 'CUSTOM' },
];
return (
<div className="settings-option">
<p>Select Theme</p>
<select
value={selectedTheme}
onChange={(e) => {
const theme = e.target.value;
if (theme !== 'default') {
setSelectedTheme(theme);
localStorage.setItem('selectedTheme', theme);
applyTheme(theme); // Ensure you define applyTheme
}
}}
>
<option value="default">Select your style...</option>
{themeOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
);
};
export default ThemeDropdown;

31
app/components/settings/FontSize.tsx Normal file
View file

@ -0,0 +1,31 @@
// FontSizeSetting.tsx
import React from 'react';
interface FontSizeSettingProps {
fontSize: string; // The current font size
setFontSize: (newSize: string) => void; // Function to update the font size
}
const FontSizeSetting: React.FC<FontSizeSettingProps> = ({ fontSize, setFontSize }) => {
const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newSize = `${e.target.value}px`;
setFontSize(newSize);
document.documentElement.style.setProperty('--font-size', newSize);
};
return (
<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={handleFontSizeChange}
/>
<span>{fontSize}</span>
</div>
);
};
export default FontSizeSetting;

41
app/components/settings/OpenSourceToggle.tsx Normal file
View file

@ -0,0 +1,41 @@
// OpenSourceModeToggle.tsx
import React from 'react';
interface OpenSourceModeToggleProps {
openSourceMode: boolean; // Current state of open source mode
setOpenSourceMode: (value: boolean) => void; // Function to update open source mode
setSelectedOption: (value: string) => void; // Function to update the selected option
}
const OpenSourceModeToggle: React.FC<OpenSourceModeToggleProps> = ({
openSourceMode,
setOpenSourceMode,
setSelectedOption
}) => {
const handleToggleChange = () => {
const newValue = !openSourceMode;
setOpenSourceMode(newValue);
// Update radio selection based on the new openSourceMode value
if (newValue) {
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
} else {
setSelectedOption('None'); // Or any other default value when disabling
}
};
return (
<div className="settings-option">
<label>
<input
type="checkbox"
checked={openSourceMode}
onChange={handleToggleChange}
/>
Enable Open Source Mode
</label>
</div>
);
};
export default OpenSourceModeToggle;

50
app/components/settings/PrivacySettings.tsx Normal file
View file

@ -0,0 +1,50 @@
// PrivacySettings.tsx
import React from 'react';
interface PrivacySettingsProps {
selectedOption: string; // The currently selected option
handleRadioChange: (option: string) => void; // Function to handle option changes
openSourceMode: boolean; // Boolean to check if the mode is open source
}
const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => {
return (
<>
{/* AI Mode Radio Options */}
<div className="settings-option">
<p>Disable Options:</p>
<div className="slider">
{/* Offline */}
<div
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
>
Offline tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* Online */}
<div
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
onClick={() => handleRadioChange('Online')}
>
Online tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* None */}
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleRadioChange('None')}
>
None{openSourceMode ? ' (FOSS)' : ''}
</div>
</div>
<br />
<p>
After changing the preferred settings, please reload the website so it can update itself properly.
</p>
</div>
</>
);
};
export default PrivacySettings;

711
app/components/settings/Settings.tsx
View file

@ -3,11 +3,19 @@ import { applyTheme, applyCustomTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
import { getAllLocalStorageItems } from '../../backend/GetLocalStorage';
import ColorSetting from './ColorSettings';
import TextSettings from './TextSettings'
import ButtonSetting from './ButtonSettings';
import DropdownSetting from './DropDown';
import CheckboxSetting from './CheckBox';
import PrivacySettings from './PrivacySettings';
import FontSizeSetting from './FontSize';
import OpenSourceModeToggle from './OpenSourceToggle';
import {
changePassword,
changeData,
deleteAccount,
} from '../../backend/database';
import ThemeDropdown from './DropDownTheme';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@ -64,6 +72,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
// Theme settings
const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
const [headerBackground, setHeaderBackground] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--header-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());
@ -97,8 +106,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [selectedTheme, setSelectedTheme] = useState<string>('');
// API Keys
const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
const [openai, setopenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
@ -123,6 +132,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
},
theme: {
backgroundColor,
headerBackground,
textColor,
inputBackgroundColor,
inputButtonColor,
@ -166,6 +176,109 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
},
};
const colorSettings = [
{ name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" },
{ name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" },
{ name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" },
{ name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" },
{ name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" },
{ name: "Input Button Hover Color", value: inputButtonHoverColor, setValue: setInputButtonHoverColor, cssVariable: "--input-button-hover-color" },
{ name: "User Message Background Color", value: userMessageBackgroundColor, setValue: setUserMessageBackgroundColor, cssVariable: "--user-message-background-color" },
{ name: "User Message Text Color", value: userMessageTextColor, setValue: setUserMessageTextColor, cssVariable: "--user-message-text-color" },
{ name: "AI Message Background Color", value: aiMessageBackgroundColor, setValue: setAiMessageBackgroundColor, cssVariable: "--ai-message-background-color" },
{ name: "AI Message Text Color", value: aiMessageTextColor, setValue: setAiMessageTextColor, cssVariable: "--ai-message-text-color" },
{ name: "Button Background Color", value: buttonBackgroundColor, setValue: setButtonBackgroundColor, cssVariable: "--button-background-color" },
{ name: "Button Hover Background Color", value: buttonHoverBackgroundColor, setValue: setButtonHoverBackgroundColor, cssVariable: "--button-hover-background-color" },
{ name: "Models Background Color", value: modelsBackgroundColor, setValue: setModelsBackgroundColor, cssVariable: "--models-background-color" },
{ name: "History Background Color", value: historyBackgroundColor, setValue: setHistoryBackgroundColor, cssVariable: "--history-background-color" },
{ name: "Left Panel Background Color", value: leftPanelBackgroundColor, setValue: setLeftPanelBackgroundColor, cssVariable: "--left-panel-background-color" },
{ name: "Conversation Background Color", value: conversationBackgroundColor, setValue: setConversationBackgroundColor, cssVariable: "--conversation-background-color" },
{ name: "Pop-up Text Color", value: popUpTextColor, setValue: setPopUpTextColor, cssVariable: "--pop-up-text" },
{ name: "Input Border Color", value: inputBorderColor, setValue: setInputBorderColor, cssVariable: "--input-border-color" },
{ name: "FAQ Background Color", value: faqBackgroundColor, setValue: setFaqBackgroundColor, cssVariable: "--faq-background-color" },
{ name: "FAQ Heading Color", value: faqHeadingColor, setValue: setFaqHeadingColor, cssVariable: "--faq-heading-color" },
{ name: "FAQ Item Background Color", value: faqItemBackgroundColor, setValue: setFaqItemBackgroundColor, cssVariable: "--faq-item-background-color" },
{ name: "FAQ Item Heading Color", value: faqItemHeadingColor, setValue: setFaqItemHeadingColor, cssVariable: "--faq-item-heading-color" },
{ name: "FAQ Item Text Color", value: faqItemTextColor, setValue: setFaqItemTextColor, cssVariable: "--faq-item-text-color" },
{ name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
{ name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
{ name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
];
const timeZoneOptions = [
{ value: 'GMT', label: 'GMT' },
{ value: 'EST', label: 'EST' },
{ value: 'CST', label: 'CST' },
{ value: 'MST', label: 'MST' },
{ value: 'PST', label: 'PST' },
{ value: 'UTC', label: 'UTC' },
{ value: 'BST', label: 'BST' },
{ value: 'IST', label: 'IST' },
{ value: 'CET', label: 'CET' },
{ value: 'JST', label: 'JST' },
];
const languageOptions = [
{ code: 'en', name: 'English' },
{ code: 'es', name: 'Spanish' },
{ code: 'fr', name: 'French' },
{ code: 'de', name: 'German' },
{ code: 'it', name: 'Italian' },
{ code: 'pt', name: 'Portuguese' },
{ code: 'zh', name: 'Chinese' },
{ code: 'ja', name: 'Japanese' },
{ code: 'ru', name: 'Russian' },
{ code: 'ar', name: 'Arabic' },
];
const currencyOptions = [
{ code: 'usd', name: 'USD' },
{ code: 'eur', name: 'EUR' },
{ code: 'gbp', name: 'GBP' },
{ code: 'jpy', name: 'JPY' },
{ code: 'cad', name: 'CAD' },
{ code: 'aud', name: 'AUD' },
{ code: 'chf', name: 'CHF' },
{ code: 'cny', name: 'CNY' },
{ code: 'inr', name: 'INR' },
];
const dateFormatOptions = [
{ value: 'mm/dd/yyyy', label: 'MM/DD/YYYY' },
{ value: 'dd/mm/yyyy', label: 'DD/MM/YYYY' },
{ value: 'yyyy-mm-dd', label: 'YYYY-MM-DD' },
{ value: 'mm-dd-yyyy', label: 'MM-DD-YYYY' },
{ value: 'dd-mm-yyyy', label: 'DD-MM-YYYY' },
];
const timeFormatOptions = [
{ value: '12-hour', label: '12 Hour' },
{ value: '24-hour', label: '24 Hour' },
];
const measurementOptions = [
{ value: 'Metric', label: 'Metric' },
{ value: 'Imperial', label: 'Imperial' },
];
const fontOptions = [
{ value: "'Poppins', sans-serif", label: 'Poppins' },
{ value: "'Inconsolata', monospace", label: 'Inconsolata' },
{ value: "'Merriweather', serif", label: 'Merriweather' },
{ value: "'Noto Sans', sans-serif", label: 'Noto Sans' },
{ value: "'Noto Serif', serif", label: 'Noto Serif' },
{ value: "'Playfair Display', serif", label: 'Playfair Display' },
{ value: "'Roboto', sans-serif", label: 'Roboto' },
{ value: "'Ubuntu', sans-serif", label: 'Ubuntu' },
{ value: "'Bangers', cursive", label: 'Bangers' },
{ value: "'Caveat', cursive", label: 'Caveat' },
{ value: "'Frederika the Great', cursive", label: 'Frederika the Great' },
{ value: "'Rock Salt', cursive", label: 'Rock Salt' },
{ value: "'Sofadi One', sans-serif", label: 'Sofadi One' },
{ value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
];
const handleLogout = () => {
setIsLoggedIn(false);
localStorage.removeItem('accountName');
@ -265,98 +378,47 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<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>
<DropdownSetting
label="Preferred Language"
value={preferredLanguage}
setValue={setPreferredLanguage}
options={languageOptions.map(lang => ({ value: lang.code, label: lang.name }))} // Convert to Option format
/>
<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>
<DropdownSetting
label="Preferred Currency"
value={preferredCurrency}
setValue={setPreferredCurrency}
options={currencyOptions.map(currency => ({ value: currency.code, label: currency.name }))} // Convert to Option format
/>
<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>
<DropdownSetting
label="Date Format"
value={dateFormat}
setValue={setDateFormat}
options={dateFormatOptions} // Already in correct format
/>
<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>
<DropdownSetting
label="Time Format"
value={timeFormat}
setValue={setTimeFormat}
options={timeFormatOptions} // Already in correct format
/>
<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>
<DropdownSetting
label="Time Zone"
value={timeZone}
setValue={setTimeZone}
options={timeZoneOptions} // Now in correct format
/>
{/* 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>
<DropdownSetting
label="Preferred Measurement"
value={preferredMeasurement}
setValue={setPreferredMeasurement}
options={measurementOptions} // Already in correct format
/>
</div>
);
@ -364,63 +426,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return (
<div className="settings-section">
<h2>Privacy Settings</h2>
{/* AI Mode Radio Options */}
<div className="settings-option">
<p>Disable Options:</p>
<div className="slider">
{/* Offline */}
<div
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
>
Offline tools{openSourceMode ? ' (FOSS)' : ''}
</div>
{/* Online */}
<div
className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
onClick={() => handleRadioChange('Online')}
>
Online tools{openSourceMode ? ' (FOSS)' : ''}
</div>
<PrivacySettings
selectedOption={selectedOption}
handleRadioChange={handleRadioChange}
openSourceMode={openSourceMode}
/>
{/* None */}
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
onClick={() => handleRadioChange('None')}
>
None{openSourceMode ? ' (FOSS)' : ''}
</div>
</div>
<br />
<p>
After changing the preferred settings, please reload the website so it can update itself properly.
</p>
</div>
{/* Disable Chat History Checkbox */}
<div className="settings-option">
<label>
<input
type="checkbox"
checked={disableChatHistory}
onChange={() => setDisableChatHistory(!disableChatHistory)}
/>
Disable Chat History
</label>
</div>
{/* Disable AI Memory Checkbox */}
<div className="settings-option">
<label>
<input
type="checkbox"
checked={disableAIMemory}
onChange={() => setDisableAIMemory(!disableAIMemory)}
/>
Disable AI Memory
</label>
</div>
<CheckboxSetting
label="Disable Chat History"
checked={disableChatHistory}
setChecked={setDisableChatHistory}
/>
<CheckboxSetting
label="Disable AI Memory"
checked={disableAIMemory}
setChecked={setDisableAIMemory}
/>
</div>
);
@ -430,234 +452,38 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<div className="settings-section">
<h2>Theme Settings</h2>
{/* Dropdown to select theme */}
<div className="settings-option">
<p>Select Theme</p>
<select
value={selectedTheme}
onChange={(e) => {
const theme = e.target.value;
if (theme !== "default") {
setSelectedTheme(theme);
localStorage.setItem("selectedTheme", theme);
<ThemeDropdown
selectedTheme={selectedTheme}
setSelectedTheme={setSelectedTheme}
/>
// Apply the appropriate theme based on selection
applyTheme(theme);
}
}}
>
<option value="default">Select your style...</option>
<option value="IOMARKET">IOMARKET</option>
<option value="WHITE">WHITE</option>
<option value="BLACK">BLACK</option>
<option value="CUSTOM">CUSTOM</option>
</select>
</div>
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
{selectedTheme === 'CUSTOM' && (
<>
{/* Font Size */}
<div className="settings-option">
<p>Font Size</p>
<input
type="range"
min="12"
max="30"
value={parseInt(fontSize, 10)} // Ensure value is a number
onChange={(e) => {
const newSize = `${e.target.value}px`;
setFontSize(newSize);
document.documentElement.style.setProperty('--font-size', newSize);
}}
<FontSizeSetting
fontSize={fontSize}
setFontSize={setFontSize}
/>
{colorSettings.map((setting) => (
<ColorSetting
key={setting.cssVariable}
name={setting.name}
value={setting.value}
setValue={setting.setValue}
cssVariable={setting.cssVariable}
/>
<span>{fontSize}</span>
</div>
))}
<ColorSetting
name="Background Color"
value={backgroundColor}
setValue={setBackgroundColor}
cssVariable="--background-color"
<DropdownSetting
label="Font Family"
value={fontFamily}
setValue={(newFont) => {
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
options={fontOptions}
/>
<ColorSetting
name="Text Color"
value={textColor}
setValue={setTextColor}
cssVariable="--text-color"
/>
<ColorSetting
name="Input Background Color"
value={inputBackgroundColor}
setValue={setInputBackgroundColor}
cssVariable="--input-background-color"
/>
<ColorSetting
name="Input Button Color"
value={inputButtonColor}
setValue={setInputButtonColor}
cssVariable="--input-button-color"
/>
<ColorSetting
name="Input Button Hover Color"
value={inputButtonHoverColor}
setValue={setInputButtonHoverColor}
cssVariable="--input-button-hover-color"
/>
<ColorSetting
name="User Message Background Color"
value={userMessageBackgroundColor}
setValue={setUserMessageBackgroundColor}
cssVariable="--user-message-background-color"
/>
<ColorSetting
name="User Message Text Color"
value={userMessageTextColor}
setValue={setUserMessageTextColor}
cssVariable="--user-message-text-color"
/>
<ColorSetting
name="AI Message Background Color"
value={aiMessageBackgroundColor}
setValue={setAiMessageBackgroundColor}
cssVariable="--ai-message-background-color"
/>
<ColorSetting
name="AI Message Text Color"
value={aiMessageTextColor}
setValue={setAiMessageTextColor}
cssVariable="--ai-message-text-color"
/>
<ColorSetting
name="Button Background Color"
value={buttonBackgroundColor}
setValue={setButtonBackgroundColor}
cssVariable="--button-background-color"
/>
<ColorSetting
name="Button Hover Background Color"
value={buttonHoverBackgroundColor}
setValue={setButtonHoverBackgroundColor}
cssVariable="--button-hover-background-color"
/>
<ColorSetting
name="Models Background Color"
value={modelsBackgroundColor}
setValue={setModelsBackgroundColor}
cssVariable="--models-background-color"
/>
<ColorSetting
name="History Background Color"
value={historyBackgroundColor}
setValue={setHistoryBackgroundColor}
cssVariable="--history-background-color"
/>
<ColorSetting
name="Left Panel Background Color"
value={leftPanelBackgroundColor}
setValue={setLeftPanelBackgroundColor}
cssVariable="--left-panel-background-color"
/>
<ColorSetting
name="Conversation Background Color"
value={conversationBackgroundColor}
setValue={setConversationBackgroundColor}
cssVariable="--conversation-background-color"
/>
<ColorSetting
name="Pop-up Text Color"
value={popUpTextColor}
setValue={setPopUpTextColor}
cssVariable="--pop-up-text"
/>
<ColorSetting
name="Input Border Color"
value={inputBorderColor}
setValue={setInputBorderColor}
cssVariable="--input-border-color"
/>
<ColorSetting
name="FAQ Background Color"
value={faqBackgroundColor}
setValue={setFaqBackgroundColor}
cssVariable="--faq-background-color"
/>
<ColorSetting
name="FAQ Heading Color"
value={faqHeadingColor}
setValue={setFaqHeadingColor}
cssVariable="--faq-heading-color"
/>
<ColorSetting
name="FAQ Item Background Color"
value={faqItemBackgroundColor}
setValue={setFaqItemBackgroundColor}
cssVariable="--faq-item-background-color"
/>
<ColorSetting
name="FAQ Item Heading Color"
value={faqItemHeadingColor}
setValue={setFaqItemHeadingColor}
cssVariable="--faq-item-heading-color"
/>
<ColorSetting
name="FAQ Item Text Color"
value={faqItemTextColor}
setValue={setFaqItemTextColor}
cssVariable="--faq-item-text-color"
/>
<ColorSetting
name="FAQ Item Hover Background Color"
value={faqItemHoverBackgroundColor}
setValue={setFaqItemHoverBackgroundColor}
cssVariable="--faq-item-hover-background-color"
/>
<ColorSetting
name="Popup Background Color"
value={popupBackgroundColor}
setValue={setPopupBackgroundColor}
cssVariable="--popup-background-color"
/>
<ColorSetting
name="Overlay Text Color"
value={overlayTextColor}
setValue={setOverlayTextColor}
cssVariable="--overlay-text-color"
/>
<div className="settings-option">
<p>Font Family</p>
<select
value={fontFamily}
onChange={(e) => {
const newFont = e.target.value;
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
>
<option value="'Poppins', sans-serif">Poppins</option>
<option value="'Inconsolata', monospace">Inconsolata</option>
<option value="'Merriweather', serif">Merriweather</option>
<option value="'Noto Sans', sans-serif">Noto Sans</option>
<option value="'Noto Serif', serif">Noto Serif</option>
<option value="'Playfair Display', serif">Playfair Display</option>
<option value="'Roboto', sans-serif">Roboto</option>
<option value="'Ubuntu', sans-serif">Ubuntu</option>
<option value="'Bangers', cursive">Bangers</option>
<option value="'Caveat', cursive">Caveat</option>
<option value="'Frederika the Great', cursive">Frederika the Great</option>
<option value="'Rock Salt', cursive">Rock Salt</option>
<option value="'Sofadi One', sans-serif">Sofadi One</option>
<option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
</select>
</div>
</>
)}
</div>
@ -668,25 +494,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return (
<div className="settings-section">
<h2>Open Source Settings</h2>
<div className="settings-option">
<label>
<input
type="checkbox"
checked={openSourceMode}
onChange={() => {
const newValue = !openSourceMode;
setOpenSourceMode(newValue);
// Update radio selection based on the new openSourceMode value
if (newValue) {
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
} else {
setSelectedOption('None'); // Or any other default value when disabling
}
}}
/>
Enable Open Source Mode
</label>
</div>
<OpenSourceModeToggle
openSourceMode={openSourceMode}
setOpenSourceMode={setOpenSourceMode}
setSelectedOption={setSelectedOption}
/>
</div>
);
@ -695,100 +507,75 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
return (
<div className="settings-section">
<h2>Account Settings</h2>
<div className="settings-option">
<label>New Name</label>
<input
type="text"
<TextSettings
label="New Name"
value={newName}
onChange={(e) => setNewName(e.target.value)}
type='text'
setValue={setNewName}
/>
</div>
<div className="settings-option">
<label>New Email</label>
<input
type="email"
<TextSettings
label="New Email"
value={newEmail}
onChange={(e) => setNewEmail(e.target.value)}
setValue={setNewEmail}
type="email" // Input type is email
/>
</div>
<div className="settings-option">
<label>New Password</label>
<input
type="password"
<TextSettings
label="New Password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
setValue={setNewPassword}
type="password" // Input type is password
/>
</div>
<div className="settings-option">
<label>Current Password</label>
<input
type="password"
<TextSettings
label="Current Password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
setValue={setCurrentPassword}
type="password" // Input type is password
/>
<ButtonSetting
label="Log Out" // Button label
onClick={handleLogout} // Function to call on click
className="update-credentials-button" // Custom styling class
/>
<ButtonSetting
label="Update Credentials" // Button label
onClick={handleUpdateCredentials} // Function to call on click
className="update-credentials-button" // Custom styling class
/>
<ButtonSetting
label="Delete Account" // Button label
onClick={handleDeleteAccount} // Function to call on click
className="delete-account-button" // Custom styling class
/>
</div>
<div className="settings-option">
<button
onClick={handleLogout} // Update all credentials
className="update-credentials-button"
>
Log Out
</button>
</div>
<div className="settings-option">
<button
onClick={handleUpdateCredentials} // Update all credentials
className="update-credentials-button"
>
Update Credentials
</button>
</div>
<div className="settings-option">
<button
onClick={handleDeleteAccount} // Delete account
className="delete-account-button"
>
Delete Account
</button>
</div>
</div>
);
case 'api':
return (
<div className="settings-section">
<div className="settings-option">
<label>La Plateforme</label>
<input
type="text"
value={mistral}
onChange={(e) => setmistral(e.target.value)}
<TextSettings
label="La Plateforme" // Label for the input
value={mistral} // State variable for the input
setValue={setMistral} // State updater function
type="text" // Input type
/>
</div>
<div className="settings-option">
<label>OpenAI</label>
<input
type="text"
value={openai}
onChange={(e) => setopenai(e.target.value)}
<TextSettings
label="OpenAI" // Label for the input
value={openai} // State variable for the input
setValue={setOpenai} // State updater function
type="text" // Input type
/>
</div>
<div className="settings-option">
<label>Anthropic</label>
<input
type="text"
value={anthropic}
onChange={(e) => setAnthropic(e.target.value)}
<TextSettings
label="Anthropic" // Label for the input
value={anthropic} // State variable for the input
setValue={setAnthropic} // State updater function
type="text" // Input type
/>
</div>
<div className="settings-option">
<label>Google</label>
<input
type="text"
value={google}
onChange={(e) => setGoogle(e.target.value)}
<TextSettings
label="Google" // Label for the input
value={google} // State variable for the input
setValue={setGoogle} // State updater function
type="text" // Input type
/>
</div>
</div>
);
@ -804,7 +591,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<h3>Import the settings</h3>
<input type="file" onChange={handleImport} accept=".json" className='import-file'/>
</div>
</div>
</div>
);
default:
@ -820,8 +607,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}
};
// Gather all settings into an object
// Gather current settings into an object
const currentSettings = {
...settings.userPreferences,
...settings.theme,

28
app/components/settings/TextSettings.tsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
interface TextSettingProps {
label: string; // The label to display
value: string; // The current text value
setValue: (newText: string) => void; // The method to update the state
type: 'text' | 'email' | 'password'; // The type of input field
}
const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newText = e.target.value; // Get the new value from the input
setValue(newText); // Update the state in the parent component
};
return (
<div className="settings-option">
<label>{label}</label>
<input
type={type} // Use the type prop for the input
value={value} // Set the current value
onChange={handleTextChange} // Handle input changes
/>
</div>
);
};
export default TextSetting;