style: update the chat item

Co-authored-by: Yurii Kinakh <yuriikinakh5@gmail.com>

Author: ye231101

src/App.css

@@ -252,7 +252,8 @@
   max-height: 100% !important;
   display: flex !important;
   flex-direction: column !important;
-  gap: 8px !important;
+  align-items: flex-start !important;
+  gap: 6px !important;
   margin-top: auto !important;
   padding: 0 16px !important;
   pointer-events: auto !important;
@@ -265,37 +266,17 @@
 }
 
 .vp-chat-message {
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: flex-start !important;
-  gap: 8px !important;
-}
-
-.vp-chat-avatar {
-  width: 32px !important;
-  height: 32px !important;
-  flex-shrink: 0 !important;
-  border-radius: 50% !important;
-  object-fit: cover !important;
-}
-
-.vp-chat-content {
   display: flex !important;
   flex-direction: column !important;
-  gap: 2px !important;
-}
-
-.vp-chat-username {
-  color: rgba(255, 255, 255, 0.85) !important;
-  font-size: 14px !important;
-  line-height: 1 !important;
-  font-weight: bold !important;
+  padding: 4px 8px !important;
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-radius: 4px !important;
 }
 
-.vp-chat-text {
+.vp-chat-message-text {
   color: #ffffff !important;
-  font-size: 16px !important;
-  line-height: 1 !important;
+  font-size: 15px !important;
+  line-height: 1.2 !important;
   word-break: break-word !important;
 }
 

src/components/RoomScreen.js

@@ -62,26 +62,10 @@ function useChat() {
   const [messages, setMessages] = useState([]);
   const [message, setMessage] = useState('');
 
-  useEffect(() => {
-    const handleData = (payload) => {
-      try {
-        const decoder = new TextDecoder();
-        const json = JSON.parse(decoder.decode(payload));
-        if (json.message) {
-          setMessages((prev) => [...prev, json]);
-        }
-      } catch (e) {
-        console.error('Failed to parse chat message', e);
-      }
-    };
-    room.on(RoomEvent.DataReceived, handleData);
-    return () => room.off(RoomEvent.DataReceived, handleData);
-  }, [room]);
-
   const sendMessage = useCallback(() => {
     const text = message.trim();
     if (!text) return;
-    const msg = { username: USERNAME, avatar: 'default.jpg', message: text };
+    const msg = { id: crypto.randomUUID(), username: USERNAME, message: text, time: Date.now() };
     try {
       const encoder = new TextEncoder();
       room.localParticipant.publishData(encoder.encode(JSON.stringify(msg)), { reliable: true });
@@ -289,18 +273,9 @@ function RoomContainer({ roomName, onLeave }) {
       {remoteParticipants.length > 0 && (
         <div className="vp-chat-overlay">
           <div className="vp-chat-messages">
-            {messages.map((msg, i) => (
-              <div key={i} className="vp-chat-message">
-                <img
-                  src={AVATAR_URL + (msg.avatar || 'default.jpg')}
-                  alt={msg.username}
-                  className="vp-chat-avatar"
-                  crossOrigin="anonymous"
-                />
-                <div className="vp-chat-content">
-                  <span className="vp-chat-username">{msg.username}</span>
-                  <span className="vp-chat-text">{msg.message}</span>
-                </div>
+            {messages.map((msg) => (
+              <div key={msg.id} className="vp-chat-message">
+                <span className="vp-chat-message-text">{msg.message}</span>
               </div>
             ))}
             <div ref={messagesEndRef} />