Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-02 08:15:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #306381 from microsoft/mrleemurray/agent-feedback-polish

Browse Source 
Enhance agent feedback widget styles and animations
This commit is contained in:
Lee Murray
2026-03-30 21:37:59 +01:00
committed by GitHub
parent 39a50d8d3f cb1415cf48
commit dfd3b4dcb3
5 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/vs/sessions/common/theme.ts
View File

@@ -5,9 +5,9 @@
import { localize } from '../../nls.js';
import { getColorRegistry, registerColor, transparent } from '../../platform/theme/common/colorUtils.js';
import { contrastBorder, iconForeground } from '../../platform/theme/common/colorRegistry.js';
import { contrastBorder } from '../../platform/theme/common/colorRegistry.js';
import { editorWidgetBorder, editorBackground } from '../../platform/theme/common/colors/editorColors.js';
import { buttonBackground } from '../../platform/theme/common/colors/inputColors.js';
import { editorBackground } from '../../platform/theme/common/colors/editorColors.js';
import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from '../../workbench/common/theme.js';
// Sessions sidebar background color
@@ -67,7 +67,7 @@ export const chatBarTitleForeground = registerColor(
// Agent feedback input widget border color
export const agentFeedbackInputWidgetBorder = registerColor(
'agentFeedbackInputWidget.border',
{ dark: transparent(iconForeground, 0.8), light: transparent(iconForeground, 0.8), hcDark: contrastBorder, hcLight: contrastBorder },
{ dark: editorWidgetBorder, light: editorWidgetBorder, hcDark: contrastBorder, hcLight: contrastBorder },
localize('agentFeedbackInputWidget.border', 'Border color of the agent feedback input widget shown in the editor.')
);

2
src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorInputContribution.ts
View File

@@ -95,8 +95,6 @@ class AgentFeedbackInputWidget implements IOverlayWidget {
this._updateActionForAlt(status.altKey);
});
this._editor.applyFontInfo(this._inputElement);
this._editor.applyFontInfo(this._measureElement);
this._lineHeight = 22;
this._inputElement.style.lineHeight = `${this._lineHeight}px`;
}

7
src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts
View File

@@ -88,6 +88,11 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
// Header
this._headerNode = $('div.agent-feedback-widget-header');
// Comment icon (decorative, hidden from screen readers)
const commentIcon = renderIcon(Codicon.comment);
commentIcon.setAttribute('aria-hidden', 'true');
this._headerNode.appendChild(commentIcon);
// Title showing feedback count
this._titleNode = $('span.agent-feedback-widget-title');
this._updateTitle();
@@ -148,7 +153,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
private _updateTitle(): void {
const count = this._commentItems.length;
if (count === 1) {
this._titleNode.textContent = nls.localize('oneComment', "1 comment");
this._titleNode.textContent = this._commentItems[0].text;
} else {
this._titleNode.textContent = nls.localize('nComments', "{0} comments", count);
}

23
src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css
View File

@@ -7,19 +7,38 @@
position: absolute;
z-index: 10000;
background-color: var(--vscode-panel-background);
border: 1px solid var(--vscode-agentFeedbackInputWidget-border, var(--vscode-input-border, var(--vscode-widget-border)));
border: 1px solid var(--vscode-agentFeedbackInputWidget-border, var(--vscode-editorWidget-border, var(--vscode-contrastBorder)));
box-shadow: var(--vscode-shadow-lg);
border-radius: 8px;
padding: 4px;
display: flex;
flex-direction: row;
align-items: flex-end;
animation: agentFeedbackInputAppear 0.15s ease-out;
}
@keyframes agentFeedbackInputAppear {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.agent-feedback-input-widget {
animation: none;
transform: none;
}
}
.agent-feedback-input-widget textarea {
background-color: var(--vscode-panel-background);
border: none;
color: var(--vscode-input-foreground);
font: inherit;
border-radius: 4px;
padding: 0 0 0 6px;
outline: none;
@@ -49,6 +68,8 @@
height: 0;
overflow: hidden;
white-space: pre;
font: inherit;
font-size: 13px;
}
.agent-feedback-input-widget .agent-feedback-input-actions {

37
src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css
View File

@@ -35,13 +35,14 @@
/* Arrow pointer pointing left toward the code */
.agent-feedback-widget-arrow {
position: absolute;
left: -8px;
top: 9px;
left: -6px;
top: 11px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder));
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder));
display: none;
}
.agent-feedback-widget.collapsed .agent-feedback-widget-arrow {
@@ -52,19 +53,19 @@
content: '';
position: absolute;
left: 2px;
top: -7px;
top: -5px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid var(--vscode-editorWidget-background);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid var(--vscode-editorWidget-background);
}
/* Header */
.agent-feedback-widget-header {
display: flex;
align-items: center;
padding: 8px 10px;
padding: 4px 4px 4px 8px;
border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border));
border-radius: 8px 8px 0 0;
overflow: hidden;
@@ -86,6 +87,9 @@
font-weight: 500;
color: var(--vscode-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Spacer to push buttons to the right */
@@ -98,9 +102,9 @@
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
width: 22px;
height: 22px;
border-radius: var(--vscode-cornerRadius-medium);
cursor: pointer;
color: var(--vscode-foreground);
opacity: 0.7;
@@ -130,7 +134,7 @@
.agent-feedback-widget-item {
display: flex;
flex-direction: column;
padding: 8px 10px;
padding: 4px 4px 8px 8px;
border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border));
cursor: pointer;
position: relative;
@@ -160,7 +164,7 @@
.agent-feedback-widget-item-header {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
gap: 8px;
}
@@ -289,7 +293,7 @@
/* Inline edit textarea */
.agent-feedback-widget-text.editing {
padding: 0;
padding: 0 4px 0 0;
}
.agent-feedback-widget-edit-textarea {
@@ -300,6 +304,7 @@
border-radius: 4px;
background: var(--vscode-input-background);
color: var(--vscode-input-foreground);
font: inherit;
font-size: 12px;
line-height: 1.4;
resize: none;