fix: tools view

packages/ai-native/package.json

@@ -47,6 +47,7 @@
     "@xterm/xterm": "5.5.0",
     "ai": "^4.1.45",
     "ansi-regex": "^2.0.0",
+    "ansi_up": "^5.1.0",
     "diff": "^7.0.0",
     "dom-align": "^1.7.0",
     "eventsource": "^3.0.5",

packages/ai-native/src/browser/components/WelcomeMsg.tsx

@@ -79,7 +79,7 @@ export const WelcomeMessage = () => {
     return (
       <div className={styles.chat_welcome_head}>
         <div className={styles.chat_container_des}>
-          {isMarkdownString(welcomeMessage) ? <ChatMarkdown markdown={welcomeMessage} /> : welcomeMessage}
+          {isMarkdownString(welcomeMessage) ? <ChatMarkdown key='welcome' markdown={welcomeMessage} /> : welcomeMessage}
         </div>
         <div className={styles.chat_container_content}>
           {allSampleQuestions.map((data: any, index) => {

packages/ai-native/src/browser/mcp/tools/components/ExpandableFileList.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { Icon } from '@opensumi/ide-components/lib/icon/icon';
 import { CommandService, LabelService, URI, path, useInjectable } from '@opensumi/ide-core-browser';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
@@ -110,7 +111,9 @@ const ExpandableFileList: React.FC<ExpandableFileListProps> = ({
   return (
     <div className={styles.container}>
       <div className={styles.header} onClick={() => setIsExpanded(!isExpanded)}>
-        <span style={{ transform: `rotate(${isExpanded ? '90deg' : '0deg'})` }}>▶</span>
+        <span style={{ transform: `rotate(${isExpanded ? '90deg' : '0deg'})`, display: 'flex' }}>
+          <Icon iconClass={'codicon codicon-chevron-right'} />
+        </span>
         <span>
           {headerText} · {fileList.length} files
         </span>

packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx

@@ -3,11 +3,11 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useInjectable } from '@opensumi/ide-core-browser';
 import { Button, Icon } from '@opensumi/ide-core-browser/lib/components';
 import { localize } from '@opensumi/ide-core-common';
-import { stripAnsi } from '@opensumi/ide-utils/lib/ansi';
 
 import { IMCPServerToolComponentProps } from '../../../types';
 import { RunCommandHandler } from '../handlers/RunCommand';
 
+import { computeAnsiLogString } from './computeAnsiLogString';
 import styles from './index.module.less';
 
 function getResult(raw: string) {
@@ -63,19 +63,17 @@ export const TerminalToolComponent = memo((props: IMCPServerToolComponentProps)
             <>
               <div className={styles.command_title}>
                 <Icon icon='terminal' />
-                <span>{localize('ai.native.mcp.terminal.command')}</span>
+                <span>{localize('ai.native.mcp.terminal.command')}:</span>
               </div>
               <p className={styles.command_content}>
                 <code>$ {args.command}</code>
               </p>
             </>
           )}
-          <div className={styles.command_title}>
-            <span>{localize('ai.native.mcp.terminal.output')}</span>
-          </div>
           {output ? (
             <div className={styles.command_content}>
-              <code>{stripAnsi(output.text)}</code>
+              <Icon icon='output' />
+              <code dangerouslySetInnerHTML={{ __html: computeAnsiLogString(output.text || '') }} />
             </div>
           ) : (
             ''

packages/ai-native/src/browser/mcp/tools/components/computeAnsiLogString.ts

@@ -0,0 +1,24 @@
+import AnsiUp from 'ansi_up';
+
+import filterEraseMultipleLine from './filterEraseMultipleLine';
+
+type LogContent = string;
+
+const ansiUp = new AnsiUp();
+
+export function computeAnsiLogString(logs: LogContent, enableEraseLineFilter = true, hideEmptyLine = false): string {
+  const splittedLogs = logs.split('\n');
+  // 处理清空上行逻辑
+  // 上移 cursor + 清空整行
+  let filteredLogs = enableEraseLineFilter ? filterEraseMultipleLine(splittedLogs) : splittedLogs;
+  if (hideEmptyLine) {
+    filteredLogs = filteredLogs.map((line) => line.replace('\r', '')).filter((line) => !!line);
+  }
+
+  const htmlLogLines = filteredLogs.map((line) => {
+    const htmlLog = ansiUp.ansi_to_html(line);
+
+    return htmlLog;
+  });
+  return htmlLogLines.join('\n');
+}

packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts

@@ -0,0 +1,71 @@
+export const ESC = '\u001B[';
+export const eraseLine = ESC + '2K';
+export const eraseEndLine = ESC + 'K';
+
+export const cursorUp = (count = 1) => ESC + count + 'A';
+
+/**
+ * 处理过滤清空上行，清空本行逻辑。
+ *
+ * 关于清空上 n 行：
+ * 一般在日志中，出现覆盖上行的情况，ascii 编码为 2K [1A 2K ...] 1G 的样式。 如 \u001b[2K\u001b[1A\u001b[2K\u001b[1A\u001b[2K\u001b[G\r\n，代表清空上两行。
+ * 其中，2K 代表清空整行，1A 代表光标上移，配合下一个 2K 则最终效果为清空上行，而 1G 是移动光标到本行开始（位置 1）。
+ * 在日志过滤过程中，可以只处理 1A 2K 这个序列，遇到后把该日志的上一行删掉即可。
+ *
+ * 关于清空本行，按顺序执行：
+ * 1. 在当前行没有 Cursor 操作符（如上移时），匹配最后一个 [2K （清空本行）或 \r[K（指针回 0，再清空本行到末尾，相当于清空本行），只输出 [2K 后的内容，
+ * 2. 在当前行没有 Cursor 操作符时且有多个 \r （carriage return charactor，移动光标到行首）时，reduce 按 \r \x1b[G 或 \x1b[1G 切分的片断，不段用后一 part 的部分从头覆盖得出结果。
+ */
+export default function filterEraseMultipleLine(logs: string[]) {
+  // 上移 cursor + 清空整行
+  const eraseLastLine = cursorUp(1) + eraseLine;
+  const eraseCurrentLine = eraseLine;
+  const eraseCurrentLine2 = `\r${eraseEndLine}`;
+
+  const moveCursorToLeftRegStrs = ['\\r', '\\u001b\\[G', '\\u001b\\[1G'];
+  const moveCursorToLeftRegStr = new RegExp(`${moveCursorToLeftRegStrs.join('|')}`);
+
+  const filteredLogs = logs.reduce((acc: string[], nowLine) => {
+    // 当前清空上行搜索指针
+    let pos = 0;
+    const step = eraseLastLine.length;
+
+    while (true) {
+      pos = nowLine.indexOf(eraseLastLine, pos);
+      // 出现清空上行
+      if (pos >= 0) {
+        pos += step;
+        acc.pop();
+      } else {
+        break;
+      }
+    }
+
+    // 对单行日志的重写做处理
+    // 简单处理，不去解析真正的 Cursor 所在行，否则逻辑过于麻烦
+    // 处理 [2K
+    let lastErasePos = nowLine.lastIndexOf(eraseCurrentLine);
+    if (lastErasePos < 0) {
+      // 处理 \r[K
+      lastErasePos = nowLine.lastIndexOf(eraseCurrentLine2);
+    }
+    if (lastErasePos > 0) {
+      // 从后向前搜索最后一个清行操作
+      nowLine = nowLine.slice(lastErasePos);
+    }
+
+    // 处理多 \r 情况，当 \r 连续时，切分出的空字段无用，过滤掉
+    const carriageRewrites = nowLine.split(moveCursorToLeftRegStr).filter((part) => !!part);
+    if (carriageRewrites.length > 1) {
+      nowLine = carriageRewrites.reduce((nextNowLine, nowPart) => {
+        const leftPart = nextNowLine.slice(nowPart.length);
+        return nowPart + leftPart;
+      }, '');
+    }
+
+    acc.push(nowLine);
+    return acc;
+  }, []);
+
+  return filteredLogs;
+}

packages/ai-native/src/browser/mcp/tools/components/index.module.less

@@ -96,15 +96,15 @@
 }
 
 .header {
-  padding: 8px 12px;
+  padding: 4px;
   background-color: var(--design-block-background);
   border-bottom: 1px solid var(--vscode-commandCenter-inactiveBorder);
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 4px;
   color: var(--design-text-foreground);
-  font-size: 12px;
+  font-size: 11px;
 }
 
 .fileList {
@@ -162,14 +162,17 @@
   .command_title {
     display: flex;
     align-items: center;
+    font-size: 11px;
     span {
       margin-left: 5px;
     }
   }
 
   .command_content {
-    padding: 4px;
-    font-size: 12px;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 2px 4px;
+    font-size: 11px;
     color: var(--design-text-foreground);
     margin: 0px;
     background-color: var(--terminal-background);
@@ -178,7 +181,7 @@
     overflow: auto;
 
     code {
-      font-size: 12px;
+      font-size: 11px;
       white-space: pre;
     }
   }

packages/components/src/markdown-react/parse.tsx

@@ -59,9 +59,12 @@ export class MarkdownReactParser extends marked.Renderer {
 
               listItemChildren.push(this.parse(item.tokens));
 
-              return React.cloneElement(this.renderer.listItem(listItemChildren) as React.ReactElement, {
-                key: `list-item-${itemIndex}`,
-              });
+              return React.cloneElement(
+                this.renderer.listItem(listItemChildren) as React.ReactElement,
+                {
+                  key: `list-item-${itemIndex}`,
+                },
+              );
             });
 
             return this.renderer.list(children, token.ordered);
@@ -83,9 +86,12 @@ export class MarkdownReactParser extends marked.Renderer {
               ),
             );
 
-            const headerRow = React.cloneElement(this.renderer.tableRow(headerCells) as React.ReactElement, {
-              key: 'header-row',
-            });
+            const headerRow = React.cloneElement(
+              this.renderer.tableRow(headerCells) as React.ReactElement,
+              {
+                key: 'header-row',
+              },
+            );
             const header = this.renderer.tableHeader(headerRow);
 
             const bodyChilren = tableToken.rows.map((row, rowIndex) => {
@@ -99,9 +105,12 @@ export class MarkdownReactParser extends marked.Renderer {
                 ),
               );
 
-              return React.cloneElement(this.renderer.tableRow(rowChildren) as React.ReactElement, {
-                key: `body-row-${rowIndex}`,
-              });
+              return React.cloneElement(
+                this.renderer.tableRow(rowChildren) as React.ReactElement,
+                {
+                  key: `body-row-${rowIndex}`,
+                },
+              );
             });
 
             const body = this.renderer.tableBody(bodyChilren);
@@ -185,5 +194,7 @@ export class MarkdownReactParser extends marked.Renderer {
 function htmlUnescape(htmlStr) {
   return htmlStr
     .replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
-    .replace(/&#x([0-9A-Fa-f]+);/g, (match, hex) => String.fromCharCode(parseInt(hex, 16)));
+    .replace(/&#x([0-9A-Fa-f]+);/g, (match, hex) =>
+      String.fromCharCode(parseInt(hex, 16)),
+    );
 }

packages/connection/src/common/connection/drivers/frame-decoder.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { BinaryWriter } from '@furyjs/fury/dist/lib/writer';
 
-import { MaybeNull, readUInt32LE } from '@opensumi/ide-core-common';
+import { MaybeNull, readUInt32LE, setImmediate } from '@opensumi/ide-core-common';
 
 import { Buffers } from '../../buffers/buffers';
 

yarn.lock

@@ -3419,6 +3419,7 @@ __metadata:
     "@xterm/xterm": "npm:5.5.0"
     ai: "npm:^4.1.45"
     ansi-regex: "npm:^2.0.0"
+    ansi_up: "npm:^5.1.0"
     diff: "npm:^7.0.0"
     dom-align: "npm:^1.7.0"
     eventsource: "npm:^3.0.5"
@@ -7076,6 +7077,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi_up@npm:^5.1.0":
+  version: 5.2.1
+  resolution: "ansi_up@npm:5.2.1"
+  checksum: 10/abf4f2e4abc1f54ef41d5668b22967c33117faf31308211858ff3bb898f4839f97a7bde081d6eb988532a90a1ccd37f1ef5c0f0f3e409d1b96ed4c5bd41d11c7
+  languageName: node
+  linkType: hard
+
 "antd@npm:^5.21.4":
   version: 5.21.4
   resolution: "antd@npm:5.21.4"