Merge pull request #84 from easyops-cn/steve/copilot

feat(): monaco editor copilot

Author: weareoutman

bricks/vs/build.config.js

@@ -24,6 +24,10 @@ export default {
         rootMode: "upward",
       },
     },
+    {
+      test: /\.txt$/,
+      type: "asset/source",
+    },
   ],
   plugins: [
     new MonacoWebpackPlugin({

bricks/vs/docs/code-editor.md

@@ -88,13 +88,55 @@ children:
 
 ```yaml preview
 - brick: vs.code-editor
+  context:
+    - name: commonMarkers
+      value:
+        - token: PATH
+          message: 这是 PATH
+          level: hit
+        - token: QUERY
+          message: 这是 QUERY
+          level: info
+        - token: ANCHOR
+          message: 这是 ANCHOR
+          level: warn
+        - token: STATE
+          message: 这里不能写 STATE
+          level: error
+          code:
+            value: 详情地址
+            target: https://brick-next.js.org/docs/concepts/context
+        - token: TPL
+          level: warn
+          message: 不允许写入TPL
+    - name: commonLibs
+      value:
+        - filePath: base.d.ts
+          content: |
+            declare namespace CTX {
+              const pageTitle: string;
+              const name: string;
+              const a;
+              const b;
+            };
+            declare namespace FN {
+              function getPageDetail();
+              function getInstance();
+            };
+            declare namespace PATH {
+              const instanceId: string;
+              const name: string;
+            };
+            declare namespace QUERY {
+              const activeId: string;
+            }
   events:
     token.click:
       - action: console.log
   properties:
     language: brick_next_yaml
     value: |
-      basicUsige:
+      basicUsage:
         keyword:
          Expression:
           expression1: <% CTX.work %>
@@ -176,7 +218,7 @@ children:
               %>
             test7: |
               <%  "track context",  CTX.name 
-          exporession16:
+          expression16:
             - <% CTX.a %>     
             - CTX.b
             -   <% CTX.c %>    
@@ -198,25 +240,6 @@ children:
     links:
       - CTX
       - FN
-    markers:
-      - token: PATH
-        message: “这是 PATH”
-        level: hit
-      - token: QUERY
-        message: “这是 QUERY”
-        level: info
-      - token: ANCHOR
-        message: “这是 ANCHOR“
-        level: warn
-      - token: STATE
-        message: "这里不能写 STATE"
-        level: error
-        code:
-          value: "详情地址"
-          target: https://brick-next.js.org/docs/concepts/context
-      - token: TPL
-        level: warn
-        message: 不允许写入TPL
     completers:
       - label: buttonName
         detail: string
@@ -230,26 +253,8 @@ children:
         completers:
           - label: a
           - label: b
-    extraLibs:
-      - filePath: base.d.ts
-        content: |
-          declare namespace CTX {
-            const pageTitle: string;
-            const name: string;
-            const a;
-            const b;
-          };
-          declare namespace FN {
-            function getPageDetail();
-            function getInstance();
-          };
-          declare namespace PATH {
-            const instanceId: string;
-            const name: string;
-          };
-          declare namespace QUERY {
-            const activeId: string;
-          }
+    markers: <% CTX.commonMarkers %>
+    extraLibs: <% CTX.commonLibs %>
 - brick: vs.code-editor
   events:
     highlight.click:
@@ -264,6 +269,8 @@ children:
     links:
       - CTX
       - FN
+    markers: <% CTX.commonMarkers %>
+    extraLibs: <% CTX.commonLibs %>
 - brick: vs.code-editor
   events:
     highlight.click:
@@ -276,6 +283,8 @@ children:
     links:
       - CTX
       - FN
+    markers: <% CTX.commonMarkers %>
+    extraLibs: <% CTX.commonLibs %>
 - brick: vs.code-editor
   events:
     highlight.click:
@@ -289,6 +298,8 @@ children:
     links:
       - CTX
       - FN
+    markers: <% CTX.commonMarkers %>
+    extraLibs: <% CTX.commonLibs %>
 ```
 
 ### Show CTX.DS

bricks/vs/package.json

@@ -58,14 +58,17 @@
   },
   "dependencies": {
     "@babel/types": "^7.22.5",
+    "@next-api-sdk/llm-sdk": "^1.1.3",
     "@next-core/cook": "^2.5.7",
     "@next-core/element": "^1.2.17",
     "@next-core/monaco-contributions": "^0.3.14",
     "@next-core/react-element": "^1.0.36",
     "@next-core/react-runtime": "^1.7.11",
+    "@next-core/runtime": "^1.59.4",
     "@next-core/theme": "^1.5.4",
     "@next-core/utils": "^1.7.32",
     "@next-shared/form": "^0.7.10",
+    "@next-shared/monaco-copilot": "^0.0.0",
     "@next-shared/spell-check": "^0.1.1",
     "comlink": "^4.4.2",
     "monaco-editor": "^0.50.0",

bricks/vs/src/code-editor/index.spec.tsx

@@ -6,6 +6,14 @@ import { CodeEditor } from "./index.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 jest.mock("@next-core/theme", () => ({}));
+jest.mock("@next-core/runtime", () => ({
+  getRuntime() {
+    return null;
+  },
+  getV2RuntimeFromDll() {
+    return null;
+  },
+}));
 jest.mock("@next-core/react-runtime");
 jest.mock("./workers/yamlLinter.js", () => ({}));
 jest.mock("./workers/spellCheckRemoteWorker.js", () => ({}));

bricks/vs/src/code-editor/index.tsx

@@ -10,6 +10,8 @@ import { EventEmitter, createDecorators } from "@next-core/element";
 import { unwrapProvider } from "@next-core/utils/general";
 import { wrapBrick } from "@next-core/react-element";
 import { useCurrentTheme } from "@next-core/react-runtime";
+import { getRuntime } from "@next-core/runtime";
+import { HttpAbortError } from "@next-core/http";
 import { FormItemElementBase } from "@next-shared/form";
 import type { FormItem, FormItemProps } from "@next-bricks/form/form-item";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
@@ -38,7 +40,6 @@ import {
   getEmbeddedJavascriptUri,
   getBrickYamlBuiltInDeclare,
 } from "./utils/jsSuggestInBrickYaml.js";
-import { addExtraLibs } from "./utils/addExtraLibs.js";
 import type { EoTooltip, ToolTipProps } from "@next-bricks/basic/tooltip";
 import type {
   GeneralIcon,
@@ -49,6 +50,11 @@ import { K, NS, locales } from "./i18n.js";
 import type { copyToClipboard as _copyToClipboard } from "@next-bricks/basic/data-providers/copy-to-clipboard";
 import type { showNotification as _showNotification } from "@next-bricks/basic/data-providers/show-notification/show-notification";
 import classNames from "classnames";
+import {
+  MonacoCopilotProvider,
+  SUPPORTED_LANGUAGES,
+} from "@next-shared/monaco-copilot";
+import { AiopsBaseApi_openaiChat } from "@next-api-sdk/llm-sdk";
 import "./index.css";
 import { EmbeddedModelContext } from "./utils/embeddedModelState.js";
 import { PlaceholderContentWidget } from "./widget/Placeholder.js";
@@ -62,6 +68,12 @@ import {
   celCommonCompletionProviderFactory,
   celSpecificCompletionProviderFactory,
 } from "./utils/celCompletionProvider.js";
+import {
+  disposeEditor,
+  isCurrentEditor,
+  switchEditor,
+} from "./utils/EditorService.js";
+import { setExtraLibs } from "./utils/setExtraLibs.js";
 
 initializeReactI18n(NS, locales);
 
@@ -89,6 +101,47 @@ for (const lang of CEL_FAMILY) {
   );
 }
 
+// istanbul ignore next
+const { enabled: copilotEnabled, ...copilotOptions } =
+  (getRuntime()?.getMiscSettings().globalMonacoEditorCopilotOptions ?? {}) as {
+    enabled?: boolean;
+    model?: string;
+    debounce?: number;
+    timeout?: number;
+  };
+
+// istanbul ignore next
+if (copilotEnabled) {
+  monaco.languages.registerInlineCompletionsProvider(
+    SUPPORTED_LANGUAGES,
+    new MonacoCopilotProvider({
+      ...copilotOptions,
+      async request({ model, temperature, system, prompt, signal }) {
+        const response = await AiopsBaseApi_openaiChat(
+          {
+            model,
+            temperature,
+            enableSensitiveWordsFilter: false,
+            stream: false,
+            messages: [
+              ...(system ? [{ role: "system", content: system }] : []),
+              { role: "user", content: prompt },
+            ],
+          },
+          {
+            signal,
+            interceptorParams: {
+              ignoreLoadingBar: true,
+            },
+          }
+        );
+        return response.choices?.[0]?.message?.content?.trim();
+      },
+      HttpAbortError,
+    })
+  );
+}
+
 const { defineElement, property, event } = createDecorators();
 
 const WrappedFormItem = wrapBrick<FormItem, FormItemProps>("eo-form-item");
@@ -712,19 +765,6 @@ export function CodeEditorComponent({
   const languageDefaults =
     language === "typescript" ? "typescriptDefaults" : "javascriptDefaults";
 
-  useEffect(() => {
-    const libs: ExtraLib[] = extraLibs ?? [];
-
-    const disposables = addExtraLibs(libs, {
-      languageDefaults,
-    });
-    return () => {
-      for (const item of disposables) {
-        item.dispose();
-      }
-    };
-  }, [extraLibs, language, languageDefaults]);
-
   useEffect(() => {
     if (
       language === "javascript" ||
@@ -741,6 +781,55 @@ export function CodeEditorComponent({
     }
   }, [language, domLibsEnabled, languageDefaults]);
 
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    return () => {
+      disposeEditor(editor);
+    };
+  }, []);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+
+    const setupLanguageService = () => {
+      setExtraLibs(extraLibs, { languageDefaults });
+
+      if (
+        language === "javascript" ||
+        language === "typescript" ||
+        language === "brick_next_yaml"
+      ) {
+        monaco.languages.typescript[languageDefaults].setCompilerOptions({
+          allowNonTsExtensions: true,
+          lib: domLibsEnabled ? undefined : ["esnext"],
+          target: monaco.languages.typescript.ScriptTarget.ESNext,
+          moduleResolution:
+            monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        });
+      }
+    };
+
+    if (isCurrentEditor(editor)) {
+      setupLanguageService();
+    }
+
+    const disposable = editor.onDidFocusEditorWidget(() => {
+      // Set language service for this particular editor instance
+      if (switchEditor(editor)) {
+        setupLanguageService();
+      }
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, [domLibsEnabled, extraLibs, language, languageDefaults]);
+
   useEffect(() => {
     const editor = editorRef.current;
     if (language === "brick_next_yaml" && editor) {
@@ -971,13 +1060,6 @@ export function CodeEditorComponent({
     }
   }, [expanded]);
 
-  useEffect(() => {
-    return () => {
-      editorRef.current?.getModel()?.dispose();
-      editorRef.current?.dispose();
-    };
-  }, []);
-
   useEffect(() => {
     if (!editorRef.current && !placeholder) return;
     const placeholderWidget = new PlaceholderContentWidget(