@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -1,429 +0,0 @@
-import { useState, useEffect } from "react";
-import { Grid, Box, FormControlLabel, Switch, Typography, Slider, TextField, InputAdornment, Tooltip, Checkbox, ListItemText, OutlinedInput, Select, InputLabel, FormControl, MenuItem } from "@mui/material";
-import InfoIcon from "@mui/icons-material/Info";
-import Alert from "@mui/material/Alert";
-import LinearProgress from "@mui/material/LinearProgress";
-import { Link } from "react-router";
-//components
-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)) {
-    return false;
-  }
-  for (const item of response) {
-    if (typeof item !== "object" || item === null || Array.isArray(item)) {
-      return false;
-    }
-    if (template === "nualang.quiz.0.0.1") {
-      if (!Object.hasOwn(item, "question") || !Object.hasOwn(item, "answer")) {
-        return false;
-      }
-      if (typeof item.question !== "string" || item.question.trim() === "") {
-        return false;
-      }
-      if (typeof item.answer !== "string" || item.answer.trim() === "") {
-        return false;
-      }
-    }
-    if (template === "nualang.open-ended.0.0.1" && !Object.hasOwn(item, "text")) {
-      return false;
-    }
-  }
-  return true;
-}
-function GenerateBotDialog({
-  t = text => text,
-  isGenerateBotDialogOpen,
-  setIsGenerateBotDialogOpen,
-  makeChatGptApiRequest,
-  generateRiveFile,
-  learnLang,
-  initialValues = {
-    botTopic: "",
-    botLengthNumber: 5
-  },
-  autoSelect,
-  handleUpdateBot,
-  bot,
-  siteLanguage,
-  topicPhrases,
-  phraseLists,
-  updateRivescriptJSON,
-  initialTopicGoal
-}) {
-  const [usePhrasesContext, setUsePhrasesContext] = useState(true);
-  const [selectedPhraseListIds, setSelectedPhraseListIds] = useState(["all"]);
-  const [topicGoal, setTopicGoal] = useState("");
-  const [phrases, setPhrases] = useState([]);
-  const [isBotGenerating, setIsBotGenerating] = useState(false);
-  const [values, setValues] = useState({
-    ...initialValues,
-    botTopic: bot.botName
-  });
-  const [errorMessage, setErrorMessage] = useState(null);
-  const handleChange = e => {
-    if (errorMessage) {
-      setErrorMessage("");
-    }
-    const {
-      name,
-      value
-    } = e.target;
-    setValues(prevValues => ({
-      ...prevValues,
-      [name]: value
-    }));
-  };
-  useEffect(() => {
-    if (initialTopicGoal && initialTopicGoal.trim !== "") {
-      setTopicGoal(initialTopicGoal);
-    }
-    if (topicPhrases && topicPhrases.length > 0) {
-      setPhrases([...topicPhrases]);
-    }
-  }, [initialTopicGoal, topicPhrases]);
-  const isPhrasesSwitchDisabled = phrases.length === 0 || !phraseLists || phraseLists.length === 0 || !phraseLists.some(pl => pl.phrases && pl.phrases.length > 0);
-  useEffect(() => {
-    if (isPhrasesSwitchDisabled) {
-      setUsePhrasesContext(false);
-    }
-  }, [isPhrasesSwitchDisabled]);
-  const handleCloseDialog = () => {
-    setIsGenerateBotDialogOpen(false);
-  };
-  const effectivePhrases = !phraseLists || phraseLists.length === 0 || selectedPhraseListIds.includes("all") ? phrases : phraseLists.filter(pl => selectedPhraseListIds.includes(pl.id)).flatMap(pl => pl.phrases);
-  const handlePhraseListChange = event => {
-    const newValue = event.target.value;
-    if (newValue[newValue.length - 1] === "all") {
-      setSelectedPhraseListIds(["all"]);
-    } else {
-      setSelectedPhraseListIds(newValue.filter(v => v !== "all"));
-    }
-  };
-
-  // const removeExtraTextFromChatGptResponse = (response) => {
-  //   let stack = [];
-  //   let startIndex = -1;
-  //   let endIndex = -1;
-  //   for (let i = 0; i < response.length; i++) {
-  //     if (response[i] === "[") {
-  //       if (stack.length === 0) {
-  //         startIndex = i;
-  //       }
-  //       stack.push("[");
-  //     } else if (response[i] === "]") {
-  //       stack.pop();
-  //       if (stack.length === 0) {
-  //         endIndex = i;
-  //         break;
-  //       }
-  //     }
-  //   }
-  //   if (startIndex !== -1 && endIndex !== -1) {
-  //     return response.substring(startIndex, endIndex + 1);
-  //   }
-  //   return "";
-  // };
-
-  // function fixMissingComma(jsonString) {
-  //   const fixedJsonString = jsonString.replace(/}\s*{/g, "},{");
-  //   try {
-  //     const jsonObject = JSON.parse(fixedJsonString);
-  //     return jsonObject;
-  //   } catch (error) {
-  //     console.error("Invalid JSON after attempting to fix:", error);
-  //     return null;
-  //   }
-  // }
-
-  const sampleQuestionArray = [{
-    question: "What day comes after Monday? ",
-    answer: "(Tuesday)"
-  }, {
-    question: "What day comes after Tuesday? ",
-    answer: "(Wednesday)"
-  }, {
-    question: "What day comes after Wednesday? ",
-    answer: "(Thursday)"
-  }, {
-    question: "What day comes after Thursday? ",
-    answer: "(Friday)"
-  }, {
-    question: "What day comes after Friday? ",
-    answer: "(Saturday)"
-  }, {
-    question: "What day comes after Saturday? ",
-    answer: "(Sunday)"
-  }, {
-    question: "What day comes after Sunday? ",
-    answer: "(Monday)"
-  }, {
-    question: "What is the first day of the week? ",
-    answer: "(Monday)"
-  }, {
-    question: "What is the last day of the week? ",
-    answer: "(Sunday)"
-  }, {
-    question: "How many days are there in a week? ",
-    answer: "(7|seven)"
-  }];
-  const handleGenerateBotScript = async () => {
-    try {
-      setIsBotGenerating(true);
-      setErrorMessage("");
-      let chatGptResponse = await makeChatGptApiRequest({
-        model: "gpt-4o",
-        promptKey: "generateBot",
-        promptVariables: {
-          botTopic: values.botTopic,
-          topicGoal: topicGoal,
-          selectedTemplate: bot.selectedTemplate,
-          botLengthNumber: values.botLengthNumber,
-          learnLang: learnLang,
-          siteLanguage: siteLanguage,
-          difficulty: bot.difficulty,
-          sampleQuestionArray: sampleQuestionArray,
-          phrases: effectivePhrases,
-          usePhrasesContext: usePhrasesContext
-        }
-      });
-      const botScript = chatGptResponse.result;
-      if (!validateResponse(botScript, bot.selectedTemplate)) {
-        throw new Error("Invalid AI response");
-      }
-      setIsBotGenerating(false);
-      return botScript;
-    } catch (error) {
-      setIsBotGenerating(false);
-      console.error(error);
-      setErrorMessage("There was problem generating the bot, please try again.");
-    }
-  };
-  const handleSubmit = async () => {
-    const generatedBot = await handleGenerateBotScript(autoSelect);
-    const generatedRiveFile = generateRiveFile(values.botLengthNumber, generatedBot);
-    await handleUpdateBot({
-      riveFile: generatedRiveFile
-    });
-    updateRivescriptJSON(generatedRiveFile);
-    handleCloseDialog();
-  };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: isGenerateBotDialogOpen,
-    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, {
-      container: true,
-      sx: {
-        width: "100%"
-      },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          textAlign: "center",
-          mx: 2,
-          ...(!isBotGenerating && {
-            display: "none"
-          })
-        },
-        children: /*#__PURE__*/_jsx(NualaCreating, {})
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2,
-          ...(!isBotGenerating && {
-            display: "none"
-          })
-        },
-        children: /*#__PURE__*/_jsx(LinearProgress, {})
-      }), !isBotGenerating && /*#__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"), " -", " ", /*#__PURE__*/_jsxs(Link, {
-              to: "/contact",
-              children: [t("contact_form"), "."]
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(InputHelper, {
-            t: t,
-            id: "botTopic",
-            name: "botTopic",
-            "data-cy": "botTopic",
-            label: t("choose_topic_for_bot"),
-            value: values.botTopic,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            onChange: handleChange,
-            multiline: true,
-            rows: 3,
-            autoFocus: true
-            // maxLength={200}
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          children: /*#__PURE__*/_jsx(TextField, {
-            id: "topicGoal",
-            name: "topicGoal",
-            "data-cy": "topicGoal",
-            label: t("topic_goal"),
-            placeholder: t("topic_goal_placeholder"),
-            value: topicGoal,
-            type: "text",
-            margin: "normal",
-            variant: "outlined",
-            multiline: true,
-            fullWidth: true,
-            sx: {
-              marginBottom: 5
-            },
-            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__*/_jsxs(Grid, {
-          size: 12,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            id: "input-slider",
-            gutterBottom: true,
-            children: t("number_of_questions") + ": " + values.botLengthNumber
-          }), /*#__PURE__*/_jsx(Slider, {
-            "aria-label": "Number of Questions",
-            defaultValue: 5,
-            valueLabelDisplay: "auto",
-            value: values.botLengthNumber,
-            onChange: (e, newValue) => {
-              const maxQuestions = 10;
-              setValues(prevValues => ({
-                ...prevValues,
-                botLengthNumber: newValue,
-                questionsAmount: Math.min(prevValues.questionsAmount, maxQuestions)
-              }));
-            },
-            step: 1,
-            marks: true,
-            min: 1,
-            max: 10
-          })]
-        }), /*#__PURE__*/_jsxs(Grid, {
-          size: 12,
-          children: [/*#__PURE__*/_jsx(Typography, {
-            children: /*#__PURE__*/_jsx(Box, {
-              sx: {
-                pt: 2
-              },
-              children: t("use_context_from_topic_phrases")
-            })
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            label: "",
-            control: /*#__PURE__*/_jsx(_Fragment, {
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                title: isPhrasesSwitchDisabled ? t("topic_no_phrases") : "",
-                children: /*#__PURE__*/_jsx("span", {
-                  children: /*#__PURE__*/_jsx(Switch, {
-                    checked: usePhrasesContext,
-                    onChange: e => {
-                      setUsePhrasesContext(e.target.checked);
-                    },
-                    sx: {
-                      marginLeft: 0.5
-                    },
-                    disabled: isPhrasesSwitchDisabled,
-                    slotProps: {
-                      input: {
-                        "aria-label": "controlled"
-                      }
-                    }
-                  })
-                })
-              })
-            })
-          })]
-        }), usePhrasesContext && phraseLists && phraseLists.length > 0 && /*#__PURE__*/_jsx(Grid, {
-          size: 12,
-          sx: {
-            mb: 2,
-            mt: 2
-          },
-          children: /*#__PURE__*/_jsxs(FormControl, {
-            fullWidth: true,
-            size: "small",
-            children: [/*#__PURE__*/_jsx(InputLabel, {
-              children: t("phrase_lists")
-            }), /*#__PURE__*/_jsxs(Select, {
-              multiple: true,
-              value: selectedPhraseListIds,
-              onChange: handlePhraseListChange,
-              input: /*#__PURE__*/_jsx(OutlinedInput, {
-                label: t("phrase_lists")
-              }),
-              renderValue: selected => selected.includes("all") ? t("all") : phraseLists.filter(pl => selected.includes(pl.id)).map(pl => pl.name).join(", "),
-              children: [/*#__PURE__*/_jsxs(MenuItem, {
-                value: "all",
-                children: [/*#__PURE__*/_jsx(Checkbox, {
-                  checked: selectedPhraseListIds.includes("all")
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: t("all")
-                })]
-              }), phraseLists.map(pl => /*#__PURE__*/_jsxs(MenuItem, {
-                value: pl.id,
-                children: [/*#__PURE__*/_jsx(Checkbox, {
-                  checked: selectedPhraseListIds.includes(pl.id)
-                }), /*#__PURE__*/_jsx(ListItemText, {
-                  primary: pl.name
-                })]
-              }, pl.id))]
-            })]
-          })
-        })]
-      }), errorMessage && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2
-        },
-        children: /*#__PURE__*/_jsx(Alert, {
-          severity: "warning",
-          children: errorMessage
-        })
-      })]
-    })
-  });
-}
-export default GenerateBotDialog;

package/dist/Dialogs/GenerateBot/package.json

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

package/dist/Dialogs/GenerateDefinitions/GenerateDefinitions.js

@@ -1,217 +0,0 @@
-import { useState, useEffect } from "react";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { AutoFixHigh } from "@mui/icons-material";
-import { Alert, Box, Card, Grid, LinearProgress, Typography } from "@mui/material";
-import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function GenerateDefinitions({
-  t,
-  open,
-  handleClose,
-  selectedPhraseObjects,
-  makeChatGptApiRequest,
-  handleUpdatePhrase,
-  learnLang,
-  forLang,
-  siteLanguage,
-  difficulty
-}) {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [generatedDefinitions, setGeneratedDefinitions] = useState([]);
-  const [isConfirming, setIsConfirming] = useState(false);
-  const hasResults = generatedDefinitions.length > 0;
-
-  // Auto-trigger generation when dialog opens
-  useEffect(() => {
-    if (open && selectedPhraseObjects.length > 0 && !hasResults && !isGenerating) {
-      handleGenerate();
-    }
-  }, [open]);
-  function validateResponse(results) {
-    if (!Array.isArray(results)) return false;
-    for (const item of results) {
-      if (!item || typeof item !== "object") return false;
-      if (!Array.isArray(item.definitions)) return false;
-      for (const def of item.definitions) {
-        if (typeof def !== "string" || def.trim() === "") return false;
-      }
-    }
-    return true;
-  }
-  const handleGenerate = async () => {
-    try {
-      setIsGenerating(true);
-      setErrorMessage(null);
-      const phrasesData = selectedPhraseObjects.map(p => ({
-        phraseId: p.phraseId,
-        phrase: p.phrase,
-        translations: p.translations || []
-      }));
-      const chatGptResponse = await makeChatGptApiRequest({
-        model: "gpt-4o",
-        promptKey: "generateDefinitions",
-        promptVariables: {
-          learnLang,
-          forLang,
-          siteLanguage,
-          difficulty,
-          phrases: phrasesData
-        }
-      });
-      const results = chatGptResponse.result;
-      if (!validateResponse(results)) {
-        throw new Error("Invalid AI response");
-      }
-      const merged = selectedPhraseObjects.map((original, index) => {
-        const generated = results.find(r => r.phraseId === original.phraseId) || results[index];
-        return {
-          phraseId: original.phraseId,
-          phrase: original.phrase,
-          oldDefinitions: original.definitions || [],
-          newDefinitions: generated ? generated.definitions : []
-        };
-      });
-      setGeneratedDefinitions(merged);
-    } catch (error) {
-      console.error(error);
-      setErrorMessage(t("generate_defintions_error"));
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-  const handleConfirm = async () => {
-    try {
-      setIsConfirming(true);
-      for (const item of generatedDefinitions) {
-        const originalPhrase = selectedPhraseObjects.find(p => p.phraseId === item.phraseId);
-        await handleUpdatePhrase(item.phraseId, {
-          phrase: originalPhrase?.phrase || item.phrase,
-          translations: originalPhrase?.translations || [],
-          definitions: item.newDefinitions
-        });
-      }
-      setGeneratedDefinitions([]);
-      setIsConfirming(false);
-      handleClose();
-    } catch (error) {
-      console.error(error);
-      setIsConfirming(false);
-      setErrorMessage(t("save_definitions_error"));
-    }
-  };
-  const handleCancel = () => {
-    handleClose();
-    setGeneratedDefinitions([]);
-    setErrorMessage(null);
-  };
-  const handleDialogClose = () => {
-    setGeneratedDefinitions([]);
-    setErrorMessage(null);
-    handleClose();
-  };
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    closeText: hasResults ? t("cancel") : t("close"),
-    handleClose: hasResults ? handleCancel : handleDialogClose,
-    handleSubmit: hasResults ? handleConfirm : handleGenerate,
-    submitText: hasResults ? t("confirm") : t("generate_definitions"),
-    dialogTitle: isGenerating ? t("generating_definitions") : t("generate_definitions"),
-    isSubmitDisabled: isGenerating || isConfirming,
-    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: [generatedDefinitions.length === 0 && !errorMessage && /*#__PURE__*/_jsx(Typography, {
-        variant: "body2",
-        sx: {
-          color: "text.secondary"
-        },
-        children: t("generate_definitions_info")
-      }), hasResults && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Typography, {
-          sx: {
-            mb: 1
-          },
-          children: t("review_generated_definitions")
-        }), generatedDefinitions.map(item => /*#__PURE__*/_jsxs(Card, {
-          variant: "outlined",
-          sx: {
-            mb: 2,
-            p: 2
-          },
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "subtitle1",
-            sx: {
-              fontWeight: "bold"
-            },
-            children: item.phrase
-          }), item.oldDefinitions.length > 0 && /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              mt: 1
-            },
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "caption",
-              sx: {
-                color: "text.secondary"
-              },
-              children: [t("current_definitions"), ":"]
-            }), item.oldDefinitions.map((def, i) => /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              sx: {
-                textDecoration: "line-through",
-                opacity: 0.6
-              },
-              children: def
-            }, i))]
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              mt: 1
-            },
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "caption",
-              sx: {
-                color: "success.main"
-              },
-              children: [t("new_definitions"), ":"]
-            }), item.newDefinitions.map((def, i) => /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              sx: {
-                color: "success.main"
-              },
-              children: def
-            }, i))]
-          })]
-        }, item.phraseId))]
-      }), errorMessage && /*#__PURE__*/_jsx(Grid, {
-        size: 12,
-        sx: {
-          mt: 2
-        },
-        children: /*#__PURE__*/_jsx(Alert, {
-          severity: "warning",
-          children: errorMessage
-        })
-      })]
-    })]
-  });
-}
-export default GenerateDefinitions;

package/dist/Dialogs/GenerateDefinitions/package.json

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