feat: implement user tagging in incident comments

keep-ui/app/(keep)/MentionNotificationsProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useMentionNotifications } from "@/utils/hooks/useMentionNotifications";
+
+/**
+ * Provider component that sets up mention notifications
+ * This is a client component that doesn't render anything visible
+ */
+export function MentionNotificationsProvider() {
+  // Add isClient state to prevent hydration mismatch
+  const [isClient, setIsClient] = useState(false);
+
+  // Set isClient to true on component mount
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Use the hook directly - it has its own isClient check
+  useMentionNotifications();
+
+  return null;
+}

keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { AlertDto } from "@/entities/alerts/model";
+import { AlertDto, CommentMentionDto } from "@/entities/alerts/model";
 import { IncidentDto } from "@/entities/incidents/model";
 import { useUsers } from "@/entities/users/model/useUsers";
 import UserAvatar from "@/components/navbar/UserAvatar";
 import "./incident-activity.css";
+import "./ui/quill-mention.css";
 import {
   useIncidentAlerts,
   usePollIncidentComments,
@@ -20,12 +21,13 @@ import { DynamicImageProviderIcon } from "@/components/ui";
 
 // TODO: REFACTOR THIS TO SUPPORT ANY ACTIVITY TYPE, IT'S A MESS!
 
-interface IncidentActivity {
+export interface IncidentActivity {
   id: string;
   type: "comment" | "alert" | "newcomment" | "statuschange" | "assign";
   text?: string;
   timestamp: string;
   initiator?: string | AlertDto;
+  mentions?: CommentMentionDto[];
 }
 
 const ACTION_TYPES = [
@@ -139,6 +141,7 @@ export function IncidentActivity({ incident }: { incident: IncidentDto }) {
                 ? auditEvent.description
                 : "",
             timestamp: auditEvent.timestamp,
+            mentions: auditEvent.mentions,
           } as IncidentActivity;
         }) || []
     );