forked from React-Group/interstellar_ai
Setting changes
This commit is contained in:
parent
4984f285d6
commit
7c67a5fec8
6 changed files with 172 additions and 85 deletions
|
|
@ -15,8 +15,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
const [newName, setNewName] = useState('');
|
const [newName, setNewName] = useState('');
|
||||||
const [newEmail, setNewEmail] = useState('');
|
const [newEmail, setNewEmail] = useState('');
|
||||||
const [newPassword, setNewPassword] = useState('');
|
const [newPassword, setNewPassword] = useState('');
|
||||||
|
const [preferredMessurement, setPreferredMessurement] = useState('Metric');
|
||||||
|
|
||||||
// Theme settings state
|
// Theme settings state
|
||||||
const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
|
const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
|
||||||
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
|
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
|
||||||
const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
|
const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
|
||||||
|
|
@ -37,9 +38,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
|
const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
|
||||||
const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
|
const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
|
||||||
|
|
||||||
// Theme selection
|
// Theme selection
|
||||||
const [selectedTheme, setSelectedTheme] = useState<string>('default');
|
const [selectedTheme, setSelectedTheme] = useState<string>('default');
|
||||||
|
|
||||||
|
// API Keys
|
||||||
|
const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
|
||||||
|
const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
|
||||||
|
const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
|
||||||
|
const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
|
||||||
|
|
||||||
// Apply imported settings to the CSS variables
|
// Apply imported settings to the CSS variables
|
||||||
const applySettings = (settings: any) => {
|
const applySettings = (settings: any) => {
|
||||||
if (settings.backgroundColor) {
|
if (settings.backgroundColor) {
|
||||||
|
|
@ -147,85 +154,102 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
case 'general':
|
case 'general':
|
||||||
return (
|
return (
|
||||||
<div className="settings-section">
|
<div className="settings-section">
|
||||||
<h2>General Settings</h2>
|
<h2>General Settings</h2>
|
||||||
<div className="settings-option">
|
|
||||||
<label>Preferred Language</label>
|
<div className="settings-option">
|
||||||
<select
|
<label>Preferred Language</label>
|
||||||
value={preferredLanguage}
|
<select
|
||||||
onChange={(e) => setPreferredLanguage(e.target.value)}
|
value={preferredLanguage}
|
||||||
>
|
onChange={(e) => setPreferredLanguage(e.target.value)}
|
||||||
<option value="en">English</option>
|
>
|
||||||
<option value="es">Spanish</option>
|
<option value="en">English</option>
|
||||||
<option value="fr">French</option>
|
<option value="es">Spanish</option>
|
||||||
<option value="de">German</option>
|
<option value="fr">French</option>
|
||||||
<option value="it">Italian</option>
|
<option value="de">German</option>
|
||||||
<option value="pt">Portuguese</option>
|
<option value="it">Italian</option>
|
||||||
<option value="zh">Chinese</option>
|
<option value="pt">Portuguese</option>
|
||||||
<option value="ja">Japanese</option>
|
<option value="zh">Chinese</option>
|
||||||
<option value="ru">Russian</option>
|
<option value="ja">Japanese</option>
|
||||||
<option value="ar">Arabic</option>
|
<option value="ru">Russian</option>
|
||||||
</select>
|
<option value="ar">Arabic</option>
|
||||||
</div>
|
</select>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
|
<div className="settings-option">
|
||||||
|
<label>Preferred Currency</label>
|
||||||
|
<select
|
||||||
|
value={preferredCurrency}
|
||||||
|
onChange={(e) => setPreferredCurrency(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="usd">USD</option>
|
||||||
|
<option value="eur">EUR</option>
|
||||||
|
<option value="gbp">GBP</option>
|
||||||
|
<option value="jpy">JPY</option>
|
||||||
|
<option value="cad">CAD</option>
|
||||||
|
<option value="aud">AUD</option>
|
||||||
|
<option value="chf">CHF</option>
|
||||||
|
<option value="cny">CNY</option>
|
||||||
|
<option value="inr">INR</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="settings-option">
|
||||||
|
<label>Date Format</label>
|
||||||
|
<select
|
||||||
|
value={dateFormat}
|
||||||
|
onChange={(e) => setDateFormat(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
|
||||||
|
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
|
||||||
|
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
|
||||||
|
<option value="mm-dd-yyyy">MM-DD-YYYY</option>
|
||||||
|
<option value="dd-mm-yyyy">DD-MM-YYYY</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="settings-option">
|
||||||
|
<label>Time Format</label>
|
||||||
|
<select
|
||||||
|
value={timeFormat}
|
||||||
|
onChange={(e) => setTimeFormat(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="12-hour">12 Hour</option>
|
||||||
|
<option value="24-hour">24 Hour</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="settings-option">
|
||||||
|
<label>Time Zone</label>
|
||||||
|
<select
|
||||||
|
value={timeZone}
|
||||||
|
onChange={(e) => setTimeZone(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="GMT">GMT</option>
|
||||||
|
<option value="EST">EST</option>
|
||||||
|
<option value="CST">CST</option>
|
||||||
|
<option value="MST">MST</option>
|
||||||
|
<option value="PST">PST</option>
|
||||||
|
<option value="UTC">UTC</option>
|
||||||
|
<option value="BST">BST</option>
|
||||||
|
<option value="IST">IST</option>
|
||||||
|
<option value="CET">CET</option>
|
||||||
|
<option value="JST">JST</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* New Preferred Measurement Option */}
|
||||||
|
<div className="settings-option">
|
||||||
|
<label>Preferred Measurement</label>
|
||||||
|
<select
|
||||||
|
value={preferredMessurement}
|
||||||
|
onChange={(e) => setPreferredMessurement(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="Metric">Metric</option>
|
||||||
|
<option value="Imperial">Imperial</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
case 'privacy':
|
case 'privacy':
|
||||||
return (
|
return (
|
||||||
|
|
@ -697,17 +721,55 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
</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':
|
case 'im/export':
|
||||||
return (
|
return (
|
||||||
<div className="settings-section">
|
<div className="settings-section">
|
||||||
<h2>Import & Export</h2>
|
<h2>Import & Export</h2>
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<h3>Export the settings</h3>
|
<h3>Export the settings</h3>
|
||||||
<button onClick={() => exportSettings(currentSettings)}>Export Settings</button>
|
<button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<h3>Import the settings</h3>
|
<h3>Import the settings</h3>
|
||||||
<input type="file" onChange={handleImport} accept=".json" />
|
<input type="file" onChange={handleImport} accept=".json" className='import-file'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -748,6 +810,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
fontSize,
|
fontSize,
|
||||||
preferredLanguage,
|
preferredLanguage,
|
||||||
preferredCurrency,
|
preferredCurrency,
|
||||||
|
preferredMessurement,
|
||||||
dateFormat,
|
dateFormat,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
timeZone,
|
timeZone,
|
||||||
|
|
@ -755,7 +818,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
disableChatHistory,
|
disableChatHistory,
|
||||||
disableAIMemory,
|
disableAIMemory,
|
||||||
openSourceMode,
|
openSourceMode,
|
||||||
};
|
|
||||||
|
// API Keys
|
||||||
|
laPlateforme,
|
||||||
|
openAI,
|
||||||
|
anthropic,
|
||||||
|
google
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="popup-overlay">
|
<div className="popup-overlay">
|
||||||
|
|
@ -768,6 +838,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
||||||
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
<li onClick={() => setActiveSection('foss')}>FOSS</li>
|
||||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
<li onClick={() => setActiveSection('account')}>Account</li>
|
||||||
|
<li onClick={() => setActiveSection('api')}>API Keys</li>
|
||||||
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
|
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
1
app/components/json/black.json
Normal file
1
app/components/json/black.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
|
||||||
1
app/components/json/iomarket.json
Normal file
1
app/components/json/iomarket.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
|
||||||
1
app/components/json/white.json
Normal file
1
app/components/json/white.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
|
||||||
|
|
@ -147,3 +147,16 @@
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.export-button{
|
||||||
|
background-color: var(--button-hover-background-color);
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-file{
|
||||||
|
background-color: var(--button-hover-background-color);
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
from flask import Flask, request, jsonify
|
from flask import Flask, request, jsonify
|
||||||
from flask_cors import CORS
|
from flask_cors import CORS
|
||||||
import secrets
|
import secrets
|
||||||
import threading
|
import threading
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue