Create User Mentions (@username) with Autocomplete

[gelluisaac]

closes #75
The mention system allows users to tag each other using the @ prefix. It balances a smooth frontend experience (debounced search and rich UI) with a reliable backend structure (ID-based storage) to ensure mentions remain valid even if a user changes their display name.

📋 Features Implemented

1. Frontend Autocomplete & Detection
   Regex Trigger: Monitors text input for the @ character followed by alphanumeric characters.

Debounced Search: Implements a 300ms delay on API calls to GET /api/users/search?q=... to optimize server performance.

Rich Suggestions: Displays a dropdown containing the user's avatar, display name, and username (limited to the top 5 matches).

Keyboard Navigation: Supports arrow keys for selection and Enter or Tab to confirm the mention.

2. Mention Parsing & Storage
   MentionModel Integration: Instead of storing raw text, mentions are parsed on submission.

ID-Persistent Storage: Mentions are stored using the User_ID rather than the username. This ensures that if a user updates their profile, the link and mention remain functional.

Position Metadata: Stores start and end indices of mentions to allow for accurate highlighting in the rendered Markdown/HTML content.

3. Rendering & Notifications
   Styled Links: Mentions are rendered as interactive, styled components (e.g., highlighted blue text) that link directly to the user's profile.

Notification Trigger: Automatically creates a record in the NotificationTable for any user tagged in a new post or comment.

[gelluisaac]

@0xGeorgii PR ready for review

[gelluisaac]

@0xGeorgii PR is ready

[gelluisaac]

@0xGeorgii PR awaiting your review

[Copilot]

Pull request overview

This PR implements a comprehensive user mention system (@username) with autocomplete functionality. The feature allows users to tag each other in posts and comments, creating notifications for mentioned users while persisting mentions by user ID to handle username changes gracefully.

Changes:

• Frontend autocomplete with debounced user search, keyboard navigation, and Monaco editor integration
• Backend mention parsing service that extracts @username patterns and validates users
• Notification system for alerting mentioned users with database migrations and API endpoints

Reviewed changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
package.json	Added lodash and jsdom dependencies for root project
UI/package.json	Added lodash dependency and type definitions for mention functionality
UI/src/components/MarkdownEditor.tsx	Integrated Monaco editor autocomplete provider for @mentions with debounced user search
UI/src/components/MarkdownView.tsx	Added paragraph component rendering and test updates for markdown links
UI/src/api/soroban-security-portal/soroban-security-portal-api.ts	Added searchUsersCall API method for user autocomplete
UI/src/api/soroban-security-portal/models/user.ts	Defined UserSearchResult model for autocomplete results
Backend/SorobanSecurityPortalApi/Services/ControllersServices/MentionService.cs	Core mention parsing and notification creation service
Backend/SorobanSecurityPortalApi/Services/ControllersServices/NotificationService.cs	Service for managing user notifications
Backend/SorobanSecurityPortalApi/Services/ControllersServices/VulnerabilitiesService.cs	Integrated mention processing for vulnerability descriptions
Backend/SorobanSecurityPortalApi/Services/ControllersServices/ReportService.cs	Integrated mention processing for report content
Backend/SorobanSecurityPortalApi/Services/ControllersServices/UserService.cs	Added SearchUsers method for autocomplete
Backend/SorobanSecurityPortalApi/Models/DbModels/MentionModel.cs	Database model for storing mention metadata
Backend/SorobanSecurityPortalApi/Models/DbModels/NotificationModel.cs	Database model for user notifications
Backend/SorobanSecurityPortalApi/Models/ViewModels/UserSearchResultViewModel.cs	View model for user search results
Backend/SorobanSecurityPortalApi/Data/Processors/MentionProcessor.cs	Data access layer for mention operations
Backend/SorobanSecurityPortalApi/Data/Processors/NotificationProcessor.cs	Data access layer for notification operations
Backend/SorobanSecurityPortalApi/Data/Processors/LoginProcessor.cs	Added SearchUsers database query method
Backend/SorobanSecurityPortalApi/Controllers/UserController.cs	API endpoints for user search and notification management
Backend/SorobanSecurityPortalApi/Common/Data/Db.cs	Added Mention and Notification DbSets
Backend/SorobanSecurityPortalApi/Migrations/20260127024000_AddMentions.cs	Database migration for mention table
Backend/SorobanSecurityPortalApi/Migrations/20260127030000_AddNotifications.cs	Database migration for notification table

Files not reviewed (1)

• UI/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gelluisaac]

@0xGeorgii all copilot review implemented

[gelluisaac]

@0xGeorgii was the status of the pr review

[gelluisaac]

@0xGeorgii PR awaiting review

[gelluisaac]

@0xGeorgii pr ready

[Copilot]

Pull request overview

Copilot reviewed 22 out of 24 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• UI/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 22 out of 24 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• UI/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gelluisaac]

@0xGeorgii PR updated

[gelluisaac]

@0xGeorgii all Copilot review implemented

[0xGeorgii]

@gelluisaac please attach a demo video (screencast) to show how this feature works

[gelluisaac]

@0xGeorgii sorry for the late response am on transit am going to a remote area which i dont know if i will get network when i arrived but you can review my code base everything works