@nualang/nualang-ui-components 0.1.1292 → 0.1.1294

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -110,7 +110,10 @@ function Bot({
             xs: "column",
             sm: "row"
           },
-          marginLeft: "60px"
+          marginLeft: {
+            sm: "0px",
+            md: "60px"
+          }
         },
         children: [/*#__PURE__*/_jsxs(Box, {
           display: "flex",

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -210,7 +210,6 @@ export default function AssignmentCard({
             })]
           }), /*#__PURE__*/_jsx(Grid, {
             size: {
-              xs: 3,
               md: 2
             },
             children: isCreator && /*#__PURE__*/_jsxs(Box, {

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -127,7 +127,10 @@ function Course({
                     })]
                   }),
                   sx: {
-                    marginLeft: 2
+                    marginLeft: {
+                      xs: 1,
+                      md: 2
+                    }
                   }
                 })]
               }), open ? /*#__PURE__*/_jsx(ExpandLessIcon, {

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -10,7 +10,7 @@ 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 FaceIcon from '@mui/icons-material/Face';
+import FaceIcon from "@mui/icons-material/Face";
 import OndemandVideoIcon from "@mui/icons-material/OndemandVideo";
 import AssignmentRoleplaySelection from "../AssignmentRoleplaySelection/AssignmentRoleplaySelection";
 import { CardInfoSectionItem } from "../../Cards/CardElements";
@@ -22,7 +22,7 @@ import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgr
 import { calcCompletions } from "../../utils";
 import AssignmentBotSelection from "../AssignmentBotSelection/AssignmentBotSelection";
 import { Clear } from "@mui/icons-material";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Exercise({
   name,
   description,
@@ -168,20 +168,26 @@ function Exercise({
       justifyContent: "space-between",
       disabled: isExerciseSelected || !isValidExercise || noRoleplays || noBots,
       sx: theme => ({
-        [theme.breakpoints.up("sm")]: {
+        [theme.breakpoints.up("md")]: {
           ml: "60px"
         }
       }),
-      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, {})
-      }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(ForumIcon, {})
-      }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(FaceIcon, {})
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: {
+          xs: "none",
+          sm: "flex"
+        },
+        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, {})
+        }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(ForumIcon, {})
+        }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(ListItemIcon, {
+          children: /*#__PURE__*/_jsx(FaceIcon, {})
+        })]
       }), /*#__PURE__*/_jsx(Box, {
         width: "100%",
         children: /*#__PURE__*/_jsx(ListItemText, {
@@ -190,12 +196,12 @@ function Exercise({
         })
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(IconButton, {
         sx: {
-          marginRight: "15px"
+          mr: useCase === "assignment-select" ? 2 : 0
         },
         children: roleplaysOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
       }), name.toLowerCase() === "bots" && /*#__PURE__*/_jsx(IconButton, {
         sx: {
-          marginRight: "15px"
+          mr: useCase === "assignment-select" ? 2 : 0
         },
         children: botsOpen ? /*#__PURE__*/_jsx(ExpandLessIcon, {}) : /*#__PURE__*/_jsx(ExpandMoreIcon, {})
       }), (name.toLowerCase() === "listening" || name.toLowerCase() === "translation" || name.toLowerCase() === "pronunciation") && /*#__PURE__*/_jsxs(ListItemIcon, {
@@ -249,7 +255,10 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: 7,
+        ml: {
+          sm: 0,
+          md: 7
+        },
         children: /*#__PURE__*/_jsx(AssignmentRoleplaySelection, {
           roleplays: roleplays,
           viewOnly: viewOnly,
@@ -273,7 +282,10 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: 7,
+        ml: {
+          sm: 0,
+          md: 7
+        },
         children: /*#__PURE__*/_jsx(AssignmentBotSelection, {
           bots: bots,
           viewOnly: viewOnly,

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -188,11 +188,15 @@ function Roleplay({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "60px"
             },
-            marginLeft: "60px"
+            gap: {
+              xs: 1,
+              sm: 2
+            }
           },
           children: [/*#__PURE__*/_jsxs(Box, {
             display: "flex",
@@ -202,25 +206,36 @@ function Roleplay({
               sm: "85%"
             },
             children: [/*#__PURE__*/_jsx(Avatar, {
-              src: roleplay.picture
+              src: roleplay.picture,
+              sx: {
+                display: "flex",
+                width: 32,
+                height: 32
+              }
             }), /*#__PURE__*/_jsx(ListItemText, {
               primary: roleplay.roleplayName,
               secondary: roleplay.description,
               sx: {
-                marginLeft: 2
+                ml: {
+                  sm: 2,
+                  xs: 1
+                }
               }
             })]
           }), roleplayHasInteractions && /*#__PURE__*/_jsxs(Box, {
-            display: "flex",
+            display: {
+              xs: "none",
+              sm: "flex"
+            },
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(ListItemText, {
               secondary: numberOfRoleplayInteractions,
               sx: {
-                marginRight: 0.5
+                mr: 0.5
               }
             }), /*#__PURE__*/_jsx(ListItemIcon, {
               sx: {
-                marginRight: {
+                mr: {
                   xs: 0,
                   sm: -3
                 }
@@ -236,12 +251,15 @@ function Roleplay({
               })
             })]
           }), roleplayHasQuestions && /*#__PURE__*/_jsxs(Box, {
-            display: "flex",
+            display: {
+              xs: "none",
+              sm: "flex"
+            },
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(ListItemText, {
               secondary: numberOfRoleplayQuestions,
               sx: {
-                marginRight: 0.5
+                mr: 0.5
               }
             }), /*#__PURE__*/_jsx(ListItemIcon, {
               children: /*#__PURE__*/_jsx(Tooltip, {
@@ -254,19 +272,25 @@ function Roleplay({
                 })
               })
             })]
-          }), /*#__PURE__*/_jsx(IconButton, {
-            onClick: () => setOpen(!open),
-            children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
-              sx: {
-                color: "#757575"
-              }
-            }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+          }), /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              onClick: () => setOpen(!open),
               sx: {
-                color: "#757575"
-              }
-            })
-          }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(IconButton, {
+                ml: 2
+              },
+              children: open ? /*#__PURE__*/_jsx(ExpandLessIcon, {
+                sx: {
+                  color: "#757575"
+                }
+              }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+                sx: {
+                  color: "#757575"
+                }
+              })
+            }), useCase === "assignment-view" && isPreview && /*#__PURE__*/_jsx(IconButton, {
               edge: "end",
               "aria-label": "remove-roleplay",
               onClick: e => {
@@ -277,20 +301,21 @@ function Roleplay({
               children: /*#__PURE__*/_jsx(ClearIcon, {
                 fontSize: "small"
               })
-            })
-          }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Tooltip, {
-            title: t("select_all"),
-            placement: "top",
-            children: /*#__PURE__*/_jsx(ListItemIcon, {
+            }), useCase === "assignment-select" && /*#__PURE__*/_jsx(Tooltip, {
+              title: t("select_all"),
+              placement: "top",
               children: /*#__PURE__*/_jsx(Checkbox, {
                 checked: isSelectAllChecked,
                 indeterminate: indeterminate,
                 onChange: handleSelectAll,
                 onClick: event => {
                   event.stopPropagation();
+                },
+                sx: {
+                  mr: 2
                 }
               })
-            })
+            })]
           })]
         })
       })
@@ -299,7 +324,10 @@ function Roleplay({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsxs(Box, {
-        ml: 3.5,
+        ml: {
+          sm: 0,
+          md: 3.5
+        },
         children: [useCase === "assignment-select" && games.map((name, index) => /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: () => handleSelectExercise([{
             roleplayId: roleplay.roleplayId,
@@ -310,13 +338,19 @@ function Roleplay({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
-            },
-            marginLeft: "95px"
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "95px"
+            }
           },
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "flex"
+              }
+            },
             children: getIconAndStatusForGame(name)[0]
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: t(name.replace(/roleplay-/, "").replace(/-/g, "_")),
@@ -337,13 +371,19 @@ function Roleplay({
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            flexDirection: {
-              xs: "column",
-              sm: "row"
-            },
-            marginLeft: "95px"
+            flexDirection: "row",
+            marginLeft: {
+              sm: "0px",
+              md: "95px"
+            }
           },
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            sx: {
+              display: {
+                xs: "none",
+                sm: "flex"
+              }
+            },
             children: getIconAndStatusForGame(name)[0]
           }), /*#__PURE__*/_jsx(ListItemText, {
             primary: t(name.replace(/roleplay-/, "").replace(/-/g, "_")),

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -49,7 +49,7 @@ export default function CreateAssignmentDialog({
   getCourses,
   initialData = {},
   dialogTitle,
-  userEmail = '',
+  userEmail = "",
   assignedStudents
 }) {
   const {
@@ -298,17 +298,30 @@ export default function CreateAssignmentDialog({
     }), /*#__PURE__*/_jsxs(Box, {
       component: "main",
       className: classes.dialogContent,
+      sx: {
+        display: "flex",
+        flexDirection: {
+          xs: "column",
+          md: "row"
+        },
+        gap: 2,
+        width: "100%",
+        boxSizing: "border-box"
+      },
       children: [/*#__PURE__*/_jsx(Card, {
         sx: {
-          display: "flex",
-          flexDirection: "column",
+          flex: "unset",
+          minWidth: 0,
           padding: 1,
           boxShadow: 3,
-          width: "50%"
+          width: {
+            xs: "100%",
+            md: "50%"
+          },
+          boxSizing: "border-box"
         },
         children: /*#__PURE__*/_jsxs(CardContent, {
           sx: {
-            flexGrow: 1,
             display: "flex",
             flexDirection: "column",
             gap: 2
@@ -438,15 +451,18 @@ export default function CreateAssignmentDialog({
         })
       }), /*#__PURE__*/_jsx(Card, {
         sx: {
-          display: "flex",
-          flexDirection: "column",
+          flex: "unset",
+          minWidth: 0,
           padding: 1,
           boxShadow: 3,
-          width: "50%"
+          width: {
+            xs: "100%",
+            md: "50%"
+          },
+          boxSizing: "border-box"
         },
         children: /*#__PURE__*/_jsxs(CardContent, {
           sx: {
-            flexGrow: 1,
             display: "flex",
             flexDirection: "column",
             gap: 2

package/dist/Chat/BottomBar/BottomBar.js

@@ -93,7 +93,6 @@ export default function BottomBar({
   handleOpenConfidence,
   finalTranscript,
   inputRef,
-  isAdvancedBot = false,
   username,
   authenticated,
   isChallengeBot = false

package/dist/Chat/Chat.js

@@ -94,7 +94,6 @@ function Chat({
   noAnswerCounts,
   isDynamicResponsesEnabled,
   isUserInternal,
-  isAdvancedBot = false,
   username,
   isChallengeBot = false
 }) {
@@ -198,7 +197,6 @@ function Chat({
       inputRef: inputRef,
       authenticated: authenticated,
       placeholder: placeholder,
-      isAdvancedBot: isAdvancedBot,
       username: username,
       isChallengeBot: isChallengeBot
     })]

package/dist/Exercises/Bot/Bot.js

@@ -640,7 +640,6 @@ function Bot({
         isSpeakingTextContainer: isSpeakingTextContainer,
         isDynamicResponsesEnabled: isDynamicResponsesClassroomEnabled,
         isUserInternal: isUserInternal,
-        isAdvancedBot: bot.isAdvancedBot,
         username: username,
         isChallengeBot: bot.isChallengeBot
       }), /*#__PURE__*/_jsx(ResponsiveDialog, {

package/dist/Lists/Exercises/Exercises.js

@@ -865,7 +865,6 @@ function Exercises(props) {
     hiddenExercises = [],
     isMember,
     isCreator,
-    isStudent = true,
     courseId,
     sectionId,
     topicId,
@@ -1612,24 +1611,20 @@ function Exercises(props) {
                 children: /*#__PURE__*/_jsx(MoreVertIcon, {})
               })
             })
-          }) : null, (isStudent === false || roleplays.length > 0) && renderCollapseButton(isRoleplayDropdownOpen, isLoading, true, "Roleplays")]
+          }) : null, (isCreator || roleplays.length > 0) && renderCollapseButton(isRoleplayDropdownOpen, isLoading, true, "Roleplays")]
         }),
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           "data-cy": "roleplay-exercise",
           "aria-expanded": isRoleplayDropdownOpen,
           disabled: (() => {
-            if (isStudent && roleplays.length === 0) {
+            if (!isCreator && roleplays.length === 0) {
               return true;
-            }
-            if (isCreator) {
-              return false;
-            }
-            if (isMember) {
+            } else {
               return false;
             }
           })(),
           onClick: () => {
-            if (isStudent && roleplays.length === 0) {
+            if (!isCreator && roleplays.length === 0) {
               return;
             }
             setIsRoleplayDropdownOpen(!isRoleplayDropdownOpen);
@@ -1723,24 +1718,20 @@ function Exercises(props) {
                 children: /*#__PURE__*/_jsx(MoreVertIcon, {})
               })
             })
-          }) : null, (isStudent === false || bots.length > 0) && renderCollapseButton(isChatbotDropdownOpen, isLoading, false, "Chatbots")]
+          }) : null, (isCreator || bots.length > 0) && renderCollapseButton(isChatbotDropdownOpen, isLoading, false, "Chatbots")]
         }),
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           "data-cy": "bot-exercise",
           "aria-expanded": isChatbotDropdownOpen,
           disabled: (() => {
-            if (isStudent && bots.length === 0) {
+            if (!isCreator && bots.length === 0) {
               return true;
-            }
-            if (isCreator) {
-              return false;
-            }
-            if (isMember) {
+            } else {
               return false;
             }
           })(),
           onClick: () => {
-            if (isStudent && bots.length === 0) {
+            if (!isCreator && bots.length === 0) {
               return;
             }
             setIsChatbotDropdownOpen(!isChatbotDropdownOpen);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1292",
+  "version": "0.1.1294",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -21,7 +21,7 @@
     "@hookform/resolvers": "^3.6.0",
     "@json2csv/plainjs": "^7.0.1",
     "@nualang/avatars": "2.0.3",
-    "@nualang/nualang-api-and-queries": "^1.1.20",
+    "@nualang/nualang-api-and-queries": "^1.1.21",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
     "ajv-keywords": "^3.5.2",