Add more languages (#22)

* Add POST API for execution service

* Rewrite execution service to running code only

* WIP: latest changes before merging dev

* Modify docker-compose.yml

* Merge collaboration service and change execution-service

* feat(collaboration-service-frontend):

- Integrate collaboration service backend with into Code Editor panel
on /practice/:id pages.
- Add placeholder panels for Question, Communication, Code Execution.

* fix(code-editor-panel): dynamic loading monaco editor on client

* Error handling when worker can't connect to PistonAPI

* Add Agora Token generator

* Add CI workflow for execution service

* Integrate collaboration and execution, todo: broadcast to FE, and send code from FE

* Integrate code execution to collab FE

* Fix rabbitMQ startup error

* Add sync error output when execution dies

* Fix lock file

* Clean execution service

* Change buildToken function

* Clean execution service and add .env example

* Add .env example

* Update README to include installation instructions for Piston language packages on Linux/Mac and Windows

* Fix camera panel

* Fix error message

* Add error handling when video-call-service dies

* Add languages and fix executing button

* feat(frontend): implement question service (#15)

* add question page and forms to create, edit, and view questions

* Add dummy functions to integrate with question service backend

* Fix bug in public-route to redirect based on user role

* Add protected route for QuestionViewPage

* update pnpm-lock.yaml

* Add function to auto-create admin user

* Add dropdown menu for topic selection

* update pnpm-lock

* update docker-compose to include health checks for mongodb and kafka

* update question schema and functionalities

* add solution schema and seeding

* wip: integrate question service backend

* update schema and controllers to faciliate question status

* update seed for question and solution

* update schema to allow solution fetching for corresponding question and programming language

* update frontend integration to match backend schema

* fix eslint warning

* add archived questions view and integrate restore question endpoint

* fix solution fetching logic and sanitise

* fix restore functionality bug

* refactor: update MongoDB URI environment variable and enhance question details retrieval

- Changed environment variable from MONGODB_URI to MONGO_URI in docker-compose.yml.
- Updated fetchQuestionDetails method in RoomController to include archived questions in the API request.
- Modified frontend components to display question status, including an "Archived" badge where applicable.
- Updated API client to support fetching archived questions.

* chore: update pnpm-lock.yaml

* add .dockerignore

* chore: update docker-compose.yml to add environment variables and service dependencies

* update auto-seeding functionality for question solutions

---------

Co-authored-by: Chi Thanh <[email protected]>
Co-authored-by: TramMinhMan <[email protected]>

* Fix dashboard's command list

---------

Co-authored-by: k1b1t0 <[email protected]>
Co-authored-by: Nguyen Cao Duy <[email protected]>
Co-authored-by: TramMinhMan <[email protected]>
Co-authored-by: songgthu <[email protected]>
Co-authored-by: Chi Thanh <[email protected]>

Author: 6 people

backend/collaboration-service/src/http/codeExecutionRoutes.js

@@ -7,7 +7,7 @@ const router = express.Router();
 const RABBITMQ_URL = 'amqp://user:password@rabbitmq';
 const QUEUE_NAME = 'execution_jobs';
 
-const EXECUTION_TIMEOUT_MS = 30000 // 30s
+const EXECUTION_TIMEOUT_MS = 60000 // 60s
 const activeTimers = new Map()
 
 let mqChannel = null
@@ -59,6 +59,9 @@ router.post("/submit-code", async (req, res) => {
         }
 
         console.log(">>> Got code ", job)
+        roomManager.broadcastToRoom(room_id, {
+            type: "code-execution-started"
+        })
 
         // delete old timers
         if (activeTimers.has(room_id)) {

backend/collaboration-service/src/models/roomModel.js

@@ -18,7 +18,21 @@ const roomSchema = new mongoose.Schema(
     },
     programmingLanguage: {
       type: String,
-      enum: ["cpp", "java", "javascript", "python"],
+      enum: [
+        "c",
+        "cpp",
+        "csharp", 
+        "go",
+        "java", 
+        "javascript", 
+        "kotlin",
+        "php",
+        "python",
+        "ruby",
+        "rust",
+        "swift",
+        "typescript",
+      ],
       default: "python",
       required: true,
     },

backend/execution-service/src/worker.js

@@ -8,11 +8,12 @@ const PISTON_URL = process.env.PISTON_URL
 
 const MAX_RETRIES = 3
 const RETRY_DELAY_MS = 2000
-const PISTON_CALL_DELAY_MS = 10000
+const AXIOS_CONNECTION_TIMEOUT_MS = 2000
+const PISTON_EXECUTION_TIMEOUT_MS = 40000 // 40s
 
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
-async function callPistonAPI(language, source_code) {
+async function callPistonAPI(language, source_code, timeout_ms) {
     try {
         const payload = {
             language: language,
@@ -21,10 +22,12 @@ async function callPistonAPI(language, source_code) {
                 {
                     content: source_code
                 }
-            ]
+            ],
+            run_timeout: 10000,
+            compile_timeout: 30000
         }
         const response = await axios.post(PISTON_URL, payload, {
-            timeout: PISTON_CALL_DELAY_MS
+            timeout: timeout_ms
         })
         return response.data
     } catch (error) {
@@ -55,29 +58,13 @@ async function resultCallback(result) {
  * @returns result: {room_id, isError, output}
  */
 async function processSubmission(submit) {
-    // If fail to connect Piston API for 3 times, then the submit is failed
     let result = {}
     result.room_id = submit.room_id
-    for (let i = 1; i <= MAX_RETRIES; i++) {
-        try {
-            const response = await callPistonAPI(submit.language, submit.source_code)
-                   
-            // set isError
-            if (response.run.status) { // runtime error
-                result.isError = true
-                // get readable message or output
-                result.output = response.run.message || response.run.output 
-            } else if (response.run.code !== 0) { // runcode != 0 error
-                result.isError = true
-                result.output = response.run.output
-            } else { // successfully run the code
-                result.isError = false
-                result.output = response.run.output
-            }
-            
 
-            console.log(">>> Finish job", result)
-            return result
+    // first 2 time: check for connection
+    for (let i = 1; i <= MAX_RETRIES - 1; i++) {
+        try {
+            const response = await callPistonAPI(submit.language, submit.source_code, AXIOS_CONNECTION_TIMEOUT_MS)
         } catch (error) {
             if (error.response) {
                 const statusCode = error.response.status
@@ -88,26 +75,62 @@ async function processSubmission(submit) {
                     console.log(">>> Finish job (error)", result)
                     return result
                 } else {
-                    // rerun
+                    // piston temp error
                     console.log(">>> Piston api temporary error: ", statusCode)
                 }
-            } else {
-                // rerun
+            } else if (axios.isAxiosError(error) && error.code !== 'ECONNREFUSED') {
+                // timeout / no connection
                 console.log(">>> Piston api doesn't respond\n", error.message)
+            } else {
+                // ECONNREFUSED
+                console.log(">>> Piston api is dead (ECONNREFUSED)\n", error.message)
             }
-            if (i === MAX_RETRIES) {
-                break
+
+            // next try
+            const delay = RETRY_DELAY_MS * i;
+            console.log(`>>> Wait ${delay}ms before reconnect to Piston api`)
+            await sleep(delay)
+            continue
+        }
+        // if no error, quit try loop
+        break
+    }
+
+    // final try: timeout 40s
+    try {
+        const response = await callPistonAPI(submit.language, submit.source_code, PISTON_EXECUTION_TIMEOUT_MS)
+                   
+        // set isError
+        if (response.run.status) { // runtime error
+            result.isError = true
+            // get readable message or output
+            result.output = response.run.message || response.run.output 
+        } else if (response.run.code !== 0) { // runcode != 0 error
+            result.isError = true
+            result.output = response.run.output
+        } else { // successfully run the code
+            result.isError = false
+            result.output = response.run.output
+        }
+        
+
+        console.log(">>> Finish job", result)
+        return result
+    } catch (error) {
+        if (error.response) {
+            const statusCode = error.response.status
+            if (statusCode >= 400 && statusCode < 500) {
+                result.isError = true
+                result.output = error.response.data.message
+                return result
             }
         }
-        const delay = RETRY_DELAY_MS * i;
-        console.log(`>>> Wait ${delay}ms before reconnect to Piston api`)
-        await sleep(delay)
+        // failed (after 3 tries)
+        result.isError = true
+        result.output = "Code execution service is unavailable. Please try again later."
+        console.log('>>> Failed job ', result)
+        return result
     }
-    // failed (after 3 tries)
-    result.isError = true
-    result.output = "Code execution service is unavailable. Please try again later."
-    console.log('>>> Failed job ', result)
-    return result
 }
 
 async function startWorker() {

docker-compose.yml

@@ -202,6 +202,9 @@ services:
     ports:
       - '2000:2000'
     privileged: true
+    environment:
+      - PISTON_COMPILE_TIMEOUT=30000
+      - PISTON_RUN_TIMEOUT=10000
     volumes:
       - piston_packages:/piston/packages 
     networks:

frontend/src/components/dashboard/active-rooms-panel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { RoomDetails } from "@/lib/api-client";
-import { ProgrammingLanguage } from "@/utils/enums";
+import { ProgrammingLanguage, ProgrammingLanguageDisplay } from "@/utils/enums";
 import {
   Card,
   CardContent,
@@ -21,10 +21,19 @@ interface ActiveRoomsPanelProps {
 }
 
 const programmingLanguageDisplayMap: Record<ProgrammingLanguage, string> = {
-  [ProgrammingLanguage.CPP]: "C++",
-  [ProgrammingLanguage.JAVA]: "Java",
-  [ProgrammingLanguage.JAVASCRIPT]: "JavaScript",
-  [ProgrammingLanguage.PYTHON]: "Python",
+  [ProgrammingLanguage.C]: ProgrammingLanguageDisplay.C,
+  [ProgrammingLanguage.CPP]: ProgrammingLanguageDisplay.CPP,
+  [ProgrammingLanguage.CSHARP]: ProgrammingLanguageDisplay.CSHARP,
+  [ProgrammingLanguage.GO]: ProgrammingLanguageDisplay.GO,
+  [ProgrammingLanguage.JAVA]: ProgrammingLanguageDisplay.JAVA,
+  [ProgrammingLanguage.JAVASCRIPT]: ProgrammingLanguageDisplay.JAVASCRIPT,
+  [ProgrammingLanguage.KOTLIN]: ProgrammingLanguageDisplay.KOTLIN,
+  [ProgrammingLanguage.PHP]: ProgrammingLanguageDisplay.PHP,
+  [ProgrammingLanguage.PYTHON]: ProgrammingLanguageDisplay.PYTHON,
+  [ProgrammingLanguage.RUBY]: ProgrammingLanguageDisplay.RUBY,
+  [ProgrammingLanguage.RUST]: ProgrammingLanguageDisplay.RUST,
+  [ProgrammingLanguage.SWIFT]: ProgrammingLanguageDisplay.SWIFT,
+  [ProgrammingLanguage.TYPESCRIPT]: ProgrammingLanguageDisplay.TYPESCRIPT,
 };
 
 const formatDate = (date: Date | null): string => {

frontend/src/components/dashboard/past-rooms-panel.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useEffect } from "react";
 import { RoomDetails } from "@/lib/api-client";
-import { ProgrammingLanguage } from "@/utils/enums";
+import { ProgrammingLanguage, ProgrammingLanguageDisplay } from "@/utils/enums";
 import {
   Card,
   CardContent,
@@ -44,10 +44,19 @@ const MOCK_TOPICS = [
 ];
 
 const programmingLanguageDisplayMap: Record<ProgrammingLanguage, string> = {
-  [ProgrammingLanguage.CPP]: "C++",
-  [ProgrammingLanguage.JAVA]: "Java",
-  [ProgrammingLanguage.JAVASCRIPT]: "JavaScript",
-  [ProgrammingLanguage.PYTHON]: "Python",
+  [ProgrammingLanguage.C]: ProgrammingLanguageDisplay.C,
+  [ProgrammingLanguage.CPP]: ProgrammingLanguageDisplay.CPP,
+  [ProgrammingLanguage.CSHARP]: ProgrammingLanguageDisplay.CSHARP,
+  [ProgrammingLanguage.GO]: ProgrammingLanguageDisplay.GO,
+  [ProgrammingLanguage.JAVA]: ProgrammingLanguageDisplay.JAVA,
+  [ProgrammingLanguage.JAVASCRIPT]: ProgrammingLanguageDisplay.JAVASCRIPT,
+  [ProgrammingLanguage.KOTLIN]: ProgrammingLanguageDisplay.KOTLIN,
+  [ProgrammingLanguage.PHP]: ProgrammingLanguageDisplay.PHP,
+  [ProgrammingLanguage.PYTHON]: ProgrammingLanguageDisplay.PYTHON,
+  [ProgrammingLanguage.RUBY]: ProgrammingLanguageDisplay.RUBY,
+  [ProgrammingLanguage.RUST]: ProgrammingLanguageDisplay.RUST,
+  [ProgrammingLanguage.SWIFT]: ProgrammingLanguageDisplay.SWIFT,
+  [ProgrammingLanguage.TYPESCRIPT]: ProgrammingLanguageDisplay.TYPESCRIPT,
 };
 
 const formatDate = (date: Date | null): string => {

frontend/src/components/practice/code-editor-panel.tsx

@@ -20,33 +20,35 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useCollaborationState, useCollaborationActions } from "@/stores/collaboration-store";
-import { ProgrammingLanguage, ConnectionState } from "@/utils/enums";
+import { ProgrammingLanguage, ProgrammingLanguageDisplay, ConnectionState } from "@/utils/enums";
 import { collaborationConfig } from "@/utils/config";
 
 interface CodeEditorPanelProps {
   readOnly?: boolean;
 }
 
-const programmingLanguageMonacoMap: Record<ProgrammingLanguage, string> = {
-  [ProgrammingLanguage.PYTHON]: "python",
-  [ProgrammingLanguage.JAVASCRIPT]: "javascript",
-  [ProgrammingLanguage.JAVA]: "java",
-  [ProgrammingLanguage.CPP]: "cpp",
-};
-
 const programmingLanguageDisplayMap: Record<ProgrammingLanguage, string> = {
-  [ProgrammingLanguage.PYTHON]: "Python",
-  [ProgrammingLanguage.JAVASCRIPT]: "JavaScript",
-  [ProgrammingLanguage.JAVA]: "Java",
-  [ProgrammingLanguage.CPP]: "C++",
+  [ProgrammingLanguage.C]: ProgrammingLanguageDisplay.C,
+  [ProgrammingLanguage.CPP]: ProgrammingLanguageDisplay.CPP,
+  [ProgrammingLanguage.CSHARP]: ProgrammingLanguageDisplay.CSHARP,
+  [ProgrammingLanguage.GO]: ProgrammingLanguageDisplay.GO,
+  [ProgrammingLanguage.JAVA]: ProgrammingLanguageDisplay.JAVA,
+  [ProgrammingLanguage.JAVASCRIPT]: ProgrammingLanguageDisplay.JAVASCRIPT,
+  [ProgrammingLanguage.KOTLIN]: ProgrammingLanguageDisplay.KOTLIN,
+  [ProgrammingLanguage.PHP]: ProgrammingLanguageDisplay.PHP,
+  [ProgrammingLanguage.PYTHON]: ProgrammingLanguageDisplay.PYTHON,
+  [ProgrammingLanguage.RUBY]: ProgrammingLanguageDisplay.RUBY,
+  [ProgrammingLanguage.RUST]: ProgrammingLanguageDisplay.RUST,
+  [ProgrammingLanguage.SWIFT]: ProgrammingLanguageDisplay.SWIFT,
+  [ProgrammingLanguage.TYPESCRIPT]: ProgrammingLanguageDisplay.TYPESCRIPT,
 };
 
 export default function CodeEditorPanel({ readOnly = false }: CodeEditorPanelProps) {
   const params = useParams();
   const roomId = params?.id as string;
 
   const { roomDetails, documentContent } = useCollaborationState();
-  const { changeLanguage, updateLanguage, setSourceCode, setExecutionResult } =
+  const { changeLanguage, updateLanguage, setSourceCode, setExecutionResult, setIsExecuting } =
     useCollaborationActions();
 
   const [editorInstance, setEditorInstance] = useState<editor.IStandaloneCodeEditor | null>(null);
@@ -60,7 +62,7 @@ export default function CodeEditorPanel({ readOnly = false }: CodeEditorPanelPro
   const bindingRef = useRef<MonacoBinding | null>(null);
 
   const currentLanguage = roomDetails?.programmingLanguage || ProgrammingLanguage.PYTHON;
-  const monacoLanguage = programmingLanguageMonacoMap[currentLanguage];
+  const monacoLanguage = currentLanguage;
 
   // Initialize Yjs and WebSocket provider for active rooms
   useEffect(() => {
@@ -128,6 +130,8 @@ export default function CodeEditorPanel({ readOnly = false }: CodeEditorPanelPro
             toast.warn("The collaboration room has been closed");
           } else if (message.type === "code-execution-result") {
             setExecutionResult(message.data);
+          } else if (message.type === "code-execution-started") {
+            setIsExecuting(true);
           }
         } catch {
           // Ignore non-JSON messages (e.g., Yjs updates)
@@ -151,6 +155,7 @@ export default function CodeEditorPanel({ readOnly = false }: CodeEditorPanelPro
     updateLanguage,
     setSourceCode,
     setExecutionResult,
+    setIsExecuting,
   ]);
 
   // Update Monaco language when room language changes

frontend/src/stores/collaboration-store.ts

@@ -7,7 +7,7 @@ import { collaborationConfig } from "@/utils/config";
 import { collaborationAPI, RoomDetails, questionAPI, Question } from "@/lib/api-client";
 
 let executionTimer: NodeJS.Timeout | null = null;
-const EXECUTION_TIMEOUT_MS = 35000; // 35s
+const EXECUTION_TIMEOUT_MS = 60000; // 60s
 const VIDEO_CALL_URL = "http://localhost:8011/v1/video/";
 const MAX_RETRIES = 3;
 const RETRY_DELAY_MS = 1500;
@@ -45,6 +45,7 @@ interface CollaborationState {
   setSourceCode: (code: string) => void;
   submitCode: () => Promise<void>;
   setExecutionResult: (result: { output: string; isError: boolean }) => void;
+  setIsExecuting: (isExecuting: boolean) => void;
 
   fetchAgoraToken: (roomId: string, userId: string) => Promise<void>;
 }
@@ -187,6 +188,7 @@ export const useCollaborationStore = create<CollaborationState>()(
 
       set({ isExecuting: true, executionResult: null });
 
+      // clear old timers if exists
       if (executionTimer) {
         clearTimeout(executionTimer);
       }
@@ -235,6 +237,10 @@ export const useCollaborationStore = create<CollaborationState>()(
       }
     },
 
+    setIsExecuting(isExecuting: boolean) {
+      set({ isExecuting: isExecuting });
+    },
+
     // Reset state
     reset: () => {
       set({
@@ -283,6 +289,7 @@ export const useCollaborationActions = () => {
   const setSourceCode = useCollaborationStore((state) => state.setSourceCode);
   const submitCode = useCollaborationStore((state) => state.submitCode);
   const setExecutionResult = useCollaborationStore((state) => state.setExecutionResult);
+  const setIsExecuting = useCollaborationStore((state) => state.setIsExecuting);
 
   return {
     fetchRoomDetails,
@@ -294,5 +301,6 @@ export const useCollaborationActions = () => {
     setSourceCode,
     submitCode,
     setExecutionResult,
+    setIsExecuting,
   };
 };