@opensumi/ide-ai-native 3.2.4 → 3.2.5-next-1724062137.0

package/src/browser/widget/inline-diff/inline-diff.handler.ts

@@ -21,13 +21,12 @@ import { EResultKind } from '../inline-chat/inline-chat.service';
 import {
   BaseInlineDiffPreviewer,
   IDiffPreviewerOptions,
-  IExtendedSerializedState,
   LiveInlineDiffPreviewer,
   SideBySideInlineDiffWidget,
 } from '../inline-diff/inline-diff-previewer';
 import { InlineDiffWidget } from '../inline-diff/inline-diff-widget';
 import { InlineStreamDiffHandler } from '../inline-stream-diff/inline-stream-diff.handler';
-import { IPartialEditEvent } from '../inline-stream-diff/live-preview.decoration';
+import { IPartialEditEvent } from '../inline-stream-diff/live-preview.component';
 
 @Injectable()
 export class InlineDiffHandler extends IAIMonacoContribHandler {
@@ -51,70 +50,85 @@ export class InlineDiffHandler extends IAIMonacoContribHandler {
   private readonly _onMaxLineCount = new Emitter<number>();
   public readonly onMaxLineCount: Event<number> = this._onMaxLineCount.event;
 
-  protected _editorsStore = new Map<
-    monaco.ICodeEditor,
-    BaseInlineDiffPreviewer<InlineDiffWidget | InlineStreamDiffHandler> | undefined
-  >();
+  private previewer: BaseInlineDiffPreviewer<InlineDiffWidget | InlineStreamDiffHandler> | undefined;
 
-  protected _store = new Map<string, IExtendedSerializedState>();
+  private _previewerNodeStore = new Map<string, InlineStreamDiffHandler | null>();
 
   constructor() {
     super();
-    this.registerDispose(this.eventBus.on(EditorGroupCloseEvent, this.groupCloseHandler.bind(this)));
+    this.registerDispose(
+      this.eventBus.on(EditorGroupCloseEvent, (e: EditorGroupCloseEvent) => {
+        const uriString = e.payload.resource.uri.toString();
+        const node = this._previewerNodeStore.get(uriString);
+
+        if (node && node.previewerOptions.disposeWhenEditorClosed) {
+          this.destroyPreviewer(uriString);
+        }
+      }),
+    );
   }
+
   doContribute(): IDisposable {
     this.logger.log('InlineDiffHandler doContribute');
     return Disposable.NULL;
   }
 
-  storeState(monacoEditor: monaco.ICodeEditor, key: string) {
-    const previous = this._editorsStore.get(monacoEditor);
-    if (previous instanceof LiveInlineDiffPreviewer) {
-      const state = previous.serializeState();
-      if (state) {
-        this._store.set(key, state);
-      }
+  storeState(key: string) {
+    if (!this.previewer) {
+      return;
+    }
+
+    // 存储的是快照
+    const node = this.previewer.createNodeSnapshot();
+    if (node) {
+      this._previewerNodeStore.set(key, node as InlineStreamDiffHandler);
     }
-    return previous;
   }
 
   tryRestoreState(monacoEditor: monaco.ICodeEditor, key: string) {
-    const state = this._store.get(key);
-    if (!state) {
+    const node = this._previewerNodeStore.get(key);
+    if (!node) {
+      return;
+    }
+
+    if (node.disposed) {
+      this.destroyPreviewer(key);
       return;
     }
 
-    return this.restoreState(monacoEditor, state);
+    return this.restoreState(monacoEditor, node);
   }
 
-  restoreState(monacoEditor: monaco.ICodeEditor, state: IExtendedSerializedState) {
-    const oldDiffPreviewer = this._editorsStore.get(monacoEditor);
-    if (oldDiffPreviewer) {
-      oldDiffPreviewer.dispose();
-    }
+  restoreState(monacoEditor: monaco.ICodeEditor, node: InlineStreamDiffHandler) {
+    const uri = monacoEditor.getModel()?.uri;
 
-    const previewer = this.createDiffPreviewer(monacoEditor, state.selection, state.options);
-    if (previewer instanceof LiveInlineDiffPreviewer) {
-      previewer.restoreState(state);
-    }
+    if (uri) {
+      this.previewer = this.injector.get(LiveInlineDiffPreviewer, [monacoEditor]);
+      this.previewer.attachNode(node);
 
-    return previewer;
+      const dispose = this.previewer.onDispose(() => {
+        this.destroyPreviewer();
+        dispose.dispose();
+      });
+    }
   }
 
   registerInlineDiffFeature(editor: IEditor): IDisposable {
     const disposable = new Disposable();
 
     const monacoEditor = editor.monacoEditor;
+    const model = monacoEditor.getModel();
 
     disposable.addDispose(
       monacoEditor.onWillChangeModel((e) => {
         if (!e.oldModelUrl) {
           return;
         }
-        const previewer = this.storeState(monacoEditor, e.oldModelUrl.toString());
-        if (previewer) {
-          previewer.dispose();
-        }
+
+        const urlString = e.oldModelUrl.toString();
+        this.storeState(urlString);
+
+        this.destroyPreviewer();
       }),
     );
 
@@ -127,16 +141,16 @@ export class InlineDiffHandler extends IAIMonacoContribHandler {
       }),
     );
 
-    return disposable;
-  }
+    if (model) {
+      disposable.addDispose(
+        model.onWillDispose(() => {
+          const uriString = model.uri.toString();
+          this.destroyPreviewer(uriString);
+        }),
+      );
+    }
 
-  private formatAnswer(answer: string, crossCode: string): string {
-    const leadingWhitespaceMatch = crossCode.match(/^\s*/);
-    const indent = leadingWhitespaceMatch ? leadingWhitespaceMatch[0] : '  ';
-    return answer
-      .split('\n')
-      .map((line) => `${indent}${line}`)
-      .join('\n');
+    return disposable;
   }
 
   showPreviewerByStream(
@@ -195,87 +209,64 @@ export class InlineDiffHandler extends IAIMonacoContribHandler {
   }
 
   createDiffPreviewer(monacoEditor: monaco.ICodeEditor, selection: monaco.Selection, options?: IDiffPreviewerOptions) {
-    let previewer: BaseInlineDiffPreviewer<InlineDiffWidget | InlineStreamDiffHandler>;
-
     const inlineDiffMode = this.preferenceService.getValid<EInlineDiffPreviewMode>(
       AINativeSettingSectionsId.InlineDiffPreviewMode,
       EInlineDiffPreviewMode.inlineLive,
     );
+
+    this.destroyPreviewer();
+
     if (inlineDiffMode === EInlineDiffPreviewMode.sideBySide) {
-      previewer = this.injector.get(SideBySideInlineDiffWidget, [monacoEditor, selection, options]);
+      this.previewer = this.injector.get(SideBySideInlineDiffWidget, [monacoEditor]);
     } else {
-      previewer = this.injector.get(LiveInlineDiffPreviewer, [monacoEditor, selection, options]);
+      this.previewer = this.injector.get(LiveInlineDiffPreviewer, [monacoEditor]);
     }
 
-    previewer.show(selection.startLineNumber - 1, selection.endLineNumber - selection.startLineNumber + 2);
-
-    const previous = this._editorsStore.get(monacoEditor);
+    this.previewer.create(selection, options);
+    this.previewer.show(selection.startLineNumber - 1, selection.endLineNumber - selection.startLineNumber + 2);
 
-    const currentModel = monacoEditor.getModel();
+    this.listenPreviewer(this.previewer);
 
-    if (currentModel) {
-      currentModel.onWillDispose(() => {
-        previewer.dispose();
-      });
-    }
+    return this.previewer;
+  }
 
-    if (previous) {
-      previous.dispose();
+  private listenPreviewer(previewer: BaseInlineDiffPreviewer<InlineDiffWidget | InlineStreamDiffHandler> | undefined) {
+    if (!previewer) {
+      return;
     }
 
-    this._editorsStore.set(monacoEditor, previewer);
-
     if (previewer instanceof LiveInlineDiffPreviewer) {
       previewer.addDispose(
-        previewer.onPartialEditEvent((event) => {
+        previewer.onPartialEditEvent!((event) => {
           this._onPartialEditEvent.fire(event);
         }),
       );
     }
 
     previewer.addDispose(previewer.onLineCount((lineCount) => this._onMaxLineCount.fire(lineCount)));
-    return previewer;
   }
 
-  getPreviewer(
-    monacoEditor: monaco.ICodeEditor,
-  ): BaseInlineDiffPreviewer<InlineDiffWidget | InlineStreamDiffHandler> | undefined {
-    return this._editorsStore.get(monacoEditor);
+  getPreviewer(): BaseInlineDiffPreviewer<InlineDiffWidget | InlineStreamDiffHandler> | undefined {
+    return this.previewer;
   }
 
-  handleAction(monacoEditor: monaco.ICodeEditor, action: EResultKind): void {
-    const diffPreviewer = this._editorsStore.get(monacoEditor);
-    if (diffPreviewer) {
-      diffPreviewer.handleAction(action);
-    }
+  handleAction(action: EResultKind): void {
+    this.previewer?.handleAction(action);
   }
 
-  hidePreviewer(monacoEditor: monaco.ICodeEditor) {
-    const diffPreviewer = this._editorsStore.get(monacoEditor);
-    if (diffPreviewer) {
-      diffPreviewer.dispose();
-      this._editorsStore.delete(monacoEditor);
-    }
+  getModifyContent() {
+    return this.previewer?.getValueByEnd();
   }
 
-  revealFirstDiff(monacoEditor: monaco.ICodeEditor) {
-    const diffPreviewer = this._editorsStore.get(monacoEditor);
-    if (diffPreviewer) {
-      diffPreviewer.revealFirstDiff();
+  destroyPreviewer(uriString?: string) {
+    this.previewer?.dispose();
+    this.previewer = undefined;
+    if (uriString) {
+      this._previewerNodeStore.delete(uriString);
     }
   }
 
-  private async groupCloseHandler(e: EditorGroupCloseEvent) {
-    const uriString = e.payload.resource.uri.toString();
-
-    const previewer = this._editorsStore.get(e.payload.group.codeEditor.monacoEditor);
-
-    if (previewer) {
-      if (previewer.disposeWhenEditorClosed && previewer.isModel(uriString)) {
-        previewer.dispose();
-      }
-    }
-
-    this._store.delete(uriString);
+  revealFirstDiff() {
+    this.previewer?.revealFirstDiff();
   }
 }

package/src/browser/widget/inline-input/inline-input-widget.tsx

@@ -88,6 +88,7 @@ export class InlineInputChatWidget extends AIInlineContentWidget {
   @Autowired(InlineInputChatService)
   private inlineInputChatService: InlineInputChatService;
 
+  allowEditorOverflow = true;
   positionPreference = [ContentWidgetPositionPreference.ABOVE];
 
   override dispose(): void {

package/src/browser/widget/inline-input/inline-input.handler.ts

@@ -74,8 +74,8 @@ export class InlineInputHandler extends Disposable {
       return;
     }
 
-    if (strategy === ERunStrategy.PREVIEW && handler.providerPreviewStrategy) {
-      const previewResponse = await handler.providerPreviewStrategy(monacoEditor, value, this.cancelIndicator.token);
+    if (strategy === ERunStrategy.PREVIEW && handler.providePreviewStrategy) {
+      const previewResponse = await handler.providePreviewStrategy(monacoEditor, value, this.cancelIndicator.token);
 
       if (CancelResponse.is(previewResponse)) {
         widget.launchChatStatus(EInlineChatStatus.READY);

package/src/browser/widget/inline-stream-diff/inline-stream-diff.handler.tsx

@@ -11,13 +11,11 @@ import { LineTokens } from '@opensumi/monaco-editor-core/esm/vs/editor/common/to
 import { UndoRedoGroup } from '@opensumi/monaco-editor-core/esm/vs/platform/undoRedo/common/undoRedo';
 
 import { IDecorationSerializableState } from '../../model/enhanceDecorationsCollection';
+import { IDiffPreviewerOptions, IInlineDiffPreviewerNode } from '../inline-diff/inline-diff-previewer';
 
 import { InlineStreamDiffComputer } from './inline-stream-diff-computer';
-import {
-  IRemovedWidgetSerializedState,
-  LivePreviewDiffDecorationModel,
-  SerializableState,
-} from './live-preview.decoration';
+import { IRemovedWidgetState } from './live-preview.component';
+import { ILivePreviewDiffDecorationSnapshotData, LivePreviewDiffDecorationModel } from './live-preview.decoration';
 
 interface IRangeChangeData {
   removedTextLines: string[];
@@ -43,25 +41,36 @@ export enum EComputerMode {
   default = 'default',
 }
 
+export interface IInlineStreamDiffSnapshotData {
+  rawOriginalTextLines: string[];
+  rawOriginalTextLinesTokens: LineTokens[];
+  undoRedoGroup: UndoRedoGroup;
+  decorationSnapshotData: ILivePreviewDiffDecorationSnapshotData;
+  previewerOptions: IDiffPreviewerOptions;
+}
+
+const inlineStreamDiffComputer = new InlineStreamDiffComputer();
+
 @Injectable({ multiple: true })
-export class InlineStreamDiffHandler extends Disposable {
+export class InlineStreamDiffHandler extends Disposable implements IInlineDiffPreviewerNode {
   @Autowired(INJECTOR_TOKEN)
   private readonly injector: Injector;
 
-  private virtualModel: ITextModel;
-  private rawOriginalTextLines: string[];
-  private rawOriginalTextLinesTokens: LineTokens[] = [];
+  protected readonly _onDidEditChange = this.registerDispose(new Emitter<void>());
+  public readonly onDidEditChange: Event<void> = this._onDidEditChange.event;
 
-  private livePreviewDiffDecorationModel: LivePreviewDiffDecorationModel;
+  public previewerOptions: IDiffPreviewerOptions;
 
-  private undoRedoGroup: UndoRedoGroup;
+  private livePreviewDiffDecorationModel: LivePreviewDiffDecorationModel;
   private originalModel: ITextModel;
-  private inlineStreamDiffComputer: InlineStreamDiffComputer = new InlineStreamDiffComputer();
+  private virtualModel: ITextModel;
 
-  protected readonly _onDidEditChange = this.registerDispose(new Emitter<void>());
-  public readonly onDidEditChange: Event<void> = this._onDidEditChange.event;
+  // Parts that require snapshots
+  private rawOriginalTextLines: string[];
+  private rawOriginalTextLinesTokens: LineTokens[] = [];
+  private undoRedoGroup: UndoRedoGroup;
 
-  constructor(private readonly monacoEditor: ICodeEditor, private readonly selection: Selection) {
+  constructor(private readonly monacoEditor: ICodeEditor) {
     super();
 
     this.undoRedoGroup = new UndoRedoGroup();
@@ -70,9 +79,25 @@ export class InlineStreamDiffHandler extends Disposable {
     this.virtualModel = modelService.createModel('', null);
     this.originalModel = this.monacoEditor.getModel()!;
 
+    this.livePreviewDiffDecorationModel = this.injector.get(LivePreviewDiffDecorationModel, [this.monacoEditor]);
+    this.addDispose(this.livePreviewDiffDecorationModel);
+
+    // 将 diff handler 和 decoration model 的生命周期绑定在一起
+    const dispose = this.livePreviewDiffDecorationModel.onDispose(() => {
+      this.dispose();
+      dispose.dispose();
+    });
+  }
+
+  setPreviewerOptions(options: IDiffPreviewerOptions): void {
+    this.previewerOptions = options;
+  }
+
+  initialize(selection: Selection): void {
     const eol = this.originalModel.getEOL();
-    const startPosition = this.selection.getStartPosition();
-    const endPosition = this.selection.getEndPosition();
+    const startPosition = selection.getStartPosition();
+    const endPosition = selection.getEndPosition();
+
     this.rawOriginalTextLines = this.originalModel
       .getValueInRange(Range.fromPositions(startPosition, endPosition))
       .split(eol);
@@ -84,16 +109,52 @@ export class InlineStreamDiffHandler extends Disposable {
       return lineTokens;
     });
 
-    this.initializeDecorationModel();
+    const zone = LineRange.fromRangeInclusive(
+      Range.fromPositions(
+        { lineNumber: selection.startLineNumber, column: 1 },
+        { lineNumber: selection.endLineNumber, column: Number.MAX_SAFE_INTEGER },
+      ),
+    );
+
+    this.livePreviewDiffDecorationModel.initialize(zone);
   }
 
-  private initializeDecorationModel(): void {
-    this.livePreviewDiffDecorationModel = this.injector.get(LivePreviewDiffDecorationModel, [
-      this.monacoEditor,
-      this.selection,
-    ]);
+  private _snapshotStore: IInlineStreamDiffSnapshotData | undefined;
+  restoreSnapshot(snapshot: IInlineStreamDiffSnapshotData): void {
+    this._snapshotStore = snapshot;
+    const {
+      rawOriginalTextLines,
+      rawOriginalTextLinesTokens,
+      undoRedoGroup,
+      decorationSnapshotData,
+      previewerOptions,
+    } = snapshot;
 
-    this.addDispose(this.livePreviewDiffDecorationModel);
+    this.setPreviewerOptions(previewerOptions);
+
+    this.rawOriginalTextLines = rawOriginalTextLines;
+    this.rawOriginalTextLinesTokens = rawOriginalTextLinesTokens;
+    this.undoRedoGroup = undoRedoGroup;
+
+    this.livePreviewDiffDecorationModel.initialize(decorationSnapshotData.zone);
+  }
+
+  get currentSnapshotStore(): IInlineStreamDiffSnapshotData | undefined {
+    return this._snapshotStore;
+  }
+
+  restoreDecorationSnapshot(decorationSnapshotData: ILivePreviewDiffDecorationSnapshotData): void {
+    this.livePreviewDiffDecorationModel.restoreSnapshot(decorationSnapshotData);
+  }
+
+  createSnapshot(): IInlineStreamDiffSnapshotData {
+    return {
+      rawOriginalTextLines: this.rawOriginalTextLines,
+      rawOriginalTextLinesTokens: this.rawOriginalTextLinesTokens,
+      undoRedoGroup: this.undoRedoGroup,
+      decorationSnapshotData: this.livePreviewDiffDecorationModel.createSnapshot(),
+      previewerOptions: this.previewerOptions,
+    };
   }
 
   get onPartialEditWidgetListChange() {
@@ -106,7 +167,7 @@ export class InlineStreamDiffHandler extends Disposable {
     computerMode: EComputerMode = EComputerMode.default,
   ): IComputeDiffData {
     const computeResult = (
-      computerMode === EComputerMode.default ? this.inlineStreamDiffComputer : linesDiffComputers.getLegacy()
+      computerMode === EComputerMode.default ? inlineStreamDiffComputer : linesDiffComputers.getLegacy()
     ).computeDiff(originalTextLines, newTextLines, {
       computeMoves: false,
       maxComputationTimeMs: 200,
@@ -184,10 +245,6 @@ export class InlineStreamDiffHandler extends Disposable {
     };
   }
 
-  public getZone(): LineRange {
-    return this.livePreviewDiffDecorationModel.getZone();
-  }
-
   private calculateAddedDecorationCollectionState(diffModel: IComputeDiffData): IDecorationSerializableState[] {
     const zone = this.getZone();
 
@@ -211,7 +268,6 @@ export class InlineStreamDiffHandler extends Disposable {
 
   private renderPartialEditWidgets(diffModel: IComputeDiffData): void {
     const decorationRange = this.calculateAddedDecorationCollectionState(diffModel);
-
     this.livePreviewDiffDecorationModel.touchPartialEditWidgets(decorationRange.map((v) => v.startPosition.lineNumber));
   }
 
@@ -226,7 +282,7 @@ export class InlineStreamDiffHandler extends Disposable {
 
     let preRemovedLen: number = 0;
 
-    const states = [] as IRemovedWidgetSerializedState[];
+    const states = [] as IRemovedWidgetState[];
 
     for (const change of changes) {
       const { removedTextLines, removedLinesOriginalRange, addedRange } = change;
@@ -255,12 +311,10 @@ export class InlineStreamDiffHandler extends Disposable {
    * 一旦撤销到最顶层则关闭当前的 inline diff
    */
   private pushStackElement(): void {
-    this.livePreviewDiffDecorationModel.pushUndoElement({
-      undo: () => this.dispose(),
-      redo: () => {
-        /* noop */
-      },
-      group: this.undoRedoGroup,
+    const stack = this.livePreviewDiffDecorationModel.createEditStackElement(this.undoRedoGroup);
+    stack.attachModel(this.livePreviewDiffDecorationModel);
+    stack.registerUndo((decorationModel) => {
+      decorationModel.dispose();
     });
   }
 
@@ -377,7 +431,7 @@ export class InlineStreamDiffHandler extends Disposable {
 
   public recompute(computerMode: EComputerMode, newContent?: string): IComputeDiffData {
     if (newContent) {
-      this.virtualModel.setValue(newContent);
+      this.virtualModel.setValue(newContent.trim());
     }
 
     const newTextLines = this.virtualModel.getLinesContent();
@@ -440,21 +494,21 @@ export class InlineStreamDiffHandler extends Disposable {
     return this.livePreviewDiffDecorationModel.onPartialEditEvent;
   }
 
-  serializeState(): SerializableState {
-    return this.livePreviewDiffDecorationModel.serializeState();
-  }
-  restoreState(state: SerializableState): void {
-    this.livePreviewDiffDecorationModel.restoreSerializedState(state);
-  }
   acceptAll(): void {
     this.livePreviewDiffDecorationModel.acceptUnProcessed();
     this.dispose();
   }
+
   rejectAll(): void {
     this.livePreviewDiffDecorationModel.discardUnProcessed();
     this.dispose();
   }
+
   revealFirstDiff() {
     this.livePreviewDiffDecorationModel.revealFirstDiff();
   }
+
+  getZone(): LineRange {
+    return this.livePreviewDiffDecorationModel.getZone();
+  }
 }

package/src/browser/widget/inline-stream-diff/inline-stream-diff.module.less

@@ -34,6 +34,8 @@
   width: 1e6px;
 }
 
+@line-height: 18px;
+
 .inline_diff_accept_partial_widget_container {
   width: 100%;
 
@@ -42,9 +44,9 @@
     display: flex;
     border-radius: 4px;
     overflow: hidden;
-    margin-right: 10px;
-    max-height: 18px;
-    height: 18px;
+    margin-right: 12px;
+    max-height: @line-height;
+    height: @line-height;
     align-items: center;
   }
 
@@ -53,16 +55,17 @@
     border: none;
     font-size: 12px;
     cursor: pointer;
-    padding: 2px;
+    padding: 2px 6px;
+    height: @line-height;
 
     &.accept_btn {
       background-color: var(--aiNative-inlineDiffAcceptPartialEdit);
-      color: #fff;
+      color: var(--aiNative-inlineDiffAcceptPartialEdit-foreground);
     }
 
     &.discard_btn {
       background-color: var(--aiNative-inlineDiffDiscardPartialEdit);
-      color: #fff;
+      color: var(--aiNative-inlineDiffAcceptPartialEdit-foreground);
     }
   }
 }

package/src/browser/widget/inline-stream-diff/live-preview-stack.ts

@@ -0,0 +1,52 @@
+import { ITextModel, Uri } from '@opensumi/ide-monaco';
+import {
+  IResourceUndoRedoElement,
+  UndoRedoElementType,
+} from '@opensumi/monaco-editor-core/esm/vs/platform/undoRedo/common/undoRedo';
+
+import { LivePreviewDiffDecorationModel } from './live-preview.decoration';
+
+export class LivePreviewUndoRedoStackElement implements IResourceUndoRedoElement {
+  private decorationModel: LivePreviewDiffDecorationModel;
+
+  get type(): UndoRedoElementType.Resource {
+    return UndoRedoElementType.Resource;
+  }
+
+  get label(): string {
+    return 'Live.Preview.UndoRedo';
+  }
+
+  get code(): string {
+    return 'Live.Preview.UndoRedo';
+  }
+
+  get resource(): Uri {
+    return this.model.uri;
+  }
+
+  confirmBeforeUndo = false;
+
+  constructor(private readonly model: ITextModel) {}
+
+  attachModel(newDecorationModel: LivePreviewDiffDecorationModel): void {
+    this.decorationModel = newDecorationModel;
+  }
+
+  private _undo: (model: LivePreviewDiffDecorationModel) => void;
+  registerUndo(undo: (model: LivePreviewDiffDecorationModel) => void): void {
+    this._undo = undo;
+  }
+
+  undo(): void | Promise<void> {
+    this._undo?.(this.decorationModel);
+  }
+
+  private _redo: (model: LivePreviewDiffDecorationModel) => void;
+  registerRedo(redo: (model: LivePreviewDiffDecorationModel) => void): void {
+    this._redo = redo;
+  }
+  redo() {
+    this._redo?.(this.decorationModel);
+  }
+}