app/backend/InputOutputHandler.tsx

@@ -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') || false;
+  const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true');
 
   // Fetch local storage values and update state on component mount
   useEffect(() => {
@@ -50,6 +50,7 @@ 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?" },

app/components/settings/Settings.tsx

@@ -652,87 +652,71 @@ 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={handleExport} className="export-button">
-              Export Settings
-            </button>
+            <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>
           </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>) => {
-    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);
+    if (event.target.files && event.target.files.length > 0) {
+      const file = event.target.files[0];
+      importSettings(file, applyCustomTheme);
     }
   };
 
-  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
+  const currentSettings = {
+    ...settings.userPreferences,
+    ...settings.theme,
+    ...settings.theme.faqSettings,
+    ...settings.theme.popupSettings,
+    ...settings.apiKeys,
+    ...settings.generalSettings,
   };
 
   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>
+    <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>
   );
 };
 

app/components/settings/settingUtils.ts

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

app/page.tsx

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