@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/GenerateDiscussion/GenerateDiscussion.js

@@ -1,275 +0,0 @@
-import { useState, useEffect } from "react";
-import { Grid, Typography, TextField, InputAdornment, Tooltip, Alert, LinearProgress, MenuItem } from "@mui/material";
-import InfoIcon from "@mui/icons-material/Info";
-import { Link } from "react-router";
-// components
-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,
-  isGenerateDiscussionDialogOpen,
-  handleClose,
-  makeChatGptApiRequest,
-  setDiscussionPrompt,
-  forLang,
-  learnLang,
-  level,
-  siteLanguage,
-  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(() => {
-    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",
-        promptVariables: {
-          discussionTopic,
-          topicGoal,
-          promptLanguage,
-          siteLanguage,
-          level: level || 1,
-          learnLang,
-          phrases: phrasesText,
-          scenarios: roleplayScripts,
-          bots: uniqueQuestions
-        }
-      });
-      handleChange({
-        target: {
-          name: "courseSectionTopicId",
-          value: selectedCourseSectionTopicId
-        }
-      });
-      setDiscussionPrompt(response?.result || "");
-      setIsGenerating(false);
-      handleClose();
-    } catch (error) {
-      console.error(error);
-      setIsGenerating(false);
-      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, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      children: [isGenerating && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          sx: {
-            textAlign: "center",
-            mx: 2
-          },
-          children: /*#__PURE__*/_jsx(NualaCreating, {})
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          sx: {
-            mt: 2
-          },
-          children: /*#__PURE__*/_jsx(LinearProgress, {})
-        })]
-      }), !isGenerating && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          sx: {
-            fontSize: 14,
-            opacity: 0.8,
-            marginBottom: 1
-          },
-          children: t("required_field")
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsxs(Alert, {
-            severity: "info",
-            children: [t("experimental_feature_desc"), " \u2013", " ", /*#__PURE__*/_jsxs(Link, {
-              to: "/contact",
-              children: [t("contact_form"), "."]
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(InputHelper, {
-            t: t,
-            id: "discussionTopic",
-            name: "discussionTopic",
-            label: t("discussion_topic"),
-            value: discussionTopic,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            onChange: handleDiscussionTopicChange,
-            multiline: true
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          sx: {
-            mt: 1
-          },
-          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, {
-            id: "topicGoal",
-            name: "topicGoal",
-            label: t("topic_goal"),
-            placeholder: t("topic_goal_placeholder"),
-            value: topicGoal,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            multiline: true,
-            fullWidth: true,
-            onChange: e => setTopicGoal(e.target.value),
-            slotProps: {
-              input: {
-                endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-                  position: "end",
-                  children: /*#__PURE__*/_jsx(Tooltip, {
-                    title: t("topic_goal_info_text"),
-                    placement: "top",
-                    children: /*#__PURE__*/_jsx(InfoIcon, {
-                      fontSize: "small",
-                      style: {
-                        color: "lightgrey"
-                      }
-                    })
-                  })
-                })
-              }
-            }
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsxs(TextField, {
-            select: true,
-            fullWidth: true,
-            margin: "normal",
-            label: t("discuss_prompt_language"),
-            value: promptLanguage,
-            onChange: e => setPromptLanguage(e.target.value),
-            variant: "outlined",
-            children: [/*#__PURE__*/_jsx(MenuItem, {
-              value: forLang,
-              children: t(forLang)
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              value: learnLang,
-              children: t(learnLang)
-            })]
-          })
-        })]
-      }), errorMessage && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        children: /*#__PURE__*/_jsx(Alert, {
-          severity: "warning",
-          children: errorMessage
-        })
-      })]
-    })
-  });
-}
-export default GenerateDiscussionDialog;

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -1,379 +0,0 @@
-import { useState, useEffect } from "react";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { AutoFixHigh } from "@mui/icons-material";
-import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, useMediaQuery, FormControlLabel, Switch, Box, List } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import { Link } from "react-router";
-import InfoIcon from "@mui/icons-material/Info";
-import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import PhraseDisplay from "../../Misc/PhraseDisplay/PhraseDisplay";
-import { makeStyles } from "tss-react/mui";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  phraseText: {
-    width: "80%",
-    wordBreak: "break-word",
-    overflowWrap: "break-word"
-  },
-  phraseTextSmall: {
-    width: "60%",
-    wordBreak: "break-word",
-    overflowWrap: "break-word"
-  }
-}));
-function Phrase({
-  alternativeVersions,
-  translations,
-  definitions,
-  phrase,
-  t
-}) {
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  return /*#__PURE__*/_jsx(List, {
-    dense: true,
-    disablePadding: true,
-    children: /*#__PURE__*/_jsx(ListItem, {
-      "data-cy": "phrase-list-item",
-      divider: true,
-      sx: {
-        flexDirection: "column",
-        alignItems: "flex-start",
-        py: 2
-      },
-      children: /*#__PURE__*/_jsx(Box, {
-        className: isLargeScreen ? classes.phraseText : classes.phraseTextSmall,
-        children: /*#__PURE__*/_jsx(PhraseDisplay, {
-          phrase: phrase,
-          translations: translations,
-          definitions: definitions,
-          alternativeVersions: alternativeVersions,
-          t: t,
-          variant: "body2",
-          showIcons: true,
-          showImage: false
-        })
-      })
-    })
-  });
-}
-function GeneratePhrases({
-  t,
-  open,
-  handleClose,
-  learnLang,
-  forLang,
-  handleAppendPhrases,
-  currentPhrases,
-  makeChatGptApiRequest,
-  initialValues,
-  siteLanguage,
-  difficulty
-}) {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [values, setValues] = useState(initialValues);
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [phraseType, setPhraseType] = useState("words");
-  const [generatedPhrases, setGeneratedPhrases] = useState([]);
-  const [generateDefinitions, setGenerateDefinitions] = useState(true);
-  const isPhrases = currentPhrases && currentPhrases.length > 0;
-  const phrases = isPhrases ? currentPhrases.map(({
-    phrase,
-    translations,
-    definitions,
-    image,
-    voices
-  }) => ({
-    phrase,
-    translations,
-    definitions,
-    image,
-    voices
-  })) : null;
-  const handleChange = e => {
-    if (errorMessage) {
-      setErrorMessage("");
-    }
-    const {
-      name,
-      value
-    } = e.target;
-    setValues(prevValues => ({
-      ...prevValues,
-      [name]: value
-    }));
-  };
-  function validateResponse(response) {
-    if (!Array.isArray(response)) {
-      return false;
-    }
-    for (const item of response) {
-      if (typeof item !== "object" || item === null || Array.isArray(item)) {
-        return false;
-      }
-      // definitions is OPTIONAL and we do NOT validate it per your request
-      if (!Object.hasOwn(item, "phrase") || !Object.hasOwn(item, "translations") || !Object.hasOwn(item, "image")) {
-        return false;
-      }
-      if (typeof item.phrase !== "string" || item.phrase.trim() === "") {
-        return false;
-      }
-      if (!Array.isArray(item.translations) || item.translations.length === 0) {
-        return false;
-      }
-      for (const translation of item.translations) {
-        if (typeof translation !== "string" || translation.trim() === "") {
-          return false;
-        }
-      }
-      if (typeof item.image !== "string" || item.image !== "") {
-        return false;
-      }
-    }
-    return true;
-  }
-  const handleGeneratePhrases = async () => {
-    try {
-      setIsGenerating(true);
-      setErrorMessage(null);
-      const chatGptResponse = await makeChatGptApiRequest({
-        model: "gpt-4o",
-        promptKey: "generatePhrases",
-        promptVariables: {
-          topicGoal: values.topicGoal,
-          learnLang,
-          forLang,
-          phraseAmount: values.phraseAmount,
-          phrasesTopic: values.phrasesTopic,
-          siteLanguage,
-          difficulty,
-          phraseType,
-          isPhrases,
-          phrases,
-          generateDefinitions
-        }
-      });
-      const phrasesArray = chatGptResponse.result;
-      if (!validateResponse(phrasesArray)) {
-        throw new Error("Invalid AI response");
-      }
-
-      // Ensure definitions exists as an array (assumed array; no validation)
-      const normalized = phrasesArray.map(p => ({
-        ...p,
-        definitions: Array.isArray(p.definitions) ? p.definitions : []
-      }));
-      setGeneratedPhrases(normalized);
-      setIsGenerating(false);
-    } catch (error) {
-      console.error(error);
-      setIsGenerating(false);
-      setErrorMessage("There was a problem generating phrases. Please try again.");
-    }
-  };
-  const handleConfirm = () => {
-    handleAppendPhrases(generatedPhrases);
-    setGeneratedPhrases([]);
-    handleClose();
-  };
-  const handleCancel = () => {
-    setGeneratedPhrases([]);
-  };
-  useEffect(() => {
-    setGenerateDefinitions(phraseType === 'words');
-  }, [phraseType]);
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    closeText: generatedPhrases.length > 0 ? t("cancel") : t("close"),
-    handleClose: generatedPhrases.length > 0 ? handleCancel : handleClose,
-    handleSubmit: generatedPhrases.length > 0 ? handleConfirm : handleGeneratePhrases,
-    submitText: generatedPhrases.length > 0 ? t("confirm") : t("generate_phrases"),
-    dialogTitle: isGenerating ? t("generating_phrases") : t("generate_phrases"),
-    isSubmitDisabled: isGenerating,
-    isExperimentalFeature: true,
-    startIcon: /*#__PURE__*/_jsx(AutoFixHigh, {}),
-    children: [/*#__PURE__*/_jsx(Grid, {
-      size: 12,
-      sx: {
-        textAlign: "center",
-        mx: 2,
-        ...(!isGenerating && {
-          display: "none"
-        })
-      },
-      children: /*#__PURE__*/_jsx(NualaCreating, {})
-    }), /*#__PURE__*/_jsx(Grid, {
-      size: 12,
-      sx: {
-        mt: 2,
-        ...(!isGenerating && {
-          display: "none"
-        })
-      },
-      children: /*#__PURE__*/_jsx(LinearProgress, {})
-    }), !isGenerating && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [generatedPhrases.length === 0 && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          sx: {
-            fontSize: 14,
-            opacity: 0.8,
-            marginBottom: 1
-          },
-          children: t("required_field")
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsxs(Alert, {
-            severity: "info",
-            children: [t("experimental_feature_desc_phrases"), " -", " ", /*#__PURE__*/_jsxs(Link, {
-              to: "/contact",
-              children: [t("contact_form"), "."]
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(InputHelper, {
-            t: t,
-            id: "phrasesTopic",
-            name: "phrasesTopic",
-            "data-cy": "phrasesTopic",
-            label: t("choose_topic_for_phrases"),
-            value: values.phrasesTopic,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            onChange: handleChange,
-            multiline: true,
-            rows: 3
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          sx: {
-            mb: 2
-          },
-          children: /*#__PURE__*/_jsx(TextField, {
-            id: "topicGoal",
-            name: "topicGoal",
-            "data-cy": "topicGoal",
-            label: t("topic_goal"),
-            placeholder: t("topic_goal_placeholder"),
-            value: values.topicGoal,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            onChange: handleChange,
-            slotProps: {
-              input: {
-                endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-                  position: "end",
-                  children: /*#__PURE__*/_jsx(Tooltip, {
-                    title: t("topic_goal_info_text"),
-                    placement: "top",
-                    children: /*#__PURE__*/_jsx(InfoIcon, {
-                      fontSize: "small",
-                      style: {
-                        color: "lightgrey"
-                      }
-                    })
-                  })
-                })
-              }
-            }
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          sx: {
-            mb: 2
-          },
-          children: /*#__PURE__*/_jsxs(TextField, {
-            select: true,
-            label: t("phrase_type"),
-            value: phraseType,
-            onChange: e => setPhraseType(e.target.value),
-            fullWidth: true,
-            variant: "outlined",
-            children: [/*#__PURE__*/_jsx(MenuItem, {
-              value: "words",
-              children: t("words")
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              value: "sentences",
-              children: t("sentences")
-            })]
-          })
-        }), /*#__PURE__*/_jsxs(Grid, {
-          size: 12,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            id: "input-slider",
-            gutterBottom: true,
-            children: t("how_many_phrases", {
-              phraseAmount: values.phraseAmount
-            })
-          }), /*#__PURE__*/_jsx(Slider, {
-            "aria-label": "Number of phrases",
-            defaultValue: values.phraseAmount,
-            valueLabelDisplay: "auto",
-            value: values.phraseAmount,
-            onChange: (e, value) => setValues({
-              ...values,
-              phraseAmount: value
-            }),
-            step: 2,
-            marks: true,
-            min: 4,
-            max: 16
-          })]
-        }), /*#__PURE__*/_jsxs(Grid, {
-          size: 12,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            children: /*#__PURE__*/_jsx(Box, {
-              children: t("generate_definitions")
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            label: "",
-            control: /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsx("span", {
-                children: /*#__PURE__*/_jsx(Switch, {
-                  checked: generateDefinitions,
-                  onChange: e => {
-                    setGenerateDefinitions(e.target.checked);
-                  },
-                  sx: {
-                    marginLeft: 0.5
-                  },
-                  slotProps: {
-                    input: {
-                      "aria-label": "controlled"
-                    }
-                  }
-                })
-              })
-            })
-          })]
-        })]
-      }), generatedPhrases.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          children: t("generated_phrases")
-        }), generatedPhrases.map((phrase, index) => /*#__PURE__*/_jsx(Phrase, {
-          ...phrase,
-          t: t
-        }, index))]
-      }), errorMessage && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2
-        },
-        children: /*#__PURE__*/_jsx(Alert, {
-          severity: "warning",
-          children: errorMessage
-        })
-      })]
-    })]
-  });
-}
-export default GeneratePhrases;

package/dist/Dialogs/GeneratePhrases/package.json

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