feat: Add user mention functionality to incident comments

[hemangsk]

Added proper support for @mentions in incident comments. Created a dedicated CommentMention model with relationships to AlertAudit.

Closes #2187

📑 Description

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• All the tests have passed

ℹ Additional Information

/claim #2187

[vercel]

@hemangsk is attempting to deploy a commit to the KeepHQ Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[hemangsk]

@talboren @shahargl , could you please take a look if this fulfils the requirements? Let me know if there are any changes required to the approach. I'm working on tests atm.

[talboren]

@greptile

[talboren]

@Kiryous may I ask your help with reviewing the UI part here? 🙏🏼

[talboren]

@talboren @shahargl , could you please take a look if this fulfils the requirements? Let me know if there are any changes required to the approach. I'm working on tests atm.

The functionality looks great! I'm just wondering if it's not a bit complex under the hood. Let me review a bit further.

[greptile-apps]

PR Summary

Added user mention functionality to incident comments, including a new CommentMention table and UI components for handling @mentions in the activity feed.

• Added new CommentMention table with proper indexes and foreign key constraints in /keep/api/models/db/migrations/2025-04-29-15-21_1b12e6d6ad1f.py
• Implemented mention dropdown UI with keyboard navigation in /keep-ui/app/(keep)/incidents/[id]/activity/ui/IncidentActivityComment.tsx
• Added mention highlighting and user data fetching in /keep-ui/app/(keep)/incidents/[id]/activity/ui/IncidentActivityItem.tsx
• Modified /keep/api/routes/incidents.py to handle tagged users in comments with proper transaction management
• Added CommentMentionDto interface and updated AuditEvent type in /keep-ui/entities/alerts/model/types.ts

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

_{9 file(s) reviewed, 9 comment(s)
Edit PR Review Bot Settings | Greptile}

[skynetigor]

Hey!
Quick question — since we’re already using ReactQuill, could we integrate quill-mention to handle mentions instead of building a custom input from scratch?
It seems like a lighter approach, given that Quill is already part of our stack.

[hemangsk]

@skynetigor Thanks for the review! I'll get right on it

[hemangsk]

@skynetigor , I've updated the MR with quill-mention package and here's the comment box in action.

[hemangsk]

@skynetigor , I had to resort to some script tag voodoo to get quill-mention working. Regular imports were just throwing "Cannot resolve module" errors no matter what I tried. What worked is.. Manually adding the script onto the DOM, setting window.Quill first and then the loading order.

[hemangsk]

I've done all the requested changes. PTAL

[skynetigor]

@hemangsk could you please record a video how it works and attach to the PR?

[hemangsk]

@skynetigor Here's a screengrab of the feature:

Screen.Recording.2025-05-13.at.12.10.25.AM.mov

[hemangsk]

@skynetigor , Here's a screenrecording after the quill-mention integration (the last video was of original implementation without quill mention):

quillmention.mov

[Kiryous]

Please check the comment on quill-mention.js lib

[Kiryous]

Pushing a minified version of the lib to public is not a sustainable way forward. Let's handle it the proper way, I can help resolve issues if any with bundler.

[hemangsk]

@Kiryous Agreed, The problem right now is that after installing quill-mention via npm

npm i quill-mention --save

When I try to use it with :

import "quill-mention/autoregister";

or

import {Mention, MentionBlot} from "quill-mention";

Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention });

The application fails to compile with the error Module not found: Can't resolve 'quill-mention/autoregister', and I can confirm that autoregister definitely exists in node_modules folder.

[hemangsk]

@Kiryous I've described the issue above, it'll be really great if you could provide some help or direction on how to resolve it. A straightforward npm installation and import of quill-mention is not working atm.