@nualang/nualang-ui-components 0.1.1433 → 0.1.1434

package/dist/Cards/SessionReportCard/SessionReportCard.js

@@ -0,0 +1,658 @@
+import { useId, useState } from "react";
+import { Box, Button, Card, Chip, CircularProgress, Collapse, IconButton, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import HelpOutlinedIcon from "@mui/icons-material/HelpOutlined";
+import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
+import StarIcon from "@mui/icons-material/Star";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import SpellcheckIcon from "@mui/icons-material/Spellcheck";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import PDFViewer from "../../Dialogs/PDFViewer/PDFViewer";
+import level1Rubric from "../../Dialogs/PDFViewer/rubrics/level1Rubric.pdf";
+import level2Rubric from "../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf";
+import level3Rubric from "../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf";
+import level4Rubric from "../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf";
+import { SESSION_REPORT_RATINGS, RATING_LABEL_KEYS, domainLabelKey, getRatedDomains } from "./sessionReportDomains";
+import { CorrectionList } from "./SessionReportFocusAreas";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const RUBRIC_PDFS = {
+  1: level1Rubric,
+  2: level2Rubric,
+  3: level3Rubric,
+  4: level4Rubric
+};
+const readStoredCollapsed = (storageKey, fallback) => {
+  if (!storageKey) return fallback;
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return stored === null ? fallback : stored === "true";
+  } catch {
+    return fallback;
+  }
+};
+const writeStoredCollapsed = (storageKey, collapsed) => {
+  if (!storageKey) return;
+  try {
+    window.localStorage.setItem(storageKey, String(collapsed));
+  } catch {
+    // Private mode or blocked storage: the card still works, it just won't remember.
+  }
+};
+
+// "New" chip
+const readSeen = newStorageKey => {
+  if (!newStorageKey) return true;
+  try {
+    return window.localStorage.getItem(newStorageKey) === "true";
+  } catch {
+    return false;
+  }
+};
+const writeSeen = newStorageKey => {
+  if (!newStorageKey) return;
+  try {
+    window.localStorage.setItem(newStorageKey, "true");
+  } catch {
+    // Blocked storage: the chip is hidden for the rest of this visit only.
+  }
+};
+
+// Read by screen readers, not shown. (MUI's visuallyHidden is in @mui/utils, only a
+// transitive dependency here.)
+const visuallyHidden = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap"
+};
+const describeDomain = ({
+  evidence = "",
+  grammarInsights = []
+}) => [evidence, ...grammarInsights].filter(Boolean).join(" ");
+function Meter({
+  rating,
+  size
+}) {
+  const filled = SESSION_REPORT_RATINGS.indexOf(rating) + 1;
+  const small = size === "small";
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: "flex",
+      gap: small ? "2px" : "3px",
+      flex: "none"
+    },
+    "aria-hidden": "true",
+    children: SESSION_REPORT_RATINGS.map((step, index) => /*#__PURE__*/_jsx(Box, {
+      "data-filled": index < filled,
+      sx: {
+        width: small ? 14 : 20,
+        height: small ? 4 : 5,
+        borderRadius: small ? "2px" : "3px",
+        bgcolor: index < filled ? "primary.main" : "action.disabledBackground"
+      }
+    }, step))
+  });
+}
+function RubricLink({
+  rubricLevel,
+  t
+}) {
+  const [open, setOpen] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [scale, setScale] = useState(1);
+  const pdfUrl = RUBRIC_PDFS[rubricLevel];
+  if (!pdfUrl) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: t("rubric_info_desc"),
+      children: /*#__PURE__*/_jsx(Button, {
+        size: "small",
+        color: "primary",
+        startIcon: /*#__PURE__*/_jsx(HelpOutlinedIcon, {
+          sx: {
+            fontSize: 18
+          }
+        }),
+        onClick: () => setOpen(true),
+        "data-cy": "session-report-rubric",
+        "data-rubric-level": rubricLevel,
+        sx: {
+          flex: "none",
+          fontSize: 12,
+          fontWeight: 700,
+          letterSpacing: ".04em",
+          textTransform: "uppercase"
+        },
+        children: t("rubric_info")
+      })
+    }), /*#__PURE__*/_jsx(PDFViewer, {
+      open: open,
+      handleClose: () => setOpen(false),
+      pdfUrl: pdfUrl,
+      pageNumber: pageNumber,
+      setPageNumber: setPageNumber,
+      scale: scale,
+      setScale: setScale,
+      t: t
+    })]
+  });
+}
+function AiGeneratedLabel({
+  showText,
+  t
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    "data-cy": "session-report-ai-label",
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5,
+      flex: "none",
+      color: "text.secondary"
+    },
+    children: [/*#__PURE__*/_jsx(AutoAwesomeIcon, {
+      sx: {
+        fontSize: 16,
+        color: "primary.main"
+      }
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "span",
+      "data-cy": "session-report-ai-label-text",
+      sx: {
+        fontSize: 12,
+        whiteSpace: "nowrap",
+        display: showText ? {
+          xs: "none",
+          sm: "inline"
+        } : "none"
+      },
+      children: t("ai_generated_report")
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: t("ai_generated_report_tooltip"),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        "aria-label": t("ai_generated_report_tooltip"),
+        "data-cy": "session-report-ai-info",
+        sx: {
+          p: 0.25,
+          color: "text.secondary"
+        },
+        children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
+          sx: {
+            fontSize: 16
+          }
+        })
+      })
+    })]
+  });
+}
+function CollapsedSummary({
+  suggestedProficiency,
+  ratedDomains,
+  t
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [suggestedProficiency && /*#__PURE__*/_jsxs(Box, {
+      "data-cy": "session-report-level-chip",
+      sx: theme => ({
+        display: "flex",
+        alignItems: "center",
+        gap: 0.75,
+        flex: "none",
+        px: 1.25,
+        py: "3px",
+        borderRadius: 1,
+        border: `1px dashed ${alpha(theme.palette.primary.main, 0.5)}`
+      }),
+      children: [/*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        sx: {
+          fontSize: 11,
+          color: "text.secondary",
+          whiteSpace: "nowrap"
+        },
+        children: t("suggested_level")
+      }), /*#__PURE__*/_jsx(Typography, {
+        component: "span",
+        sx: {
+          fontSize: 13,
+          fontWeight: 700,
+          whiteSpace: "nowrap"
+        },
+        children: suggestedProficiency
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      "data-cy": "session-report-mini-meters",
+      sx: {
+        display: {
+          xs: "none",
+          lg: "flex"
+        },
+        flex: "1 1 auto",
+        gap: 2,
+        ml: 0.75,
+        minWidth: 0,
+        overflow: "hidden"
+      },
+      children: ratedDomains.map(({
+        key,
+        shortKey,
+        rating
+      }) => /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "5px",
+          flex: "0 1 auto",
+          minWidth: 62
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          title: t(shortKey),
+          sx: {
+            fontSize: 11,
+            color: "text.secondary",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: t(shortKey)
+        }), /*#__PURE__*/_jsx(Meter, {
+          rating: rating,
+          size: "small"
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          sx: visuallyHidden,
+          children: t(RATING_LABEL_KEYS[rating])
+        })]
+      }, key))
+    })]
+  });
+}
+function Tile({
+  icon: Icon,
+  title,
+  children,
+  dataCy
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    "data-cy": dataCy,
+    sx: {
+      display: "flex",
+      gap: 1.25,
+      p: "10px 12px",
+      borderRadius: 1.5,
+      bgcolor: "action.hover"
+    },
+    children: [/*#__PURE__*/_jsx(Icon, {
+      sx: {
+        fontSize: 18,
+        color: "primary.main",
+        flex: "none"
+      }
+    }), /*#__PURE__*/_jsxs(Typography, {
+      component: "div",
+      sx: {
+        fontSize: 13,
+        lineHeight: 1.5,
+        color: "text.secondary",
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        component: "b",
+        sx: {
+          display: "block",
+          fontSize: 13,
+          fontWeight: 700,
+          color: "text.primary"
+        },
+        children: title
+      }), children]
+    })]
+  });
+}
+function FocusTile({
+  icon,
+  title,
+  domain,
+  text,
+  t,
+  dataCy
+}) {
+  return /*#__PURE__*/_jsx(Tile, {
+    icon: icon,
+    title: `${title}: ${t(domainLabelKey(domain))}`,
+    dataCy: dataCy,
+    children: text
+  });
+}
+function CriterionRow({
+  labelKey,
+  level,
+  rating,
+  description,
+  t,
+  dataCy
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    "data-cy": dataCy,
+    sx: {
+      py: 1.25,
+      display: "flex",
+      flexDirection: "column",
+      gap: 0.75,
+      borderBottom: 1,
+      borderColor: "divider"
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.25
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontSize: 14,
+          flex: 1
+        },
+        children: t(labelKey)
+      }), /*#__PURE__*/_jsx(Meter, {
+        rating: rating
+      }), /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontSize: 12.5,
+          color: "primary.main",
+          width: 80,
+          textAlign: "right",
+          whiteSpace: "nowrap"
+        },
+        children: t(RATING_LABEL_KEYS[rating])
+      })]
+    }), /*#__PURE__*/_jsxs(Typography, {
+      sx: {
+        fontSize: 12.5,
+        lineHeight: 1.45,
+        color: "text.secondary"
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        component: "span",
+        sx: {
+          color: "text.primary"
+        },
+        children: [level, " \xB7 "]
+      }), description]
+    })]
+  });
+}
+function ExpandedBody({
+  report,
+  ratedDomains,
+  corrections,
+  t
+}) {
+  const {
+    summary,
+    suggestedProficiency,
+    areaOfStrength,
+    areaForGrowth
+  } = report;
+  const hasCriteria = ratedDomains.length > 0;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: "grid",
+      gridTemplateColumns: {
+        xs: "1fr",
+        md: hasCriteria ? "minmax(0, 0.9fr) minmax(0, 1.1fr)" : "1fr"
+      }
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        p: "16px 20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.75,
+        borderStyle: "solid",
+        borderColor: "divider",
+        borderWidth: 0,
+        borderRightWidth: {
+          xs: 0,
+          md: hasCriteria ? 1 : 0
+        },
+        borderBottomWidth: {
+          xs: hasCriteria ? 1 : 0,
+          md: 0
+        }
+      },
+      children: [suggestedProficiency && /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1.25
+        },
+        "data-cy": "session-report-suggested-level",
+        children: [/*#__PURE__*/_jsx(SignalCellularAltIcon, {
+          sx: {
+            fontSize: 22,
+            color: "primary.main"
+          }
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 11,
+              color: "text.secondary"
+            },
+            children: t("suggested_level")
+          }), /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 17,
+              fontWeight: 700
+            },
+            children: suggestedProficiency
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          m: 0,
+          fontSize: 13.5,
+          lineHeight: 1.55,
+          textWrap: "pretty"
+        },
+        "data-cy": "session-report-text",
+        children: summary
+      }), areaOfStrength && /*#__PURE__*/_jsx(FocusTile, {
+        icon: StarIcon,
+        title: t("session_report_strength"),
+        domain: areaOfStrength.domain,
+        text: areaOfStrength.explanation,
+        t: t,
+        dataCy: "session-report-strength"
+      }), areaForGrowth && /*#__PURE__*/_jsx(FocusTile, {
+        icon: TrendingUpIcon,
+        title: t("session_report_growth"),
+        domain: areaForGrowth.domain,
+        text: areaForGrowth.suggestion,
+        t: t,
+        dataCy: "session-report-growth"
+      }), corrections.length > 0 && /*#__PURE__*/_jsx(Tile, {
+        icon: SpellcheckIcon,
+        title: t("language_corrections_to_review"),
+        dataCy: "session-report-corrections",
+        children: /*#__PURE__*/_jsx(CorrectionList, {
+          corrections: corrections,
+          fontSize: 13
+        })
+      })]
+    }), hasCriteria && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        p: "6px 20px 10px"
+      },
+      "data-cy": "session-report-criteria",
+      children: ratedDomains.map(domain => /*#__PURE__*/_jsx(CriterionRow, {
+        labelKey: domain.labelKey,
+        level: domain.level,
+        rating: domain.rating,
+        description: describeDomain(domain),
+        t: t,
+        dataCy: `session-report-domain-${domain.key}`
+      }, domain.key))
+    })]
+  });
+}
+function SessionReportCard({
+  sessionReport,
+  defaultCollapsed = true,
+  storageKey,
+  newStorageKey,
+  corrections = [],
+  t = text => text
+}) {
+  const bodyId = useId();
+  const [collapsed, setCollapsed] = useState(() => readStoredCollapsed(storageKey, defaultCollapsed));
+  const [seen, setSeen] = useState(() => readSeen(newStorageKey));
+  if (!sessionReport?.status) return null;
+  const {
+    status,
+    report
+  } = sessionReport;
+  const isReady = status === "ready" && report;
+  const ratedDomains = isReady ? getRatedDomains(report.domains) : [];
+  const toggle = () => {
+    if (!seen) {
+      writeSeen(newStorageKey);
+      setSeen(true);
+    }
+    setCollapsed(current => {
+      writeStoredCollapsed(storageKey, !current);
+      return !current;
+    });
+  };
+  return /*#__PURE__*/_jsxs(Card, {
+    "data-cy": "session-report-card",
+    "data-collapsed": isReady ? collapsed : undefined,
+    sx: {
+      borderRadius: 1
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.75,
+        px: 2.5,
+        py: 1.5,
+        borderBottom: isReady && !collapsed ? 1 : 0,
+        borderColor: "divider"
+      },
+      children: [isReady && collapsed && !seen && /*#__PURE__*/_jsx(Chip, {
+        label: t("session_report_new"),
+        color: "primary",
+        size: "small",
+        "data-cy": "session-report-new",
+        sx: {
+          flex: "none",
+          height: 20,
+          fontSize: 11,
+          fontWeight: 700
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        component: "h2",
+        onClick: isReady ? toggle : undefined,
+        "data-cy": "session-report-title",
+        sx: {
+          fontSize: 20,
+          whiteSpace: "nowrap",
+          cursor: isReady ? "pointer" : "default"
+        },
+        children: t("session_report")
+      }), /*#__PURE__*/_jsx(AiGeneratedLabel, {
+        showText: !(isReady && collapsed),
+        t: t
+      }), isReady ? /*#__PURE__*/_jsx(Box, {
+        onClick: toggle,
+        "data-cy": "session-report-summary-area",
+        sx: {
+          flex: 1,
+          minWidth: 0,
+          overflow: "hidden",
+          alignSelf: "stretch",
+          display: "flex",
+          alignItems: "center",
+          gap: 1.75,
+          cursor: "pointer"
+        },
+        children: collapsed && /*#__PURE__*/_jsx(CollapsedSummary, {
+          suggestedProficiency: report.suggestedProficiency,
+          ratedDomains: ratedDomains,
+          t: t
+        })
+      }) : /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: 1.75
+        },
+        children: [status === "pending" && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          "data-cy": "session-report-pending",
+          children: [/*#__PURE__*/_jsx(CircularProgress, {
+            size: 16
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: t("session_feedback_preparing")
+          })]
+        }), status === "failed" && /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          sx: {
+            color: "text.secondary"
+          },
+          "data-cy": "session-report-unavailable",
+          children: t("session_feedback_unavailable")
+        })]
+      }), isReady && !collapsed && /*#__PURE__*/_jsx(RubricLink, {
+        rubricLevel: report.rubricLevel,
+        t: t
+      }), isReady && /*#__PURE__*/_jsx(IconButton, {
+        onClick: toggle,
+        "aria-expanded": !collapsed,
+        "aria-controls": bodyId,
+        "aria-label": t("session_report"),
+        "data-cy": "session-report-toggle",
+        size: "small",
+        sx: {
+          flex: "none",
+          color: "text.secondary"
+        },
+        children: collapsed ? /*#__PURE__*/_jsx(ExpandMoreIcon, {
+          sx: {
+            fontSize: 22
+          }
+        }) : /*#__PURE__*/_jsx(ExpandLessIcon, {
+          sx: {
+            fontSize: 22
+          }
+        })
+      })]
+    }), isReady && /*#__PURE__*/_jsx(Collapse, {
+      in: !collapsed,
+      id: bodyId,
+      unmountOnExit: true,
+      children: /*#__PURE__*/_jsx(ExpandedBody, {
+        report: report,
+        ratedDomains: ratedDomains,
+        corrections: corrections,
+        t: t
+      })
+    })]
+  });
+}
+export default SessionReportCard;