Minor fixes

webview-ui/src/components/ChatTextArea.tsx

@@ -1,17 +1,17 @@
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import DynamicTextArea from "react-textarea-autosize"
+import { mentionRegex, mentionRegexGlobal } from "../../../src/shared/context-mentions"
 import { useExtensionState } from "../context/ExtensionStateContext"
 import {
+	ContextMenuOptionType,
 	getContextMenuOptions,
 	insertMention,
 	removeMention,
 	shouldShowContextMenu,
-	ContextMenuOptionType,
 } 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
@@ -116,9 +116,14 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						insertValue = "problems"
 					}
 
-					const newValue = insertMention(textAreaRef.current.value, cursorPosition, insertValue)
+					const { newValue, mentionIndex } = insertMention(
+						textAreaRef.current.value,
+						cursorPosition,
+						insertValue
+					)
+
 					setInputValue(newValue)
-					const newCursorPosition = newValue.indexOf(" ", newValue.lastIndexOf("@")) + 1
+					const newCursorPosition = newValue.indexOf(" ", mentionIndex + insertValue.length) + 1
 					setCursorPosition(newCursorPosition)
 					setIntendedCursorPosition(newCursorPosition)
 					textAreaRef.current.focus()

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

@@ -1,20 +1,31 @@
 import { mentionRegex } from "../../../src/shared/context-mentions"
 
-export function insertMention(text: string, position: number, value: string): string {
+export function insertMention(
+	text: string,
+	position: number,
+	value: string
+): { newValue: string; mentionIndex: number } {
 	const beforeCursor = text.slice(0, position)
 	const afterCursor = text.slice(position)
 
 	// Find the position of the last '@' symbol before the cursor
 	const lastAtIndex = beforeCursor.lastIndexOf("@")
 
+	let newValue: string
+	let mentionIndex: number
+
 	if (lastAtIndex !== -1) {
 		// If there's an '@' symbol, replace everything after it with the new mention
 		const beforeMention = text.slice(0, lastAtIndex)
-		return beforeMention + "@" + value + " " + afterCursor.replace(/^[^\s]*/, "")
+		newValue = beforeMention + "@" + value + " " + afterCursor.replace(/^[^\s]*/, "")
+		mentionIndex = lastAtIndex
 	} else {
 		// If there's no '@' symbol, insert the mention at the cursor position
-		return beforeCursor + "@" + value + " " + afterCursor
+		newValue = beforeCursor + "@" + value + " " + afterCursor
+		mentionIndex = position
 	}
+
+	return { newValue, mentionIndex }
 }
 
 export function removeMention(text: string, position: number): { newText: string; newPosition: number } {
@@ -111,6 +122,8 @@ export function shouldShowContextMenu(text: string, position: number): boolean {
 	// Don't show the menu if it's a problems
 	if (textAfterAt.toLowerCase().startsWith("problems")) return false
 
+	// NOTE: it's okay that menu shows when there's trailing punctuation since user could be inputting a path with marks
+
 	// Show the menu if there's just '@' or '@' followed by some text (but not a URL)
 	return true
 }