Enhanced terminal and and added monacco-editor to mainscreen

webapp/package.json

@@ -13,7 +13,9 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
     "axios": "^1.7.2",
+    "monaco-themes": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",

webapp/src/App.jsx

@@ -8,10 +8,10 @@ import MemoryMap from "./components/GdbComponents/MemoryMap/MemoryMap";
 import BreakPoints from "./components/GdbComponents/BreakPoints/BreakPoints";
 import Footer from "./components/Footer/Footer";
 import Header from "./components/Header/Header";
+import { DataState } from "./context/DataContext";
 
 const App = () => {
-  const [isDarkMode, setDarkMode] = useState("dark");
-  const [dark, setDark] = useState(false);
+  const { setDark, dark, isDarkMode, setDarkMode } = DataState();
 
   const toggleDarkMode = () => {
     setDarkMode((isDarkMode) => (isDarkMode === "dark" ? "light" : "dark"));

webapp/src/components/MainScreen/MainScreen.jsx

@@ -1,11 +1,22 @@
 import React from "react";
 import "./MainScreen.css";
+import Editor from "@monaco-editor/react";
+import { DataState } from "../../context/DataContext";
 
 const MainScreen = () => {
+  const { isDarkMode } = DataState();
   return (
     <div>
       MainScreen
-      <div className="mainScreen"></div>
+      <div className="mainScreen">
+        <Editor
+          height="90vh"
+          className="mainScreen"
+          defaultLanguage="Cpp"
+          defaultValue="// some comment"
+          theme={isDarkMode === "dark" ? "vs-dark" : "vs"}
+        />
+      </div>
     </div>
   );
 };

webapp/src/components/Terminal/TerminalComp.jsx

@@ -1,22 +1,43 @@
-import React from "react";
+import React, { useState } from "react";
 import { ReactTerminal } from "react-terminal";
-
+import axios from "axios";
 import "./Terminal.css";
 
 const TerminalComp = () => {
+  const [output, setOutput] = useState("");
+
+  const handleCommand = async (command) => {
+    try {
+      const { data } = await axios.post("http://127.0.0.1:10000/gdb_command", {
+        command: command,
+        name: "program",
+      });
+      return data["result"];
+    } catch (error) {
+      return "Error executing command";
+    }
+  };
+
   return (
     <div className="terminal">
-      TerminalComp
       <ReactTerminal
         themes={{
           "my-custom-theme": {
             themeBGColor: "#000",
             themeToolbarColor: "#000",
-            themeColor: "#FFFEFC",
+            themeColor: "#00FF00",
             themePromptColor: "#a917a8",
           },
         }}
         theme="my-custom-theme"
+        commands={{
+          myCommand: async (command) => {
+            return await handleCommand(command);
+          },
+        }}
+        defaultHandler={async (command) => {
+          return await handleCommand(command);
+        }}
       />
     </div>
   );

webapp/src/context/DataContext.jsx

@@ -10,6 +10,8 @@ import axios from "axios";
 export const DataContext = createContext();
 
 export const DataProvider = ({ children }) => {
+  const [isDarkMode, setDarkMode] = useState("dark");
+  const [dark, setDark] = useState(false);
   const [refresh, setRefresh] = useState(false);
   const [stack, setStack] = useState([]);
   const [functions, setFunctions] = useState([]);
@@ -44,6 +46,10 @@ export const DataProvider = ({ children }) => {
         setInfoBreakpointData,
         memoryMap,
         setMemoryMap,
+        isDarkMode,
+        setDarkMode,
+        dark,
+        setDark,
       }}
     >
       {children}

webapp/src/main.jsx

@@ -3,15 +3,18 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import { DataProvider } from "./context/DataContext";
+import { TerminalContextProvider } from "react-terminal";
 import App from "./App";
 import "./index.css";
 
 ReactDOM.render(
   <BrowserRouter>
     <DataProvider>
-      <React.StrictMode>
-        <App />
-      </React.StrictMode>
+      <TerminalContextProvider>
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      </TerminalContextProvider>
     </DataProvider>
   </BrowserRouter>,
   document.getElementById("root")

webapp/src/pages/Debug/Debug.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./Debug.css";
 import Header from "../../components/Header/Header";
 import DebugHeader from "../../components/DebugHeader/DebugHeader";