refactor: upgrade monaco to 0.54.0 and support vscode.languages.registerInlineEditProvider API (#4359)

* feat: support provideInlineEdit API

* fix: handle undefined history prop in HistoryInputBox

* chore: remove cache

* chore: enable yarn caching and add ts-ignore comment

* chore: update formate

* fix: correct import path for domStylesheets

* chore: add comment for ts-ignore directive

* chore: upgrade monaco editor version

* chore: add mock for window.crypto.randomUUID

* fix: add getRandomValues mock to window.crypto

* chore: fit monaco 0.54.0

* chore: add ts-nocheck comment to observable.ts

* chore: update jest.setup.jsdom.js

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: add delay when typing text in text editor

* chore: remove commented out promise import

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: erha19

jest.setup.jsdom.js

@@ -89,3 +89,35 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+// Mock window.crypto
+Object.defineProperty(window, 'crypto', {
+  writable: true,
+  value: {
+    randomUUID: () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    }),
+    getRandomValues: (array) => {
+      if (!(array instanceof Int8Array || array instanceof Uint8Array ||
+            array instanceof Int16Array || array instanceof Uint16Array ||
+            array instanceof Int32Array || array instanceof Uint32Array ||
+            array instanceof Uint8ClampedArray)) {
+        throw new TypeError('Expected a TypedArray');
+      }
+      for (let i = 0; i < array.length; i++) {
+        array[i] = Math.floor(Math.random() * 256);
+      }
+      return array;
+    },
+  },
+});
+
+// Mock window.CSS
+Object.defineProperty(window, 'CSS', {
+  writable: true,
+  value: {
+    escape: jest.fn((str) => str),
+  },
+});

packages/ai-native/src/browser/contrib/intelligent-completions/intelligent-completions.controller.ts

@@ -40,7 +40,7 @@ import { InlineCompletionsController } from '@opensumi/monaco-editor-core/esm/vs
 import {
   SuggestItemInfo,
   SuggestWidgetAdaptor,
-} from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/inlineCompletions/browser/model/suggestWidgetAdaptor';
+} from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/inlineCompletions/browser/model/suggestWidgetAdapter';
 import { ContextKeyExpr } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
 
 import { AINativeContextKey } from '../../ai-core.contextkeys';
@@ -166,8 +166,7 @@ export class IntelligentCompletionsController extends BaseAIMonacoEditorControll
             model?.inlineCompletionState.read(reader);
 
             const suggestWidgetSelectedItem = inlineCompletionsController['_suggestWidgetSelectedItem'] as IObservable<
-              SuggestItemInfo | undefined,
-              unknown
+              SuggestItemInfo | undefined
             >;
             const selectedItem = suggestWidgetSelectedItem.get();
             if (selectedItem) {

packages/ai-native/src/browser/contrib/intelligent-completions/intelligent-completions.feature.registry.ts

@@ -1,12 +1,14 @@
 import { Injectable } from '@opensumi/di';
 import { Disposable } from '@opensumi/ide-core-common';
+import { InlineEditProvider } from '@opensumi/ide-monaco';
 
 import { ICodeEditsProvider, IIntelligentCompletionProvider, IIntelligentCompletionsRegistry } from '../../types';
 
 @Injectable()
 export class IntelligentCompletionsRegistry extends Disposable implements IIntelligentCompletionsRegistry {
   private inlineCompletionsProvider: IIntelligentCompletionProvider | undefined;
   private codeEditsProvider: ICodeEditsProvider | undefined;
+  private inlineEditProvider: InlineEditProvider | undefined;
 
   registerIntelligentCompletionProvider(provider: IIntelligentCompletionProvider): void {
     this.inlineCompletionsProvider = provider;
@@ -16,6 +18,10 @@ export class IntelligentCompletionsRegistry extends Disposable implements IIntel
     this.inlineCompletionsProvider = provider;
   }
 
+  registerInlineEditProvider(provider: InlineEditProvider): void {
+    this.inlineEditProvider = provider;
+  }
+
   registerCodeEditsProvider(provider: ICodeEditsProvider): void {
     this.codeEditsProvider = provider;
   }
@@ -27,4 +33,9 @@ export class IntelligentCompletionsRegistry extends Disposable implements IIntel
   getCodeEditsProvider(): ICodeEditsProvider | undefined {
     return this.codeEditsProvider;
   }
+
+  getInlineEditProvider(): InlineEditProvider | undefined {
+    // TODO: 支持模块内调用
+    return this.inlineEditProvider;
+  }
 }

packages/ai-native/src/browser/types.ts

@@ -13,7 +13,15 @@ import {
   MaybePromise,
   MergeConflictEditorMode,
 } from '@opensumi/ide-core-common';
-import { ICodeEditor, IRange, ISelection, ITextModel, NewSymbolNamesProvider, Position } from '@opensumi/ide-monaco';
+import {
+  ICodeEditor,
+  IRange,
+  ISelection,
+  ITextModel,
+  InlineEditProvider,
+  NewSymbolNamesProvider,
+  Position,
+} from '@opensumi/ide-monaco';
 import { SumiReadableStream } from '@opensumi/ide-utils/lib/stream';
 import { IMarker } from '@opensumi/monaco-editor-core/esm/vs/platform/markers/common/markers';
 
@@ -226,14 +234,39 @@ export type ICodeEditsProvider = (
   token: CancellationToken,
 ) => MaybePromise<ICodeEditsResult | undefined>;
 
+export type IIntelligentInlineEditProvider = (
+  editor: ICodeEditor,
+  position: IPosition,
+  contextBean: IAICompletionOption,
+  token: CancellationToken,
+) => MaybePromise<IIntelligentCompletionsResult>;
+
+/**
+ * Interface for registering intelligent completion providers and code edits providers.
+ */
 export interface IIntelligentCompletionsRegistry {
   /**
-   *  @deprecated use registerInlineCompletionProvider API
+   * Registers an intelligent completion provider.
+   * @deprecated Use the `registerInlineCompletionsProvider` method instead.
+   * @param provider - The intelligent completion provider to register.
    */
   registerIntelligentCompletionProvider(provider: IIntelligentCompletionProvider): void;
+
+  /**
+   * Registers an inline completions provider.
+   * @param provider - The intelligent completion provider to register.
+   */
   registerInlineCompletionsProvider(provider: IIntelligentCompletionProvider): void;
+
+  /**
+   * Registers an inline edit provider.
+   * @param provider The inline edit provider to register.
+   */
+  registerInlineEditProvider(provider: InlineEditProvider): void;
+
   /**
-   * 注册 code edits 功能
+   * Registers a code edits provider.
+   * @param provider - The code edits provider to register.
    */
   registerCodeEditsProvider(provider: ICodeEditsProvider): void;
 }

packages/ai-native/src/browser/widget/inline-chat/inline-chat-editor.controller.ts

@@ -222,7 +222,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
 
   protected async showInlineChat(monacoEditor: monaco.ICodeEditor): Promise<void> {
     // 调试状态下禁用 inline chat。影响调试体验
-    const inDebugMode = this.contextKeyService.getContextValue(CONTEXT_IN_DEBUG_MODE_KEY);
+    const inDebugMode = this.contextKeyService.getContextKeyValue(CONTEXT_IN_DEBUG_MODE_KEY);
     if (inDebugMode) {
       return;
     }

packages/ai-native/src/browser/widget/inline-diff/inline-diff.controller.ts

@@ -51,7 +51,7 @@ export class InlineDiffController extends BaseAIMonacoEditorController {
 
   private previewerStore: Map<string, IInlineDiffPreviewer>;
   private currentPreviewer: ISettableObservable<IInlineDiffPreviewer | undefined>;
-  private modelChangeObs: IObservable<monaco.editor.ITextModel, unknown>;
+  private modelChangeObs: IObservable<monaco.editor.ITextModel>;
 
   mount(): IDisposable {
     this.previewerStore = new Map();

packages/ai-native/src/browser/widget/inline-input/inline-input.controller.ts

@@ -67,7 +67,7 @@ export class InlineInputController extends BaseAIMonacoEditorController {
   private aiNativeContextKey: AINativeContextKey;
 
   private inputValue: ISettableObservable<string>;
-  private modelChangeObs: IObservable<monaco.editor.ITextModel, unknown>;
+  private modelChangeObs: IObservable<monaco.editor.ITextModel>;
   private inlineInputWidgetStore: Map<
     string,
     InlineInputWidgetStoreInEmptyLine | InlineInputWidgetStoreInSelection | null

packages/comments/__test__/browser/comment-thread.test.ts

@@ -1,14 +1,14 @@
 import { Injector } from '@opensumi/di';
 import { IContextKeyService } from '@opensumi/ide-core-browser';
 import { URI } from '@opensumi/ide-core-common';
+import { createBrowserInjector } from '@opensumi/ide-dev-tool/src/injector-helper';
+import { MockInjector } from '@opensumi/ide-dev-tool/src/mock-injector';
 import { positionToRange } from '@opensumi/ide-monaco';
+import { createMockedMonaco } from '@opensumi/ide-monaco/__mocks__/monaco';
+import { MockContextKeyService } from '@opensumi/ide-monaco/__mocks__/monaco.context-key.service';
 import { IIconService } from '@opensumi/ide-theme';
 import { IconService } from '@opensumi/ide-theme/lib/browser';
 
-import { createBrowserInjector } from '../../../../tools/dev-tool/src/injector-helper';
-import { MockInjector } from '../../../../tools/dev-tool/src/mock-injector';
-import { createMockedMonaco } from '../../../monaco/__mocks__/monaco';
-import { MockContextKeyService } from '../../../monaco/__mocks__/monaco.context-key.service';
 import { CommentsModule } from '../../src/browser';
 import { CommentMode, ICommentsService } from '../../src/common';
 
@@ -134,10 +134,10 @@ describe('comment service test', () => {
     const thread = commentsService.createThread(uri, positionToRange(1), {
       contextValue,
     });
-    expect(thread.contextKeyService.getContextValue('thread')).toBe(contextValue);
-    expect(thread.contextKeyService.getContextValue('threadsLength')).toBe(1);
+    expect(thread.contextKeyService.getContextKeyValue('thread')).toBe(contextValue);
+    expect(thread.contextKeyService.getContextKeyValue('threadsLength')).toBe(1);
     commentsService.createThread(uri, positionToRange(2));
     // 同一个 uri 的 threadsLength 会变为 2
-    expect(thread.contextKeyService.getContextValue('threadsLength')).toBe(2);
+    expect(thread.contextKeyService.getContextKeyValue('threadsLength')).toBe(2);
   });
 });

packages/comments/src/browser/comments-thread.ts

@@ -46,7 +46,7 @@ export class CommentsThread extends Disposable implements ICommentsThread {
   }
 
   get contextValue() {
-    return this._contextKeyService.getContextValue('thread');
+    return this._contextKeyService.getContextKeyValue('thread');
   }
 
   get onDidChangeCollapsibleState() {

packages/components/src/input/HistoryInputBox.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { HistoryNavigator } from '@opensumi/monaco-editor-core/esm/vs/base/common/history';
+import { HistoryNavigator, IHistory } from '@opensumi/monaco-editor-core/esm/vs/base/common/history';
 
 import { IInputBaseProps, Input } from './Input';
 
 export interface HistoryInputBoxProp extends IInputBaseProps {
   // 上层自己持久化历史记录
-  history?: string[];
+  history?: IHistory<string>;
   onReady?: (api: IHistoryInputBoxHandler) => void;
 }
 
@@ -32,7 +32,7 @@ export class HistoryInputBox extends React.Component<HistoryInputBoxProp> {
   public componentDidMount() {
     const { history, onReady } = this.props;
 
-    this.history = new HistoryNavigator(history || [], 100);
+    this.history = new HistoryNavigator(history || new Set([]), 100);
     this.inputProps = { ...this.props };
     delete this.inputProps.onReady;