Merge pull request #49 from CS3219-AY2425S1/improve-chat-interface

reinstate chat messages

Author: qiaoen17

Frontend/src/App.css

@@ -28,6 +28,11 @@
   color: #61dafb;
 }
 
+.scrollable-accordion-body {
+  max-height: 300px; /* Set the maximum height */
+  overflow-y: auto;  /* Enable vertical scrolling */
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

Frontend/src/components/collab/Chat.jsx

@@ -18,7 +18,7 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
                     <Accordion.Header>
                         Chat
                     </Accordion.Header>
-                    <Accordion.Body>
+                    <Accordion.Body className="scrollable-accordion-body">
                         <ListGroup>
                             {messages.map((msg, idx) => (
                                 <ListGroupItem

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -114,7 +114,8 @@ const CollaborationSpace = () => {
                     setLoading(false);
                     break;
                 case 'newMessage':
-                    console.log("adding message", data.message)
+                    console.log("adding message", data.message);
+                    setMessages((prevMessages) => [...prevMessages, data.message]);
                     break;
                 case 'languageChange':
                     addNotif(`User ${data.user} has changed the language to ${data.language}`);