dirty start

Author: li-xin-yi

ui/src/components/CanvasContextMenu.tsx

@@ -9,6 +9,7 @@ import React, { useContext } from "react";
 import CodeIcon from "@mui/icons-material/Code";
 import PostAddIcon from "@mui/icons-material/PostAdd";
 import NoteIcon from "@mui/icons-material/Note";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
 
 const paneMenuStyle = (left, top) => {
@@ -40,6 +41,11 @@ export function CanvasContextMenu(props) {
     store,
     (state) => state.flipShowLineNumbers
   );
+  const autoCompletion = useStore(store, (state) => state.autoCompletion);
+  const flipAutoCompletion = useStore(
+    store,
+    (state) => state.flipAutoCompletion
+  );
   const isGuest = useStore(store, (state) => state.role === "GUEST");
   return (
     <Box sx={paneMenuStyle(props.x, props.y)}>
@@ -76,6 +82,15 @@ export function CanvasContextMenu(props) {
             {showLineNumbers ? "Hide " : "Show "} Line Numbers
           </ListItemText>
         </MenuItem>
+        <MenuItem onClick={flipAutoCompletion} sx={ItemStyle}>
+          <ListItemIcon sx={{ color: "inherit" }}>
+            <AutoFixHighIcon />
+          </ListItemIcon>
+          <ListItemText>
+            {autoCompletion ? "Disable " : "Enable "} Auto Completion (Provided
+            by Codeium)
+          </ListItemText>
+        </MenuItem>
       </MenuList>
     </Box>
   );

ui/src/components/MyMonaco.tsx

@@ -8,6 +8,7 @@ import { RepoContext } from "../lib/store";
 import { MonacoBinding } from "y-monaco";
 import { useReactFlow } from "reactflow";
 import { Annotation } from "../lib/parser";
+import { MonacoCompletionProvider } from "../lib/monacoCompletionProvider";
 
 const theme: monaco.editor.IStandaloneThemeData = {
   base: "vs",
@@ -26,6 +27,9 @@ monaco.languages.setLanguageConfiguration("julia", {
     decreaseIndentPattern: /^\s*(end|else|elseif|catch|finally)\b.*$/,
   },
 });
+
+console.log("monaco", monaco);
+console.log("languages", monaco.languages.registerInlineCompletionsProvider);
 function construct_indent(pos, indent) {
   return [
     {
@@ -402,6 +406,7 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
   const showAnnotations = useStore(store, (state) => state.showAnnotations);
   const scopedVars = useStore(store, (state) => state.scopedVars);
   const updateView = useStore(store, (state) => state.updateView);
+  const setMonaco = useStore(store, (state) => state.setMonaco);
 
   const value = getPod(id)?.content || "";
   let lang = getPod(id)?.lang || "javascript";
@@ -441,6 +446,7 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
     monaco
   ) {
     setEditor(editor);
+    setMonaco(monaco);
     // console.log(Math.min(1000, editor.getContentHeight()));
     const updateHeight = () => {
       // max height: 400
@@ -479,6 +485,7 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
     // });
 
     // bind it to the ytext with pod id
+    // if (monaco.languages.registerInlineCompletionsProvider)
     const ytext = ydoc.getText("monaco-" + id);
     const monacoBinding = new MonacoBinding(
       ytext,

ui/src/lib/store/repoStateSlice.tsx

@@ -2,6 +2,7 @@ import { createStore, StateCreator, StoreApi } from "zustand";
 import { devtools } from "zustand/middleware";
 import produce from "immer";
 import { createContext } from "react";
+import { MonacoCompletionProvider } from "../monacoCompletionProvider";
 
 import {
   normalize,
@@ -22,6 +23,8 @@ import { addAwarenessStyle } from "../styles";
 import { Annotation } from "../parser";
 import { MyState, Pod } from ".";
 
+declare type Monaco = typeof import("monaco-editor");
+
 let serverURL;
 if (window.location.protocol === "http:") {
   serverURL = `ws://${window.location.host}/socket`;
@@ -46,6 +49,7 @@ export interface RepoStateSlice {
   clients: Map<string, any>;
   user: any;
   ydoc: Doc;
+  monaco: Monaco | null;
   collaborators: any[];
   addCollaborator: (client: ApolloClient<object>, email: string) => any;
   deleteCollaborator: (client: ApolloClient<object>, id: string) => any;
@@ -74,6 +78,12 @@ export interface RepoStateSlice {
   yjsConnecting: boolean;
   connectYjs: () => void;
   disconnectYjs: () => void;
+  setMonaco: (monaco: Monaco) => void;
+  autoCompletion: boolean;
+  unregisterCompletionHandler: null | (() => void);
+  registerCompletion: () => void;
+  unregisterCompletion: () => void;
+  flipAutoCompletion: () => void;
 }
 
 export const createRepoStateSlice: StateCreator<
@@ -96,7 +106,9 @@ export const createRepoStateSlice: StateCreator<
   currentEditor: null,
   //TODO: all presence information are now saved in clients map for future usage. create a modern UI to show those information from clients (e.g., online users)
   clients: new Map(),
-
+  monaco: null,
+  autoCompletion: false,
+  unregisterCompletionHandler: null,
   loadError: null,
   role: "GUEST",
   collaborators: [],
@@ -283,6 +295,64 @@ export const createRepoStateSlice: StateCreator<
         state.ydoc.destroy();
       })
     ),
+  setMonaco: (monaco) => {
+    set(
+      produce((state) => {
+        if (state.monaco === null) {
+          state.monaco = monaco;
+          console.log("set monaco as", monaco);
+          if (state.autoCompletion) {
+            state.registerCompletion();
+          }
+        }
+      })
+    );
+  },
+  registerCompletion: () => {
+    set(
+      produce((state) => {
+        if (state.monaco && !state.unregisterCompletionHandler) {
+          const completionProvider = new MonacoCompletionProvider();
+          const { dispose } =
+            state.monaco.languages.registerCompletionItemProvider(
+              "codeium",
+              completionProvider
+            );
+          console.log("register completion", dispose);
+          state.unregisterCompletionHandler = dispose;
+          state.monaco.editor.registerCommand(
+            "codeium.acceptCompletion",
+            (accessor, args) => {
+              console.log("acceptCompletion", args);
+            }
+          );
+        }
+      })
+    );
+  },
+
+  unregisterCompletion: () =>
+    set(
+      produce((state) => {
+        if (state.unregisterCompletionHandler) {
+          console.log("unregister", state.unregisterCompletionHandler);
+          state.unregisterCompletionHandler();
+          state.unregisterCompletionHandler = null;
+        }
+      })
+    ),
+
+  flipAutoCompletion: () =>
+    set(
+      produce((state) => {
+        state.autoCompletion = !state.autoCompletion;
+        if (state.autoCompletion) {
+          state.registerCompletion();
+        } else {
+          state.unregisterCompletion();
+        }
+      })
+    ),
 });
 
 function loadRepo(set, get) {