@nualang/nualang-ui-components 0.1.1400 → 0.2.0

package/dist/Dialogs/BotPreview/BotPreview.js

@@ -1,350 +0,0 @@
-import { useState, useEffect, useRef, memo } from "react";
-import { Slide, IconButton, Typography, Box, Tooltip } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import ReactMarkdown from "react-markdown";
-import Replay from "@mui/icons-material/Replay";
-import VolumeOff from "@mui/icons-material/VolumeOff";
-import VolumeUp from "@mui/icons-material/VolumeUp";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import RiveScript from "@nualang/rivescript";
-
-// components
-import Chat from "../../Chat/Chat";
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import CompletedExcercise from "../ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise";
-import InProgressExerciseMenu from "../ExerciseMenu/Menus/InProgressExercise/InProgressExercise";
-import useRecognition from "../../hooks/useRecognition";
-import useExerciseState from "../../hooks/useExerciseState";
-import { removeExtraWhiteSpaces } from "../../utils";
-import CloseBotPreview from "../ExerciseMenu/Menus/CloseBotPreview/CloseBotPreview";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
-  descriptionWrapper: {
-    maxWidth: 800
-  },
-  dialogContent: {
-    padding: 0
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function BotPreview({
-  t = text => text,
-  exerciseName = "botPreview",
-  bot = {},
-  learnLang,
-  forLang,
-  handleSpeak,
-  handleStopSpeaking,
-  handleTranslate,
-  openSnackbar,
-  handleMessageBot,
-  learnLangCharacters,
-  existingVars,
-  toggleMuteSound,
-  isPreviewOpen,
-  setIsPreviewOpen,
-  userAttributes,
-  isNualangTemplate = false
-}) {
-  const {
-    recognitionState,
-    toggleListen,
-    stopListening,
-    resetTranscript,
-    browserSupportsSpeechRecognition
-  } = useRecognition({
-    openSnackbar
-  });
-  const {
-    interimTranscript,
-    finalTranscript,
-    transcriptConfidence,
-    recognizing
-  } = recognitionState;
-  const textInputRef = useRef();
-  window.rs = RiveScript ? new RiveScript({
-    debug: false,
-    utf8: true,
-    forceCase: true,
-    onDebug: () => {}
-  }) : {};
-  let botInterpreter = window.rs;
-  botInterpreter.unicodePunctuation = new RegExp(/[.,!¡¿?;:]/g);
-  const messageBot = async () => {
-    try {
-      botInterpreter.stream(bot.riveFile);
-      botInterpreter.sortReplies();
-      await botInterpreter.setUservars(userAttributes.sub, botVars);
-      const reply = await botInterpreter.reply(userAttributes.sub, botText);
-      let vars = await botInterpreter.getUservars(userAttributes.sub);
-      const response = {
-        reply,
-        vars: vars[userAttributes.sub] || vars
-      };
-      return response;
-    } catch (err) {
-      console.error(err);
-    }
-  };
-  const exerciseState = useExerciseState({
-    t,
-    handleClose: () => {
-      setIsPreviewOpen(false);
-    },
-    exerciseName,
-    handleComplete: () => {
-      setIsPreviewOpen(false);
-    },
-    openSnackbar,
-    finalTranscript,
-    interimTranscript,
-    resetTranscript,
-    stopListening,
-    handleSpeak,
-    handleStopSpeaking,
-    learnLang,
-    existingVars,
-    bot,
-    handleMessageBot: isNualangTemplate ? messageBot : handleMessageBot,
-    textInputRef,
-    toggleMuteSound,
-    userAttributes
-  });
-  const {
-    muteSound,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    isConfidenceOpen,
-    handleCloseConfidence,
-    handleOpenConfidence,
-    closeCloseModal,
-    closeInProgressModal,
-    setBotText,
-    botMessages,
-    botText,
-    botVars,
-    addBotMessage,
-    handleSubmitBotMessage,
-    handleInputChange,
-    handleMute,
-    handleRestart,
-    handleRestartExercise,
-    voiceSpeed,
-    handleCloseExercise,
-    setBotMessages,
-    setBotVars,
-    speak,
-    stopSpeaking,
-    isSpeaking,
-    isSpeakingTextContainer
-  } = exerciseState;
-  const {
-    classes
-  } = useStyles();
-  const [instructionDialogOpen, setInstructionDialogOpen] = useState(false);
-  const handleMic = expectedTranscript => {
-    const speechContexts = expectedTranscript ? [{
-      phrases: [...(expectedTranscript.length < 100 ? [removeExtraWhiteSpaces(expectedTranscript)] : removeExtraWhiteSpaces(expectedTranscript).split(" "))],
-      boost: 10
-    }] : null;
-    const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
-    toggleListen(learnLang, speechContexts, model);
-  };
-  useEffect(() => {
-    setBotVars(null);
-  }, [bot]);
-  const handleClosePreview = () => {
-    setIsPreviewOpen(false);
-    handleCloseExercise();
-  };
-  const handleClickOpenInstructions = () => {
-    setInstructionDialogOpen(true);
-  };
-  const handleCloseInstructions = () => {
-    setInstructionDialogOpen(false);
-  };
-  useEffect(() => {
-    if (isPreviewOpen) {
-      setBotText(`${finalTranscript || ""} ${interimTranscript || ""}`);
-    }
-  }, [isPreviewOpen, finalTranscript, interimTranscript]);
-  useEffect(() => {
-    // Detect recognition stop and focus on text input
-    if (isPreviewOpen && !recognizing && botText && botText.trim() !== "" && (interimTranscript || finalTranscript)) {
-      if (textInputRef && textInputRef.current) {
-        textInputRef.current.focus();
-      }
-    }
-  }, [isPreviewOpen, recognizing]);
-  useEffect(() => {
-    if (isPreviewOpen && bot.studentInstructions && bot.studentInstructions !== "") {
-      setBotMessages([]);
-      handleClickOpenInstructions();
-    }
-    if (isPreviewOpen && bot.introMessage && botMessages.length === 0) {
-      setTimeout(() => {
-        addBotMessage(bot.introMessage, false, true);
-      }, 3000);
-    }
-  }, [isPreviewOpen]);
-  const topBarActions = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [bot.studentInstructions && bot.studentInstructions !== "" ? /*#__PURE__*/_jsx(Tooltip, {
-      title: t("instructions"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: handleClickOpenInstructions,
-        size: "large",
-        children: /*#__PURE__*/_jsx(InfoOutlined, {})
-      })
-    }) : null, /*#__PURE__*/_jsx(Tooltip, {
-      title: muteSound ? t("unmute") : t("mute"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: handleMute,
-        "aria-label": t("mute"),
-        "aria-pressed": muteSound ? "true" : "false",
-        id: "mute",
-        size: "large",
-        children: muteSound ? /*#__PURE__*/_jsx(VolumeOff, {}) : /*#__PURE__*/_jsx(VolumeUp, {})
-      })
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: t("restart"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        color: "inherit",
-        onClick: handleRestart,
-        "aria-label": "Restart",
-        id: "restart",
-        size: "large",
-        children: /*#__PURE__*/_jsx(Replay, {})
-      })
-    })]
-  });
-  const beforeElements = /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      mb: 2
-    },
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "h6",
-      noWrap: true,
-      sx: {
-        fontWeight: 900,
-        textAlign: "center",
-        mb: 1
-      },
-      children: t("Preview")
-    }), bot && bot.picture && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center"
-      },
-      children: /*#__PURE__*/_jsx("img", {
-        src: bot.picture,
-        width: 250,
-        alt: "bot pic"
-      })
-    }), bot && bot.botName && /*#__PURE__*/_jsx(Typography, {
-      variant: "h6",
-      component: "h2",
-      align: "center",
-      gutterBottom: true,
-      children: bot.botName
-    }), bot && bot.description && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        textAlign: "center",
-        mx: "auto"
-      },
-      className: classes.descriptionWrapper,
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        component: "h3",
-        align: "center",
-        color: "textSecondary",
-        children: bot.description
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(ResponsiveDialog, {
-      isFullScreen: true,
-      open: isPreviewOpen,
-      TransitionComponent: Transition,
-      closeDisabled: true,
-      dialogContentClassName: classes.dialogContent,
-      children: [/*#__PURE__*/_jsx(Chat, {
-        t: t,
-        messages: botMessages,
-        translationEnabled: bot.translationEnabled,
-        handleClose: handleClosePreview,
-        handleInputChange: handleInputChange,
-        inputName: "botText",
-        inputValue: botText,
-        inputRef: textInputRef,
-        beforeElements: beforeElements,
-        browserSupportsSpeechRecognition: browserSupportsSpeechRecognition,
-        handleRecord: browserSupportsSpeechRecognition && learnLang !== "irish" ? () => handleMic() : null,
-        isListening: recognizing,
-        handleTranslate: handleTranslate,
-        handleSend: handleSubmitBotMessage,
-        topBarActions: topBarActions,
-        learnLang: learnLang,
-        forLang: forLang,
-        voiceSpeed: voiceSpeed,
-        isPrimaryColor: true,
-        characters: learnLangCharacters,
-        finalTranscript: finalTranscript,
-        transcriptConfidence: transcriptConfidence,
-        isConfidenceOpen: isConfidenceOpen,
-        handleCloseConfidence: handleCloseConfidence,
-        handleOpenConfidence: handleOpenConfidence,
-        handleKeyPress: e => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            handleSubmitBotMessage();
-          }
-        },
-        muteSound: muteSound,
-        speak: speak,
-        stopSpeaking: stopSpeaking,
-        isSpeaking: isSpeaking,
-        isSpeakingTextContainer: isSpeakingTextContainer
-      }), /*#__PURE__*/_jsx(ResponsiveDialog, {
-        open: instructionDialogOpen,
-        handleClose: handleCloseInstructions,
-        dialogTitle: t("instruction_message"),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "content",
-          children: /*#__PURE__*/_jsx(ReactMarkdown, {
-            children: bot.studentInstructions
-          })
-        })
-      }), /*#__PURE__*/_jsx(CompletedExcercise, {
-        open: isCompletionModalOpen,
-        restartExcercise: handleRestartExercise,
-        onClose: () => isCompletionModalOpen(false),
-        goBack: handleClosePreview,
-        fullScreen: true,
-        t: t
-      }), /*#__PURE__*/_jsx(InProgressExerciseMenu, {
-        t: t,
-        open: isInProgressModalOpen,
-        close: closeInProgressModal,
-        onClose: closeInProgressModal,
-        continueExercise: closeInProgressModal,
-        restartExercise: handleRestartExercise,
-        goBack: handleClosePreview
-      }), /*#__PURE__*/_jsx(CloseBotPreview, {
-        t: t,
-        open: isCloseModalOpen,
-        close: closeCloseModal,
-        goBack: handleClosePreview
-      })]
-    })
-  });
-}
-BotPreview.propTypes = {};
-export default /*#__PURE__*/memo(BotPreview);

package/dist/Dialogs/BotPreview/package.json

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

package/dist/Dialogs/Code/Code.js

@@ -1,147 +0,0 @@
-import { useState } from "react";
-
-// components
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import MuiDialogTitle from "@mui/material/DialogTitle";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
-import Divider from "@mui/material/Divider";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
-import { useTheme } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import { withStyles } from "tss-react/mui";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = theme => ({
-  root: {
-    margin: 0,
-    padding: theme.spacing(2)
-  },
-  button: {
-    position: "absolute",
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500]
-  }
-});
-const DialogTitle = withStyles(props => {
-  const {
-    children,
-    t,
-    classes,
-    toggleFullscreen,
-    isFullscreen,
-    ...other
-  } = props;
-  return /*#__PURE__*/_jsxs(MuiDialogTitle, {
-    disableTypography: true,
-    className: classes.root,
-    ...other,
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: "h6",
-      children: children
-    }), toggleFullscreen ? /*#__PURE__*/_jsx(_Fragment, {
-      children: isFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
-        title: t("exit"),
-        children: /*#__PURE__*/_jsx(IconButton, {
-          "aria-label": "close fullscreen",
-          className: classes.button,
-          onClick: toggleFullscreen,
-          size: "large",
-          children: /*#__PURE__*/_jsx(FullscreenExitIcon, {})
-        })
-      }) : /*#__PURE__*/_jsx(Tooltip, {
-        title: t("fullscreen"),
-        children: /*#__PURE__*/_jsx(IconButton, {
-          "aria-label": "open fullscreen",
-          className: classes.button,
-          onClick: toggleFullscreen,
-          size: "large",
-          children: /*#__PURE__*/_jsx(FullscreenIcon, {})
-        })
-      })
-    }) : null]
-  });
-}, styles);
-const useStyles = makeStyles()((theme, {
-  isFullscreen,
-  codeSize
-}) => ({
-  code: {
-    marginTop: theme.spacing(5),
-    marginBottom: theme.spacing(2)
-  },
-  codeText: {
-    fontSize: isFullscreen ? codeSize : null
-  }
-}));
-function getFontSizeBasedOnCodeLength(code, isFullscreen = false) {
-  if (code.length <= 6) return isFullscreen ? "25vh" : "h1";
-  if (code.length > 6 && code.length <= 10) return isFullscreen ? "20vh" : "h1";
-  if (code.length > 10 && code.length <= 14) return isFullscreen ? "16vh" : "h2";
-  if (code.length > 14 && code.length <= 18) return isFullscreen ? "10vh" : "h3";
-  return isFullscreen ? "6vh" : "h4";
-}
-function Code({
-  t = text => text,
-  open,
-  handleClose,
-  dialogTitle,
-  code,
-  ...otherProps
-}) {
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const {
-    classes
-  } = useStyles({
-    isFullscreen,
-    codeSize: getFontSizeBasedOnCodeLength(code, true)
-  });
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const codeLengthStyleBased = getFontSizeBasedOnCodeLength(code, false);
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: isFullscreen || fullScreen,
-    fullWidth: true,
-    open: open,
-    onClose: handleClose,
-    "aria-label": dialogTitle,
-    children: [dialogTitle && /*#__PURE__*/_jsx(DialogTitle, {
-      t: t,
-      isFullscreen: isFullscreen,
-      toggleFullscreen: () => setIsFullscreen(!isFullscreen),
-      children: dialogTitle
-    }), /*#__PURE__*/_jsxs(DialogContent, {
-      children: [/*#__PURE__*/_jsx(DialogContentText, {
-        children: t("join_code_desc")
-      }), /*#__PURE__*/_jsx(Box, {
-        className: classes.code,
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: codeLengthStyleBased,
-          component: codeLengthStyleBased,
-          className: classes.codeText,
-          children: code
-        })
-      }), /*#__PURE__*/_jsx(Divider, {})]
-    }), /*#__PURE__*/_jsx(DialogActions, {
-      children: /*#__PURE__*/_jsx(Button, {
-        onClick: handleClose,
-        className: classes.secondaryButton,
-        children: t("close")
-      })
-    })]
-  });
-}
-export default Code;

package/dist/Dialogs/Code/Code.test.js

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

package/dist/Dialogs/Code/package.json

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

package/dist/Dialogs/ConfirmDeleteDiscussion/ConfirmDeleteDiscussion.js

@@ -1,46 +0,0 @@
-import PropTypes from "prop-types";
-import { Button, Dialog, DialogActions, DialogTitle, DialogContent, DialogContentText } from "@mui/material";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export default function ConfirmDeleteDiscussion({
-  handleConfirmDeleteDiscussion = () => {},
-  handleCloseDeleteDiscussionDialog = () => {},
-  t = text => text,
-  deleteDiscussionDialogOpen = false,
-  archiveTitle,
-  archiveDescription
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(Dialog, {
-      open: deleteDiscussionDialogOpen,
-      onClose: handleCloseDeleteDiscussionDialog,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: t(archiveTitle)
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsx(DialogContentText, {
-          children: t(archiveDescription)
-        })
-      }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          "aria-label": "cancel saving submission",
-          onClick: handleCloseDeleteDiscussionDialog,
-          color: "primary",
-          children: t("cancel")
-        }), /*#__PURE__*/_jsx(Button, {
-          "aria-label": "confirm saving submission",
-          onClick: async () => {
-            await handleConfirmDeleteDiscussion();
-            handleCloseDeleteDiscussionDialog();
-          },
-          color: "primary",
-          children: t("confirm")
-        })]
-      })]
-    })
-  });
-}
-ConfirmDeleteDiscussion.propTypes = {
-  handleConfirmDeleteDiscussion: PropTypes.func,
-  handleCloseDeleteDiscussionDialog: PropTypes.func,
-  t: PropTypes.func,
-  deleteDiscussionDialogOpen: PropTypes.bool
-};