Skip to content

Commit 7f3d92f

Browse files
justschenjustschen
authored
many chat ui improvements (#250022)
* many chat ui improvements * better handling of request VM
1 parent c70211f commit 7f3d92f

File tree

6 files changed

+50
-20
lines changed

6 files changed

+50
-20
lines changed

‎extensions/theme-defaults/themes/dark_modern.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"button.secondaryBackground": "#313131",
2020
"button.secondaryForeground": "#CCCCCC",
2121
"button.secondaryHoverBackground": "#3C3C3C",
22-
"chat.slashCommandBackground": "#34414B",
23-
"chat.slashCommandForeground": "#40A6FF",
22+
"chat.slashCommandBackground": "#26477866",
23+
"chat.slashCommandForeground": "#85B6FF",
2424
"chat.editedFileForeground": "#E2C08D",
2525
"checkbox.background": "#313131",
2626
"checkbox.border": "#3C3C3C",

‎extensions/theme-defaults/themes/light_modern.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"button.secondaryBackground": "#E5E5E5",
2020
"button.secondaryForeground": "#3B3B3B",
2121
"button.secondaryHoverBackground": "#CCCCCC",
22-
"chat.slashCommandBackground": "#D2ECFF",
23-
"chat.slashCommandForeground": "#306CA2",
22+
"chat.slashCommandBackground": "#ADCEFF7A",
23+
"chat.slashCommandForeground": "#26569E",
2424
"chat.editedFileForeground": "#895503",
2525
"checkbox.background": "#F8F8F8",
2626
"checkbox.border": "#CECECE",

‎src/vs/workbench/contrib/chat/browser/chatListRenderer.ts

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ interface IChatListItemTemplate {
102102
readonly templateDisposables: IDisposable;
103103
readonly elementDisposables: DisposableStore;
104104
readonly agentHover: ChatAgentHover;
105+
readonly requestHover?: HTMLElement;
105106
}
106107

107108
interface IItemHeightChangeParams {
@@ -286,7 +287,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
286287
let headerParent = rowContainer;
287288
let valueParent = rowContainer;
288289
let detailContainerParent: HTMLElement | undefined;
289-
let toolbarParent: HTMLElement | undefined;
290290

291291
if (this.rendererOptions.renderStyle === 'minimal') {
292292
rowContainer.classList.add('interactive-item-compact');
@@ -302,18 +302,18 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
302302
headerParent = lhsContainer;
303303
detailContainerParent = rhsContainer;
304304
valueParent = rhsContainer;
305-
toolbarParent = dom.append(rowContainer, $('.header'));
306305
}
307306

308307
const header = dom.append(headerParent, $('.header'));
309308
const contextKeyService = templateDisposables.add(this.contextKeyService.createScoped(rowContainer));
310309
const scopedInstantiationService = templateDisposables.add(this.instantiationService.createChild(new ServiceCollection([IContextKeyService, contextKeyService])));
311310

311+
const requestHover = dom.append(rowContainer, $('.request-hover'));
312312
let titleToolbar: MenuWorkbenchToolBar | undefined;
313313
if (this.rendererOptions.noHeader) {
314314
header.classList.add('hidden');
315315
} else {
316-
titleToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, toolbarParent ?? header, MenuId.ChatMessageTitle, {
316+
titleToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, requestHover, MenuId.ChatMessageTitle, {
317317
menuOptions: {
318318
shouldForwardArgs: true
319319
},
@@ -322,6 +322,18 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
322322
},
323323
}));
324324
}
325+
templateDisposables.add(dom.addDisposableListener(rowContainer, 'mouseenter', () => {
326+
if (isRequestVM(template.currentElement)) {
327+
requestHover.style.display = 'block';
328+
}
329+
}));
330+
331+
templateDisposables.add(dom.addDisposableListener(rowContainer, 'mouseleave', () => {
332+
if (isRequestVM(template.currentElement)) {
333+
requestHover.style.display = 'none';
334+
}
335+
}));
336+
325337
const user = dom.append(header, $('.user'));
326338
const avatarContainer = dom.append(user, $('.avatar-container'));
327339
const username = dom.append(user, $('h3.username'));
@@ -332,8 +344,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
332344
const value = dom.append(valueParent, $('.value'));
333345
const elementDisposables = new DisposableStore();
334346

335-
336-
337347
const footerToolbarContainer = dom.append(rowContainer, $('.chat-footer-toolbar'));
338348
const footerToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, footerToolbarContainer, MenuId.ChatMessageFooter, {
339349
eventDebounceDelay: 0,
@@ -441,7 +451,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
441451

442452
// TODO: @justschen decide if we want to hide the header for requests or not
443453
const shouldShowHeader = isResponseVM(element) && !this.rendererOptions.noHeader;
444-
templateData.header?.classList.toggle('hidden', !shouldShowHeader);
454+
templateData.header?.classList.toggle('header-disabled', !shouldShowHeader);
445455

446456
// Do a progressive render if
447457
// - This the last response in the list

‎src/vs/workbench/contrib/chat/browser/codeBlockPart.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,6 @@
6363
margin: 0 0 16px 0;
6464
}
6565

66-
.interactive-result-code-block {
67-
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.10);
68-
}
69-
7066
.interactive-session .interactive-request .interactive-result-code-block {
7167
border: 1px solid var(--vscode-chat-requestCodeBorder);
7268
}

‎src/vs/workbench/contrib/chat/browser/media/chat.css

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1867,12 +1867,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
18671867
display: none;
18681868
}
18691869

1870-
.pane-body,
1871-
.quick-input-html-widget {
1870+
.interactive-session:not(.chat-widget > .interactive-session) {
18721871

18731872
.interactive-item-container.interactive-request {
18741873
align-items: flex-end;
18751874
padding-bottom: 0px;
1875+
padding-top: 5px;
18761876
}
18771877

18781878
.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
19001900
width: fit-content;
19011901
}
19021902

1903-
.interactive-session .interactive-item-container.interactive-request .chat-attached-context {
1903+
.interactive-item-container.interactive-request .chat-attached-context {
19041904
margin-top: 10px;
19051905
max-width: 100%;
19061906
width: fit-content;
@@ -1914,8 +1914,31 @@ have to be updated for changes to the rules above, or to support more deeply nes
19141914
box-shadow: none;
19151915
}
19161916

1917-
.interactive-session .interactive-request .header.hidden {
1917+
.interactive-request .header.header-disabled {
1918+
display: none !important;
1919+
}
1920+
1921+
.request-hover {
1922+
position: absolute;
1923+
overflow: hidden;
19181924
display: none;
1925+
z-index: 100;
1926+
background-color: var(--vscode-toolbar-hoverBackground);
1927+
top: 0px;
1928+
right: 10px;
1929+
border-radius: 6px;
1930+
}
1931+
1932+
.request-hover .actions-container {
1933+
width: 18px;
1934+
height: 17px;
1935+
}
1936+
1937+
.request-hover .actions-container .action-label.codicon-x {
1938+
width: 14px;
1939+
height: 14px;
1940+
padding-top: 4px;
1941+
padding-left: 1px;
19191942
}
19201943
}
19211944

@@ -1939,3 +1962,4 @@ have to be updated for changes to the rules above, or to support more deeply nes
19391962
width: initial;
19401963
padding: 4px 8px;
19411964
}
1965+

‎src/vs/workbench/contrib/chat/common/chatColors.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ export const chatRequestBackground = registerColor(
2121

2222
export const chatSlashCommandBackground = registerColor(
2323
'chat.slashCommandBackground',
24-
{ dark: '#34414b8f', light: '#d2ecff99', hcDark: Color.white, hcLight: badgeBackground },
24+
{ dark: '#26477866', light: '#adceff7a', hcDark: Color.white, hcLight: badgeBackground },
2525
localize('chat.slashCommandBackground', 'The background color of a chat slash command.')
2626
);
2727

2828
export const chatSlashCommandForeground = registerColor(
2929
'chat.slashCommandForeground',
30-
{ dark: '#40A6FF', light: '#306CA2', hcDark: Color.black, hcLight: badgeForeground },
30+
{ dark: '#85b6ff', light: '#26569e', hcDark: Color.black, hcLight: badgeForeground },
3131
localize('chat.slashCommandForeground', 'The foreground color of a chat slash command.')
3232
);
3333

0 commit comments

Comments
 (0)