@nualang/nualang-ui-components 0.1.1421 → 0.1.1423

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 {

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGame/RoleplayGame.js

@@ -119,10 +119,11 @@ function RoleplayGame({
     classes
   } = useStyles();
   const theme = useTheme();
+  const isDisabled = isGameHidden || isRoleplayEmpty;
   return /*#__PURE__*/_jsxs(ListItem, {
     alignItems: "flex-start",
-    disabled: isGameHidden || isRoleplayEmpty,
-    onClick: authenticated ? () => handleSelectRoleplayGame(gameId) : () => handleSignIn(),
+    disabled: isDisabled,
+    onClick: isDisabled ? undefined : authenticated ? () => handleSelectRoleplayGame(gameId) : () => handleSignIn(),
     button: true,
     divider: true,
     classes: {
@@ -143,7 +144,11 @@ function RoleplayGame({
       },
       "&:focus": {
         backgroundColor: "transparent"
-      }
+      },
+      ...(isDisabled && {
+        opacity: 0.5,
+        pointerEvents: "none"
+      })
     },
     children: [/*#__PURE__*/_jsx(ListItemAvatar, {
       children: gameIcon ? /*#__PURE__*/_jsx(Avatar, {

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { Link as RouterLink, useNavigate, useParams } from "react-router";
-import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar } from "@mui/material";
+import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar, Chip } from "@mui/material";
 import { useTheme, alpha } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
 import CheckBox from "@mui/icons-material/CheckBox";
@@ -26,6 +26,7 @@ import CopyIcon from "@mui/icons-material/FileCopy";
 import ImageSearchIcon from "@mui/icons-material/ImageSearch";
 import Skeleton from "@mui/material/Skeleton";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
+import DifficultyIcon from "@mui/icons-material/School";
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
 import { calcCompletions, calcPercentageCompletion } from "../../utils/index";
 import SelectClassroom from "../../Dialogs/SelectClassroom/SelectClassroom";
@@ -336,7 +337,10 @@ function Topic({
   sectionIndex,
   index,
   moveTopic,
+  moveTopicAcrossSections,
   onDropSection,
+  onMoveTopicToSection,
+  onCancelMove,
   disableDrag,
   classroomId,
   courseSettings,
@@ -376,14 +380,34 @@ function Topic({
   const [{
     handlerId
   }, drop] = useDrop({
-    type: `${sectionId}-topic`,
-    accept: `${sectionId}-topic`,
+    // A single shared type lets a topic be dropped into any section, not just
+    // its own. Cross-section vs within-section is disambiguated in `hover`.
+    accept: "topic",
+    collect: monitor => ({
+      handlerId: monitor.getHandlerId()
+    }),
     hover(item, monitor) {
       if (!ref.current) {
         return;
       }
-      const dragIndex = item.index;
       const hoverIndex = index;
+
+      // Cross-section move: the dragged topic originates in another section.
+      if (item.sectionIndex !== sectionIndex && moveTopicAcrossSections) {
+        // Insert before or after this topic depending on cursor position.
+        const hoverBoundingRect = ref.current.getBoundingClientRect();
+        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        const clientOffset = monitor.getClientOffset();
+        if (!clientOffset) return;
+        const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+        const targetIndex = hoverClientY < hoverMiddleY ? hoverIndex : hoverIndex + 1;
+        moveTopicAcrossSections(item.sectionIndex, item.topicId, sectionIndex, targetIndex);
+        item.sectionId = sectionId;
+        item.sectionIndex = sectionIndex;
+        item.index = targetIndex;
+        return;
+      }
+      const dragIndex = item.index;
       // Don't replace items with themselves
       if (dragIndex === hoverIndex) {
         return;
@@ -419,11 +443,18 @@ function Topic({
   const [{
     isDragging
   }, drag] = useDrag({
-    type: `${sectionId}-topic`,
-    canDrag: isCreator && isLargeScreen && !disableDrag ? true : false,
+    type: "topic",
+    // Touch is supported via react-dnd-multi-backend, so drag is not gated on
+    // screen size — only on being the course creator.
+    canDrag: isCreator && !disableDrag ? true : false,
     item: {
       topicId,
       index,
+      sectionId,
+      sectionIndex,
+      // Immutable origin, used on drop to detect a re-parent and to persist it.
+      originSectionId: sectionId,
+      originSectionIndex: sectionIndex,
       primary: topicName,
       secondary: description,
       image: picture
@@ -431,8 +462,23 @@ function Topic({
     collect: monitor => ({
       isDragging: monitor.isDragging()
     }),
-    end: (dropResult, monitor) => {
-      onDropSection();
+    end: (item, monitor) => {
+      // Dropped outside any section (or cancelled with Esc) — revert.
+      if (!monitor.didDrop()) {
+        if (onCancelMove) onCancelMove();
+        return;
+      }
+      if (item && item.originSectionId && item.originSectionId !== item.sectionId && onMoveTopicToSection) {
+        // The topic changed section during the drag — persist the re-parent.
+        onMoveTopicToSection({
+          sourceSectionId: item.originSectionId,
+          targetSectionId: item.sectionId,
+          topicId: item.topicId
+        });
+      } else {
+        // Same-section reorder — persist the new order.
+        onDropSection();
+      }
     }
   });
   const opacity = isDragging ? 0 : 1;
@@ -505,7 +551,35 @@ function Topic({
                 alignItems: "center",
                 mt: 1
               },
-              children: [topic?.pdf && /*#__PURE__*/_jsx(Box, {
+              children: [topic?.difficulty && /*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  mr: 1
+                },
+                role: "group",
+                "aria-label": `${t("difficulty")}: ${t(`card_${topic.difficulty}`)}`,
+                children: [/*#__PURE__*/_jsx(DifficultyIcon, {
+                  fontSize: "small",
+                  sx: {
+                    marginRight: 1,
+                    color: theme => theme.palette.text.secondary
+                  }
+                }), /*#__PURE__*/_jsx(Chip, {
+                  label: t(`card_${topic.difficulty}`),
+                  size: "small",
+                  sx: theme => ({
+                    height: 24,
+                    backgroundColor: theme.palette.action.selected,
+                    color: theme.palette.text.secondary,
+                    "& .MuiChip-label": {
+                      fontSize: "0.75rem",
+                      px: 0.75
+                    }
+                  })
+                })]
+              }), topic?.pdf && /*#__PURE__*/_jsx(Box, {
                 sx: {
                   display: "flex",
                   alignItems: "center"
@@ -789,6 +863,7 @@ function Section({
   isCommunityAccessRestricted = false,
   moveSection,
   moveTopic,
+  moveTopicAcrossSections,
   index,
   onDropSection,
   teachClassrooms,
@@ -922,8 +997,37 @@ function Section({
       onDropSection();
     }
   });
+
+  // Section-level drop target for topics. Positioning within a non-empty
+  // section is handled by the per-topic hover; this target handles dropping a
+  // topic onto an EMPTY section and drives the "valid drop target" highlight.
+  const [{
+    isTopicOver,
+    canDropTopic,
+    draggedTopicItem
+  }, dropTopicIntoSection] = useDrop({
+    accept: "topic",
+    hover(item, monitor) {
+      if (!monitor.isOver({
+        shallow: true
+      })) return;
+      if (item.sectionIndex === index) return;
+      if ((topics || []).length > 0) return; // non-empty: topic hover handles it
+      if (!moveTopicAcrossSections) return;
+      moveTopicAcrossSections(item.sectionIndex, item.topicId, index, 0);
+      item.sectionId = sectionId;
+      item.sectionIndex = index;
+      item.index = 0;
+    },
+    collect: monitor => ({
+      isTopicOver: monitor.isOver(),
+      canDropTopic: monitor.canDrop(),
+      draggedTopicItem: monitor.getItem()
+    })
+  });
+  const isTopicDropHighlight = isTopicOver && canDropTopic && draggedTopicItem && draggedTopicItem.originSectionId !== sectionId;
   const opacity = isDragging ? 0 : 1;
-  drag(drop(ref));
+  drag(dropTopicIntoSection(drop(ref)));
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClickMenu = event => {
     setAnchorEl(event.currentTarget);
@@ -947,6 +1051,14 @@ function Section({
       style: {
         opacity
       },
+      "data-cy": "section-drop-zone",
+      sx: isTopicDropHighlight ? {
+        outline: theme => `2px dashed ${theme.palette.primary.main}`,
+        outlineOffset: "-4px",
+        borderRadius: 1,
+        backgroundColor: theme => alpha(theme.palette.primary.main, 0.06),
+        transition: "background-color 120ms ease"
+      } : undefined,
       component: "nav",
       "aria-labelledby": "section-list-subheader",
       subheader: /*#__PURE__*/_jsx(ListSubheader, {
@@ -1139,6 +1251,7 @@ function Section({
           handleUpdateSectionTopic: handleUpdateSectionTopic,
           handleDuplicateTopic: handleDuplicateTopic,
           moveTopic: moveTopic,
+          moveTopicAcrossSections: moveTopicAcrossSections,
           isMember: isMember,
           disableDrag: disableDrag,
           courseSettings: courseSettings,
@@ -1341,6 +1454,7 @@ function CourseOutline({
   handleUpdateSections,
   handleDeleteSectionVideo,
   handleUpdateTopics,
+  handleMoveTopic,
   isPublic,
   handleSwitchChange,
   isLoading,
@@ -1360,6 +1474,13 @@ function CourseOutline({
     percentage: 0
   });
   const [sects, setSects] = useState([]);
+
+  // Mirror `sects` into a ref so drop handlers can read the latest optimistic
+  // order without being re-created on every change.
+  const sectsRef = useRef(sects);
+  useEffect(() => {
+    sectsRef.current = sects;
+  }, [sects]);
   useEffect(() => {
     if (isMember) {
       const sectionsWithProgress = calcCompletions(sections, completions, null, isChallengeModeStudent, isReadWriteModeStudent);
@@ -1386,21 +1507,106 @@ function CourseOutline({
     setSects(newSections);
   }, [sects]);
   const moveTopic = useCallback((sectionIndex, dragIndex, hoverIndex) => {
-    const dragTopic = sects[sectionIndex].topics[dragIndex];
-    const newTopics = update(sects[sectionIndex].topics, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, {
-        ...dragTopic,
-        idx: hoverIndex
-      }]]
+    // Functional update so rapid successive hover events always build on the
+    // latest state and cannot clobber one another (which would desync the
+    // drag item's index from the actual source order).
+    setSects(current => {
+      const section = current[sectionIndex];
+      if (!section) return current;
+      const dragTopic = (section.topics || [])[dragIndex];
+      if (!dragTopic) return current;
+      const newTopics = update(section.topics, {
+        $splice: [[dragIndex, 1], [hoverIndex, 0, {
+          ...dragTopic,
+          idx: hoverIndex
+        }]]
+      });
+      return update(current, {
+        $splice: [[sectionIndex, 1], [sectionIndex, 0, {
+          ...section,
+          topics: newTopics
+        }]]
+      });
     });
-    const newSections = update(sects, {
-      $splice: [[sectionIndex, 1], [sectionIndex, 0, {
-        ...sects[sectionIndex],
-        topics: newTopics
-      }]]
+  }, []);
+
+  // Optimistically move a topic from one section to another at a given hover
+  // position, restamping its section reference and idx. Uses a functional
+  // update so repeated drag-hover events always build on the latest state.
+  const moveTopicAcrossSections = useCallback((fromSectionIndex, topicId, toSectionIndex, hoverIndex) => {
+    setSects(current => {
+      if (fromSectionIndex === toSectionIndex) return current;
+      const fromSection = current[fromSectionIndex];
+      const toSection = current[toSectionIndex];
+      if (!fromSection || !toSection) return current;
+      const fromTopics = fromSection.topics || [];
+      const toTopics = toSection.topics || [];
+      // Identify the dragged topic by its stable id, not by a positional
+      // index: the drag item's index can drift during a fast drag, which
+      // would otherwise re-parent the wrong (e.g. last) topic. Also makes
+      // repeated hover fires idempotent once the topic has already moved.
+      const movedTopic = fromTopics.find(tpc => tpc.topicId === topicId);
+      if (!movedTopic) return current;
+      const targetSectionId = toSection.sectionId;
+      const newFromTopics = fromTopics.filter(tpc => tpc.topicId !== topicId);
+      const clampedIndex = Math.max(0, Math.min(hoverIndex, toTopics.length));
+      const repositionedTopic = {
+        ...movedTopic,
+        sectionId: targetSectionId,
+        courseSectionId: `${courseId}|${targetSectionId}`,
+        idx: clampedIndex
+      };
+      const newToTopics = [...toTopics.slice(0, clampedIndex), repositionedTopic, ...toTopics.slice(clampedIndex)];
+      return current.map((s, i) => {
+        if (i === fromSectionIndex) return {
+          ...s,
+          topics: newFromTopics
+        };
+        if (i === toSectionIndex) return {
+          ...s,
+          topics: newToTopics
+        };
+        return s;
+      });
     });
-    setSects(newSections);
-  }, [sects]);
+  }, [courseId]);
+
+  // Revert the optimistic order back to the authoritative `sections` prop —
+  // used when a drag is cancelled / dropped outside any section.
+  const resetSects = useCallback(() => {
+    if (isMember) {
+      setSects(calcCompletions(sections, completions, null, isChallengeModeStudent, isReadWriteModeStudent));
+    } else {
+      setSects(sections);
+    }
+  }, [isMember, sections, completions, isChallengeModeStudent, isReadWriteModeStudent]);
+
+  // On drop of a re-parented topic, hand the source/target ordering to the
+  // page-level handler so it can persist the move + reindex both sections.
+  const dispatchMoveTopic = useCallback(({
+    sourceSectionId,
+    targetSectionId,
+    topicId
+  }) => {
+    if (typeof handleMoveTopic !== "function") {
+      resetSects();
+      return;
+    }
+    const current = sectsRef.current || [];
+    const targetSection = current.find(s => s.sectionId === targetSectionId);
+    const sourceSection = current.find(s => s.sectionId === sourceSectionId);
+    if (!targetSection) return;
+    const movedTopic = (targetSection.topics || []).find(topicItem => topicItem.topicId === topicId);
+    if (!movedTopic) return;
+    handleMoveTopic({
+      courseId,
+      sourceSectionId,
+      targetSectionId,
+      topic: movedTopic,
+      targetTopics: targetSection.topics || [],
+      sourceTopics: sourceSection ? sourceSection.topics || [] : []
+    });
+  }, [courseId, handleMoveTopic, resetSects]);
   const {
     percentage,
     completed,
@@ -1534,6 +1740,9 @@ function CourseOutline({
       isCreator: isCreator,
       moveSection: moveSection,
       moveTopic: moveTopic,
+      moveTopicAcrossSections: moveTopicAcrossSections,
+      onMoveTopicToSection: dispatchMoveTopic,
+      onCancelMove: resetSects,
       handleUpdateSections: handleUpdateSections,
       handleUpdateTopics: handleUpdateTopics,
       isPublic: isPublic,

package/dist/Lists/CourseOutline/CourseOutline.test.js

@@ -1,22 +1,88 @@
 import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import CourseOutline from "./CourseOutline";
 import { props } from "./CourseOutline.stories";
 import { DndProvider } from "react-dnd";
 import { TestBackend } from "react-dnd-test-backend";
 import { MemoryRouter } from "react-router";
+
+// Two sections — one populated, one empty — to exercise cross-section drag
+// wiring (drop zones, draggable topics, re-parent handler threading). Full
+// pointer-driven drag interaction is covered by the app-level Playwright spec,
+// since react-dnd hover geometry relies on getBoundingClientRect, which returns
+// zeros under jsdom.
 import { jsx as _jsx } from "react/jsx-runtime";
+const topic = (id, name, idx) => ({
+  topicId: id,
+  topicName: name,
+  idx,
+  sectionId: "section-a",
+  roleplays: [],
+  bots: [],
+  completions: []
+});
+const crossSectionProps = (overrides = {}) => ({
+  ...props,
+  isCreator: true,
+  isMember: false,
+  courseId: "course-1",
+  sections: [{
+    sectionId: "section-a",
+    sectionName: "Section A",
+    idx: 0,
+    topics: [topic("topic-1", "Topic 1", 0), topic("topic-2", "Topic 2", 1)]
+  }, {
+    sectionId: "section-b",
+    sectionName: "Section B",
+    idx: 1,
+    topics: []
+  }],
+  handleMoveTopic: vi.fn(),
+  ...overrides
+});
+const renderOutline = p => render(/*#__PURE__*/_jsx(MemoryRouter, {
+  children: /*#__PURE__*/_jsx(DndProvider, {
+    backend: TestBackend,
+    children: /*#__PURE__*/_jsx(CourseOutline, {
+      ...p
+    })
+  })
+}));
 describe("CourseOutline", () => {
   it("renders without crashing", () => {
     const {
       unmount
-    } = render(/*#__PURE__*/_jsx(MemoryRouter, {
-      children: /*#__PURE__*/_jsx(DndProvider, {
-        backend: TestBackend,
-        children: /*#__PURE__*/_jsx(CourseOutline, {
-          ...props
-        })
-      })
+    } = renderOutline(props);
+    unmount();
+  });
+  it("renders without crashing when cross-section drag handlers are provided", () => {
+    const {
+      unmount
+    } = renderOutline(crossSectionProps());
+    unmount();
+  });
+  it("renders a drop zone for every section so topics can be dropped between them", () => {
+    const {
+      container,
+      unmount
+    } = renderOutline(crossSectionProps());
+    // One drop zone per rendered section (source + target).
+    expect(container.querySelectorAll('[data-cy="section-drop-zone"]').length).toBe(2);
+    unmount();
+  });
+  it("renders each topic as a draggable list item for the course creator", () => {
+    const {
+      container,
+      unmount
+    } = renderOutline(crossSectionProps());
+    expect(container.querySelectorAll('[data-cy="topic-list-item"]').length).toBe(2);
+    unmount();
+  });
+  it("does not throw when handleMoveTopic is omitted (drag stays inert)", () => {
+    const {
+      unmount
+    } = renderOutline(crossSectionProps({
+      handleMoveTopic: undefined
     }));
     unmount();
   });

package/dist/hooks/useRecognition.js

@@ -9,14 +9,46 @@ const ENDPOINT = import.meta.env.REACT_APP_GCLOUD_SPEECH || "wss://speech-rec-se
 const socket = io(ENDPOINT, {
   withCredentials: true,
   autoConnect: false,
-  transports: ["websocket", "polling"] // use WebSocket, fallback to polling if necessary
-});
-socket.on("connect_error", error => {
-  // revert to classic upgrade
-  // socket.io.opts.transports = ["polling", "websocket"];
-  console.error(error);
+  transports: ["websocket", "polling"],
+  // use WebSocket, fallback to polling if necessary
+  // Without this, when websocket is listed first and fails outright (e.g. a
+  // school firewall blocking the WS upgrade), engine.io does NOT fall back to
+  // polling for that attempt - it just fails the whole connect_error and retries
+  // websocket again on the next reconnection attempt, looping forever on
+  // networks that block websocket entirely.
+  tryAllTransports: true
 });
 
+/**
+ * Builds a single diagnostic message for a connect_error analytics event.
+ * `error.message` for a WebSocket transport failure is (by design of the
+ * browser WebSocket API) always the generic string "websocket error" - the
+ * spec deliberately withholds the underlying reason (DNS/TLS/refused/timed
+ * out) from JS to avoid leaking network topology info to a page. `error.type`
+ * and `error.description` are the only other fields engine.io-client
+ * attaches, and for polling transport failures `description` is often the
+ * XHR object (so `description.status` gives the HTTP status code) - folded
+ * into one field here rather than several, since they're only ever useful
+ * together and only for this one event.
+ */
+function describeConnectError(error) {
+  const description = error?.description;
+  let descriptionDetail = "none";
+  if (description && typeof description === "object") {
+    if (typeof description.status === "number") {
+      descriptionDetail = `http_status_${description.status}`;
+    } else if (description.message) {
+      descriptionDetail = `${description.message}`;
+    }
+  } else if (description) {
+    descriptionDetail = `${description}`;
+  }
+  const transport = socket.io?.engine?.transport?.name;
+  return {
+    A4_error_message: `${error?.message} (type=${error?.type}, description=${descriptionDetail}, transport=${transport}, online=${navigator.onLine})`
+  };
+}
+
 // audioStream constraints
 const constraints = {
   audio: true,
@@ -24,6 +56,21 @@ const constraints = {
 };
 const version = ["v1", "v2"].includes(import.meta.env.REACT_APP_SPEECH_RECOGNITION_VERSION) ? import.meta.env.REACT_APP_SPEECH_RECOGNITION_VERSION : "v1";
 const audioRecordingLimit = 60000;
+
+// Safari (16.4+) exposes a page-global AudioSession whose category WebKit
+// otherwise flips to playback-only when TTS/<audio> plays, after which
+// getUserMedia throws "AudioSession category is not compatible with audio
+// capture". Pinning it to "play-and-record" keeps mic capture available even
+// after audio playback. No-op where the API is unsupported (Chrome/Firefox).
+function ensurePlayAndRecordAudioSession() {
+  try {
+    if (typeof navigator !== "undefined" && navigator.audioSession) {
+      navigator.audioSession.type = "play-and-record";
+    }
+  } catch (error) {
+    logger.warn(`Failed to set audioSession type: ${error}`);
+  }
+}
 export default function useRecognition(props = {}) {
   const {
     currentPhraseText,
@@ -98,6 +145,12 @@ export default function useRecognition(props = {}) {
       throw e;
     }
   }
+
+  // Set as early as the exercise mounts, before any TTS playback can claim a
+  // playback-only session on Safari.
+  useEffect(() => {
+    ensurePlayAndRecordAudioSession();
+  }, []);
   useEffect(() => {
     function onConnect() {
       hasAlertedConnectionErrorRef.current = false;
@@ -105,9 +158,13 @@ export default function useRecognition(props = {}) {
       // socket.io.engine.transport.name is "polling" here only when the
       // websocket attempt failed and it fell back - the clearest signal we
       // have that a student couldn't connect via websocket.
+      const transport = socket.io.engine.transport.name;
       trackConnectionDiagnostics("speech_recognition_socket_connected", {
-        A4_transport: socket.io.engine.transport.name
+        A4_transport: transport
       });
+      if (transport === "polling") {
+        recognitionAlert("Using a slower backup connection for speech - ask your school's IT team to allow WebSocket connections.", "warning");
+      }
     }
     function onDisconnect() {
       setIsSocketConnected(false);
@@ -151,9 +208,7 @@ export default function useRecognition(props = {}) {
     }
     function onConnectError(error) {
       console.error(error);
-      trackConnectionDiagnostics("speech_recognition_connect_error", {
-        A4_error_message: `${error?.message}`
-      });
+      trackConnectionDiagnostics("speech_recognition_connect_error", describeConnectError(error));
       // Without this, a blocked/failed connection (e.g. a school network
       // firewall blocking the websocket) leaves the mic button silently
       // disabled with no feedback to the student.
@@ -342,6 +397,8 @@ export default function useRecognition(props = {}) {
         }
       };
       if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        // Re-assert in case TTS playback downgraded the session since mount.
+        ensurePlayAndRecordAudioSession();
         navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).then(() => {
           isStartingRef.current = false;
           // socket.connected is checked directly (not the isSocketConnected

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1421",
+  "version": "0.1.1423",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -83,7 +83,7 @@
     "react-swipeable-views-utils": "^0.14.0",
     "regenerator-runtime": "^0.14.1",
     "rehype-raw": "^7.0.0",
-    "socket.io-client": "^4.7.1",
+    "socket.io-client": "^4.8.3",
     "styled-components": "^6.3.8",
     "tss-react": "^4.9.16",
     "uifx": "^2.0",