@opensumi/ide-core-browser 3.0.4 → 3.0.5-next-1717466130.0

package/src/application/runtime/base-socket.ts

@@ -1,9 +1,36 @@
+import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
+import { WSChannel } from '@opensumi/ide-connection';
+import { WSChannelHandler } from '@opensumi/ide-connection/lib/browser';
 import { IRuntimeSocketConnection } from '@opensumi/ide-connection/lib/common/connection';
+import { IReporterService, getDebugLogger } from '@opensumi/ide-core-common';
 
+import { ModuleConstructor, createConnectionService } from '../../bootstrap';
+import { AppConfig } from '../../react-providers';
+
+const initialLogger = getDebugLogger();
+
+@Injectable({ multiple: true })
 export abstract class BaseConnectionHelper {
+  @Autowired(INJECTOR_TOKEN)
+  protected injector: Injector;
+
+  @Autowired(AppConfig)
+  protected appConfig: AppConfig;
+
+  @Autowired(IReporterService)
+  reporterService: IReporterService;
+
   abstract getDefaultClientId(): string;
 
   abstract createConnection(): IRuntimeSocketConnection;
-}
 
-export const CONNECTION_HELPER_TOKEN = Symbol('CONNECTION_HELPER_TOKEN');
+  async createRPCServiceChannel(modules: ModuleConstructor[]): Promise<WSChannel> {
+    const connection: IRuntimeSocketConnection<Uint8Array> = this.createConnection();
+    const clientId: string = this.appConfig.clientId ?? this.getDefaultClientId();
+    const channelHandler = new WSChannelHandler(connection, clientId, {
+      logger: initialLogger,
+    });
+
+    return createConnectionService(this.injector, modules, channelHandler);
+  }
+}

package/src/application/runtime/index.ts

@@ -1,4 +1,42 @@
+import { Injector } from '@opensumi/di';
+
+import { AppConfig } from '../../react-providers';
+
+import { BaseConnectionHelper } from './base-socket';
+import { WebConnectionHelper } from './browser/socket';
+import { ESupportRuntime } from './constants';
+import { ElectronConnectionHelper } from './electron-renderer/socket';
+
 export * from './browser/socket';
 export * from './electron-renderer/socket';
+export * from './base-socket';
 
 export * from './constants';
+
+export type ConnectionHelperFactory = ReturnType<typeof ConnectionHelperFactory>;
+export function ConnectionHelperFactory(injector: Injector) {
+  return (type: string) => {
+    const appConfig = injector.get(AppConfig) as AppConfig;
+
+    let connectionHelper: BaseConnectionHelper;
+
+    switch (type) {
+      case ESupportRuntime.Electron:
+        connectionHelper = injector.get(ElectronConnectionHelper);
+        break;
+      case ESupportRuntime.Web:
+        connectionHelper = injector.get(WebConnectionHelper, [
+          {
+            connectionPath: appConfig.connectionPath,
+            connectionProtocols: appConfig.connectionProtocols,
+          },
+        ]);
+        break;
+      default: {
+        throw new Error(`Unknown backend type: ${type}`);
+      }
+    }
+
+    return connectionHelper;
+  };
+}

package/src/bootstrap/app.interface.ts

@@ -1,5 +1,4 @@
 import { ConstructorOf } from '@opensumi/di';
-import { UrlProvider } from '@opensumi/ide-core-common';
 
 import { BrowserModule } from '../browser-module';
 import { ClientAppContribution } from '../common/common.define';
@@ -31,10 +30,7 @@ export interface IClientAppOpts extends Partial<AppConfig> {
   contributions?: ContributionConstructor[];
   // 前端模块实例声明
   modulesInstances?: BrowserModule[];
-  // 自定义前后端通信路径
-  connectionPath?: UrlProvider;
-  // 支持的通信协议类型
-  connectionProtocols?: string[];
+
   // 定义用于 OpenSumi 视图插件内的图标集合
   iconStyleSheets?: IconInfo[];
   /**

package/src/bootstrap/app.ts

@@ -6,7 +6,6 @@ import '@opensumi/monaco-editor-core/esm/vs/editor/editor.main';
 
 import { Injector } from '@opensumi/di';
 import { WSChannelHandler } from '@opensumi/ide-connection/lib/browser';
-import { IRuntimeSocketConnection } from '@opensumi/ide-connection/lib/common/connection';
 import {
   AppLifeCycleServiceToken,
   CommandRegistry,
@@ -29,7 +28,6 @@ import {
   StorageResolverContribution,
   SupportLogNamespace,
   URI,
-  UrlProvider,
   asExtensionCandidate,
   createContributionProvider,
   getDebugLogger,
@@ -45,8 +43,8 @@ import {
 import { IElectronMainLifeCycleService } from '@opensumi/ide-core-common/lib/electron';
 
 import { ClientAppStateService } from '../application';
-import { ESupportRuntime, ElectronConnectionHelper, WebConnectionHelper } from '../application/runtime';
-import { CONNECTION_HELPER_TOKEN } from '../application/runtime/base-socket';
+import { ConnectionHelperFactory, ESupportRuntime } from '../application/runtime';
+import { BaseConnectionHelper } from '../application/runtime/base-socket';
 import { BrowserRuntime } from '../application/runtime/browser';
 import { ElectronRendererRuntime } from '../application/runtime/electron-renderer';
 import { RendererRuntime } from '../application/runtime/types';
@@ -74,7 +72,7 @@ import { electronEnv } from '../utils';
 
 import { IClientAppOpts, IPreferences, IconInfo, IconMap, LayoutConfig, ModuleConstructor } from './app.interface';
 import { IAppRenderer, renderClientApp } from './app.view';
-import { bindConnectionServiceDeprecated, createConnectionService } from './connection';
+import { bindConnectionServiceDeprecated } from './connection';
 import { injectInnerProviders } from './inner-providers';
 
 import './polyfills';
@@ -93,7 +91,6 @@ export class ClientApp implements IClientApp, IDisposable {
   public runtime: ElectronRendererRuntime | BrowserRuntime;
 
   private logger: ILogServiceClient;
-  private connectionPath: UrlProvider;
   private keybindingRegistry: KeybindingRegistry;
   private keybindingService: KeybindingService;
   private modules: ModuleConstructor[];
@@ -106,7 +103,6 @@ export class ClientApp implements IClientApp, IDisposable {
   constructor(protected opts: IClientAppOpts) {
     const {
       modules,
-      connectionPath,
       iconStyleSheets,
       useCdnIcon,
       editorBackgroundImage,
@@ -145,6 +141,8 @@ export class ClientApp implements IClientApp, IDisposable {
       rpcMessageTimeout: opts.rpcMessageTimeout || -1,
     };
 
+    this.config.connectionPath = opts.connectionPath || `${this.config.wsPath}/service`;
+
     const layoutViewSizeConfig = this.injector.get(LayoutViewSizeConfig);
     layoutViewSizeConfig.init(opts.layoutViewSize);
     this.config.layoutViewSize = layoutViewSizeConfig;
@@ -176,7 +174,6 @@ export class ClientApp implements IClientApp, IDisposable {
 
     this.config = this.runtime.mergeAppConfig(this.config);
 
-    this.connectionPath = connectionPath || `${this.config.wsPath}/service`;
     this.initBaseProvider();
     this.initFields();
     this.appendIconStyleSheets(iconStyleSheets, useCdnIcon);
@@ -252,42 +249,13 @@ export class ClientApp implements IClientApp, IDisposable {
   }
 
   protected async createConnection(type: `${ESupportRuntime}`) {
-    let connectionHelper: ElectronConnectionHelper | WebConnectionHelper;
-
-    switch (type) {
-      case ESupportRuntime.Electron:
-        connectionHelper = this.injector.get(ElectronConnectionHelper);
-        break;
-      case ESupportRuntime.Web:
-        connectionHelper = this.injector.get(WebConnectionHelper, [
-          {
-            connectionPath: this.connectionPath,
-            connectionProtocols: this.opts.connectionProtocols,
-          },
-        ]);
-        break;
-      default:
-        throw new Error(`Unknown backend type: ${type}`);
-    }
-
-    this.injector.addProviders({
-      token: CONNECTION_HELPER_TOKEN,
-      useValue: connectionHelper,
+    const factory = this.injector.get(ConnectionHelperFactory) as ConnectionHelperFactory;
+    const connectionHelper: BaseConnectionHelper = factory(type);
+    const channel = await connectionHelper.createRPCServiceChannel(this.modules);
+    channel.onReopen(() => {
+      this.onReconnectContributions();
     });
 
-    const connection: IRuntimeSocketConnection<Uint8Array> = connectionHelper.createConnection();
-    const clientId: string = this.config.clientId ?? connectionHelper.getDefaultClientId();
-
-    await createConnectionService(
-      this.injector,
-      this.modules,
-      () => {
-        this.onReconnectContributions();
-      },
-      connection,
-      clientId,
-    );
-
     // create logger after connection established
     this.logger = this.getLogger();
     this.injector.get(WSChannelHandler).replaceLogger(this.logger);

package/src/bootstrap/connection.ts

@@ -1,7 +1,7 @@
 import { Injector, Provider } from '@opensumi/di';
-import { RPCServiceCenter, WSChannel, initRPCService } from '@opensumi/ide-connection';
+import { RPCServiceCenter, initRPCService } from '@opensumi/ide-connection';
 import { WSChannelHandler } from '@opensumi/ide-connection/lib/browser';
-import { IRuntimeSocketConnection } from '@opensumi/ide-connection/lib/common/connection';
+import { ISumiConnectionOptions } from '@opensumi/ide-connection/lib/common/rpc/connection';
 import { RPCServiceChannelPath } from '@opensumi/ide-connection/lib/common/server-handler';
 import {
   BasicModule,
@@ -10,7 +10,6 @@ import {
   BrowserConnectionOpenEvent,
   IEventBus,
   IReporterService,
-  getDebugLogger,
 } from '@opensumi/ide-core-common';
 import { BackService } from '@opensumi/ide-core-common/lib/module';
 
@@ -20,22 +19,18 @@ import { ModuleConstructor } from './app.interface';
 
 import type { MessageConnection } from '@opensumi/vscode-jsonrpc/lib/common/connection';
 
-const initialLogger = getDebugLogger();
-
 export async function createConnectionService(
   injector: Injector,
   modules: ModuleConstructor[],
-  onReconnect: () => void,
-  connection: IRuntimeSocketConnection<Uint8Array>,
-  clientId: string,
+  channelHandler: WSChannelHandler,
+  options: ISumiConnectionOptions = {},
 ) {
   const reporterService: IReporterService = injector.get(IReporterService);
+  channelHandler.setReporter(reporterService);
+
   const eventBus = injector.get(IEventBus);
   const stateService = injector.get(ClientAppStateService);
 
-  const channelHandler = new WSChannelHandler(connection, initialLogger, clientId);
-  channelHandler.setReporter(reporterService);
-
   const onOpen = () => {
     stateService.reachedState('core_module_initialized').then(() => {
       eventBus.fire(new BrowserConnectionOpenEvent());
@@ -71,16 +66,12 @@ export async function createConnectionService(
   });
 
   const channel = await channelHandler.openChannel(RPCServiceChannelPath);
-  channel.onReopen(() => onReconnect());
-
-  bindConnectionService(injector, modules, channel);
-}
 
-export function bindConnectionService(injector: Injector, modules: ModuleConstructor[], channel: WSChannel) {
   const clientCenter = new RPCServiceCenter();
-  const disposable = clientCenter.setSumiConnection(channel.createSumiConnection());
+  clientCenter.setSumiConnection(channel.createSumiConnection(options));
   initConnectionService(injector, modules, clientCenter);
-  return disposable;
+
+  return channel;
 }
 
 /**

package/src/bootstrap/inner-providers.ts

@@ -38,6 +38,7 @@ import {
 import { AIReporter } from '../ai-native/ai-reporter';
 import { ClientAppStateService } from '../application/application-state-service';
 import { ApplicationService } from '../application/application.service';
+import { ConnectionHelperFactory } from '../application/runtime';
 import { AuthenticationService } from '../authentication/authentication.service';
 import { ClientAppContribution } from '../common';
 import { ISplitPanelService, SplitPanelService } from '../components/layout/split-panel.service';
@@ -264,6 +265,10 @@ export function injectInnerProviders(injector: Injector) {
       token: IDesignStyleService,
       useClass: DesignStyleService,
     },
+    {
+      token: ConnectionHelperFactory,
+      useFactory: ConnectionHelperFactory,
+    },
   ];
   injector.addProviders(...providers);
 }

package/src/components/ai-native/ai-action/index.module.less

@@ -1,45 +1,73 @@
-.ai_action {
+@default_height: 24px;
+
+.ai_action_wrapper {
   display: flex;
   align-items: center;
-  height: 24px;
-  padding: 1px 8px;
+  padding: 0px 8px;
   background-color: var(--kt-modal-background);
   border-radius: 6px;
   box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
     0px 6px 16px 0px var(--design-boxShadow-tertiary);
   font-size: 12px;
 
-  .ai_action_icon {
-    &:hover {
-      background: var(--design-block-hoverBackground);
+  &.loading {
+    padding: 0px;
+
+    .close_container {
+      padding-right: 8px;
     }
   }
 
-  span {
-    color: var(--design-text-foreground);
+  &.loading_show_operation {
+    padding: 0px 8px;
+
+    .close_container {
+      padding-right: 0;
+    }
+
+    .operate_container .loading_mask {
+      cursor: not-allowed;
+      position: absolute;
+      z-index: 1;
+      left: 18px;
+      right: 0;
+      height: 100%;
+      background-color: var(--kt-input-disableBackground);
+    }
   }
 
-  .logo-container {
-    .avatar {
-      width: 14px;
-      height: 14px;
-      background-image: radial-gradient(circle at 21% 21%, #00f6ff 0%, #9c03ff 95%);
-      border-radius: 12px;
+  .stable_container {
+    display: flex;
+    align-items: center;
 
-      img {
-        height: 10px;
-      }
+    .loading_icon {
+      width: @default_height;
+      height: @default_height;
+      line-height: @default_height;
     }
   }
 
-  .operate_container,
   .close_container {
-    display: flex;
+    display: none;
     align-items: center;
-    height: 100%;
+  }
+
+  .ai_action_icon {
+    &:hover {
+      background: var(--design-block-hoverBackground);
+    }
+  }
+
+  span {
+    color: var(--design-text-foreground);
   }
 
   .operate_container {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    position: relative;
+
     .operate_btn {
       padding: 3px 4px;
       border-radius: 4px;
@@ -50,18 +78,24 @@
       padding: 0 6px;
       border-radius: 4px;
     }
+  }
 
+  &:hover {
     .close_container {
-      display: none;
+      display: flex;
     }
   }
 
-  &:hover {
-    .operate_container {
-      .close_container {
-        display: flex;
-      }
-    }
+  .custom_operation_wrapper {
+    padding: 4px 0px;
+    box-sizing: content-box;
+  }
+
+  .default_operation_wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-left: -4px;
   }
 }
 

package/src/components/ai-native/ai-action/index.tsx

@@ -1,12 +1,14 @@
+import cls from 'classnames';
 import React, { useCallback } from 'react';
 
-import { AIInlineChatContentWidgetId } from '@opensumi/ide-core-common';
+import { AIInlineChatContentWidgetId, localize } from '@opensumi/ide-core-common';
 
 import { MenuNode } from '../../../menu/next/base';
 import { createLayoutEventType } from '../../../monaco';
 import { useChange, useHover } from '../../../react-hooks';
 import { AILogoAvatar, EnhanceIcon, EnhanceIconWithCtxMenu } from '../enhanceIcon';
 import { LineVertical } from '../line-vertical';
+import { Loading } from '../loading';
 import { EnhancePopover } from '../popover';
 
 import styles from './index.module.less';
@@ -53,6 +55,12 @@ export interface AIActionProps {
   showClose?: boolean;
   onClickItem: (id: string) => void;
   onClose?: () => void;
+  loading?: boolean;
+  customOperationRender?: React.ReactNode;
+  /**
+   * loading 的时候是否继续显示 operation
+   */
+  loadingShowOperation?: boolean;
 }
 
 const layoutEventType = createLayoutEventType(AIInlineChatContentWidgetId);
@@ -61,28 +69,46 @@ const layoutEvent = new CustomEvent(layoutEventType, {
 });
 
 export const AIAction = (props: AIActionProps) => {
-  const { operationList, moreOperation, showClose, onClickItem, onClose } = props;
+  const {
+    operationList,
+    moreOperation,
+    showClose = true,
+    onClickItem,
+    onClose,
+    customOperationRender,
+    loading,
+    loadingShowOperation = false,
+  } = props;
 
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [ref, isHovered] = useHover<HTMLDivElement>();
 
   const handleClose = useCallback(() => {
-    if (onClose) {
-      onClose();
-    }
+    onClose?.();
   }, [onClose]);
 
   useChange(isHovered, () => {
-    if (containerRef.current) {
-      containerRef.current.dispatchEvent(layoutEvent);
-    }
+    containerRef.current?.dispatchEvent(layoutEvent);
   });
 
-  return (
-    <div ref={containerRef} className={styles.ai_action}>
-      <AILogoAvatar className={styles.ai_action_icon} />
-      <LineVertical height='60%' margin='0px 4px 0 8px' />
-      <div ref={ref} className={styles.operate_container}>
+  /**
+   * loading 的遮罩
+   */
+  const renderLoadingMask = useCallback(() => {
+    if (loading && loadingShowOperation) {
+      return <div className={styles.loading_mask}></div>;
+    }
+
+    return null;
+  }, [loading, loadingShowOperation]);
+
+  const renderOperation = useCallback(() => {
+    if (loading && !loadingShowOperation) {
+      return null;
+    }
+
+    const defaultOperationList = (
+      <React.Fragment>
         {operationList.map(({ name, title, id }, i) =>
           title ? (
             <EnhancePopover id={id} title={title} key={`popover_${i}`}>
@@ -107,18 +133,49 @@ export const AIAction = (props: AIActionProps) => {
             }}
           />
         ) : null}
-        {showClose !== false && (
-          <div
-            className={styles.close_container}
-            style={{
-              display: isHovered ? 'flex' : 'none',
-            }}
-          >
-            <LineVertical height='60%' margin='0px 4px 0 4px' />
+      </React.Fragment>
+    );
+
+    return (
+      <div ref={ref} className={styles.operate_container}>
+        {renderLoadingMask()}
+        <LineVertical height='100%' margin='0 8px' maxHeight={14} minHeight={14} />
+        {customOperationRender ? (
+          <div className={styles.custom_operation_wrapper}>{customOperationRender}</div>
+        ) : (
+          <div className={styles.default_operation_wrapper}>{defaultOperationList}</div>
+        )}
+      </div>
+    );
+  }, [customOperationRender, operationList, moreOperation, loading, loadingShowOperation]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cls(
+        styles.ai_action_wrapper,
+        loading && styles.loading,
+        loadingShowOperation && styles.loading_show_operation,
+      )}
+    >
+      <React.Fragment>
+        <div className={styles.stable_container}>
+          {loading ? (
+            <EnhancePopover id={'inline_chat_loading'} title={localize('aiNative.inline.chat.operate.loading.cancel')}>
+              <Loading className={styles.loading_icon} />
+            </EnhancePopover>
+          ) : (
+            <AILogoAvatar className={styles.ai_action_icon} />
+          )}
+        </div>
+        {renderOperation()}
+        {showClose && (
+          <div className={styles.close_container}>
+            <LineVertical height='100%' margin='0px 8px' maxHeight={14} minHeight={14} />
             <EnhanceIcon wrapperClassName={styles.operate_btn} icon={'window-close'} onClick={handleClose} />
           </div>
         )}
-      </div>
+      </React.Fragment>
     </div>
   );
 };

package/src/components/ai-native/index.ts

@@ -4,3 +4,5 @@ export * from './inline-chat/result';
 export * from './line-vertical';
 export * from './popover';
 export * from './thumbs';
+export * from './loading';
+export * from './interactive-input';

package/src/components/ai-native/interactive-input/index.module.less

@@ -0,0 +1,54 @@
+.interactive_input_container {
+  width: 100%;
+  border-radius: 8px;
+  padding: 8px 4px 8px 12px;
+  font-size: 12px;
+  position: relative;
+  background-color: transparent;
+
+  &.active {
+    border-color: var(--design-inputOption-activeForeground) !important;
+  }
+
+  textarea {
+    resize: none;
+    line-height: 16px;
+    &::-webkit-scrollbar {
+      width: 4px;
+      &:hover {
+        width: 10px;
+      }
+    }
+  }
+
+  .input_icon_container {
+    .send_chat_btn {
+      .send_icon {
+        > span {
+          &::before {
+            font-size: 16px;
+            color: var(--design-inputOption-activeForeground);
+          }
+        }
+      }
+      &.active .send_icon,
+      .send_icon:hover {
+        > span {
+          &::before {
+            color: var(--kt-primaryButton-background);
+          }
+        }
+      }
+    }
+  }
+}
+
+:global {
+  .kt-input-addon-after {
+    align-items: flex-end;
+    margin: 4px 4px 0 0;
+  }
+  .kt-input-disabled {
+    background-color: var(--kt-input-disableBackground) !important;
+  }
+}