@nualang/nualang-ui-components 0.1.1282 → 0.1.1283

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,
+  isAdvancedBot = 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: isAdvancedBot ? 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: isAdvancedBot ? 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 >= (isAdvancedBot ? 600 : 200) ? 1 : 0.7,
+            marginRight: 1,
+            fontWeight: 700,
+            fontSize: "0.75rem"
+          },
+          children: `${inputValue.length}/${isAdvancedBot ? 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,
+  isAdvancedBot = 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,
+      isAdvancedBot: isAdvancedBot
     })]
   });
 }

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/Exercises/Bot/Bot.js

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

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"));
@@ -615,6 +616,53 @@ function BotListItem({
   };
   const botCompletions = numberOfBotCompletions(completions, bot.botId);
   const navigate = (0, _reactRouterDom.useNavigate)();
+  const AdvancedBotHtmlTooltip = (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("advanced_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,
@@ -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 ? !isBotAdvanced ? bot.botName || "" : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            children: [bot.botName || "", /*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedBotHtmlTooltip, {
+              placement: "right",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+                label: t("challenge_mode"),
+                size: "small",
+                variant: "outlined",
+                color: "primary"
+              })
+            })]
+          }) : !isBotAdvanced ? /*#__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)(AdvancedBotHtmlTooltip, {
+              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, {

package/dist/Lists/Members/Members.js

@@ -213,7 +213,7 @@ 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?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           display: "flex",
           alignItems: "center",
           gap: "8px",
@@ -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,7 +247,7 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.advancedStudents && member.assignedLabels?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        }) : featureFlags.classroomModes.challenge && member.assignedLabels?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           display: "flex",
           alignItems: "center",
           gap: "8px",
@@ -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,7 +299,7 @@ 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?.isAdvancedStudent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
         onClick: () => {
           handleUpdateClassroomMember(member.classroomId, member.memberId, {
             assignedLabels: {

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/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/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/package.json

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