feat: add rate limit countdown UI with neutral loading state #7923
Conversation
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
- Created RateLimitCountdown component to display rate limit messages - Shows spinner with countdown timer and retry attempt info - Uses neutral styling instead of error colors - Added translations for rate limit messages - Updated ChatRow to properly handle api_req_retry_delayed messages Fixes #7922
dosubot
bot
added
size:L
| const isRetryingNow = message.toLowerCase().includes("retrying now") | ||
|
|
||
| return ( | ||
| <div |
There was a problem hiding this comment.
This component uses extensive inline styles instead of Tailwind CSS classes. Is this intentional? The rest of the codebase follows the Tailwind convention (as mentioned in the rules), so it would be more consistent to use classes like instead of inline styles.
| isRetrying?: boolean | ||
| } | ||
|
|
||
| export const RateLimitCountdown: React.FC<RateLimitCountdownProps> = ({ message, isRetrying = false }) => { |
There was a problem hiding this comment.
The prop is passed in but never actually used in the component logic. Only is checked for determining the title. Could we either remove this prop or use it as intended?
| // Parse the message to extract countdown seconds and retry attempt info | ||
| const { seconds, attemptInfo } = useMemo(() => { | ||
| // Match patterns like "Retrying in X seconds" or "Rate limiting for X seconds" | ||
| const secondsMatch = message.match(/(\d+)\s+second/i) |
There was a problem hiding this comment.
These regex patterns might fail with unexpected message formats. Could we add more robust parsing or fallback behavior? For example:
| isRetrying?: boolean | ||
| } | ||
|
|
||
| export const RateLimitCountdown: React.FC<RateLimitCountdownProps> = ({ message, isRetrying = false }) => { |
There was a problem hiding this comment.
Since this component will re-render frequently with countdown updates, could we wrap it in to improve performance? The component only needs to re-render when the message prop actually changes.
| maxHeight: "200px", | ||
| overflowY: "auto", | ||
| }}> | ||
| {message.split("\n\n")[0]} |
There was a problem hiding this comment.
This logic for extracting error details seems fragile. The component splits by "
" and shows the first part, but is this guaranteed to contain the actual error details? Could we make this more explicit or add a comment explaining the expected message format?
| @@ -0,0 +1,113 @@ | |||
| import React, { useMemo } from "react" | |||
There was a problem hiding this comment.
Missing test coverage for this new component. Could we add tests to verify:
- Correct parsing of countdown seconds
- Proper display of retry attempts
- Transition to "Retrying now..." state
- Error details expansion/collapse behavior
- Added rate limit translations to all locale files - Ensures consistency across all supported languages
hannesrudolph
added
the
Issue/PR - Triage
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| @@ -390,5 +390,15 @@ | |||
| "slashCommand": { | |||
| "wantsToRun": "Roo 想要執行斜線指令:", | |||
| "didRun": "Roo 執行了斜線指令:" | |||
| }, | |||
| "rateLimit": { | |||
There was a problem hiding this comment.
The new translation keys 'rateLimit' and 'rateLimitRetry' (lines 394-403) still contain English strings. Please provide proper Traditional Chinese translations to maintain localization consistency.
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
|
Here's how it looks now Also I see the word "retry" a lot, this could be way more compact. |
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Needs Review]
in Roo Code Roadmap
daniel-lxs
moved this from PR [Needs Review]
to PR [Changes Requested]
in Roo Code Roadmap
hannesrudolph
added
PR - Changes Requested
and removed
PR - Needs Preliminary Review
labels
Fixes #7922
Summary
This PR improves the UI display when rate limits are triggered by replacing error-like text with a neutral loading state that includes a spinner and countdown timer.
Changes
RateLimitCountdowncomponent to display rate limit messages with neutral stylingChatRowcomponent to properly handleapi_req_retry_delayedmessagesTesting
Screenshots
The new component displays:
This provides a much better user experience compared to the previous error-like display.
Important
Adds
RateLimitCountdowncomponent for neutral rate limit UI with spinner and countdown, updatingChatRowand translations.RateLimitCountdowncomponent inRateLimitCountdown.tsxto display rate limit messages with a spinner and countdown timer.ChatRow.tsxto handleapi_req_retry_delayedmessages usingRateLimitCountdown.chat.jsonforca,de, anden.This description was created by
for 7c1dc63. You can customize this summary. It will automatically update as commits are pushed.