slash command pill: use btn for rerun, better hover (#234854)

Author: jrieken

src/vs/workbench/contrib/chat/browser/chatContentParts/chatAgentCommandContentPart.ts

@@ -4,18 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 
 
-import { getDefaultHoverDelegate } from '../../../../../base/browser/ui/hover/hoverDelegateFactory.js';
 import { Disposable } from '../../../../../base/common/lifecycle.js';
 import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
 import { IChatAgentCommand } from '../../common/chatAgents.js';
 import { chatSubcommandLeader } from '../../common/chatParserTypes.js';
 import { IChatRendererContent } from '../../common/chatViewModel.js';
 import { ChatTreeItem } from '../chat.js';
 import { IChatContentPart } from './chatContentParts.js';
-import { renderIcon } from '../../../../../base/browser/ui/iconLabel/iconLabels.js';
 import { Codicon } from '../../../../../base/common/codicons.js';
-import { addDisposableListener } from '../../../../../base/browser/dom.js';
 import { localize } from '../../../../../nls.js';
+import { Button } from '../../../../../base/browser/ui/button/button.js';
+import { generateUuid } from '../../../../../base/common/uuid.js';
 
 
 export class ChatAgentCommandContentPart extends Disposable implements IChatContentPart {
@@ -28,15 +27,23 @@ export class ChatAgentCommandContentPart extends Disposable implements IChatCont
 		@IHoverService private readonly _hoverService: IHoverService,
 	) {
 		super();
-		this._store.add(this._hoverService.setupManagedHover(getDefaultHoverDelegate('element'), this.domNode, localize('rerun', "Detected command. Select to rerun without {0}{1}", chatSubcommandLeader, cmd.name)));
 		this.domNode.classList.add('chat-agent-command');
-		this.domNode.innerText = chatSubcommandLeader + cmd.name;
 		this.domNode.setAttribute('aria-label', cmd.name);
 		this.domNode.setAttribute('role', 'button');
 
-		this.domNode.appendChild(renderIcon(Codicon.close));
+		const groupId = generateUuid();
 
-		this._store.add(addDisposableListener(this.domNode, 'click', onClick));
+		const commandSpan = document.createElement('span');
+		this.domNode.appendChild(commandSpan);
+		commandSpan.innerText = chatSubcommandLeader + cmd.name;
+		this._store.add(this._hoverService.setupDelayedHover(commandSpan, { content: cmd.description, appearance: { showPointer: true } }, { groupId }));
+
+		const rerun = localize('rerun', "Rerun without {0}{1}", chatSubcommandLeader, cmd.name);
+		const btn = new Button(this.domNode, { ariaLabel: rerun });
+		btn.icon = Codicon.close;
+		btn.onDidClick(() => onClick());
+		this._store.add(btn);
+		this._store.add(this._hoverService.setupDelayedHover(btn.element, { content: rerun, appearance: { showPointer: true } }, { groupId }));
 	}
 
 	hasSameContent(other: IChatRendererContent, followingContent: IChatRendererContent[], element: ChatTreeItem): boolean {

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

@@ -1124,7 +1124,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 }
 
 
-.interactive-item-container .chat-agent-command,
 .interactive-item-container .chat-resource-widget,
 .interactive-item-container .chat-agent-widget .monaco-button {
 	border-radius: 4px;
@@ -1134,16 +1133,26 @@ have to be updated for changes to the rules above, or to support more deeply nes
 .interactive-item-container .chat-agent-command {
 	background-color: var(--vscode-chat-slashCommandBackground);
 	color: var(--vscode-chat-slashCommandForeground);
-	cursor: pointer;
 	display: inline-flex;
 	align-items: center;
 	margin-right: 0.5ch;
-	padding: 1px 1px 1px 3px;
+	border-radius: 4px;
+	padding: 0 0 0 3px;
 }
 
-.interactive-item-container .chat-agent-command > .codicon[class*='codicon-'] {
-	color: var(--vscode-chat-slashCommandForeground);
-	font-size: 14px;
+.interactive-item-container .chat-agent-command > .monaco-button {
+	display: flex;
+	align-self: stretch;
+	align-items: center;
+	cursor: pointer;
+	padding: 0 2px;
+	margin-left: 2px;
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+.interactive-item-container .chat-agent-command > .monaco-button:hover {
+	background: var(--vscode-toolbar-hoverBackground);
 }
 
 .interactive-item-container .chat-agent-widget .monaco-text-button {