React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

MY brain is fried and fired || Patrick helped me on the drpodown issues --> none left for the moment

Browse source
This commit is contained in:
sageTheDM 2024-09-27 14:56:46 +02:00
parent 7e85c36ba8
commit 5dd5b939df
4 changed files with 130 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

71
app/components/Settings.tsx
View file

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
import { getAllLocalStorageItems } from '../backend/GetLocalStorage';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@ -196,6 +197,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const handleRadioChange = (newValue: string) => {
setSelectedOption(newValue); // Update the state with the selected option
if (openSourceMode){
newValue += " (FOSS)"
}
localStorage.setItem('radioSelection', newValue); // Save the selection for persistence
};
@ -415,34 +419,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{/* AI Mode Radio Options */}
<div className="settings-option">
<p>Disable Options:</p>
<div className="slider">
<div
className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('Offline')} // Handle selection only if not in open source mode
>
Offline tools
</div>
<div
className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('AI Online')}
>
Online tools
</div>
<div
className={`slider-option ${selectedOption === 'None' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
onClick={() => !openSourceMode && handleRadioChange('None')}
>
None
</div>
</div>
<br />
{openSourceMode && (
<p style={{ color: 'grey' }}>These options are deactivated because you are in FOSS mode.</p>
)}
<p>
After changing the preferred settings, please reload the website so it can update itself properly.
</p>
</div>
<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>
{/* Disable Chat History Checkbox */}
<div className="settings-option">
@ -814,10 +820,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
// Update radio selection based on the new openSourceMode value
if (newValue) {
setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
localStorage.setItem('radioSelection', 'FOSS'); // Update localStorage
} else {
setSelectedOption('None'); // Or any other default value when disabling
localStorage.setItem('radioSelection', 'None'); // Update localStorage
}
}}
/>
@ -995,6 +999,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<h2>Settings for {accountName}</h2>
{renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={() => {
applySettings;
getAllLocalStorageItems();
closeSettings(); // This is invoked when the button is clicked
}}>
Apply
</button>
</div>
</div>
</div>