Update client/src/Chat.jsx

client/src/Chat.jsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 export default function Chat({ socket, roomId, name }) {
   const [messages, setMessages] = useState([]);
   const [text, setText] = useState('');
+  const logRef = useRef(null);
 
   useEffect(() => {
     const onMsg = (m) => setMessages((prev) => [...prev, m]);
@@ -12,6 +13,10 @@ export default function Chat({ socket, roomId, name }) {
     return () => { socket.off('chat_message', onMsg); socket.off('system', onSys); };
   }, [socket]);
 
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+  }, [messages]);
+
   const send = () => {
     if (!text.trim()) return;
     const m = { name, text, at: Date.now() };
@@ -21,15 +26,17 @@ export default function Chat({ socket, roomId, name }) {
   };
 
   return (
-    <div style={{ marginTop: 16 }}>
-      <div style={{ maxHeight: 200, overflow: 'auto', border: '1px solid #ddd', padding: 8 }}>
+    <div className="chat">
+      <div ref={logRef} className="chat-log">
         {messages.map((m, i) => (
-          <div key={i}><b>{m.name}:</b> {m.text}</div>
+          <div key={i} style={{ marginBottom:6 }}>
+            <b style={{ color:'var(--accent-2)' }}>{m.name}:</b> {m.text}
+          </div>
         ))}
       </div>
-      <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
-        <input value={text} onChange={e => setText(e.target.value)} placeholder="Type a message" style={{ flex: 1 }} />
-        <button onClick={send}>Send</button>
+      <div className="chat-input">
+        <input className="input" value={text} onChange={e => setText(e.target.value)} placeholder="Type a message" />
+        <button className="btn primary" onClick={send}>Send</button>
       </div>
     </div>
   );