@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Chat/Messages/Message/Message.js

@@ -1,710 +0,0 @@
-import { useState, useEffect } from "react";
-import { makeStyles } from "tss-react/mui";
-import { useTheme } from "@mui/material/styles";
-import Avatar from "@mui/material/Avatar";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import ButtonBase from "@mui/material/ButtonBase";
-import Person from "@mui/icons-material/Person";
-import TranslateIcon from "@mui/icons-material/SwapHoriz";
-import SpeakIcon from "@mui/icons-material/RecordVoiceOver";
-import StopSpeakingIcon from "@mui/icons-material/VoiceOverOff";
-import DeleteIcon from "@mui/icons-material/Delete";
-import UpdateIcon from "@mui/icons-material/Create";
-import Button from "@mui/material/Button";
-import HoverText from "../../../Misc/HoverText/HoverText";
-import VoiceMessage from "../../VoiceMessage/VoiceMessage";
-import { Checkbox, FormGroup, FormControlLabel, Box } from "@mui/material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
-import Grid from "@mui/material/Grid";
-import BorderColorIcon from "@mui/icons-material/BorderColor";
-import AiExperienceIcon from "../../../Misc/AiExperienceIcon/AiExperienceIcon";
-import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()((theme, {
-  isMyMessage,
-  isButton,
-  hideAvatar,
-  isHighlighted
-}) => ({
-  root: {
-    display: "flex",
-    justifyContent: isMyMessage ? isButton || hideAvatar ? "flex-start" : "flex-end" : null,
-    marginBottom: isButton ? null : theme.spacing(3)
-  },
-  warningIcon: {
-    marginLeft: 8,
-    verticalAlign: "middle"
-  },
-  indicatorWrapper: {
-    position: "relative"
-  },
-  inappropriateIcon: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    margin: 4
-  },
-  message: {
-    display: "flex",
-    maxWidth: 500,
-    gap: "3px"
-  },
-  avatar: {
-    [theme.breakpoints.down("md")]: {
-      height: 40,
-      width: 40
-    },
-    [theme.breakpoints.up("md")]: {
-      height: 60,
-      width: 60
-    },
-    marginRight: theme.spacing(2),
-    display: isButton || hideAvatar ? "none" : null
-  },
-  bubble: {
-    display: "block",
-    backgroundColor: isMyMessage ? theme.palette.primary.main : theme.palette.common.white,
-    color: isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.main,
-    padding: theme.spacing(1, 2),
-    borderRadius: theme.spacing(2),
-    boxShadow: theme.shadows[2],
-    minWidth: 150,
-    borderTopLeftRadius: 0,
-    borderStyle: "solid",
-    borderColor: theme.palette.primary.main,
-    borderWidth: "thin",
-    transition: isButton ? theme.transitions.create("background-color") : null,
-    "& img": {
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    },
-    "& svg": {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-      color: isMyMessage ? isHighlighted ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.grey[400] : isHighlighted ? theme.palette.primary.main : theme.palette.grey[600]
-    },
-    "&:hover": {
-      backgroundColor: isButton ? isMyMessage ? theme.palette.primary.dark : theme.palette.grey[300] : null,
-      borderColor: isButton ? theme.palette.primary.dark : null
-    },
-    "@media print": {
-      "-webkit-print-color-adjust": "exact",
-      "-moz-print-color-adjust": "exact",
-      " -ms-print-color-adjust": "exact",
-      "print-color-adjust": "exact",
-      "page-break-inside": "avoid",
-      boxShadow: "none"
-    }
-  },
-  bubbleEnlarge: {
-    display: "block",
-    backgroundColor: isMyMessage ? theme.palette.primary.main : theme.palette.common.white,
-    color: isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.main,
-    padding: theme.spacing(1, 2),
-    borderRadius: theme.spacing(2),
-    boxShadow: theme.shadows[2],
-    minWidth: 150,
-    borderTopLeftRadius: 0,
-    borderStyle: "solid",
-    borderColor: theme.palette.primary.main,
-    borderWidth: "thin",
-    transition: isButton ? theme.transitions.create("background-color") : null,
-    "& img": {
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    },
-    "& svg": {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-      color: isMyMessage ? isHighlighted ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.grey[400] : isHighlighted ? theme.palette.primary.main : theme.palette.grey[600]
-    },
-    "&:hover": {
-      boxShadow: isButton ? isMyMessage ? theme.palette.mode === "dark" ? `0px 4px 8px ${theme.palette.primary.main}` : `0px 4px 8px ${theme.palette.primary.dark}` : theme.palette.mode === "dark" ? `0px 4px 8px ${theme.palette.grey[700]}` : `0px 4px 8px ${theme.palette.grey[300]}` : null,
-      transform: "scale(1.1)",
-      transition: "transform 0.3s ease-in-out"
-    },
-    "@media print": {
-      "-webkit-print-color-adjust": "exact",
-      "-moz-print-color-adjust": "exact",
-      " -ms-print-color-adjust": "exact",
-      "print-color-adjust": "exact",
-      "page-break-inside": "avoid",
-      boxShadow: "none"
-    }
-  },
-  additionalInfo: {
-    display: "flex",
-    marginTop: theme.spacing(1),
-    justifyContent: "flex-start",
-    color: theme.palette.text.secondary,
-    flexWrap: "wrap"
-  },
-  actions: {
-    display: "flex",
-    flexDirection: "column",
-    marginTop: theme.spacing(1),
-    color: theme.palette.text.secondary
-  },
-  button: {
-    marginBottom: theme.spacing(1)
-  },
-  imageAttachment: {
-    maxWidth: "100%"
-  },
-  checkBox: {
-    paddingLeft: theme.spacing(2),
-    marginTop: -5
-  },
-  visuallyHidden: {
-    position: "fixed !important",
-    width: "1px !important",
-    height: "1px !important",
-    padding: "0 !important",
-    margin: "0 !important",
-    overflow: "hidden !important",
-    clip: "rect(0, 0, 0, 0) !important",
-    whiteSpace: "nowrap !important",
-    border: "0 !important"
-  }
-}));
-function WaveformImage() {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "82",
-    height: "24",
-    viewBox: "0 0 82 24",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M8 1C8 0.447716 8.44772 0 9 0C9.55228 0 10 0.447715 10 1V23C10 23.5523 9.55228 24 9 24C8.44772 24 8 23.5523 8 23V1Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12 1C12 0.447716 12.4477 0 13 0C13.5523 0 14 0.447715 14 1V23C14 23.5523 13.5523 24 13 24C12.4477 24 12 23.5523 12 23V1Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M16 4C16 3.44771 16.4477 3 17 3C17.5523 3 18 3.44772 18 4V21C18 21.5523 17.5523 22 17 22C16.4477 22 16 21.5523 16 21V4Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M20 7C20 6.44772 20.4477 6 21 6C21.5523 6 22 6.44772 22 7V17C22 17.5523 21.5523 18 21 18C20.4477 18 20 17.5523 20 17V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M24 12C24 11.4477 24.4477 11 25 11C25.5523 11 26 11.4477 26 12V14C26 14.5523 25.5523 15 25 15C24.4477 15 24 14.5523 24 14V12Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M28 5C28 4.44772 28.4477 4 29 4C29.5523 4 30 4.44772 30 5V19C30 19.5523 29.5523 20 29 20C28.4477 20 28 19.5523 28 19V5Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M32 4C32 3.44771 32.4477 3 33 3C33.5523 3 34 3.44772 34 4V21C34 21.5523 33.5523 22 33 22C32.4477 22 32 21.5523 32 21V4Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M36 7C36 6.44772 36.4477 6 37 6C37.5523 6 38 6.44772 38 7V18C38 18.5523 37.5523 19 37 19C36.4477 19 36 18.5523 36 18V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4 7C4 6.44772 4.44772 6 5 6C5.55228 6 6 6.44772 6 7V18C6 18.5523 5.55228 19 5 19C4.44772 19 4 18.5523 4 18V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M0 9C0 8.44772 0.447715 8 1 8C1.55228 8 2 8.44772 2 9V15C2 15.5523 1.55228 16 1 16C0.447715 16 0 15.5523 0 15V9Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M80 9C80 8.44772 80.4477 8 81 8C81.5523 8 82 8.44772 82 9V15C82 15.5523 81.5523 16 81 16C80.4477 16 80 15.5523 80 15V9Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M80 9C80 8.44772 80.4477 8 81 8C81.5523 8 82 8.44772 82 9V15C82 15.5523 81.5523 16 81 16C80.4477 16 80 15.5523 80 15V9Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M48 1C48 0.447716 48.4477 0 49 0C49.5523 0 50 0.447715 50 1V23C50 23.5523 49.5523 24 49 24C48.4477 24 48 23.5523 48 23V1Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M52 1C52 0.447716 52.4477 0 53 0C53.5523 0 54 0.447715 54 1V23C54 23.5523 53.5523 24 53 24C52.4477 24 52 23.5523 52 23V1Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M56 4C56 3.44771 56.4477 3 57 3C57.5523 3 58 3.44772 58 4V21C58 21.5523 57.5523 22 57 22C56.4477 22 56 21.5523 56 21V4Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M60 7C60 6.44772 60.4477 6 61 6C61.5523 6 62 6.44772 62 7V17C62 17.5523 61.5523 18 61 18C60.4477 18 60 17.5523 60 17V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M64 12C64 11.4477 64.4477 11 65 11C65.5523 11 66 11.4477 66 12V14C66 14.5523 65.5523 15 65 15C64.4477 15 64 14.5523 64 14V12Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M64 12C64 11.4477 64.4477 11 65 11C65.5523 11 66 11.4477 66 12V14C66 14.5523 65.5523 15 65 15C64.4477 15 64 14.5523 64 14V12Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M68 5C68 4.44772 68.4477 4 69 4C69.5523 4 70 4.44772 70 5V19C70 19.5523 69.5523 20 69 20C68.4477 20 68 19.5523 68 19V5Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M68 5C68 4.44772 68.4477 4 69 4C69.5523 4 70 4.44772 70 5V19C70 19.5523 69.5523 20 69 20C68.4477 20 68 19.5523 68 19V5Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M72 4C72 3.44771 72.4477 3 73 3C73.5523 3 74 3.44772 74 4V21C74 21.5523 73.5523 22 73 22C72.4477 22 72 21.5523 72 21V4Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M72 4C72 3.44771 72.4477 3 73 3C73.5523 3 74 3.44772 74 4V21C74 21.5523 73.5523 22 73 22C72.4477 22 72 21.5523 72 21V4Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M76 7C76 6.44772 76.4477 6 77 6C77.5523 6 78 6.44772 78 7V18C78 18.5523 77.5523 19 77 19C76.4477 19 76 18.5523 76 18V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M76 7C76 6.44772 76.4477 6 77 6C77.5523 6 78 6.44772 78 7V18C78 18.5523 77.5523 19 77 19C76.4477 19 76 18.5523 76 18V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M44 7C44 6.44772 44.4477 6 45 6C45.5523 6 46 6.44772 46 7V18C46 18.5523 45.5523 19 45 19C44.4477 19 44 18.5523 44 18V7Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M40 9C40 8.44772 40.4477 8 41 8C41.5523 8 42 8.44772 42 9V15C42 15.5523 41.5523 16 41 16C40.4477 16 40 15.5523 40 15V9Z",
-      fill: "currentColor"
-    })]
-  });
-}
-export default function Message({
-  languageTag,
-  t = text => text,
-  isMyMessage,
-  userImage,
-  name,
-  text,
-  imageUrl,
-  disableTranslation,
-  handleTranslate,
-  isSpeaking,
-  speak,
-  stopSpeaking,
-  voice,
-  voicePitch,
-  voiceSpeed,
-  handleEditMessage,
-  handleRemoveMessage,
-  moveScriptItem,
-  learnLang,
-  forLang,
-  messageIndex,
-  formatUnderscores,
-  isButton,
-  onClickButton,
-  isListenOnly,
-  hideAvatar,
-  recognizing,
-  muteSound,
-  disableHover,
-  exercise,
-  audioBlob,
-  audioURL,
-  voiceAttempt,
-  messages = [],
-  index,
-  setBotMessages,
-  checked,
-  setCheckedDefault,
-  isMessagePlaying,
-  isSpeakingTextContainer,
-  accessibilityText,
-  accessibilityIndex,
-  isLivePlayer = false,
-  siteLanguage,
-  provided,
-  isEdited = false,
-  isDynamicResponsesEnabled,
-  studentInappropriate,
-  isUserInternal
-}) {
-  const theme = useTheme();
-  const messageContainerId = `message${messageIndex}`;
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  const messageContainerIdSelector = `#${messageContainerId}`;
-  const isCurrentMessagePlaying = isSpeakingTextContainer === messageContainerIdSelector;
-  const {
-    classes
-  } = useStyles({
-    isMyMessage,
-    isButton,
-    hideAvatar,
-    messages,
-    index,
-    isHighlighted: isCurrentMessagePlaying
-  });
-  const showPhonetics = learnLang === "chinese" || learnLang === "japanese";
-  const [translation, setTranslation] = useState({
-    translatedText: "",
-    showTranslation: false
-  });
-  useEffect(() => {
-    setTranslation({
-      showTranslation: false
-    });
-  }, [text]);
-  const [liveMessage, setLiveMessage] = useState("");
-  const {
-    translatedText,
-    showTranslation
-  } = translation;
-  const translate = async () => {
-    const finalForLang = forLang !== "" ? forLang : siteLanguage;
-    try {
-      if (translatedText) {
-        setTranslation({
-          showTranslation: !showTranslation
-        });
-        setLiveMessage(`Phrase has been translated from ${finalForLang} to ${learnLang}`);
-        return;
-      }
-      const translationResult = await handleTranslate(text, learnLang, forLang);
-      if (translationResult && translationResult !== "") {
-        setTranslation({
-          translatedText: translationResult,
-          showTranslation: true
-        });
-        setLiveMessage(`Phrase has been translated from ${learnLang} to ${finalForLang}`);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const handleSpeak = async params => {
-    try {
-      const messageTextContainer = !params.isHoverText ? messageContainerIdSelector : null;
-      await speak(params.text, params.voiceName, false, messageTextContainer, params.languageCode, params.isHoverText, params.pitch);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const handleClickSaveRecordingCheckbox = event => {
-    setCheckedDefault(event.target.checked);
-    messages[index].checked = event.target.checked;
-    setBotMessages([...messages]);
-  };
-  const isVoiceAttemptCheckboxIncluded = exercise === "bot" && !voiceAttempt && audioBlob && isMyMessage;
-  return /*#__PURE__*/_jsx("div", {
-    className: classes.root,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: classes.message,
-      children: [userImage ? /*#__PURE__*/_jsx(_Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === "enable" ? /*#__PURE__*/_jsxs("div", {
-          style: {
-            position: "relative",
-            display: "inline-block"
-          },
-          children: [/*#__PURE__*/_jsx(Avatar, {
-            className: classes.avatar,
-            src: userImage,
-            alt: ""
-          }), /*#__PURE__*/_jsx(AiExperienceIcon, {
-            aiExperienceInfoText: t("ai_chatbot_message_info"),
-            isCurrentMessagePlaying: isCurrentMessagePlaying,
-            sx: {
-              bottom: isSmallScreen ? "23px" : "23px",
-              right: isSmallScreen ? "-11px" : "-21px",
-              transform: isSmallScreen ? "scale(0.33)" : "scale(0.43)"
-            }
-          })]
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          className: classes.avatar,
-          src: userImage,
-          alt: ""
-        })
-      }) : /*#__PURE__*/_jsx(Avatar, {
-        className: classes.avatar,
-        sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-        }),
-        alt: "",
-        children: /*#__PURE__*/_jsx(Person, {
-          fontSize: "large"
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        children: [isButton && /*#__PURE__*/_jsxs(ButtonBase, {
-          focusRipple: true,
-          className: classes.bubbleEnlarge,
-          id: messageContainerId,
-          "aria-label": `Option ${accessibilityIndex}`,
-          onClick: () => onClickButton(text),
-          children: [/*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            alignItems: "center",
-            justifyContent: "space-between",
-            sx: {
-              display: "flex"
-            },
-            spacing: showPhonetics ? undefined : 4,
-            children: [/*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsxs(Box, {
-                sx: {
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: [/*#__PURE__*/_jsx(Typography, {
-                  variant: "subtitle2",
-                  component: "h4",
-                  gutterBottom: true,
-                  align: "left",
-                  sx: {
-                    fontWeight: "bold"
-                  },
-                  children: name
-                }), studentInappropriate && isMyMessage && /*#__PURE__*/_jsx(Tooltip, {
-                  title: t("inappropriate_language_detected"),
-                  children: /*#__PURE__*/_jsx(WarningAmberIcon, {
-                    style: {
-                      color: theme.palette.getContrastText(theme.palette.primary.main)
-                    },
-                    className: classes.warningIcon,
-                    fontSize: "small"
-                  })
-                })]
-              })
-            }), isEdited && /*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: t("student_edited_transcript"),
-                children: /*#__PURE__*/_jsx(BorderColorIcon, {
-                  style: {
-                    color: theme.palette.mode === "dark" ? "#000000" : "#ffffff"
-                  },
-                  fontSize: "small"
-                })
-              })
-            })]
-          }), !isListenOnly && /*#__PURE__*/_jsx(HoverText, {
-            handleTranslate: handleTranslate,
-            learnLang: learnLang,
-            forLang: forLang,
-            handleSpeak: handleSpeak,
-            voice: voice,
-            voicePitch: voicePitch,
-            voiceSpeed: voiceSpeed,
-            disableTranslation: disableTranslation,
-            currentPhrase: true,
-            source: showTranslation ? translatedText : text,
-            isMessage: true,
-            gutterBottom: true,
-            formatUnderscores: formatUnderscores,
-            muteSound: muteSound,
-            disableHover: disableHover || showTranslation,
-            t: t,
-            languageTag: languageTag,
-            showPhonetics: showPhonetics && !showTranslation,
-            displayLang: showTranslation ? forLang || siteLanguage : undefined
-          }), isListenOnly && /*#__PURE__*/_jsx(WaveformImage, {})]
-        }), !isButton && /*#__PURE__*/_jsx("div", {
-          className: classes.indicatorWrapper,
-          children: /*#__PURE__*/_jsxs("div", {
-            className: classes.bubble,
-            id: messageContainerId,
-            style: {
-              position: "relative"
-            },
-            children: [studentInappropriate && isMyMessage && /*#__PURE__*/_jsx(Tooltip, {
-              title: t("inappropriate_language_detected"),
-              children: /*#__PURE__*/_jsx(WarningAmberIcon, {
-                className: classes.inappropriateIcon,
-                fontSize: "small",
-                style: {
-                  color: theme.palette.getContrastText(theme.palette.primary.main)
-                }
-              })
-            }), /*#__PURE__*/_jsxs(Grid, {
-              container: true,
-              alignItems: "center",
-              justifyContent: "space-between",
-              sx: {
-                display: "flex"
-              },
-              spacing: showPhonetics ? undefined : 4,
-              children: [/*#__PURE__*/_jsx(Grid, {
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "subtitle2",
-                  component: "h4",
-                  align: "left",
-                  sx: {
-                    fontWeight: "bold"
-                  },
-                  children: name
-                })
-              }), isEdited && /*#__PURE__*/_jsx(Grid, {
-                children: /*#__PURE__*/_jsx(Tooltip, {
-                  title: t("student_edited_transcript"),
-                  children: /*#__PURE__*/_jsx(BorderColorIcon, {
-                    style: {
-                      color: theme.palette.mode === "dark" ? "#000000" : "#ffffff"
-                    },
-                    fontSize: "small"
-                  })
-                })
-              })]
-            }), !isListenOnly && /*#__PURE__*/_jsx(HoverText, {
-              handleTranslate: handleTranslate,
-              learnLang: learnLang,
-              forLang: forLang,
-              handleSpeak: handleSpeak,
-              voice: voice,
-              voicePitch: voicePitch,
-              voiceSpeed: voiceSpeed,
-              disableTranslation: disableTranslation,
-              currentPhrase: true,
-              source: showTranslation ? translatedText : text,
-              isMessage: true,
-              gutterBottom: true,
-              formatUnderscores: formatUnderscores,
-              muteSound: muteSound,
-              disableHover: disableHover || showTranslation,
-              t: t,
-              languageTag: languageTag,
-              showPhonetics: showPhonetics && !showTranslation,
-              displayLang: showTranslation ? forLang || siteLanguage : undefined
-            }), isListenOnly && /*#__PURE__*/_jsx(WaveformImage, {}), imageUrl && /*#__PURE__*/_jsx("a", {
-              href: imageUrl,
-              rel: "noopener noreferrer",
-              target: "_blank",
-              children: /*#__PURE__*/_jsx("img", {
-                src: imageUrl,
-                alt: "Attachment",
-                className: classes.imageAttachment
-              })
-            }), (voiceAttempt || audioURL) && /*#__PURE__*/_jsx(VoiceMessage, {
-              src: voiceAttempt || audioURL,
-              waveColor: isMyMessage ? theme.palette.grey[400] : theme.palette.grey[600],
-              progressColor: isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.primary.main
-            }), isVoiceAttemptCheckboxIncluded && /*#__PURE__*/_jsx(FormGroup, {
-              className: classes.checkBox,
-              children: /*#__PURE__*/_jsx(FormControlLabel, {
-                control: /*#__PURE__*/_jsx(Checkbox, {
-                  checked: checked,
-                  onChange: handleClickSaveRecordingCheckbox,
-                  name: "saveRecording",
-                  color: "default",
-                  size: "small",
-                  sx: theme => ({
-                    "& svg": {
-                      color: `${isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.primary.main} !important`
-                    }
-                  }),
-                  slotProps: {
-                    input: {
-                      "aria-label": t("save_recording_to_report")
-                    }
-                  }
-                }),
-                label: /*#__PURE__*/_jsx(Typography, {
-                  variant: "body2",
-                  children: t("save_recording_to_report")
-                })
-              })
-            })]
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: classes.additionalInfo,
-          children: !isLivePlayer && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx("div", {
-              children: isCurrentMessagePlaying ? /*#__PURE__*/_jsx(Tooltip, {
-                title: t("stop_speaking"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    color: "inherit",
-                    onClick: () => stopSpeaking(messageContainerIdSelector),
-                    size: "small",
-                    "aria-label": "Stop Speaking Text",
-                    sx: {
-                      border: "1px solid transparent",
-                      "&:hover": {
-                        border: `1px solid ${theme.palette.primary.main}`
-                      }
-                    },
-                    children: /*#__PURE__*/_jsx(StopSpeakingIcon, {
-                      fontSize: "inherit"
-                    })
-                  })
-                })
-              }) : /*#__PURE__*/_jsx(Tooltip, {
-                title: showTranslation ? t("speak_disabled") : t("speak"),
-                describeChild: "false",
-                placement: isSmallScreen ? "left" : "bottom",
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(IconButton, {
-                    color: "inherit",
-                    disabled: isSpeaking || recognizing || muteSound || isMessagePlaying || showTranslation,
-                    onClick: () => speak(text, voice, false, messageContainerIdSelector, null, false, voicePitch),
-                    size: "small",
-                    "aria-label": messageIndex !== -1 ? accessibilityText ? accessibilityText : `Speak message ${messageIndex + 1}` : accessibilityText ? accessibilityText : `Speak message`,
-                    sx: {
-                      border: "1px solid transparent",
-                      "&:hover": {
-                        border: `1px solid ${theme.palette.primary.main}`
-                      }
-                    },
-                    children: /*#__PURE__*/_jsx(SpeakIcon, {
-                      fontSize: "inherit"
-                    })
-                  })
-                })
-              })
-            }), /*#__PURE__*/_jsx(Tooltip, {
-              title: disableTranslation ? t("translate_is_disabled") : t("translate"),
-              placement: isSmallScreen ? "right" : "bottom",
-              children: /*#__PURE__*/_jsx(IconButton, {
-                color: "inherit",
-                onClick: translate,
-                size: "small",
-                disabled: !handleTranslate || disableTranslation,
-                sx: {
-                  display: isListenOnly ? "none" : null,
-                  border: "1px solid transparent",
-                  "&:hover": {
-                    border: `1px solid ${theme.palette.primary.main}`
-                  }
-                },
-                "aria-label": "Translate",
-                children: /*#__PURE__*/_jsx(TranslateIcon, {
-                  fontSize: "inherit",
-                  title: "Translate",
-                  "aria-label": "Translate Text",
-                  role: "img"
-                })
-              })
-            }), /*#__PURE__*/_jsx("span", {
-              "aria-live": "polite",
-              role: "status",
-              className: classes.visuallyHidden,
-              children: liveMessage
-            })]
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: classes.actions,
-          children: [handleEditMessage && /*#__PURE__*/_jsx(Button, {
-            variant: "outlined",
-            className: classes.button,
-            disabled: !handleEditMessage,
-            onClick: () => handleEditMessage(messageIndex),
-            size: "small",
-            startIcon: /*#__PURE__*/_jsx(UpdateIcon, {}),
-            color: "inherit",
-            children: t("edit")
-          }), handleRemoveMessage && /*#__PURE__*/_jsx(Button, {
-            variant: "outlined",
-            className: classes.button,
-            disabled: !handleRemoveMessage,
-            onClick: () => handleRemoveMessage(messageIndex),
-            size: "small",
-            startIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
-            color: "inherit",
-            children: t("remove")
-          })]
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        children: moveScriptItem && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("move_message"),
-          enterDelay: 300,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "large",
-            "aria-label": "Drag Message",
-            sx: {
-              cursor: "grab"
-            },
-            ...(provided ? provided.dragHandleProps : {}),
-            children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
-          })
-        })
-      })]
-    })
-  });
-}