Can delete events from WebUI

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -91,4 +91,14 @@ export class MatrixApiEvent {
       jsonData: { content },
     });
   }
+
+  /**
+   * Delete an event
+   */
+  static async DeleteEvent(room: Room, event_id: string): Promise<void> {
+    await APIClient.exec({
+      method: "DELETE",
+      uri: `/matrix/room/${room.id}/event/${event_id}`,
+    });
+  }
 }

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -1,12 +1,22 @@
-import { Box, Button, ButtonGroup, Dialog, Typography } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Dialog,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React from "react";
 import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
+import { useConfirm } from "../../hooks/contexts_provider/ConfirmDialogProvider";
 import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
+import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
 import { AccountIcon } from "./AccountIcon";
-import React from "react";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
 
 export function RoomMessagesList(p: {
   room: Room;
@@ -61,11 +71,26 @@ function RoomMessage(p: {
   previousFromSamePerson: boolean;
   firstMessageOfDay: boolean;
 }): React.ReactElement {
+  const theme = useTheme();
+  const user = useUserInfo();
+  const alert = useAlert();
+  const confirm = useConfirm();
+
   const [showImageFullScreen, setShowImageFullScreen] = React.useState(false);
 
   const closeImageFullScreen = () => setShowImageFullScreen(false);
 
-  const user = p.users.get(p.message.account);
+  const sender = p.users.get(p.message.account);
+
+  const handleDeleteMessage = async () => {
+    if (!(await confirm(`Do you really want to delete this message?`))) return;
+    try {
+      await MatrixApiEvent.DeleteEvent(p.room, p.message.event_id);
+    } catch (e) {
+      console.error(`Failed to delete message!`, e),
+        alert(`Failed to delete message!${e}`);
+    }
+  };
 
   return (
     <>
@@ -81,7 +106,7 @@ function RoomMessage(p: {
       )}
 
       {/* Give person name if required */}
-      {(!p.previousFromSamePerson || p.firstMessageOfDay) && user && (
+      {(!p.previousFromSamePerson || p.firstMessageOfDay) && sender && (
         <div
           style={{
             display: "flex",
@@ -90,9 +115,9 @@ function RoomMessage(p: {
             marginTop: "20px",
           }}
         >
-          <AccountIcon user={user} />
+          <AccountIcon user={sender} />
           &nbsp;&nbsp;&nbsp;
-          {user.display_name}
+          {sender.display_name}
         </div>
       )}
 
@@ -107,9 +132,12 @@ function RoomMessage(p: {
         }}
         component="div"
         sx={{
-          "&:hover": {
+          [theme.getColorSchemeSelector("dark") + "&:hover"]: {
             backgroundColor: "#ffffff2b",
           },
+          [theme.getColorSchemeSelector("light") + "&:hover"]: {
+            backgroundColor: "#00000039",
+          },
           "&:hover *": { visibility: "visible" },
         }}
       >
@@ -142,14 +170,17 @@ function RoomMessage(p: {
             top: "-34px",
             right: "0px",
           }}
-          sx={{ "parent:hover": { visibility: "visible" } }}
         >
+          {p.message.account === user.info.matrix_user_id && (
             <Button>
               <EditIcon />
             </Button>
-          <Button>
+          )}
-            <DeleteIcon />
+          {p.message.account === user.info.matrix_user_id && (
+            <Button onClick={handleDeleteMessage}>
+              <DeleteIcon color="error" />
             </Button>
+          )}
         </ButtonGroup>
       </Box>