Merge branch 'main' into dependabot/npm_and_yarn/ant-design/icons-5.5.1

opensumi · Oct 24, 2024 · 305c5d4 · 305c5d4
2 parents 8d37217 + d5d4dae
commit 305c5d4
Show file tree

Hide file tree

Showing 181 changed files with 2,393 additions and 1,042 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,4 +1,4 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.4.1"
+  "version": "3.4.4"
 }
diff --git a/package.json b/package.json
@@ -19,12 +19,13 @@
     "add:node": "tsx ./scripts/add-node",
     "add:browser": "tsx ./scripts/add-browser",
     "build": "yarn run compile",
-    "build:all": "yarn run build && yarn run build:worker-host && yarn run build:ext-host && yarn run build:components && yarn build:monaco-worker",
+    "build:all": "yarn build:webview-prebuilt && yarn run build && yarn run build:worker-host && yarn run build:ext-host && yarn run build:components && yarn build:monaco-worker",
     "compile": "cross-env NODE_ENV=production tsx ./scripts/build",
     "build:worker-host": "cd packages/extension && yarn run compile:worker",
     "build:ext-host": "cd packages/extension && yarn run build:ext-host",
     "build:cli-engine": "cd tools/cli-engine && yarn run build",
     "build:monaco-worker": "cd packages/monaco && yarn run build:worker",
+    "build:webview-prebuilt": "yarn workspace @opensumi/ide-webview bundle-webview",
     "watch:ext-host": "cd packages/extension && yarn run watch:ext-host",
     "watch:worker-host": "cd packages/extension && yarn run watch:worker",
     "watch": "yarn run rebuild:node && cross-env NODE_ENV=production tsx ./scripts/watch",
@@ -95,6 +96,7 @@
     "cross-env": "^7.0.3",
     "debug": "^4.3.2",
     "depcheck": "^1.4.7",
+    "esbuild": "^0.24.0",
     "eslint": "^8.9.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-import-resolver-typescript": "^2.5.0",

diff --git a/packages/addons/package.json b/packages/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-addons",
-  "version": "3.4.1",
+  "version": "3.4.4",
   "files": [
     "lib",
     "src"

diff --git a/.../ai-native/__test__/browser/contrib/intelligent-completions/multi-line.decoration.test.ts b/.../ai-native/__test__/browser/contrib/intelligent-completions/multi-line.decoration.test.ts
@@ -2,13 +2,12 @@ import {
   GHOST_TEXT,
   GHOST_TEXT_DESCRIPTION,
   MultiLineDecorationModel,
-} from '@opensumi/ide-ai-native/lib/browser/contrib/intelligent-completions/multi-line.decoration';
+} from '@opensumi/ide-ai-native/lib/browser/contrib/intelligent-completions/decoration/multi-line.decoration';
+import { IMultiLineDiffChangeResult } from '@opensumi/ide-ai-native/lib/browser/contrib/intelligent-completions/diff-computer';
+import { EnhanceDecorationsCollection } from '@opensumi/ide-ai-native/lib/browser/model/enhanceDecorationsCollection';
 import { ICodeEditor, IPosition } from '@opensumi/ide-monaco';
 import { monacoApi } from '@opensumi/ide-monaco/lib/browser/monaco-api';
 
-import { IMultiLineDiffChangeResult } from '../../../../src/browser/contrib/intelligent-completions/diff-computer';
-import { EnhanceDecorationsCollection } from '../../../../src/browser/model/enhanceDecorationsCollection';
-
 describe('MultiLineDecorationModel', () => {
   let editor: ICodeEditor;
   let decorationsCollection: EnhanceDecorationsCollection;

diff --git a/packages/ai-native/package.json b/packages/ai-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-ai-native",
-  "version": "3.4.1",
+  "version": "3.4.4",
   "files": [
     "lib",
     "src"
@@ -37,13 +37,13 @@
     "@opensumi/ide-theme": "workspace:*",
     "@opensumi/ide-utils": "workspace:*",
     "@opensumi/ide-workspace": "workspace:*",
+    "@xterm/xterm": "5.5.0",
     "ansi-regex": "^2.0.0",
     "dom-align": "^1.7.0",
-    "js-tiktoken": "1.0.12",
     "react-chat-elements": "^12.0.10",
     "react-highlight": "^0.15.0",
-    "web-tree-sitter": "0.22.6",
-    "xterm": "5.3.0"
+    "tiktoken": "1.0.12",
+    "web-tree-sitter": "0.22.6"
   },
   "devDependencies": {
     "@opensumi/ide-core-browser": "workspace:*"

diff --git a/packages/ai-native/src/browser/ai-core.contribution.ts b/packages/ai-native/src/browser/ai-core.contribution.ts
@@ -56,7 +56,6 @@ import {
   runWhenIdle,
 } from '@opensumi/ide-core-common';
 import { DESIGN_MENU_BAR_RIGHT } from '@opensumi/ide-design';
-import { DesignBrowserCtxMenuService } from '@opensumi/ide-design/lib/browser/override/menu.service';
 import { IEditor } from '@opensumi/ide-editor';
 import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
@@ -77,6 +76,7 @@ import { ChatProxyService } from './chat/chat-proxy.service';
 import { AIChatView } from './chat/chat.view';
 import { CodeActionSingleHandler } from './contrib/code-action/code-action.handler';
 import { AIInlineCompletionsProvider } from './contrib/inline-completions/completeProvider';
+import { InlineCompletionsController } from './contrib/inline-completions/inline-completions.controller';
 import { AICompletionsService } from './contrib/inline-completions/service/ai-completions.service';
 import { IntelligentCompletionsController } from './contrib/intelligent-completions/intelligent-completions.controller';
 import { ProblemFixController } from './contrib/problem-fix/problem-fix.controller';
@@ -137,7 +137,7 @@ export class AINativeBrowserContribution
   protected readonly injector: Injector;
 
   @Autowired(IBrowserCtxMenu)
-  private readonly ctxMenuRenderer: DesignBrowserCtxMenuService;
+  private readonly ctxMenuRenderer: IBrowserCtxMenu;
 
   @Autowired(AINativeCoreContribution)
   private readonly contributions: ContributionProvider<AINativeCoreContribution>;
@@ -256,6 +256,11 @@ export class AINativeBrowserContribution
         new SyncDescriptor(IntelligentCompletionsController, [this.injector]),
         EditorContributionInstantiation.AfterFirstRender,
       );
+      register(
+        InlineCompletionsController.ID,
+        new SyncDescriptor(InlineCompletionsController, [this.injector]),
+        EditorContributionInstantiation.AfterFirstRender,
+      );
     }
     if (supportsProblemFix) {
       register(
@@ -423,8 +428,8 @@ export class AINativeBrowserContribution
       execute: async (visible: boolean) => {
         if (!visible) {
           this.aiCompletionsService.hideStatusBarItem();
+          this.aiInlineCompletionsProvider.setVisibleCompletion(false);
           this.aiInlineCompletionsProvider.cancelRequest();
-          this.aiCompletionsService.setVisibleCompletion(false);
         }
       },
     });
@@ -491,20 +496,6 @@ export class AINativeBrowserContribution
         args: false,
         when: `editorFocus && ${InlineChatIsVisible.raw}`,
       });
-      keybindings.registerKeybinding({
-        command: AI_INLINE_DIFF_PARTIAL_EDIT.id,
-        keybinding: 'ctrl+y',
-        args: true,
-        priority: 100,
-        when: `editorTextFocus && ${InlineDiffPartialEditsIsVisible.raw}`,
-      });
-      keybindings.registerKeybinding({
-        command: AI_INLINE_DIFF_PARTIAL_EDIT.id,
-        keybinding: 'ctrl+n',
-        args: false,
-        priority: 100,
-        when: `editorTextFocus && ${InlineDiffPartialEditsIsVisible.raw}`,
-      });
 
       if (this.inlineChatFeatureRegistry.getInteractiveInputHandler()) {
         keybindings.registerKeybinding(
@@ -538,5 +529,20 @@ export class AINativeBrowserContribution
         );
       }
     }
+
+    keybindings.registerKeybinding({
+      command: AI_INLINE_DIFF_PARTIAL_EDIT.id,
+      keybinding: 'ctrl+y',
+      args: true,
+      priority: 100,
+      when: `editorTextFocus && ${InlineDiffPartialEditsIsVisible.raw}`,
+    });
+    keybindings.registerKeybinding({
+      command: AI_INLINE_DIFF_PARTIAL_EDIT.id,
+      keybinding: 'ctrl+n',
+      args: false,
+      priority: 100,
+      when: `editorTextFocus && ${InlineDiffPartialEditsIsVisible.raw}`,
+    });
   }
 }
diff --git a/packages/ai-native/src/browser/chat/chat.view.tsx b/packages/ai-native/src/browser/chat/chat.view.tsx
@@ -140,7 +140,10 @@ export const AIChatView = observer(() => {
 
   const scrollToBottom = React.useCallback(() => {
     if (containerRef && containerRef.current) {
-      containerRef.current.scrollTop = Number.MAX_SAFE_INTEGER;
+      const lastElement = containerRef.current.lastElementChild;
+      if (lastElement) {
+        lastElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      }
       // 出现滚动条时出现分割线
       if (containerRef.current.scrollHeight > containerRef.current.clientHeight) {
         containerRef.current.classList.add(SCROLL_CLASSNAME);
@@ -162,10 +165,6 @@ export const AIChatView = observer(() => {
     handleDispatchMessage({ type: 'init', payload: [firstMsg] });
   }, []);
 
-  React.useEffect(() => {
-    scrollToBottom();
-  }, [loading]);
-
   React.useEffect(() => {
     const disposer = new Disposable();
 
@@ -515,6 +514,7 @@ export const AIChatView = observer(() => {
       await renderUserMessage({
         relationId,
         message,
+        command,
         agentId,
       });
 
@@ -532,6 +532,7 @@ export const AIChatView = observer(() => {
         relationId,
         message,
         agentId,
+        command,
         request,
         msgId,
       });

diff --git a/packages/ai-native/src/browser/components/ChatEditor.tsx b/packages/ai-native/src/browser/components/ChatEditor.tsx
@@ -92,7 +92,7 @@ export const CodeEditorWithHighlight = (props: Props) => {
           agentId,
           command,
           actionSource: ActionSourceEnum.Chat,
-          actionType: ActionTypeEnum.ChatCopyCode,
+          actionType: ActionTypeEnum.ChatInsertCode,
         });
       }
     }

diff --git a/packages/ai-native/src/browser/components/ChatMarkdown.tsx b/packages/ai-native/src/browser/components/ChatMarkdown.tsx
@@ -1,11 +1,9 @@
 import cls from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom/client';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 
+import { MarkdownReactParser, MarkdownReactRenderer } from '@opensumi/ide-components/lib/markdown-react';
 import { IMarkedOptions, marked } from '@opensumi/ide-components/lib/utils';
 import { AppConfig, ConfigProvider, useInjectable } from '@opensumi/ide-core-browser';
-import { defaultGenerator } from '@opensumi/ide-core-common/lib/id-generator';
-import { escape } from '@opensumi/ide-utils/lib/strings';
 import { IMarkdownString, MarkdownString } from '@opensumi/monaco-editor-core/esm/vs/base/common/htmlContent';
 
 import { CodeEditorWithHighlight } from './ChatEditor';
@@ -24,52 +22,57 @@ interface MarkdownProps {
 export const ChatMarkdown = (props: MarkdownProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const appConfig = useInjectable<AppConfig>(AppConfig);
+  const [reactParser, setReactParser] = useState<MarkdownReactParser>();
+  const [tokensList, setTokensList] = useState<marked.TokensList>();
 
   useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
     }
-    const codeRenderedElements = new Map<string, { container: HTMLDivElement; root: ReactDOM.Root }>();
 
     const markdown: IMarkdownString =
       typeof props.markdown === 'string' ? new MarkdownString(props.markdown) : props.markdown;
 
-    const renderer = new marked.Renderer();
-    renderer.link = (href: string | null, title: string | null, text: string): string =>
-      `<a rel="noopener" target="_blank" href="${href}" target="${href}" title="${title || href}">${text}</a>`;
+    const renderer: MarkdownReactRenderer = new MarkdownReactRenderer();
+    renderer.link = (href: string, text: ReactNode): React.ReactElement => (
+        <a rel='noopener' target='_blank' href={href} title={href}>
+          {text}
+        </a>
+      );
     renderer.code = (code, lang) => {
-      const id = defaultGenerator.nextId();
-      const container = document.createElement('div');
       const language = postProcessCodeBlockLanguageId(lang);
-      const dom = ReactDOM.createRoot(container);
-      dom.render(
-        <ConfigProvider value={appConfig}>
-          <div className={styles.code_block}>
-            <div className={styles.code_language}>{language}</div>
-            <CodeEditorWithHighlight
-              input={code}
-              language={language}
-              relationId={props.relationId || ''}
-              agentId={props.agentId}
-              command={props.command}
-            />
-          </div>
-        </ConfigProvider>,
+
+      return (
+        <div className={styles.code}>
+          <ConfigProvider value={appConfig}>
+            <div className={styles.code_block}>
+              <div className={styles.code_language}>{language}</div>
+              <CodeEditorWithHighlight
+                input={code as string}
+                language={language}
+                relationId={props.relationId || ''}
+                agentId={props.agentId}
+                command={props.command}
+              />
+            </div>
+          </ConfigProvider>
+        </div>
       );
-      codeRenderedElements.set(id, { container, root: dom });
-      return `<div class="code" data-code="${id}">${escape(code)}</div>`;
     };
-    renderer.codespan = (code) => `<code class=${styles.code_inline}>${code}</code>`;
+    renderer.codespan = (code) => <code className={styles.code_inline}>{code}</code>;
+
+    const reactParser = new MarkdownReactParser({ renderer });
     const markedOptions = props.markedOptions ?? {};
-    markedOptions.renderer = renderer;
+    markedOptions.renderer = reactParser;
 
     let value = markdown.value ?? '';
     if (value.length > 100_000) {
       value = `${value.slice(0, 100_000)}…`;
     }
 
     let renderedMarkdown: string;
+    let tokensList: marked.TokensList;
     if (props.fillInIncompleteTokens) {
       const opts = {
         ...marked.defaults,
@@ -78,33 +81,22 @@ export const ChatMarkdown = (props: MarkdownProps) => {
       const tokens = marked.lexer(value, opts);
       const newTokens = fillInIncompleteTokens(tokens);
       renderedMarkdown = marked.parser(newTokens, opts);
+      tokensList = newTokens;
     } else {
-      renderedMarkdown = marked.parse(value, markedOptions);
+      const tokens = marked.lexer(value, marked.defaults);
+      renderedMarkdown = marked.parser(tokens, markedOptions);
+      tokensList = tokens;
     }
 
-    element.innerHTML = renderedMarkdown;
-
-    const codePlaceholderElements = element.querySelectorAll<HTMLDivElement>('div[data-code]');
-    codePlaceholderElements.forEach((placeholderElement) => {
-      const renderedElement = codeRenderedElements.get(placeholderElement.dataset['code'] ?? '');
-      if (renderedElement && renderedElement.container) {
-        placeholderElement.innerText = '';
-        placeholderElement.append(renderedElement.container);
-      }
-    });
-
-    return () => {
-      if (codeRenderedElements.size > 0) {
-        codeRenderedElements.forEach(({ root }) => {
-          requestAnimationFrame(() => {
-            root.unmount();
-          });
-        });
-      }
-    };
+    setTokensList(tokensList);
+    setReactParser(reactParser);
   }, [props.markdown]);
 
-  return <div className={cls(styles.markdown_container, props.className)} ref={ref} tabIndex={0} />;
+  return (
+    <div className={cls(styles.markdown_container, props.className)} ref={ref} tabIndex={0}>
+      {tokensList && reactParser && reactParser.parse(tokensList)}
+    </div>
+  );
 };
 
 export function postProcessCodeBlockLanguageId(lang: string | undefined): string {

diff --git a/packages/ai-native/src/browser/components/ChatReply.tsx b/packages/ai-native/src/browser/components/ChatReply.tsx
@@ -1,4 +1,14 @@
-import React, { Fragment, ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, {
+  Fragment,
+  ReactNode,
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 
 import { Button } from '@opensumi/ide-components/lib/button';
 import { BasicRecycleTree, IBasicRecycleTreeHandle, IBasicTreeData } from '@opensumi/ide-components/lib/recycle-tree';
@@ -192,10 +202,6 @@ export const ChatReply = (props: IChatReplyProps) => {
 
     disposableCollection.push(
       request.response.onDidChange(() => {
-        if (onDidChange) {
-          onDidChange();
-        }
-
         history.updateAssistantMessage(msgId, { content: request.response.responseText });
 
         if (request.response.isComplete) {
@@ -212,7 +218,11 @@ export const ChatReply = (props: IChatReplyProps) => {
             agentId,
           });
         }
-        update();
+
+        startTransition(() => {
+          onDidChange?.();
+          update();
+        });
       }),
     );