Add emoji support to label rendering in markdown and webviews

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

src/github/issueOverview.ts

@@ -8,6 +8,7 @@ import * as vscode from 'vscode';
 import { CloseResult } from '../../common/views';
 import { openPullRequestOnGitHub } from '../commands';
 import { COPILOT_ACCOUNTS, IComment } from '../common/comment';
+import { emojify, ensureEmojis } from '../common/emoji';
 import Logger from '../common/logger';
 import { PR_SETTINGS_NAMESPACE, WEBVIEW_REFRESH_INTERVAL } from '../common/settingKeys';
 import { ITelemetry } from '../common/telemetry';
@@ -42,6 +43,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 		issue: IssueModel,
 		toTheSide: Boolean = false,
 	) {
+		await ensureEmojis(folderRepositoryManager.context);
 		const activeColumn = toTheSide
 			? vscode.ViewColumn.Beside
 			: vscode.window.activeTextEditor
@@ -194,6 +196,11 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 	protected getInitializeContext(currentUser: IAccount, issue: IssueModel, timelineEvents: TimelineEvent[], repositoryAccess: RepoAccessAndMergeMethods, viewerCanEdit: boolean, assignableUsers: IAccount[]): Issue {
 		const hasWritePermission = repositoryAccess!.hasWritePermission;
 		const canEdit = hasWritePermission || viewerCanEdit;
+		const labels = issue.item.labels.map(label => ({
+			...label,
+			name: emojify(label.name)
+		}));
+
 		const context: Issue = {
 			owner: issue.remote.owner,
 			repo: issue.remote.repositoryName,
@@ -204,7 +211,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			createdAt: issue.createdAt,
 			body: issue.body,
 			bodyHTML: issue.bodyHTML,
-			labels: issue.item.labels,
+			labels: labels,
 			author: issue.author,
 			state: issue.state,
 			events: timelineEvents,

src/github/markdownUtils.ts

@@ -6,6 +6,7 @@
 import * as marked from 'marked';
 import 'url-search-params-polyfill';
 import * as vscode from 'vscode';
+import { ensureEmojis } from '../common/emoji';
 import Logger from '../common/logger';
 import { CODE_PERMALINK, findCodeLinkLocally } from '../issues/issueLinkLookup';
 import { PullRequestDefaults } from './folderRepositoryManager';
@@ -188,6 +189,7 @@ export async function issueMarkdown(
 	markdown.appendMarkdown(body + '  \n');
 
 	if (issue.item.labels.length > 0) {
+		await ensureEmojis(context);
 		markdown.appendMarkdown('   \n');
 		issue.item.labels.forEach(label => {
 			markdown.appendMarkdown(

src/github/utils.ts

@@ -12,6 +12,7 @@ import { GitApiImpl } from '../api/api1';
 import { AuthProvider, GitHubServerType } from '../common/authentication';
 import { COPILOT_ACCOUNTS, IComment, IReviewThread, SubjectType } from '../common/comment';
 import { DiffHunk, parseDiffHunk } from '../common/diffHunk';
+import { emojify } from '../common/emoji';
 import { GitHubRef } from '../common/githubRef';
 import Logger from '../common/logger';
 import { Remote } from '../common/remote';
@@ -1746,7 +1747,8 @@ export function vscodeDevPrLink(pullRequest: IssueModel) {
 export function makeLabel(label: ILabel): string {
 	const isDarkTheme = vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark;
 	const labelColor = gitHubLabelColor(label.color, isDarkTheme, true);
-	return `<span style="color:${labelColor.textColor};background-color:${labelColor.backgroundColor};border-radius:10px;">&nbsp;&nbsp;${label.name.trim()}&nbsp;&nbsp;</span>`;
+	const labelName = emojify(label.name.trim());
+	return `<span style="color:${labelColor.textColor};background-color:${labelColor.backgroundColor};border-radius:10px;">&nbsp;&nbsp;${labelName}&nbsp;&nbsp;</span>`;
 }
 
 

src/lm/tools/displayIssuesTool.ts

@@ -5,6 +5,7 @@
 'use strict';
 
 import * as vscode from 'vscode';
+import { ensureEmojis } from '../../common/emoji';
 import Logger from '../../common/logger';
 import { reviewerLabel } from '../../github/interface';
 import { makeLabel } from '../../github/utils';
@@ -29,7 +30,7 @@ Here are the possible columns:
 export class DisplayIssuesTool extends ToolBase<DisplayIssuesParameters> {
 	public static readonly toolId = 'github-pull-request_renderIssues';
 	private static ID = 'DisplayIssuesTool';
-	constructor(chatParticipantState: ChatParticipantState) {
+	constructor(private readonly context: vscode.ExtensionContext, chatParticipantState: ChatParticipantState) {
 		super(chatParticipantState);
 	}
 
@@ -144,6 +145,7 @@ export class DisplayIssuesTool extends ToolBase<DisplayIssuesParameters> {
 	}
 
 	async invoke(options: vscode.LanguageModelToolInvocationOptions<DisplayIssuesParameters>, token: vscode.CancellationToken): Promise<vscode.LanguageModelToolResult | undefined> {
+		await ensureEmojis(this.context);
 		const issueItemsInfo: vscode.LanguageModelTextPart | undefined = this.chatParticipantState.firstUserMessage;
 		const issueItems: IssueSearchResultItem[] | undefined = options.input.arrayOfIssues;
 		if (!issueItems || issueItems.length === 0) {

src/lm/tools/tools.ts

@@ -50,5 +50,5 @@ function registerCopilotAgentTools(context: vscode.ExtensionContext, copilotRemo
 function registerSearchTools(context: vscode.ExtensionContext, credentialStore: CredentialStore, repositoriesManager: RepositoriesManager, chatParticipantState: ChatParticipantState) {
 	context.subscriptions.push(vscode.lm.registerTool(ConvertToSearchSyntaxTool.toolId, new ConvertToSearchSyntaxTool(credentialStore, repositoriesManager, chatParticipantState)));
 	context.subscriptions.push(vscode.lm.registerTool(SearchTool.toolId, new SearchTool(credentialStore, repositoriesManager, chatParticipantState)));
-	context.subscriptions.push(vscode.lm.registerTool(DisplayIssuesTool.toolId, new DisplayIssuesTool(chatParticipantState)));
+	context.subscriptions.push(vscode.lm.registerTool(DisplayIssuesTool.toolId, new DisplayIssuesTool(context, chatParticipantState)));
 }

src/test/github/emoji.test.ts

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { default as assert } from 'assert';
+import { emojify } from '../../common/emoji';
+import { makeLabel } from '../../github/utils';
+
+describe('emoji rendering in labels', function () {
+	it('should return original text when emoji map is not loaded', function () {
+		const input = 'papercut :drop_of_blood:';
+		const result = emojify(input);
+		// Since emoji map isn't loaded, it should return the original text
+		assert.strictEqual(result, input);
+	});
+
+	it('should process label names through emojify', function () {
+		const label = { name: 'papercut :drop_of_blood:', color: 'red' };
+		const result = makeLabel(label);
+		// The label name should go through emojify (even if it returns the original)
+		assert.ok(result.includes('papercut :drop_of_blood:'));
+		assert.ok(result.includes('color:'));
+		assert.ok(result.includes('background-color:'));
+	});
+
+	it('should handle labels without emoji codes', function () {
+		const label = { name: 'bug', color: 'red' };
+		const result = makeLabel(label);
+		assert.ok(result.includes('bug'));
+		assert.ok(result.includes('color:'));
+		assert.ok(result.includes('background-color:'));
+	});
+});