@nualang/nualang-ui-components 0.1.1190 → 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/Dialogs/InviteDialog/InviteDialog.js

@@ -219,9 +219,9 @@ function InviteDialog({
     component: "b",
     fontWeight: "bold",
     color: "primary"
-  }, "Practice more with ", /*#__PURE__*/_react.default.createElement(NualangLogo, {
+  }, "Go to ", /*#__PURE__*/_react.default.createElement(NualangLogo, {
     src: _nualangLogoPrimary.default
-  })), " ", "via the ", /*#__PURE__*/_react.default.createElement("b", null, "Learning Site"), ".")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, teachClassroomsState.length > 0 && /*#__PURE__*/_react.default.createElement(_material.Tabs, {
+  }), " classroom"), " ", "via the ", /*#__PURE__*/_react.default.createElement("b", null, "Learning Site"), ".")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, teachClassroomsState.length > 0 && /*#__PURE__*/_react.default.createElement(_material.Tabs, {
     value: tabValue,
     onChange: handleChangeTab,
     sx: {

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")

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/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 = {};