Display the list of people who reacted

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -12,6 +12,7 @@ import {
   DialogContentText,
   DialogTitle,
   TextField,
+  Tooltip,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -150,7 +151,7 @@ function RoomMessage(p: {
 
   const handleToggleReaction = async (
     key: string,
-    reaction: MessageReaction
+    reaction: MessageReaction | undefined
   ) => {
     try {
       if (!reaction)
@@ -268,10 +269,23 @@ function RoomMessage(p: {
       {/* Reaction */}
       <Box sx={{ marginLeft: "50px" }}>
         {[...p.message.reactions.keys()].map((r) => {
-          const userReaction = p.message.reactions
-            .get(r)!
-            .find((r) => r.account === user.info.matrix_user_id);
+          const reactions = p.message.reactions.get(r)!;
+          const userReaction = reactions.find(
+            (r) => r.account === user.info.matrix_user_id
+          );
           return (
+            <Tooltip
+              enterDelay={50}
+              placement="top"
+              arrow
+              title={
+                <span style={{ whiteSpace: "pre-wrap" }}>
+                  {reactions
+                    .map((r) => p.users.get(r.account)?.display_name)
+                    .join("\n")}
+                </span>
+              }
+            >
               <Chip
                 size="small"
                 style={{
@@ -281,7 +295,9 @@ function RoomMessage(p: {
                   cursor: "pointer",
                 }}
                 slotProps={{
-                root: { onClick: () => handleToggleReaction(r, userReaction) },
+                  root: {
+                    onClick: () => handleToggleReaction(r, userReaction),
+                  },
                   label: { style: { height: "2em" } },
                 }}
                 color={userReaction !== undefined ? "success" : undefined}
@@ -299,11 +315,12 @@ function RoomMessage(p: {
                       <EmojiIcon emojiKey={r} />
                     </div>
                     <div style={{ height: "2em", marginLeft: "2px" }}>
-                    {p.message.reactions.get(r)?.length}
+                      {reactions.length}
                     </div>
                   </span>
                 }
               />
+            </Tooltip>
           );
         })}
       </Box>