Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve MCP Server edit UX and i18n #4455

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

erha19
Copy link
Member

@erha19 erha19 commented Mar 8, 2025

Types

  • 🎉 New Features

Background or solution

  1. 优化启动/停止的 Loading 交互
  2. 优化中文内容
  3. 移动工作区的 MCP Server 配置至用户配置

Changelog

improve MCP Server edit UX and i18n

Summary by CodeRabbit

  • 新功能

    • 优化聊天标题显示逻辑,仅依据用户最新消息展示标题。
    • 更新工具界面,引入本地化文本与新增图标,提升国际化支持。
    • 改进服务器管理功能:新增加载状态反馈和更严格的表单验证,提高错误提示准确性。
    • 增加多语言提示,完善 MCP 功能相关信息。
  • 样式

    • 调整内边距、字体大小及图标样式,实现更一致的界面设计。
  • 重构

    • 优化部分逻辑与代码结构,提升性能和可读性。

@erha19 erha19 requested review from life2015, Aaaaash and Ricbet March 8, 2025 04:41
@opensumi opensumi bot added the 🎨 feature feature required label Mar 8, 2025
Copy link

codecov bot commented Mar 8, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 53.26%. Comparing base (7cfc321) to head (9636b25).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4455      +/-   ##
==========================================
- Coverage   53.27%   53.26%   -0.01%     
==========================================
  Files        1661     1661              
  Lines      102535   102535              
  Branches    22188    22180       -8     
==========================================
- Hits        54626    54620       -6     
- Misses      39861    39866       +5     
- Partials     8048     8049       +1     
Flag Coverage Δ
jsdom 48.75% <ø> (-0.01%) ⬇️
node 12.20% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Aaaaash and others added 3 commits March 8, 2025 15:01
* refactor: update class naming conventions in ChatToolRender and improve localization support

* fix: html unescape

* refactor: simplify MCPConfigContribution by removing unused dependencies and services

* chore: use latest user message as chat title
@Aaaaash
Copy link
Member

Aaaaash commented Mar 8, 2025

/next

@Aaaaash
Copy link
Member

Aaaaash commented Mar 8, 2025

/next

@opensumi
Copy link
Contributor

opensumi bot commented Mar 8, 2025

🎉 PR Next publish successful!

3.8.2-next-1741418699.0

@Aaaaash Aaaaash changed the base branch from v3.8 to main March 10, 2025 03:50
Copy link
Contributor

coderabbitai bot commented Mar 10, 2025

Walkthrough

本次 PR 涉及多个组件的修改。Chat view 组件调整了标题生成逻辑,以便使用最后一条用户消息作为标题。ChatToolRender 组件及其样式文件统一更新了 CSS 命名规则,并引入本地化支持和图标更改。MCP 配置视图新增了 loadingServer 状态和错误提示处理,并对服务器表单的提交和验证逻辑进行了重构,将验证过程独立成单一函数。Markdown 解析逻辑优化了 React.cloneElement 引用格式和 HTML 转义的实现,同时新增了 MCP 相关的本地化字符串支持。

Changes

文件路径 更改摘要
packages/ai-native/src/browser/chat/chat.view.tsx 修改 DefaultChatViewHeader 函数,改为通过查找最后一条用户消息来设置标题。
packages/ai-native/src/browser/components/ChatToolRender.* 样式文件中将 CSS 类选择器从连字符格式改为下划线格式,并调整部分样式属性;组件文件中引入 localize 函数,更改类名引用格式和图标,同时用本地化字符串替换静态文本。
packages/ai-native/src/browser/mcp/config/components/mcp-config.view.tsx 新增 loadingServer 状态和 messageService 引用,更新服务器控制逻辑,通过本地化改善提示信息。
packages/ai-native/src/browser/mcp/config/components/mcp-server-form.tsx 重构 handleSubmit 函数为 memo 化形式,并提取独立的 validateForm 函数,对表单各字段进行验证,失败时通过 messageService 提示错误,成功后重置表单。
packages/ai-native/src/browser/mcp/config/mcp-config.contribution.ts 修改 import,移除未使用的 Schemes 引用。
packages/components/src/markdown-react/parse.tsx 重构 React.cloneElement 调用格式,移除 unescapeInfo Map,新增 htmlUnescape 函数处理 HTML 转义。
packages/i18n/src/common/en-US.lang.tspackages/i18n/src/common/zh-CN.lang.ts 新增 MCP 相关本地化字符串,包括连接管理、状态标签及工具参数和结果的描述。

Sequence Diagram(s)

sequenceDiagram
    participant U as 用户
    participant MCPView as MCPConfigView
    participant API as 服务器接口
    participant MS as MessageService

    U->>MCPView: 点击服务器控制按钮(启动/停止)
    MCPView->>MCPView: 设置 loadingServer 状态
    MCPView->>API: 发起服务器控制请求
    API-->>MCPView: 返回操作结果
    alt 请求失败
        MCPView->>MS: 发送错误消息
    end
    MCPView->>MCPView: 清除 loadingServer 状态
Loading
sequenceDiagram
    participant U as 用户
    participant Form as MCPServerForm
    participant VF as validateForm
    participant MS as MessageService
    participant Save as onSave 回调

    U->>Form: 填写表单并提交
    Form->>VF: 调用 validateForm 进行验证
    alt 验证失败
        VF->>MS: 返回错误提示
    else 验证通过
        VF-->>Form: 返回验证结果
        Form->>Form: 重置表单数据
        Form->>Save: 调用 onSave 提交数据
    end
Loading

Possibly related PRs

Suggested reviewers

  • Ricbet

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

yarn install v1.22.22
[1/4] Resolving packages...
warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning eslint-import-resolver-typescript > [email protected]: Glob versions prior to v9 are no longer supported
error Couldn't find any versions for "@opensumi/ide-dev-tool" that matches "workspace:*"
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7cfc321 and 9636b25.

📒 Files selected for processing (9)
  • 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/mcp/config/components/mcp-config.view.tsx (9 hunks)
  • packages/ai-native/src/browser/mcp/config/components/mcp-server-form.tsx (1 hunks)
  • packages/ai-native/src/browser/mcp/config/mcp-config.contribution.ts (1 hunks)
  • packages/components/src/markdown-react/parse.tsx (5 hunks)
  • packages/i18n/src/common/en-US.lang.ts (1 hunks)
  • packages/i18n/src/common/zh-CN.lang.ts (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
  • GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
  • GitHub Check: build (ubuntu-latest, 20.x)
  • GitHub Check: unittest (ubuntu-latest, 18.x, node)
  • GitHub Check: build-windows
  • GitHub Check: unittest (macos-latest, 18.x, jsdom)
  • GitHub Check: build (macos-latest, 20.x)
  • GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (35)
packages/ai-native/src/browser/mcp/config/mcp-config.contribution.ts (1)

3-3: 移除了未使用的导入模块

导入语句中移除了 Schemes,由于代码中未使用此模块,这是一个很好的清理操作。

packages/ai-native/src/browser/chat/chat.view.tsx (1)

785-786: 改进了聊天标题的生成逻辑

现在使用 findLast 方法查找最后一条用户消息作为标题,这比之前仅取第一条消息更能体现当前对话的上下文。如果没有找到用户消息,则使用空字符串作为标题。

packages/ai-native/src/browser/components/ChatToolRender.tsx (4)

8-8: 引入国际化支持

添加了 localize 函数的导入,为组件添加了国际化支持。


68-74: 统一了 CSS 命名规则和图标更新

  1. 将 CSS 类名引用从方括号表示法 (styles['chat-tool-render']) 更改为点表示法 (styles.chat_tool_render),使代码风格更加统一。
  2. 将三角形图标更改为chevron图标,并添加了工具小图标,提升了视觉体验。

84-84: 添加了"参数"标签的国际化支持

将硬编码的"Arguments"文本替换为使用 localize 函数,提高了应用的国际化支持。


90-90: 添加了"结果"标签的国际化支持

将硬编码的"Result"文本替换为使用 localize 函数,提高了应用的国际化支持。

packages/components/src/markdown-react/parse.tsx (5)

62-68: 改进了 React.cloneElement 的代码格式

React.cloneElement 调用重新格式化为多行形式,提高了代码的可读性,同时保持了功能不变。


89-94: 改进了表头行的 React.cloneElement 格式

将表头行的 React.cloneElement 调用重新格式化为多行形式,使代码结构更加清晰。


108-114: 改进了表体行的 React.cloneElement 格式

将表体行的 React.cloneElement 调用重新格式化为多行形式,保持了代码风格的一致性。


144-144: 简化了 HTML 转义处理

使用新定义的 htmlUnescape 函数替代原来的映射表,简化了代码逻辑。


194-200: 添加了 HTML 转义字符处理函数

添加了 htmlUnescape 函数,用于将 HTML 字符引用转换为对应的字符,确保文本令牌在处理前能正确解码。

packages/i18n/src/common/en-US.lang.ts (1)

1618-1624: 添加了 MCP 相关的国际化字符串,这很好!

这些新增的字符串为 MCP (Model Context Protocol) 功能提供了良好的国际化支持,使 UI 界面能够显示正确的本地化文本。这与 PR 中提到的改进 i18n 目标一致。

packages/i18n/src/common/zh-CN.lang.ts (1)

1381-1387: 国际化文本添加很好,提升了 MCP 服务器管理的用户体验。

新增的本地化字符串使 MCP 服务器管理界面更加友好,特别是"运行中"和"已停止"状态指示对用户非常直观。

packages/ai-native/src/browser/mcp/config/components/mcp-config.view.tsx (12)

7-8: 导入更新提高了代码功能。

添加 PreferenceScopeIMessageService 的导入使组件能够更好地处理用户偏好设置和消息提示。


21-21: 很好地注入了消息服务。

使用 useInjectable 注入 IMessageService 使组件能够向用户展示友好的错误提示。


27-27: 加载状态追踪很有用。

添加 loadingServer 状态可以在操作过程中提供视觉反馈,改善用户体验。


47-48: 操作前后设置加载状态,增强了用户体验。

在服务器控制操作开始时设置 loadingServer 状态,使 UI 能够反映当前正在处理的服务器。


91-91: 正确设置用户级别的偏好。

使用 PreferenceScope.User 确保服务器配置保存在用户范围内,这样不同用户可以有不同的配置。


93-98: 完善的错误处理和状态重置。

操作完成后重置加载状态并通过消息服务展示错误,这种方式更加用户友好。


127-127: 用户级别偏好设置的一致性。

在删除服务器时同样使用 PreferenceScope.User,保持了与添加和更新操作的一致性。


146-146: 用户级别偏好设置的一致性。

在保存服务器时使用 PreferenceScope.User,确保所有偏好设置操作都在同一范围内。


170-170: 使用本地化字符串提升国际化支持。

使用 localize 函数获取连接管理的描述文本,支持多语言环境。


173-173: 按钮文本本地化。

使用 localize 函数获取添加服务器按钮的文本,提升了国际化支持。


194-202: 按钮加载状态视觉反馈。

根据 loadingServer 状态动态更改图标,提供明确的视觉反馈,提升用户体验。


215-215: 状态文本本地化。

使用 localize 函数获取服务器状态文本,支持多语言环境。

packages/ai-native/src/browser/mcp/config/components/mcp-server-form.tsx (2)

70-97: 表单验证逻辑提取优化了代码结构。

将验证逻辑从提交函数中分离出来,形成独立的 validateForm 函数,使代码更加清晰和可维护。验证过程包含了必要的检查,如名称不能为空、服务器名称不能重复、SSE 类型需要有效的服务器主机等。使用 messageService 展示错误信息提升了用户体验。


99-138: 提交函数重构增强了代码质量。

使用 useCallback 优化性能,添加了表单重置逻辑,并在验证通过后再处理数据。这种结构使代码更易于理解和维护。

packages/ai-native/src/browser/components/ChatToolRender.module.less (8)

1-1: CSS 类命名规范统一。

将类名从连字符格式 .chat-tool-render 改为下划线格式 .chat_tool_render,统一了样式命名规范。


7-11: 工具头部样式优化。

.tool-header 改为 .tool_header 并减小了内边距,使工具展示更加紧凑和精致。


21-27: 工具名称样式增强。

.tool_name 添加了字体大小设置,使界面更加统一和专业。


29-37: 新增图标和标签样式。

添加了 .tool_icon.tool_label 类,为工具提供了更丰富的视觉元素,增强了用户界面的可读性。


39-39: 展开图标样式统一命名。

.expand-icon 更改为 .expand_icon,保持命名风格一致性。


83-87: 参数和结果区域样式优化。

调整了 .tool_arguments.tool_result 的字体大小和内边距,使内容展示更加精致。


89-93: 部分标签样式统一命名。

.section-label 更改为 .section_label,保持命名风格一致性。


95-97: 工具结果区域样式统一命名。

.tool-result 更改为 .tool_result,保持命名风格一致性。

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 feature feature required
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants