@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

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/Dialogs/ResponsiveDialog/ResponsiveDialog.js

@@ -28,6 +28,10 @@ const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
 export default function ResponsiveDialog({
   open,
   handleClose,
+  // Backdrop-click / Escape handler. Defaults to `handleClose`, but can be
+  // supplied on its own so a dialog can be dismissable without rendering the
+  // built-in footer Close button (which `handleClose` drives).
+  onClose,
   handleSubmit,
   t = text => text,
   submitText,
@@ -62,7 +66,7 @@ export default function ResponsiveDialog({
     fullWidth: fullWidth,
     maxWidth: maxWidth,
     open: open,
-    onClose: handleClose,
+    onClose: onClose || handleClose,
     "aria-label": dialogTitle,
     transitionDuration: transitionDuration,
     keepMounted: keepDialogMounted,

package/dist/Dialogs/SelectExercise/SelectExercise.js

@@ -1,46 +1,421 @@
-import { useState } from "react";
+import { useState, useMemo, useEffect } from "react";
+import { Box, Typography, Button } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import ForumIcon from "@mui/icons-material/Forum";
+import PlaylistAddCheckIcon from "@mui/icons-material/PlaylistAddCheck";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+import HearingIcon from "@mui/icons-material/Hearing";
+import ExtensionIcon from "@mui/icons-material/Extension";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import LiveTvIcon from "@mui/icons-material/LiveTv";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
 import CourseSelection from "../../Lists/CourseSelection/CourseSelection";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { Box } from "@mui/system";
-import { DialogContentText } from "@mui/material";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  content: {
+    padding: 0
+  }
+}));
+const GAME_TYPES = [{
+  id: "translation",
+  labelKey: "translation",
+  Icon: SwapHorizIcon,
+  needsDefinitions: false
+}, {
+  id: "listening",
+  labelKey: "listening",
+  Icon: HearingIcon,
+  needsDefinitions: false
+}, {
+  id: "meaning",
+  labelKey: "meaning",
+  Icon: ExtensionIcon,
+  needsDefinitions: true
+}, {
+  id: "meaning-read-and-write",
+  labelKey: "meaning_read_write",
+  Icon: EditNoteIcon,
+  needsDefinitions: true
+}];
+
+// The single game mode for scenarios, shown in the footer like the phrase-list
+// exercise toggle.
+const STORY_GAME_TYPE = {
+  id: "roleplay-story",
+  labelKey: "roleplay-story",
+  Icon: AutoStoriesIcon
+};
+
+// Fisher-Yates in-place shuffle (inlined to avoid pulling the utils barrel,
+// which imports RiveScript, into the dialog bundle).
+function shuffleInPlace(array) {
+  for (let i = array.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+// Merge every selected list's phrases into one pool, tagging each phrase with
+// its source list so the game can later draw evenly across lists, and dropping
+// exact-duplicate phrase strings.
+function dedupeMergedPhrases(lists) {
+  const seen = new Set();
+  const out = [];
+  lists.forEach(list => {
+    (list.phrases || []).forEach(p => {
+      const key = (p?.phrase || "").trim().toLowerCase();
+      if (key && seen.has(key)) return;
+      if (key) seen.add(key);
+      out.push({
+        ...p,
+        sourceListId: list.phraseListId
+      });
+    });
+  });
+  return out;
+}
+function mergePhrases(lists) {
+  // Shuffle the merged pool by default so lists interleave rather than play in
+  // per-list blocks (the waiting-room game start reshuffles too).
+  return shuffleInPlace(dedupeMergedPhrases(lists));
+}
 function SelectExercise({
   t = text => text,
   open,
   handleClose,
-  courses,
+  courses = [],
   getCourseSections,
-  getRoleplays,
   getPhraseLists,
   handleCreateGame,
   username,
-  courseSectionTopicId = ""
+  courseSectionTopicId = "",
+  initialSourceType = "phrases"
 }) {
-  const [isExerciseSelected, setIsExerciseSelected] = useState(false);
+  const {
+    classes
+  } = useStyles();
+  const [sourceType, setSourceType] = useState(initialSourceType);
+  // Map<phraseListId, enrichedList> — keeps the phrase counts and definition
+  // flags without re-fetching, order-independent (the pool is shuffled anyway).
+  const [selectedLists, setSelectedLists] = useState(() => new Map());
+  const [selectedScenario, setSelectedScenario] = useState(null);
+  const [gameType, setGameType] = useState("translation");
+
+  // Selection is one-off per game; reset every time the dialog opens.
+  useEffect(() => {
+    if (open) {
+      setSourceType(initialSourceType);
+      setSelectedLists(new Map());
+      setSelectedScenario(null);
+      setGameType("translation");
+    }
+  }, [open]);
+  const isPhrases = sourceType === "phrases";
+  const togglePhraseList = list => {
+    setSelectedLists(prev => {
+      const next = new Map(prev);
+      if (next.has(list.phraseListId)) next.delete(list.phraseListId);else next.set(list.phraseListId, list);
+      return next;
+    });
+  };
+  const toggleTopicAll = lists => {
+    setSelectedLists(prev => {
+      const next = new Map(prev);
+      const allSelected = lists.every(l => next.has(l.phraseListId));
+      lists.forEach(l => {
+        if (allSelected) next.delete(l.phraseListId);else next.set(l.phraseListId, l);
+      });
+      return next;
+    });
+  };
+  const selectedListsArr = useMemo(() => [...selectedLists.values()], [selectedLists]);
+  // Count the deduped merged pool (matching what actually gets played) when the
+  // phrases are loaded; otherwise fall back to the sum of the lists' counts.
+  const totalPhrases = useMemo(() => {
+    const allHavePhrases = selectedListsArr.every(l => Array.isArray(l.phrases));
+    return allHavePhrases ? dedupeMergedPhrases(selectedListsArr).length : selectedListsArr.reduce((n, l) => n + (l.phraseCount || 0), 0);
+  }, [selectedListsArr]);
+  const allHaveDefinitions = selectedListsArr.length > 0 && selectedListsArr.every(l => l.hasDefinitions);
+  const availableGameTypes = GAME_TYPES.filter(g => !g.needsDefinitions || allHaveDefinitions);
+  const effectiveGameType = availableGameTypes.some(g => g.id === gameType) ? gameType : availableGameTypes[0]?.id;
+
+  // Footer exercise segments + count are mode-aware: phrase lists show the game
+  // types and "n lists · n phrases"; scenarios show a single Story mode and the
+  // selected scenario's message count.
+  const footerGameTypes = isPhrases ? availableGameTypes : [STORY_GAME_TYPE];
+  const activeFooterGameType = isPhrases ? effectiveGameType : STORY_GAME_TYPE.id;
+  const canPlay = isPhrases ? selectedListsArr.length > 0 : !!selectedScenario;
+  const handlePlay = () => {
+    if (!canPlay) return;
+    if (isPhrases) {
+      const first = selectedListsArr[0];
+      handleCreateGame({
+        courseId: first.courseId,
+        courseSectionTopicId: first.courseSectionTopicId,
+        exercise: effectiveGameType,
+        phraseListIds: selectedListsArr.map(l => l.phraseListId),
+        // Hydrated list metadata for the waiting room's source strip.
+        phraseLists: selectedListsArr.map(l => ({
+          phraseListId: l.phraseListId,
+          phraseListName: l.phraseListName,
+          picture: l.picture || null,
+          phraseCount: l.phraseCount,
+          topicName: l.topicName ?? "",
+          courseSectionTopicId: l.courseSectionTopicId ?? null,
+          topicVideoUrl: l.topicVideoUrl ?? null
+        })),
+        phrases: mergePhrases(selectedListsArr),
+        shuffle: true,
+        timer: 30,
+        answerOption: 0,
+        topicName: first.topicName ?? ""
+      });
+    } else {
+      handleCreateGame({
+        courseSectionTopicId: selectedScenario.courseSectionTopicId,
+        exercise: "roleplay-story",
+        roleplayId: selectedScenario.roleplayId,
+        timer: 30,
+        answerOption: 0,
+        topicName: selectedScenario.topicName ?? ""
+      });
+    }
+  };
+  const sourceTab = active => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 0.75,
+    px: 2,
+    py: 1,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    ...(active ? {
+      color: "primary.contrastText",
+      backgroundColor: "primary.main"
+    } : {
+      color: "text.secondary",
+      backgroundColor: "background.paper"
+    })
+  });
+  const countLabel = isPhrases ? selectedListsArr.length ? t("lists_and_phrases_selected", {
+    lists: selectedListsArr.length,
+    phrases: totalPhrases,
+    count: selectedListsArr.length
+  }) : t("no_lists_selected") : selectedScenario ? t("scenario_selected") : t("no_scenario_selected");
   return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
-    handleClose: handleClose,
+    onClose: handleClose,
     dialogTitle: t("play_live"),
     maxWidth: "md",
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      children: t("live_dialog_description")
+    dialogContentClassName: classes.content,
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 3,
+        flexWrap: "wrap",
+        px: 3,
+        pt: 1
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: 1,
+          overflow: "hidden",
+          flex: "none"
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": isPhrases,
+          onClick: () => setSourceType("phrases"),
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setSourceType("phrases");
+            }
+          },
+          sx: sourceTab(isPhrases),
+          children: [/*#__PURE__*/_jsx(MenuBookIcon, {
+            sx: {
+              fontSize: 18
+            }
+          }), t("source_type_phrase_lists")]
+        }), /*#__PURE__*/_jsxs(Box, {
+          role: "button",
+          tabIndex: 0,
+          "aria-pressed": !isPhrases,
+          onClick: () => setSourceType("scenarios"),
+          onKeyDown: e => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setSourceType("scenarios");
+            }
+          },
+          sx: sourceTab(!isPhrases),
+          children: [/*#__PURE__*/_jsx(ForumIcon, {
+            sx: {
+              fontSize: 18
+            }
+          }), t("source_type_scenarios")]
+        })]
+      })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {
-        mt: 1
+        mt: 2,
+        px: 3,
+        pb: 2.5,
+        minHeight: 280
       },
       children: /*#__PURE__*/_jsx(CourseSelection, {
         courses: courses,
         getCourseSections: getCourseSections,
-        getRoleplays: getRoleplays,
         getPhraseLists: getPhraseLists,
         username: username,
-        handleCreateGame: handleCreateGame,
         t: t,
-        isExerciseSelected: isExerciseSelected,
-        setIsExerciseSelected: setIsExerciseSelected,
         isDialogOpen: open,
+        sourceType: sourceType,
+        selectedListIds: selectedLists,
+        onTogglePhraseList: togglePhraseList,
+        onToggleTopicAll: toggleTopicAll,
+        selectedScenarioId: selectedScenario?.roleplayId || null,
+        onSelectScenario: setSelectedScenario,
         courseSectionTopicId: courseSectionTopicId
       })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        position: "sticky",
+        bottom: 0,
+        borderTop: "1px solid",
+        borderColor: "divider",
+        backgroundColor: "background.default",
+        px: 3,
+        py: 1.5,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        zIndex: 1
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          flexWrap: "wrap"
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [isPhrases ? /*#__PURE__*/_jsx(PlaylistAddCheckIcon, {
+            sx: {
+              fontSize: 20,
+              color: "primary.main"
+            }
+          }) : /*#__PURE__*/_jsx(ForumIcon, {
+            sx: {
+              fontSize: 20,
+              color: "primary.main"
+            }
+          }), /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 14,
+              fontWeight: 600,
+              color: "text.primary"
+            },
+            children: countLabel
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 1,
+            overflow: "hidden",
+            backgroundColor: "background.paper"
+          },
+          children: footerGameTypes.map(g => {
+            const active = activeFooterGameType === g.id;
+            const {
+              Icon
+            } = g;
+            return /*#__PURE__*/_jsxs(Box, {
+              onClick: () => isPhrases && setGameType(g.id),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                px: 1.5,
+                py: 1,
+                fontSize: 14,
+                cursor: isPhrases ? "pointer" : "default",
+                transition: "background-color 200ms cubic-bezier(0.4,0,0.2,1)",
+                ...(active ? {
+                  color: "primary.contrastText",
+                  backgroundColor: "primary.main",
+                  fontWeight: 600,
+                  ...(isPhrases ? {
+                    "&:hover": {
+                      backgroundColor: "primary.dark"
+                    }
+                  } : {})
+                } : {
+                  color: "text.secondary",
+                  "&:hover": {
+                    backgroundColor: "action.hover"
+                  }
+                })
+              },
+              children: [/*#__PURE__*/_jsx(Icon, {
+                sx: {
+                  fontSize: 18
+                }
+              }), t(g.labelKey)]
+            }, g.id);
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 1
+        },
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          color: "primary",
+          sx: {
+            fontWeight: 600
+          },
+          children: t("close")
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          onClick: handlePlay,
+          disabled: !canPlay,
+          startIcon: /*#__PURE__*/_jsx(LiveTvIcon, {}),
+          "data-cy": "play-live",
+          sx: {
+            fontWeight: 600,
+            borderRadius: "25px",
+            px: 2.25,
+            backgroundColor: "secondary.main",
+            "&:hover": {
+              backgroundColor: "secondary.dark"
+            }
+          },
+          children: t("play_live")
+        })]
+      })]
     })]
   });
 }

package/dist/Exercises/Bot/Bot.js

@@ -606,6 +606,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, {