@nualang/nualang-ui-components 0.1.1262 → 0.1.1264

package/dist/Assignments/AssignmentBotSelection/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentBotSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentBotSelection.js"
-  }
-  
+  "name": "AssignmentBotSelection",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentBotSelection.js"
+}

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -147,7 +147,7 @@ function AssignmentCard({
               fontSize: "0.75rem",
               borderRadius: 1,
               fontWeight: "bold",
-              children: t('NEW')
+              children: t("NEW")
             })]
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {

package/dist/Assignments/AssignmentCard/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentCard",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCard.js"
-  }
-  
+  "name": "AssignmentCard",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentCard.js"
+}

package/dist/Assignments/AssignmentCardsList/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentCardsList",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCardsList.js"
-  }
-  
+  "name": "AssignmentCardsList",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentCardsList.js"
+}

package/dist/Assignments/AssignmentCourseSelection/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentCourseSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCourseSelection.js"
-  }
-  
+  "name": "AssignmentCourseSelection",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentCourseSelection.js"
+}

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -41,6 +41,7 @@ function Exercise({
   selectedExercises,
   useCase,
   assignment,
+  viewOnly,
   progressHelpers,
   username,
   preferred_username,
@@ -231,6 +232,7 @@ function Exercise({
         ml: 7,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentRoleplaySelection.default, {
           roleplays: roleplays,
+          viewOnly: viewOnly,
           courseSectionTopicId: courseSectionTopicId,
           t: t,
           isExerciseSelected: isExerciseSelected,
@@ -252,6 +254,7 @@ function Exercise({
         ml: 7,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentBotSelection.default, {
           bots: bots,
+          viewOnly: viewOnly,
           courseSectionTopicId: courseSectionTopicId,
           t: t,
           isExerciseSelected: isExerciseSelected,
@@ -284,6 +287,7 @@ function ExerciseList({
   handleSelectExercise,
   selectedExercises,
   useCase,
+  viewOnly,
   assignment,
   handleStartExercise,
   isCreator,
@@ -303,6 +307,7 @@ function ExerciseList({
       const keyId = `exerc_${courseSectionTopicId}_${exercise}_${i}`;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Exercise, {
         t: t,
+        viewOnly: viewOnly,
         ...exercise,
         isMember: isMember,
         courseSectionTopicId: courseSectionTopicId,
@@ -361,6 +366,7 @@ function Topic({
   memberCourseCompletions,
   lastClickedExerciseId,
   completion,
+  viewOnly,
   getRoleplays,
   getBots,
   ...otherProps
@@ -606,9 +612,9 @@ function Topic({
           label: `${selectedCount} / ${totalCount}`,
           size: "medium",
           disabled: selectedCount === 0,
-          color: selectedCount === totalCount ? 'primary' : 'default',
+          color: selectedCount === totalCount ? "primary" : "default",
           sx: {
-            fontWeight: 'bold',
+            fontWeight: "bold",
             marginRight: 3
           }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
@@ -629,6 +635,7 @@ function Topic({
         unmountOnExit: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExerciseList, {
           t: t,
+          viewOnly: viewOnly,
           topicInfo: {
             topicName,
             description
@@ -733,6 +740,7 @@ function Section({
       sx: root,
       children: viewOnly ? filteredTopics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
         index: i,
+        viewOnly: viewOnly,
         topics: topics,
         topicLength: topics.length,
         sectionId: sectionId,
@@ -760,6 +768,7 @@ function Section({
         progressHelpers: progressHelpers,
         memberCourseCompletions: memberCourseCompletions
       }, `${sectionId}-${topic.topicId}`)) : topics.map((topic, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Topic, {
+        viewOnly: viewOnly,
         index: i,
         topics: topics,
         topicLength: topics.length,
@@ -861,6 +870,7 @@ function AssignmentExerciseSelection({
   t = text => text,
   sections = [],
   isMember,
+  handleSelectExercise = () => {},
   isCreator,
   courseId,
   handleFetchTopic,
@@ -872,7 +882,6 @@ function AssignmentExerciseSelection({
   setIsExerciseSelected,
   getRoleplays,
   getBots,
-  handleSelectExercise,
   selectedExercises,
   useCase,
   assignment,

package/dist/Assignments/AssignmentExerciseSelection/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentExerciseSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentExerciseSelection.js"
-  }
-  
+  "name": "AssignmentExerciseSelection",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentExerciseSelection.js"
+}

package/dist/Assignments/AssignmentExerciseSelector/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentExerciseSelector",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentExerciseSelector.js"
-  }
-  
+  "name": "AssignmentExerciseSelector",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentExerciseSelector.js"
+}

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -361,18 +361,21 @@ function AssignmentRoleplaySelection({
   t,
   isExerciseSelected,
   handleSelectExercise,
-  selectedExercises,
+  selectedExercises = [],
   useCase,
   assignment,
   memberCourseCompletions,
   topicProgress,
   topics,
   isCreator,
-  lastClickedExerciseId
+  lastClickedExerciseId,
+  viewOnly
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = (0, _react.useState)(false);
   const filteredCompletions = Array.isArray(memberCourseCompletions) && memberCourseCompletions.length > 0 ? memberCourseCompletions.filter(completion => completion.courseSectionTopicId === courseSectionTopicId) : [];
-  return roleplays.map(roleplay => /*#__PURE__*/(0, _jsxRuntime.jsx)(Roleplay, {
+  const selectedRoleplayIds = new Set(selectedExercises.map(sE => sE.roleplayId));
+  const filteredRoleplays = !viewOnly ? roleplays : roleplays.filter(e => selectedRoleplayIds.has(e.roleplayId));
+  return filteredRoleplays.map(roleplay => /*#__PURE__*/(0, _jsxRuntime.jsx)(Roleplay, {
     roleplay: roleplay,
     isRoleplaySelected: isRoleplaySelected,
     setIsRoleplaySelected: setIsRoleplaySelected,

package/dist/Assignments/AssignmentRoleplaySelection/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "AssignmentRoleplaySelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentRoleplaySelection.js"
-  }
-  
+  "name": "AssignmentRoleplaySelection",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./AssignmentRoleplaySelection.js"
+}

package/dist/Assignments/CreateAssignmentDialog/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "CreateAssignmentDialog",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./CreateAssignmentDialog.js"
-  }
-  
+  "name": "CreateAssignmentDialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CreateAssignmentDialog.js"
+}

package/dist/Assignments/SelectAssignmentTypeDialog/SelectAssignmentTypeDialog.js

@@ -74,7 +74,7 @@ function SelectAssignmentTypeDialog({
     },
     children: [dialogTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogTitle, {
       sx: {
-        fontWeight: 'bold'
+        fontWeight: "bold"
       },
       children: dialogTitle
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
@@ -94,7 +94,7 @@ function SelectAssignmentTypeDialog({
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
         sx: {
-          width: '100%'
+          width: "100%"
         },
         spacing: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
@@ -112,9 +112,9 @@ function SelectAssignmentTypeDialog({
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h4",
                 sx: {
-                  fontWeight: 'bold'
+                  fontWeight: "bold"
                 },
-                children: t('assign_exercises')
+                children: t("assign_exercises")
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Assignment.default, {
                 sx: theme => ({
                   width: "100%",
@@ -124,7 +124,7 @@ function SelectAssignmentTypeDialog({
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "subtitle1",
-                children: t('assign_exercises_desc')
+                children: t("assign_exercises_desc")
               })]
             })
           })
@@ -143,9 +143,9 @@ function SelectAssignmentTypeDialog({
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h4",
                 sx: {
-                  fontWeight: 'bold'
+                  fontWeight: "bold"
                 },
-                children: t('assign_discuss')
+                children: t("assign_discuss")
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoCall.default, {
                 sx: theme => ({
                   width: "100%",
@@ -155,7 +155,7 @@ function SelectAssignmentTypeDialog({
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "subtitle1",
-                children: t('assign_discuss_desc')
+                children: t("assign_discuss_desc")
               })]
             })
           })

package/dist/Assignments/SelectAssignmentTypeDialog/package.json

@@ -1,7 +1,6 @@
 {
-    "name": "SelectAssignmentTypeDialog",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./SelectAssignmentTypeDialog.js"
-  }
-  
+  "name": "SelectAssignmentTypeDialog",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./SelectAssignmentTypeDialog.js"
+}

package/dist/Cards/Course/Course.js

@@ -114,7 +114,7 @@ function OverflowMenu({
             onClick: async () => {
               await handleDuplicateCourse(course, classroomId);
             },
-            disabled: !canDuplicateCourse || course.duplicated && course.duplicatedBy !== 'creator',
+            disabled: !canDuplicateCourse || course.duplicated && course.duplicatedBy !== "creator",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardMenuIcon, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
                 fontSize: "small"
@@ -351,8 +351,8 @@ function CourseCard({
   // const memberCount = membersQuery.isSuccess ? membersQuery.data.Items.length : 0;
 
   const isPlaysVisible = !disablePlays && exerciseStartTotal > -1;
-  const isCollaborator = Array.isArray(course.collaborators) && course.collaborators.some(collab => (typeof collab === 'string' ? collab : collab?.S) === email);
-  const canDuplicateCourse = isCreator || course.isShareable === 'everyone' || course.isShareable === 'collaborators' && isCollaborator;
+  const isCollaborator = Array.isArray(course.collaborators) && course.collaborators.some(collab => (typeof collab === "string" ? collab : collab?.S) === email);
+  const canDuplicateCourse = isCreator || course.isShareable === "everyone" || course.isShareable === "collaborators" && isCollaborator;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardContainer, {
     sx: disableRaised ? {} : _CardElements.classes.hover,
     raised: disableRaised ? false : anchorEl || isOutlineOpen,

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -48,7 +48,7 @@ function RecordingCard({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
       sx: {
-        width: '100%'
+        width: "100%"
       },
       alignItems: "center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {

package/dist/Cards/ScheduleCard/ScheduleCard.js

@@ -31,7 +31,7 @@ function ScheduleCard({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
       sx: {
-        width: '100%'
+        width: "100%"
       },
       alignItems: "center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {

package/dist/Cards/SubmissionsCard/SubmissionsCard.js

@@ -47,7 +47,7 @@ function SubmissionsCard({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
       sx: {
-        width: '100%'
+        width: "100%"
       },
       alignItems: "center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {

package/dist/Chat/ChatLoading/ChatLoading.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChatLoading;
+var _react = require("react");
+var _mui = require("tss-react/mui");
+var _styles = require("@mui/material/styles");
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
+var _material = require("@mui/material");
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useStyles = (0, _mui.makeStyles)()((theme, {
+  isMyMessage,
+  isButton,
+  hideAvatar,
+  isHighlighted
+}) => ({
+  root: {
+    display: "flex",
+    justifyContent: isMyMessage ? isButton || hideAvatar ? "flex-start" : "flex-end" : null,
+    marginBottom: isButton ? null : theme.spacing(3)
+  },
+  message: {
+    display: "flex",
+    maxWidth: 500,
+    gap: "3px"
+  },
+  avatar: {
+    [theme.breakpoints.down("md")]: {
+      height: 40,
+      width: 40
+    },
+    [theme.breakpoints.up("md")]: {
+      height: 60,
+      width: 60
+    },
+    marginRight: theme.spacing(2),
+    display: isButton || hideAvatar ? "none" : null
+  },
+  bubble: {
+    display: "block",
+    backgroundColor: theme.palette.common.white,
+    color: theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.main,
+    padding: theme.spacing(1, 2),
+    borderRadius: theme.spacing(2),
+    boxShadow: theme.shadows[2],
+    minWidth: 150,
+    borderTopLeftRadius: 0,
+    borderStyle: "solid",
+    borderColor: theme.palette.primary.main,
+    borderWidth: "thin",
+    transition: isButton ? theme.transitions.create("background-color") : null,
+    "& img": {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1)
+    },
+    "& svg": {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+      color: isMyMessage ? theme.palette.grey[400] : isHighlighted ? theme.palette.primary.main : theme.palette.grey[600]
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.grey[300],
+      borderColor: isButton ? theme.palette.primary.dark : null
+    },
+    "@media print": {
+      "-webkit-print-color-adjust": "exact",
+      "-moz-print-color-adjust": "exact",
+      " -ms-print-color-adjust": "exact",
+      "print-color-adjust": "exact",
+      "page-break-inside": "avoid",
+      boxShadow: "none"
+    }
+  }
+}));
+function LoadingIndicator({
+  loading,
+  setLoading
+}) {
+  const theme = (0, _styles.useTheme)();
+  (0, _react.useEffect)(() => {
+    const interval = setInterval(() => {
+      setLoading(prevChecked => !prevChecked);
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  const icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+    sx: {
+      m: 1,
+      width: 9,
+      height: 9,
+      borderRadius: "50%",
+      backgroundColor: theme.palette.primary.main
+    },
+    elevation: 4
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: "flex",
+      height: "auto",
+      overflow: "hidden"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grow, {
+      in: loading,
+      children: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grow, {
+      in: loading,
+      style: {
+        transformOrigin: "0 0 0"
+      },
+      timeout: loading ? 400 : 0,
+      children: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grow, {
+      in: loading,
+      style: {
+        transformOrigin: "0 0 0"
+      },
+      timeout: loading ? 800 : 0,
+      children: icon
+    })]
+  });
+}
+function ChatLoading({
+  t = text => text,
+  isMyMessage,
+  userImage,
+  name,
+  botMessageIndex,
+  hideAvatar,
+  messages = [],
+  index
+}) {
+  const theme = (0, _styles.useTheme)();
+  const messageContainerId = `message${botMessageIndex}`;
+  const {
+    classes
+  } = useStyles({
+    isMyMessage,
+    hideAvatar,
+    messages,
+    index
+  });
+  const [isBotMessageLoading, setIsBotMessageLoading] = (0, _react.useState)(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.message,
+      children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        className: classes.avatar,
+        src: userImage,
+        alt: ""
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        className: classes.avatar,
+        sx: {
+          backgroundColor: theme.palette.mode === "dark" ? "white" : "",
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
+        },
+        alt: "",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Person.default, {
+          fontSize: "large"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.bubble,
+          id: messageContainerId,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+              container: true,
+              alignItems: "center",
+              justifyContent: "space-between",
+              sx: {
+                display: "flex"
+              },
+              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
+                })
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingIndicator, {
+              loading: isBotMessageLoading,
+              setLoading: setIsBotMessageLoading
+            })]
+          })
+        })
+      })]
+    })
+  });
+}

package/dist/Chat/ChatLoading/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ChatLoading",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ChatLoading.js"
+}

package/dist/Chat/Messages/Messages.js

@@ -12,6 +12,7 @@ var _Question = _interopRequireDefault(require("./Question"));
 var _material = require("@mui/material");
 var _dragAndDrop = require("../../utils/dragAndDrop/dragAndDrop");
 var _core = require("@dnd-kit/core");
+var _ChatLoading = _interopRequireDefault(require("../ChatLoading/ChatLoading"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
@@ -220,7 +221,13 @@ function Messages({
               messages: messages,
               ...m,
               ...otherProps
-            }, `messx_${i}`), !m?.question && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
+            }, `messx_${i}`), !m?.question && (m.isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatLoading.default, {
+              t: t,
+              index: i,
+              messages: messages,
+              ...m,
+              ...otherProps
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
               t: t,
               languageTag: languageTag,
               disableTranslation: disableTranslation,
@@ -242,7 +249,7 @@ function Messages({
               siteLanguage: siteLanguage,
               ...m,
               ...otherProps
-            }, `messy_${i}`)]
+            }, `messy_${i}`))]
           });
         })]
       })

package/dist/Chat/Messages/Question/Question.js

@@ -368,7 +368,7 @@ function Question({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
           container: true,
           sx: {
-            width: '100%'
+            width: "100%"
           },
           justifyContent: "center",
           alignItems: "center",

package/dist/Chat/TopBar/TopBar.js

@@ -72,8 +72,8 @@ function TopBar({
       children: [handleBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
         sx: {
           display: {
-            xl: 'none',
-            xs: 'block'
+            xl: "none",
+            xs: "block"
           }
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {