Implement clickable issue links in @githubpr chat output

Author: Copilot

webviews/sessionLogView/issueLinker.ts

@@ -0,0 +1,78 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { PullInfo } from './messages';
+
+// Issue/PR reference patterns - copied from src/github/utils.ts
+export const ISSUE_EXPRESSION = /(([A-Za-z0-9_.\-]+)\/([A-Za-z0-9_.\-]+))?(#|GH-)([1-9][0-9]*)($|\b)/;
+export const ISSUE_OR_URL_EXPRESSION = /(https?:\/\/github\.com\/(([^\s]+)\/([^\s]+))\/([^\s]+\/)?(issues|pull)\/([0-9]+)(#issuecomment\-([0-9]+))?)|(([A-Za-z0-9_.\-]+)\/([A-Za-z0-9_.\-]+))?(#|GH-)([1-9][0-9]*)($|\b)/;
+
+export type ParsedIssue = {
+	owner: string | undefined;
+	name: string | undefined;
+	issueNumber: number;
+	commentNumber?: number;
+};
+
+export function parseIssueExpressionOutput(output: RegExpMatchArray | null): ParsedIssue | undefined {
+	if (!output) {
+		return undefined;
+	}
+	const issue: ParsedIssue = { owner: undefined, name: undefined, issueNumber: 0 };
+	if (output.length === 7) {
+		issue.owner = output[2];
+		issue.name = output[3];
+		issue.issueNumber = parseInt(output[5]);
+		return issue;
+	} else if (output.length === 16) {
+		issue.owner = output[3] || output[11];
+		issue.name = output[4] || output[12];
+		issue.issueNumber = parseInt(output[7] || output[14]);
+		issue.commentNumber = output[9] !== undefined ? parseInt(output[9]) : undefined;
+		return issue;
+	} else {
+		return undefined;
+	}
+}
+
+export function getIssueNumberLabelFromParsed(parsed: ParsedIssue): string {
+	if (parsed.owner && parsed.name) {
+		return `${parsed.owner}/${parsed.name}#${parsed.issueNumber}`;
+	}
+	return `#${parsed.issueNumber}`;
+}
+
+/**
+ * Converts issue/PR references in text to clickable links
+ * @param text The text to process
+ * @param pullInfo Repository context for creating links
+ * @returns The text with issue references converted to markdown links
+ */
+export async function convertIssueReferencesToLinks(text: string, pullInfo: PullInfo | undefined): Promise<string> {
+	if (!pullInfo) {
+		return text;
+	}
+
+	// Use a simple approach to find and replace issue references
+	return text.replace(ISSUE_OR_URL_EXPRESSION, (match) => {
+		const parsed = parseIssueExpressionOutput(match.match(ISSUE_OR_URL_EXPRESSION));
+		if (!parsed) {
+			return match;
+		}
+
+		// If no owner/name specified, use the current repository context
+		if (!parsed.owner || !parsed.name) {
+			parsed.owner = pullInfo.owner;
+			parsed.name = pullInfo.repo;
+		}
+
+		const issueNumberLabel = getIssueNumberLabelFromParsed(parsed);
+
+		// Create GitHub URL for the issue/PR
+		const githubUrl = `https://${pullInfo.host || 'github.com'}/${parsed.owner}/${parsed.name}/issues/${parsed.issueNumber}`;
+
+		return `[${issueNumberLabel}](${githubUrl})`;
+	});
+}

webviews/sessionLogView/sessionView.tsx

@@ -13,6 +13,7 @@ import { parseDiff, SessionResponseLogChunk, toFileLabel } from '../../common/se
 import { vscode } from '../common/message';
 import { CodeView } from './codeView';
 import './index.css'; // Create this file for styling
+import { convertIssueReferencesToLinks } from './issueLinker';
 import { PullInfo } from './messages';
 import { type SessionInfo, type SessionSetupStepResponse } from './sessionsApi';
 
@@ -30,7 +31,7 @@ export const SessionView: React.FC<SessionViewProps> = (props) => {
 			{props.logs.length === 0 && props.setupSteps && props.setupSteps.length > 0 && (
 				<SetupStageLog setupSteps={props.setupSteps} />
 			)}
-			<SessionLog logs={props.logs} />
+			<SessionLog logs={props.logs} pullInfo={props.pullInfo} />
 			{props.info.state === 'in_progress' && !(props.logs.length === 0 && props.setupSteps && props.setupSteps.length > 0) && (
 				<div className="session-in-progress-indicator">
 					<span className="icon"><i className="codicon codicon-loading"></i></span>
@@ -102,9 +103,10 @@ const SessionHeader: React.FC<SessionHeaderProps> = ({ info, pullInfo }) => {
 // Session Log component
 interface SessionLogProps {
 	readonly logs: readonly SessionResponseLogChunk[];
+	readonly pullInfo: PullInfo | undefined;
 }
 
-const SessionLog: React.FC<SessionLogProps> = ({ logs }) => {
+const SessionLog: React.FC<SessionLogProps> = ({ logs, pullInfo }) => {
 	const components = logs.flatMap(x => x.choices).map((choice, index) => {
 		if (!choice.delta.content) {
 			return;
@@ -129,6 +131,7 @@ const SessionLog: React.FC<SessionLogProps> = ({ logs }) => {
 					<MarkdownContent
 						key={`markdown-${index}`}
 						content={choice.delta.content}
+						pullInfo={pullInfo}
 					/>
 				);
 			}
@@ -224,9 +227,10 @@ const SessionLog: React.FC<SessionLogProps> = ({ logs }) => {
 // Custom component for rendering markdown content
 interface MarkdownContentProps {
 	content: string;
+	pullInfo: PullInfo | undefined;
 }
 
-const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) => {
+const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, pullInfo }) => {
 	const containerRef = React.useRef<HTMLDivElement>(null);
 	const md = React.useMemo(() => {
 		const mdInstance = new MarkdownIt();
@@ -245,27 +249,36 @@ const MarkdownContent: React.FC<MarkdownContentProps> = ({ content }) => {
 	React.useEffect(() => {
 		if (!containerRef.current) return;
 
-		// Render markdown
-		containerRef.current.innerHTML = md.render(content);
+		// Process issue references and convert to clickable links
+		const processContent = async () => {
+			const processedContent = await convertIssueReferencesToLinks(content, pullInfo);
+			
+			// Render markdown
+			if (containerRef.current) {
+				containerRef.current.innerHTML = md.render(processedContent);
 
-		// Find all code blocks and render them using CodeView
-		const codeBlocks = containerRef.current.querySelectorAll('.markdown-code-block');
-		codeBlocks.forEach((block) => {
-			const code = decodeURIComponent(block.getAttribute('data-code') || '');
-			const lang = block.getAttribute('data-lang') || 'plaintext';
+				// Find all code blocks and render them using CodeView
+				const codeBlocks = containerRef.current.querySelectorAll('.markdown-code-block');
+				codeBlocks.forEach((block) => {
+					const code = decodeURIComponent(block.getAttribute('data-code') || '');
+					const lang = block.getAttribute('data-lang') || 'plaintext';
 
-			const codeViewElement = document.createElement('div');
-			block.replaceWith(codeViewElement);
+					const codeViewElement = document.createElement('div');
+					block.replaceWith(codeViewElement);
 
-			ReactDOM.render(
-				<CodeView
-					label="Code Block"
-					content={{ value: code, lang }}
-				/>,
-				codeViewElement
-			);
-		});
-	}, [content]);
+					ReactDOM.render(
+						<CodeView
+							label="Code Block"
+							content={{ value: code, lang }}
+						/>,
+						codeViewElement
+					);
+				});
+			}
+		};
+
+		processContent();
+	}, [content, pullInfo, md]);
 
 	return <div className="markdown-content" ref={containerRef} />;
 };