@nualang/nualang-ui-components 0.1.1242 → 0.1.1243

package/README.md

@@ -1,65 +1,65 @@
-# Nualang ui-components
-This is the ui-components repository for the Nualang product. The components
-are developed, reviewed and tested with storybook and a library is then published
-to `npm` and consumed from there by nualang web apps.
-
-## Getting Started
-Clone this repository and then execute `npm install`. `npm start` will start
-[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
-
-## Develop
-```
-npm start
-```
-
-## Create Local Package
-Compile and pack (This will create a '.tgz' file):
-```
-npm run localpack
-```
-
-Install package (Inside webapp):
-```
-npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
-```
-
-If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
-```
-yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
-```
-
-## Publish to npm
-Make sure that the version number has been updayed in package.json.
-Ensure that you have committed the latest version to git.
-Execute:-
-```bash
-npm run postversion
-```
-npm will complain if you try to re-publish a previously used version number.
-
-
-## Additional Scripts
-In the project directory, you can run:
-
-### `npm run storybook`
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You should also see any lint errors in the console.
-
-### `npm run test`
-Launches the test runner in interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run lint`
-Check for any lint errors or warnings.
-
-### `npm run compile`
-Run the babel compiler to compile es6 to js.
-
-### `npm run postversion`
-Publish a new version of the pacakage to npm. npm will complain
-
-### `npm run chromatic`
+# Nualang ui-components
+This is the ui-components repository for the Nualang product. The components
+are developed, reviewed and tested with storybook and a library is then published
+to `npm` and consumed from there by nualang web apps.
+
+## Getting Started
+Clone this repository and then execute `npm install`. `npm start` will start
+[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
+
+## Develop
+```
+npm start
+```
+
+## Create Local Package
+Compile and pack (This will create a '.tgz' file):
+```
+npm run localpack
+```
+
+Install package (Inside webapp):
+```
+npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
+```
+
+If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
+```
+yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
+```
+
+## Publish to npm
+Make sure that the version number has been updayed in package.json.
+Ensure that you have committed the latest version to git.
+Execute:-
+```bash
+npm run postversion
+```
+npm will complain if you try to re-publish a previously used version number.
+
+
+## Additional Scripts
+In the project directory, you can run:
+
+### `npm run storybook`
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You should also see any lint errors in the console.
+
+### `npm run test`
+Launches the test runner in interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run lint`
+Check for any lint errors or warnings.
+
+### `npm run compile`
+Run the babel compiler to compile es6 to js.
+
+### `npm run postversion`
+Publish a new version of the pacakage to npm. npm will complain
+
+### `npm run chromatic`
 Publish a new version of the pacakage to https://www.chromatic.com/ 

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InProgressBadge = InProgressBadge;
+exports.ProgressBadge = ProgressBadge;
+exports.default = void 0;
+var _react = require("react");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _reactRouterDom = require("react-router-dom");
+var _jsxRuntime = require("react/jsx-runtime");
+const sxGreenColor = theme => ({
+  color: theme.palette.success ? theme.palette.success.dark : ""
+});
+const sxInfoColor = theme => ({
+  color: theme.palette.info ? theme.palette.info.main : ""
+});
+function ProgressBadge({
+  completions
+}) {
+  return completions > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+    sx: sxGreenColor,
+    badgeContent: completions,
+    color: "default",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Done, {})
+  }) : null;
+}
+function InProgressBadge({
+  progressCount
+}) {
+  return progressCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Badge, {
+    sx: sxInfoColor,
+    color: "default",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Timelapse, {})
+  }) : null;
+}
+function Bot({
+  bot,
+  courseSectionTopicId,
+  isBotSelected,
+  t,
+  isExerciseSelected,
+  handleSelectExercise = null,
+  selectedExercises,
+  useCase,
+  assignment,
+  lastClickedExerciseId,
+  memberCourseCompletions,
+  topicProgress,
+  isCreator
+}) {
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const params = (0, _reactRouterDom.useParams)();
+  const {
+    classroomId
+  } = params;
+  const [courseId, sectionId, topicId] = courseSectionTopicId ? courseSectionTopicId.split("|") : "";
+  const [lasClickedCourseId, lasClickedSectionId, lasClickedTopicId, lastClickedAssignmentId, lastClickedBotId] = lastClickedExerciseId?.split("|") || [];
+  const addSearchParams = () => {
+    if (!classroomId || !courseId || !sectionId || !topicId || !bot?.botId) {
+      console.error("Missing required parameters for navigation");
+      return;
+    }
+    const lastClickedExercise = {
+      courseSectionTopicId: `${courseSectionTopicId}|${assignment.assignmentId}|${bot.botId}`
+    };
+    localStorage.setItem("lastClickedExercise", JSON.stringify(lastClickedExercise));
+    navigate(`/classrooms/${classroomId}/${courseId}/${sectionId}/${topicId}/bots/${bot?.botId}?assignmentId=${assignment.assignmentId}`);
+  };
+  const [open, setOpen] = (0, _react.useState)(lastClickedBotId === bot.botId && lastClickedAssignmentId === assignment.assignmentId);
+  const [isSelected, setIsSelected] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    // Check if this exercise is selected
+    const exerciseSelected = selectedExercises?.some(exercise => exercise.botId === bot.botId);
+    setIsSelected(exerciseSelected);
+  }, [selectedExercises, bot.botId]);
+  const handleClick = () => {
+    setIsSelected(!isSelected);
+    const exercise = {
+      botId: bot.botId,
+      courseSectionTopicId
+    };
+    handleSelectExercise([exercise]);
+  };
+  const getBotCompletion = () => {
+    if (!Array.isArray(memberCourseCompletions) || memberCourseCompletions.length === 0) {
+      return 0;
+    }
+    const botCompletion = memberCourseCompletions.filter(completion => completion.botId === bot.botId);
+    return botCompletion.length;
+  };
+  const getBotProgress = () => {
+    const progress = topicProgress?.filter(progress => progress.botId === bot.botId && progress.existingMessages && progress.existingMessages !== null);
+    return progress?.length || 0;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+        onClick: () => {
+          if (useCase === "assignment-start") {
+            addSearchParams();
+          } else if (handleSelectExercise) {
+            handleClick();
+          }
+        },
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexDirection: {
+            xs: "column",
+            sm: "row"
+          }
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          alignItems: "center",
+          width: {
+            xs: "100%",
+            sm: "85%"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: bot.picture
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+            primary: bot.botName,
+            secondary: bot.description,
+            sx: {
+              marginLeft: 2
+            }
+          })]
+        }), useCase === "assignment-select" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
+          checked: isSelected,
+          onClick: e => {
+            e.stopPropagation();
+            handleClick();
+          }
+        }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemIcon, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InProgressBadge, {
+            progressCount: getBotProgress()
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBadge, {
+            completions: getBotCompletion()
+          })]
+        })]
+      })
+    })
+  });
+}
+function AssignmentBotSelection({
+  bots = [],
+  courseSectionTopicId,
+  t,
+  isExerciseSelected,
+  handleSelectExercise,
+  selectedExercises,
+  useCase,
+  assignment,
+  lastClickedExerciseId,
+  memberCourseCompletions,
+  topicProgress
+}) {
+  return bots.map((bot, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Bot, {
+    bot: bot,
+    courseSectionTopicId: courseSectionTopicId,
+    t: t,
+    isExerciseSelected: isExerciseSelected,
+    handleSelectExercise: handleSelectExercise,
+    selectedExercises: selectedExercises,
+    useCase: useCase,
+    assignment: assignment,
+    lastClickedExerciseId: lastClickedExerciseId,
+    memberCourseCompletions: memberCourseCompletions,
+    topicProgress: topicProgress
+  }, index));
+}
+var _default = exports.default = AssignmentBotSelection;

package/dist/Assignments/AssignmentBotSelection/package.json

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

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -33,7 +33,8 @@ function AssignmentCard({
   memberId,
   fetchMemberCourseCompletions,
   lastClickedExerciseId,
-  handleViewProgress
+  handleViewProgress,
+  lastAssignmentFetch
 }) {
   const [confirm] = (0, _useConfirm.default)(t);
   const {
@@ -112,6 +113,8 @@ function AssignmentCard({
     staleTime: 500000
   });
   const memberCourseCompletions = (0, _react.useMemo)(() => memberCourseCompletionsQuery.isSuccess && memberCourseCompletionsQuery.data ? memberCourseCompletionsQuery.data : {}, [memberCourseCompletionsQuery.data, memberCourseCompletionsQuery.isSuccess]);
+  const lastFetch = lastAssignmentFetch?.current[assignment?.classroomId] || 0;
+  const isNew = assignment?.updatedAt > lastFetch && !isCreator;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Card, {
     sx: {
       display: "flex",
@@ -124,19 +127,31 @@ function AssignmentCard({
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
-        sx: {
-          width: '100%'
-        },
         spacing: 2,
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          size: "grow",
+          item: true,
+          xs: true,
           flexDirection: "column",
           display: "flex",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            variant: "body1",
-            component: "div",
-            children: assignment.title
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body1",
+              component: "div",
+              children: assignment.title
+            }), isNew && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              ml: 2,
+              px: 1,
+              py: 0.25,
+              bgcolor: "#8300A1",
+              color: "white",
+              fontSize: "0.75rem",
+              borderRadius: 1,
+              fontWeight: "bold",
+              children: t('NEW')
+            })]
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -145,6 +160,7 @@ function AssignmentCard({
             children: calculateDaysUntilDue(assignment.dueDate, assignment.scheduleDate)
           })
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          item: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: t("edit"),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
@@ -200,10 +216,9 @@ function AssignmentCard({
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-            size: {
-              xs: 3,
-              md: 2
-            },
+            item: true,
+            xs: 3,
+            md: 2,
             children: isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               display: "flex",
               flexDirection: "column",

package/dist/Assignments/AssignmentCard/package.json

@@ -1,7 +1,7 @@
-{
-    "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/AssignmentCardsList.js

@@ -31,7 +31,8 @@ const AssignmentCardsList = ({
   progressHelpers,
   fetchMemberCourseCompletions,
   memberId,
-  handleViewProgress
+  handleViewProgress,
+  lastAssignmentFetch
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
@@ -133,6 +134,7 @@ const AssignmentCardsList = ({
         return new Date(assignment.scheduleDate) <= new Date();
       }).map((assignment, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
         index: index,
+        lastAssignmentFetch: lastAssignmentFetch,
         assignment: assignment,
         t: t,
         isCreator: isCreator,

package/dist/Assignments/AssignmentCardsList/package.json

@@ -1,7 +1,7 @@
-{
-    "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/AssignmentCourseSelection.js

@@ -19,6 +19,7 @@ function Course({
   index,
   getCourseSections,
   getRoleplays,
+  getBots,
   username,
   t = text => text,
   isExerciseSelected,
@@ -36,8 +37,8 @@ function Course({
   memberCourseCompletions,
   lastClickedExerciseId
 }) {
-  const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split('|') : [];
-  const [open, setOpen] = (0, _react.useState)(lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split('|')[3] === assignment.assignmentId));
+  const numOfIds = lastClickedExerciseId ? lastClickedExerciseId.split("|") : [];
+  const [open, setOpen] = (0, _react.useState)(lastClickedExerciseId && (numOfIds.length === 4 && lastClickedExerciseId.endsWith(`|${assignment.assignmentId}`) || numOfIds.length === 5 && lastClickedExerciseId.split("|")[3] === assignment.assignmentId));
   const [selectedSectionIds, setSelectedSectionIds] = (0, _react.useState)([]);
   const [filteredSections, setFilteredSections] = (0, _react.useState)([]);
   const [courseSectionCompletion, setCourseSectionCompletion] = (0, _react.useState)(null);
@@ -83,95 +84,123 @@ function Course({
       setCourseSectionCompletion(percentCompletion);
     }
   }, [courseSections, memberCourseCompletions, selectedExercises]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
-    disablePadding: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-      title: isCourseEmpty ? t("course_no_sections") : "",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
-        disablePadding: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemButton, {
-          onClick: () => setOpen(!open),
-          disabled: isCourseEmpty || isExerciseSelected,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: useCase === "assignment-select" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
+      disablePadding: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: isCourseEmpty ? t("course_no_sections") : "",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+          disablePadding: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemButton, {
+            onClick: () => setOpen(!open),
+            disabled: isCourseEmpty || isExerciseSelected,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               display: "flex",
               alignItems: "center",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
-                src: course.picture,
-                alt: ""
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-                primary: course.courseName,
-                secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "body2",
-                    color: "textSecondary",
-                    children: course.description
-                  }), !isCreator && courseSectionCompletion && courseSectionCompletion !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                    mt: 1,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-                      title: `Completed ${courseSectionCompletion.completed} / ${courseSectionCompletion.total} exercises`,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
-                        variant: "determinate",
-                        value: courseSectionCompletion.percentage
+              justifyContent: "space-between",
+              width: "100%",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
+                alignItems: "center",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                  src: course.picture,
+                  alt: ""
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                  primary: course.courseName,
+                  secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                      variant: "body2",
+                      color: "textSecondary",
+                      children: course.description
+                    }), !isCreator && courseSectionCompletion && courseSectionCompletion !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                      mt: 1,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                        title: `Completed ${courseSectionCompletion.completed} / ${courseSectionCompletion.total} exercises`,
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorLinearProgress.default, {
+                          variant: "determinate",
+                          value: courseSectionCompletion.percentage
+                        })
                       })
-                    })
-                  })]
-                }),
+                    })]
+                  }),
+                  sx: {
+                    marginLeft: 2
+                  }
+                })]
+              }), open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {
                 sx: {
-                  marginLeft: 2
+                  color: "#757575"
+                }
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+                sx: {
+                  color: "#757575"
                 }
               })]
-            }), open ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {
-              sx: {
-                color: "#757575"
-              }
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
-              sx: {
-                color: "#757575"
-              }
-            })]
+            })
           })
         })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
-      in: open,
-      timeout: "auto",
-      unmountOnExit: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        ml: 3.5,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelection.default, {
-          t: t,
-          sections: viewOnly ? filteredSections : courseSections,
-          isLoading: sectionsQuery.isLoading,
-          courseId: course.courseId,
-          isExerciseSelected: isExerciseSelected,
-          setIsExerciseSelected: setIsExerciseSelected,
-          getRoleplays: getRoleplays,
-          handleSelectExercise: handleSelectExercise,
-          selectedExercises: selectedExercises,
-          useCase: useCase,
-          assignment: assignment,
-          handleStartExercise: handleStartExercise,
-          isCreator: isCreator,
-          viewOnly: viewOnly,
-          username: username,
-          preferred_username: preferred_username,
-          progressHelpers: progressHelpers,
-          memberCourseCompletions: memberCourseCompletions,
-          lastClickedExerciseId: lastClickedExerciseId
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
+        in: open,
+        timeout: "auto",
+        unmountOnExit: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          ml: 3.5,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelection.default, {
+            t: t,
+            sections: viewOnly ? filteredSections : courseSections,
+            isLoading: sectionsQuery.isLoading,
+            courseId: course.courseId,
+            isExerciseSelected: isExerciseSelected,
+            setIsExerciseSelected: setIsExerciseSelected,
+            getRoleplays: getRoleplays,
+            handleSelectExercise: handleSelectExercise,
+            selectedExercises: selectedExercises,
+            useCase: useCase,
+            assignment: assignment,
+            handleStartExercise: handleStartExercise,
+            isCreator: isCreator,
+            viewOnly: viewOnly,
+            username: username,
+            preferred_username: preferred_username,
+            progressHelpers: progressHelpers,
+            memberCourseCompletions: memberCourseCompletions,
+            lastClickedExerciseId: lastClickedExerciseId
+          })
         })
+      })]
+    }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      ml: 3.5,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentExerciseSelection.default, {
+        t: t,
+        sections: viewOnly ? filteredSections : courseSections,
+        isLoading: sectionsQuery.isLoading,
+        courseId: course.courseId,
+        isExerciseSelected: isExerciseSelected,
+        setIsExerciseSelected: setIsExerciseSelected,
+        getRoleplays: getRoleplays,
+        getBots: getBots,
+        handleSelectExercise: handleSelectExercise,
+        selectedExercises: selectedExercises,
+        useCase: useCase,
+        assignment: assignment,
+        handleStartExercise: handleStartExercise,
+        isCreator: isCreator,
+        viewOnly: viewOnly,
+        username: username,
+        preferred_username: preferred_username,
+        progressHelpers: progressHelpers,
+        memberCourseCompletions: memberCourseCompletions,
+        lastClickedExerciseId: lastClickedExerciseId,
+        course: course
       })
-    })]
-  }, index);
+    })
+  });
 }
 function AssignmentCourseSelection({
   courses = [],
   getCourseSections,
   getRoleplays,
+  getBots,
   username,
   t = text => text,
   isExerciseSelected,
@@ -195,6 +224,7 @@ function AssignmentCourseSelection({
       index: index,
       getCourseSections: getCourseSections,
       getRoleplays: getRoleplays,
+      getBots: getBots,
       username: username,
       t: t,
       isExerciseSelected: isExerciseSelected,