feat: replace static API Request label with customizable animated indicator #7524
Conversation
…icator - Add AnimatedStatusIndicator component with pulsing animation - Support customizable status texts and emoji mode - Add settings UI for configuring the animated indicator - Include random mode to cycle through messages - Add CSS animations for subtle pulse effect - Integrate with ChatRow to replace static label Implements #7523
dosubot
bot
added
size:L
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| <VSCodeCheckbox | ||
| checked={localConfig.enabled} | ||
| onChange={(e: any) => setLocalConfig((prev) => ({ ...prev, enabled: e.target.checked }))}> | ||
| Enable animated status indicator |
There was a problem hiding this comment.
Missing i18n for these UI strings. All user-facing text should use the translation system:
| Enable animated status indicator | |
| {t('settings:animatedStatus.enable')} |
This applies to lines 90, 104, 110, 127, 168, and 174 as well.
| cost?: number | null | ||
| cancelReason?: string | null | ||
| apiRequestFailedMessage?: string | ||
| streamingFailedMessage?: string |
There was a problem hiding this comment.
Is this streamingFailedMessage prop intentional? It's defined but never used in the component. Could we either use it or remove it to avoid confusion?
| <div className="flex items-center gap-2"> | ||
| <VSCodeCheckbox | ||
| checked={localConfig.enabled} | ||
| onChange={(e: any) => setLocalConfig((prev) => ({ ...prev, enabled: e.target.checked }))}> |
There was a problem hiding this comment.
Could we improve type safety here? Using any for event handlers reduces TypeScript's ability to catch errors:
| onChange={(e: any) => setLocalConfig((prev) => ({ ...prev, enabled: e.target.checked }))}> | |
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => setLocalConfig((prev) => ({ ...prev, enabled: e.target.checked }))} |
| } | ||
|
|
||
| return ( | ||
| <div className="flex items-center gap-2"> |
There was a problem hiding this comment.
Consider adding ARIA labels for better accessibility. Screen readers won't know what this animated indicator represents:
| <div className="flex items-center gap-2"> | |
| <div className="flex items-center gap-2" role="status" aria-label="Loading status"> |
| streamingFailedMessage?: string | ||
| } | ||
|
|
||
| const DEFAULT_STATUS_TEXTS = ["Generating...", "Thinking...", "Working on it...", "Processing...", "Analyzing..."] |
There was a problem hiding this comment.
These default constants are duplicated in AnimatedStatusSettings.tsx. Could we extract them to a shared constants file to maintain a single source of truth?
| const [newStatusText, setNewStatusText] = useState("") | ||
| const [newEmoji, setNewEmoji] = useState("") | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
This useEffect triggers on every localConfig change. Since setApiStatusConfig is likely stable, we could optimize by removing it from the dependency array or using useCallback for a more targeted update.
hannesrudolph
added
the
Issue/PR - Triage
|
Closing, see #7523 (comment) |
Fixes #7523
Summary
This PR replaces the static "API Request" label with a customizable, animated "Generating..." indicator that provides better visual feedback during API requests.
Changes
AnimatedStatusIndicatorcomponent with subtle pulsing animationChatRowto replace the static labelFeatures
Testing
Screenshots
The animated indicator provides visual feedback during API requests with customizable messages and optional emojis.
Related Issue
Closes #7523
Important
Replaces static API request label with
AnimatedStatusIndicator, adding customizable animations and settings integration.AnimatedStatusIndicatorinChatRow.tsx.AnimatedStatusIndicatorinAnimatedStatusIndicator.tsxshows customizable, animated status during API requests.AnimatedStatusSettingsinAnimatedStatusSettings.tsxfor configuring status indicator.ExperimentalSettings.tsxandSettingsView.tsx.apiStatusConfigtoExtensionStateContext.tsxfor managing indicator settings.pulse-subtleinindex.cssfor subtle pulsing effect.This description was created by
for 4ed2a3d. You can customize this summary. It will automatically update as commits are pushed.