@nualang/nualang-ui-components 0.1.1357 → 0.1.1360

package/dist/Dialogs/SelectExercise/SelectExercise.js

@@ -11,6 +11,7 @@ function SelectExercise({
   courses,
   getCourseSections,
   getRoleplays,
+  getPhraseLists,
   handleCreateGame,
   username,
   courseSectionTopicId = ""
@@ -29,6 +30,7 @@ function SelectExercise({
         courses: courses,
         getCourseSections: getCourseSections,
         getRoleplays: getRoleplays,
+        getPhraseLists: getPhraseLists,
         username: username,
         handleCreateGame: handleCreateGame,
         t: t,

package/dist/Exercises/Meaning/Meaning.js

@@ -222,7 +222,7 @@ function Meaning({
       const correctPhrase = question.phrase;
       const otherPhrases = phrases.filter(p => p.phrase !== correctPhrase).map(p => p.phrase);
       shuffle(otherPhrases);
-      const distractors = otherPhrases.slice(0, 3);
+      const distractors = otherPhrases.slice(0, 4);
       const options = [correctPhrase, ...distractors].map((text, id) => ({
         text,
         id,

package/dist/Lists/CourseSelection/CourseSelection.js

@@ -10,6 +10,7 @@ function Course({
   index,
   getCourseSections,
   getRoleplays,
+  getPhraseLists,
   username,
   handleCreateGame,
   t,
@@ -99,6 +100,7 @@ function Course({
           isExerciseSelected: isExerciseSelected,
           setIsExerciseSelected: setIsExerciseSelected,
           getRoleplays: getRoleplays,
+          getPhraseLists: getPhraseLists,
           handleSelectExercise: handleSelectExercise,
           selectedExercises: selectedExercises,
           useCase: useCase,
@@ -116,6 +118,7 @@ function CourseSelection({
   courses,
   getCourseSections,
   getRoleplays,
+  getPhraseLists,
   username,
   handleCreateGame,
   t,
@@ -137,6 +140,7 @@ function CourseSelection({
       index: index,
       getCourseSections: getCourseSections,
       getRoleplays: getRoleplays,
+      getPhraseLists: getPhraseLists,
       username: username,
       handleCreateGame: handleCreateGame,
       t: t,

package/dist/Lists/ExerciseSelection/ExerciseSelection.js

@@ -3,15 +3,13 @@ import { ListSubheader, List, ListItemIcon, ListItemText, ListItemAvatar, Collap
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
-import HearingIcon from "@mui/icons-material/Hearing";
-import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
 import ForumIcon from "@mui/icons-material/Forum";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
 import RoleplaySelection from "../RoleplaySelection/RoleplaySelection";
+import PhraseListSelection from "../PhraseListSelection/PhraseListSelection";
+import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { CardInfoSectionItem } from "../../Cards/CardElements";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Exercise({
@@ -19,71 +17,51 @@ function Exercise({
   description,
   courseSectionTopicId,
   handleCreateGame,
-  section,
   t,
   isExerciseSelected,
-  setIsExerciseSelected,
   roleplays,
-  phrases,
   handleSelectExercise = null,
   useCase,
-  isCreator
+  getPhraseLists,
+  courseId,
+  sectionId,
+  topicId,
+  setIsExerciseSelected,
+  phrases
 }) {
-  const [listeningHidden, setListeningHidden] = useState(false);
-  const [translationHidden, setTranslationHidden] = useState(false);
-  const [pronunciationHidden, setPronunciationHidden] = useState(false);
   const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
+  const noPhrases = name.toLowerCase() === "phrases" && !phrases?.length && !getPhraseLists;
   const [roleplaysOpen, setRoleplaysOpen] = useState(noRoleplays ? false : true);
-  const handleToggleRoleplays = () => {
-    setRoleplaysOpen(!roleplaysOpen);
-  };
-  const handleExerciseSelected = () => {
-    setIsExerciseSelected(true);
-    handleCreateGame({
-      courseSectionTopicId: courseSectionTopicId,
-      exercise: name,
-      timer: 30,
-      answerOption: 0
-    });
+  const [phraseListsOpen, setPhraseListsOpen] = useState(noPhrases ? false : true);
+  const [hasPhraseListsAvailable, setHasPhraseListsAvailable] = useState(true);
+  const handlePhraseListsLoaded = count => {
+    if (count === 0) {
+      setHasPhraseListsAvailable(false);
+      setPhraseListsOpen(false);
+    }
   };
-  useEffect(() => {
-    section.topics.forEach(topic => {
-      if (topic.hiddenExercises && topic.hiddenExercises.includes("listening")) {
-        setListeningHidden(true);
-      }
-      if (topic.hiddenExercises && topic.hiddenExercises.includes("translation")) {
-        setTranslationHidden(true);
-      }
-      if (topic.hiddenExercises && topic.hiddenExercises.includes("pronunciation")) {
-        setPronunciationHidden(true);
-      }
-    });
-  }, [section]);
-  const isValidExercise = phrases.length >= 2 || name.toLowerCase() === "roleplays";
-  if (name.toLowerCase() === "listening" && listeningHidden || name.toLowerCase() === "translation" && translationHidden || name.toLowerCase() === "pronunciation" && pronunciationHidden) {
-    return null;
-  }
+  const noPhraseListsAvailable = name.toLowerCase() === "phrases" && !hasPhraseListsAvailable;
   return /*#__PURE__*/_jsxs(Tooltip, {
-    title: name === "roleplays" && noRoleplays ? t("topic_no_roleplays") : !isValidExercise ? t("minimum_two_phrases") : "",
+    title: (name === "roleplays" && noRoleplays ? t("topic_no_roleplays") : "") || (name === "phrases" && noPhrases ? t("topic_no_phrases") : "") || (noPhraseListsAvailable ? t("no_phrase_lists") : ""),
     children: [/*#__PURE__*/_jsxs(ListItemButton, {
       onClick: () => {
-        name.toLowerCase() === "roleplays" ? handleToggleRoleplays() : handleExerciseSelected();
+        if (name.toLowerCase() === "roleplays") {
+          setRoleplaysOpen(!roleplaysOpen);
+        } else if (name.toLowerCase() === "phrases") {
+          setPhraseListsOpen(!phraseListsOpen);
+        }
       },
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      disabled: isExerciseSelected || !isValidExercise || noRoleplays,
+      disabled: isExerciseSelected || noRoleplays || noPhrases || noPhraseListsAvailable,
       sx: theme => ({
         [theme.breakpoints.up("sm")]: {
           ml: 3.5
         }
       }),
-      children: [name.toLowerCase() === "listening" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(HearingIcon, {})
-      }), name.toLowerCase() === "translation" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(SwapHorizIcon, {})
-      }), name.toLowerCase() === "pronunciation" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(RecordVoiceOverIcon, {})
+      children: [name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(MenuBookIcon, {})
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
         children: /*#__PURE__*/_jsx(ForumIcon, {})
       }), /*#__PURE__*/_jsx(Box, {
@@ -92,13 +70,31 @@ function Exercise({
           primary: t(name),
           secondary: t(description)
         })
+      }), name.toLowerCase() === "phrases" && /*#__PURE__*/_jsx(ListItemIcon, {
+        children: phraseListsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
         children: roleplaysOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
-      }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(PlayCircleOutlineIcon, {
-          color: "primary"
-        })
       })]
+    }), name.toLowerCase() === "phrases" && getPhraseLists && /*#__PURE__*/_jsx(Collapse, {
+      in: phraseListsOpen,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/_jsx(Box, {
+        ml: 7,
+        children: /*#__PURE__*/_jsx(PhraseListSelection, {
+          getPhraseLists: getPhraseLists,
+          courseId: courseId,
+          sectionId: sectionId,
+          topicId: topicId,
+          handleCreateGame: handleCreateGame,
+          courseSectionTopicId: courseSectionTopicId,
+          t: t,
+          isExerciseSelected: isExerciseSelected,
+          setIsExerciseSelected: setIsExerciseSelected,
+          isExpanded: phraseListsOpen,
+          onPhraseListsLoaded: handlePhraseListsLoaded
+        })
+      })
     }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {
       in: roleplaysOpen,
       timeout: "auto",
@@ -135,6 +131,7 @@ function ExerciseList({
   useCase,
   handleStartExercise,
   isCreator,
+  getPhraseLists,
   ...otherProps
 }) {
   const courseSectionTopicId = `${courseId}|${sectionId}|${topicId}`;
@@ -161,6 +158,7 @@ function ExerciseList({
         useCase: useCase,
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
+        getPhraseLists: getPhraseLists,
         ...otherProps
       }, keyId);
     })
@@ -199,6 +197,7 @@ function Topic({
   handleStartExercise,
   isCreator,
   courseSectionTopicId,
+  getPhraseLists,
   ...otherProps
 }) {
   const theme = useTheme();
@@ -226,11 +225,8 @@ function Topic({
     }
   }, [courseSectionTopicId, courseId, sectionId, topicId]);
   const exercises = [{
-    name: "translation",
-    description: `translation_exercise_desc`
-  }, {
-    name: "listening",
-    description: `listening_exercise_desc`
+    name: "phrases",
+    description: `phrases_exercise_desc`
   }, {
     name: "roleplays",
     description: `roleplay_exercise_desc`
@@ -241,7 +237,7 @@ function Topic({
   const hasNonEmptyRoleplay = roleplays.some(roleplay => roleplay?.script?.length !== 0 && roleplay?.script?.some(line => line.text !== undefined));
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(Tooltip, {
-      title: phrases.length === 0 ? t("topic_no_phrases") : "",
+      title: !phrases?.length && !getPhraseLists ? t("topic_no_phrases") : "",
       placement: "top",
       children: [!isTopicHidden && /*#__PURE__*/_jsxs(ListItemButton, {
         ref: topicRef,
@@ -251,7 +247,7 @@ function Topic({
         justifyContent: "space-between",
         onClick: toggleExerciseList,
         "data-cy": "topic-list-item",
-        disabled: phrases.length === 0 && !hasNonEmptyRoleplay || isExerciseSelected,
+        disabled: !phrases?.length && !getPhraseLists && !hasNonEmptyRoleplay || isExerciseSelected,
         children: [isLargeScreen && /*#__PURE__*/_jsx(ListItemAvatar, {
           children: picture ? /*#__PURE__*/_jsx(Avatar, {
             src: picture,
@@ -329,6 +325,7 @@ function Topic({
           useCase: useCase,
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
+          getPhraseLists: getPhraseLists,
           ...otherProps
         })
       })]
@@ -352,6 +349,7 @@ function Section({
   handleStartExercise,
   isCreator,
   courseSectionTopicId,
+  getPhraseLists,
   ...otherProps
 }) {
   const root = {
@@ -390,7 +388,8 @@ function Section({
         useCase: useCase,
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
-        courseSectionTopicId: courseSectionTopicId
+        courseSectionTopicId: courseSectionTopicId,
+        getPhraseLists: getPhraseLists
       }, `${sectionId}-${topic.topicId}`))
     })
   });
@@ -410,6 +409,7 @@ function SectionList({
   handleStartExercise,
   isCreator,
   courseSectionTopicId,
+  getPhraseLists,
   ...otherProps
 }) {
   return /*#__PURE__*/_jsx(_Fragment, {
@@ -431,6 +431,7 @@ function SectionList({
         handleStartExercise: handleStartExercise,
         isCreator: isCreator,
         courseSectionTopicId: courseSectionTopicId,
+        getPhraseLists: getPhraseLists,
         ...otherProps
       }, section.sectionId);
     }) : /*#__PURE__*/_jsx(Typography, {
@@ -457,6 +458,7 @@ function ExerciseSelection({
   useCase,
   handleStartExercise,
   courseSectionTopicId,
+  getPhraseLists,
   ...otherProps
 }) {
   if (isLoading) {
@@ -477,6 +479,7 @@ function ExerciseSelection({
         getRoleplays: getRoleplays,
         handleStartExercise: handleStartExercise,
         courseSectionTopicId: courseSectionTopicId,
+        getPhraseLists: getPhraseLists,
         ...otherProps
       })
     });
@@ -498,6 +501,7 @@ function ExerciseSelection({
       handleSelectExercise: handleSelectExercise,
       useCase: useCase,
       courseSectionTopicId: courseSectionTopicId,
+      getPhraseLists: getPhraseLists,
       ...otherProps
     })
   });

package/dist/Lists/Exercises/Exercises.js

@@ -1027,7 +1027,7 @@ function Exercises(props) {
   };
   const numberOfPhraseListCompletions = (completions, phraseListId) => {
     if (isEmptyArray(completions)) return 0;
-    return completions.filter(c => ["translation", "listening", "pronunciation"].includes(c.exercise) && c.phraseListId === phraseListId).length;
+    return completions.filter(c => ["translation", "listening", "pronunciation"].includes(c.exercise) && (c.phraseListId === phraseListId || !c.phraseListId && phraseListId?.startsWith('leg-'))).length;
   };
 
   // ── phraseLists drag state ──

package/dist/Lists/PhraseListSelection/PhraseListSelection.js

@@ -0,0 +1,213 @@
+import { useState, useEffect } from "react";
+import { Box, Button, ListItemText, ListItemButton, Avatar, ListItemIcon, Collapse, CircularProgress, Typography } from "@mui/material";
+import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
+import HearingIcon from "@mui/icons-material/Hearing";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ImageSearchIcon from "@mui/icons-material/ImageSearch";
+import ExtensionIcon from "@mui/icons-material/Extension";
+import { courses as courseQuerys } from "@nualang/nualang-api-and-queries/Queries";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function PhraseList({
+  phraseList,
+  handleCreateGame,
+  courseSectionTopicId,
+  isPhraseListSelected,
+  setIsPhraseListSelected,
+  t,
+  isExerciseSelected,
+  setIsExerciseSelected
+}) {
+  const [open, setOpen] = useState(false);
+  const isTranslationHidden = phraseList?.hiddenPhraseGroupGames?.translation;
+  const isListeningHidden = phraseList?.hiddenPhraseGroupGames?.listening;
+  const isMeaningHidden = phraseList?.hiddenPhraseGroupGames?.meaning;
+  const hasDefinitions = phraseList?.phrases?.some(p => p.definitions?.length > 0);
+  const hasSelectableGame = !isTranslationHidden || !isListeningHidden || !isMeaningHidden;
+  if (!hasSelectableGame) return null;
+  const handleGameSelected = exercise => () => {
+    setIsPhraseListSelected(true);
+    setIsExerciseSelected(true);
+    handleCreateGame({
+      courseSectionTopicId,
+      exercise,
+      timer: 30,
+      answerOption: 0,
+      phraseListId: phraseList.phraseListId,
+      phrases: phraseList.phrases || []
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(ListItemButton, {
+      onClick: () => setOpen(!open),
+      disabled: isPhraseListSelected || isExerciseSelected,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexDirection: {
+          xs: "column",
+          sm: "row"
+        }
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        width: {
+          xs: "100%",
+          sm: "85%"
+        },
+        children: [phraseList.picture ? /*#__PURE__*/_jsx(Avatar, {
+          src: phraseList.picture,
+          alt: phraseList.phraseListName
+        }) : /*#__PURE__*/_jsx(Avatar, {
+          alt: phraseList.phraseListName,
+          children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: phraseList.phraseListName,
+          secondary: phraseList.description,
+          sx: {
+            marginLeft: 2
+          }
+        })]
+      }), /*#__PURE__*/_jsx(ListItemIcon, {
+        children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
+          sx: {
+            color: "#757575"
+          }
+        }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+          sx: {
+            color: "#757575"
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Collapse, {
+      in: open,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/_jsxs(Box, {
+        ml: 3.5,
+        children: [!isTranslationHidden && /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: handleGameSelected("translation"),
+          disabled: isPhraseListSelected || isExerciseSelected,
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(SwapHorizIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: t("translation"),
+            secondary: t("translation_exercise_desc")
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(PlayCircleOutlineIcon, {
+              color: "primary"
+            })
+          })]
+        }), !isListeningHidden && /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: handleGameSelected("listening"),
+          disabled: isPhraseListSelected || isExerciseSelected,
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(HearingIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: t("listening"),
+            secondary: t("listening_exercise_desc")
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(PlayCircleOutlineIcon, {
+              color: "primary"
+            })
+          })]
+        }), !isMeaningHidden && /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: handleGameSelected("meaning"),
+          disabled: isPhraseListSelected || isExerciseSelected || !hasDefinitions,
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(ExtensionIcon, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: t("meaning"),
+            secondary: t("meaning_exercise_desc")
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(PlayCircleOutlineIcon, {
+              color: "primary"
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}
+function PhraseListSelection({
+  getPhraseLists,
+  courseId,
+  sectionId,
+  topicId,
+  handleCreateGame,
+  courseSectionTopicId,
+  t,
+  isExerciseSelected,
+  isExpanded,
+  setIsExerciseSelected,
+  onPhraseListsLoaded
+}) {
+  const [isPhraseListSelected, setIsPhraseListSelected] = useState(false);
+  const phraseListsQuery = courseQuerys.useCourseSectionTopicPhraseLists(async (cId, sId, tId, filters) => getPhraseLists(cId, sId, tId, filters), {
+    courseId,
+    sectionId,
+    topicId,
+    filters: {
+      limit: 1000,
+      returnvalues: "phrases"
+    }
+  }, {
+    enabled: !!courseId && !!sectionId && !!topicId && isExpanded
+  });
+  const phraseLists = phraseListsQuery.isSuccess && Array.isArray(phraseListsQuery.data?.Items) ? phraseListsQuery.data.Items : [];
+  useEffect(() => {
+    if (phraseListsQuery.isSuccess && onPhraseListsLoaded) {
+      onPhraseListsLoaded(phraseLists.length);
+    }
+  }, [phraseListsQuery.isSuccess, phraseLists.length]);
+  if (phraseListsQuery.isError) {
+    return /*#__PURE__*/_jsxs(Box, {
+      px: 2,
+      py: 1,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "error",
+        children: t("phrase_lists_error")
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "small",
+        onClick: () => phraseListsQuery.refetch(),
+        children: t("retry")
+      })]
+    });
+  }
+  if (phraseListsQuery.isLoading) {
+    return /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      justifyContent: "center",
+      py: 1,
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        size: 24
+      })
+    });
+  }
+  if (phraseListsQuery.isSuccess && phraseLists.length === 0) {
+    return /*#__PURE__*/_jsx(Box, {
+      px: 2,
+      py: 1,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "textSecondary",
+        children: t("no_phrase_lists")
+      })
+    });
+  }
+  return phraseLists.map((phraseList, index) => /*#__PURE__*/_jsx(PhraseList, {
+    phraseList: phraseList,
+    handleCreateGame: handleCreateGame,
+    courseSectionTopicId: courseSectionTopicId,
+    isPhraseListSelected: isPhraseListSelected,
+    setIsPhraseListSelected: setIsPhraseListSelected,
+    t: t,
+    isExerciseSelected: isExerciseSelected,
+    setIsExerciseSelected: setIsExerciseSelected
+  }, phraseList.phraseListId || index));
+}
+export default PhraseListSelection;

package/dist/Live/Game/Game.js

@@ -16,6 +16,7 @@ import WaitingRoom from "../WaitingRoom/WaitingRoom";
 import LiveListener from "../LiveListener/LiveListener";
 import LiveTranslator from "../LiveTranslator/LiveTranslator";
 import LiveStory from "../LiveRoleplay/LiveStory/LiveStory";
+import LiveMeaning from "../LiveMeaning/LiveMeaning";
 import HowToJoin from "../HowToJoin/HowToJoin";
 import GameMembers from "../GameMembers/GameMembers";
 import GameSettings from "../GameSettings/GameSettings";
@@ -510,6 +511,23 @@ export default function Game({
             handleShowLeaderboard: handleShowLeaderboard,
             ...otherProps
           });
+        } else if (exercise === "meaning") {
+          return /*#__PURE__*/_jsx(LiveMeaning, {
+            t: t,
+            currentQuestion: currentQuestion,
+            isCreator: isCreator,
+            languageInformation: languageInformation,
+            time: time,
+            setCurrentAnswer: setCurrentAnswer,
+            gameMembersTotal: membersInRoom?.length,
+            exercise: exercise,
+            voiceLanguageCode: voiceLanguageCode,
+            voice: voice,
+            voices: voices,
+            answerAttempt: answerAttempt,
+            handleShowLeaderboard: handleShowLeaderboard,
+            ...otherProps
+          });
         } else if (exercise === "roleplay-story") {
           return /*#__PURE__*/_jsx(LiveStory, {
             t: t,

package/dist/Live/LiveMeaning/LiveMeaning.js

@@ -0,0 +1,377 @@
+import { useState, useEffect } from "react";
+import { Grid, Button, Typography, Box } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+import { useTheme } from "@mui/material/styles";
+import AnswerResult from "../../Misc/AnswerResult/AnswerResult";
+import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
+import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
+import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
+import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
+import GameControls from "../GameControls/GameControls";
+import GameQuestionResults from "../GameQuestionResults/GameQuestionResults";
+import getVoiceImages from "../../utils/voiceImages";
+import { removeExtraWhiteSpaces } from "../../utils/index";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  flex: {
+    [theme.breakpoints.down("md")]: {
+      display: "none"
+    },
+    flex: 1
+  },
+  root: {
+    [theme.breakpoints.down("md")]: {
+      padding: theme.spacing(2)
+    },
+    flexGrow: 1,
+    width: "100%",
+    padding: theme.spacing(4)
+  },
+  image: {
+    [theme.breakpoints.down("md")]: {
+      maxWidth: "200px",
+      maxHeight: "150px"
+    },
+    maxWidth: "250px",
+    height: "auto",
+    maxHeight: "200px",
+    borderRadius: "20px"
+  },
+  nualaSpeaking: {
+    [theme.breakpoints.down("md")]: {
+      height: "80px"
+    },
+    height: "100px",
+    minHeight: "80px",
+    minWidth: "80px",
+    borderRadius: "20px"
+  },
+  wordButton: {
+    textTransform: "none"
+  }
+}));
+function LiveMeaning({
+  t = text => text,
+  languageInformation,
+  isCreator,
+  currentQuestion,
+  isTimeUp,
+  time,
+  handleTimeUp,
+  handleShowLeaderboard,
+  wordOptions,
+  isAnswered,
+  setIsAnswered,
+  answerAttempt,
+  isCorrectResultOpen,
+  isIncorrectResultOpen,
+  handleContinue,
+  handleNextQuestion,
+  setCurrentAnswer,
+  gameMembersAnsweredTotal,
+  gameMembersTotal,
+  gameMembersCorrectAnswerTotal,
+  exercise,
+  voice,
+  voicePitch,
+  voiceLanguageCode,
+  voices,
+  pollyResult,
+  isSpeaking,
+  speak,
+  learnLang = "",
+  forLang = "",
+  languageTag
+}) {
+  const {
+    classes
+  } = useStyles();
+  const theme = useTheme();
+  const [isPaused, setIsPaused] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [isFinishedInitialSpeaking, setIsFinishedInitialSpeaking] = useState(false);
+  useEffect(() => {
+    setSelectedOption(null);
+    setIsFinishedInitialSpeaking(false);
+  }, [currentQuestion]);
+  const definitionText = (() => {
+    if (!currentQuestion) return "";
+    if (currentQuestion.definitions?.length > 0) {
+      const raw = currentQuestion.definitions[0];
+      return typeof raw === "string" ? raw : "";
+    }
+    if (currentQuestion.translations?.length > 0) {
+      const raw = currentQuestion.translations[0];
+      return typeof raw === "string" ? raw : "";
+    }
+    return "";
+  })();
+  useEffect(() => {
+    if (isCreator && currentQuestion && definitionText !== "") {
+      speak(definitionText, voice, false, "#currentDefinition", voiceLanguageCode, false, voicePitch, () => setIsFinishedInitialSpeaking(true));
+    }
+  }, [currentQuestion?.phrase, isCreator]);
+  const voiceMap = getVoiceImages(voices || []);
+  const getVoiceImage = () => {
+    try {
+      const exerciseVoice = voiceMap.get(voice) || {};
+      return exerciseVoice.speakingImage || null;
+    } catch (error) {
+      console.error("Error retrieving voice image:", error);
+      return null;
+    }
+  };
+  const handleOptionSelect = option => {
+    if (isAnswered) return;
+    setSelectedOption(option);
+    setCurrentAnswer(option.text);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      className: classes.root,
+      direction: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      spacing: 2,
+      sx: {
+        maxWidth: "lg",
+        mx: "auto"
+      },
+      component: "main",
+      children: [/*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          lang: languageTag,
+          variant: "h6",
+          component: "h2",
+          color: "inherit",
+          children: t("select_the_correct_phrase", {
+            lng: languageTag
+          })
+        })
+      }), currentQuestion?.image && /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsx("img", {
+          src: currentQuestion.image,
+          alt: "",
+          className: classes.image
+        })
+      }), isCreator && /*#__PURE__*/_jsx(Grid, {
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            flexDirection: "row"
+          },
+          children: [/*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "flex",
+              justifyContent: "center"
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              src: getVoiceImage(),
+              className: classes.nualaSpeaking,
+              alt: ""
+            })
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "grid",
+              justifyContent: "flex-end",
+              marginLeft: 1
+            },
+            children: [/*#__PURE__*/_jsx(ChatBubble, {
+              id: "currentDefinition",
+              handleSpeak: () => speak(definitionText, voice, true, null, voiceLanguageCode, false, voicePitch),
+              learnLang: learnLang,
+              voice: voice || null,
+              voicePitch: voicePitch || null,
+              forLang: forLang,
+              wordList: definitionText ? removeExtraWhiteSpaces(definitionText).split(" ") : [],
+              disableTranslation: false,
+              isMessage: false,
+              t: t
+            }), learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
+              children: /*#__PURE__*/_jsx(WaveFormLite, {
+                src: pollyResult ? pollyResult : "",
+                controls: false,
+                isSpeaking: isSpeaking,
+                muteAudio: true,
+                handleSpeak: () => speak(definitionText, voice, true, null, voiceLanguageCode, false, voicePitch),
+                theme: theme
+              })
+            })]
+          })]
+        })
+      }), isCreator ? /*#__PURE__*/_jsxs(Grid, {
+        sx: {
+          marginTop: 2,
+          textAlign: "center"
+        },
+        children: [!isAnswered && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [!isTimeUp && /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsx(CountdownCircleTimer, {
+              isPlaying: !isPaused && isFinishedInitialSpeaking,
+              duration: time,
+              colors: theme.palette.primary.main,
+              size: 160,
+              onComplete: handleTimeUp,
+              children: ({
+                remainingTime
+              }) => /*#__PURE__*/_jsx(Typography, {
+                variant: "h2",
+                fontWeight: "fontWeightBold",
+                children: remainingTime
+              })
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              color: "primary",
+              sx: {
+                marginTop: 2,
+                paddingLeft: 1.5,
+                paddingRight: 1.5
+              },
+              onClick: () => setIsPaused(!isPaused),
+              startIcon: isPaused ? /*#__PURE__*/_jsx(PlayIcon, {}) : /*#__PURE__*/_jsx(PauseIcon, {}),
+              size: "small",
+              disabled: !isFinishedInitialSpeaking,
+              children: isPaused ? t("resume") : t("pause")
+            })]
+          }), isTimeUp && /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              textAlign: "center"
+            },
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h5",
+              fontWeight: "fontWeightBold",
+              textAlign: "center",
+              color: "success.main",
+              children: currentQuestion?.phrase
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              color: "primary",
+              sx: {
+                marginTop: 5
+              },
+              onClick: () => handleShowLeaderboard(),
+              children: t("next")
+            }), /*#__PURE__*/_jsx(GameQuestionResults, {
+              t: t,
+              gameMembersCorrectAnswerTotal: gameMembersCorrectAnswerTotal,
+              gameMembersTotal: gameMembersTotal
+            })]
+          }), !isTimeUp && /*#__PURE__*/_jsx(GameControls, {
+            t: t,
+            handleTimeUp: handleTimeUp,
+            gameMembersAnsweredTotal: gameMembersAnsweredTotal,
+            gameMembersTotal: gameMembersTotal
+          })]
+        }), isAnswered && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            marginTop: 2
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h5",
+            fontWeight: "fontWeightBold",
+            textAlign: "center",
+            children: currentQuestion?.phrase || ""
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "primary",
+            sx: {
+              marginTop: 5
+            },
+            onClick: () => handleShowLeaderboard(),
+            children: t("next")
+          }), /*#__PURE__*/_jsx(GameQuestionResults, {
+            t: t,
+            gameMembersCorrectAnswerTotal: gameMembersCorrectAnswerTotal,
+            gameMembersTotal: gameMembersTotal
+          })]
+        })]
+      }) : /*#__PURE__*/_jsx(Grid, {
+        sx: {
+          marginTop: 2,
+          width: "100%"
+        },
+        children: !isAnswered ? /*#__PURE__*/_jsxs(Box, {
+          component: "fieldset",
+          sx: {
+            borderWidth: 0
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle1",
+            color: "inherit",
+            gutterBottom: true,
+            component: "legend",
+            sx: {
+              textAlign: "center",
+              paddingBottom: 1
+            },
+            children: t("select_the_correct_answer")
+          }), /*#__PURE__*/_jsx(Grid, {
+            children: /*#__PURE__*/_jsx(Grid, {
+              container: true,
+              sx: {
+                width: "100%"
+              },
+              justifyContent: "center",
+              spacing: 1,
+              children: (wordOptions || []).map(option => /*#__PURE__*/_jsx(Grid, {
+                children: /*#__PURE__*/_jsx(DefaultButton, {
+                  variant: selectedOption?.id === option.id ? "contained" : "outlined",
+                  onClick: () => handleOptionSelect(option),
+                  className: classes.wordButton,
+                  children: option.text
+                })
+              }, option.id))
+            })
+          })]
+        }) : /*#__PURE__*/_jsx(Box, {
+          sx: {
+            marginTop: 2,
+            textAlign: "center"
+          },
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "h5",
+            fontWeight: "fontWeightBold",
+            textAlign: "center",
+            children: selectedOption?.text || ""
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(AnswerResult, {
+      t: t,
+      open: isCorrectResultOpen,
+      handleNext: handleNextQuestion,
+      ...answerAttempt,
+      result: "correct",
+      languageInformation: languageInformation,
+      isLive: true,
+      exercise: exercise
+    }), /*#__PURE__*/_jsx(AnswerResult, {
+      t: t,
+      open: isIncorrectResultOpen,
+      handleNext: handleNextQuestion,
+      ...answerAttempt,
+      result: "incorrect",
+      languageInformation: languageInformation,
+      isLive: true,
+      exercise: exercise
+    }), !isCreator && /*#__PURE__*/_jsx(ExerciseBottomBar, {
+      t: t,
+      handleSubmit: () => handleContinue(false),
+      handleSkip: () => handleContinue(true),
+      isSubmitAnswerAllowed: true,
+      isSubmitAnswerDisabled: !selectedOption,
+      isLive: true,
+      isAnswered: isAnswered,
+      setIsAnswered: setIsAnswered,
+      isTimeUp: isTimeUp,
+      setCurrentAnswer: setCurrentAnswer,
+      exercise: exercise
+    })]
+  });
+}
+export default LiveMeaning;

package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js

@@ -48,6 +48,8 @@ function ExerciseBottomBar({
     } else if (isLive && !isAnswered && exercise === "translation") {
       setCurrentAnswer(translationText ? translationText : translationWords);
       setIsAnswered(true);
+    } else if (isLive && !isAnswered && exercise === "meaning") {
+      setIsAnswered(true);
     } else {
       handleSubmit();
     }

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -1637,6 +1637,7 @@ function Classroom({
       handleClose: handleCloseSelectExercise,
       getCourseSections: getCourseSections,
       getRoleplays: getRoleplays,
+      getPhraseLists: getCourseSectionTopicPhraseLists,
       username: username,
       handleCreateGame: handleCreateLiveGame,
       t: t,
@@ -1724,7 +1725,8 @@ export default function ViewClassroom({
   makeChatGptApiRequest,
   siteLanguage
 }) {
-  console.log("ViewClassroom render");
+  // console.log("ViewClassroom render");
+
   const {
     classes
   } = useStyles();

package/dist/Tables/Progress/ProgressList.js

@@ -306,7 +306,7 @@ function ExerciseListItem({
     return /*#__PURE__*/_jsx(ListItemIcon, {});
   }
   let icon = null;
-  let completions = exercise === "roleplays" ? data?.completions.map(completion => completion.exercise.startsWith("roleplay") && completion.roleplayId === roleplay.roleplayId) : phraseListId ? data?.completions.map(completion => completion.exercise === exercise && completion.phraseListId === phraseListId) : data?.completions.map(completion => completion.exercise === exercise);
+  let completions = exercise === "roleplays" ? data?.completions.map(completion => completion.exercise.startsWith("roleplay") && completion.roleplayId === roleplay.roleplayId) : phraseListId ? data?.completions.map(completion => completion.exercise === exercise && (completion.phraseListId === phraseListId || !completion.phraseListId && phraseListId?.startsWith('leg-'))) : data?.completions.map(completion => completion.exercise === exercise);
   if (exercise === "roleplays" && roleplay?.roleplayId && completions.length > 0) {
     icon = /*#__PURE__*/_jsx(Badge, {
       badgeContent: completions.length,
@@ -564,7 +564,7 @@ function MemberListItem({
       }), currentView === "topic" && phraseLists.map((phraseList, i) => {
         const topicData = getTopicData(data, selectedTopic, selectedCourse, selectedSection);
         const phraseListExercises = ["translation", "listening", "pronunciation"];
-        const completedCount = phraseListExercises.filter(exercise => topicData?.completions?.some(c => c.exercise === exercise && c.phraseListId === phraseList.phraseListId)).length;
+        const completedCount = phraseListExercises.filter(exercise => topicData?.completions?.some(c => c.exercise === exercise && (c.phraseListId === phraseList.phraseListId || !c.phraseListId && phraseList.phraseListId?.startsWith('leg-')))).length;
         return /*#__PURE__*/_jsx(MenuItem, {
           children: /*#__PURE__*/_jsx(ListItem, {
             sx: {

package/dist/Tables/Progress/cells/index.js

@@ -356,7 +356,7 @@ export function ExerciseCellData(props) {
     } else if (exercise === "bots") {
       completions = data?.completions.filter(completion => completion.exercise === "bot" && completion.botId === botId);
     } else if (phraseListId) {
-      completions = data?.completions.filter(completion => completion.exercise === exercise && completion.phraseListId === phraseListId);
+      completions = data?.completions.filter(completion => completion.exercise === exercise && (completion.phraseListId === phraseListId || !completion.phraseListId && phraseListId?.startsWith('leg-')));
     } else {
       completions = data?.completions.filter(completion => completion.exercise === exercise);
     }
@@ -474,7 +474,7 @@ export function PhraseListCellData({
     index: index
   });
   const phraseListExercises = ["translation", "listening", "pronunciation"];
-  const completedCount = phraseListExercises.filter(exercise => data?.completions?.some(c => c.exercise === exercise && c.phraseListId === phraseListId)).length;
+  const completedCount = phraseListExercises.filter(exercise => data?.completions?.some(c => c.exercise === exercise && (c.phraseListId === phraseListId || !c.phraseListId && phraseListId?.startsWith('leg-')))).length;
   const total = phraseListExercises.length;
   let color;
   if (completedCount === total) color = green[400];else if (completedCount > 0) color = yellow[400];else color = red[400];

package/package.json

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