From 648d60b9329664686d528547b790e907501a807c Mon Sep 17 00:00:00 2001
From: AbdelruhmanSamy <abdelruhman.mohamad04@eng-st.cu.edu.eg>
Date: Sat, 21 Dec 2024 17:43:16 +0200
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20(messaging):=20Mentions=20UI?=
 =?UTF-8?q?=20almost=20finished?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/ExpandingTextArea.tsx      | 105 ++++++++++++------
 app/src/features/chats/ChatInputIcons.tsx     |   8 +-
 app/src/features/chats/ChatItem.tsx           |   4 +-
 app/src/features/chats/SenderName.tsx         |   2 +-
 app/src/features/chats/Topbar.tsx             |   2 +-
 .../{useChatMember.ts => useChatMembers.ts}   |   1 +
 app/src/features/chats/hooks/useChats.ts      |   1 +
 .../features/chats/hooks/useMentionList.ts    |  20 ++++
 app/src/features/chats/utils/helpers.ts       |   2 +-
 app/src/utils/renderWithHighlight.tsx         |  18 +--
 app/src/utils/renderWithMentions.tsx          |  43 +++++++
 11 files changed, 158 insertions(+), 48 deletions(-)
 rename app/src/features/chats/hooks/{useChatMember.ts => useChatMembers.ts} (99%)
 create mode 100644 app/src/features/chats/hooks/useMentionList.ts
 create mode 100644 app/src/utils/renderWithMentions.tsx

diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 86a1ca4d..526bdae2 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -1,59 +1,96 @@
 import { useEffect, useRef } from "react";
 import styled from "styled-components";
+import { MentionsInput, Mention } from "react-mentions";
+import useMentionList from "@features/chats/hooks/useMentionList";
 
-const Textarea = styled.textarea`
-  outline: none;
-  border: none;
-
-  flex: 1;
-  align-self: center;
-
-  caret-color: var(--accent-color);
+const StyledMentionsInput = styled.div`
+  width: 100%;
+  max-width: 27rem;
   color: var(--color-text);
-
-  resize: none;
-  overflow: hidden;
-
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 0.25rem;
-
-  max-height: 300px;
 `;
 
 type PropsType = {
   input: string;
   setInput: (value: string) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => void;
 };
 
 function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
-  const ref = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const { filteredMembers } = useMentionList();
 
   function handleInput() {
-    if (ref.current) {
-      ref.current.style.height = "auto";
-      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
     }
   }
+
   useEffect(() => {
-    if (ref.current) {
-      if (ref.current.value === "" || input === "") {
-        ref.current.style.height = "32px";
+    if (textareaRef.current) {
+      if (textareaRef.current.value === "" || input === "") {
+        textareaRef.current.style.height = "32px";
       }
     }
   }, [input]);
 
+  console.log(filteredMembers);
+
   return (
-    <Textarea
-      ref={ref}
-      value={input}
-      onChange={(e) => setInput(e.target.value)}
-      placeholder="Message"
-      rows={1}
-      onInput={handleInput}
-      onKeyDown={onKeyDown}
-    />
+    <StyledMentionsInput>
+      <MentionsInput
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={onKeyDown!}
+        onInput={handleInput}
+        placeholder="Message"
+        a11ySuggestionsListLabel="Suggested mentions"
+        style={{
+          input: {
+            overflow: "hidden",
+            border: "none",
+            forcedColorAdjust: "none",
+            color: "var(--color-text)",
+            outline: "none",
+          },
+          suggestions: {
+            list: {
+              backgroundColor: "var(--color-background)",
+              border: "none",
+              borderRadius: "0.5rem",
+              position: "absolute",
+              zIndex: 1,
+              bottom: "2rem",
+              width: "20rem",
+              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+            },
+            item: {
+              padding: "0.5rem 1rem",
+              "&focused": {
+                backgroundColor: "var(--accent-color)",
+                color: "white",
+              },
+            },
+          },
+        }}
+      >
+        <Mention
+          trigger="@"
+          data={filteredMembers}
+          displayTransform={(display) => `@${display}`}
+          style={{
+            backgroundColor: "transparent",
+            color: "ButtonFace",
+            border: "none",
+          }}
+        />
+      </MentionsInput>
+    </StyledMentionsInput>
   );
 }
 
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
index 4d234f58..d2c2d183 100644
--- a/app/src/features/chats/ChatInputIcons.tsx
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -3,7 +3,7 @@ import { getIcon } from "@data/icons";
 import styled from "styled-components";
 import MediaUploadComponent from "./media/MediaUploadComponent";
 import Icon from "@components/Icon";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { ChatInputContext } from "./ChatBox";
 
 const InvisibleButton = styled.div`
@@ -27,7 +27,11 @@ function ChatInputIcons() {
     setIsEmojiSelectorOpen((show: boolean) => !show);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeyDown = (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e as unknown as Event);
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 960b6ebf..484db61a 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
 import { DetailedChatInterface } from "@state/messages/chats";
+import RenderWithMention from "@utils/renderWithMentions";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -64,7 +65,8 @@ const ChatItem = ({
   const navigate = useNavigate();
 
   const timestamp = lastMessage?.timestamp || "No messages";
-  const lastMessageContent = lastMessage?.content || "No messages";
+  const lastMessageContent =
+    RenderWithMention(lastMessage?.content!) || "No messages";
 
   const { chatId } = useParams<{ chatId: string }>();
 
diff --git a/app/src/features/chats/SenderName.tsx b/app/src/features/chats/SenderName.tsx
index 236b277e..b5f66c86 100644
--- a/app/src/features/chats/SenderName.tsx
+++ b/app/src/features/chats/SenderName.tsx
@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import { useAppSelector } from "@hooks/useGlobalState";
-import { useChatMembers } from "./hooks/useChatMember";
+import { useChatMembers } from "./hooks/useChatMembers";
 
 import { useMessageContext } from "./contexts/MessageProvider";
 
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index ec2fc116..29ce88d5 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -13,7 +13,7 @@ import { setChatIsBlocked } from "@state/messages/chats";
 
 import { useSocket } from "@hooks/useSocket";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
-import { useChatMembers } from "./hooks/useChatMember";
+import { useChatMembers } from "./hooks/useChatMembers";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
 
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMembers.ts
similarity index 99%
rename from app/src/features/chats/hooks/useChatMember.ts
rename to app/src/features/chats/hooks/useChatMembers.ts
index b763df6b..07dc1ed9 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMembers.ts
@@ -12,4 +12,5 @@ export function useChatMembers(memberIDs?: ChatMember[]): Member[] {
       members.find((member) => member._id === filteredID._id)
     )
     .filter((member): member is Member => member !== undefined); // Ensure no undefined values
+    
 }
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 2efbe381..335f5b0d 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -27,6 +27,7 @@ export function useChats() {
 
   useEffect(() => {
     const processMessages = async ({ chats, members }: ChatsState) => {
+      if (!chats) return;
       await Promise.all(
         chats.map(async (chat) => {
           if (chat.type === "private") {
diff --git a/app/src/features/chats/hooks/useMentionList.ts b/app/src/features/chats/hooks/useMentionList.ts
new file mode 100644
index 00000000..165aa557
--- /dev/null
+++ b/app/src/features/chats/hooks/useMentionList.ts
@@ -0,0 +1,20 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "../utils/helpers";
+import { useChatMembers } from "./useChatMembers";
+
+function useMentionList() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+
+  const chatMembers = useChatMembers(chat?.members);
+  const filteredMembers = chatMembers.map((member) => ({
+    id: member.username,
+    display: `${member.screenFirstName} ${member.screenLastName}`,
+  }));
+
+  return { filteredMembers };
+}
+
+export default useMentionList;
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index a519a1db..2e0270be 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -14,7 +14,7 @@ export function getChatByID({
 export function parseChatsToState(chatData?: any) {
   if (!chatData) return [];
   return chatData?.chats?.map((chat: any): DetailedChatInterface => {
-    const { isMuted, draft, chat: currChat } = chat;
+    const { chat: currChat } = chat;
     const {
       _id: chatId,
       isSeen,
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 611f47f4..fe6a18b6 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import RenderWithMention from "./renderWithMentions";
 
 const HighlightedText = styled.span<{ $highlight?: boolean }>`
   background-color: ${(props) => (props.$highlight ? "yellow" : "transparent")};
@@ -12,21 +13,22 @@ function RenderWithHighlight(
   id?: string
 ) {
   if (!searchTerm) {
-    return content;
+    return RenderWithMention(content);
   }
 
   const result = searchResults?.find((result) => result.messageId === id);
 
   if (!result) {
-    return content;
+    return RenderWithMention(content);
   }
 
-  const before = content.slice(0, result.highlightIndex);
-  const highlighted = content.slice(
-    result.highlightIndex,
-    result.highlightIndex + searchTerm.length
-  );
-  const after = content.slice(result.highlightIndex + searchTerm.length);
+  const before = content.toString().slice(0, result.highlightIndex);
+  const highlighted = content
+    .toString()
+    .slice(result.highlightIndex, result.highlightIndex + searchTerm.length);
+  const after = content
+    .toString()
+    .slice(result.highlightIndex + searchTerm.length);
 
   return (
     <span>
diff --git a/app/src/utils/renderWithMentions.tsx b/app/src/utils/renderWithMentions.tsx
new file mode 100644
index 00000000..58c43491
--- /dev/null
+++ b/app/src/utils/renderWithMentions.tsx
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+
+const HighlightedMention = styled.span`
+  font-weight: bolder;
+  cursor: pointer;
+`;
+
+function RenderWithMention(content: string) {
+  // Regex to match the mention pattern
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+
+  // Splitting content into text and mentions
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  while ((match = mentionRegex.exec(content)) !== null) {
+    // Push the text before the mention
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+
+    // Push the mention as a span element
+    parts.push(
+      <HighlightedMention color="green" key={match[1]}>
+        @{match[1]}
+      </HighlightedMention>
+    );
+
+    // Update the lastIndex
+    lastIndex = mentionRegex.lastIndex;
+  }
+
+  // Push the remaining text after the last mention
+  if (lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+
+  return <>{parts}</>;
+}
+
+export default RenderWithMention;

From 7f6fb28751d0abfe4c9a7a4e8b1bff92a50fe8df Mon Sep 17 00:00:00 2001
From: AbdelruhmanSamy <abdelruhman.mohamad04@eng-st.cu.edu.eg>
Date: Sat, 21 Dec 2024 23:38:42 +0200
Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20(messaging):=20Mentions=20almos?=
 =?UTF-8?q?t=20finished?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/data/icons.tsx                        |   4 +
 app/src/features/chats/ChatBody.tsx           |  27 +++-
 app/src/features/chats/ChatItem.tsx           |   2 +-
 app/src/features/chats/Message.tsx            |   2 -
 .../features/chats/hooks/useFetchNextPage.ts  |   5 +
 .../features/chats/hooks/useMessageSender.ts  |   4 +-
 .../chats/hooks/useTraverseMentions.ts        |  80 +++++++++++
 app/src/features/chats/utils/helpers.ts       |   2 +-
 app/src/mocks/data/chats.ts                   | 130 +++++++++---------
 app/src/sockets/SocketProvider.tsx            |  10 +-
 app/src/state/messages/chats.ts               |  34 +++++
 app/src/types/messages.ts                     |   2 +
 app/src/utils/renderWithHighlight.tsx         |   4 +-
 app/src/utils/renderWithMentions.tsx          |  26 ++--
 14 files changed, 241 insertions(+), 91 deletions(-)
 create mode 100644 app/src/features/chats/hooks/useTraverseMentions.ts

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 81c37cc8..4fc6647e 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -67,6 +67,7 @@ enum icons {
   Eye,
   Sun,
   Group,
+  Mention,
 }
 
 type iconStrings = keyof typeof icons;
@@ -437,6 +438,9 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/Visibility"),
     defaultProps: { fontSize: "small" },
   },
+  Mention:{
+    importFn: () => import ("@mui/icons-material/AlternateEmail"),
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 5fd1969f..dfad1f59 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -8,12 +8,14 @@ import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 import MessageProvider from "./contexts/MessageProvider";
+import { getIcon } from "@data/icons";
+import useTraversalMentions from "./hooks/useTraverseMentions";
+import Icon from "@components/Icon";
 
 const ScrollContainer = styled.div`
   width: 100%;
   height: 82dvh;
   overflow-y: auto;
-  position: relative;
   margin-top: 3rem;
   &::-webkit-scrollbar {
     width: 5px;
@@ -45,6 +47,9 @@ function ChatBody() {
   const { inView, ref } = useInView({ threshold: 0.01 });
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
+  const { handleNextMentionMessage, mentionMessages } = useTraversalMentions();
+
+
   useEffect(() => {
     if (inView && hasNextPage && chatId) {
       const container = scrollContainerRef.current;
@@ -101,6 +106,26 @@ function ChatBody() {
             </MessageProvider>
           );
         })}
+      <Icon onClick={handleNextMentionMessage} data-testid="mention-icon">
+        {mentionMessages.length > 0 &&
+          getIcon("Mention", {
+            sx: {
+              fontSize: "2.5rem",
+              color: "var(--accent-color)",
+              backgroundColor: `var(--color-background)`,
+              borderRadius: "50%",
+              position: "absolute",
+              bottom: "8rem",
+              right: "3%",
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: "var(--color-background-own-1)",
+                color: "white",
+                transition: "0.2s",
+              },
+            },
+          })}
+      </Icon>
     </ScrollContainer>
   );
 }
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 484db61a..74be66f8 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -66,7 +66,7 @@ const ChatItem = ({
 
   const timestamp = lastMessage?.timestamp || "No messages";
   const lastMessageContent =
-    RenderWithMention(lastMessage?.content!) || "No messages";
+    RenderWithMention(lastMessage?.content!, lastMessage?._id!) || "No messages";
 
   const { chatId } = useParams<{ chatId: string }>();
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 79510ef4..e6260e8d 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -74,7 +74,6 @@ const CheckBoxWrapper = styled.div`
 const Message = React.memo(() => {
   const { _id: id, chatId, isMine, chatType } = useMessageContext();
 
-  const { lastMessageRef } = useScrollToLastMsg();
   useScrollToSearchResultsMsg();
 
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
@@ -92,7 +91,6 @@ const Message = React.memo(() => {
       )}
 
       <StyledMessage
-        ref={lastMessageRef}
         key={id}
         $isMine={chatType === "channel" ? false : isMine}
         data-message-id={id}
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index c9b4885b..b54d6d0c 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -57,6 +57,11 @@ function useFetchNextPage() {
 
     if (data) {
       const lastFetchedPage = data.pages[data.pages.length - 1];
+      lastFetchedPage.messages.forEach((element: any) => {
+        element.isMention = false;
+        element.isSeen = false;
+      });
+
       if (lastFetchedPage && chatId) {
         processMessages(lastFetchedPage.messages).then(() => {
           dispatch(
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 26831bba..4c3b0417 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -17,7 +17,7 @@ export const useMessageSender = () => {
     data: string,
     chatId?: string,
     file?: string,
-    type: ContentType = "text",
+    type: ContentType = "text"
   ) => {
     const chat = getChatByID({ chats, chatID: chatId as string });
 
@@ -53,6 +53,8 @@ export const useMessageSender = () => {
         status: MessageStatus.sent,
         media: file,
         threadMessages: [],
+        isMention: false,
+        isSeen: false,
       };
 
       const threadMessage = {
diff --git a/app/src/features/chats/hooks/useTraverseMentions.ts b/app/src/features/chats/hooks/useTraverseMentions.ts
new file mode 100644
index 00000000..6d82c138
--- /dev/null
+++ b/app/src/features/chats/hooks/useTraverseMentions.ts
@@ -0,0 +1,80 @@
+import { useParams } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "../utils/helpers";
+import { useEffect, useMemo, useState } from "react";
+import { MessageInterface } from "types/messages";
+import { setIsMention, setIsSeen } from "@state/messages/chats";
+
+function useTraversalMentions() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+  const chatMessages = chat?.messages;
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+
+  const user = useAppSelector((state) => state.user.userInfo);
+  const dispatch = useAppDispatch();
+
+  const [mentionMessages, setMentionMessages] = useState<MessageInterface[]>(
+    []
+  );
+
+  const [currentMentionIndex, setCurrentMentionIndex] = useState(0);
+
+  const currentMentionMessage = useMemo(() => {
+    return mentionMessages[currentMentionIndex];
+  }, [mentionMessages, currentMentionIndex]);
+
+  useEffect(() => {
+    if (chatMessages) {
+      const mentions = chatMessages.filter(
+        (message) => message.isMention && !message.isSeen
+      );
+
+      const userMentions = mentions
+        .filter((mention) => {
+          const match = mentionRegex.exec(mention.content);
+          return match?.[1] === user.username;
+        })
+        .map((mention) => mention._id);
+
+      const filteredMentions = mentions.filter((mention) =>
+        userMentions.includes(mention._id)
+      );
+
+      setMentionMessages(filteredMentions);
+    }
+  }, [chatMessages]);
+
+  const handleNextMentionMessage = () => {
+    if (mentionMessages.length > 0) {
+      setCurrentMentionIndex(
+        (prevIndex) => (prevIndex + 1) % mentionMessages.length
+      );
+      document
+        .querySelector("[data-message-id='" + currentMentionMessage?._id + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      const updatedMessages = [...mentionMessages];
+      updatedMessages.splice(currentMentionIndex, 1);
+      setIsMention({
+        chatId: chatId!,
+        isMention: false,
+        messageId: currentMentionMessage._id,
+      });
+      setMentionMessages(updatedMessages);
+      dispatch(
+        setIsSeen({
+          chatId: chatId!,
+          messageId: currentMentionMessage._id,
+          isSeen: true,
+        })
+      );
+    }
+  };
+  return { handleNextMentionMessage, mentionMessages };
+}
+
+export default useTraversalMentions;
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index 2e0270be..d527cd76 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -58,7 +58,7 @@ export function parseChatsToState(chatData?: any) {
       isTyping: false,
       showCheckBox: false,
       selectedMessages: [],
-
+      isMention: false,
       encryptionKey,
       initializationVector,
     } as DetailedChatInterface;
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 73a4e4ff..7f9954b8 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,71 +41,71 @@ export type ChatDataType = {
   }[];
 };
 
-export const allChats: Chat[] = [
-  {
-    _id: "1",
-    isSeen: false,
-    members: ["1", "2"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "2",
-    isSeen: false,
-    members: ["2", "1"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "3",
-    isSeen: false,
-    members: ["3"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "4",
-    isSeen: false,
-    members: ["4"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "5",
-    isSeen: false,
-    members: ["5"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "6",
-    isSeen: false,
-    members: ["6"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "7",
-    isSeen: false,
-    members: ["7"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "8",
-    isSeen: false,
-    members: ["8"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "9",
-    isSeen: false,
-    members: ["9"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-];
+// export const allChats: Chat[] = [
+//   {
+//     _id: "1",
+//     isSeen: false,
+//     members: ["1", "2"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "2",
+//     isSeen: false,
+//     members: ["2", "1"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "3",
+//     isSeen: false,
+//     members: ["3"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "4",
+//     isSeen: false,
+//     members: ["4"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "5",
+//     isSeen: false,
+//     members: ["5"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "6",
+//     isSeen: false,
+//     members: ["6"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "7",
+//     isSeen: false,
+//     members: ["7"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "8",
+//     isSeen: false,
+//     members: ["8"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "9",
+//     isSeen: false,
+//     members: ["9"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+// ];
 
 export const members: Member[] = [
   {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 7bf04010..f9539865 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -45,10 +45,7 @@ interface AcknowledgmentResponse {
   success: boolean;
   message: string;
   error?: string;
-  res: {
-    messageId: string;
-    message: MessageInterface;
-  };
+  data: MessageInterface;
 }
 
 interface AckCreateGroup {
@@ -199,14 +196,13 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.emit(
         "SEND_MESSAGE",
         sentMessage,
-        ({ success, res, error, message }: AcknowledgmentResponse) => {
+        ({ success, data, error, message }: AcknowledgmentResponse) => {
           if (!success) {
             console.log(message);
             console.log("Failed to send", error);
           }
           if (success) {
-            const _id = res.messageId;
-
+            const _id = data._id;
             if (!chat) return;
 
             if (chat?.type === "private") {
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 1665c4d8..5589a968 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -298,6 +298,38 @@ const chatsSlice = createSlice({
         chat.photo = photo;
       }
     },
+
+    setIsMention: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isMention: boolean;
+      }>
+    ) => {
+      const { chatId, isMention, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isMention = isMention;
+      }
+    },
+
+    setIsSeen: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isSeen: boolean;
+      }>
+    ) => {
+      const { chatId, isSeen, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isSeen = isSeen;
+      }
+    },
   },
 });
 
@@ -319,6 +351,8 @@ export const {
   setMemberIsBlocked,
   setName,
   setPhoto,
+  setIsMention,
+  setIsSeen,
 } = chatsSlice.actions;
 export default chatsSlice.reducer;
 export type { DetailedChatInterface, ChatsState };
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 767a1edd..6a66458b 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -36,6 +36,8 @@ export interface MessageInterface {
   //TODO: should use parentMessageId
   isReply: boolean;
   threadMessages: string[];
+  isMention: boolean;
+  isSeen: boolean;
 }
 
 export enum StickerTap {
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index fe6a18b6..4c4a2d78 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -13,13 +13,13 @@ function RenderWithHighlight(
   id?: string
 ) {
   if (!searchTerm) {
-    return RenderWithMention(content);
+    return RenderWithMention(content, id!);
   }
 
   const result = searchResults?.find((result) => result.messageId === id);
 
   if (!result) {
-    return RenderWithMention(content);
+    return RenderWithMention(content, id!);
   }
 
   const before = content.toString().slice(0, result.highlightIndex);
diff --git a/app/src/utils/renderWithMentions.tsx b/app/src/utils/renderWithMentions.tsx
index 58c43491..5c749cc2 100644
--- a/app/src/utils/renderWithMentions.tsx
+++ b/app/src/utils/renderWithMentions.tsx
@@ -1,39 +1,43 @@
+import { setIsMention } from "@state/messages/chats";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
-
 const HighlightedMention = styled.span`
   font-weight: bolder;
   cursor: pointer;
 `;
 
-function RenderWithMention(content: string) {
-  // Regex to match the mention pattern
+function RenderWithMention(content: string, messageId: string) {
   const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
-
-  // Splitting content into text and mentions
+  const { chatId } = useParams<{ chatId: string }>();
+  const dispatch = useDispatch();
   const parts = [];
   let lastIndex = 0;
   let match;
 
-  while ((match = mentionRegex.exec(content)) !== null) {
-    // Push the text before the mention
+  let hasMention = false;
+  while (content && (match = mentionRegex.exec(content)) !== null) {
+    hasMention = true;
+
     if (match.index > lastIndex) {
       parts.push(content.slice(lastIndex, match.index));
     }
 
-    // Push the mention as a span element
     parts.push(
       <HighlightedMention color="green" key={match[1]}>
         @{match[1]}
       </HighlightedMention>
     );
 
-    // Update the lastIndex
     lastIndex = mentionRegex.lastIndex;
   }
 
-  // Push the remaining text after the last mention
-  if (lastIndex < content.length) {
+  if (hasMention) {
+    dispatch(setIsMention({ chatId: chatId!, isMention: true, messageId }));
+  }
+
+  if (content && lastIndex < content.length) {
     parts.push(content.slice(lastIndex));
   }
 

From 20c711ce963d8598b20921b7c1fc6d2979059af1 Mon Sep 17 00:00:00 2001
From: AbdelruhmanSamy <abdelruhman.mohamad04@eng-st.cu.edu.eg>
Date: Sun, 22 Dec 2024 00:01:07 +0200
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9B=20(messaging):=20Fixing=20merg?=
 =?UTF-8?q?e=20problems?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/ExpandingTextArea.tsx | 16 ++++++++--------
 app/src/features/chats/Message.tsx       |  1 -
 app/src/sockets/SocketProvider.tsx       |  4 +---
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 526bdae2..74beb98e 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -45,7 +45,7 @@ function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
     <StyledMentionsInput>
       <MentionsInput
         value={input}
-        onChange={(e) => setInput(e.target.value)}
+        onChange={(e: any) => setInput(e.target.value)}
         onKeyDown={onKeyDown!}
         onInput={handleInput}
         placeholder="Message"
@@ -56,7 +56,7 @@ function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
             border: "none",
             forcedColorAdjust: "none",
             color: "var(--color-text)",
-            outline: "none",
+            outline: "none"
           },
           suggestions: {
             list: {
@@ -67,16 +67,16 @@ function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
               zIndex: 1,
               bottom: "2rem",
               width: "20rem",
-              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)",
+              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)"
             },
             item: {
               padding: "0.5rem 1rem",
               "&focused": {
                 backgroundColor: "var(--accent-color)",
-                color: "white",
-              },
-            },
-          },
+                color: "white"
+              }
+            }
+          }
         }}
       >
         <Mention
@@ -86,7 +86,7 @@ function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
           style={{
             backgroundColor: "transparent",
             color: "ButtonFace",
-            border: "none",
+            border: "none"
           }}
         />
       </MentionsInput>
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index df06ba95..559dbd0b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -7,7 +7,6 @@ import MessageContent from "./MessageContent";
 import useCheckBox from "@features/forward/hooks/useCheckBox";
 import MessageDetails from "./MessageDetails";
 
-import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
 import useHover from "./hooks/useHover";
 import { useMessageContext } from "./contexts/MessageProvider";
 import React from "react";
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 0a5c9b23..61f9d84e 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -49,7 +49,6 @@ interface AcknowledgmentResponse {
   message: string;
   error?: string;
   data: MessageInterface;
-  data: MessageInterface;
 }
 
 interface AckCreateGroup {
@@ -66,7 +65,6 @@ function SocketProvider({ children }: SocketProviderProps) {
   const {
     callId,
     joinCall,
-    endCall,
     recieveICE,
     recieveAnswer,
     peerConnection,
@@ -296,7 +294,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       sendOffer();
       handleIceCandidates();
     });
-    socket.on("SIGNAL-SERVER", async ({ type, voiceCallId, data }) => {
+    socket.on("SIGNAL-SERVER", async ({ type, data }) => {
       console.log(typeof data);
       if (type === "ANSWER") recieveAnswer(data);
       if (type === "ICE") recieveICE(data);