Skip to content

Refactor chat input animation and improve border color visibility#311873

Merged
mrleemurray merged 3 commits intomainfrom
mrleemurray/then-fuchsia-tortoise
Apr 22, 2026
Merged

Refactor chat input animation and improve border color visibility#311873
mrleemurray merged 3 commits intomainfrom
mrleemurray/then-fuchsia-tortoise

Conversation

@mrleemurray
Copy link
Copy Markdown
Contributor

Enhance the chat input animation to feature a comet-like border effect while processing requests. Update border colors for better visibility in different themes. Adjust comments for clarity.

Copilot AI review requested due to automatic review settings April 22, 2026 09:46
@mrleemurray mrleemurray enabled auto-merge (squash) April 22, 2026 09:46
@mrleemurray mrleemurray self-assigned this Apr 22, 2026
alexdima
alexdima previously approved these changes Apr 22, 2026
@github-actions
Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: 200fb2ed Current: 5b0964d4

Changed (1)

editor/inlineCompletions/other/JumpToHint/Dark
Before After
before after

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refactors the in-flight chat input progress border animation to a “border beam”/comet effect and adjusts theme color defaults to improve border visibility across themes.

Changes:

  • Updated chat.inputWorkingBorderColor1 default values for dark/light themes.
  • Replaced the prior multi-stop rotating gradient + animated glow with a two-layer (::before beam + ::after glow) conic-gradient animation.
  • Updated CSS comments to reflect the new effect and implementation details.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File Description
src/vs/workbench/contrib/chat/common/widget/chatColors.ts Tweaks default working-border color stop 1 for better visibility.
src/vs/workbench/contrib/chat/browser/widget/media/chat.css Implements the new comet-like border beam animation and glow using pseudo-elements and a rotating custom property.

Comment thread src/vs/workbench/contrib/chat/browser/widget/media/chat.css
Comment thread src/vs/workbench/contrib/chat/browser/widget/media/chat.css Outdated
Comment thread src/vs/workbench/contrib/chat/browser/widget/media/chat.css
@mrleemurray mrleemurray merged commit 95f4dfa into main Apr 22, 2026
26 checks passed
@mrleemurray mrleemurray deleted the mrleemurray/then-fuchsia-tortoise branch April 22, 2026 10:27
@vs-code-engineering vs-code-engineering Bot added this to the 1.118.0 milestone Apr 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants