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

add usernames, fix chat to bottom

Author: qiaoen17

Frontend/src/components/collab/Chat.jsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
-import { Accordion, ListGroup, ListGroupItem, Form, Button } from 'react-bootstrap';
+import React, {useState, useRef, useEffect} from 'react';
+import {Accordion, ListGroup, ListGroupItem, Form, Button, Badge} from 'react-bootstrap';
 
 const Chat = ({ currentUser, messages, sendMessage }) => {
     const [text, setText] = useState('');
+    const chatContainerRef = useRef(null);
+    const [isAccordionOpen, setIsAccordionOpen] = useState(true);
 
     const handleSend = () => {
         console.log("I am sending")
@@ -12,27 +14,61 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
         }
     };
 
+    useEffect(() => {
+        if (chatContainerRef.current) {
+            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+        }
+    }, [messages]);
+
     return (
-        <Accordion defaultActiveKey="0" className='mt-3'>
-                <Accordion.Item eventKey="0">
-                    <Accordion.Header>
-                        Chat
-                    </Accordion.Header>
-                    <Accordion.Body className="scrollable-accordion-body">
+        <Accordion defaultActiveKey="0" className='mt-3' onSelect={(eventKey) => setIsAccordionOpen(eventKey === "0")}>
+            <Accordion.Item eventKey="0">
+                <Accordion.Header>
+                    Chat
+                </Accordion.Header>
+                <Accordion.Body>
+                    <div
+                        ref={chatContainerRef}
+                        style={{
+                            maxHeight: '300px',
+                            overflowY: 'auto',
+                            marginBottom: '1rem',
+                        }}
+                    >
                         <ListGroup>
                             {messages.map((msg, idx) => (
-                                <ListGroupItem
-                                    key={idx}
-                                    style={{
-                                        backgroundColor: msg.sender === currentUser ? "#d1e7dd" : "#50d7da",
-                                        textAlign: msg.sender === currentUser ? "right" : "left"
-                                    }}
-                                >
-                                    {msg.text}
-                                </ListGroupItem>
+                                <>
+                                    <ListGroupItem
+                                        key={idx}
+                                        style={{
+                                            backgroundColor: msg.sender === currentUser ? "#d1e7dd" : "#50d7da",
+                                            textAlign: msg.sender === currentUser ? "right" : "left"
+                                        }}
+                                    >
+                                        {/* alternative: keep badge within same line*/}
+                                        {/*{msg.sender !== currentUser && <><Badge bg="secondary">{msg.sender}</Badge> {msg.text}</>}*/}
+                                        {/*{msg.sender === currentUser && <>{msg.text} <Badge bg="secondary">{msg.sender}</Badge></>}*/}
+
+                                        {msg.text}
+                                    </ListGroupItem>
+                                    <ListGroupItem
+                                        key={idx}
+                                        style={{
+                                            backgroundColor: "white",
+                                            textAlign: msg.sender === currentUser ? "right" : "left",
+                                            border: "none",
+                                            padding: "0",
+                                    }}>
+                                        <Badge bg="secondary">{msg.sender}</Badge>
+                                    </ListGroupItem>
+                                    {/* spacer */}
+                                    <div style={{ height: '10px' }}></div>
+                                </>
                             ))}
                         </ListGroup>
-                        <Form className="mt-3" onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
+                    </div>
+                    {isAccordionOpen && ( // Only show message input when accordion is open
+                        <Form onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
                             <Form.Group controlId="messageInput">
                                 <Form.Control
                                     type="text"
@@ -45,8 +81,9 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
                                 Send
                             </Button>
                         </Form>
-                    </Accordion.Body>
-                </Accordion.Item>
+                    )}
+                </Accordion.Body>
+            </Accordion.Item>
         </Accordion>
     );
 };