@opensumi/ide-ai-native 3.7.1-next-1739439717.0 → 3.7.1-next-1739521933.0

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

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
 import { IAIInlineChatService, StackingLevel, useInjectable } from '@opensumi/ide-core-browser';
 import { AIAction } from '@opensumi/ide-core-browser/lib/components/ai-native';
-import { InteractiveInput } from '@opensumi/ide-core-browser/lib/components/ai-native/interactive-input/index';
 import { MenuNode } from '@opensumi/ide-core-browser/lib/menu/next/base';
 import {
   AIInlineChatContentWidgetId,
@@ -11,7 +10,6 @@ import {
   Emitter,
   Event,
   InlineChatFeatureRegistryToken,
-  localize,
   runWhenIdle,
 } from '@opensumi/ide-core-common';
 import * as monaco from '@opensumi/ide-monaco';
@@ -23,40 +21,32 @@ import {
 
 import { AINativeContextKey } from '../../ai-core.contextkeys';
 import { InlineResultAction } from '../inline-actions/result-items/index';
+import { InlineInputService } from '../inline-input/inline-input.service';
+import { InteractiveInputModel } from '../inline-input/model';
 
 import { InlineChatFeatureRegistry } from './inline-chat.feature.registry';
 import styles from './inline-chat.module.less';
-import { AIInlineChatService, EInlineChatStatus, EResultKind } from './inline-chat.service';
+import { EInlineChatStatus, EResultKind, InlineChatService } from './inline-chat.service';
 
 import type { ICodeEditor as IMonacoCodeEditor } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
 
 interface IAIInlineChatControllerProps {
   onClickActions: (id: string) => void;
-  onLayoutChange: (height: number) => void;
   onClose?: () => void;
-  onInteractiveInputSend?: (value: string) => void;
   onChatStatus: Event<EInlineChatStatus>;
   onResultClick: (k: EResultKind) => void;
 }
 
 const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
-  const { onClickActions, onClose, onInteractiveInputSend, onLayoutChange, onChatStatus, onResultClick } = props;
-  const aiInlineChatService: AIInlineChatService = useInjectable(IAIInlineChatService);
+  const { onClickActions, onClose, onChatStatus, onResultClick } = props;
+  const aiInlineChatService: InlineChatService = useInjectable(IAIInlineChatService);
   const inlineChatFeatureRegistry: InlineChatFeatureRegistry = useInjectable(InlineChatFeatureRegistryToken);
+
   const [status, setStatus] = useState<EInlineChatStatus>(EInlineChatStatus.READY);
-  const [interactiveInputVisible, setInteractiveInputVisible] = useState<boolean>(
-    aiInlineChatService.interactiveInputVisible,
-  );
   useEffect(() => {
     const dis = new Disposable();
     dis.addDispose(onChatStatus((s) => setStatus(s)));
 
-    dis.addDispose(
-      aiInlineChatService.onInteractiveInputVisible((v) => {
-        setInteractiveInputVisible(v);
-      }),
-    );
-
     return () => {
       dis.dispose();
     };
@@ -84,13 +74,6 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
     onClose?.();
   }, [onClose]);
 
-  const handleInteractiveInputSend = useCallback(
-    (value: string) => {
-      onInteractiveInputSend?.(value);
-    },
-    [onInteractiveInputSend],
-  );
-
   const moreOperation = useMemo(
     () =>
       inlineChatFeatureRegistry.getEditorActionMenus().map(
@@ -107,24 +90,6 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
     [inlineChatFeatureRegistry],
   );
 
-  const customOperationRender = useMemo(() => {
-    if (!interactiveInputVisible) {
-      return null;
-    }
-
-    return (
-      <InteractiveInput
-        autoFocus
-        onHeightChange={(height) => onLayoutChange(height)}
-        size='small'
-        placeholder={localize('aiNative.inline.chat.input.placeholder.default')}
-        width={320}
-        disabled={isLoading}
-        onSend={handleInteractiveInputSend}
-      />
-    );
-  }, [isLoading, interactiveInputVisible]);
-
   const renderContent = useCallback(() => {
     if (operationList.length === 0 && moreOperation.length === 0) {
       return null;
@@ -145,11 +110,9 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
         onClickItem={handleClickActions}
         onClose={handleClose}
         loading={isLoading}
-        loadingShowOperation={interactiveInputVisible}
-        customOperationRender={customOperationRender}
       />
     );
-  }, [operationList, moreOperation, customOperationRender, onResultClick, status, interactiveInputVisible]);
+  }, [operationList, moreOperation, onResultClick, status]);
 
   return <div className={styles.inline_chat_controller_box}>{renderContent()}</div>;
 };
@@ -161,28 +124,20 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
   @Autowired(INJECTOR_TOKEN)
   private readonly injector: Injector;
 
-  @Autowired(InlineChatFeatureRegistryToken)
-  private readonly inlineChatFeatureRegistry: InlineChatFeatureRegistry;
+  @Autowired(InlineInputService)
+  protected readonly inlineInputService: InlineInputService;
 
   private readonly aiNativeContextKey: AINativeContextKey;
 
   private readonly _onActionClickEmitter = new Emitter<{ actionId: string; source: string }>();
   public readonly onActionClick = this._onActionClickEmitter.event;
 
-  protected readonly _onInteractiveInputValue = new Emitter<string>();
-  public readonly onInteractiveInputValue = this._onInteractiveInputValue.event;
-
   protected readonly _onStatusChange = new Emitter<EInlineChatStatus>();
   public readonly onStatusChange: Event<EInlineChatStatus> = this._onStatusChange.event;
 
   protected readonly _onResultClick = new Emitter<EResultKind>();
   public readonly onResultClick: Event<EResultKind> = this._onResultClick.event;
 
-  protected _interactiveInputValue: string;
-  public get interactiveInputValue(): string {
-    return this._interactiveInputValue;
-  }
-
   protected _status: EInlineChatStatus = EInlineChatStatus.READY;
   public get status(): EInlineChatStatus {
     return this._status;
@@ -196,13 +151,6 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
     super(editor);
 
     this.aiNativeContextKey = this.injector.get(AINativeContextKey, [this.editor.contextKeyService]);
-    this.addDispose(
-      this.editor.onDidLayoutChange(() => {
-        if (this.isOutOfArea()) {
-          this.dispose();
-        }
-      }),
-    );
   }
 
   public launchChatStatus(status: EInlineChatStatus) {
@@ -218,8 +166,11 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
   }
 
   public clickActionId(actionId: string, source: string): void {
-    if (actionId === this.inlineChatFeatureRegistry.getInteractiveInputId()) {
-      this.inlineChatFeatureRegistry._onChatClick.fire();
+    if (actionId === InteractiveInputModel.ID && this.options?.selection) {
+      // 隐藏当前的 inline chat widget
+      this.hide();
+      // 显示 inline input widget
+      this.inlineInputService.visibleBySelection(this.options.selection);
       return;
     }
 
@@ -232,14 +183,6 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
         onClickActions={(id) => this.clickActionId(id, 'widget')}
         onClose={() => this.dispose()}
         onChatStatus={this.onStatusChange.bind(this)}
-        onLayoutChange={() => {
-          this.editor.layoutContentWidget(this);
-        }}
-        onInteractiveInputSend={(value) => {
-          this.launchChatStatus(EInlineChatStatus.THINKING);
-          this._interactiveInputValue = value;
-          this._onInteractiveInputValue.fire(value);
-        }}
         onResultClick={(kind: EResultKind) => {
           this._onResultClick.fire(kind);
         }}

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

@@ -3,6 +3,7 @@ import { Disposable, ErrorResponse, IDisposable, ReplyResponse } from '@opensumi
 import { EOL, ICodeEditor, IPosition, ITextModel, Position, Selection } from '@opensumi/ide-monaco';
 import { ContentWidgetPositionPreference } from '@opensumi/ide-monaco/lib/browser/monaco-exports/editor';
 import { empty, getLeadingWhitespace } from '@opensumi/ide-utils/lib/strings';
+import { LineRange } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/lineRange';
 import { DefaultEndOfLine } from '@opensumi/monaco-editor-core/esm/vs/editor/common/model';
 import { createTextBuffer } from '@opensumi/monaco-editor-core/esm/vs/editor/common/model/textModel';
 import { ModelService } from '@opensumi/monaco-editor-core/esm/vs/editor/common/services/modelService';
@@ -43,10 +44,13 @@ export abstract class BaseInlineDiffPreviewer<N extends IInlineDiffPreviewerNode
   protected inlineContentWidget: AIInlineContentWidget | null = null;
   protected selection: Selection;
   protected model: ITextModel;
+  public modelId: string;
 
   constructor(protected readonly monacoEditor: ICodeEditor) {
     super();
     this.model = this.monacoEditor.getModel()!;
+    this.modelId = this.model.id;
+
     this.addDispose(
       Disposable.create(() => {
         if (this.inlineContentWidget) {
@@ -106,11 +110,7 @@ export abstract class BaseInlineDiffPreviewer<N extends IInlineDiffPreviewerNode
     return this.node;
   }
 
-  public createNodeSnapshot(): N | undefined {
-    return this.node;
-  }
-
-  public mount(contentWidget: AIInlineContentWidget): void {
+  public mountWidget(contentWidget: AIInlineContentWidget): void {
     this.inlineContentWidget = contentWidget;
   }
 
@@ -156,20 +156,25 @@ export abstract class BaseInlineDiffPreviewer<N extends IInlineDiffPreviewerNode
   setValue(content: string): void {
     // do nothing
   }
+
   getValue(): string {
     // do nothing
     return '';
   }
+
   getOriginValue(): string {
     // do nothing
     return '';
   }
+
   onError(error: ErrorResponse): void {
     // do nothing
   }
+
   onAbort(): void {
     // do nothing
   }
+
   onEnd(): void {
     // do nothing
   }
@@ -178,6 +183,30 @@ export abstract class BaseInlineDiffPreviewer<N extends IInlineDiffPreviewerNode
     // do nothing
   }
 
+  /**
+   * 会新建一个渲染层的实例
+   * 或重新赋值渲染层的数据
+   * 适用于首次渲染
+   */
+  render(): void {
+    // do nothing
+  }
+
+  /**
+   * 仅隐藏渲染层，而不销毁实例
+   */
+  hide(): void {
+    // do nothing
+  }
+
+  /**
+   * 恢复渲染层
+   * 适用于非首次渲染
+   */
+  resume(): void {
+    // do nothing
+  }
+
   isModel(uri: string): boolean {
     return this.model.uri.toString() === uri;
   }
@@ -199,30 +228,37 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
     this.addDispose(widget);
     return widget;
   }
-  mount(contentWidget: AIInlineContentWidget): void {
-    super.mount(contentWidget);
+
+  mountWidget(contentWidget: AIInlineContentWidget): void {
+    super.mountWidget(contentWidget);
     contentWidget.addDispose(this);
   }
+
   getPosition(): IPosition {
     return Position.lift({ lineNumber: this.selection.endLineNumber + 1, column: 1 });
   }
+
   layout(): void {
     this.inlineContentWidget?.setPositionPreference([ContentWidgetPositionPreference.BELOW]);
     super.layout();
   }
+
   onReady(exec: () => void): IDisposable {
     if (this.node) {
       return this.node!.onReady(exec.bind(this));
     }
     return Disposable.NULL;
   }
+
   show(line: number, heightInLines: number): void {
     this.node?.showByLine(line, heightInLines);
   }
+
   setValue(content: string): void {
     const modifiedModel = this.node?.getModifiedModel();
     modifiedModel?.setValue(this.formatIndentation(content));
   }
+
   getValue(): string {
     const model = this.node?.getModifiedModel();
     return model!.getValue();
@@ -240,10 +276,12 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
       this.model.pushStackElement();
     }
   }
+
   onLineCount(event: (count: number) => void): Disposable {
     this.node?.onMaxLineCount(event.bind(this));
     return this;
   }
+
   onData(data: ReplyResponse): void {
     const { message } = data;
 
@@ -258,12 +296,15 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
     disposable.dispose();
     this.node?.layout();
   }
+
   onError(error: ErrorResponse): void {
     this.node?.layout();
   }
+
   onAbort(): void {
     this.node?.layout();
   }
+
   onEnd(): void {
     this.node?.layout();
   }
@@ -296,30 +337,6 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
     this.listenNode(node);
     return node;
   }
-  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();
@@ -328,6 +345,7 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
     }
     return Position.lift({ lineNumber: 1, column: 1 });
   }
+
   handleAction(action: EResultKind): void {
     switch (action) {
       case EResultKind.ACCEPT:
@@ -343,9 +361,11 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
         break;
     }
   }
+
   onLineCount() {
     return Disposable.NULL;
   }
+
   layout(): void {
     this.inlineContentWidget?.setPositionPreference([
       ContentWidgetPositionPreference.ABOVE,
@@ -365,17 +385,52 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
           const firstRemovedWidgetLineNumber = firstRemovedWidget.getLastPosition()?.lineNumber;
           if (firstRemovedWidgetLineNumber <= lineNumber) {
             const lineHeight = this.inlineContentWidget.getLineHeight();
-            const len = firstRemovedWidget.height;
+            const len = firstRemovedWidget.height + 1;
             this.inlineContentWidget.setOffsetTop(-lineHeight * len - 4);
+          } else {
+            this.inlineContentWidget.setOffsetTop(0);
           }
         }
+      } else {
+        this.inlineContentWidget.setOffsetTop(0);
       }
     }
   }
+
+  render(): void {
+    this.inlineContentWidget?.show();
+    this.node?.rateRenderEditController();
+  }
+
+  hide(): void {
+    this.inlineContentWidget?.hide();
+    this.node?.hide();
+  }
+
+  resume(): void {
+    this.inlineContentWidget?.show();
+    this.node?.resume();
+  }
+
   onData(data: ReplyResponse): void {
     const { message } = data;
     this.node?.addLinesToDiff(this.formatIndentation(message));
   }
+
+  onAbort(): void {
+    const diffModel = this.node?.recompute(EComputerMode.default);
+    if (diffModel) {
+      /**
+       * abort 的时候，需要保留当前已经输出的内容
+       * 同时需要去掉流式过程中的 pending 区域和 activeLine
+       */
+      diffModel.activeLine = 0;
+      diffModel.pendingRange = new LineRange(0, 0);
+
+      this.node?.finallyRender(diffModel);
+    }
+  }
+
   onEnd(): void {
     const diffModel = this.node?.recompute(EComputerMode.legacy);
     if (diffModel) {