@nualang/nualang-ui-components 0.1.1138 → 0.1.1140

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -161,8 +161,8 @@ function GenerateRoleplayDialog({
       setGeneratedRoleplay([]);
       setErrorMessage("");
       let response;
-      const prompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array, each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array, each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON`;
-      const promptWithQuestions = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array along with three comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array along with three comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.`;
+      const prompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array that is ${values.roleplayLengthNumber} objects in length , each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array that is ${values.roleplayLengthNumber} objects in length , each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON`;
+      const promptWithQuestions = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array that is ${values.roleplayLengthNumber} objects in length along with ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array that is ${values.roleplayLengthNumber} objects in length along with ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.`;
       const roleplayTemplate = {
         roleplayId: (0, _utils.randomId)(),
         roleplayName: values.roleplayTopic,
@@ -194,10 +194,22 @@ function GenerateRoleplayDialog({
         } = responseObject[responseKey][0];
         response = (0, _jsonrepair.jsonrepair)(text);
       } else {
-        const chatGptResponse = await makeChatGptApiRequest({
+        let chatGptResponse = await makeChatGptApiRequest({
           model: "gpt-3.5-turbo",
           prompt: activePrompt
         });
+        let isComplete = false;
+        while (!isComplete) {
+          if (chatGptResponse.endsWith("...") || chatGptResponse.trim().endsWith(",")) {
+            const continuationResponse = await makeChatGptApiRequest({
+              model: "gpt-3.5-turbo",
+              prompt: "Continue: " + chatGptResponse
+            });
+            chatGptResponse += continuationResponse;
+          } else {
+            isComplete = true;
+          }
+        }
         response = chatGptResponse;
       }
       const jsonResponse = removeExtraTextFromChatGptResponse(response);
@@ -249,8 +261,21 @@ function GenerateRoleplayDialog({
   if (autoSelect) {
     isSubmitDisabled = !values.roleplayTopic || isRoleplayGenerating;
   } else {
-    isSubmitDisabled = !(generatedRoleplay !== [] && !isRoleplayGenerating && previewMessages.length > 1);
+    isSubmitDisabled = !(generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1);
   }
+  (0, _react.useEffect)(() => {
+    if (!generateQuestions) {
+      setValues(prevValues => ({
+        ...prevValues,
+        questionsAmount: 0
+      }));
+    } else {
+      setValues(prevValues => ({
+        ...prevValues,
+        questionsAmount: prevValues.questionsAmount || Math.floor(prevValues.roleplayLengthNumber / 2)
+      }));
+    }
+  }, [generateQuestions]);
   return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: isGenerateRoleplayDialogOpen,
     handleClose: handleCloseDialog,
@@ -317,7 +342,8 @@ function GenerateRoleplayDialog({
     rows: 3
   }))), !hideRoleplayDifficultyOptions && !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
-    xs: 12
+    xs: 12,
+    marginBottom: 1
   }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
     select: true,
     id: "roleplayDifficulty",
@@ -357,15 +383,58 @@ function GenerateRoleplayDialog({
     margin: "normal",
     variant: "outlined",
     fullWidth: true
-  }, roleplayLengthOptions)), !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, roleplayLengthOptions)), !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "input-slider",
+    gutterBottom: true
+  }, t("number_of_interactions") + ": " + values.roleplayLengthNumber), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Number of Interactions",
+    defaultValue: 8,
+    valueLabelDisplay: "auto",
+    value: values.roleplayLengthNumber,
+    onChange: (e, newValue) => {
+      const maxQuestions = Math.floor(newValue / 2);
+      setValues(prevValues => ({
+        ...prevValues,
+        roleplayLengthNumber: newValue,
+        questionsAmount: Math.min(prevValues.questionsAmount, maxQuestions)
+      }));
+    },
+    step: 2,
+    marks: true,
+    min: 4,
+    max: 12
+  })), /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    marginBottom: 1
   }, /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
     control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
       checked: generateQuestions,
       onChange: e => setGenerateQuestions(e.target.checked)
     }),
     label: "Generate Questions"
+  }))), generateQuestions && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "input-slider",
+    gutterBottom: true
+  }, t("number_of_questions") + ": " + values.questionsAmount), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Number of Questions",
+    defaultValue: Math.floor(values?.roleplayLengthNumber / 2),
+    valueLabelDisplay: "auto",
+    value: values?.questionsAmount,
+    onChange: (e, newValue) => setValues({
+      ...values,
+      questionsAmount: newValue
+    }),
+    step: 1,
+    marks: true,
+    min: 1,
+    max: Math.floor(values?.roleplayLengthNumber / 2)
   }))), process.env.REACT_APP_STAGE === "dev" && !isRoleplayGenerating && pdfDetails && pdfVectorStoreCreationStatus === "CREATION_COMPLETE" && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
@@ -404,7 +473,7 @@ function GenerateRoleplayDialog({
     loading: isRoleplayGenerating,
     loadingPosition: "start",
     startIcon: /*#__PURE__*/_react.default.createElement(_AutoFixHigh.default, null)
-  }, t("generate_roleplay"))), !autoSelect && generatedRoleplay !== [] && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, t("generate_roleplay"))), !autoSelect && generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
     mt: 2
@@ -441,6 +510,8 @@ GenerateRoleplayDialog.defaultProps = {
   initialValues: {
     roleplayTopic: "",
     roleplayDifficulty: "",
+    roleplayLengthNumber: 8,
+    questionsAmount: 0,
     roleplayLength: "",
     actor1: {
       name: "Carla",

package/dist/Dialogs/LiveGameTutorial/LiveGameTutorial.js

@@ -54,13 +54,14 @@ function DotsMobileStepper({
   }, Math.abs(activeStep - index) <= 2 ? /*#__PURE__*/_react.default.createElement(_material.Box, {
     component: "img",
     sx: {
-      height: 500,
       display: "block",
       maxWidth: 720,
       overflow: "hidden",
       width: "100%",
       margin: "auto",
-      borderRadius: "10px"
+      borderRadius: "10px",
+      marginTop: 1,
+      marginBottom: 1
     },
     src: step.imgPath,
     alt: step.label
@@ -150,8 +151,16 @@ function LiveGameTutorial({
     handleClose: handleClose,
     dialogTitle: t(exerciseName),
     t: t
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%'
+    }
   }, /*#__PURE__*/_react.default.createElement(DotsMobileStepper, {
     images: images,
     t: t
-  }));
+  })));
 }

package/dist/Dialogs/ModeratedDialog/ModeratedDialog.js

@@ -17,7 +17,8 @@ const useStyles = (0, _mui.makeStyles)()(() => ({
 function ModeratedDialog({
   t,
   open,
-  handleClose
+  handleClose,
+  moderationReason
 }) {
   const {
     classes
@@ -27,7 +28,9 @@ function ModeratedDialog({
     handleClose: handleClose,
     dialogTitle: t("moderate_title"),
     className: classes.zIndex
-  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, /*#__PURE__*/_react.default.createElement("p", null, t("moderated_image_dialog"))));
+  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, /*#__PURE__*/_react.default.createElement("p", null, t("moderated_image_dialog")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, t("moderation_reason", {
+    moderationReason: moderationReason
+  }))));
 }
 ModeratedDialog.defaultProps = {
   t: text => text

package/dist/Dialogs/ReportProblem/ReportProblem.js

@@ -25,6 +25,8 @@ function ReportProblem({
   open,
   handleClose,
   handleReportProblem,
+  currentPhrase,
+  isQuestion,
   ...otherProps
 }) {
   const [problem, setProblem] = (0, _react.useState)(initialProblem);
@@ -45,7 +47,9 @@ function ReportProblem({
     } = event.target;
     setProblem(prevProblem => ({
       ...prevProblem,
-      [name]: value
+      [name]: value,
+      currentPhrase: currentPhrase,
+      isQuestion: isQuestion ? isQuestion : false
     }));
   };
   const problemTypes = [{

package/dist/Editors/Roleplay/Roleplay.js

@@ -632,7 +632,7 @@ function Roleplay({
     run,
     steps
   } = joyrideState;
-  const topBarActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, subscription?.isPaidUser && /*#__PURE__*/_react.default.createElement(_material.Button, {
+  const topBarActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, null, subscription?.isPaidUser && /*#__PURE__*/_react.default.createElement(_material.Button, {
     sx: {
       marginRight: 1
     },
@@ -656,7 +656,7 @@ function Roleplay({
     open: uploadRoleplayScript,
     handleClose: () => setUploadRoleplayScript(false),
     onSubmit: onSubmit
-  }));
+  })));
   return /*#__PURE__*/_react.default.createElement(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -838,6 +838,8 @@ function Roleplay({
       roleplayTopic: roleplay.roleplayName,
       roleplayDifficulty: roleplay.difficulty,
       roleplayLength: "",
+      questionsAmount: 0,
+      roleplayLengthNumber: 8,
       actor1: roleplay.actor1,
       actor2: roleplay.actor2
     },

package/dist/Exercises/Bot/Bot.js

@@ -212,6 +212,7 @@ function Bot({
     isSpeaking,
     isSpeakingTextContainer
   } = exerciseState;
+  const currentPhrase = botMessages.length > 0 ? botMessages[botMessages.length - 1].text : "N/A";
   const joyrideSteps = [{
     content: /*#__PURE__*/_react.default.createElement("h2", null, t("bot_exercise_welcome")),
     placement: "center",
@@ -375,7 +376,8 @@ function Bot({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentPhrase: currentPhrase
   }));
   const beforeElements = /*#__PURE__*/_react.default.createElement(_material.Box, {
     mb: 2

package/dist/Exercises/Listener/Listener.js

@@ -549,7 +549,8 @@ function Listener({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentPhrase: currentPhrase
   })), /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
     variant: "dense",
     className: classes.mobileAdditionalToolbar

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -488,7 +488,8 @@ function Pronouncer({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentPhrase: currentPhrase
   })), /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
     variant: "dense",
     className: classes.mobileAdditionalToolbar

package/dist/Exercises/Roleplay/Games/TopBarActions.js

@@ -127,7 +127,8 @@ function OverflowMenu({
   handleCloseReportProblem,
   handleReportProblem,
   handleRestart,
-  setRestartRoleplayDialog
+  setRestartRoleplayDialog,
+  currentMessages
 }) {
   const {
     classes
@@ -139,6 +140,8 @@ function OverflowMenu({
   const handleCloseMenu = () => {
     setAnchorEl(null);
   };
+  const currentPhrase = currentMessages.length > 0 ? currentMessages[currentMessages.length - 1].text ? currentMessages[currentMessages.length - 1].text : currentMessages[currentMessages.length - 1].question : "N/A";
+  const isQuestion = currentMessages.length > 0 && currentMessages[currentMessages.length - 1].hasOwnProperty("question");
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t("more_options")
   }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
@@ -183,7 +186,9 @@ function OverflowMenu({
     handleCloseReportProblem: handleCloseReportProblem,
     handleReportProblem: handleReportProblem,
     mode: "menuitem",
-    menuIconClassname: classes.menuIcon
+    menuIconClassname: classes.menuIcon,
+    currentPhrase: currentPhrase,
+    isQuestion: isQuestion
   })));
 }
 const TopBarActions = ({
@@ -212,6 +217,8 @@ const TopBarActions = ({
   const {
     classes
   } = useStyles();
+  const currentPhrase = currentMessages.length > 0 ? currentMessages[currentMessages.length - 1].text ? currentMessages[currentMessages.length - 1].text : currentMessages[currentMessages.length - 1].question : "N/A";
+  const isQuestion = currentMessages.length > 0 && currentMessages[currentMessages.length - 1].hasOwnProperty("question");
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, roleplayHasStarted || isRoleplayPreview ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isRoleplayPreview && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.progress
   }, /*#__PURE__*/_react.default.createElement(RoundedLinearProgress, {
@@ -253,7 +260,9 @@ const TopBarActions = ({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentPhrase: currentPhrase,
+    isQuestion: isQuestion
   })), /*#__PURE__*/_react.default.createElement(_material.Hidden, {
     smUp: true
   }, /*#__PURE__*/_react.default.createElement(_VoiceSpeed.default, {
@@ -272,7 +281,8 @@ const TopBarActions = ({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentMessages: currentMessages
   }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, handleShareRoleplay && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t("share")
   }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {

package/dist/Exercises/Translator/Translator.js

@@ -543,7 +543,8 @@ function Translator({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentPhrase: currentPhrase
   })), /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
     variant: "dense",
     className: classes.mobileAdditionalToolbar

package/dist/Forms/VideoUploader/VideoUploader.js

@@ -127,19 +127,11 @@ function VideoUploader({
     isDragAccept,
     isDragReject
   });
-  const inputRef = _react.default.useRef();
-  const handleFileChange = event => {
-    const file = event.target.files[0];
-    const url = URL.createObjectURL(file);
-    setFile(url);
-  };
   return /*#__PURE__*/_react.default.createElement("section", {
     className: "container"
   }, !file && /*#__PURE__*/_react.default.createElement("div", getRootProps({
     className: classes.dropzoneContainer
   }), /*#__PURE__*/_react.default.createElement("input", _extends({}, getInputProps(), {
-    onChange: handleFileChange,
-    ref: inputRef,
     accept: ".mov,.mp4"
   })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
     className: classes.selectFileImage,

package/dist/Lists/CourseOutline/CourseOutline.stories.js

@@ -11,7 +11,7 @@ var _CourseOutline = _interopRequireDefault(require("./CourseOutline"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Template = args => /*#__PURE__*/_react.default.createElement(_CourseOutline.default, args);
 const props = exports.props = {
-  isMember: false,
+  isMember: true,
   isCreator: false,
   courseId: "123",
   sections: _Course.props.course.sections,

package/dist/Misc/ReportProblem/ReportProblem.js

@@ -20,13 +20,17 @@ function ReportProblem({
   handleReportProblem,
   edge,
   mode,
-  menuIconClassname
+  menuIconClassname,
+  currentPhrase,
+  isQuestion
 }) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportProblem.default, {
     t: t,
     open: isReportProblemOpen,
     handleClose: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    currentPhrase: currentPhrase,
+    isQuestion: isQuestion
   }), mode === "icon" && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: t("report_problem")
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {

package/dist/Screens/Courses/ViewCourse/ViewCourse.js

@@ -312,6 +312,7 @@ function Course({
       setIsSubmitting(false);
       console.error(error);
     }
+    handleCloseMenu();
   };
   const handleCLickOpenUpload = () => {
     setIsUploadPdfOpen(true);

package/dist/Screens/Dashboard/Dashboard.js

@@ -48,8 +48,6 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
 }));
 function Dashboard({
   t,
-  learnCourses = [],
-  teachCourses = [],
   completions = [],
   avatars = [],
   newRoleplays = [],
@@ -62,11 +60,12 @@ function Dashboard({
   handlePlayRoleplay,
   newCourses = [],
   recommendedCourses = [],
-  isMyCoursesLoading,
+  popularCourses = [],
   isNewCoursesLoading,
   isRecommendedCoursesLoading,
   isNewRoleplaysLoading,
   isNewBotsLoading,
+  isPopularCoursesLoading,
   handleDuplicateBot,
   handleDuplicateRoleplay,
   singleLineGrid = true,
@@ -175,7 +174,7 @@ function Dashboard({
   }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Face.default, null)), t("bot")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: handleCreateCourse,
     role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_BubbleChart.default, null)), t("course")))))), isMyCoursesLoading || learnCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_BubbleChart.default, null)), t("course")))))), isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
@@ -184,7 +183,7 @@ function Dashboard({
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h5",
     component: "h2"
-  }, learnCourses.length > 0 ? t("continue_learning") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+  }, popularCourses.length > 0 ? t("popular_courses") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
     variant: "rectangular",
     height: 32,
     width: 250
@@ -210,14 +209,14 @@ function Dashboard({
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
-    courses: Array.isArray(learnCourses) && learnCourses.length ? learnCourses : null,
+    courses: Array.isArray(popularCourses) && popularCourses.length ? popularCourses : null,
     completions: completions,
     handleStartCourse: handleStartCourse,
     handleLeaveCourse: handleLeaveCourse,
+    handleViewCourseTopic: handleViewCourseTopic,
     handleViewCourse: handleViewCourse,
     handleViewUserProfile: handleViewUserProfile,
     membersProps: membersProps,
-    handleViewCourseTopic: handleViewCourseTopic,
     getMemberDetails: getMemberDetails,
     getMemberInfo: getMemberInfo,
     getUserReviews: getUserReviews,
@@ -230,11 +229,10 @@ function Dashboard({
     getCourseMembers: getCourseMembers,
     memberId: memberId,
     username: username,
-    handleDuplicateCourse: handleDuplicateCourse,
-    ariaText: "Continue learning "
+    handleDuplicateCourse: handleDuplicateCourse
   })), /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isMyCoursesLoading || teachCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isRecommendedCoursesLoading || recommendedCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
@@ -243,7 +241,7 @@ function Dashboard({
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h5",
     component: "h2"
-  }, teachCourses.length > 0 ? t("continue_teaching") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+  }, recommendedCourses.length > 0 ? t("recommended_courses") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
     variant: "rectangular",
     height: 32,
     width: 250
@@ -269,7 +267,7 @@ function Dashboard({
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
-    courses: Array.isArray(teachCourses) && teachCourses.length ? teachCourses : null,
+    courses: Array.isArray(recommendedCourses) && recommendedCourses.length ? recommendedCourses : null,
     completions: completions,
     handleStartCourse: handleStartCourse,
     handleLeaveCourse: handleLeaveCourse,
@@ -289,11 +287,10 @@ function Dashboard({
     getCourseMembers: getCourseMembers,
     memberId: memberId,
     username: username,
-    handleDuplicateCourse: handleDuplicateCourse,
-    ariaText: "Continue teaching "
+    handleDuplicateCourse: handleDuplicateCourse
   })), /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isRecommendedCoursesLoading || recommendedCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isNewCoursesLoading || newCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
@@ -302,7 +299,7 @@ function Dashboard({
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h5",
     component: "h2"
-  }, newCourses.length > 0 ? t("recommended_courses") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+  }, newCourses.length > 0 ? t("new_courses") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
     variant: "rectangular",
     height: 32,
     width: 250
@@ -328,7 +325,7 @@ function Dashboard({
     t: t,
     reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
     memberPlaceholderImageUrl: memberPlaceholderImageUrl,
-    courses: Array.isArray(recommendedCourses) && recommendedCourses.length ? recommendedCourses : null,
+    courses: Array.isArray(newCourses) && newCourses.length ? newCourses : null,
     completions: completions,
     handleStartCourse: handleStartCourse,
     handleLeaveCourse: handleLeaveCourse,
@@ -444,64 +441,6 @@ function Dashboard({
     disablePreview: true
   })), /*#__PURE__*/_react.default.createElement(_material.Box, {
     pb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null, isNewCoursesLoading || newCourses.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    pb: 2
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.headerText
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    variant: "h5",
-    component: "h2"
-  }, newCourses.length > 0 ? t("new_courses") : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
-    variant: "rectangular",
-    height: 32,
-    width: 250
-  }))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("find_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleSearchCourses,
-    "aria-label": t("find_course"),
-    color: "inherit",
-    "data-cy": "search-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: t("create_course")
-  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: handleCreateCourse,
-    "aria-label": t("create_course"),
-    color: "inherit",
-    "data-cy": "add-course-fab",
-    size: "large",
-    role: "link"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))), /*#__PURE__*/_react.default.createElement(_Courses.default, {
-    t: t,
-    reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
-    memberPlaceholderImageUrl: memberPlaceholderImageUrl,
-    courses: Array.isArray(newCourses) && newCourses.length ? newCourses : null,
-    completions: completions,
-    handleStartCourse: handleStartCourse,
-    handleLeaveCourse: handleLeaveCourse,
-    handleViewCourseTopic: handleViewCourseTopic,
-    handleViewCourse: handleViewCourse,
-    handleViewUserProfile: handleViewUserProfile,
-    membersProps: membersProps,
-    getMemberDetails: getMemberDetails,
-    getMemberInfo: getMemberInfo,
-    getUserReviews: getUserReviews,
-    avatars: avatars,
-    singleLineGrid: singleLineGrid,
-    singleLineGridCols: singleLineGridCols,
-    getCourseSections: getCourseSections,
-    getCourseReviews: getCourseReviews,
-    getCourseMember: getCourseMember,
-    getCourseMembers: getCourseMembers,
-    memberId: memberId,
-    username: username,
-    handleDuplicateCourse: handleDuplicateCourse
-  })), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    pb: 2
   }, /*#__PURE__*/_react.default.createElement(_material.Divider, null))) : null);
 }
 Dashboard.defaultProps = {

package/dist/Screens/Dashboard/Dashboard.stories.js

@@ -79,8 +79,9 @@ Loading.storyName = "loading";
 const Loaded = exports.Loaded = Template.bind({});
 Loaded.args = {
   ...props,
-  learnCourses: _Courses.courses,
-  teachCourses: _Courses.courses,
+  popularCourses: _Courses.courses,
+  recommendedCourses: _Courses.courses,
+  newCourses: _Courses.courses,
   newRoleplays: _Roleplays.roleplays,
   newBots: _Bots.bots
 };