fix(textarea): handle removal of duplicate mentions

Author: elianiva

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

@@ -10,6 +10,7 @@ interface ContextItem {
 	originalIndex: number
 	iconAlt: string
 	iconStyle?: React.CSSProperties
+	nodeKey?: string // Only for mention items
 }
 
 interface ChatContextBarProps {
@@ -50,6 +51,7 @@ export const ChatContextBar = ({
 				displayName: mention.displayName,
 				originalIndex: index,
 				iconAlt,
+				nodeKey: mention.nodeKey,
 			})
 		})
 
@@ -86,38 +88,46 @@ export const ChatContextBar = ({
 
 	return (
 		<div className="flex items-center flex-wrap gap-1 mb-2">
-			{contextItems.map((item, index) => (
-				<div
-					key={`${item.type}-${item.originalIndex}`}
-					className={cn(
-						"relative flex items-center gap-1 px-2 py-1 border",
-						"bg-vscode-input-background text-vscode-input-foreground",
-						"rounded text-xs whitespace-nowrap flex-shrink-0 cursor-pointer",
-						"hover:bg-vscode-list-hoverBackground",
-					)}
-					onMouseEnter={() => setHoveredIndex(index)}
-					onMouseLeave={() => setHoveredIndex(null)}>
-					{hoveredIndex === index ? (
-						<button
-							onClick={(e) => {
-								e.stopPropagation()
-								handleRemove(item)
-								setHoveredIndex(null)
-							}}
-							className="flex shrink-0 items-center justify-center cursor-pointer">
-							<X className="size-3 text-vscode-input-foreground" />
-						</button>
-					) : (
-						<img
-							src={item.icon}
-							alt={item.iconAlt}
-							className="size-3 shrink-0"
-							style={{ ...item.iconStyle }}
-						/>
-					)}
-					<span>{item.displayName}</span>
-				</div>
-			))}
+			{contextItems.map((item, index) => {
+				// Use nodeKey for mentions, fallback to type-index for images
+				const uniqueKey =
+					item.type === "mention" && item.nodeKey
+						? `mention-${item.nodeKey}`
+						: `${item.type}-${item.originalIndex}`
+
+				return (
+					<div
+						key={uniqueKey}
+						className={cn(
+							"relative flex items-center gap-1 px-2 py-1 border",
+							"bg-vscode-input-background text-vscode-input-foreground",
+							"rounded text-xs whitespace-nowrap flex-shrink-0 cursor-pointer",
+							"hover:bg-vscode-list-hoverBackground",
+						)}
+						onMouseEnter={() => setHoveredIndex(index)}
+						onMouseLeave={() => setHoveredIndex(null)}>
+						{hoveredIndex === index ? (
+							<button
+								onClick={(e) => {
+									e.stopPropagation()
+									handleRemove(item)
+									setHoveredIndex(null)
+								}}
+								className="flex shrink-0 items-center justify-center cursor-pointer">
+								<X className="size-3 text-vscode-input-foreground" />
+							</button>
+						) : (
+							<img
+								src={item.icon}
+								alt={item.iconAlt}
+								className="size-3 shrink-0"
+								style={{ ...item.iconStyle }}
+							/>
+						)}
+						<span>{item.displayName}</span>
+					</div>
+				)
+			})}
 		</div>
 	)
 }