@nualang/nualang-ui-components 0.1.1319 → 0.1.1320

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Card, CardContent, CardActions, Typography, Avatar, Box, Button, TextField, Chip, Grid, IconButton, Tooltip } from "@mui/material";
+import { Card, CardContent, CardActions, Typography, Avatar, Box, Button, TextField, Chip, Grid, IconButton, Tooltip, Checkbox } from "@mui/material";
 import { grey, green } from "@mui/material/colors";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
@@ -8,10 +8,10 @@ import { Formik } from "formik";
 import * as Yup from "yup";
 import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
 import PDFViewer from "../../Dialogs/PDFViewer/PDFViewer";
-import level1Rubric from '../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf';
-import level2Rubric from '../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf';
-import level3Rubric from '../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf';
-import level4Rubric from '../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf';
+import level1Rubric from "../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf";
+import level2Rubric from "../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf";
+import level3Rubric from "../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf";
+import level4Rubric from "../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -27,11 +27,19 @@ export default function FeedbackCard({
   s3Url = "",
   conversation = {},
   existingFeedback = {},
+  generateAllUsed = false,
+  setGenerateAllUsed = () => {},
+  checkedSubmissions = {},
+  setCheckedSubmissions = () => {},
+  submitTrigger = null,
+  onSubmissionComplete = () => {},
   playerRef = {
     current: null
   },
   goToTimestamp = () => {},
-  startTimes = {}
+  startTimes = {},
+  canSubmitAll = {},
+  setCanSubmit = () => {}
 }) {
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [hasBeenEdited, setHasBeenEdited] = useState(false);
@@ -42,6 +50,12 @@ export default function FeedbackCard({
   const [openPDF, setOpenPDF] = useState(false);
   const [pageNumber, setPageNumber] = useState(1);
   const [scale, setScale] = useState(1);
+  const handleChangeCheckbox = event => {
+    setCheckedSubmissions({
+      ...checkedSubmissions,
+      [discussionData.meetingId || discussionData.meetingID || discussionData.extMeetingId]: event.target.checked
+    });
+  };
   const rubricMap = {
     1: level1Rubric,
     2: level2Rubric,
@@ -106,12 +120,12 @@ export default function FeedbackCard({
       initialValuesRef.current = initialVals;
       setIsSubmitted(false);
     }
-  }, [existingFeedback, hasSubmission, selectedMembers, attendedMembers, notAttendedMembers, t]);
+  }, [existingFeedback, hasSubmission, selectedMembers, t]);
   useEffect(() => {
     const formik = formikRef.current;
     if (!formik) return;
     if (!hasSubmission || !aiGrade || Object.keys(aiGrade).length === 0) return;
-    if (!aiJustGenerated) return;
+    if (!aiJustGenerated && !generateAllUsed) return;
     userData.forEach(student => {
       const keyVariants = [student.username, `${student.username}Student`, student.username?.replace(/\s+/g, "")];
       const aiData = keyVariants.map(k => aiGrade?.[k]).find(v => v && typeof v === "object") || null;
@@ -122,7 +136,27 @@ export default function FeedbackCard({
     setHasBeenEdited(true);
     setIsSubmitted(false);
     setAiJustGenerated(false);
-  }, [aiGrade, hasSubmission, userData, aiJustGenerated]);
+    setGenerateAllUsed(false);
+  }, [aiGrade, hasSubmission, userData, aiJustGenerated, generateAllUsed]);
+  useEffect(() => {
+    if (submitTrigger && checkedSubmissions[discussionData.meetingId]) {
+      const formik = formikRef.current;
+      if (formik) {
+        const submitAndNotify = async () => {
+          try {
+            await formik.submitForm();
+          } catch (error) {
+            console.error("Error during form submission:", error);
+          } finally {
+            onSubmissionComplete();
+          }
+        };
+        submitAndNotify();
+      } else {
+        onSubmissionComplete();
+      }
+    }
+  }, [submitTrigger]);
   const handleGenerateAI = async () => {
     setAiJustGenerated(true);
     await onGenerateFeedback(discussionData);
@@ -133,10 +167,11 @@ export default function FeedbackCard({
   const handleClosePDF = () => {
     setOpenPDF(false);
   };
+  const initialValues = getInitialValues();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Formik, {
       innerRef: formikRef,
-      initialValues: getInitialValues(),
+      initialValues: initialValues,
       validationSchema: getFeedbackValidationSchema(attendedMembers.map(m => m.memberId)),
       onSubmit: async (values, {
         setSubmitting
@@ -189,6 +224,13 @@ export default function FeedbackCard({
           });
         };
         const canSubmit = hasSubmission && !isSubmitting && isFormValid() && (hasChanges() || hasBeenEdited) && !isSubmitted;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+          setCanSubmit({
+            ...canSubmitAll,
+            [discussionData.meetingId || discussionData.meetingID]: canSubmit
+          });
+        }, [canSubmit]);
         return /*#__PURE__*/_jsx("form", {
           onSubmit: handleSubmit,
           children: /*#__PURE__*/_jsxs(Card, {
@@ -196,7 +238,8 @@ export default function FeedbackCard({
               mb: 3,
               borderRadius: 3,
               boxShadow: 3,
-              overflow: "hidden"
+              overflow: "hidden",
+              backgroundColor: "background.paper"
             },
             children: [aiJustGenerated ? /*#__PURE__*/_jsxs(Grid, {
               sx: {
@@ -215,7 +258,7 @@ export default function FeedbackCard({
                 children: t("generating_feedback")
               }), /*#__PURE__*/_jsx(NualaCreating, {})]
             }) : /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Box, {
+              children: [/*#__PURE__*/_jsxs(Box, {
                 sx: {
                   px: 3,
                   pt: 2,
@@ -223,7 +266,11 @@ export default function FeedbackCard({
                   fontWeight: 600,
                   color: "text.secondary"
                 },
-                children: /*#__PURE__*/_jsxs(Grid, {
+                children: [/*#__PURE__*/_jsx(Checkbox, {
+                  checked: checkedSubmissions[discussionData.meetingId || discussionData.meetingID || discussionData.extMeetingId] || false,
+                  disabled: !hasSubmission,
+                  onChange: handleChangeCheckbox
+                }), /*#__PURE__*/_jsxs(Grid, {
                   container: true,
                   alignItems: "center",
                   spacing: 3,
@@ -261,7 +308,7 @@ export default function FeedbackCard({
                       })]
                     })
                   })]
-                })
+                })]
               }), /*#__PURE__*/_jsx(CardContent, {
                 sx: {
                   px: 3,

package/dist/Cards/ScheduleCard/ScheduleCard.js

@@ -62,7 +62,6 @@ export default function ScheduleCard({
             children: scheduleListData?.meetingTopic
           }), /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
-            color: "text.secondary",
             sx: {
               ml: 1.5,
               fontWeight: 500

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -422,7 +422,7 @@ function CreatePhrase({
         disabled: !phrase || Array.isArray(translationList) && translationList.includes(autoTranslatedText),
         size: "sm",
         className: classes.alternativeVersionButton,
-        endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+        startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
         children: t("auto_generate_phrase_translation")
       }), learnLang !== forLang && (import.meta.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009") && /*#__PURE__*/_jsx(Box, {
         sx: {

package/dist/Dialogs/FeedbackDialog/FeedbackDialog.js

@@ -18,7 +18,7 @@ export default function CreateFeedbackDialog({
   handleSubmit = () => {},
   attendeesData = [],
   data = {},
-  handleGradeConversation = () => {},
+  handleBatchGradeConversations = () => {},
   aiGrade = "",
   conversation = {},
   t = text => text,
@@ -87,7 +87,7 @@ export default function CreateFeedbackDialog({
         loading: loading,
         saveTranscript: saveTranscript,
         conversation: conversation,
-        handleGradeConversation: handleGradeConversation,
+        handleBatchGradeConversations: handleBatchGradeConversations,
         aiGrade: aiGrade,
         attendeesData: attendeesData,
         handleClosefeedbackForm: handleClosefeedbackForm,
@@ -116,7 +116,7 @@ CreateFeedbackDialog.propTypes = {
   attendeesData: PropTypes.array,
   t: PropTypes.func,
   data: PropTypes.object,
-  handleGradeConversation: PropTypes.func,
+  handleBatchGradeConversations: PropTypes.func,
   aiGrade: PropTypes.string,
   conversation: PropTypes.object,
   loading: PropTypes.bool

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import InputHelper from "../../Forms/InputHelper/InputHelper";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function validateResponse(response, template) {
   if (!Array.isArray(response)) {
@@ -199,6 +200,8 @@ function GenerateBotDialog({
     handleClose: handleCloseDialog,
     handleSubmit: handleSubmit,
     submitText: t("generate_bot"),
+    startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+    isGenerating: true,
     dialogTitle: isBotGenerating ? t("generating_bot") : t("generate_bot"),
     isSubmitDisabled: !values.botTopic && !usePhrasesContext || isBotGenerating,
     children: /*#__PURE__*/_jsxs(Grid, {

package/dist/Dialogs/GenerateDiscussion/GenerateDiscussion.js

@@ -6,6 +6,9 @@ import { Link } from "react-router-dom";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import InputHelper from "../../Forms/InputHelper/InputHelper";
+import TopicSelector from "../../Misc/DiscussionTopicSelector/TopicSelector";
+import { rivescriptToJson } from "../../utils/index";
+import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function GenerateDiscussionDialog({
   t = text => text,
@@ -17,20 +20,67 @@ function GenerateDiscussionDialog({
   learnLang,
   level,
   siteLanguage,
-  meetingTopic
+  meetingTopic,
+  courses,
+  getCourseSections,
+  courseSectionTopicId,
+  createDiscussion,
+  handleChange,
+  setMeetingTopic
 }) {
   const [isGenerating, setIsGenerating] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
   const [discussionTopic, setDiscussionTopic] = useState(meetingTopic);
   const [topicGoal, setTopicGoal] = useState("");
   const [promptLanguage, setPromptLanguage] = useState(forLang);
+  const [selectedTopic, setSelectedTopic] = useState(null);
+  const [selectedCourseSectionTopicId, setSelectedCourseSectionTopicId] = useState(null);
+  const [isAutoSelected, setIsAutoSelected] = useState(false);
+  const [hasAutoUpdated, setHasAutoUpdated] = useState(false);
+  const [localTopicName, setLocalTopicName] = useState("");
   useEffect(() => {
-    setDiscussionTopic(meetingTopic || "");
-  }, [meetingTopic]);
+    if (isGenerateDiscussionDialogOpen) {
+      setIsAutoSelected(false);
+      setHasAutoUpdated(false);
+    }
+  }, [isGenerateDiscussionDialogOpen]);
+  useEffect(() => {
+    if (!hasAutoUpdated) {
+      setDiscussionTopic(meetingTopic || "");
+    }
+  }, [meetingTopic, hasAutoUpdated]);
+  const extractQuizQuestions = parsedBotJson => {
+    const variables = parsedBotJson?.begin?.var;
+    if (!variables) {
+      return [];
+    }
+    const questionsArray = Object.entries(variables).filter(([key, value]) => (key.startsWith("question") || key.startsWith("text")) && !Number.isNaN(parseInt(key.substring(key.startsWith("question") ? 8 : 4))) && typeof value === "string" && value.trim() !== "").sort(([keyA], [keyB]) => {
+      const prefixA = keyA.startsWith("question") ? "question" : "text";
+      const prefixB = keyB.startsWith("question") ? "question" : "text";
+      const numA = parseInt(keyA.replace(prefixA, "")) || 0;
+      const numB = parseInt(keyB.replace(prefixB, "")) || 0;
+      return numA - numB;
+    }).map(([, value]) => value);
+    return questionsArray;
+  };
   const handleGenerateDiscussion = async () => {
     try {
       setIsGenerating(true);
       setErrorMessage("");
+      const phrasesText = selectedTopic?.phrases?.map(p => p.phrase) || [];
+      const roleplayScripts = selectedTopic?.roleplays?.map(r => r.script) || [];
+      const botRiveScripts = selectedTopic?.bots?.map(b => b.riveFile) || [];
+      const questionsArrays = botRiveScripts.map(riveFile => {
+        try {
+          const jsonBot = rivescriptToJson(riveFile);
+          return extractQuizQuestions(jsonBot);
+        } catch (e) {
+          console.error("Error parsing RiveScript file:", e);
+          return [];
+        }
+      });
+      const allDiscussionQuestions = questionsArrays.flat();
+      const uniqueQuestions = [...new Set(allDiscussionQuestions)];
       const response = await makeChatGptApiRequest({
         model: "gpt-4o",
         promptKey: "generateDiscussion",
@@ -40,11 +90,19 @@ function GenerateDiscussionDialog({
           promptLanguage,
           siteLanguage,
           level: level || 1,
-          learnLang
+          learnLang,
+          phrases: phrasesText,
+          scenarios: roleplayScripts,
+          bots: uniqueQuestions
+        }
+      });
+      handleChange({
+        target: {
+          name: "courseSectionTopicId",
+          value: selectedCourseSectionTopicId
         }
       });
-      const generatedData = response?.result || "";
-      setDiscussionPrompt(generatedData);
+      setDiscussionPrompt(response?.result || "");
       setIsGenerating(false);
       handleClose();
     } catch (error) {
@@ -53,11 +111,37 @@ function GenerateDiscussionDialog({
       setErrorMessage(t("error_generating_discussion"));
     }
   };
+  const handleTopicSelect = (topic, {
+    cstId
+  }) => {
+    setSelectedCourseSectionTopicId(cstId);
+    setTopicGoal(topic.topicGoal || "");
+    setSelectedTopic(topic);
+    if (cstId === courseSectionTopicId && !isAutoSelected) {
+      const topicName = topic?.topicName || "";
+      setLocalTopicName(topicName);
+      setIsAutoSelected(true);
+      setHasAutoUpdated(true);
+      setDiscussionTopic(topicName);
+      setMeetingTopic(topicName);
+    }
+  };
+  const handleDiscussionTopicChange = e => {
+    const newValue = e.target.value;
+    setDiscussionTopic(newValue);
+  };
+  useEffect(() => {
+    if (localTopicName && !meetingTopic && hasAutoUpdated) {
+      setMeetingTopic(localTopicName);
+    }
+  }, [meetingTopic, localTopicName, hasAutoUpdated]);
   return /*#__PURE__*/_jsx(ResponsiveDialog, {
     open: isGenerateDiscussionDialogOpen,
     handleClose: handleClose,
     handleSubmit: handleGenerateDiscussion,
     submitText: t("generate_discussion"),
+    startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+    isGenerating: true,
     dialogTitle: isGenerating ? t("generating_discussion") : t("generate_discussion"),
     isSubmitDisabled: !discussionTopic || isGenerating,
     children: /*#__PURE__*/_jsxs(Grid, {
@@ -106,9 +190,21 @@ function GenerateDiscussionDialog({
             variant: "outlined",
             fullWidth: true,
             required: true,
-            onChange: e => setDiscussionTopic(e.target.value),
+            onChange: handleDiscussionTopicChange,
             multiline: true
           })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          marginTop: "8px",
+          children: /*#__PURE__*/_jsx(TopicSelector, {
+            courses: courses,
+            getCourseSections: getCourseSections,
+            t: t,
+            onTopicSelect: handleTopicSelect,
+            selectedTopicId: selectedCourseSectionTopicId,
+            createDiscussion: createDiscussion,
+            courseSectionTopicId: courseSectionTopicId
+          })
         }), /*#__PURE__*/_jsx(Grid, {
           size: 12,
           children: /*#__PURE__*/_jsx(TextField, {

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -330,6 +330,8 @@ function GenerateRoleplayDialog({
     submitText: autoSelect ? t("generate_roleplay") : t("select_roleplay"),
     dialogTitle: isRoleplayGenerating ? t("generating_roleplay") : t("generate_roleplay"),
     isSubmitDisabled: isSubmitDisabled,
+    startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+    isGenerating: true,
     children: [/*#__PURE__*/_jsxs(Grid, {
       container: true,
       sx: {