fix: add fold-code button when code is expand #5554
Conversation
|
@code-october is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes involve updates to the rendering logic of the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 0
🧹 Outside diff range and nitpick comments (3)
app/components/markdown.tsx (1)
199-205: LGTM! Consider adding aria-label for accessibility.The changes successfully implement the fold-code button functionality as described in the PR objectives. The button now appears whenever
showToggleis true, allowing users to collapse expanded code.Consider adding an
aria-labelto the button for better accessibility:<button onClick={toggleCollapsed} + aria-label={collapsed ? "Show more code" : "Show less code"} > {collapsed ? Locale.NewChat.More : Locale.NewChat.Less} </button>app/locales/tw.ts (1)
510-510: Approve with a minor suggestion for improvementThe addition of the "Less" translation is correct and aligns with the PR objectives. However, I suggest a small improvement to make it more precise:
- Less: "收合程式", + Less: "收合代碼",This change from "收合程式" (collapse program) to "收合代碼" (collapse code) more accurately reflects the functionality of collapsing code snippets rather than an entire program.
app/locales/en.ts (1)
691-691: LGTM! Consider a more descriptive key name.The addition of the "Fold Code" text for the collapse button is correct and aligns with the PR objectives. However, the key name "Less" might be a bit ambiguous without context.
Consider using a more descriptive key name, such as "FoldCode" or "CollapseCode", to improve clarity and maintainability. For example:
- Less: "Fold Code", + FoldCode: "Fold Code",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- app/components/markdown.tsx (1 hunks)
- app/locales/cn.ts (1 hunks)
- app/locales/en.ts (1 hunks)
- app/locales/tw.ts (1 hunks)
- app/styles/globals.scss (1 hunks)
🔇 Additional comments (4)
app/styles/globals.scss (1)
334-334: LGTM: Improved layout for expanded code blocksThe addition of
justify-content: flex-end;to the.expandedclass is appropriate and aligns with the PR objective of adding a fold-code button when code is expanded. This change ensures that the content within expanded code blocks is aligned to the end of the container, which likely improves the positioning of the fold-code button.app/locales/cn.ts (1)
683-683: LGTM! The new translation entry is consistent and accurate.The addition of
Less: "折叠代码"(which translates to "Collapse code" in English) is consistent with the existing structure of theNewChatobject and accurately represents the functionality described in the PR objectives. This new entry will enable users to collapse expanded code snippets, improving the user experience as intended.app/locales/en.ts (2)
Line range hint
1-694: Summary: Minimal change with no negative impact.The change introduces a new locale string for the "Fold Code" functionality, which aligns with the PR objectives. The addition is minimal and doesn't affect the overall structure or integrity of the locale file. The implementation is correct, although there are minor suggestions for improvement in terms of key naming and placement.
691-691: Verify the placement and usage of the new string.The new "Fold Code" string is added to the
NewChatsection. However, based on the PR objectives, this button appears when code is expanded, which might occur in various parts of the application, not just in new chats.Could you please confirm if this string is only used in the context of new chats, or if it's a general-purpose string used throughout the application? If it's the latter, consider moving it to a more general section of the locale object for better organization and easier maintenance.
To help verify this, you can run the following script to search for usages of this new locale string:
This will help us understand where and how the new string is being used across the application.
✅ Verification successful
The placement of the "Fold Code" string is verified and appropriate.
Currently, "Fold Code" is only defined in theNewChatsection of the locale object and is not used elsewhere in the application. This placement aligns with its intended use for the button that appears when code is expanded within new chats.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Search for usages of the new "Less" locale string # Test: Search for "Less" usage in TypeScript and JavaScript files rg --type-add 'web:*.{ts,tsx,js,jsx}' --type web -i 'Less.*["|'\'']Fold Code' ./appLength of output: 128
|
Your build has completed! |
|
查看全部在顶部，居中。 |
See all at the top, centered. |
|
@lloydzhou 我移动到右上角，主要是担心提示文字居中会遮挡代码，影响阅读代码观感，这再加上遮罩，感觉观感更差了 ？ |
I moved it to the upper right corner, mainly because I was worried that the centering of the prompt text would block the code and affect the look and feel of reading the code. Coupled with the mask, the look and feel would be worse? |
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
Add a collapse code button when expanding the code to support toggling the code's collapsed state at any time.
📝 补充信息 | Additional Information
Relevant issue：#5284
Summary by CodeRabbit
New Features
Style