feat(Messages): Added a new contextual menu with Add Reactions, Edit and Delete options for Own Messages

src/components/message/MenuMessageButton.tsx

@@ -0,0 +1,75 @@
+import { Box } from "@twilio-paste/core";
+import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  useMenuState,
+} from "@twilio-paste/core/menu";
+import styles from "../../styles";
+import { MenuElement } from "../../types";
+import React from "react";
+
+interface MenuMessageButtonProps {
+  menuElements: MenuElement[];
+}
+
+const MenuMessageButton: React.FC<MenuMessageButtonProps> = (
+  props: MenuMessageButtonProps
+) => {
+  const menu = useMenuState();
+  const handleCloseMenu = () => {
+    menu.hide();
+  };
+
+  return (
+    <Box>
+      <Box
+        style={{
+          padding: "6px 10px",
+          border: "1px solid #8891AA",
+          borderRadius: 4,
+          maxWidth: 28,
+          maxHeight: 28,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: "4px",
+        }}
+      >
+        <MenuButton {...menu} variant="link" size="reset">
+          <Box style={styles.rotateIcon}>
+            <MoreIcon decorative={true} />
+          </Box>
+        </MenuButton>
+      </Box>
+      <Menu {...menu} aria-label="Message Options">
+        {props.menuElements.map((menuElement) => {
+          return (
+            <MenuItem
+              key={menuElement.id}
+              {...menu}
+              onClick={() => {
+                if (menuElement.onClick) {
+                  menuElement.onClick();
+                }
+                if (menuElement.hideOnClick) {
+                  handleCloseMenu();
+                }
+              }}
+              disabled={!menuElement.enabled}
+            >
+              {menuElement.customComponent &&
+              typeof menuElement.customComponent === "function"
+                ? menuElement.customComponent(handleCloseMenu)
+                : menuElement.customComponent}
+              {menuElement.label && <Box as="span">{menuElement.label}</Box>}
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </Box>
+  );
+};
+
+export default MenuMessageButton;

src/components/message/MessageEditMode.tsx

@@ -0,0 +1,50 @@
+import { Box, Button, Input } from "@twilio-paste/core";
+import { ReduxMessage } from "../../store/reducers/messageListReducer";
+import { AcceptIcon } from "@twilio-paste/icons/esm/AcceptIcon";
+import { CloseIcon } from "@twilio-paste/icons/cjs/CloseIcon";
+import styles from "../../styles";
+import { useRef } from "react";
+
+interface MessageEditModeProps {
+  message: ReduxMessage;
+  variant?: "inbound" | "outbound";
+  cancelEdit: () => void;
+  editAction: (message: ReduxMessage, editedText: string) => void;
+}
+
+const MessageEditMode: React.FC<MessageEditModeProps> = (
+  props: MessageEditModeProps
+) => {
+  const messageBody = props.message.body ?? "";
+  const messageLength = props.message.body?.length ?? 0;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleEditAction = () => {
+    if (inputRef.current) {
+      props.editAction(props.message, inputRef.current.value);
+    }
+  };
+
+  return (
+    <Box
+      style={{
+        width: `${messageLength * 8 + 100}px`,
+        alignSelf: props.variant === "inbound" ? "flex-start" : "flex-end",
+        flexDirection: props.variant === "inbound" ? "row" : "row-reverse",
+        ...styles.messageEditInput,
+      }}
+    >
+      <Input type="text" defaultValue={messageBody} autoFocus ref={inputRef} />
+      <Box style={styles.flex}>
+        <Button variant="link" onClick={handleEditAction}>
+          <AcceptIcon decorative={false} title="Edit message" />
+        </Button>
+        <Button variant="link" onClick={props.cancelEdit}>
+          <CloseIcon decorative={false} title="Cancel edit message" />
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default MessageEditMode;