@opensumi/ide-ai-native 3.7.1-next-1739781685.0 → 3.7.1

package/src/browser/types.ts

@@ -13,7 +13,7 @@ import {
   MaybePromise,
   MergeConflictEditorMode,
 } from '@opensumi/ide-core-common';
-import { ICodeEditor, IRange, ISelection, ITextModel, NewSymbolNamesProvider, Position } from '@opensumi/ide-monaco';
+import { ICodeEditor, IRange, ITextModel, NewSymbolNamesProvider, Position } from '@opensumi/ide-monaco';
 import { SumiReadableStream } from '@opensumi/ide-utils/lib/stream';
 import { IMarker } from '@opensumi/monaco-editor-core/esm/vs/platform/markers/common/markers';
 
@@ -42,11 +42,9 @@ interface IBaseInlineChatHandler<T extends any[]> {
   providerDiffPreviewStrategy?: (...args: T) => MaybePromise<ChatResponse | InlineChatController>;
 }
 
-export type IEditorInlineChatHandler = IBaseInlineChatHandler<
-  [editor: ICodeEditor, selection: ISelection, token: CancellationToken]
->;
+export type IEditorInlineChatHandler = IBaseInlineChatHandler<[editor: ICodeEditor, token: CancellationToken]>;
 export type IInteractiveInputHandler = IBaseInlineChatHandler<
-  [editor: ICodeEditor, selection: ISelection, value: string, token: CancellationToken]
+  [editor: ICodeEditor, value: string, token: CancellationToken]
 >;
 
 export enum ERunStrategy {

package/src/browser/widget/inline-chat/inline-chat-editor.controller.ts

@@ -15,7 +15,6 @@ import {
   Disposable,
   ErrorResponse,
   Event,
-  FRAME_THREE,
   IAIReporter,
   IDisposable,
   ILogServiceClient,
@@ -31,14 +30,14 @@ import * as monaco from '@opensumi/ide-monaco';
 import { ICodeEditor } from '@opensumi/ide-monaco';
 import { monacoApi } from '@opensumi/ide-monaco/lib/browser/monaco-api';
 
-import { AINativeContextKey } from '../../ai-core.contextkeys';
 import { BaseAIMonacoEditorController } from '../../contrib/base';
 import { CodeActionService } from '../../contrib/code-action/code-action.service';
+import { ERunStrategy } from '../../types';
 import { InlineDiffController } from '../inline-diff/inline-diff.controller';
 
 import { InlineChatController } from './inline-chat-controller';
 import { InlineChatFeatureRegistry } from './inline-chat.feature.registry';
-import { EInlineChatStatus, EResultKind, InlineChatService } from './inline-chat.service';
+import { AIInlineChatService, EInlineChatStatus, EResultKind } from './inline-chat.service';
 import { AIInlineContentWidget } from './inline-content-widget';
 
 export class InlineChatEditorController extends BaseAIMonacoEditorController {
@@ -52,7 +51,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
     return this.injector.get(AINativeConfigService);
   }
 
-  private get aiInlineChatService(): InlineChatService {
+  private get aiInlineChatService(): AIInlineChatService {
     return this.injector.get(IAIInlineChatService);
   }
 
@@ -87,13 +86,11 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
   private aiInlineContentWidget: AIInlineContentWidget;
   private aiInlineChatDisposable: Disposable = new Disposable();
   private aiInlineChatOperationDisposable: Disposable = new Disposable();
-  private aiNativeContextKey: AINativeContextKey;
   private inlineChatInUsing = false;
 
   private inlineDiffController: InlineDiffController;
 
   mount(): IDisposable {
-    this.aiNativeContextKey = this.injector.get(AINativeContextKey, [this.monacoEditor.contextKeyService]);
     this.inlineDiffController = InlineDiffController.get(this.monacoEditor)!;
 
     if (!this.monacoEditor) {
@@ -181,7 +178,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
       Event.debounce(
         Event.any<any>(this.monacoEditor.onDidChangeCursorSelection, this.monacoEditor.onMouseUp),
         (_, e) => e,
-        FRAME_THREE,
+        100,
       )(() => {
         if (!prefInlineChatAutoVisible || !needShowInlineChat) {
           return;
@@ -200,7 +197,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
     return this.featureDisposable;
   }
 
-  public disposeAllWidget() {
+  private disposeAllWidget() {
     [this.aiInlineContentWidget, this.aiInlineChatDisposable, this.aiInlineChatOperationDisposable].forEach(
       (widget) => {
         widget?.dispose();
@@ -227,21 +224,9 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
       return;
     }
 
-    // 如果 inline input 正在展示，则不展示 inline chat
-    const isInlineInputVisible = this.aiNativeContextKey.inlineInputWidgetIsVisible.get();
-    if (isInlineInputVisible) {
-      return;
-    }
-
-    const isInlineStreaming = this.aiNativeContextKey.inlineInputWidgetIsStreaming.get();
-    if (isInlineStreaming) {
-      return;
-    }
-
     if (!this.aiNativeConfigService.capabilities.supportsInlineChat) {
       return;
     }
-
     if (this.inlineChatInUsing) {
       return;
     }
@@ -258,6 +243,12 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
 
     this.showInlineContentWidget(monacoEditor, selection);
 
+    this.aiInlineChatDisposable.addDispose(
+      this.inlineChatFeatureRegistry.onChatClick(() => {
+        this.aiInlineChatService.launchInputVisible(true);
+      }),
+    );
+
     this.aiInlineChatDisposable.addDispose(
       this.aiInlineContentWidget.onActionClick(({ actionId, source }) => {
         const handler = this.inlineChatFeatureRegistry.getEditorHandler(actionId);
@@ -280,7 +271,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
             return undefined;
           }
 
-          return strategy.bind(this, monacoEditor, crossSelection, this.token);
+          return strategy.bind(this, monacoEditor, this.token);
         };
 
         this.runAction({
@@ -297,7 +288,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
             });
             return relationId;
           },
-          execute: handler.execute ? handler.execute!.bind(this, monacoEditor, crossSelection, this.token) : undefined,
+          execute: handler.execute ? handler.execute!.bind(this, monacoEditor, this.token) : undefined,
           providerPreview: previewer(),
           extraData: {
             actionSource: source === 'codeAction' ? ActionSourceEnum.CodeAction : ActionSourceEnum.InlineChat,
@@ -306,6 +297,49 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
         });
       }),
     );
+
+    this.aiInlineChatDisposable.addDispose(
+      this.aiInlineContentWidget.onInteractiveInputValue(async (value) => {
+        const handler = this.inlineChatFeatureRegistry.getInteractiveInputHandler();
+
+        if (!handler) {
+          return;
+        }
+
+        const strategy = await this.inlineChatFeatureRegistry.getInteractiveInputStrategyHandler()(monacoEditor, value);
+
+        const crossSelection = this.getCrossSelection(monacoEditor);
+        if (!crossSelection) {
+          return;
+        }
+
+        this.runAction({
+          monacoEditor,
+          crossSelection,
+          reporterFn: () => {
+            const relationId = this.aiReporter.start(AIServiceType.InlineChatInput, {
+              message: value,
+              type: AIServiceType.InlineChatInput,
+              source: 'input',
+              actionSource: ActionSourceEnum.InlineChatInput,
+            });
+            return relationId;
+          },
+          execute:
+            handler.execute && strategy === ERunStrategy.EXECUTE
+              ? handler.execute!.bind(this, monacoEditor, value, this.token)
+              : undefined,
+          providerPreview:
+            handler.providePreviewStrategy && strategy === ERunStrategy.PREVIEW
+              ? handler.providePreviewStrategy.bind(this, monacoEditor, value, this.token)
+              : undefined,
+          extraData: {
+            actionSource: ActionSourceEnum.InlineChatInput,
+            actionType: strategy,
+          },
+        });
+      }),
+    );
   }
 
   private getCrossSelection(monacoEditor: monaco.ICodeEditor) {
@@ -446,7 +480,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
     }
 
     const diffPreviewer = this.inlineDiffController.showPreviewerByStream(monacoEditor, options);
-    diffPreviewer.mountWidget(this.aiInlineContentWidget);
+    diffPreviewer.mount(this.aiInlineContentWidget);
   }
 
   private ensureInlineChatVisible(monacoEditor: monaco.ICodeEditor, crossSelection: monaco.Selection) {
@@ -472,6 +506,7 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
     const { monacoEditor, strategy, crossSelection, relationId, isRetry, actionType, actionSource } = params;
     const model = monacoEditor.getModel();
 
+    this.inlineDiffController.destroyPreviewer(model!.uri.toString());
     this.aiInlineChatOperationDisposable.dispose();
 
     this.ensureInlineChatVisible(monacoEditor, crossSelection);
@@ -508,6 +543,12 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
       return;
     }
 
+    this.visibleDiffWidget({
+      monacoEditor,
+      options: { crossSelection, chatResponse: response },
+      reportInfo: { relationId, startTime, isRetry, actionType, actionSource },
+    });
+
     this.aiInlineChatOperationDisposable.addDispose([
       this.aiInlineContentWidget.onResultClick((kind: EResultKind) => {
         const modifyContent = this.inlineDiffController.getModifyContent();
@@ -573,12 +614,6 @@ export class InlineChatEditorController extends BaseAIMonacoEditorController {
         });
       }),
     ]);
-
-    this.visibleDiffWidget({
-      monacoEditor,
-      options: { crossSelection, chatResponse: response },
-      reportInfo: { relationId, startTime, isRetry, actionType, actionSource },
-    });
   }
 
   public async runAction(params: {

package/src/browser/widget/inline-chat/inline-chat.feature.registry.ts

@@ -2,18 +2,48 @@ import { Autowired, Injectable } from '@opensumi/di';
 import { KeybindingRegistry, Logger } from '@opensumi/ide-core-browser';
 import { AI_INLINE_CHAT_INTERACTIVE_INPUT_VISIBLE } from '@opensumi/ide-core-browser/lib/ai-native/command';
 import { AIActionItem } from '@opensumi/ide-core-browser/lib/components/ai-native';
-import { Disposable, Event, IDisposable, formatLocalize, isUndefined } from '@opensumi/ide-core-common';
+import { InteractiveInput } from '@opensumi/ide-core-browser/lib/components/ai-native/interactive-input/index';
+import { Disposable, Emitter, Event, IDisposable, MaybePromise, isUndefined, uuid } from '@opensumi/ide-core-common';
+import { ICodeEditor } from '@opensumi/ide-monaco';
 
 import { CodeActionService } from '../../contrib/code-action/code-action.service';
 import {
+  ERunStrategy,
   IEditorInlineChatHandler,
   IInlineChatFeatureRegistry,
   IInteractiveInputHandler,
   IInteractiveInputRunStrategy,
   ITerminalInlineChatHandler,
 } from '../../types';
-import { InlineInputService } from '../inline-input/inline-input.service';
-import { InteractiveInputModel } from '../inline-input/model';
+
+type TRunStrategyFn = (editor: ICodeEditor, value: string) => MaybePromise<ERunStrategy>;
+
+class InteractiveInputModel {
+  static ID: string = `${InteractiveInput.displayName}:${uuid(4)}`;
+
+  private _handler: IInteractiveInputHandler | undefined;
+  private _strategyHandler: TRunStrategyFn;
+
+  public setHandler(h: IInteractiveInputHandler): void {
+    this._handler = h;
+  }
+
+  public handler(): IInteractiveInputHandler | undefined {
+    return this._handler;
+  }
+
+  public setStrategyHandler(fn: TRunStrategyFn): void {
+    this._strategyHandler = fn;
+  }
+
+  public strategyHandler(): TRunStrategyFn {
+    return this._strategyHandler;
+  }
+
+  public dispose(): void {
+    this._handler = undefined;
+  }
+}
 
 @Injectable()
 export class InlineChatFeatureRegistry extends Disposable implements IInlineChatFeatureRegistry {
@@ -23,9 +53,6 @@ export class InlineChatFeatureRegistry extends Disposable implements IInlineChat
   @Autowired(CodeActionService)
   private readonly codeActionService: CodeActionService;
 
-  @Autowired(InlineInputService)
-  private readonly inlineInputService: InlineInputService;
-
   @Autowired(KeybindingRegistry)
   private readonly keybindingRegistry: KeybindingRegistry;
 
@@ -33,6 +60,11 @@ export class InlineChatFeatureRegistry extends Disposable implements IInlineChat
   private editorHandlerMap: Map<string, IEditorInlineChatHandler> = new Map();
   private terminalHandlerMap: Map<string, ITerminalInlineChatHandler> = new Map();
 
+  private interactiveInputModel: InteractiveInputModel = new InteractiveInputModel();
+
+  public readonly _onChatClick = new Emitter<void>();
+  public readonly onChatClick: Event<void> = this._onChatClick.event;
+
   override dispose() {
     super.dispose();
     this.actionsMap.clear();
@@ -40,6 +72,10 @@ export class InlineChatFeatureRegistry extends Disposable implements IInlineChat
     this.terminalHandlerMap.clear();
   }
 
+  private updateActions(id: string, operational: AIActionItem): void {
+    this.actionsMap.set(id, operational);
+  }
+
   private collectActions(operational: AIActionItem): boolean {
     const { id } = operational;
 
@@ -66,6 +102,10 @@ export class InlineChatFeatureRegistry extends Disposable implements IInlineChat
     this.codeActionService.deleteCodeActionById(operational.id);
   }
 
+  public getInteractiveInputId(): string {
+    return InteractiveInputModel.ID;
+  }
+
   public registerEditorInlineChat(operational: AIActionItem, handler: IEditorInlineChatHandler): IDisposable {
     const isCollect = this.collectActions(operational);
 
@@ -111,23 +151,29 @@ export class InlineChatFeatureRegistry extends Disposable implements IInlineChat
     runStrategy: IInteractiveInputRunStrategy,
     handler: IInteractiveInputHandler,
   ): IDisposable {
-    const doCollect = () => {
-      const keybindingStr = String(this.inlineInputService.getSequenceKeyString());
-      if (!keybindingStr) {
-        return;
-      }
+    this.interactiveInputModel.setHandler(handler);
 
-      const operational: AIActionItem = {
-        id: InteractiveInputModel.ID,
-        name: formatLocalize('aiNative.inline.chat.operate.chat.title', keybindingStr.toLocaleUpperCase()),
-        renderType: 'button',
-        order: Number.MAX_SAFE_INTEGER,
-      };
-
-      if (this.actionsMap.has(operational.id)) {
-        this.actionsMap.set(operational.id, operational);
-      } else {
-        this.collectActions(operational);
+    if (runStrategy.handleStrategy) {
+      this.interactiveInputModel.setStrategyHandler(runStrategy.handleStrategy);
+    } else {
+      this.interactiveInputModel.setStrategyHandler(() => runStrategy.strategy || ERunStrategy.EXECUTE);
+    }
+
+    const doCollect = () => {
+      const keybindingStr = String(this.getSequenceKeyString());
+      if (keybindingStr) {
+        const operational: AIActionItem = {
+          id: InteractiveInputModel.ID,
+          name: `Chat(${keybindingStr.toLocaleUpperCase()})`,
+          renderType: 'button',
+          order: Number.MAX_SAFE_INTEGER,
+        };
+
+        if (this.actionsMap.has(operational.id)) {
+          this.updateActions(operational.id, operational);
+        } else {
+          this.collectActions(operational);
+        }
       }
     };
 
@@ -139,7 +185,28 @@ export class InlineChatFeatureRegistry extends Disposable implements IInlineChat
 
     doCollect();
 
-    return this.inlineInputService.registerInlineInput(runStrategy, handler);
+    return {
+      dispose: () => {
+        this.interactiveInputModel.dispose();
+      },
+    };
+  }
+
+  private getSequenceKeyString() {
+    const keybindings = this.keybindingRegistry.getKeybindingsForCommand(AI_INLINE_CHAT_INTERACTIVE_INPUT_VISIBLE.id);
+    const resolved = keybindings[0]?.resolved;
+    if (!resolved) {
+      return '';
+    }
+    return this.keybindingRegistry.acceleratorForSequence(resolved, '+');
+  }
+
+  public getInteractiveInputHandler(): IInteractiveInputHandler | undefined {
+    return this.interactiveInputModel.handler();
+  }
+
+  public getInteractiveInputStrategyHandler(): TRunStrategyFn {
+    return this.interactiveInputModel.strategyHandler();
   }
 
   public getEditorActionButtons(): AIActionItem[] {

package/src/browser/widget/inline-chat/inline-chat.service.ts

@@ -1,11 +1,19 @@
 import { Injectable } from '@opensumi/di';
 import { IAIInlineChatService } from '@opensumi/ide-core-browser';
-import { Emitter, Event } from '@opensumi/ide-core-common';
+import { Emitter, Event, runWhenIdle } from '@opensumi/ide-core-common';
 
 export { EInlineChatStatus, EResultKind } from '../../../common';
 
 @Injectable({ multiple: false })
-export class InlineChatService implements IAIInlineChatService {
+export class AIInlineChatService implements IAIInlineChatService {
+  private _interactiveInputVisible: boolean = false;
+  public get interactiveInputVisible(): boolean {
+    return this._interactiveInputVisible;
+  }
+
+  public readonly _onInteractiveInputVisible = new Emitter<boolean>();
+  public readonly onInteractiveInputVisible: Event<boolean> = this._onInteractiveInputVisible.event;
+
   public readonly _onInlineChatVisible = new Emitter<boolean>();
   public readonly onInlineChatVisible: Event<boolean> = this._onInlineChatVisible.event;
 
@@ -15,4 +23,11 @@ export class InlineChatService implements IAIInlineChatService {
   public fireThumbsEvent(isThumbsUp: boolean) {
     this._onThumbs.fire(isThumbsUp);
   }
+
+  public launchInputVisible(v: boolean) {
+    return runWhenIdle(() => {
+      this._interactiveInputVisible = v;
+      this._onInteractiveInputVisible.fire(v);
+    });
+  }
 }

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,38 @@ 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>(false);
   useEffect(() => {
     const dis = new Disposable();
     dis.addDispose(onChatStatus((s) => setStatus(s)));
 
+    dis.addDispose(
+      aiInlineChatService.onInteractiveInputVisible((v) => {
+        setInteractiveInputVisible(v);
+      }),
+    );
+
     return () => {
       dis.dispose();
     };
@@ -74,6 +82,13 @@ const AIInlineChatController = (props: IAIInlineChatControllerProps) => {
     onClose?.();
   }, [onClose]);
 
+  const handleInteractiveInputSend = useCallback(
+    (value: string) => {
+      onInteractiveInputSend?.(value);
+    },
+    [onInteractiveInputSend],
+  );
+
   const moreOperation = useMemo(
     () =>
       inlineChatFeatureRegistry.getEditorActionMenus().map(
@@ -90,6 +105,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 +143,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 +159,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 +194,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 +216,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 +230,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);
         }}