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

ahhhhhhhhhhhh #92

Merged
Patrick_Pluto merged 3 commits from sageTheDm/interstellar_ai:main into main 2024-10-03 11:17:46 +02:00
Conversation 0 Commits 3 Files changed 4 +153 -125
4 changed files with 153 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/backend/InputOutputHandler.tsx
View file

@ -23,7 +23,7 @@ const InputOutputBackend: React.FC = () => {
const [timeZone, setTimeZone] = useState<string>("GMT"); const [timeZone, setTimeZone] = useState<string>("GMT");
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY"); const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
const [messages, setMessages] = useState<Message[]>([]); 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 // Fetch local storage values and update state on component mount
useEffect(() => { useEffect(() => {
@ -50,7 +50,6 @@ const InputOutputBackend: React.FC = () => {
You are only able to change language if the user specifically states you must. 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.` Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.`
: "You are a helpful assistant"; : "You are a helpful assistant";
setMessages([ setMessages([
{ role: "system", content: systemMessage }, { role: "system", content: systemMessage },
{ role: "assistant", content: "Hello! How may I help you?" }, { role: "assistant", content: "Hello! How may I help you?" },

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

@ -652,71 +652,87 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
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)} className='export-button'>Export Settings</button> <button onClick={handleExport} className="export-button">
</div> Export Settings
<div className="settings-option"> </button>
<h3>Import the settings</h3>
<input type="file" onChange={handleImport} accept=".json" className='import-file' />
</div>
</div> </div>
); <div className="settings-option">
<h3>Import the settings</h3>
<input
type="file"
onChange={handleImport}
accept=".json"
className="import-file"
/>
</div>
</div>
);
default: default:
return null; return null;
} }
}; };
// Handle file import
const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => { const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) { const file = event.target.files?.[0];
const file = event.target.files[0]; if (file) {
importSettings(file, applyCustomTheme); 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 = { const handleExport = () => {
...settings.userPreferences, const settingsData = exportSettings();
...settings.theme,
...settings.theme.faqSettings, // Create a blob and download the exported settings
...settings.theme.popupSettings, const blob = new Blob([settingsData], { type: 'application/json' });
...settings.apiKeys, const url = URL.createObjectURL(blob);
...settings.generalSettings, 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 ( return (
<div className="popup-overlay"> <div className="popup-overlay">
<div className="settings-content"> <div className="settings-content">
<div className="settings-container"> <div className="settings-container">
<div className="sidebar"> <div className="sidebar">
<ul> <ul>
<li onClick={() => setActiveSection('general')}>General</li> <li onClick={() => setActiveSection('general')}>General</li>
<li onClick={() => setActiveSection('privacy')}>Privacy</li> <li onClick={() => setActiveSection('privacy')}>Privacy</li>
<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('api')}>API Keys</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li> <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul> </ul>
</div> </div>
<div className="settings-main"> <div className="settings-main">
<h2>Settings for {accountName}</h2> <h2>Settings for {accountName}</h2>
{renderSettingsContent()} {renderSettingsContent()}
<button className="close-popup" onClick={closeSettings}>Close</button> <button className="close-popup" onClick={closeSettings}>Close</button>
<button className="apply" onClick={async () => { <button className="apply" onClick={async () => {
getAllLocalStorageItems(); getAllLocalStorageItems();
closeSettings(); closeSettings();
await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ???? await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
window.location.reload(); window.location.reload();
}}> }}>
Apply Apply
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };

51
app/components/settings/settingUtils.ts
View file

@ -1,23 +1,36 @@
// settingsUtils.ts // settingsManager.ts
// Export the current settings as a JSON file // Method to export localStorage to a JSON object
export const exportSettings = (settings: any) => { export function exportSettings(): string {
const blob = new Blob([JSON.stringify(settings)], { type: 'application/json' }); const settings: { [key: string]: any } = {};
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'settings.json';
link.click();
};
// Import settings from a JSON file // Loop through all keys in localStorage and add them to the settings object
export const importSettings = (file: File, applySettings: (settings: any) => void) => { for (let i = 0; i < localStorage.length; i++) {
const reader = new FileReader(); const key = localStorage.key(i);
reader.onload = (e) => { if (key) {
const content = e.target?.result as string; settings[key] = localStorage.getItem(key);
const importedSettings = JSON.parse(content); }
applySettings(importedSettings); }
};
reader.readAsText(file);
};
// 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
View file

@ -7,35 +7,34 @@ import Documentation from './components/Documentation'; // Ensure the import pat
import History from './components/History'; import History from './components/History';
import Models from './components/Models'; import Models from './components/Models';
import Credits from './components/Credits'; 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'; import './styles/master.css';
const LandingPage: React.FC = () => { const LandingPage: React.FC = () => {
const [showDivs, setShowDivs] = useState(true); 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 conversationRef = useRef<HTMLDivElement>(null);
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
useEffect(()=>{ // Synchronize state with local storage on mount
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe") useEffect(() => {
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe") setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
setAccentColor(localStorage.getItem("accentColor") || "#fefefe") setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe") setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe") setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
}) setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
}, []);
const toggleDivs = () => { const toggleDivs = () => {
setShowDivs(prevState => !prevState); setShowDivs(prevState => !prevState);
}; };
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
setView(view); setView(view);
if (view !== 'AI') { if (view !== 'AI') {
setShowDivs(false); setShowDivs(false);
@ -44,49 +43,49 @@ const LandingPage: React.FC = () => {
const [selectedTheme, setSelectedTheme] = useState<string>(''); const [selectedTheme, setSelectedTheme] = useState<string>('');
useEffect(() => { // Apply theme based on selectedTheme and color settings
const savedTheme = localStorage.getItem('selectedTheme'); useEffect(() => {
if (savedTheme) { const savedTheme = localStorage.getItem('selectedTheme');
setSelectedTheme(savedTheme); if (savedTheme) {
// Apply the saved theme on initial load setSelectedTheme(savedTheme);
switch (savedTheme) { switch (savedTheme) {
case 'IOMARKET': case 'IOMARKET':
applyIOMarketTheme(); applyIOMarketTheme();
break; break;
case 'WHITE': case 'WHITE':
applyWhiteTheme(); applyWhiteTheme();
break; break;
case 'BLACK': case 'BLACK':
applyBlackTheme(); applyBlackTheme();
break; break;
case 'CUSTOM': case 'CUSTOM':
applyCustomTheme(); applyCustomTheme();
break; break;
case 'BASIC-CUSTOM': case 'BASIC-CUSTOM':
applyBasicCustomTheme( applyBasicCustomTheme(
primaryColor, primaryColor,
secondaryColor, secondaryColor,
accentColor, accentColor,
basicBackgroundColor, basicBackgroundColor,
basicTextColor basicTextColor
); );
break; break;
default: default:
applyIOMarketTheme(); applyIOMarketTheme();
break; break;
}
} }
}, []); // Runs only once when the component mounts }
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
return ( return (
<> <>
<Header <Header
toggleDivs={toggleDivs} toggleDivs={toggleDivs}
showDivs={showDivs} showDivs={showDivs}
onViewChange={handleViewChange} onViewChange={handleViewChange}
showHistoryModelsToggle={true} showHistoryModelsToggle={true}
showToggle={view === 'AI'} // Pass the condition here showToggle={view === 'AI'}
/> />
<div className="container"> <div className="container">
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}> <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
{showDivs && ( {showDivs && (
@ -100,7 +99,7 @@ const LandingPage: React.FC = () => {
{view === 'AI' && <AI />} {view === 'AI' && <AI />}
{view === 'FAQ' && <FAQ />} {view === 'FAQ' && <FAQ />}
{view === 'Documentation' && <Documentation />} {view === 'Documentation' && <Documentation />}
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */} {view === 'Credits' && <Credits />}
</div> </div>
</div> </div>
</> </>
@ -108,3 +107,4 @@ const LandingPage: React.FC = () => {
}; };
export default LandingPage; export default LandingPage;