@nualang/nualang-ui-components 0.1.1245 → 0.1.1248

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -366,7 +366,7 @@ function AssignmentRoleplaySelection({
   lastClickedExerciseId
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
-  const filteredCompletions = memberCourseCompletions.filter(completion => completion.courseSectionTopicId === courseSectionTopicId);
+  const filteredCompletions = Array.isArray(memberCourseCompletions) && memberCourseCompletions.length > 0 ? memberCourseCompletions.filter(completion => completion.courseSectionTopicId === courseSectionTopicId) : [];
   return roleplays.map(roleplay => /*#__PURE__*/(0, _jsxRuntime.jsx)(Roleplay, {
     roleplay: roleplay,
     isRoleplaySelected: isRoleplaySelected,

package/dist/Exercises/Listener/Listener.js

@@ -42,7 +42,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   appBar: {
-    position: "sticky",
+    position: "relative",
     paddingTop: `env(safe-area-inset-top)`,
     paddingRight: `env(safe-area-inset-right)`,
     paddingLeft: `env(safe-area-inset-left)`
@@ -244,6 +244,7 @@ function Listener({
   const {
     classes
   } = useStyles();
+  const scrollRef = (0, _react.useRef)(null);
   const [wordBankTooltipOpen, setWordBankTooltipOpen] = (0, _react.useState)(false);
   const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
   const exerciseState = (0, _useExerciseState.default)({
@@ -470,6 +471,14 @@ function Listener({
   (0, _react.useEffect)(() => {
     assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
   }, [assignment]);
+  (0, _react.useEffect)(() => {
+    if (scrollRef.current && useWordBank) {
+      scrollRef.current.scroll({
+        top: scrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [useWordBank]);
   (0, _react.useEffect)(() => {
     if (open && !run && !localStorage.getItem(`listening-exercise-tour-completed`)) {
       setJoyrideState(prevState => ({
@@ -535,6 +544,9 @@ function Listener({
   const goBackToAssignment = () => {
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
+  const noListeningWords = !listeningWords || listeningWords.length === 0;
+  const isWordBankMode = useWordBank && isWordBankEnabled;
+  const isSubmitAnswerDisabled = isWordBankMode ? !isWordBankAttemptChanged || noListeningWords : !listeningText && noListeningWords;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -644,9 +656,13 @@ function Listener({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: scrollRef,
       sx: {
+        overflowY: 'auto',
         flexGrow: 1,
-        overflowY: 'auto'
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
@@ -927,38 +943,13 @@ function Listener({
       exercise: exerciseName,
       languageInformation: languageInformation,
       nualaCelebratingImage: getNualaCelebratingImage()
-    }), useWordBank && isWordBankEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        listeningWords: listeningWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !isWordBankAttemptChanged || !listeningWords || listeningWords.length === 0,
-        useWordBank: useWordBank
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        listeningWords: listeningWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !listeningText && (!listeningWords || listeningWords.length === 0),
-        useWordBank: useWordBank
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
+      t: t,
+      listeningWords: listeningWords,
+      handleSubmit: () => handleContinue(false),
+      handleSkip: () => handleContinue(true),
+      isSubmitAnswerAllowed: true,
+      isSubmitAnswerDisabled: isSubmitAnswerDisabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompletedExcercise.default, {
       open: isCompletionModalOpen,
       restartExcercise: handleRestartExercise,

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -176,6 +176,7 @@ function Pronouncer({
     classes,
     cx
   } = useStyles();
+  const scrollRef = (0, _react.useRef)(null);
   const [viewMoreTranslations, setViewMoreTranslations] = (0, _react.useState)(false);
   const [currentPhraseText, setCurrentPhraseText] = (0, _react.useState)("");
   const {
@@ -222,6 +223,12 @@ function Pronouncer({
   }, [open, recognizing, finalTranscript]);
   (0, _react.useEffect)(() => {
     let timer;
+    if (scrollRef.current && (interimTranscript || finalTranscript)) {
+      scrollRef.current.scroll({
+        top: scrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
     if (recognizing && interimTranscript === "" && finalTranscript === "") {
       // Set a timer to stop listening if no audio is detected after 10 seconds
       timer = setTimeout(() => {
@@ -479,6 +486,13 @@ function Pronouncer({
     onClose: handleClose,
     TransitionComponent: Transition,
     "aria-labelledby": "pronunciation-exercise-dialog",
+    PaperProps: {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.AppBar, {
       className: classes.appBar,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Toolbar, {
@@ -574,240 +588,250 @@ function Pronouncer({
           exercise: "Pronunciation"
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-      container: true,
-      className: classes.root,
-      direction: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      spacing: 2,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: scrollRef,
       sx: {
-        maxWidth: "lg",
-        mx: "auto"
+        overflowY: 'auto',
+        flexGrow: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
-      component: "main",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-          title: t("pronounce_this_phrase"),
-          placement: "top",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "h6",
-            component: "h2",
-            color: "inherit",
-            children: t("pronounce_this_phrase", {
-              lng: languageTag
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+        container: true,
+        className: classes.root,
+        direction: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        spacing: 2,
+        sx: {
+          maxWidth: "lg",
+          mx: "auto"
+        },
+        component: "main",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("pronounce_this_phrase"),
+            placement: "top",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h6",
+              component: "h2",
+              color: "inherit",
+              children: t("pronounce_this_phrase", {
+                lng: languageTag
+              })
             })
           })
-        })
-      }), image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          sx: {
-            textAlign: "center",
-            mx: "auto"
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: image,
-            className: classes.image,
-            alt: ""
-          })
-        })
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-          container: true,
-          direction: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          spacing: "1",
-          children: [question && question.pronunciations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              variant: "body1",
-              color: "textSecondary",
-              gutterBottom: true,
-              children: question && question.pronunciations[0]
+        }), image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              textAlign: "center",
+              mx: "auto"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: image,
+              className: classes.image,
+              alt: ""
             })
-          }), question && question.pronunciations && question.pronunciations[1] && !viewMoreTranslations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: t("see_more_pronunciations"),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+            container: true,
+            direction: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            spacing: "1",
+            children: [question && question.pronunciations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "body1",
                 color: "textSecondary",
-                edge: "end",
-                size: "small",
-                onClick: () => handleMoreTranslations(),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {})
+                gutterBottom: true,
+                children: question && question.pronunciations[0]
               })
-            })
-          }), viewMoreTranslations && question.pronunciations && question.pronunciations[1] && question.pronunciations.map((t, index) => {
-            if (index === 0) {
-              return null;
-            } else {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-                  variant: "body1",
+            }), question && question.pronunciations && question.pronunciations[1] && !viewMoreTranslations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: t("see_more_pronunciations"),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
                   color: "textSecondary",
-                  gutterBottom: true,
-                  children: ["| ", t]
+                  edge: "end",
+                  size: "small",
+                  onClick: () => handleMoreTranslations(),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {})
                 })
-              });
-            }
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          container: true,
-          spacing: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "row",
-              spacing: "5px"
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-              sx: {
-                display: "flex",
-                justifyContent: "center"
-              },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                src: getVoiceImage(),
-                className: classes.nualaSpeaking,
-                alt: ""
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            }), viewMoreTranslations && question.pronunciations && question.pronunciations[1] && question.pronunciations.map((t, index) => {
+              if (index === 0) {
+                return null;
+              } else {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+                    variant: "body1",
+                    color: "textSecondary",
+                    gutterBottom: true,
+                    children: ["| ", t]
+                  })
+                });
+              }
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+            container: true,
+            spacing: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               sx: {
-                display: "grid",
-                justifyContent: "flex-end",
-                marginLeft: 1
+                display: "flex",
+                justifyContent: "center",
+                flexDirection: "row",
+                spacing: "5px"
               },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatBubble.default, {
-                id: "currentPhrase",
-                handleTranslate: handleTranslate,
-                handleSpeak: handleSpeak,
-                clearQueue: clearQueue,
-                stopAudio: stopAudio,
-                learnLang: learnLang,
-                voice: voice || null,
-                voicePitch: voicePitch || null,
-                voiceSpeed: voiceSpeed,
-                forLang: forLang,
-                wordList: currentPhrase ? (0, _utils.removeExtraWhiteSpaces)(currentPhrase.phrase).split(" ") : [],
-                disableTranslation: false,
-                isMessage: false,
-                muteSound: muteSound,
-                t: t
-              }), learnLang !== "irish" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WaveFormLite.default, {
-                  src: pollyResult ? pollyResult : "",
-                  controls: false,
-                  isSpeaking: isSpeaking,
-                  recognizing: recognizing,
-                  muteAudio: true,
-                  handleSpeak: () => {
-                    speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-                  },
-                  theme: theme
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center"
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: getVoiceImage(),
+                  className: classes.nualaSpeaking,
+                  alt: ""
                 })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                  display: "grid",
+                  justifyContent: "flex-end",
+                  marginLeft: 1
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatBubble.default, {
+                  id: "currentPhrase",
+                  handleTranslate: handleTranslate,
+                  handleSpeak: handleSpeak,
+                  clearQueue: clearQueue,
+                  stopAudio: stopAudio,
+                  learnLang: learnLang,
+                  voice: voice || null,
+                  voicePitch: voicePitch || null,
+                  voiceSpeed: voiceSpeed,
+                  forLang: forLang,
+                  wordList: currentPhrase ? (0, _utils.removeExtraWhiteSpaces)(currentPhrase.phrase).split(" ") : [],
+                  disableTranslation: false,
+                  isMessage: false,
+                  muteSound: muteSound,
+                  t: t
+                }), learnLang !== "irish" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WaveFormLite.default, {
+                    src: pollyResult ? pollyResult : "",
+                    controls: false,
+                    isSpeaking: isSpeaking,
+                    recognizing: recognizing,
+                    muteAudio: true,
+                    handleSpeak: () => {
+                      speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
+                    },
+                    theme: theme
+                  })
+                })]
               })]
-            })]
+            })
           })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        sx: {
-          marginTop: 1
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-          sx: theme => ({
-            [theme.breakpoints.down("md")]: {
-              height: "50px",
-              width: "200px",
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          sx: {
+            marginTop: 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            sx: theme => ({
+              [theme.breakpoints.down("md")]: {
+                height: "50px",
+                width: "200px",
+                color: "white",
+                padding: 2,
+                fontSize: "16px",
+                borderRadius: 3
+              },
+              height: "70px",
+              width: "250px",
               color: "white",
-              padding: 2,
-              fontSize: "16px",
-              borderRadius: 3
+              backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
+              padding: 1,
+              fontSize: "20px",
+              borderRadius: 5,
+              border: "1.5px solid transparent",
+              "&:hover": {
+                backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
+                border: "1.5px solid black"
+              }
+            }),
+            onClick: () => handleMic(currentPhrase ? currentPhrase.phrase : ""),
+            startIcon: recognizing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MicOff.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Mic.default, {}),
+            color: recognizing ? "error" : "success",
+            disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
+            id: "voiceInput",
+            variant: "contained",
+            ref: btnRef,
+            children: recognizing ? t("click_to_stop") : t("click_to_start")
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            role: "status",
+            sx: {
+              mt: isListeningIndicatorTextVisible ? 3 : 0
             },
-            height: "70px",
-            width: "250px",
-            color: "white",
-            backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
-            padding: 1,
+            textAlign: "center",
+            fontWeight: "bolder",
             fontSize: "20px",
-            borderRadius: 5,
-            border: "1.5px solid transparent",
-            "&:hover": {
-              backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
-              border: "1.5px solid black"
-            }
-          }),
-          onClick: () => handleMic(currentPhrase ? currentPhrase.phrase : ""),
-          startIcon: recognizing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MicOff.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Mic.default, {}),
-          color: recognizing ? "error" : "success",
-          disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
-          id: "voiceInput",
-          variant: "contained",
-          ref: btnRef,
-          children: recognizing ? t("click_to_stop") : t("click_to_start")
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          role: "status",
-          sx: {
-            mt: isListeningIndicatorTextVisible ? 3 : 0
-          },
-          textAlign: "center",
-          fontWeight: "bolder",
-          fontSize: "20px",
-          "aria-label": "Mic is",
-          "aria-live": "polite",
-          children: isListeningIndicatorTextVisible ? t("listening_indicator") : ""
-        })
-      }), finalTranscript || interimTranscript ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-        alignItems: "center",
-        className: classes.setWidth,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: `Confidence: ${((transcriptConfidence || 0) * 100).toFixed(0)}%`
-          }),
-          open: isConfidenceOpen,
-          onClose: handleCloseConfidence,
-          onOpen: handleOpenConfidence,
-          role: "status",
-          "aria-live": "assertive",
-          "aria-label": `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: (finalTranscript || interimTranscript).split(" ").map((word, i) => {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                className: classes.finalTranscript,
-                variant: "h5",
-                color: phraseWordList[i] && checkIsPronunciationCorrect(word.trim(), {
-                  phrase: phraseWordList[i].trim(),
-                  alternativeVersions: currentPhrase.alternativeVersions ? currentPhrase.alternativeVersions.map(altAns => {
-                    return altAns ? (0, _utils.removeExtraWhiteSpaces)(altAns).split(" ")[i] : "";
-                  }) : []
-                }) ? "secondary" : "",
-                component: "span",
-                children: word
-              });
-            })
+            "aria-label": "Mic is",
+            "aria-live": "polite",
+            children: isListeningIndicatorTextVisible ? t("listening_indicator") : ""
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-          onClick: handleReset,
-          size: "small",
-          className: classes.listenButton,
-          "aria-label": "Clear",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
-            className: cx(classes.iconSmall)
+        }), finalTranscript || interimTranscript ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          alignItems: "center",
+          className: classes.setWidth,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: `Confidence: ${((transcriptConfidence || 0) * 100).toFixed(0)}%`
+            }),
+            open: isConfidenceOpen,
+            onClose: handleCloseConfidence,
+            onOpen: handleOpenConfidence,
+            role: "status",
+            "aria-live": "assertive",
+            "aria-label": `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: (finalTranscript || interimTranscript).split(" ").map((word, i) => {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                  className: classes.finalTranscript,
+                  variant: "h5",
+                  color: phraseWordList[i] && checkIsPronunciationCorrect(word.trim(), {
+                    phrase: phraseWordList[i].trim(),
+                    alternativeVersions: currentPhrase.alternativeVersions ? currentPhrase.alternativeVersions.map(altAns => {
+                      return altAns ? (0, _utils.removeExtraWhiteSpaces)(altAns).split(" ")[i] : "";
+                    }) : []
+                  }) ? "secondary" : "",
+                  component: "span",
+                  children: word
+                });
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            onClick: handleReset,
+            size: "small",
+            className: classes.listenButton,
+            "aria-label": "Clear",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+              className: cx(classes.iconSmall)
+            })
+          })]
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.waveform,
+          "aria-labelledby": finalTranscript,
+          children: attemptAudioURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Waveform.default, {
+            src: attemptAudioURL,
+            theme: theme,
+            controls: true
           })
         })]
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.waveform,
-        "aria-labelledby": finalTranscript,
-        children: attemptAudioURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Waveform.default, {
-          src: attemptAudioURL,
-          theme: theme,
-          controls: true
-        })
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
       t: t,
       handleSubmit: () => handleContinue(false, currentPhrase),

package/dist/Exercises/Translator/Translator.js

@@ -44,7 +44,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   appBar: {
-    position: "sticky",
+    position: "relative",
     paddingTop: `env(safe-area-inset-top)`,
     paddingRight: `env(safe-area-inset-right)`,
     paddingLeft: `env(safe-area-inset-left)`
@@ -252,6 +252,7 @@ function Translator({
   const {
     classes
   } = useStyles();
+  const scrollRef = (0, _react.useRef)(null);
   const [wordBankTooltipOpen, setWordBankTooltipOpen] = (0, _react.useState)(false);
   const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
   const exerciseState = (0, _useExerciseState.default)({
@@ -464,6 +465,14 @@ function Translator({
   (0, _react.useEffect)(() => {
     checkAnswer && checkCompletionAndNotify();
   }, [checkAnswer]);
+  (0, _react.useEffect)(() => {
+    if (scrollRef.current && useWordBank) {
+      scrollRef.current.scroll({
+        top: scrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [useWordBank]);
   (0, _react.useEffect)(() => {
     if (open && !run && !localStorage.getItem(`translation-exercise-tour-completed`)) {
       setJoyrideState(prevState => ({
@@ -542,6 +551,9 @@ function Translator({
   const goBackToAssignment = () => {
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
+  const noTranslationWords = !translationWords || translationWords.length === 0;
+  const isWordBankMode = useWordBank && isWordBankEnabled;
+  const isSubmitAnswerDisabled = isWordBankMode ? !isWordBankAttemptChanged || noTranslationWords : !translationText && noTranslationWords;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -652,9 +664,13 @@ function Translator({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: scrollRef,
       sx: {
+        overflowY: 'auto',
         flexGrow: 1,
-        overflowY: 'auto'
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
@@ -907,38 +923,13 @@ function Translator({
           })]
         })]
       })
-    }), useWordBank && isWordBankEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        translationWords: translationWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !isWordBankAttemptChanged || !translationWords || translationWords.length === 0,
-        useWordBank: useWordBank
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        position: 'sticky',
-        bottom: 0,
-        zIndex: 1100,
-        backgroundColor: theme => theme.palette.background.paper
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
-        t: t,
-        translationWords: translationWords,
-        handleSubmit: () => handleContinue(false),
-        handleSkip: () => handleContinue(true),
-        isSubmitAnswerAllowed: true,
-        isSubmitAnswerDisabled: !translationText && (!translationWords || translationWords.length === 0),
-        useWordBank: useWordBank
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExerciseBottomBar.default, {
+      t: t,
+      translationWords: translationWords,
+      handleSubmit: () => handleContinue(false),
+      handleSkip: () => handleContinue(true),
+      isSubmitAnswerAllowed: true,
+      isSubmitAnswerDisabled: isSubmitAnswerDisabled
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnswerResult.default, {
       t: t,
       open: isCorrectResultOpen,

package/dist/Forms/FeedbackForm/FeedbackForm.js

@@ -359,7 +359,8 @@ function FeedbackForm({
           sx: {
             paddingTop: "50px",
             marginLeft: 3,
-            paddingBottom: 5
+            paddingBottom: 5,
+            width: '100%'
           },
           direction: "row",
           justifyContent: "center",

package/dist/Lists/Courses/Courses.js

@@ -27,19 +27,19 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
     gridAutoFlow: "column"
   },
   gridListTileRoot: {
-    [theme.breakpoints.up("sm")]: {
-      minWidth: 380
-    },
     height: "auto",
-    minWidth: 330,
+    minWidth: {
+      xs: 330,
+      sm: 380
+    },
     padding: theme.spacing(0.75, 0.75, 2, 0.75)
   },
   gridListItemRoot: {
-    [theme.breakpoints.up("sm")]: {
-      minWidth: 380
-    },
     height: "auto",
-    minWidth: 320
+    minWidth: {
+      xs: 330,
+      sm: 380
+    }
   }
 }));
 function CourseList({
@@ -111,10 +111,22 @@ function CourseList({
       cols: singleLineGridCols,
       rowHeight: "auto",
       gap: 0,
+      sx: {
+        display: 'flex',
+        gridAutoFlow: 'column',
+        justifyContent: 'flex-start'
+      },
       children: [items.map(course => {
         const selected = selectedCourses.includes(course.courseId);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
           className: classes.gridListTileRoot,
+          sx: {
+            flex: '0 0 auto',
+            width: {
+              xs: 330,
+              sm: 380
+            } // Stop flex overwriting
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
             t: t,
             course: course,
@@ -139,6 +151,13 @@ function CourseList({
       }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
         className: classes.gridListTileRoot,
         ref: index === 0 ? ref : null,
+        sx: {
+          flex: '0 0 auto',
+          width: {
+            xs: 330,
+            sm: 380
+          }
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
           t: t
         })

package/dist/Lists/Leaderboard/Leaderboard.js

@@ -10,7 +10,7 @@ var _material = require("@mui/material");
 var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _Members = _interopRequireDefault(require("../../Misc/NotFound/Members"));
-var _reactFlipMove = _interopRequireDefault(require("react-flip-move"));
+var _reactFlipToolkit = require("react-flip-toolkit");
 var _system = require("@mui/system");
 var _TrendingUp = _interopRequireDefault(require("@mui/icons-material/TrendingUp"));
 var _TrendingDown = _interopRequireDefault(require("@mui/icons-material/TrendingDown"));
@@ -293,25 +293,30 @@ function MemberList(props) {
     children: [members.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Members.default, {
       t: t,
       placeholderImageUrl: placeholderImageUrl
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipMove.default, {
-      duration: 1000,
-      children: members.map(member => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipMove.default, {
-        typeName: null,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Member, {
-          member: member,
-          isCreator: isCreator,
-          isCourseMember: isCourseMember,
-          t: t,
-          lastTwoIndexes: gameMembersHistory.slice(-2).map(members => members.find(m => m.memberId === member.memberId)?.index),
-          lastFourScores: gameMembersHistory.slice(-4).map(members => members.find(m => m.memberId === member.memberId)?.score),
-          topThreeScores: topThreeScores,
-          remainingQuestions: remainingQuestions,
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          isIconsVisible: isIconsVisible,
-          showRoleplayLeaderboardIcons: showRoleplayLeaderboardIcons,
-          lastThreeAnswerResults: gameMembersHistory.slice(-3).map(members => members.find(m => m.memberId === member.memberId)?.isCorrect)
-        })
-      }, member.memberId))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipToolkit.Flipper, {
+      flipKey: members.map(m => m.memberId).join(','),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "member-list",
+        children: members.map(member => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFlipToolkit.Flipped, {
+          flipId: member.memberId,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Member, {
+              member: member,
+              isCreator: isCreator,
+              isCourseMember: isCourseMember,
+              t: t,
+              lastTwoIndexes: gameMembersHistory.slice(-2).map(members => members.find(m => m.memberId === member.memberId)?.index),
+              lastFourScores: gameMembersHistory.slice(-4).map(members => members.find(m => m.memberId === member.memberId)?.score),
+              topThreeScores: topThreeScores,
+              remainingQuestions: remainingQuestions,
+              numOfCorrectAnswers: numOfCorrectAnswers,
+              isIconsVisible: isIconsVisible,
+              showRoleplayLeaderboardIcons: showRoleplayLeaderboardIcons,
+              lastThreeAnswerResults: gameMembersHistory.slice(-3).map(members => members.find(m => m.memberId === member.memberId)?.isCorrect)
+            })
+          })
+        }, member.memberId))
+      })
     })]
   });
 }
@@ -330,7 +335,7 @@ function Leaderboard({
   numOfCorrectAnswers,
   isIconsVisible,
   showRoleplayLeaderboardIcons,
-  exercise,
+  exercise = '',
   handleNext,
   nextScriptLine,
   setIsIconsVisible

package/dist/Live/GameControls/GameControls.js

@@ -35,7 +35,8 @@ function GameControls({
     }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
       sx: {
-        ml: 2
+        ml: 2,
+        mt: 1
       },
       component: _material.Typography,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
@@ -56,6 +57,7 @@ function GameControls({
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
       mr: 2,
+      mt: 1,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
         color: "primary",
         onClick: handleTimeUp,

package/dist/Live/GameQuestionResults/GameQuestionResults.js

@@ -42,7 +42,8 @@ function GameQuestionResults({
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
       sx: {
-        mx: 2
+        mx: 2,
+        mt: 1
       },
       display: "flex",
       alignItems: "center",

package/dist/Live/LiveListener/LiveListener.js

@@ -586,8 +586,7 @@ function LiveListener({
       listeningText: listeningText,
       listeningWords: listeningWords,
       setCurrentAnswer: setCurrentAnswer,
-      exercise: exercise,
-      useWordBank: useWordBank
+      exercise: exercise
     })]
   });
 }

package/dist/Live/LiveTranslator/LiveTranslator.js

@@ -708,8 +708,7 @@ function LiveTranslator({
       translationText: translationText,
       translationWords: translationWords,
       setCurrentAnswer: setCurrentAnswer,
-      exercise: exercise,
-      useWordBank: useWordBank
+      exercise: exercise
     })]
   });
 }

package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js

@@ -12,10 +12,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   footer: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    padding: theme.spacing(3),
+    padding: theme.spacing(2),
     borderTop: `2px solid ${theme.palette.grey[300]}`
   }
 }));
@@ -34,26 +31,17 @@ function ExerciseBottomBar({
   setCurrentAnswer,
   translationText,
   translationWords,
-  exercise,
-  useWordBank
+  exercise
 }) {
   const {
     classes
   } = useStyles();
-  const submitButtonRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (isTimeUp) {
       handleSubmit();
       setIsAnswered(true);
     }
   }, [isTimeUp]);
-  (0, _react.useEffect)(() => {
-    if (submitButtonRef.current && useWordBank) {
-      submitButtonRef.current.scrollIntoView({
-        behavior: "smooth"
-      });
-    }
-  }, [useWordBank]);
   const handleAnswerButtonClick = () => {
     if (isLive && isAnswered) {
       setIsAnswered(false);
@@ -85,7 +73,6 @@ function ExerciseBottomBar({
       })
     }), (isLive || isSubmitAnswerAllowed) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        ref: submitButtonRef,
         color: isLive && isAnswered ? "primary" : "secondary",
         variant: isAnswered ? "outlined" : "contained",
         onClick: handleAnswerButtonClick,

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

@@ -499,9 +499,6 @@ function Classroom({
     (0, _react.useEffect)(() => {
       if (!condition || !cId) return;
       const lastFetched = initialStored.current[cId] || 0;
-      console.log({
-        lastFetched
-      });
       const hasNew = assignments.some(item => item.updatedAt && Number(item.updatedAt) > lastFetched);
       setHasNewAssignments(hasNew);
       if (hasNew) {

package/dist/Screens/Courses/SearchCourses/SearchCourses.js

@@ -87,6 +87,7 @@ function SearchFilters({
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
+        width: "100%",
         direction: "row",
         alignItems: "center",
         spacing: 1,

package/dist/Screens/Search/Search.js

@@ -87,6 +87,7 @@ function SearchFilters({
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
+        width: "100%",
         direction: "row",
         alignItems: "center",
         spacing: 1,

package/dist/Tables/Progress/Progress.js

@@ -216,7 +216,7 @@ function Progress({
     } else {
       return [];
     }
-  }, [courses, courseSectionsQueriesIsLoading]);
+  }, [currentCourses, courseSectionsQueriesIsLoading]);
   const deleteCourseId = () => {
     if ("URLSearchParams" in window) {
       const searchParams = (0, _utils2.searchStringToObj)(window.location.search);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1245",
+  "version": "0.1.1248",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@dnd-kit/modifiers": "9.0.0",
     "@emotion/react": "^11.13",
     "@emotion/styled": "^11.13",
     "@hookform/resolvers": "^3.6.0",
@@ -67,7 +67,6 @@
     "react-dropzone": "^14.2.3",
     "react-easy-crop": "^5.0.0",
     "react-feather": "^2.0",
-    "react-flip-move": "^3.0.5",
     "react-flip-toolkit": "^7.1.0",
     "react-hook-form": "^7.52.0",
     "react-i18next": "^15.4.1",
@@ -111,7 +110,6 @@
     "@mui/x-date-pickers": "^7.28.3",
     "@nualang/eslint-config-nualang": "0.2.0-alpha-4",
     "@react-theming/storybook-addon": "^1.1.10",
-    "react-router-dom": "^6.30.0",
     "@storybook/addon-actions": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-links": "^8.6.12",
@@ -129,11 +127,13 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "babel-plugin-macros": "^3.1.0",
+    "chalk": "^5.4.1",
     "clsx": "^2.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.24.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "glob": "^11.0.2",
     "globals": "^16.0.0",
     "intersection-observer": "^0.12.0",
     "jsdom": "^26.1.0",
@@ -141,9 +141,11 @@
     "prettier": "^3.2.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-router-dom": "^6.30.0",
     "react-scripts": "^5.0.1",
     "storybook": "^8.6.12",
-    "vitest": "^3.1.1"
+    "vitest": "^3.1.1",
+    "zx": "^8.5.4"
   },
   "scripts": {
     "postinstall": "patch-package",