feat: support comments on multi-diff view

packages/ai-native/src/browser/components/ChatEditor.tsx

@@ -25,7 +25,7 @@ import {
   localize,
   runWhenIdle,
 } from '@opensumi/ide-core-common';
-import { insertSnippetWithMonacoEditor } from '@opensumi/ide-editor/lib/browser/editor-collection.service';
+import { insertSnippetWithMonacoEditor } from '@opensumi/ide-editor/lib/browser/base-editor-wrapper';
 import { MonacoCommandRegistry } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
 import { ITheme, IThemeService } from '@opensumi/ide-theme';
 import { WorkbenchThemeService } from '@opensumi/ide-theme/lib/browser/workbench.theme.service';

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

@@ -2,7 +2,8 @@ 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 { MockInjector, mockService } from '@opensumi/ide-dev-tool/src/mock-injector';
+import { EditorCollectionService } from '@opensumi/ide-editor';
 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';
@@ -28,6 +29,12 @@ describe('comment service test', () => {
           token: IIconService,
           useClass: IconService,
         },
+        {
+          token: EditorCollectionService,
+          useValue: mockService({
+            listEditors: () => [],
+          }),
+        },
       ]),
     );
     commentsService = injector.get<ICommentsService>(ICommentsService);

packages/comments/__test__/browser/comment.service.test.ts

@@ -76,6 +76,7 @@ describe('comment service test', () => {
     currentEditor = mockService({
       monacoEditor,
       updateOptions: updateEditorLayoutOptions,
+      currentUri: URI.file('/test'),
     });
     injector = createBrowserInjector(
       [CommentsModule],
@@ -95,7 +96,7 @@ describe('comment service test', () => {
         {
           token: EditorCollectionService,
           useValue: mockService({
-            listEditors: () => [currentEditor],
+            listEditors: () => [],
           }),
         },
         {
@@ -293,7 +294,7 @@ describe('comment service test', () => {
     const thread = createTestThreads(URI.file('/test'))[0];
     jest.clearAllMocks();
     commentsService.setCurrentCommentThread(thread);
-    expect(currentEditor.monacoEditor.deltaDecorations).toHaveBeenCalledTimes(9);
+    expect(currentEditor.monacoEditor.deltaDecorations).toHaveBeenCalledTimes(1);
   });
 
   function createTestThreads(uri: URI) {

packages/comments/__test__/browser/comments-feature.registry.test.ts

@@ -1,14 +1,15 @@
 import { Injector } from '@opensumi/di';
 import { CommentContentNode, CommentRoot } from '@opensumi/ide-comments/lib/browser/tree/tree-node.defined';
 import { IContextKeyService, URI } from '@opensumi/ide-core-browser';
+import { createBrowserInjector } from '@opensumi/ide-dev-tool/src/injector-helper';
+import { MockInjector, mockService } from '@opensumi/ide-dev-tool/src/mock-injector';
+import { EditorCollectionService } from '@opensumi/ide-editor';
 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, ICommentsFeatureRegistry, ICommentsService } from '../../src/common';
 
@@ -29,6 +30,12 @@ describe('comment service test', () => {
           token: IIconService,
           useClass: IconService,
         },
+        {
+          token: EditorCollectionService,
+          useValue: mockService({
+            listEditors: () => [],
+          }),
+        },
       ]),
     );
     commentsService = injector.get<ICommentsService>(ICommentsService);

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

@@ -59,6 +59,9 @@ export class CommentsThread extends Disposable implements ICommentsThread {
 
   private onDidChangeEmitter: Emitter<void> = new Emitter();
 
+  // 用于跟踪待执行的 setTimeout，避免快速滚动时的竞态条件
+  private pendingShowTimeouts = new Set<NodeJS.Timeout>();
+
   get onDidChange() {
     return this.onDidChangeEmitter.event;
   }
@@ -111,6 +114,14 @@ export class CommentsThread extends Disposable implements ICommentsThread {
         commentThreadIsEmptyContext.set(!length);
       }),
     );
+    const editors = this.getEditorsByUri(this.uri);
+    editors.forEach((editor) => {
+      const widget = this.widgets.get(editor);
+      // 说明是在新的 group 中打开
+      if (!widget) {
+        this.addWidgetByEditor(editor);
+      }
+    });
     this.addDispose(
       autorun((reader) => {
         const isCollapsed = this.isCollapsed.read(reader);
@@ -132,6 +143,9 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     this.addDispose({
       dispose: () => {
         this.updateComments([]);
+        // 清理待执行的 timeout
+        this.pendingShowTimeouts.forEach((timeout) => clearTimeout(timeout));
+        this.pendingShowTimeouts.clear();
       },
     });
     this.onDidChangeEmitter.fire();
@@ -182,7 +196,7 @@ export class CommentsThread extends Disposable implements ICommentsThread {
 
   private addWidgetByEditor(editor: IEditor) {
     const widget = this.injector.get(CommentsZoneWidget, [editor, this, { arrowColor: 'var(--peekView-border)' }]);
-    // 如果当前 widget 发生高度变化，通知同一个 同一个 editor 的其他 range 相同的 thread 也重新计算一下高度
+    // 如果当前 widget 发生高度变化，通知同一个 editor 的其他 range 相同的 thread 也重新计算一下高度
     this.addDispose(
       widget.onChangeZoneWidget(() => {
         const threads = this.commentsService.commentsThreads.filter((thread) => this.isEqual(thread));
@@ -236,14 +250,23 @@ export class CommentsThread extends Disposable implements ICommentsThread {
           widget = this.addWidgetByEditor(editor);
         }
         // 如果标记之前是已经展示的 widget，则调用 show 方法
-        if (editor.currentUri?.isEqual(this.uri)) {
+        if (widget && editor.currentUri?.isEqual(this.uri)) {
           widget.show();
         }
       });
     }
   }
 
+  public removePendingShowedWidgets() {
+    this.pendingShowTimeouts.forEach((timeout) => clearTimeout(timeout));
+    this.pendingShowTimeouts.clear();
+  }
+
   public showWidgetsIfShowed() {
+    // 清除之前的待执行 timeout，避免竞态条件
+    this.pendingShowTimeouts.forEach((timeout) => clearTimeout(timeout));
+    this.pendingShowTimeouts.clear();
+
     for (const editor of this.getEditorsByUri(this.uri)) {
       let widget = this.widgets.get(editor);
       // 说明是在新的 group 中打开
@@ -252,9 +275,16 @@ export class CommentsThread extends Disposable implements ICommentsThread {
       }
       // 如果标记之前是已经展示的 widget，则调用 show 方法
       if (editor.currentUri?.isEqual(this.uri)) {
-        setTimeout(() => {
-          widget?.show();
-        }, 0);
+        const timeout = setTimeout(() => {
+          // 在异步回调中再次检查编辑器的当前 URI 是否仍然匹配 thread 的 URI
+          // 防止用户快速滚动时 widget 渲染到错误的文件中
+          if (widget && editor.currentUri?.isEqual(this.uri)) {
+            widget.show();
+          }
+          // 执行完成后从跟踪集合中移除
+          this.pendingShowTimeouts.delete(timeout);
+        }, 100);
+        this.pendingShowTimeouts.add(timeout);
       }
     }
   }

packages/comments/src/browser/comments-zone.view.tsx

@@ -206,10 +206,15 @@ export class CommentsZoneWidget extends ResizeZoneWidget implements ICommentsZon
       </ConfigProvider>,
     );
 
+    const disposer = editor.monacoEditor.onDidChangeModel(() => {
+      thread.hide();
+    });
+
     this.addDispose({
       dispose: () => {
         this.wrapperRoot?.unmount();
         this.wrapperRoot = undefined;
+        disposer.dispose();
       },
     });
   }