feat: add the chat

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

Author: ye231101

src/App.css

@@ -85,7 +85,7 @@
 .vp-connecting-overlay {
   position: absolute !important;
   top: 64px !important;
-  bottom: 136px !important;
+  bottom: 64px !important;
   left: 0 !important;
   right: 0 !important;
   z-index: 9 !important;
@@ -283,7 +283,7 @@
 .vp-live-status-bar {
   position: absolute !important;
   left: 50% !important;
-  bottom: 40px !important;
+  bottom: 76px !important;
   transform: translateX(-50%) !important;
   z-index: 11 !important;
   width: min(320px, calc(100% - 32px)) !important;
@@ -328,6 +328,122 @@
   line-height: 1 !important;
 }
 
+.vp-chat-overlay {
+  position: absolute !important;
+  top: 64px !important;
+  bottom: 56px !important;
+  left: 0 !important;
+  right: 48px !important;
+  z-index: 9 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+}
+
+.vp-chat-messages {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 8px !important;
+  overflow-y: auto !important;
+  padding: 0 16px !important;
+  max-height: 100% !important;
+  margin-top: auto !important;
+  pointer-events: auto !important;
+  scrollbar-width: none !important;
+}
+
+.vp-chat-messages::-webkit-scrollbar {
+  display: none !important;
+}
+
+.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;
+  border-radius: 9999px !important;
+  object-fit: cover !important;
+  flex-shrink: 0 !important;
+  border: 1.5px solid rgba(255, 255, 255, 0.35) !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;
+}
+
+.vp-chat-text {
+  color: #ffffff !important;
+  font-size: 16px !important;
+  line-height: 1 !important;
+  word-break: break-word !important;
+}
+
+.vp-chat-input-bar {
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 9 !important;
+  height: 56px !important;
+  display: flex !important;
+  align-items: center !important;
+  padding: 0 16px !important;
+}
+
+.vp-chat-input-container {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  height: 40px !important;
+  border: 1px solid #ffffff !important;
+  border-radius: 9999px !important;
+  padding: 0 6px 0 16px !important;
+}
+
+.vp-chat-input {
+  flex: 1 !important;
+  height: 100% !important;
+  background: transparent !important;
+  border: none !important;
+  color: #ffffff !important;
+  font-size: 14px !important;
+  padding: 0 !important;
+  outline: none !important;
+}
+
+.vp-chat-input::placeholder {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.vp-chat-send-btn {
+  width: 32px !important;
+  height: 32px !important;
+  flex-shrink: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 9999px !important;
+  background: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
 @media (min-width: 768px) {
   .vp-room {
     bottom: 20px !important;

src/components/RoomScreen.js

@@ -6,10 +6,11 @@ import {
   VideoTrack,
   useLocalParticipant,
   useRemoteParticipants,
+  useRoomContext,
   useTracks,
 } from '@livekit/components-react';
 import { Track, AudioPresets, RoomEvent, VideoQuality } from 'livekit-client';
-import { AudioLines, X } from 'lucide-react';
+import { AudioLines, X, SendHorizonal } from 'lucide-react';
 import { api } from '../utils/api';
 import { AVATAR_URL, LIVEKIT_URL, USERNAME } from '../utils/constants';
 
@@ -56,6 +57,44 @@ function useMediaControls() {
   };
 }
 
+function useChat() {
+  const room = useRoomContext();
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = 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 = input.trim();
+    if (!text) return;
+    const msg = { username: USERNAME, avatar: 'default.jpg', message: text };
+    try {
+      const encoder = new TextEncoder();
+      room.localParticipant.publishData(encoder.encode(JSON.stringify(msg)), { reliable: true });
+    } catch (e) {
+      console.error('Failed to send chat message', e);
+    }
+    setMessages((prev) => [...prev, msg]);
+    setInput('');
+  }, [input, room]);
+
+  return { messages, input, setInput, sendMessage };
+}
+
 function ParticipantTile({ participant }) {
   const tracks = useTracks(
     [
@@ -98,6 +137,12 @@ function ParticipantTile({ participant }) {
 
 function RoomContainer({ roomName, onLeave }) {
   const { isMuted, enableMic, disableMic } = useMediaControls();
+  const { messages, input, setInput, sendMessage } = useChat();
+  const messagesEndRef = useRef(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
 
   const hadRemoteParticipantRef = useRef(false);
 
@@ -202,6 +247,43 @@ function RoomContainer({ roomName, onLeave }) {
         ) : null}
         <span className="vp-live-status-subtitle">Your camera stays off</span>
       </div>
+
+      <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"
+                onError={(e) => { e.currentTarget.src = AVATAR_URL + 'default.jpg'; }}
+              />
+              <div className="vp-chat-content">
+                <span className="vp-chat-username">{msg.username}</span>
+                <span className="vp-chat-text">{msg.message}</span>
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+
+      {remoteParticipants.length > 0 && <div className="vp-chat-input-bar">
+        <div className="vp-chat-input-container">
+          <input
+            className="vp-chat-input"
+            type="text"
+            placeholder="Type a message..."
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') sendMessage(); }}
+          />
+          <button className="vp-chat-send-btn" onClick={sendMessage} aria-label="Send">
+            <SendHorizonal size={20} color="white" />
+          </button>
+        </div>
+      </div>}
     </div>
   );
 }