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

Compare commits

base: React-Group:d4507c74a7620e8fb4b48a08d45972db439c4629
Branches Tags
React-Group:main
..
compare: React-Group:c0d7be2ff0fe76d12519c766f018ef3307fbf191
Branches Tags
React-Group:main

No commits in common. "d4507c74a7620e8fb4b48a08d45972db439c4629" and "c0d7be2ff0fe76d12519c766f018ef3307fbf191" have entirely different histories.
d4507c74a7 ... c0d7be2ff0

4 changed files with 125 additions and 153 deletions
Show stats 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') || false; const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true');
// Fetch local storage values and update state on component mount // Fetch local storage values and update state on component mount
useEffect(() => { useEffect(() => {
@ -50,6 +50,7 @@ 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,87 +652,71 @@ 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={handleExport} className="export-button"> <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
Export Settings </div>
</button> <div className="settings-option">
<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>) => {
const file = event.target.files?.[0]; if (event.target.files && event.target.files.length > 0) {
if (file) { const file = event.target.files[0];
const reader = new FileReader(); importSettings(file, applyCustomTheme);
reader.onload = (e) => {
const fileContent = e.target?.result as string;
importSettings(fileContent); // Call the importSettings function with the file content
};
reader.readAsText(file);
} }
}; };
const handleExport = () => { const currentSettings = {
const settingsData = exportSettings(); ...settings.userPreferences,
...settings.theme,
// Create a blob and download the exported settings ...settings.theme.faqSettings,
const blob = new Blob([settingsData], { type: 'application/json' }); ...settings.theme.popupSettings,
const url = URL.createObjectURL(blob); ...settings.apiKeys,
const a = document.createElement('a'); ...settings.generalSettings,
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>
); );
}; };

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

@ -1,36 +1,23 @@
// settingsManager.ts // settingsUtils.ts
// Method to export localStorage to a JSON object // Export the current settings as a JSON file
export function exportSettings(): string { export const exportSettings = (settings: any) => {
const settings: { [key: string]: 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();
};
// 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);
}
}

106
app/page.tsx
View file

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