@mitodl/smoot-design 6.1.0 → 6.2.0

package/dist/cjs/bundles/RemoteTutorDrawer/FlashcardsScreen.js

@@ -75,13 +75,13 @@ const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
     return (React.createElement(Container, { ref: containerRef },
         React.createElement(Flashcard, { ref: flashcardRef, content: flashcards[cardIndex], "aria-label": `Flashcard ${cardIndex + 1} of ${flashcards.length}` }),
         React.createElement(Navigation, null,
-            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small" },
+            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small", "aria-label": "Previous card" },
                 React.createElement(react_2.RiArrowLeftLine, { "aria-hidden": true })),
             React.createElement(Page, null,
                 cardIndex + 1,
                 " / ",
                 flashcards.length),
-            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small" },
+            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small", "aria-label": "Next card" },
                 React.createElement(react_2.RiArrowRightLine, { "aria-hidden": true })))));
 };
 exports.FlashcardsScreen = FlashcardsScreen;

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemoteTutorDrawer = void 0;
+// @format
 const React = require("react");
 const react_1 = require("react");
 const styled_1 = require("@emotion/styled");
@@ -215,26 +216,28 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
         };
     }, [messageOrigin, target]);
     (0, react_1.useEffect)(() => {
-        scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo({
+        var _a;
+        (_a = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scrollElement, {
             top: tab === "chat" ? scrollElement.scrollHeight : 0,
         });
     }, [tab, scrollElement]);
     const conversationStarters = (0, react_1.useMemo)(() => {
+        var _a;
         if (!payload)
             return [];
         return (payload.chat.conversationStarters ||
-            ((response === null || response === void 0 ? void 0 : response.flashcards)
+            (((_a = response === null || response === void 0 ? void 0 : response.flashcards) === null || _a === void 0 ? void 0 : _a.length) && response.flashcards.length >= 3
                 ? randomItems(response.flashcards, 3).map((flashcard) => ({
                     content: flashcard.question,
                 }))
                 : DEFAULT_VIDEO_STARTERS));
     }, [payload, response]);
     if (!payload) {
-        return null;
+        return React.createElement("div", { "data-testid": "remote-tutor-drawer-waiting" });
     }
     const { blockType, chat } = payload;
     const hasTabs = blockType === "video";
-    return (React.createElement(Drawer_1.default, { className: className, PaperProps: {
+    return (React.createElement(Drawer_1.default, { "data-testid": "remote-tutor-drawer", className: className, PaperProps: {
             ref: paperRefCallback,
             sx: {
                 width: "900px",
@@ -249,7 +252,7 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
         React.createElement(Header, null,
             React.createElement(Title, null,
                 payload.title ? React.createElement(react_2.RiSparkling2Line, null) : null,
-                React.createElement(Typography_1.default, { variant: "body1" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                React.createElement(Typography_1.default, { variant: "body1", component: "h2" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
                     "Ask",
                     React.createElement("strong", null, "TIM"),
                     payload.title.replace("AskTIM", ""))) : (payload.title))),

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.js

@@ -54,21 +54,8 @@ const IFrame = ({ payload }) => {
 };
 const meta = {
     title: "smoot-design/AI/RemoteTutorDrawer",
-    render: ({ target }, { parameters: { blockType, chat } }) => (React.createElement(React.Fragment, null,
-        blockType === "problem" ? (React.createElement(IFrame, { payload: {
-                blockType,
-                target,
-                title: "AskTIM for help with Problem: Derivatives 1.1",
-                chat: Object.assign({ apiUrl: TEST_API_STREAMING, initialMessages: INITIAL_MESSAGES, conversationStarters: STARTERS }, chat),
-            } })) : null,
-        blockType === "video" ? (React.createElement(IFrame, { payload: {
-                blockType,
-                target,
-                chat: Object.assign({ apiUrl: TEST_API_STREAMING, initialMessages: INITIAL_MESSAGES, conversationStarters: STARTERS }, chat),
-                summary: {
-                    apiUrl: CONTENT_FILE_URL,
-                },
-            } })) : null,
+    render: ({ target }, { parameters: { payload } }) => (React.createElement(React.Fragment, null,
+        React.createElement(IFrame, { payload: payload }),
         React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, { target: target, messageOrigin: "http://localhost:6006" }))),
 };
 exports.default = meta;
@@ -77,9 +64,15 @@ exports.ProblemStory = {
         target: "problem-frame",
     },
     parameters: {
-        blockType: "problem",
-        chat: {
-            conversationStarters: STARTERS,
+        payload: {
+            blockType: "problem",
+            target: "problem-frame",
+            title: "AskTIM for help with Problem: Derivatives 1.1",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                initialMessages: INITIAL_MESSAGES,
+                conversationStarters: STARTERS,
+            },
         },
     },
 };
@@ -88,11 +81,16 @@ exports.EntryScreenStory = {
         target: "entry-screen-frame",
     },
     parameters: {
-        blockType: "problem",
-        chat: {
-            conversationStarters: STARTERS,
-            entryScreenEnabled: true,
-            entryScreenTitle: "AskTIM about this problem",
+        payload: {
+            blockType: "problem",
+            target: "entry-screen-frame",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                initialMessages: INITIAL_MESSAGES,
+                conversationStarters: STARTERS,
+                entryScreenEnabled: true,
+                entryScreenTitle: "AskTIM about this problem",
+            },
         },
     },
 };
@@ -104,9 +102,16 @@ exports.VideoStory = {
         target: "video-frame",
     },
     parameters: {
-        blockType: "video",
-        chat: {
-            conversationStarters: STARTERS,
+        payload: {
+            blockType: "video",
+            target: "video-frame",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                conversationStarters: STARTERS,
+            },
+            summary: {
+                apiUrl: CONTENT_FILE_URL,
+            },
         },
         msw: {
             handlers: [
@@ -127,10 +132,15 @@ exports.FlashcardConversationStartersStory = {
         target: "starters-frame",
     },
     parameters: {
-        blockType: "video",
-        chat: {
-            conversationStarters: undefined,
-            initialMessages: undefined,
+        payload: {
+            blockType: "video",
+            target: "starters-frame",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+            },
+            summary: {
+                apiUrl: CONTENT_FILE_URL,
+            },
         },
         msw: {
             handlers: [

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.test.js

@@ -0,0 +1,241 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const user_event_1 = require("@testing-library/user-event");
+const RemoteTutorDrawer_1 = require("./RemoteTutorDrawer");
+const ThemeProvider_1 = require("../../components/ThemeProvider/ThemeProvider");
+const React = require("react");
+const msw_1 = require("msw");
+const node_1 = require("msw/node");
+const TEST_API_STREAMING = "http://localhost:4567/test";
+const CONTENT_FILE_URL = "http://localhost:4567/api/v1/contentfiles/1";
+const CONTENT_RESPONSE = {
+    count: 1,
+    next: null,
+    previous: null,
+    results: [
+        {
+            id: 1,
+            summary: "This is a test summary",
+            flashcards: [
+                {
+                    question: "Test question 1?",
+                    answer: "Test answer 1",
+                },
+                {
+                    question: "Test question 2?",
+                    answer: "Test answer 2",
+                },
+                {
+                    question: "Test question 3?",
+                    answer: "Test answer 3",
+                },
+            ],
+        },
+    ],
+};
+class MockResizeObserver {
+    constructor() {
+        this.observe = jest.fn();
+        this.unobserve = jest.fn();
+        this.disconnect = jest.fn();
+    }
+}
+global.ResizeObserver = MockResizeObserver;
+describe("RemoteTutorDrawer", () => {
+    const server = (0, node_1.setupServer)(msw_1.http.post(TEST_API_STREAMING, () => __awaiter(void 0, void 0, void 0, function* () {
+        return msw_1.HttpResponse.text("AI Response");
+    })), msw_1.http.get(CONTENT_FILE_URL, () => {
+        return msw_1.HttpResponse.json(CONTENT_RESPONSE);
+    }));
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+    afterEach(() => {
+        server.resetHandlers();
+    });
+    afterAll(() => server.close());
+    const setup = (message) => __awaiter(void 0, void 0, void 0, function* () {
+        server.listen();
+        (0, react_1.render)(React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, { "data-testid": "remote-tutor-drawer", messageOrigin: "http://localhost:6006", target: "ai-chat" }), { wrapper: ThemeProvider_1.ThemeProvider });
+        yield react_1.screen.findByTestId("remote-tutor-drawer-waiting");
+        const event = new MessageEvent("message", {
+            data: message,
+            origin: "http://localhost:6006",
+        });
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            window.dispatchEvent(event);
+            yield new Promise((resolve) => setTimeout(resolve, 100));
+        }));
+    });
+    test("Problem drawer opens showing title", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "problem",
+                target: "ai-chat",
+                title: "Drawer Title",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+            },
+        });
+        react_1.screen.getByRole("heading", { name: "Drawer Title" });
+    }));
+    test("Video drawer opens showing chat entry screen and tabs", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                chat: {
+                    entryScreenTitle: "Entry screen title",
+                    apiUrl: TEST_API_STREAMING,
+                    conversationStarters: [
+                        { content: "Prompt 1" },
+                        { content: "Prompt 2" },
+                        { content: "Prompt 3" },
+                    ],
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        react_1.screen.getByText("Entry screen title");
+        react_1.screen.getByRole("tab", { name: "Chat" });
+        react_1.screen.getByRole("tab", { name: "Flashcards" });
+        react_1.screen.getByRole("tab", { name: "Summary" });
+        react_1.screen.getByRole("button", { name: "Prompt 1" });
+        react_1.screen.getByRole("button", { name: "Prompt 2" });
+        react_1.screen.getByRole("button", { name: "Prompt 3" });
+    }));
+    test("Video drawer chat entry screen selects starters from flashcards", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                chat: {
+                    entryScreenTitle: "Entry screen title",
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        react_1.screen.getByRole("button", { name: "Test question 1?" });
+        react_1.screen.getByRole("button", { name: "Test question 2?" });
+        react_1.screen.getByRole("button", { name: "Test question 3?" });
+    }));
+    test("Video drawer chat entry screen shows default starters where no flashcards are available", server.boundary(() => __awaiter(void 0, void 0, void 0, function* () {
+        const contentResponse = JSON.parse(JSON.stringify(CONTENT_RESPONSE));
+        contentResponse.results[0].flashcards = null;
+        server.use(msw_1.http.get(CONTENT_FILE_URL, () => {
+            return msw_1.HttpResponse.json(contentResponse);
+        }));
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                chat: {
+                    entryScreenTitle: "Entry screen title",
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        react_1.screen.getByRole("button", {
+            name: "What are the most important concepts introduced in the video?",
+        });
+        react_1.screen.getByRole("button", {
+            name: "What examples are used to illustrate concepts covered in the video?",
+        });
+        react_1.screen.getByRole("button", {
+            name: "What are the key terms introduced in this video?",
+        });
+    })));
+    test("Video drawer chat entry screen displays default title", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        react_1.screen.getByText("What do you want to know about this video?");
+    }));
+    test("Flashcard shows content and can be click navigated", server.boundary(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        yield user_event_1.default.click(react_1.screen.getByRole("tab", { name: "Flashcards" }));
+        yield user_event_1.default.click(react_1.screen.getByText("Q: Test question 1?"));
+        react_1.screen.getByText("Answer: Test answer 1");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Next card" }));
+        yield user_event_1.default.click(react_1.screen.getByText("Q: Test question 2?"));
+        react_1.screen.getByText("Answer: Test answer 2");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Previous card" }));
+        react_1.screen.getByText("Q: Test question 1?");
+    })));
+    test("Flashcard shows content and can be keyboard navigated and cycles", server.boundary(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        yield user_event_1.default.click(react_1.screen.getByRole("tab", { name: "Flashcards" }));
+        react_1.screen.getByText("Q: Test question 1?");
+        yield user_event_1.default.keyboard("{enter}");
+        react_1.screen.getByText("Answer: Test answer 1");
+        yield user_event_1.default.keyboard("{arrowright}");
+        react_1.screen.getByText("Q: Test question 2?");
+        yield user_event_1.default.keyboard("{enter}");
+        react_1.screen.getByText("Answer: Test answer 2");
+        yield user_event_1.default.keyboard("{arrowleft}");
+        react_1.screen.getByText("Q: Test question 1?");
+        yield user_event_1.default.keyboard("{arrowleft}");
+        react_1.screen.getByText("Q: Test question 3?");
+        yield user_event_1.default.keyboard("{arrowright}");
+        yield user_event_1.default.keyboard("{arrowright}");
+        yield user_event_1.default.keyboard("{arrowright}");
+        react_1.screen.getByText("Q: Test question 3?");
+    })));
+});

package/dist/cjs/components/AiChat/AiChat.test.js

@@ -177,4 +177,35 @@ describe("AiChat", () => {
         const alert = yield react_1.screen.findByRole("alert");
         expect(alert).toHaveTextContent("An unexpected error has occurred");
     }));
+    test("Shows the entry screen if entryScreenEnabled is true", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+        });
+        yield expect(react_1.screen.getByText("Entry Screen Title")).toBeInTheDocument();
+    }));
+    test("User can submit a prompt from the entry screen", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [],
+        });
+        yield user_event_1.default.click(react_1.screen.getByRole("textbox"));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Send" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("User message");
+    }));
+    test("User can click starter on the entry screen to submit a prompt", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [{ content: "Starter 1" }],
+        });
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Starter 1" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("Starter 1");
+    }));
 });

package/dist/cjs/components/TabButtons/TabButtonList.d.ts

@@ -3,7 +3,7 @@ import type { TabProps } from "@mui/material/Tab";
 import type { TabListProps } from "@mui/lab/TabList";
 import type { ButtonLinkProps } from "../Button/Button";
 type StyleVariant = "chat";
-export type TabButtonListProps = TabListProps & {
+type TabButtonListProps = TabListProps & {
     styleVariant?: StyleVariant;
 };
 declare const TabButtonList: React.FC<TabButtonListProps>;
@@ -11,6 +11,15 @@ declare const TabLinkInner: React.ForwardRefExoticComponent<Omit<ButtonLinkProps
 type TabButtonProps = Omit<TabProps<"button">, "color"> & {
     styleVariant?: StyleVariant;
 };
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
 declare const TabButton: (props: TabButtonProps) => React.JSX.Element;
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
 declare const TabButtonLink: ({ ...props }: TabProps<typeof TabLinkInner>) => React.JSX.Element;
 export { TabButtonList, TabButton, TabButtonLink };
+export type { TabButtonListProps, TabButtonProps };

package/dist/cjs/components/TabButtons/TabButtonList.js

@@ -23,7 +23,10 @@ const defaultTabListProps = {
     allowScrollButtonsMobile: true,
     scrollButtons: "auto",
 };
-const TabButtonList = (0, styled_1.default)((props) => (React.createElement(TabList_1.default, Object.assign({}, defaultTabListProps, props))))(({ theme, styleVariant }) => (Object.assign({ minHeight: "unset", ".MuiTabs-indicator": {
+const TabButtonList = (0, styled_1.default)((_a) => {
+    var { styleVariant } = _a, props = __rest(_a, ["styleVariant"]);
+    return (React.createElement(TabList_1.default, Object.assign({}, defaultTabListProps, props)));
+})(({ theme, styleVariant }) => (Object.assign({ minHeight: "unset", ".MuiTabs-indicator": {
         display: "none",
     }, ".MuiTabs-flexContainer": {
         gap: "8px",
@@ -77,8 +80,16 @@ const TabLinkInner = React.forwardRef((props, ref) => {
     return React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
 });
 TabLinkInner.displayName = "TabLinkInner";
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
 const TabButton = (props) => (React.createElement(Tab_1.default, Object.assign({}, props, { component: TabButtonInner })));
 exports.TabButton = TabButton;
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
 const TabButtonLink = (_a) => {
     var props = __rest(_a, []);
     return (React.createElement(Tab_1.default, Object.assign({}, props, { component: TabLinkInner })));

package/dist/cjs/index.d.ts

@@ -12,4 +12,5 @@ export { TextField } from "./components/TextField/TextField";
 export type { TextFieldProps } from "./components/TextField/TextField";
 export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
 export type { SrAnnouncerProps } from "./components/SrAnnouncer/SrAnnouncer";
+export { TabButton, TabButtonLink, TabButtonList, } from "./components/TabButtons/TabButtonList";
 export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisuallyHidden = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.Global = exports.css = exports.styled = void 0;
+exports.VisuallyHidden = exports.TabButtonList = exports.TabButtonLink = exports.TabButton = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.Global = exports.css = exports.styled = void 0;
 var styled_1 = require("@emotion/styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.default; } });
 var react_1 = require("@emotion/react");
@@ -22,5 +22,9 @@ var TextField_1 = require("./components/TextField/TextField");
 Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
 var SrAnnouncer_1 = require("./components/SrAnnouncer/SrAnnouncer");
 Object.defineProperty(exports, "SrAnnouncer", { enumerable: true, get: function () { return SrAnnouncer_1.SrAnnouncer; } });
+var TabButtonList_1 = require("./components/TabButtons/TabButtonList");
+Object.defineProperty(exports, "TabButton", { enumerable: true, get: function () { return TabButtonList_1.TabButton; } });
+Object.defineProperty(exports, "TabButtonLink", { enumerable: true, get: function () { return TabButtonList_1.TabButtonLink; } });
+Object.defineProperty(exports, "TabButtonList", { enumerable: true, get: function () { return TabButtonList_1.TabButtonList; } });
 var VisuallyHidden_1 = require("./components/VisuallyHidden/VisuallyHidden");
 Object.defineProperty(exports, "VisuallyHidden", { enumerable: true, get: function () { return VisuallyHidden_1.VisuallyHidden; } });

package/dist/esm/bundles/RemoteTutorDrawer/FlashcardsScreen.js

@@ -72,12 +72,12 @@ export const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
     return (React.createElement(Container, { ref: containerRef },
         React.createElement(Flashcard, { ref: flashcardRef, content: flashcards[cardIndex], "aria-label": `Flashcard ${cardIndex + 1} of ${flashcards.length}` }),
         React.createElement(Navigation, null,
-            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small" },
+            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small", "aria-label": "Previous card" },
                 React.createElement(RiArrowLeftLine, { "aria-hidden": true })),
             React.createElement(Page, null,
                 cardIndex + 1,
                 " / ",
                 flashcards.length),
-            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small" },
+            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small", "aria-label": "Next card" },
                 React.createElement(RiArrowRightLine, { "aria-hidden": true })))));
 };

package/dist/esm/bundles/RemoteTutorDrawer/RemoteTutorDrawer.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+// @format
 import * as React from "react";
 import { useEffect, useState, useRef, useMemo } from "react";
 import styled from "@emotion/styled";
@@ -212,26 +213,28 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
         };
     }, [messageOrigin, target]);
     useEffect(() => {
-        scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo({
+        var _a;
+        (_a = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scrollElement, {
             top: tab === "chat" ? scrollElement.scrollHeight : 0,
         });
     }, [tab, scrollElement]);
     const conversationStarters = useMemo(() => {
+        var _a;
         if (!payload)
             return [];
         return (payload.chat.conversationStarters ||
-            ((response === null || response === void 0 ? void 0 : response.flashcards)
+            (((_a = response === null || response === void 0 ? void 0 : response.flashcards) === null || _a === void 0 ? void 0 : _a.length) && response.flashcards.length >= 3
                 ? randomItems(response.flashcards, 3).map((flashcard) => ({
                     content: flashcard.question,
                 }))
                 : DEFAULT_VIDEO_STARTERS));
     }, [payload, response]);
     if (!payload) {
-        return null;
+        return React.createElement("div", { "data-testid": "remote-tutor-drawer-waiting" });
     }
     const { blockType, chat } = payload;
     const hasTabs = blockType === "video";
-    return (React.createElement(Drawer, { className: className, PaperProps: {
+    return (React.createElement(Drawer, { "data-testid": "remote-tutor-drawer", className: className, PaperProps: {
             ref: paperRefCallback,
             sx: {
                 width: "900px",
@@ -246,7 +249,7 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
         React.createElement(Header, null,
             React.createElement(Title, null,
                 payload.title ? React.createElement(RiSparkling2Line, null) : null,
-                React.createElement(Typography, { variant: "body1" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: "body1", component: "h2" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
                     "Ask",
                     React.createElement("strong", null, "TIM"),
                     payload.title.replace("AskTIM", ""))) : (payload.title))),