Update frontend/src/App.jsx

frontend/src/App.jsx

@@ -2,17 +2,18 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { onAuthStateChanged } from 'firebase/auth';
 import { auth } from './services/firebase';
-
 import Header from './components/layout/Header';
 import Login from './components/auth/Login';
 import SignUp from './components/auth/SignUp';
 import ChatInterface from './components/chat/ChatInterface';
 import History from './components/chat/History';
+import Sidebar from './components/layout/Sidebar'; // Assuming Sidebar is in components/layout
 import './index.css';
 
 function App() {
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [currentChatId, setCurrentChatId] = useState(null); // State to manage current chat session
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
@@ -22,6 +23,17 @@ function App() {
     return () => unsubscribe();
   }, []);
 
+  // Function to start a new chat (or handle existing chat selection)
+  const startNewChat = () => {
+    setCurrentChatId(null); // Resets to a new chat session
+    // In a real app, you might generate a new chatId here or navigate
+  };
+
+  // Function to load a specific chat from history
+  const loadChat = (chatId) => {
+    setCurrentChatId(chatId);
+  };
+
   if (loading) {
     return <div>Loading...</div>; // Or a proper spinner component
   }
@@ -30,22 +42,30 @@ function App() {
     <Router>
       <div className="app-wrapper">
         <Header user={user} />
-        <main>
-          <Routes>
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<SignUp />} />
-            <Route 
-              path="/chat" 
-              element={user ? <ChatInterface /> : <Navigate to="/login" />} 
-            />
-            <Route 
-              path="/history" 
-              element={user ? <History /> : <Navigate to="/login" />} 
-            />
-            {/* Redirect root to chat if logged in, otherwise to login */}
-            <Route path="/" element={user ? <Navigate to="/chat" /> : <Navigate to="/login" />} />
-          </Routes>
-        </main>
+
+        {/* This div will contain both the Sidebar and the main content area (chat/history) */}
+        <div className="content-area">
+          {/* Render Sidebar only if user is logged in */}
+          {user && <Sidebar startNewChat={startNewChat} loadChat={loadChat} />}
+
+          {/* The main content area where chat or history will be rendered */}
+          <main className="main-content-flex"> {/* New class for flex container of routes */}
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              <Route path="/signup" element={<SignUp />} />
+              <Route
+                path="/chat"
+                element={user ? <ChatInterface currentChatId={currentChatId} /> : <Navigate to="/login" />}
+              />
+              <Route
+                path="/history"
+                element={user ? <History loadChat={loadChat} /> : <Navigate to="/login" />}
+              />
+              {/* Redirect root to chat if logged in, otherwise to login */}
+              <Route path="/" element={user ? <Navigate to="/chat" /> : <Navigate to="/login" />} />
+            </Routes>
+          </main>
+        </div>
       </div>
     </Router>
   );