Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4457 +/- ##
==========================================
- Coverage 53.26% 53.24% -0.03%
==========================================
Files 1661 1663 +2
Lines 102563 102608 +45
Branches 22187 22196 +9
==========================================
- Hits 54634 54631 -3
- Misses 39877 39918 +41
- Partials 8052 8059 +7
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Walkthrough该 PR 涉及多个模块的改动，包括为包添加新的依赖（ Changes
Sequence Diagram(s)sequenceDiagram
participant T as Terminal.tsx
participant CA as computeAnsiLogString
participant FE as filterEraseMultipleLine
participant AU as ansi_up
T->>CA: 调用 computeAnsiLogString(output.text)
alt 行过滤启用
CA->>FE: 调用 filterEraseMultipleLine(logs)
end
CA->>AU: 转换日志中的 ANSI 序列为 HTML
AU-->>CA: 返回 HTML 格式日志
CA-->>T: 返回处理后的日志文本
T->>浏览器: 使用 dangerouslySetInnerHTML 渲染日志
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
yarn install v1.22.22 ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
packages/ai-native/src/browser/mcp/tools/components/computeAnsiLogString.ts (1)
1-24: 新增ANSI日志处理功能添加了用于处理ANSI转义码的
computeAnsiLogString函数，能够将终端输出的ANSI格式转换为HTML格式，提高日志可读性。函数设计合理，支持行过滤和空行处理选项。不过，有几点建议可以改进：
- 第11-13行的中文注释应该改为英文，保持代码注释语言一致性
- 可以考虑添加针对潜在XSS攻击的安全处理
- 建议为函数添加更详细的JSDoc文档注释，说明参数和返回值
- // 处理清空上行逻辑 - // 上移 cursor + 清空整行 + // Handle logic for clearing previous lines + // Move cursor up + clear entire line另外，建议为函数添加JSDoc文档：
/** * Converts ANSI escaped log content to HTML string * @param logs The log content to process * @param enableEraseLineFilter Whether to filter erase line ANSI sequences * @param hideEmptyLine Whether to hide empty lines * @returns HTML formatted log string */ export function computeAnsiLogString(logs: LogContent, enableEraseLineFilter = true, hideEmptyLine = false): string { // Function implementation... }packages/components/src/markdown-react/parse.tsx (1)
194-200: HTML 转义函数缺少类型注解新增的
htmlUnescape函数逻辑正确，但缺少 TypeScript 类型注解，这与项目的 TypeScript 使用风格不一致。建议添加类型注解：
-function htmlUnescape(htmlStr) { +function htmlUnescape(htmlStr: string): string { return htmlStr .replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec)) .replace(/&#x([0-9A-Fa-f]+);/g, (match, hex) => String.fromCharCode(parseInt(hex, 16)), ); }packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts (1)
15-67: ANSI 转义码处理逻辑完善该函数实现了对 ANSI 转义码的处理，包括清除上行、清除当前行以及处理光标移动等复杂逻辑。代码逻辑结构清晰，使用 reduce 进行状态管理也很合适。
不过建议考虑添加更多的内联注释来解释一些复杂的操作，特别是在处理多重回车符的部分（第53-60行）。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (16)
packages/ai-native/package.json(1 hunks)packages/ai-native/src/browser/chat/chat.view.tsx(1 hunks)packages/ai-native/src/browser/components/ChatToolRender.module.less(4 hunks)packages/ai-native/src/browser/components/ChatToolRender.tsx(2 hunks)packages/ai-native/src/browser/components/WelcomeMsg.tsx(1 hunks)packages/ai-native/src/browser/mcp/config/components/mcp-config.view.tsx(3 hunks)packages/ai-native/src/browser/mcp/config/mcp-config.contribution.ts(1 hunks)packages/ai-native/src/browser/mcp/tools/components/ExpandableFileList.tsx(2 hunks)packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx(2 hunks)packages/ai-native/src/browser/mcp/tools/components/computeAnsiLogString.ts(1 hunks)packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts(1 hunks)packages/ai-native/src/browser/mcp/tools/components/index.module.less(3 hunks)packages/components/src/markdown-react/parse.tsx(5 hunks)packages/connection/src/common/connection/drivers/frame-decoder.ts(1 hunks)packages/i18n/src/common/en-US.lang.ts(1 hunks)packages/i18n/src/common/zh-CN.lang.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx
[error] 76-76: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
🪛 GitHub Check: build (ubuntu-latest, 20.x)
packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts
[failure] 1-1:
The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("ansi-escapes")' call instead.
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: build-windows
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (32)
packages/ai-native/src/browser/mcp/tools/components/index.module.less (4)
98-108: 修改 .header 样式：调整 padding 和字体大小此处将 .header 的 padding 调整为 4px，并更改字体大小为 11px，有助于使整体界面看起来更紧凑。请确认这一调整与整体设计风格保持一致，避免视觉元素过于拥挤。
162-169: 更新 .command_title 的字体大小为 .command_title 新增设置了 11px 字体大小，这有助于统一组件间的文本风格。请确保该调整在各分辨率下的显示效果符合预期。
171-187: 调整 .command_content 布局及样式在 .command_content 中新增了
max-height: 200px和overflow-y: auto属性，以便在内容超出时显示滚动条；同时将 padding 调整为 2px 4px，并将字体大小改为 11px。这些修改旨在改进内容显示的紧凑性和可读性。建议在内容密集场景下验证布局是否正常，无溢出问题。
183-186: 更新嵌套 code 元素的字体大小将位于 .command_content 内嵌的 code 元素字体大小更改为 11px，确保代码块显示与整体样式一致。请确认此字体调整不会影响代码的可读性。
packages/connection/src/common/connection/drivers/frame-decoder.ts (1)
4-4:Details
✅ Verification successful
导入 setImmediate 但未在文件中直接使用
我注意到您在导入语句中添加了
setImmediate，但在提供的代码中没有看到它的使用。代码中第 90 行有一个潜在的使用位置await new Promise((resolve) => setImmediate(resolve));，建议确认是否在此或其他地方使用了这个新导入的函数。
🏁 Script executed:
#!/bin/bash # 检查文件中是否使用了 setImmediate grep -n "setImmediate" packages/connection/src/common/connection/drivers/frame-decoder.tsLength of output: 240
确认：
setImmediate已在代码中实际使用经过验证，代码中第 90 行通过
await new Promise((resolve) => setImmediate(resolve));调用了setImmediate，因此导入该函数是必要且正确的。packages/ai-native/package.json (1)
49-49: 新增依赖用于处理 ANSI 转义码新增的
ansi-escapes和ansi_up依赖将有助于处理 ANSI 转义码，尤其是在终端输出显示方面。这些库的添加表明您可能正在实现转换 ANSI 着色/格式化输出到 HTML 的功能，这对于在浏览器环境中正确显示终端输出非常有用。Also applies to: 51-51
packages/ai-native/src/browser/mcp/config/mcp-config.contribution.ts (1)
3-3:Details
✅ Verification successful
移除未使用的 Schemes 导入
从导入语句中移除了未使用的
Schemes，这是一个好的实践，可以减少不必要的依赖并提高代码清晰度。
🏁 Script executed:
#!/bin/bash # 检查文件中是否还有使用 Schemes 的地方 grep -n "Schemes" packages/ai-native/src/browser/mcp/config/mcp-config.contribution.tsLength of output: 86
代码验证通过：Schemes 导入已被正确移除
经过验证，文件
packages/ai-native/src/browser/mcp/config/mcp-config.contribution.ts中不再出现对Schemes的引用，确认该更改符合预期并提升了代码清晰度。请继续保持代码整洁，如有必要，也建议检查其他相关模块是否存在类似的问题。packages/i18n/src/common/zh-CN.lang.ts (1)
1382-1384:Details
✅ Verification successful
为 MCP 工具添加本地化条目
为 MCP 工具添加了"参数"和"返回"的本地化条目，有助于提升用户界面的本地化体验。请确保这些条目也添加到了其他语言的翻译文件中（如 en-US.lang.ts）以保持一致性。
🏁 Script executed:
#!/bin/bash # 检查英文翻译文件中是否也添加了相应的条目 grep -n "ai.native.mcp.tool.arguments\|ai.native.mcp.tool.results" packages/i18n/src/common/en-US.lang.tsLength of output: 210
本地化条目验证通过
在
packages/i18n/src/common/zh-CN.lang.ts中添加的中文条目'ai.native.mcp.tool.arguments': '参数', 'ai.native.mcp.tool.results': '返回',已在
packages/i18n/src/common/en-US.lang.ts中找到对应的英文条目：
'ai.native.mcp.tool.arguments': 'Arguments''ai.native.mcp.tool.results': 'Result'请确保在未来的翻译更新中保持其他语言文件的一致性。
packages/ai-native/src/browser/components/WelcomeMsg.tsx (1)
82-82: 添加key属性优化React组件渲染为ChatMarkdown组件添加了key属性，这符合React的最佳实践，有助于React在重新渲染时正确识别组件实例，提高渲染性能。
packages/i18n/src/common/en-US.lang.ts (1)
1619-1622: 国际化支持增强为MCP视图添加了"Arguments"和"Result"的本地化条目，使界面更加国际化友好。
packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx (2)
10-10: 引入新的ANSI日志处理功能用新的
computeAnsiLogString函数替换了旧的stripAnsi函数，增强了终端输出的展示能力。
66-66: 增加冒号改善用户界面一致性在命令标题后添加冒号，使界面文本风格更加一致，提高用户体验。
packages/ai-native/src/browser/mcp/tools/components/ExpandableFileList.tsx (2)
3-3: 添加了 Icon 组件的导入新导入的 Icon 组件用于替代原有的简单文本箭头，这是一个良好的改进，使得展开/折叠指示器的展示更加符合设计规范。
112-114: 改进的可展开列表头部图标实现将原来基于文本和 CSS 变换的箭头替换为标准的 Icon 组件实现，这样做有几个好处：
- 视觉上更加一致，符合 OpenSumi 的设计语言
- 更好的可访问性支持
- 维护性更高，与其他组件保持一致的实现方式
packages/ai-native/src/browser/mcp/config/components/mcp-config.view.tsx (3)
8-8: 引入消息通知服务添加 IMessageService 的导入为用户提供更好的错误反馈提供了基础。这是一个良好的实践，有助于改善用户体验。
23-23: 使用依赖注入获取消息服务通过 useInjectable 注入 IMessageService，符合 OpenSumi 的依赖注入模式，代码结构清晰。
93-95: 增强错误处理和用户反馈改进后的错误处理通过 messageService 向用户提供清晰的错误提示，而不仅仅是记录到日志中。这是一个很好的用户体验改进。
代码逻辑：
- 捕获错误信息
- 记录日志
- 向用户显示错误通知
packages/ai-native/src/browser/chat/chat.view.tsx (1)
785-786: 改进聊天标题设置逻辑原来的实现可能会使用任何消息（包括 AI 的回复）作为标题，现在的修改确保只使用用户自己的最新消息作为标题，这更符合用户的期望。使用
findLast方法精确查找最后一条用户消息是一个很好的实现方式。packages/ai-native/src/browser/components/ChatToolRender.tsx (6)
8-8: 添加本地化支持引入 localize 函数为工具视图添加国际化支持，这是一个很好的改进，使得应用能够更好地支持多语言环境。
68-74: 更新 CSS 类名并改进 UI 结构
- 从 styles['chat-tool-render'] 样式改为 styles.chat_tool_render 格式，保持一致性
- 添加了工具图标，使界面更加直观
- 使用 codicon-chevron 替代 codicon-triangle，与系统其他部分保持一致
这些更改使 UI 更加一致和专业。
76-78: 状态图标样式更新保持与其他样式更改一致的命名方式，对工具状态区域的样式进行了更新。
81-81: 内容区域样式更新使用了更一致的类名格式，同时保持了条件类名的应用逻辑不变。
83-85: 参数区域的本地化和样式更新
- 更新了样式类名的格式
- 替换了硬编码的 "Arguments:" 文本为本地化的字符串
这是一个很好的改进，使界面更加友好，同时支持多语言环境。
89-91: 结果区域的本地化和样式更新
- 更新了样式类名的格式
- 替换了硬编码的 "Result:" 文本为本地化的字符串
这是一个很好的改进，与参数区域的更改保持一致，增强了用户体验。
packages/components/src/markdown-react/parse.tsx (4)
62-67: 代码格式优化，提高了可读性这处修改调整了 React.cloneElement 的格式，使每个参数独占一行，这样代码结构更清晰，便于维护和阅读。
89-94: 代码结构优化，保持了一致的格式风格与前面的修改保持一致，这里同样将 React.cloneElement 调用的参数进行了格式化，使代码更加整洁、统一。
108-113: 格式优化与前面保持一致对表格行元素的 React.cloneElement 调用也应用了相同的格式改进，保持了整个代码库的格式一致性。
144-144: 使用新的 HTML 转义处理函数将原来的 HTML 实体转义处理逻辑替换为使用新增的
htmlUnescape函数，简化了代码并集中了转义逻辑。packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts (1)
3-14: 代码注释详尽清晰函数的注释非常详细地解释了 ANSI 转义码的工作原理和处理逻辑，这对于理解这段复杂代码非常有帮助。
packages/ai-native/src/browser/components/ChatToolRender.module.less (3)
1-1: CSS 类名统一更改为下划线格式将所有类名从连字符格式（kebab-case）改为下划线格式（snake_case）。这种变更应该是为了与项目中的其他命名保持一致性。确保相关的 JSX 组件中的类名引用也做了对应修改。
Also applies to: 7-7, 21-21, 29-37, 39-39, 50-50, 57-57, 63-63, 68-68, 72-72, 83-87, 89-89, 95-95
11-11: 工具头部内边距减小工具头部内边距从原来的
8px 12px减少到4px，这会使界面更加紧凑。请确认这一修改在视觉上是否合适，特别是在不同尺寸的屏幕上的显示效果。
22-22: 添加了字体大小规范为多个元素添加了明确的字体大小设置，这有助于统一界面风格。其中工具图标使用了
!important标记，确保字体大小不会被覆盖。字体大小较小（11px-12px）可能会在某些高分辨率屏幕上影响可读性。请验证这些字体大小在各种显示设备上的可读性，特别是对于视力不佳的用户。
Also applies to: 30-30, 85-86
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts (4)
19-27: 函数入口和初始设置逻辑合理常量定义和正则表达式的构建符合功能需求。不过，为提高性能，可以考虑将正则表达式定义在函数外部作为模块常量，避免每次调用时重新编译。
+const moveCursorToLeftRegStrs = ['\\r', '\\u001b\\[G', '\\u001b\\[1G']; +const moveCursorToLeftRegExp = new RegExp(`${moveCursorToLeftRegStrs.join('|')}`); 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('|')}`);
28-42: 清空上行逻辑实现正确，但考虑性能优化当前实现使用
indexOf循环查找eraseLastLine序列，对于非常长的日志行可能会有性能问题。考虑使用正则表达式一次性匹配所有出现位置，或者使用更高效的字符串搜索算法。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; - } - } + // 计算需要清空的上行数量 + const eraseLastLinePattern = new RegExp(eraseLastLine.replace(/[\[\]]/g, '\\$&'), 'g'); + const matches = nowLine.match(eraseLastLinePattern) || []; + + // 每匹配到一个清空上行序列，就删除一个已累积的行 + for (let i = 0; i < matches.length; i++) { + acc.pop(); + } + + // 移除所有清空上行序列 + nowLine = nowLine.replace(eraseLastLinePattern, '');
57-64: 多回车处理逻辑较复杂，但实现正确处理多个回车字符的逻辑实现了终端模拟显示的效果，但逻辑较为复杂。建议添加更详细的注释或示例来解释这段代码的工作原理，尤其是
reduce函数中左右部分的拼接逻辑。// 处理多 \r 情况，当 \r 连续时，切分出的空字段无用，过滤掉 const carriageRewrites = nowLine.split(moveCursorToLeftRegStr).filter((part) => !!part); if (carriageRewrites.length > 1) { + // 模拟终端显示效果：每次回车后的内容会覆盖行首相应长度的内容 + // 例如："abc\rde" 将显示为 "dec"，因为 "de" 覆盖了 "ab" nowLine = carriageRewrites.reduce((nextNowLine, nowPart) => { const leftPart = nextNowLine.slice(nowPart.length); return nowPart + leftPart; }, ''); }
1-71: 建议添加输入验证函数缺少对输入参数的验证。建议添加对
logs参数的类型和空值检查，以提高代码的健壮性。export default function filterEraseMultipleLine(logs: string[]) { + // 输入验证 + if (!logs || !Array.isArray(logs)) { + return []; + } // 上移 cursor + 清空整行 const eraseLastLine = cursorUp(1) + eraseLine;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (3)
packages/ai-native/package.json(1 hunks)packages/ai-native/src/browser/mcp/tools/components/ExpandableFileList.tsx(2 hunks)packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/ai-native/package.json
- packages/ai-native/src/browser/mcp/tools/components/ExpandableFileList.tsx
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: build-windows
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (5)
packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts (5)
1-5: ANSI 转义序列常量定义清晰且功能明确常量和辅助函数的定义遵循了良好的实践，使代码更具可读性和可维护性。
7-18: 详细的函数文档增强了代码的可理解性注释清晰地解释了ANSI转义序列的工作原理和处理逻辑，这对于维护和理解这段复杂的代码非常有价值。
44-55: 清空当前行的处理逻辑合理代码正确处理了两种清空当前行的情况，实现符合注释中的描述。代码易于理解且实现正确。
66-71: 函数收尾部分逻辑清晰累积处理后的行并返回结果，实现简洁明了。
1-71: 确认与先前导入兼容性问题的解决此实现不再直接导入
ansi-escapes模块，而是自行实现了必要的ANSI转义序列处理逻辑，有效解决了先前审阅中提到的模块兼容性问题。此解决方案更加自包含，减少了外部依赖。
2 participants
Types
Background or solution
Changelog
Summary by CodeRabbit
新功能
样式