Feat: follow message feature

packages/api/src/EmbeddedChatApi.ts

@@ -772,6 +772,42 @@ export default class EmbeddedChatApi {
       console.error(err);
     }
   }
+
+  async followMessage(mid: string) {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(`${this.host}/api/v1/chat.followMessage`, {
+        body: JSON.stringify({ mid }), 
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+        method: "POST",
+      });
+      return await response.json();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async unfollowMessage(mid: string) {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(`${this.host}/api/v1/chat.unfollowMessage`, {
+        body: JSON.stringify({ mid }), 
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+        method: "POST",
+      });
+      return await response.json();
+    } catch (err) {
+      console.error(err);
+    }
+  }
 
   async getAllFiles(isChannelPrivate = false, typeGroup: string) {
     const roomType = isChannelPrivate ? "groups" : "channels";

packages/react/src/views/Message/Message.js

@@ -164,6 +164,32 @@ const Message = ({
     return `${host}/channel/${res.room.name}/?msg=${id}`;
   };
 
+  const handleFollowMessage = async (msg) => {
+    const isFollowed = msg?.replies?.length > 0;
+    try {
+      if (!isFollowed) {
+        await RCInstance.followMessage(msg._id);
+        dispatchToastMessage({
+          type: 'success',
+          message: 'Message followed',
+        });
+      } else {
+        await RCInstance.unfollowMessage(msg._id);
+        dispatchToastMessage({
+          type: 'success',
+          message: 'Message unfollowed',
+        });
+      }
+    } catch (error) {
+      dispatchToastMessage({
+        type: 'error',
+        message: `Error in ${
+          isFollowed ? 'unfollowing' : 'following'
+        } the message`,
+      });
+    }
+  };
+
   const handleCopyMessageLink = async (msg) => {
     try {
       const messageLink = await getMessageLink(msg._id);
@@ -292,6 +318,7 @@ const Message = ({
                     pinRoles={pinRoles}
                     editMessageRoles={editMessageRoles}
                     handleCopyMessage={handleCopyMessage}
+                    handleFollowMessage={handleFollowMessage}
                     handleCopyMessageLink={handleCopyMessageLink}
                     handleOpenThread={handleOpenThread}
                     handleDeleteMessage={handleDeleteMessage}

packages/react/src/views/Message/MessageToolbox.js

@@ -28,6 +28,7 @@ export const MessageToolbox = ({
   editMessageRoles,
   handleOpenThread,
   handleEmojiClick,
+  handleFollowMessage,
   handlePinMessage,
   handleStarMessage,
   handleDeleteMessage,
@@ -47,6 +48,7 @@ export const MessageToolbox = ({
       'link',
       'pin',
       'edit',
+      'follow',
       'delete',
       'report',
     ],
@@ -117,6 +119,13 @@ export const MessageToolbox = ({
             : 'star',
         visible: true,
       },
+      follow: {
+        label: message?.replies?.length > 0 ? 'Unfollow' : 'Follow',
+        id: 'follow',
+        onClick: () => handleFollowMessage(message),
+        iconName: message?.replies?.length > 0 ? 'bell-slash' : 'bell',
+        visible: true,
+      },
       reaction: {
         label: 'Add reaction',
         id: 'reaction',
@@ -182,6 +191,7 @@ export const MessageToolbox = ({
       handlePinMessage,
       handleEditMessage,
       handlerReportMessage,
+      handleFollowMessage,
       handleCopyMessage,
       isAllowedToPin,
     ]

packages/ui-elements/src/components/Icon/icons/Bell.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Bell = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6" />
+  </svg>
+);
+
+export default Bell;

packages/ui-elements/src/components/Icon/icons/BellSlash.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BellSlash = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M5.164 14H15c-.299-.199-.557-.553-.78-1-.9-1.8-1.22-5.12-1.22-6q0-.396-.06-.776l-.938.938c.02.708.157 2.154.457 3.58.161.767.377 1.566.663 2.258H6.164zm5.581-9.91a4 4 0 0 0-1.948-1.01L8 2.917l-.797.161A4 4 0 0 0 4 7c0 .628-.134 2.197-.459 3.742q-.075.358-.166.718l-1.653 1.653q.03-.055.059-.113C2.679 11.2 3 7.88 3 7c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0c.942.19 1.788.645 2.457 1.284zM10 15a2 2 0 1 1-4 0zm-9.375.625a.53.53 0 0 0 .75.75l14.75-14.75a.53.53 0 0 0-.75-.75z" />
+  </svg>
+);
+
+export default BellSlash;

packages/ui-elements/src/components/Icon/icons/index.js

@@ -1,5 +1,7 @@
 import File from './File';
 import Mobile from './Mobile';
+import Bell from './Bell';
+import BellSlash from './BellSlash';
 import Star from './Star';
 import Pin from './Pin';
 import ReplyDirectly from './ReplyDirectly';
@@ -75,6 +77,8 @@ const icons = {
   hash_lock: HashLock,
   lock: Lock,
   computer: Computer,
+  bell: Bell,
+  'bell-slash': BellSlash,
   cross: Cross,
   copy: Copy,
   team: Team,

packages/ui-elements/tools/icons-generator.js

@@ -32,6 +32,8 @@ const iconsList = [
   'arrow-back',
   'google',
   'multiline',
+  'bell',
+  'bell-slash',
   'code',
   'strike',
   'bold',