Merge pull request #77 from SPWwj/br-collab-fix

SPWwj · web-flow · commit 005507a35ea9 · 2024-11-01T14:08:26.000+08:00
Br collab fix
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);
@@ -42,12 +43,10 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     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);
 
-    // Connect to the server-managed Yjs document when roomId is set
     useEffect(() => {
         if (roomId == null) {
             console.log(`RoomId is null!`)
@@ -70,11 +69,8 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
         };
     }, [roomId]);
 
-    // Set up Monaco editor with server-managed Yjs document
-    useEffect(() => {
-        if (provider == null || editor == null || editor.getModel() == null) {
-            return;
-        }
+    // Set up Monaco editor with server-managed Yjs document    useEffect(() => {
+        if (!provider || !editor?.getModel()) return;
 
         // Access the server-managed ydoc via provider.doc
         const ytext = provider.doc.getText("monaco");
@@ -88,12 +84,12 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
                 if (key === SELECTED_LANGUAGE) {
                     const language: Language = ymap.get(SELECTED_LANGUAGE) as Language;
                     setSelectedLanguage(language);
-                    const model = editor.getModel();
-                    monaco.editor.setModelLanguage(model!, language.language);
+                    monaco.editor.setModelLanguage(editor.getModel()!, language.language);
                 }
             });
         });
 
+
         // Initialize editor language from the shared Yjs map
         const language = ymap.get(SELECTED_LANGUAGE) as Language;
         const model = editor.getModel();
@@ -108,14 +104,13 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     }, []);
 
     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
                 }))
@@ -131,11 +126,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");
@@ -159,7 +152,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,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({ roomId }) => {
                     options={{
                         minimap: { enabled: false },
                         scrollbar: { verticalScrollbarSize: 4 },
-                        formatOnPaste: true
+                        formatOnPaste: true,
                     }}
                 />
             </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
@@ -1,5 +1,5 @@
 .container {
-    height: 100%;
+    height: 100vh;
     width: 100%;
     overflow-x: hidden;
     display: flex;
@@ -19,10 +19,11 @@
     min-height: 0;
 }
 
-.questionContainer {
-    flex-shrink: 0;
+.questionContent {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
-
 .verticalSeparator,
 .horizontalSeparator {
     transition: background-color 0.1s ease;
@@ -38,6 +39,7 @@
     cursor: col-resize;
     width: 8px;
 }
+
 .horizontalSeparator {
     cursor: row-resize;
     height: 6px;
@@ -46,4 +48,4 @@
 .outputContainer {
     flex-shrink: 0;
     overflow-y: auto;
-}
+}
diff --git a/frontend/src/presentation/pages/CollaborationRoomPage.tsx b/frontend/src/presentation/pages/CollaborationRoomPage.tsx
