Add escape button for @ mentions in context menu

Implements a new escape option in the context menu that allows users to escape @ symbols by converting them to \@ when they want to prevent mention expansion.

Key changes:
- Add Escape option type to ContextMenuOptionType enum
- Implement escape functionality in insertMention() utility function
- Add escape option rendering in ContextMenu component
- Handle escape selection in ChatTextArea component

The escape option appears at the bottom of context menus when @ symbols are present and converts @ to \@ with proper cursor positioning.

Author: cannuri

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -275,6 +275,16 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					const newCursorPosition = newValue.indexOf(" ", mentionIndex + insertValue.length) + 1
 					setCursorPosition(newCursorPosition)
 					setIntendedCursorPosition(newCursorPosition)
+				} else if (type === ContextMenuOptionType.Escape) {
+					// Replace @ with \@ and position cursor after the escaped sequence
+					const beforeCursor = textAreaRef.current.value.substring(0, cursorPosition - 1) // -1 to remove the '@'
+					const afterCursor = textAreaRef.current.value.substring(cursorPosition)
+					const newValue = beforeCursor + "\\@" + afterCursor
+					setInputValue(newValue)
+					// Position cursor after the escaped '@'
+					const newCaretPosition = beforeCursor.length + 2 // +2 for '\@'
+					setCursorPosition(newCaretPosition)
+					setIntendedCursorPosition(newCaretPosition)
 
 					// Scroll to cursor.
 					setTimeout(() => {

webview-ui/src/components/chat/ContextMenu.tsx

@@ -93,6 +93,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 				return <span>Terminal</span>
 			case ContextMenuOptionType.URL:
 				return <span>Paste URL to fetch contents</span>
+			case ContextMenuOptionType.Escape:
+				return <span>Escape @ symbol</span>
 			case ContextMenuOptionType.NoResults:
 				return <span>No results found</span>
 			case ContextMenuOptionType.Git:
@@ -175,6 +177,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 				return "terminal"
 			case ContextMenuOptionType.URL:
 				return "link"
+			case ContextMenuOptionType.Escape:
+				return "close"
 			case ContextMenuOptionType.Git:
 				return "git-commit"
 			case ContextMenuOptionType.NoResults:

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

@@ -97,6 +97,7 @@ export enum ContextMenuOptionType {
 	Git = "git",
 	NoResults = "noResults",
 	Mode = "mode", // Add mode type
+	Escape = "escape", // Add escape type
 }
 
 export interface ContextMenuQueryItem {
@@ -190,6 +191,7 @@ export function getContextMenuOptions(
 			{ type: ContextMenuOptionType.Folder },
 			{ type: ContextMenuOptionType.File },
 			{ type: ContextMenuOptionType.Git },
+			{ type: ContextMenuOptionType.Escape },
 		]
 	}