@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Charts/Doughnut/AnswersBreakdown/AnswersBreakdown.js

@@ -1,105 +0,0 @@
-import { useRef, useEffect } from "react";
-import { useTheme } from "@mui/material/styles";
-import { Doughnut } from "react-chartjs-2";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import ChartTable from "../../../Tables/Chart/Chart";
-import { jsx as _jsx } from "react/jsx-runtime";
-ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
-export default function AnswersBreakdown({
-  t = text => text,
-  answerAttempts = [],
-  showTable
-}) {
-  const theme = useTheme();
-  const chartRef = useRef(null);
-  function constructAnswersChartData(answerAttempts = []) {
-    const attemptMap = new Map();
-    answerAttempts.map(attempt => {
-      attemptMap.set(attempt.result, attemptMap.get(attempt.result) ? attemptMap.get(attempt.result) + 1 : 1);
-      return false;
-    });
-    return {
-      labels: Array.from(attemptMap.keys()).map(l => t(l)),
-      datasets: [{
-        data: Array.from(attemptMap.values()),
-        // datalabels: {
-        //   display: true,
-        //   color: 'white',
-        //   font: {
-        //     weight: 'bold',
-        //     size: 20,
-        //   }
-        // },
-        backgroundColor: Array.from(attemptMap.keys()).map(key => {
-          if (key === "correct") {
-            return theme.palette.success.main;
-          } else if (key === "incorrect") {
-            return theme.palette.error.main;
-          } else {
-            return theme.palette.warning.main;
-          }
-        }),
-        hoverBackgroundColor: Array.from(attemptMap.keys()).map(key => {
-          if (key === "correct") {
-            return theme.palette.success.dark;
-          } else if (key === "incorrect") {
-            return theme.palette.error.dark;
-          } else {
-            return theme.palette.warning.dark;
-          }
-        })
-      }]
-    };
-  }
-  const answersChartData = constructAnswersChartData(answerAttempts);
-  useEffect(() => {
-    const handleKeyDown = event => {
-      if (event.key === "Escape" && chartRef.current) {
-        const chart = chartRef.current;
-        const tooltip = chart.tooltip;
-        tooltip.setActiveElements([], {
-          x: 0,
-          y: 0
-        });
-        tooltip.update();
-        chart.update();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-  return /*#__PURE__*/_jsx("div", {
-    children: !showTable ? /*#__PURE__*/_jsx(Doughnut, {
-      data: answersChartData,
-      "aria-role": "img",
-      options: {
-        animation: false,
-        plugins: {
-          legend: {
-            labels: {
-              fontColor: theme.palette.mode === "dark" ? "white" : "#666"
-            }
-          },
-          datalabels: {
-            color: "white",
-            font: {
-              weight: "bold",
-              size: "30"
-            }
-          },
-          tooltip: {
-            enabled: true
-          }
-        }
-      },
-      ref: chartRef
-    }) : ChartTable({
-      t,
-      chartData: answersChartData,
-      chartContent: "answers"
-    })
-  });
-}

package/dist/Charts/Doughnut/AnswersBreakdown/package.json

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

package/dist/Charts/Doughnut/RecordingAttendance/RecordingAttendance.js

@@ -1,100 +0,0 @@
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Doughnut } from "react-chartjs-2";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
-export default function RecordingAttendance({
-  t = text => text,
-  recordings = []
-}) {
-  const theme = useTheme();
-  function countAttendees(recordings = []) {
-    let joinedCount = 0;
-    let attendeesCount = 0;
-    recordings.forEach(recording => {
-      if (recording.attendees && recording.attendees.length > 0) {
-        attendeesCount += recording.attendees.length;
-        if (recording.joinedMembers && recording.joinedMembers.length > 0) {
-          // Count attendees who joined
-          joinedCount += recording.joinedMembers.length;
-        }
-      }
-    });
-    const notJoinedCount = attendeesCount - joinedCount;
-    return {
-      joinedCount,
-      notJoinedCount
-    };
-  }
-  const {
-    joinedCount,
-    notJoinedCount
-  } = countAttendees(recordings);
-  const answersChartData = {
-    labels: [t("attended"), t("did_not_attend")],
-    datasets: [{
-      data: [joinedCount, notJoinedCount],
-      backgroundColor: [theme.palette.info.main, theme.palette.warning.main],
-      hoverBackgroundColor: [theme.palette.info.dark, theme.palette.warning.dark]
-    }]
-  };
-  return /*#__PURE__*/_jsxs(Card, {
-    sx: {
-      marginBottom: 2,
-      boxShadow: 3
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        p: 2,
-        backgroundColor: "#8300A1"
-      },
-      children: /*#__PURE__*/_jsx(Stack, {
-        direction: "row",
-        sx: {
-          justifyContent: "space-between",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          gutterBottom: true,
-          variant: "h5",
-          component: "div",
-          sx: {
-            color: "white"
-          },
-          children: t("discussion_attendance")
-        })
-      })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        p: 2
-      },
-      children: /*#__PURE__*/_jsx(Doughnut, {
-        data: answersChartData,
-        options: {
-          animation: false,
-          plugins: {
-            legend: {
-              labels: {
-                fontColor: theme.palette.mode === "dark" ? "white" : "#666"
-              }
-            },
-            datalabels: {
-              color: "white",
-              font: {
-                weight: "bold",
-                size: "30"
-              },
-              formatter: v => v ? v : ""
-            }
-          }
-        }
-      })
-    })]
-  });
-}

package/dist/Charts/Doughnut/SubmittedRecordings/SubmittedRecordings.js

@@ -1,87 +0,0 @@
-import Card from "@mui/material/Card";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Bar } from "react-chartjs-2";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
-export default function SubmittedRecordings({
-  t = text => text,
-  recordings = []
-}) {
-  const theme = useTheme();
-  function constructAnswersChartData(recordings = []) {
-    const recordingMap = new Map();
-    recordings.map(recording => {
-      recordingMap.set(recording.meetingTopic, recordingMap.get(recording.meetingTopic) ? recordingMap.get(recording.meetingTopic) + 1 : 1);
-      return false;
-    });
-    return {
-      labels: Array.from(recordingMap.keys()).map(l => t(l)),
-      datasets: [{
-        label: t("submissions"),
-        data: Array.from(recordingMap.values()),
-        backgroundColor: theme.palette.info.main,
-        hoverBackgroundColor: theme.palette.info.dark
-      }]
-    };
-  }
-  const answersChartData = constructAnswersChartData(recordings);
-  return /*#__PURE__*/_jsxs(Card, {
-    sx: {
-      marginBottom: 2,
-      boxShadow: 3
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        p: 2,
-        backgroundColor: "#8300A1"
-      },
-      children: /*#__PURE__*/_jsx(Stack, {
-        direction: "row",
-        sx: {
-          justifyContent: "space-between",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          gutterBottom: true,
-          variant: "h5",
-          component: "div",
-          sx: {
-            color: "white"
-          },
-          children: t("submitted_recordings")
-        })
-      })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        p: 2
-      },
-      children: /*#__PURE__*/_jsx(Bar, {
-        data: answersChartData,
-        options: {
-          indexAxis: "y",
-          animation: false,
-          plugins: {
-            legend: {
-              labels: {
-                fontColor: theme.palette.mode === "dark" ? "white" : "#666"
-              }
-            },
-            datalabels: {
-              color: "white",
-              font: {
-                weight: "bold",
-                size: "30"
-              }
-            }
-          }
-        }
-      })
-    })]
-  });
-}

package/dist/Chat/BottomBar/BottomBar.js

@@ -1,375 +0,0 @@
-import { useRef, useState, useEffect } from "react";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { alpha } from "@mui/material/styles";
-import { makeStyles } from "tss-react/mui";
-import Toolbar from "@mui/material/Toolbar";
-import Input from "@mui/material/Input";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Divider from "@mui/material/Divider";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
-import MicIcon from "@mui/icons-material/Mic";
-import MicOffIcon from "@mui/icons-material/MicOff";
-import SendIcon from "@mui/icons-material/Send";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
-import UpdateIcon from "@mui/icons-material/Create";
-import { Adornment } from "../../Forms/InputHelper/InputHelper";
-import { Button } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
-import { grey } from "@mui/material/colors";
-// import EmojiInput from '../../Misc/EmojiInput/EmojiInput';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()((theme, {
-  isListening,
-  isPrimaryColor,
-  disableInput,
-  focusInput
-}) => ({
-  paper: {
-    backgroundColor: isPrimaryColor ? theme.palette.primary.main : null,
-    color: isPrimaryColor ? theme.palette.primary.contrastText : null
-  },
-  root: {
-    flexShrink: 0,
-    alignItems: "center",
-    minHeight: "auto",
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1)
-  },
-  micButton: {
-    color: isListening ? theme.palette.error.main : "inherit"
-  },
-  input: {
-    boxShadow: focusInput ? `${alpha(theme.palette.primary.main, 0.9)} 0 0 0 2px` : theme.shadows[1],
-    flexGrow: 1,
-    borderRadius: theme.shape.borderRadius,
-    border: "1px solid transparent",
-    backgroundColor: disableInput || isListening ? theme.palette.mode === "light" ? alpha(theme.palette.common.black, 0.45) : alpha(theme.palette.common.black, 0.6) : alpha(theme.palette.common.white, 0.15),
-    "&:hover": {
-      border: !disableInput && !isListening && "1px solid white"
-    },
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1)
-    },
-    "&:focus-within": {
-      boxShadow: `0 0 13px ${theme.palette.primary.contrastText}, ${theme.shadows[1]}`,
-      height: "100%"
-    }
-  },
-  inputRoot: {
-    color: "inherit",
-    width: "100%"
-  },
-  inputInput: {
-    padding: theme.spacing(1),
-    width: "100%"
-  }
-}));
-export default function BottomBar({
-  t = text => text,
-  isPrimaryColor = false,
-  inputName = "",
-  inputValue = "",
-  disableInput,
-  focusInput,
-  placeholder = "",
-  autoComplete = "off",
-  handleInputChange,
-  handleKeyPress,
-  handleUpdate,
-  isListening,
-  handleAttachFile,
-  handleRecord,
-  handleAdd,
-  handleSend,
-  characters,
-  browserSupportsSpeechRecognition,
-  transcriptConfidence,
-  isConfidenceOpen,
-  handleCloseConfidence,
-  handleOpenConfidence,
-  finalTranscript,
-  inputRef,
-  username,
-  authenticated,
-  isChallengeBot = false
-}) {
-  const {
-    classes
-  } = useStyles({
-    isListening,
-    isPrimaryColor,
-    disableInput,
-    focusInput
-  });
-  const theme = useTheme();
-  // although unused changing the state onclick of input helps keep cursor position accurate
-  // eslint-disable-next-line no-unused-vars
-  const [currentInput, setCurrentInput] = useState(null);
-  const [showMicReminder, setShowMicReminder] = useState(false);
-  const reminderTime = 14 * 24 * 60 * 60 * 1000; // 14 days, can be adjusted
-  const reminderKey = `voice-reminder-timestamp-${username}`; // add username so students on shared devices can receive individual reminders
-
-  useEffect(() => {
-    if (!browserSupportsSpeechRecognition || disableInput || isListening) return;
-    const nextReminder = parseInt(localStorage.getItem(reminderKey) || "0");
-    if (!Number.isFinite(nextReminder) || nextReminder <= 0 || Date.now() > nextReminder) {
-      setShowMicReminder(true);
-    }
-  }, [browserSupportsSpeechRecognition, disableInput, isListening, reminderKey]);
-  const onClickRecord = e => {
-    localStorage.setItem(`voice-reminder-timestamp-${username}`, String(Date.now() + reminderTime)); // Dont show reminder animation for another 2 weeks
-    setShowMicReminder(false);
-    handleRecord(e);
-  };
-  const handleSelectCurrentInput = event => {
-    setCurrentInput(event.target);
-  };
-  const textInput = useRef(null);
-  const activeRef = inputRef ? inputRef : textInput;
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const TextInput = /*#__PURE__*/_jsx("div", {
-    className: classes.input,
-    id: "keyboardInput",
-    children: /*#__PURE__*/_jsx(Input, {
-      id: inputName,
-      "data-cy": "chatInput",
-      name: inputName,
-      value: inputValue,
-      disabled: disableInput || isListening,
-      onChange: handleInputChange,
-      onKeyPress: handleKeyPress,
-      placeholder: browserSupportsSpeechRecognition && handleRecord ? isSmallScreen ? t("bot_input_mobile_placeholder") : t("bot_input_placeholder") : placeholder,
-      inputProps: {
-        maxLength: isChallengeBot ? 600 : 200,
-        sx: () => ({
-          "&::placeholder": {
-            opacity: 1
-          }
-        })
-      },
-      disableUnderline: true,
-      multiline: true,
-      minRows: isChallengeBot ? 3 : 1,
-      maxRows: 3,
-      autoComplete: autoComplete,
-      inputRef: activeRef,
-      onClick: handleSelectCurrentInput,
-      sx: theme => ({
-        "& .MuiInputBase-input.Mui-disabled": {
-          WebkitTextFillColor: disableInput || isListening ? theme.palette.success.light : "",
-          fontWeight: 800
-        }
-      }),
-      endAdornment: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!isSmallScreen && /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          sx: {
-            color: "inherit",
-            opacity: inputValue.length >= (isChallengeBot ? 600 : 200) ? 1 : 0.7,
-            marginRight: 1,
-            fontWeight: 700,
-            fontSize: "0.75rem"
-          },
-          children: `${inputValue.length}/${isChallengeBot ? 600 : 200}`
-        }), /*#__PURE__*/_jsx(Adornment, {
-          t: t,
-          emoji: true,
-          name: inputName,
-          value: inputValue,
-          onChange: handleInputChange,
-          adornmentPosition: "end",
-          iconButtonEdge: false,
-          characters: characters,
-          activeRef: activeRef,
-          whiteIcon: true,
-          whiteCharacters: (disableInput || isListening) && theme.palette.mode === "dark" ? true : false
-        })]
-      }),
-      classes: {
-        root: classes.inputRoot,
-        input: classes.inputInput
-      }
-    })
-  });
-  const buttonRef = useRef(null);
-  useEffect(() => {
-    const handleEnterKey = event => {
-      if (event.key === "Enter") {
-        buttonRef.current.click();
-      }
-    };
-    if (isListening) {
-      window.addEventListener("keydown", handleEnterKey);
-      return () => {
-        window.removeEventListener("keydown", handleEnterKey);
-      };
-    }
-    if (!isListening && !disableInput) {
-      activeRef.current.focus();
-    }
-  }, [isListening, activeRef, disableInput]);
-  useEffect(() => {
-    if (activeRef.current) {
-      activeRef.current.focus();
-    }
-  }, [inputValue]);
-  return /*#__PURE__*/_jsxs(Paper, {
-    square: true,
-    className: classes.paper,
-    children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(Toolbar, {
-      className: classes.root,
-      children: [handleAttachFile && /*#__PURE__*/_jsx(Tooltip, {
-        title: t("attach_file"),
-        children: /*#__PURE__*/_jsx(IconButton, {
-          color: "inherit",
-          edge: "start",
-          size: "large",
-          children: /*#__PURE__*/_jsx(AttachFileIcon, {})
-        })
-      }), browserSupportsSpeechRecognition && handleRecord && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: t("record_message"),
-          children: isSmallScreen ? /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx(IconButton, {
-              sx: {
-                color: isListening ? "red" : "inherit",
-                animation: showMicReminder ? "reminder 1.6s ease-in-out infinite" : "none",
-                "@keyframes reminder": {
-                  "0%": {
-                    boxShadow: "0 0 0 0 rgba(255, 255, 255, 1)"
-                  },
-                  "70%": {
-                    boxShadow: "0 0 0 2px rgba(255, 255, 255, 0.5)"
-                  },
-                  "100%": {
-                    boxShadow: "0 0 0 0 rgba(255, 255, 255, 0)"
-                  }
-                }
-              },
-              onClick: onClickRecord,
-              edge: "start",
-              id: "voiceInput",
-              disabled: disableInput,
-              size: "large",
-              ref: buttonRef,
-              children: isListening ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(MicIcon, {})
-            })
-          }) : /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx(Button, {
-              sx: {
-                color: "white",
-                backgroundColor: isListening ? "#d32f2f" : "#2d7b30",
-                padding: 1,
-                paddingLeft: 2,
-                paddingRight: 2,
-                borderRadius: 3,
-                border: "1.5px solid black",
-                "&:hover": {
-                  backgroundColor: isListening ? "#d32f2f" : "#2d7b30",
-                  border: "1.5px solid white"
-                },
-                animation: showMicReminder ? "reminder 1.6s ease-in-out infinite" : "none",
-                "@keyframes reminder": {
-                  "0%": {
-                    transform: "scale(1)"
-                  },
-                  "50%": {
-                    transform: "scale(1.05)"
-                  },
-                  "100%": {
-                    transform: "scale(1)"
-                  }
-                }
-              },
-              onClick: onClickRecord,
-              startIcon: isListening ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(MicIcon, {}),
-              color: isListening ? "error" : "success",
-              disabled: disableInput,
-              variant: "contained",
-              id: "voiceInput",
-              ref: buttonRef,
-              children: isListening ? t("click_to_stop") : t("click_to_speak")
-            })
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          sx: {
-            marginLeft: 1.5,
-            marginRight: 1,
-            my: "auto",
-            fontWeight: "bold"
-          },
-          children: t("or")
-        })]
-      }), !browserSupportsSpeechRecognition && /*#__PURE__*/_jsx(Tooltip, {
-        title: t("only_available_on_chrome"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            className: classes.micButton,
-            edge: "start",
-            disabled: true,
-            id: "voiceInput",
-            size: "large",
-            children: /*#__PURE__*/_jsx(MicOffIcon, {})
-          })
-        })
-      }), transcriptConfidence && finalTranscript && inputValue && inputValue.trim() === finalTranscript.trim() ? /*#__PURE__*/_jsx(Tooltip, {
-        title: /*#__PURE__*/_jsx(Typography, {
-          children: `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`
-        }),
-        placement: "top-start",
-        open: isConfidenceOpen,
-        onClose: handleCloseConfidence,
-        onOpen: handleOpenConfidence,
-        role: "status",
-        "aria-live": "assertive",
-        "aria-label": `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`,
-        children: TextInput
-      }) : TextInput, handleUpdate && /*#__PURE__*/_jsx(Tooltip, {
-        title: t("update"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleUpdate,
-            disabled: !inputValue,
-            edge: "end",
-            size: "large",
-            children: /*#__PURE__*/_jsx(UpdateIcon, {})
-          })
-        })
-      }), handleAdd && /*#__PURE__*/_jsx(Tooltip, {
-        title: t("add_message"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-cy": "add-message",
-            color: "inherit",
-            onClick: handleAdd,
-            disabled: !inputValue,
-            edge: "end",
-            size: "large",
-            children: /*#__PURE__*/_jsx(AddCircleIcon, {})
-          })
-        })
-      }), handleSend && /*#__PURE__*/_jsx(Tooltip, {
-        title: t("send"),
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            "data-cy": "sendButton",
-            color: "inherit",
-            onClick: handleSend,
-            disabled: !inputValue || disableInput || isListening,
-            edge: "end",
-            id: "sendMessage",
-            size: "large",
-            value: "Send",
-            "aria-label": "Send",
-            children: /*#__PURE__*/_jsx(SendIcon, {})
-          })
-        })
-      })]
-    })]
-  });
-}

package/dist/Chat/BottomBar/package.json

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