Make mentions clickable

webview-ui/src/components/ChatTextArea.tsx

@@ -4,15 +4,14 @@ import { useExtensionState } from "../context/ExtensionStateContext"
 import {
 	getContextMenuOptions,
 	insertMention,
-	mentionRegex,
-	mentionRegexGlobal,
 	removeMention,
 	shouldShowContextMenu,
 	ContextMenuOptionType,
-} from "../utils/mention-context"
+} from "../utils/context-mentions"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
 import Thumbnails from "./Thumbnails"
+import { mentionRegex, mentionRegexGlobal } from "../../../src/shared/context-mentions"
 
 interface ChatTextAreaProps {
 	inputValue: string

webview-ui/src/components/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from "react"
-import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "../utils/mention-context"
+import { ContextMenuOptionType, ContextMenuQueryItem, getContextMenuOptions } from "../utils/context-mentions"
 import { formatFilePathForTruncation } from "./CodeAccordian"
 
 interface ContextMenuProps {
@@ -109,14 +109,15 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 				ref={menuRef}
 				style={{
 					backgroundColor: "var(--vscode-dropdown-background)",
-					border: "1px solid var(--vscode-dropdown-border)",
+					border: "1px solid var(--vscode-editorGroup-border)",
 					borderRadius: "3px",
+					boxShadow: "0 4px 10px rgba(0, 0, 0, 0.25)",
 					zIndex: 1000,
 					display: "flex",
 					flexDirection: "column",
-					boxShadow: "0 8px 16px rgba(0,0,0,0.24)",
 					maxHeight: "200px",
 					overflowY: "auto",
+					overflow: "hidden",
 				}}>
 				{/* Can't use virtuoso since it requires fixed height and menu height is dynamic based on # of items */}
 				{filteredOptions.map((option, index) => (
@@ -127,7 +128,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							padding: "8px 12px",
 							cursor: isOptionSelectable(option) ? "pointer" : "default",
 							color: "var(--vscode-dropdown-foreground)",
-							borderBottom: "1px solid var(--vscode-dropdown-border)",
+							borderBottom: "1px solid var(--vscode-editorGroup-border)",
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "space-between",

webview-ui/src/components/TaskHeader.tsx

@@ -3,9 +3,9 @@ import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useWindowSize } from "react-use"
 import { ClaudeMessage } from "../../../src/shared/ExtensionMessage"
 import { useExtensionState } from "../context/ExtensionStateContext"
-import { mentionRegexGlobal } from "../utils/mention-context"
 import { vscode } from "../utils/vscode"
 import Thumbnails from "./Thumbnails"
+import { mentionRegexGlobal } from "../../../src/shared/context-mentions"
 
 interface TaskHeaderProps {
 	task: ClaudeMessage
@@ -351,7 +351,9 @@ export const highlightMentions = (text?: string, withShadow = true) => {
 			return (
 				<span
 					key={index}
-					className={withShadow ? "mention-context-highlight-with-shadow" : "mention-context-highlight"}>
+					className={withShadow ? "mention-context-highlight-with-shadow" : "mention-context-highlight"}
+					style={{ cursor: "pointer" }}
+					onClick={() => vscode.postMessage({ type: "openMention", text: part })}>
 					@{part}
 				</span>
 			)

webview-ui/src/utils/context-mentions.ts

@@ -1,12 +1,4 @@
-/*
-Mention regex
-- File and folder paths (starting with '/')
-- URLs (containing '://')
-- The 'problems' keyword
-- Word boundary after 'problems' to avoid partial matches
-*/
-export const mentionRegex = /@((?:\/|\w+:\/\/)[^\s]+|problems\b)/
-export const mentionRegexGlobal = new RegExp(mentionRegex.source, "g")
+import { mentionRegex } from "../../../src/shared/context-mentions"
 
 export function insertMention(text: string, position: number, value: string): string {
 	const beforeCursor = text.slice(0, position)