Merge branch 'main' of interstellardevelopment.org:React-Group/interstellar_ai

app/components/Settings.tsx

@@ -11,6 +11,7 @@ import {
   checkCredentials,
   deleteAccount,
 } from '../backend/database';
+import { equal } from 'assert';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
@@ -85,9 +86,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
     const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
+    const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
+    const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
+    const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
+    const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
+    const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
+    const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
+    const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
+    const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
+
 
     // Theme selection
-    const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
+    const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+    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':
+            // Handle custom theme application here if necessary
+            break;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts
 
     // API Keys
     const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
@@ -146,8 +181,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           openai,
           anthropic,
           google,
+          // Additional theme settings
+          faqBackgroundColor,
+          faqHeadingColor,
+          faqItemBackgroundColor,
+          faqItemHeadingColor,
+          faqItemTextColor,
+          faqItemHoverBackgroundColor,
+          popupBackgroundColor,
+          overlayTextColor,
       };
-
         // Update local storage
       for (const [key, value] of Object.entries(settings)) {
           if (typeof value === 'boolean') {
@@ -196,6 +239,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     openai,
     anthropic,
     google,
+    // Additional theme settings
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,
   ]);
 
   useEffect(() => {
@@ -311,11 +363,45 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       }
 
       if (settings.burgerMenu) {
-      setBurgerMenu(settings.fontSize);
+        setBurgerMenu(settings.burgerMenu);
-      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
+        document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
+      }
+
+      // Additional theme settings
+      if (settings.faqBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
+      }
+
+      if (settings.faqHeadingColor) {
+        document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
+      }
+
+      if (settings.faqItemBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
+      }
+
+      if (settings.faqItemHeadingColor) {
+        document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
+      }
+
+      if (settings.faqItemTextColor) {
+        document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
+      }
+
+      if (settings.faqItemHoverBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
+      }
+
+      if (settings.popupBackgroundColor) {
+        document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
+      }
+
+      if (settings.overlayTextColor) {
+        document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
       }
     };
 
+
     // Function to handle updating all credentials
     const handleUpdateCredentials = async () => {
       // Update account information
@@ -532,28 +618,31 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   <select
                     value={selectedTheme}
                     onChange={(e) => {
-                    const theme = e.target.value; // Get the selected value from the event
+                      const theme = e.target.value;
-                    setSelectedTheme(theme); // Update state for selected theme
+                      if (theme !== "default") {
+                        setSelectedTheme(theme);
+                        localStorage.setItem("selectedTheme", theme);
           
                         // Apply the appropriate theme based on selection
-                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
+                        switch (theme) {
                           case 'IOMARKET':
-                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
+                            applyIOMarketTheme();
                             break;
                           case 'WHITE':
-                        applyWhiteTheme(); // Call the function to apply the WHITE theme
+                            applyWhiteTheme();
                             break;
                           case 'BLACK':
-                        applyBlackTheme(); // Call the function to apply the BLACK theme
+                            applyBlackTheme();
                             break;
                           case 'CUSTOM':
                             // Handle custom theme logic here if necessary
                             break;
                           default:
-                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
+                            applyIOMarketTheme();
                             break;
                         }
-                  }} // Handle theme selection
+                      }
+                    }}
                   >
                     <option value="default">Select your style...</option>
                     <option value="IOMARKET">IOMARKET</option>
@@ -562,10 +651,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                     <option value="CUSTOM">CUSTOM</option>
                   </select>
                 </div>
-
                 {/* Conditionally render theme settings only if "CUSTOM" is selected */}
                 {selectedTheme === 'CUSTOM' && (
                   <>
+                    {/* Font Size */}
                     <div className="settings-option">
                       <p>Font Size</p>
                       <input
@@ -582,6 +671,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       <span>{fontSize}</span>
                     </div>
 
+                    {/* Background Color */}
                     <div className="settings-option">
                       <p>Background Color</p>
                       <input
@@ -595,6 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Text Color */}
                     <div className="settings-option">
                       <p>Text Color</p>
                       <input
@@ -608,6 +699,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Background Color */}
                     <div className="settings-option">
                       <p>Input Background Color</p>
                       <input
@@ -621,6 +713,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Button Color */}
                     <div className="settings-option">
                       <p>Input Button Color</p>
                       <input
@@ -634,6 +727,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Button Hover Color */}
                     <div className="settings-option">
                       <p>Input Button Hover Color</p>
                       <input
@@ -647,6 +741,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* User Message Background Color */}
                     <div className="settings-option">
                       <p>User Message Background Color</p>
                       <input
@@ -660,6 +755,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* User Message Text Color */}
                     <div className="settings-option">
                       <p>User Message Text Color</p>
                       <input
@@ -673,6 +769,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* AI Message Background Color */}
                     <div className="settings-option">
                       <p>AI Message Background Color</p>
                       <input
@@ -686,6 +783,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* AI Message Text Color */}
                     <div className="settings-option">
                       <p>AI Message Text Color</p>
                       <input
@@ -699,6 +797,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Button Background Color */}
                     <div className="settings-option">
                       <p>Button Background Color</p>
                       <input
@@ -712,6 +811,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Button Hover Background Color */}
                     <div className="settings-option">
                       <p>Button Hover Background Color</p>
                       <input
@@ -725,6 +825,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Models Background Color */}
                     <div className="settings-option">
                       <p>Models Background Color</p>
                       <input
@@ -738,6 +839,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* History Background Color */}
                     <div className="settings-option">
                       <p>History Background Color</p>
                       <input
@@ -751,6 +853,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Left Panel Background Color */}
                     <div className="settings-option">
                       <p>Left Panel Background Color</p>
                       <input
@@ -764,6 +867,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Conversation Background Color */}
                     <div className="settings-option">
                       <p>Conversation Background Color</p>
                       <input
@@ -777,6 +881,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Pop-up Text Color */}
                     <div className="settings-option">
                       <p>Pop-up Text Color</p>
                       <input
@@ -790,19 +895,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
-                  <div className="settings-option">
+                    {/* Input Border Color */}
-                    <p>Burger Menu Color</p>
-                    <input
-                      type="color"
-                      value={burgerMenu}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setBurgerMenu(newColor);
-                        document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
-                      }}
-                    />
-                  </div>
-
                     <div className="settings-option">
                       <p>Input Border Color</p>
                       <input
@@ -816,6 +909,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Font Family */}
                     <div className="settings-option">
                       <p>Font Family</p>
                       <select
@@ -843,6 +937,117 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       </select>
                     </div>
 
+                    {/* FAQ Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Background Color</p>
+                      <input
+                        type="color"
+                        value={faqBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Heading Color */}
+                    <div className="settings-option">
+                      <p>FAQ Heading Color</p>
+                      <input
+                        type="color"
+                        value={faqHeadingColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqHeadingColor(newColor);
+                          document.documentElement.style.setProperty('--faq-heading-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Background Color</p>
+                      <input
+                        type="color"
+                        value={faqItemBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Heading Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Heading Color</p>
+                      <input
+                        type="color"
+                        value={faqItemHeadingColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemHeadingColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Text Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Text Color</p>
+                      <input
+                        type="color"
+                        value={faqItemTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemTextColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-text-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Hover Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Hover Background Color</p>
+                      <input
+                        type="color"
+                        value={faqItemHoverBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemHoverBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* Popup Background Color */}
+                    <div className="settings-option">
+                      <p>Popup Background Color</p>
+                      <input
+                        type="color"
+                        value={popupBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setPopupBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--popup-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* Overlay Text Color */}
+                    <div className="settings-option">
+                      <p>Overlay Text Color</p>
+                      <input
+                        type="color"
+                        value={overlayTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setOverlayTextColor(newColor);
+                          document.documentElement.style.setProperty('--overlay-text-color', newColor);
+                        }}
+                      />
+                    </div>
                   </>
                 )}
             </div>
@@ -1033,7 +1238,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     mistral,
     openai,
     anthropic,
-   google
+    google,
+  
+    // Additional theme settings if needed
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,  
 };
 
 
@@ -1059,7 +1274,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={() => { 
                   applySettings; 
                   getAllLocalStorageItems(); 
-                  closeSettings(); // This is invoked when the button is clicked
+                  closeSettings(); 
               }}>
                   Apply
             </button>

app/components/theme.ts

@@ -92,5 +92,66 @@ export const applyBlackTheme = () => {
     document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
     document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
     document.documentElement.style.setProperty('--font-size', '16px'); // Font size
-    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
 };
+
+export const applyCustomTheme = () => {
+    // Theme variables   
+    const themeVariables = {
+        backgroundColor: localStorage.getItem('backgroundColor'),
+        textColor: localStorage.getItem('textColor'),
+        inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
+        inputButtonColor: localStorage.getItem('inputButtonColor'),
+        inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
+        userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
+        userMessageTextColor: localStorage.getItem('userMessageTextColor'),
+        aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
+        aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
+        buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
+        buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
+        modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
+        historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
+        leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
+        conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+        popUpTextColor: localStorage.getItem('popUpTextColor'),
+        inputBorderColor: localStorage.getItem('inputBorderColor'),
+        fontFamily: localStorage.getItem('fontFamily'),
+        fontSize: localStorage.getItem('fontSize'),
+        burgerMenu: localStorage.getItem('burgerMenu'),
+        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+        popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
+        overlayTextColor: localStorage.getItem('overlayTextColor'),
+      };
+          
+      document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
+      document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
+      document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
+      document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
+      document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
+      document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
+      document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
+      document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
+      document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
+      document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
+      document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
+      document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
+      document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
+      document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
+      document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
+      document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
+      document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
+      document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
+      document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
+      document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
+      document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
+      document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
+      document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
+    
+}

app/page.tsx

@@ -7,6 +7,8 @@ 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 Settings from './components/Settings';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
 import Head from 'next/head';
 import './styles/master.css';
 
@@ -26,6 +28,33 @@ const LandingPage: React.FC = () => {
     }
   };
 
+  const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+    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;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts          
+
   return (
     <>
         <Header

app/styles/container.css

@@ -2,8 +2,8 @@
 .container{
     display: flex;
     width: 100vw;
-    height: 100vh;
+    height: 90dvh;
-    padding-top: 12vh;
+    padding-top: 1dvh;
 }
 
 .left-panel {
@@ -13,13 +13,13 @@
     border-radius: 0 1em 0 0;
     margin-left: 0;
     padding-right: 1em;
-    height: 100%;
 }
 
 .left-panel.hidden {
     opacity: 0; /* Fade out when hidden */
     width: 0; /* Collapse width to 0 */
     visibility: hidden; /* Hide visibility while collapsing */
+    
 }
 
 .conversation-container {
@@ -27,15 +27,10 @@
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
-    height: 100%;
 }
 
-/* Adjust margin-left when panel is shown or hidden */
+
-.conversation-container.expanded {
-    margin-left: 1vw;
-}
 
 .conversation-container.collapsed {
     margin-left: 1vw; /* Space for the left panel */
-    bottom: 0;
 }

app/styles/credit.css

@@ -5,8 +5,8 @@
   
   .credits-section {
     max-width: 900px;
-    height: 80vh;
+    height: 80dvh;
-    margin: 0 auto;
+    margin: auto;
     background: var(--doc-background-color); /* Use variable for background */
     padding: 2rem;
     border-radius: 8px;
@@ -15,20 +15,20 @@
   }
   
   .title {
-    font-size: 2rem;
+    font-size: calc(var(--font-size)*2);
     color: var(--doc-title-color); /* Use variable for title color */
     margin-bottom: 1.5rem;
   }
   
   .subtitle {
-    font-size: 1.5rem;
+    font-size: calc(var(--font-size)*1.5);
     color: var(--doc-subtitle-color); /* Use variable for subtitle color */
     margin-top: 2rem;
     margin-bottom: 1rem;
   }
   
   .paragraph {
-    font-size: 1rem;
+    font-size: calc(var(--font-size));
     color: var(--doc-paragraph-color); /* Use variable for paragraph color */
     margin-bottom: 1.5rem;
     line-height: 1.6;

app/styles/doc.css

@@ -7,8 +7,8 @@
 
 .documentation-section {
   max-width: 900px;
-  height: 80vh;
+  height: 80dvh;
-  margin: 0 auto;
+  margin: auto;
   background: var(--doc-background-color); /* Use variable for background */
   padding: 2rem;
   border-radius: 8px;
@@ -17,27 +17,27 @@
 }
 
 .title {
-  font-size: 2rem;
+  font-size: calc(var(--font-size)*2);
   color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
 
 .subtitle {
-  font-size: 1.5rem;
+  font-size: calc(var(--font-size)*1.5);
   color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .subsection-title {
-  font-size: 1.25rem;
+  font-size: calc(var(--font-size)*1.25);
   color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
 
 .paragraph {
-  font-size: 1rem;
+  font-size: calc(var(--font-size));
   color: var(--doc-paragraph-color); /* Use variable for paragraph color */
   margin-bottom: 1.5rem;
   line-height: 1.6;

app/styles/global.css

@@ -1,14 +1,10 @@
-html,
 body {
-    height: 100vh;
+    height: 100dvh;
     overflow: hidden;
     position: relative;
 }
 
 body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     background-color: var(--background-color);
     color: var(--text-color);
     font-family: var(--font-family);
@@ -19,11 +15,6 @@ body {
 header {
     background-color: var(--header-background-color);
     color: var(--header-text-color);
-    padding: 1rem; /* Adjust padding as needed */
-}
-
-main{
-    height: 100%;
 }
 
 button {

app/styles/header.css

@@ -1,10 +1,8 @@
 header{
-    position: absolute;
+    position: relative;
     padding: 0 20px;
-    top: 0;
-    left: 0;
     width: 100%;
-    height: 10vh;
+    height: 10dvh;
     display: flex;
     align-items: center;
     justify-content: center;

app/styles/history.css

@@ -1,7 +1,7 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 45%;
+    height: 40dvh;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -39,5 +39,7 @@
 }
 
 .history-models{
-    height: 100%;
+    position: relative;
+    height: 90dvh;
+    /* padding-bottom: 3dvh; */
 }

app/styles/input.css

@@ -1,7 +1,5 @@
 /* Input Section */
 .input {
-    grid-column: 2/3;
-    grid-row: 4/5;
     border-radius: 8px;
     background-color: var(--input-background-color);
     padding: 1em;
@@ -13,7 +11,12 @@
     justify-content: space-between;
     align-items: center;
     height: auto;
-    height: 10vh;
+    height: 10dvh;
+    position: absolute;
+    left: 0.25vw;
+    bottom: 3dvh;
+    right: 0.25vw;
+    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
 }
 
 .input input {
@@ -44,8 +47,8 @@
     border-radius: 8px;
     font-size: 1.5em;
     cursor: pointer;
-    height: 50px;
+    height: 8dvh;
-    width: 75px;
+    width: 8vw;
     display: flex;
     justify-content: center;
     align-items: center;

app/styles/models.css

@@ -1,13 +1,18 @@
 .model-background {
+    position: absolute;
+    left: 1em;
+    bottom: 4dvh;
+    right: 0;
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 45%;
+    padding-bottom: 1px;
+    overflow: scroll;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    margin: 0 1em;
     margin-right: 0;
     border-radius: 1em;
+    height: 45dvh;
 }
 
 .models {
@@ -69,6 +74,7 @@
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
+    border-radius: 5%;
 }
 
 .overlay img {

app/styles/output.css

@@ -4,13 +4,14 @@
     grid-row: 1 / 4;
     background-color: var(--output-background-color);
     margin: 1em;
+    padding-bottom: 14dvh;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 70vh;
+    height: 90dvh;
 }
 
 #conversation {

app/styles/reset.css

@@ -2,4 +2,6 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    scroll-behavior: smooth;
+    transition: all 0.2s ease-in-out;
 }

app/styles/responsive.css

@@ -8,7 +8,6 @@
   
   /* Header styles */
   header {
-    position: fixed;
     top: 0;
     left: 0;
     margin-top: 0px;
@@ -20,11 +19,10 @@
   .container {
     display: flex;
     flex-direction: column;
-    align-items: center;
     width: 100vw;
-    overflow: scroll;
+    overflow: hidden;
     margin: 0;
-    padding: 7em 0 0 0 ;
+    padding: 1dvh 0 0 0 ;
   }
 
   /* Left panel styles */
@@ -58,6 +56,7 @@
     min-width: 100%;
     margin-left: 0;
     border-radius: none;
+    height: 10vh;
   }
 
   /* Grid styles */
@@ -79,6 +78,7 @@
     margin: 0 auto;
     align-items: center;
     width: 90%;
+    bottom: 10dvh
   }
 
   .input input {

app/styles/user-ai-messages.css

@@ -16,6 +16,7 @@
     border-bottom-right-radius: 0;
     margin-left: auto;
     text-align: left;
+    margin-right: 1.5vw;
 }
 
 .ai-message {
@@ -27,6 +28,7 @@
 }
 
 .ai-container{
+    position: relative;
     height: min-content;
     bottom: 0;
     width: 100%;