Merge pull request 'Responsive design bug fixes' (#35) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/35

app/components/Settings.tsx

@@ -1,9 +1,22 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
   const [activeSection, setActiveSection] = useState('general');
+  const [preferredLanguage, setPreferredLanguage] = useState('en');
+  const [preferredCurrency, setPreferredCurrency] = useState('usd');
+  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
+  const [timeFormat, setTimeFormat] = useState('12-hour');
+  const [timeZone, setTimeZone] = useState('GMT');
+  const [disableOnlineAI, setDisableOnlineAI] = useState(false);
+  const [disableChatHistory, setDisableChatHistory] = useState(false);
+  const [disableAIMemory, setDisableAIMemory] = useState(false);
+  const [openSourceMode, setOpenSourceMode] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
 
-  // Theme settings state
+    // Theme settings state
   const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
   const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
   const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
@@ -24,73 +37,111 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
   const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
 
-  // General settings state
-  const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
-  const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
-  const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
-  const [timeFormat, setTimeFormat] = useState<string>('12-hour');
-  const [timeZone, setTimeZone] = useState<string>('UTC');
+   // Theme selection
+   const [selectedTheme, setSelectedTheme] = useState<string>('default');
 
-  // Privacy settings state
-  const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
-  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
-  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
+  // Apply imported settings to the CSS variables
+  const applySettings = (settings: any) => {
+    if (settings.backgroundColor) {
+      setBackgroundColor(settings.backgroundColor);
+      document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
+    }
+    
+    if (settings.textColor) {
+      setTextColor(settings.textColor);
+      document.documentElement.style.setProperty('--text-color', settings.textColor);
+    }
+    
+    if (settings.inputBackgroundColor) {
+      setInputBackgroundColor(settings.inputBackgroundColor);
+      document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
+    }
+    
+    if (settings.inputButtonColor) {
+      setInputButtonColor(settings.inputButtonColor);
+      document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
+    }
+    
+    if (settings.inputButtonHoverColor) {
+      setInputButtonHoverColor(settings.inputButtonHoverColor);
+      document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
+    }
+    
+    if (settings.userMessageBackgroundColor) {
+      setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
+      document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
+    }
+    
+    if (settings.userMessageTextColor) {
+      setUserMessageTextColor(settings.userMessageTextColor);
+      document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
+    }
+    
+    if (settings.aiMessageBackgroundColor) {
+      setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
+      document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
+    }
+    
+    if (settings.aiMessageTextColor) {
+      setAiMessageTextColor(settings.aiMessageTextColor);
+      document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
+    }
+    
+    if (settings.buttonBackgroundColor) {
+      setButtonBackgroundColor(settings.buttonBackgroundColor);
+      document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
+    }
+    
+    if (settings.buttonHoverBackgroundColor) {
+      setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
+      document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
+    }
+    
+    if (settings.modelsBackgroundColor) {
+      setModelsBackgroundColor(settings.modelsBackgroundColor);
+      document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
+    }
+    
+    if (settings.historyBackgroundColor) {
+      setHistoryBackgroundColor(settings.historyBackgroundColor);
+      document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
+    }
+    
+    if (settings.leftPanelBackgroundColor) {
+      setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
+      document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
+    }
+    
+    if (settings.conversationBackgroundColor) {
+      setConversationBackgroundColor(settings.conversationBackgroundColor);
+      document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
+    }
+    
+    if (settings.popUpTextColor) {
+      setPopUpTextColor(settings.popUpTextColor);
+      document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
+    }
+    
+    if (settings.inputBorderColor) {
+      setInputBorderColor(settings.inputBorderColor);
+      document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
+    }
+    
+    if (settings.fontFamily) {
+      setFontFamily(settings.fontFamily);
+      document.documentElement.style.setProperty('--font-family', settings.fontFamily);
+    }
+    
+    if (settings.fontSize) {
+      setFontSize(settings.fontSize);
+      document.documentElement.style.setProperty('--font-size', settings.fontSize);
+    }    
+  };
 
-  // FOSS settings state
-  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
-
-  // Account settings state
-  const [newName, setNewName] = useState<string>('');
-  const [newEmail, setNewEmail] = useState<string>('');
-  const [newPassword, setNewPassword] = useState<string>('');
-
-  // Theme selection
-  const [selectedTheme, setSelectedTheme] = useState<string>('default');
+  
 
 
-  // Effect to update CSS variables on theme state change
-  useEffect(() => {
-    document.documentElement.style.setProperty('--background-color', backgroundColor);
-    document.documentElement.style.setProperty('--text-color', textColor);
-    document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
-    document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
-    document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
-    document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
-    document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
-    document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
-    document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
-    document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
-    document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
-    document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
-    document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
-    document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
-    document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
-    document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
-    document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
-    document.documentElement.style.setProperty('--font-family', fontFamily);
-    document.documentElement.style.setProperty('--font-size', fontSize);
-  }, [
-    backgroundColor,
-    textColor,
-    inputBackgroundColor,
-    inputButtonColor,
-    inputButtonHoverColor,
-    userMessageBackgroundColor,
-    userMessageTextColor,
-    aiMessageBackgroundColor,
-    aiMessageTextColor,
-    buttonBackgroundColor,
-    buttonHoverBackgroundColor,
-    modelsBackgroundColor,
-    historyBackgroundColor,
-    leftPanelBackgroundColor,
-    conversationBackgroundColor,
-    popUpTextColor,
-    inputBorderColor,
-    fontFamily,
-    fontSize,
-  ]);
-
+  // Render settings content based on the active section
   const renderSettingsContent = () => {
     switch (activeSection) {
       case 'general':
@@ -113,7 +164,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <option value="ja">Japanese</option>
                 <option value="ru">Russian</option>
                 <option value="ar">Arabic</option>
-                {/* Add more languages as needed */}
               </select>
             </div>
             <div className="settings-option">
@@ -131,7 +181,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <option value="chf">CHF</option>
                 <option value="cny">CNY</option>
                 <option value="inr">INR</option>
-                {/* Add more currencies as needed */}
               </select>
             </div>
             <div className="settings-option">
@@ -145,7 +194,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <option value="yyyy-mm-dd">YYYY-MM-DD</option>
                 <option value="mm-dd-yyyy">MM-DD-YYYY</option>
                 <option value="dd-mm-yyyy">DD-MM-YYYY</option>
-                {/* Add more formats as needed */}
               </select>
             </div>
             <div className="settings-option">
@@ -156,8 +204,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               >
                 <option value="12-hour">12 Hour</option>
                 <option value="24-hour">24 Hour</option>
-                <option value="am-pm">AM/PM Format</option>
-                {/* Add more formats if necessary */}
               </select>
             </div>
             <div className="settings-option">
@@ -176,7 +222,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <option value="IST">IST</option>
                 <option value="CET">CET</option>
                 <option value="JST">JST</option>
-                {/* Add more time zones as needed */}
               </select>
             </div>
           </div>
@@ -203,7 +248,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   checked={disableChatHistory}
                   onChange={() => setDisableChatHistory(!disableChatHistory)}
                 />
-                Disable Chat History Save
+                Disable Chat History
               </label>
             </div>
             <div className="settings-option">
@@ -216,9 +261,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 Disable AI Memory
               </label>
             </div>
-            <div className="settings-option">
-              <button onClick={() => { /* Export data logic */ }}>Export My Data</button>
-            </div>
           </div>
         );
 
@@ -356,152 +398,242 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       onChange={(e) => {
                         const newSize = `${e.target.value}px`;
                         setFontSize(newSize);
-                        document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
+                        document.documentElement.style.setProperty('--font-size', newSize);
                       }}
                     />
                     <span>{fontSize}</span>
                   </div>
+
                   <div className="settings-option">
                     <p>Background Color</p>
                     <input
                       type="color"
                       value={backgroundColor}
-                      onChange={(e) => setBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Text Color</p>
                     <input
                       type="color"
                       value={textColor}
-                      onChange={(e) => setTextColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setTextColor(newColor);
+                        document.documentElement.style.setProperty('--text-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Input Background Color</p>
                     <input
                       type="color"
                       value={inputBackgroundColor}
-                      onChange={(e) => setInputBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--input-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Input Button Color</p>
                     <input
                       type="color"
                       value={inputButtonColor}
-                      onChange={(e) => setInputButtonColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputButtonColor(newColor);
+                        document.documentElement.style.setProperty('--input-button-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Input Button Hover Color</p>
                     <input
                       type="color"
                       value={inputButtonHoverColor}
-                      onChange={(e) => setInputButtonHoverColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputButtonHoverColor(newColor);
+                        document.documentElement.style.setProperty('--input-button-hover-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>User Message Background Color</p>
                     <input
                       type="color"
                       value={userMessageBackgroundColor}
-                      onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setUserMessageBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--user-message-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>User Message Text Color</p>
                     <input
                       type="color"
                       value={userMessageTextColor}
-                      onChange={(e) => setUserMessageTextColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setUserMessageTextColor(newColor);
+                        document.documentElement.style.setProperty('--user-message-text-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>AI Message Background Color</p>
                     <input
                       type="color"
                       value={aiMessageBackgroundColor}
-                      onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setAiMessageBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--ai-message-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>AI Message Text Color</p>
                     <input
                       type="color"
                       value={aiMessageTextColor}
-                      onChange={(e) => setAiMessageTextColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setAiMessageTextColor(newColor);
+                        document.documentElement.style.setProperty('--ai-message-text-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Button Background Color</p>
                     <input
                       type="color"
                       value={buttonBackgroundColor}
-                      onChange={(e) => setButtonBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setButtonBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--button-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Button Hover Background Color</p>
                     <input
                       type="color"
                       value={buttonHoverBackgroundColor}
-                      onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setButtonHoverBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--button-hover-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Models Background Color</p>
                     <input
                       type="color"
                       value={modelsBackgroundColor}
-                      onChange={(e) => setModelsBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setModelsBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--models-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>History Background Color</p>
                     <input
                       type="color"
                       value={historyBackgroundColor}
-                      onChange={(e) => setHistoryBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setHistoryBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--history-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Left Panel Background Color</p>
                     <input
                       type="color"
                       value={leftPanelBackgroundColor}
-                      onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setLeftPanelBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--left-panel-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Conversation Background Color</p>
                     <input
                       type="color"
                       value={conversationBackgroundColor}
-                      onChange={(e) => setConversationBackgroundColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setConversationBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--conversation-background-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Pop-up Text Color</p>
                     <input
                       type="color"
                       value={popUpTextColor}
-                      onChange={(e) => setPopUpTextColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setPopUpTextColor(newColor);
+                        document.documentElement.style.setProperty('--pop-up-text', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Input Border Color</p>
                     <input
                       type="color"
                       value={inputBorderColor}
-                      onChange={(e) => setInputBorderColor(e.target.value)}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputBorderColor(newColor);
+                        document.documentElement.style.setProperty('--input-border-color', newColor);
+                      }}
                     />
                   </div>
+
                   <div className="settings-option">
                     <p>Font Family</p>
                     <select
                       value={fontFamily}
-                      onChange={(e) => setFontFamily(e.target.value)}
+                      onChange={(e) => {
+                        const newFont = e.target.value;
+                        setFontFamily(newFont);
+                        document.documentElement.style.setProperty('--font-family', newFont);
+                      }}
                     >
                       <option value="'Poppins', sans-serif">Poppins</option>
                       <option value="'Arial', sans-serif">Arial</option>
@@ -510,15 +642,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       <option value="'Times New Roman', serif">Times New Roman</option>
                     </select>
                   </div>
+
                 </>
               )}
             </div>
           );
-        
+
+
       case 'foss':
         return (
           <div className="settings-section">
-            <h2>Free and Open Source Software (FOSS) Settings</h2>
+            <h2>Open Source Settings</h2>
             <div className="settings-option">
               <label>
                 <input
@@ -537,7 +671,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-section">
             <h2>Account Settings</h2>
             <div className="settings-option">
-              <label>Change Name</label>
+              <label>New Name</label>
               <input
                 type="text"
                 value={newName}
@@ -545,7 +679,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               />
             </div>
             <div className="settings-option">
-              <label>Change Email</label>
+              <label>New Email</label>
               <input
                 type="email"
                 value={newEmail}
@@ -553,7 +687,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               />
             </div>
             <div className="settings-option">
-              <label>Change Password</label>
+              <label>New Password</label>
               <input
                 type="password"
                 value={newPassword}
@@ -563,11 +697,66 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           </div>
         );
 
+        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)}>Export Settings</button>
+              </div>
+              <div className="settings-option">
+                <h3>Import the settings</h3>  
+                <input type="file" onChange={handleImport} accept=".json" />
+              </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, applySettings);
+    }
+  };
+
+  // Gather all settings into an object
+  const currentSettings = {
+    backgroundColor,
+    textColor,
+    inputBackgroundColor,
+    inputButtonColor,
+    inputButtonHoverColor,
+    userMessageBackgroundColor,
+    userMessageTextColor,
+    aiMessageBackgroundColor,
+    aiMessageTextColor,
+    buttonBackgroundColor,
+    buttonHoverBackgroundColor,
+    modelsBackgroundColor,
+    historyBackgroundColor,
+    leftPanelBackgroundColor,
+    conversationBackgroundColor,
+    popUpTextColor,
+    inputBorderColor,
+    fontFamily,
+    fontSize,
+    preferredLanguage,
+    preferredCurrency,
+    dateFormat,
+    timeFormat,
+    timeZone,
+    disableOnlineAI,
+    disableChatHistory,
+    disableAIMemory,
+    openSourceMode,
+  };
+
   return (
     <div className="popup-overlay">
       <div className="settings-content">
@@ -579,6 +768,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <li onClick={() => setActiveSection('theme')}>Theme</li>
               <li onClick={() => setActiveSection('foss')}>FOSS</li>
               <li onClick={() => setActiveSection('account')}>Account</li>
+              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
             </ul>
           </div>
           <div className="settings-main">
@@ -589,7 +779,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         </div>
       </div>
     </div>
-
   );
 };
 

app/components/settingUtils.ts

@@ -0,0 +1,22 @@
+// settingsUtils.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();
+  };
+  
+  // 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);
+  };
+  

app/styles/responsive.css

@@ -12,7 +12,7 @@
     position: relative;
     top: 0;
     left: 0;
-    margin-top: 5px;
+    margin-top: 0px;
     padding-top: 0;
     width: 100%;
   }
@@ -23,7 +23,7 @@
     flex-direction: column;
     align-items: center;
     width: 100vw;
-    overflow: hidden;
+    overflow: scroll;
     margin: 0;
     padding: 0;
   }
@@ -111,6 +111,10 @@
     background-color: var(--input-button-color); /* Use variable for button color */
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
+
+  .login-button button{
+    margin: 20px 0;
+  } 
 }
 
 /* Responsive adjustments for the settings */

tailwind.config.ts

@@ -1,21 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'history-background': 'var(--history-background-color)',
-        'text-color': 'var(--text-color)',
-        'input-button-hover-color': 'var(--input-button-hover-color)',
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;