ahhhhhhhhhhhh #92
4 changed files with 153 additions and 125 deletions
|
|
@ -23,7 +23,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
const [timeZone, setTimeZone] = useState<string>("GMT");
|
||||
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true');
|
||||
const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
|
||||
|
||||
// Fetch local storage values and update state on component mount
|
||||
useEffect(() => {
|
||||
|
|
@ -50,7 +50,6 @@ const InputOutputBackend: React.FC = () => {
|
|||
You are only able to change language if the user specifically states you must.
|
||||
Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.`
|
||||
: "You are a helpful assistant";
|
||||
|
||||
setMessages([
|
||||
{ role: "system", content: systemMessage },
|
||||
{ role: "assistant", content: "Hello! How may I help you?" },
|
||||
|
|
|
|||
|
|
@ -652,71 +652,87 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
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>
|
||||
<h2>Import & Export</h2>
|
||||
<div className="settings-option">
|
||||
<h3>Export the settings</h3>
|
||||
<button onClick={handleExport} 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, applyCustomTheme);
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const fileContent = e.target?.result as string;
|
||||
importSettings(fileContent); // Call the importSettings function with the file content
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
|
||||
const currentSettings = {
|
||||
...settings.userPreferences,
|
||||
...settings.theme,
|
||||
...settings.theme.faqSettings,
|
||||
...settings.theme.popupSettings,
|
||||
...settings.apiKeys,
|
||||
...settings.generalSettings,
|
||||
const handleExport = () => {
|
||||
const settingsData = exportSettings();
|
||||
|
||||
// Create a blob and download the exported settings
|
||||
const blob = new Blob([settingsData], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'settings.json';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url); // Clean up the URL object
|
||||
};
|
||||
|
||||
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>
|
||||
<button className="apply" onClick={async () => {
|
||||
getAllLocalStorageItems();
|
||||
closeSettings();
|
||||
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
|
||||
window.location.reload();
|
||||
}}>
|
||||
Apply
|
||||
</button>
|
||||
<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>
|
||||
<button className="apply" onClick={async () => {
|
||||
getAllLocalStorageItems();
|
||||
closeSettings();
|
||||
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
|
||||
window.location.reload();
|
||||
}}>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,36 @@
|
|||
// settingsUtils.ts
|
||||
// settingsManager.ts
|
||||
|
||||
// Export the current settings as a JSON file
|
||||
export const exportSettings = (settings: any) => {
|
||||
const blob = new Blob([JSON.stringify(settings)], { type: 'application/json' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'settings.json';
|
||||
link.click();
|
||||
};
|
||||
// Method to export localStorage to a JSON object
|
||||
export function exportSettings(): string {
|
||||
const settings: { [key: string]: any } = {};
|
||||
|
||||
// Import settings from a JSON file
|
||||
export const importSettings = (file: File, applySettings: (settings: any) => void) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string;
|
||||
const importedSettings = JSON.parse(content);
|
||||
applySettings(importedSettings);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
// Loop through all keys in localStorage and add them to the settings object
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
if (key) {
|
||||
settings[key] = localStorage.getItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
// Convert settings object to JSON string
|
||||
return JSON.stringify(settings, null, 2);
|
||||
}
|
||||
|
||||
// Method to import settings from a JSON object, clearing old localStorage
|
||||
export function importSettings(jsonData: string): void {
|
||||
try {
|
||||
const parsedSettings = JSON.parse(jsonData);
|
||||
|
||||
// Clear the current localStorage
|
||||
localStorage.clear();
|
||||
|
||||
// Loop through parsed settings and save them in localStorage
|
||||
Object.keys(parsedSettings).forEach((key) => {
|
||||
localStorage.setItem(key, parsedSettings[key]);
|
||||
});
|
||||
|
||||
console.log("Settings imported successfully!");
|
||||
} catch (error) {
|
||||
console.error("Invalid JSON data:", error);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
104
app/page.tsx
104
app/page.tsx
|
|
@ -7,35 +7,34 @@ import Documentation from './components/Documentation'; // Ensure the import pat
|
|||
import History from './components/History';
|
||||
import Models from './components/Models';
|
||||
import Credits from './components/Credits';
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
|
||||
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme';
|
||||
import './styles/master.css';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
const [showDivs, setShowDivs] = useState(true);
|
||||
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
|
||||
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
|
||||
const conversationRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
|
||||
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
|
||||
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
|
||||
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
||||
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||
|
||||
useEffect(()=>{
|
||||
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
|
||||
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
|
||||
setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
|
||||
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
|
||||
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
|
||||
})
|
||||
|
||||
// Synchronize state with local storage on mount
|
||||
useEffect(() => {
|
||||
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
|
||||
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
|
||||
setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
|
||||
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
||||
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
|
||||
}, []);
|
||||
|
||||
const toggleDivs = () => {
|
||||
setShowDivs(prevState => !prevState);
|
||||
};
|
||||
|
||||
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
|
||||
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
|
||||
setView(view);
|
||||
if (view !== 'AI') {
|
||||
setShowDivs(false);
|
||||
|
|
@ -44,49 +43,49 @@ const LandingPage: React.FC = () => {
|
|||
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('selectedTheme');
|
||||
if (savedTheme) {
|
||||
setSelectedTheme(savedTheme);
|
||||
// Apply the saved theme on initial load
|
||||
switch (savedTheme) {
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
case 'BASIC-CUSTOM':
|
||||
applyBasicCustomTheme(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
accentColor,
|
||||
basicBackgroundColor,
|
||||
basicTextColor
|
||||
);
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
// Apply theme based on selectedTheme and color settings
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('selectedTheme');
|
||||
if (savedTheme) {
|
||||
setSelectedTheme(savedTheme);
|
||||
switch (savedTheme) {
|
||||
case 'IOMARKET':
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
case 'WHITE':
|
||||
applyWhiteTheme();
|
||||
break;
|
||||
case 'BLACK':
|
||||
applyBlackTheme();
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
applyCustomTheme();
|
||||
break;
|
||||
case 'BASIC-CUSTOM':
|
||||
applyBasicCustomTheme(
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
accentColor,
|
||||
basicBackgroundColor,
|
||||
basicTextColor
|
||||
);
|
||||
break;
|
||||
default:
|
||||
applyIOMarketTheme();
|
||||
break;
|
||||
}
|
||||
}, []); // Runs only once when the component mounts
|
||||
}
|
||||
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
toggleDivs={toggleDivs}
|
||||
showDivs={showDivs}
|
||||
onViewChange={handleViewChange}
|
||||
showHistoryModelsToggle={true}
|
||||
showToggle={view === 'AI'} // Pass the condition here
|
||||
/>
|
||||
<Header
|
||||
toggleDivs={toggleDivs}
|
||||
showDivs={showDivs}
|
||||
onViewChange={handleViewChange}
|
||||
showHistoryModelsToggle={true}
|
||||
showToggle={view === 'AI'}
|
||||
/>
|
||||
<div className="container">
|
||||
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
|
||||
{showDivs && (
|
||||
|
|
@ -100,7 +99,7 @@ const LandingPage: React.FC = () => {
|
|||
{view === 'AI' && <AI />}
|
||||
{view === 'FAQ' && <FAQ />}
|
||||
{view === 'Documentation' && <Documentation />}
|
||||
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
|
||||
{view === 'Credits' && <Credits />}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -108,3 +107,4 @@ const LandingPage: React.FC = () => {
|
|||
};
|
||||
|
||||
export default LandingPage;
|
||||
|
||||
Loading…
Reference in a new issue