@nualang/nualang-ui-components 0.1.1192 → 0.1.1194

package/dist/Cards/Classroom/Classroom.js

@@ -69,11 +69,7 @@ function OverflowMenu({
     onClick: leaveClassroom
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_ExitToApp.default, {
     fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("leave_classroom"))), isCreator && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: viewClassroom
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Edit.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("manage_classroom"))));
+  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("leave_classroom"))));
 }
 function ClassroomLoading() {
   return /*#__PURE__*/_react.default.createElement(_CardElements.CardContainer, null, /*#__PURE__*/_react.default.createElement(_CardElements.CardTop, null, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {

package/dist/Cards/Course/Course.js

@@ -81,11 +81,7 @@ function OverflowMenu({
     onClick: leaveCourse
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_ExitToApp.default, {
     fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("leave_course"))), isCreator && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-    onClick: viewCourse
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Edit.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("manage_course"))), handleDuplicateCourse && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("leave_course"))), isCreator && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, handleDuplicateCourse && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: async () => {
       handleClose();
       await handleDuplicateCourse(course);

package/dist/Charts/Bar/TotalGrades/TotalGrades.js

@@ -37,13 +37,17 @@ function TotalGrades({
     }]]);
     recordings.forEach(recording => {
       for (let i = 0; i <= 7; i++) {
-        if (recording[`feedback${i}`]) {
+        const feedback = recording[`feedback${i}`];
+        if (feedback && feedback[0]) {
           const {
             feedbackLevelName,
             methodCheck
-          } = recording[`feedback${i}`][0];
+          } = feedback[0];
           if (feedbackLevelName && methodCheck) {
-            feedbackCounts.get(feedbackLevelName)[methodCheck] += 1;
+            const feedbackLevel = feedbackCounts.get(feedbackLevelName);
+            if (feedbackLevel) {
+              feedbackLevel[methodCheck] += 1;
+            }
           }
         }
       }

package/dist/Dialogs/RecordingDialog/RecordingDialog.js

@@ -12,6 +12,8 @@ var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _FeedbackDialog = _interopRequireDefault(require("../FeedbackDialog/FeedbackDialog"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
+var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
+var _colors = require("@mui/material/colors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable react/prop-types */
 
@@ -92,13 +94,37 @@ function RecordingDialog({
   playerRef,
   conversation,
   handleCreateFeedback,
-  attendeesData
+  attendeesData,
+  hasBadLanguage
 }) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, attendeesData.length > 0 && /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: open,
     handleClose: handleClose,
     maxWidth: 1,
-    dialogTitle: t("recording_info")
+    dialogTitle: /*#__PURE__*/_react.default.createElement(_material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 2
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("recording_info")), hasBadLanguage && /*#__PURE__*/_react.default.createElement(_material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        px: 2,
+        py: 1,
+        backgroundColor: _colors.red[800],
+        borderRadius: "4px",
+        color: "white"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Error.default, {
+      sx: {
+        mr: 1
+      }
+    }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      fontWeight: "bold",
+      variant: "subtitle1"
+    }, t("inappropriate_language_detected"))))
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
     spacing: 2

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -162,8 +162,7 @@ function Pronouncer({
   uploadAudioAttempt,
   languageTag,
   trackRecommendedEvent,
-  parentClassroom,
-  isHeritageSpeaker = false
+  parentClassroom
 }) {
   (0, _useExerciseDocumentTitle.default)({
     exerciseTitle: "Pronunciation",
@@ -265,8 +264,7 @@ function Pronouncer({
     indicateEndStream,
     disableShuffle,
     toggleMuteSound,
-    audioBlob,
-    isHeritageSpeaker
+    audioBlob
   });
   const {
     questions,
@@ -629,9 +627,9 @@ function Pronouncer({
     wordList: currentPhrase ? (0, _utils.removeExtraWhiteSpaces)(currentPhrase.phrase).split(" ") : [],
     disableTranslation: false,
     isMessage: false,
-    muteSound: isHeritageSpeaker ? true : muteSound,
+    muteSound: muteSound,
     t: t
-  }), learnLang !== "irish" && !isHeritageSpeaker && /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_WaveFormLite.default, {
+  }), learnLang !== "irish" && /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_WaveFormLite.default, {
     src: pollyResult ? pollyResult : "",
     controls: false,
     isSpeaking: isSpeaking,

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

@@ -71,7 +71,8 @@ function RoleplayGame({
   stopAudio,
   languageInformation,
   translationEnabled,
-  parentClassroom
+  parentClassroom,
+  isHeritageSpeaker = false
 }) {
   (0, _useExerciseDocumentTitle.default)({
     exerciseTitle: "Fill in the blanks",
@@ -124,7 +125,8 @@ function RoleplayGame({
     },
     clearQueue,
     stopAudio,
-    languageInformation
+    languageInformation,
+    isHeritageSpeaker
   });
   const {
     muteSound,
@@ -264,7 +266,7 @@ function RoleplayGame({
       handleOpenVoiceSpeedMenu: handleOpenVoiceSpeedMenu,
       handleCloseVoiceSpeedMenu: handleCloseVoiceSpeedMenu,
       handleChangeVoiceSpeed: handleChangeVoiceSpeed,
-      muteSound: muteSound,
+      muteSound: isHeritageSpeaker ? true : muteSound,
       handleMute: handleMute,
       isReportProblemOpen: isReportProblemOpen,
       handleOpenReportProblem: handleOpenReportProblem,
@@ -301,7 +303,7 @@ function RoleplayGame({
     gameId: gameId,
     formatUnderscores: false,
     hideBottomBar: true,
-    muteSound: muteSound
+    muteSound: isHeritageSpeaker ? true : muteSound
   }), /*#__PURE__*/_react.default.createElement(_InProgressExercise.default, {
     t: t,
     open: isInProgressModalOpen,

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGames.js

@@ -34,7 +34,7 @@ function RoleplayGames({
     sx: {
       m: 2
     }
-  }, t("choose_game_mode"))), gameList.map((game, index) => !gamesHidden[game.gameId] && !((game.gameId === "act-it-out-listening" || game.gameId === "act-it-out-listening-speaking") && isHeritageSpeaker) || isCreator ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
+  }, t("choose_game_mode"))), gameList.map((game, index) => !gamesHidden[game.gameId] && !((game.gameId === "act-it-out-listening" || game.gameId === "act-it-out-listening-speaking" || game.gameId === "act-it-out-speaking") && isHeritageSpeaker) || isCreator ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
     xs: 12,
     key: index,

package/dist/Forms/CreateMeetingMultiStepForm/GroupAssignment.js

@@ -129,12 +129,13 @@ function GroupAssignment({
     });
     setArr(newArr);
   };
-  const selectAll = () => {
-    const all = [];
-    memberIds.forEach((item, index) => {
-      all.push(index);
-    });
-    setChecked(all);
+  const selectAll = isChecked => {
+    if (isChecked) {
+      const all = memberIds.map((_, index) => index);
+      setChecked(all);
+    } else {
+      setChecked([]);
+    }
   };
   (0, _react.useEffect)(() => {
     if (initialGroups && initialGroups.length > 0) {
@@ -255,10 +256,12 @@ function GroupAssignment({
     key: "select-all",
     secondaryAction: /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
       control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-        onChange: () => selectAll(),
+        onChange: e => selectAll(e.target.checked),
         inputProps: {
           "aria-labelledby": "select-all-box"
-        }
+        },
+        checked: checked.length === memberIds.length && memberIds.length > 0,
+        indeterminate: checked.length > 0 && checked.length < memberIds.length
       }),
       label: t("select_students_to_group"),
       labelPlacement: "start",

package/dist/Forms/InputHelper/InputHelper.js

@@ -33,7 +33,7 @@ function Adornment(props) {
   const {
     t = text => text,
     onChange,
-    characters = ["¡", "¿", "ß", "à", "á", "â", "ã", "ä", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ñ", "ò", "ó", "ô", "õ", "ö", "ù", "ú", "û", "ü", "œ", "À", "Á", "Â", "Ã", "Ä", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "Ù", "Ú", "Û", "Ü"],
+    characters,
     emoji,
     name,
     value,
@@ -43,61 +43,50 @@ function Adornment(props) {
     width = 90,
     title = "accents_and_special_characters",
     activeRef,
-    learnLang,
     whiteIcon = false,
     isDisabled,
-    isEditView,
-    setIsDisabled,
-    setIsButtonClicked
+    isEditView
   } = props;
   const theme = (0, _styles.useTheme)();
-  const isEnglish = learnLang === "english";
-  const isSmallScreen = (0, _useMediaQuery.default)("(max-width:420px)");
-  const {
-    selectionStart
-  } = activeRef && activeRef.current ? activeRef.current : {};
-  const [anchorEl, setAnchorEl] = _react.default.useState(null);
-  const handleClick = event => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleMouseDown = event => {
-    event.preventDefault();
-  };
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const [showEmojiPicker, setShowEmojiPicker] = (0, _react.useState)(false);
-  const toggleEmojiPicker = () => {
-    setShowEmojiPicker(!showEmojiPicker);
-  };
-  const handleToggleEmojiPicker = event => {
-    if (event.key === "Enter" || event.key === " ") {
-      // Handle insertPhoto on Enter or Space key press
-      toggleEmojiPicker();
-    }
-  };
-  const handleClickOption = option => {
-    handleClose();
-    const newText = [value.slice(0, selectionStart), `${option}`, value.slice(selectionStart)].join("");
+  const handleClickAccents = event => setAnchorEl(event.currentTarget);
+  const handleCloseAccents = () => setAnchorEl(null);
+  const toggleEmojiPicker = () => setShowEmojiPicker(prev => !prev);
+  const handleEmojiClose = () => setShowEmojiPicker(false);
+  const onEmojiClick = event => {
+    const newText = [value.slice(0, activeRef.current.selectionStart), `${event.emoji}`, value.slice(activeRef.current.selectionStart)].join("");
     onChange({
       target: {
         name: name,
         value: newText
       }
     });
-  };
-  const handleEmojiClose = () => {
     setShowEmojiPicker(false);
   };
-  const onEmojiClick = event => {
-    const newText = [value.slice(0, selectionStart), `${event.emoji}`, value.slice(selectionStart)].join("");
+  const handleClickOption = option => {
+    handleCloseAccents();
+    const newText = [value.slice(0, activeRef.current.selectionStart), `${option}`, value.slice(activeRef.current.selectionStart)].join("");
     onChange({
       target: {
         name: name,
         value: newText
       }
     });
-    setShowEmojiPicker(false);
+  };
+  const handleKeyDown = event => {
+    const {
+      key,
+      target
+    } = event;
+    if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      if (target.id === "emoji-button") {
+        toggleEmojiPicker();
+      } else if (target.id === "accents-button") {
+        handleClickAccents(event);
+      }
+    }
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
     position: adornmentPosition
@@ -111,48 +100,49 @@ function Adornment(props) {
     theme: theme.palette.mode === "dark" ? "dark" : "light",
     onEmojiClick: onEmojiClick
   })), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: isDisabled ? t("Please select a textfield") : t("insert_emoji")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    title: t("insert_emoji")
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    id: "emoji-button",
     edge: iconButtonEdge,
     "aria-haspopup": "true",
+    "aria-label": "Emoji Picker",
     onClick: toggleEmojiPicker,
+    onKeyDown: handleKeyDown,
     size: "large",
-    "aria-label": "Emojis",
     disabled: isDisabled && !isEditView,
-    onKeyDown: handleToggleEmojiPicker,
-    onMouseDown: () => setIsButtonClicked(true),
-    sx: theme => ({
+    sx: {
       padding: "8px",
       ...(whiteIcon && {
         "& svg": {
           fill: theme.palette.mode === "light" ? "white" : "inherit"
         }
       })
-    })
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Smile, null))))), !isEnglish && characters && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Smile, null)))), characters && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: t(title)
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    onMouseDown: handleMouseDown,
-    onClick: handleClick,
+    id: "accents-button",
+    onClick: handleClickAccents,
+    onKeyDown: handleKeyDown,
     edge: iconButtonEdge,
     "aria-haspopup": "true",
-    icon: icon,
     "aria-expanded": Boolean(anchorEl),
+    "aria-label": title,
     size: "large",
-    sx: theme => ({
+    sx: {
       padding: "8px",
       ...(whiteIcon && {
         "& svg": {
           fill: theme.palette.mode === "light" ? "white" : "inherit"
         }
       })
-    })
+    }
   }, icon)), /*#__PURE__*/_react.default.createElement(_Menu.default, {
-    id: `char-menu-${(0, _index.randomId)()}`,
+    id: `char-menu-${name}`,
     anchorEl: anchorEl,
     keepMounted: true,
     open: Boolean(anchorEl),
-    onClose: handleClose,
+    onClose: handleCloseAccents,
     PaperProps: {
       style: {
         maxHeight: 48 * 4.5,
@@ -179,16 +169,30 @@ function InputHelper(props) {
     learnLang
   } = props;
   const textInput = (0, _react.useRef)(null);
-  const activeRef = inputRef ? inputRef : textInput;
+  const activeRef = inputRef || textInput;
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
+  const handleKeyDown = event => {
+    if ((event.key === "Enter" || event.key === " ") && adornmentPosition) {
+      const adornmentButton = document.getElementById(`${id}-adornment`);
+      if (adornmentButton) {
+        adornmentButton.click();
+        event.preventDefault();
+      }
+    }
+  };
   const adornment = characters ? /*#__PURE__*/_react.default.createElement(Adornment, _extends({}, props, {
     activeRef: activeRef,
-    learnLang: learnLang
+    learnLang: learnLang,
+    id: `${id}-adornment`,
+    role: "button",
+    tabIndex: 0,
+    "aria-haspopup": "true",
+    onKeyDown: handleKeyDown
   })) : null;
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, _extends({}, props, {
     id: props.id ? `${props.id}FormControl` : undefined
-  }), /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
+  }), label && /*#__PURE__*/_react.default.createElement(_InputLabel.default, {
     htmlFor: id,
     id: `${inputLabelId}${(0, _index.randomId)()}`,
     sx: theme => ({
@@ -199,9 +203,11 @@ function InputHelper(props) {
     startAdornment: adornmentPosition === "start" ? adornment : null,
     endAdornment: adornmentPosition === "end" ? adornment : null,
     inputRef: activeRef,
+    autoFocus: autofocus,
     inputProps: {
       maxLength
-    }
+    },
+    onKeyDown: handleKeyDown
   })), variant === "outlined" && /*#__PURE__*/_react.default.createElement(_OutlinedInput.default, _extends({}, props, {
     margin: margin === "normal" ? "none" : margin,
     startAdornment: adornmentPosition === "start" ? adornment : null,
@@ -211,7 +217,8 @@ function InputHelper(props) {
     autoFocus: autofocus,
     inputProps: {
       maxLength
-    }
+    },
+    onKeyDown: handleKeyDown
   })), (variant === "standard" || variant !== "outlined" && variant !== "filled") && /*#__PURE__*/_react.default.createElement(_Input.default, _extends({}, props, {
     startAdornment: adornmentPosition === "start" ? adornment : null,
     endAdornment: adornmentPosition === "end" ? adornment : null,

package/dist/Lists/Members/Members.js

@@ -15,9 +15,12 @@ var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _Members = _interopRequireDefault(require("../../Misc/NotFound/Members"));
 var _luxon = require("luxon");
 var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
+var _styles = require("@mui/material/styles");
+var _Tooltip = require("@mui/material/Tooltip");
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   root: {
     width: "100%",
@@ -87,6 +90,53 @@ function Member(props) {
       width: "100%"
     })));
   }
+  const HtmlTooltip = (0, _styles.styled)(({
+    className,
+    ...props
+  }) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, _extends({}, props, {
+    classes: {
+      popper: className
+    },
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontWeight: "bold",
+        marginBottom: "8px"
+      }
+    }, t("heritage_speaker")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginBottom: "8px"
+      }
+    }, t("heritage_speaker_desc")), /*#__PURE__*/_react.default.createElement("ul", {
+      style: {
+        marginLeft: "16px",
+        marginBottom: "8px",
+        paddingLeft: "0"
+      }
+    }, /*#__PURE__*/_react.default.createElement("li", null, t("heritage_speaker_point_1")), /*#__PURE__*/_react.default.createElement("li", null, t("heritage_speaker_point_2"))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontSize: "12px"
+      }
+    }, t("freely_changed")))
+  })))(({
+    theme
+  }) => ({
+    [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+      fontSize: theme.typography.pxToRem(12),
+      border: `1px solid ${theme.palette.divider}`
+    },
+    [`& ul`]: {
+      listStyleType: "disc",
+      paddingLeft: theme.spacing(2),
+      margin: 0
+    },
+    [`& li`]: {
+      display: "list-item",
+      marginBottom: theme.spacing(0.5)
+    }
+  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
     ContainerComponent: "div",
     secondaryAction: isCreator && handleDeleteClassroomMember && !isClassroomArchived ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
@@ -112,12 +162,14 @@ function Member(props) {
       display: "flex",
       alignItems: "center",
       gap: "8px"
-    }, member.username, /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    }, member.username, /*#__PURE__*/_react.default.createElement(HtmlTooltip, {
+      placement: "right"
+    }, /*#__PURE__*/_react.default.createElement(_material.Chip, {
       label: t("heritage_speaker"),
       size: "small",
       variant: "outlined",
       color: "primary"
-    })) : member.username,
+    }))) : member.username,
     secondary: `Joined ${_luxon.DateTime.fromMillis(member.createdAt).toRelative()}`
   }), /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: classes.actionsWrapper
@@ -139,7 +191,9 @@ function Member(props) {
     "aria-label": `Unmark as heritage speaker: ${member.username}`
   }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
     primary: t("unmark_as_heritage_speaker")
-  })) : /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })) : /*#__PURE__*/_react.default.createElement(HtmlTooltip, {
+    placement: "right"
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       handleUpdateClassroomMember(member.classroomId, member.memberId, {
         isHeritageSpeaker: true
@@ -148,7 +202,7 @@ function Member(props) {
     "aria-label": `Mark as heritage speaker: ${member.username}`
   }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
     primary: t("mark_as_heritage_speaker")
-  }))), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })))), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: deleteClassroomMember,
     "aria-label": `Delete Member: ${member.username}`
   }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -380,7 +380,8 @@ function Classroom({
     editBackgroundImages,
     editMeetingImages,
     setSelectedDiscussion,
-    meetingRecsData
+    meetingRecsData,
+    hasBadLanguage
   } = vchatProps;
   const isSmallScreen = (0, _useMediaQuery.default)("(max-width:410px)");
   const {
@@ -792,7 +793,8 @@ function Classroom({
       reportFilters: reportFilters,
       filter: filter,
       handleFilterChange: handleFilterChange,
-      submissions: submissionsTableData
+      submissions: submissionsTableData,
+      featureFlags: featureFlags
     }))
   }, ...(isVideoChatEnabled && isNualangLiveEnabled && (isMember && isVideoChatEnabledInSettings || isCreator) ? [{
     label: t("discuss"),
@@ -853,7 +855,8 @@ function Classroom({
       getRecordings: getRecordings,
       selectedRecording: selectedRecording,
       setSelectedRecording: setSelectedRecording,
-      meetingRecsData: meetingRecsData
+      meetingRecsData: meetingRecsData,
+      hasBadLanguage: hasBadLanguage
     }))), discussions?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       id: "discussScheduled"
     }, /*#__PURE__*/_react.default.createElement(_ScheduleListCards.default, {

package/dist/Tables/Progress/Progress.js

@@ -146,7 +146,8 @@ function Progress({
   filter,
   handleFilterChange,
   submissions,
-  courseIds
+  courseIds,
+  featureFlags
 }) {
   const theme = (0, _styles.useTheme)();
   const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
@@ -476,7 +477,8 @@ function Progress({
     filter: filter,
     roleplays: roleplays,
     bots: bots,
-    courseIds: courseIds
+    courseIds: courseIds,
+    featureFlags: featureFlags
   }));
 }
 var _default = exports.default = Progress;

package/dist/Tables/Progress/ProgressTable.js

@@ -515,7 +515,8 @@ function TableRow({
   roleplays,
   bots,
   index,
-  courseIds
+  courseIds,
+  featureFlags
 }) {
   const {
     memberId
@@ -572,7 +573,16 @@ function TableRow({
     sx: {
       fontWeight: "bold"
     }
-  }, member.username), /*#__PURE__*/_react.default.createElement(_DefaultColourButton.default, {
+  }, featureFlags.heritageSpeakers && member.isHeritageSpeaker ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  }, member.username, /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    label: t("heritage_speaker"),
+    size: "small",
+    variant: "outlined",
+    color: "primary"
+  })) : member.username), /*#__PURE__*/_react.default.createElement(_DefaultColourButton.default, {
     startIcon: /*#__PURE__*/_react.default.createElement(_Timeline.default, null),
     size: "small",
     component: _reactRouterDom.Link,
@@ -695,7 +705,8 @@ function ProgressTable({
   hideSorting,
   roleplays,
   bots,
-  courseIds
+  courseIds,
+  featureFlags
 }) {
   const exercisesArray = ["translation", "listening", "pronunciation"];
   const roleplayGames = ["story", "fill_in_blanks", "act_it_out", "act_it_out_listening", "act_it_out_speaking", "act_it_out_listening_speaking"];
@@ -1080,7 +1091,8 @@ function ProgressTable({
     roleplays: roleplays,
     bots: bots,
     index: i,
-    courseIds: courseIds
+    courseIds: courseIds,
+    featureFlags: featureFlags
   })))));
 }
 var _default = exports.default = ProgressTable;

package/dist/Tables/RecordingListCards/RecordingListCards.js

@@ -32,6 +32,7 @@ const RecordingListCards = (0, _mui.withStyles)(({
   selectedRecording,
   handleGradeConversation,
   aiGrade,
+  hasBadLanguage,
   t = text => text,
   isTeacher = false,
   attendeesData = []
@@ -109,7 +110,8 @@ const RecordingListCards = (0, _mui.withStyles)(({
     getMeeting: getMeeting,
     conversation: conversation,
     handleGradeConversation: handleGradeConversation,
-    aiGrade: aiGrade
+    aiGrade: aiGrade,
+    hasBadLanguage: hasBadLanguage
   }), /*#__PURE__*/_react.default.createElement(_FeedbackInfoDialog.default, {
     t: t,
     attendees: attendeeUsernames,

package/dist/Tables/SubmissionsTableCards/SubmissionsTableCards.js

@@ -34,6 +34,7 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
   saveTranscript = () => {},
   getMeeting = () => {},
   meetingRecsData,
+  hasBadLanguage,
   resetVideoState = () => {},
   t = text => text
 }) => {
@@ -128,7 +129,8 @@ const SubmissionsTableCards = (0, _mui.withStyles)(({
     recordingsTableData: groupedData[groupedId],
     handleGradeConversation: handleGradeConversation,
     aiGrade: aiGrade,
-    playerRef: playerRef
+    playerRef: playerRef,
+    hasBadLanguage: hasBadLanguage
   }))), /*#__PURE__*/_react.default.createElement(_material.List, null, uniqueGroups.slice(0, cardsToShow).map((discussion, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Card, {
     "aria-label": `View Created Recording: ${discussion}`,
     key: i,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1192",
+  "version": "0.1.1194",
   "main": "dist/index.js",
   "files": [
     "dist",