Merge branch 'main' into feat/collab-service/ai-chat

Author: dylkaw

collab-service/app/controller/collab-controller.js

@@ -4,6 +4,7 @@ import {
   getAllRooms,
   fetchRoomChatHistory,
   getQuestionIdByRoomId,
+  getAllRoomsByUserId,
 } from "../model/repository.js";
 import crypto from "crypto";
 
@@ -12,11 +13,13 @@ export async function createRoom(req, res) {
   const { user1, user2, question_id } = req.body;
 
   if (!user1 || !user2 || !question_id) {
-    return res.status(400).json({ error: "user1,user2 and question_id are required" });
+    return res
+      .status(400)
+      .json({ error: "user1,user2 and question_id are required" });
   }
 
   // Generate a unique room ID by hashing the two user IDs
-  const timeSalt = new Date().toISOString().slice(0, 13);
+  const timeSalt = new Date().toISOString().slice(0, 19);
   const roomId = crypto
     .createHash("sha256")
     .update(user1 + user2 + timeSalt)
@@ -58,6 +61,17 @@ export async function getAllRoomsController(req, res) {
   }
 }
 
+// Get all rooms by user
+export async function getAllRoomsByUser(req, res) {
+  const { user } = req.params;
+  const rooms = await getAllRoomsByUserId(user);
+
+  if (rooms) {
+    res.status(200).json(rooms);
+  } else {
+    res.status(500).json({ error: "Failed to retrieve rooms" });
+  }
+}
 export async function getRoomChatHistory(req, res) {
   const { roomId } = req.params;
 
@@ -86,6 +100,8 @@ export async function getQuestionId(req, res) {
   if (questionId) {
     res.status(200).json({ questionId });
   } else {
-    res.status(404).json({ error: `Question ID not found for room ID: ${roomId}` });
+    res
+      .status(404)
+      .json({ error: `Question ID not found for room ID: ${roomId}` });
   }
-}
+}

collab-service/app/model/repository.js

@@ -7,9 +7,6 @@ export async function connectToMongo() {
 
 export async function newRoom(user1, user2, roomId, questionId) {
   try {
-    // Remove any existing rooms where either user1 or user2 is a participant
-    await UsersSession.deleteMany({ users: { $in: [user1, user2] } });
-
     const newRoom = new UsersSession({
       users: [user1, user2],
       roomId: roomId,
@@ -45,6 +42,16 @@ export async function getAllRooms() {
   }
 }
 
+export async function getAllRoomsByUserId(user) {
+  try {
+    const rooms = await UsersSession.find({ users: user });
+    return rooms;
+  } catch (error) {
+    console.error("Error getting all rooms of user:", error);
+    return null;
+  }
+}
+
 // Function to add a new message to chatHistory with transaction support
 export async function addMessageToChat(roomId, userId, text) {
   // Start a session for the transaction
@@ -116,7 +123,6 @@ export async function getQuestionIdByRoomId(roomId) {
 
 export async function sendAiMessage(message) {
   try {
-    console.log("sending to openai");
     const response = await fetch("https://api.openai.com/v1/chat/completions", {
       method: "POST",
       headers: {

collab-service/app/model/usersSession-model.js

@@ -15,6 +15,11 @@ const messageSchema = new Schema({
     type: String,
     required: true,
   },
+  timestamp: {
+    type: Date,
+    required: true,
+    default: Date.now
+  },
 });
 
 const usersSessionSchema = new Schema({

collab-service/app/routes/collab-routes.js

@@ -3,8 +3,9 @@ import {
   createRoom,
   getRoomByUser,
   getAllRoomsController,
+  getAllRoomsByUser,
   getRoomChatHistory,
-  getQuestionId
+  getQuestionId,
 } from "../controller/collab-controller.js";
 import { sendAiMessageController } from "../controller/ai-controller.js";
 
@@ -16,6 +17,8 @@ router.get("/user/:user", getRoomByUser);
 
 router.get("/rooms", getAllRoomsController);
 
+router.get("/rooms/:user", getAllRoomsByUser);
+
 router.get("/chat-history/:roomId", getRoomChatHistory);
 
 router.get("/rooms/:roomId/questionId", getQuestionId);

frontend/app/app/history/page.tsx

@@ -0,0 +1,13 @@
+import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
+import UserRooms from "@/components/collab/user-rooms";
+import { Suspense } from "react";
+
+export default function CollabPage() {
+  return (
+    <AuthPageWrapper requireLoggedIn>
+      <Suspense>
+        <UserRooms />
+      </Suspense>
+    </AuthPageWrapper>
+  );
+}

frontend/components/collab/chat.tsx

@@ -11,12 +11,21 @@ import { io, Socket } from "socket.io-client";
 import { useAuth } from "@/app/auth/auth-context";
 import LoadingScreen from "@/components/common/loading-screen";
 import { sendAiMessage } from "@/lib/api/openai/send-ai-message";
+import { getChatHistory } from "@/lib/api/collab-service/get-chat-history";
 
 interface Message {
   id: string;
   userId: string;
   text: string;
   timestamp: Date;
+  messageIndex?: number;
+}
+
+interface ChatHistoryMessage {
+  messageIndex: number;
+  userId: string;
+  text: string;
+  timestamp: string;
 }
 
 export default function Chat({ roomId }: { roomId: string }) {
@@ -28,10 +37,45 @@ export default function Chat({ roomId }: { roomId: string }) {
   const [partnerMessages, setPartnerMessages] = useState<Message[]>([]);
   const [aiMessages, setAiMessages] = useState<Message[]>([]);
   const [isConnected, setIsConnected] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const lastMessageRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (!auth?.user?.id) return; // Avoid connecting if user is not authenticated
+    const fetchChatHistory = async () => {
+      try {
+        const response = await getChatHistory(roomId);
+
+        if (response.ok) {
+          const history: ChatHistoryMessage[] = await response.json();
+          const formattedHistory = history.map((msg) => ({
+            id: msg.messageIndex.toString(),
+            userId: msg.userId,
+            text: msg.text,
+            timestamp: new Date(msg.timestamp),
+            messageIndex: msg.messageIndex,
+          }));
+
+          formattedHistory.sort(
+            (a: Message, b: Message) =>
+              (a.messageIndex ?? 0) - (b.messageIndex ?? 0)
+          );
+
+          setPartnerMessages(formattedHistory);
+        }
+      } catch (error) {
+        console.error("Error fetching chat history:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (roomId) {
+      fetchChatHistory();
+    }
+  }, [roomId]);
+
+  useEffect(() => {
+    if (!auth?.user?.id) return;
 
     const socketInstance = io(
       process.env.NEXT_PUBLIC_COLLAB_SERVICE_URL || "http://localhost:3002",
@@ -52,7 +96,24 @@ export default function Chat({ roomId }: { roomId: string }) {
     });
 
     socketInstance.on("chatMessage", (message: Message) => {
-      setPartnerMessages((prev) => [...prev, message]);
+      setPartnerMessages((prev) => {
+        const exists = prev.some(
+          (msg) => msg.messageIndex === message.messageIndex
+        );
+        if (exists) return prev;
+
+        const newMessage = {
+          ...message,
+          id: message.messageIndex?.toString() || crypto.randomUUID(),
+          timestamp: new Date(message.timestamp),
+        };
+
+        const newMessages = [...prev, newMessage].sort(
+          (a, b) => (a.messageIndex ?? 0) - (b.messageIndex ?? 0)
+        );
+
+        return newMessages;
+      });
     });
 
     setSocket(socketInstance);
@@ -77,20 +138,19 @@ export default function Chat({ roomId }: { roomId: string }) {
   const sendMessage = async () => {
     if (!newMessage.trim() || !socket || !isConnected || !own_user_id) return;
 
-    const message = {
-      id: crypto.randomUUID(),
-      userId: own_user_id,
-      text: newMessage,
-      timestamp: new Date(),
-    };
-
     if (chatTarget === "partner") {
       socket.emit("sendMessage", {
         roomId,
         userId: own_user_id,
         text: newMessage,
       });
     } else {
+      const message: Message = {
+        id: crypto.randomUUID(),
+        userId: own_user_id,
+        text: newMessage,
+        timestamp: new Date(),
+      };
       setAiMessages((prev) => [...prev, message]);
       const response = await sendAiMessage(newMessage);
       const data = await response.json();
@@ -110,7 +170,10 @@ export default function Chat({ roomId }: { roomId: string }) {
   };
 
   const formatTimestamp = (date: Date) => {
-    return new Date(date).toLocaleTimeString([], {
+    if (!(date instanceof Date) || isNaN(date.getTime())) {
+      return "Invalid Date";
+    }
+    return date.toLocaleTimeString([], {
       hour: "2-digit",
       minute: "2-digit",
     });
@@ -134,7 +197,7 @@ export default function Chat({ roomId }: { roomId: string }) {
     </div>
   );
 
-  if (!own_user_id) {
+  if (!own_user_id || isLoading) {
     return <LoadingScreen />;
   }
 

frontend/components/collab/collab-room.tsx

@@ -4,16 +4,19 @@ import { X } from "lucide-react";
 import Chat from "./chat";
 import QuestionDisplay from "./question-display";
 import CodeEditor from "./code-editor";
+import Link from "next/link";
 
 export default function CollabRoom({ roomId }: { roomId: string }) {
   return (
     <div className="h-full flex flex-col mx-4 p-4">
       <header className="flex justify-between border-b">
         <h1 className="text-2xl font-bold mb-4">Collab Room {roomId}</h1>
-        <Button variant="destructive">
-          Leave Room
-          <X className="ml-2" />
-        </Button>
+        <Link href="/app/history">
+          <Button variant="destructive">
+            Leave Room
+            <X className="ml-2" />
+          </Button>
+        </Link>
       </header>
       <div className="flex flex-1">
         <div className="w-2/5 p-4 flex flex-col space-y-4">

frontend/components/collab/question-display.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import clsx from "clsx";
 import {
   Card,
   CardContent,
@@ -26,7 +27,15 @@ interface Question {
   description: string;
 }
 
-export default function QuestionDisplay({ roomId }: { roomId: string }) {
+export default function QuestionDisplay({
+  roomId,
+  className,
+  date,
+}: {
+  roomId: string;
+  className?: string;
+  date?: Date;
+}) {
   const auth = useAuth();
   const token = auth?.token;
   const [question, setQuestion] = useState<Question | null>(null);
@@ -66,16 +75,21 @@ export default function QuestionDisplay({ roomId }: { roomId: string }) {
   if (!question) {
     return <div>Question not found</div>;
   }
+  date && console.log(date.toLocaleString());
+  date && console.log(date.toLocaleString("en-GB"));
 
   return (
-    <Card className="flex-shrink-0">
+    <Card className={clsx("flex-shrink-0", className)}>
       <CardHeader>
         <CardTitle>{question.title}</CardTitle>
-        <CardDescription className="flex items-center space-x-2">
-          <span>{question.categories}</span>
-          <Badge className={`${difficultyColors[question.complexity]}`}>
-            {question.complexity}
-          </Badge>
+        <CardDescription className="flex items-center justify-between">
+          <div className="flex space-x-2">
+            <span>{question.categories}</span>
+            <Badge className={`${difficultyColors[question.complexity]}`}>
+              {question.complexity}
+            </Badge>
+          </div>
+          {date && <span>{new Date(date).toLocaleString()}</span>}
         </CardDescription>
       </CardHeader>
       <CardContent>