feat: view all reactions for a message

frontend/src/components/feature/chat/ChatMessage/ActionModals/ReactionAnalyticsModal.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from "react"
+import { Flex, Text, Tabs, Box } from "@radix-ui/themes"
+import { ReactionObject } from "../MessageReactions"
+import { ReactionAnalyticsDialogProps } from "../MessageActions/MessageReactionAnalytics"
+import { UserAvatar } from "@/components/common/UserAvatar"
+import { useGetUser } from "@/hooks/useGetUser"
+
+export const ReactionAnalyticsModal = ({ reactions }: ReactionAnalyticsDialogProps) => {
+
+    const { reaction_emojis, all_reacted_members } = useMemo(() => {
+        const reaction_emojis = reactions.map((reaction: ReactionObject) => reaction.reaction);
+        const all_reacted_members = reactions.flatMap(({ reaction, users }: ReactionObject) =>
+            users.map((user: string) => ({ user, reaction }))
+        );
+        return { reaction_emojis, all_reacted_members };
+    }, [reactions]);
+
+    return (
+        <>
+            <Tabs.Root defaultValue="All">
+                <Flex direction="column" gap="4">
+                    <Tabs.List>
+                        <TabTrigger emojiStr="All" />
+                        {reaction_emojis.map((emojiStr) => {
+                            const reaction = reactions.find((r) => r.reaction === emojiStr);
+                            return <TabTrigger key={emojiStr} emojiStr={emojiStr} count={reaction?.count} />;
+                        })}
+                    </Tabs.List>
+                    <Box>
+                        <Tabs.Content value="All">
+                            <UserList users={all_reacted_members} />
+                        </Tabs.Content>
+                        {reactions.map((reaction) => (
+                            <Tabs.Content key={reaction.reaction} value={reaction.reaction}>
+                                <UserList users={reaction.users.map((user) => ({ user }))} />
+                            </Tabs.Content>
+                        ))}
+                    </Box>
+                </Flex>
+            </Tabs.Root>
+        </>
+    );
+};
+
+const TabTrigger = ({ emojiStr, count }: { emojiStr: string; count?: number }) => (
+    <Tabs.Trigger value={emojiStr} className="text-gray-11">
+        <Flex gap="2" align="center" justify="center">
+            <Text size="3">{emojiStr}</Text>
+            {count && <Text>{count}</Text>}
+        </Flex>
+    </Tabs.Trigger>
+);
+
+interface UserItemProps {
+    user: string;
+    reaction?: string;
+}
+const UserList = ({ users }: { users: UserItemProps[] }) => (
+    <Box className="overflow-hidden overflow-y-scroll h-[50vh] sm:h-64">
+        <Flex direction="column" gap="2">
+            <Flex direction="column">
+                {users.map((user, index) => (
+                    <UserItem key={index} user={user.user} reaction={user.reaction} />
+                ))}
+            </Flex>
+        </Flex>
+    </Box>
+);
+
+const UserItem = ({ user, reaction }: UserItemProps) => {
+    const userDetails = useGetUser(user)
+    const userName = userDetails?.full_name ?? user;
+
+    return (
+        <Box className="hover:bg-slate-3 rounded-md">
+            <Flex align="center" justify="between">
+                <Flex className="p-2" gap="3" align="center">
+                    <UserAvatar src={userDetails?.user_image} size="2" />
+                    <Text size="2" weight="medium">
+                        {userName}
+                    </Text>
+                </Flex>
+                {reaction && (
+                    <Text className="pr-3" size="3" weight="medium">
+                        {reaction}
+                    </Text>
+                )}
+            </Flex>
+        </Box>
+    );
+};

frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx

@@ -10,6 +10,7 @@ import { toast } from 'sonner'
 import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
 import { AiOutlineEdit } from 'react-icons/ai'
 import { LuForward, LuReply } from 'react-icons/lu'
+import { MdOutlineEmojiEmotions } from "react-icons/md";
 import AttachFileToDocument from './AttachFileToDocument'
 
 export interface MessageContextMenuProps {
@@ -18,16 +19,18 @@ export interface MessageContextMenuProps {
     onEdit: VoidFunction,
     onReply: VoidFunction,
     onForward: VoidFunction,
+    onViewReaction?: VoidFunction
     onAttachDocument: VoidFunction
 }
-
-export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward, onAttachDocument }: MessageContextMenuProps) => {
+export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForward, onAttachDocument, onViewReaction }: MessageContextMenuProps) => {
 
     const copy = useMessageCopy(message)
     const { currentUser } = useContext(UserContext)
 
-    const isOwner = currentUser === message?.owner
+    const isOwner = currentUser === message?.owner;
 
+    const isReactionsAvailable = Object.keys(JSON.parse(message?.message_reactions ?? '{}')).length !== 0
+
     return (
         <ContextMenu.Content>
             {message ? <>
@@ -106,9 +109,16 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa
                 </ContextMenu.Item> */}
 
                 </ContextMenu.Group>
-
-
-
+
+                {isReactionsAvailable && <ContextMenu.Group>
+                    <ContextMenu.Separator />
+                    <ContextMenu.Item onClick={onViewReaction}>
+                        <Flex gap='2'>
+                            <MdOutlineEmojiEmotions size='18' />
+                            View Reactions
+                        </Flex>
+                    </ContextMenu.Item>
+                </ContextMenu.Group>}
 
                 {isOwner && <ContextMenu.Group>
                     <ContextMenu.Separator />
@@ -128,7 +138,6 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa
                     </ContextMenu.Item>
                 </ContextMenu.Group>}
             </> : null}
-
         </ContextMenu.Content>
     )
 }

frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageReactionAnalytics.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useState, useMemo } from "react"
+import { Message } from "../../../../../../../types/Messaging/Message"
+import { Dialog } from "@radix-ui/themes"
+import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog"
+import { useIsDesktop } from "@/hooks/useMediaQuery"
+import { Drawer, DrawerContent } from "@/components/layout/Drawer"
+import { ReactionObject } from "../MessageReactions"
+import { ReactionAnalyticsModal } from "../ActionModals/ReactionAnalyticsModal"
+
+export const useMessageReactionAnalytics = () => {
+    const [message, setMessage] = useState<null | Message>(null)
+
+    const message_reactions = message?.message_reactions;
+
+    const reactions: ReactionObject[] = useMemo(() => {
+        //Parse the string to a JSON object and get an array of reactions
+        const parsed_json = JSON.parse(message_reactions ?? '{}') as Record<string, ReactionObject>
+        return Object.values(parsed_json)
+    }, [message_reactions])
+
+    const onClose = useCallback(() => {
+        setMessage(null)
+    }, [])
+
+    return {
+        reactions,
+        message,
+        onClose,
+        isOpen: message !== null,
+        setReactionMessage: setMessage
+    }
+}
+
+export interface ReactionAnalyticsDialogProps {
+    isOpen?: boolean,
+    onClose?: VoidFunction,
+    reactions: ReactionObject[]
+}
+export const ReactionAnalyticsDialog = ({ isOpen, onClose, ...reactionProps }: ReactionAnalyticsDialogProps) => {
+
+    const isDesktop = useIsDesktop()
+
+    if (isDesktop) {
+        return <Dialog.Root open={isOpen} onOpenChange={onClose}>
+            <Dialog.Content className={`${DIALOG_CONTENT_CLASS} w-[450px]`}>
+                <ReactionAnalyticsModal {...reactionProps} />
+            </Dialog.Content>
+        </Dialog.Root>
+    } else {
+        return <Drawer open={isOpen} onClose={onClose}>
+            <DrawerContent>
+                <div className="pb-12">
+                    <ReactionAnalyticsModal {...reactionProps} />
+                </div>
+            </DrawerContent>
+        </Drawer>
+    }
+}

frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx

@@ -34,10 +34,11 @@ interface MessageBlockProps {
     forwardMessage: (message: Message) => void,
     onReplyMessageClick: (messageID: string) => void,
     onAttachDocument: (message: Message) => void,
-    isHighlighted?: boolean
+    isHighlighted?: boolean,
+    setReactionMessage: (message: Message) => void,
 }
 
-export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyMessageClick, setEditMessage, replyToMessage, forwardMessage, onAttachDocument }: MessageBlockProps) => {
+export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyMessageClick, setEditMessage, replyToMessage, forwardMessage, onAttachDocument, setReactionMessage }: MessageBlockProps) => {
 
     const { name, owner: userID, is_bot_message, bot, creation: timestamp, message_reactions, is_continuation, linked_message, replied_message_details } = message
 
@@ -63,6 +64,10 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
         onAttachDocument(message)
     }
 
+    const onViewReaction = () => {
+        setReactionMessage(message)
+    }
+
     const isDesktop = useIsDesktop()
 
     const [isHovered, setIsHovered] = useState(false)
@@ -188,6 +193,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
                     onEdit={onEdit}
                     onReply={onReply}
                     onForward={onForward}
+                    onViewReaction={onViewReaction}
                     onAttachDocument={onAttachToDocument}
                 />
             </ContextMenu.Root>

frontend/src/components/feature/chat/ChatMessage/MessageReactions.tsx

@@ -6,7 +6,7 @@ import { useGetUserRecords } from "@/hooks/useGetUserRecords"
 import { Flex, IconButton, Text, Tooltip } from "@radix-ui/themes"
 import { clsx } from "clsx"
 
-interface ReactionObject {
+export interface ReactionObject {
     // The emoji
     reaction: string,
     // The users who reacted with this emoji

frontend/src/components/feature/chat/ChatStream/ChatStream.tsx

@@ -16,6 +16,7 @@ import { FiArrowDown } from 'react-icons/fi'
 import { ErrorBanner } from '@/components/layout/AlertBanner'
 import { ForwardMessageDialog, useForwardMessage } from '../ChatMessage/MessageActions/ForwardMessage'
 import AttachFileToDocumentDialog, { useAttachFileToDocument } from '../ChatMessage/MessageActions/AttachFileToDocument'
+import { ReactionAnalyticsDialog, useMessageReactionAnalytics } from '../ChatMessage/MessageActions/MessageReactionAnalytics'
 
 /**
  * Anatomy of a message
@@ -79,6 +80,8 @@ const ChatStream = ({ replyToMessage }: Props) => {
     const { setForwardMessage, ...forwardProps } = useForwardMessage()
     const { setAttachDocument, ...attachDocProps } = useAttachFileToDocument()
 
+    const { setReactionMessage, ...reactionProps } = useMessageReactionAnalytics()
+
     const onReplyMessageClick = (messageID: string) => {
         scrollToMessage(messageID)
     }
@@ -140,7 +143,9 @@ const ChatStream = ({ replyToMessage }: Props) => {
                                     replyToMessage={replyToMessage}
                                     forwardMessage={setForwardMessage}
                                     onAttachDocument={setAttachDocument}
-                                    setDeleteMessage={setDeleteMessage} />
+                                    setDeleteMessage={setDeleteMessage}
+                                    setReactionMessage={setReactionMessage} 
+                                />
                             </div>
                         </div>
                     }
@@ -165,6 +170,7 @@ const ChatStream = ({ replyToMessage }: Props) => {
             <EditMessageDialog {...editProps} />
             <ForwardMessageDialog {...forwardProps} />
             <AttachFileToDocumentDialog {...attachDocProps} />
+            <ReactionAnalyticsDialog {...reactionProps} />
         </div>
 
     )