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,42 +269,58 @@ function RoomMessage(p: {
       {/* Reaction */}
       <Box sx={{ marginLeft: "50px" }}>
         {[...p.message.reactions.keys()].map((r) => {
-          const userReaction = p.message.reactions
+          const reactions = p.message.reactions.get(r)!;
-            .get(r)!
+          const userReaction = reactions.find(
-            .find((r) => r.account === user.info.matrix_user_id);
+            (r) => r.account === user.info.matrix_user_id
+          );
           return (
-            <Chip
+            <Tooltip
-              size="small"
+              enterDelay={50}
-              style={{
+              placement="top"
-                height: "2em",
+              arrow
-                marginRight: "5px",
+              title={
-                maxHeight: "unset",
+                <span style={{ whiteSpace: "pre-wrap" }}>
-                cursor: "pointer",
+                  {reactions
-              }}
+                    .map((r) => p.users.get(r.account)?.display_name)
-              slotProps={{
+                    .join("\n")}
-                root: { onClick: () => handleToggleReaction(r, userReaction) },
-                label: { style: { height: "2em" } },
-              }}
-              color={userReaction !== undefined ? "success" : undefined}
-              variant="filled"
-              label={
-                <span
-                  style={{
-                    display: "inline-flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    flexDirection: "row",
-                  }}
-                >
-                  <div style={{ margin: "3px 3px" }}>
-                    <EmojiIcon emojiKey={r} />
-                  </div>
-                  <div style={{ height: "2em", marginLeft: "2px" }}>
-                    {p.message.reactions.get(r)?.length}
-                  </div>
                 </span>
               }
-            />
+            >
+              <Chip
+                size="small"
+                style={{
+                  height: "2em",
+                  marginRight: "5px",
+                  maxHeight: "unset",
+                  cursor: "pointer",
+                }}
+                slotProps={{
+                  root: {
+                    onClick: () => handleToggleReaction(r, userReaction),
+                  },
+                  label: { style: { height: "2em" } },
+                }}
+                color={userReaction !== undefined ? "success" : undefined}
+                variant="filled"
+                label={
+                  <span
+                    style={{
+                      display: "inline-flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      flexDirection: "row",
+                    }}
+                  >
+                    <div style={{ margin: "3px 3px" }}>
+                      <EmojiIcon emojiKey={r} />
+                    </div>
+                    <div style={{ height: "2em", marginLeft: "2px" }}>
+                      {reactions.length}
+                    </div>
+                  </span>
+                }
+              />
+            </Tooltip>
           );
         })}
       </Box>