@nualang/nualang-ui-components 0.1.1276 → 0.1.1277

package/dist/Chat/ChatLoading/ChatLoading.js

@@ -158,7 +158,7 @@ function ChatLoading({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.message,
       children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' && isUserInternal ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
             position: "relative",
             display: "inline-block"

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

@@ -27,6 +27,7 @@ var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragInd
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _BorderColor = _interopRequireDefault(require("@mui/icons-material/BorderColor"));
 var _AiExperienceIcon = _interopRequireDefault(require("../../../Misc/AiExperienceIcon/AiExperienceIcon"));
+var _WarningAmber = _interopRequireDefault(require("@mui/icons-material/WarningAmber"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()((theme, {
@@ -40,6 +41,19 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
     justifyContent: isMyMessage ? isButton || hideAvatar ? "flex-start" : "flex-end" : null,
     marginBottom: isButton ? null : theme.spacing(3)
   },
+  warningIcon: {
+    marginLeft: 8,
+    verticalAlign: "middle"
+  },
+  indicatorWrapper: {
+    position: "relative"
+  },
+  inappropriateIcon: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    margin: 4
+  },
   message: {
     display: "flex",
     maxWidth: 500,
@@ -258,7 +272,6 @@ function Message({
   userImage,
   name,
   text,
-  datetime,
   imageUrl,
   disableTranslation,
   handleTranslate,
@@ -273,7 +286,6 @@ function Message({
   moveScriptItem,
   learnLang,
   forLang,
-  messageCount,
   messageIndex,
   formatUnderscores,
   isButton,
@@ -301,6 +313,7 @@ function Message({
   provided,
   isEdited = false,
   isDynamicResponsesEnabled,
+  studentInappropriate,
   isUserInternal
 }) {
   const theme = (0, _styles.useTheme)();
@@ -373,7 +386,7 @@ function Message({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.message,
       children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' && isUserInternal ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: {
             position: "relative",
             display: "inline-block"
@@ -423,13 +436,28 @@ function Message({
             },
             spacing: 4,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                variant: "subtitle2",
-                component: "h4",
-                gutterBottom: true,
-                fontWeight: "bold",
-                align: "left",
-                children: name
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "subtitle2",
+                  component: "h4",
+                  gutterBottom: true,
+                  fontWeight: "bold",
+                  align: "left",
+                  children: name
+                }), studentInappropriate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                  title: t("inappropriate_language_detected"),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WarningAmber.default, {
+                    style: {
+                      color: theme.palette.getContrastText(theme.palette.primary.main)
+                    },
+                    className: classes.warningIcon,
+                    fontSize: "small"
+                  })
+                })]
               })
             }), isEdited && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -443,6 +471,7 @@ function Message({
               })
             })]
           }), !isListenOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverText.default, {
+            studentInappropriate: studentInappropriate,
             handleTranslate: handleTranslate,
             learnLang: learnLang,
             forLang: forLang,
@@ -462,36 +491,37 @@ function Message({
             languageTag: languageTag
           }), isListenOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(WaveformImage, {})]
         }), !isButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: classes.bubble,
-          id: messageContainerId,
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          },
+          className: classes.indicatorWrapper,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+            className: classes.bubble,
+            id: messageContainerId,
+            style: {
+              position: "relative"
+            },
+            children: [studentInappropriate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              title: t("inappropriate_language_detected"),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WarningAmber.default, {
+                className: classes.inappropriateIcon,
+                fontSize: "small",
+                style: {
+                  color: theme.palette.getContrastText(theme.palette.primary.main)
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
               container: true,
               alignItems: "center",
-              justifyContent: "space-between" // Ensures space between name & icon
-              ,
+              justifyContent: "space-between",
               sx: {
                 display: "flex"
               },
               spacing: 4,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center"
-                  },
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                    variant: "subtitle2",
-                    component: "h4",
-                    fontWeight: "bold",
-                    align: "left",
-                    children: name
-                  })
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "subtitle2",
+                  component: "h4",
+                  fontWeight: "bold",
+                  align: "left",
+                  children: name
                 })
               }), isEdited && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -505,6 +535,7 @@ function Message({
                 })
               })]
             }), !isListenOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverText.default, {
+              studentInappropriate: studentInappropriate,
               handleTranslate: handleTranslate,
               learnLang: learnLang,
               forLang: forLang,
@@ -535,29 +566,27 @@ function Message({
               src: voiceAttempt || audioURL,
               waveColor: isMyMessage ? theme.palette.grey[400] : theme.palette.grey[600],
               progressColor: isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.primary.main
-            }), isVoiceAttemptCheckboxIncluded && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormGroup, {
-                className: classes.checkBox,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
-                  control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
-                    checked: checked,
-                    onChange: handleClickSaveRecordingCheckbox,
-                    inputProps: {
-                      "aria-label": t("save_recording_to_report")
-                    },
-                    name: "saveRecording",
-                    color: "default",
-                    size: "small",
-                    sx: theme => ({
-                      "& svg": {
-                        color: `${isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.primary.main} !important`
-                      }
-                    })
-                  }),
-                  label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                    variant: "body2",
-                    children: t("save_recording_to_report")
+            }), isVoiceAttemptCheckboxIncluded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormGroup, {
+              className: classes.checkBox,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+                  checked: checked,
+                  onChange: handleClickSaveRecordingCheckbox,
+                  inputProps: {
+                    "aria-label": t("save_recording_to_report")
+                  },
+                  name: "saveRecording",
+                  color: "default",
+                  size: "small",
+                  sx: theme => ({
+                    "& svg": {
+                      color: `${isMyMessage ? theme.palette.getContrastText(theme.palette.primary.main) : theme.palette.primary.main} !important`
+                    }
                   })
+                }),
+                label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                  variant: "body2",
+                  children: t("save_recording_to_report")
                 })
               })
             })]

package/dist/Chat/Messages/Messages.js

@@ -50,7 +50,6 @@ function Messages({
   handleTimeUp,
   t,
   setCurrentAnswer,
-  disableHover,
   isAnswered,
   setIsAnswered,
   handleContinue,
@@ -209,6 +208,7 @@ function Messages({
               siteLanguage: siteLanguage,
               moveScriptItem: moveScriptItem,
               isDynamicResponsesEnabled: isDynamicResponsesEnabled,
+              studentInappropriate: m?.studentInappropriate,
               ...m,
               ...otherProps
             }, `messy_${i}`)
@@ -263,6 +263,7 @@ function Messages({
               isLivePlayer: isLivePlayer,
               siteLanguage: siteLanguage,
               isDynamicResponsesEnabled: isDynamicResponsesEnabled,
+              studentInappropriate: m?.studentInappropriate,
               isUserInternal: isUserInternal,
               ...m,
               ...otherProps

package/dist/Exercises/Bot/Bot.js

@@ -107,7 +107,8 @@ function Bot({
   i18nLanguage,
   isDynamicResponsesEnabled,
   aiChatbotConversationHistory,
-  isUserInternal
+  isUserInternal,
+  handleStudentMisuse
 }) {
   const theme = (0, _styles.useTheme)();
   const {
@@ -195,7 +196,8 @@ function Bot({
     i18nLanguage,
     isDynamicResponsesEnabled: isDynamicResponsesClassroomEnabled,
     aiChatbotConversationHistory,
-    isUserInternal
+    isUserInternal,
+    handleStudentMisuse
   });
   const {
     muteSound,

package/dist/Forms/CreateBot/Steps/BotSettings/BotSettings.js

@@ -144,7 +144,7 @@ function BotSettings({
             })]
           })]
         })
-      }), isUserInternal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
         size: 12,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
           component: "fieldset",

package/dist/Forms/CreateBot/Steps/Confirmation/Confirmation.js

@@ -175,7 +175,7 @@ function Confirmation({
                 })]
               })]
             })]
-          }), isUserInternal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
             size: 12,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
               gutterBottom: true,

package/dist/Screens/Activity/Exercise/Attempt/Attempt.js

@@ -190,6 +190,14 @@ function Attempt({
   const [selectedActor, setSelectedActor] = (0, _react.useState)("");
   const [showBreakdownTable, setShowBreakdownTable] = (0, _react.useState)(false);
   const [showMethodTable, setShowMethodTable] = (0, _react.useState)(false);
+  const messagesRef = (0, _react.useRef)(null);
+  const scrollToMessages = () => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  };
   const filteredVarKeys = vars && Object.keys(vars).length > 0 && Object.keys(vars).filter(v => !v.startsWith("__"));
   const [open, setOpen] = (0, _react.useState)(false);
   const [isTranscriptPlaying, setIsTranscriptPlaying] = (0, _react.useState)(false);
@@ -469,9 +477,21 @@ function Attempt({
     stop();
     setIsTranscriptPlaying(false);
   };
+  const hasInappropriate = (0, _react.useMemo)(() => (messages || []).some(m => m.studentInappropriate), [messages]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes.root,
-    children: [(picture || topicName || description) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [hasInappropriate && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        backgroundColor: "#ffcccc",
+        padding: "10px",
+        color: "#660000",
+        fontWeight: "bold",
+        border: "1px solid #cc0000",
+        cursor: "pointer" // make it look clickable
+      },
+      onClick: scrollToMessages,
+      children: ["\u26A0 ", t('student_sent_inappropriate_messages')]
+    }), (picture || topicName || description) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.header,
       children: [picture ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
         className: classes.avatarHeader,
@@ -932,6 +952,7 @@ function Attempt({
         })
       }), exercise === "bot" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
         size: 12,
+        ref: messagesRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Card, {
           classes: {
             root: classes.card

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

@@ -499,7 +499,6 @@ function Classroom({
   progressHelpers,
   preferred_username,
   assignedCourses,
-  assignedStudents,
   assignmentMembersById,
   email,
   ...otherProps
@@ -1090,7 +1089,7 @@ function Classroom({
       py: 1,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
         t: t,
-        assignedStudents: assignedStudents,
+        assignmentMembersById: assignmentMembersById,
         courses: courses,
         members: members,
         courseIds: courseIds,

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

@@ -638,7 +638,7 @@ function Topic({
   };
   (0, _react.useEffect)(() => {
     if (isMember && topic && topic.completions) {
-      const topicwWithCompletion = calcCompletions(topic, topic.completions, bots, roleplays);
+      const topicwWithCompletion = (0, _index.calcTopicCompletions)(topic, topic.completions, false);
       setTopicCompletion(topicwWithCompletion.completion);
     }
   }, [topicProgress, isMember, topic, bots, roleplays]);

package/dist/Tables/Progress/Progress.js

@@ -164,7 +164,7 @@ function Progress({
   isVideoChatEnabled,
   assignedCourses,
   assignedCourseIds,
-  assignedStudents
+  assignmentMembersById
 }) {
   const theme = (0, _styles.useTheme)();
   const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
@@ -315,6 +315,7 @@ function Progress({
   }, [selectedCourse, selectedSection, selectedTopic, selectedRoleplay, selectedAssignment, reportType]); // If selections change, update the url to reflect those changes
 
   const [selectedMembers, setSelectedMembers] = (0, _react.useState)([]);
+  const assignedStudents = assignmentMembersById[selectedAssignment?.assignmentId] || [];
   const classroomMembers = (0, _react.useMemo)(() => {
     return members.filter(member => {
       if (memberId) {

package/dist/hooks/useExerciseState.js

@@ -72,7 +72,8 @@ function useExerciseState({
   i18nLanguage,
   isDynamicResponsesEnabled,
   aiChatbotConversationHistory,
-  isUserInternal
+  isUserInternal,
+  handleStudentMisuse
 }) {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const [questions, setQuestions] = (0, _react.useState)([]);
@@ -1349,9 +1350,10 @@ function useExerciseState({
     setIsWordBankAttemptChanged(false);
   };
   const formatBotMessages = async botMessages => {
-    const responses = await Promise.all(botMessages.map(async m => {
+    const responses = await Promise.all(botMessages.map(async (m, i) => {
       const updatedMessage = {
-        ...m
+        ...m,
+        studentInappropriate: conversationHistory[i]?.studentInappropriate || false
       };
       if (updatedMessage.audioBlob) {
         delete updatedMessage.audioBlob;
@@ -1542,18 +1544,6 @@ function useExerciseState({
       lng: langCode
     }).toLowerCase() : "hello";
   };
-  const getInitialBotGreeting = (learnLang, botName) => {
-    const langCode = getLearnLangCode(learnLang);
-    if (!langCode) return "";
-    const translatedLearnLang = t(learnLang, {
-      lng: langCode
-    }).toLowerCase();
-    return t("initial_bot_greeting", {
-      botName,
-      learnLang: translatedLearnLang,
-      lng: langCode
-    });
-  };
   const resetConversationHistory = () => {
     setConversationHistory([]);
     setIsFirstMessage(true);
@@ -1573,18 +1563,17 @@ function useExerciseState({
         };
         setBotMessages(prevMessages => [...prevMessages, loadingMessage]);
         const intialStudentGreeting = getInitialStudentGreeting(learnLang);
-        const intialBotGreeting = getInitialBotGreeting(learnLang, bot.name);
         const body = {
           message: botText,
           vars: botVars,
           isFirstMessage: Array.isArray(aiChatbotConversationHistory) && aiChatbotConversationHistory.length !== 0 ? false : isFirstMessage,
           i18nLanguage,
-          isDynamicResponsesEnabled: isUserInternal ? isDynamicResponsesEnabled === "enable" ? true : false : false,
+          isDynamicResponsesEnabled: isDynamicResponsesEnabled === "enable" ? true : false,
           conversationHistory,
           botProgess: aiChatbotConversationHistory,
           botTemplate: bot.selectedTemplate ? bot.selectedTemplate : "",
           intialStudentGreeting,
-          intialBotGreeting
+          botIntroMessage: bot.introMessage ? bot.introMessage : ""
         };
         const response = await handleMessageBot(bot.botId, body);
         if (response.errorMessage) {
@@ -1677,7 +1666,30 @@ function useExerciseState({
       exerciseCompletion.picture = picture;
       exerciseCompletion.botName = botName;
       exerciseCompletion.description = description;
-      exerciseCompletion.messages = await formatBotMessages(botMessages);
+      const formattedBotMessages = await formatBotMessages(botMessages);
+      exerciseCompletion.messages = formattedBotMessages;
+      const containsStudentInappropriate = formattedBotMessages.some(msg => msg?.studentInappropriate === true);
+      const exerciseLink = `${window.location.origin}/courses/${courseId}/${sectionId}/${topicId}/activity/bot?botId=${botId}`;
+      if (containsStudentInappropriate) {
+        const responseFromMisuse = await handleStudentMisuse({
+          params: {
+            exerciseLink,
+            exerciseName,
+            problemDescription: "Student has been acting inapprpriately within your exercise"
+          },
+          botId: bot.botId,
+          startTime,
+          courseId,
+          sectionId,
+          topicId,
+          exerciseLink
+        });
+        if (responseFromMisuse && responseFromMisuse.error) {
+          openSnackbar(responseFromMisuse.error, "error");
+        } else {
+          openSnackbar("student_misuse_reported", "info");
+        }
+      }
     } else if (exerciseName === "roleplay") {
       const {
         picture,

package/dist/utils/index.js

@@ -249,7 +249,7 @@ const calcTopicCompletions = (topic, completions = [], isSectionHidden, assignme
         completedCount: 0
       };
     }
-    const uniqueCompletions = Array.isArray(completions) ? Array.from(new Map(completions.filter(completion => completion.roleplayId === roleplay.roleplayId).map(completion => [completion.exercise, completion])).values()) : [];
+    const uniqueCompletions = Array.isArray(completions) ? Array.from(new Map(completions.filter(completion => completion.gameId && completion.roleplayId === roleplay.roleplayId).map(completion => [completion.exercise, completion])).values()) : [];
     completedGames += uniqueCompletions.length;
     totalNumberOfGames += numberOfUnhiddenGames;
     if (uniqueCompletions?.length === numberOfUnhiddenGames) {

package/package.json

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