minor bug fix

Author: oshaikh13

src/App.js

@@ -2,7 +2,7 @@ import React from 'react';
 import AppContent from './AppContent';
 import Carousel from './components/Carousel';
 
-const App = ({ carouselData, suggestionsData }) => {
+const App = ({ carouselData, suggestionsData, activeChats, setActiveChats }) => {
   return (
     <div style={{ backgroundColor: 'var(--color-main-bg)' }}>
       {/* Carousel Section */}
@@ -32,7 +32,7 @@ const App = ({ carouselData, suggestionsData }) => {
           //   height: '80vh'
           // }}
         >
-          <AppContent suggestionsData={suggestionsData} />
+          <AppContent suggestionsData={suggestionsData} activeChats={activeChats} setActiveChats={setActiveChats} />
         </div>
       </div>
     </div>

src/AppContent.jsx

@@ -6,8 +6,7 @@ import ChatPage from './components/ChatPage';
 
 const MOBILE_BREAKPOINT = 768; // px
 
-const AppContent = ({ suggestionsData }) => {
-  const [activeChats, setActiveChats] = useState([]);
+const AppContent = ({ suggestionsData, activeChats, setActiveChats }) => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(
     typeof window !== 'undefined' ? window.innerWidth >= MOBILE_BREAKPOINT : true
   );

src/components/DemoPage.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import LeftPane from './LeftPane';
 import Carousel from './Carousel';
 import App from '../App';
@@ -11,12 +12,16 @@ import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 const DemoPage = () => {
   const [selectedHour, setSelectedHour] = useState(1); // Default to 1 PM
   const [abstractExpanded, setAbstractExpanded] = useState(false); // State for abstract toggle
+  const [activeChats, setActiveChats] = useState([]);
+  const navigate = useNavigate();
 
   // Ensure we match the key type in dynamicData (keys as strings)
   const currentData = dynamicData[selectedHour.toString()] || { carousel: [], suggestions: [], activity: "" };
 
   const handleTimeChange = (newHour) => {
     setSelectedHour(newHour);
+    setActiveChats([]);
+    navigate('/');
   };
 
   const toggleAbstract = () => {
@@ -299,6 +304,8 @@ if __name__ == "__main__":
             <App
               carouselData={currentData.carousel}
               suggestionsData={currentData.suggestions}
+              activeChats={activeChats}
+              setActiveChats={setActiveChats}
             />
           </DynamicDataProvider>
         </div>