add options to sidebar & handle exceptions

Author: li-xin-yi

ui/src/components/Sidebar.tsx

@@ -53,6 +53,12 @@ function SidebarSettings() {
   const setAutoRunLayout = useStore(store, (state) => state.setAutoRunLayout);
   const contextualZoom = useStore(store, (state) => state.contextualZoom);
   const setContextualZoom = useStore(store, (state) => state.setContextualZoom);
+  const autoCompletion = useStore(store, (state) => state.autoCompletion);
+  const flipAutoCompletion = useStore(
+    store,
+    (state) => state.flipAutoCompletion
+  );
+  const client = useApolloClient();
   return (
     <Box>
       <Box>
@@ -130,6 +136,23 @@ function SidebarSettings() {
             />
           </FormGroup>
         </Tooltip>
+        <Tooltip title={"Enable Auto Completion"} disableInteractive>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={autoCompletion}
+                  size="small"
+                  color="warning"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    flipAutoCompletion(client);
+                  }}
+                />
+              }
+              label="Auto Completion"
+            />
+          </FormGroup>
+        </Tooltip>
         <Tooltip title={"Show Annotations in Editor"} disableInteractive>
           <FormGroup>
             <FormControlLabel

ui/src/lib/codeiumClient.ts

@@ -59,11 +59,11 @@ export class LanguageServerClient {
     this.abortController?.abort();
     this.abortController = new AbortController();
     const signal = this.abortController.signal;
-    const getCompletionsPromise = this.client.getCompletions(request, {
-      signal,
-      headers: this.getHeaders(request.metadata?.apiKey),
-    });
     try {
+      const getCompletionsPromise = this.client.getCompletions(request, {
+        signal,
+        headers: this.getHeaders(request.metadata?.apiKey),
+      });
       console.log("codeium request", request);
       return await getCompletionsPromise;
     } catch (err) {

ui/src/lib/monacoCompletionProvider.ts

@@ -151,42 +151,48 @@ export class MonacoCompletionProvider
     const { text, utf8ByteOffset, additionalUtf8ByteOffset } =
       this.computeTextAndOffsets(model, position);
     const numUtf8Bytes = additionalUtf8ByteOffset + utf8ByteOffset;
-    const request = new GetCompletionsRequest({
-      metadata: this.client.getMetadata(this.ideinfo, apiKey),
-      document: {
-        text: text,
-        editorLanguage: "python",
-        language: Language.PYTHON,
-        cursorOffset: BigInt(numUtf8Bytes),
-        lineEnding: "\n",
-        relativePath: undefined,
-        absolutePath: this.absolutePath(model),
-      },
-      editorOptions: {
-        tabSize: BigInt(model.getOptions().tabSize),
-        insertSpaces: model.getOptions().insertSpaces,
-      },
-    });
-    const response = await this.client.getCompletions(request);
-    console.log("codeium request", request);
-    console.log("codeium response", response);
-    if (response === undefined) {
+    try {
+      const request = new GetCompletionsRequest({
+        metadata: this.client.getMetadata(this.ideinfo, apiKey),
+        document: {
+          text: text,
+          editorLanguage: "python",
+          language: Language.PYTHON,
+          cursorOffset: BigInt(numUtf8Bytes),
+          lineEnding: "\n",
+          relativePath: undefined,
+          absolutePath: this.absolutePath(model),
+        },
+        editorOptions: {
+          tabSize: BigInt(model.getOptions().tabSize),
+          insertSpaces: model.getOptions().insertSpaces,
+        },
+      });
+      const response = await this.client.getCompletions(request);
+      console.log("codeium request", request);
+      console.log("codeium response", response);
+      if (response === undefined) {
+        return { items: [] };
+      }
+      const items = response.completionItems
+        .map((completionItem) =>
+          createInlineCompletionItem(
+            completionItem,
+            model,
+            additionalUtf8ByteOffset,
+            apiKey,
+            this.modelUriToEditor.get(model.uri.toString())
+          )
+        )
+        .filter(
+          (item): item is monaco.languages.InlineCompletion =>
+            item !== undefined
+        );
+      return { items };
+    } catch (e) {
+      console.log(e);
       return { items: [] };
     }
-    const items = response.completionItems
-      .map((completionItem) =>
-        createInlineCompletionItem(
-          completionItem,
-          model,
-          additionalUtf8ByteOffset,
-          apiKey,
-          this.modelUriToEditor.get(model.uri.toString())
-        )
-      )
-      .filter(
-        (item): item is monaco.languages.InlineCompletion => item !== undefined
-      );
-    return { items };
   }
 
   handleItemDidShow(): void {

ui/src/lib/store/repoStateSlice.tsx

@@ -328,7 +328,7 @@ export const createRepoStateSlice: StateCreator<
     ),
 
   registerCompletion: async (client) => {
-    if (get().autoCompletion || unregister) return;
+    if (get().autoCompletion || get().unregisterCompletionHandler) return;
     console.log(get().user);
     if (
       get().user.codeiumAPIKey === undefined ||
@@ -348,26 +348,21 @@ export const createRepoStateSlice: StateCreator<
               set({ user: { ...get().user, codeiumAPIKey: api_key } });
             }
           }
-          console.log("registerCompletion", api_key, name);
+          console.log("get api key", api_key, name);
         }
       } catch (e) {
-        console.log("registerCompletion error", e);
+        console.log("api key error", e);
       }
     }
     const apiKey = get().user.codeiumAPIKey;
     const completionProvider = new MonacoCompletionProvider(apiKey);
     // const completionProvider = new MonacoCompletionProvider();
-    console.log("completionProvider", completionProvider);
-    console.log(monaco.editor.getModels());
-    monaco.editor.getModels().forEach((model) => {
-      console.log("model", model.getValue());
-    });
     const { dispose } = monaco.languages.registerInlineCompletionsProvider(
       { pattern: "**" },
       completionProvider
     );
     console.log("register completion", dispose);
-    unregister = dispose;
+    set({ unregisterCompletionHandler: dispose });
     console.log("state.autoCompletion", get().autoCompletion);
     // monaco.editor.registerCommand(
     //   "codeium.acceptCompletion",
@@ -387,33 +382,26 @@ export const createRepoStateSlice: StateCreator<
         completionProvider.acceptedLastCompletion(apiKey, completionId);
       }
     );
+
+    set({ autoCompletion: true });
   },
 
-  unregisterCompletion: () =>
-    set(
-      produce((state) => {
-        console.log("unregisterCompletion", state.unregisterCompletionHandler);
-        if (typeof unregister === "function") {
-          console.log("unregister", unregister);
-          unregister();
-          unregister = null;
-        }
-      })
-    ),
+  unregisterCompletion: () => {
+    const dispose = get().unregisterCompletionHandler;
+    if (typeof dispose === "function") {
+      console.log("unregister", dispose);
+      dispose();
+      set({ unregisterCompletionHandler: null, autoCompletion: false });
+    }
+  },
 
-  flipAutoCompletion: (client) =>
-    set(
-      produce((state) => {
-        console.log("state.autoCompletion", state.autoCompletion);
-        if (state.autoCompletion) {
-          state.unregisterCompletion();
-        } else {
-          state.registerCompletion(client);
-        }
-        state.autoCompletion = !state.autoCompletion;
-        console.log("unregister", state.unregisterCompletionHandler);
-      })
-    ),
+  flipAutoCompletion: (client) => {
+    if (get().autoCompletion) {
+      get().unregisterCompletion();
+    } else {
+      get().registerCompletion(client);
+    }
+  },
 });
 
 function loadRepo(set, get) {