@nualang/nualang-ui-components 0.1.1273 → 0.1.1274

package/dist/Cards/Bot/Bot.js

@@ -221,7 +221,11 @@ function Bot({
         tabIndex: 0,
         verificationStatus: verificationStatus,
         gameAward: gameAward,
-        badgeSize: "small"
+        badgeSize: "small",
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",

package/dist/Cards/Course/Course.js

@@ -402,7 +402,7 @@ function CourseCard({
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
         }),
         "aria-label": `${t("go_to")} ${createdByName || `${courseName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${courseName} creator`,

package/dist/Cards/Roleplay/Roleplay.js

@@ -220,7 +220,11 @@ function Roleplay({
         tabIndex: 0,
         verificationStatus: verificationStatus,
         gameAward: gameAward,
-        badgeSize: "small"
+        badgeSize: "small",
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",

package/dist/Cards/Topic/Topic.js

@@ -112,7 +112,11 @@ function Topic({
         tabIndex: 0,
         verificationStatus: verificationStatus,
         gameAward: gameAward,
-        badgeSize: "small"
+        badgeSize: "small",
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",

package/dist/Chat/Messages/Messages.js

@@ -68,24 +68,34 @@ function Messages({
   const {
     classes
   } = useStyles();
+
+  // Creates a unique string from each message's loading state and text to ensure the scroll effect runs when content updates, even if array length doesn't change.
+  const messagesScrollKey = (0, _react.useMemo)(() => {
+    if (!Array.isArray(messages)) return "";
+    return messages.map(m => {
+      const isLoading = m?.isLoading ?? false;
+      const text = m?.text ?? (isLoading ? "Loading ..." : "");
+      return `${isLoading}-${text}`;
+    }).join("|");
+  }, [messages]);
   (0, _react.useEffect)(() => {
     if (!disableScroll) {
       const messagesElement = document.getElementById("messages");
       const gameContainer = document.getElementById("gameContainer");
       setTimeout(() => {
-        messagesElement.scrollTo({
+        messagesElement?.scrollTo({
           top: messagesElement.scrollHeight,
           behavior: "smooth"
         });
         if (isLiveGame) {
-          gameContainer.scrollTo({
+          gameContainer?.scrollTo({
             top: gameContainer.scrollHeight,
             behavior: "smooth"
           });
         }
       }, 0);
     }
-  }, [disableScroll, messages.length, currentMessage, isTimeUp]);
+  }, [disableScroll, messages.length, messagesScrollKey, currentMessage, isTimeUp]);
   const onDragEnd = result => {
     const {
       active,

package/dist/Exercises/Bot/Bot.js

@@ -376,20 +376,22 @@ function Bot({
     //returning the ending variable text(s) of the bot e.g. ['The conversation has ended.']
     return botEndingTextArray.length > 0 ? botEndingTextArray : null;
   };
+  const normalizeAndStrip = text => {
+    return text.trim().normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}\s]/gu, "");
+  };
   (0, _react.useEffect)(() => {
     if (bot && bot.riveFile) {
       const botEndingTextArray = getBotRiveScriptEndingText(bot.riveFile);
-      const normalizedCurrentPhrase = currentPhrase.trim().normalize();
-      const normalizedEndingVars = botEndingTextArray.map(varString => varString.trim().normalize());
-
-      //Checking if the current phrase text and the bot end text is the same
-      if (normalizedEndingVars.includes(normalizedCurrentPhrase)) {
+      const normalizedCurrentPhrase = normalizeAndStrip(currentPhrase);
+      const normalizedEndingVars = botEndingTextArray.map(text => normalizeAndStrip(text));
+      const isEndingPhraseMatched = normalizedEndingVars.some(ending => normalizedCurrentPhrase.includes(ending));
+      if (isEndingPhraseMatched && !isSpeaking) {
         setTimeout(() => {
           handleCompleteExercise();
         }, 2000);
       }
     }
-  }, [currentPhrase, bot]);
+  }, [currentPhrase, bot, isSpeaking]);
   (0, _react.useEffect)(() => {
     if (open && !run && !localStorage.getItem(`bot-exercise-tour-completed`)) {
       setJoyrideState(prevState => ({

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

@@ -1238,8 +1238,16 @@ function Classroom({
         role: "link",
         tabIndex: 0,
         verificationStatus: verificationStatus,
-        gameAward: gameAward
+        gameAward: gameAward,
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+        }),
         "aria-label": `Open ${classroomName} creator's profile`,
         className: classes.cardTopAvatar,
         alt: `${classroomName} creator`,

package/dist/Screens/Courses/ViewCourse/ViewCourse.js

@@ -751,7 +751,11 @@ function Course({
         role: "link",
         tabIndex: 0,
         verificationStatus: verificationStatus,
-        gameAward: gameAward
+        gameAward: gameAward,
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         "aria-label": `Open ${courseName} creator's profile`,
         title: createdByName || `${courseName} creator`,
@@ -767,6 +771,10 @@ function Course({
         tabIndex: 0,
         verificationStatus: verificationStatus,
         gameAward: gameAward,
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+        }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Person.default, {
           fontSize: "large"
         })

package/dist/Screens/Courses/ViewCourse/ViewTopic/ViewTopic.js

@@ -952,12 +952,16 @@ function Topic({
         tabIndex: 0,
         verificationStatus: verificationStatus,
         gameAward: gameAward,
-        title: createdByName || `${topicName} creator`
+        title: createdByName || `${topicName} creator`,
+        sx: theme => ({
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardAvatar, {
         "aria-label": `${t("go_to")} ${createdByName || `${topicName} ${t("creator")}`} ${t("profile")}`,
         sx: theme => ({
-          backgroundColor: theme.palette.mode === "dark" ? "white" : "",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
+          backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
         }),
         alt: "",
         className: classes.cardTopAvatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1273",
+  "version": "0.1.1274",
   "main": "dist/index.js",
   "files": [
     "dist",