Merge pull request #40 from charlenetcy/develop

feat(collaboration-service): Implement chat feature

Author: ChinZJ

collaboration-service/Dockerfile

@@ -21,4 +21,4 @@ COPY . .
 EXPOSE 8082
 
 # Start the application
-CMD sh -c 'echo "SUPABASE_URL=$SUPABASE_URL" > .env && echo "SUPABASE_KEY=$SUPABASE_KEY" >> .env && echo "JWT_SECRET=$JWT_SECRET" >> .env && npm run dev'
+CMD sh -c 'echo "SUPABASE_URL=$SUPABASE_URL" > .env && echo "SUPABASE_KEY=$SUPABASE_KEY" >> .env && echo "JWT_SECRET=$JWT_SECRET" >> .env && echo "USER_SERVICE_URL=$USER_SERVICE_URL" >> .env && npm run dev'

collaboration-service/src/party/codeServer.ts

@@ -7,12 +7,32 @@ import * as Y from 'yjs';
 import {parseCookies} from '../utils/cookies.js';
 import {verifyToken} from '../utils/jwt.js';
 import {getDocument, upsertDocument, checkRoomExists, checkUserVerified} from '../storage/db.js';
+
+const CHAT_HISTORY_LIMIT = 500;
+const CHAT_COLLECTION_KEY = 'chatMessages';
+const EXECUTION_STATE_KEY = 'executionState';
+
+function ensureSharedStructures(doc: Y.Doc) {
+  doc.getText('codemirror');
+  doc.getMap<string>('config');
+  doc.getArray(CHAT_COLLECTION_KEY);
+  doc.getMap(EXECUTION_STATE_KEY);
+}
+
+function pruneChatHistory(doc: Y.Doc) {
+  const chatArray = doc.getArray(CHAT_COLLECTION_KEY);
+  if (chatArray.length <= CHAT_HISTORY_LIMIT) {
+    return;
+  }
+  const excess = chatArray.length - CHAT_HISTORY_LIMIT;
+  chatArray.delete(0, excess);
+}
 // import {roomRouter} from '../api/roomRoutes.js';
 
 export default class YjsServer implements Party.Server {
   constructor(public room: Party.Room) {}
 
-  static async onBeforeConnect(request: Party.Request, lobby: Party.Lobby) {
+  static async onBeforeConnect(request: Party.Request, _lobby: Party.Lobby) {
     try {
       const cookieHeader = request.headers.get('cookie');
       if (!cookieHeader) {
@@ -46,15 +66,28 @@ export default class YjsServer implements Party.Server {
         return new Response('Room not found', {status: 404});
       }
 
-      const isUserVerified = await checkUserVerified(payload.userId.toString(), roomId);
+      // const isUserVerified = await checkUserVerified(payload.userId.toString(), roomId);
 
-      if (!isUserVerified) {
-        console.error(`User not authorised to enter this room`);
-        return new Response('Unauthorised : User not authorised to enter this room', {status: 401});
-      }
+      // if (!isUserVerified) {
+      //   console.error(`User not authorised to enter this room`);
+      //   return new Response('Unauthorised : User not authorised to enter this room', {status: 401});
+      // }
 
       request.headers.set('X-User-ID', payload.userId.toString());
-      request.headers.set('X-Session-ID', payload.sessionId.toString());
+
+      if (payload.sessionId) {
+        try {
+          request.headers.set('X-Session-ID', payload.sessionId.toString());
+        } catch (sessionIdError) {
+          console.warn(
+            'Session ID missing or malformed on token payload',
+            sessionIdError,
+            payload.sessionId
+          );
+        }
+      } else {
+        console.info('Session ID not present on token payload; continuing without it');
+      }
 
       return request;
     } catch (e) {
@@ -85,14 +118,19 @@ export default class YjsServer implements Party.Server {
             try {
               const buffer = Buffer.from(data.document, 'base64');
               Y.applyUpdate(doc, new Uint8Array(buffer));
+              ensureSharedStructures(doc);
+              pruneChatHistory(doc);
             } catch (parseErr) {
               console.warn(`[${room.id}] Data corrupted, creating new document`);
             }
           } else {
             console.log(`[${room.id}] No existing document found, creating new document`);
+            ensureSharedStructures(doc);
           }
 
           // Return the Yjs document to y-partykit to manage
+          ensureSharedStructures(doc);
+          pruneChatHistory(doc);
           return doc;
         } catch (err) {
           console.error(`[${room.id}] Load failed:`, err);
@@ -105,6 +143,7 @@ export default class YjsServer implements Party.Server {
 
           // convert the Yjs document to a Uint8Array
           try {
+            pruneChatHistory(doc);
             const content = Y.encodeStateAsUpdate(doc);
 
             // Save the document to the database

docker-compose.yml

@@ -178,6 +178,7 @@ services:
       - SUPABASE_URL=${SUPABASE_URL}
       - SUPABASE_KEY=${SUPABASE_KEY}
       - JWT_SECRET=${JWT_SECRET}
+      - USER_SERVICE_URL=${USER_SERVICE_URL}
     env_file:
       - ./.env
     volumes:

frontend/src/collaboration/components/ChatPanel.tsx

@@ -0,0 +1,77 @@
+import React, {useState, useRef, useEffect} from 'react';
+import YPartyKitProvider from 'y-partykit/provider';
+import {Send} from 'lucide-react';
+import {useChat, type ChatMessage} from '../hooks/useChat';
+
+export function ChatPanel({provider}: {provider: YPartyKitProvider | null}) {
+  const {messages, sendMessage, isReady} = useChat({provider});
+  const [newMessage, setNewMessage] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const handleSend = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage(newMessage);
+    setNewMessage('');
+  };
+
+  // Auto-scroll to the bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
+  }, [messages]);
+
+  if (!isReady) {
+    return <div className="p-4 text-sm text-gray-500">Chat connecting...</div>;
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-white border-l border-gray-200">
+      <div className="p-4 border-b border-gray-200">
+        <h2 className="font-semibold text-gray-800">Session Chat</h2>
+      </div>
+
+      {/* Message List */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map(msg => (
+          <MessageItem key={msg.id} msg={msg} />
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Message Input Form */}
+      <div className="p-4 border-t border-gray-200 bg-gray-50">
+        <form onSubmit={handleSend} className="flex space-x-2">
+          <input
+            type="text"
+            value={newMessage}
+            onChange={e => setNewMessage(e.target.value)}
+            placeholder="Type a message..."
+            className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            autoComplete="off"
+          />
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-400"
+            disabled={!newMessage.trim()}
+          >
+            <Send size={16} />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function MessageItem({msg}: {msg: ChatMessage}) {
+  const sentDate = new Date(msg.timestamp);
+  const time = sentDate.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center space-x-2">
+        <span className="font-semibold text-sm text-gray-800">{msg.username}</span>
+        <span className="text-xs text-gray-400">{time}</span>
+      </div>
+      <p className="text-sm text-gray-700">{msg.text}</p>
+    </div>
+  );
+}

frontend/src/collaboration/components/CollabEditor.tsx

@@ -1,17 +1,29 @@
+import type YPartyKitProvider from 'y-partykit/provider';
 import useCollabEditor from '../hooks/useCollabEditor';
 import CodeMirror from './CodeMirror';
 import React from 'react';
 
 const LANGUAGE_OPTIONS = [
-  { value: 'python', label: 'Python' },
-  { value: 'javascript', label: 'JavaScript' },
-  { value: 'cpp', label: 'C++' },
-  { value: 'java', label: 'Java' },
-  { value: 'default', label: 'Plain Text' },
+  {value: 'python', label: 'Python'},
+  {value: 'javascript', label: 'JavaScript'},
+  {value: 'cpp', label: 'C++'},
+  {value: 'java', label: 'Java'},
+  {value: 'default', label: 'Plain Text'},
 ];
 
-export default function CollabEditor({roomId}: {roomId: string}) {
-  const {ytext, awareness, isReady, languageConfig, setSharedLanguage} = useCollabEditor({roomId});
+export default function CollabEditor({
+  roomId,
+  provider,
+}: {
+  roomId: string;
+  provider: YPartyKitProvider;
+}) {
+  // const {ytext, awareness, isReady, languageConfig, setSharedLanguage} = useCollabEditor({roomId});
+  const {ytext, awareness, isReady, languageConfig, setSharedLanguage} = useCollabEditor({
+    roomId,
+    provider,
+  });
+
   if (!isReady || !ytext) {
     return <div>Loading...</div>;
   }
@@ -22,14 +34,26 @@ export default function CollabEditor({roomId}: {roomId: string}) {
 
   return (
     <div style={{padding: '20px'}}>
-      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '10px',
+        }}
+      >
         <h2>Happy Coding :D</h2>
         <label>
-          Language: 
-          <select 
-            value={languageConfig} 
+          Language:
+          <select
+            value={languageConfig}
             onChange={handleLanguageChange}
-            style={{marginLeft: '10px', padding: '5px', borderRadius: '4px', border: '1px solid #ccc'}}
+            style={{
+              marginLeft: '10px',
+              padding: '5px',
+              borderRadius: '4px',
+              border: '1px solid #ccc',
+            }}
           >
             {LANGUAGE_OPTIONS.map(option => (
               <option key={option.value} value={option.value}>

frontend/src/collaboration/components/SubmissionPanel.tsx

@@ -1,15 +1,21 @@
 import {Send, Code, Image, Play, Eye, LogOut, Mic, Video} from 'lucide-react';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import ConfirmDialog from '../../components/ConfirmDialog';
+import {ChatPanel} from './ChatPanel';
+import YPartyKitProvider from 'y-partykit/provider';
+import type {AwarenessUser} from '../hooks/useCollabRoom';
 
 export default function SubmissionPanel({
   isPenaltyOver,
   handleLeaveRoom,
+  provider,
 }: {
   isPenaltyOver: boolean;
   handleLeaveRoom: () => void;
+  provider: YPartyKitProvider | null;
 }) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [users, setUsers] = useState<AwarenessUser[]>([]);
 
   function handleEndSession() {
     setIsDialogOpen(true);
@@ -25,52 +31,67 @@ export default function SubmissionPanel({
     }
     handleLeaveRoom();
   }
+
+  useEffect(() => {
+    if (!provider) {
+      setUsers([]);
+      return;
+    }
+
+    const awareness = provider.awareness; // Get awareness from the provider
+
+    const updateUsers = () => {
+      const states = Array.from(awareness.getStates().values());
+      const userList = states.map(state => state.user).filter(Boolean) as AwarenessUser[];
+      setUsers(userList);
+    };
+
+    awareness.on('change', updateUsers);
+    updateUsers(); // Initial load
+
+    return () => {
+      awareness.off('change', updateUsers);
+      setUsers([]); // Cleanup state
+    };
+  }, [provider]);
+
+  const localUser = provider?.awareness.getLocalState()?.user as AwarenessUser | undefined;
+
+  // Find the first user in the list who is not the local user
+  const otherUser = users.find(u => u.name !== localUser?.name);
+
   return (
     <div className="w-96 bg-white border-l border-gray-200 flex flex-col">
       {/* User Avatars */}
       <div className="p-4 border-b border-gray-200 flex space-x-3">
-        <div className="flex-1 bg-blue-500 rounded-lg p-4 text-white flex flex-col items-center justify-center">
-          <Mic size={20} className="mb-1" />
-          <Video size={20} className="mb-2" />
-          <span className="font-semibold text-lg">You</span>
-        </div>
-        <div className="flex-1 bg-green-500 rounded-lg p-4 text-white flex items-center justify-center">
-          <span className="font-semibold text-lg">Alex</span>
-        </div>
-      </div>
-
-      {/* Chat Header */}
-      <div className="px-4 py-3 border-b border-gray-200">
-        <h2 className="font-semibold text-lg">Chat</h2>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        <div className="text-left">
-          <div className="text-xs text-gray-500 mb-1">Alex · 2:14 PM</div>
-          <div className="inline-block bg-gray-100 rounded-lg px-3 py-2 text-sm">
-            Hey! Ready to chat?
+        {localUser && (
+          <div
+            className="flex-1 rounded-lg p-4 text-white flex flex-col items-center justify-center"
+            style={{backgroundColor: localUser.color}}
+          >
+            <Mic size={20} className="mb-1" />
+            <Video size={20} className="mb-2" />
+            <span className="font-semibold text-lg">{localUser.name} (You)</span>
           </div>
-        </div>
-
-        <div className="text-right">
-          <div className="text-xs text-gray-500 mb-1 text-right">You · 2:15 PM</div>
-          <div className="inline-block bg-blue-500 text-white rounded-lg px-3 py-2 text-sm">
-            Nope! This feature is under construction
+        )}
+        {otherUser && (
+          <div
+            className="flex-1 rounded-lg p-4 text-white flex items-center justify-center"
+            style={{backgroundColor: otherUser.color}}
+          >
+            <span className="font-semibold text-lg">{otherUser.name}</span>
           </div>
-        </div>
+        )}
+        {!otherUser && (
+          <div className="flex-1 bg-gray-200 rounded-lg p-4 text-gray-500 flex items-center justify-center">
+            <span className="font-semibold text-lg">Waiting...</span>
+          </div>
+        )}
       </div>
 
-      {/* Message Input */}
-      <div className="flex items-center space-x-2 mb-3">
-        <input
-          type="text"
-          placeholder="Type a message..."
-          className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-        />
-        <button className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-lg">
-          <Send size={18} />
-        </button>
+      {/*Chat Panel*/}
+      <div className="flex-1 flex flex-col h-0">
+        <ChatPanel provider={provider} />
       </div>
 
       <div className="p-4 border-t border-gray-200">