@nualang/nualang-ui-components 0.1.1440 → 0.1.1441

package/dist/Forms/Settings/Settings.js

@@ -4,8 +4,9 @@ import General from "./Tabs/General/General";
 import Display from "./Tabs/Display/Display";
 import Subscription from "./Tabs/Subscription/Subscription";
 import EmailNotifications from "./Tabs/EmailNotifications/EmailNotifications";
+import ClassroomAISettings from "./Tabs/ClassroomAISettings/ClassroomAISettings";
 import { checkIsGeneratedEmail } from "../../utils";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export default function Settings({
   t = text => text,
   generalOnSubmit,
@@ -32,107 +33,107 @@ export default function Settings({
   username,
   verificationStatus,
   gameAward,
-  submitAvatar
+  submitAvatar,
+  isCreator = false,
+  // Props for the AI settings tab (see ClassroomAISettings). Teachers only.
+  classroomAISettings
 }) {
-  let tabs;
   const {
     email
   } = generalInitialValues;
   const isGenerated = checkIsGeneratedEmail(email);
-  if (subscription.isPaidUser || subscription.isUpgradePossible) {
-    tabs = [{
-      label: t("general"),
-      id: "General"
-    }, {
-      label: t("display"),
-      id: "Display"
-    }, {
-      label: t("subscription"),
-      id: "Subscription"
-    }, !isGenerated ? {
-      label: t("email_notifications"),
-      id: "EmailNotifications"
-    } : null];
-  } else {
-    tabs = [{
-      label: t("general"),
-      id: "General"
-    }, {
-      label: t("display"),
-      id: "Display"
-    }];
-  }
-  let initialTabValue;
+  const hasSubscriptionTabs = subscription.isPaidUser || subscription.isUpgradePossible;
+
+  // Each tab with its panel, so the two can't fall out of step when a tab is
+  // left out. ResponsiveTabs matches them by position.
+  const panels = [{
+    label: t("general"),
+    id: "General",
+    content: /*#__PURE__*/_jsx(General, {
+      "data-cy": "settings_general_tab",
+      t: t,
+      enableReinitialize: enableReinitialize,
+      initialValues: generalInitialValues,
+      onSubmit: generalOnSubmit,
+      languages: languages,
+      forLanguages: forLanguages,
+      initialAvatarAttributes: initialAvatarAttributes,
+      saveAvatarToDynamo: saveAvatarToDynamo,
+      verificationStatus: verificationStatus,
+      gameAward: gameAward,
+      username: username,
+      submitAvatar: submitAvatar
+    })
+  }, {
+    label: t("display"),
+    id: "Display",
+    content: /*#__PURE__*/_jsx(Display, {
+      "data-cy": "settings_display_tab",
+      t: t,
+      toggleTheme: toggleTheme
+    })
+  }, hasSubscriptionTabs && {
+    label: t("subscription"),
+    id: "Subscription",
+    content: /*#__PURE__*/_jsx(Subscription, {
+      "data-cy": "settings_subscription_tab",
+      t: t,
+      subscription: subscription,
+      cancelSubscription: cancelSubscription,
+      groupSubscriptions: groupSubscriptions,
+      managePlanButtonText: managePlanButtonText,
+      handleManagePlan: handleManagePlan,
+      handleLeaveGroup: handleLeaveGroup,
+      leaveGroupButtonText: leaveGroupButtonText,
+      username: username
+    })
+  }, hasSubscriptionTabs && !isGenerated && {
+    label: t("email_notifications"),
+    id: "EmailNotifications",
+    content: /*#__PURE__*/_jsx(EmailNotifications, {
+      "data-cy": "settings_email_notifications_tab",
+      t: t,
+      EmailNotificationEvents: EmailNotificationEvents,
+      handleSubmit: emailNotificationOnSubmit,
+      userEmailNotificationSettingsObject: userEmailNotificationSettingsObject,
+      checkBoxState: checkBoxState
+    })
+  }, isCreator && classroomAISettings && {
+    label: t("ai_settings"),
+    id: "AISettings",
+    content: /*#__PURE__*/_jsx(ClassroomAISettings, {
+      "data-cy": "settings_ai_settings_tab",
+      t: t,
+      ...classroomAISettings
+    })
+  }].filter(Boolean);
+  const tabs = panels.map(({
+    label,
+    id
+  }) => ({
+    label,
+    id
+  }));
+  let initialTabValue = 0;
   if (window.location.hash) {
-    const selectedTab = window.location.hash;
-    initialTabValue = tabs.findIndex(tab => tab.id === selectedTab.replace("#", ""));
-  } else {
-    initialTabValue = 0;
+    const selectedTab = window.location.hash.replace("#", "");
+    initialTabValue = Math.max(tabs.findIndex(tab => tab.id === selectedTab), 0);
   }
-  const filteredTabs = tabs.filter(tab => tab !== null);
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(ResponsiveTabs, {
+    children: /*#__PURE__*/_jsx(ResponsiveTabs, {
       t: t,
-      tabs: filteredTabs,
+      tabs: tabs,
       initialValue: initialTabValue,
       scrollable: true,
-      children: [/*#__PURE__*/_jsx(Box, {
-        sx: {
-          py: 1
-        },
-        children: /*#__PURE__*/_jsx(General, {
-          "data-cy": "settings_general_tab",
-          t: t,
-          enableReinitialize: enableReinitialize,
-          initialValues: generalInitialValues,
-          onSubmit: generalOnSubmit,
-          languages: languages,
-          forLanguages: forLanguages,
-          initialAvatarAttributes: initialAvatarAttributes,
-          saveAvatarToDynamo: saveAvatarToDynamo,
-          verificationStatus: verificationStatus,
-          gameAward: gameAward,
-          username: username,
-          submitAvatar: submitAvatar
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          py: 1
-        },
-        children: /*#__PURE__*/_jsx(Display, {
-          "data-cy": "settings_display_tab",
-          t: t,
-          toggleTheme: toggleTheme
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          py: 1
-        },
-        children: /*#__PURE__*/_jsx(Subscription, {
-          "data-cy": "settings_subscription_tab",
-          t: t,
-          subscription: subscription,
-          cancelSubscription: cancelSubscription,
-          groupSubscriptions: groupSubscriptions,
-          managePlanButtonText: managePlanButtonText,
-          handleManagePlan: handleManagePlan,
-          handleLeaveGroup: handleLeaveGroup,
-          leaveGroupButtonText: leaveGroupButtonText,
-          username: username
-        })
-      }), !isGenerated && /*#__PURE__*/_jsx(Box, {
+      children: panels.map(({
+        id,
+        content
+      }) => /*#__PURE__*/_jsx(Box, {
         sx: {
           py: 1
         },
-        children: /*#__PURE__*/_jsx(EmailNotifications, {
-          "data-cy": "settings_email_notifications_tab",
-          t: t,
-          EmailNotificationEvents: EmailNotificationEvents,
-          handleSubmit: emailNotificationOnSubmit,
-          userEmailNotificationSettingsObject: userEmailNotificationSettingsObject,
-          checkBoxState: checkBoxState
-        })
-      })]
+        children: content
+      }, id))
     })
   });
 }

package/dist/Forms/Settings/Settings.test.js

@@ -0,0 +1,65 @@
+import { render, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { MemoryRouter } from "react-router";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Settings from "./Settings";
+
+// This repo has no jest-dom matchers and no auto-cleanup, so assertions are
+// plain and each test unmounts.
+import { jsx as _jsx } from "react/jsx-runtime";
+const setup = (props = {}) => render(/*#__PURE__*/_jsx(MemoryRouter, {
+  children: /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: createTheme(),
+    children: /*#__PURE__*/_jsx(Settings, {
+      generalInitialValues: {
+        email: "teacher@example.com"
+      },
+      generalOnSubmit: () => {},
+      classroomAISettings: {
+        classrooms: [{
+          classroomId: "r1",
+          classroomName: "Room 1"
+        }],
+        onSave: vi.fn()
+      },
+      ...props
+    })
+  })
+}));
+describe("Settings AI settings tab", () => {
+  it("is shown to teachers only", () => {
+    const teacher = setup({
+      isCreator: true
+    });
+    expect(teacher.queryByRole("tab", {
+      name: "ai_settings"
+    })).not.toBe(null);
+    teacher.unmount();
+    const student = setup({
+      isCreator: false
+    });
+    expect(student.queryByRole("tab", {
+      name: "ai_settings"
+    })).toBe(null);
+    student.unmount();
+  });
+  it("opens the AI settings panel when there are no subscription tabs", () => {
+    const {
+      getByRole,
+      getByText,
+      unmount
+    } = setup({
+      isCreator: true,
+      subscription: {
+        isUpgradePossible: false,
+        isPaidUser: false
+      }
+    });
+    fireEvent.click(getByRole("tab", {
+      name: "ai_settings"
+    }));
+    expect(getByText("ai_overview_desc")).toBeTruthy();
+    expect(getByText("Room 1")).toBeTruthy();
+    unmount();
+  });
+});

package/dist/Forms/Settings/Tabs/ClassroomAISettings/ClassroomAISettings.js

@@ -0,0 +1,535 @@
+import { useEffect, useRef, useState } from "react";
+import { Alert, Box, Button, Card, CardContent, CardHeader, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, Menu, MenuItem, Switch, Tab, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tabs, Tooltip, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import LockIcon from "@mui/icons-material/Lock";
+import InfoIcon from "@mui/icons-material/Info";
+import HelpIcon from "@mui/icons-material/Help";
+import { AI_DISABLED, AI_ENABLED, AI_FIELDS, aiLockedBy, classroomAIValue, courseAIValue } from "../../../../utils/aiControls";
+
+// The three columns, in the same order and with the same labels and help
+// text as the classroom's own AI settings.
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const COLUMNS = [{
+  field: AI_FIELDS.all,
+  label: "limit_ai",
+  description: "limit_ai_desc",
+  info: "limit_ai_info",
+  dataCy: "ai"
+}, {
+  field: AI_FIELDS.chatbot,
+  label: "chatbot_ai",
+  description: "chatbot_ai_desc",
+  info: "dynamic_responses_info",
+  dataCy: "chatbot-ai"
+}, {
+  field: AI_FIELDS.discuss,
+  label: "discuss_ai",
+  description: "discuss_ai_desc",
+  dataCy: "discuss-ai"
+}];
+
+// The all-AI column overrides the other two, so it is shaded to stand out. In
+// the classroom this is shown by nesting the other switches under it.
+const mainColumnSx = field => field === AI_FIELDS.all ? {
+  bgcolor: theme => alpha(theme.palette.primary.main, 0.08)
+} : {};
+
+// Saves for "apply to all" go a few at a time, not all at once.
+const APPLY_ALL_BATCH = 5;
+const isArchived = classroom => classroom.visibility === "archived";
+
+// The classroom's lock notice, as in its own settings: one for a lock on all
+// AI, another when only some switches are locked.
+const lockNotice = classroom => {
+  if (aiLockedBy(classroom, AI_FIELDS.all)) return "ai_locked_notice";
+  const isPartlyLocked = [AI_FIELDS.chatbot, AI_FIELDS.discuss].some(field => aiLockedBy(classroom, field));
+  return isPartlyLocked ? "ai_partly_locked_notice" : null;
+};
+const isAllLimited = classroom => classroomAIValue(classroom, AI_FIELDS.all) === AI_DISABLED;
+
+// Why a switch can't be changed, if it can't. Matches the classroom's own
+// settings: a locked switch is fixed, and a feature is fixed while all AI is
+// off.
+const fixedReason = (classroom, field) => {
+  if (isArchived(classroom)) return "archived";
+  if (aiLockedBy(classroom, field)) return "locked";
+  if (field !== AI_FIELDS.all && isAllLimited(classroom)) return "all_limited";
+  return null;
+};
+
+// While all AI is off a feature shows as off, which is what students get.
+const shownValue = (classroom, field) => field !== AI_FIELDS.all && isAllLimited(classroom) ? AI_DISABLED : classroomAIValue(classroom, field);
+
+// Courses in the classroom that have turned the chatbot off for themselves.
+const overriddenCourseCount = classroom => {
+  const courseSettings = classroom.courseSettings || {};
+  const courseIds = Array.isArray(classroom.courses) ? classroom.courses : Object.keys(courseSettings);
+  return courseIds.filter(courseId => courseAIValue(courseSettings[courseId]) === AI_DISABLED).length;
+};
+
+// Whether a switch's local value still beats the classroom's own. The
+// classroom wins once it shows the saved value, when the switch is locked, or
+// when it has changed since a save that has finished. A refetch that still has
+// the old value doesn't drop a save in progress.
+const isOverridden = (classroom, field, entry) => {
+  if (!classroom || !entry) return false;
+  if (aiLockedBy(classroom, field)) return false;
+  const current = classroomAIValue(classroom, field);
+  if (current === entry.value) return false;
+  return !(entry.settled && current !== entry.base);
+};
+const overriddenEntries = (classroom, entries = {}) => Object.entries(entries).filter(([field, entry]) => isOverridden(classroom, field, entry));
+
+// The account Settings tab that lists every classroom the teacher created or
+// co-teaches, with its AI switches. Each switch saves on its own through `onSave`, and
+// each column can be set for every classroom at once.
+export default function ClassroomAISettings({
+  t = text => text,
+  classrooms = [],
+  isLoading = false,
+  isError = false,
+  // (classroomId, fields) => Promise. `fields` holds only what changed.
+  onSave,
+  onOpenClassroom
+}) {
+  // Values saved here, keyed by classroomId then field. Each is
+  // { value, base, settled, token }: `base` is the classroom's value when the
+  // save started, and `settled` is set once onSave resolves.
+  const [pending, setPending] = useState({});
+  const pendingRef = useRef(pending);
+  pendingRef.current = pending;
+  const lastToken = useRef(0);
+  const [saving, setSaving] = useState({});
+  // True for the whole of an "apply to all", including between batches.
+  const [isApplyingAll, setIsApplyingAll] = useState(false);
+  const [menu, setMenu] = useState(null);
+  const [confirm, setConfirm] = useState(null);
+  const [result, setResult] = useState(null);
+  // Archived classrooms are in their own view so they don't clutter the list.
+  const [view, setView] = useState("active");
+  const rows = classrooms.map(classroom => ({
+    ...classroom,
+    ...Object.fromEntries(overriddenEntries(classroom, pending[classroom.classroomId]).map(([field, entry]) => [field, entry.value]))
+  }));
+
+  // Drop local values the classrooms have caught up with or replaced.
+  useEffect(() => {
+    setPending(prev => {
+      let changed = false;
+      const next = {};
+      Object.entries(prev).forEach(([classroomId, entries]) => {
+        const classroom = classrooms.find(c => c.classroomId === classroomId);
+        const kept = overriddenEntries(classroom, entries);
+        if (kept.length !== Object.keys(entries).length) changed = true;
+        if (kept.length > 0) next[classroomId] = Object.fromEntries(kept);
+      });
+      return changed ? next : prev;
+    });
+  }, [classrooms]);
+  const archivedRows = rows.filter(isArchived);
+  const activeRows = rows.filter(classroom => !isArchived(classroom));
+  const isArchivedView = view === "archived" && archivedRows.length > 0;
+  const shownRows = isArchivedView ? archivedRows : activeRows;
+  const savingKey = (classroomId, field) => `${classroomId}:${field}`;
+
+  // Sets one field's local value from the current one. Returning undefined
+  // removes it, leaving the classroom's other fields alone.
+  const updateEntry = (classroomId, field, update) => setPending(prev => {
+    const {
+      [field]: entry,
+      ...others
+    } = prev[classroomId] || {};
+    const next = update(entry);
+    return {
+      ...prev,
+      [classroomId]: next ? {
+        ...others,
+        [field]: next
+      } : others
+    };
+  });
+  const save = async (classroom, field, value) => {
+    const {
+      classroomId
+    } = classroom;
+    const key = savingKey(classroomId, field);
+    const source = classrooms.find(c => c.classroomId === classroomId) || classroom;
+    // An earlier save the classroom hasn't caught up with yet, to put back if
+    // this one fails.
+    const previous = pendingRef.current[classroomId]?.[field];
+    lastToken.current += 1;
+    const token = lastToken.current;
+    const isThisSave = entry => entry && entry.token === token;
+    setSaving(prev => ({
+      ...prev,
+      [key]: true
+    }));
+    updateEntry(classroomId, field, () => ({
+      value,
+      base: classroomAIValue(source, field),
+      settled: false,
+      token
+    }));
+    try {
+      await onSave(classroomId, {
+        [field]: value
+      });
+      updateEntry(classroomId, field, entry => isThisSave(entry) ? {
+        ...entry,
+        settled: true
+      } : entry);
+      return true;
+    } catch (error) {
+      console.error(error);
+      // Put the switch back to what it showed before.
+      updateEntry(classroomId, field, entry => isThisSave(entry) ? previous : entry);
+      return false;
+    } finally {
+      setSaving(prev => {
+        const {
+          [key]: _done,
+          ...rest
+        } = prev; // eslint-disable-line no-unused-vars
+        return rest;
+      });
+    }
+  };
+  const handleToggle = async (classroom, field, checked) => {
+    setResult(null);
+    const ok = await save(classroom, field, checked ? AI_ENABLED : AI_DISABLED);
+    if (!ok) {
+      setResult({
+        severity: "error",
+        message: `${t("ai_overview_save_failed")}: ${classroom.classroomName}`
+      });
+    }
+  };
+
+  // Classrooms "apply to all" would change: not fixed, and not already set.
+  const applyAllTargets = (field, value) => rows.filter(classroom => !fixedReason(classroom, field) && classroomAIValue(classroom, field) !== value);
+  const applyAll = async ({
+    field,
+    value
+  }) => {
+    setConfirm(null);
+    setResult(null);
+    const targets = applyAllTargets(field, value);
+    const failed = [];
+    setIsApplyingAll(true);
+    try {
+      for (let i = 0; i < targets.length; i += APPLY_ALL_BATCH) {
+        const batch = targets.slice(i, i + APPLY_ALL_BATCH);
+        // eslint-disable-next-line no-await-in-loop
+        const results = await Promise.all(batch.map(classroom => save(classroom, field, value)));
+        results.forEach((ok, index) => {
+          if (!ok) failed.push(batch[index].classroomName);
+        });
+      }
+    } finally {
+      setIsApplyingAll(false);
+    }
+    const savedCount = targets.length - failed.length;
+    setResult(failed.length > 0 ? {
+      severity: "error",
+      message: `${t("ai_overview_apply_all_failed")}: ${failed.join(", ")}`
+    } : {
+      severity: "success",
+      message: `${t("ai_overview_apply_all_saved")}: ${savedCount}`
+    });
+  };
+  const openConfirm = (field, value) => {
+    setMenu(null);
+    setConfirm({
+      field,
+      value,
+      count: applyAllTargets(field, value).length
+    });
+  };
+
+  // While anything saves, no switch can be changed, so an edit can't overlap a
+  // queued "apply to all" save.
+  const isApplying = isApplyingAll || Object.keys(saving).length > 0;
+  const renderHeader = ({
+    field,
+    label,
+    description,
+    info,
+    dataCy
+  }) => /*#__PURE__*/_jsxs(TableCell, {
+    align: "center",
+    sx: mainColumnSx(field),
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        fontWeight: field === AI_FIELDS.all ? "bold" : undefined
+      },
+      children: [t(label), /*#__PURE__*/_jsx(Tooltip, {
+        title: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: t(description)
+          }), info && /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            sx: {
+              mt: 1
+            },
+            children: t(info)
+          })]
+        }),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          sx: {
+            padding: 0,
+            marginLeft: 1
+          },
+          "aria-label": t(description),
+          "data-cy": `overview-help-${dataCy}`,
+          children: /*#__PURE__*/_jsx(HelpIcon, {
+            fontSize: "small"
+          })
+        })
+      })]
+    }), !isArchivedView && /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(Button, {
+        size: "small",
+        disabled: isApplying,
+        onClick: event => setMenu({
+          anchor: event.currentTarget,
+          field
+        }),
+        "data-cy": `overview-apply-all-${dataCy}`,
+        children: t("ai_overview_apply_all")
+      })
+    })]
+  }, field);
+  const renderSwitch = (classroom, {
+    field,
+    label,
+    dataCy
+  }) => {
+    const reason = fixedReason(classroom, field);
+    const isSaving = Boolean(saving[savingKey(classroom.classroomId, field)]);
+    const control = /*#__PURE__*/_jsx(Switch, {
+      checked: shownValue(classroom, field) !== AI_DISABLED,
+      onChange: event => handleToggle(classroom, field, event.target.checked),
+      disabled: Boolean(reason) || isApplying,
+      slotProps: {
+        input: {
+          "aria-label": `${t(label)} - ${classroom.classroomName}`
+        }
+      },
+      "data-cy": `overview-${dataCy}-${classroom.classroomId}`
+    });
+    return /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: [control, reason === "locked" && /*#__PURE__*/_jsx(Tooltip, {
+        title: t(lockNotice(classroom)),
+        children: /*#__PURE__*/_jsx(LockIcon, {
+          fontSize: "small",
+          color: "action",
+          "data-cy": `overview-locked-${dataCy}-${classroom.classroomId}`
+        })
+      }), isSaving && /*#__PURE__*/_jsx(CircularProgress, {
+        size: 16,
+        sx: {
+          ml: 1
+        }
+      })]
+    });
+  };
+  let body;
+  if (isLoading) {
+    body = /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        p: 3
+      },
+      children: /*#__PURE__*/_jsx(CircularProgress, {})
+    });
+  } else if (isError) {
+    body = /*#__PURE__*/_jsx(Alert, {
+      severity: "error",
+      children: t("ai_overview_load_failed")
+    });
+  } else if (rows.length === 0) {
+    body = /*#__PURE__*/_jsx(Typography, {
+      color: "textSecondary",
+      "data-cy": "ai-overview-empty",
+      children: t("ai_overview_empty")
+    });
+  } else if (shownRows.length === 0) {
+    body = /*#__PURE__*/_jsx(Typography, {
+      color: "textSecondary",
+      "data-cy": "ai-overview-no-active",
+      children: t("ai_overview_no_active")
+    });
+  } else {
+    body = /*#__PURE__*/_jsx(TableContainer, {
+      sx: {
+        overflowX: "auto"
+      },
+      children: /*#__PURE__*/_jsxs(Table, {
+        size: "small",
+        "aria-label": t("ai_settings"),
+        children: [/*#__PURE__*/_jsx(TableHead, {
+          children: /*#__PURE__*/_jsxs(TableRow, {
+            children: [/*#__PURE__*/_jsx(TableCell, {
+              children: t("classroom")
+            }), COLUMNS.map(renderHeader), /*#__PURE__*/_jsx(TableCell, {})]
+          })
+        }), /*#__PURE__*/_jsx(TableBody, {
+          children: shownRows.map(classroom => {
+            const overrides = overriddenCourseCount(classroom);
+            const notice = lockNotice(classroom);
+            return /*#__PURE__*/_jsxs(TableRow, {
+              "data-cy": `ai-overview-row-${classroom.classroomId}`,
+              children: [/*#__PURE__*/_jsxs(TableCell, {
+                children: [/*#__PURE__*/_jsx(Typography, {
+                  variant: "body2",
+                  children: classroom.classroomName
+                }), isArchived(classroom) && /*#__PURE__*/_jsx(Chip, {
+                  size: "small",
+                  label: t("archived"),
+                  sx: {
+                    mt: 0.5
+                  }
+                }), overrides > 0 && /*#__PURE__*/_jsxs(Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    mt: 0.5
+                  },
+                  "data-cy": `overview-course-overrides-${classroom.classroomId}`,
+                  children: [/*#__PURE__*/_jsx(InfoIcon, {
+                    fontSize: "small",
+                    color: "info",
+                    sx: {
+                      mr: 0.5
+                    }
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    variant: "caption",
+                    color: "textSecondary",
+                    children: `${t("ai_overview_course_overrides")}: ${overrides}`
+                  })]
+                }), notice && /*#__PURE__*/_jsx(Alert, {
+                  severity: "info",
+                  icon: /*#__PURE__*/_jsx(LockIcon, {
+                    fontSize: "small"
+                  }),
+                  sx: {
+                    mt: 0.5,
+                    py: 0,
+                    maxWidth: 360
+                  },
+                  "data-cy": `overview-locked-notice-${classroom.classroomId}`,
+                  children: /*#__PURE__*/_jsx(Typography, {
+                    variant: "caption",
+                    children: t(notice)
+                  })
+                })]
+              }), COLUMNS.map(column => /*#__PURE__*/_jsx(TableCell, {
+                align: "center",
+                sx: mainColumnSx(column.field),
+                children: renderSwitch(classroom, column)
+              }, column.field)), /*#__PURE__*/_jsx(TableCell, {
+                align: "right",
+                children: onOpenClassroom && /*#__PURE__*/_jsx(Button, {
+                  size: "small",
+                  onClick: () => onOpenClassroom(classroom.classroomId),
+                  children: t("ai_overview_open_classroom")
+                })
+              })]
+            }, classroom.classroomId);
+          })
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Card, {
+    "data-cy": "ai-overview",
+    children: [/*#__PURE__*/_jsx(CardHeader, {
+      title: t("ai_settings"),
+      sx: {
+        px: 3,
+        py: 2
+      }
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(CardContent, {
+      sx: {
+        p: 3
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        color: "textSecondary",
+        sx: {
+          mb: 2
+        },
+        children: t("ai_overview_desc")
+      }), result && /*#__PURE__*/_jsx(Alert, {
+        severity: result.severity,
+        onClose: () => setResult(null),
+        sx: {
+          mb: 2
+        },
+        "data-cy": "ai-overview-result",
+        children: result.message
+      }), archivedRows.length > 0 && /*#__PURE__*/_jsxs(Tabs, {
+        value: isArchivedView ? "archived" : "active",
+        onChange: (_event, value) => setView(value),
+        sx: {
+          mb: 2
+        },
+        children: [/*#__PURE__*/_jsx(Tab, {
+          value: "active",
+          label: `${t("active")} (${activeRows.length})`,
+          "data-cy": "ai-overview-active-tab"
+        }), /*#__PURE__*/_jsx(Tab, {
+          value: "archived",
+          label: `${t("archived")} (${archivedRows.length})`,
+          "data-cy": "ai-overview-archived-tab"
+        })]
+      }), body]
+    }), /*#__PURE__*/_jsxs(Menu, {
+      anchorEl: menu?.anchor,
+      open: Boolean(menu),
+      onClose: () => setMenu(null),
+      children: [/*#__PURE__*/_jsx(MenuItem, {
+        onClick: () => openConfirm(menu.field, AI_ENABLED),
+        "data-cy": "overview-apply-all-enable",
+        children: t("ai_overview_enable_all")
+      }), /*#__PURE__*/_jsx(MenuItem, {
+        onClick: () => openConfirm(menu.field, AI_DISABLED),
+        "data-cy": "overview-apply-all-disable",
+        children: t("ai_overview_disable_all")
+      })]
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: Boolean(confirm),
+      onClose: () => setConfirm(null),
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: t("ai_overview_apply_all")
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        children: [/*#__PURE__*/_jsx(DialogContentText, {
+          children: confirm && `${t(COLUMNS.find(c => c.field === confirm.field).label)}: ${t(confirm.value === AI_ENABLED ? "ai_allowed" : "ai_limited")}. ${t("ai_overview_apply_all_count")}: ${confirm.count}`
+        }), /*#__PURE__*/_jsx(DialogContentText, {
+          sx: {
+            mt: 1
+          },
+          children: t("ai_overview_apply_all_skips")
+        })]
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: () => setConfirm(null),
+          children: t("cancel")
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          disabled: !confirm || confirm.count === 0,
+          onClick: () => applyAll(confirm),
+          "data-cy": "overview-apply-all-confirm",
+          children: t("confirm")
+        })]
+      })]
+    })]
+  });
+}

package/dist/Forms/Settings/Tabs/ClassroomAISettings/ClassroomAISettings.test.js

@@ -0,0 +1,400 @@
+import { act, render, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import ClassroomAISettings from "./ClassroomAISettings";
+
+// This repo has no jest-dom matchers and no auto-cleanup, so assertions are
+// plain and each test unmounts - matching AISettings.test.jsx.
+import { jsx as _jsx } from "react/jsx-runtime";
+const classrooms = [{
+  classroomId: "r1",
+  classroomName: "Room 1"
+}, {
+  classroomId: "r2",
+  classroomName: "Room 2",
+  isDynamicResponsesEnabled: "disabled"
+}, {
+  classroomId: "r3",
+  classroomName: "Room 3",
+  isDynamicResponsesEnabled: "disabled",
+  aiLockedBy: {
+    isDynamicResponsesEnabled: "customer"
+  }
+}, {
+  classroomId: "r4",
+  classroomName: "Room 4",
+  visibility: "archived"
+}];
+const deferred = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return {
+    promise,
+    resolve,
+    reject
+  };
+};
+const setup = (props = {}) => {
+  const onSave = props.onSave || vi.fn().mockResolvedValue({});
+  const ui = rows => /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: createTheme(),
+    children: /*#__PURE__*/_jsx(ClassroomAISettings, {
+      ...props,
+      classrooms: rows,
+      onSave: onSave
+    })
+  });
+  const utils = render(ui(props.classrooms || classrooms));
+  const toggle = (label, name) => utils.getByRole("switch", {
+    name: `${label} - ${name}`
+  });
+  // New classroom records from the parent, as after a refetch.
+  const rerenderWith = rows => utils.rerender(ui(rows));
+  return {
+    ...utils,
+    onSave,
+    toggle,
+    rerenderWith
+  };
+};
+describe("ClassroomAISettings", () => {
+  it("shows each classroom's switches, with unset ones on", () => {
+    const {
+      toggle,
+      unmount
+    } = setup();
+    expect(toggle("limit_ai", "Room 1").checked).toBe(true);
+    expect(toggle("chatbot_ai", "Room 1").checked).toBe(true);
+    expect(toggle("chatbot_ai", "Room 2").checked).toBe(false);
+    unmount();
+  });
+  it("fixes locked switches and says why", () => {
+    const {
+      toggle,
+      unmount
+    } = setup();
+    expect(toggle("chatbot_ai", "Room 3").disabled).toBe(true);
+    expect(toggle("limit_ai", "Room 3").disabled).toBe(false);
+    const notice = document.querySelector('[data-cy="overview-locked-notice-r3"]');
+    expect(notice.textContent).toBe("ai_partly_locked_notice");
+    expect(document.querySelector('[data-cy="overview-locked-notice-r1"]')).toBe(null);
+    unmount();
+  });
+  it("uses the full lock notice when all AI is locked", () => {
+    const {
+      unmount
+    } = setup({
+      classrooms: [{
+        classroomId: "r1",
+        classroomName: "Room 1",
+        aiLockedBy: {
+          isAIEnabled: "customer"
+        }
+      }]
+    });
+    const notice = document.querySelector('[data-cy="overview-locked-notice-r1"]');
+    expect(notice.textContent).toBe("ai_locked_notice");
+    unmount();
+  });
+  it("keeps archived classrooms in their own view", () => {
+    const {
+      toggle,
+      queryByRole,
+      getByText,
+      unmount
+    } = setup();
+    expect(queryByRole("switch", {
+      name: "limit_ai - Room 4"
+    })).toBe(null);
+    fireEvent.click(getByText("archived (1)"));
+    expect(toggle("limit_ai", "Room 4").disabled).toBe(true);
+    expect(queryByRole("switch", {
+      name: "limit_ai - Room 1"
+    })).toBe(null);
+    // Nothing to apply to in the archived view.
+    expect(document.querySelector('[data-cy="overview-apply-all-ai"]')).toBe(null);
+    unmount();
+  });
+  it("has no tabs when nothing is archived", () => {
+    const {
+      queryByText,
+      unmount
+    } = setup({
+      classrooms: classrooms.slice(0, 3)
+    });
+    expect(queryByText("active (3)")).toBe(null);
+    unmount();
+  });
+  it("says when every classroom is archived", () => {
+    const {
+      getByText,
+      unmount
+    } = setup({
+      classrooms: [classrooms[3]]
+    });
+    expect(getByText("ai_overview_no_active")).toBeTruthy();
+    unmount();
+  });
+  it("has help on each column", () => {
+    const {
+      unmount
+    } = setup();
+    ["ai", "chatbot-ai", "discuss-ai"].forEach(dataCy => {
+      expect(document.querySelector(`[data-cy="overview-help-${dataCy}"]`)).toBeTruthy();
+    });
+    unmount();
+  });
+  it("shows features as off and fixed while all AI is off", () => {
+    const {
+      toggle,
+      unmount
+    } = setup({
+      classrooms: [{
+        classroomId: "r1",
+        classroomName: "Room 1",
+        isAIEnabled: "disabled"
+      }]
+    });
+    expect(toggle("chatbot_ai", "Room 1").checked).toBe(false);
+    expect(toggle("chatbot_ai", "Room 1").disabled).toBe(true);
+    unmount();
+  });
+  it("saves only the switch that changed", async () => {
+    const {
+      toggle,
+      onSave,
+      unmount
+    } = setup();
+    fireEvent.click(toggle("discuss_ai", "Room 1"));
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
+    expect(onSave).toHaveBeenCalledWith("r1", {
+      isDiscussAIFeedbackEnabled: "disabled"
+    });
+    unmount();
+  });
+  it("puts a switch back and says so when saving fails", async () => {
+    const onSave = vi.fn().mockRejectedValue(new Error("500"));
+    const {
+      toggle,
+      findByText,
+      unmount
+    } = setup({
+      onSave
+    });
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    fireEvent.click(toggle("chatbot_ai", "Room 1"));
+    await findByText("ai_overview_save_failed: Room 1");
+    expect(toggle("chatbot_ai", "Room 1").checked).toBe(true);
+    unmount();
+  });
+  it("applies to all, skipping fixed classrooms and ones already set", async () => {
+    const {
+      getByText,
+      onSave,
+      findByText,
+      unmount
+    } = setup();
+    fireEvent.click(document.querySelector('[data-cy="overview-apply-all-chatbot-ai"]'));
+    fireEvent.click(getByText("ai_overview_disable_all"));
+    getByText(/ai_overview_apply_all_count: 1/);
+    fireEvent.click(document.querySelector('[data-cy="overview-apply-all-confirm"]'));
+    await findByText("ai_overview_apply_all_saved: 1");
+    // Room 2 is already off, Room 3 is locked and Room 4 is archived.
+    expect(onSave).toHaveBeenCalledTimes(1);
+    expect(onSave).toHaveBeenCalledWith("r1", {
+      isDynamicResponsesEnabled: "disabled"
+    });
+    unmount();
+  });
+  it("lists the classrooms that failed in apply to all", async () => {
+    const onSave = vi.fn(classroomId => classroomId === "r2" ? Promise.reject(new Error("500")) : Promise.resolve({}));
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const {
+      getByText,
+      findByText,
+      unmount
+    } = setup({
+      onSave
+    });
+    fireEvent.click(document.querySelector('[data-cy="overview-apply-all-ai"]'));
+    fireEvent.click(getByText("ai_overview_disable_all"));
+    fireEvent.click(document.querySelector('[data-cy="overview-apply-all-confirm"]'));
+    await findByText("ai_overview_apply_all_failed: Room 2");
+    unmount();
+  });
+  describe("after a save", () => {
+    const room = (fields = {}) => [{
+      classroomId: "r1",
+      classroomName: "Room 1",
+      ...fields
+    }];
+    const chatbot = "chatbot_ai";
+    it("shows a newer value once the save has been acknowledged", async () => {
+      const save = deferred();
+      const onSave = vi.fn(() => save.promise);
+      const {
+        toggle,
+        rerenderWith,
+        unmount
+      } = setup({
+        classrooms: room(),
+        onSave
+      });
+      fireEvent.click(toggle(chatbot, "Room 1"));
+      await act(async () => save.resolve({}));
+      rerenderWith(room({
+        isDynamicResponsesEnabled: "disabled"
+      }));
+      expect(toggle(chatbot, "Room 1").checked).toBe(false);
+      rerenderWith(room({
+        isDynamicResponsesEnabled: "enabled"
+      }));
+      expect(toggle(chatbot, "Room 1").checked).toBe(true);
+      unmount();
+    });
+    it("shows a newer value when acknowledged before the save resolves", async () => {
+      const save = deferred();
+      const onSave = vi.fn(() => save.promise);
+      const {
+        toggle,
+        rerenderWith,
+        unmount
+      } = setup({
+        classrooms: room(),
+        onSave
+      });
+      fireEvent.click(toggle(chatbot, "Room 1"));
+      rerenderWith(room({
+        isDynamicResponsesEnabled: "disabled"
+      }));
+      await act(async () => save.resolve({}));
+      rerenderWith(room({
+        isDynamicResponsesEnabled: "enabled"
+      }));
+      expect(toggle(chatbot, "Room 1").checked).toBe(true);
+      unmount();
+    });
+    it("keeps a save in progress through a refetch with the old value", async () => {
+      const save = deferred();
+      const onSave = vi.fn(() => save.promise);
+      const {
+        toggle,
+        rerenderWith,
+        unmount
+      } = setup({
+        classrooms: room(),
+        onSave
+      });
+      fireEvent.click(toggle(chatbot, "Room 1"));
+      rerenderWith(room());
+      expect(toggle(chatbot, "Room 1").checked).toBe(false);
+      await act(async () => save.resolve({}));
+      expect(toggle(chatbot, "Room 1").checked).toBe(false);
+      unmount();
+    });
+    it("shows a customer lock over a saved value", async () => {
+      const {
+        toggle,
+        rerenderWith,
+        unmount
+      } = setup({
+        classrooms: room({
+          isDynamicResponsesEnabled: "disabled"
+        })
+      });
+      fireEvent.click(toggle(chatbot, "Room 1"));
+      await waitFor(() => expect(toggle(chatbot, "Room 1").disabled).toBe(false));
+      expect(toggle(chatbot, "Room 1").checked).toBe(true);
+      rerenderWith(room({
+        isDynamicResponsesEnabled: "disabled",
+        aiLockedBy: {
+          isDynamicResponsesEnabled: "customer"
+        }
+      }));
+      expect(toggle(chatbot, "Room 1").checked).toBe(false);
+      expect(toggle(chatbot, "Room 1").disabled).toBe(true);
+      unmount();
+    });
+    it("keeps an earlier saved value when a later save fails", async () => {
+      const onSave = vi.fn().mockResolvedValueOnce({}).mockRejectedValueOnce(new Error("500"));
+      vi.spyOn(console, "error").mockImplementation(() => {});
+      const {
+        toggle,
+        findByText,
+        unmount
+      } = setup({
+        classrooms: room(),
+        onSave
+      });
+      fireEvent.click(toggle(chatbot, "Room 1"));
+      await waitFor(() => expect(toggle(chatbot, "Room 1").disabled).toBe(false));
+      expect(toggle(chatbot, "Room 1").checked).toBe(false);
+      fireEvent.click(toggle(chatbot, "Room 1"));
+      await findByText("ai_overview_save_failed: Room 1");
+      expect(toggle(chatbot, "Room 1").checked).toBe(false);
+      unmount();
+    });
+  });
+  it("keeps every switch fixed until apply to all has finished", async () => {
+    const six = [1, 2, 3, 4, 5, 6].map(n => ({
+      classroomId: `r${n}`,
+      classroomName: `Room ${n}`
+    }));
+    const saves = {};
+    const onSave = vi.fn(classroomId => {
+      saves[classroomId] = deferred();
+      return saves[classroomId].promise;
+    });
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const {
+      toggle,
+      getByText,
+      findByText,
+      queryByRole,
+      unmount
+    } = setup({
+      classrooms: six,
+      onSave
+    });
+    fireEvent.click(document.querySelector('[data-cy="overview-apply-all-chatbot-ai"]'));
+    fireEvent.click(getByText("ai_overview_disable_all"));
+    fireEvent.click(document.querySelector('[data-cy="overview-apply-all-confirm"]'));
+
+    // The first batch is saving; Room 6 is queued and can't be changed. The
+    // dialog hides the rest of the page until it has closed.
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(5));
+    await waitFor(() => expect(queryByRole("dialog")).toBe(null));
+    expect(toggle("chatbot_ai", "Room 6").disabled).toBe(true);
+    expect(toggle("discuss_ai", "Room 6").disabled).toBe(true);
+    expect(toggle("limit_ai", "Room 1").disabled).toBe(true);
+
+    // One of the first batch fails; the second batch starts.
+    await act(async () => {
+      ["r1", "r3", "r4", "r5"].forEach(id => saves[id].resolve({}));
+      saves.r2.reject(new Error("500"));
+    });
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(6));
+    expect(toggle("chatbot_ai", "Room 6").disabled).toBe(true);
+    expect(toggle("limit_ai", "Room 1").disabled).toBe(true);
+    await act(async () => saves.r6.resolve({}));
+    await findByText("ai_overview_apply_all_failed: Room 2");
+    expect(toggle("chatbot_ai", "Room 6").disabled).toBe(false);
+    expect(toggle("chatbot_ai", "Room 2").disabled).toBe(false);
+    expect(toggle("chatbot_ai", "Room 2").checked).toBe(true);
+    unmount();
+  });
+  it("says when there are no classrooms", () => {
+    const {
+      getByText,
+      unmount
+    } = setup({
+      classrooms: []
+    });
+    expect(getByText("ai_overview_empty")).toBeTruthy();
+    unmount();
+  });
+});

package/dist/Forms/Settings/Tabs/ClassroomAISettings/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1440",
+  "version": "0.1.1441",
   "type": "module",
   "main": "dist/index.js",
   "files": [