From d467f24e24aecd7767863a6e98905e0bc177ddb9 Mon Sep 17 00:00:00 2001 From: pratheek555 Date: Sun, 11 Jan 2026 05:05:26 +0000 Subject: [PATCH 1/2] Initial design for "Follow/Unfollow" thread message --- packages/api/src/EmbeddedChatApi.ts | 30 +++++++++ .../react/src/views/Message/Message.styles.js | 1 + .../react/src/views/Message/MessageMetrics.js | 65 +++++++++++++++++-- .../src/components/Icon/Icon.stories.js | 22 +++++++ .../src/components/Icon/icons/Bell.js | 14 ++++ .../src/components/Icon/icons/BellOff.js | 14 ++++ .../src/components/Icon/icons/index.js | 4 ++ packages/ui-elements/tools/icons-generator.js | 2 + 8 files changed, 145 insertions(+), 7 deletions(-) create mode 100644 packages/ui-elements/src/components/Icon/icons/Bell.js create mode 100644 packages/ui-elements/src/components/Icon/icons/BellOff.js diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts index 809b6f4b5c..6cf8fe70f7 100644 --- a/packages/api/src/EmbeddedChatApi.ts +++ b/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; + } } diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index 75253043e2..a08c50648f 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/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` diff --git a/packages/react/src/views/Message/MessageMetrics.js b/packages/react/src/views/Message/MessageMetrics.js index 8bc366d71b..6936279040 100644 --- a/packages/react/src/views/Message/MessageMetrics.js +++ b/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,46 @@ 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); + console.log(userNames); + 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 ( - + {followedUsernames.map((userName, index) => ( + + ))} {participantsList && ( {participantsList} @@ -83,6 +125,15 @@ export const MessageMetrics = ({ )} + + + + + ( + + + + ), +}; + +export const ThreadIcon = { + args: { + name: 'thread', + }, + render: (args) => ( + + + + ), +}; + export const CustomStyle = { args: { name: 'google', diff --git a/packages/ui-elements/src/components/Icon/icons/Bell.js b/packages/ui-elements/src/components/Icon/icons/Bell.js new file mode 100644 index 0000000000..bce0d272d5 --- /dev/null +++ b/packages/ui-elements/src/components/Icon/icons/Bell.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const Bell = (props) => ( + + + +); + +export default Bell; diff --git a/packages/ui-elements/src/components/Icon/icons/BellOff.js b/packages/ui-elements/src/components/Icon/icons/BellOff.js new file mode 100644 index 0000000000..0bd842d391 --- /dev/null +++ b/packages/ui-elements/src/components/Icon/icons/BellOff.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const BellOff = (props) => ( + + + +); + +export default BellOff; diff --git a/packages/ui-elements/src/components/Icon/icons/index.js b/packages/ui-elements/src/components/Icon/icons/index.js index 234251edab..5924e0de76 100644 --- a/packages/ui-elements/src/components/Icon/icons/index.js +++ b/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, diff --git a/packages/ui-elements/tools/icons-generator.js b/packages/ui-elements/tools/icons-generator.js index d12396c2b1..c1bfede2db 100644 --- a/packages/ui-elements/tools/icons-generator.js +++ b/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( From 77bfdcee05d6e510fcdd3bfbd58c67c01abb627e Mon Sep 17 00:00:00 2001 From: pratheek555 Date: Sun, 11 Jan 2026 05:31:13 +0000 Subject: [PATCH 2/2] removing unecessary logs --- packages/react/src/views/Message/MessageMetrics.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/views/Message/MessageMetrics.js b/packages/react/src/views/Message/MessageMetrics.js index 6936279040..9387a2b9be 100644 --- a/packages/react/src/views/Message/MessageMetrics.js +++ b/packages/react/src/views/Message/MessageMetrics.js @@ -57,7 +57,6 @@ export const MessageMetrics = ({ ); const userNames = results.map((user) => user.user.username); - console.log(userNames); setFollowedUsernames(userNames); };