@nualang/nualang-ui-components 0.1.1180 → 0.1.1181

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -114,7 +114,7 @@ function GeneratePhrases({
       setErrorMessage(null);
       const goalPrompt = `The generated phrases must specifically target the following linguistic goal: '${values.topicGoal}'. Avoid generating phrases that do not align with this goal. `;
       const prompt = phraseType === "sentences" ? isPhrases ? `The context is a language learning application. Here is a list of phrases or sentences in ${learnLang} and their translations in ${forLang}:\n\n${JSON.stringify(phrases)}\n\nNow, generate ${values.phraseAmount} more uniques sentences in ${learnLang} and their translations in ${forLang} on the topic of '${values.phrasesTopic}' in the same JSON format as the ones that I have passed to you. The 'idx' field should contain an index integer which follows on incrementally from the existing phrases. The 'image' field should contain an empty string. Do not include a 'voices' field. ${values.topicGoal.trim() ? goalPrompt : ""}The sentences should be unique and not already in the list. The sentences should be appropriate for ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${difficulty} level. Ensure the formatting of the JSON response is correct and follows this structure.` : `The context is a language learning application. Generate ${values.phraseAmount} unique phrases or sentences in ${learnLang} and their translations in ${forLang} on the topic of '${values.phrasesTopic}'. Return the sentences inside a JSON array of ${values.phraseAmount} objects, each with the following fields: 'phrase', 'translations', 'idx', and 'image'. Each field is required and cannot be omitted. The 'idx' field represents the index of the phrases, starting from 0 and going up by 1 up until the last phrase. The 'image' field should contain an empty string. The 'translations' field should be an array of at least one translation of the sentence in ${forLang}, but it can contain more translations as long as they are grammatically correct. ${values.topicGoal.trim() ? goalPrompt : ""}The sentences should be appropriate for the ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${difficulty} level. The sentences should be unique. Ensure the formatting of the JSON response is correct and follows this structure.` : isPhrases ? `The context is a language learning application. Here is a list of words or short lexical phrases in ${learnLang} and their translations in ${forLang}:\n\n${JSON.stringify(phrases)}\n\nNow, generate ${values.phraseAmount} more words or lexical phrases and their translations in ${learnLang} on the topic of '${values.phrasesTopic}' in the same JSON format as the ones that I have passed to you. The 'idx' field should contain an index integer which follows on incrementally from the existing phrases. The 'image' field should contain an empty string. Do not include a 'voices' field. ${values.topicGoal.trim() ? goalPrompt : ""}The words or lexical phrases should be unique and not already in the list. The words or lexical phrases should be ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${difficulty}. Ensure the formatting of the JSON response is correct and follows this structure.` : `The context is a language learning application. Generate ${values.phraseAmount} unique words or short lexical phrases in ${learnLang} and their translations in ${forLang} on the topic of '${values.phrasesTopic}'. Return the words or short lexical phrases inside a JSON array of ${values.phraseAmount} objects, each with the following fields: 'phrase', 'translations', 'idx', and 'image'. Each field is required and cannot be omitted. The 'idx' field represents the index of the phrases, starting from 0 and going up by 1 up until the last phrase. The 'image' field should contain an empty string. The 'translations' field should be an array of at least one translation of the phrase in ${forLang}, but it can contain more translations as long as they are grammatically correct. ${values.topicGoal.trim() ? goalPrompt : ""}The words or short lexical phrases should be appropriate for the ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${difficulty} level. The words or short lexical phrases should be unique. Ensure the formatting of the JSON response is correct and follows this structure.`;
-      console.log("prompt: ", prompt);
+      // console.log("prompt: ", prompt);
       const chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-3.5-turbo",
         prompt

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -182,7 +182,8 @@ function GenerateRoleplayDialog({
       setErrorMessage("");
       let response;
       const roleplayDifficulty = values.roleplayDifficulty;
-      console.log("Roleplay Difficulty:", roleplayDifficulty);
+      // console.log("Roleplay Difficulty:", roleplayDifficulty);
+
       const basePrompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}. The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(roleplayDifficulty)}.'` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2?.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}. The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(roleplayDifficulty)}.'`;
       const topicGoalPrompt = topicGoal ? ` The conversation should be guided by the following goal: '${topicGoal}'.` : "";
       const promptWithPhrases = usePhrasesContext ? ` Additionally, use the following phrases as part of the conversation, where appropriate to the topic '${values.roleplayTopic}': ${phrases.map(phrase => phrase.phrase).join(", ")}. Only use these phrases if they fit naturally into the conversation.` : "";
@@ -192,7 +193,8 @@ function GenerateRoleplayDialog({
       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, 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);
+
+      // console.log("Final Prompt Sent to API:", activePrompt);
 
       // Call the API and handle the response as before
       if (usePdfContext) {
@@ -235,7 +237,8 @@ function GenerateRoleplayDialog({
       }
 
       // Log the full response for debugging
-      console.log("Full API Response:", response);
+      // console.log("Full API Response:", response);
+
       const jsonResponse = removeExtraTextFromChatGptResponse(response);
       const roleplayScript = fixMissingComma(jsonResponse);
       if (validateScript(roleplayScript)) {

package/dist/Dialogs/RoleplayPreview/RoleplayPreview.js

@@ -84,7 +84,8 @@ function RoleplayPreview({
       handleChangeVoiceSpeed: handleChangeVoiceSpeed,
       isRoleplayPreview: true,
       currentMessages: currentMessages,
-      roleplay: roleplay
+      roleplay: roleplay,
+      exercise: "preview"
     })
   }));
 }

package/dist/Editors/Roleplay/Roleplay.js

@@ -274,7 +274,7 @@ function Roleplay({
   initialTopicGoal,
   isUserInternal
 }) {
-  console.log("Edit Roleplay -> phrases", phrases);
+  // console.log("Edit Roleplay -> phrases", phrases);
   const [isGenerateRoleplayDialogOpen, setIsGenerateRoleplayDialogOpen] = (0, _react.useState)(false);
   const [isGenerateQuestionDialogOpen, setIsGenerateQuestionDialogOpen] = (0, _react.useState)(false);
   const {

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

@@ -394,7 +394,8 @@ function RoleplayGame({
       handleEditRoleplay: handleEditRoleplay,
       handleRestart: handleRestart,
       handleShareRoleplay: handleShareRoleplay,
-      parentClassroom: parentClassroom
+      parentClassroom: parentClassroom,
+      exercise: gameId
     }),
     beforeElements: beforeElements,
     afterElements: afterElements,

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

@@ -399,7 +399,8 @@ function RoleplayGame({
       handleEditRoleplay: handleEditRoleplay,
       handleRestart: handleRestart,
       handleShareRoleplay: handleShareRoleplay,
-      parentClassroom: parentClassroom
+      parentClassroom: parentClassroom,
+      exercise: gameId
     }),
     beforeElements: beforeElements,
     afterElements: afterElements,

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

@@ -273,7 +273,8 @@ function RoleplayGame({
       handleEditRoleplay: handleEditRoleplay,
       handleRestart: handleRestart,
       handleShareRoleplay: handleShareRoleplay,
-      parentClassroom: parentClassroom
+      parentClassroom: parentClassroom,
+      exercise: gameId
     }),
     beforeElements: /*#__PURE__*/_react.default.createElement(_BeforeElements.default, {
       t: t,

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

@@ -258,7 +258,8 @@ function RoleplayGame({
       handleEditRoleplay: handleEditRoleplay,
       handleRestart: handleRestart,
       handleShareRoleplay: handleShareRoleplay,
-      parentClassroom: parentClassroom
+      parentClassroom: parentClassroom,
+      exercise: gameId
     }),
     beforeElements: /*#__PURE__*/_react.default.createElement(_BeforeElements.default, {
       t: t,

package/dist/Exercises/Roleplay/OriginalRoleplay.js

@@ -357,7 +357,8 @@ function OverflowMenu({
     handleCloseReportProblem: handleCloseReportProblem,
     handleReportProblem: handleReportProblem,
     mode: "menuitem",
-    menuIconClassname: classes.menuIcon
+    menuIconClassname: classes.menuIcon,
+    exercise: exerciseName
   })));
 }
 function Roleplay({
@@ -619,7 +620,8 @@ function Roleplay({
     isReportProblemOpen: isReportProblemOpen,
     handleOpenReportProblem: handleOpenReportProblem,
     handleCloseReportProblem: handleCloseReportProblem,
-    handleReportProblem: handleReportProblem
+    handleReportProblem: handleReportProblem,
+    exercise: exerciseName
   })), /*#__PURE__*/_react.default.createElement(_Hidden.default, {
     smUp: true
   }, /*#__PURE__*/_react.default.createElement(_material.Button, {

package/dist/Forms/ChipInput/ChipInput.js

@@ -13,10 +13,11 @@ function ChipInput(props) {
     name = "",
     value = [],
     handleChange = () => {},
-    label
+    label,
+    delimiter = /[\s,]+/
   } = props;
   const handleAddChip = chip => {
-    const newChips = chip.split(/[\s,]+/).map(c => c.trim().toLowerCase()).filter(Boolean);
+    const newChips = chip.split(delimiter).map(c => c.trim().toLowerCase()).filter(Boolean);
     handleChange({
       target: {
         name: name,

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

@@ -214,19 +214,20 @@ function BotInformation({
   }, difficultyOptions)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("content_tags")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "tags"
-  }, t("content_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_info_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "tags",
     "data-cy": "tags",
-    value: tags,
+    value: tags || [],
     name: "tags",
     helperText: touched.tags ? t(errors.tags) : t("add_tag"),
     error: touched.tags && Boolean(errors.tags),
     handleChange: handleChange,
+    delimiter: /,/,
     type: "text",
     margin: "normal",
     variant: "outlined",

package/dist/Forms/CreateClassroom/Steps/ClassroomInformation/ClassroomInformation.js

@@ -119,19 +119,20 @@ function ClassroomInformation({
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("content_tags")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "tags"
-  }, t("content_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_info_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "tags",
     "data-cy": "tags",
-    value: tags,
+    value: tags || [],
     name: "tags",
     helperText: touched.tags ? t(errors.tags) : t("add_tag"),
     error: touched.tags && Boolean(errors.tags),
     handleChange: handleChange,
+    delimiter: /,/,
     type: "text",
     margin: "normal",
     variant: "outlined",

package/dist/Forms/CreateClassroom/Steps/ClassroomSettings/ClassroomSettings.js

@@ -128,20 +128,21 @@ function ClassroomSettings({
     sx: {
       mb: 2
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("allowed_domains")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "allowedDomains"
-  }, t("allowed_domains")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_domains_info")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "allowedDomains",
     "data-cy": "allowedDomains",
     label: t("allowed_domains"),
-    value: allowedDomains,
+    value: allowedDomains || [],
     name: "allowedDomains",
     helperText: errors.allowedDomains ? t(errors.allowedDomains) : t("add_allowed_domains_desc"),
     error: errors.allowedDomains && Boolean(errors.allowedDomains),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",
@@ -176,20 +177,21 @@ function ClassroomSettings({
     sx: {
       mb: 2
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("allowed_domains")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "allowedDomains"
-  }, t("allowed_domains")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_domains_info")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "allowedDomains",
     "data-cy": "allowedDomains",
     label: t("allowed_domains"),
-    value: allowedDomains,
+    value: allowedDomains || [],
     name: "allowedDomains",
     helperText: errors.allowedDomains ? t(errors.allowedDomains) : t("add_allowed_domains_desc"),
     error: errors.allowedDomains && Boolean(errors.allowedDomains),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",
@@ -262,11 +264,12 @@ function ClassroomSettings({
     id: "collaborators",
     "data-cy": "collaborators",
     label: t("collaborators"),
-    value: collaborators,
+    value: collaborators || [],
     name: "collaborators",
     helperText: touched.collaborators ? t(errors.collaborators) : t("add_collaborator_tag"),
     error: touched.collaborators && Boolean(errors.collaborators),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",
@@ -280,11 +283,12 @@ function ClassroomSettings({
     id: "collaborators",
     "data-cy": "collaborators",
     label: t("collaborators"),
-    value: collaborators,
+    value: collaborators || [],
     name: "collaborators",
     helperText: touched.collaborators ? errors.collaborators : t("add_collaborator_tag"),
     error: touched.collaborators && Boolean(errors.collaborators),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",

package/dist/Forms/CreateCourse/Steps/CourseInformation/CourseInformation.js

@@ -143,19 +143,20 @@ function CourseInformation({
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("content_tags")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "tags"
-  }, t("content_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_info_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "tags",
     "data-cy": "tags",
-    value: tags,
+    value: tags || [],
     name: "tags",
     helperText: touched.tags ? t(errors.tags) : t("add_tag"),
     error: touched.tags && Boolean(errors.tags),
     handleChange: handleChange,
+    delimiter: /,/,
     type: "text",
     margin: "normal",
     variant: "outlined",

package/dist/Forms/CreateCourse/Steps/CourseSettings/CourseSettings.js

@@ -95,20 +95,21 @@ function CourseSettings({
     sx: {
       mb: 2
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("allowed_domains")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "allowedDomains"
-  }, t("allowed_domains")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_domains_info")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "allowedDomains",
     "data-cy": "allowedDomains",
     label: t("allowed_domains"),
-    value: allowedDomains,
+    value: allowedDomains || [],
     name: "allowedDomains",
     helperText: errors.allowedDomains ? t(errors.allowedDomains) : t("add_allowed_domains_desc"),
     error: errors.allowedDomains && Boolean(errors.allowedDomains),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",
@@ -153,11 +154,12 @@ function CourseSettings({
     id: "collaborators",
     "data-cy": "collaborators",
     label: t("collaborators"),
-    value: collaborators,
+    value: collaborators || [],
     name: "collaborators",
     helperText: touched.collaborators ? t(errors.collaborators) : t("add_collaborator_tag"),
     error: touched.collaborators && Boolean(errors.collaborators),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",
@@ -171,11 +173,12 @@ function CourseSettings({
     id: "collaborators",
     "data-cy": "collaborators",
     label: t("collaborators"),
-    value: collaborators,
+    value: collaborators || [],
     name: "collaborators",
     helperText: touched.collaborators ? t(errors.collaborators) : t("add_collaborator_tag"),
     error: touched.collaborators && Boolean(errors.collaborators),
     handleChange: handleChange,
+    delimiter: /[\s,]+/,
     type: "text",
     margin: "normal",
     variant: "outlined",

package/dist/Forms/CreateRoleplay/Steps/RoleplayInformation/RoleplayInformation.js

@@ -318,19 +318,20 @@ function RoleplayInformation({
     sx: {
       mb: 2
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("content_tags")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "tags"
-  }, t("content_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_info_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "tags",
     "data-cy": "tags",
-    value: tags,
+    value: tags || [],
     name: "tags",
     helperText: touched.tags ? t(errors.tags) : t("add_tag"),
     error: touched.tags && Boolean(errors.tags),
     handleChange: handleChange,
+    delimiter: /,/,
     type: "text",
     margin: "normal",
     variant: "outlined",

package/dist/Forms/CreateRoleplayHook/Steps/RoleplayInformation/RoleplayInformation.js

@@ -360,11 +360,11 @@ function RoleplayInformation({
     sx: {
       mb: 2
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("content_tags")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "tags"
-  }, t("content_tags")), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+  }, t("enter_info_tags")), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
     name: "tags",
     render: ({
       field: {
@@ -380,7 +380,7 @@ function RoleplayInformation({
         t: t,
         id: "tags",
         "data-cy": "tags",
-        value: value,
+        value: value || [],
         name: "tags"
         // Having a bit of trouble getting helper text displayed too, seems to be an issue with refs
         ,
@@ -388,6 +388,7 @@ function RoleplayInformation({
         error: !!error,
         onBlur: onBlur,
         handleChange: onChange,
+        delimiter: /,/,
         type: "text",
         margin: "normal",
         variant: "outlined",

package/dist/Forms/CreateTopic/Steps/TopicInformation/TopicInformation.js

@@ -136,19 +136,20 @@ function TopicInformation({
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("content_tags")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "textSecondary",
     component: "label",
     htmlFor: "tags"
-  }, t("content_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
+  }, t("enter_info_tags")), /*#__PURE__*/_react.default.createElement(_ChipInput.default, {
     t: t,
     id: "tags",
     "data-cy": "tags",
-    value: tags,
+    value: tags || [],
     name: "tags",
     helperText: touched.tags ? t(errors.tags) : t("add_tag"),
     error: touched.tags && Boolean(errors.tags),
     handleChange: handleChange,
+    delimiter: /,/,
     type: "text",
     margin: "normal",
     variant: "outlined",

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

@@ -423,6 +423,10 @@ function Classroom({
     content: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, t("classroom_creator_add_students_email")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, t("classroom_creator_add_students_email_desc"))),
     spotlightPadding: 8,
     target: "#invite"
+  }, {
+    content: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, t("classroom_creator_play_live_game")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, t("classroom_creator_play_live_game_desc"))),
+    spotlightPadding: 8,
+    target: "#play-live"
   }, {
     content: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, t("classroom_creator_track_progress")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, t("classroom_creator_track_progress_desc"))),
     spotlightPadding: 8,
@@ -1076,6 +1080,7 @@ function Classroom({
     color: "primary",
     startIcon: /*#__PURE__*/_react.default.createElement(_LiveTv.default, null),
     size: "small",
+    id: "play-live",
     sx: {
       animation: createdGame && createdGame.createdBy === username ? `${theme.palette.mode === "light" ? _Styles.glowPulseLight : _Styles.glowPulseDark} 2s infinite ease-in-out` : null,
       boxShadow: createdGame && createdGame.createdBy === username ? `0 0 0 0 ${theme.palette.mode === "light" ? "rgba(101, 0, 221, 0.7)" : "rgba(171, 120, 255, 0.7)"}` : null

package/package.json

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