@opensumi/ide-ai-native 2.26.9-rc-1695091570.0

package/src/browser/diff-widget/ai-diff-widget.tsx

@@ -0,0 +1,196 @@
+import React, { CSSProperties, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { AppConfig, URI, useInjectable } from '@opensumi/ide-core-browser';
+import { ConfigProvider } from '@opensumi/ide-core-browser';
+import { EditorCollectionService, IDiffEditor } from '@opensumi/ide-editor';
+import { getSimpleEditorOptions } from '@opensumi/ide-editor';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser/index';
+import { ICodeEditor } from '@opensumi/ide-monaco';
+import { monaco } from '@opensumi/ide-monaco/lib/browser/monaco-api';
+import { IDiffEditorOptions } from '@opensumi/ide-monaco/lib/browser/monaco-api/editor';
+import { ZoneWidget } from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget';
+
+const diffEditorOptions: IDiffEditorOptions = {
+  scrollBeyondLastLine: false,
+  scrollbar: {
+    verticalScrollbarSize: 14,
+    horizontal: 'auto',
+    useShadows: true,
+    verticalHasArrows: false,
+    horizontalHasArrows: false,
+    alwaysConsumeMouseWheel: false,
+  },
+  fixedOverflowWidgets: true,
+  readOnly: true,
+  minimap: {
+    enabled: false,
+  },
+  enableSplitViewResizing: true,
+  renderOverviewRuler: true,
+  ignoreTrimWhitespace: false,
+  renderSideBySide: true,
+  lineNumbers: 'on',
+  glyphMargin: false,
+};
+
+const DiffContentProvider = React.memo(((props: { dto: { originValue; modifiedValue } | undefined; onMaxLincCount: (n) => void }) => {
+  const { dto, onMaxLincCount } = props;
+  const documentModelService: IEditorDocumentModelService = useInjectable(IEditorDocumentModelService);
+  const editorCollectionService: EditorCollectionService = useInjectable(EditorCollectionService);
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!dto) {
+      return;
+    }
+
+    let diffEditor: IDiffEditor;
+
+    const random = Math.random() * 10;
+    const originUri = URI.parse(`AI://origin${random}`);
+    const actualUri = URI.parse(`AI://modified${random}`);
+
+    Promise.all([
+      documentModelService.createModelReference(originUri),
+      documentModelService.createModelReference(actualUri),
+    ]).then((data) => {
+      const [original, modified] = data;
+      if (!original) {
+        return;
+      }
+
+      const { originValue, modifiedValue } = dto!;
+
+      diffEditor = editorCollectionService.createDiffEditor(editorRef.current!, {
+        ...getSimpleEditorOptions(),
+        ...diffEditorOptions,
+      });
+
+      const originalModel = original.instance.getMonacoModel();
+      const modifiedModel = modified.instance.getMonacoModel();
+
+      originalModel.setMode('java');
+      modifiedModel.setMode('java');
+
+      originalModel.setValue(originValue);
+      modifiedModel.setValue(modifiedValue);
+
+      diffEditor.compare(original, modified);
+      diffEditor.originalEditor.monacoEditor.setModel(originalModel);
+      diffEditor.modifiedEditor.monacoEditor.setModel(modifiedModel);
+
+      diffEditor.originalEditor.monacoEditor.updateOptions({ readOnly: true });
+      diffEditor.modifiedEditor.monacoEditor.updateOptions({ readOnly: true });
+
+      if (onMaxLincCount) {
+        const { originalEditor, modifiedEditor }  = diffEditor;
+
+        const originContentHeight = originalEditor.monacoEditor.getContentHeight();
+        const originLineCount = originContentHeight / originalEditor.monacoEditor.getOption(monaco.editor.EditorOption.lineHeight);
+
+        const modifiedContentHeight = modifiedEditor.monacoEditor.getContentHeight();
+        const modifiedLineCount = modifiedContentHeight / modifiedEditor.monacoEditor.getOption(monaco.editor.EditorOption.lineHeight);
+
+        onMaxLincCount(Math.max(originLineCount, modifiedLineCount));
+      }
+    });
+
+    return () => {
+      if (diffEditor) {
+        diffEditor.dispose();
+      }
+    };
+  }, [dto]);
+
+  return <div ref={editorRef} style={{ height: 'inherit', width:'100%', border:'1px solid #6666' }}></div>;
+}));
+
+const styles: CSSProperties = {
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+@Injectable({ multiple: true })
+export class AiDiffWidget extends ZoneWidget {
+  @Autowired(AppConfig)
+  private configContext: AppConfig;
+
+  private recordLine: number;
+
+  private originValue: string;
+  private modifiedValue: string;
+
+  protected applyClass(): void {}
+  protected applyStyle(): void {}
+
+  protected _fillContainer(container: HTMLElement): void {
+    this.setCssClass('ai_diff-widget');
+
+    ReactDOM.render(
+      <ConfigProvider value={this.configContext}>
+          <div style={styles}>
+            <DiffContentProvider dto={{ originValue: this.originValue, modifiedValue: this.modifiedValue }} onMaxLincCount={(n) => {
+              if (n) {
+                this._relayout(n);
+              }
+            }}/>
+          </div>
+      </ConfigProvider>,
+      container,
+    );
+  }
+
+  constructor(editor: ICodeEditor, originValue: string, modifiedValue: string) {
+    super(editor, {
+      showArrow: false,
+      showFrame: false,
+      arrowColor: undefined,
+      frameColor: undefined,
+      // 这里有个小坑，如果不开启这个配置，那么在调用 show 函数的时候会自动对焦并滚动到对应 range，导致在编辑 result 视图中代码时光标总是滚动在最后一个 widget 上
+      keepEditorSelection: true,
+    });
+
+    this.originValue = originValue;
+    this.modifiedValue = modifiedValue;
+  }
+
+  // 覆写 revealLine 函数，使其在 show 的时候编辑器不会定位到对应位置
+  protected override revealLine(lineNumber: number, isLastLine: boolean): void {
+    // not implement
+  }
+
+  public getRecordLine(): number {
+    return this.recordLine;
+  }
+
+  public setContainerStyle(style: { [key in string]: string }): void {
+    const keys = Object.keys(style);
+    for (const key of keys) {
+      if (Object.prototype.hasOwnProperty.call(this.container?.style, key)) {
+        this.container!.style[key] = style[key];
+      }
+    }
+  }
+
+  public addClassName(type: string): this {
+    this.setCssClass(type);
+    return this;
+  }
+
+  public showByLine(line: number, lineNumber = 20): void {
+    this.recordLine = line;
+    super.hide();
+    super.show(
+      {
+        startLineNumber: line,
+        startColumn: 0,
+        endLineNumber: line,
+        endColumn: Number.MAX_SAFE_INTEGER,
+      },
+      lineNumber,
+    );
+  }
+}

package/src/browser/index.ts

@@ -0,0 +1,91 @@
+import { Provider, Injectable, Injector } from '@opensumi/di';
+import { BrowserModule } from '@opensumi/ide-core-browser';
+import { AiChatContribution } from './ai-chat.contribution';
+import { AiGPTBackSerivcePath, AiGPTBackSerivceToken } from '../common';
+import { IMarkerService } from '@opensumi/ide-markers';
+import { AiMarkerService } from './override/ai-marker.service';
+import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { IEditorTabService } from '@opensumi/ide-editor/lib/browser';
+import { AiEditorTabService } from './override/ai-editor-tab.service';
+
+import { Color, IThemeData, IThemeStore } from '@opensumi/ide-theme';
+import { ThemeData } from '@opensumi/ide-theme/lib/browser/theme-data';
+import { ThemeStore } from '@opensumi/ide-theme/lib/browser/theme-store';
+import { AiMenuBarContribution } from './override/layout/menu-bar/menu-bar.contribution';
+import defaultTheme from './override/theme/default-theme';
+
+import './override/global.styles.less';
+
+@Injectable()
+export class AiNativeModule extends BrowserModule {
+  providers: Provider[] = [
+    AiMenuBarContribution,
+    AiChatContribution
+  ];
+
+  preferences = (injector: Injector) => {
+    injector.overrideProviders(
+      {
+        token: IMarkerService,
+        useClass: AiMarkerService,
+        override: true,
+        isDefault: true
+      },
+      {
+        token: IEditorTabService,
+        useClass: AiEditorTabService,
+        override: true,
+        isDefault: true
+      },
+      {
+        token: IThemeData,
+        useClass: class extends ThemeData {
+          override getDefaultTheme() {
+            return defaultTheme
+          }
+        },
+        override: true,
+        isDefault: true
+      },
+      {
+        // AI Native 模式下默认使用该主题
+        token: IThemeStore,
+        useClass: class extends ThemeStore {
+          override async getThemeData() {
+            const theme = this.loadDefaultTheme();
+            const colors = theme.colors;
+            if (colors) {
+              for (const colorId in colors) {
+                const colorHex = colors[colorId];
+                if (typeof colorHex === 'string') {
+                  theme.colorMap[colorId] = Color.fromHex(colors[colorId]);
+                }
+              }
+            }
+
+            return theme;
+          }
+        },
+        override: true,
+        isDefault: true
+      },
+    );
+
+    if (!this.app.config.layoutViewSize) {
+      this.app.config.layoutViewSize = {
+        ...LAYOUT_VIEW_SIZE,
+        MENUBAR_HEIGHT: 48,
+        EDITOR_TABS_HEIGHT: 36,
+        STATUSBAR_HEIGHT: 36,
+        ACCORDION_HEADER_SIZE_HEIGHT: 36,
+      }
+    }
+  }
+
+  backServices = [
+    {
+      servicePath: AiGPTBackSerivcePath,
+      token: AiGPTBackSerivceToken,
+    },
+  ];
+}

package/src/browser/inline-completions/constants.ts

@@ -0,0 +1,108 @@
+export const apiBaseUrl = 'http://localhost:3002';
+const URL = 'https://caselike.alipay.com';
+// 1.1基于GPT模型的代码补全(原COMMAND_GPT_CODEGEN)
+export const codeFuseCommandGptCodegenUrl = URL + '/v1/function/commandGptCodegen';
+// 1.2插件非流式功能(包含生成注释,生成代码等. 原:COMMAND_CHATCOMMAND)
+export const codeFuseChatcommandUrl = URL + '/v1/function/chatcommand';
+// 1.3对话(原 /v1/api/invokeWithStream接口)
+export const codeFuseChatUrl = URL + '/v1/function/talkOnStream';
+// 1.4评论对话消息(原MESSAGE_COMMENT)
+export const codeFuseMessageCommentUrl = URL + '/v1/function/messageComment';
+
+// 2.1查询用户信息(原:QUERY_USER)
+export const codeFuseServiceUrl = URL + '/v1/user/queryUser';
+// 2.2查询公钥(原:COMMAND_QUERYPUBKEY)
+export const codeFuseQueryPubkeyUrl = URL + '/v1/common/queryPubkey';
+// 2.3查询插件配置(原:COMMAND_QUERY_CONFIGDATA)
+export const codeFuseQueryPluginConfigUrl = URL + '/v1/common/queryPluginConfig';
+// 2.4申请权限(原:APPLY_PERMISSION)
+export const codeFuseApplyPermissionUrl = URL + '/v1/common/applyPermission';
+// 2.5提交插件埋点(原:/v1/api/submitReportEventTrack)
+export const codeFuseTrackUrl = URL + 'v1/common/submitReportEventTrack';
+
+
+export const DEFAULT_API = 'https://marketplace.antfin-inc.com';
+export const EXTENSION_ID = 'codeFuse.CodeFuse';
+
+export const ACCOUNT_ID = 'bwdMKeo-xuSUNiHHaGtPl0mH ';
+export const MASTER_KEY = 'IiBub2NWe0m7Va27heW0dY_f';
+
+/**
+ * 接受补全事件
+ */
+export const COMMAND_ACCEPT = 'CF_COMMAND_ACCEPT';
+
+interface CodeFuseConfigModel {
+  chatPromptMaxSize: number;
+	completionFileList: string[];
+	completionPromptMaxLineSize: number;
+	completionSuffixMaxLineSize: number;
+	intervalTime: number;
+	streamTimeOut: number;
+	timeOut: number;
+	completionRegular: string;
+}
+
+/**
+ * 插件配置信息
+ */
+export let codeFuseDefaultConfig: CodeFuseConfigModel = {
+	'chatPromptMaxSize': 4096,
+	'completionFileList': ['java', 'go', 'python', 'javascript', 'typescript'],
+	'completionPromptMaxLineSize': 1024,
+	'completionSuffixMaxLineSize': 500,
+	'intervalTime': 1800000,
+	'streamTimeOut': 40000,
+	'timeOut': 20000,
+	'completionRegular': '[\\)\\]\\}]',
+};
+
+
+/**
+ * 更新配置
+ * @param newTsingyanConfig
+ */
+export function resetConfig(newTsingyanConfig: CodeFuseConfigModel) {
+	codeFuseDefaultConfig = newTsingyanConfig;
+}
+
+export function isEmpty(value: any) {
+	if (value === null || value === undefined) {
+		return true;
+	}
+	if (typeof value === 'string' && value.trim() === '') {
+		return true;
+	}
+	if (Array.isArray(value) && value.length === 0) {
+		return true;
+	}
+	if (typeof value === 'object' && Object.keys(value).length === 0) {
+		return true;
+	}
+	return false;
+}
+
+export interface IRawExtension extends IExtension {
+	isInstalled: boolean;
+	needUpdate: boolean;
+}
+
+/**
+* 插件市场插件数据
+*/
+export interface IExtension {
+	extensionId: string;
+	name: string;
+	publisher: string;
+	displayName: string;
+	description: string;
+	icon: string;
+	version: string;
+	downloadCount: number;
+	originId: string;
+}
+
+export interface IExtensionManager {
+	install(extensionId: string, version: string): Promise<void>;
+	update(extensionId: string, version: string): Promise<void>;
+}

package/src/browser/inline-completions/provider.ts

@@ -0,0 +1,55 @@
+import * as constants from './constants';
+/**
+* prompt数据前处理
+* 1: 去掉所有空行
+* 2: 如果行数超过{@link constants.codeFuseDefaultConfig.completionPromptMaxLineSize},取最近的{@link constants.codeFuseDefaultConfig.completionPromptMaxLineSize}行
+* @param prompt 代码上文
+* @returns
+*/
+export function prePromptHandler(prompt: string): string {
+  prompt = prompt.replace(/^s*[\n]/gm, '');
+  const arr = prompt.split('\n');
+  if (arr.length > constants.codeFuseDefaultConfig.completionPromptMaxLineSize) {
+      prompt = arr.slice(-constants.codeFuseDefaultConfig.completionPromptMaxLineSize).join('\n');
+  }
+  return prompt;
+}
+
+/**
+* suffix数据前处理
+* 1: 去掉所有空行
+* 2: 如果行数超过{@link constants.codeFuseDefaultConfig.completionPromptMaxLineSize},取最近的{@link constants.codeFuseDefaultConfig.completionPromptMaxLineSize}行
+* @param prompt 代码上文
+* @returns
+*/
+export function preSuffixHandler(suffix: string): string {
+  suffix = suffix.replace(/^s*[\n]/gm, '');
+  const arr = suffix.split('\n');
+  if (arr.length > constants.codeFuseDefaultConfig.completionSuffixMaxLineSize) {
+      suffix = arr.slice(-constants.codeFuseDefaultConfig.completionSuffixMaxLineSize).join('\n');
+  }
+  return suffix;
+}
+
+export class ReqStack {
+  queue: any[];
+  constructor() {
+      this.queue = [];
+  }
+  addReq(reqRequest: { sendRequest: any; cancelRequest: any }) {
+      this.queue.push(reqRequest);
+  }
+  runReq() {
+      if (this.queue.length === 0) {return;}
+      const fn = this.queue.pop();
+      return fn.sendRequest();
+  }
+  cancleRqe() {
+      if (this.queue.length === 0) {return;}
+      this.queue.forEach((item) => {
+       item.cancelRequest();
+      });
+      this.queue = [];
+  }
+
+}

package/src/browser/override/ai-editor-tab.service.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import { Injectable } from '@opensumi/di';
+import { EditorTabService } from '@opensumi/ide-editor/lib/browser/editor.tab.service';
+
+import cls from 'classnames';
+import * as styles from './override.module.less';
+
+@Injectable()
+export class AiEditorTabService extends EditorTabService {
+  override renderEditorTab(component: ReactNode, isCurrent: boolean): ReactNode {
+    return (
+      <div className={cls(
+        {
+          [styles.ai_editor_tab_block_container]: true,
+          [styles.active]: isCurrent
+        }
+      )}>
+        {component}
+      </div>
+    )
+  }
+}

package/src/browser/override/ai-marker.service.tsx

@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react';
+import { Injectable, Autowired } from '@opensumi/di';
+import { MarkerService } from '@opensumi/ide-markers/lib/browser/markers-service';
+import { MarkerGroupNode, MarkerNode } from '@opensumi/ide-markers/lib/browser/tree/tree-node.defined';
+
+import cls from 'classnames';
+
+import * as styles from './override.module.less';
+import { Icon } from '@opensumi/ide-components';
+import { getExternalIcon } from '@opensumi/ide-core-browser';
+import { AiChatService } from '../ai-chat.service';
+import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { IFileServiceClient } from '@opensumi/ide-file-service';
+
+@Injectable()
+export class AiMarkerService extends MarkerService {
+
+  @Autowired(WorkbenchEditorService)
+  private readonly editorService: WorkbenchEditorServiceImpl;
+
+  @Autowired()
+  private aiChatService: AiChatService;
+
+  @Autowired(IFileServiceClient)
+  private readonly fileSystem: IFileServiceClient;
+
+  private async handleAiIcon(node: MarkerNode) {
+    try {
+      const resource = node.marker.resource;
+      const message = node.marker.message;
+      const { content } = await this.fileSystem.readFile(resource.toString());
+
+      const messageWithPrompt = `代码内容是 \`\`\`\n${content.toString()}\n\`\`\`。此时有个异常问题是 "${message}", 你需要解释这个异常问题并给出修复建议`;
+  
+      this.aiChatService.launchChatMessage({
+        message: `/explain ${node.marker.message}`,
+        prompt: messageWithPrompt,
+      });
+    } catch (error) {
+      throw Error('read file error', error)
+    }
+  }
+
+  override renderMarkerNodeIcon(component: ReactNode, node: MarkerGroupNode | MarkerNode): ReactNode {
+    return (
+      <div className={cls(!(MarkerGroupNode.is(node)) && styles.ai_marker_node_icon_container)}>
+        {
+          !MarkerGroupNode.is(node) && <Icon tooltip='AI 智能问题诊断' onClick={() => this.handleAiIcon(node)} className={cls(getExternalIcon('lightbulb'), styles.ai_icon)} />
+        }
+        {component}
+      </div>
+    )
+  }
+}