@nualang/nualang-ui-components 0.1.1189 → 0.1.1191

package/dist/Chat/Chat.js

@@ -49,6 +49,7 @@ function Chat({
   moveScriptItem,
   handleRemoveMessage,
   learnLang,
+  voice,
   forLang,
   isPrimaryColor = false,
   handleKeyPress,
@@ -122,6 +123,7 @@ function Chat({
     speak: speak,
     stopSpeaking: stopSpeaking,
     learnLang: learnLang,
+    voice: voice,
     forLang: forLang,
     voiceSpeed: voiceSpeed,
     handleEditMessage: handleEditMessage,

package/dist/Chat/Messages/Messages.js

@@ -60,6 +60,7 @@ function Messages({
   answerCounts,
   noAnswerCounts,
   moveScriptItem,
+  voice,
   ...otherProps
 }) {
   const {
@@ -175,6 +176,7 @@ function Messages({
       disableTranslation: disableTranslation,
       messageIndex: i,
       voiceSpeed: voiceSpeed,
+      voice: voice,
       messageCount: messages.length,
       isSpeaking: isSpeaking,
       isSpeakingTextContainer: isSpeakingTextContainer,
@@ -217,6 +219,7 @@ function Messages({
       disableTranslation: disableTranslation,
       messageIndex: i,
       voiceSpeed: voiceSpeed,
+      voice: voice,
       messageCount: messages.length,
       isSpeaking: isSpeaking,
       isSpeakingTextContainer: isSpeakingTextContainer,

package/dist/Containers/App/App.js

@@ -138,7 +138,9 @@ function AppSearch({
       setPrevDebouncedSearchText(debouncedSearchText);
     }
   }, [debouncedSearchText, handleSearchContent]);
-  return /*#__PURE__*/_react.default.createElement(Search, null, /*#__PURE__*/_react.default.createElement(SearchIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(StyledInputBase, {
+  return /*#__PURE__*/_react.default.createElement(Search, {
+    id: 'appbar-search'
+  }, /*#__PURE__*/_react.default.createElement(SearchIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(StyledInputBase, {
     autoFocus: true,
     placeholder: t("app_search_placeholder"),
     value: searchText,
@@ -339,7 +341,8 @@ function App({
     onClick: handleClickCreate,
     "data-cy": "appbar-create-button",
     startIcon: /*#__PURE__*/_react.default.createElement(_Add.default, null),
-    color: "secondary"
+    color: "secondary",
+    id: 'appbar-create-button'
   }, t("create")) : /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t("create"),
     enterDelay: 300

package/dist/Dialogs/ExerciseMenu/Menus/CloseExercise/CloseExercise.js

@@ -23,18 +23,21 @@ function CloseExerciseMenu({
     open: open,
     handleClose: close,
     actions: [{
+      dataCypress: "finish_exercise",
       text: t("finish_exercise"),
       variant: "contained",
       color: "primary",
       onClick: finishExercise,
       disabled: isFinishExerciseDisabled
     }, {
+      dataCypress: "save_progress",
       text: t("save_progress"),
       variant: "outlined",
       color: "primary",
       onClick: saveProgress,
       disabled: isSpeaking
     }, {
+      dataCypress: "go_back_to_topic",
       text: inTopic ? t("go_back_to_topic") : t("quit"),
       variant: "",
       color: "",

package/dist/Dialogs/UploadPhrases/UploadPhrases.js

@@ -87,6 +87,22 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
     paddingRight: `env(safe-area-inset-right)`
   }
 }));
+function parsePhraseWithAlternatives(phraseString) {
+  const parts = phraseString.split("|").map(p => p.trim());
+  return {
+    primary: parts[0],
+    alternatives: parts.slice(1).filter(p => p && p.length > 0)
+  };
+}
+
+/**
+ * Processes CSV data with the following format:
+ * - phrase: Primary phrase with optional alternatives separated by '|'
+ *   Example: "Hello|Hi|Hey"
+ * - translations: Multiple translations separated by '|'
+ * - image: Optional image URL
+ */
+
 function UploadPhrases({
   t = text => text,
   open,
@@ -136,9 +152,14 @@ function UploadPhrases({
         if (data.phrase && data.translations) {
           setisError(false);
           setErrorMessage("");
+          const {
+            primary,
+            alternatives
+          } = parsePhraseWithAlternatives(data.phrase);
           const formattedTranslations = data.translations.split("|").map(t => t.trim());
           return {
-            phrase: data.phrase.trim(),
+            phrase: primary,
+            alternativeVersions: alternatives,
             translations: formattedTranslations,
             image: data.image ? data.image.trim() : "",
             voices: [],

package/dist/Editors/Bot/Bot.js

@@ -182,6 +182,9 @@ function Bot({
   const tabVariant = isSmallScreen ? "fullWidth" : null;
   const [tabValue, setTabValue] = (0, _react.useState)(0);
   const [simplified, setSimplified] = (0, _react.useState)(initialValues.editorMode === "advanced" ? false : true);
+  const {
+    voice
+  } = bot;
   const joyrideSteps = [{
     content: /*#__PURE__*/_react.default.createElement("h2", null, t("bot_editor_welcome")),
     placement: "center",
@@ -549,7 +552,8 @@ function Bot({
     speak: speak,
     stopSpeaking: stopSpeaking,
     isSpeaking: isSpeaking,
-    isSpeakingTextContainer: isSpeakingTextContainer
+    isSpeakingTextContainer: isSpeakingTextContainer,
+    voice: voice
   });
   const tabs = [{
     label: t("editor")
@@ -702,9 +706,8 @@ function Bot({
     open: creatorInstructionsDialogOpen,
     handleClose: handleCloseCreatorInstructions,
     dialogTitle: t("instruction_message")
-  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default
-  // children={bot.creatorInstructions}
-  , {
+  }, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
+    children: bot.creatorInstructions,
     className: "content"
   })), /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: isHelpOpen,

package/dist/Editors/Bot/Editor/BotDesigner/VarList.js

@@ -25,7 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const markdownLinkRegex = /\[(.*)\]\(([^ ]+?)( "(.+)")?\)/;
 const markdownImageLinkRegex = /!\[(.*)\]\(([^ ]+?)( "(.+)")?\)/;
 const multipleOptionsRegex = /^\((.*)\)$/;
-const DEFAULT_BOT_IMAGE = `https://api.imagecreator.fathominnovation.com/640/310/8300a1/ffffff/fa-image`;
+const DEFAULT_BOT_IMAGE = `${process.env.REACT_APP_API}/image-creator/848/480/691f89/ffffff/fa-images?fontSize=200`;
 function VarListItem({
   t,
   classes,
@@ -79,7 +79,7 @@ function VarListItem({
         handleUpdateVariable({
           target: {
             name: varName,
-            value: DEFAULT_BOT_IMAGE
+            value: `![](${DEFAULT_BOT_IMAGE})`
           }
         });
       }

package/dist/Editors/Phrases/Phrases.js

@@ -243,15 +243,15 @@ function PhrasesEditor(props) {
     return rowEmpty;
   };
   const formatRowsToPhrases = rows => {
-    const filtered = rows.filter(r => !isRowEmpty(r));
-    return filtered.map((r, index) => {
-      const newRow = {
+    return rows.filter(r => !isRowEmpty(r)).map(r => {
+      const newAlternatives = r.phrase.includes("|") ? r.phrase.split("|").slice(1).map(a => a.trim()).filter(Boolean) : [];
+      const updatedAlternativeVersions = [...(r.alternativeVersions || []), ...newAlternatives.filter(alt => !r.alternativeVersions?.map(v => v.toLowerCase()).includes(alt.toLowerCase()))];
+      return {
         ...r,
-        idx: index,
-        translations: r.translations.split("|").map(t => t.trim())
+        phrase: r.phrase.split("|")[0].trim() || '',
+        alternativeVersions: updatedAlternativeVersions,
+        translations: (r.translations || '').split("|").map(t => t.trim()).filter(Boolean)
       };
-      delete newRow.id;
-      return newRow;
     });
   };
 
@@ -311,8 +311,10 @@ function PhrasesEditor(props) {
     value: (row, {
       focus
     }) => {
+      const phraseDisplay = [row.phrase || '', ...(row.alternativeVersions || [])].filter(Boolean).join(" | ");
       return /*#__PURE__*/_react.default.createElement(_reactSpreadsheetGrid.Input, {
-        value: row.phrase,
+        value: phraseDisplay,
+        placeholder: t("enter_phrase_with_alternatives"),
         focus: focus,
         onChange: onFieldChange(row.id, "phrase")
       });
@@ -393,27 +395,29 @@ function PhrasesEditor(props) {
   };
   const handleScriptDownload = () => {
     try {
+      const formattedRows = rows.map(row => ({
+        ...row,
+        phrase: [row.phrase || '', ...(row.alternativeVersions || [])].filter(Boolean).join(" | ")
+      }));
       const parser = new _plainjs.Parser({
         fields: ["phrase", "translations", "image"],
         defaultValue: ""
       });
-      const csv = parser.parse(rows);
+      const csv = parser.parse(formattedRows);
       const element = document.createElement("a");
-      const file = new Blob([csv.replace(",,", "").trim()], {
+      const file = new Blob([csv], {
         type: "text/plain"
       });
       element.href = URL.createObjectURL(file);
-      const date = new Date();
-      const dayOfDownload = date.getDate();
-      const monthOfDownload = date.getMonth() + 1;
-      const yearOfDownload = date.getFullYear();
-      const formattedDate = `${dayOfDownload}-${monthOfDownload}-${yearOfDownload}`;
-      element.download = `${topicName}-${formattedDate}.csv`;
-      document.body.appendChild(element); // Required for this to work in Firefox
+      element.download = `${topicName}-${new Date().toLocaleDateString()}.csv`;
+      document.body.appendChild(element);
       element.click();
+      // Cleanup
+      document.body.removeChild(element);
+      URL.revokeObjectURL(element.href);
     } catch (err) {
       console.error(err);
-      alert("There was a problem downloading");
+      alert(t("download_error"));
     }
   };
   const handleModeSelection = (event, mode) => {

package/dist/Exercises/Listener/Listener.js

@@ -848,14 +848,16 @@ function Listener({
     handleSubmit: () => handleContinue(false),
     handleSkip: () => handleContinue(true),
     isSubmitAnswerAllowed: true,
-    isSubmitAnswerDisabled: !isWordBankAttemptChanged || !listeningWords || listeningWords.length === 0
+    isSubmitAnswerDisabled: !isWordBankAttemptChanged || !listeningWords || listeningWords.length === 0,
+    useWordBank: useWordBank
   }) : /*#__PURE__*/_react.default.createElement(_ExerciseBottomBar.default, {
     t: t,
     listeningWords: listeningWords,
     handleSubmit: () => handleContinue(false),
     handleSkip: () => handleContinue(true),
     isSubmitAnswerAllowed: true,
-    isSubmitAnswerDisabled: !listeningText && (!listeningWords || listeningWords.length === 0)
+    isSubmitAnswerDisabled: !listeningText && (!listeningWords || listeningWords.length === 0),
+    useWordBank: useWordBank
   }), /*#__PURE__*/_react.default.createElement(_CompletedExcercise.default, {
     open: isCompletionModalOpen,
     restartExcercise: handleRestartExercise,

package/dist/Exercises/Translator/Translator.js

@@ -826,14 +826,16 @@ function Translator({
     handleSubmit: () => handleContinue(false),
     handleSkip: () => handleContinue(true),
     isSubmitAnswerAllowed: true,
-    isSubmitAnswerDisabled: !isWordBankAttemptChanged || !translationWords || translationWords.length === 0
+    isSubmitAnswerDisabled: !isWordBankAttemptChanged || !translationWords || translationWords.length === 0,
+    useWordBank: useWordBank
   }) : /*#__PURE__*/_react.default.createElement(_ExerciseBottomBar.default, {
     t: t,
     translationWords: translationWords,
     handleSubmit: () => handleContinue(false),
     handleSkip: () => handleContinue(true),
     isSubmitAnswerAllowed: true,
-    isSubmitAnswerDisabled: !translationText && (!translationWords || translationWords.length === 0)
+    isSubmitAnswerDisabled: !translationText && (!translationWords || translationWords.length === 0),
+    useWordBank: useWordBank
   }), /*#__PURE__*/_react.default.createElement(_AnswerResult.default, _extends({
     t: t,
     open: isCorrectResultOpen,

package/dist/Forms/ChipInput/ChipInput.js

@@ -36,8 +36,9 @@ function ChipInput(props) {
   return /*#__PURE__*/_react.default.createElement(_CustomChipInput.default, _extends({
     label: label
   }, props, {
-    onAdd: chip => handleAddChip(chip),
-    onDelete: chip => deleteChip(chip)
+    onAdd: handleAddChip,
+    onDelete: deleteChip,
+    delimiter: delimiter
   }));
 }
 var _default = exports.default = ChipInput;

package/dist/Forms/FeedbackForm/FeedbackForm.js

@@ -269,13 +269,17 @@ function FeedbackForm({
   }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     key: attendee?.memberId,
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    sx: {
+      marginBottom: 1,
+      marginTop: 1
+    }
   }, index !== 0 && /*#__PURE__*/_react.default.createElement(_material.Avatar, {
     alt: attendee,
     src: attendee.userImage,
     sx: {
-      width: 24,
-      height: 24,
+      width: 40,
+      height: 40,
       marginRight: "8px"
     }
   }), attendee.username, index === 0 &&

package/dist/Forms/FeedbackInfo/FeedbackInfo.js

@@ -6,7 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = FeedbackInfo;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
+var _theme = require("../../../../.storybook/theme");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getModeConditionalBackground = (dark, light) => theme => ({
+  backgroundColor: theme.palette.mode === "dark" ? dark // Using MUI's palette
+  : light,
+  padding: 2
+});
 function FeedbackInfo({
   values = {
     feedback1: [{
@@ -79,10 +85,7 @@ function FeedbackInfo({
   }, gradingOption)))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#f0f0f0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#424242", "#f0f0f0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4
@@ -98,10 +101,7 @@ function FeedbackInfo({
   }, feedback1.length > 0 ? feedback1[0]?.feedbackLevelName : "-"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#e0e0e0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#303030", "#e0e0e0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4
@@ -117,10 +117,7 @@ function FeedbackInfo({
   }, feedback2.length > 0 ? feedback2[0]?.feedbackLevelName : "-"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#f0f0f0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#424242", "#f0f0f0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4
@@ -136,10 +133,7 @@ function FeedbackInfo({
   }, feedback3.length > 0 ? feedback3[0]?.feedbackLevelName : "-"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#e0e0e0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#303030", "#e0e0e0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4
@@ -155,10 +149,7 @@ function FeedbackInfo({
   }, feedback4.length > 0 ? feedback4[0]?.feedbackLevelName : "-"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#f0f0f0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#424242", "#f0f0f0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4
@@ -174,10 +165,7 @@ function FeedbackInfo({
   }, feedback5.length > 0 ? feedback5[0]?.feedbackLevelName : "-"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#e0e0e0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#303030", "#e0e0e0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4
@@ -193,10 +181,7 @@ function FeedbackInfo({
   }, feedback6.length > 0 ? feedback6[0]?.feedbackLevelName : "-"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     alignItems: "flex-start",
-    sx: {
-      backgroundColor: "#f0f0f0",
-      padding: 2
-    }
+    sx: getModeConditionalBackground("#424242", "#f0f0f0")
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 4

package/dist/Forms/InputHelper/InputHelper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Adornment = Adornment;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Input = _interopRequireDefault(require("@mui/material/Input"));
 var _OutlinedInput = _interopRequireDefault(require("@mui/material/OutlinedInput"));
@@ -19,8 +20,7 @@ var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _reactFeather = require("react-feather");
-var _react2 = _interopRequireDefault(require("@emoji-mart/react"));
-var _apple = _interopRequireDefault(require("@emoji-mart/data/sets/14/apple.json"));
+var _emojiPickerReact = _interopRequireDefault(require("emoji-picker-react"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 var _index = require("../../utils/index");
 var _colors = require("@mui/material/colors");
@@ -50,6 +50,7 @@ function Adornment(props) {
     setIsDisabled,
     setIsButtonClicked
   } = props;
+  const theme = (0, _styles.useTheme)();
   const isEnglish = learnLang === "english";
   const isSmallScreen = (0, _useMediaQuery.default)("(max-width:420px)");
   const {
@@ -85,18 +86,17 @@ function Adornment(props) {
       }
     });
   };
-  const addEmoji = emoji => {
-    handleEmojiClose();
-    const newText = [value.slice(0, selectionStart), `${emoji.native}`, value.slice(selectionStart)].join("");
+  const handleEmojiClose = () => {
+    setShowEmojiPicker(false);
+  };
+  const onEmojiClick = event => {
+    const newText = [value.slice(0, selectionStart), `${event.emoji}`, value.slice(selectionStart)].join("");
     onChange({
       target: {
         name: name,
         value: newText
       }
     });
-  };
-  const handleEmojiClose = () => {
-    setIsDisabled(true);
     setShowEmojiPicker(false);
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
@@ -104,11 +104,12 @@ function Adornment(props) {
   }, emoji && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.default, {
     open: showEmojiPicker,
     onClose: handleEmojiClose
-  }, /*#__PURE__*/_react.default.createElement(_react2.default, {
-    set: "apple",
-    onEmojiSelect: addEmoji,
-    data: _apple.default,
-    perLine: isSmallScreen ? 6 : 9
+  }, /*#__PURE__*/_react.default.createElement(_emojiPickerReact.default, {
+    pickerStyle: {
+      width: "100%"
+    },
+    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, {

package/dist/Forms/Settings/Tabs/General/General.js

@@ -15,6 +15,7 @@ var _index = require("../../../../utils/index");
 var _NualangVerifiedIcon = _interopRequireDefault(require("../../../../Misc/NualangVerifiedIcon/NualangVerifiedIcon"));
 var _MedalSelector = _interopRequireDefault(require("../../../../Misc/MedalSelector/MedalSelector"));
 var _AvatarDialog = _interopRequireDefault(require("../../../../Dialogs/AvatarDialog/AvatarDialog"));
+var _useConfirm = _interopRequireDefault(require("../../../../hooks/useConfirm"));
 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; }
@@ -258,6 +259,7 @@ function General({
   const [isPictureDialogOpen, setIsPictureDialogOpen] = (0, _react.useState)(false);
   const isGeneratedEmail = (0, _index.checkIsGeneratedEmail)(email);
   const [avatarOptionClicked, setAvatarOptionClicked] = (0, _react.useState)(false);
+  const [confirm] = (0, _useConfirm.default)(t);
   const generalFormInitialValues = {
     preferred_username,
     email,
@@ -388,10 +390,13 @@ function General({
       disabled: values.picture === "" || isSubmitting,
       component: "span",
       variant: "contained",
-      onClick: () => {
-        otherProps.setFieldValue("picture", "");
-        otherProps.setFieldValue("avatar", {});
-        submitForm();
+      onClick: async () => {
+        const confirmed = await confirm(t("delete_picture"), `${t("delete_picture_confirmation")}`);
+        if (confirmed) {
+          otherProps.setFieldValue("picture", "");
+          otherProps.setFieldValue("avatar", {});
+          submitForm();
+        }
       }
     }, t("delete_picture")))), /*#__PURE__*/_react.default.createElement(_AvatarDialog.default, {
       t: t,

package/dist/Lists/Members/Members.js

@@ -108,7 +108,16 @@ function Member(props) {
   }, /*#__PURE__*/_react.default.createElement(_Person.default, {
     fontSize: "large"
   }))), /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
-    primary: featureFlags.heritageSpeakers && member.isHeritageSpeaker ? `${member.username} (${t("heritage_speaker")})` : member.username,
+    primary: featureFlags.heritageSpeakers && member.isHeritageSpeaker ? /*#__PURE__*/_react.default.createElement(_material.Box, {
+      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,
     secondary: `Joined ${_luxon.DateTime.fromMillis(member.createdAt).toRelative()}`
   }), /*#__PURE__*/_react.default.createElement(_material.Box, {
     className: classes.actionsWrapper

package/dist/Live/LiveListener/LiveListener.js

@@ -552,7 +552,8 @@ function LiveListener({
     listeningText: listeningText,
     listeningWords: listeningWords,
     setCurrentAnswer: setCurrentAnswer,
-    exercise: exercise
+    exercise: exercise,
+    useWordBank: useWordBank
   })));
 }
 LiveListener.propTypes = {};

package/dist/Live/LiveTranslator/LiveTranslator.js

@@ -666,7 +666,8 @@ function LiveTranslator({
     translationText: translationText,
     translationWords: translationWords,
     setCurrentAnswer: setCurrentAnswer,
-    exercise: exercise
+    exercise: exercise,
+    useWordBank: useWordBank
   })));
 }
 LiveTranslator.propTypes = {};