Linda live chat

.gitignore

@@ -3,3 +3,5 @@
 !client/.env
 __pycache__
 .DS_Store
+
+flask_session/

client/package.json

@@ -35,6 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
+    "socket.io-client": "^4.8.1",
     "zustand": "^4.4.1"
   },
   "devDependencies": {

client/src/App.tsx

@@ -18,10 +18,13 @@ import ProfilePage from "./routes/profile";
 import TicketPage from "./routes/ticket";
 import QueuePage from "./routes/queue";
 import HomePage from "./routes/home";
+import Chat from "./routes/chat";
+import ChatRoom from "./routes/chatRoom";
 import Leaderboard from "./routes/leaderboard";
 import AdminPanel from "./routes/admin";
 import HeaderNav from "./components/header";
 
+// TODO: FIX CHATROOM THING I DONT KNOW IF WE EVEN SUPPOSED TO HAVE ONE
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route
@@ -34,6 +37,8 @@ const router = createBrowserRouter(
       <Route index path="/ticket" element={<TicketPage />} />
       <Route index path="/queue" element={<QueuePage />} />
       <Route index path="/leaderboard" element={<Leaderboard />} />
+      <Route index path="/chat" element={<Chat />} />
+      <Route index path="/room" element={<ChatRoom />} /> 
       <Route index path="/stats" element={<AdminPanel />} />
     </Route>
   )

client/src/routes/chat.module.css

@@ -0,0 +1,162 @@
+/* General Styles */
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .content {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+  }
+
+  /* Form Styles */
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .buttons h3 {
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+    color: #333;
+  }
+
+  .buttons label {
+    font-weight: bold;
+    color: #555;
+  }
+
+  .buttons input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+    margin-top: 5px;
+  }
+
+  .buttons .join {
+    display: flex;
+    gap: 10px;
+  }
+
+  .buttons .join input[type="text"] {
+    flex: 1;
+  }
+
+  .buttons button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .buttons button:hover {
+    background-color: #0056b3;
+  }
+
+  .buttons .create-btn {
+    background-color: #28a745;
+  }
+
+  .buttons .create-btn:hover {
+    background-color: #218838;
+  }
+
+  .buttons ul {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0;
+    color: #dc3545;
+  }
+
+  /* Chat Room Styles */
+  .messageBox {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 20px;
+    color: #333;
+  }
+
+  .messageBox h2 {
+    font-size: 1.25rem;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  .messages {
+    height: 300px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    /* 
+    background-color: #f9f9f9;
+    color: #007bff;
+    background-color: #666;
+    */
+  }
+
+  .messages .text {
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: #e9ecef;
+    /* background-color: #007bff; Change to blue */
+    color: #333; /* Ensure text is white for better contrast */
+    border-radius: 4px;
+  }
+
+  .messages .text span {
+    display: block;
+  }
+
+  .messages .text strong {
+    color: #007bff;
+  }
+
+  .messages .text .muted {
+    font-size: 0.875rem;
+    color: #666;
+  }
+
+  .inputs {
+    display: flex;
+    gap: 10px;
+  }
+
+  .inputs input[type="text"] {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+  }
+
+  .inputs button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .inputs button:hover {
+    background-color: #0056b3;
+  }