Follow / Unfollow thread support in EmbeddedChat

packages/api/src/EmbeddedChatApi.ts

@@ -1261,4 +1261,34 @@ export default class EmbeddedChatApi {
     const data = response.json();
     return data;
   }
+
+  async followThread(mid: string) {
+    const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+    const response = await fetch(`${this.host}/api/v1/chat.followMessage`, {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+        "X-Auth-Token": authToken,
+        "X-User-Id": userId,
+      },
+      body: JSON.stringify(mid),
+    });
+    const data = response.json();
+    return data;
+  }
+
+  async unfollowThread(mid: string) {
+    const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+    const response = await fetch(`${this.host}/api/v1/chat.unfollowMessage`, {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+        "X-Auth-Token": authToken,
+        "X-User-Id": userId,
+      },
+      body: JSON.stringify(mid),
+    });
+    const data = response.json();
+    return data;
+  }
 }

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

@@ -217,6 +217,7 @@ export const MessageMetricsStyles = {
     align-items: center;
     margin-left: 10px;
     margin-top: 2px;
+    gap: 3px;
   `,
 
   metricsItemLabel: css`

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { formatDistance } from 'date-fns';
 import {
   Box,
@@ -23,6 +23,8 @@ export const MessageMetrics = ({
   variantStyles = {},
   ...props
 }) => {
+  const [followMessage, setFollowMessage] = useState(false);
+  const [followedUsernames, setFollowedUsernames] = useState([]);
   const { styleOverrides, classNames } = useComponentOverrides(
     'MessageMetrics',
     className,
@@ -38,9 +40,45 @@ export const MessageMetrics = ({
 
   const participantsList =
     (message?.replies?.length ?? 0) - 1 > 0
-      ? `+${message.replies.length - 1}`
+      ? message.replies.length - 2 > 0
+        ? `+${message.replies.length - 2}`
+        : null
       : null;
 
+  const getUserInfo = async (userId) => {
+    const results = await RCInstance.userInfo(userId);
+    return results;
+  };
+
+  useEffect(() => {
+    const userDetails = async () => {
+      const results = await Promise.all(
+        message.replies.slice(0, 2).map((userId) => getUserInfo(userId))
+      );
+
+      const userNames = results.map((user) => user.user.username);
+      setFollowedUsernames(userNames);
+    };
+
+    if (message.replies.length > 0) {
+      userDetails();
+    }
+  }, [message.replies, followMessage]);
+
+  const handleThreadFollow = async (messageId) => {
+    if (followMessage) {
+      const res = await RCInstance.followThread({
+        mid: message._id,
+      });
+    } else {
+      const res = await RCInstance.unfollowThread({
+        mid: message._id,
+      });
+    }
+
+    setFollowMessage(!followMessage);
+  };
+
   return (
     <Box
       css={variantStyles.metricsContainer || styles.metrics}
@@ -68,11 +106,14 @@ export const MessageMetrics = ({
               <>
                 <Tooltip text="Followers" position="top">
                   <Box css={styles.metricsAvatarItem}>
-                    <Avatar
-                      url={getUserAvatarUrl(message?.u.username)}
-                      alt="avatar"
-                      size="1rem"
-                    />
+                    {followedUsernames.map((userName, index) => (
+                      <Avatar
+                        key={userName}
+                        url={getUserAvatarUrl(userName)}
+                        alt="avatar"
+                        size="1rem"
+                      />
+                    ))}
                     {participantsList && (
                       <span css={styles.metricsItemLabel}>
                         {participantsList}
@@ -83,6 +124,15 @@ export const MessageMetrics = ({
               </>
             )}
 
+            <Tooltip text={`${followMessage ? 'Unfollow' : 'Following'}`}>
+              <Box>
+                <Icon
+                  size="1.15rem"
+                  name={followMessage ? 'bell-off' : 'bell'}
+                  onClick={handleThreadFollow}
+                />
+              </Box>
+            </Tooltip>
             <Tooltip
               text={`Last message: ${new Date(message.tlm).toLocaleTimeString(
                 [],

packages/ui-elements/src/components/Icon/Icon.stories.js

@@ -21,6 +21,28 @@ export const GoogleIcon = {
   ),
 };
 
+export const BellIcon = {
+  args: {
+    name: 'bell',
+  },
+  render: (args) => (
+    <ThemeProvider theme={DefaultTheme}>
+      <Icon {...args} />
+    </ThemeProvider>
+  ),
+};
+
+export const ThreadIcon = {
+  args: {
+    name: 'thread',
+  },
+  render: (args) => (
+    <ThemeProvider theme={DefaultTheme}>
+      <Icon {...args} />
+    </ThemeProvider>
+  ),
+};
+
 export const CustomStyle = {
   args: {
     name: 'google',

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 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M19 26H13C13 27.6569 14.3431 29 16 29C17.6569 29 19 27.6569 19 26ZM23 21.9899V22.0116V23H9V12C9 8.13401 12.134 5 16 5C19.866 5 23 8.13401 23 12V21.9899ZM9 25H23H25H25.5C25.8788 25 26.225 24.786 26.3944 24.4472C26.5638 24.1084 26.5273 23.703 26.3 23.4L25 21.6667V12C25 7.02944 20.9706 3 16 3C11.0294 3 7 7.02944 7 12V21.5858L5.29289 23.2929C5.0069 23.5789 4.92134 24.009 5.07612 24.3827C5.2309 24.7564 5.59554 25 6 25H7H9Z" />
+  </svg>
+);
+
+export default Bell;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BellOff = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M25 12C25 11.8193 24.9947 11.6398 24.9842 11.4618L23 13.4459V23H13.4459L11.4459 25H23H25H26C26.4045 25 26.7691 24.7564 26.9239 24.3827C27.0787 24.009 26.9931 23.5789 26.7071 23.2929L25 21.5858V12ZM22.3444 5.6165C20.7173 3.9993 18.4753 3 16 3C11.0294 3 7 7.02944 7 12V20.9609L9 18.9609V12C9 8.13401 12.134 5 16 5C17.923 5 19.665 5.77545 20.9301 7.03072L22.3444 5.6165ZM13 26C13 27.6569 14.3431 29 16 29C17.6569 29 19 27.6569 19 26H13ZM27.496 4.70686C27.1055 4.31634 26.4724 4.31634 26.0818 4.70686L4.96882 25.8199C4.5783 26.2104 4.5783 26.8436 4.96882 27.2341C5.35935 27.6246 5.99251 27.6246 6.38304 27.2341L27.496 6.12108C27.8866 5.73055 27.8866 5.09739 27.496 4.70686Z" />
+  </svg>
+);
+
+export default BellOff;

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

@@ -64,8 +64,12 @@ import Avatar from './Avatar';
 import FormatText from './FormatText';
 import Cog from './Cog';
 import Team from './Team';
+import Bell from './Bell';
+import BellOff from './BellOff';
 
 const icons = {
+  bell: Bell,
+  'bell-off': BellOff,
   file: File,
   mobile: Mobile,
   star: Star,

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

@@ -49,6 +49,8 @@ const iconsList = [
   'arrow-collapse',
   'arrow-expand',
   'cog',
+  'bell',
+  'bell-off',
 ];
 
 const svgDirPath = path.join(