@nualang/nualang-ui-components 0.1.1207 → 0.1.1209

package/dist/Cards/SubscriptionPlan/SubscriptionPlan.js

@@ -86,7 +86,7 @@ const PlanFeaturesListItem = (0, _system.styled)("li")(({
   theme
 }) => ({
   display: "flex",
-  marginTop: theme.spacing(3)
+  marginTop: theme.spacing(2)
 }));
 const PlanFeaturesListItemLabel = (0, _system.styled)(_material.Typography)(() => ({
   display: "flex",
@@ -116,7 +116,7 @@ const Badge = (0, _system.styled)(_material.Typography)(({
   color: theme.palette.common.black,
   fontSize: theme.typography.pxToRem(10),
   borderRadius: "9px",
-  padding: "3px",
+  padding: theme.spacing(0.25, 1),
   display: "flex",
   alignItems: "center",
   marginBottom: "2px"
@@ -188,7 +188,7 @@ function SubscriptionPlan({
   currency
 }) {
   const [displayPlan, setDisplayPlan] = (0, _react.useState)(plan);
-  const [buyNowDisabled, setBuyNowDisabled] = (0, _react.useState)(true);
+  const [buyNowDisabled, setBuyNowDisabled] = (0, _react.useState)(plan?.planVersions?.length > 0 ? true : false);
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const open = Boolean(anchorEl);
   const [disableRippleEff, setDisableRippleEff] = (0, _react.useState)(false);
@@ -307,8 +307,9 @@ function SubscriptionPlan({
           onClick: () => plan.button.onClick(),
           bgPrimary: plan.bgPrimary,
           children: plan.button.buttonText
-        }), plan.planVersions && displayPlan && billingPeriod && currency && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [displayPlan.subButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), displayPlan && billingPeriod && currency && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          mt: 2,
+          children: [plan.planVersions && displayPlan.subButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlanButton, {
               id: "plan-button",
               fullWidth: true,

package/dist/Containers/App/App.js

@@ -10,7 +10,6 @@ var _DefaultColourButton = _interopRequireDefault(require("../../Misc/DefaultCol
 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"));
@@ -91,7 +90,8 @@ const SearchIconWrapper = (0, _styles.styled)("div")(({
   justifyContent: "center"
 }));
 const StyledInputBase = (0, _styles.styled)(_InputBase.default)(({
-  theme
+  theme,
+  isUpgradePossible
 }) => ({
   color: "inherit",
   width: "100%",
@@ -100,9 +100,9 @@ const StyledInputBase = (0, _styles.styled)(_InputBase.default)(({
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create("width"),
     [theme.breakpoints.up("lg")]: {
-      width: "30ch",
+      width: isUpgradePossible ? "20ch" : "30ch",
       "&:focus": {
-        width: "35ch"
+        width: isUpgradePossible ? "25ch" : "35ch"
       }
     }
   }
@@ -111,7 +111,8 @@ function AppSearch({
   t,
   navigate,
   searchText,
-  setSearchText
+  setSearchText,
+  isUpgradePossible
 }) {
   const [debouncedSearchText, setDebouncedSearchText] = (0, _react.useState)("");
   const [prevDebouncedSearchText, setPrevDebouncedSearchText] = (0, _react.useState)("");
@@ -146,6 +147,7 @@ function AppSearch({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputBase, {
       autoFocus: true,
+      isUpgradePossible: isUpgradePossible,
       placeholder: t("app_search_placeholder"),
       value: searchText,
       onChange: ev => {
@@ -283,6 +285,7 @@ function App({
   };
   const isSearchActive = searchText || isMobileSearchExpanded;
   const isTeacher = user && user["custom:role"] === "teach";
+  const isUpgradePossible = subscription && !subscription.isPaidUser && subscription.isUpgradePossible;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
@@ -307,7 +310,8 @@ function App({
           t: t,
           navigate: navigate,
           searchText: searchText,
-          setSearchText: setSearchText
+          setSearchText: setSearchText,
+          isUpgradePossible: isUpgradePossible
         })]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [isLgScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -316,7 +320,8 @@ function App({
               t: t,
               navigate: navigate,
               searchText: searchText,
-              setSearchText: setSearchText
+              setSearchText: setSearchText,
+              isUpgradePossible: isUpgradePossible
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
               flexGrow: 1
             })]
@@ -353,16 +358,6 @@ function App({
           }),
           size: isLgScreen ? "medium" : "small",
           children: t("skip_navigation")
-        }), subscription && !subscription.isPaidUser && subscription.isUpgradePossible && authenticated && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultColourButton.default, {
-          variant: "contained",
-          startIcon: isLgScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Star.default, {}) : null,
-          href: upgradePlanURL,
-          size: isLgScreen ? "medium" : "small",
-          sx: {
-            fontSize: isLgScreen ? null : 12,
-            mr: 1
-          },
-          children: t("upgrade_plan")
         }), isTeacher && (isLgScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
           variant: "contained",
           onClick: handleClickCreate,
@@ -381,7 +376,16 @@ function App({
             onClick: handleClickCreate,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {})
           })
-        })), isLgScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WhatsNew.default, {
+        })), isUpgradePossible && authenticated && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultColourButton.default, {
+          variant: "contained",
+          href: upgradePlanURL,
+          size: isLgScreen ? "medium" : "small",
+          sx: {
+            fontSize: isLgScreen ? null : 12,
+            ml: 1
+          },
+          children: t("upgrade_plan")
+        }), isLgScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WhatsNew.default, {
           t: t,
           whatsNewMarkdown: whatsNewMarkdown,
           whatsNewDate: whatsNewDate

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -223,10 +223,14 @@ function CreatePhrase({
 
   const autoFillTranslation = async () => {
     try {
-      const activePrompt = `Translate the following phrase "${phrase}" from ${learnLang} to ${forLang}. Provide all the acceptable translations if the phrase has multiple interpretations. Format the response as a valid JSON array with each translation as a string inside the array.`;
       let chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-3.5-turbo",
-        prompt: activePrompt
+        promptKey: "autoFillTranslation",
+        promptVariables: {
+          learnLang,
+          forLang,
+          phrase
+        }
       });
       chatGptResponse = chatGptResponse.replaceAll("```", '').replaceAll("json", '');
       const translations = JSON.parse(chatGptResponse);

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -138,16 +138,21 @@ function GenerateBotDialog({
       setIsBotGenerating(true);
       setErrorMessage("");
       let response;
-      let promptWithTopic;
-      let promptWithTopicPhrases;
-      const topicPrompt = `The questions should be about the topic: '${values.botTopic}'. Focus primarily on the topic to ensure the questions are aligned with it. If there is no relevance or similarity between the topic and the provided phrases, only use the topic for generating questions.`;
-      const topicGoalPrompt = `These questions must specifically target the goal: '${topicGoal}’. The questions should only focus on the goal '${topicGoal}’. Avoid generating questions that ask about unrelated details.`;
-      bot.selectedTemplate === "nualang.quiz.0.0.1" ? promptWithTopic = `Create ${values.botLengthNumber} questions in ${learnLang} about the topic ${values.botTopic}. Have atleast one correct answer for each question. The questions should be appropriate for ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${bot & bot.difficulty} level learners. Questions and answers must be unique from one another. Return an array with ${values.botLengthNumber} objects inside it. Each object should have the keys questions and answer. The key question should equal to the question that is generated about the topic. The key answer should equal to the corresponding answer to the question, make sure that the answer text is inside brackets like this answer: "(questionAnswer)" if there is more than one correct answer the value of the answer key should be formatted like this  answer: "(answer1|answer2)". Use this array as template: ${sampleQuestionArray} Your response should be in JSON.` : promptWithTopic = `Create ${values.botLengthNumber} open ended questions in ${learnLang} about the topic ${values.botTopic}. The questions should be appropriate for ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${bot & bot.difficulty} level learners. Each question must be unique. Return an array with ${values.botLengthNumber} objects inside it. Each object should have the key text. The key text should equal to the question that is generated about the topic. Your response should be in JSON.`;
-      bot.selectedTemplate === "nualang.quiz.0.0.1" ? promptWithTopicPhrases = `Create ${values.botLengthNumber} questions in ${learnLang}${values.botTopic.trim() === "" ? " using the following phrases as context to assist in the generations of questions." : "."} ${topicGoal.trim() !== "" ? topicGoalPrompt : ""} ${values.botTopic.trim() !== "" ? topicPrompt : ""} The questions should be appropriate for ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${bot & bot.difficulty} level learners. Include at least one correct answer for each question. Phrases for context: ${phrases}. Questions  must be unique from one another. Return an array with ${values.botLengthNumber} objects inside it. Each object should have the keys questions and answer. The key question should equal to the question that is generated about the topic. The key answer should equal to the corresponding answer to the question, make sure that the answer text is inside brackets like this answer: "(questionAnswer)" if there is more than one correct answer the value of the answer key should be formatted like this  answer: "(answer1|answer2)". Use this array as template: ${sampleQuestionArray} Your response should be in JSON.` : promptWithTopicPhrases = `Create ${values.botLengthNumber} questions in ${learnLang}${values.botTopic.trim() === "" ? " using the following phrases as context to assist in the generations of questions." : "."} ${topicGoal.trim() !== "" ? topicGoalPrompt : ""} ${values.botTopic.trim() !== "" ? topicPrompt : ""} The questions should be appropriate for ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${bot & bot.difficulty} level learners. Phrases for context: ${phrases}. Questions  must be unique from one another.  Return an array with ${values.botLengthNumber} objects inside it. Each object should have the key text. The key text should equal to the question that is generated about the topic. Your response should be in JSON.`;
-      const activePrompt = usePhrasesContext && phrases.length > 0 ? promptWithTopicPhrases : promptWithTopic;
       let chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-3.5-turbo",
-        prompt: activePrompt
+        promptKey: "generateBot",
+        promptVariables: {
+          botTopic: values.botTopic,
+          topicGoal: topicGoal,
+          selectedTemplate: bot.selectedTemplate,
+          botLengthNumber: values.botLengthNumber,
+          learnLang: learnLang,
+          siteLanguage: siteLanguage,
+          difficulty: bot.difficulty,
+          sampleQuestionArray: sampleQuestionArray,
+          phrases: phrases,
+          usePhrasesContext: usePhrasesContext
+        }
       });
       response = chatGptResponse;
       const jsonResponse = removeExtraTextFromChatGptResponse(response);

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -111,12 +111,21 @@ function GeneratePhrases({
     try {
       setIsGenerating(true);
       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 unique 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 very short lexical phrases in ${learnLang} and their translations in ${forLang}:\n\n${JSON.stringify(phrases)}\n\nNow, generate ${values.phraseAmount} more unique words or very short lexical phrases and their translations in ${learnLang} on the topic of '${values.phrasesTopic}'. The input may resemble a script or contain dialogue, but do not generate words or very short lexical phrases formatted as scripts or sentences. Focus only on single words or very short lexical phrases. 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} 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 words or very short lexical phrases in ${learnLang} and their translations in ${forLang} on the topic of '${values.phrasesTopic}'. Return the unique words or very 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 input may resemble a script or contain dialogue, but do not interpret or format the input as a script or sentences. Focus only on generating single words or very short lexical phrases. The words or very short lexical phrases should be appropriate for the ${["en-US"].includes(siteLanguage) ? "ACTFL" : "CEFR"} ${difficulty} level. The words or very short lexical phrases should be unique. Ensure the formatting of the JSON response is correct and follows this structure.`;
-      // console.log("prompt: ", prompt);
       const chatGptResponse = await makeChatGptApiRequest({
         model: "gpt-3.5-turbo",
-        prompt
+        promptKey: "generatePhrases",
+        promptVariables: {
+          topicGoal: values.topicGoal,
+          learnLang,
+          forLang,
+          phraseAmount: values.phraseAmount,
+          phrasesTopic: values.phrasesTopic,
+          siteLanguage,
+          difficulty,
+          phraseType,
+          isPhrases,
+          phrases
+        }
       });
       const phrasesArray = extractPhrasesArray(chatGptResponse);
       const parsedPhrases = JSON.parse(phrasesArray);

package/dist/Dialogs/GenerateQuestion/GenerateQuestion.js

@@ -87,10 +87,18 @@ function GenerateQuestion({
     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
+        promptKey: "generateAnswer",
+        promptVariables: {
+          script,
+          actor1: values.actor1,
+          actor2: values.actor2,
+          finalLearnLang: finalLearnLang,
+          finalForLang: finalForLang,
+          questionType,
+          questionLanguage
+        }
       });
       const jsonResponse = extractJsonObject(chatGptResponse);
       const newQuestion = JSON.parse(jsonResponse);

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -181,8 +181,6 @@ function GenerateRoleplayDialog({
       setErrorMessage("");
       let response;
       const roleplayDifficulty = values.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,10 +190,6 @@ 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);
-
-      // Call the API and handle the response as before
       if (usePdfContext) {
         const getAiQueryResponse = await makeCandooAIQuery({
           modelName: "gpt-4",
@@ -218,7 +212,23 @@ function GenerateRoleplayDialog({
       } else {
         let chatGptResponse = await makeChatGptApiRequest({
           model: "gpt-3.5-turbo",
-          prompt: activePrompt
+          promptKey: "generateRoleplay",
+          promptVariables: {
+            learnLang: learnLang,
+            i18nLanguage: i18nLanguage,
+            roleplayDifficulty: t(values.roleplayDifficulty),
+            usePdfContext: usePdfContext,
+            topicGoal: topicGoal,
+            usePhrasesContext: usePhrasesContext,
+            phrases: phrases,
+            questionLang: questionLang,
+            generateQuestions: generateQuestions,
+            actor1: values.actor1,
+            actor2: values.actor2,
+            roleplayTopic: values.roleplayTopic,
+            roleplayLengthNumber: values.roleplayLengthNumber,
+            questionsAmount: values.questionsAmount
+          }
         });
         let isComplete = false;
         while (!isComplete) {
@@ -236,7 +246,6 @@ function GenerateRoleplayDialog({
       }
 
       // Log the full response for debugging
-      // console.log("Full API Response:", response);
 
       const jsonResponse = removeExtraTextFromChatGptResponse(response);
       const roleplayScript = fixMissingComma(jsonResponse);

package/dist/Misc/LanguageSelector/LanguageSelector.js

@@ -21,6 +21,9 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
     margin: theme.spacing(1)
   },
   language: {
+    [theme.breakpoints.down("lg")]: {
+      display: "none"
+    },
     marginTop: "auto",
     marginBottom: "auto",
     marginLeft: theme.spacing(1),
@@ -114,7 +117,7 @@ function LanguageSelector({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {})
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
-      smDown: true,
+      mdDown: true,
       implementation: "js",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: classes.language,

package/dist/hooks/useRecognition.js

@@ -155,11 +155,21 @@ function useRecognition(props = {}) {
   const initRecording = async (gcloudParams, onData, onError) => {
     try {
       await setupAudioContext();
+      const {
+        mediaDevices
+      } = navigator;
+      const [availableMicrophones, activeMicrophone, sampleRate] = await (0, _index.getMicrophoneInfo)(mediaDevices);
+      let sampleRateToUse = sampleRate;
+      if (sampleRate && sampleRate < 8000) {
+        sampleRateToUse = 8000;
+      } else if (sampleRate && sampleRate > 48000) {
+        sampleRateToUse = 48000;
+      }
       const handleSuccess = function (stream) {
         const gcloudConfig = {
           config: {
             encoding: "LINEAR16",
-            sampleRateHertz: 16000,
+            sampleRateHertz: sampleRateToUse || 16000,
             languageCode: gcloudParams.languageCode || "en-US",
             profanityFilter: true,
             enableWordTimeOffsets: false,
@@ -172,7 +182,6 @@ function useRecognition(props = {}) {
           interimResults: gcloudParams.interimResults // If you want interim results, set this to true
         };
         socket.emit("startGoogleCloudStream", gcloudConfig, version); // init socket Google Speech Connection
-
         streamRef.current = stream;
         audioInputRef.current = audioContextRef.current.createMediaStreamSource(stream);
         serverErrorRef.current = null;

package/dist/utils/index.js

@@ -446,7 +446,7 @@ const getMachineInfo = userAgent => {
 exports.getMachineInfo = getMachineInfo;
 const getMicrophoneInfo = async mediaDevices => {
   try {
-    await mediaDevices.getUserMedia({
+    const stream = await mediaDevices.getUserMedia({
       audio: true
     });
     const devices = await mediaDevices.enumerateDevices();
@@ -454,7 +454,13 @@ const getMicrophoneInfo = async mediaDevices => {
     const availableMicrophoneNames = microphones?.filter(device => device.deviceId !== "default").map(device => device.label).join(", ") || "No available microphones detected";
     const activeMicrophone = microphones?.length > 0 ? microphones.find(mic => mic.deviceId === "default") || microphones[0] : null;
     const activeMicrophoneName = activeMicrophone?.label.split("Default - ").pop() || "No active microphone detected";
-    return [availableMicrophoneNames, activeMicrophoneName];
+
+    // Create an AudioContext with the stream from the active microphone
+    const sampleRate = stream.getAudioTracks()[0].getSettings().sampleRate;
+
+    // Stop the audio stream to release the microphone
+    stream.getTracks().forEach(track => track.stop());
+    return [availableMicrophoneNames, activeMicrophoneName, sampleRate];
   } catch (error) {
     console.error("Error accessing the microphone:", error);
   }

package/package.json

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