show setting window when no default api key

Author: li-xin-yi

ui/package.json

@@ -70,7 +70,7 @@
     "zustand": "^4.1.3"
   },
   "scripts": {
-    "generate": "chmod -R 777 /root && rm -rf ./src/proto && npx buf generate --output ./src/",
+    "generate": "chmod 777 /root && rm -rf ./src/proto && npx buf generate --output ./src/",
     "dev": "react-app-rewired start",
     "build": "react-app-rewired build --max_old_space_size=4096",
     "test": "react-app-rewired test",

ui/src/components/SettingDialog.tsx

@@ -76,10 +76,6 @@ export function SettingDialog({ open = false }: SettingDiagProps) {
     } catch (e) {
       setStatus("error");
       setMessage((e as Error).message || "Unknown error");
-      console.log(
-        (e as Error).message === undefined,
-        (e as Error).message === ""
-      );
       setInfoShow(true);
       return;
     }
@@ -92,7 +88,11 @@ export function SettingDialog({ open = false }: SettingDiagProps) {
         <DialogContentText>
           The AI code auto completion is powered by{" "}
           <Link href="https://codeium.com/" target="_blank" rel="noreferrer">
-            Codeium <LaunchIcon fontSize="small" />
+            Codeium{" "}
+            <LaunchIcon
+              fontSize="small"
+              sx={{ marginBottom: -0.5, marginLeft: -0.5 }}
+            />
           </Link>{" "}
           You can also use your own token instead of our default API keys, which
           records your own activities of using Codeium.

ui/src/components/Sidebar.tsx

@@ -10,7 +10,6 @@ import RefreshIcon from "@mui/icons-material/Refresh";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import Drawer from "@mui/material/Drawer";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import Grid from "@mui/material/Grid";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
@@ -79,14 +78,14 @@ function SidebarSettings() {
   const setSettingOpen = useStore(store, (state) => state.setSettingOpen);
 
   useEffect(() => {
-    console.log("apiKey", apiKey);
-    if (autoCompletion) {
+    if (autoCompletion && apiKey) {
       const dispose = registerCompletion(apiKey);
       if (dispose !== null) {
         return dispose;
       }
     }
   }, [autoCompletion, apiKey]);
+
   return (
     <Box>
       <Box>
@@ -189,11 +188,15 @@ function SidebarSettings() {
             <FormControlLabel
               control={
                 <Switch
-                  checked={autoCompletion}
+                  checked={(apiKey && autoCompletion) as boolean}
                   size="small"
                   color="warning"
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    setAutoCompletion(event.target.checked);
+                    if (apiKey) {
+                      setAutoCompletion(event.target.checked);
+                    } else {
+                      setSettingOpen(true);
+                    }
                   }}
                 />
               }

ui/src/lib/monacoCompletionProvider.ts

@@ -85,9 +85,6 @@ function createInlineCompletionItem(
         document.getOffsetAt(selection.getPosition()) + deltaCursorOffset
       );
       editor.setSelection(new MonacoRange(newPosition, newPosition));
-      // editor._commandService.executeCommand(
-      //   "editor.action.inlineSuggest.trigger"
-      // );
     };
   }
 

ui/src/lib/notebook.ts

@@ -106,42 +106,9 @@ export function computeTextAndOffsets<T>(
     maybeNotebook.currentTextModel,
     undefined
   );
-  //   const modelIsMarkdown = modelLanguage === Language.MARKDOWN;
-  //   const modelIsExpected = isAllowedLanguage(modelLanguage);
-  //   const relevantDocumentTexts: string[] = [];
+
   let additionalUtf8ByteOffset = 0;
-  //   let found = false;
-  //   for (const [idx, previousModel] of textModels.entries()) {
-  //     if (modelIsExpected && maybeNotebook.currentTextModel === previousModel) {
-  //       // There is an offset for all previous cells and the \n\n spacing after each one.
-  //       additionalUtf8ByteOffset =
-  //         relevantDocumentTexts
-  //           .map((el) => numCodeUnitsToNumUtf8Bytes(el))
-  //           .reduce((a, b) => a + b, 0) +
-  //         '\n\n'.length * relevantDocumentTexts.length;
-  //       found = true;
-  //     }
-  //     const previousModelLanguage = maybeNotebook.getLanguage(previousModel, idx);
-  //     if (modelIsExpected && !modelIsMarkdown) {
-  //       // Don't use markdown in the Python prompt construction.
-  //       // TODO(prem): Consider adding as comments.
-  //       if (previousModelLanguage === Language.MARKDOWN) {
-  //         continue;
-  //       } else if (previousModelLanguage === modelLanguage) {
-  //         relevantDocumentTexts.push(maybeNotebook.getText(previousModel));
-  //       }
-  //     } else if (modelIsMarkdown) {
-  //       if (previousModelLanguage === Language.MARKDOWN) {
-  //         relevantDocumentTexts.push(maybeNotebook.getText(previousModel));
-  //       } else if (isAllowedLanguage(previousModelLanguage)) {
-  //         relevantDocumentTexts.push(
-  //           `\`\`\`${
-  //             NOTEBOOK_LANGUAGES[previousModelLanguage as AllowedLanguages]
-  //           }\n${maybeNotebook.getText(previousModel)}\n\`\`\``
-  //         );
-  //       }
-  //     }
-  //   }
+
   const currentModelText = maybeNotebook.getText(
     maybeNotebook.currentTextModel
   );