@nualang/nualang-ui-components 0.1.1420 → 0.1.1422

package/README.md

@@ -35,6 +35,37 @@ If webapp is caching previous versions (Add a character to the end of the .tgz,
 pnpm add ../ui-components/nualang-ui-components-0.1.XXXa.tgz
 ```
 
+## Local Development with `npm link`
+Links this repo directly into `app`, so changes here show up instantly with no
+repacking or reinstalling. Requires both repos cloned as sibling folders
+(`ui-components` and `app` side by side, same parent directory).
+
+1. **Here in `ui-components`**, start the watcher (it cleans `dist/` before its first
+   compile, so it's always safe to run - no separate build step needed):
+   ```bash
+   pnpm run watch     # leave this running
+   ```
+2. **In `app`**, link it in and start the dev server:
+   ```bash
+   npm run link:ui-components
+   npm start
+   ```
+3. Edit a component here under `src/` and save - it recompiles automatically, `app`'s
+   dev server rebuilds, and a browser reload shows your change.
+4. **In `app`** when you're done, switch back to the published version:
+   ```bash
+   npm run unlink:ui-components
+   ```
+
+**If you delete or rename a file while the watcher is already running**, restart
+`pnpm run watch`. Babel's `--watch` mode only ever adds/updates compiled output - it
+never removes a stale file from `dist/` for a source file that's gone, which can leave
+`app` resolving a module that no longer exists in `src/`. Restarting re-runs the clean
+step and fixes it.
+
+Heads up: an `npm install` in `app` will quietly replace the link with the published
+version - just re-run `npm run link:ui-components` to relink.
+
 ## Publish to npm
 Normall, you should just update the version number in package.json and commit
 your updates. When you updated are merged to main, gitlab CI/CD will add a

package/dist/Chat/BottomBar/BottomBar.js

@@ -9,6 +9,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Divider from "@mui/material/Divider";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
 import MicIcon from "@mui/icons-material/Mic";
 import MicOffIcon from "@mui/icons-material/MicOff";
 import SendIcon from "@mui/icons-material/Send";
@@ -81,6 +82,7 @@ export default function BottomBar({
   handleKeyPress,
   handleUpdate,
   isListening,
+  isMicBusy = false,
   handleAttachFile,
   handleRecord,
   handleAdd,
@@ -131,6 +133,11 @@ export default function BottomBar({
   const textInput = useRef(null);
   const activeRef = inputRef ? inputRef : textInput;
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
+
+  // isMicBusy spans the async mic start/stop window (permission prompt,
+  // audio worklet setup, socket teardown) - without this the button just
+  // goes inert with no explanation.
+  const micButtonLabel = isMicBusy ? t("loading") : isListening ? t("click_to_stop") : t("click_to_speak");
   const TextInput = /*#__PURE__*/_jsx("div", {
     className: classes.input,
     id: "keyboardInput",
@@ -236,7 +243,6 @@ export default function BottomBar({
           children: isSmallScreen ? /*#__PURE__*/_jsx(_Fragment, {
             children: /*#__PURE__*/_jsx(IconButton, {
               sx: {
-                color: isListening ? "red" : "inherit",
                 animation: showMicReminder ? "reminder 1.6s ease-in-out infinite" : "none",
                 "@keyframes reminder": {
                   "0%": {
@@ -253,24 +259,27 @@ export default function BottomBar({
               onClick: onClickRecord,
               edge: "start",
               id: "voiceInput",
+              color: isListening ? "error" : "inherit",
               disabled: disableInput,
+              "aria-busy": isMicBusy,
+              "aria-label": micButtonLabel,
               size: "large",
               ref: buttonRef,
-              children: isListening ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(MicIcon, {})
+              children: isMicBusy ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 20,
+                color: "inherit"
+              }) : isListening ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(MicIcon, {})
             })
           }) : /*#__PURE__*/_jsx(_Fragment, {
             children: /*#__PURE__*/_jsx(Button, {
               sx: {
-                color: "white",
-                backgroundColor: isListening ? "#d32f2f" : "#2d7b30",
                 padding: 1,
                 paddingLeft: 2,
                 paddingRight: 2,
                 borderRadius: 3,
-                border: "1.5px solid black",
+                border: "1.5px solid transparent",
                 "&:hover": {
-                  backgroundColor: isListening ? "#d32f2f" : "#2d7b30",
-                  border: "1.5px solid white"
+                  border: "1.5px solid black"
                 },
                 animation: showMicReminder ? "reminder 1.6s ease-in-out infinite" : "none",
                 "@keyframes reminder": {
@@ -286,18 +295,22 @@ export default function BottomBar({
                 }
               },
               onClick: onClickRecord,
-              startIcon: isListening ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(MicIcon, {}),
+              startIcon: isMicBusy ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 20,
+                color: "inherit"
+              }) : isListening ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(MicIcon, {}),
               color: isListening ? "error" : "success",
               disabled: disableInput,
+              "aria-busy": isMicBusy,
               variant: "contained",
               id: "voiceInput",
               ref: buttonRef,
-              children: isListening ? t("click_to_stop") : t("click_to_speak")
+              children: micButtonLabel
             })
           })
         }), /*#__PURE__*/_jsx(Typography, {
           sx: {
-            marginLeft: 1.5,
+            marginLeft: isSmallScreen ? 0.75 : 1.5,
             marginRight: 1,
             my: "auto",
             fontWeight: "bold"

package/dist/Chat/Chat.js

@@ -23,6 +23,7 @@ function Chat({
   handleBack,
   handleClose,
   handleRecord,
+  isMicBusy = false,
   handleAdd,
   handleSend,
   handleUpdate,
@@ -178,6 +179,7 @@ function Chat({
       focusInput: focusInput,
       handleInputChange: handleInputChange,
       isListening: isListening,
+      isMicBusy: isMicBusy,
       handleRecord: handleRecord,
       handleSend: handleSend,
       handleAdd: handleAdd,

package/dist/Exercises/Bot/Bot.js

@@ -101,7 +101,8 @@ function Bot({
   aiChatbotConversationHistory,
   isUserInternal,
   handleStudentMisuse,
-  username
+  username,
+  trackRecommendedEvent
 }) {
   const theme = useTheme();
   const {
@@ -121,6 +122,9 @@ function Bot({
     browserSupportsSpeechRecognition,
     clearAttemptAudio
   } = useRecognition({
+    trackRecommendedEvent,
+    exerciseName,
+    learnLang,
     openSnackbar
   });
   const {
@@ -606,6 +610,7 @@ function Bot({
         t: t,
         authenticated: authenticated,
         disableInput: !authenticated || isSpeaking || isRecognizingDisabled ? true : false,
+        isMicBusy: isRecognizingDisabled,
         messages: botMessages,
         placeholder: !recognizing ? placeholder : "",
         translationEnabled: isTranslationEnabled,

package/dist/Exercises/ListenAndSpeak/ListenAndSpeak.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";
@@ -227,9 +227,12 @@ function ListenAndSpeak({
       });
     }
     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);
@@ -455,6 +458,12 @@ function ListenAndSpeak({
     }
   };
   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`);
@@ -696,32 +705,33 @@ function ListenAndSpeak({
               [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/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);