fix: inline chat first line visible

Author: Ricbet

packages/ai-native/src/browser/widget/inline-chat/inline-chat.handler.ts

@@ -560,7 +560,7 @@ export class InlineChatHandler extends Disposable {
           if (crossSelection.endLineNumber === model!.getLineCount()) {
             // 如果用户是选中了最后一行，直接显示在最后一行
             const lineHeight = monacoEditor.getOption(monacoApi.editor.EditorOption.lineHeight);
-            this.aiInlineContentWidget.offsetTop(lineHeight * count + 12);
+            this.aiInlineContentWidget.setOffsetTop(lineHeight * count + 12);
           }
         });
       }),

packages/ai-native/src/browser/widget/inline-chat/inline-content-widget.tsx

@@ -157,15 +157,13 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
     );
   }, [operationList, moreOperation, customOperationRender, onResultClick, status, interactiveInputVisible]);
 
-  return (
-    <div className={styles.inline_chat_controller_box} style={isDone ? { transform: 'translateY(-15px)' } : {}}>
-      {renderContent()}
-    </div>
-  );
+  return <div className={styles.inline_chat_controller_box}>{renderContent()}</div>;
 };
 
 @Injectable({ multiple: true })
 export class AIInlineContentWidget extends ReactInlineContentWidget {
+  allowEditorOverflow = true;
+
   @Autowired(INJECTOR_TOKEN)
   private readonly injector: Injector;
 
@@ -174,8 +172,6 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
 
   private readonly aiNativeContextKey: AINativeContextKey;
 
-  private originTop = 0;
-
   private readonly _onActionClickEmitter = new Emitter<{ actionId: string; source: string }>();
   public readonly onActionClick = this._onActionClickEmitter.event;
 
@@ -279,13 +275,8 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
     this.options = options;
   }
 
-  public offsetTop(top: number): void {
-    if (this.originTop === 0) {
-      const top = this.domNode.style.top;
-      this.originTop = top ? parseInt(top, 10) : 0;
-    }
-
-    this.domNode.style.top = `${this.originTop + top}px`;
+  public setOffsetTop(top: number): void {
+    this.domNode.style.transform = `translateY(${top}px)`;
   }
 
   id(): string {

packages/ai-native/src/browser/widget/inline-diff/inline-diff-previewer.ts

@@ -315,7 +315,7 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
   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: zone.startLineNumber, column: 1 });
     }
     return Position.lift({ lineNumber: 1, column: 1 });
   }
@@ -338,8 +338,30 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
     return Disposable.NULL;
   }
   layout(): void {
-    this.inlineContentWidget?.setPositionPreference([ContentWidgetPositionPreference.EXACT]);
+    this.inlineContentWidget?.setPositionPreference([
+      ContentWidgetPositionPreference.ABOVE,
+      ContentWidgetPositionPreference.BELOW,
+    ]);
     super.layout();
+
+    const position = this.getPosition();
+    if (position && this.inlineContentWidget) {
+      // 如果第一个 removed widget 的 lineNumber 和 position 的 lineNumber 相等，则需要将 inline content widget 往上移动被删除的行数，避免遮挡
+      const removedWidgets = this.node?.livePreviewDiffDecorationModel.getRemovedWidgets();
+      if (removedWidgets?.length) {
+        const lineNumber = position.lineNumber;
+        const firstRemovedWidget = removedWidgets[0];
+
+        if (firstRemovedWidget) {
+          const firstRemovedWidgetLineNumber = firstRemovedWidget.getLastPosition()?.lineNumber;
+          if (firstRemovedWidgetLineNumber <= lineNumber) {
+            const lineHeight = this.inlineContentWidget.getLineHeight();
+            const len = firstRemovedWidget.height;
+            this.inlineContentWidget.setOffsetTop(-lineHeight * len - 4);
+          }
+        }
+      }
+    }
   }
   onData(data: ReplyResponse): void {
     const { message } = data;

packages/ai-native/src/browser/widget/inline-stream-diff/inline-stream-diff.handler.tsx

@@ -61,7 +61,6 @@ export class InlineStreamDiffHandler extends Disposable implements IInlineDiffPr
 
   public previewerOptions: IDiffPreviewerOptions;
 
-  private livePreviewDiffDecorationModel: LivePreviewDiffDecorationModel;
   private originalModel: ITextModel;
   private virtualModel: ITextModel;
 
@@ -70,6 +69,8 @@ export class InlineStreamDiffHandler extends Disposable implements IInlineDiffPr
   private rawOriginalTextLinesTokens: LineTokens[] = [];
   private undoRedoGroup: UndoRedoGroup;
 
+  public livePreviewDiffDecorationModel: LivePreviewDiffDecorationModel;
+
   constructor(private readonly monacoEditor: ICodeEditor) {
     super();
 

packages/ai-native/src/browser/widget/inline-stream-diff/live-preview.decoration.tsx

@@ -159,6 +159,10 @@ export class LivePreviewDiffDecorationModel extends Disposable {
     this.updateZone(zone);
   }
 
+  getRemovedWidgets(): RemovedZoneWidget[] {
+    return this.removedZoneWidgets;
+  }
+
   restoreSnapshot(snapshot: ILivePreviewDiffDecorationSnapshotData): void {
     const {
       addedDecList,