use icons instead of bullet points in thinking (#285394)

Author: justschen

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

@@ -31,6 +31,46 @@ function extractTextFromPart(content: IChatThinkingPart): string {
 	return raw.trim();
 }
 
+function getToolInvocationIcon(toolId: string): ThemeIcon {
+	const lowerToolId = toolId.toLowerCase();
+
+	if (
+		lowerToolId.includes('search') ||
+		lowerToolId.includes('grep') ||
+		lowerToolId.includes('find') ||
+		lowerToolId.includes('list') ||
+		lowerToolId.includes('semantic') ||
+		lowerToolId.includes('changes') ||
+		lowerToolId.includes('codebase')
+	) {
+		return Codicon.search;
+	}
+
+	if (
+		lowerToolId.includes('read') ||
+		lowerToolId.includes('get_file') ||
+		lowerToolId.includes('problems')
+	) {
+		return Codicon.eye;
+	}
+
+	if (
+		lowerToolId.includes('edit') ||
+		lowerToolId.includes('create')
+	) {
+		return Codicon.pencil;
+	}
+
+	// default to generic tool icon
+	return Codicon.tools;
+}
+
+function createThinkingIcon(icon: ThemeIcon): HTMLElement {
+	const iconElement = $('span.chat-thinking-icon');
+	iconElement.classList.add(...ThemeIcon.asClassNameArray(icon));
+	return iconElement;
+}
+
 function extractTitleFromThinkingContent(content: string): string | undefined {
 	const headerMatch = content.match(/^\*\*([^*]+)\*\*/);
 	return headerMatch ? headerMatch[1] : undefined;
@@ -198,6 +238,7 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 		this.markdownResult = rendered;
 		if (!target) {
 			clearNode(this.textContainer);
+			this.textContainer.appendChild(createThinkingIcon(Codicon.comment));
 			this.textContainer.appendChild(rendered.element);
 		}
 	}
@@ -432,7 +473,13 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
 	}
 
 	public appendItem(content: HTMLElement, toolInvocationId?: string, toolInvocation?: IChatToolInvocation | IChatToolInvocationSerialized): void {
-		this.wrapper.appendChild(content);
+		const itemWrapper = $('.chat-thinking-tool-wrapper');
+		const icon = toolInvocationId ? getToolInvocationIcon(toolInvocationId) : Codicon.tools;
+		const iconElement = createThinkingIcon(icon);
+		itemWrapper.appendChild(iconElement);
+		itemWrapper.appendChild(content);
+
+		this.wrapper.appendChild(itemWrapper);
 		if (toolInvocationId) {
 			this.toolInvocationCount++;
 			let toolCallLabel: string;

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

@@ -43,7 +43,7 @@
 				margin: 0 0 2px 6px;
 			}
 
-			.codicon {
+			.codicon:not(.chat-thinking-icon) {
 				display: none;
 			}
 		}
@@ -68,8 +68,9 @@
 		}
 
 		/* chain of thought lines */
-		.chat-tool-invocation-part,
+		.chat-thinking-tool-wrapper,
 		.chat-thinking-item.markdown-content {
+			position: relative;
 
 			&::before {
 				content: '';
@@ -80,31 +81,32 @@
 				width: 1px;
 				border-radius: 0;
 				background-color: var(--vscode-chat-requestBorder);
-				mask-image: linear-gradient(to bottom, #000 0 9px, transparent 9px 21px, #000 21px 100%);
+				mask-image: linear-gradient(to bottom, #000 0 5px, transparent 5px 25px, #000 24px 100%);
 			}
 
 			&:first-child::before {
-				mask-image: linear-gradient(to bottom, transparent 0 21px, #000 21px 100%);
+				mask-image: linear-gradient(to bottom, transparent 0 25px, #000 25px 100%);
 			}
 
 			&:last-child::before {
-				mask-image: linear-gradient(to bottom, #000 0 9px, transparent 9px 100%);
+				mask-image: linear-gradient(to bottom, #000 0 5px, transparent 5px 100%);
 			}
 
 			&:only-child::before {
 				background: none;
 				mask-image: none;
 			}
 
-			&::after {
-				content: '';
+			> .chat-thinking-icon {
 				position: absolute;
-				left: 8px;
-				top: 12px;
-				width: 6px;
-				height: 6px;
-				border-radius: 50%;
-				background-color: var(--vscode-chat-requestBorder);
+				left: 5px;
+				top: 9px;
+				width: 12px;
+				height: 12px;
+				font-size: 12px;
+				line-height: 12px;
+				text-align: center;
+				color: var(--vscode-descriptionForeground);
 			}
 
 		}