@nualang/nualang-ui-components 0.1.1427 → 0.1.1428

package/dist/Chat/Messages/Message/Message.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { keyframes } from "@emotion/react";
 import { makeStyles } from "tss-react/mui";
 import { useTheme } from "@mui/material/styles";
 import Avatar from "@mui/material/Avatar";
@@ -15,14 +16,22 @@ import UpdateIcon from "@mui/icons-material/Create";
 import Button from "@mui/material/Button";
 import HoverText from "../../../Misc/HoverText/HoverText";
 import VoiceMessage from "../../VoiceMessage/VoiceMessage";
-import { Checkbox, FormGroup, FormControlLabel, Box } from "@mui/material";
+import { Checkbox, FormGroup, FormControlLabel, Box, Collapse } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import Grid from "@mui/material/Grid";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import AiExperienceIcon from "../../../Misc/AiExperienceIcon/AiExperienceIcon";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
+import { normaliseCorrection } from "../../../utils/correction";
+
+// Draws the eye to the correction icon when it first appears, then settles.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const correctionShine = keyframes`
+  0%, 100% { opacity: 1; transform: scale(1); filter: brightness(1); }
+  50% { opacity: 0.85; transform: scale(1.2); filter: brightness(1.7); }
+`;
 const useStyles = makeStyles()((theme, {
   isMyMessage,
   isButton,
@@ -47,6 +56,35 @@ const useStyles = makeStyles()((theme, {
     right: 0,
     margin: 4
   },
+  correctionToggle: {
+    color: theme.palette.mode === "dark" ? theme.palette.success.light : theme.palette.success.dark,
+    animation: `${correctionShine} 1.4s ease-in-out 3`
+  },
+  correctionDetail: {
+    // width:0 + minWidth:100% keeps this out of the column's max-content calculation,
+    // so revealing a long correction cannot stretch the chat bubble beside it.
+    width: 0,
+    minWidth: "100%",
+    overflowWrap: "anywhere",
+    marginTop: theme.spacing(0.5),
+    paddingLeft: theme.spacing(1.5),
+    borderLeft: `3px solid ${theme.palette.mode === "dark" ? theme.palette.success.light : theme.palette.success.dark}`,
+    "@media print": {
+      "-webkit-print-color-adjust": "exact",
+      "print-color-adjust": "exact",
+      "page-break-inside": "avoid"
+    }
+  },
+  correctionOriginal: {
+    display: "block",
+    textDecoration: "line-through",
+    color: theme.palette.text.secondary
+  },
+  correctionCorrected: {
+    display: "block",
+    fontWeight: 600,
+    color: theme.palette.mode === "dark" ? theme.palette.success.light : theme.palette.success.dark
+  },
   message: {
     display: "flex",
     maxWidth: 500,
@@ -308,7 +346,7 @@ export default function Message({
   isEdited = false,
   isDynamicResponsesEnabled,
   studentInappropriate,
-  isUserInternal
+  correction
 }) {
   const theme = useTheme();
   const messageContainerId = `message${messageIndex}`;
@@ -325,6 +363,12 @@ export default function Message({
     index,
     isHighlighted: isCurrentMessagePlaying
   });
+  // A correction describes what the student wrote, so it belongs on their own
+  // message - the same turn studentInappropriate is surfaced on. Excluded from the
+  // button and listen-only variants, which have nowhere sensible to put it.
+  const safeCorrection = isMyMessage && !isButton && !isListenOnly ? normaliseCorrection(correction) : null;
+  const showCorrection = Boolean(safeCorrection);
+  const [correctionOpen, setCorrectionOpen] = useState(false);
   const showPhonetics = learnLang === "chinese" || learnLang === "japanese";
   const [translation, setTranslation] = useState({
     translatedText: "",
@@ -595,9 +639,9 @@ export default function Message({
               })
             })]
           })
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/_jsxs("div", {
           className: classes.additionalInfo,
-          children: !isLivePlayer && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!isLivePlayer && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx("div", {
               children: isCurrentMessagePlaying ? /*#__PURE__*/_jsx(Tooltip, {
                 title: t("stop_speaking"),
@@ -670,6 +714,49 @@ export default function Message({
               className: classes.visuallyHidden,
               children: liveMessage
             })]
+          }), showCorrection && /*#__PURE__*/_jsx(Tooltip, {
+            title: t("language_correction"),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "inherit",
+              size: "small",
+              onClick: () => setCorrectionOpen(open => !open),
+              "aria-expanded": correctionOpen,
+              "aria-label": "View correction",
+              "data-cy": "message-correction-toggle",
+              className: classes.correctionToggle,
+              sx: {
+                border: "1px solid transparent",
+                "&:hover": {
+                  border: `1px solid ${theme.palette.primary.main}`
+                }
+              },
+              children: /*#__PURE__*/_jsx(AutoFixHighIcon, {
+                fontSize: "inherit",
+                "aria-hidden": "true"
+              })
+            })
+          })]
+        }), showCorrection &&
+        /*#__PURE__*/
+        // Deliberately a sibling of the bubble rather than a child: highlightSpeechText
+        // index-maps every [data-text] node inside #messageN onto a speech mark, so any
+        // extra text in there desyncs word highlighting during playback. Plain
+        // Typography, never HoverText, for the same reason.
+        _jsx(Collapse, {
+          in: correctionOpen,
+          unmountOnExit: true,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: classes.correctionDetail,
+            "data-cy": "message-correction",
+            children: [safeCorrection.original && /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              className: classes.correctionOriginal,
+              children: safeCorrection.original
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              className: classes.correctionCorrected,
+              children: safeCorrection.corrected
+            })]
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: classes.actions,

package/dist/Chat/Messages/Message/Message.test.js

@@ -52,4 +52,113 @@ describe("Message replay", () => {
     }));
     expect(speak.mock.calls[0][4]).toBeUndefined();
   });
+});
+describe("Message correction", () => {
+  afterEach(cleanup);
+  const correction = {
+    original: "Yo tengo 12 anos",
+    corrected: "Tengo 12 a\u00f1os"
+  };
+  const toggle = () => document.querySelector("[data-cy='message-correction-toggle']");
+  const block = () => document.querySelector("[data-cy='message-correction']");
+  it("offers the correction on the student's own message but keeps it collapsed", () => {
+    renderMessage({
+      isMyMessage: true,
+      correction
+    });
+    expect(toggle()).not.toBeNull();
+    // Collapse unmounts its children, so the detail is genuinely absent until asked for.
+    expect(screen.queryByText("Tengo 12 a\u00f1os")).toBeNull();
+  });
+  it("reveals the correction when the student asks for it", () => {
+    renderMessage({
+      isMyMessage: true,
+      correction
+    });
+    fireEvent.click(toggle());
+    expect(screen.getByText("Tengo 12 a\u00f1os")).toBeTruthy();
+    expect(screen.getByText("Yo tengo 12 anos")).toBeTruthy();
+  });
+  it("offers nothing when there is no correction", () => {
+    renderMessage({
+      isMyMessage: true
+    });
+    expect(toggle()).toBeNull();
+  });
+  it("offers nothing for an incomplete or no-op correction", () => {
+    renderMessage({
+      isMyMessage: true,
+      correction: {
+        original: "a"
+      }
+    });
+    expect(toggle()).toBeNull();
+    cleanup();
+    renderMessage({
+      isMyMessage: true,
+      correction: {
+        original: "Tengo",
+        corrected: "Tengo"
+      }
+    });
+    expect(toggle()).toBeNull();
+  });
+
+  // The correction is about what the student wrote, so it must not appear on the
+  // bot's reply even if one is somehow passed through.
+  it("never offers a correction on the bot's message", () => {
+    renderMessage({
+      isMyMessage: false,
+      correction
+    });
+    expect(toggle()).toBeNull();
+  });
+
+  // Regression guard: highlightSpeechText index-maps every [data-text] node inside
+  // #messageN onto a speech mark. If the correction moves inside that container, or
+  // starts using HoverText, word highlighting silently desyncs during playback.
+  it("keeps the correction outside the speech-highlight container", () => {
+    renderMessage({
+      isMyMessage: true,
+      correction
+    });
+    fireEvent.click(toggle());
+    expect(document.getElementById("message0").contains(block())).toBe(false);
+    expect(block().querySelectorAll("[data-text]").length).toBe(0);
+  });
+  it("puts the toggle in the same row as speak and translate", () => {
+    renderMessage({
+      isMyMessage: true,
+      correction
+    });
+    const speakButton = screen.getByRole("button", {
+      name: /Speak message/i
+    });
+    expect(toggle().parentElement).toBe(speakButton.closest("div").parentElement);
+  });
+
+  // Revealing a long correction must not stretch the chat bubble beside it, so the
+  // detail is kept out of the column's max-content calculation.
+  it("keeps the correction detail out of the bubble's width calculation", () => {
+    renderMessage({
+      isMyMessage: true,
+      correction
+    });
+    fireEvent.click(toggle());
+    const detail = block();
+    expect(detail).not.toBeNull();
+    expect(document.getElementById("message0").contains(detail)).toBe(false);
+  });
+  it("speaks only the message text, never the correction", () => {
+    const speak = renderMessage({
+      isMyMessage: true,
+      correction
+    });
+    fireEvent.click(toggle());
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+    expect(speak.mock.calls[0][0]).toBe("Kia ora");
+    expect(JSON.stringify(speak.mock.calls[0])).not.toContain("Tengo 12 a\u00f1os");
+  });
 });

package/dist/Chat/Messages/Messages.js

@@ -261,7 +261,7 @@ function Messages({
               ...m,
               ...otherProps
             }, `messy_${i}`))]
-          });
+          }, `messwrap_${i}`);
         })]
       })
     }), afterElements]

package/dist/Chat/TopBar/TopBar.js

@@ -59,7 +59,7 @@ export default function TopBar({
   return /*#__PURE__*/_jsxs(Paper, {
     square: true,
     className: classes.paper,
-    component: "banner",
+    component: "header",
     children: [/*#__PURE__*/_jsxs(Toolbar, {
       className: classes.root,
       children: [handleBack && /*#__PURE__*/_jsx(Paper, {

package/dist/Dialogs/ExerciseMenu/ExerciseMenu.js

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { Dialog, DialogContent, Button, Tooltip } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import { randomId } from "../../utils/index";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   buttonStyle: {
     margin: theme.spacing(1, 0, 1, 0)
@@ -11,7 +11,8 @@ const useStyles = makeStyles()(theme => ({
 function ExerciseMenu({
   open,
   handleClose,
-  actions = []
+  actions = [],
+  children = null
 }) {
   const {
     classes
@@ -39,9 +40,9 @@ function ExerciseMenu({
     role: "status",
     "aria-live": "polite",
     onKeyDown: handleKeyDown,
-    children: /*#__PURE__*/_jsx(DialogContent, {
+    children: /*#__PURE__*/_jsxs(DialogContent, {
       id: "exercise-menu-dialog-content",
-      children: actions.map((action = {}, i) => {
+      children: [children, actions.map((action = {}, i) => {
         const {
           dataCypress,
           text,
@@ -85,7 +86,7 @@ function ExerciseMenu({
             children: text
           })
         }, `exermenu_${randomId()}${i}`);
-      })
+      })]
     })
   });
 }

package/dist/Dialogs/ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise.js

@@ -1,6 +1,7 @@
 import ExerciseMenu from "../../ExerciseMenu";
 import { useLocation } from "react-router";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/material";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function CompletedExerciseMenu({
   open,
   close,
@@ -12,7 +13,8 @@ function CompletedExerciseMenu({
   inTopic = false,
   hasNextGame,
   handleNextGame,
-  goBackToAssignment
+  goBackToAssignment,
+  corrections = []
 }) {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -54,7 +56,49 @@ function CompletedExerciseMenu({
       color: "",
       onClick: goBack,
       disabled: false
-    }])]
+    }])],
+    children: corrections.length > 0 && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        mb: 2
+      },
+      "data-cy": "completed-corrections",
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "subtitle2",
+        component: "h3",
+        sx: {
+          fontWeight: "bold"
+        },
+        children: t("language_corrections_to_review")
+      }), corrections.map(correction => /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          mt: 1
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
+          sx: {
+            textDecoration: "line-through",
+            color: "text.secondary"
+          },
+          children: correction.original
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
+          sx: {
+            mx: 0.5,
+            color: "text.secondary"
+          },
+          children: "\u2192"
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          component: "span",
+          sx: {
+            fontWeight: 600
+          },
+          children: correction.corrected
+        })]
+      }, `${correction.original}|${correction.corrected}`))]
+    })
   });
 }
 export default CompletedExerciseMenu;

package/dist/Dialogs/ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise.test.js

@@ -0,0 +1,44 @@
+import { render, screen, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
+import { MemoryRouter } from "react-router";
+import CompletedExcercise from "./CompletedExcercise";
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderMenu = (overrides = {}) => render(/*#__PURE__*/_jsx(MemoryRouter, {
+  children: /*#__PURE__*/_jsx(CompletedExcercise, {
+    open: true,
+    t: k => k,
+    close: () => {},
+    goBack: () => {},
+    restartExcercise: () => {},
+    viewReport: () => {},
+    ...overrides
+  })
+}));
+describe("CompletedExcercise corrections recap", () => {
+  afterEach(cleanup);
+  it("lists each correction collected during the attempt", () => {
+    renderMenu({
+      corrections: [{
+        original: "Yo tengo",
+        corrected: "Tengo"
+      }, {
+        original: "anos",
+        corrected: "años"
+      }]
+    });
+    expect(screen.getByText("Yo tengo")).toBeTruthy();
+    expect(screen.getByText("Tengo")).toBeTruthy();
+    expect(screen.getByText("anos")).toBeTruthy();
+    expect(screen.getByText("años")).toBeTruthy();
+  });
+  it("renders no recap section when there were no corrections", () => {
+    renderMenu({
+      corrections: []
+    });
+    expect(document.querySelector("[data-cy='completed-corrections']")).toBeNull();
+  });
+  it("renders no recap section when the prop is omitted entirely", () => {
+    renderMenu();
+    expect(document.querySelector("[data-cy='completed-corrections']")).toBeNull();
+  });
+});

package/dist/Exercises/Bot/Bot.js

@@ -22,6 +22,7 @@ import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import NualaSignInImage from "../../img/nuala_sign_in.svg";
 import { startJoyrideWhenReady } from "../../utils/joyride";
+import { normaliseCorrection } from "../../utils/correction";
 import { useTheme } from "@mui/material/styles";
 import config from "../../config";
 import { useNavigate } from "react-router";
@@ -243,6 +244,25 @@ function Bot({
     setIsAssignmentExercise
   } = exerciseState;
   const currentPhrase = botMessages.length > 0 ? botMessages[botMessages.length - 1].text : "N/A";
+
+  // Corrections collected across the attempt, for the completion recap. Deduped so a
+  // repeated mistake is listed once. Re-validated on the way in, so the recap lists
+  // exactly what Message showed inline rather than trusting whatever a saved attempt
+  // happens to carry.
+  const collectedCorrections = [];
+  const seenCorrections = new Set();
+  botMessages.forEach(message => {
+    const correction = message.isMyMessage ? normaliseCorrection(message.correction) : null;
+    if (!correction) {
+      return;
+    }
+    const key = `${correction.original}|${correction.corrected}`;
+    if (seenCorrections.has(key)) {
+      return;
+    }
+    seenCorrections.add(key);
+    collectedCorrections.push(correction);
+  });
   const joyrideSteps = [{
     content: /*#__PURE__*/_jsx("h2", {
       children: t("bot_exercise_welcome")
@@ -665,6 +685,7 @@ function Bot({
           })
         })
       }), /*#__PURE__*/_jsx(CompletedExcercise, {
+        corrections: collectedCorrections,
         open: isCompletionModalOpen,
         restartExcercise: handleRestartExercise,
         onClose: () => isCompletionModalOpen(false),

package/dist/Exercises/Bot/Bot.test.js

@@ -1,25 +1,120 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { render, within } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
 import { MemoryRouter } from "react-router";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Bot from "./Bot";
+
+// Lets a test drive the slice of exercise state the completion recap reads, while the
+// rest of the hook goes on behaving normally.
 import { jsx as _jsx } from "react/jsx-runtime";
+let exerciseStateOverrides = {};
+vi.mock("../../hooks/useExerciseState", async importOriginal => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    default: args => ({
+      ...actual.default(args),
+      ...exerciseStateOverrides
+    })
+  };
+});
+const renderBot = (props = {}) => {
+  const theme = createTheme();
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/_jsx(MemoryRouter, {
+      children: /*#__PURE__*/_jsx(Bot, {
+        learnLang: "spanish",
+        ...props
+      })
+    })
+  }));
+};
+beforeAll(() => {
+  // Messages scrolls the transcript on a timer after render; jsdom has no
+  // Element.prototype.scrollTo, so the timer would throw once messages exist.
+  Element.prototype.scrollTo = () => {};
+});
+beforeEach(() => {
+  exerciseStateOverrides = {};
+});
 describe("Bot", () => {
   it("renders without crashing", () => {
-    let props = {
-      learnLang: "spanish"
+    const {
+      unmount
+    } = renderBot();
+    unmount();
+  });
+  it("lists only real, deduped corrections in the completion recap", () => {
+    exerciseStateOverrides = {
+      isCompletionModalOpen: true,
+      botMessages: [{
+        isMyMessage: true,
+        text: "student turn one",
+        correction: {
+          original: "Yo tengo 12 anos",
+          corrected: "Tengo 12 años",
+          explanation: "Drop the pronoun."
+        }
+      }, {
+        isMyMessage: true,
+        text: "student turn two",
+        // Changes nothing, so there is nothing to review.
+        correction: {
+          original: "Buenos dias",
+          corrected: "Buenos dias"
+        }
+      }, {
+        isMyMessage: true,
+        text: "student turn three",
+        // Persisted without the corrected text - not showable.
+        correction: {
+          original: "sin corregir"
+        }
+      }, {
+        isMyMessage: true,
+        text: "student turn four",
+        // An accent fix on its own is a real correction and belongs in the recap.
+        correction: {
+          original: "dias",
+          corrected: "días"
+        }
+      }, {
+        isMyMessage: true,
+        text: "student turn five",
+        // The same mistake again, padded differently.
+        // Still carries the explanation that saved attempts were written with; it is
+        // ignored rather than rejected.
+        correction: {
+          original: " Yo tengo 12 anos ",
+          corrected: " Tengo 12 años ",
+          explanation: " Drop the pronoun. "
+        }
+      }, {
+        isMyMessage: false,
+        text: "bot turn",
+        // A correction on the bot's own turn is never the student's.
+        correction: {
+          original: "no es del alumno",
+          corrected: "nunca del alumno"
+        }
+      }]
     };
-    const theme = createTheme();
+
+    // The exercise body, recap included, only mounts while the exercise is open.
     const {
       unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(MemoryRouter, {
-        children: /*#__PURE__*/_jsx(Bot, {
-          ...props
-        })
-      })
-    }));
+    } = renderBot({
+      open: true
+    });
+    const recap = document.querySelector('[data-cy="completed-corrections"]');
+    expect(recap).not.toBeNull();
+    const inRecap = within(recap);
+    expect(inRecap.getAllByText("Tengo 12 años")).toHaveLength(1);
+    expect(inRecap.queryByText("Buenos dias")).toBeNull();
+    expect(inRecap.queryByText("sin corregir")).toBeNull();
+    expect(inRecap.getByText("días")).toBeTruthy();
+    expect(inRecap.queryByText("nunca del alumno")).toBeNull();
     unmount();
   });
 });

package/dist/hooks/useExerciseState.js

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router";
 import distance from "jaro-winkler";
 import { shuffle, removeAllSymbols, removeAllSymbolsFillInBlanks, formatMarkdownNewlines, localeCompare, localeCompareCase, removeExtraWhiteSpaces } from "../utils/index";
 import { botErrorMessage } from "../utils/constants";
+import { normaliseCorrection } from "../utils/correction";
 import { convertNumberToText, getLearnLangCode } from "../utils/languageHelpers";
 import { isSpaceFreeLanguage } from "./useLanguageTokens";
 import BotNualaImage from "../img/bot_nuala.svg";
@@ -1698,7 +1699,29 @@ export default function useExerciseState({
           if (clearAttemptAudio) {
             clearAttemptAudio();
           }
-          setBotMessages(prevMessages => prevMessages.filter(message => message.isLoading !== true));
+          const safeCorrection = normaliseCorrection(response.correction);
+          setBotMessages(prevMessages => {
+            const withoutLoading = prevMessages.filter(message => message.isLoading !== true);
+            if (!safeCorrection) {
+              return withoutLoading;
+            }
+            // The correction describes the student's own turn, so it is stamped onto
+            // their message rather than the reply that happens to carry it back.
+            let lastStudentIndex = -1;
+            for (let i = withoutLoading.length - 1; i >= 0; i -= 1) {
+              if (withoutLoading[`${i}`].isMyMessage) {
+                lastStudentIndex = i;
+                break;
+              }
+            }
+            if (lastStudentIndex === -1) {
+              return withoutLoading;
+            }
+            return withoutLoading.map((message, i) => i === lastStudentIndex ? {
+              ...message,
+              correction: safeCorrection
+            } : message);
+          });
           addBotMessage(response.reply, false, true);
           setIsFirstMessage(false);
         }

package/dist/hooks/useRecognition.js

@@ -102,6 +102,9 @@ export default function useRecognition(props = {}) {
   const streamRef = useRef();
   const serverErrorRef = useRef();
   const hasAlertedConnectionErrorRef = useRef(false);
+  // Set to the { capture, target } sample rates when a recording starts, so
+  // the no-transcript event can report them (they're locals of handleSuccess).
+  const negotiatedSampleRateRef = useRef(null);
   // Guards against a second click landing during the async start-up window,
   // before recognizing/isRecognizingDisabled state has re-rendered the button.
   const isStartingRef = useRef(false);
@@ -307,10 +310,24 @@ export default function useRecognition(props = {}) {
           closeAll(true);
           return;
         }
+
+        // Capture rate is whatever the AudioContext gave us (some devices,
+        // e.g. a Bluetooth headset mic in HFP mode, capture at 8kHz). Target
+        // 16kHz when we have at least that (downsampling keeps upload small),
+        // but never upsample - for a sub-16kHz source send it at its native
+        // rate instead. This keeps the declared sampleRateHertz and the actual
+        // audio in agreement, and guarantees target <= capture so
+        // downsampleBuffer never hits its "output rate > input rate" throw.
+        const captureSampleRate = audioContextRef.current?.sampleRate || 44100;
+        const targetSampleRate = Math.min(captureSampleRate, 16000);
+        negotiatedSampleRateRef.current = {
+          captureSampleRate,
+          targetSampleRate
+        };
         const gcloudConfig = {
           config: {
             encoding: "LINEAR16",
-            sampleRateHertz: 16000,
+            sampleRateHertz: targetSampleRate,
             languageCode: gcloudParams.languageCode || "en-US",
             profanityFilter: true,
             enableWordTimeOffsets: false,
@@ -362,11 +379,10 @@ export default function useRecognition(props = {}) {
           clearTimeout(firstAudioFrameTimeoutId);
           resolveFirstAudioFrame();
           const audioData = event.data;
-          let sampleRate = 44100; // Default sample rate
-          if (audioContextRef?.current?.sampleRate && audioContextRef?.current?.sampleRate !== 44100) {
-            sampleRate = audioContextRef.current.sampleRate;
-          }
-          const result = downsampleBuffer(audioData, sampleRate, 16000);
+          // Resample toward the same target the config declared. When capture
+          // already equals target (e.g. a native 16kHz or 8kHz source) this is
+          // an identity conversion to Int16 rather than a no-op passthrough.
+          const result = downsampleBuffer(audioData, captureSampleRate, targetSampleRate);
           socket.emit("binaryData", result, version);
         };
         if (window.MediaRecorder) {
@@ -500,7 +516,11 @@ export default function useRecognition(props = {}) {
       A6_machine_info: `${machineInfo}`,
       A7_user_language: `${language}`,
       A8_learn_language: `${learnLang}`,
-      A9_exercise: gameId ? `${exerciseName}-${gameId}` : `${exerciseName}`
+      A9_exercise: gameId ? `${exerciseName}-${gameId}` : `${exerciseName}`,
+      // A narrowband (e.g. 8kHz Bluetooth HFP) capture rate here helps confirm
+      // whether sub-16kHz devices correlate with no-transcript failures.
+      A10_capture_sample_rate: `${negotiatedSampleRateRef.current?.captureSampleRate ?? "unknown"}`,
+      A11_target_sample_rate: `${negotiatedSampleRateRef.current?.targetSampleRate ?? "unknown"}`
     };
     trackRecommendedEvent("speech_recognition_no_transcript", eventBody);
   };

package/dist/utils/correction.js

@@ -0,0 +1,21 @@
+// A language correction returned alongside a bot reply, as { original, corrected }.
+// Returns null for anything not worth showing, so callers can render on a single
+// truthiness check.
+//
+// Applied on both the write side (when the lambda response arrives) and the read
+// side (when rendering), so saved attempts from older or hand-edited data are
+// re-validated rather than trusted. Older saved attempts may still carry an
+// `explanation` field; it is simply ignored.
+export const normaliseCorrection = correction => {
+  if (!correction || typeof correction !== "object") return null;
+  const str = value => typeof value === "string" ? value.trim() : "";
+  const original = str(correction.original);
+  const corrected = str(correction.corrected);
+  if (!corrected) return null;
+  // A correction that changes nothing is noise.
+  if (original && original === corrected) return null;
+  return {
+    original,
+    corrected
+  };
+};

package/dist/utils/index.js

@@ -756,7 +756,15 @@ export const getMicrophoneInfo = async mediaDevices => {
 };
 export const downsampleBuffer = (buffer, sampleRate, outSampleRate) => {
   if (outSampleRate == sampleRate) {
-    return buffer;
+    // Server always expects LINEAR16 (Int16) PCM, so the Float32 worklet
+    // samples must still be converted even when no resampling is needed -
+    // previously this returned the raw Float32Array verbatim, which the
+    // server would then misinterpret as Int16 PCM.
+    var identityResult = new Int16Array(buffer.length);
+    for (var j = 0; j < buffer.length; j += 1) {
+      identityResult[j] = Math.max(-1, Math.min(1, buffer[j])) * 0x7fff;
+    }
+    return identityResult.buffer;
   }
   if (outSampleRate > sampleRate) {
     throw new Error("downsampling rate show be smaller than original sample rate");
@@ -774,7 +782,7 @@ export const downsampleBuffer = (buffer, sampleRate, outSampleRate) => {
       accum += buffer[i];
       count += 1;
     }
-    result[offsetResult] = Math.min(1, accum / count) * 0x7fff;
+    result[offsetResult] = Math.max(-1, Math.min(1, accum / count)) * 0x7fff;
     offsetResult += 1;
     offsetBuffer = nextOffsetBuffer;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1427",
+  "version": "0.1.1428",
   "type": "module",
   "main": "dist/index.js",
   "files": [