@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/Roleplay/OriginalRoleplay.js

@@ -1,946 +0,0 @@
-import { useEffect, useState, memo } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { useTheme, alpha } from "@mui/material/styles";
-import { withStyles } from "tss-react/mui";
-import { makeStyles } from "tss-react/mui";
-import { Grid, Slide, IconButton, Button, ButtonBase, Avatar, Dialog, Typography, Box, Divider, Tooltip, LinearProgress, useMediaQuery } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import PlayCircleFilled from "@mui/icons-material/PlayCircleFilled";
-import SkipNext from "@mui/icons-material/SkipNext";
-import Replay from "@mui/icons-material/Replay";
-import VolumeOff from "@mui/icons-material/VolumeOff";
-import VolumeUp from "@mui/icons-material/VolumeUp";
-import Person from "@mui/icons-material/Person";
-import EditIcon from "@mui/icons-material/Create";
-import Share from "@mui/icons-material/Share";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-
-// components
-import Chat from "../../Chat/Chat";
-import ResponsiveDialog from "../../Dialogs/ResponsiveDialog/ResponsiveDialog";
-import CloseExerciseMenu from "../../Dialogs/ExerciseMenu/Menus/CloseExercise/CloseExercise";
-import InProgressExerciseMenu from "../../Dialogs/ExerciseMenu/Menus/InProgressExercise/InProgressExercise";
-import CompletedExcercise from "../../Dialogs/ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise";
-import useRecognition from "../../hooks/useRecognition";
-import useExerciseState from "../../hooks/useExerciseState";
-import { formatMarkdownNewlines, randomId } from "../../utils/index";
-import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
-import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import { removeExtraWhiteSpaces } from "../../utils";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const RoundedLinearProgress = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 12,
-    borderRadius: 4
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
-const useStyles = makeStyles()((theme, {
-  isActorOne
-}, classes) => ({
-  label: {
-    color: "#fff"
-  },
-  rightIcon: {
-    marginLeft: theme.spacing(1)
-  },
-  progress: {
-    [theme.breakpoints.down("sm")]: {
-      marginLeft: theme.spacing(0)
-    },
-    width: "100%",
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
-  },
-  answerOptions: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  },
-  answerOption: {
-    position: "relative",
-    height: 200,
-    width: "100%",
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    [theme.breakpoints.down("sm")]: {
-      width: "100% !important",
-      // Overrides inline-style
-      height: 100
-    },
-    [`&:hover, &.${classes.focusVisible}`]: {
-      zIndex: 1,
-      backgroundColor: theme.palette.action.selected,
-      "& $imageBackdrop": {
-        opacity: 0.15
-      },
-      "& $imageMarked": {
-        opacity: 0
-      },
-      "& $imageTitle": {
-        border: "4px solid currentColor"
-      }
-    }
-  },
-  focusVisible: {},
-  creationOptions: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: theme.spacing(2),
-    color: "primary"
-  },
-  options: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2)
-  },
-  avatar: {
-    height: 60,
-    width: 60,
-    marginRight: 0,
-    marginBottom: theme.spacing(1)
-  },
-  option: {
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    cursor: "pointer",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  },
-  option1Avatar: {
-    color: isActorOne ? theme.palette.primary.main : null,
-    boxShadow: isActorOne ? "rgb(255, 255, 255) 0px 0px 0px 2.5px, 0px 0px 0px 4.5px" : "none"
-  },
-  option2Avatar: {
-    color: !isActorOne ? theme.palette.primary.main : null,
-    boxShadow: !isActorOne ? "rgb(255, 255, 255) 0px 0px 0px 2.5px, 0px 0px 0px 4.5px" : "none"
-  },
-  descriptionWrapper: {
-    maxWidth: 800
-  },
-  selectRole: {
-    margin: theme.spacing(2)
-  },
-  menuIcon: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: theme.spacing(2)
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function Prompt({
-  text
-}) {
-  useEffect(() => {
-    const messagesElement = document.getElementById("messages");
-    setTimeout(() => {
-      messagesElement.scrollTo({
-        top: messagesElement.scrollHeight,
-        behavior: "smooth"
-      });
-    }, 0);
-  }, []);
-  return /*#__PURE__*/_jsx(Typography, {
-    align: "center",
-    variant: "h6",
-    gutterBottom: true,
-    children: text
-  });
-}
-function AnswerOptions({
-  options = [],
-  handleSelectAnswerOption
-}) {
-  useEffect(() => {
-    const messagesElement = document.getElementById("messages");
-    setTimeout(() => {
-      messagesElement.scrollTo({
-        top: messagesElement.scrollHeight,
-        behavior: "smooth"
-      });
-    }, 0);
-  }, []);
-  const {
-    classes
-  } = useStyles();
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    sx: {
-      width: "100%"
-    },
-    className: classes.answerOptions,
-    children: options.map((o, i) => {
-      const keyId = `answrolaplay_${randomId()}${i}`;
-      return /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          sm: 6
-        },
-        children: /*#__PURE__*/_jsx(ButtonBase, {
-          focusRipple: true,
-          className: classes.answerOption,
-          focusVisibleClassName: classes.focusVisible,
-          onClick: () => handleSelectAnswerOption(o),
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle1",
-            children: o
-          })
-        })
-      }, keyId);
-    })
-  });
-}
-function SelectActor({
-  t,
-  classes,
-  handleSelectActor,
-  roleplay,
-  isActorOne,
-  roleplayHasStarted
-}) {
-  const [restartDialog, setRestartDialog] = useState(false);
-  const [currentActor, setCurrentActor] = useState(false);
-  const handleActorSelection = val => {
-    if (roleplayHasStarted) {
-      setCurrentActor(val);
-      setRestartDialog(true);
-    } else {
-      handleSelectActor({
-        target: {
-          name: "isActorOne",
-          value: val
-        }
-      });
-      setRestartDialog(false);
-    }
-  };
-  const handleSubmit = () => {
-    setRestartDialog(false);
-    handleSelectActor({
-      target: {
-        name: "isActorOne",
-        value: currentActor
-      }
-    });
-  };
-  return /*#__PURE__*/_jsxs("div", {
-    className: classes.creationOptions,
-    children: [/*#__PURE__*/_jsx(ResponsiveDialog, {
-      submitText: t("confirm"),
-      open: restartDialog,
-      handleClose: () => setRestartDialog(false),
-      dialogTitle: t("change_roles"),
-      handleSubmit: () => handleSubmit(),
-      children: t("you_will_lose_your_progress_on_this_exercise")
-    }), /*#__PURE__*/_jsxs("div", {
-      className: classes.options,
-      id: "actorOptions",
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: classes.option,
-        onClick: !isActorOne ? () => handleActorSelection(true) : null,
-        children: [roleplay && roleplay.actor1 && roleplay.actor1.picture ? /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option1Avatar}`,
-          src: roleplay.actor1.picture,
-          "data-cy": "roleplay_actor1"
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option1Avatar}`,
-          "data-cy": "roleplay_actor1",
-          sx: theme => ({
-            backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-          }),
-          children: /*#__PURE__*/_jsx(Person, {
-            fontSize: "large"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          color: isActorOne ? "primary" : "",
-          children: roleplay.actor1.name ? roleplay.actor1.name : t("actor", {
-            number: "1"
-          })
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${classes.option}`,
-        onClick: isActorOne ? () => handleActorSelection(false) : null,
-        children: [roleplay && roleplay.actor2 && roleplay.actor2.picture ? /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option2Avatar}`,
-          src: roleplay.actor2.picture,
-          "data-cy": "roleplay_actor2"
-        }) : /*#__PURE__*/_jsx(Avatar, {
-          className: `${classes.avatar} ${classes.option2Avatar}`,
-          "data-cy": "roleplay_actor2",
-          sx: theme => ({
-            backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-          }),
-          children: /*#__PURE__*/_jsx(Person, {
-            fontSize: "large"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          color: !isActorOne ? "primary" : "",
-          children: roleplay.actor2.name ? roleplay.actor2.name : t("actor", {
-            number: "2"
-          })
-        })]
-      })]
-    })]
-  });
-}
-function OverflowMenu({
-  t,
-  handleMute,
-  muteSound,
-  handleRestart,
-  isReportProblemOpen,
-  handleOpenReportProblem,
-  handleCloseReportProblem,
-  handleReportProblem,
-  exerciseName
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleOpenMenu = event => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleCloseMenu = () => {
-    setAnchorEl(null);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: t("more_options"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        edge: "end",
-        color: "inherit",
-        onClick: handleOpenMenu,
-        "aria-label": "More Options",
-        id: "more-options",
-        size: "large",
-        children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-      })
-    }), /*#__PURE__*/_jsxs(Menu, {
-      id: `roleplay-overflow-menu`,
-      anchorEl: anchorEl,
-      keepMounted: true,
-      open: Boolean(anchorEl),
-      onClose: handleCloseMenu,
-      children: [handleMute && /*#__PURE__*/_jsxs(MenuItem, {
-        color: "inherit",
-        onClick: handleMute,
-        "aria-label": t("mute"),
-        "aria-pressed": muteSound ? "true" : "false",
-        id: "menu-mute",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.menuIcon,
-          children: muteSound ? /*#__PURE__*/_jsx(VolumeOff, {
-            fontSize: "small"
-          }) : /*#__PURE__*/_jsx(VolumeUp, {
-            fontSize: "small"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          children: muteSound ? t("unmute") : t("mute")
-        })]
-      }), handleRestart && /*#__PURE__*/_jsxs(MenuItem, {
-        color: "inherit",
-        onClick: handleRestart,
-        "aria-label": "Restart",
-        id: "menu-restart",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.menuIcon,
-          children: /*#__PURE__*/_jsx(Replay, {
-            fontSize: "small"
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          children: t("replay")
-        })]
-      }), handleOpenReportProblem && /*#__PURE__*/_jsx(ReportProblem, {
-        t: t,
-        isReportProblemOpen: isReportProblemOpen,
-        handleOpenReportProblem: handleOpenReportProblem,
-        handleCloseReportProblem: handleCloseReportProblem,
-        handleReportProblem: handleReportProblem,
-        mode: "menuitem",
-        menuIconClassname: classes.menuIcon,
-        exercise: exerciseName
-      })]
-    })]
-  });
-}
-function Roleplay({
-  t = text => text,
-  exerciseName = "roleplay",
-  open,
-  handleClose,
-  roleplay = {},
-  learnLang,
-  forLang,
-  handleSpeak,
-  handleTranslate,
-  openSnackbar,
-  courseId,
-  sectionId,
-  topicId,
-  history,
-  handleComplete,
-  learnLangCharacters,
-  roleplayCreatedAtId,
-  handleSaveProgress,
-  disableViewReport,
-  handleDeleteProgress,
-  handleDeleteRoleplayProgress,
-  handleEditRoleplay,
-  handleShareRoleplay,
-  toggleMuteSound,
-  handleReportProblem,
-  setRoleplayVersion,
-  roleplayProgress
-}) {
-  const {
-    exerciseStartTime,
-    selectedActor,
-    existingMessages,
-    existingAnswerAttempts
-  } = roleplayProgress["roleplay"];
-  const {
-    recognitionState,
-    toggleListen,
-    stopListening,
-    resetTranscript,
-    browserSupportsSpeechRecognition
-  } = useRecognition();
-  const {
-    interimTranscript,
-    finalTranscript,
-    transcriptConfidence,
-    recognizing
-  } = recognitionState;
-  const handleMic = expectedTranscript => {
-    const speechContexts = expectedTranscript ? [{
-      phrases: [...(expectedTranscript.length < 100 ? [removeExtraWhiteSpaces(expectedTranscript)] : removeExtraWhiteSpaces(expectedTranscript).split(" "))],
-      boost: 10
-    }] : null;
-    const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
-    toggleListen(learnLang, speechContexts, model);
-  };
-  const exerciseState = useExerciseState({
-    t,
-    open,
-    handleClose,
-    exerciseName,
-    existingAnswerAttempts,
-    existingMessages,
-    exerciseStartTime,
-    selectedActor,
-    handleComplete,
-    handleSaveProgress,
-    handleDeleteProgress,
-    handleDeleteRoleplayProgress,
-    openSnackbar,
-    courseId,
-    sectionId,
-    topicId,
-    roleplayCreatedAtId,
-    history,
-    handleSpeak,
-    learnLang,
-    stopListening,
-    resetTranscript,
-    roleplay,
-    finalTranscript,
-    interimTranscript,
-    toggleMuteSound,
-    gameId: "original"
-  });
-  const {
-    muteSound,
-    answerAttempts,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    roleplayText,
-    roleplayMessages,
-    isActorOne,
-    roleplayHasStarted,
-    isConfidenceOpen,
-    handleCloseConfidence,
-    handleOpenConfidence,
-    setRoleplayText,
-    getActorName,
-    handleSkip,
-    disableSkip,
-    startRoleplay,
-    isMyTurn,
-    showOptions,
-    setShowOptions,
-    answerOptions,
-    handleSelectAnswerOption,
-    handleMakeAttempt,
-    handleCorrectQuestionAnswer,
-    handleIncorrectQuestionAnswer,
-    closeCloseModal,
-    handleInputChange,
-    closeInProgressModal,
-    handleMute,
-    handleRestart,
-    handlePlayAgain,
-    handleRestartExercise,
-    viewReport,
-    handleSaveRoleplayExerciseProgress,
-    handleCompleteExercise,
-    handleCloseExercise,
-    handleCloseClicked,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed,
-    isReportProblemOpen,
-    handleCloseReportProblem,
-    handleOpenReportProblem
-  } = exerciseState;
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles({
-    isActorOne
-  });
-  const [currentMessages, setCurrentMessages] = useState([]);
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("roleplay_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("roleplay_exercise_read_script")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("roleplay_exercise_read_script_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#messageElements"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("roleplay_exercise_select_an_actor")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("roleplay_exercise_select_an_actor_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#actorOptions"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("roleplay_exercise_start")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("roleplay_exercise_start_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#startExercise"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_share")
-    }),
-    spotlightPadding: 8,
-    target: "#share"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const {
-    run,
-    steps
-  } = joyrideState;
-  const handleJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-      localStorage.setItem(`roleplay-exercise-tour-completed`, "true");
-    }
-  };
-  useEffect(() => {
-    if (open && !localStorage.getItem(`roleplay-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    }
-  }, [open]);
-  useEffect(() => {
-    if (open && roleplayHasStarted) {
-      setRoleplayText(`${finalTranscript || ""} ${interimTranscript || ""}`);
-    }
-  }, [open, finalTranscript, interimTranscript]);
-  useEffect(() => {
-    if (roleplay && roleplay.script) {
-      if (roleplayHasStarted) {
-        setCurrentMessages(roleplayMessages);
-      } else {
-        const tempMessages = roleplay.script.filter(l => !l?.question).map(line => {
-          const isActor1 = line.actor === 1;
-          return {
-            ...line,
-            text: formatMarkdownNewlines(line.text),
-            isMyMessage: !isActor1,
-            name: getActorName(isActor1),
-            userImage: isActor1 ? roleplay.actor1 && roleplay.actor1.picture ? roleplay.actor1.picture : null : roleplay.actor2 && roleplay.actor2.picture ? roleplay.actor2.picture : null,
-            voice: isActor1 ? roleplay.actor1 && roleplay.actor1.voice ? roleplay.actor1.voice : null : roleplay.actor2 && roleplay.actor2.voice ? roleplay.actor2.voice : null
-          };
-        });
-        setCurrentMessages(tempMessages);
-      }
-    }
-  }, [roleplayHasStarted, roleplayMessages]);
-  const hiddenUp = useMediaQuery(theme => theme.breakpoints.up("sm"));
-  const hiddenDown = useMediaQuery(theme => theme.breakpoints.down("sm"));
-  const topBarActions = /*#__PURE__*/_jsx(_Fragment, {
-    children: roleplayHasStarted ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.progress,
-        children: /*#__PURE__*/_jsx(RoundedLinearProgress, {
-          variant: "determinate",
-          value: currentMessages.length / roleplay.script.length * 100
-        })
-      }), hiddenDown ? null : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(Button, {
-          onClick: handleSkip,
-          disabled: disableSkip,
-          variant: "contained",
-          color: "secondary",
-          children: [t("next"), /*#__PURE__*/_jsx(SkipNext, {
-            className: classes.rightIcon
-          })]
-        }), /*#__PURE__*/_jsx(VoiceSpeedSelector, {
-          t: t,
-          voiceSpeed: voiceSpeed,
-          isVoiceSpeedMenuOpen: isVoiceSpeedMenuOpen,
-          handleOpenVoiceSpeedMenu: handleOpenVoiceSpeedMenu,
-          handleCloseVoiceSpeedMenu: handleCloseVoiceSpeedMenu,
-          handleChangeVoiceSpeed: handleChangeVoiceSpeed
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: muteSound ? t("unmute") : t("mute"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleMute,
-            "aria-label": t("mute"),
-            "aria-pressed": muteSound ? "true" : "false",
-            id: "mute",
-            size: "large",
-            children: muteSound ? /*#__PURE__*/_jsx(VolumeOff, {}) : /*#__PURE__*/_jsx(VolumeUp, {})
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("replay"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleRestart,
-            "aria-label": "Restart",
-            id: "restart",
-            size: "large",
-            children: /*#__PURE__*/_jsx(Replay, {})
-          })
-        }), /*#__PURE__*/_jsx(ReportProblem, {
-          t: t,
-          edge: "end",
-          isReportProblemOpen: isReportProblemOpen,
-          handleOpenReportProblem: handleOpenReportProblem,
-          handleCloseReportProblem: handleCloseReportProblem,
-          handleReportProblem: handleReportProblem,
-          exercise: exerciseName
-        })]
-      }), hiddenUp ? null : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: handleSkip,
-          disabled: disableSkip,
-          variant: "contained",
-          color: "secondary",
-          size: "small",
-          children: /*#__PURE__*/_jsx(SkipNext, {
-            fontSize: "small"
-          })
-        }), /*#__PURE__*/_jsx(VoiceSpeedSelector, {
-          t: t,
-          voiceSpeed: voiceSpeed,
-          isVoiceSpeedMenuOpen: isVoiceSpeedMenuOpen,
-          handleOpenVoiceSpeedMenu: handleOpenVoiceSpeedMenu,
-          handleCloseVoiceSpeedMenu: handleCloseVoiceSpeedMenu,
-          handleChangeVoiceSpeed: handleChangeVoiceSpeed,
-          edge: "end"
-        }), /*#__PURE__*/_jsx(OverflowMenu, {
-          t: t,
-          handleMute: handleMute,
-          muteSound: muteSound,
-          handleRestart: handleRestart,
-          isReportProblemOpen: isReportProblemOpen,
-          handleOpenReportProblem: handleOpenReportProblem,
-          handleCloseReportProblem: handleCloseReportProblem,
-          handleReportProblem: handleReportProblem,
-          exerciseName: exerciseName
-        })]
-      })]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [handleShareRoleplay && /*#__PURE__*/_jsx(Tooltip, {
-        title: t("share"),
-        children: /*#__PURE__*/_jsx(IconButton, {
-          color: "inherit",
-          onClick: () => handleShareRoleplay(roleplay),
-          id: "share",
-          size: "large",
-          children: /*#__PURE__*/_jsx(Share, {})
-        })
-      }), roleplay && roleplay.isCreator && handleEditRoleplay ? /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: () => handleEditRoleplay(roleplay),
-        edge: "end",
-        size: "large",
-        children: /*#__PURE__*/_jsx(EditIcon, {})
-      }) : null]
-    })
-  });
-  const beforeElements = /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      mb: 2
-    },
-    children: [setRoleplayVersion && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center",
-        py: 1,
-        my: 1,
-        mx: "auto",
-        maxWidth: 450
-      },
-      children: /*#__PURE__*/_jsx(Alert, {
-        variant: "outlined",
-        severity: "info",
-        color: "primary",
-        action: /*#__PURE__*/_jsx(Button, {
-          color: "primary",
-          size: "small",
-          variant: "contained",
-          onClick: () => setRoleplayVersion("new"),
-          children: "Try Now"
-        }),
-        onClose: () => {},
-        children: "New game modes are now available"
-      })
-    }), roleplay && roleplay.picture && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/_jsx("img", {
-        src: roleplay.picture,
-        width: 250,
-        alt: "roleplay"
-      })
-    }), roleplay && roleplay.roleplayName && /*#__PURE__*/_jsx(Typography, {
-      variant: "h6",
-      align: "center",
-      gutterBottom: true,
-      children: roleplay.roleplayName
-    }), roleplay && roleplay.description && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center",
-        mx: "auto"
-      },
-      className: classes.descriptionWrapper,
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        align: "center",
-        color: "textSecondary",
-        children: roleplay.description
-      })
-    }), roleplay && roleplay.actor1 && roleplay.actor2 && /*#__PURE__*/_jsx(SelectActor, {
-      t: t,
-      classes: classes,
-      roleplay: roleplay,
-      handleSelectActor: handleInputChange,
-      isActorOne: isActorOne,
-      roleplayHasStarted: roleplayHasStarted
-    }), !roleplayHasStarted && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        mb: 3,
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        "data-cy": "start-roleplay",
-        color: "secondary",
-        variant: "contained",
-        onClick: startRoleplay,
-        endIcon: /*#__PURE__*/_jsx(PlayCircleFilled, {}),
-        id: "startExercise",
-        children: t("start")
-      })
-    }), /*#__PURE__*/_jsx(Divider, {})]
-  });
-  const disableReplies = roleplay.repliesEnabled !== "enable";
-  const afterElements = /*#__PURE__*/_jsx("div", {
-    children: roleplayHasStarted && isMyTurn && !disableSkip && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(Box, {
-        sx: {
-          textAlign: "center"
-        },
-        children: [/*#__PURE__*/_jsx(Prompt, {
-          text: `What does ${getActorName(isActorOne)} say next?`
-        }), showOptions ? /*#__PURE__*/_jsx(DefaultButton, {
-          onClick: () => setShowOptions(false),
-          children: t("hide_options")
-        }) : /*#__PURE__*/_jsx(Tooltip, {
-          title: disableReplies ? t("reply_options_are_disabled") : t("show_options"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(DefaultButton, {
-              disabled: disableReplies,
-              onClick: () => setShowOptions(true),
-              children: t("show_options")
-            })
-          })
-        })]
-      }), showOptions && /*#__PURE__*/_jsx(AnswerOptions, {
-        options: answerOptions,
-        handleSelectAnswerOption: handleSelectAnswerOption
-      })]
-    })
-  });
-  const scriptLine = roleplay && roleplay.script && roleplay.script[roleplayMessages.length] ? roleplay.script[roleplayMessages.length].text : "";
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    slots: {
-      transition: Transition
-    },
-    children: [/*#__PURE__*/_jsx(Chat, {
-      t: t,
-      repliesEnabled: roleplay.repliesEnabled,
-      translationEnabled: roleplay.translationEnabled,
-      messages: currentMessages,
-      answerAttempts: answerAttempts,
-      handleClose: handleCloseClicked,
-      handleInputChange: handleInputChange,
-      inputName: "roleplayText",
-      inputValue: roleplayText,
-      disableInput: !isMyTurn,
-      browserSupportsSpeechRecognition: browserSupportsSpeechRecognition,
-      handleRecord: browserSupportsSpeechRecognition && learnLang !== "irish" ? () => handleMic(scriptLine) : null,
-      isListening: recognizing,
-      handleTranslate: handleTranslate,
-      handleSpeak: handleSpeak,
-      handleSend: () => handleMakeAttempt(),
-      learnLang: learnLang,
-      forLang: forLang,
-      voiceSpeed: voiceSpeed,
-      isPrimaryColor: true,
-      topBarActions: topBarActions,
-      beforeElements: beforeElements,
-      afterElements: afterElements,
-      hideBottomBar: !roleplayHasStarted,
-      disableScroll: !roleplayHasStarted,
-      characters: learnLangCharacters,
-      finalTranscript: finalTranscript,
-      transcriptConfidence: transcriptConfidence,
-      isConfidenceOpen: isConfidenceOpen,
-      handleCloseConfidence: handleCloseConfidence,
-      handleOpenConfidence: handleOpenConfidence,
-      handleCorrectQuestionAnswer: handleCorrectQuestionAnswer,
-      handleIncorrectQuestionAnswer: handleIncorrectQuestionAnswer,
-      handleKeyPress: e => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          handleMakeAttempt();
-        }
-      },
-      muteSound: muteSound
-    }), /*#__PURE__*/_jsx(CompletedExcercise, {
-      open: isCompletionModalOpen,
-      restartExcercise: () => {
-        const messagesElement = document.getElementById("messages");
-        setTimeout(() => {
-          messagesElement.scrollTo({
-            top: 0,
-            behavior: "smooth"
-          });
-        }, 0);
-        handlePlayAgain();
-      },
-      onClose: () => isCompletionModalOpen(false),
-      goBack: handleCloseExercise,
-      viewReport: viewReport,
-      disableViewReport: disableViewReport,
-      fullScreen: true,
-      t: t,
-      inTopic: courseId && sectionId && topicId
-    }), /*#__PURE__*/_jsx(CloseExerciseMenu, {
-      t: t,
-      open: isCloseModalOpen,
-      close: closeCloseModal,
-      saveProgress: () => handleSaveRoleplayExerciseProgress(roleplayMessages, answerAttempts, true),
-      finishExercise: handleCompleteExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId
-    }), /*#__PURE__*/_jsx(InProgressExerciseMenu, {
-      t: t,
-      open: isInProgressModalOpen,
-      close: closeInProgressModal,
-      onClose: closeInProgressModal,
-      continueExercise: closeInProgressModal,
-      restartExercise: handleRestartExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId
-    }), /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleJoyrideCallback,
-      continuous: true,
-      run: run,
-      scrollToFirstStep: true,
-      steps: steps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        scrollOffset: 300,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    })]
-  });
-}
-Roleplay.propTypes = {};
-export default /*#__PURE__*/memo(Roleplay);