@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/Translator/Translator.js

@@ -1,1031 +0,0 @@
-import { useEffect, useState, forwardRef, useRef } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { Grid, Slide, IconButton, Button, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import { red } from "@mui/material/colors";
-import { makeStyles } from "tss-react/mui";
-import CheckIcon from "@mui/icons-material/Check";
-import CloseIcon from "@mui/icons-material/Close";
-import Replay from "@mui/icons-material/Replay";
-import VolumeOff from "@mui/icons-material/VolumeOff";
-import VolumeUp from "@mui/icons-material/VolumeUp";
-import Bank from "@mui/icons-material/AccountBalance";
-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 InputHelper from "../../Forms/InputHelper/InputHelper";
-import AnswerResult from "../../Misc/AnswerResult/AnswerResult";
-import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
-import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
-import useExerciseState from "../../hooks/useExerciseState";
-import useExerciseDocumentTitle from "../../hooks/useExerciseDocumentTitle";
-import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
-import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
-import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
-import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
-import { useTheme } from "@mui/material/styles";
-import getVoiceImages from "../../utils/voiceImages";
-import { arrayMove } from "@dnd-kit/sortable";
-import { SortableGridDndContextWrapper, Sortable } from "../../utils/dragAndDrop/dragAndDrop";
-import { useNavigate } from "react-router";
-
-// utils
-import { capitalize, removeExtraWhiteSpaces, removeAllSymbols } from "../../utils/index";
-import useWordBankFocus from "../../hooks/useWordBankFocus";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  appBar: {
-    position: "relative",
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingRight: `env(safe-area-inset-right)`,
-    paddingLeft: `env(safe-area-inset-left)`
-  },
-  flex: {
-    [theme.breakpoints.down("md")]: {
-      display: "none"
-    },
-    flex: 1
-  },
-  root: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    flexGrow: 1,
-    width: "100%",
-    padding: theme.spacing(4),
-    boxSizing: "border-box"
-  },
-  progress: {
-    width: "100%",
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
-  },
-  largeScreenProgressBar: {
-    [theme.breakpoints.down("sm")]: {
-      display: "none"
-    }
-  },
-  mobileAdditionalToolbar: {
-    display: "none",
-    [theme.breakpoints.down("sm")]: {
-      display: "flex"
-    }
-  },
-  wordButton: {
-    textTransform: "none"
-  },
-  image: {
-    [theme.breakpoints.down("md")]: {
-      maxWidth: "200px",
-      maxHeight: "150px"
-    },
-    maxWidth: "250px",
-    height: "auto",
-    maxHeight: "200px",
-    borderRadius: "20px"
-  },
-  nualaSpeaking: {
-    [theme.breakpoints.down("md")]: {
-      height: "80px"
-    },
-    height: "100px",
-    minHeight: "80px",
-    minWidth: "80px",
-    borderRadius: "20px"
-  },
-  translationWords: {
-    [theme.breakpoints.down("md")]: {
-      marginTop: theme.spacing(2)
-    },
-    borderBottom: `2px solid ${theme.palette.grey[300]}`,
-    maxWidth: "800px",
-    minWidth: "250px",
-    marginTop: theme.spacing(5),
-    marginBottom: theme.spacing(1),
-    paddingBottom: theme.spacing()
-  },
-  iconSmall: {
-    fontSize: 20
-  },
-  wordsContainer: {
-    padding: theme.spacing(),
-    margin: theme.spacing(1, 2, 1, 2),
-    borderRadius: theme.spacing(),
-    borderWidth: "2px",
-    borderStyle: "solid",
-    textAlign: "center",
-    color: theme.palette.primary.main,
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    minHeight: "10vh"
-  },
-  srOnly: {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: 0,
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: 0
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-const WordBankButton = /*#__PURE__*/forwardRef(({
-  word,
-  index,
-  question,
-  removeExtraWhiteSpaces,
-  translationWords,
-  setTranslationWords,
-  classes,
-  handleSelectInAnswerBox,
-  checkAnswer
-}, ref) => {
-  const translationWordList = question && question.translations && question.translations.length ? removeExtraWhiteSpaces(question.translations[0]).split(" ") : [];
-  const key = `${word.text}${word.id}`;
-  const isWordCorrect = translationWordList[index] && removeAllSymbols(word.text) === removeAllSymbols(translationWordList[index]);
-  const onButtonClick = () => {
-    handleSelectInAnswerBox(word);
-    setTranslationWords(translationWords.filter(w => w.id !== word.id));
-  };
-  if (isWordCorrect && checkAnswer) {
-    return /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "contained",
-        onClick: onButtonClick,
-        className: classes.wordButton,
-        color: "secondary",
-        endIcon: isWordCorrect ? /*#__PURE__*/_jsx(CheckIcon, {}) : null,
-        "aria-label": `Correct word: ${word.text}`,
-        ref: ref,
-        children: word.text
-      })
-    }, key);
-  } else if (!isWordCorrect && checkAnswer) {
-    return /*#__PURE__*/_jsx(Grid, {
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "contained",
-        onClick: onButtonClick,
-        className: classes.wordButton,
-        color: "error",
-        endIcon: isWordCorrect ? /*#__PURE__*/_jsx(CheckIcon, {}) : /*#__PURE__*/_jsx(CloseIcon, {}),
-        "aria-label": `Incorrect word: ${word.text}`,
-        ref: ref,
-        children: word.text
-      })
-    }, key);
-  }
-  return /*#__PURE__*/_jsx(Grid, {
-    children: /*#__PURE__*/_jsx(DefaultButton, {
-      variant: "contained",
-      onClick: onButtonClick,
-      className: classes.wordButton,
-      endIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-      "aria-label": `Incorrect word: ${word.text}`,
-      ref: ref,
-      children: word.text
-    })
-  }, key);
-});
-WordBankButton.displayName = "WordBankButton";
-function Translator({
-  t = text => text,
-  exerciseName = "translation",
-  open,
-  handleClose,
-  phrases = [],
-  remainingQuestions,
-  openSnackbar,
-  handleSpeak,
-  clearQueue,
-  stopAudio,
-  courseId,
-  sectionId,
-  topicId,
-  history,
-  handleComplete,
-  learnLang = "",
-  forLang = "",
-  hiddenWordBankExercises,
-  existingAnswerAttempts,
-  exerciseStartTime,
-  topicInfo = {},
-  forLangCharacters,
-  handleSaveProgress,
-  handleDeleteProgress,
-  correctSound,
-  incorrectSound,
-  disableShuffle,
-  toggleMuteSound,
-  handleReportProblem,
-  languageInformation,
-  voices,
-  languageTag,
-  courseSettings = {},
-  isKeyboardHiddenTranslation,
-  parentClassroom,
-  isReadWriteModeStudent,
-  classroomId,
-  assignment,
-  phraseListId
-}) {
-  useExerciseDocumentTitle({
-    exerciseTitle: "Translation",
-    open
-  });
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const scrollRef = useRef(null);
-  const [wordBankTooltipOpen, setWordBankTooltipOpen] = useState(false);
-  const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
-  const exerciseState = useExerciseState({
-    open,
-    handleClose,
-    exerciseName,
-    phrases,
-    topicInfo,
-    initialVoiceSpeed,
-    remainingQuestions,
-    existingAnswerAttempts,
-    exerciseStartTime,
-    handleComplete,
-    handleSaveProgress,
-    handleDeleteProgress,
-    openSnackbar,
-    courseId,
-    sectionId,
-    topicId,
-    history,
-    handleSpeak,
-    clearQueue,
-    stopAudio,
-    learnLang,
-    hiddenWordBankExercises,
-    correctSound,
-    incorrectSound,
-    disableShuffle,
-    toggleMuteSound,
-    isKeyboardHiddenTranslation,
-    isReadWriteModeStudent,
-    classroomId,
-    phraseListId
-  });
-  const {
-    questions,
-    currentPhrase,
-    wordOptions,
-    translationText,
-    translationWords,
-    useWordBank,
-    isWordBankHidden,
-    muteSound,
-    isSpeaking,
-    answerAttempt,
-    pollyResult,
-    isCorrectResultOpen,
-    isIncorrectResultOpen,
-    isSkipResultOpen,
-    answerAttempts,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    isReportProblemOpen,
-    isKeyboardHidden,
-    handleCloseReportProblem,
-    handleOpenReportProblem,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed,
-    closeCloseModal,
-    handleInputChange,
-    setTranslationWords,
-    handleUseWordBank,
-    closeInProgressModal,
-    handleContinue,
-    handleNextQuestion,
-    speak,
-    handleMute,
-    handleRestart,
-    handleRestartExercise,
-    viewReport,
-    handleSaveExerciseProgress,
-    handleCompleteExercise,
-    handleCloseExercise,
-    handleCloseClicked,
-    handleTranslationTourFinished,
-    checkAnswer,
-    setCheckAnswer,
-    isWordBankAttemptChanged,
-    setIsWordBankAttemptChanged,
-    setIsAssignmentExercise
-  } = exerciseState;
-  const unattemptedQuestionTotal = questions.filter(q => !q.questionAttempted).length;
-  const {
-    handleSelectInAnswerBox,
-    handleSelectInWordOptions,
-    setAnswerOptionRef,
-    setAnswerBoxRef
-  } = useWordBankFocus({
-    selectedWords: translationWords,
-    wordOptions,
-    setSelectedWords: setTranslationWords
-  });
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("translation_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("translation_exercise_speak")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("translation_exercise_speak_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#speakButton"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("translation_exercise_read")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("translation_exercise_read_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#currentPhrase"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("translation_exercise_keyboard_input")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("translation_exercise_keyboard_input_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#translationTextAnchor"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("translation_exercise_word_bank")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("translation_exercise_word_bank_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#useWordBank"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("exercise_skip")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("exercise_skip_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#skipButton",
-    disableScrollParentFix: false
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("change_voice_speed")
-    }),
-    spotlightPadding: 8,
-    target: "#change-voice-speed"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_mute")
-    }),
-    spotlightPadding: 8,
-    target: "#mute"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_restart")
-    }),
-    spotlightPadding: 8,
-    target: "#restart"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const [joyrideRewatched, setJoyrideRewatched] = useState(false);
-  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(`translation-exercise-tour-completed`, "true");
-      handleTranslationTourFinished();
-    }
-  };
-  const [incomplete, setIncomplete] = useState(false);
-  const checkCompletionAndNotify = () => {
-    let correctCount = translationWords.filter((word, index) => removeAllSymbols(word.text) === removeAllSymbols(translationWordList[index])).length;
-    if (correctCount === translationWords.length && translationWords.length < translationWordList.length) {
-      setIncomplete(true);
-    }
-  };
-  useEffect(() => {
-    setCheckAnswer(false);
-    setIsWordBankAttemptChanged(true);
-    setIncomplete(false);
-  }, [translationWords]);
-  useEffect(() => {
-    assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
-  }, [assignment]);
-  useEffect(() => {
-    checkAnswer && checkCompletionAndNotify();
-  }, [checkAnswer]);
-  useEffect(() => {
-    if (scrollRef.current && useWordBank) {
-      scrollRef.current.scroll({
-        top: scrollRef.current.scrollHeight,
-        behavior: "smooth"
-      });
-    }
-  }, [useWordBank]);
-  useEffect(() => {
-    if (open && !run && !localStorage.getItem(`translation-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    } else if (open && !run && !joyrideRewatched && localStorage.getItem(`translation-exercise-tour-completed`)) {
-      handleTranslationTourFinished();
-      setTimeout(() => setWordBankTooltipOpen(true), 1000);
-      setTimeout(() => setWordBankTooltipOpen(false), 5000);
-    }
-  }, [open, run]);
-  let question, numOfQuestions, image, numOfCorrectAnswers, completed;
-  if (questions && questions.length > 0) {
-    numOfQuestions = phrases.length;
-    numOfCorrectAnswers = numOfQuestions - questions.length;
-    completed = numOfCorrectAnswers / numOfQuestions * 100;
-    question = questions[0];
-    image = question.image || null;
-  }
-  const translationWordList = question && question.translations && question.translations.length ? removeExtraWhiteSpaces(question.translations[0]).split(" ") : [];
-  const {
-    voice,
-    voiceLanguageCode,
-    voicePitch
-  } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
-  const getVoiceImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.speakingImage || null;
-    } catch (error) {
-      console.error("Error retrieving voice image:", error);
-      return null;
-    }
-  };
-  const getNualaCelebratingImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.celebratingImage || null;
-    } catch (error) {
-      console.error("Error retrieving celebrating image:", error);
-      return null;
-    }
-  };
-  const handleKeyDown = event => {
-    if (event.key === "Escape") {
-      handleCloseClicked();
-    }
-  };
-  let isWordBankEnabled = !isWordBankHidden;
-  if (courseSettings.wordBankEnabled === "enabled") {
-    isWordBankEnabled = true;
-  } else if (courseSettings.wordBankEnabled === "disabled") {
-    isWordBankEnabled = false;
-  } else if (isKeyboardHidden) {
-    isWordBankEnabled = true;
-  }
-  const handleOnDragEnd = result => {
-    const {
-      active,
-      over
-    } = result;
-    if (!over) {
-      return;
-    }
-    if (active.id !== over.id) {
-      const oldIndex = translationWords.findIndex(item => item.id === active.id);
-      const newIndex = translationWords.findIndex(item => item.id === over.id);
-      const updatedTranslationWords = arrayMove(translationWords, oldIndex, newIndex);
-      setTranslationWords(updatedTranslationWords);
-      return;
-    }
-  };
-  const navigate = useNavigate();
-  const goBackToAssignment = () => {
-    navigate(`/classrooms/${classroomId}#Assignments`);
-  };
-  const noTranslationWords = !translationWords || translationWords.length === 0;
-  const isWordBankMode = useWordBank && isWordBankEnabled;
-  const isSubmitAnswerDisabled = isWordBankMode ? !isWordBankAttemptChanged || noTranslationWords : !translationText && noTranslationWords;
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    "aria-labelledby": "translation-exercise-dialog",
-    onKeyDown: handleKeyDown,
-    slots: {
-      transition: Transition
-    },
-    slotProps: {
-      paper: {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          height: "100%"
-        }
-      }
-    },
-    children: [/*#__PURE__*/_jsxs(AppBar, {
-      className: classes.appBar,
-      children: [/*#__PURE__*/_jsxs(Toolbar, {
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          "data-cy": "close-dialog",
-          edge: "start",
-          color: "inherit",
-          onClick: handleCloseClicked,
-          "aria-label": "Close",
-          size: "large",
-          autoFocus: true,
-          children: /*#__PURE__*/_jsx(CloseIcon, {})
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          component: "h1",
-          className: classes.flex,
-          id: "translation-exercise-dialog",
-          sx: {
-            color: "inherit"
-          },
-          children: t("translation")
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: () => {
-              setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
-            },
-            size: "large",
-            children: /*#__PURE__*/_jsx(LightbulbIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress,
-            progressBar: classes.largeScreenProgressBar
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "Translation"
-        }), /*#__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,
-          currentPhrase: currentPhrase,
-          exercise: exerciseName,
-          parentClassroom: parentClassroom,
-          openSnackbar: openSnackbar
-        })]
-      }), /*#__PURE__*/_jsx(Toolbar, {
-        variant: "dense",
-        className: classes.mobileAdditionalToolbar,
-        children: /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "Translation"
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Box, {
-      ref: scrollRef,
-      sx: {
-        overflowY: "auto",
-        flexGrow: 1,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        className: classes.root,
-        direction: "column",
-        spacing: 2,
-        component: "main",
-        sx: {
-          justifyContent: "center",
-          alignItems: "center",
-          maxWidth: "lg",
-          mx: "auto"
-        },
-        children: [/*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("translate_this_phrase"),
-            placement: "top",
-            describeChild: "false",
-            children: /*#__PURE__*/_jsx(Typography, {
-              lang: languageTag,
-              variant: "h6",
-              component: "h2",
-              sx: {
-                color: "inherit"
-              },
-              children: t("translate_this_phrase", {
-                lng: languageTag
-              })
-            })
-          })
-        }), image ? /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx("img", {
-            src: image,
-            alt: "",
-            className: classes.image
-          })
-        }) : null, /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Grid, {
-            container: true,
-            spacing: 1,
-            sx: {
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "row",
-                spacing: "5px"
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "flex",
-                  justifyContent: "center"
-                },
-                children: /*#__PURE__*/_jsx("img", {
-                  src: getVoiceImage(),
-                  className: classes.nualaSpeaking,
-                  alt: ""
-                })
-              }), /*#__PURE__*/_jsxs(Box, {
-                sx: {
-                  display: "grid",
-                  justifyContent: "flex-end",
-                  marginLeft: 1
-                },
-                children: [/*#__PURE__*/_jsx(ChatBubble, {
-                  id: "currentPhrase",
-                  handleSpeak: handleSpeak,
-                  clearQueue: clearQueue,
-                  stopAudio: stopAudio,
-                  learnLang: learnLang,
-                  voice: voice || null,
-                  voicePitch: voicePitch || null,
-                  voiceSpeed: voiceSpeed,
-                  forLang: forLang,
-                  wordList: currentPhrase ? removeExtraWhiteSpaces(currentPhrase.phrase).split(" ") : [],
-                  disableTranslation: false,
-                  isMessage: false,
-                  muteSound: muteSound,
-                  t: t,
-                  languageTag: languageTag
-                }), learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
-                  children: /*#__PURE__*/_jsx(WaveFormLite, {
-                    src: pollyResult ? pollyResult : "",
-                    controls: false,
-                    isSpeaking: isSpeaking,
-                    muteAudio: true,
-                    isCLoseModalOpen: isCloseModalOpen,
-                    handleSpeak: () => {
-                      speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-                    },
-                    clearQueue: clearQueue,
-                    stopAudio: stopAudio,
-                    theme: theme
-                  })
-                })]
-              })]
-            })
-          })
-        }), (useWordBank || isKeyboardHidden && !useWordBank) && /*#__PURE__*/_jsxs("div", {
-          role: "application",
-          children: [/*#__PURE__*/_jsx(Grid, {
-            sx: theme => ({
-              [theme.breakpoints.down("sm")]: {
-                minWidth: 250
-              },
-              minWidth: 400,
-              mx: theme.spacing(2)
-            }),
-            children: /*#__PURE__*/_jsxs(SortableGridDndContextWrapper, {
-              items: translationWords.map(word => word.id),
-              onDragEnd: handleOnDragEnd,
-              orientation: "horizontal",
-              gridClassName: classes.wordsContainer,
-              children: [translationWords.map((word, index) => /*#__PURE__*/_jsx(Sortable, {
-                sortId: word.id,
-                children: /*#__PURE__*/_jsx(Grid, {
-                  tabIndex: -1,
-                  children: /*#__PURE__*/_jsx(WordBankButton, {
-                    "data-cy": "word-bank-button",
-                    word: word,
-                    index: index,
-                    question: question,
-                    currentPhrase: currentPhrase,
-                    removeExtraWhiteSpaces: removeExtraWhiteSpaces,
-                    translationWords: translationWords,
-                    setTranslationWords: setTranslationWords,
-                    classes: classes,
-                    "aria-label": "Word Bank Button",
-                    role: "status",
-                    handleSelectInAnswerBox: handleSelectInAnswerBox,
-                    ref: setAnswerBoxRef(index),
-                    checkAnswer: checkAnswer
-                  })
-                })
-              }, word.id.toString())), /*#__PURE__*/_jsx(Box, {
-                sx: {
-                  minHeight: "24px",
-                  // Adjust this based on the Typography height
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  textAlign: "center"
-                },
-                children: incomplete && /*#__PURE__*/_jsx(Typography, {
-                  sx: {
-                    color: red[800],
-                    fontWeight: "bold"
-                  },
-                  children: t("incomplete_translation")
-                })
-              })]
-            })
-          }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs(Box, {
-            component: "fieldset",
-            sx: {
-              borderWidth: 0
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              gutterBottom: true,
-              component: "legend",
-              sx: {
-                color: "inherit",
-                textAlign: "center",
-                paddingBottom: 1
-              },
-              children: t("select_the_correct_answer")
-            }), /*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsx(Grid, {
-                container: true,
-                spacing: 1,
-                sx: {
-                  justifyContent: "center",
-                  width: "100%"
-                },
-                children: wordOptions.map((word, index) => {
-                  const isDisabled = translationWords.findIndex(w => w.id === word.id) > -1 ? true : false;
-                  return /*#__PURE__*/_jsx(Grid, {
-                    children: /*#__PURE__*/_jsx(DefaultButton, {
-                      variant: "contained",
-                      onClick: () => handleSelectInWordOptions(word),
-                      disabled: isDisabled,
-                      className: classes.wordButton,
-                      "aria-label": `${word.text} selected`,
-                      ref: setAnswerOptionRef(index),
-                      children: word.text
-                    })
-                  }, `${word.text}${word.id}`);
-                })
-              })
-            })]
-          })]
-        }), !isKeyboardHidden && !useWordBank && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Grid, {
-            sx: {
-              width: "100%",
-              maxWidth: `250px !important`
-            },
-            children: /*#__PURE__*/_jsxs("div", {
-              id: "translationTextAnchor",
-              style: {
-                position: "relative"
-              },
-              children: [/*#__PURE__*/_jsx("span", {
-                className: classes.srOnly,
-                children: translationText
-              }), /*#__PURE__*/_jsx(InputHelper, {
-                t: t,
-                value: translationText,
-                onChange: handleInputChange,
-                onKeyDown: e => {
-                  if (e.key === "Enter") {
-                    handleContinue(false);
-                    e.stopPropagation();
-                  }
-                },
-                id: "translationText",
-                name: "translationText",
-                "aria-label": t("language_translation", {
-                  language: capitalize(t(forLang.toLowerCase()))
-                }),
-                "data-cy": "translationText",
-                label: t("language_translation", {
-                  language: capitalize(t(forLang.toLowerCase()))
-                }),
-                type: "text",
-                role: "textbox",
-                "aria-multiline": "true",
-                "aria-autocomplete": "none",
-                variant: "outlined",
-                multiline: true,
-                fullWidth: true,
-                autoComplete: "off",
-                characters: forLangCharacters ? forLangCharacters : null,
-                autoFocus: true
-              })]
-            })
-          }), isWordBankEnabled && /*#__PURE__*/_jsx(Grid, {
-            children: /*#__PURE__*/_jsx(Tooltip, {
-              title: t("use_wordbank_if_stuck"),
-              enterDelay: 500,
-              leaveDelay: 200,
-              open: wordBankTooltipOpen,
-              onClose: () => {
-                setWordBankTooltipOpen(false);
-              },
-              onOpen: () => {
-                setWordBankTooltipOpen(true);
-              },
-              children: /*#__PURE__*/_jsx(Button, {
-                id: "wordbank",
-                "data-cy": "use-word-bank-button",
-                color: "primary",
-                size: "small",
-                onClick: () => handleUseWordBank(),
-                startIcon: /*#__PURE__*/_jsx(Bank, {}),
-                children: t("use_word_bank")
-              })
-            })
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ExerciseBottomBar, {
-      t: t,
-      translationWords: translationWords,
-      handleSubmit: () => handleContinue(false),
-      handleSkip: () => handleContinue(true),
-      isSubmitAnswerAllowed: true,
-      isSubmitAnswerDisabled: isSubmitAnswerDisabled
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "correct",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "incorrect",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      exercise: exerciseName
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isSkipResultOpen,
-      handleNext: handleNextQuestion,
-      ...answerAttempt,
-      result: "skipped",
-      languageInformation: languageInformation,
-      nualaCelebratingImage: getNualaCelebratingImage()
-    }), /*#__PURE__*/_jsx(CompletedExcercise, {
-      open: isCompletionModalOpen,
-      restartExcercise: handleRestartExercise,
-      onClose: () => isCompletionModalOpen(false),
-      goBack: handleCloseExercise,
-      viewReport: viewReport,
-      fullScreen: true,
-      t: t,
-      inTopic: courseId && sectionId && topicId,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(CloseExerciseMenu, {
-      t: t,
-      open: isCloseModalOpen,
-      close: closeCloseModal,
-      saveProgress: () => handleSaveExerciseProgress(questions, answerAttempts, true),
-      finishExercise: handleCompleteExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId,
-      isFinishExerciseDisabled: unattemptedQuestionTotal > 0,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(InProgressExerciseMenu, {
-      t: t,
-      open: isInProgressModalOpen,
-      close: closeInProgressModal,
-      onClose: closeInProgressModal,
-      continueExercise: closeInProgressModal,
-      restartExercise: handleRestartExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__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: 100,
-        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']
-      }
-    })]
-  });
-}
-Translator.propTypes = {};
-export default Translator;