feat(mentions) : added the mentions feature.

Author: mixter3011

app/provider.tsx

@@ -1,11 +1,14 @@
 'use client';
 
 import Loader from "@/components/Loaders";
-import { getClerkUsers } from "@/lib/actions/user.actions";
+import { getClerkUsers, getDocumentUsers } from "@/lib/actions/user.actions";
+import { useUser } from "@clerk/nextjs";
 import { ClientSideSuspense, LiveblocksProvider } from "@liveblocks/react/suspense";
 import { ReactNode } from "react";
 
 const Provider = ({ children }: { children: ReactNode}) => {
+  const { user: clerkUser } = useUser();
+
   return (
     <LiveblocksProvider 
       authEndpoint="/api/liveblocks-auth"
@@ -14,6 +17,15 @@ const Provider = ({ children }: { children: ReactNode}) => {
 
         return users;
       }}
+      resolveMentionSuggestions={async ({ text, roomId }) => {
+        const roomUsers = await getDocumentUsers({
+          roomId,
+          currentUser: clerkUser?.emailAddresses[0].emailAddress!,
+          text,
+        })
+
+        return roomUsers;
+      }}
     >
         <ClientSideSuspense fallback={<Loader/>}>
           {children}

lib/actions/user.actions.ts

@@ -2,6 +2,7 @@
 
 import { clerkClient } from "@clerk/nextjs/server";
 import { parseStringify } from "../utils";
+import { liveblocks } from "../liveblocks";
 
 export const getClerkUsers = async ({ userIds } : { userIds: string[]}) => {
     try {
@@ -18,8 +19,28 @@ export const getClerkUsers = async ({ userIds } : { userIds: string[]}) => {
 
       const sortedUsers = userIds.map((email) => users.find((user) => user.email === email));
 
-      return parseStringify(sortedUsers);
+      return parseStringify(sortedUsers); 
     } catch (error) {
         console.log(`Error fetching users: ${error}`)
     }
+}
+
+export const getDocumentUsers = async ({ roomId, currentUser, text } : {roomId: string, currentUser: string, text: string }) => {
+  try {
+    const room = await liveblocks.getRoom(roomId);
+
+    const users = Object.keys(room.usersAccesses).filter((email) => email !== currentUser);
+
+    if (text.length) {
+      const lowerCaseText = text.toLocaleLowerCase();
+      
+      const filteredUsers = users.filter((email: string) => email.toLowerCase().includes(lowerCaseText))
+
+      return parseStringify(filteredUsers);
+    }
+
+    return parseStringify(users);
+  } catch (error) {
+    console.log(`Error fetching document users: ${error}`);
+  }
 }