chat template

client/src/components/Negotiate/Chat.jsx

@@ -1,20 +1,58 @@
-import './chat.css'
+import './chat.css';
+import { useState, useRef, useEffect } from 'react';
 
 export default function Chat() {
+  // State for the input text and messages
+  const [text, setText] = useState('');
+  const [messages, setMessages] = useState([]);
+
+  // Refs for the container and the last message
+  const messagesEndRef = useRef(null);
+
+  // Scroll to the bottom whenever messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Handle the click event to add a new message
+  const handleClick = () => {
+    if (text.trim()) {
+      setMessages([...messages, text]);
+      setText('');
+    }
+  };
+
+  // Handle the change event for the textarea
+  const handleChange = (event) => {
+    setText(event.target.value);
+  };
+
   return (
-    <div className='chatui'>
+    <div className='chatui' id="chatmain">
       <nav>
         <header>
-            <h1>person chatting with</h1>
+          <h1>Person chatting with</h1>
         </header>
       </nav>
       <main className='chats-display'>
-        <h1>chats display</h1>
+        {messages.map((msg, index) => (
+          <div key={index} className="container">
+            <span>{msg}</span>
+          </div>
+        ))}
+        {/* Empty div to scroll to */}
+        <div ref={messagesEndRef} />
       </main>
       <footer className='chatbar'>
-        <textarea name="negotiate" id="chat" placeholder='enter text'></textarea>
-        <button>Send</button>
+        <textarea
+          name="negotiate"
+          id="chat"
+          placeholder='Enter text'
+          value={text}
+          onChange={handleChange}
+        />
+        <button onClick={handleClick}>Send</button>
       </footer>
     </div>
-  )
+  );
 }

client/src/components/Negotiate/chat.css

@@ -9,6 +9,7 @@ header{
     position: absolute;
     text-align: center;
     border: 2px solid red;
+    overflow: scroll;
 }
 footer{
     position: relative;
@@ -20,4 +21,5 @@ footer>textarea{
     width: 80vw;
     text-align: center;
     font-size: 19px;
+    color: black;
 }