Merge pull request #74 from SPWwj/main

njxue · web-flow · commit 728653464047 · 2024-11-01T09:55:52.000+08:00
Collab Service
diff --git a/backend/user-service/services/tokenService.js b/backend/user-service/services/tokenService.js
@@ -7,7 +7,7 @@ import { UnauthorisedError } from "../utils/httpErrors.js";
 class TokenService {
   static generateAccessToken(user) {
     const accessToken = jwt.sign(
-      { id: user.id, isAdmin: user.isAdmin },
+      { id: user.id, isAdmin: user.isAdmin, username: user.username },
       jwtConfig.accessTokenSecret,
       jwtConfig.accessTokenOptions
     );
@@ -16,7 +16,7 @@ class TokenService {
 
   static generateRefreshToken(user) {
     const refreshToken = jwt.sign(
-      { id: user.id, jti: uuidv4() },
+      { id: user.id, jti: uuidv4(), username: user.username },
       jwtConfig.refreshTokenSecret,
       jwtConfig.refreshTokenOptions
     );
diff --git a/frontend/src/domain/context/CollaborationContext.tsx b/frontend/src/domain/context/CollaborationContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, ReactNode, useEffect, useMemo } from "react";
+import React, { createContext, useState, useContext, ReactNode, useEffect, useMemo, useCallback } from "react";
 import * as Y from "yjs";
 import * as monaco from "monaco-editor";
 import { MonacoBinding } from "y-monaco";
@@ -20,6 +20,7 @@ interface CollaborationContextType {
     execResult: CodeExecResult | null;
     setRoomId: (roomId: string) => void;
     connectedUsers: string[];
+    disconnect: () => void;
 }
 
 const CollaborationContext = createContext<CollaborationContextType | undefined>(undefined);
@@ -41,86 +42,81 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     const ymap: Y.Map<any> = useMemo(() => ydoc.getMap("sharedMap"), [ydoc]);
 
     const [roomId, setRoomId] = useState<string | null>(null);
-
     const [languages, setLanguages] = useState<Language[]>([]);
     const [execResult, setExecResult] = useState<CodeExecResult | null>(null);
     const [isExecuting, setIsExecuting] = useState<boolean>(false);
     const [connectedUsers, setConnectedUsers] = useState<string[]>([]);
-
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
     const [provider, setProvider] = useState<WebsocketProvider | null>(null);
     const [binding, setBinding] = useState<MonacoBinding | null>(null);
 
-    // This effect manages the lifetime of the yjs doc and the provider
+    const disconnect = useCallback(() => {
+        binding?.destroy();
+        provider?.destroy();
+        ydoc?.destroy();
+        setConnectedUsers([]);
+        setProvider(null);
+        setBinding(null);
+        setRoomId(null);
+    }, [binding, provider, ydoc]);
+
     useEffect(() => {
-        if (roomId == null) {
-            return;
-        }
-        const provider = new WebsocketProvider("ws://localhost:1234", roomId, ydoc);
-        setProvider(provider);
-
-        provider.awareness.setLocalStateField(USERNAME, username);
-        provider.awareness.on("change", (update: any) => {
-            const users = Array.from(provider.awareness.getStates().values());
-            setConnectedUsers(users.map((user) => user[USERNAME]));
-            // TODO: Some UI feedback about connection status of the other user
+        if (!roomId) return;
+
+        const newProvider = new WebsocketProvider("ws://localhost:1234", roomId, ydoc);
+        setProvider(newProvider);
+
+        newProvider.awareness.setLocalStateField(USERNAME, username);
+        newProvider.awareness.on("change", () => {
+            const users = Array.from(newProvider.awareness.getStates().values());
+            const uniqueUsers = new Set(users.map((user) => user[USERNAME])); // Use Set for uniqueness
+            setConnectedUsers(Array.from(uniqueUsers)); // Convert Set back to Array
         });
 
         return () => {
-            provider?.destroy();
-            ydoc?.destroy();
+            disconnect();
         };
-    }, [ydoc, roomId]);
+    }, [ydoc, roomId, username, USERNAME, disconnect]);
 
-    // This effect manages the lifetime of the editor binding
     useEffect(() => {
-        if (provider == null || editor == null || editor.getModel() == null) {
-            return;
-        }
+        if (!provider || !editor?.getModel()) return;
 
-        const binding = new MonacoBinding(
+        const newBinding = new MonacoBinding(
             ydoc.getText("monaco"),
             editor.getModel()!,
             new Set([editor]),
-            provider?.awareness
+            provider.awareness
         );
-
-        setBinding(binding);
+        setBinding(newBinding);
 
         ymap.observe((event) => {
             event.changes.keys.forEach((change, key) => {
                 if (key === SELECTED_LANGUAGE) {
                     const language: Language = ymap.get(SELECTED_LANGUAGE);
                     setSelectedLanguage(language);
-                    const model = editor.getModel();
-                    monaco.editor.setModelLanguage(model!, language.language);
+                    monaco.editor.setModelLanguage(editor.getModel()!, language.language);
                 }
             });
         });
 
-        // Set the editor's language
         const language: Language = ymap.get(SELECTED_LANGUAGE);
-        const model = editor.getModel();
-        monaco.editor.setModelLanguage(model!, language?.language ?? "javascript");
+        monaco.editor.setModelLanguage(editor.getModel()!, language?.language ?? "javascript");
 
-        return () => {
-            binding.destroy();
-        };
-    }, [ydoc, provider, editor, ymap]);
+        return () => newBinding.destroy();
+    }, [ydoc, provider, editor, ymap, SELECTED_LANGUAGE]);
 
     useEffect(() => {
         initialiseLanguages();
     }, []);
 
     const initialiseLanguages = async () => {
-        // Initialise language dropdown
         const allLanguages = monaco.languages.getLanguages();
         const pistonLanguageVersions = await PistonClient.getLanguageVersions();
         setLanguages(
             allLanguages
                 .filter((lang) => pistonLanguageVersions.some((pistonLang: any) => pistonLang.language === lang.id))
                 .map((lang) => ({
-                    alias: lang.aliases && lang.aliases.length > 0 ? lang.aliases[0] : lang.id,
+                    alias: lang.aliases?.[0] || lang.id,
                     language: lang.id,
                     version: pistonLanguageVersions.find((pistonLang: any) => pistonLang.language === lang.id)?.version
                 }))
@@ -135,11 +131,9 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         try {
             setIsExecuting(true);
             const sourceCode = editor?.getValue();
-            if (!sourceCode) {
-                // TODO
-                return;
-            }
-            const output: CodeExecResult = await PistonClient.executeCode(selectedLanguage, sourceCode);
+            if (!sourceCode) return;
+
+            const output = await PistonClient.executeCode(selectedLanguage, sourceCode);
             setExecResult(output);
         } catch (e) {
             toast.error("There was an issue running the code");
@@ -163,7 +157,8 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                 handleExecuteCode,
                 isExecuting,
                 execResult,
-                connectedUsers
+                connectedUsers,
+                disconnect
             }}
         >
             {children}
diff --git a/frontend/src/presentation/components/CodeEditor/CodeActionButtons.module.css b/frontend/src/presentation/components/CodeEditor/CodeActionButtons.module.css
@@ -1,12 +1,22 @@
 .submitButton {
-    background-color: #ffa500;
+    background-color: #ffa500 !important;
+    color: black !important;
+    font-weight: bold !important;
 }
 
 .runButton {
-    background-color: black;
-    color: white;
+    background-color: #1a1a1a !important;
+    color: white !important;
+}
+
+.runButton:hover {
+    background-color: #333 !important;
+}
+
+.submitButton:hover {
+    background-color: #ffb52e !important;
 }
 
 button {
     width: fit-content;
-}
+}
diff --git a/frontend/src/presentation/components/CodeEditor/CodeEditor.tsx b/frontend/src/presentation/components/CodeEditor/CodeEditor.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import styles from "./CodeEditor.module.css";
-import Editor, { Monaco } from "@monaco-editor/react";
+import Editor from "@monaco-editor/react";
 import { Button, Spin } from "antd";
 import { useCollaboration } from "domain/context/CollaborationContext";
 import * as monaco from "monaco-editor";
@@ -15,22 +15,47 @@ interface CodeEditorProps {
 const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
     const { onEditorIsMounted, isExecuting, setRoomId, connectedUsers } = useCollaboration();
     const [theme, setTheme] = useState("vs-light");
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        let resizeObserver: ResizeObserver | null = null;
+        let resizeTimeout: NodeJS.Timeout;
+
+        if (containerRef.current && editorRef.current) {
+            resizeObserver = new ResizeObserver((entries) => {
+                // Debounce resize events
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                    if (editorRef.current) {
+                        editorRef.current.layout();
+                    }
+                }, 100);
+            });
+
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            clearTimeout(resizeTimeout);
+        };
+    }, []);
 
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
+        editorRef.current = editor;
         onEditorIsMounted(editor);
         setRoomId(roomId);
     };
 
     const handleToggleTheme = () => {
-        if (theme === "vs-light") {
-            setTheme("vs-dark");
-        } else {
-            setTheme("vs-light");
-        }
+        setTheme(theme === "vs-light" ? "vs-dark" : "vs-light");
     };
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container} ref={containerRef}>
             <div className={styles.toolbar}>
                 <div className={styles.toolbarLeft}>
                     <LanguageSelector />
@@ -69,7 +94,8 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
                     options={{
                         minimap: { enabled: false },
                         scrollbar: { verticalScrollbarSize: 4 },
-                        formatOnPaste: true
+                        formatOnPaste: true,
+                        automaticLayout: false // Disable automatic layout
                     }}
                 />
             </div>
diff --git a/frontend/src/presentation/components/buttons/ToggleButton.module.css b/frontend/src/presentation/components/buttons/ToggleButton.module.css
@@ -0,0 +1,47 @@
+.toggleContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+}
+
+.toggleButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.toggleButton:hover {
+    background-color: #f5f5f5;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+}
+
+.status {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.chatMode {
+    background-color: #e8f0fe;
+    color: #1a73e8;
+}
+
+.questionMode {
+    background-color: #f3e8ff;
+    color: #7e22ce;
+}
diff --git a/frontend/src/presentation/components/buttons/ToggleButton.tsx b/frontend/src/presentation/components/buttons/ToggleButton.tsx
@@ -0,0 +1,25 @@
+// ToggleButton.tsx
+import React from "react";
+import styles from "./ToggleButton.module.css";
+
+const ToggleButton = ({ showChat, onClick }: { showChat: boolean; onClick: () => void }) => {
+    return (
+        <div className={styles.toggleContainer}>
+            <button className={styles.toggleButton} onClick={onClick}>
+                <span className={styles.iconWrapper}>
+                    {showChat ? (
+                        <span className={`${styles.icon} ${styles.bookIcon}`}>📖</span>
+                    ) : (
+                        <span className={`${styles.icon} ${styles.chatIcon}`}>💬</span>
+                    )}
+                </span>
+                <span>{showChat ? "View Question" : "Open Chat"}</span>
+            </button>
+            <div className={`${styles.status} ${showChat ? styles.chatMode : styles.questionMode}`}>
+                {showChat ? "Chat Mode" : "Question Mode"}
+            </div>
+        </div>
+    );
+};
+
+export default ToggleButton;
diff --git a/frontend/src/presentation/components/iframe/ChatFrame.module.css b/frontend/src/presentation/components/iframe/ChatFrame.module.css
@@ -0,0 +1,17 @@
+.chatFrameWrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #ffffff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.chatFrame {
+    width: 100%;
+    flex: 1;
+    border: none;
+    background: transparent;
+}
diff --git a/frontend/src/presentation/components/iframe/ChatFrame.tsx b/frontend/src/presentation/components/iframe/ChatFrame.tsx
@@ -0,0 +1,24 @@
+// ChatFrame.tsx
+import React from "react";
+import styles from "./ChatFrame.module.css";
+
+interface ChatFrameProps {
+    roomId: string;
+}
+
+const ChatFrame: React.FC<ChatFrameProps> = ({ roomId }) => {
+    const chatUrl = `http://localhost:5173/Assistant`;
+
+    return (
+        <div className={styles.chatFrameWrapper}>
+            <iframe
+                src={chatUrl}
+                className={styles.chatFrame}
+                title="Chat Embed"
+                allow="camera; microphone; fullscreen; display-capture"
+            />
+        </div>
+    );
+};
+
+export default ChatFrame;
diff --git a/frontend/src/presentation/pages/CollaborationRoomPage.module.css b/frontend/src/presentation/pages/CollaborationRoomPage.module.css
diff --git a/frontend/src/presentation/pages/CollaborationRoomPage.tsx b/frontend/src/presentation/pages/CollaborationRoomPage.tsx
