@nualang/nualang-ui-components 0.1.1353 → 0.1.1354

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -56,6 +56,7 @@ function CreatePhrase({
   validatePhraseRecognition,
   verificationStatus,
   makeChatGptApiRequest,
+  difficulty,
   ...otherProps
 }) {
   const translationInputRef = useRef();
@@ -78,6 +79,7 @@ function CreatePhrase({
   const [definition, setDefinition] = useState("");
   const [definitionList, setDefinitionList] = useState(otherProps.definitions || []);
   const [autoTranslatedText, setAutoTranslatedText] = useState(false);
+  const [autoGeneratedDefinitions, setAutoGeneratedDefinitions] = useState(false);
   const [checkingRecogniton, setCheckingRecogniton] = useState(false);
   const [recognised, setRecognised] = useState(false);
   const [notRecognised, setNotRecognised] = useState(false);
@@ -287,6 +289,39 @@ function CreatePhrase({
       setIsSubmitting(false);
     }
   };
+  const generateDefinitions = async () => {
+    try {
+      setIsSubmitting(true);
+      let chatGptResponse = await makeChatGptApiRequest({
+        model: "gpt-4o",
+        promptKey: "generateDefinitions",
+        promptVariables: {
+          learnLang,
+          forLang,
+          siteLanguage,
+          difficulty,
+          phrases: [{
+            phrase,
+            translations: translationList
+          }],
+          generateDefinitions: true
+        }
+      });
+      const definitions = chatGptResponse?.result?.[0]?.definitions;
+      if (!validateResponse(definitions)) {
+        throw new Error("Invalid AI response");
+      }
+      setAutoGeneratedDefinitions(definitions[0]);
+      setDefinitionList(prevDefinitionList => {
+        const newDefinitions = definitions.filter(text => !prevDefinitionList.includes(text));
+        return [...prevDefinitionList, ...newDefinitions];
+      });
+    } catch (error) {
+      console.error("Error fetching definitions from OpenAI:", error.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
   const handleEditTranslation = (event, index) => {
     const {
       target: {
@@ -320,6 +355,7 @@ function CreatePhrase({
     setDefinitionList([]);
     setSelectedImage(initialSelectedImagestate);
     setAutoTranslatedText("");
+    setAutoGeneratedDefinitions("");
   };
   const removePhraseImage = () => {
     setSelectedImage({
@@ -495,6 +531,13 @@ function CreatePhrase({
           className: classes.alternativeVersionButton,
           startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
           children: t("auto_generate_phrase_translation")
+        }), learnLang !== forLang && /*#__PURE__*/_jsx(DefaultButton, {
+          onClick: generateDefinitions,
+          disabled: !phrase || Array.isArray(definitionList) && definitionList.includes(autoGeneratedDefinitions),
+          size: "sm",
+          className: classes.alternativeVersionButton,
+          startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+          children: t("auto_generate_definitions")
         }), learnLang !== forLang && (import.meta.env.REACT_APP_STAGE === "dev" || window.location.host === "localhost:9009") && /*#__PURE__*/_jsx(Box, {
           sx: {
             display: "inline-flex",

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -1,13 +1,22 @@
 import { useMemo, useEffect, useState, useRef, useCallback } from "react";
-import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, CircularProgress, Button, Checkbox, Paper, Divider, Tooltip, Skeleton, Grid } from "@mui/material";
+import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, CircularProgress, Button, Checkbox, Paper, Divider, Tooltip, Skeleton, Grid, TextField, LinearProgress, Alert } from "@mui/material";
+import { Link } from "react-router";
+import MuiLink from "@mui/material/Link";
 import CloseIcon from "@mui/icons-material/Close";
 import { red, orange, green, grey } from "@mui/material/colors";
 import FeedbackCard from "../../Cards/FeedbackCard/FeedbackCard";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import NualaHeadphonesBackground from "../../img/NualaHeadphonesBackground.svg";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { AutoFixHigh } from "@mui/icons-material";
 import useConfirm from "../../hooks/useConfirm";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
+import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
+import PDFViewer from "../PDFViewer/PDFViewer";
+import level1Rubric from "../PDFViewer/rubrics/level1Rubric.pdf";
+import level2Rubric from "../PDFViewer/rubrics/level2Rubric.pdf";
+import level3Rubric from "../PDFViewer/rubrics/level3Rubric.pdf";
+import level4Rubric from "../PDFViewer/rubrics/level4Rubric.pdf";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function GroupFeedbackDialog({
   open = false,
@@ -44,7 +53,20 @@ export default function GroupFeedbackDialog({
   const [hasReachedBottom, setHasReachedBottom] = useState(false);
   const [isGeneratingAll, setIsGeneratingAll] = useState(false);
   const [isGeneratingIndividual, setIsGeneratingIndividual] = useState(false);
+  const [customFeedbackOpen, setCustomFeedbackOpen] = useState(false);
+  const [customFeedbackText, setCustomFeedbackText] = useState("");
+  const [openPDF, setOpenPDF] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
   const isAnyGenerating = isGeneratingAll || isGeneratingIndividual;
+  const pendingGenerateRef = useRef(null);
+  const rubricMap = {
+    1: level1Rubric,
+    2: level2Rubric,
+    3: level3Rubric,
+    4: level4Rubric
+  };
+  const pdfUrl = rubricMap[selectedRecording?.level] || level1Rubric;
   const [confirm] = useConfirm(t);
   const bottomRefCallback = useCallback(node => {
     if (node) {
@@ -59,6 +81,12 @@ export default function GroupFeedbackDialog({
       node._observer = observer;
     }
   }, []);
+  const handleOpenPDF = () => {
+    setOpenPDF(true);
+  };
+  const handleClosePDF = () => {
+    setOpenPDF(false);
+  };
   useEffect(() => {
     // dialog is shared between discussions, so reset when teacher selects another discussion
     setGenerateAllUsed(false);
@@ -69,7 +97,42 @@ export default function GroupFeedbackDialog({
     setCanSubmit({});
     setHasReachedBottom(false);
     setIsGeneratingAll(false);
+    pendingGenerateRef.current = null;
   }, [groupedId]);
+  const openCustomPromptForAll = () => {
+    pendingGenerateRef.current = {
+      type: "all"
+    };
+    setCustomFeedbackText("");
+    setCustomFeedbackOpen(true);
+  };
+  const openCustomPromptForSingle = discussionData => {
+    pendingGenerateRef.current = {
+      type: "single",
+      payload: discussionData
+    };
+    setCustomFeedbackText("");
+    setCustomFeedbackOpen(true);
+  };
+  const handleCustomPromptCancel = () => {
+    setCustomFeedbackOpen(false);
+    pendingGenerateRef.current = null;
+    setCustomFeedbackText("");
+  };
+  const handleCustomPromptContinue = async () => {
+    try {
+      const pending = pendingGenerateRef.current;
+      pendingGenerateRef.current = null;
+      if (!pending) return;
+      if (pending.type === "all") {
+        await handleGenerateFeedbackForAll();
+      } else if (pending.type === "single") {
+        await handleGenerateFeedback(pending.payload);
+      }
+    } finally {
+      setCustomFeedbackOpen(false);
+    }
+  };
   useEffect(() => {
     if (pendingSubmissions === 0 && submitTrigger !== null) {
       setCheckedSubmissions({});
@@ -137,7 +200,9 @@ export default function GroupFeedbackDialog({
     }).filter(member => member.name !== "Unknown");
   };
   const handleGenerateFeedback = async discussionData => {
-    if (handleBatchGradeConversations) {
+    if (!handleBatchGradeConversations) return;
+    setIsGeneratingIndividual(true);
+    try {
       const joinedMembersWithNames = getJoinedMembersNames(discussionData.joinedMembers || [], userData);
       await handleBatchGradeConversations([{
         meetingId: discussionData.meetingId || discussionData.meetingID,
@@ -148,8 +213,11 @@ export default function GroupFeedbackDialog({
         meetingPrompt: discussionData.meetingPrompt,
         learnLang: learnLang,
         joinedMembers: discussionData.joinedMembers || [],
-        joinedMembersNames: joinedMembersWithNames
+        joinedMembersNames: joinedMembersWithNames,
+        customFeedback: customFeedbackText
       }]);
+    } finally {
+      setIsGeneratingIndividual(false);
     }
   };
   const handleGenerateFeedbackForAll = async () => {
@@ -171,7 +239,8 @@ export default function GroupFeedbackDialog({
         meetingPrompt: discussion.meetingPrompt || submissionForThisDiscussion.meetingPrompt,
         learnLang: learnLang,
         joinedMembers: submissionForThisDiscussion.joinedMembers || [],
-        joinedMembersNames: joinedMembersWithNames
+        joinedMembersNames: joinedMembersWithNames,
+        customFeedback: customFeedbackText
       };
     });
     if (conversationsToGrade.length > 0 && handleBatchGradeConversations) {
@@ -478,7 +547,7 @@ export default function GroupFeedbackDialog({
               color: "secondary",
               endIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
               disabled: selectedCount === 0 || isGeneratingAll,
-              onClick: handleGenerateFeedbackForAll,
+              onClick: openCustomPromptForAll,
               sx: {
                 fontWeight: 600
               },
@@ -528,7 +597,7 @@ export default function GroupFeedbackDialog({
               hasSubmission: hasSubmission,
               aiGrade: aiGrade[discussionData.meetingId || discussionData.meetingID] || {},
               existingFeedback: feedbackByMeetingId[feedbackMeetingId] || {},
-              onGenerateFeedback: () => handleGenerateFeedback(discussionData),
+              onGenerateFeedback: () => openCustomPromptForSingle(discussionData),
               onSubmitFeedback: handleSubmitFeedback,
               setSelectedRecording: setSelectedRecording,
               selectedRecording: selectedRecording,
@@ -556,53 +625,83 @@ export default function GroupFeedbackDialog({
           })]
         })
       })]
-    }), /*#__PURE__*/_jsx(Dialog, {
-      open: isAnyGenerating,
+    }), /*#__PURE__*/_jsx(ResponsiveDialog, {
+      open: customFeedbackOpen,
+      handleClose: handleCustomPromptCancel,
+      handleSubmit: handleCustomPromptContinue,
+      submitText: t("generate_feedback"),
       maxWidth: "sm",
-      fullWidth: true,
-      PaperProps: {
-        sx: {
-          borderRadius: 3,
-          overflow: "visible"
-        }
-      },
-      children: /*#__PURE__*/_jsx(DialogContent, {
-        sx: {
-          p: 4
-        },
-        children: /*#__PURE__*/_jsx(Grid, {
-          container: true,
+      dialogTitle: isAnyGenerating ? t("generating_feedback") : t("generate_feedback"),
+      isSubmitDisabled: isAnyGenerating,
+      isExperimentalFeature: true,
+      startIcon: /*#__PURE__*/_jsx(AutoFixHigh, {}),
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Grid, {
+          textAlign: "center",
+          sx: {
+            ...(!isAnyGenerating && {
+              display: "none"
+            })
+          },
+          mx: 2,
+          size: 12,
+          children: /*#__PURE__*/_jsx(NualaCreating, {})
+        }), /*#__PURE__*/_jsx(Grid, {
           sx: {
-            width: "100%"
+            ...(!isAnyGenerating && {
+              display: "none"
+            })
           },
-          children: /*#__PURE__*/_jsxs(Grid, {
+          mt: 2,
+          size: 12,
+          children: /*#__PURE__*/_jsx(LinearProgress, {})
+        }), !isAnyGenerating && /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx(Grid, {
             size: 12,
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              gap: 3,
-              py: 2
+            children: /*#__PURE__*/_jsxs(Alert, {
+              severity: "info",
+              children: [t("experimental_feature_desc"), " - ", " ", /*#__PURE__*/_jsxs(Link, {
+                to: "/contact",
+                children: [t("contact_form"), "."]
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            size: {
+              xs: 12
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h5",
-              sx: {
-                fontWeight: 600,
-                color: "text.primary"
-              },
-              children: t("generating_feedback")
-            }), /*#__PURE__*/_jsx(Box, {
-              sx: {
-                maxWidth: 500,
-                width: "100%"
-              },
-              children: /*#__PURE__*/_jsx(NualaCreating, {})
-            })]
-          })
-        })
+            children: /*#__PURE__*/_jsxs(Typography, {
+              variant: "body2",
+              children: [t("generate_feedback_view_the"), " ", /*#__PURE__*/_jsx(MuiLink, {
+                component: "button",
+                variant: "body2",
+                onClick: handleOpenPDF,
+                children: t("generate_feedback_rubric_name")
+              }), ", ", t("generate_feedback_rubric_desc")]
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            size: 12,
+            children: /*#__PURE__*/_jsx(TextField, {
+              value: customFeedbackText,
+              onChange: e => setCustomFeedbackText(e.target.value),
+              placeholder: t("custom_feedback_placeholder"),
+              multiline: true,
+              minRows: 4,
+              fullWidth: true
+            })
+          })]
+        })]
       })
+    }), /*#__PURE__*/_jsx(PDFViewer, {
+      open: openPDF,
+      handleClose: handleClosePDF,
+      pdfUrl: pdfUrl,
+      pageNumber: pageNumber,
+      setPageNumber: setPageNumber,
+      scale: scale,
+      setScale: setScale,
+      t: t
     })]
   });
 }

package/dist/Dialogs/GroupedFeedbackDialog/package.json

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

package/dist/Editors/PhraseList/PhraseList.js

@@ -86,7 +86,6 @@ function PhraseList({
   isCreatePhraseDialogOpen,
   setIsCreatePhraseDialogOpen,
   handleAddPhrase,
-  topicName,
   validatePhraseRecognition,
   difficulty,
   topicGoal,
@@ -208,39 +207,44 @@ function PhraseList({
             })]
           })
         })]
-      }), tabValue === 0 ? /*#__PURE__*/_jsx(PhrasesEditor, {
-        t: t,
-        phrases: phrases,
-        isCreator: isCreator,
-        isMember: isMember,
-        handleTranslate: handleTranslate,
-        handleUpdatePhrase: updatePhrase,
-        handleRemovePhrase: handleRemovePhrase,
-        uploadAudio: uploadAudio,
-        handleSpeak: handleSpeak,
-        updatePhrases: updatePhrases,
-        learnLang: learnLang,
-        forLang: forLang,
-        voices: voices,
-        userAttributes: userAttributes,
-        disablePadding: true,
-        forLangCharacters: forLangCharacters,
-        learnLangCharacters: learnLangCharacters,
-        fileSizeLimit: fileSizeLimit,
-        handleSpreadsheetSaveChanges: handleSpreadsheetSaveChanges,
-        isUploadPhrasesDialogOpen: isUploadPhrasesDialogOpen,
-        setIsUploadPhrasesDialogOpen: setIsUploadPhrasesDialogOpen,
-        isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
-        setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
-        handleAddPhrase: handleAddPhrase,
-        topicName: topicName,
-        validatePhraseRecognition: validatePhraseRecognition,
-        siteLanguage: siteLanguage,
-        makeChatGptApiRequest: makeChatGptApiRequest,
-        difficulty: difficulty,
-        subscription: subscription,
-        topicGoal: topicGoal,
-        verificationStatus: verificationStatus
+      }), tabValue === 0 ? /*#__PURE__*/_jsx(Box, {
+        sx: {
+          minHeight: '100vh'
+        },
+        children: /*#__PURE__*/_jsx(PhrasesEditor, {
+          t: t,
+          phrases: phrases,
+          isCreator: isCreator,
+          isMember: isMember,
+          handleTranslate: handleTranslate,
+          handleUpdatePhrase: updatePhrase,
+          handleRemovePhrase: handleRemovePhrase,
+          uploadAudio: uploadAudio,
+          handleSpeak: handleSpeak,
+          updatePhrases: updatePhrases,
+          learnLang: learnLang,
+          forLang: forLang,
+          voices: voices,
+          userAttributes: userAttributes,
+          disablePadding: true,
+          forLangCharacters: forLangCharacters,
+          learnLangCharacters: learnLangCharacters,
+          fileSizeLimit: fileSizeLimit,
+          handleSpreadsheetSaveChanges: handleSpreadsheetSaveChanges,
+          isUploadPhrasesDialogOpen: isUploadPhrasesDialogOpen,
+          setIsUploadPhrasesDialogOpen: setIsUploadPhrasesDialogOpen,
+          isCreatePhraseDialogOpen: isCreatePhraseDialogOpen,
+          setIsCreatePhraseDialogOpen: setIsCreatePhraseDialogOpen,
+          handleAddPhrase: handleAddPhrase,
+          validatePhraseRecognition: validatePhraseRecognition,
+          siteLanguage: siteLanguage,
+          makeChatGptApiRequest: makeChatGptApiRequest,
+          difficulty: difficulty,
+          subscription: subscription,
+          topicGoal: topicGoal,
+          verificationStatus: verificationStatus,
+          phraseListName: initialValues.phraseListName
+        })
       }) : null, tabValue === 1 ? /*#__PURE__*/_jsx(Box, {
         className: hidden ? classes.paneFull : classes.pane,
         children: /*#__PURE__*/_jsx(UpdatePhraseList, {

package/dist/Editors/Phrases/Phrases.js

@@ -20,6 +20,7 @@ import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { Parser } from "@json2csv/plainjs";
 import GeneratePhrases from "../../Dialogs/GeneratePhrases/GeneratePhrases";
 import EmptyPhraseListImage from "../../img/course.svg";
+import { capitalize } from "../../utils/index";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Modes = {
   NORMAL: "normal",
@@ -70,8 +71,8 @@ const useStyles = makeStyles()(theme => ({
     width: "100%",
     maxWidth: EditorMaxWidth,
     margin: "0 auto",
-    backgroundColor: "#fff",
-    minHeight: "100vh"
+    backgroundColor: theme.palette.background.paper,
+    minHeight: "100%"
   },
   placeholder: {
     minHeight: "100vh",
@@ -230,7 +231,9 @@ const CreatorComponent = ({
 });
 function EmptyPhraseList({
   t = text => text,
-  placeholderImageUrl = EmptyPhraseListImage
+  placeholderImageUrl = EmptyPhraseListImage,
+  siteLanguage,
+  learnLang
 }) {
   const {
     classes
@@ -252,7 +255,9 @@ function EmptyPhraseList({
         component: "h2",
         variant: "subtitle1",
         gutterBottom: true,
-        children: t("add_phrase_desc")
+        children: t("add_phrase_desc", {
+          language: ["en", "en-US", "ga", "de"].includes(siteLanguage) ? capitalize(t(learnLang.toLowerCase())) : t(learnLang.toLowerCase()).toLowerCase()
+        })
       })]
     })
   });
@@ -285,7 +290,7 @@ function PhrasesEditor(props) {
     handleTranslate,
     handleAddPhrase,
     fileSizeLimit,
-    topicName = "Unknown",
+    phraseListName = "Unknown",
     validatePhraseRecognition,
     siteLanguage,
     makeChatGptApiRequest,
@@ -500,7 +505,7 @@ function PhrasesEditor(props) {
         type: "text/plain"
       });
       element.href = URL.createObjectURL(file);
-      element.download = `${topicName}-${new Date().toLocaleDateString()}.csv`;
+      element.download = `${phraseListName}-${new Date().toLocaleDateString()}.csv`;
       document.body.appendChild(element);
       element.click();
       // Cleanup
@@ -659,7 +664,9 @@ function PhrasesEditor(props) {
       makeChatGptApiRequest: makeChatGptApiRequest,
       difficulty: difficulty
     }) : /*#__PURE__*/_jsx(EmptyPhraseList, {
-      t: t
+      t: t,
+      siteLanguage: siteLanguage,
+      learnLang: learnLang
     })), /*#__PURE__*/_jsx(CreatePhraseDialog, {
       t: t,
       learnLang: learnLang,
@@ -674,7 +681,8 @@ function PhrasesEditor(props) {
       validatePhraseRecognition: validatePhraseRecognition,
       siteLanguage: siteLanguage,
       verificationStatus: verificationStatus,
-      makeChatGptApiRequest: makeChatGptApiRequest
+      makeChatGptApiRequest: makeChatGptApiRequest,
+      difficulty: difficulty
     }), /*#__PURE__*/_jsx(UploadPhrasesDialog, {
       t: t,
       learnLang: learnLang,
@@ -698,7 +706,7 @@ function PhrasesEditor(props) {
       currentPhrases: phrases,
       makeChatGptApiRequest: makeChatGptApiRequest,
       initialValues: {
-        phrasesTopic: topicName,
+        phrasesTopic: phraseListName,
         phraseAmount: 8,
         topicGoal: topicGoal
       },
@@ -733,7 +741,7 @@ PhrasesEditor.propTypes = {
   updatePhrases: PropTypes.func,
   voices: PropTypes.array,
   userAttributes: PropTypes.object,
-  topicName: PropTypes.string,
+  phraseListName: PropTypes.string,
   validatePhraseRecognition: PropTypes.func,
   siteLanguage: PropTypes.string,
   makeChatGptApiRequest: PropTypes.func