louis_lifu
/
vscode
mirror of https://github.com/microsoft/vscode.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

many chat ui improvements (#250022) 

* many chat ui improvements

* better handling of request VM
This commit is contained in:
Justin Chen 2025-05-28 18:45:25 -07:00 committed by GitHub
parent c70211fe29
commit 7f3d92fe40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/theme-defaults/themes/dark_modern.json
View File

@ -19,8 +19,8 @@
"button.secondaryBackground": "#313131",
"button.secondaryForeground": "#CCCCCC",
"button.secondaryHoverBackground": "#3C3C3C",
"chat.slashCommandBackground": "#34414B",
"chat.slashCommandForeground": "#40A6FF",
"chat.slashCommandBackground": "#26477866",
"chat.slashCommandForeground": "#85B6FF",
"chat.editedFileForeground": "#E2C08D",
"checkbox.background": "#313131",
"checkbox.border": "#3C3C3C",

4
extensions/theme-defaults/themes/light_modern.json
View File

@ -19,8 +19,8 @@
"button.secondaryBackground": "#E5E5E5",
"button.secondaryForeground": "#3B3B3B",
"button.secondaryHoverBackground": "#CCCCCC",
"chat.slashCommandBackground": "#D2ECFF",
"chat.slashCommandForeground": "#306CA2",
"chat.slashCommandBackground": "#ADCEFF7A",
"chat.slashCommandForeground": "#26569E",
"chat.editedFileForeground": "#895503",
"checkbox.background": "#F8F8F8",
"checkbox.border": "#CECECE",

22
src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
View File

@ -102,6 +102,7 @@ interface IChatListItemTemplate {
readonly templateDisposables: IDisposable;
readonly elementDisposables: DisposableStore;
readonly agentHover: ChatAgentHover;
readonly requestHover?: HTMLElement;
}
interface IItemHeightChangeParams {
@ -286,7 +287,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
let headerParent = rowContainer;
let valueParent = rowContainer;
let detailContainerParent: HTMLElement | undefined;
let toolbarParent: HTMLElement | undefined;
if (this.rendererOptions.renderStyle === 'minimal') {
rowContainer.classList.add('interactive-item-compact');
@ -302,18 +302,18 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
headerParent = lhsContainer;
detailContainerParent = rhsContainer;
valueParent = rhsContainer;
toolbarParent = dom.append(rowContainer, $('.header'));
}
const header = dom.append(headerParent, $('.header'));
const contextKeyService = templateDisposables.add(this.contextKeyService.createScoped(rowContainer));
const scopedInstantiationService = templateDisposables.add(this.instantiationService.createChild(new ServiceCollection([IContextKeyService, contextKeyService])));
const requestHover = dom.append(rowContainer, $('.request-hover'));
let titleToolbar: MenuWorkbenchToolBar | undefined;
if (this.rendererOptions.noHeader) {
header.classList.add('hidden');
} else {
titleToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, toolbarParent ?? header, MenuId.ChatMessageTitle, {
titleToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, requestHover, MenuId.ChatMessageTitle, {
menuOptions: {
shouldForwardArgs: true
},
@ -322,6 +322,18 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
},
}));
}
templateDisposables.add(dom.addDisposableListener(rowContainer, 'mouseenter', () => {
if (isRequestVM(template.currentElement)) {
requestHover.style.display = 'block';
}
}));
templateDisposables.add(dom.addDisposableListener(rowContainer, 'mouseleave', () => {
if (isRequestVM(template.currentElement)) {
requestHover.style.display = 'none';
}
}));
const user = dom.append(header, $('.user'));
const avatarContainer = dom.append(user, $('.avatar-container'));
const username = dom.append(user, $('h3.username'));
@ -332,8 +344,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
const value = dom.append(valueParent, $('.value'));
const elementDisposables = new DisposableStore();
const footerToolbarContainer = dom.append(rowContainer, $('.chat-footer-toolbar'));
const footerToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, footerToolbarContainer, MenuId.ChatMessageFooter, {
eventDebounceDelay: 0,
@ -441,7 +451,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
// TODO: @justschen decide if we want to hide the header for requests or not
const shouldShowHeader = isResponseVM(element) && !this.rendererOptions.noHeader;
templateData.header?.classList.toggle('hidden', !shouldShowHeader);
templateData.header?.classList.toggle('header-disabled', !shouldShowHeader);
// Do a progressive render if
// - This the last response in the list

4
src/vs/workbench/contrib/chat/browser/codeBlockPart.css
View File

@ -63,10 +63,6 @@
margin: 0 0 16px 0;
}
.interactive-result-code-block {
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.10);
}
.interactive-session .interactive-request .interactive-result-code-block {
border: 1px solid var(--vscode-chat-requestCodeBorder);
}

32
src/vs/workbench/contrib/chat/browser/media/chat.css
View File

@ -1867,12 +1867,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
display: none;
}
.pane-body,
.quick-input-html-widget {
.interactive-session:not(.chat-widget > .interactive-session) {
.interactive-item-container.interactive-request {
align-items: flex-end;
padding-bottom: 0px;
padding-top: 5px;
}
.interactive-item-container.interactive-request .value .rendered-markdown {
@ -1900,7 +1900,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
width: fit-content;
}
.interactive-session .interactive-item-container.interactive-request .chat-attached-context {
.interactive-item-container.interactive-request .chat-attached-context {
margin-top: 10px;
max-width: 100%;
width: fit-content;
@ -1914,8 +1914,31 @@ have to be updated for changes to the rules above, or to support more deeply nes
box-shadow: none;
}
.interactive-session .interactive-request .header.hidden {
.interactive-request .header.header-disabled {
display: none !important;
}
.request-hover {
position: absolute;
overflow: hidden;
display: none;
z-index: 100;
background-color: var(--vscode-toolbar-hoverBackground);
top: 0px;
right: 10px;
border-radius: 6px;
}
.request-hover .actions-container {
width: 18px;
height: 17px;
}
.request-hover .actions-container .action-label.codicon-x {
width: 14px;
height: 14px;
padding-top: 4px;
padding-left: 1px;
}
}
@ -1939,3 +1962,4 @@ have to be updated for changes to the rules above, or to support more deeply nes
width: initial;
padding: 4px 8px;
}

4
src/vs/workbench/contrib/chat/common/chatColors.ts
View File

@ -21,13 +21,13 @@ export const chatRequestBackground = registerColor(
export const chatSlashCommandBackground = registerColor(
'chat.slashCommandBackground',
{ dark: '#34414b8f', light: '#d2ecff99', hcDark: Color.white, hcLight: badgeBackground },
{ dark: '#26477866', light: '#adceff7a', hcDark: Color.white, hcLight: badgeBackground },
localize('chat.slashCommandBackground', 'The background color of a chat slash command.')
);
export const chatSlashCommandForeground = registerColor(
'chat.slashCommandForeground',
{ dark: '#40A6FF', light: '#306CA2', hcDark: Color.black, hcLight: badgeForeground },
{ dark: '#85b6ff', light: '#26569e', hcDark: Color.black, hcLight: badgeForeground },
localize('chat.slashCommandForeground', 'The foreground color of a chat slash command.')
);