app/components/Login.tsx

@@ -11,7 +11,7 @@ const Login: React.FC = () => {
   // Credentials state
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [accountName, setAccountName] = useState(''); // Set the account name
+  const [accountName, setAccountName] = useState('');
   const [newAccountEmail, setNewAccountEmail] = useState('');
   const [newAccountPassword, setNewAccountPassword] = useState('');
   const [newAccountName, setNewAccountName] = useState('');
@@ -27,7 +27,7 @@ const Login: React.FC = () => {
   // Function to toggle the sign-up popup
   const toggleSignUpPopup = () => {
     setShowSignUpPopup(!showSignUpPopup);
-    setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
+    setShowLoginPopup(false);
   };
 
   // Function to handle login
@@ -40,6 +40,11 @@ const Login: React.FC = () => {
     }
   };
 
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setShowSettingsPopup(false); // Optionally close settings popup on logout
+  };
+
   // Function to handle account creation
   const handleCreateAccount = () => {
     console.log('New Account Created:', newAccountEmail, newAccountPassword);
@@ -53,7 +58,6 @@ const Login: React.FC = () => {
   return (
     <div>
       {/* Login or Settings Button */}
-
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
         {isLoggedIn ? 'Settings' : 'Log In'}
       </button>
@@ -124,13 +128,13 @@ const Login: React.FC = () => {
               />
             </div>
 
-             {/* New Account Name Input */}
-             <div>
+            {/* New Account Name Input */}
+            <div>
               <input
                 type="text"
                 placeholder="Name"
                 value={newAccountName}
-                onChange={(e) => setAccountName(e.target.value)}
+                onChange={(e) => setNewAccountName(e.target.value)}
               />
             </div>
 
@@ -153,12 +157,12 @@ const Login: React.FC = () => {
             <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
               Close
             </button>
-          </div>  
+          </div>
         </div>
       )}
 
       {/* Conditional rendering of the Settings Popup */}
-      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName} />}
+      {showSettingsPopup && <Settings closeSettings={toggleSettingsPopup} accountName={accountName}/>}
     </div>
   );
 };

app/components/Settings.tsx

@@ -19,6 +19,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       return false; // Default to false if item is null or empty
     };
 
+    interface SettingsProps {
+      closeSettings: () => void;
+      accountName: string;
+      handleLogout: () => void; // Add this line to accept handleLogout as a prop
+    }
+
     // Active section
     const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
 
@@ -842,6 +848,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 onChange={(e) => setNewPassword(e.target.value)}
               />
             </div>
+            <div className="settings-option">
+              <button
+                onClick={() => {
+                  closeSettings(); // Optionally close settings after logout
+                }}
+                className="logout-button"
+              >
+                Logout
+              </button>
+            </div>
           </div>
         );
 

app/components/settingUtils.ts

@@ -19,4 +19,5 @@ export const exportSettings = (settings: any) => {
     };
     reader.readAsText(file);
   };
+
   

app/layout.tsx

@@ -1,18 +1,19 @@
-import Header from "./components/Header";
-
+import { ReactNode } from 'react';
 
 export const metadata = {
   title: 'AI Assistant | Interstellar Development',
   description: 'A little AI chat that is able to assist you in little tasks',
-}
+};
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        {/* Tried adding the favicon here */}
+        <link rel="icon" href="./public/favicon.ico" type="image/x-icon" />
+      </head>
       <body>
         <main>{children}</main>
       </body>

app/page.tsx

@@ -7,6 +7,7 @@ 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 Head from 'next/head';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
@@ -51,29 +52,31 @@ const LandingPage: React.FC = () => {
   };
 
   return (
-    <div className="container">
-      <Header
-        toggleDivs={toggleDivs}
-        showDivs={showDivs}
-        onViewChange={handleViewChange}
-        showHistoryModelsToggle={true}
-        showToggle={view === 'AI'} // Pass the condition here
-      />
-      <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
-        {showDivs && (
-          <div className="history-models">
-            <History />
-            <Models />
-          </div>
-        )}
+    <>
+      <div className="container">
+        <Header
+          toggleDivs={toggleDivs}
+          showDivs={showDivs}
+          onViewChange={handleViewChange}
+          showHistoryModelsToggle={true}
+          showToggle={view === 'AI'} // Pass the condition here
+          />
+        <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
+          {showDivs && (
+            <div className="history-models">
+              <History />
+              <Models />
+            </div>
+          )}
+        </div>
+        <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
+          {view === 'AI' && <AI />}
+          {view === 'FAQ' && <FAQ />}
+          {view === 'Documentation' && <Documentation />}
+          {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
+        </div>
       </div>
-      <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
-        {view === 'AI' && <AI />}
-        {view === 'FAQ' && <FAQ />}
-        {view === 'Documentation' && <Documentation />}
-        {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
-      </div>
-    </div>
+    </>
   );
 };