PR for Imagine Chat Component

client/src/components/all-components/imagine-components/Chat.js

@@ -0,0 +1,104 @@
+
+import React, { useState , useEffect} from "react";
+import PropTypes from "prop-types";
+import "./chatStyle.css"
+
+export const ChatComponent =  (props) =>{
+    const {onSubmit,height,width,teammateMessage} = props
+    const [reply,setReply] = useState("")
+    const [showReply,setShowReply] = useState(false)
+    const [isDisabled,setIsDisabled] = useState(false)
+    const [inputValue,setInputValue] = useState("")
+    const [time,setTime] = useState(new Date())
+
+    //logging the group to check that the correct chat is rendered
+    const onHandle = (e) =>{
+        const value = e.target.value
+        setInputValue(value)
+        setShowReply(false)
+    }
+
+    useEffect(()=>{
+        const timer = setInterval(() => {
+        setTime(new Date());
+        }, 1000);
+        return () => clearInterval(timer);
+    },[])
+
+    const submit = async (e) =>{
+        e.preventDefault();
+        if (inputValue.trim().length > 0) {
+            const reply = inputValue
+            setReply(reply)
+            setShowReply(true);
+            setIsDisabled(true)
+            setInputValue("")
+            await onSubmit(reply)
+        }
+    }
+
+    const actualTime = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+
+    return (
+           <>
+    <div className="chat-container" style={{ width: `${width}px`, height: `${height}px` }}>
+            <div className="inner-chat-container">
+                <div className="messages">
+                    <div className="teammateMessagesContainer">
+                        <img className="user-image " 
+                            src="/img/imagine26/activityImages/user.png" 
+                            alt="profile"
+                        />
+                        <div className="message-content">
+                            <div className="message-header">
+                                <span className="username">Teammate</span>
+                                <span className="time">{actualTime}</span>
+                            </div>
+                            <p className="message-text">
+                                {teammateMessage || "add a message"}
+                            </p>
+                        </div>
+                    </div>
+
+                    {showReply && (
+                        <div className="userMessageContainer">
+                            <img className="user-image " src="/img/imagine26/activityImages/user-2.png" alt="profile" />
+                            <div className="message-content">
+                                <div className="message-header">
+                                    <span className="username">You</span>
+                                    <span className="time">{actualTime}</span>
+                                </div>
+                                <p className="message-text">{reply}</p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <form onSubmit={submit} className="input-form">
+                    <div className="input-container">
+                        <input
+                            type="text"
+                            className="chat-input"
+                            value={inputValue}
+                            onChange={onHandle}
+                            placeholder="Respond to your teammate"
+                            disabled={isDisabled}
+                        />
+                        <button disabled={isDisabled} type="submit" className="send-button">
+                            <img className="send-icon" src="/img/imagine26/activityImages/send.png" alt="send" />
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </>
+)
+}
+
+ChatComponent.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  width: PropTypes.string.isRequired,
+  height:PropTypes.string.isRequired,
+  teammateMessage: PropTypes.string.isRequired
+};
+

client/src/components/all-components/imagine-components/chatStyle.css

@@ -0,0 +1,125 @@
+.chat-container {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2.5rem;
+}
+
+.inner-chat-container {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    border-style: solid;
+    border-width: 0.4rem;
+    border-top-color: #0d28bc;
+    border-right-color: #0d28bc;
+    border-bottom-color: #ffc334 ;
+    border-left-color: #ffc334;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.messages {
+    display: flex;
+    flex-direction: column;
+    overflow-y:auto;
+    flex:1;
+    padding-top: 1rem;
+}
+
+.teammateMessagesContainer, 
+.userMessageContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0.75rem 1.5rem;
+    transition: background-color 0.2s;
+}
+
+
+.user-image {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.message-content{
+    margin-left: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.message-header {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+}
+
+.username {
+    font-size: 0.875rem;
+    font-weight: 800;
+    color: #0d28bc;
+}
+
+.time {
+    font-size: 10px;
+    color: #94a3b8;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.message-text {
+    font-size: 1rem;
+    color: #334155;
+    font-weight: 500;
+    margin: 0;
+    text-align: left;
+}
+
+.input-form {
+    left: 2rem;
+    right: 2rem;
+    padding-bottom: 1rem;
+}
+
+.input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.chat-input {
+    width: 100%;
+    border: 2px solid #e2e8f0;
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    padding-right: 3rem;
+    font-weight: 600;
+    overflow-y: auto;
+    resize: none;
+    height: 50px;
+}
+
+.send-button {
+    position: absolute;
+    right: 0.5rem;
+    background: transparent;
+    border: none;
+    padding-right: 0.5rem;
+    cursor: pointer;
+}
+
+.send-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.send-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+}