@nualang/nualang-ui-components 0.1.1182 → 0.1.1184

package/dist/Containers/App/App.js

@@ -129,6 +129,7 @@ function AppSearch({
     if (location !== "/search") {
       setSearchText("");
       setDebouncedSearchText("");
+      setPrevDebouncedSearchText("");
     }
   }, [location, setSearchText, setDebouncedSearchText]);
   (0, _react.useEffect)(() => {
@@ -150,7 +151,7 @@ function AppSearch({
       onKeyPress: event => {
         if (event.key === "Enter") {
           handleSearchContent(searchText);
-          setPrevDebouncedSearchText("");
+          setPrevDebouncedSearchText(searchText);
         }
       }
     },
@@ -269,7 +270,6 @@ function App({
   };
   const isSearchActive = searchText || isMobileSearchExpanded;
   const isTeacher = user && user["custom:role"] === "teach";
-  const isNewSearchVisible = localStorage.getItem(`new-search-enabled`) === "true";
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -293,14 +293,14 @@ function App({
     navigate: navigate,
     searchText: searchText,
     setSearchText: setSearchText
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLgScreen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTeacher && isNewSearchVisible && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AppSearch, {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLgScreen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTeacher && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AppSearch, {
     t: t,
     navigate: navigate,
     searchText: searchText,
     setSearchText: setSearchText
   }), /*#__PURE__*/_react.default.createElement(_material.Box, {
     flexGrow: 1
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTeacher && isNewSearchVisible && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTeacher && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t("search"),
     enterDelay: 300
   }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {

package/dist/Dialogs/ReportProblem/ReportProblem.js

@@ -25,6 +25,7 @@ function ReportProblem({
   open,
   handleClose,
   handleReportProblem,
+  openSnackbar,
   currentPhrase,
   isQuestion,
   parentClassroom,
@@ -34,21 +35,23 @@ function ReportProblem({
   const [problem, setProblem] = (0, _react.useState)(initialProblem);
   const [enableButton, setEnableButton] = (0, _react.useState)(false);
   const [shareAudioChecked, setShareAudioChecked] = (0, _react.useState)(true);
+  const [isDialogTemporarilyClosed, setIsDialogTemporarilyClosed] = (0, _react.useState)(false);
+  const [shareScreenshotChecked, setShareScreenshotChecked] = (0, _react.useState)(false);
+  const [screenshot, setScreenshot] = (0, _react.useState)(null);
   const {
     description,
     type
   } = problem;
-  const isShareAudioAvailable = (exercise === "pronunciation" || exercise === "bot" || exercise.includes("speaking")) && type === "technical_problem" && audioBlob;
-  const onSubmit = () => {
-    try {
-      isShareAudioAvailable ? handleReportProblem(problem, shareAudioChecked, audioBlob) : handleReportProblem(problem);
-      handleClose();
-      setProblem(initialProblem);
-      shareAudioChecked(true);
-    } catch (error) {
-      console.error(error);
+  const isPronunciationRelatedExercise = (exercise === "pronunciation" || exercise === "bot" || exercise?.includes("speaking")) && type === "technical_problem";
+  const isShareAudioAvailable = isPronunciationRelatedExercise && audioBlob;
+  const isScreenshotAvailable = isPronunciationRelatedExercise && screenshot;
+  (0, _react.useEffect)(() => {
+    if (type && description.trim().length > 0) {
+      setEnableButton(true);
+    } else {
+      setEnableButton(false);
     }
-  };
+  }, [description, type]);
   const handleInputChange = event => {
     const {
       name,
@@ -97,23 +100,77 @@ function ReportProblem({
       ml: 0.5
     }, t(pType.example)));
   });
-  (0, _react.useEffect)(() => {
-    if (type && description.trim().length > 0) {
-      setEnableButton(true);
+  const captureScreenshot = (0, _react.useCallback)(async () => {
+    try {
+      setIsDialogTemporarilyClosed(true);
+      const captureStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        preferCurrentTab: true
+      });
+      const video = document.createElement("video");
+      video.srcObject = captureStream;
+      await new Promise(resolve => {
+        video.onloadedmetadata = () => resolve();
+      });
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      video.play();
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      captureStream.getTracks().forEach(track => track.stop());
+      const screenshotData = canvas.toDataURL("image/png");
+      setScreenshot(screenshotData);
+      video.srcObject = null;
+      video.remove();
+      setIsDialogTemporarilyClosed(false);
+    } catch (err) {
+      console.error("Error capturing screenshot:", err);
+      openSnackbar("Failed to capture screenshot. Please check your browser permissions.", "error");
+      setIsDialogTemporarilyClosed(false);
+      setShareScreenshotChecked(false);
+    }
+  }, []);
+  const handleClickShareScreenshotCheckbox = (0, _react.useCallback)(event => {
+    const isChecked = event.target.checked;
+    setShareScreenshotChecked(isChecked);
+    if (isChecked) {
+      captureScreenshot();
     } else {
-      setEnableButton(false);
+      setScreenshot(null);
     }
-  }, [description, type]);
+  }, [captureScreenshot]);
+  const removeScreenshot = () => {
+    setScreenshot(null);
+    setShareScreenshotChecked(false);
+  };
   const handleClickShareAudioCheckbox = (0, _react.useCallback)(event => {
     setShareAudioChecked(event.target.checked);
   }, []);
+  const onSubmit = () => {
+    try {
+      const audioToSend = isShareAudioAvailable && shareAudioChecked ? audioBlob : null;
+      const screenshotToSend = isScreenshotAvailable && shareScreenshotChecked ? screenshot : null;
+
+      // Call handleReportProblem, passing audio, screenshot, and their corresponding check states
+      handleReportProblem(problem, shareAudioChecked, audioToSend, shareScreenshotChecked, screenshotToSend);
+      setShareScreenshotChecked(false);
+      handleClose();
+      setProblem(initialProblem);
+      setScreenshot(null);
+      setShareAudioChecked(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
-    open: open,
+    open: open && !isDialogTemporarilyClosed,
     handleClose: handleClose,
     handleSubmit: onSubmit,
     dialogTitle: t("report_problem"),
     submitText: t("report_problem"),
-    isSubmitDisabled: !enableButton
+    isSubmitDisabled: !enableButton,
+    openSnackbar: openSnackbar
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
     spacing: 1
@@ -169,6 +226,43 @@ function ReportProblem({
     label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
       fontSize: 14
     }, t("share_audio"))
-  })))));
+  }))), isPronunciationRelatedExercise && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+    control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+      checked: shareScreenshotChecked,
+      onChange: handleClickShareScreenshotCheckbox,
+      name: "shareScreenshot",
+      size: "small",
+      inputProps: {
+        "aria-label": t("share_screenshot")
+      }
+    }),
+    label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      fontSize: 14
+    }, t("share_screenshot"))
+  }))), screenshot && /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    fontSize: 14,
+    sx: {
+      marginBottom: 1
+    }
+  }, t("screenshot_captured")), /*#__PURE__*/_react.default.createElement("img", {
+    src: screenshot,
+    alt: "Captured Screenshot",
+    style: {
+      width: "100%",
+      height: "auto",
+      marginBottom: "1em"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "outlined",
+    color: "primary",
+    onClick: removeScreenshot,
+    size: "small"
+  }, t("remove"))))));
 }
 var _default = exports.default = ReportProblem;

package/dist/Exercises/Bot/Bot.js

@@ -426,7 +426,8 @@ function Bot({
     currentPhrase: currentPhrase,
     parentClassroom: parentClassroom,
     exercise: exerciseName,
-    audioBlob: audioBlob
+    audioBlob: audioBlob,
+    openSnackbar: openSnackbar
   }));
   const beforeElements = /*#__PURE__*/_react.default.createElement(_material.Box, {
     mb: 2

package/dist/Exercises/Listener/Listener.js

@@ -559,6 +559,7 @@ function Listener({
     handleReportProblem: handleReportProblem,
     currentPhrase: currentPhrase,
     parentClassroom: parentClassroom,
+    openSnackbar: openSnackbar,
     exercise: exerciseName
   })), /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
     variant: "dense",

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -501,7 +501,8 @@ function Pronouncer({
     currentPhrase: currentPhrase,
     parentClassroom: parentClassroom,
     exercise: exerciseName,
-    audioBlob: audioBlob
+    audioBlob: audioBlob,
+    openSnackbar: openSnackbar
   })), /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
     variant: "dense",
     className: classes.mobileAdditionalToolbar

package/dist/Exercises/Translator/Translator.js

@@ -565,7 +565,8 @@ function Translator({
     handleReportProblem: handleReportProblem,
     currentPhrase: currentPhrase,
     exercise: exerciseName,
-    parentClassroom: parentClassroom
+    parentClassroom: parentClassroom,
+    openSnackbar: openSnackbar
   })), /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
     variant: "dense",
     className: classes.mobileAdditionalToolbar

package/dist/Forms/CreateBot/Steps/BotInformation/BotInformation.js

@@ -129,6 +129,64 @@ function BotInformation({
       }
     });
   };
+  const voicesArray = (0, _react.useMemo)(() => {
+    return Object.entries(voiceOptions).flatMap(([key, dialect]) => {
+      if (!dialect?.voiceOptions || !Array.isArray(dialect.voiceOptions)) {
+        return [];
+      }
+      return dialect.voiceOptions.filter(voice => voice?.name) // Validate required properties
+      .map(voice => ({
+        voice,
+        dialect,
+        key
+      }));
+    });
+  }, [voiceOptions]);
+  (0, _react.useEffect)(() => {
+    if (!voicesArray.length) {
+      return;
+    }
+    const randomIndex = Math.floor(Math.random() * voicesArray.length);
+    const randomVoiceObj = voicesArray[randomIndex];
+    const {
+      voice: randomVoice,
+      languageCode
+    } = randomVoiceObj;
+    let mounted = true;
+    const updateFields = async () => {
+      if (!mounted) return;
+      handleChange({
+        target: {
+          name: 'voice',
+          value: randomVoice.name
+        }
+      });
+      handleChange({
+        target: {
+          name: 'voiceLanguageCode',
+          value: languageCode
+        }
+      });
+      handleChange({
+        target: {
+          name: 'name',
+          value: randomVoice.name
+        }
+      });
+      handleChange({
+        target: {
+          name: "botAvatar",
+          value: randomVoice.userImage
+        }
+      });
+    };
+    if (!voice) {
+      updateFields();
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [voicesArray, handleChange, voice]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("lets_start_with_some_information_about_your_bot")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 1

package/dist/Forms/CreateClassroom/Steps/ClassroomSettings/ClassroomSettings.js

@@ -36,6 +36,17 @@ function ClassroomSettings({
     vchatEnabled
   } = values;
   const vchatEnabledInSettingsRef = (0, _react.useRef)(null);
+  const generateRandomEnrolmentKey = () => {
+    return String(Math.floor(Math.random() * 90000) + 10000);
+  };
+  (0, _react.useEffect)(() => {
+    handleChange({
+      target: {
+        name: 'enrolmentKey',
+        value: enrolmentKey || generateRandomEnrolmentKey()
+      }
+    });
+  }, []);
   (0, _react.useEffect)(() => {
     if (scrollToDiscuss && vchatEnabledInSettingsRef.current) {
       vchatEnabledInSettingsRef.current.scrollIntoView({

package/dist/Forms/CreateCourse/Steps/CourseSettings/CourseSettings.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var Yup = _interopRequireWildcard(require("yup"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _ChipInput = _interopRequireDefault(require("../../../../Forms/ChipInput"));
 var _index = require("../../../../utils/index");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CourseSettings({
   t,
   values,
@@ -29,6 +29,17 @@ function CourseSettings({
     reviewsEnabled,
     collaborators
   } = values;
+  const generateRandomEnrolmentKey = _react.default.useCallback(() => {
+    return String(Math.floor(Math.random() * 90000) + 10000);
+  }, []);
+  (0, _react.useEffect)(() => {
+    handleChange({
+      target: {
+        name: 'enrolmentKey',
+        value: enrolmentKey || generateRandomEnrolmentKey()
+      }
+    });
+  }, [handleChange, enrolmentKey, generateRandomEnrolmentKey]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("limit_access_course_setting_visibility_private_including_enrolment_key")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     fontSize: 14,
     sx: {

package/dist/Forms/CreateRoleplay/Steps/RoleplayInformation/RoleplayInformation.js

@@ -72,6 +72,64 @@ function ActorForm({
     });
     setAvatarSelector(false);
   };
+  const voicesArray = (0, _react.useMemo)(() => {
+    return Object.entries(voiceOptions).flatMap(([key, dialect]) => {
+      if (!dialect?.voiceOptions || !Array.isArray(dialect.voiceOptions)) {
+        return [];
+      }
+      return dialect.voiceOptions.filter(voice => voice?.name) // Validate required properties
+      .map(voice => ({
+        voice,
+        dialect,
+        key
+      }));
+    });
+  }, [voiceOptions]);
+  (0, _react.useEffect)(() => {
+    if (!voicesArray.length) {
+      return;
+    }
+    const randomIndex = Math.floor(Math.random() * voicesArray.length);
+    const randomVoiceObj = voicesArray[randomIndex];
+    const {
+      voice: randomVoice,
+      languageCode
+    } = randomVoiceObj;
+    let mounted = true;
+    const updateFields = async () => {
+      if (!mounted) return;
+      handleChange({
+        target: {
+          name: `actor${number}.voice`,
+          value: randomVoice.name
+        }
+      });
+      handleChange({
+        target: {
+          name: `actor${number}.voiceLanguageCode`,
+          value: languageCode
+        }
+      });
+      handleChange({
+        target: {
+          name: `actor${number}.name`,
+          value: randomVoice.name
+        }
+      });
+      handleChange({
+        target: {
+          name: `actor${number}.picture`,
+          value: randomVoice.userImage
+        }
+      });
+    };
+    if (!voice) {
+      updateFields();
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [voicesArray, handleChange, number, voice]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("actor", {
     number: number
   })), /*#__PURE__*/_react.default.createElement(_material.FormControl, {

package/dist/Forms/CreateTopic/Steps/TopicSettings/TopicSettings.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _mui = require("tss-react/mui");
 var Yup = _interopRequireWildcard(require("yup"));
 var _VoiceSelector = _interopRequireDefault(require("../../../../Forms/VoiceSelector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   group: {
     flexDirection: "row"
@@ -26,10 +26,23 @@ function TopicSettings({
   handleBlur,
   subscription,
   learnLang,
-  voiceOptions,
+  voiceOptions = {},
   handleSpeak,
   isUserInternal
 }) {
+  const voicesArray = (0, _react.useMemo)(() => {
+    return Object.entries(voiceOptions).flatMap(([key, dialect]) => {
+      if (!dialect?.voiceOptions || !Array.isArray(dialect.voiceOptions)) {
+        return [];
+      }
+      return dialect.voiceOptions.filter(voice => voice?.name) // Validate required properties
+      .map(voice => ({
+        voice,
+        dialect,
+        key
+      }));
+    });
+  }, [voiceOptions]);
   const {
     classes
   } = useStyles();
@@ -40,6 +53,35 @@ function TopicSettings({
     voicePitch,
     voiceLanguageCode
   } = values;
+  (0, _react.useEffect)(() => {
+    if (!voicesArray.length) {
+      return;
+    }
+    const randomIndex = Math.floor(Math.random() * voicesArray.length);
+    const randomVoiceObj = voicesArray[randomIndex];
+    const {
+      voice: randomVoice,
+      languageCode
+    } = randomVoiceObj;
+    let mounted = true;
+    if (mounted && !values.voice) {
+      handleChange({
+        target: {
+          name: "voice",
+          value: randomVoice.name
+        }
+      });
+      handleChange({
+        target: {
+          name: "voiceLanguageCode",
+          value: languageCode
+        }
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [voicesArray, handleChange]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 2

package/dist/Forms/DiscussMultiStepFormDialog/MultiStepFormDialog.js

@@ -98,7 +98,7 @@ function NextButton({
     type: "submit",
     className: classes.button,
     disabled: imageLoading || loading || isSubmitting || (!values.groups || values?.groups?.length === 0) && (!values.initialGroups || values?.initialGroups?.length === 0) && isLastStep || loading
-  }, isLastStep ? submitText ? t(submitText) : t("create") : t("next"));
+  }, isLastStep ? submitText ? t(submitText) : t("schedule") : t("next"));
 }
 function TopBar({
   classes,