@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Dialogs/TransferPhrase/TransferPhrase.js

@@ -1,115 +0,0 @@
-import { useState } from "react";
-import { Typography, Avatar, Checkbox, CircularProgress, List, ListItem, ListItemText, ListItemAvatar, ListItemButton, Box } from "@mui/material";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import AddIcon from "@mui/icons-material/Add";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function TransferPhraseDialog({
-  open,
-  handleClose,
-  phraseIds = [],
-  otherPhraseLists = [],
-  otherPhraseListsLoading = false,
-  handleTransferPhrase,
-  handleCreateNew,
-  t = text => text
-}) {
-  const [selectedIds, setSelectedIds] = useState([]);
-  const toggleId = id => setSelectedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
-  const handleSubmit = async () => {
-    if (selectedIds.length === 0) return;
-    await handleTransferPhrase(phraseIds, selectedIds);
-    setSelectedIds([]);
-    handleClose();
-  };
-  const handleCloseReset = () => {
-    setSelectedIds([]);
-    handleClose();
-  };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleCloseReset,
-    handleSubmit: handleSubmit,
-    dialogTitle: t("transfer_phrases"),
-    submitText: t("transfer"),
-    isSubmitDisabled: selectedIds.length === 0,
-    t: t,
-    children: /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        mt: 1
-      },
-      children: [otherPhraseListsLoading ? /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          py: 2
-        },
-        children: /*#__PURE__*/_jsx(CircularProgress, {
-          size: 24
-        })
-      }) : otherPhraseLists.length === 0 ? /*#__PURE__*/_jsx(Typography, {
-        color: "textSecondary",
-        sx: {
-          mb: 1
-        },
-        children: t("no_other_phrase_lists")
-      }) : /*#__PURE__*/_jsx(List, {
-        disablePadding: true,
-        children: otherPhraseLists.map(list => {
-          const checked = selectedIds.includes(list.phraseListId);
-          return /*#__PURE__*/_jsx(ListItem, {
-            disablePadding: true,
-            secondaryAction: /*#__PURE__*/_jsx(Checkbox, {
-              edge: "end",
-              checked: checked,
-              onChange: () => toggleId(list.phraseListId),
-              slotProps: {
-                input: {
-                  "aria-label": list.phraseListName
-                }
-              }
-            }),
-            children: /*#__PURE__*/_jsxs(ListItemButton, {
-              onClick: () => toggleId(list.phraseListId),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: list.picture ? /*#__PURE__*/_jsx(Avatar, {
-                  src: list.picture,
-                  alt: list.phraseListName
-                }) : /*#__PURE__*/_jsx(Avatar, {
-                  children: /*#__PURE__*/_jsx(ImageSearchIcon, {
-                    fontSize: "small"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: list.phraseListName
-              })]
-            })
-          }, list.phraseListId);
-        })
-      }), handleCreateNew && /*#__PURE__*/_jsx(List, {
-        disablePadding: true,
-        children: /*#__PURE__*/_jsx(ListItem, {
-          disablePadding: true,
-          children: /*#__PURE__*/_jsxs(ListItemButton, {
-            onClick: handleCreateNew,
-            children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-              children: /*#__PURE__*/_jsx(Avatar, {
-                sx: {
-                  backgroundColor: "transparent"
-                },
-                children: /*#__PURE__*/_jsx(AddIcon, {
-                  fontSize: "small",
-                  sx: {
-                    color: "secondary.main"
-                  }
-                })
-              })
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: t("create_phrase_list_from_selection")
-            })]
-          })
-        })
-      })]
-    })
-  });
-}

package/dist/Dialogs/Trigger/Trigger.js

@@ -1,213 +0,0 @@
-import { useState, useEffect, Fragment } from "react";
-import DialogContentText from "@mui/material/DialogContentText";
-import Grid from "@mui/material/Grid";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import AddCircle from "@mui/icons-material/AddCircle";
-import RemoveCircle from "@mui/icons-material/RemoveCircle";
-import MenuItem from "@mui/material/MenuItem";
-import { randomId } from "../../utils/index";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import InputHelper from "../../Forms/InputHelper/InputHelper";
-import { makeStyles } from "tss-react/mui";
-import { TextField } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  dialog: {
-    marginBottom: "15px"
-  }
-}));
-const initialBotReplyState = {
-  text: ""
-};
-function Trigger({
-  t = text => text,
-  open,
-  handleClose,
-  handleTranslate,
-  submitText,
-  dialogTitle,
-  learnLang,
-  forLang,
-  onSubmit,
-  update = false,
-  botJSON,
-  forLangCharacters,
-  learnLangCharacters,
-  initialTopic = "random",
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [topic, setTopic] = useState(initialTopic);
-  const [userMessage, setUserMessage] = useState("");
-  const [botReply, setBotReply] = useState(initialBotReplyState);
-  const [replyList, setreplyList] = useState(otherProps.replies);
-  useEffect(() => {
-    if (initialTopic !== topic) {
-      setTopic(initialTopic);
-    }
-  }, [initialTopic, topic]);
-  const handleAnswerInputChange = event => {
-    const target = event.target;
-    const value = target.type === "checkbox" ? target.checked : target.value;
-    const name = target.name;
-    setBotReply(prevState => ({
-      ...prevState,
-      [name]: value
-    }));
-  };
-  const handleAddAnswer = () => {
-    if (botReply && botReply.text) {
-      setreplyList(prevReplyList => {
-        return [...prevReplyList, {
-          ...botReply,
-          text: botReply.text.trim()
-        }];
-      });
-      setBotReply(initialBotReplyState);
-    }
-  };
-  const handleRemoveReply = index => {
-    setreplyList(prevReplyList => prevReplyList.filter((t, i) => i !== index));
-  };
-  const handleExistingReplyInputChange = index => event => {
-    const target = event.target;
-    const value = target.type === "checkbox" ? target.checked : target.value;
-    const name = target.name;
-    setreplyList(prevReplyList => {
-      const newReplyList = prevReplyList.slice();
-      if (newReplyList[index]) {
-        newReplyList[index][name] = value;
-      }
-      return newReplyList;
-    });
-  };
-  const resetUserMessageState = () => {
-    setUserMessage("");
-    setBotReply(initialBotReplyState);
-    setreplyList([]);
-  };
-  const handleSubmit = () => {
-    const finalReplyList = botReply && botReply.text ? [...replyList, botReply] : replyList;
-    onSubmit({
-      topic,
-      userMessage: userMessage.trim(),
-      replies: finalReplyList
-    });
-    resetUserMessageState();
-  };
-  const title = t("triggers");
-  const desc = t("triggers_desc");
-  let topicKeys = [];
-  if (botJSON && botJSON.topics) {
-    topicKeys = Object.keys(botJSON.topics);
-  }
-  const topicOptions = topicKeys.map((key, idx) => {
-    const keyId = `trigger_${randomId()}${idx}`;
-    return /*#__PURE__*/_jsx(MenuItem, {
-      value: key,
-      className: "topic_name",
-      children: key
-    }, keyId);
-  });
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: handleSubmit,
-    submitText: t("add_trigger"),
-    dialogTitle: title,
-    children: [/*#__PURE__*/_jsx(DialogContentText, {
-      className: classes.dialog,
-      children: desc
-    }), /*#__PURE__*/_jsx(TextField, {
-      select: true,
-      value: topic,
-      onChange: e => setTopic(e.target.value),
-      margin: "normal",
-      id: "topic",
-      name: "topic",
-      label: t("topic"),
-      helperText: t("the_default_topic_is_random"),
-      type: "text",
-      fullWidth: true,
-      children: topicOptions
-    }), /*#__PURE__*/_jsx(InputHelper, {
-      t: t,
-      value: userMessage,
-      onChange: e => setUserMessage(e.target.value),
-      margin: "normal",
-      id: "userMessage",
-      name: "userMessage",
-      label: t("user_message"),
-      type: "text",
-      fullWidth: true
-    }), /*#__PURE__*/_jsxs(Grid, {
-      container: true,
-      direction: "row",
-      sx: {
-        justifyContent: "center",
-        alignItems: "flex-end"
-      },
-      children: [replyList ? replyList.map((a, idx) => {
-        return /*#__PURE__*/_jsxs(Fragment, {
-          children: [/*#__PURE__*/_jsx(Grid, {
-            size: 11,
-            children: /*#__PURE__*/_jsx(InputHelper, {
-              t: t,
-              value: a.text,
-              onChange: handleExistingReplyInputChange(idx),
-              margin: "none",
-              id: "botReply",
-              name: "text",
-              type: "text",
-              fullWidth: true
-            })
-          }), /*#__PURE__*/_jsx(Grid, {
-            size: 1,
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: () => {
-                handleRemoveReply(idx);
-              },
-              size: "large",
-              "aria-label": "Remove Reply",
-              children: /*#__PURE__*/_jsx(RemoveCircle, {})
-            })
-          })]
-        }, `replylist_${randomId()}${idx}`);
-      }) : null, /*#__PURE__*/_jsx(Grid, {
-        size: 11,
-        children: /*#__PURE__*/_jsx(InputHelper, {
-          t: t,
-          value: botReply.text,
-          onChange: handleAnswerInputChange,
-          margin: "normal",
-          id: "botReply",
-          name: "text",
-          label: t("bot_reply"),
-          type: "text",
-          fullWidth: true
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: 1,
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          title: t("add_another_reply"),
-          children: /*#__PURE__*/_jsx("span", {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              disabled: !botReply.text,
-              "data-cy": "add-answer",
-              onClick: handleAddAnswer,
-              id: "add-answer",
-              size: "large",
-              children: /*#__PURE__*/_jsx(AddCircle, {})
-            })
-          })
-        })
-      })]
-    })]
-  });
-}
-export default Trigger;

package/dist/Dialogs/Trigger/package.json

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

package/dist/Dialogs/UpgradeSubscription/UpgradeSubscription.js

@@ -1,40 +0,0 @@
-import DialogContentText from "@mui/material/DialogContentText";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import { jsx as _jsx } from "react/jsx-runtime";
-function UpgradeSubscription({
-  t = text => text,
-  open,
-  handleClose,
-  onConfirm,
-  subscription = {
-    plan: "basic",
-    isUpgradePossible: false,
-    isPaidUser: false,
-    customerId: null,
-    subscriptionId: null,
-    subscriptionData: {
-      plan: {}
-    },
-    paymentMethods: {
-      object: "list",
-      data: [],
-      has_more: false,
-      url: "/v1/payment_methods"
-    }
-  }
-}) {
-  const isStudent = !subscription.isPaidUser && !subscription.isUpgradePossible;
-  const handleSubmit = () => {
-    onConfirm();
-  };
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    handleSubmit: isStudent ? null : handleSubmit,
-    submitText: t("upgrade_submit"),
-    children: /*#__PURE__*/_jsx(DialogContentText, {
-      children: isStudent ? t("upgrade_subscription_student") : t("upgrade_subscription_desc")
-    })
-  });
-}
-export default UpgradeSubscription;

package/dist/Dialogs/UploadBotVars/UploadBotVars.js

@@ -1,186 +0,0 @@
-import { useState, useEffect } from "react";
-import { styled } from "@mui/material/styles";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import ExampleCSVImage from "./UploadBotVars.jpeg";
-import { Typography, TextField, Divider } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import ParseScriptErrors from "../../Lists/ParseScriptErrors/ParseScriptErrors";
-import CSVUploader from "../../Misc/CSVUploader/CSVUploader";
-import useDebounce from "../../hooks/useDebounce";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  parseErrorsBox: {
-    marginTop: theme.spacing()
-  }
-}));
-const SpreadSheetImg = styled("img")(() => ({
-  display: "block",
-  maxHeight: "200px"
-}));
-function UploadBotVars({
-  t = text => text,
-  open,
-  handleClose,
-  onSubmit
-}) {
-  const {
-    classes
-  } = useStyles();
-  const [vars, setVars] = useState([]);
-  const [errors, setErrors] = useState([]);
-  const [csvDataInput, setCsvDataInput] = useState("");
-  const debouncedCsvDataInput = useDebounce(csvDataInput, 2000);
-  const handleUploadAccepted = results => {
-    setErrors([]);
-    if (results.errors && results.errors.length) {
-      // formats errors coming from CSVReader into common error format
-      // used for validating rows
-      const formattedErrors = results.errors.reduce((acc, cur) => {
-        acc.push({
-          row: cur.row,
-          errorMessage: cur.message
-        });
-        return acc;
-      }, []);
-      setErrors(prevState => [...prevState, ...formattedErrors]);
-      return;
-    } else {
-      const varsResult = results.data.reduce((acc, cur, currentIndex) => {
-        if (cur && cur.name && cur.value) {
-          acc[cur.name] = cur.value;
-        } else {
-          setErrors(prevState => [...prevState, {
-            row: currentIndex + 1,
-            errorMessage: "Missing variable name or value"
-          }]);
-        }
-        return acc;
-      }, {});
-      setVars(varsResult);
-    }
-  };
-  const handleSubmit = async () => {
-    try {
-      await onSubmit(vars);
-    } catch (error) {
-      console.error(error);
-    }
-    handleClose();
-  };
-  const formatBotVars = botVars => {
-    let varArray = {};
-    botVars.forEach((data, index) => {
-      if (!data.name || !data.value) {
-        setErrors(prevState => [...prevState, {
-          row: index + 1,
-          errorMessage: "Missing variable name or value"
-        }]);
-      } else {
-        varArray[data.name] = data.value;
-      }
-    });
-    setVars(varArray);
-    return varArray;
-  };
-  useEffect(() => {
-    const handleUploadCsvDataText = async () => {
-      setErrors([]);
-      const lines = csvDataInput.trim().split("\n");
-      const headers = lines[0].split(",").map(h => h.trim());
-      const rows = lines.slice(1);
-      const jsonArray = rows.map(row => {
-        const values = row.match(/(".*?"|[^",\n]+)(?=\s*,|\s*$)/g).map(v => v.replace(/^"|"$/g, "").trim());
-        const entry = {};
-        headers.forEach((header, i) => {
-          entry[header] = values[i] ?? "";
-        });
-        return entry;
-      });
-      const formattedBotVars = formatBotVars(jsonArray);
-      setVars(formattedBotVars);
-    };
-    if (debouncedCsvDataInput !== "debouncedCsvDataInput") {
-      handleUploadCsvDataText();
-    }
-  }, [debouncedCsvDataInput]);
-  return /*#__PURE__*/_jsxs(ResponsiveDialog, {
-    open: open,
-    handleClose: () => {
-      setErrors([]);
-      handleClose();
-    },
-    handleSubmit: handleSubmit,
-    submitText: t("vars"),
-    dialogTitle: t("upload_variables"),
-    isSubmitDisabled: !vars || vars.length === 0 || errors.length > 0,
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        justifyContent: "center",
-        display: "flex",
-        marginBottom: 1
-      },
-      children: /*#__PURE__*/_jsx(SpreadSheetImg, {
-        src: ExampleCSVImage,
-        alt: ""
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        pb: 2
-      },
-      children: /*#__PURE__*/_jsx(Button, {
-        variant: "outlined",
-        startIcon: /*#__PURE__*/_jsx(FileCopyIcon, {}),
-        href: "https://docs.google.com/spreadsheets/d/1n1Jl4sHLVbksyNLiojzqpEY4tEMKlKVGHnaMG2euZ_4/edit?usp=sharing",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: t("open_in_google_sheets")
-      })
-    }), /*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsx(CSVUploader, {
-        t: t,
-        handleUploadAccepted: handleUploadAccepted
-      })
-    }), /*#__PURE__*/_jsx(Divider, {
-      sx: {
-        my: 2
-      },
-      children: "OR"
-    }), /*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsx(TextField, {
-        id: "csvDataInput",
-        name: "csvDataInput",
-        label: t("paste_your_csv_data"),
-        placeholder: `name, value\ntext1, "What is your favorite color?"\ntext2, "What is your favorite food?"`,
-        value: csvDataInput,
-        fullWidth: true,
-        multiline: true,
-        rows: 4,
-        onChange: e => setCsvDataInput(e.target.value)
-      })
-    }), errors && errors.length > 0 && /*#__PURE__*/_jsxs(Box, {
-      className: classes.parseErrorsBox,
-      sx: {
-        py: 1
-      },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        color: "error",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            fontWeight: "fontWeightBold"
-          },
-          children: [t("errors"), " (", errors.length, ")"]
-        })
-      }), /*#__PURE__*/_jsx(ParseScriptErrors, {
-        t: t,
-        errors: errors
-      })]
-    })]
-  });
-}
-export default UploadBotVars;

package/dist/Dialogs/UploadBotVars/UploadBotVars.test.js

@@ -1,20 +0,0 @@
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-import UploadBotVars from "./UploadBotVars";
-import { props } from "./UploadBotVars.stories";
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe("UploadBotVars", () => {
-  it("renders without crashing", () => {
-    const theme = createTheme();
-    const {
-      unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(UploadBotVars, {
-        ...props
-      })
-    }));
-    unmount();
-  });
-});

package/dist/Dialogs/UploadBotVars/package.json

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