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

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

@@ -3,6 +3,7 @@ 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,
@@ -10,6 +11,7 @@ import {
   Emitter,
   Event,
   InlineChatFeatureRegistryToken,
+  localize,
   runWhenIdle,
 } from '@opensumi/ide-core-common';
 import * as monaco from '@opensumi/ide-monaco';
@@ -21,32 +23,40 @@ 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 { EInlineChatStatus, EResultKind, InlineChatService } from './inline-chat.service';
+import { AIInlineChatService, EInlineChatStatus, EResultKind } 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, onChatStatus, onResultClick } = props;
-  const aiInlineChatService: InlineChatService = useInjectable(IAIInlineChatService);
+  const { onClickActions, onClose, onInteractiveInputSend, onLayoutChange, onChatStatus, onResultClick } = props;
+  const aiInlineChatService: AIInlineChatService = 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();
     };
@@ -74,6 +84,13 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
     onClose?.();
   }, [onClose]);
 
+  const handleInteractiveInputSend = useCallback(
+    (value: string) => {
+      onInteractiveInputSend?.(value);
+    },
+    [onInteractiveInputSend],
+  );
+
   const moreOperation = useMemo(
     () =>
       inlineChatFeatureRegistry.getEditorActionMenus().map(
@@ -90,6 +107,24 @@ 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;
@@ -110,9 +145,11 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
         onClickItem={handleClickActions}
         onClose={handleClose}
         loading={isLoading}
+        loadingShowOperation={interactiveInputVisible}
+        customOperationRender={customOperationRender}
       />
     );
-  }, [operationList, moreOperation, onResultClick, status]);
+  }, [operationList, moreOperation, customOperationRender, onResultClick, status, interactiveInputVisible]);
 
   return <div className={styles.inline_chat_controller_box}>{renderContent()}</div>;
 };
@@ -124,20 +161,28 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
   @Autowired(INJECTOR_TOKEN)
   private readonly injector: Injector;
 
-  @Autowired(InlineInputService)
-  protected readonly inlineInputService: InlineInputService;
+  @Autowired(InlineChatFeatureRegistryToken)
+  private readonly inlineChatFeatureRegistry: InlineChatFeatureRegistry;
 
   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;
@@ -151,6 +196,13 @@ 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) {
@@ -166,11 +218,8 @@ export class AIInlineContentWidget extends ReactInlineContentWidget {
   }
 
   public clickActionId(actionId: string, source: string): void {
-    if (actionId === InteractiveInputModel.ID && this.options?.selection) {
-      // 隐藏当前的 inline chat widget
-      this.hide();
-      // 显示 inline input widget
-      this.inlineInputService.visibleBySelection(this.options.selection);
+    if (actionId === this.inlineChatFeatureRegistry.getInteractiveInputId()) {
+      this.inlineChatFeatureRegistry._onChatClick.fire();
       return;
     }
 
@@ -183,6 +232,14 @@ 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,7 +3,6 @@ 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';
@@ -44,13 +43,10 @@ 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) {
@@ -110,7 +106,11 @@ export abstract class BaseInlineDiffPreviewer<N extends IInlineDiffPreviewerNode
     return this.node;
   }
 
-  public mountWidget(contentWidget: AIInlineContentWidget): void {
+  public createNodeSnapshot(): N | undefined {
+    return this.node;
+  }
+
+  public mount(contentWidget: AIInlineContentWidget): void {
     this.inlineContentWidget = contentWidget;
   }
 
@@ -156,25 +156,20 @@ 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
   }
@@ -183,30 +178,6 @@ 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;
   }
@@ -228,37 +199,30 @@ export class SideBySideInlineDiffWidget extends BaseInlineDiffPreviewer<InlineDi
     this.addDispose(widget);
     return widget;
   }
-
-  mountWidget(contentWidget: AIInlineContentWidget): void {
-    super.mountWidget(contentWidget);
+  mount(contentWidget: AIInlineContentWidget): void {
+    super.mount(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();
@@ -276,12 +240,10 @@ 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;
 
@@ -296,15 +258,12 @@ 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();
   }
@@ -337,6 +296,30 @@ 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();
@@ -345,7 +328,6 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
     }
     return Position.lift({ lineNumber: 1, column: 1 });
   }
-
   handleAction(action: EResultKind): void {
     switch (action) {
       case EResultKind.ACCEPT:
@@ -361,11 +343,9 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
         break;
     }
   }
-
   onLineCount() {
     return Disposable.NULL;
   }
-
   layout(): void {
     this.inlineContentWidget?.setPositionPreference([
       ContentWidgetPositionPreference.ABOVE,
@@ -385,52 +365,17 @@ export class LiveInlineDiffPreviewer extends BaseInlineDiffPreviewer<InlineStrea
           const firstRemovedWidgetLineNumber = firstRemovedWidget.getLastPosition()?.lineNumber;
           if (firstRemovedWidgetLineNumber <= lineNumber) {
             const lineHeight = this.inlineContentWidget.getLineHeight();
-            const len = firstRemovedWidget.height + 1;
+            const len = firstRemovedWidget.height;
             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) {