@opensumi/ide-ai-native 3.7.2-next-1740450374.0 → 3.7.2-next-1741226843.0

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

@@ -3,41 +3,31 @@ import {
   CancelResponse,
   Disposable,
   Event,
-  FRAME_FIVE,
   FRAME_THREE,
-  IAIReporter,
   IDisposable,
-  IEventBus,
+  InlineChatFeatureRegistryToken,
   ReplyResponse,
   RunOnceScheduler,
-  localize,
 } from '@opensumi/ide-core-common';
-import { EditorGroupCloseEvent } from '@opensumi/ide-editor/lib/browser';
-import * as monaco from '@opensumi/ide-monaco';
 import { ICodeEditor } from '@opensumi/ide-monaco';
-import {
-  IObservable,
-  ISettableObservable,
-  observableFromEvent,
-  observableValue,
-} from '@opensumi/ide-monaco/lib/common/observable';
-import { MessageService } from '@opensumi/ide-overlay/lib/browser/message.service';
+import * as monaco from '@opensumi/ide-monaco';
 import { EditOperation } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/editOperation';
 import { LineRange } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/lineRange';
 import { ModelDecorationOptions } from '@opensumi/monaco-editor-core/esm/vs/editor/common/model/textModel';
 
 import { AINativeContextKey } from '../../ai-core.contextkeys';
 import { BaseAIMonacoEditorController } from '../../contrib/base';
+import { LanguageParserService } from '../../languages/service';
 import { ERunStrategy } from '../../types';
 import { InlineChatController } from '../inline-chat/inline-chat-controller';
+import { InlineChatFeatureRegistry } from '../inline-chat/inline-chat.feature.registry';
 import { EInlineChatStatus, EResultKind } from '../inline-chat/inline-chat.service';
-import { InlineDiffController } from '../inline-diff';
 import { InlineInputPreviewDecorationID } from '../internal.type';
 
-import { InlineInputWidget } from './inline-input-widget';
+import { InlineInputChatWidget } from './inline-input-widget';
 import styles from './inline-input.module.less';
-import { InlineInputService } from './inline-input.service';
-import { InlineInputWidgetStoreInEmptyLine, InlineInputWidgetStoreInSelection } from './model';
+import { InlineInputChatService } from './inline-input.service';
+
 @Injectable()
 export class InlineInputController extends BaseAIMonacoEditorController {
   public static readonly ID = 'editor.contrib.ai.inline.input';
@@ -46,483 +36,281 @@ export class InlineInputController extends BaseAIMonacoEditorController {
     return editor.getContribution<InlineInputController>(InlineInputController.ID);
   }
 
-  private get inlineInputService(): InlineInputService {
-    return this.injector.get(InlineInputService);
+  private get inlineInputChatService(): InlineInputChatService {
+    return this.injector.get(InlineInputChatService);
   }
 
-  private get aiReporter(): IAIReporter {
-    return this.injector.get(IAIReporter);
+  private get inlineChatFeatureRegistry(): InlineChatFeatureRegistry {
+    return this.injector.get(InlineChatFeatureRegistryToken);
   }
 
-  private get eventBus(): IEventBus {
-    return this.injector.get(IEventBus);
+  private get languageParserService(): LanguageParserService {
+    return this.injector.get(LanguageParserService);
   }
 
-  private get messageService(): MessageService {
-    return this.injector.get(MessageService);
-  }
-
-  private inlineDiffController: InlineDiffController;
-  private inputDisposable: Disposable;
-  private aiNativeContextKey: AINativeContextKey;
-
-  private inputValue: ISettableObservable<string>;
-  private modelChangeObs: IObservable<monaco.editor.ITextModel>;
-  private inlineInputWidgetStore: Map<
-    string,
-    InlineInputWidgetStoreInEmptyLine | InlineInputWidgetStoreInSelection | null
-  >;
-
   mount(): IDisposable {
-    this.inputDisposable = new Disposable();
-    this.aiNativeContextKey = this.injector.get(AINativeContextKey, [this.monacoEditor.contextKeyService]);
-    this.inlineDiffController = InlineDiffController.get(this.monacoEditor)!;
-
-    this.inputValue = observableValue(this, '');
-    this.modelChangeObs = observableFromEvent<monaco.editor.ITextModel>(
-      this,
-      this.monacoEditor.onDidChangeModel,
-      () => this.monacoEditor.getModel()!,
-    );
-    this.inlineInputWidgetStore = new Map();
-
-    this.featureDisposable.addDispose(
-      /**
-       * 如果在流式过程中，直接关闭了当前文件，则需要销毁 diff previewer 并隐藏 input，恢复原始代码
-       */
-      this.eventBus.on(EditorGroupCloseEvent, (e: EditorGroupCloseEvent) => {
-        const isStreaming = this.aiNativeContextKey.inlineInputWidgetIsStreaming.get();
-        if (!isStreaming) {
-          return;
-        }
-
-        const resource = e.payload.resource.uri.toString();
-        const currentUri = this.monacoEditor.getModel()?.uri.toString();
-
-        if (currentUri === resource) {
-          this.hideInput();
-
-          const message = localize('aiNative.inline.chat.generating.canceled');
-          if (message) {
-            this.messageService.info(message);
-          }
-        }
-      }),
-    );
-
-    this.featureDisposable.addDispose(
-      this.inlineInputService.onHidden(() => {
-        this.hideInput();
-      }),
-    );
-
-    this.featureDisposable.addDispose(
-      this.inlineInputService.onInteractiveInputVisibleInPosition(async (position) => {
-        if (position) {
-          this.showInputInEmptyLine(position, this.monacoEditor);
-        } else {
-          setTimeout(() => this.monacoEditor.focus(), 0);
-        }
-      }),
-    );
-
-    this.featureDisposable.addDispose(
-      this.inlineInputService.onInteractiveInputVisibleInSelection((selection) => {
-        if (!selection) {
-          return;
-        }
-
-        this.showInputInSelection(selection, this.monacoEditor);
-      }),
-    );
-
-    this.featureDisposable.addDispose(this.inputDisposable);
-
-    return this.featureDisposable;
-  }
-
-  override cancelToken() {
-    super.cancelToken();
-    this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-  }
-
-  private hideInput() {
-    this.inlineInputWidgetStore.delete(this.monacoEditor.getModel()!.id);
-    this.inputDisposable.dispose();
+    return this.registerInlineInputFeature(this.monacoEditor);
   }
 
-  private async showInputInEmptyLine(position: monaco.IPosition, monacoEditor: ICodeEditor, defaultValue?: string) {
+  private async doRequestReadable(
+    value: string,
+    widget: InlineInputChatWidget,
+    monacoEditor: ICodeEditor,
+    inputDisposable: Disposable,
+    decoration: monaco.editor.IEditorDecorationsCollection,
+    hideInput: () => void,
+  ): Promise<void> {
+    const handler = this.inlineChatFeatureRegistry.getInteractiveInputHandler();
     const model = monacoEditor.getModel();
 
-    if (!model) {
+    if (!handler || !model) {
       return;
     }
 
-    const selection = monacoEditor.getSelection();
-    if (selection && !selection.isEmpty()) {
-      return;
-    }
+    widget.launchChatStatus(EInlineChatStatus.THINKING);
 
-    this.inputValue.set(defaultValue || '', undefined);
-    this.inlineInputWidgetStore.set(model.id, new InlineInputWidgetStoreInEmptyLine(position, defaultValue));
+    const strategy = await this.inlineChatFeatureRegistry.getInteractiveInputStrategyHandler()(monacoEditor, value);
 
-    if (this.inputDisposable) {
-      this.inputDisposable.dispose();
-      this.inputDisposable = new Disposable();
+    if (strategy === ERunStrategy.EXECUTE && handler.execute) {
+      handler.execute(monacoEditor, value, this.token);
+      widget.launchChatStatus(EInlineChatStatus.DONE);
+      hideInput();
+      return;
     }
 
-    const collection = monacoEditor.createDecorationsCollection();
-    const inlineInputWidget = this.injector.get(InlineInputWidget, [monacoEditor, this.inputValue.get()]);
-
-    // 仅在空行情况下增加装饰逻辑
-    collection.append([
-      {
-        range: monaco.Range.fromPositions(position),
-        options: ModelDecorationOptions.register({
-          description: InlineInputPreviewDecorationID,
-          isWholeLine: true,
-          className: styles.input_decoration_readable_container,
-          inlineClassName: styles.inline_chat_inserted_range,
-        }),
-      },
-    ]);
-
-    const decorationRange = collection.getRange(0);
-    let preLineRange: LineRange;
-    if (decorationRange) {
-      preLineRange = LineRange.fromRange(decorationRange);
-      inlineInputWidget.show({ position: decorationRange.getStartPosition() });
-      this.aiNativeContextKey.inlineInputWidgetIsVisible.set(true);
+    if (strategy === ERunStrategy.PREVIEW && handler.providePreviewStrategy) {
+      const previewResponse = await handler.providePreviewStrategy(monacoEditor, value, this.token);
+
+      if (CancelResponse.is(previewResponse)) {
+        widget.launchChatStatus(EInlineChatStatus.READY);
+        hideInput();
+        return;
+      }
+
+      if (InlineChatController.is(previewResponse)) {
+        const controller = previewResponse as InlineChatController;
+
+        let latestContent: string | undefined;
+        const schedulerEdit: RunOnceScheduler = this.registerDispose(
+          new RunOnceScheduler(() => {
+            const range = decoration.getRange(0);
+            if (range && latestContent) {
+              model.pushEditOperations(null, [EditOperation.replace(range, latestContent)], () => null);
+            }
+          }, 16 * 12.5),
+        );
+
+        inputDisposable.addDispose([
+          controller.onData(async (data) => {
+            if (!ReplyResponse.is(data)) {
+              return;
+            }
+
+            latestContent = data.message;
+
+            if (!schedulerEdit.isScheduled()) {
+              schedulerEdit.schedule();
+            }
+          }),
+          controller.onError((error) => {
+            widget.launchChatStatus(EInlineChatStatus.ERROR);
+          }),
+          controller.onAbort(() => {
+            widget.launchChatStatus(EInlineChatStatus.READY);
+          }),
+          controller.onEnd(() => {
+            model.pushStackElement();
+            widget.launchChatStatus(EInlineChatStatus.DONE);
+          }),
+        ]);
+
+        controller.listen();
+      }
     }
+  }
 
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onDispose(() => {
-        this.cancelToken();
-        collection.clear();
-        this.aiNativeContextKey.inlineInputWidgetIsVisible.set(false);
-      }),
-    );
-
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onValueChange((value) => {
-        this.inputValue.set(value, undefined);
-
-        const storeData = this.inlineInputWidgetStore.get(model.id);
-        if (storeData instanceof InlineInputWidgetStoreInEmptyLine) {
-          storeData.setValue(value);
-        }
-      }),
-    );
-
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onResultClick(async (kind: EResultKind) => {
-        const clear = () => {
-          const curPosi = collection.getRange(0)!;
-
-          model.pushStackElement();
-          model.pushEditOperations(null, [EditOperation.delete(curPosi)], () => null);
-          model.pushStackElement();
-        };
-
-        switch (kind) {
-          case EResultKind.ACCEPT:
-            this.hideInput();
-            break;
-          case EResultKind.DISCARD:
-            clear();
-            this.hideInput();
-            break;
-          case EResultKind.REGENERATE:
-            clear();
-            requestAnimationFrame(() => {
-              /**
-               * 避免在重新生成的时候，因为光标移动，导致 input 的位置不正确
-               */
-              const curPosi = collection.getRange(0)!;
-              const curPosition = curPosi.getStartPosition();
-              this.showInputInEmptyLine(curPosition, monacoEditor, this.inputValue.get());
-            });
-            break;
-
-          default:
-            break;
-        }
-      }),
-    );
-
-    this.inputDisposable.addDispose(
-      Event.debounce(
-        collection.onDidChange.bind(collection),
-        () => {},
-        FRAME_THREE,
-      )(() => {
-        if (!collection.getRange(0)) {
-          return;
-        }
+  private registerInlineInputFeature(monacoEditor: ICodeEditor): IDisposable {
+    const inputDisposable = new Disposable();
+    const aiNativeContextKey = this.injector.get(AINativeContextKey, [monacoEditor.contextKeyService]);
 
-        const range = collection.getRange(0)!;
-        const curLineRange = LineRange.fromRange(range);
-        if (!preLineRange.equals(curLineRange)) {
-          inlineInputWidget.setOptions({
-            position: range.getStartPosition(),
-          });
+    const hideInput = () => {
+      inputDisposable.dispose();
+    };
 
-          inlineInputWidget.layoutContentWidget();
-        }
-        preLineRange = curLineRange;
-      }),
-    );
-
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onClose(() => {
-        const isStreaming = this.aiNativeContextKey.inlineInputWidgetIsStreaming.get();
-        if (isStreaming) {
-          this.cancelToken();
+    this.featureDisposable.addDispose(
+      this.inlineInputChatService.onInteractiveInputVisibleInPosition((position) => {
+        hideInput();
+        if (position) {
+          showInput(position, monacoEditor);
         } else {
-          this.hideInput();
+          setTimeout(() => {
+            monacoEditor.focus();
+          }, 0);
         }
       }),
     );
 
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onSend(async (value) => {
-        monacoEditor.focus();
-
-        const handler = this.inlineInputService.getInteractiveInputHandler();
-        const model = monacoEditor.getModel();
-
-        if (!handler || !model) {
-          return;
-        }
-
-        inlineInputWidget.launchChatStatus(EInlineChatStatus.THINKING);
-
-        const strategy = await this.inlineInputService.getInteractiveInputStrategyHandler()(monacoEditor, value);
-        const selection = monaco.Selection.fromPositions(position);
-
-        if (strategy === ERunStrategy.EXECUTE && handler.execute) {
-          handler.execute(monacoEditor, selection, value, this.token);
-          inlineInputWidget.launchChatStatus(EInlineChatStatus.DONE);
-          this.hideInput();
-          return;
-        }
-
-        if (strategy === ERunStrategy.PREVIEW && handler.providePreviewStrategy) {
-          const previewResponse = await handler.providePreviewStrategy(monacoEditor, selection, value, this.token);
-
-          if (CancelResponse.is(previewResponse)) {
-            inlineInputWidget.launchChatStatus(EInlineChatStatus.READY);
-            this.hideInput();
-            return;
-          }
-
-          if (InlineChatController.is(previewResponse)) {
-            const controller = previewResponse as InlineChatController;
-
-            let latestContent: string | undefined;
-            const schedulerEdit: RunOnceScheduler = this.registerDispose(
-              new RunOnceScheduler(() => {
-                const range = collection.getRange(0);
-                if (range && latestContent) {
-                  model.pushEditOperations(null, [EditOperation.replace(range, latestContent)], () => null);
-                }
-              }, FRAME_FIVE),
-            );
-
-            this.inputDisposable.addDispose([
-              controller.onData(async (data) => {
-                if (!ReplyResponse.is(data)) {
-                  return;
-                }
-
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(true);
-                latestContent = data.message;
-
-                if (!schedulerEdit.isScheduled()) {
-                  schedulerEdit.schedule();
-                }
-              }),
-              controller.onError((error) => {
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-                inlineInputWidget.launchChatStatus(EInlineChatStatus.READY);
-              }),
-              controller.onAbort(() => {
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-                model.pushStackElement();
-                inlineInputWidget.launchChatStatus(EInlineChatStatus.DONE);
-              }),
-              controller.onEnd(() => {
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-                model.pushStackElement();
-                inlineInputWidget.launchChatStatus(EInlineChatStatus.DONE);
-              }),
-            ]);
-
-            controller.listen();
-          }
-        }
-      }),
-    );
-
-    this.inputDisposable.addDispose(inlineInputWidget);
-  }
-
-  private async showInputInSelection(selection: monaco.Selection, monacoEditor: ICodeEditor, defaultValue?: string) {
-    if (this.inputDisposable) {
-      this.inputDisposable.dispose();
-      this.inputDisposable = new Disposable();
-    }
-
-    const model = monacoEditor.getModel();
-    if (!model) {
-      return;
-    }
-
-    const decorationsCollection = monacoEditor.createDecorationsCollection();
-    decorationsCollection.set([
-      {
-        range: monaco.Range.fromPositions(
-          { lineNumber: selection.startLineNumber, column: 1 },
-          {
-            lineNumber: selection.endLineNumber,
-            column: monacoEditor.getModel()!.getLineMaxColumn(selection.endLineNumber),
-          },
-        ),
-        options: ModelDecorationOptions.register({
-          description: InlineInputPreviewDecorationID,
-          isWholeLine: true,
-          className: styles.input_decoration_pending_container,
+    const showInput = async (position: monaco.Position, monacoEditor: ICodeEditor) => {
+      this.featureDisposable.addDispose(
+        monacoEditor.onWillChangeModel(() => {
+          hideInput();
         }),
-      },
-    ]);
-    const decorationSelection = monaco.Selection.fromRange(
-      decorationsCollection.getRange(0)!,
-      selection.getDirection(),
-    );
-
-    this.inputValue.set(defaultValue || '', undefined);
-    this.inlineInputWidgetStore.set(model.id, new InlineInputWidgetStoreInSelection(decorationSelection, defaultValue));
+      );
 
-    const inlineInputWidget = this.injector.get(InlineInputWidget, [monacoEditor, this.inputValue.get()]);
-    inlineInputWidget.show({ selection: decorationSelection });
-
-    this.aiNativeContextKey.inlineInputWidgetIsVisible.set(true);
-
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onDispose(() => {
-        this.cancelToken();
-        decorationsCollection.clear();
-        this.aiNativeContextKey.inlineInputWidgetIsVisible.set(false);
-      }),
-    );
-
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onValueChange((value) => {
-        this.inputValue.set(value, undefined);
-
-        const storeData = this.inlineInputWidgetStore.get(model.id);
-        if (storeData instanceof InlineInputWidgetStoreInSelection) {
-          storeData.setValue(value);
-        }
-      }),
-    );
+      const model = monacoEditor.getModel();
+      if (!model) {
+        return;
+      }
 
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onClose(() => {
-        const isStreaming = this.aiNativeContextKey.inlineInputWidgetIsStreaming.get();
-        if (isStreaming) {
-          this.cancelToken();
+      /**
+       * 只有当前编辑器的光标聚焦，才会展示
+       * 用于解决多栏的情况下，同时打开多个 input 的问题
+       */
+      const hasFocus = monacoEditor.hasTextFocus();
+      if (!hasFocus) {
+        return;
+      }
+
+      const selection = monacoEditor.getSelection();
+      if (selection && selection.startLineNumber !== selection.endLineNumber) {
+        return;
+      }
+
+      const inlineInputChatWidget = this.injector.get(InlineInputChatWidget, [monacoEditor]);
+
+      const collection = monacoEditor.createDecorationsCollection();
+      const isEmptyLine = !monacoEditor.getModel()?.getLineContent(position.lineNumber).trim();
+
+      if (!isEmptyLine) {
+        // 根据光标位置自动检测并选中临近的代码块
+        const cursorPosition = monacoEditor.getPosition();
+        const editorModel = monacoEditor.getModel();
+        const cursor = editorModel?.getOffsetAt(cursorPosition!);
+        const language = editorModel?.getLanguageId();
+        const parser = this.languageParserService.createParser(language!);
+        const codeBlock = await parser?.findNearestCodeBlockWithPosition(editorModel?.getValue() || '', cursor!);
+
+        if (codeBlock) {
+          const selection = new monaco.Selection(
+            codeBlock.range.start.line + 1,
+            codeBlock.range.start.character,
+            codeBlock.range.end.line + 1,
+            codeBlock.range.end.character,
+          );
+          monacoEditor.setSelection(selection);
         } else {
-          this.hideInput();
-        }
-      }),
-    );
-
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onSend(async (value) => {
-        monacoEditor.focus();
-
-        const handler = this.inlineInputService.getInteractiveInputHandler();
-
-        if (!handler) {
-          return;
+          // 选中当前行
+          monacoEditor.setSelection(new monaco.Selection(position.lineNumber, 1, position.lineNumber, Infinity));
         }
-
-        inlineInputWidget.launchChatStatus(EInlineChatStatus.THINKING);
-
-        const strategy = await this.inlineInputService.getInteractiveInputStrategyHandler()(monacoEditor, value);
-
-        if (strategy === ERunStrategy.PREVIEW && handler.providePreviewStrategy) {
-          const previewResponse = await handler.providePreviewStrategy(
-            monacoEditor,
-            decorationSelection,
-            value,
-            this.token,
-          );
-
-          if (CancelResponse.is(previewResponse)) {
-            decorationsCollection.clear();
-            this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-            inlineInputWidget.launchChatStatus(EInlineChatStatus.DONE);
+        return;
+      }
+
+      // 仅在空行情况下增加装饰逻辑
+      collection.append([
+        {
+          range: monaco.Range.fromPositions(position),
+          options: ModelDecorationOptions.register({
+            description: InlineInputPreviewDecorationID,
+            isWholeLine: true,
+            className: styles.input_decoration_readable_container,
+            inlineClassName: styles.inline_chat_inserted_range,
+          }),
+        },
+      ]);
+
+      const decorationRange = collection.getRange(0);
+      let preLineRange: LineRange;
+      if (decorationRange) {
+        preLineRange = LineRange.fromRange(decorationRange);
+        inlineInputChatWidget.show({ position: decorationRange.getStartPosition() });
+      }
+      aiNativeContextKey.inlineInputWidgetIsVisible.set(true);
+
+      inputDisposable.addDispose(
+        inlineInputChatWidget.onDispose(() => {
+          this.cancelToken();
+          collection.clear();
+          aiNativeContextKey.inlineInputWidgetIsVisible.set(false);
+        }),
+      );
+
+      inputDisposable.addDispose(
+        inlineInputChatWidget.onResultClick(async (kind: EResultKind) => {
+          const clear = () => {
+            const curPosi = collection.getRange(0)!;
+
+            model.pushStackElement();
+            model.pushEditOperations(null, [EditOperation.delete(curPosi)], () => null);
+            model.pushStackElement();
+          };
+
+          switch (kind) {
+            case EResultKind.ACCEPT:
+              hideInput();
+              break;
+            case EResultKind.DISCARD:
+              clear();
+              hideInput();
+              break;
+            case EResultKind.REGENERATE:
+              clear();
+              await this.doRequestReadable(
+                inlineInputChatWidget.interactiveInputValue,
+                inlineInputChatWidget,
+                monacoEditor,
+                inputDisposable,
+                collection,
+                hideInput,
+              );
+              break;
+
+            default:
+              break;
+          }
+        }),
+      );
+
+      inputDisposable.addDispose(
+        Event.debounce(
+          collection.onDidChange.bind(collection),
+          () => {},
+          FRAME_THREE,
+        )(() => {
+          if (!collection.getRange(0)) {
             return;
           }
 
-          if (InlineChatController.is(previewResponse)) {
-            const chatResponse = previewResponse;
-
-            this.inputDisposable.addDispose([
-              chatResponse.onData((data) => {
-                decorationsCollection.clear();
-                if (ReplyResponse.is(data)) {
-                  this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(true);
-                }
-              }),
-              chatResponse.onError((error) => {
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-                inlineInputWidget.launchChatStatus(EInlineChatStatus.READY);
-              }),
-              chatResponse.onAbort(() => {
-                decorationsCollection.clear();
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-                inlineInputWidget.launchChatStatus(EInlineChatStatus.DONE);
-              }),
-              chatResponse.onEnd(() => {
-                decorationsCollection.clear();
-                this.aiNativeContextKey.inlineInputWidgetIsStreaming.set(false);
-                inlineInputWidget.launchChatStatus(EInlineChatStatus.DONE);
-              }),
-            ]);
-
-            const diffPreviewer = this.inlineDiffController.showPreviewerByStream(monacoEditor, {
-              crossSelection: decorationSelection,
-              chatResponse,
+          const range = collection.getRange(0)!;
+          const curLineRange = LineRange.fromRange(range);
+          if (!preLineRange.equals(curLineRange)) {
+            inlineInputChatWidget.setOptions({
+              position: range.getStartPosition(),
             });
 
-            diffPreviewer.mountWidget(inlineInputWidget);
-
-            chatResponse.listen();
+            inlineInputChatWidget.layoutContentWidget();
           }
-        } else {
-          decorationsCollection.clear();
-          inlineInputWidget.launchChatStatus(EInlineChatStatus.READY);
-          this.hideInput();
-        }
-      }),
-    );
+          preLineRange = curLineRange;
+        }),
+      );
 
-    this.inputDisposable.addDispose(
-      inlineInputWidget.onResultClick((kind: EResultKind) => {
-        this.inlineDiffController.handleAction(kind);
-        this.hideInput();
+      inputDisposable.addDispose(
+        inlineInputChatWidget.onInteractiveInputValue(async (value) => {
+          await this.doRequestReadable(
+            value,
+            inlineInputChatWidget,
+            monacoEditor,
+            inputDisposable,
+            collection,
+            hideInput,
+          );
+        }),
+      );
 
-        if (kind === EResultKind.REGENERATE) {
-          requestAnimationFrame(() => {
-            this.showInputInSelection(decorationSelection, monacoEditor, this.inputValue.get());
-          });
-        }
-      }),
-    );
+      inputDisposable.addDispose(inlineInputChatWidget);
+    };
 
-    this.inputDisposable.addDispose(inlineInputWidget);
+    this.featureDisposable.addDispose(inputDisposable);
+
+    return this.featureDisposable;
   }
 }