@opensumi/ide-ai-native 3.2.5 → 3.2.6-next-1724809247.0

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

@@ -226,6 +226,18 @@ export class InlineChatHandler extends Disposable {
           return;
         }
 
+        const previewer = () => {
+          // 兼容 providerDiffPreviewStrategy api
+          const strategy = handler.providerDiffPreviewStrategy
+            ? handler.providerDiffPreviewStrategy
+            : handler.providePreviewStrategy;
+          if (!strategy) {
+            return undefined;
+          }
+
+          return strategy.bind(this, monacoEditor, this.cancelIndicator.token);
+        };
+
         this.runInlineChatAction(
           monacoEditor,
           () => {
@@ -238,9 +250,7 @@ export class InlineChatHandler extends Disposable {
             return relationId;
           },
           handler.execute ? handler.execute!.bind(this, monacoEditor, this.cancelIndicator.token) : undefined,
-          handler.providerDiffPreviewStrategy
-            ? handler.providerDiffPreviewStrategy.bind(this, monacoEditor, this.cancelIndicator.token)
-            : undefined,
+          previewer(),
         );
       }),
     );
@@ -268,8 +278,8 @@ export class InlineChatHandler extends Disposable {
           handler.execute && strategy === ERunStrategy.EXECUTE
             ? handler.execute!.bind(this, monacoEditor, value, this.cancelIndicator.token)
             : undefined,
-          handler.providerDiffPreviewStrategy && strategy === ERunStrategy.DIFF_PREVIEW
-            ? handler.providerDiffPreviewStrategy.bind(this, monacoEditor, value, this.cancelIndicator.token)
+          handler.providePreviewStrategy && strategy === ERunStrategy.PREVIEW
+            ? handler.providePreviewStrategy.bind(this, monacoEditor, value, this.cancelIndicator.token)
             : undefined,
         );
       }),
@@ -400,7 +410,7 @@ export class InlineChatHandler extends Disposable {
 
     const model = monacoEditor.getModel();
 
-    this.inlineDiffHandler.hidePreviewer(monacoEditor);
+    this.inlineDiffHandler.destroyPreviewer(model!.uri.toString());
     this.aiInlineChatOperationDisposable.dispose();
 
     this.ensureInlineChatVisible(monacoEditor, crossSelection);
@@ -442,7 +452,7 @@ export class InlineChatHandler extends Disposable {
 
     this.aiInlineChatOperationDisposable.addDispose([
       this.aiInlineContentWidget.onResultClick((kind: EResultKind) => {
-        this.inlineDiffHandler.handleAction(monacoEditor, kind);
+        this.inlineDiffHandler.handleAction(kind);
 
         if (kind === EResultKind.ACCEPT) {
           this.aiReporter.end(relationId, { message: 'accept', success: true, isReceive: true });
@@ -477,7 +487,7 @@ export class InlineChatHandler extends Disposable {
     monacoEditor: monaco.ICodeEditor,
     reporterFn: () => string,
     execute?: () => MaybePromise<void>,
-    providerDiffPreviewStrategy?: () => MaybePromise<ChatResponse | InlineChatController>,
+    providerPreview?: () => MaybePromise<ChatResponse | InlineChatController>,
   ) {
     const selection = monacoEditor.getSelection();
     if (!selection) {
@@ -490,20 +500,14 @@ export class InlineChatHandler extends Disposable {
       this.disposeAllWidget();
     }
 
-    if (providerDiffPreviewStrategy) {
+    if (providerPreview) {
       const crossSelection = selection
         .setStartPosition(selection.startLineNumber, 1)
         .setEndPosition(selection.endLineNumber, Number.MAX_SAFE_INTEGER);
 
       const relationId = reporterFn();
 
-      await this.handleDiffPreviewStrategy(
-        monacoEditor,
-        providerDiffPreviewStrategy,
-        crossSelection,
-        relationId,
-        false,
-      );
+      await this.handleDiffPreviewStrategy(monacoEditor, providerPreview, crossSelection, relationId, false);
     }
   }
 }

package/src/browser/widget/inline-chat/inline-content-widget.tsx

@@ -351,39 +351,42 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
     };
   }
 
-  private recheckPosition(lineNumber: number, column: number): monaco.editor.IContentWidgetPosition {
-    const preNonWhitespaceColumn = this.safeGetLineLastNonWhitespaceColumn(lineNumber - 1);
-    const curNonWhitespaceColumn = this.safeGetLineLastNonWhitespaceColumn(lineNumber);
-    const nextNonWhitespaceColumn = this.safeGetLineLastNonWhitespaceColumn(lineNumber + 1);
-
-    let newPreference = [monacoBrowser.editor.ContentWidgetPositionPreference.ABOVE];
-    let newLineNumber = lineNumber;
-    let newColumn = column;
-
-    if (curNonWhitespaceColumn >= nextNonWhitespaceColumn) {
-      newPreference = [monacoBrowser.editor.ContentWidgetPositionPreference.BELOW];
-    } else if (curNonWhitespaceColumn >= preNonWhitespaceColumn) {
-      newPreference = [monacoBrowser.editor.ContentWidgetPositionPreference.ABOVE];
-    } else {
-      newColumn = Math.min(preNonWhitespaceColumn, nextNonWhitespaceColumn);
-
-      if (preNonWhitespaceColumn >= nextNonWhitespaceColumn) {
-        newPreference = [monacoBrowser.editor.ContentWidgetPositionPreference.BELOW];
-        newLineNumber = lineNumber - 1;
-      } else {
-        newPreference = [monacoBrowser.editor.ContentWidgetPositionPreference.ABOVE];
-        newLineNumber = lineNumber + 1;
-      }
+  /**
+   * 以当前 selection 为中心取上下各 1 行重新计算
+   */
+  private recheckSelection(selection: monaco.Selection): monaco.editor.IContentWidgetPosition {
+    const preStartPosition = selection.getStartPosition();
+    const preEndPosition = selection.getEndPosition();
+
+    const model = this.editor.getModel()!;
+    const maxCount = model.getLineCount();
+
+    const safeAboveStartLine = Math.max(1, preEndPosition.lineNumber - 1);
+    const safeBelowEndLine = Math.min(maxCount, preEndPosition.lineNumber + 1);
+
+    const newStartPosition = preStartPosition.with(safeAboveStartLine, 1);
+    const newEndPosition = preEndPosition.with(
+      safeBelowEndLine,
+      this.safeGetLineLastNonWhitespaceColumn(safeBelowEndLine),
+    );
+
+    // 如果整个文档只有 1 行，则直接显示在右下角
+    if (maxCount === 1) {
+      return this.toBelowPosition(safeBelowEndLine, this.safeGetLineLastNonWhitespaceColumn(safeBelowEndLine));
     }
 
-    if (lineNumber === 1 || lineNumber === 2) {
-      newPreference = [monacoBrowser.editor.ContentWidgetPositionPreference.BELOW];
+    if (newEndPosition.lineNumber === 1 && preEndPosition.lineNumber !== preStartPosition.lineNumber) {
+      return this.computePosition(monaco.Selection.fromPositions(newStartPosition, newEndPosition));
     }
 
-    return {
-      position: new monaco.Position(newLineNumber, newColumn),
-      preference: newPreference,
-    };
+    const aboveMaxColumn = this.safeGetLineLastNonWhitespaceColumn(safeAboveStartLine);
+    const belowMaxColumn = this.safeGetLineLastNonWhitespaceColumn(safeBelowEndLine);
+    const currentMaxColumn = this.safeGetLineLastNonWhitespaceColumn(preEndPosition.lineNumber);
+    if (belowMaxColumn > currentMaxColumn && belowMaxColumn > aboveMaxColumn) {
+      return this.computePosition(monaco.Selection.fromPositions(newEndPosition, newStartPosition));
+    }
+
+    return this.computePosition(monaco.Selection.fromPositions(newStartPosition, newEndPosition));
   }
 
   private isProtrudeAbove(line: number) {
@@ -408,25 +411,27 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
    * 2. 靠近光标处周围没有字符的空白区域作为要显示的区域
    * 3. 显示的区域方向在右侧，左侧不考虑
    */
-  protected computePosition(selection: monaco.Selection): monaco.editor.IContentWidgetPosition | null {
-    const startPosition = selection.getStartPosition();
-    const endPosition = selection.getEndPosition();
-    const model = this.editor.getModel();
+  protected computePosition(selection: monaco.Selection): monaco.editor.IContentWidgetPosition {
+    let startPosition = selection.getStartPosition();
+    let endPosition = selection.getEndPosition();
+    let cursorPosition = selection.getPosition();
 
-    if (!model) {
-      return null;
+    const model = this.editor.getModel()!;
+    const maxCount = model.getLineCount();
+
+    // 只选中了一行
+    if (startPosition.lineNumber === endPosition.lineNumber) {
+      return this.recheckSelection(selection);
     }
 
-    const cursorPosition = selection.getPosition();
-    const getCursorLastNonWhitespaceColumn = this.safeGetLineLastNonWhitespaceColumn(cursorPosition.lineNumber);
+    if (endPosition.lineNumber - startPosition.lineNumber === 1) {
+      cursorPosition = endPosition;
+    }
 
-    let targetLine: number | null = null;
-    let direction: 'above' | 'below' | null = null;
+    const getCursorLastNonWhitespaceColumn = this.safeGetLineLastNonWhitespaceColumn(cursorPosition.lineNumber);
 
-    // 用户只选中了一行
-    if (startPosition.lineNumber === endPosition.lineNumber) {
-      return this.recheckPosition(cursorPosition.lineNumber, cursorPosition.column);
-    }
+    let targetLine: number = cursorPosition.lineNumber;
+    let direction: 'above' | 'below' = 'below';
 
     // 用户选中了多行，光标在选中的开始位置
     if (cursorPosition.equals(startPosition)) {
@@ -435,10 +440,9 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
         this.safeGetLineLastNonWhitespaceColumn(cursorPosition.lineNumber - 2),
       );
 
-      // 如果上面两行的最后一个非空白字符的列数小于当前行的最后一个非空白字符的列数 + 10
-      // 则直接显示在上面
-      if (getMaxLastWhitespaceColumn < getCursorLastNonWhitespaceColumn + 10) {
-        return this.toAbovePosition(cursorPosition.lineNumber, getMaxLastWhitespaceColumn + 1);
+      // 如果上面两行的最后一个非空白字符的列数小于当前行的最后一个非空白字符的列数, 则直接显示在上面
+      if (getMaxLastWhitespaceColumn <= getCursorLastNonWhitespaceColumn) {
+        return this.toAbovePosition(cursorPosition.lineNumber, getCursorLastNonWhitespaceColumn);
       }
 
       for (let i = startPosition.lineNumber; i <= endPosition.lineNumber; i++) {
@@ -459,11 +463,11 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
         this.safeGetLineLastNonWhitespaceColumn(cursorPosition.lineNumber + 2),
       );
 
-      if (getMaxLastWhitespaceColumn < getCursorLastNonWhitespaceColumn + 10) {
-        return this.toBelowPosition(cursorPosition.lineNumber, getMaxLastWhitespaceColumn + 1);
+      if (getMaxLastWhitespaceColumn <= getCursorLastNonWhitespaceColumn) {
+        return this.toBelowPosition(cursorPosition.lineNumber, getCursorLastNonWhitespaceColumn);
       }
 
-      for (let i = endPosition.lineNumber; i >= startPosition.lineNumber; i--) {
+      for (let i = Math.min(maxCount, endPosition.lineNumber + 1); i >= startPosition.lineNumber; i--) {
         if (this.isProtrudeBelow(i)) {
           targetLine = i;
           direction = 'below';
@@ -477,18 +481,11 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
       }
     }
 
-    if (targetLine && direction) {
-      const column = this.safeGetLineLastNonWhitespaceColumn(targetLine) + 1;
+    const column = this.safeGetLineLastNonWhitespaceColumn(targetLine) + 1;
 
-      if (direction === 'below') {
-        return this.toBelowPosition(targetLine, column);
-      }
-      return this.toAbovePosition(targetLine, column);
+    if (direction === 'below') {
+      return this.toBelowPosition(targetLine, column);
     }
-
-    return this.recheckPosition(
-      cursorPosition.lineNumber,
-      this.safeGetLineLastNonWhitespaceColumn(cursorPosition.lineNumber),
-    );
+    return this.toAbovePosition(targetLine, column);
   }
 }

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

@@ -14,7 +14,6 @@ import {
 import { EResultKind } from '../inline-chat/inline-chat.service';
 import { AIInlineContentWidget } from '../inline-chat/inline-content-widget';
 import { EComputerMode, InlineStreamDiffHandler } from '../inline-stream-diff/inline-stream-diff.handler';
-import { SerializableState } from '../inline-stream-diff/live-preview.decoration';
 
 import { InlineDiffWidget } from './inline-diff-widget';
 
@@ -22,41 +21,30 @@ export interface IDiffPreviewerOptions {
   disposeWhenEditorClosed: boolean;
 }
 
-export interface IExtendedSerializedState extends SerializableState {
-  readonly options: IDiffPreviewerOptions;
+export interface IInlineDiffPreviewerNode extends IDisposable {
+  previewerOptions: IDiffPreviewerOptions;
+  setPreviewerOptions(options: IDiffPreviewerOptions): void;
 }
 
 @Injectable({ multiple: true })
-export abstract class BaseInlineDiffPreviewer<N extends IDisposable> extends Disposable {
+export abstract class BaseInlineDiffPreviewer<N extends IInlineDiffPreviewerNode> extends Disposable {
   @Autowired(INJECTOR_TOKEN)
   protected readonly injector: Injector;
 
   protected inlineContentWidget: AIInlineContentWidget | null = null;
-
+  protected selection: Selection;
   protected model: ITextModel;
 
-  get disposeWhenEditorClosed() {
-    return this.options.disposeWhenEditorClosed;
-  }
-
-  constructor(
-    protected readonly monacoEditor: ICodeEditor,
-    protected readonly selection: Selection,
-    public options: IDiffPreviewerOptions = {
-      disposeWhenEditorClosed: true,
-    },
-  ) {
+  constructor(protected readonly monacoEditor: ICodeEditor) {
     super();
-    this.node = this.createNode();
     this.model = this.monacoEditor.getModel()!;
     this.addDispose(
       Disposable.create(() => {
         if (this.inlineContentWidget) {
           this.inlineContentWidget.dispose();
         }
-        if (this.node) {
-          this.node.dispose();
-        }
+
+        this.attachNode(undefined);
       }),
     );
   }
@@ -104,8 +92,12 @@ export abstract class BaseInlineDiffPreviewer<N extends IDisposable> extends Dis
     return newTextLines.join(eol);
   }
 
-  protected node: N;
-  public getNode(): N {
+  protected node: N | undefined;
+  public getNode(): N | undefined {
+    return this.node;
+  }
+
+  public createNodeSnapshot(): N | undefined {
     return this.node;
   }
 
@@ -123,11 +115,26 @@ export abstract class BaseInlineDiffPreviewer<N extends IDisposable> extends Dis
     return Disposable.NULL;
   }
 
-  abstract createNode(): N;
+  protected abstract createNode(): N;
   abstract onData(data: ReplyResponse): void;
   abstract handleAction(action: EResultKind): void;
   abstract getPosition(): IPosition;
 
+  create(
+    selection: Selection,
+    options: IDiffPreviewerOptions = {
+      disposeWhenEditorClosed: true,
+    },
+  ): void {
+    this.selection = selection;
+    this.node = this.createNode();
+    this.node.setPreviewerOptions(options);
+  }
+
+  attachNode(node: N | undefined): void {
+    this.node = node;
+  }
+
   show(line: number, heightInLines: number): void {
     // do nothing
   }
@@ -191,17 +198,20 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
     super.layout();
   }
   onReady(exec: () => void): IDisposable {
-    return this.node.onReady(exec.bind(this));
+    if (this.node) {
+      return this.node!.onReady(exec.bind(this));
+    }
+    return Disposable.NULL;
   }
   show(line: number, heightInLines: number): void {
-    this.node.showByLine(line, heightInLines);
+    this.node?.showByLine(line, heightInLines);
   }
   setValue(content: string): void {
-    const modifiedModel = this.node.getModifiedModel();
+    const modifiedModel = this.node?.getModifiedModel();
     modifiedModel?.setValue(this.formatIndentation(content));
   }
   getValue(): string {
-    const model = this.node.getModifiedModel();
+    const model = this.node?.getModifiedModel();
     return model!.getValue();
   }
   handleAction(action: EResultKind): void {
@@ -212,14 +222,14 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
     }
   }
   onLineCount(event: (count: number) => void): Disposable {
-    this.node.onMaxLineCount(event.bind(this));
+    this.node?.onMaxLineCount(event.bind(this));
     return this;
   }
   onData(data: ReplyResponse): void {
     const { message } = data;
 
     const indentMessage = this.formatIndentation(message);
-    const modifiedModel = this.node.getModifiedModel()!;
+    const modifiedModel = this.node?.getModifiedModel()!;
 
     const defaultEOL = modifiedModel.getEOL() === EOL.CRLF ? DefaultEndOfLine.CRLF : DefaultEndOfLine.LF;
     const { textBuffer, disposable } = createTextBuffer(indentMessage, defaultEOL);
@@ -227,29 +237,24 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
     modifiedModel.pushEditOperations([], singleEditOperation, () => []);
 
     disposable.dispose();
-    this.node.layout();
+    this.node?.layout();
   }
   onError(error: ErrorResponse): void {
-    this.node.layout();
+    this.node?.layout();
   }
   onAbort(): void {
-    this.node.layout();
+    this.node?.layout();
   }
   onEnd(): void {
-    this.node.layout();
+    this.node?.layout();
   }
 }
 
 @Injectable({ multiple: true })
 export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStreamDiffHandler> {
-  createNode(): InlineStreamDiffHandler {
-    const node = this.injector.get(InlineStreamDiffHandler, [this.monacoEditor, this.selection]);
-
-    this.addDispose(node.onDidEditChange(() => this.layout()));
-    this.addDispose(node.onDispose(() => this.dispose()));
-    this.addDispose(node);
-
-    this.addDispose(
+  private listenNode(node: InlineStreamDiffHandler): void {
+    node.addDispose(node.onDidEditChange(() => this.layout()));
+    node.addDispose(
       node.onPartialEditWidgetListChange((widgets) => {
         if (widgets.every((widget) => widget.isHidden)) {
           this.dispose();
@@ -257,22 +262,62 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
         }
       }),
     );
+
+    const dispose = node.onDispose(() => {
+      this.dispose();
+      dispose.dispose();
+    });
+
+    this.addDispose(node);
+  }
+
+  createNode(): InlineStreamDiffHandler {
+    const node = this.injector.get(InlineStreamDiffHandler, [this.monacoEditor]);
+    node.initialize(this.selection);
+    this.listenNode(node);
     return node;
   }
-  getPosition(): IPosition {
-    const zone = this.node.getZone();
-    return Position.lift({ lineNumber: Math.max(0, zone.startLineNumber - 1), column: 1 });
+  attachNode(node: InlineStreamDiffHandler): void {
+    this.node?.dispose();
+    this.node = node;
+
+    if (node) {
+      const snapshot = node.currentSnapshotStore;
+      if (snapshot) {
+        this.node.restoreDecorationSnapshot(snapshot.decorationSnapshotData);
+        this.listenNode(node);
+      }
+    }
+  }
+  public createNodeSnapshot(): InlineStreamDiffHandler | undefined {
+    if (!this.node) {
+      return this.createNode();
+    }
+
+    // 拿前一个 node 的快照信息
+    const snapshot = this.node.createSnapshot();
+    // 创建新的实例
+    const node = this.injector.get(InlineStreamDiffHandler, [this.monacoEditor]);
+    node.restoreSnapshot(snapshot);
+    return node;
   }
 
+  getPosition(): IPosition {
+    const zone = this.node?.getZone();
+    if (zone) {
+      return Position.lift({ lineNumber: Math.max(0, zone.startLineNumber - 1), column: 1 });
+    }
+    return Position.lift({ lineNumber: 1, column: 1 });
+  }
   handleAction(action: EResultKind): void {
     switch (action) {
       case EResultKind.ACCEPT:
-        this.node.acceptAll();
+        this.node?.acceptAll();
         break;
 
       case EResultKind.DISCARD:
       case EResultKind.REGENERATE:
-        this.node.rejectAll();
+        this.node?.rejectAll();
         break;
 
       default:
@@ -288,29 +333,24 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
   }
   onData(data: ReplyResponse): void {
     const { message } = data;
-    this.node.addLinesToDiff(this.formatIndentation(message));
+    this.node?.addLinesToDiff(this.formatIndentation(message));
   }
   onEnd(): void {
-    const diffModel = this.node.recompute(EComputerMode.legacy);
-    this.node.pushRateFinallyDiffStack(diffModel);
+    const diffModel = this.node?.recompute(EComputerMode.legacy);
+    if (diffModel) {
+      this.node?.pushRateFinallyDiffStack(diffModel);
+    }
   }
   setValue(content: string): void {
-    const diffModel = this.node.recompute(EComputerMode.legacy, this.formatIndentation(content));
-    this.node.finallyRender(diffModel);
-  }
-  serializeState(): IExtendedSerializedState {
-    return {
-      ...this.node.serializeState(),
-      options: this.options,
-    };
-  }
-  restoreState(state: IExtendedSerializedState): void {
-    this.node.restoreState(state);
+    const diffModel = this.node?.recompute(EComputerMode.legacy, this.formatIndentation(content));
+    if (diffModel) {
+      this.node?.finallyRender(diffModel);
+    }
   }
   get onPartialEditEvent() {
-    return this.node.onPartialEditEvent;
+    return this.node?.onPartialEditEvent;
   }
   revealFirstDiff(): void {
-    this.node.revealFirstDiff();
+    this.node?.revealFirstDiff();
   }
 }

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

@@ -3,7 +3,16 @@ import { createPortal } from 'react-dom';
 import ReactDOMClient from 'react-dom/client';
 
 import { Autowired, Injectable } from '@opensumi/di';
-import { AppConfig, ConfigProvider, Emitter, Event, MonacoService, useInjectable } from '@opensumi/ide-core-browser';
+import {
+  AppConfig,
+  ConfigProvider,
+  Emitter,
+  Event,
+  MonacoService,
+  Schemes,
+  randomString,
+  useInjectable,
+} from '@opensumi/ide-core-browser';
 import * as monaco from '@opensumi/ide-monaco';
 import { ICodeEditor } from '@opensumi/ide-monaco';
 import { IDiffEditorOptions } from '@opensumi/ide-monaco/lib/browser/monaco-api/editor';
@@ -13,6 +22,7 @@ import { IModelService } from '@opensumi/monaco-editor-core/esm/vs/editor/common
 import { ZoneWidget } from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget';
 import { StandaloneServices } from '@opensumi/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 
+import { IDiffPreviewerOptions, IInlineDiffPreviewerNode } from './inline-diff-previewer';
 import styles from './inline-diff-widget.module.less';
 
 const diffEditorOptions: IDiffEditorOptions = {
@@ -84,8 +94,24 @@ const DiffContentProvider = React.memo((props: IDiffContentProviderProps) => {
     const modelService = StandaloneServices.get(IModelService);
     const languageSelection: ILanguageSelection = { languageId: model.getLanguageId(), onDidChange: Event.None };
 
-    const originalModel = modelService.createModel(codeValueInRange, languageSelection);
-    const modifiedModel = modelService.createModel('', languageSelection);
+    const originalModel = modelService.createModel(
+      codeValueInRange,
+      languageSelection,
+      monaco.Uri.from({
+        scheme: Schemes.inMemory,
+        path: 'inline-diff-widget/' + randomString(8),
+      }),
+      true,
+    );
+    const modifiedModel = modelService.createModel(
+      '',
+      languageSelection,
+      monaco.Uri.from({
+        scheme: Schemes.inMemory,
+        path: 'inline-diff-widget/' + randomString(8),
+      }),
+      true,
+    );
 
     diffEditor.setModel({
       original: originalModel,
@@ -123,7 +149,7 @@ const DiffContentProvider = React.memo((props: IDiffContentProviderProps) => {
 });
 
 @Injectable({ multiple: true })
-export class InlineDiffWidget extends ZoneWidget {
+export class InlineDiffWidget extends ZoneWidget implements IInlineDiffPreviewerNode {
   @Autowired(AppConfig)
   private configContext: AppConfig;
 
@@ -137,7 +163,12 @@ export class InlineDiffWidget extends ZoneWidget {
   private root: ReactDOMClient.Root | null;
   private diffWidgetHandler: IDiffWidgetHandler | null = null;
   private resultContainer: HTMLDivElement | null = null;
-  hiddenArea: monaco.languages.IRange;
+  private hiddenArea: monaco.languages.IRange;
+
+  previewerOptions: IDiffPreviewerOptions;
+  setPreviewerOptions(options: IDiffPreviewerOptions): void {
+    this.previewerOptions = options;
+  }
 
   protected _fillContainer(container: HTMLElement): void {
     this.setCssClass('inline-diff-widget');