Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: support auto scroll code block on chat #4547

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
May 14, 2025
Merged

feat: support auto scroll code block on chat #4547

merged 5 commits into from
May 14, 2025

Conversation

erha19
Copy link
Member

@erha19 erha19 commented May 13, 2025 •
edited by coderabbitai bot
Loading

Types

  • 🎉 New Features
  • 💄 Style Changes

Background or solution

  1. 当 chat 代码块输出时，自动吸底
  2. 优化 SCM 面板提交按钮样式
    Before：
    image
    After：
image image

解决 Markdown 文本被 HTML 转义的问题
image

Changelog

support auto scroll code block on chat

Summary by CodeRabbit

  • 新功能

    • 按钮组件新增可选属性，支持控制加载动画的显示与否。

  • 样式

    • 优化代码编辑器高亮区域的滚动体验，自动滚动至最新内容。
    • 按钮加载中时，相关的次级按钮将被禁用并有相应视觉提示。
    • 代码高亮样式类名调整，提升样式一致性。

  • 其他

    • 移除无用的代码导入，提升代码整洁度。
    • 统一和优化了聊天组件中Markdown解析的默认选项配置。

@opensumi opensumi bot added the 🎨 feature feature required label May 13, 2025
@erha19
Copy link
Member Author

erha19 commented May 13, 2025

/next

@coderabbitai coderabbitai
Copy link
Contributor

coderabbitai bot commented May 13, 2025 •
edited
Loading

"""

Walkthrough

本次更改主要涉及前端组件和样式的调整，包括为按钮组件引入可选的 loading 图标显示控制、优化代码编辑器的滚动行为、调整 CSS 类名和样式、统一 ChatMarkdown 组件的 markdown 解析选项，以及移除部分未使用的导入。未涉及导出实体签名的更改。

Changes

文件/分组 变更摘要
packages/components/src/button/index.tsx 新增 showLoadingIcon?: boolean 属性，允许控制按钮加载时是否显示 loading 图标，默认值为 true。调整按钮渲染逻辑以支持该属性。
packages/core-browser/src/components/actions/index.tsx 在 InlineActionWidget 组件中的 Button 增加 showLoadingIcon={false}，以禁用 loading 图标。
packages/ai-native/src/browser/components/ChatEditor.tsx CodeEditorWithHighlight 新增自动滚动至底部的逻辑，调整高亮组件的类名，优化 CodeBlockWrapper 的解构顺序。
packages/ai-native/src/browser/components/components.module.less .monaco_wrapper 下的 .editor 类名重命名为 .highlight_editor，其余样式保持不变，移除顶部注释。
packages/ai-native/src/browser/components/utils.ts 移除未使用的 IChatReplyFollowup 导入。
packages/ai-native/src/browser/components/ChatMarkdown.tsx 统一构建并使用 markdown 解析选项，合并默认配置和用户配置，显式禁用部分选项，确保解析行为一致。
packages/scm/src/browser/scm.module.less 为 .scm 下的 .secondary-button 增加在主按钮 loading 时的禁用样式，使用全局选择器和变量。

Sequence Diagram(s)

sequenceDiagram
    participant 用户
    participant InlineActionWidget
    participant Button

    用户->>InlineActionWidget: 触发操作
    InlineActionWidget->>Button: 渲染 Button (loading, showLoadingIcon=false)
    Button-->>InlineActionWidget: 按需显示/隐藏 loading 图标
Loading 
sequenceDiagram
    participant 用户
    participant CodeEditorWithHighlight
    participant 代码高亮区域

    用户->>CodeEditorWithHighlight: 输入内容
    CodeEditorWithHighlight->>代码高亮区域: 更新内容
    CodeEditorWithHighlight->>代码高亮区域: 自动滚动至底部
Loading

Possibly related PRs

  • fix: markdown html link render error #4119: 修改了 ChatMarkdown 组件的 markdown 渲染逻辑，调整了自定义链接渲染和 HTML 渲染方式，与本次对 ChatMarkdown 解析选项统一的改动存在代码层面关联。

Suggested labels

🎨 feature

Suggested reviewers

  • Aaaaash
    """

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.

Tip

⚡️ Faster reviews with caching
  • CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

📜 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 1142c0b and 17bc065.

📒 Files selected for processing (1)
  • packages/ai-native/src/browser/components/ChatMarkdown.tsx (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
  • GitHub Check: 🚀🚀🚀 Next Version for pull request
  • GitHub Check: build (ubuntu-latest, 20.x)
  • GitHub Check: build (macos-latest, 20.x)
  • GitHub Check: build-windows
  • GitHub Check: unittest (ubuntu-latest, 18.x, node)
  • GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
  • GitHub Check: unittest (macos-latest, 18.x, jsdom)
  • GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (2)
packages/ai-native/src/browser/components/ChatMarkdown.tsx (2)

63-70: 优化了 Markdown 解析选项的配置方式

当前改动通过合并 marked.defaults 和 props.markedOptions 来创建 markedOptions，同时明确禁用了某些 marked 功能（mangle, headerIds, smartypants）。这种方式可以确保始终应用一致的默认选项，同时保留用户提供的自定义覆盖。

这是一个很好的改进，因为它使得 Markdown 渲染选项在整个组件中更加一致可预测。

88-88: 统一了 marked 解析器选项的使用

将 tokens 的生成也修改为使用统一的 markedOptions，确保了在不同条件分支中使用相同的解析配置。这样可以保证不管是否需要补全不完整的标记，都能得到一致的渲染效果。

✨ 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.
    • Explain this complex logic.
    • 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 explain this code block.
    • @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 explain its main purpose.
    • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate sequence diagram to generate a sequence diagram of the changes in 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.

@opensumi
Copy link
Contributor

opensumi bot commented May 13, 2025

🎉 PR Next publish successful!

3.8.3-next-1747129752.0

@codecov Codecov
Copy link

codecov bot commented May 13, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 52.88%. Comparing base (b838b53) to head (17bc065).
Report is 2 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #4547      +/-   ##
==========================================
- Coverage   52.88%   52.88%   -0.01%     
==========================================
  Files        1677     1677              
  Lines      103358   103358              
  Branches    22391    22383       -8     
==========================================
- Hits        54662    54657       -5     
- Misses      40516    40521       +5     
  Partials     8180     8180
Flag Coverage Δ
jsdom 48.38% <ø> (-0.01%) ⬇️
node 12.06% <ø> (ø)

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.

@erha19
Copy link
Member Author

erha19 commented May 14, 2025

/next

@opensumi
Copy link
Contributor

opensumi bot commented May 14, 2025

🎉 PR Next publish successful!

3.8.3-next-1747189218.0

@erha19 erha19 merged commit 197a201 into main May 14, 2025
14 of 18 checks passed
@erha19 erha19 deleted the fix/auto-scroll-code-block branch May 14, 2025 03:45
@coderabbitai coderabbitai bot mentioned this pull request May 14, 2025
Merged
2 tasks
@erha19 erha19 mentioned this pull request May 20, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Aaaaash Aaaaash Aaaaash approved these changes

@Ricbet Ricbet Ricbet approved these changes

@life2015 life2015 Awaiting requested review from life2015

@ensorrow ensorrow Awaiting requested review from ensorrow

Assignees
No one assigned
Labels
🎨 feature feature required
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@erha19 @Aaaaash @Ricbet