@nualang/nualang-ui-components 0.1.1170 → 0.1.1171

package/dist/Chat/Chat.js

@@ -94,7 +94,8 @@ function Chat({
   currentMessage,
   roleplayImage,
   siteLanguage,
-  answerCounts
+  answerCounts,
+  noAnswerCounts
 }) {
   const {
     classes
@@ -155,7 +156,8 @@ function Chat({
     currentMessage: currentMessage,
     roleplayImage: roleplayImage,
     siteLanguage: siteLanguage,
-    answerCounts: answerCounts
+    answerCounts: answerCounts,
+    noAnswerCounts: noAnswerCounts
   }), !hideBottomBar && !viewAttemptMode && /*#__PURE__*/_react.default.createElement(_BottomBar.default, {
     t: t,
     inputName: inputName,

package/dist/Chat/Messages/Messages.js

@@ -58,6 +58,7 @@ function Messages({
   roleplayImage,
   siteLanguage,
   answerCounts,
+  noAnswerCounts,
   moveScriptItem,
   ...otherProps
 }) {
@@ -163,6 +164,7 @@ function Messages({
       handleContinue: handleContinue,
       isCurrentMessage: isCurrentMessage,
       answerCounts: answerCounts,
+      noAnswerCounts: noAnswerCounts,
       messages: messages,
       moveScriptItem: moveScriptItem,
       provided: provided
@@ -188,7 +190,7 @@ function Messages({
       siteLanguage: siteLanguage,
       moveScriptItem: moveScriptItem,
       provided: provided
-    }, m, otherProps)))) : /*#__PURE__*/_react.default.createElement("div", null, m?.question && !isLivePlayer ? /*#__PURE__*/_react.default.createElement(_Question.default, _extends({
+    }, m, otherProps)))) : /*#__PURE__*/_react.default.createElement("div", null, m?.question && !isLivePlayer && /*#__PURE__*/_react.default.createElement(_Question.default, _extends({
       languageTag: languageTag,
       key: `messx_${i}`,
       messageIndex: i,
@@ -205,8 +207,9 @@ function Messages({
       handleContinue: handleContinue,
       isCurrentMessage: isCurrentMessage,
       answerCounts: answerCounts,
+      noAnswerCounts: noAnswerCounts,
       messages: messages
-    }, m, otherProps)) : /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
+    }, m, otherProps)), !m?.question && /*#__PURE__*/_react.default.createElement(_Message.default, _extends({
       languageTag: languageTag,
       key: `messy_${i}`,
       disableTranslation: disableTranslation,

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

@@ -9,6 +9,7 @@ var _mui = require("tss-react/mui");
 var _RadioButtonUnchecked = _interopRequireDefault(require("@mui/icons-material/RadioButtonUnchecked"));
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
+var _RemoveCircleOutlined = _interopRequireDefault(require("@mui/icons-material/RemoveCircleOutlined"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _Create = _interopRequireDefault(require("@mui/icons-material/Create"));
 var _Circle = _interopRequireDefault(require("@mui/icons-material/Circle"));
@@ -56,6 +57,9 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
   },
   incorrect: {
     color: theme.palette.error.main
+  },
+  noAnswer: {
+    color: "#757575"
   }
 }));
 function Answers({
@@ -75,6 +79,7 @@ function Answers({
   isAnswered,
   handleContinue,
   answerCounts,
+  noAnswerCounts,
   messages,
   messageIndex
 }) {
@@ -114,6 +119,14 @@ function Answers({
       setIsLoading(false);
     }
   }, [answerCounts, showResults]);
+  (0, _react.useEffect)(() => {
+    if (showResults && noAnswerCounts > 0) {
+      const totalAnswerVotes = Object.values(answerCounts).reduce((sum, count) => sum + count, 0);
+      const totalVotesIncludingNoAnswer = totalAnswerVotes + (noAnswerCounts || 0);
+      setTotalVotes(totalVotesIncludingNoAnswer);
+      setIsLoading(false);
+    }
+  }, [answerCounts, noAnswerCounts, showResults]);
   if (isLoading && showResults) {
     return null;
   }
@@ -156,9 +169,42 @@ function Answers({
         }) : /*#__PURE__*/_react.default.createElement(_Cancel.default, {
           className: classes.incorrect
         }),
-        checked: true
+        checked: true,
+        disableRipple: true
       })
     });
+  }), noAnswerCounts > 0 && /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t("no_answer"), /*#__PURE__*/_react.default.createElement(_material.Box, {
+      sx: {
+        mt: 0.5,
+        mb: 0.5
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.LinearProgress, {
+      variant: "determinate",
+      value: totalVotes > 0 ? noAnswerCounts / totalVotes * 100 : 0,
+      sx: {
+        height: 6,
+        width: 240
+      }
+    }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      variant: "caption",
+      sx: {
+        mt: 0.5,
+        mb: 0.5
+      }
+    }, t(noAnswerCounts + ` vote${noAnswerCounts === 1 ? "" : "s"}`)))),
+    value: t("no_answer"),
+    control: /*#__PURE__*/_react.default.createElement(_material.Radio, {
+      color: "default",
+      icon: /*#__PURE__*/_react.default.createElement(_RemoveCircleOutlined.default, {
+        className: classes.noAnswer
+      }),
+      checkedIcon: /*#__PURE__*/_react.default.createElement(_RemoveCircleOutlined.default, {
+        className: classes.noAnswer
+      }),
+      checked: true,
+      disableRipple: true
+    })
   })) : /*#__PURE__*/_react.default.createElement(_material.RadioGroup, {
     className: classes.list
   }, answers.map((value, i) => {
@@ -178,7 +224,8 @@ function Answers({
         }) : /*#__PURE__*/_react.default.createElement(_Cancel.default, {
           className: classes.incorrect
         }),
-        checked: true
+        checked: true,
+        disableRipple: true
       })
     });
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isAnswered && selected ? /*#__PURE__*/_react.default.createElement(_material.Box, {
@@ -272,6 +319,7 @@ function Question({
   isAnswered,
   handleContinue,
   answerCounts,
+  noAnswerCounts,
   messages,
   provided
 }) {
@@ -378,6 +426,7 @@ function Question({
     answerAttempts: answerAttempts,
     showResults: true,
     answerCounts: answerCounts,
+    noAnswerCounts: noAnswerCounts,
     messages: messages,
     messageIndex: messageIndex
   }))), moveScriptItem && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {

package/dist/Containers/App/App.js

@@ -11,6 +11,9 @@ var _styles = require("@mui/material/styles");
 var _mui = require("tss-react/mui");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _Star = _interopRequireDefault(require("@mui/icons-material/Star"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _Header = _interopRequireDefault(require("../../Navigation/Header"));
 var _ResponsiveDrawer = _interopRequireDefault(require("../../Navigation/ResponsiveDrawer"));
 var _BottomBar = _interopRequireDefault(require("../../Navigation/BottomBar/BottomBar"));
@@ -22,6 +25,8 @@ var _Snackbar = _interopRequireDefault(require("../../Misc/Snackbar"));
 var _School = _interopRequireDefault(require("@mui/icons-material/School"));
 var _BubbleChart = _interopRequireDefault(require("@mui/icons-material/BubbleChart"));
 var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _UpgradeSubscription = _interopRequireDefault(require("../../Dialogs/UpgradeSubscription/UpgradeSubscription"));
 var _nav = _interopRequireDefault(require("../../Navigation/_nav"));
 var _material = require("@mui/material");
@@ -55,6 +60,91 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
     marginTop: `env(safe-area-inset-top)`
   }
 }));
+const Search = (0, _styles.styled)("div")(({
+  theme
+}) => ({
+  position: "relative",
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: (0, _styles.alpha)(theme.palette.common.white, 0.15),
+  "&:hover": {
+    backgroundColor: (0, _styles.alpha)(theme.palette.common.white, 0.25)
+  },
+  marginLeft: theme.spacing(1),
+  marginRight: theme.spacing(1),
+  width: "100%",
+  [theme.breakpoints.up("md")]: {
+    width: "auto"
+  }
+}));
+const SearchIconWrapper = (0, _styles.styled)("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+const StyledInputBase = (0, _styles.styled)(_InputBase.default)(({
+  theme
+}) => ({
+  color: "inherit",
+  width: "100%",
+  "& .MuiInputBase-input": {
+    padding: theme.spacing(1, 1, 1, 0),
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create("width"),
+    [theme.breakpoints.up("lg")]: {
+      width: "30ch",
+      "&:focus": {
+        width: "35ch"
+      }
+    }
+  }
+}));
+function AppSearch({
+  t,
+  navigate,
+  searchText,
+  setSearchText
+}) {
+  const handleSearchContent = () => {
+    const extraData = {
+      searchText
+    };
+    const queryString = new URLSearchParams(extraData).toString();
+    navigate(`/search?${queryString}`);
+  };
+  return /*#__PURE__*/_react.default.createElement(Search, null, /*#__PURE__*/_react.default.createElement(SearchIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(StyledInputBase, {
+    autoFocus: true,
+    placeholder: t("app_search_placeholder"),
+    value: searchText,
+    onChange: ev => setSearchText(ev.target.value),
+    inputProps: {
+      "aria-label": t("app_search_placeholder"),
+      onKeyPress: event => {
+        if (event.key === "Enter") {
+          handleSearchContent(searchText);
+        }
+      }
+    },
+    endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+      position: "end",
+      sx: {
+        color: "inherit",
+        mr: 1,
+        visibility: searchText ? "visible" : "hidden"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+      color: "inherit",
+      size: "small",
+      "aria-label": t("clear"),
+      onClick: () => setSearchText("")
+    }, /*#__PURE__*/_react.default.createElement(_Close.default, null)))
+  }));
+}
 function App({
   children,
   Link = _reactRouterDom.Link,
@@ -87,9 +177,11 @@ function App({
   const theme = (0, _styles.useTheme)();
   const isLgScreen = (0, _useMediaQuery.default)(theme.breakpoints.up("md"));
   const [hideSkipNavigation, setHideSkipNavigation] = (0, _react.useState)(true);
+  const [searchText, setSearchText] = (0, _react.useState)("");
   const [isAppContainerLoading, setIsAppContainerLoading] = (0, _react.useState)(true);
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const [isUpgradeSubscriptionOpen, setIsUpgradeSubscriptionOpen] = (0, _react.useState)(false);
+  const [isMobileSearchExpanded, setIsMobileSearchExpanded] = (0, _react.useState)(false);
   const handleOpenUpgradeSubscriptionModal = () => {
     setIsUpgradeSubscriptionOpen(true);
   };
@@ -151,6 +243,9 @@ function App({
     height: "auto",
     overflow: "visible"
   };
+  const isSearchActive = searchText || isMobileSearchExpanded;
+  const isTeacher = user && user["custom:role"] === "teach";
+  const isNewSearchVisible = localStorage.getItem(`new-search-enabled`) === "true";
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -159,8 +254,36 @@ function App({
     isCollapsed: isCollapsed && isLgScreen,
     drawerWidth: drawerWidth,
     drawerCollapsedWidth: drawerCollapsedWidth,
-    includeAdminBadge: includeAdminBadge
-  }, /*#__PURE__*/_react.default.createElement(_DefaultColourButton.default, {
+    includeAdminBadge: includeAdminBadge,
+    isLogoHidden: !isLgScreen && isSearchActive ? true : false
+  }, !isLgScreen && isSearchActive ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    color: "inherit",
+    "aria-label": t("back"),
+    onClick: () => {
+      setIsMobileSearchExpanded(false);
+      setSearchText("");
+    },
+    edge: "start"
+  }, /*#__PURE__*/_react.default.createElement(_ArrowBack.default, null)), /*#__PURE__*/_react.default.createElement(AppSearch, {
+    t: t,
+    navigate: navigate,
+    searchText: searchText,
+    setSearchText: setSearchText
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLgScreen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTeacher && isNewSearchVisible && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AppSearch, {
+    t: t,
+    navigate: navigate,
+    searchText: searchText,
+    setSearchText: setSearchText
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    flexGrow: 1
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTeacher && isNewSearchVisible && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: t("search"),
+    enterDelay: 300
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    color: "inherit",
+    "aria-label": t("search"),
+    onClick: () => setIsMobileSearchExpanded(true)
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))))), /*#__PURE__*/_react.default.createElement(_DefaultColourButton.default, {
     href: "#maincontent",
     color: "inherit",
     variant: "contained",
@@ -187,7 +310,7 @@ function App({
       fontSize: isLgScreen ? null : 12,
       mr: 1
     }
-  }, t("upgrade_plan")), user && user["custom:role"] === "teach" && (isLgScreen ? /*#__PURE__*/_react.default.createElement(_material.Button, {
+  }, t("upgrade_plan")), isTeacher && (isLgScreen ? /*#__PURE__*/_react.default.createElement(_material.Button, {
     variant: "contained",
     onClick: handleClickCreate,
     "data-cy": "appbar-create-button",
@@ -252,7 +375,7 @@ function App({
       },
       margin: theme.spacing(1, 1.5)
     })
-  }, t("sign_up")))), isLgScreen ? /*#__PURE__*/_react.default.createElement(_ResponsiveDrawer.default, _extends({
+  }, t("sign_up"))))), isLgScreen ? /*#__PURE__*/_react.default.createElement(_ResponsiveDrawer.default, _extends({
     navToSettings: navToSettings,
     Link: Link,
     navigation: navigation,

package/dist/Containers/App/App.stories.js

@@ -86,6 +86,7 @@ const props = exports.props = {
   currentLanguage: "en",
   navToSettings: "",
   handleChangeLanguage: () => {},
+  navigate: () => {},
   toggleTheme: () => {},
   handleSignOut: () => {},
   isSnackbarOpen: false,
@@ -95,13 +96,16 @@ const props = exports.props = {
   user: {
     preferred_username: "Sandra Adams",
     email: "sandra_a88@gmail.com",
-    picture: "https://randomuser.me/api/portraits/women/31.jpg"
+    picture: "https://randomuser.me/api/portraits/women/31.jpg",
+    "custom:role": "teach"
   },
   subscription: {
-    isUpgradePossible: true
+    isUpgradePossible: false
   },
   isCollapsed: false,
-  setIsCollapsed: () => {}
+  setIsCollapsed: () => {},
+  logoSrc: "https://app.dev.nualang.com/assets/nualang-logo-white-MYV2DVUT.svg",
+  authenticated: true
 };
 const story = {
   title: "Containers/App",

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -34,6 +34,7 @@ function GenerateRoleplayDialog({
   hideRoleplayLengthOptions = true,
   makeChatGptApiRequest,
   learnLang,
+  forLang,
   getAllVoices,
   i18nLanguage,
   initialValues = {
@@ -58,6 +59,7 @@ function GenerateRoleplayDialog({
   pdfDetails,
   makeCandooAIQuery,
   pdfVectorStoreCreationStatus,
+  siteLanguage,
   phrases,
   topicId,
   initialTopicGoal
@@ -72,6 +74,8 @@ function GenerateRoleplayDialog({
   const [values, setValues] = (0, _react.useState)(initialValues);
   const [errorMessage, setErrorMessage] = (0, _react.useState)(null);
   const [generateQuestions, setGenerateQuestions] = (0, _react.useState)(false);
+  const [questionLang, setQuestionLang] = (0, _react.useState)(learnLang);
+  const finalForLang = forLang ? forLang.charAt(0).toUpperCase() + forLang.slice(1) : siteLanguage;
   (0, _react.useEffect)(() => {
     if (initialTopicGoal && initialTopicGoal.trim() !== "") {
       setTopicGoal(initialTopicGoal);
@@ -186,7 +190,7 @@ function GenerateRoleplayDialog({
 
       // Add explicit JSON formatting instructions with roleplay length
       const promptWithoutQuestions = usePdfContext ? `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines). Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Please ensure the entire output is formatted as a single, well-formed JSON array.` : `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines). Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Please ensure the entire output is formatted as a single, well-formed JSON array.`;
-      const promptWithQuestions = usePdfContext ? `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines), followed by ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Each comprehension question should also be represented as an object within the same array, with the keys 'question' and 'answers'. The 'answers' key should be an array of 3 objects, each containing 'text', 'correct' (true or false), and 'type' ('correct' or 'incorrect'). Please ensure the entire output is formatted as a single, well-formed JSON array.` : `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines), followed by ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Each comprehension question should also be represented as an object within the same array, with the keys 'question' and 'answers'. The 'answers' key should be an array of 3 objects, each containing 'text', 'correct' (true or false), and 'type' ('correct' or 'incorrect'). Please ensure the entire output is formatted as a single, well-formed JSON array.`;
+      const promptWithQuestions = usePdfContext ? `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines), followed by ${values?.questionsAmount} comprehension questions related to the conversation, the question should be generated in ${questionLang}. Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Each comprehension question should also be represented as an object within the same array, with the keys 'question' and 'answers'. The 'answers' key should be an array of 3 objects, each containing 'text', 'correct' (true or false), and 'type' ('correct' or 'incorrect'), the answers should be generated in ${questionLang}. Please ensure the entire output is formatted as a single, well-formed JSON array.` : `${finalPrompt} The conversation should be returned as a single JSON array. The array must contain exactly ${values.roleplayLengthNumber} exchanges (lines), followed by ${values?.questionsAmount} comprehension questions related to the conversation, the question should be generated in ${questionLang}. Each piece of dialogue should be represented as an object with the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. Each comprehension question should also be represented as an object within the same array, with the keys 'question' and 'answers'. The 'answers' key should be an array of 3 objects, each containing 'text', 'correct' (true or false), and 'type' ('correct' or 'incorrect'), the answers should be generated in ${questionLang}. Please ensure the entire output is formatted as a single, well-formed JSON array.`;
       const activePrompt = generateQuestions ? promptWithQuestions : promptWithoutQuestions;
       console.log("Final Prompt Sent to API:", activePrompt);
 
@@ -464,7 +468,22 @@ function GenerateRoleplayDialog({
     sx: {
       marginRight: 0
     }
-  })))), generateQuestions && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  })))), generateQuestions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalForLang !== learnLang.charAt(0).toUpperCase() + learnLang.slice(1) && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    mb: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    select: true,
+    fullWidth: true,
+    label: t("question_language"),
+    value: questionLang,
+    onChange: e => setQuestionLang(e.target.value),
+    variant: "outlined"
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: learnLang
+  }, t(learnLang)), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: finalForLang
+  }, t(finalForLang)))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
@@ -483,7 +502,7 @@ function GenerateRoleplayDialog({
     marks: true,
     min: 1,
     max: Math.floor(values?.roleplayLengthNumber / 2)
-  })), topicId && /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }))), topicId && /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
     marginBottom: 1

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.stories.js

@@ -28,7 +28,8 @@ const props = exports.props = {
     });
     return promise;
   },
-  learnLang,
+  learnLang: "spanish",
+  forLang: "english",
   getAllVoices: () => {
     let voicesArray = [];
     if (_config.default) {

package/dist/Dialogs/LiveGameTutorial/LiveGameTutorial.js

@@ -144,7 +144,6 @@ function LiveGameTutorial({
     default:
       images = [];
   }
-  console.log("exerciseName is:", exerciseName);
   return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: open,
     handleClose: handleClose,

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

@@ -1187,6 +1187,7 @@ function Editor({
     display: "flex",
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    size: "small",
     sx: {
       marginRight: 1
     },

package/dist/Editors/Roleplay/Roleplay.js

@@ -847,7 +847,9 @@ function Roleplay({
     makeCandooAIQuery: makeCandooAIQuery,
     getAllVoices: getAllVoices,
     learnLang: learnLang,
+    forLang: forLang,
     i18nLanguage: i18nLanguage,
+    siteLanguage: siteLanguage,
     initialValues: {
       roleplayTopic: roleplay.roleplayName,
       roleplayDifficulty: roleplay.difficulty,

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -216,6 +216,16 @@ function Pronouncer({
       handleContinue(false, currentPhrase);
     }
   }, [open, recognizing, finalTranscript]);
+  (0, _react.useEffect)(() => {
+    let timer;
+    if (recognizing && interimTranscript === "" && finalTranscript === "") {
+      // Set a timer to stop listening if no audio is detected after 10 seconds
+      timer = setTimeout(() => {
+        stopListening();
+      }, 10000);
+    }
+    return () => clearTimeout(timer);
+  }, [recognizing, interimTranscript, finalTranscript]);
   const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
   const exerciseState = (0, _useExerciseState.default)({
     open,

package/dist/Exercises/Roleplay/Games/ActItOutGameListeningAndSpeaking/ActItOutGame.js

@@ -426,6 +426,16 @@ function RoleplayGame({
     // Stop Recording required to get final confidence score and trigger event if needed
     toggleListen(learnLang, speechContexts, model, true);
   };
+  (0, _react.useEffect)(() => {
+    let timer;
+    if (recognizing && interimTranscript === "" && finalTranscript === "") {
+      // Set a timer to stop listening if no audio is detected after 10 seconds
+      timer = setTimeout(() => {
+        stopListening();
+      }, 10000);
+    }
+    return () => clearTimeout(timer);
+  }, [recognizing, interimTranscript, finalTranscript]);
   const getRandomNuala = () => {
     let finished = false;
     while (!finished) {

package/dist/Exercises/Roleplay/Games/ActItOutGameSpeaking/ActItOutGame.js

@@ -424,6 +424,16 @@ function RoleplayGame({
     // Stop Recording required to get final confidence score and trigger event if needed
     toggleListen(learnLang, speechContexts, model, true);
   };
+  (0, _react.useEffect)(() => {
+    let timer;
+    if (recognizing && interimTranscript === "" && finalTranscript === "") {
+      // Set a timer to stop listening if no audio is detected after 10 seconds
+      timer = setTimeout(() => {
+        stopListening();
+      }, 10000);
+    }
+    return () => clearTimeout(timer);
+  }, [recognizing, interimTranscript, finalTranscript]);
   const getRandomNuala = () => {
     let finished = false;
     while (!finished) {

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

@@ -438,7 +438,7 @@ function BotInformation({
     maxLength: 1000,
     characters: langChar,
     learnLang: learnLang
-  }))), update && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+  }))), /*#__PURE__*/_react.default.createElement(_material.Typography, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     pt: 2
   }, t("student_instructions"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
@@ -454,7 +454,7 @@ function BotInformation({
     placeholder: t("student_instructions_placeholder"),
     imageUploadFunction: handleBotInstructionsImageUpload,
     handleChange: handleChange
-  })))), /*#__PURE__*/_react.default.createElement(_material.Typography, null, /*#__PURE__*/_react.default.createElement(_material.Box, null, t("creator_instructions"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  })))), update && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, null, /*#__PURE__*/_react.default.createElement(_material.Box, null, t("creator_instructions"))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 1
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {

package/dist/Forms/CreateMeetingMultiStepForm/sampleTemplates.js

@@ -12,17 +12,17 @@ const samples = exports.samples = ["Personas famosas", "Comprando ingredientes",
 const sampleAutofillValues = exports.sampleAutofillValues = {
   "Personas famosas": {
     topic: "Personas famosas",
-    prompt: `One's profession is often an important part of identity. Cany ou match these famous Spanish speakers with their identity? Converse with your partner, connecting the person's name and identity with es, as in the model. Look up the people you don't know, or consult a classmate to fill in the gaps in your knowledge.`,
+    prompt: `One's profession is often an important part of identity. Can you match these famous Spanish speakers with their identity? Converse with your partner, connecting the person's name and identity with es, as in the model. Look up the people you don't know, or consult a classmate to fill in the gaps in your knowledge.`,
     url: "",
     backgroundImages: [],
-    meetingImages: [_input.default, _mode.default]
+    meetingImages: []
   },
   "Comprando ingredientes": {
     topic: "Comprando ingredientes",
     prompt: `Vas al Mercado de la Merced para comprar los ingredientes para tu escamocha. Actúa la situación con un/a compañero/a de clase. Una personal compra, y la otra vende. Luego, cambien los papeles (switch roles) y repitan la situación.`,
     url: "",
     backgroundImages: [],
-    meetingImages: [_mode2.default]
+    meetingImages: []
   },
   "¿Qué prefieres?": {
     topic: "¿Qué prefieres?",
@@ -33,21 +33,21 @@ const sampleAutofillValues = exports.sampleAutofillValues = {
         3. ¿Qué comida internacional prefieres: comida mexicana, tilandesa o italiana?
         4. ¿Qué prefieres beber: jugo de naranja, jugo de manzana o solo agua?
         5. ¿Puedes comer gluten, productos lacteos (dairy) y nueces (nuts), o tienes alergias?`,
-    url: "www.facebook.com",
+    url: "",
     backgroundImages: [],
     meetingImages: []
   },
   "¿Qué quieres?": {
     topic: "¿Qué quieres?",
-    prompt: `Work with a compañero/a to create questions and answers based on the following paris of words.`,
-    url: "www.facebook.com",
+    prompt: `Work with a compañero/a to create questions and answers based on the following pairs of words.`,
+    url: "",
     backgroundImages: [],
     meetingImages: []
   },
   Compara: {
     topic: "Compara",
     prompt: `Con un/a compañero/a, prepara una diagrama de Venn comparando el desfile en el video con una celebración en tu comunidad.`,
-    url: "https://drive.google.com/file/d/1hJwDJK3OVrZ_kvsfMMyXleKgOkCVOpEt/view",
+    url: "",
     backgroundImages: [],
     meetingImages: []
   }

package/dist/Live/Game/Game.js

@@ -145,6 +145,7 @@ function Game({
   handleTranslate,
   userImage,
   answerCounts,
+  noAnswerCounts,
   ...otherProps
 }) {
   const {
@@ -466,7 +467,8 @@ function Game({
         nextScriptLine: nextScriptLine,
         handleTranslate: handleTranslate,
         isFinalScoreDrawerOpen: isFinalScoreDrawerOpen,
-        answerCounts: answerCounts
+        answerCounts: answerCounts,
+        noAnswerCounts: noAnswerCounts
       }, otherProps));
     }
   })(), gameView === GameViewTypes.Leaderboard && /*#__PURE__*/_react.default.createElement(_material.Box, {

package/dist/Live/LiveRoleplay/LiveStory/LiveStory.js

@@ -73,7 +73,8 @@ function LiveStory({
   setIsStudentAnswerDrawerOpen,
   roleplayAnswer,
   setRoleplayAnswer,
-  answerCounts
+  answerCounts,
+  noAnswerCounts
 }) {
   const {
     classes
@@ -222,7 +223,8 @@ function LiveStory({
     handleContinue: handleContinue,
     currentMessage: currentMessage,
     roleplayImage: roleplay.picture,
-    answerCounts: answerCounts
+    answerCounts: answerCounts,
+    noAnswerCounts: noAnswerCounts
   })), /*#__PURE__*/_react.default.createElement(_AnswerResult.default, _extends({
     t: t,
     open: isCorrectResultOpen

package/dist/Navigation/Header/Header.js

@@ -45,7 +45,8 @@ function Header({
   drawerWidth = 256,
   drawerCollapsedWidth,
   isCollapsed,
-  includeAdminBadge = false
+  includeAdminBadge = false,
+  isLogoHidden = false
 }) {
   const theme = (0, _styles.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_HideOnScroll.default, null, /*#__PURE__*/_react.default.createElement(AppBar, {
@@ -53,7 +54,7 @@ function Header({
     drawerWidth: drawerWidth,
     drawerCollapsedWidth: drawerCollapsedWidth,
     isCollapsed: isCollapsed
-  }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, logoSrc ? /*#__PURE__*/_react.default.createElement(Logo, {
+  }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, !isLogoHidden && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, logoSrc ? /*#__PURE__*/_react.default.createElement(Logo, {
     src: logoSrc,
     alt: title
   }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -75,7 +76,7 @@ function Header({
     }
   }, "Admin")), /*#__PURE__*/_react.default.createElement(_Box.default, {
     flexGrow: 1
-  }), children)));
+  })), children)));
 }
 Header.propTypes = {
   drawerWidth: _propTypes.default.number.isRequired,

package/dist/Screens/Search/Search.js

@@ -0,0 +1,270 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Search;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _mui = require("tss-react/mui");
+var _Courses = _interopRequireDefault(require("../../Lists/Courses"));
+var _Courses2 = _interopRequireDefault(require("../../Misc/NotFound/Courses"));
+var _LanguageSelector = _interopRequireDefault(require("../../Forms/LanguageSelector/LanguageSelector"));
+var _HideOnScroll = _interopRequireDefault(require("../../Misc/HideOnScroll"));
+var _SortBySelector = _interopRequireDefault(require("../../Forms/SortBySelector/SortBySelector"));
+var _useDebounce = _interopRequireDefault(require("../../utils/hooks/useDebounce"));
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useStyles = (0, _mui.makeStyles)()((theme, {
+  disablePadding
+}) => ({
+  root: {
+    height: "100%",
+    padding: disablePadding ? 0 : theme.spacing(1, 2),
+    [theme.breakpoints.up("sm")]: {
+      padding: disablePadding ? 0 : theme.spacing(2, 3)
+    }
+  },
+  box: {
+    padding: theme.spacing(1, 2),
+    [theme.breakpoints.up("sm")]: {
+      padding: theme.spacing(2, 3)
+    }
+  },
+  autocomplete: {
+    flexGrow: 1,
+    marginRight: theme.spacing(1)
+  },
+  actions: {
+    marginBottom: theme.spacing(1)
+  },
+  divider: {
+    marginBottom: theme.spacing(1)
+  }
+}));
+function SearchFilters({
+  t,
+  classes,
+  languageOptions,
+  forLanguageOptions,
+  handleFilterChange,
+  sortByOptions,
+  learnLang,
+  search,
+  setSearch,
+  handleCreateCourse,
+  forLang,
+  sort,
+  difficulty,
+  difficultyOptions
+}) {
+  const location = (0, _reactRouterDom.useLocation)();
+  const queryParams = new URLSearchParams(location.search);
+  const text = queryParams.get("searchText") || "";
+  const [searchText] = (0, _react.useState)(text);
+  const debouncedSearch = (0, _useDebounce.default)(searchText, 500);
+  (0, _react.useEffect)(() => {
+    if (setSearch && searchText !== search) {
+      setSearch(searchText);
+      if (window.scrollY > 100) {
+        window.scrollTo(0, 0);
+      }
+    }
+  }, [debouncedSearch]);
+  return /*#__PURE__*/_react.default.createElement(_HideOnScroll.default, {
+    threshold: 300
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    mb: 2,
+    className: classes.box,
+    sx: theme => ({
+      position: "sticky",
+      top: 0,
+      zIndex: 1200,
+      backgroundColor: theme.palette.background.default,
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      marginTop: theme.spacing(0.5)
+    })
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "row",
+    alignItems: "center",
+    spacing: 1,
+    className: classes.actions
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
+    id: "learnLang",
+    name: "learnLang",
+    label: t("learn"),
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true,
+    t: t,
+    languages: languageOptions,
+    value: learnLang,
+    onChange: handleFilterChange
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_LanguageSelector.default, {
+    id: "forLang",
+    name: "forLang",
+    label: t("speakers_of"),
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true,
+    t: t,
+    languages: forLanguageOptions,
+    value: forLang,
+    onChange: handleFilterChange
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    select: true,
+    id: "difficulty",
+    name: "difficulty",
+    "data-cy": "difficulty",
+    label: t("difficulty"),
+    value: difficulty,
+    onChange: handleFilterChange,
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true
+  }, difficultyOptions)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_SortBySelector.default, {
+    id: "sortBy",
+    name: "sort",
+    label: t("sort"),
+    margin: "dense",
+    variant: "outlined",
+    fullWidth: true,
+    t: t,
+    value: sort,
+    onChange: handleFilterChange,
+    sortByOptions: sortByOptions,
+    disabled: (!learnLang || learnLang === "all") && (!forLang || forLang === "all")
+  })))));
+}
+function Search({
+  t = text => text,
+  courses = [],
+  selectedCourses = [],
+  isLoading,
+  placeholderImageUrl,
+  handleSelectAllCoursesClick,
+  handleClickCourse,
+  selectable,
+  learnLang,
+  forLang,
+  handleViewCourseTopic,
+  handleFilterChange,
+  languages,
+  forLanguages,
+  handleStartCourse,
+  handleLeaveCourse,
+  handleViewCourse,
+  handleViewUserProfile,
+  handleCreateCourse,
+  membersProps,
+  getMemberDetails,
+  reviewPlaceholderImageUrl,
+  memberPlaceholderImageUrl,
+  disablePadding,
+  getUserReviews,
+  getMemberInfo,
+  getCourseSections,
+  getCourseReviews,
+  getCourseMember,
+  getCourseMembers,
+  memberId,
+  username,
+  sort,
+  isLearnLangDisabled,
+  scrollTarget,
+  search,
+  setSearch,
+  handleDuplicateCourse,
+  difficulty,
+  difficultyOptions
+}) {
+  const {
+    classes
+  } = useStyles({
+    disablePadding
+  });
+  const languageOptions = {
+    all: {},
+    ...languages
+  };
+  const forLanguageOptions = {
+    all: {},
+    ...forLanguages
+  };
+  const sortByOptions = {
+    newest: "newest",
+    oldest: "oldest",
+    popular: "popular"
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(SearchFilters, {
+    t: t,
+    classes: classes,
+    languageOptions: languageOptions,
+    forLanguageOptions: forLanguageOptions,
+    handleFilterChange: handleFilterChange,
+    sortByOptions: sortByOptions,
+    learnLang: learnLang,
+    search: search,
+    setSearch: setSearch,
+    handleCreateCourse: handleCreateCourse,
+    sort: sort,
+    forLang: forLang,
+    difficulty: difficulty,
+    difficultyOptions: difficultyOptions
+  }), isLoading || courses !== undefined && courses.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react.default.createElement(_Courses.default, {
+    t: t,
+    courses: courses !== undefined && Array.isArray(courses) && courses.length ? courses : null,
+    handleStartCourse: handleStartCourse,
+    handleLeaveCourse: handleLeaveCourse,
+    handleViewCourse: handleViewCourse,
+    handleViewUserProfile: handleViewUserProfile,
+    membersProps: membersProps,
+    handleViewCourseTopic: handleViewCourseTopic,
+    selectable: selectable,
+    selectedCourses: selectedCourses,
+    handleSelectAllCoursesClick: handleSelectAllCoursesClick,
+    handleClickCourse: handleClickCourse,
+    getMemberDetails: getMemberDetails,
+    getMemberInfo: getMemberInfo,
+    reviewPlaceholderImageUrl: reviewPlaceholderImageUrl,
+    getUserReviews: getUserReviews,
+    memberPlaceholderImageUrl: memberPlaceholderImageUrl,
+    getCourseSections: getCourseSections,
+    getCourseReviews: getCourseReviews,
+    getCourseMember: getCourseMember,
+    getCourseMembers: getCourseMembers,
+    memberId: memberId,
+    username: username,
+    handleDuplicateCourse: handleDuplicateCourse
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react.default.createElement(_Courses2.default, {
+    t: t,
+    placeholderImageUrl: placeholderImageUrl,
+    handleCreateCourse: handleCreateCourse,
+    title: t("courses_not_found_title"),
+    description: t("courses_not_found_desc")
+  })));
+}

package/dist/Screens/Search/Search.stories.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.StateExample = exports.Selectable = exports.NotFound = exports.Loading = exports.Loaded = exports.DialogExample = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Search = _interopRequireDefault(require("./Search"));
+var _ResponsiveTabs = _interopRequireDefault(require("../../Navigation/ResponsiveTabs"));
+var _Courses = require("../../Lists/Courses/Courses.stories");
+var _Course = require("../../Cards/Course/Course.stories");
+var _Members = require("../../Lists/Members/Members.stories");
+var _config = _interopRequireDefault(require("../../config"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Template = args => /*#__PURE__*/_react.default.createElement(_Search.default, args);
+const props = exports.props = {
+  courses: [],
+  isLoading: false,
+  hasMoreCourses: false,
+  loadMoreCourses: () => console.log("loading more"),
+  getMemberDetails: _Members.getMemberDetails,
+  languages: _config.default.languages,
+  handleFilterChange: event => console.log("filter change", event),
+  getCourseSections: _Course.props.getCourseSections,
+  getCourseReviews: _Course.props.getCourseReviews,
+  getCourseMembers: _Course.props.getCourseMembers
+};
+const handleClickCourse = (courseId, value) => {
+  console.log(courseId, value);
+};
+function SearchExample(props) {
+  const [state, setState] = (0, _react.useState)({
+    courses: [],
+    hasMoreCourses: true,
+    isLoading: false
+  });
+  const fetchCourses = () => {
+    setState({
+      ...state,
+      isLoading: true
+    });
+    console.log("Loading more items");
+    setTimeout(() => {
+      setState({
+        hasMoreCourses: state.courses.length < 10,
+        isLoading: false,
+        courses: [...state.courses].concat([..._Courses.courses, ..._Courses.courses])
+      });
+    }, 2500);
+  };
+  (0, _react.useEffect)(() => {
+    fetchCourses();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const loadMore = async () => {
+    console.log("Reached the end of screen");
+    if (state.hasMoreCourses && !state.isLoading) {
+      fetchCourses();
+    } else {
+      console.log("No more items");
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Search.default, _extends({}, props, state, {
+    loadMoreCourses: loadMore
+  }));
+}
+function SearchDialogExample() {
+  // please keep it undefined here to not make useScrollTrigger throw an error on first render
+  const [scrollTarget, setScrollTarget] = (0, _react.useState)(undefined);
+  return /*#__PURE__*/_react.default.createElement(_material.Dialog, {
+    PaperProps: {
+      id: "courses-dialog"
+    },
+    open: true,
+    fullScreen: true
+  }, /*#__PURE__*/_react.default.createElement(_material.AppBar, {
+    sx: {
+      position: "relative",
+      paddingRight: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    edge: "start",
+    color: "inherit",
+    "aria-label": "Close",
+    size: "large"
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6",
+    color: "inherit",
+    flexGrow: 1
+  }, "Add Courses"))), /*#__PURE__*/_react.default.createElement(_material.DialogContent, {
+    sx: {
+      padding: 0
+    },
+    ref: node => {
+      if (node) {
+        setScrollTarget(node);
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ResponsiveTabs.default, {
+    tabs: [{
+      label: "My Courses"
+    }, {
+      label: "Find Course"
+    }],
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    py: 2
+  }, /*#__PURE__*/_react.default.createElement(SearchExample, {
+    scrollTarget: scrollTarget
+  })), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    py: 2
+  }, /*#__PURE__*/_react.default.createElement(SearchExample, {
+    scrollTarget: scrollTarget
+  })))), /*#__PURE__*/_react.default.createElement(_material.DialogActions, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    color: "primary"
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_material.Button, {
+    color: "primary",
+    variant: "contained",
+    autoFocus: true
+  }, "Add Courses")));
+}
+const story = {
+  title: "Screens/Search",
+  excludeStories: ["props"],
+  component: _Search.default
+};
+var _default = exports.default = story;
+const NotFound = exports.NotFound = Template.bind({});
+NotFound.args = {
+  ...props
+};
+NotFound.storyName = "not found";
+const Loading = exports.Loading = Template.bind({});
+Loading.args = {
+  ...props,
+  isLoading: true,
+  hasMoreCourses: true
+};
+Loading.storyName = "loading";
+const Loaded = exports.Loaded = Template.bind({});
+Loaded.args = {
+  ...props,
+  courses: [..._Courses.courses, ..._Courses.courses],
+  hasMoreCourses: true
+};
+Loaded.storyName = "loaded";
+const Selectable = exports.Selectable = Template.bind({});
+Selectable.args = {
+  ...props,
+  courses: _Courses.courses,
+  selectable: true,
+  handleClickCourse: handleClickCourse
+};
+Selectable.storyName = "selectable";
+const StateExampleTemplate = args => /*#__PURE__*/_react.default.createElement(SearchExample, args);
+const StateExample = exports.StateExample = StateExampleTemplate.bind({});
+StateExample.storyName = "state example";
+const DialogExampleTemplate = args => /*#__PURE__*/_react.default.createElement(SearchDialogExample, args);
+const DialogExample = exports.DialogExample = DialogExampleTemplate.bind({});
+DialogExample.storyName = "dialog example";

package/dist/Screens/Search/package.json

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

package/package.json

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