@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { Joyride, STATUS } from "react-joyride";
 import { makeStyles } from "tss-react/mui";
 import { useTheme } from "@mui/material/styles";
-import { Grid, Slide, IconButton, Button, Toolbar, AppBar, Dialog, Typography, Box, Tooltip } from "@mui/material";
+import { Grid, Slide, IconButton, Button, Toolbar, AppBar, Dialog, Typography, Box, Tooltip, CircularProgress } from "@mui/material";
 import { styled } from "@mui/system";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import Replay from "@mui/icons-material/Replay";
@@ -228,9 +228,12 @@ function Pronouncer({
       });
     }
     if (recognizing && interimTranscript === "" && finalTranscript === "") {
-      // Set a timer to stop listening if no audio is detected after 10 seconds
+      // Set a timer to stop listening if no audio is detected after 10 seconds.
+      // Without the snackbar here the mic just switches off with no
+      // explanation, indistinguishable from the student stopping it themselves.
       timer = setTimeout(() => {
         stopListening();
+        openSnackbar?.("We didn't hear anything, please try again.", "warning");
       }, 10000);
     }
     return () => clearTimeout(timer);
@@ -467,6 +470,12 @@ function Pronouncer({
     }
   };
   const isListeningIndicatorTextVisible = recognizing && interimTranscript === "" && finalTranscript === "" ? true : false;
+
+  // isRecognizingDisabled spans the async mic start/stop window (permission
+  // prompt, audio worklet setup, socket teardown) - without a distinct label
+  // and icon here the button just goes inert with no explanation.
+  const isMicBusy = isRecognizingDisabled;
+  const micButtonLabel = isMicBusy ? t("loading") : recognizing ? t("click_to_stop") : t("click_to_speak");
   const navigate = useNavigate();
   const goBackToAssignment = () => {
     navigate(`/classrooms/${classroomId}#Assignments`);
@@ -751,32 +760,33 @@ function Pronouncer({
               [theme.breakpoints.down("md")]: {
                 height: "50px",
                 width: "200px",
-                color: "white",
                 padding: 2,
                 fontSize: "16px",
                 borderRadius: 3
               },
               height: "70px",
               width: "250px",
-              color: "white",
-              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__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
+            startIcon: isMicBusy ? /*#__PURE__*/_jsx(CircularProgress, {
+              size: 20,
+              color: "inherit"
+            }) : recognizing ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
             color: recognizing ? "error" : "success",
             disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
+            "aria-busy": isMicBusy,
+            "aria-label": micButtonLabel,
             id: "voiceInput",
             variant: "contained",
             ref: btnRef,
-            children: recognizing ? t("click_to_stop") : t("click_to_speak")
+            children: micButtonLabel
           })
         }), /*#__PURE__*/_jsx(Grid, {
           children: /*#__PURE__*/_jsx(Typography, {

package/dist/Exercises/Roleplay/Games/ActItOutGameListeningAndSpeaking/ActItOutGame.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Box, Button, Typography, Grid, Avatar, Dialog } from "@mui/material";
+import { Box, Button, Typography, Grid, Avatar, Dialog, CircularProgress } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import Person from "@mui/icons-material/Person";
 import Mic from "@mui/icons-material/Mic";
@@ -101,6 +101,12 @@ function AnswerOptions({
       buttonRef.current.focus();
     }
   }, [isSpeaking, isSocketConnected]);
+
+  // isRecognizingDisabled spans the async mic start/stop window (permission
+  // prompt, audio worklet setup, socket teardown) - without a distinct label
+  // and icon here the button just goes inert with no explanation.
+  const isMicBusy = isRecognizingDisabled;
+  const micButtonLabel = isMicBusy ? t("loading") : recognizing ? t("click_to_stop") : t("click_to_speak");
   return /*#__PURE__*/_jsxs(Box, {
     sx: theme => ({
       display: "flex",
@@ -176,27 +182,28 @@ function AnswerOptions({
       children: [/*#__PURE__*/_jsx(Button, {
         sx: theme => ({
           [theme.breakpoints.down("md")]: {
-            color: "white",
             borderRadius: 3
           },
-          color: "white",
-          backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
           mb: theme.spacing(2),
           border: "1.5px solid transparent",
           "&:hover": {
-            backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
             border: "1.5px solid black"
           }
         }),
         onClick: () => handleMic(text),
-        startIcon: recognizing ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
+        startIcon: isMicBusy ? /*#__PURE__*/_jsx(CircularProgress, {
+          size: 20,
+          color: "inherit"
+        }) : recognizing ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
         color: recognizing ? "error" : "success",
         disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
         id: "voiceInput",
         variant: "contained",
         size: "large",
         ref: buttonRef,
-        children: recognizing ? t("click_to_stop") : t("click_to_speak")
+        "aria-busy": isMicBusy,
+        "aria-label": micButtonLabel,
+        children: micButtonLabel
       }), /*#__PURE__*/_jsx(Typography, {
         role: "status",
         variant: "h6",
@@ -434,9 +441,12 @@ function RoleplayGame({
   useEffect(() => {
     let timer;
     if (recognizing && interimTranscript === "" && finalTranscript === "") {
-      // Set a timer to stop listening if no audio is detected after 10 seconds
+      // Set a timer to stop listening if no audio is detected after 10 seconds.
+      // Without the snackbar here the mic just switches off with no
+      // explanation, indistinguishable from the student stopping it themselves.
       timer = setTimeout(() => {
         stopListening();
+        openSnackbar?.("We didn't hear anything, please try again.", "warning");
       }, 10000);
     }
     return () => clearTimeout(timer);

package/dist/Exercises/Roleplay/Games/ActItOutGameSpeaking/ActItOutGame.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Box, Button, Typography, Grid, Avatar, Dialog } from "@mui/material";
+import { Box, Button, Typography, Grid, Avatar, Dialog, CircularProgress } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import Person from "@mui/icons-material/Person";
 import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
@@ -92,6 +92,12 @@ function AnswerOptions({
       buttonRef.current.focus();
     }
   }, [isSpeaking, isSocketConnected]);
+
+  // isRecognizingDisabled spans the async mic start/stop window (permission
+  // prompt, audio worklet setup, socket teardown) - without a distinct label
+  // and icon here the button just goes inert with no explanation.
+  const isMicBusy = isRecognizingDisabled;
+  const micButtonLabel = isMicBusy ? t("loading") : recognizing ? t("click_to_stop") : t("click_to_speak");
   return /*#__PURE__*/_jsxs(Box, {
     sx: theme => ({
       display: "flex",
@@ -167,28 +173,28 @@ function AnswerOptions({
       children: [/*#__PURE__*/_jsx(Button, {
         sx: theme => ({
           [theme.breakpoints.down("md")]: {
-            color: "white",
             borderRadius: 3
           },
-          color: "white",
-          backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
           mb: theme.spacing(2),
           border: "1.5px solid transparent",
           "&:hover": {
-            backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
             border: "1.5px solid black"
           }
         }),
         onClick: () => handleMic(text),
-        startIcon: recognizing ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
+        startIcon: isMicBusy ? /*#__PURE__*/_jsx(CircularProgress, {
+          size: 20,
+          color: "inherit"
+        }) : recognizing ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
         color: recognizing ? "error" : "success",
         disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
         id: "voiceInput",
         variant: "contained",
         size: "large",
         ref: buttonRef,
-        "aria-label": ariaLiveText,
-        children: recognizing ? t("click_to_stop") : t("click_to_speak")
+        "aria-busy": isMicBusy,
+        "aria-label": ariaLiveText || micButtonLabel,
+        children: micButtonLabel
       }), /*#__PURE__*/_jsx(Typography, {
         role: "status",
         variant: "h6",
@@ -427,9 +433,12 @@ function RoleplayGame({
   useEffect(() => {
     let timer;
     if (recognizing && interimTranscript === "" && finalTranscript === "") {
-      // Set a timer to stop listening if no audio is detected after 10 seconds
+      // Set a timer to stop listening if no audio is detected after 10 seconds.
+      // Without the snackbar here the mic just switches off with no
+      // explanation, indistinguishable from the student stopping it themselves.
       timer = setTimeout(() => {
         stopListening();
+        openSnackbar?.("We didn't hear anything, please try again.", "warning");
       }, 10000);
     }
     return () => clearTimeout(timer);

package/dist/Lists/CourseSelection/CourseSelection.js

@@ -3,27 +3,23 @@ import { List, ListItem, ListItemButton, ListItemText, Collapse, Avatar, Box, To
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExerciseSelection from "../ExerciseSelection/ExerciseSelection";
+import { topicHasScenario } from "../RoleplaySelection/RoleplaySelection";
 import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Course({
   course,
   index,
   getCourseSections,
-  getRoleplays,
   getPhraseLists,
   username,
-  handleCreateGame,
   t,
-  isExerciseSelected,
-  setIsExerciseSelected,
   isDialogOpen,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isAssignment,
-  isCreator,
+  sourceType,
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
   courseSectionTopicId
 }) {
   const [open, setOpen] = useState(false);
@@ -32,7 +28,7 @@ function Course({
     return response;
   }, {
     courseId: course.courseId,
-    username: username,
+    username,
     filters: {
       limit: 1000
     }
@@ -40,12 +36,19 @@ function Course({
     enabled: !!course.courseId && isDialogOpen
   });
   useEffect(() => {
-    if (courseSectionTopicId.split("|")[0] === course.courseId) {
+    if (courseSectionTopicId?.split("|")[0] === course.courseId) {
       setOpen(true);
     }
   }, [courseSectionTopicId]);
   const courseSections = useMemo(() => sectionsQuery.isSuccess && Array.isArray(sectionsQuery.data.Items) && sectionsQuery.data.Items.length ? sectionsQuery.data.Items : [], [sectionsQuery.data, sectionsQuery.isSuccess]);
-  const isCourseEmpty = courseSections.length === 0 && !sectionsQuery.isLoading ? true : false;
+  const isCourseEmpty = courseSections.length === 0 && !sectionsQuery.isLoading;
+
+  // In scenarios mode, once this course's sections have loaded, hide the whole
+  // course if none of its topics have scenarios.
+  const hasScenarios = courseSections.some(sec => (sec.topics || []).some(tp => topicHasScenario(tp.roleplays)));
+  if (sourceType === "scenarios" && sectionsQuery.isSuccess && !hasScenarios) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(List, {
     disablePadding: true,
     children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -54,7 +57,7 @@ function Course({
         disablePadding: true,
         children: /*#__PURE__*/_jsx(ListItemButton, {
           onClick: () => setOpen(!open),
-          disabled: isCourseEmpty || isExerciseSelected,
+          disabled: isCourseEmpty,
           children: /*#__PURE__*/_jsxs(Box, {
             sx: {
               display: "flex",
@@ -79,11 +82,11 @@ function Course({
               })]
             }), open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
               sx: {
-                color: "#757575"
+                color: "text.secondary"
               }
             }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
               sx: {
-                color: "#757575"
+                color: "text.secondary"
               }
             })]
           })
@@ -95,25 +98,20 @@ function Course({
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
         sx: {
-          ml: 3.5
+          ml: 7
         },
         children: /*#__PURE__*/_jsx(ExerciseSelection, {
           t: t,
           sections: courseSections,
           isLoading: sectionsQuery.isLoading,
-          handleCreateGame: handleCreateGame,
           courseId: course.courseId,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          getRoleplays: getRoleplays,
           getPhraseLists: getPhraseLists,
-          handleSelectExercise: handleSelectExercise,
-          selectedExercises: selectedExercises,
-          useCase: useCase,
-          assignment: assignment,
-          handleStartExercise: handleStartExercise,
-          isAssignment: isAssignment,
-          isCreator: isCreator,
+          sourceType: sourceType,
+          selectedListIds: selectedListIds,
+          onTogglePhraseList: onTogglePhraseList,
+          onToggleTopicAll: onToggleTopicAll,
+          selectedScenarioId: selectedScenarioId,
+          onSelectScenario: onSelectScenario,
           courseSectionTopicId: courseSectionTopicId
         })
       })
@@ -121,44 +119,35 @@ function Course({
   }, index);
 }
 function CourseSelection({
-  courses,
+  courses = [],
   getCourseSections,
-  getRoleplays,
   getPhraseLists,
   username,
-  handleCreateGame,
   t,
-  isExerciseSelected,
-  setIsExerciseSelected,
-  handleSelectExercise,
-  selectedExercises,
-  useCase,
-  assignment,
-  handleStartExercise,
-  isAssignment,
-  isCreator,
-  courseSectionTopicId,
-  ...otherProps
+  isDialogOpen,
+  sourceType,
+  selectedListIds,
+  onTogglePhraseList,
+  onToggleTopicAll,
+  selectedScenarioId,
+  onSelectScenario,
+  courseSectionTopicId
 }) {
   return /*#__PURE__*/_jsx("div", {
     children: courses.map((course, index) => /*#__PURE__*/_jsx(Course, {
       course: course,
       index: index,
       getCourseSections: getCourseSections,
-      getRoleplays: getRoleplays,
       getPhraseLists: getPhraseLists,
       username: username,
-      handleCreateGame: handleCreateGame,
       t: t,
-      isExerciseSelected: isExerciseSelected,
-      setIsExerciseSelected: setIsExerciseSelected,
-      handleSelectExercise: handleSelectExercise,
-      selectedExercises: selectedExercises,
-      useCase: useCase,
-      assignment: assignment,
-      handleStartExercise: handleStartExercise,
-      isAssignment: isAssignment,
-      isCreator: isCreator,
+      isDialogOpen: isDialogOpen,
+      sourceType: sourceType,
+      selectedListIds: selectedListIds,
+      onTogglePhraseList: onTogglePhraseList,
+      onToggleTopicAll: onToggleTopicAll,
+      selectedScenarioId: selectedScenarioId,
+      onSelectScenario: onSelectScenario,
       courseSectionTopicId: courseSectionTopicId
     }, course.courseId))
   });