@nualang/nualang-ui-components 0.1.1133 → 0.1.1135

package/dist/Dialogs/CreateQuestion/CreateQuestion.js

@@ -16,13 +16,9 @@ var _colors = require("@mui/material/colors");
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _reactBeautifulDnd = require("react-beautiful-dnd");
 var _DragHandle = _interopRequireDefault(require("@mui/icons-material/DragHandle"));
-var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
 var _ResponsiveDialog = _interopRequireDefault(require("../ResponsiveDialog"));
 var _InputHelper = _interopRequireDefault(require("../../Forms/InputHelper"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _nualas = _interopRequireDefault(require("../../img/nualas.svg"));
-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; }
@@ -59,13 +55,12 @@ function CreateQuestion({
   script,
   makeChatGptApiRequest,
   values,
+  disableRestoreFocus,
   ...otherProps
 }) {
   const [question, setQuestion] = (0, _react.useState)(otherProps.question);
   const [answer, setAnswer] = (0, _react.useState)(initialAnswerState);
   const [answerList, setAnswerList] = (0, _react.useState)(otherProps.answers);
-  const [isMessageGenerating, setIsMessageGenerating] = (0, _react.useState)(false);
-  const [errorMessage, setErrorMessage] = (0, _react.useState)(null);
   const handleAnswerInputChange = event => {
     const target = event.target;
     const value = target.type === "checkbox" ? target.checked : target.value;
@@ -140,82 +135,6 @@ function CreateQuestion({
       handleAddAnswerDebounced();
     }
   };
-  const extractJsonObject = response => {
-    let stack = [];
-    let startIndex = -1;
-    let endIndex = -1;
-    for (let i = 0; i < response.length; i++) {
-      if (response[i] === "{") {
-        if (stack.length === 0) {
-          startIndex = i;
-        }
-        stack.push("{");
-      } else if (response[i] === "}") {
-        stack.pop();
-        if (stack.length === 0) {
-          endIndex = i;
-          break;
-        }
-      }
-    }
-    if (startIndex !== -1 && endIndex !== -1) {
-      return response.substring(startIndex, endIndex + 1);
-    }
-    return "";
-  };
-  function validateResponse(response) {
-    if (typeof response !== "object" || response === null) {
-      return false;
-    }
-    if (typeof response.question !== "string") {
-      return false;
-    }
-    if (!Array.isArray(response.answers)) {
-      return false;
-    }
-    if (response.answers.length === 0) {
-      return false;
-    }
-    let hasCorrectAnswer = false;
-    for (const answer of response.answers) {
-      if (typeof answer !== "object" || answer === null) {
-        return false;
-      }
-      if (typeof answer.text !== "string" || typeof answer.correct !== "boolean" || typeof answer.type !== "string") {
-        return false;
-      }
-      if (answer.correct) {
-        hasCorrectAnswer = true;
-      }
-    }
-    return hasCorrectAnswer;
-  }
-  const handleGenerateAnswer = async () => {
-    try {
-      setIsMessageGenerating(true);
-      setErrorMessage(null);
-      const prompt = `Here is a script: ${JSON.stringify(script)}. Actor 1 is ${values.actor1} and Actor 2 is ${values.actor2} Please generate a new comprehension question based on the script that is completely unique to any existing questions, and provide it in JSON format with the keys 'question' and 'answers'. The 'question' key has the value of the string contraining the question text. The 'answers' key is an array of objects, where each answer object contains 'text', 'correct', and 'type' keys. The type should always be 'multichoice'. Ensure the new question is answered by the script, as the purpose of the question to the test the reader's understanding of the script.`;
-      const chatGptResponse = await makeChatGptApiRequest({
-        model: "gpt-3.5-turbo",
-        prompt
-      });
-      const jsonResponse = extractJsonObject(chatGptResponse);
-      const newQuestion = JSON.parse(jsonResponse);
-      if (!validateResponse(newQuestion)) {
-        throw new Error("Invalid response from GPT-3.5");
-      }
-      onSubmit({
-        question: newQuestion.question.trim(),
-        answers: newQuestion.answers
-      });
-      setIsMessageGenerating(false);
-      handleClose();
-    } catch (error) {
-      console.error(error);
-      setIsMessageGenerating(false);
-      setErrorMessage("There was problem generating the roleplay, please try again.");
-    }
-  };
   const title = update ? t("update_question") : t("add_question");
   const desc = update ? t("update_question_desc") : t("add_question_desc");
   return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
@@ -223,49 +142,9 @@ function CreateQuestion({
     handleClose: handleClose,
     handleSubmit: handleSubmit,
     submitText: title,
-    dialogTitle: isMessageGenerating ? t("generating_question") : title,
-    isSubmitDisabled: isMessageGenerating
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: 12,
-    textAlign: "center",
-    sx: {
-      ...(!isMessageGenerating && {
-        display: "none"
-      })
-    },
-    mx: 2
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _nualas.default,
-    style: {
-      maxHeight: 230
-    },
-    alt: ""
-  })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: 12,
-    sx: {
-      ...(!isMessageGenerating && {
-        display: "none"
-      })
-    },
-    mt: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.LinearProgress, null)), !isMessageGenerating && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: 12,
-    mb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Alert, {
-    severity: "info"
-  }, t("experimental_feature_desc_answer"), " -", " ", /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
-    to: "/contact"
-  }, t("contact_form"), "."))), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mb: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
-    onClick: handleGenerateAnswer,
-    color: "secondary",
-    variant: "contained",
-    startIcon: /*#__PURE__*/_react.default.createElement(_iconsMaterial.AutoFixHigh, null)
-  }, t("generate_question"))), /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, desc), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    dialogTitle: title,
+    disableRestoreFocus: disableRestoreFocus
+  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, desc), /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
     direction: "row",
     justifyContent: "center",
@@ -305,13 +184,7 @@ function CreateQuestion({
     characters: forLangCharacters ? forLangCharacters : null,
     helperText: answer.text && answer.text.trim() !== "" ? t("answer_helper_text") : "",
     multiline: true
-  })), errorMessage && /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    item: true,
-    xs: 12,
-    mt: 2
-  }, /*#__PURE__*/_react.default.createElement(_material.Alert, {
-    severity: "warning"
-  }, errorMessage))), /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+  }))), /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
     onDragEnd: handleOnDragEnd
   }, /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Droppable, {
     droppableId: "answers"
@@ -372,7 +245,7 @@ function CreateQuestion({
       name: "correct"
     }),
     label: t("correct_answer")
-  })))))), provided.placeholder)))));
+  })))))), provided.placeholder))));
 }
 CreateQuestion.defaultProps = {
   t: text => text,

package/dist/Dialogs/GenerateQuestion/GenerateQuestion.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _reactRouterDom = require("react-router-dom");
+var _iconsMaterial = require("@mui/icons-material");
+var _ResponsiveDialog = _interopRequireDefault(require("../ResponsiveDialog/ResponsiveDialog"));
+var _nualas = _interopRequireDefault(require("../../img/nualas.svg"));
+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; }
+// Components
+
+function GenerateQuestion({
+  t,
+  open,
+  handleClose,
+  script,
+  values,
+  makeChatGptApiRequest,
+  onSubmit,
+  learnLang,
+  forLang,
+  siteLanguage,
+  disableRestoreFocus
+}) {
+  const finalLearnLang = learnLang.charAt(0).toUpperCase() + learnLang.slice(1);
+  const finalForLang = forLang ? forLang.charAt(0).toUpperCase() + forLang.slice(1) : siteLanguage;
+  const [isMessageGenerating, setIsMessageGenerating] = (0, _react.useState)(false);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)(null);
+  const [questionType, setQuestionType] = (0, _react.useState)("factual");
+  const [questionLanguage, setQuestionLanguage] = (0, _react.useState)(finalLearnLang);
+  const extractJsonObject = response => {
+    let stack = [];
+    let startIndex = -1;
+    let endIndex = -1;
+    for (let i = 0; i < response.length; i++) {
+      if (response[i] === "{") {
+        if (stack.length === 0) {
+          startIndex = i;
+        }
+        stack.push("{");
+      } else if (response[i] === "}") {
+        stack.pop();
+        if (stack.length === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+    if (startIndex !== -1 && endIndex !== -1) {
+      return response.substring(startIndex, endIndex + 1);
+    }
+    return "";
+  };
+  function validateResponse(response) {
+    if (typeof response !== "object" || response === null) {
+      return false;
+    }
+    if (typeof response.question !== "string") {
+      return false;
+    }
+    if (!Array.isArray(response.answers)) {
+      return false;
+    }
+    if (response.answers.length === 0) {
+      return false;
+    }
+    let hasCorrectAnswer = false;
+    for (const answer of response.answers) {
+      if (typeof answer !== "object" || answer === null) {
+        return false;
+      }
+      if (typeof answer.text !== "string" || typeof answer.correct !== "boolean" || typeof answer.type !== "string") {
+        return false;
+      }
+      if (answer.correct) {
+        hasCorrectAnswer = true;
+      }
+    }
+    return hasCorrectAnswer;
+  }
+  const handleGenerateAnswer = async () => {
+    try {
+      setIsMessageGenerating(true);
+      setErrorMessage(null);
+      const prompt = `Here is a script: ${JSON.stringify(script)}. Refer to Actor 1 as ${values.actor1.name} and Actor 2 as ${values.actor2.name} in the question and the answers. The purpose of this script is to test the reader's ability to read in ${finalLearnLang}. The reader's native language is ${finalForLang}. Please generate a new comprehension question based on the script that is completely unique to any existing questions, preferably referring to a unique part of the script if possible, and provide it in JSON format with the keys 'question' and 'answers'. The 'question' key has the value of the string contraining the question text. The 'answers' key is an array of objects, where each answer object contains 'text', 'correct', and 'type' keys. The type should always be 'multichoice'. There are four possible question types, 'factual', 'inference', 'truefalse' and 'vocabulary'. For factual questions, ensure the new question is explicitly answered by the script, to test the reader's understanding of the script. For inference questions, ensure the new question requires the reader to make an assumption based on the script. For true/false questions, ensure the new question can be answered with a true or false response. For vocabulary questions, ensure the new question tests the reader's understanding of a specific ${finalLearnLang} word or phrase used in the script, to test whether the reader can understand it. Vocabulary questions do not necessarily have to take the context of the conversation into account, they are merely to test the reader's ${finalLearnLang} vocabulary. The question type for this particular question to generate is ${questionType}. The question and answers should be generated in ${questionLanguage}.`;
+      const chatGptResponse = await makeChatGptApiRequest({
+        model: "gpt-3.5-turbo",
+        prompt
+      });
+      const jsonResponse = extractJsonObject(chatGptResponse);
+      const newQuestion = JSON.parse(jsonResponse);
+      if (!validateResponse(newQuestion)) {
+        throw new Error("Invalid response from GPT-3.5");
+      }
+      onSubmit({
+        question: newQuestion.question.trim(),
+        answers: newQuestion.answers
+      });
+      setIsMessageGenerating(false);
+      handleClose();
+    } catch (error) {
+      console.error(error);
+      setIsMessageGenerating(false);
+      setErrorMessage("There was problem generating the roleplay, please try again.");
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
+    open: open,
+    handleClose: handleClose,
+    handleSubmit: handleGenerateAnswer,
+    submitText: t("generate_question"),
+    dialogTitle: isMessageGenerating ? t("generating_question") : t("generate_question"),
+    isSubmitDisabled: isMessageGenerating || !questionType,
+    isExperimentalFeature: true,
+    startIcon: /*#__PURE__*/_react.default.createElement(_iconsMaterial.AutoFixHigh, null),
+    disableRestoreFocus: disableRestoreFocus
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    textAlign: "center",
+    sx: {
+      ...(!isMessageGenerating && {
+        display: "none"
+      })
+    },
+    mx: 2
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _nualas.default,
+    style: {
+      maxHeight: 230
+    },
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    sx: {
+      ...(!isMessageGenerating && {
+        display: "none"
+      })
+    },
+    mt: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.LinearProgress, null)), !isMessageGenerating && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    mb: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Alert, {
+    severity: "info"
+  }, t("experimental_feature_desc_answer"), " -", " ", /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "/contact"
+  }, t("contact_form"), "."))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    mb: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    select: true,
+    label: t("question_type"),
+    value: questionType,
+    onChange: e => setQuestionType(e.target.value),
+    fullWidth: true,
+    variant: "outlined"
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: "factual"
+  }, t("multiple_choice_factual")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: "inference"
+  }, t("multiple_choice_inference")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: "truefalse"
+  }, t("true_false")), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: "vocabulary"
+  }, t("vocabulary")))), finalForLang !== finalLearnLang && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    mb: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+    select: true,
+    label: t("language"),
+    value: questionLanguage,
+    onChange: e => setQuestionLanguage(e.target.value),
+    fullWidth: true,
+    variant: "outlined"
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: finalForLang
+  }, finalForLang), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    value: finalLearnLang
+  }, finalLearnLang))), errorMessage && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    mt: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Alert, {
+    severity: "warning"
+  }, errorMessage))));
+}
+var _default = exports.default = GenerateQuestion;

package/dist/Dialogs/GenerateQuestion/package.json

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

package/dist/Dialogs/ResponsiveDialog/ResponsiveDialog.js

@@ -50,7 +50,10 @@ function ResponsiveDialog({
   TransitionComponent,
   className,
   transitionDuration,
-  keepDialogMounted = false
+  keepDialogMounted = false,
+  isExperimentalFeature = false,
+  startIcon,
+  disableRestoreFocus
 }) {
   const {
     classes
@@ -73,7 +76,8 @@ function ResponsiveDialog({
     style: {
       ...style
     },
-    className: className
+    className: className,
+    disableRestoreFocus: disableRestoreFocus ? disableRestoreFocus : false
   }, dialogTitle && /*#__PURE__*/_react.default.createElement(_DialogTitle.default, null, dialogTitle), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     className: dialogContentClassName
   }, children), (handleClose || handleSubmit) && /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, handleClose && /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -81,11 +85,12 @@ function ResponsiveDialog({
     onClick: handleClose,
     color: "primary"
   }, closeText ? closeText : t("close")), handleSubmit && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    color: "primary",
+    color: isExperimentalFeature ? "secondary" : "primary",
     variant: "contained",
     "data-cy": "submit-dialog",
     onClick: handleSubmit,
-    disabled: isSubmitDisabled
+    disabled: isSubmitDisabled,
+    startIcon: startIcon ? startIcon : null
   }, submitText ? submitText : "Submit")));
 }
 ResponsiveDialog.defaultProps = {

package/dist/Editors/Roleplay/Roleplay.js

@@ -11,7 +11,6 @@ var _mui = require("tss-react/mui");
 var _material = require("@mui/material");
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
-var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
 var _PlayCircleFilled = _interopRequireDefault(require("@mui/icons-material/PlayCircleFilled"));
@@ -19,7 +18,7 @@ var _Share = _interopRequireDefault(require("@mui/icons-material/Share"));
 var _Publish = _interopRequireDefault(require("@mui/icons-material/Publish"));
 var _GetApp = _interopRequireDefault(require("@mui/icons-material/GetApp"));
 var _AutoFixHigh = _interopRequireDefault(require("@mui/icons-material/AutoFixHigh"));
-var _UploadRoleplayScript = _interopRequireDefault(require("../../Dialogs/UploadRoleplayScript/UploadRoleplayScript"));
+var _Create = _interopRequireDefault(require("@mui/icons-material/Create"));
 var _Chat = _interopRequireDefault(require("../../Chat"));
 var _UpdateRoleplay = _interopRequireDefault(require("../../Forms/UpdateRoleplay"));
 var _CreateQuestion = _interopRequireDefault(require("../../Dialogs/CreateQuestion"));
@@ -32,6 +31,8 @@ var _handleScriptDownload = require("../../hooks/handleScriptDownload");
 var _utils = require("../../utils");
 var _DefaultColourButton = _interopRequireDefault(require("../../Misc/DefaultColourButton/DefaultColourButton"));
 var _index = require("../../utils/index");
+var _GenerateQuestion = _interopRequireDefault(require("../../Dialogs/GenerateQuestion/GenerateQuestion"));
+var _UploadRoleplayScript = _interopRequireDefault(require("../../Dialogs/UploadRoleplayScript/UploadRoleplayScript"));
 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; }
@@ -102,6 +103,20 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
   option2Avatar: {
     color: option === 2 ? theme.palette.primary.main : null,
     boxShadow: option === 2 ? "rgb(255, 255, 255) 0px 0px 0px 2.5px, 0px 0px 0px 4.5px" : "none"
+  },
+  createQuestion: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.mode === "dark" ? "black" : "white",
+    "&:hover": {
+      backgroundColor: theme.palette.primary.dark
+    }
+  },
+  generateQuestion: {
+    backgroundColor: theme.palette.secondary.main,
+    color: theme.palette.mode === "dark" ? "black" : "white",
+    "&:hover": {
+      backgroundColor: theme.palette.secondary.dark
+    }
   }
 }));
 function Transition(props) {
@@ -115,8 +130,29 @@ function CreationOptions({
   handleSelectOption,
   roleplay,
   option,
-  handleClickOpenCreateQuestion
+  handleClickOpenCreateQuestion,
+  setIsGenerateQuestionDialogOpen,
+  handleClose
 }) {
+  const handleClickOpenGenerateQuestion = () => {
+    setIsGenerateQuestionDialogOpen(true);
+    handleClose();
+  };
+  const handleClickCreateQuestion = () => {
+    handleClickOpenCreateQuestion();
+    handleClose();
+  };
+  const actions = [{
+    icon: /*#__PURE__*/_react.default.createElement(_Create.default, null),
+    name: "Create Question",
+    onClick: handleClickCreateQuestion,
+    class: classes.createQuestion
+  }, {
+    icon: /*#__PURE__*/_react.default.createElement(_AutoFixHigh.default, null),
+    name: "Generate Question",
+    onClick: handleClickOpenGenerateQuestion,
+    class: classes.generateQuestion
+  }];
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.creationOptions,
     id: "creationOptions"
@@ -172,12 +208,27 @@ function CreationOptions({
     number: "2"
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: `${classes.option}`
-  }, /*#__PURE__*/_react.default.createElement(_material.Fab, {
+  }, /*#__PURE__*/_react.default.createElement(_material.SpeedDial, {
     className: `${classes.avatar}`,
-    onClick: handleClickOpenCreateQuestion,
-    color: "primary",
-    "aria-label": "add question"
-  }, /*#__PURE__*/_react.default.createElement(_Add.default, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    FabProps: {
+      color: "primary",
+      sx: {
+        minWidth: 60,
+        minHeight: 60
+      }
+    },
+    ariaLabel: "Add question",
+    icon: /*#__PURE__*/_react.default.createElement(_material.SpeedDialIcon, null)
+  }, actions.map(action => /*#__PURE__*/_react.default.createElement(_material.SpeedDialAction, {
+    key: action.name,
+    icon: action.icon,
+    tooltipTitle: action.name,
+    onClick: action.onClick,
+    classes: {
+      fab: action.class
+    },
+    tooltipPlacement: "right"
+  }))), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h6",
     color: option === 3 ? "primary" : ""
   }, t("question")))));
@@ -217,6 +268,7 @@ function Roleplay({
   siteLanguage
 }) {
   const [isGenerateRoleplayDialogOpen, setIsGenerateRoleplayDialogOpen] = (0, _react.useState)(false);
+  const [isGenerateQuestionDialogOpen, setIsGenerateQuestionDialogOpen] = (0, _react.useState)(false);
   const {
     recognitionState,
     toggleListen,
@@ -565,7 +617,8 @@ function Roleplay({
     roleplay: roleplay,
     handleSelectOption: handleSelectOption,
     option: option,
-    handleClickOpenCreateQuestion: handleClickOpenCreateQuestion
+    handleClickOpenCreateQuestion: handleClickOpenCreateQuestion,
+    setIsGenerateQuestionDialogOpen: setIsGenerateQuestionDialogOpen
   }));
   const tabs = [{
     label: t("editor")
@@ -729,7 +782,8 @@ function Roleplay({
     values: {
       actor1: roleplay.actor1,
       actor2: roleplay.actor2
-    }
+    },
+    disableRestoreFocus: true
   }), isUpdatingQuestion.status && /*#__PURE__*/_react.default.createElement(_CreateQuestion.default, {
     t: t,
     learnLang: learnLang,
@@ -743,6 +797,23 @@ function Roleplay({
     question: roleplay.script[isUpdatingQuestion.index]?.question,
     answers: roleplay.script[isUpdatingQuestion.index].answers,
     update: true
+  }), /*#__PURE__*/_react.default.createElement(_GenerateQuestion.default, {
+    t: t,
+    open: isGenerateQuestionDialogOpen,
+    handleClose: () => {
+      setIsGenerateQuestionDialogOpen(false);
+    },
+    script: roleplay.script,
+    values: {
+      actor1: roleplay.actor1,
+      actor2: roleplay.actor2
+    },
+    makeChatGptApiRequest: makeChatGptApiRequest,
+    onSubmit: handleAddQuestion,
+    learnLang: learnLang,
+    forLang: forLang,
+    siteLanguage: siteLanguage,
+    disableRestoreFocus: true
   }), isGenerateRoleplayDialogOpen && /*#__PURE__*/_react.default.createElement(_GenerateRoleplay.default, {
     t: t,
     isGenerateRoleplayDialogOpen: isGenerateRoleplayDialogOpen,

package/dist/Exercises/Roleplay/Games/FillInTheBlanksGame/FillInTheBlanksGame.js

@@ -297,6 +297,15 @@ function RoleplayGame({
     formatUnderscores: false,
     hideBottomBar: true,
     muteSound: muteSound
+  }), /*#__PURE__*/_react.default.createElement(_InProgressExercise.default, {
+    t: t,
+    open: isInProgressModalOpen,
+    close: closeInProgressModal,
+    onClose: closeInProgressModal,
+    continueExercise: handleContinueExercise,
+    restartExercise: handleRestartExercise,
+    goBack: handleCloseExercise,
+    inTopic: courseId && sectionId && topicId
   }), /*#__PURE__*/_react.default.createElement(_CompletedExcercise.default, {
     open: isCompletionModalOpen,
     restartExcercise: () => {
@@ -327,15 +336,6 @@ function RoleplayGame({
     goBack: handleCloseExercise,
     inTopic: courseId && sectionId && topicId,
     isFinishExerciseDisabled: true
-  }), /*#__PURE__*/_react.default.createElement(_InProgressExercise.default, {
-    t: t,
-    open: isInProgressModalOpen,
-    close: closeInProgressModal,
-    onClose: closeInProgressModal,
-    continueExercise: handleContinueExercise,
-    restartExercise: handleRestartExercise,
-    goBack: handleCloseExercise,
-    inTopic: courseId && sectionId && topicId
   }));
 }
 RoleplayGame.defaultProps = {

package/dist/Misc/AnswerResult/AnswerResult.js

@@ -460,7 +460,7 @@ function AnswerResult({
     onClick: handleNext,
     className: classes.nextButton,
     "data-cy": "answer-result-next-button",
-    "aria-label": "Answer Result Drawer - Next Button",
+    "aria-label": "Next Button",
     ref: nextBtnRef,
     tabIndex: 1
   }, t("next")), (exercise === "pronunciation" || exercise === "roleplay") && handleTryAgain && /*#__PURE__*/_react.default.createElement(_DefaultColourButton.default, {

package/dist/Misc/Snackbar/Snackbar.js

@@ -12,6 +12,7 @@ var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
 var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
 var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _material = require("@mui/material");
 var _mui = require("tss-react/mui");
 var _colors = require("@mui/material/colors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -82,13 +83,14 @@ function Snackbar({
     onClose: closeSnackbar,
     message: snackbarMessage,
     "aria-describedby": "client-snackbar-message",
-    role: "dialog"
+    role: "none"
   }, /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, {
     "data-cy": "snackbar",
     className: color,
     message: /*#__PURE__*/_react.default.createElement("span", {
       "aria-label": "client-snackbar-message",
-      className: classes.message
+      className: classes.message,
+      role: "alert"
     }, icon, t(snackbarMessage)),
     action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
       key: "close",

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

@@ -569,7 +569,8 @@ function Classroom({
     userImage,
     verificationStatus,
     gameAward,
-    banner
+    banner,
+    bannerXs
   } = classroom;
   const handleJoin = () => {
     if (authenticated) {
@@ -854,7 +855,7 @@ function Classroom({
       marginBottom: theme.spacing(4)
     }),
     highQualitySrc: (banner ?? picture) || _index.default.classroom,
-    lowQualitySrc: pictureXs,
+    lowQualitySrc: bannerXs ?? pictureXs,
     title: classroomName
   }), userImage ? /*#__PURE__*/_react.default.createElement(_CardElements.CardAvatar, {
     "aria-label": `Open ${classroomName} creator's profile`,

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

@@ -525,7 +525,8 @@ function Course({
     verificationStatus,
     createdBy,
     createdByName,
-    gameAward
+    gameAward,
+    bannerXs
   } = course;
   const handleJoin = () => {
     if (creatorSubscription.isPaidUser || course.visibility === "public") {
@@ -702,7 +703,7 @@ function Course({
       marginBottom: theme.spacing(4)
     }),
     highQualitySrc: (banner ?? picture) || _index.default.course,
-    lowQualitySrc: pictureXs,
+    lowQualitySrc: bannerXs ?? pictureXs,
     title: courseName
   }), userImage ? /*#__PURE__*/_react.default.createElement(_CardElements.CardAvatar, {
     "aria-label": `Open ${courseName} creator's profile`,

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

@@ -708,7 +708,8 @@ function Topic({
     createdByName,
     banner,
     gameAward,
-    isKeyboardHiddenTranslation
+    isKeyboardHiddenTranslation,
+    bannerXs
   } = topic;
   const handleAddPhrase = async values => {
     try {
@@ -847,7 +848,7 @@ function Topic({
       marginBottom: theme.spacing(4)
     }),
     highQualitySrc: (banner ?? picture) || _index2.default.topic,
-    lowQualitySrc: pictureXs,
+    lowQualitySrc: bannerXs ?? pictureXs,
     title: topicName
   }), userImage ? /*#__PURE__*/_react.default.createElement(_CardElements.CardAvatar, {
     "aria-label": `${t("go_to")} ${createdByName || `${topicName} ${t("creator")}`} ${t("profile")}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1133",
+  "version": "0.1.1135",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -22,7 +22,7 @@
     "@mui/material": "^5.14.2",
     "@mui/system": "^5.14.1",
     "@mui/x-date-pickers": "^6.10.1",
-    "@nualang/videochat-ui-components": "^0.0.167",
+    "@nualang/videochat-ui-components": "^0.0.168",
     "@storybook/theming": "^7.6.17",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",