Adding autocompletion in the Robotics Backend

frontend/src/api_helper/CommsManager.ts

@@ -20,7 +20,6 @@ export default class CommsManager {
     // Message callback
     this.ws.onmessage = (event) => {
       const msg = JSON.parse(event.data);
-      // console.log(msg);
 
       // Check if the message ID exists in the pending promises map
       const handlers = this.pendingPromises.get(msg.id);
@@ -180,6 +179,10 @@ export default class CommsManager {
     return this.send("disconnect");
   }
 
+  public style_check(code: string) {
+    return this.send("style_check", {code: code});
+  }
+
   public code_format(code: string) {
     return this.send("code_format", {code: code});
   }
@@ -190,6 +193,10 @@ export default class CommsManager {
       disable_errors: disable_errors,
     });
   }
+
+  public code_autocomplete(code: string, line:number, col:number) {
+    return this.send("code_autocomplete", {code: code, line:line, col:col});
+  }
 }
 
 // const events = {
@@ -199,4 +206,5 @@ export default class CommsManager {
 //   INTROSPECTION: "introspection",
 //   CODE_FORMAT: "code-format",
 //   CODE_ANALYSIS: "code-analysis",
+//   CODE_AUTOCOMPLETE: "code-autocomplete",
 // };

frontend/src/components/file_editor/FileEditor.tsx

@@ -9,6 +9,7 @@ import { getFile, saveFile } from "../../api_helper/TreeWrapper";
 import { useError } from "../error_popup/ErrorModal";
 import { OptionsContext } from "../options/Options";
 import CommsManager from "../../api_helper/CommsManager";
+import { monacoEditorSnippet } from "./extras";
 
 const fileTypes = {
   json: "json",
@@ -179,6 +180,8 @@ const FileEditor = ({
 
     editorRef.current.getDomNode().addEventListener("keydown", handleKeyDown);
 
+    monacoEditorSnippet(monaco, manager);
+
     editorRef.current.addCommand(
       monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyI,
       function () {

frontend/src/components/file_editor/extras.ts

@@ -0,0 +1,165 @@
+import { Monaco } from "@monaco-editor/react";
+import { my_snippets, Snippet } from "./snippets";
+import CommsManager from "../../api_helper/CommsManager";
+
+interface Position {
+  lineNumber: number;
+  column: number;
+}
+
+interface Range {
+  startLineNumber: number;
+  endLineNumber: number;
+  startColumn: number;
+  endColumn: number;
+}
+
+interface CompletionItem {
+  detail?: string;
+  documentation: string;
+  insertText: string;
+  insertTextRules: number;
+  kind: number;
+  label: string;
+  range: Range;
+}
+
+// Main Editor Snippets
+export const monacoEditorSnippet = (monaco: Monaco, manager: CommsManager| null) => {
+  monaco.languages.register({ id: "python" });
+
+  const EventEmitter = require("events");
+
+  const bus = new EventEmitter();
+  let lock = true;
+
+  // Register a completion item provider for the new language
+  monaco.languages.registerCompletionItemProvider("python", {
+    triggerCharacters: [".", "("],
+    provideCompletionItems: async (model: any, position: Position) => {
+      lock = true;
+
+      var word = model.getWordUntilPosition(position);
+      var prevWord = model.getWordUntilPosition({
+        lineNumber: position.lineNumber,
+        column: position.column - 1,
+      });
+
+      var range: Range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: word.startColumn,
+        endColumn: word.endColumn,
+      };
+
+      // Add basic snippets only if not prevWord
+      if (prevWord.word === "") {
+        var snippets: CompletionItem[] = snippetsBuilderV2(monaco, range);
+      } else {
+        var snippets: CompletionItem[] = [];
+      }
+
+      // Check if the Robotics Backend is connected
+      // Call the RAM for autocompletion
+      if (manager === null) {
+        return snippets;
+      } 
+
+      try {
+        manager.code_autocomplete(
+          model.getValue(),
+          position.lineNumber,
+          word.endColumn - 1
+        );
+      } catch (error) {
+        return snippets;
+      }
+
+      const callback = (message: any) => {
+        const data = message.data;
+
+        if (!data) return;
+
+        const new_completions = data.completions;
+
+        new_completions.forEach((snippet: Snippet) => {
+          snippets.push({
+            label: snippet.label,
+            kind: snippetKind(snippet.type, monaco),
+            detail: snippet.detail,
+            documentation: snippet.docstring,
+            insertText: snippet.code,
+            insertTextRules:
+              monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            range: range,
+          });
+        });
+
+        lock = false;
+        bus.emit("unlocked");
+      };
+
+      manager.subscribeOnce("code-autocomplete", callback);
+
+      if (lock) await new Promise((resolve) => bus.once("unlocked", resolve));
+
+      return { suggestions: snippets };
+    },
+  });
+};
+
+// Snippets Builder
+export const snippetKind = (kind: string, monaco: Monaco) => {
+  switch (kind) {
+    case "variable":
+      return monaco.languages.CompletionItemKind.Variable;
+    case "class":
+      return monaco.languages.CompletionItemKind.Class;
+    case "param":
+      return monaco.languages.CompletionItemKind.TypeParameter;
+    case "path":
+      return monaco.languages.CompletionItemKind.File;
+    case "property":
+      return monaco.languages.CompletionItemKind.Property;
+    case "statement":
+      return monaco.languages.CompletionItemKind.Function;
+    case "instance":
+      return monaco.languages.CompletionItemKind.Class;
+    case "module":
+      return monaco.languages.CompletionItemKind.Module;
+    case "method":
+      return monaco.languages.CompletionItemKind.Method;
+    case "snippet":
+      return monaco.languages.CompletionItemKind.Snippet;
+    case "keyword":
+      return monaco.languages.CompletionItemKind.Keyword;
+    case "function":
+      return monaco.languages.CompletionItemKind.Function;
+    default:
+      return monaco.languages.CompletionItemKind.Variable;
+  }
+};
+
+export const snippetsBuilderV2 = (monaco: Monaco, range: Range) => {
+  const snippets: CompletionItem[] = [];
+  let importSnippets: Snippet[] = my_snippets;
+
+  if (!importSnippets || !importSnippets.length) return [];
+
+  importSnippets.forEach((snippet: Snippet) => {
+    if (snippet.label && snippet.code) {
+      snippets.push({
+        label: snippet.label,
+        kind: snippetKind(snippet.type, monaco),
+        detail: snippet.detail,
+        documentation: snippet.docstring,
+        insertText: snippet.code,
+        insertTextRules:
+          monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+        range: range,
+      });
+    }
+  });
+
+  return snippets;
+};