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

package/lib/browser/widget/inline-stream-diff/live-preview.decoration.js

@@ -1,281 +1,36 @@
 "use strict";
-var AcceptPartialEditWidget_1;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LivePreviewDiffDecorationModel = exports.AcceptPartialEditWidget = exports.EPartialEdit = void 0;
+exports.LivePreviewDiffDecorationModel = void 0;
 const tslib_1 = require("tslib");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const react_1 = tslib_1.__importStar(require("react"));
-const client_1 = tslib_1.__importDefault(require("react-dom/client"));
 const di_1 = require("@opensumi/di");
 const ide_core_browser_1 = require("@opensumi/ide-core-browser");
-const command_1 = require("@opensumi/ide-core-browser/lib/ai-native/command");
 const ide_core_common_1 = require("@opensumi/ide-core-common");
 const ide_monaco_1 = require("@opensumi/ide-monaco");
-const BaseInlineContentWidget_1 = require("@opensumi/ide-monaco/lib/browser/ai-native/BaseInlineContentWidget");
 const services_1 = require("@opensumi/ide-monaco/lib/browser/monaco-api/services");
-const editor_1 = require("@opensumi/ide-monaco/lib/browser/monaco-exports/editor");
-const editorOptions_1 = require("@opensumi/monaco-editor-core/esm/vs/editor/common/config/editorOptions");
 const editOperation_1 = require("@opensumi/monaco-editor-core/esm/vs/editor/common/core/editOperation");
-const lineRange_1 = require("@opensumi/monaco-editor-core/esm/vs/editor/common/core/lineRange");
 const textModel_1 = require("@opensumi/monaco-editor-core/esm/vs/editor/common/model/textModel");
-const zoneWidget_1 = require("@opensumi/monaco-editor-core/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget");
 const undoRedo_1 = require("@opensumi/monaco-editor-core/esm/vs/platform/undoRedo/common/undoRedo");
 const ai_native_contextkey_service_1 = require("../../contextkey/ai-native.contextkey.service");
 const enhanceDecorationsCollection_1 = require("../../model/enhanceDecorationsCollection");
-const index_1 = require("../ghost-text-widget/index");
 const inline_stream_diff_module_less_1 = tslib_1.__importDefault(require("./inline-stream-diff.module.less"));
 const inline_stream_diff_service_1 = require("./inline-stream-diff.service");
-const ActiveLineDecoration = 'activeLine-decoration';
-const AddedRangeDecoration = 'added-range-decoration';
-const PendingRangeDecoration = 'pending-range-decoration';
-var EPartialEdit;
-(function (EPartialEdit) {
-    EPartialEdit["accept"] = "accept";
-    EPartialEdit["discard"] = "discard";
-})(EPartialEdit = exports.EPartialEdit || (exports.EPartialEdit = {}));
-const PartialEditComponent = (props) => {
-    const { keyStrings, onAccept, onDiscard, editor } = props;
-    const [scrollLeft, setScrollLeft] = react_1.default.useState(0);
-    const handleAccept = (0, react_1.useCallback)(() => {
-        onAccept === null || onAccept === void 0 ? void 0 : onAccept();
-    }, [onAccept]);
-    const handleDiscard = (0, react_1.useCallback)(() => {
-        onDiscard === null || onDiscard === void 0 ? void 0 : onDiscard();
-    }, [onDiscard]);
-    (0, ide_core_browser_1.useDisposable)(() => editor.onDidScrollChange((event) => {
-        const { scrollLeftChanged, scrollLeft } = event;
-        if (scrollLeftChanged) {
-            setScrollLeft(scrollLeft);
-        }
-    }), [editor]);
-    return (react_1.default.createElement("div", { className: inline_stream_diff_module_less_1.default.inline_diff_accept_partial_widget_container, style: { marginLeft: scrollLeft + 'px' } },
-        react_1.default.createElement("div", { className: inline_stream_diff_module_less_1.default.content },
-            react_1.default.createElement("span", { className: (0, classnames_1.default)(inline_stream_diff_module_less_1.default.accept_btn, inline_stream_diff_module_less_1.default.btn), onClick: handleAccept }, keyStrings.acceptSequence),
-            react_1.default.createElement("span", { className: (0, classnames_1.default)(inline_stream_diff_module_less_1.default.discard_btn, inline_stream_diff_module_less_1.default.btn), onClick: handleDiscard }, keyStrings.discardSequence))));
-};
-let AcceptPartialEditWidget = AcceptPartialEditWidget_1 = class AcceptPartialEditWidget extends BaseInlineContentWidget_1.ReactInlineContentWidget {
-    constructor() {
-        super(...arguments);
-        this._onAccept = this.registerDispose(new ide_core_common_1.Emitter());
-        this.onAccept = this._onAccept.event;
-        this._onDiscard = this.registerDispose(new ide_core_common_1.Emitter());
-        this.onDiscard = this._onDiscard.event;
-        this.positionPreference = [editor_1.ContentWidgetPositionPreference.EXACT];
-        this.addedLinesCount = 0;
-        this.deletedLinesCount = 0;
-        this.status = 'pending';
-    }
-    getSequenceKeyStrings() {
-        let keybindings = this.keybindingRegistry.getKeybindingsForCommand(command_1.AI_INLINE_DIFF_PARTIAL_EDIT.id);
-        keybindings = keybindings.sort((a, b) => b.args - a.args);
-        if (!keybindings || (keybindings.length !== 2 && keybindings.some((k) => (0, ide_core_common_1.isUndefined)(k.resolved)))) {
-            return;
-        }
-        return {
-            acceptSequence: this.keybindingRegistry.acceleratorForSequence(keybindings[0].resolved, '')[0],
-            discardSequence: this.keybindingRegistry.acceleratorForSequence(keybindings[1].resolved, '')[0],
-        };
-    }
-    renderView() {
-        const keyStrings = this.getSequenceKeyStrings();
-        if (!keyStrings) {
-            return;
-        }
-        return (react_1.default.createElement(PartialEditComponent, { keyStrings: keyStrings, onAccept: () => this._onAccept.fire(), onDiscard: () => this._onDiscard.fire(), editor: this.editor }));
-    }
-    id() {
-        if (!this._id) {
-            this._id = `${AcceptPartialEditWidget_1.ID}_${(0, ide_core_common_1.uuid)(4)}`;
-        }
-        return this._id;
-    }
-    getClassName() {
-        return inline_stream_diff_module_less_1.default.accept_partial_edit_widget_id;
-    }
-    recordDecorationId(id) {
-        this._decorationId = id;
-    }
-    getDecorationId() {
-        return this._decorationId;
-    }
-    resume() {
-        this.status = 'pending';
-        this.addedLinesCount = 0;
-        this.deletedLinesCount = 0;
-        super.resume();
-    }
-    accept(addedLinesCount, deletedLinesCount) {
-        this.status = 'accept';
-        this.addedLinesCount = addedLinesCount;
-        this.deletedLinesCount = deletedLinesCount;
-        super.hide();
-    }
-    get isAccepted() {
-        return this.status === 'accept';
-    }
-    discard(addedLinesCount, deletedLinesCount) {
-        this.status = 'discard';
-        this.addedLinesCount = addedLinesCount;
-        this.deletedLinesCount = deletedLinesCount;
-        super.hide();
-    }
-    get isRejected() {
-        return this.status === 'discard';
-    }
-    serializeState() {
-        return {
-            addedLinesCount: this.addedLinesCount,
-            deletedLinesCount: this.deletedLinesCount,
-            status: this.status,
-            lineNumber: this.getPosition().position.lineNumber,
-        };
-    }
-    restoreSerializedState(state) {
-        if (state.status === 'accept') {
-            this.accept(state.addedLinesCount, state.deletedLinesCount);
-        }
-        else if (state.status === 'discard') {
-            this.discard(state.addedLinesCount, state.deletedLinesCount);
-        }
-        else {
-            this.resume();
-        }
-    }
-};
-AcceptPartialEditWidget.ID = 'AcceptPartialEditWidgetID';
-tslib_1.__decorate([
-    (0, di_1.Autowired)(ide_core_browser_1.KeybindingRegistry),
-    tslib_1.__metadata("design:type", Object)
-], AcceptPartialEditWidget.prototype, "keybindingRegistry", void 0);
-AcceptPartialEditWidget = AcceptPartialEditWidget_1 = tslib_1.__decorate([
-    (0, di_1.Injectable)({ multiple: true })
-], AcceptPartialEditWidget);
-exports.AcceptPartialEditWidget = AcceptPartialEditWidget;
-const RemovedWidgetComponent = ({ dom, editor }) => {
-    const ref = react_1.default.useRef(null);
-    const [scrollLeft, setScrollLeft] = react_1.default.useState(0);
-    const [marginWidth, setMarginWidth] = react_1.default.useState(0);
-    (0, react_1.useEffect)(() => {
-        if (dom && ref && ref.current) {
-            ref.current.appendChild(dom);
-        }
-    }, [dom, ref]);
-    (0, ide_core_browser_1.useDisposable)(() => editor.onDidScrollChange((event) => {
-        const { scrollLeftChanged, scrollLeft } = event;
-        if (scrollLeftChanged) {
-            setScrollLeft(scrollLeft);
-        }
-    }), [editor]);
-    (0, ide_core_browser_1.useDisposable)(() => {
-        setMarginWidth(editor.getOption(editorOptions_1.EditorOption.layoutInfo).contentLeft);
-        return editor.onDidChangeConfiguration((event) => {
-            if (event.hasChanged(editorOptions_1.EditorOption.layoutInfo)) {
-                setMarginWidth(editor.getOption(editorOptions_1.EditorOption.layoutInfo).contentLeft);
-            }
-        });
-    }, [editor]);
-    return (react_1.default.createElement("div", { className: inline_stream_diff_module_less_1.default.inline_diff_remove_zone_fixed_box, style: { marginLeft: marginWidth + 'px' } },
-        react_1.default.createElement("div", { className: inline_stream_diff_module_less_1.default.inline_diff_remove_zone, ref: ref, style: { marginLeft: -scrollLeft + 'px' } })));
-};
-class RemovedZoneWidget extends zoneWidget_1.ZoneWidget {
-    get isHidden() {
-        return this._hidden;
-    }
-    constructor(editor, textLines, options) {
-        super(editor, options);
-        this.textLines = textLines;
-        this._hidden = false;
-    }
-    _fillContainer(container) {
-        container.classList.add(inline_stream_diff_module_less_1.default.inline_diff_remove_zone_widget_container);
-        this.root = client_1.default.createRoot(container);
-    }
-    getRemovedTextLines() {
-        return this.textLines.map((v) => v.text);
-    }
-    get height() {
-        return this.textLines.length;
-    }
-    getLastPosition() {
-        return this.recordPositionData.position;
-    }
-    serializeState() {
-        return {
-            textLines: this.textLines,
-            position: this.getLastPosition(),
-        };
-    }
-    hide() {
-        var _a;
-        if (this._viewZone && this.position) {
-            this.recordPositionData = {
-                position: this.position,
-                heightInLines: (_a = this._viewZone) === null || _a === void 0 ? void 0 : _a.heightInLines,
-            };
-        }
-        this._hidden = true;
-        super.hide();
-    }
-    resume() {
-        if (this.recordPositionData) {
-            this.show(this.recordPositionData.position, this.recordPositionData.heightInLines);
-        }
-    }
-    show(pos, heightInLines) {
-        this.recordPositionData = { position: pos, heightInLines };
-        this._hidden = false;
-        super.show(pos, heightInLines);
-    }
-    revealRange() { }
-    create() {
-        super.create();
-        const dom = document.createElement('div');
-        (0, index_1.renderLines)(dom, this.editor.getOption(editorOptions_1.EditorOption.tabIndex), this.textLines.map(({ text: content, lineTokens }) => ({
-            content,
-            decorations: [],
-            lineTokens,
-        })), this.editor.getOptions());
-        this.root.render(react_1.default.createElement(RemovedWidgetComponent, { dom: dom, editor: this.editor }));
-    }
-    dispose() {
-        this.root.unmount();
-        super.dispose();
-    }
-}
+const live_preview_stack_1 = require("./live-preview-stack");
+const live_preview_component_1 = require("./live-preview.component");
 let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extends ide_core_common_1.Disposable {
-    constructor(monacoEditor, selection) {
+    constructor(monacoEditor) {
         super();
         this.monacoEditor = monacoEditor;
-        this.selection = selection;
         this._onPartialEditEvent = this.registerDispose(new ide_core_common_1.Emitter());
         this.onPartialEditEvent = this._onPartialEditEvent.event;
-        this.partialEditWidgetList = [];
-        this.removedZoneWidgets = [];
         this._onPartialEditWidgetListChange = this.registerDispose(new ide_core_common_1.Emitter());
         this.onPartialEditWidgetListChange = this._onPartialEditWidgetListChange.event;
+        this.partialEditWidgetList = [];
+        this.removedZoneWidgets = [];
         this.model = this.monacoEditor.getModel();
+        this.undoRedoService = services_1.StandaloneServices.get(undoRedo_1.IUndoRedoService);
         this.activeLineDec = this.monacoEditor.createDecorationsCollection();
         this.pendingRangeDec = this.monacoEditor.createDecorationsCollection();
-        this.addedRangeDec = new enhanceDecorationsCollection_1.EnhanceDecorationsCollection(this.monacoEditor);
         this.aiNativeContextKey = this.injector.get(ai_native_contextkey_service_1.AINativeContextKey, [this.monacoEditor.contextKeyService]);
-        this.undoRedoService = services_1.StandaloneServices.get(undoRedo_1.IUndoRedoService);
-        this.updateSelection(selection);
-        this.addDispose(this.addedRangeDec.onDidDecorationsChange((newAddedRangeDec) => {
-            const inlineDiffPartialEditsIsVisible = this.aiNativeContextKey.inlineDiffPartialEditsIsVisible.get();
-            if (inlineDiffPartialEditsIsVisible) {
-                this.partialEditWidgetList.forEach((widget) => {
-                    const addedWidget = newAddedRangeDec.find((a) => widget.getDecorationId() === a.id);
-                    if (addedWidget) {
-                        const range = addedWidget.getRange();
-                        /**
-                         * 重新定位 added decoration 与 partial edit widget 的位置
-                         */
-                        widget.setOptions({ position: { lineNumber: range.startLineNumber, column: 1 } });
-                        widget.layoutContentWidget();
-                    }
-                });
-            }
-        }));
         this.addDispose(this.inlineStreamDiffService.onAcceptDiscardPartialEdit((isAccept) => {
             const currentPosition = this.monacoEditor.getPosition();
             /**
@@ -292,7 +47,24 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
                 return distanceToPa - distanceToPb;
             });
             if (widget.length > 0) {
-                this.handlePartialEditAction(isAccept ? EPartialEdit.accept : EPartialEdit.discard, widget[0]);
+                this.handlePartialEditAction(isAccept ? live_preview_component_1.EPartialEdit.accept : live_preview_component_1.EPartialEdit.discard, widget[0]);
+            }
+        }));
+        this.addedRangeDec = new enhanceDecorationsCollection_1.EnhanceDecorationsCollection(this.monacoEditor);
+        this.addDispose(this.addedRangeDec.onDidDecorationsChange((newAddedRangeDec) => {
+            const inlineDiffPartialEditsIsVisible = this.aiNativeContextKey.inlineDiffPartialEditsIsVisible.get();
+            if (inlineDiffPartialEditsIsVisible) {
+                this.partialEditWidgetList.forEach((widget) => {
+                    const addedWidget = newAddedRangeDec.find((a) => widget.getDecorationId() === a.id);
+                    if (addedWidget) {
+                        const range = addedWidget.getRange();
+                        /**
+                         * 重新定位 added decoration 与 partial edit widget 的位置
+                         */
+                        widget.setOptions({ position: { lineNumber: range.startLineNumber, column: 1 } });
+                        widget.layoutContentWidget();
+                    }
+                });
             }
         }));
         this.addDispose(ide_core_common_1.Disposable.create(() => {
@@ -306,21 +78,78 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
         this.clearRemovedWidgets();
         this.clearPartialEditWidgetList();
     }
-    updateSelection(selection) {
-        this.selection = selection;
-        this.updateZone(lineRange_1.LineRange.fromRangeInclusive(ide_monaco_1.Range.fromPositions({ lineNumber: this.selection.startLineNumber, column: 1 }, { lineNumber: this.selection.endLineNumber, column: Number.MAX_SAFE_INTEGER })));
+    initialize(zone) {
+        this.updateZone(zone);
+    }
+    restoreSnapshot(snapshot) {
+        const { addedDecList, removedWidgetList, zone, editStackSnapshot, partialEditWidgetList: snapshotPartialEditWidgetList, } = snapshot;
+        // restore zone
+        this.updateZone(zone);
+        // restore added
+        this.addedRangeDec.set(addedDecList);
+        // restore removed
+        this.clearRemovedWidgets();
+        removedWidgetList.forEach((widget) => {
+            const position = widget.getLastPosition();
+            if (position) {
+                this.showRemovedWidgetByLineNumber(position.lineNumber, widget.textLines, {
+                    isHidden: widget.isHidden,
+                    recordPosition: widget.getLastPosition(),
+                    undoRedoGroup: widget.group,
+                });
+            }
+        });
+        // restore partial edit widget
+        this.clearPartialEditWidgetList();
+        snapshotPartialEditWidgetList.forEach((snapshotWidget) => {
+            var _a, _b;
+            const lineNumber = (_b = (_a = snapshotWidget.getPosition()) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.lineNumber;
+            if (lineNumber) {
+                const newPartialEditWidget = this.createPartialEditWidget(lineNumber);
+                if (snapshotWidget.status === 'accept') {
+                    newPartialEditWidget.accept(snapshotWidget.addedLinesCount, snapshotWidget.deletedLinesCount);
+                }
+                else if (snapshotWidget.status === 'discard') {
+                    newPartialEditWidget.discard(snapshotWidget.addedLinesCount, snapshotWidget.deletedLinesCount);
+                }
+                newPartialEditWidget.setGroup(snapshotWidget.group);
+                this.partialEditWidgetList.push(newPartialEditWidget);
+            }
+        });
+        this.firePartialEditWidgetList();
+        this.recordPartialEditWidgetWithAddedDec();
+        // restore undo/redo stack
+        const uri = this.model.uri;
+        this.undoRedoService.restoreSnapshot(editStackSnapshot);
+        const elements = this.undoRedoService.getElements(uri);
+        elements.future.concat(elements.past).forEach((node) => {
+            if (node instanceof live_preview_stack_1.LivePreviewUndoRedoStackElement) {
+                // 在每次 restore 的时候需要将当前的类重新指向到 undo/redo 的 stack 中
+                node.attachModel(this);
+            }
+        });
+    }
+    createSnapshot() {
+        return {
+            addedDecList: this.addedRangeDec.getDecorations(),
+            partialEditWidgetList: this.partialEditWidgetList,
+            removedWidgetList: this.removedZoneWidgets,
+            editStackSnapshot: this.undoRedoService.createSnapshot(this.model.uri),
+            zone: this.zone,
+        };
     }
-    showRemovedWidgetByLineNumber(lineNumber, texts) {
+    showRemovedWidgetByLineNumber(lineNumber, texts, options) {
         const position = new ide_monaco_1.Position(lineNumber, 1);
         const heightInLines = texts.length;
-        const widget = new RemovedZoneWidget(this.monacoEditor, texts, {
-            showInHiddenAreas: true,
-            showFrame: false,
-            showArrow: false,
-        });
+        const widget = new live_preview_component_1.RemovedZoneWidget(this.monacoEditor, texts, Object.assign(Object.assign({}, options), { showInHiddenAreas: true, showFrame: false, showArrow: false }));
         widget.create();
-        widget.show(position, heightInLines);
         this.removedZoneWidgets.push(widget);
+        if (options.isHidden) {
+            widget.hide();
+        }
+        else {
+            widget.show(position, heightInLines);
+        }
     }
     updateZone(newZone) {
         this.zone = newZone;
@@ -335,15 +164,12 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
                 range: ide_monaco_1.Range.fromPositions({
                     lineNumber: zone.startLineNumber + lineNumber - 1,
                     column: 0,
-                }, {
-                    lineNumber: zone.startLineNumber + lineNumber - 1,
-                    column: Number.MAX_SAFE_INTEGER,
                 }),
                 options: textModel_1.ModelDecorationOptions.register({
-                    description: ActiveLineDecoration,
+                    description: live_preview_component_1.ActiveLineDecoration,
                     isWholeLine: true,
                     className: inline_stream_diff_module_less_1.default.inline_diff_current,
-                    zIndex: ide_core_browser_1.StackingLevel.WorkbenchEditor,
+                    zIndex: ide_core_browser_1.StackingLevel.Workbench,
                 }),
             },
         ]);
@@ -364,7 +190,7 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
             addedDec.hide();
         }
         if (removedWidget) {
-            const position = removedWidget.position;
+            const position = removedWidget.getLastPosition();
             const eol = this.model.getEOL();
             const lines = removedWidget.getRemovedTextLines();
             deletedLinesCount = lines.length;
@@ -386,50 +212,74 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
         /**
          * added widget 通常是在 removed widget 的下面一行的位置
          */
-        const removedWidget = this.removedZoneWidgets.find((w) => { var _a; return ((_a = w.position) === null || _a === void 0 ? void 0 : _a.lineNumber) === Math.max(1, position.lineNumber - 1); });
+        const removedWidget = this.removedZoneWidgets.find((w) => w.getLastPosition().lineNumber === Math.max(1, position.lineNumber - 1));
         const addedDec = this.addedRangeDec.getDecorationByLineNumber(position.lineNumber);
         const addedLinesCount = (addedDec === null || addedDec === void 0 ? void 0 : addedDec.length) || 0;
         const deletedLinesCount = (removedWidget === null || removedWidget === void 0 ? void 0 : removedWidget.height) || 0;
-        const accpet = () => {
-            widget.accept(addedLinesCount, deletedLinesCount);
-            addedDec === null || addedDec === void 0 ? void 0 : addedDec.hide();
+        // 将 partial widget 的所有操作和代码变更放在单独的 undo/redo 堆栈组里面
+        const group = new undoRedo_1.UndoRedoGroup();
+        // 并将此刻的 group 信息记录到每个 widget/decoration 中
+        widget.setGroup(group);
+        removedWidget === null || removedWidget === void 0 ? void 0 : removedWidget.setGroup(group);
+        addedDec === null || addedDec === void 0 ? void 0 : addedDec.setGroup(group);
+        /**
+         * 在 undo/redo 的 stack 中，原本的 widget 和 decoration 信息已经是旧的数据了，所以不能直接拿旧的数据进行 resume 或 accept
+         * 需要根据 group 信息和当前实例的 LivePreviewDiffDecorationModel 对象重新找到 widget 和 decoration
+         */
+        const findPartialWidgetByGroup = (model) => model.partialEditWidgetList.find((widget) => widget.group === group);
+        const findRemovedWidgetByGroup = (model) => model.removedZoneWidgets.find((widget) => widget.group === group);
+        const findAddedRangeDecByGroup = (model) => model.addedRangeDec.getDecorationByGroup(group);
+        const discard = (decorationModel) => {
+            const removedWidget = findRemovedWidgetByGroup(decorationModel);
             removedWidget === null || removedWidget === void 0 ? void 0 : removedWidget.hide();
-        };
-        const discard = () => {
-            const operation = this.doDiscardPartialWidget(widget, addedDec, removedWidget);
+            const addedDec = findAddedRangeDecByGroup(decorationModel);
             addedDec === null || addedDec === void 0 ? void 0 : addedDec.hide();
-            removedWidget === null || removedWidget === void 0 ? void 0 : removedWidget.hide();
+            const partialEditWidget = findPartialWidgetByGroup(decorationModel);
+            const operation = this.doDiscardPartialWidget(partialEditWidget, addedDec, removedWidget);
             return operation;
         };
-        const resume = () => {
-            widget.resume();
-            addedDec === null || addedDec === void 0 ? void 0 : addedDec.resume();
+        const accpet = (decorationModel) => {
+            const partialEditWidget = findPartialWidgetByGroup(decorationModel);
+            partialEditWidget === null || partialEditWidget === void 0 ? void 0 : partialEditWidget.accept(addedLinesCount, deletedLinesCount);
+            const removedWidget = findRemovedWidgetByGroup(decorationModel);
+            removedWidget === null || removedWidget === void 0 ? void 0 : removedWidget.hide();
+            const addedDec = findAddedRangeDecByGroup(decorationModel);
+            addedDec === null || addedDec === void 0 ? void 0 : addedDec.hide();
+        };
+        const resume = (decorationModel) => {
+            const partialEditWidget = findPartialWidgetByGroup(decorationModel);
+            partialEditWidget === null || partialEditWidget === void 0 ? void 0 : partialEditWidget.resume();
+            const removedWidget = findRemovedWidgetByGroup(decorationModel);
             removedWidget === null || removedWidget === void 0 ? void 0 : removedWidget.resume();
+            const addedDec = findAddedRangeDecByGroup(decorationModel);
+            addedDec === null || addedDec === void 0 ? void 0 : addedDec.resume();
         };
-        /**
-         * 将 partial widget 的所有操作和代码变更放在单独的 undo/redo 堆栈组里面
-         */
-        const group = new undoRedo_1.UndoRedoGroup();
         switch (type) {
-            case EPartialEdit.accept:
-                accpet();
+            case live_preview_component_1.EPartialEdit.accept:
+                accpet(this);
                 if (isPushStack) {
-                    this.pushUndoElement({
-                        undo: () => resume(),
-                        redo: () => accpet(),
-                        group,
+                    const stack = this.createEditStackElement(group);
+                    stack.attachModel(this);
+                    stack.registerUndo((model) => {
+                        resume(model);
+                    });
+                    stack.registerRedo((model) => {
+                        accpet(model);
                     });
                 }
                 break;
-            case EPartialEdit.discard:
+            case live_preview_component_1.EPartialEdit.discard:
                 {
-                    const op = discard();
+                    const op = discard(this);
                     if (op) {
                         if (isPushStack) {
-                            this.pushUndoElement({
-                                undo: () => resume(),
-                                redo: () => discard(),
-                                group,
+                            const stack = this.createEditStackElement(group);
+                            stack.attachModel(this);
+                            stack.registerUndo((model) => {
+                                resume(model);
+                            });
+                            stack.registerRedo((model) => {
+                                discard(model);
                             });
                         }
                         model.pushStackElement();
@@ -448,7 +298,17 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
             } }, this.getTotalCodeCount());
         this.monacoEditor.focus();
         this._onPartialEditEvent.fire(event);
+        this.firePartialEditWidgetList();
+    }
+    firePartialEditWidgetList() {
         this._onPartialEditWidgetListChange.fire(this.partialEditWidgetList);
+        const visiableLists = this.partialEditWidgetList.filter((widget) => !widget.isHidden);
+        this.aiNativeContextKey.inlineDiffPartialEditsIsVisible.set(visiableLists.length !== 0);
+    }
+    createEditStackElement(group) {
+        const newElement = new live_preview_stack_1.LivePreviewUndoRedoStackElement(this.model);
+        this.undoRedoService.pushElement(newElement, group);
+        return newElement;
     }
     getTotalCodeCount() {
         const list = this.partialEditWidgetList.filter((w) => w.isAccepted);
@@ -475,58 +335,37 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
     acceptUnProcessed() {
         const showingWidgets = this.partialEditWidgetList.filter((widget) => !widget.isHidden);
         showingWidgets.forEach((widget) => {
-            this.handlePartialEditAction(EPartialEdit.accept, widget, false);
+            this.handlePartialEditAction(live_preview_component_1.EPartialEdit.accept, widget, false);
         });
     }
     discardUnProcessed() {
         const showingWidgets = this.partialEditWidgetList.filter((widget) => !widget.isHidden);
         showingWidgets.forEach((widget) => {
-            this.handlePartialEditAction(EPartialEdit.discard, widget, false);
+            this.handlePartialEditAction(live_preview_component_1.EPartialEdit.discard, widget, false);
         });
     }
-    pushUndoElement(data) {
-        var _a;
-        const resource = this.model.uri;
-        const group = (_a = data.group) !== null && _a !== void 0 ? _a : new undoRedo_1.UndoRedoGroup();
-        this.undoRedoService.pushElement({
-            type: undoRedo_1.UndoRedoElementType.Resource,
-            resource,
-            label: 'Live.Preview.UndoRedo',
-            undo: () => {
-                if (!this.disposed) {
-                    data.undo();
-                }
-            },
-            redo: () => {
-                if (!this.disposed) {
-                    data.redo();
-                }
-            },
-        }, group);
+    createPartialEditWidget(lineNumber) {
+        const acceptPartialEditWidget = this.injector.get(live_preview_component_1.AcceptPartialEditWidget, [this.monacoEditor]);
+        acceptPartialEditWidget.show({ position: { lineNumber, column: 1 } });
+        const disposable = acceptPartialEditWidget.onDispose(() => {
+            const id = acceptPartialEditWidget.getId();
+            this.partialEditWidgetList = this.partialEditWidgetList.filter((p) => p.getId() !== id);
+            disposable.dispose();
+        });
+        acceptPartialEditWidget.addDispose([
+            acceptPartialEditWidget.onAccept(() => {
+                this.handlePartialEditAction(live_preview_component_1.EPartialEdit.accept, acceptPartialEditWidget);
+            }),
+            acceptPartialEditWidget.onDiscard(() => {
+                this.handlePartialEditAction(live_preview_component_1.EPartialEdit.discard, acceptPartialEditWidget);
+            }),
+        ]);
+        return acceptPartialEditWidget;
     }
-    touchPartialEditWidgets(startLineNumbers) {
+    touchPartialEditWidgets(lineNumbers) {
         this.clearPartialEditWidgetList();
-        startLineNumbers.forEach((lineNumber) => {
-            const dispoable = new ide_core_common_1.Disposable();
-            const acceptPartialEditWidget = this.injector.get(AcceptPartialEditWidget, [this.monacoEditor]);
-            acceptPartialEditWidget.show({ position: { lineNumber, column: 1 } });
-            dispoable.addDispose(acceptPartialEditWidget.onDispose(() => {
-                const id = acceptPartialEditWidget.getId();
-                this.partialEditWidgetList = this.partialEditWidgetList.filter((p) => p.getId() !== id);
-                dispoable.dispose();
-            }));
-            acceptPartialEditWidget.addDispose([
-                acceptPartialEditWidget.onAccept(() => {
-                    this.handlePartialEditAction(EPartialEdit.accept, acceptPartialEditWidget);
-                }),
-                acceptPartialEditWidget.onDiscard(() => {
-                    this.handlePartialEditAction(EPartialEdit.discard, acceptPartialEditWidget);
-                }),
-            ]);
-            this.partialEditWidgetList.push(acceptPartialEditWidget);
-        });
-        this._onPartialEditWidgetListChange.fire(this.partialEditWidgetList);
-        this.aiNativeContextKey.inlineDiffPartialEditsIsVisible.set(true);
+        this.partialEditWidgetList = lineNumbers.map((lineNumber) => this.createPartialEditWidget(lineNumber));
+        this.firePartialEditWidgetList();
     }
     touchAddedRange(ranges) {
         this.addedRangeDec.set(ranges.map((r) => {
@@ -542,11 +381,11 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
             return {
                 length,
                 range,
+                isHidden: length === 0,
                 options: textModel_1.ModelDecorationOptions.register({
-                    description: AddedRangeDecoration,
+                    description: live_preview_component_1.AddedRangeDecoration,
                     isWholeLine: true,
                     className,
-                    // stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
                 }),
             };
         }));
@@ -555,7 +394,7 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
     touchRemovedWidget(states) {
         this.clearRemovedWidgets();
         states.forEach(({ textLines, position }) => {
-            this.showRemovedWidgetByLineNumber(position.lineNumber, textLines);
+            this.showRemovedWidgetByLineNumber(position.lineNumber, textLines, {});
         });
     }
     touchPendingRange(range) {
@@ -570,7 +409,7 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
                     column: Number.MAX_SAFE_INTEGER,
                 }),
                 options: textModel_1.ModelDecorationOptions.register({
-                    description: PendingRangeDecoration,
+                    description: live_preview_component_1.PendingRangeDecoration,
                     isWholeLine: true,
                     className: inline_stream_diff_module_less_1.default.inline_diff_pending_range,
                 }),
@@ -599,36 +438,13 @@ let LivePreviewDiffDecorationModel = class LivePreviewDiffDecorationModel extend
         });
         this.removedZoneWidgets = [];
     }
-    serializeState() {
-        const addedState = this.addedRangeDec.serializeState();
-        const removedTextLines = this.removedZoneWidgets.filter((v) => !v.isHidden).map((w) => w.serializeState());
-        const widgets = this.partialEditWidgetList.map((w) => w.serializeState());
-        const state = {
-            addedState,
-            removedTextLines,
-            widgets,
-            selection: this.selection,
-        };
-        return state;
-    }
-    restoreSerializedState(state) {
-        this.clear();
-        this.touchAddedRange(state.addedState);
-        const widgetLineNumber = state.widgets.map((w) => w.lineNumber);
-        this.touchPartialEditWidgets(widgetLineNumber);
-        widgetLineNumber.forEach((range, index) => {
-            const widget = this.partialEditWidgetList[index];
-            if (widget) {
-                widget.restoreSerializedState(state.widgets[index]);
-            }
-        });
-        this.touchRemovedWidget(state.removedTextLines);
-    }
     revealFirstDiff() {
         const first = this.removedZoneWidgets[0];
         if (first) {
             const pos = first.getLastPosition();
-            this.monacoEditor.revealLineInCenterIfOutsideViewport(pos.lineNumber);
+            if (pos) {
+                this.monacoEditor.revealLineInCenterIfOutsideViewport(pos.lineNumber);
+            }
         }
     }
 };
@@ -642,7 +458,7 @@ tslib_1.__decorate([
 ], LivePreviewDiffDecorationModel.prototype, "inlineStreamDiffService", void 0);
 LivePreviewDiffDecorationModel = tslib_1.__decorate([
     (0, di_1.Injectable)({ multiple: true }),
-    tslib_1.__metadata("design:paramtypes", [Object, ide_monaco_1.Selection])
+    tslib_1.__metadata("design:paramtypes", [Object])
 ], LivePreviewDiffDecorationModel);
 exports.LivePreviewDiffDecorationModel = LivePreviewDiffDecorationModel;
 //# sourceMappingURL=live-preview.decoration.js.map