app/components/Settings.tsx

@@ -1,20 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } 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
   const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@@ -37,111 +24,73 @@ 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');
+
+  // Privacy settings state
+  const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
+  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
+  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
+
+  // 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');
 
-  // 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) {
+  // Effect to update CSS variables on theme state change
-      setTextColor(settings.textColor);
+  useEffect(() => {
-      document.documentElement.style.setProperty('--text-color', settings.textColor);
+    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,
+  ]);
 
-    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);
-    }    
-  };
-
-  
-
-
-  // Render settings content based on the active section
   const renderSettingsContent = () => {
     switch (activeSection) {
       case 'general':
@@ -164,6 +113,7 @@ 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">
@@ -181,6 +131,7 @@ 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">
@@ -194,6 +145,7 @@ 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">
@@ -204,6 +156,8 @@ 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">
@@ -222,6 +176,7 @@ 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>
@@ -248,7 +203,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   checked={disableChatHistory}
                   onChange={() => setDisableChatHistory(!disableChatHistory)}
                 />
-                Disable Chat History
+                Disable Chat History Save
               </label>
             </div>
             <div className="settings-option">
@@ -261,6 +216,9 @@ 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>
         );
 
@@ -398,242 +356,152 @@ 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);
+                        document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
                       }}
                     />
                     <span>{fontSize}</span>
                   </div>
-
                   <div className="settings-option">
                     <p>Background Color</p>
                     <input
                       type="color"
                       value={backgroundColor}
-                      onChange={(e) => {
+                      onChange={(e) => setBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setTextColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setInputBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setInputButtonColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setInputButtonHoverColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setUserMessageTextColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setAiMessageTextColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setButtonBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setModelsBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setHistoryBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setConversationBackgroundColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setPopUpTextColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setInputBorderColor(e.target.value)}
-                        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) => {
+                      onChange={(e) => setFontFamily(e.target.value)}
-                        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>
@@ -642,17 +510,15 @@ 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>Open Source Settings</h2>
+            <h2>Free and Open Source Software (FOSS) Settings</h2>
             <div className="settings-option">
               <label>
                 <input
@@ -671,7 +537,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-section">
             <h2>Account Settings</h2>
             <div className="settings-option">
-              <label>New Name</label>
+              <label>Change Name</label>
               <input
                 type="text"
                 value={newName}
@@ -679,7 +545,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               />
             </div>
             <div className="settings-option">
-              <label>New Email</label>
+              <label>Change Email</label>
               <input
                 type="email"
                 value={newEmail}
@@ -687,7 +553,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               />
             </div>
             <div className="settings-option">
-              <label>New Password</label>
+              <label>Change Password</label>
               <input
                 type="password"
                 value={newPassword}
@@ -697,66 +563,11 @@ 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">
@@ -768,7 +579,6 @@ 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">
@@ -779,6 +589,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         </div>
       </div>
     </div>
+
   );
 };
 

app/components/settingUtils.ts

@@ -1,22 +0,0 @@
-// 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: 0px;
+    margin-top: 5px;
     padding-top: 0;
     width: 100%;
   }
@@ -23,7 +23,7 @@
     flex-direction: column;
     align-items: center;
     width: 100vw;
-    overflow: scroll;
+    overflow: hidden;
     margin: 0;
     padding: 0;
   }
@@ -111,10 +111,6 @@
     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

@@ -0,0 +1,21 @@
+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;