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');
+  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?" },

app/components/settings/Settings.tsx

@@ -655,35 +655,51 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <h2>Import & Export</h2>
           <div className="settings-option">
             <h3>Export the settings</h3>
-              <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
+            <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' />
+            <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 (

app/components/settings/settingUtils.ts

@@ -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);
+  }
+}

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,11 +43,11 @@ 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);
-        // Apply the saved theme on initial load
       switch (savedTheme) {
         case 'IOMARKET':
           applyIOMarketTheme();
@@ -76,7 +75,7 @@ const LandingPage: React.FC = () => {
           break;
       }
     }
-    }, []); // Runs only once when the component mounts          
+  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
 
   return (
     <>
@@ -85,7 +84,7 @@ const LandingPage: React.FC = () => {
         showDivs={showDivs}
         onViewChange={handleViewChange}
         showHistoryModelsToggle={true}
-          showToggle={view === 'AI'} // Pass the condition here
+        showToggle={view === 'AI'}
       />
       <div className="container">
         <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
@@ -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;
+