@nualang/nualang-ui-components 0.1.1282 → 0.1.1284

package/dist/Chat/BottomBar/BottomBar.js

@@ -38,7 +38,11 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
     color: isPrimaryColor ? theme.palette.primary.contrastText : null
   },
   root: {
-    flexShrink: 0
+    flexShrink: 0,
+    alignItems: "flex-start",
+    minHeight: "auto",
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1)
   },
   micButton: {
     color: isListening ? theme.palette.error.main : "inherit"
@@ -95,7 +99,8 @@ function BottomBar({
   handleOpenConfidence,
   finalTranscript,
   inputRef,
-  authenticated
+  authenticated,
+  isChallengeBot = false
 }) {
   const {
     classes
@@ -114,6 +119,7 @@ function BottomBar({
   };
   const textInput = (0, _react.useRef)(null);
   const activeRef = inputRef ? inputRef : textInput;
+  const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("md"));
   const TextInput = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classes.input,
     id: "keyboardInput",
@@ -127,7 +133,7 @@ function BottomBar({
       onKeyPress: handleKeyPress,
       placeholder: placeholder,
       inputProps: {
-        maxLength: 200,
+        maxLength: isChallengeBot ? 600 : 200,
         sx: theme => ({
           "&::placeholder": {
             color: theme.palette.mode === "light" ? _colors.grey[200] : _colors.grey[800],
@@ -137,6 +143,7 @@ function BottomBar({
       },
       disableUnderline: true,
       multiline: true,
+      rows: isChallengeBot ? 3 : 1,
       autoComplete: autoComplete,
       inputRef: activeRef,
       onClick: handleSelectCurrentInput,
@@ -146,18 +153,30 @@ function BottomBar({
           fontWeight: 800
         }
       }),
-      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.Adornment, {
-        t: t,
-        emoji: true,
-        name: inputName,
-        value: inputValue,
-        onChange: handleInputChange,
-        adornmentPosition: "end",
-        iconButtonEdge: false,
-        characters: characters,
-        activeRef: activeRef,
-        whiteIcon: true,
-        whiteCharacters: (disableInput || isListening) && theme.palette.mode === "dark" ? true : false
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [!isSmallScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "caption",
+          sx: {
+            color: "inherit",
+            opacity: inputValue.length >= (isChallengeBot ? 600 : 200) ? 1 : 0.7,
+            marginRight: 1,
+            fontWeight: 700,
+            fontSize: "0.75rem"
+          },
+          children: `${inputValue.length}/${isChallengeBot ? 600 : 200}`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.Adornment, {
+          t: t,
+          emoji: true,
+          name: inputName,
+          value: inputValue,
+          onChange: handleInputChange,
+          adornmentPosition: "end",
+          iconButtonEdge: false,
+          characters: characters,
+          activeRef: activeRef,
+          whiteIcon: true,
+          whiteCharacters: (disableInput || isListening) && theme.palette.mode === "dark" ? true : false
+        })]
       }),
       classes: {
         root: classes.inputRoot,
@@ -165,7 +184,6 @@ function BottomBar({
       }
     })
   });
-  const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("md"));
   const buttonRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     const handleEnterKey = event => {
@@ -186,8 +204,6 @@ function BottomBar({
   (0, _react.useEffect)(() => {
     if (activeRef.current) {
       activeRef.current.focus();
-      const length = inputValue.length;
-      activeRef.current.setSelectionRange(length, length);
     }
   }, [inputValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Paper.default, {

package/dist/Chat/Chat.js

@@ -99,11 +99,21 @@ function Chat({
   answerCounts,
   noAnswerCounts,
   isDynamicResponsesEnabled,
-  isUserInternal
+  isUserInternal,
+  isChallengeBot = false
 }) {
   const {
     classes
   } = useStyles();
+  const [isMessageLoading, setIsMessageLoading] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!Array.isArray(messages) || messages.length === 0) {
+      setIsMessageLoading(false);
+      return;
+    }
+    const hasLoadingMessage = messages.some(message => typeof message === 'object' && message?.isLoading === true);
+    setIsMessageLoading(hasLoadingMessage);
+  }, [messages]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes.root,
     children: [!viewAttemptMode && !isLiveGame && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopBar.default, {
@@ -169,7 +179,7 @@ function Chat({
       t: t,
       inputName: inputName,
       inputValue: inputValue,
-      disableInput: disableInput,
+      disableInput: disableInput || isMessageLoading,
       focusInput: focusInput,
       handleInputChange: handleInputChange,
       isListening: isListening,
@@ -191,7 +201,8 @@ function Chat({
       finalTranscript: finalTranscript,
       inputRef: inputRef,
       authenticated: authenticated,
-      placeholder: placeholder
+      placeholder: placeholder,
+      isChallengeBot: isChallengeBot
     })]
   });
 }

package/dist/Dialogs/SelectClassroom/SelectClassroom.js

@@ -61,6 +61,9 @@ function SelectClassroom({
           button: true,
           component: _reactRouterDom.Link,
           to: path,
+          sx: {
+            color: 'inherit'
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemAvatar.default, {
             children: picture ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
               src: picture,

package/dist/Editors/Bot/Editor/BotDesigner/VarList.js

@@ -203,7 +203,15 @@ function VarListItem({
       type: "text",
       multiline: true,
       fullWidth: true,
-      onChange: handleUpdateVariable,
+      onChange: e => {
+        const cleaned = e.target.value.replace(/\s+/g, " ").trim();
+        handleUpdateVariable({
+          target: {
+            name: varName,
+            value: cleaned
+          }
+        });
+      },
       onBlur: handleOnBlur,
       onFocus: handleSelectCurrentInput,
       inputProps: {

package/dist/Exercises/Bot/Bot.js

@@ -647,7 +647,8 @@ function Bot({
         isSpeaking: isSpeaking,
         isSpeakingTextContainer: isSpeakingTextContainer,
         isDynamicResponsesEnabled: isDynamicResponsesClassroomEnabled,
-        isUserInternal: isUserInternal
+        isUserInternal: isUserInternal,
+        isChallengeBot: bot.isChallengeBot
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveDialog.default, {
         open: instructionDialogOpen,
         handleClose: handleCloseInstructions,

package/dist/Exercises/Listener/Listener.js

@@ -400,7 +400,7 @@ function Listener({
       })]
     }),
     spotlightPadding: 8,
-    target: "#listeningText"
+    target: "#listeningTextAnchor"
   }, {
     content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
@@ -420,7 +420,8 @@ function Listener({
       })]
     }),
     spotlightPadding: 8,
-    target: "#skipButton"
+    target: "#skipButton",
+    disableScrollParentFix: false
   }, {
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
       children: t("change_voice_speed")
@@ -842,30 +843,36 @@ function Listener({
               width: "100%",
               maxWidth: `250px !important`
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
-              t: t,
-              value: listeningText,
-              onChange: handleInputChange,
-              onKeyDown: e => {
-                if (e.key === "Enter") {
-                  handleContinue(false);
-                  e.stopPropagation();
-                }
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              id: "listeningTextAnchor",
+              style: {
+                position: "relative"
               },
-              id: "listeningText",
-              name: "listeningText",
-              label: t("language_phrase", {
-                language: (0, _index.capitalize)(t(learnLang.toLowerCase()))
-              }),
-              type: "text",
-              role: "textbox",
-              "aria-multiline": "true",
-              "aria-labelledby": "what-do-you-hear",
-              variant: "outlined",
-              fullWidth: true,
-              multiline: true,
-              autoComplete: "off",
-              characters: learnLangCharacters ? learnLangCharacters : null
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
+                t: t,
+                value: listeningText,
+                onChange: handleInputChange,
+                onKeyDown: e => {
+                  if (e.key === "Enter") {
+                    handleContinue(false);
+                    e.stopPropagation();
+                  }
+                },
+                id: "listeningText",
+                name: "listeningText",
+                label: t("language_phrase", {
+                  language: (0, _index.capitalize)(t(learnLang.toLowerCase()))
+                }),
+                type: "text",
+                role: "textbox",
+                "aria-multiline": "true",
+                "aria-labelledby": "what-do-you-hear",
+                variant: "outlined",
+                fullWidth: true,
+                multiline: true,
+                autoComplete: "off",
+                characters: learnLangCharacters ? learnLangCharacters : null
+              })
             })
           }), isWordBankEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -989,6 +996,7 @@ function Listener({
       showSkipButton: true,
       steps: steps,
       scrollOffset: 100,
+      disableScrollParentFix: true,
       styles: {
         options: {
           zIndex: 10000,

package/dist/Exercises/Translator/Translator.js

@@ -61,7 +61,8 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
     },
     flexGrow: 1,
     width: "100%",
-    padding: theme.spacing(4)
+    padding: theme.spacing(4),
+    boxSizing: "border-box"
   },
   progress: {
     width: "100%",
@@ -383,7 +384,7 @@ function Translator({
       })]
     }),
     spotlightPadding: 8,
-    target: "#translationText"
+    target: "#translationTextAnchor"
   }, {
     content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
@@ -403,7 +404,8 @@ function Translator({
       })]
     }),
     spotlightPadding: 8,
-    target: "#skipButton"
+    target: "#skipButton",
+    disableScrollParentFix: false
   }, {
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
       children: t("change_voice_speed")
@@ -862,43 +864,49 @@ function Translator({
             })]
           })]
         }), !isKeyboardHidden && !useWordBank && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
             sx: {
               width: "100%",
               maxWidth: `250px !important`
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: classes.srOnly,
-              children: translationText
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
-              t: t,
-              value: translationText,
-              onChange: handleInputChange,
-              onKeyDown: e => {
-                if (e.key === "Enter") {
-                  handleContinue(false);
-                  e.stopPropagation();
-                }
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              id: "translationTextAnchor",
+              style: {
+                position: "relative"
               },
-              id: "translationText",
-              name: "translationText",
-              "aria-label": t("language_translation", {
-                language: (0, _index.capitalize)(t(forLang.toLowerCase()))
-              }),
-              "data-cy": "translationText",
-              label: t("language_translation", {
-                language: (0, _index.capitalize)(t(forLang.toLowerCase()))
-              }),
-              type: "text",
-              role: "textbox",
-              "aria-multiline": "true",
-              "aria-autocomplete": "none",
-              variant: "outlined",
-              multiline: true,
-              fullWidth: true,
-              autoComplete: "off",
-              characters: forLangCharacters ? forLangCharacters : null
-            })]
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: classes.srOnly,
+                children: translationText
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
+                t: t,
+                value: translationText,
+                onChange: handleInputChange,
+                onKeyDown: e => {
+                  if (e.key === "Enter") {
+                    handleContinue(false);
+                    e.stopPropagation();
+                  }
+                },
+                id: "translationText",
+                name: "translationText",
+                "aria-label": t("language_translation", {
+                  language: (0, _index.capitalize)(t(forLang.toLowerCase()))
+                }),
+                "data-cy": "translationText",
+                label: t("language_translation", {
+                  language: (0, _index.capitalize)(t(forLang.toLowerCase()))
+                }),
+                type: "text",
+                role: "textbox",
+                "aria-multiline": "true",
+                "aria-autocomplete": "none",
+                variant: "outlined",
+                multiline: true,
+                fullWidth: true,
+                autoComplete: "off",
+                characters: forLangCharacters ? forLangCharacters : null
+              })]
+            })
           }), isWordBankEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
               title: t("use_wordbank_if_stuck"),
@@ -995,6 +1003,7 @@ function Translator({
       showSkipButton: true,
       steps: steps,
       scrollOffset: 100,
+      disableScrollParentFix: true,
       styles: {
         options: {
           zIndex: 10000,

package/dist/Forms/CreateBot/CreateBot.js

@@ -43,7 +43,7 @@ function CreateBot({
     botAvatar: "",
     tags: [],
     phrasesToBoost: [],
-    isAdvancedBot: false,
+    isChallengeBot: false,
     isDynamicResponsesEnabled: "enable"
   },
   learnLang,

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

@@ -32,7 +32,7 @@ function BotSettings({
   const {
     visibility,
     translationEnabled,
-    isAdvancedBot,
+    isChallengeBot,
     isDynamicResponsesEnabled
   } = values;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -119,20 +119,19 @@ function BotSettings({
           component: "fieldset",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
             component: "legend",
-            children: t("advanced_bot")
+            children: t("challenge_bot")
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
             color: "textSecondary",
-            children: t("advanced_bot_desc")
+            children: t("challenge_bot_desc")
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
             row: true,
             className: classes.group,
-            "aria-label": "advancedBot",
-            name: "isAdvancedBot",
-            value: isAdvancedBot,
+            name: "isChallengeBot",
+            value: isChallengeBot,
             onChange: handleChange,
             onBlur: handleBlur,
-            helperText: touched.isAdvancedBot ? errors.isAdvancedBot : "",
-            error: touched.isAdvancedBot && Boolean(errors.isAdvancedBot),
+            helperText: touched.isChallengeBot ? errors.isChallengeBot : "",
+            error: touched.isChallengeBot && Boolean(errors.isChallengeBot),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
               value: true,
               control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Radio, {}),

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

@@ -59,7 +59,7 @@ function Confirmation({
     visibility,
     translationEnabled,
     studentInstructions,
-    isAdvancedBot,
+    isChallengeBot,
     isDynamicResponsesEnabled
   } = values;
   const [open, setOpen] = (0, _react.useState)(false);
@@ -151,17 +151,16 @@ function Confirmation({
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
               gutterBottom: true,
               display: "block",
-              children: t("advanced_bot_desc")
+              children: t("challenge_bot_desc")
             }), process.env.REACT_APP_STAGE === "dev" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
               component: "fieldset",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormLabel, {
                 component: "legend",
-                children: t("advanced_bot")
+                children: t("challenge_bot")
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.RadioGroup, {
                 className: classes.group,
-                "aria-label": "advancedBot",
-                name: "isAdvancedBot",
-                value: isAdvancedBot,
+                name: "isChallengeBot",
+                value: isChallengeBot,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
                   disabled: true,
                   value: true,

package/dist/Forms/UpdateBot/UpdateBot.js

@@ -45,7 +45,7 @@ function UpdateBot({
     tags: [],
     phrasesToBoost: [],
     isDynamicResponsesEnabled: "enable",
-    isAdvancedBot: false
+    isChallengeBot: false
   },
   verificationStatus,
   onSubmit,
@@ -83,7 +83,7 @@ function UpdateBot({
     tags,
     phrasesToBoost,
     isDynamicResponsesEnabled,
-    isAdvancedBot
+    isChallengeBot
   } = initialValues;
   const difficultyOptions = difficulties.map((d, idx) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
@@ -178,7 +178,7 @@ function UpdateBot({
         translationEnabled,
         picture,
         isDynamicResponsesEnabled,
-        isAdvancedBot
+        isChallengeBot
       },
       enableReinitialize: enableReinitialize,
       validationSchema: _Steps.BotSettings.validationSchema,

package/dist/Lists/Exercises/Exercises.js

@@ -27,6 +27,7 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 var _utils = require("../../utils");
 var _FlashOn = _interopRequireDefault(require("@mui/icons-material/FlashOn"));
 var _FlashOff = _interopRequireDefault(require("@mui/icons-material/FlashOff"));
+var _Tooltip = require("@mui/material/Tooltip");
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _RecordVoiceOver = _interopRequireDefault(require("@mui/icons-material/RecordVoiceOver"));
 var _SwapHoriz = _interopRequireDefault(require("@mui/icons-material/SwapHoriz"));
@@ -508,11 +509,11 @@ function BotListItem({
   } = params;
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const [isBotHiddenState, setIsBotHiddenState] = (0, _react.useState)(bot.isBotHidden);
-  const [isBotAdvanced, setIsBotAdvanced] = (0, _react.useState)(bot.isAdvancedBot || false);
+  const [isBotChallenge, setIsBotChallenge] = (0, _react.useState)(bot.isChallengeBot || false);
   const [isSelectClassroomDialogOpen, setIsSelectClassroomDialogOpen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
-    setIsBotAdvanced(bot.isAdvancedBot);
-  }, [bot.isAdvancedBot]);
+    setIsBotChallenge(bot.isChallengeBot);
+  }, [bot.isChallengeBot]);
   const ref = (0, _react.useRef)(null);
   const [{
     handlerId
@@ -607,14 +608,61 @@ function BotListItem({
       isBotHidden: !isBotHidden
     });
   };
-  const markBotAsAdvanced = async () => {
+  const markBotAsChallenge = async () => {
     await handleUpdateBot(bot, {
-      isAdvancedBot: !isBotAdvanced
+      isChallengeBot: !isBotChallenge
     });
-    setIsBotAdvanced(!isBotAdvanced);
+    setIsBotChallenge(!isBotChallenge);
   };
   const botCompletions = numberOfBotCompletions(completions, bot.botId);
   const navigate = (0, _reactRouterDom.useNavigate)();
+  const ChallengeBotHtmlTooltip = (0, _system.styled)(({
+    className,
+    ...props
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+    ...props,
+    classes: {
+      popper: className
+    },
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          fontWeight: "bold",
+          marginBottom: "8px"
+        },
+        children: t("challenge_mode")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginBottom: "8px"
+        },
+        children: t("challenge_bot_desc")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          fontSize: "12px"
+        },
+        children: t("freely_changed")
+      })]
+    })
+  }))(({
+    theme
+  }) => ({
+    [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
+      padding: theme.spacing(2),
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+      fontSize: theme.typography.pxToRem(12),
+      border: `1px solid ${theme.palette.divider}`
+    },
+    [`& ul`]: {
+      listStyleType: "disc",
+      paddingLeft: theme.spacing(2),
+      margin: 0
+    },
+    [`& li`]: {
+      display: "list-item",
+      marginBottom: theme.spacing(0.5)
+    }
+  }));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(!isBotHiddenState || isCreator) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
       ref: ref,
@@ -665,13 +713,13 @@ function BotListItem({
             })
           })
         }), isCreator && isLargeScreen && process.env.REACT_APP_STAGE === "dev" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-          title: isBotAdvanced ? t("unmark_as_advanced_bot") : t("mark_as_advanced_bot"),
+          title: isBotChallenge ? t("unmark_as_challenge_bot") : t("mark_as_challenge_bot"),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-            "data-cy": "mark_advanced_bot",
-            onClick: markBotAsAdvanced,
-            "aria-label": isBotAdvanced ? "Unmark bot as advanced" : "Mark bot as advanced",
+            "data-cy": "mark_challenge_bot",
+            onClick: markBotAsChallenge,
+            "aria-label": isBotChallenge ? t("unmark_as_challenge_bot") : t("mark_as_challenge_bot"),
             disabled: isCreator ? false : true,
-            children: isBotAdvanced ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOn.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOff.default, {})
+            children: isBotChallenge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOn.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlashOff.default, {})
           })
         }) : null, isCreator && isLargeScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
           title: t("move_bot"),
@@ -709,7 +757,31 @@ function BotListItem({
             alt: ""
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-          primary: isLargeScreen ? bot.botName || "" : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          primary: isLargeScreen ? !isBotChallenge ? bot.botName || "" : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            children: [bot.botName || "", /*#__PURE__*/(0, _jsxRuntime.jsx)(ChallengeBotHtmlTooltip, {
+              placement: "right",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                label: t("challenge_mode"),
+                size: "small",
+                variant: "outlined",
+                color: "primary"
+              })
+            })]
+          }) : !isBotChallenge ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              mb: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                src: bot.picture || bot.botAvatar || _index.default.bot,
+                alt: ""
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "body1",
+              children: bot.botName || ""
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
               mb: 1,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -719,6 +791,14 @@ function BotListItem({
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               variant: "body1",
               children: bot.botName || ""
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChallengeBotHtmlTooltip, {
+              placement: "right",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                label: t("challenge_mode"),
+                size: "small",
+                variant: "outlined",
+                color: "primary"
+              })
             })]
           }),
           secondary: isLargeScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
@@ -874,7 +954,7 @@ function Exercises(props) {
     trackRecommendedEvent,
     parentClassroom,
     isHeritageSpeaker,
-    isAdvancedStudent
+    isChallengeModeStudent
   } = props;
   const params = (0, _reactRouterDom.useParams)();
   const {
@@ -1060,10 +1140,10 @@ function Exercises(props) {
     }
   }, [bots, botsStringified]);
   (0, _react.useEffect)(() => {
-    if (!isAdvancedStudent && !isCreator) {
-      setBotsArray(bots.filter(bot => !bot.isAdvancedBot || bot.isAdvancedBot === false));
+    if (!isChallengeModeStudent && !isCreator) {
+      setBotsArray(bots.filter(bot => !bot.isChallengeBot || bot.isChallengeBot === false));
     }
-  }, [bots, isAdvancedStudent, isCreator]);
+  }, [bots, isChallengeModeStudent, isCreator]);
   const moveBot = (0, _react.useCallback)((dragIndex, hoverIndex) => {
     const dragBot = botsArray[dragIndex];
     const newBots = (0, _immutabilityHelper.default)(botsArray, {

package/dist/Lists/Members/Members.js

@@ -137,7 +137,7 @@ function Member(props) {
       marginBottom: theme.spacing(0.5)
     }
   }));
-  const AdvancedStudentHtmlTooltip = (0, _styles.styled)(({
+  const ChallengeModeHtmlTooltip = (0, _styles.styled)(({
     className,
     ...props
   }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -151,12 +151,12 @@ function Member(props) {
           fontWeight: "bold",
           marginBottom: "8px"
         },
-        children: t("advanced_student")
+        children: t("challenge_student")
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           marginBottom: "8px"
         },
-        children: t("advanced_student_desc")
+        children: t("challenge_student_desc")
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           fontSize: "12px"
@@ -213,14 +213,14 @@ function Member(props) {
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-        primary: featureFlags.heritageSpeakers && featureFlags.advancedStudents && member.isHeritageSpeaker && member.assignedLabels?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        primary: featureFlags.classroomModes.readWrite && featureFlags.classroomModes.challenge && member.isHeritageSpeaker && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           display: "flex",
           alignItems: "center",
           gap: "8px",
-          children: [member.username, /*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedStudentHtmlTooltip, {
+          children: [member.username, /*#__PURE__*/(0, _jsxRuntime.jsx)(ChallengeModeHtmlTooltip, {
             placement: "right",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
-              label: t("advanced_student"),
+              label: t("challenge_student"),
               size: "small",
               variant: "outlined",
               color: "primary"
@@ -234,7 +234,7 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.heritageSpeakers && member.isHeritageSpeaker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        }) : featureFlags.classroomModes.readWrite && member.isHeritageSpeaker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           display: "flex",
           alignItems: "center",
           gap: "8px",
@@ -247,14 +247,14 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.advancedStudents && member.assignedLabels?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        }) : featureFlags.classroomModes.challenge && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           display: "flex",
           alignItems: "center",
           gap: "8px",
-          children: [member.username, /*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedStudentHtmlTooltip, {
+          children: [member.username, /*#__PURE__*/(0, _jsxRuntime.jsx)(ChallengeModeHtmlTooltip, {
             placement: "right",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
-              label: t("advanced_student"),
+              label: t("challenge_student"),
               size: "small",
               variant: "outlined",
               color: "primary"
@@ -276,7 +276,7 @@ function Member(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(OverflowMenu, {
       anchorEl: anchorEl,
       handleClose: handleCloseMenu,
-      children: [featureFlags.heritageSpeakers && (member.isHeritageSpeaker ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+      children: [featureFlags.classroomModes.readWrite && (member.isHeritageSpeaker ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
         onClick: () => {
           handleUpdateClassroomMember(member.classroomId, member.memberId, {
             isHeritageSpeaker: false
@@ -299,31 +299,31 @@ function Member(props) {
             primary: t("mark_as_heritage_speaker")
           })
         })
-      })), featureFlags.advancedStudents && (member.assignedLabels?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+      })), featureFlags.classroomModes.challenge && (member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
         onClick: () => {
           handleUpdateClassroomMember(member.classroomId, member.memberId, {
             assignedLabels: {
-              isAdvancedStudent: false
+              isChallengeModeStudent: false
             }
           });
         },
-        "aria-label": `Unmark as advanced student: ${member.username}`,
+        "aria-label": `Unmark as challenge student: ${member.username}`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-          primary: t("unmark_as_advanced_student")
+          primary: t("unmark_as_challenge_student")
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedStudentHtmlTooltip, {
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ChallengeModeHtmlTooltip, {
         placement: "right",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
           onClick: () => {
             handleUpdateClassroomMember(member.classroomId, member.memberId, {
               assignedLabels: {
-                isAdvancedStudent: true
+                isChallengeModeStudent: true
               }
             });
           },
-          "aria-label": `Mark as advanced student: ${member.username}`,
+          "aria-label": `Mark as challenge student: ${member.username}`,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-            primary: t("mark_as_advanced_student")
+            primary: t("mark_as_challenge_student")
           })
         })
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {

package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js

@@ -14,7 +14,9 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
   footer: {
     padding: theme.spacing(2),
     borderTop: `2px solid ${theme.palette.grey[300]}`,
-    width: "100%"
+    width: "100%",
+    position: "sticky",
+    bottom: 0
   }
 }));
 function ExerciseBottomBar({

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

@@ -561,8 +561,6 @@ function Classroom({
   const [scheduledDynamicAi, setScheduledDynamicAi] = (0, _react.useState)(false);
   const isWaysideClassroom = classroom?.classroomId?.toLowerCase().includes("wayside");
   const [isSubscriptionExpired, setIsSubscriptionExpired] = (0, _react.useState)(false);
-
-  // Joyride steps & state must be declared before any useEffect that reads `run`
   const joyrideSteps = [{
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
       children: t(`${classroomCreatorWelcome}`)
@@ -628,7 +626,6 @@ function Classroom({
     if (scheduledDynamicAi && !run && !isPictureDialogOpen) {
       setDisplayDynamicAiDialog(true);
       setScheduledDynamicAi(false);
-      // mark as displayed so it won't re-run on future page loads
       localStorage.setItem("displayDynamicAiDialog", "true");
     }
   }, [scheduledDynamicAi, run, isPictureDialogOpen]);

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

@@ -578,7 +578,7 @@ function Topic({
   topicGoal,
   isUserInternal,
   isHeritageSpeaker = false,
-  isAdvancedStudent = false,
+  isChallengeModeStudent = false,
   ...otherProps
 }) {
   const {
@@ -769,7 +769,7 @@ function Topic({
             courseSettings: courseSettings,
             trackRecommendedEvent: trackRecommendedEvent,
             isHeritageSpeaker: isHeritageSpeaker,
-            isAdvancedStudent: isAdvancedStudent
+            isChallengeModeStudent: isChallengeModeStudent
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
           py: 1,
@@ -1106,7 +1106,7 @@ function Topic({
             handleDuplicateRoleplay: handleDuplicateRoleplay,
             isCreator: isCreator,
             isMember: isMember,
-            isAdvancedStudent: isAdvancedStudent,
+            isChallengeModeStudent: isChallengeModeStudent,
             phrases: phrases,
             completions: completions,
             roleplays: roleplays,
@@ -1395,7 +1395,7 @@ function ViewTopic({
   topicGoal,
   isUserInternal,
   isHeritageSpeaker,
-  isAdvancedStudent,
+  isChallengeModeStudent,
   ...otherProps
 }) {
   const {
@@ -1431,7 +1431,7 @@ function ViewTopic({
         topicGoal: topicGoal,
         isUserInternal: isUserInternal,
         isHeritageSpeaker: isHeritageSpeaker,
-        isAdvancedStudent: isAdvancedStudent,
+        isChallengeModeStudent: isChallengeModeStudent,
         ...otherProps
       })
     }), !isLoading && !topic && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topic.default, {

package/dist/Tables/Progress/ProgressTable.js

@@ -720,7 +720,7 @@ function TableRow({
           sx: {
             fontWeight: "bold"
           },
-          children: featureFlags.heritageSpeakers && member.isHeritageSpeaker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          children: featureFlags.classroomModes.readWrite && member.isHeritageSpeaker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
             display: "flex",
             alignItems: "center",
             gap: "8px",

package/dist/hooks/useClassroomState.js

@@ -21,7 +21,7 @@ function useClassroomState({
   const queryClient = useQueryClient();
   const classroomMemberData = queryClient.getQueryData(_Queries.classrooms.classroomKeys.itemMember(classroomId, username, memberId));
   const [isMember, setIsMember] = (0, _react.useState)(classroomMemberData?.Item ? true : false);
-  const [isAdvancedStudent, setIsAdvancedStudent] = (0, _react.useState)(classroomMemberData?.Item?.assignedLabels && classroomMemberData?.Item?.assignedLabels.isAdvancedStudent === true);
+  const [isChallengeModeStudent, setisChallengeModeStudent] = (0, _react.useState)(classroomMemberData?.Item?.assignedLabels && classroomMemberData?.Item?.assignedLabels.isChallengeModeStudent === true);
   let filters = {
     limit: _config.config.limits.classroomMembers
   };
@@ -42,15 +42,15 @@ function useClassroomState({
   (0, _react.useEffect)(() => {
     if (memberQuery.isSuccess) {
       const isClassroomMember = memberQuery.data && memberQuery.data.Item ? true : false;
-      const isAdvancedStudent = memberQuery.data?.Item?.assignedLabels && memberQuery.data?.Item?.assignedLabels.isAdvancedStudent === true;
+      const isChallengeModeStudent = memberQuery.data?.Item?.assignedLabels && memberQuery.data?.Item?.assignedLabels.isChallengeModeStudent === true;
       setIsMember(isClassroomMember);
-      setIsAdvancedStudent(isAdvancedStudent);
+      setisChallengeModeStudent(isChallengeModeStudent);
     }
   }, [memberQuery.data, memberQuery.isSuccess, memberId]);
   return {
     isMember,
     membersQuery,
     memberQuery,
-    isAdvancedStudent
+    isChallengeModeStudent
   };
 }

package/dist/hooks/useExerciseState.js

@@ -922,6 +922,8 @@ function useExerciseState({
     setBotVars(null);
     setBotText("");
     setBotMessages([]);
+    setConversationHistory([]);
+    setIsFirstMessage(true);
     deleteProgress();
     setChecked(false);
     setActorHasBeenSelected(false);
@@ -945,6 +947,8 @@ function useExerciseState({
     setBotVars(null);
     setBotText("");
     setBotMessages([]);
+    setConversationHistory([]);
+    setIsFirstMessage(true);
     deleteProgress();
     if (exerciseName === "roleplay" && !gameId.startsWith("act-it-out")) {
       // if act-it-out need to select actor

package/dist/utils/index.js

@@ -230,17 +230,19 @@ const calcTopicCompletions = (topic, completions = [], isSectionHidden, assignme
   let completedBots = 0;
   const roleplays = topic.roleplays.map(roleplay => {
     const {
-      isActItOutHidden = false,
-      isActItOutListeningHidden = false,
-      isActItOutListeningSpeakingHidden = false,
-      isActItOutSpeakingHidden = false
+      isFillInTheBlanksHidden = "false",
+      isActItOutHidden = "false",
+      isActItOutListeningHidden = "false",
+      isActItOutListeningSpeakingHidden = "false",
+      isActItOutSpeakingHidden = "false"
     } = roleplay;
     const trueCount = Object.values({
+      isFillInTheBlanksHidden,
       isActItOutHidden,
       isActItOutListeningHidden,
       isActItOutListeningSpeakingHidden,
       isActItOutSpeakingHidden
-    }).filter(Boolean).length;
+    }).filter(value => value === "true").length;
     const numberOfUnhiddenGames = 6 - trueCount;
     const isUnassignedRoleplay = assignmentExercises ? assignmentExercises && !assignmentExercises.some(e => e.roleplayId === roleplay.roleplayId) : false;
     if (isRoleplaysHidden || roleplay.isRoleplayHidden || isSectionHidden || topic.isTopicHidden || isUnassignedRoleplay) {

package/package.json

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