Reply functionality for Group Chat and DirectChat

schema.graphql

@@ -1581,4 +1581,4 @@ input VenueInput {
 input createUserFamilyInput {
   title: String!
   userIds: [ID!]!
-}
+}

src/GraphQl/Mutations/OrganizationMutations.ts

@@ -86,11 +86,35 @@ export const CREATE_DIRECT_CHAT = gql`
 `;
 
 export const SEND_MESSAGE_TO_DIRECT_CHAT = gql`
-  mutation sendMessageToDirectChat($chatId: ID!, $messageContent: String!) {
-    sendMessageToDirectChat(chatId: $chatId, messageContent: $messageContent) {
+  mutation sendMessageToDirectChat(
+    $chatId: ID!
+    $replyTo: ID
+    $messageContent: String!
+  ) {
+    sendMessageToDirectChat(
+      chatId: $chatId
+      replyTo: $replyTo
+      messageContent: $messageContent
+    ) {
       _id
       createdAt
       messageContent
+      replyTo {
+        _id
+        createdAt
+        messageContent
+        receiver {
+          _id
+          firstName
+          lastName
+        }
+        sender {
+          _id
+          firstName
+          lastName
+        }
+        updatedAt
+      }
       receiver {
         _id
         firstName
@@ -107,11 +131,30 @@ export const SEND_MESSAGE_TO_DIRECT_CHAT = gql`
 `;
 
 export const SEND_MESSAGE_TO_GROUP_CHAT = gql`
-  mutation sendMessageToGroupChat($chatId: ID!, $messageContent: String!) {
-    sendMessageToGroupChat(chatId: $chatId, messageContent: $messageContent) {
+  mutation sendMessageToGroupChat(
+    $chatId: ID!
+    $replyTo: ID
+    $messageContent: String!
+  ) {
+    sendMessageToGroupChat(
+      chatId: $chatId
+      replyTo: $replyTo
+      messageContent: $messageContent
+    ) {
       _id
       createdAt
       messageContent
+      replyTo {
+        _id
+        createdAt
+        messageContent
+        sender {
+          _id
+          firstName
+          lastName
+        }
+        updatedAt
+      }
       sender {
         _id
         firstName

src/GraphQl/Queries/PlugInQueries.ts

@@ -141,6 +141,25 @@ export const DIRECT_CHAT_BY_ID = gql`
         _id
         createdAt
         messageContent
+        replyTo {
+          _id
+          createdAt
+          messageContent
+          receiver {
+            _id
+            firstName
+            lastName
+            email
+            image
+          }
+          sender {
+            _id
+            firstName
+            lastName
+            email
+            image
+          }
+        }
         receiver {
           _id
           firstName
@@ -176,6 +195,18 @@ export const GROUP_CHAT_BY_ID = gql`
         _id
         createdAt
         messageContent
+        replyTo {
+          _id
+          createdAt
+          messageContent
+          sender {
+            _id
+            firstName
+            lastName
+            email
+            image
+          }
+        }
         sender {
           _id
           firstName
@@ -195,30 +226,6 @@ export const GROUP_CHAT_BY_ID = gql`
   }
 `;
 
-// directChatByChatId
-
-// export const GROUP_CHAT_MESSAGES_BY_CHAT_ID = gql`
-//   query directChatsMessagesByChatID($id: ID!) {
-//     directChatsMessagesByChatID(id: $id) {
-//       _id
-//       createdAt
-//       messageContent
-//       receiver {
-//         _id
-//         firstName
-//         lastName
-//         email
-//       }
-//       sender {
-//         _id
-//         firstName
-//         lastName
-//         email
-//       }
-//     }
-//   }
-// `;
-
 export const DIRECT_CHATS_LIST = gql`
   query DirectChatsByUserID($id: ID!) {
     directChatsByUserID(id: $id) {

src/components/Avatar/Avatar.module.css

@@ -1,6 +1,6 @@
 .imageContainer {
-  width: 56px;
-  height: 56px;
+  width: fit-content;
+  height: fit-content;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/UserPortal/ChatRoom/ChatRoom.module.css

@@ -53,6 +53,9 @@
   width: fit-content;
   max-width: 75%;
   min-width: 80px;
+  padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
 }
 
 .messageSent {
@@ -65,6 +68,49 @@
   background-color: rgba(196, 255, 211, 0.3);
   min-width: 80px;
   padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.userDetails {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  gap: 6px;
+}
+
+.userDetails .userImage {
+  height: 20px;
+  width: 20px;
+}
+
+.replyTo {
+  border-left: 4px solid pink;
+  display: flex;
+  justify-content: space-between;
+  background-color: rgb(249, 249, 250);
+  padding: 6px 0px 4px 4px;
+  border-radius: 6px 6px 6px 6px;
+}
+
+.replyToMessageContainer {
+  padding-left: 4px;
+}
+
+.replyToMessageContainer p {
+  margin: 4px 0px 0px;
+}
+
+.replyToMessage {
+  border-left: 4px solid pink;
+  border-radius: 6px;
+  margin: 6px 0px;
+  padding: 6px;
+  background-color: #dbf6db;
+}
+
+.messageReceived .replyToMessage {
+  background-color: #f2f2f2;
 }
 
 .messageTime {
@@ -73,10 +119,15 @@
   align-items: flex-end;
   justify-content: flex-end;
   margin-bottom: 0px;
+  margin-left: 6px;
 }
 
 .messageContent {
-  margin-bottom: 0px;
+  margin-bottom: 0.5px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .createChat {
@@ -108,3 +159,91 @@
   font-size: 12px;
   font-weight: 600;
 }
+
+.messageAttributes {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.customToggle {
+  display: none;
+}
+
+.customToggle,
+.closeBtn {
+  padding: 0;
+  background: none;
+  border: none;
+  --bs-btn-active-bg: none;
+}
+.customToggle svg {
+  color: black;
+  font-size: 12px;
+}
+
+.customToggle::after,
+.closeBtn::after {
+  content: none;
+}
+
+.closeBtn svg {
+  color: black;
+  font-size: 18px;
+}
+
+.closeBtn {
+  padding: 2px 10px;
+}
+
+.closeBtn:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
+  border: none;
+}
+
+.messageReceived:hover .customToggle {
+  display: block;
+}
+
+.messageSent:hover .customToggle {
+  display: block;
+}
+
+.messageSent:hover,
+.messageReceived:hover {
+  padding: 0px 6px;
+}
+
+.messageSent:target {
+  scroll-margin-top: 100px;
+  animation-name: test;
+  animation-duration: 1s;
+}
+
+.messageReceived:target {
+  scroll-margin-top: 100px;
+  animation-name: test;
+  animation-duration: 1s;
+}
+
+@keyframes test {
+  from {
+    background-color: white;
+  }
+  to {
+    background-color: rgb(82, 83, 81);
+  }
+}
+
+a {
+  color: currentColor;
+  width: 100%;
+}