@nualang/nualang-ui-components 0.1.1412 → 0.1.1413

package/dist/Dialogs/QuickCreateChatbotDialog/QuickCreateChatbotDialog.js

@@ -1,10 +1,14 @@
-import { useState, useEffect, forwardRef, useMemo, createElement } from "react";
-import { TextField, MenuItem, ListSubheader, Box, Paper, Typography } from "@mui/material";
-import { ForumRounded, QuizRounded, ImageRounded, SentimentSatisfiedRounded, CheckRounded } from "@mui/icons-material";
+import { useState, useEffect, forwardRef, createElement } from "react";
+import { TextField, MenuItem, ListSubheader, Box, Paper, Typography, Grid, Button, Avatar } from "@mui/material";
+import { ForumRounded, QuizRounded, ImageRounded, SentimentSatisfiedRounded, CheckRounded, Person } from "@mui/icons-material";
 import { useTheme, alpha } from "@mui/material/styles";
 import { keyframes } from "@emotion/react";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import ChatbotNualaAnimation from "../../Misc/QuickCreateNualaAnimations/ChatbotNualaAnimation";
+import VoiceSelector from "../../Forms/VoiceSelector/VoiceSelector";
+import { findVoice, pickRandomVoice } from "../../utils/voices";
+import { makeStyles } from "tss-react/mui";
+import AvatarSelector from "../../Misc/AvatarSelector/AvatarSelector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BOT_NAME_MAX_LENGTH = 100;
 const peekAnimation = keyframes`
@@ -14,6 +18,18 @@ const peekAnimation = keyframes`
   67%  { transform: translateX(-150px) rotate(75deg); }
   100% { transform: translateX(-150px) rotate(75deg); }
 `;
+const useStyles = makeStyles()(theme => ({
+  avatar: {
+    width: 70,
+    height: 70,
+    marginBottom: theme.spacing(2),
+    cursor: "pointer"
+  },
+  avatarIcon: {
+    width: "80%",
+    height: "80%"
+  }
+}));
 const ChatbotDialogPaper = /*#__PURE__*/forwardRef(function ChatbotDialogPaper({
   children,
   className,
@@ -378,7 +394,11 @@ export default function QuickCreateChatbotDialog({
   topicDifficulty,
   topicPicture,
   defaultNumberOfQuestions = 5,
-  voices = []
+  voices = [],
+  handleSpeak,
+  isUserInternal = false,
+  avatars,
+  learnLang
 }) {
   const [botTitle, setBotTitle] = useState("");
   const [difficulty, setDifficulty] = useState(topicDifficulty || "");
@@ -387,6 +407,14 @@ export default function QuickCreateChatbotDialog({
   const [riveFile, setRiveFile] = useState("");
   const [numberOfQuestions, setNumberOfQuestions] = useState(defaultNumberOfQuestions);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedVoice, setSelectedVoice] = useState(null);
+  const [selectedVoiceLanguageCode, setSelectedVoiceLanguageCode] = useState(null);
+  const [selectedVoicePitch, setSelectedVoicePitch] = useState(null);
+  const [botPicture, setBotPicture] = useState("");
+  const [avatarSelector, setAvatarSelector] = useState(false);
+  const {
+    classes
+  } = useStyles();
 
   // Keep the questions field in sync if the default changes while closed.
   useEffect(() => {
@@ -408,31 +436,31 @@ export default function QuickCreateChatbotDialog({
     setTemplateId("");
     setNumberOfQuestions(defaultNumberOfQuestions);
     handleClose();
+    // Cleared so the next open seeds a fresh random voice.
+    setSelectedVoice(null);
+    setSelectedVoiceLanguageCode(null);
+    setSelectedVoicePitch(null);
+    setBotPicture("");
+    setAvatarSelector(false);
+  };
+  const handleAvatarSelection = value => {
+    setBotPicture(value);
+    setAvatarSelector(false);
   };
-  const voicesArray = useMemo(() => {
-    return Object.entries(voices).flatMap(([key, dialect]) => {
-      if (!dialect?.voiceOptions || !Array.isArray(dialect.voiceOptions)) {
-        return [];
-      }
-      return dialect.voiceOptions.filter(voice => voice?.name) // Validate required properties
-      .map(voice => ({
-        voice,
-        dialect,
-        key
-      }));
-    });
-  }, [voices]);
 
-  // exclude legacy for random selection
-  const nonLegacyVoicePool = voicesArray.filter(v => !v.voice?.legacy && !v.legacy);
-  const voicePool = nonLegacyVoicePool.length > 0 ? nonLegacyVoicePool : voicesArray;
-  const randomIndex = Math.floor(Math.random() * voicePool.length);
-  const randomVoiceObj = voicePool[randomIndex] || {};
-  const {
-    voice: randomVoice,
-    dialect
-  } = randomVoiceObj;
-  const hasAvailableVoice = Boolean(randomVoice?.name && dialect?.languageCode);
+  // ActorForm assigns each actor a random voice on mount; standalone, the same
+  // seeding happens here each time the dialog opens with nothing chosen yet.
+  useEffect(() => {
+    if (!open || selectedVoice) return;
+    const picked = pickRandomVoice(voices);
+    if (!picked) return;
+    setSelectedVoice(picked.voice.name);
+    setSelectedVoiceLanguageCode(picked.dialect.languageCode);
+    setSelectedVoicePitch(null);
+    setBotPicture(picked.voice.userImage || "");
+  }, [open, selectedVoice, voices]);
+  const selectedVoiceOption = findVoice(voices, selectedVoice)?.voice;
+  const hasAvailableVoice = Boolean(selectedVoice && selectedVoiceLanguageCode);
   const isValid = Boolean(botTitle.trim()) && Boolean(difficulty) && Boolean(templateId) && Boolean(template && template.botId === templateId) && Number(numberOfQuestions) > 0 && hasAvailableVoice;
   const handleSubmit = async () => {
     if (!isValid) return;
@@ -449,10 +477,11 @@ export default function QuickCreateChatbotDialog({
         selectedTemplate: templateId,
         numberOfQuestions: Number(numberOfQuestions),
         courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
-        voice: randomVoice.name,
-        voiceLanguageCode: dialect.languageCode,
-        name: randomVoice.name,
-        botAvatar: randomVoice.userImage,
+        voice: selectedVoice,
+        voiceLanguageCode: selectedVoiceLanguageCode,
+        name: selectedVoice,
+        voicePitch: selectedVoicePitch,
+        botAvatar: botPicture,
         isChallengeBot: false,
         isDynamicResponsesEnabled: "enable",
         picture: topicPicture || template.picture
@@ -467,7 +496,7 @@ export default function QuickCreateChatbotDialog({
       setIsLoading(false);
     }
   };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
+  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: open,
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
@@ -476,7 +505,7 @@ export default function QuickCreateChatbotDialog({
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: ChatbotDialogPaper,
-    children: /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsxs(Box, {
       display: "flex",
       flexDirection: "column",
       gap: 1,
@@ -537,7 +566,90 @@ export default function QuickCreateChatbotDialog({
         },
         onKeyDown: e => e.key === "Enter" && handleSubmit(),
         margin: "normal"
+      }), /*#__PURE__*/_jsxs(Grid, {
+        size: 12,
+        sx: {
+          mt: 1
+        },
+        children: [botPicture ? /*#__PURE__*/_jsx(Avatar, {
+          "aria-label": selectedVoiceOption?.name,
+          src: botPicture,
+          className: classes.avatar,
+          onClick: () => setAvatarSelector(true),
+          alt: ""
+        }) : /*#__PURE__*/_jsx(Avatar, {
+          "aria-label": selectedVoiceOption?.name,
+          sx: theme => ({
+            backgroundColor: theme.palette.mode === "dark" ? "white" : "",
+            color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
+          }),
+          className: classes.avatar,
+          onClick: () => setAvatarSelector(true),
+          alt: "",
+          children: /*#__PURE__*/_jsx(Person, {
+            className: classes.avatarIcon
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          color: "primary",
+          component: "span",
+          onClick: () => setAvatarSelector(true),
+          children: t("choose_avatar")
+        }), /*#__PURE__*/_jsx(VoiceSelector, {
+          id: "voiceSelector",
+          "data-cy": "voiceSelector",
+          name: "voiceSelector",
+          label: t("bot_voice"),
+          value: selectedVoice || "",
+          margin: "normal",
+          variant: "outlined",
+          fullWidth: true,
+          required: learnLang !== "irish",
+          t: t,
+          voices: voices,
+          onChange: e => {
+            if (e && e.target && e.target.value) {
+              const selectedVoice = e.target.value;
+              const languageCode = e.target.languageCode;
+              setSelectedVoice(selectedVoice);
+              handleSpeak?.({
+                text: selectedVoice,
+                learnLanguage: learnLang,
+                voiceName: selectedVoice,
+                languageCode
+              });
+              setSelectedVoiceLanguageCode(languageCode);
+              setSelectedVoicePitch(null);
+              setBotPicture(e.target.picture);
+            }
+          },
+          onVoicePitchChange: e => {
+            if (e && e.target) {
+              setSelectedVoicePitch(e.target.value);
+              handleSpeak?.({
+                text: selectedVoiceLanguageCode ? t("voice_pitch_example", {
+                  name: selectedVoice,
+                  lng: selectedVoiceLanguageCode?.substring(0, 2)
+                }) : selectedVoice,
+                learnLanguage: learnLang,
+                voiceName: selectedVoice,
+                languageCode: selectedVoiceLanguageCode,
+                pitch: e.target.value
+              });
+            }
+          },
+          voicePitch: selectedVoicePitch,
+          isUserInternal: isUserInternal,
+          handleSpeak: handleSpeak,
+          learnLang: learnLang
+        })]
       })]
-    })
+    }), /*#__PURE__*/_jsx(AvatarSelector, {
+      t: t,
+      open: avatarSelector,
+      avatars: avatars,
+      picture: botPicture,
+      handleClose: () => setAvatarSelector(false),
+      handleSubmit: value => handleAvatarSelection(value)
+    })]
   });
 }

package/dist/Dialogs/QuickCreateScenarioDialog/QuickCreateScenarioDialog.js

@@ -330,7 +330,6 @@ export default function QuickCreateScenarioDialog({
             isUserInternal: isUserInternal,
             handleSpeak: handleSpeak,
             avatars: avatars,
-            hidePitch: true,
             disabled: isLoading
           })
         }), /*#__PURE__*/_jsx(Grid, {

package/dist/Exercises/ListenAndSpeak/ListenAndSpeak.js

@@ -322,7 +322,7 @@ function ListenAndSpeak({
     checked,
     setChecked,
     setIsAssignmentExercise,
-    isTourFinished
+    definitionText
   } = exerciseState;
   useEffect(() => {
     if (currentPhrase?.phrase) {
@@ -435,18 +435,6 @@ function ListenAndSpeak({
     question = questions[0];
     image = question.image || null;
   }
-  const definitionText = (() => {
-    if (!question) return "";
-    if (question.definitions?.length > 0) {
-      const raw = question.definitions[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    if (question.translations?.length > 0) {
-      const raw = question.translations[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    return "";
-  })();
   const handleMoreTranslations = () => {
     setViewMoreTranslations(true);
   };
@@ -471,11 +459,6 @@ function ListenAndSpeak({
   const goBackToAssignment = () => {
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
-  useEffect(() => {
-    if (open && definitionText && definitionText !== "" && !isCompletionModalOpen && !isCloseModalOpen && !isInProgressModalOpen && learnLang && learnLang !== "irish" && !muteSound && isTourFinished) {
-      speak(definitionText, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-    }
-  }, [currentPhrase, open, isTourFinished]);
   const NualaSpeakingAnimation = (voiceMap.get(voice) || {}).speakingImage || null;
   return /*#__PURE__*/_jsxs(Dialog, {
     fullScreen: true,

package/dist/Exercises/Meaning/Meaning.js

@@ -217,7 +217,7 @@ function Meaning({
     handleCloseClicked,
     handleTranslationTourFinished,
     setIsAssignmentExercise,
-    isTourFinished
+    definitionText
   } = exerciseState;
   const [selectedPhrase, setSelectedPhrase] = useState(null);
   const [phraseOptions, setPhraseOptions] = useState([]);
@@ -353,18 +353,6 @@ function Meaning({
     question = questions[0];
     image = question.image || null;
   }
-  const definitionText = (() => {
-    if (!question) return "";
-    if (question.definitions?.length > 0) {
-      const raw = question.definitions[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    if (question.translations?.length > 0) {
-      const raw = question.translations[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    return "";
-  })();
   const {
     voice,
     voiceLanguageCode,
@@ -410,11 +398,6 @@ function Meaning({
     navigate(`/classrooms/${classroomId}#Assignments`);
   };
   const isSubmitDisabled = !selectedPhrase || showResult;
-  useEffect(() => {
-    if (open && definitionText && definitionText !== "" && !isCompletionModalOpen && !isCloseModalOpen && !isInProgressModalOpen && learnLang && learnLang !== "irish" && !isReadWriteModeStudent && !muteSound && isTourFinished) {
-      speak(definitionText, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-    }
-  }, [currentPhrase, open, isTourFinished]);
   const NualaSpeakingAnimation = (voiceMap.get(voice) || {}).speakingImage || null;
   return /*#__PURE__*/_jsxs(Dialog, {
     fullScreen: true,

package/dist/Exercises/Translator/Translator.js

@@ -143,18 +143,40 @@ function Transition(props) {
     ...props
   });
 }
+const getMatchingTranslationWords = (translationWords, translations, removeExtraWhiteSpaces) => {
+  if (!translations || !translations.length) return [];
+  const splitTranslations = translations.map(translation => removeExtraWhiteSpaces(translation ?? "").split(" "));
+  const attemptWords = translationWords.map(word => removeAllSymbols(word.text).toLowerCase());
+  const attemptJoined = attemptWords.join(" ");
+  const exactMatchIndex = splitTranslations.findIndex(words => words.map(w => removeAllSymbols(w).toLowerCase()).join(" ") === attemptJoined);
+  if (exactMatchIndex > -1) {
+    return splitTranslations[exactMatchIndex];
+  }
+
+  // No exact match (attempt is incomplete or wrong) - fall back to whichever
+  // translation shares the most words with the attempt at the same
+  // position, so feedback is still as helpful as possible.
+  let bestIndex = 0;
+  let bestScore = -1;
+  splitTranslations.forEach((words, translationIndex) => {
+    const score = attemptWords.filter((word, wordIndex) => words[wordIndex] && removeAllSymbols(words[wordIndex]).toLowerCase() === word).length;
+    if (score > bestScore) {
+      bestScore = score;
+      bestIndex = translationIndex;
+    }
+  });
+  return splitTranslations[bestIndex];
+};
 const WordBankButton = /*#__PURE__*/forwardRef(({
   word,
   index,
-  question,
-  removeExtraWhiteSpaces,
+  translationWordList,
   translationWords,
   setTranslationWords,
   classes,
   handleSelectInAnswerBox,
   checkAnswer
 }, ref) => {
-  const translationWordList = question && question.translations && question.translations.length ? removeExtraWhiteSpaces(question.translations[0]).split(" ") : [];
   const key = `${word.text}${word.id}`;
   const isWordCorrect = translationWordList[index] && removeAllSymbols(word.text) === removeAllSymbols(translationWordList[index]);
   const onButtonClick = () => {
@@ -495,7 +517,7 @@ function Translator({
     question = questions[0];
     image = question.image || null;
   }
-  const translationWordList = question && question.translations && question.translations.length ? removeExtraWhiteSpaces(question.translations[0]).split(" ") : [];
+  const translationWordList = question && question.translations && question.translations.length ? getMatchingTranslationWords(translationWords, question.translations, removeExtraWhiteSpaces) : [];
   const {
     voice,
     voiceLanguageCode,
@@ -798,9 +820,7 @@ function Translator({
                     "data-cy": "word-bank-button",
                     word: word,
                     index: index,
-                    question: question,
-                    currentPhrase: currentPhrase,
-                    removeExtraWhiteSpaces: removeExtraWhiteSpaces,
+                    translationWordList: translationWordList,
                     translationWords: translationWords,
                     setTranslationWords: setTranslationWords,
                     classes: classes,