@mitodl/smoot-design 3.8.0 → 5.0.0

package/dist/cjs/bundles/{remoteAiChatDrawer.js → remoteTutorDrawer.js}

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.init = void 0;
 const React = require("react");
 const client_1 = require("react-dom/client");
-const RemoteAiChatDrawer_1 = require("./RemoteAiChatDrawer/RemoteAiChatDrawer");
+const RemoteTutorDrawer_1 = require("./RemoteTutorDrawer/RemoteTutorDrawer");
 const ThemeProvider_1 = require("../components/ThemeProvider/ThemeProvider");
 const react_1 = require("@emotion/react");
 const cache_1 = require("@emotion/cache");
 /**
- * Renders the AiChatDrawer in an shadow DOM in order to isolate the drawer
+ * Renders the RemoteTutorDrawer in an shadow DOM in order to isolate the drawer
  * styles from external stylesheets.
  */
 const init = (opts) => {
@@ -35,6 +35,6 @@ const init = (opts) => {
     });
     (0, client_1.createRoot)(shadowRootEl).render(React.createElement(react_1.CacheProvider, { value: cache },
         React.createElement(ThemeProvider_1.ThemeProvider, { theme: theme },
-            React.createElement(RemoteAiChatDrawer_1.AiChatDrawer, Object.assign({}, opts)))));
+            React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, Object.assign({}, opts)))));
 };
 exports.init = init;

package/dist/cjs/components/AiChat/types.d.ts

@@ -69,7 +69,7 @@ type AiChatProps = {
      * Where the scroll container is provided by the component,
      * the AiChat will scroll to the bottom when a prompt is submitted.
      */
-    scrollContainer?: HTMLElement;
+    scrollContainer?: HTMLElement | null;
     /**
      * Provide a ref to the chat component to access the `append` method.
      */

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+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 & {
+    styleVariant?: StyleVariant;
+};
+declare const TabButtonList: React.FC<TabButtonListProps>;
+declare const TabLinkInner: React.ForwardRefExoticComponent<Omit<ButtonLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+type TabButtonProps = Omit<TabProps<"button">, "color"> & {
+    styleVariant?: StyleVariant;
+};
+declare const TabButton: (props: TabButtonProps) => React.JSX.Element;
+declare const TabButtonLink: ({ ...props }: TabProps<typeof TabLinkInner>) => React.JSX.Element;
+export { TabButtonList, TabButton, TabButtonLink };

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

@@ -0,0 +1,86 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabButtonLink = exports.TabButton = exports.TabButtonList = void 0;
+const React = require("react");
+const Tab_1 = require("@mui/material/Tab");
+const TabList_1 = require("@mui/lab/TabList");
+const styled_1 = require("@emotion/styled");
+const Button_1 = require("../Button/Button");
+const react_1 = require("@emotion/react");
+const defaultTabListProps = {
+    variant: "scrollable",
+    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": {
+        display: "none",
+    }, ".MuiTabs-flexContainer": {
+        gap: "8px",
+        alignItems: "center",
+    }, ".MuiTabs-scroller": {
+        display: "flex",
+    } }, (styleVariant === "chat" && {
+    flexGrow: 1,
+    ".MuiTabs-flexContainer": {
+        flexGrow: 1,
+        gap: "8px",
+        alignItems: "center",
+        backgroundColor: theme.custom.colors.lightGray1,
+        padding: "4px",
+        borderRadius: "8px",
+    },
+    button: Object.assign({ flexGrow: 1, backgroundColor: "transparent" }, theme.typography.body2),
+    "button[aria-selected=true], button[aria-selected=true]:hover": {
+        backgroundColor: theme.custom.colors.darkGray1,
+        color: theme.custom.colors.white,
+        cursor: "default",
+    },
+}))));
+exports.TabButtonList = TabButtonList;
+const tabStyles = ({ theme }) => (0, react_1.css)({
+    minWidth: "auto",
+    ":focus-visible": {
+        outlineOffset: "-1px",
+    },
+    '&[aria-selected="true"]': {
+        backgroundColor: theme.custom.colors.white,
+        borderColor: theme.custom.colors.darkGray2,
+    },
+});
+const TabButtonStyled = (0, styled_1.default)(Button_1.Button)(tabStyles);
+const TabLinkStyled = (0, styled_1.default)(Button_1.ButtonLink)(tabStyles);
+const defaultTabButtonProps = {
+    variant: "tertiary",
+    size: "small",
+};
+const TabButtonInner = React.forwardRef(
+// Omits the `className` prop from the underlying Button so that MUI does not
+// style it. We style it ourselves.
+(props, ref) => {
+    const { className } = props, others = __rest(props, ["className"]);
+    return React.createElement(TabButtonStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
+});
+TabButtonInner.displayName = "TabButtonInner";
+const TabLinkInner = React.forwardRef((props, ref) => {
+    const { className } = props, others = __rest(props, ["className"]);
+    return React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
+});
+TabLinkInner.displayName = "TabLinkInner";
+const TabButton = (props) => (React.createElement(Tab_1.default, Object.assign({}, props, { component: TabButtonInner })));
+exports.TabButton = TabButton;
+const TabButtonLink = (_a) => {
+    var props = __rest(_a, []);
+    return (React.createElement(Tab_1.default, Object.assign({}, props, { component: TabLinkInner })));
+};
+exports.TabButtonLink = TabButtonLink;

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { TabButtonListProps } from "./TabButtonList";
+type StoryProps = TabButtonListProps & {
+    count: number;
+};
+declare const meta: Meta<StoryProps>;
+export default meta;
+type Story = StoryObj<StoryProps>;
+/**
+ * Use `TabButtonList` and `TabButton` to render a list of tabs styled as our tertiary buttons:
+ */
+export declare const ButtonTabs: Story;
+/**
+ * `TabButtonList` chat style variant:
+ */
+export declare const ButtonTabsChatVariant: Story;
+/**
+ * By default, the tabs will be scrollable if there are too many to fit in the container:
+ */
+export declare const ManyButtonTabs: Story;
+/**
+ * Use `TabButtonLink` for tabs that should affect the URL:
+ */
+export declare const LinkTabs: Story;

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

@@ -0,0 +1,139 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkTabs = exports.ManyButtonTabs = exports.ButtonTabsChatVariant = exports.ButtonTabs = void 0;
+/* eslint-disable react-hooks/rules-of-hooks */
+const React = require("react");
+const react_1 = require("react");
+const TabButtonList_1 = require("./TabButtonList");
+const TabContext_1 = require("@mui/lab/TabContext");
+const Button_1 = require("../Button/Button");
+const Stack_1 = require("@mui/material/Stack");
+const TabPanel_1 = require("@mui/lab/TabPanel");
+const Typography_1 = require("@mui/material/Typography");
+const en_1 = require("@faker-js/faker/locale/en");
+const Container_1 = require("@mui/material/Container");
+const meta = {
+    title: "smoot-design/TabButtons",
+    argTypes: {
+        variant: {
+            options: ["scrollable", "fullWidth", "standard"],
+            control: { type: "radio" },
+        },
+        styleVariant: {
+            options: ["default", "chat"],
+            control: { type: "radio" },
+            defaultValue: "default",
+        },
+        scrollButtons: {
+            options: ["auto", true, false],
+            control: { type: "radio" },
+        },
+    },
+    args: {
+        count: 4,
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        scrollButtons: "auto",
+    },
+    render: (_a) => {
+        var { count } = _a, others = __rest(_a, ["count"]);
+        const [value, setValue] = React.useState("tab1");
+        return (React.createElement(Container_1.default, { maxWidth: "sm" },
+            React.createElement(TabContext_1.default, { value: value },
+                React.createElement(Stack_1.default, { direction: "row" },
+                    React.createElement(TabButtonList_1.TabButtonList, Object.assign({}, others, { onChange: (_event, val) => setValue(val) }), Array(count)
+                        .fill(null)
+                        .map((_, i) => (React.createElement(TabButtonList_1.TabButton, { key: `tab-${i}`, value: `tab${i + 1}`, label: `Tab ${i + 1}` })))),
+                    React.createElement(Stack_1.default, { direction: "row", justifyContent: "end", sx: { paddingLeft: "16px" } },
+                        React.createElement(Button_1.Button, null, "Other UI"))),
+                Array(count)
+                    .fill(null)
+                    .map((_, i) => (React.createElement(TabPanel_1.default, { key: `tab-${i}`, value: `tab${i + 1}` },
+                    React.createElement(Typography_1.default, { variant: "h4", component: "h4" },
+                        "Header ",
+                        i + 1),
+                    en_1.faker.lorem.paragraphs(2)))))));
+    },
+};
+exports.default = meta;
+/**
+ * Use `TabButtonList` and `TabButton` to render a list of tabs styled as our tertiary buttons:
+ */
+exports.ButtonTabs = {};
+/**
+ * `TabButtonList` chat style variant:
+ */
+exports.ButtonTabsChatVariant = {
+    args: {
+        styleVariant: "chat",
+        variant: "fullWidth",
+        visibleScrollbar: false,
+    },
+    render: (_a) => {
+        var { count } = _a, others = __rest(_a, ["count"]);
+        const [value, setValue] = React.useState("tab1");
+        return (React.createElement(Container_1.default, { maxWidth: "sm" },
+            React.createElement(TabContext_1.default, { value: value },
+                React.createElement(Stack_1.default, { direction: "row" },
+                    React.createElement(TabButtonList_1.TabButtonList, Object.assign({}, others, { onChange: (_event, val) => setValue(val) }), Array(count)
+                        .fill(null)
+                        .map((_, i) => (React.createElement(TabButtonList_1.TabButton, { key: `tab-${i}`, value: `tab${i + 1}`, label: `Tab ${i + 1}` }))))),
+                Array(count)
+                    .fill(null)
+                    .map((_, i) => (React.createElement(TabPanel_1.default, { key: `tab-${i}`, value: `tab${i + 1}` },
+                    React.createElement(Typography_1.default, { variant: "h4", component: "h4" },
+                        "Header ",
+                        i + 1),
+                    en_1.faker.lorem.paragraphs(2)))))));
+    },
+};
+/**
+ * By default, the tabs will be scrollable if there are too many to fit in the container:
+ */
+exports.ManyButtonTabs = {
+    args: {
+        count: 12,
+    },
+};
+/**
+ * Use `TabButtonLink` for tabs that should affect the URL:
+ */
+exports.LinkTabs = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+            navigation: {
+                pathname: "/#link2",
+            },
+        },
+    },
+    render: () => {
+        const [hash, setHash] = (0, react_1.useState)(() => window.location.hash);
+        React.useEffect(() => {
+            const handler = () => setHash(window.location.hash);
+            window.addEventListener("hashchange", handler);
+            return () => {
+                window.removeEventListener("hashchange", handler);
+            };
+        }, []);
+        return (React.createElement("div", null,
+            "Current Location:",
+            React.createElement("pre", null, hash),
+            React.createElement(TabContext_1.default, { value: hash },
+                React.createElement(TabButtonList_1.TabButtonList, null,
+                    React.createElement(TabButtonList_1.TabButtonLink, { value: "#link1", href: "#link1", label: "Tab 1" }),
+                    React.createElement(TabButtonList_1.TabButtonLink, { value: "#link2", href: "#link2", label: "Tab 2" }),
+                    React.createElement(TabButtonList_1.TabButtonLink, { value: "#link3", href: "#link3", label: "Tab 3" })))));
+    },
+};

package/dist/esm/bundles/RemoteTutorDrawer/FlashcardsScreen.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type Flashcard = {
+    question: string;
+    answer: string;
+};
+export declare const FlashcardsScreen: ({ flashcards, wasKeyboardFocus, }: {
+    flashcards?: Flashcard[];
+    wasKeyboardFocus: boolean;
+}) => React.JSX.Element | null;

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

@@ -0,0 +1,83 @@
+import { ActionButton } from "../../components/Button/ActionButton";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react";
+const Container = styled.div ``;
+const FlashcardContainer = styled.div(({ theme }) => ({
+    display: "flex",
+    height: 300,
+    padding: 40,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    borderRadius: 8,
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    marginTop: "8px",
+    cursor: "pointer",
+    textAlign: "center",
+}));
+const Navigation = styled.div({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "24px",
+});
+const Page = styled.div(({ theme }) => (Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2)));
+const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) => {
+    const [screen, setScreen] = useState(0);
+    useEffect(() => setScreen(0), [content]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            setScreen(screen === 0 ? 1 : 0);
+        }
+    };
+    return (React.createElement(FlashcardContainer, { ref: ref, onClick: () => setScreen(screen === 0 ? 1 : 0), onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": ariaLabel },
+        React.createElement(Typography, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
+});
+Flashcard.displayName = "Flashcard";
+export const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
+    const [cardIndex, setCardIndex] = useState(0);
+    const containerRef = useRef(null);
+    const flashcardRef = useRef(null);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        if (!flashcards)
+            return;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            wasKeyboardFocus) {
+            return;
+        }
+        if (e.key === "ArrowRight") {
+            setCardIndex((prevIndex) => (prevIndex + 1) % flashcards.length);
+        }
+        else if (e.key === "ArrowLeft") {
+            setCardIndex((prevIndex) => (prevIndex - 1 + flashcards.length) % flashcards.length);
+        }
+    }, [flashcards, wasKeyboardFocus]);
+    useEffect(() => {
+        var _a;
+        (_a = flashcardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cardIndex]);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    if (!flashcards) {
+        return null;
+    }
+    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(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(RiArrowRightLine, { "aria-hidden": true })))));
+};

package/dist/{cjs/bundles/RemoteAiChatDrawer/RemoteAiChatDrawer.d.ts → esm/bundles/RemoteTutorDrawer/RemoteTutorDrawer.d.ts}

@@ -1,18 +1,25 @@
-import * as React from "react";
+import { FC } from "react";
 import { AiChatMessage } from "../../components/AiChat/types";
 import type { AiChatProps } from "../../components/AiChat/AiChat";
-type ChatInitMessage = {
-    type: "smoot-design::chat-open";
+type RemoteTutorDrawerInitMessage = {
+    type: "smoot-design::tutor-drawer-open";
     payload: {
-        chatId?: AiChatProps["chatId"];
-        askTimTitle?: AiChatProps["title"];
-        conversationStarters?: AiChatProps["conversationStarters"];
-        initialMessages: AiChatProps["initialMessages"];
-        apiUrl: AiChatProps["requestOpts"]["apiUrl"];
-        requestBody?: Record<string, unknown>;
+        blockType?: "problem" | "video";
+        target?: string;
+        chat: {
+            chatId?: AiChatProps["chatId"];
+            askTimTitle?: AiChatProps["title"];
+            conversationStarters?: AiChatProps["conversationStarters"];
+            initialMessages: AiChatProps["initialMessages"];
+            apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+            requestBody?: Record<string, unknown>;
+        };
+        summary?: {
+            apiUrl: string;
+        };
     };
 };
-type AiChatDrawerProps = {
+type RemoteTutorDrawerProps = {
     className?: string;
     /**
      * The origin of the messages that will be received to open the chat.
@@ -35,7 +42,11 @@ type AiChatDrawerProps = {
      * identifying cookies.
      */
     fetchOpts?: AiChatProps["requestOpts"]["fetchOpts"];
+    /**
+     * Pass to target a specific drawer instance where multiple are on the page.
+     */
+    target?: string;
 };
-declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
-export { AiChatDrawer };
-export type { AiChatDrawerProps, ChatInitMessage };
+declare const RemoteTutorDrawer: FC<RemoteTutorDrawerProps>;
+export { RemoteTutorDrawer };
+export type { RemoteTutorDrawerProps, RemoteTutorDrawerInitMessage };

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

@@ -0,0 +1,197 @@
+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());
+    });
+};
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { RiCloseLine } from "@remixicon/react";
+import Drawer from "@mui/material/Drawer";
+import { TabButtonList, TabButton, } from "../../components/TabButtons/TabButtonList";
+import Typography from "@mui/material/Typography";
+import TabContext from "@mui/lab/TabContext";
+import TabPanel from "@mui/lab/TabPanel";
+import { AiChat } from "../../components/AiChat/AiChat";
+import { ActionButton } from "../../components/Button/ActionButton";
+import { FlashcardsScreen } from "./FlashcardsScreen";
+const CloseButton = styled(ActionButton)(({ theme }) => ({
+    position: "fixed",
+    top: "24px",
+    right: "40px",
+    backgroundColor: theme.custom.colors.lightGray2,
+    "&&:hover": {
+        backgroundColor: theme.custom.colors.red,
+        color: theme.custom.colors.white,
+    },
+    zIndex: 2,
+}));
+const StyledTabButtonList = styled(TabButtonList)(({ theme }) => ({
+    padding: "80px 0 16px",
+    backgroundColor: theme.custom.colors.white,
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    overflow: "visible",
+}));
+const StyledTabPanel = styled(TabPanel)({
+    padding: "0",
+    height: "calc(100% - 138px)",
+});
+const StyledAiChat = styled(AiChat)({
+    ".MitAiChat--title": {
+        paddingTop: "8px",
+    },
+});
+const StyledHTML = styled.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white, padding: "12px 0 100px" }, theme.typography.body2), { "p:first-of-type": {
+        marginTop: 0,
+    }, "p:last-of-type": {
+        marginBottom: 0,
+    }, "ol, ul": {
+        paddingInlineStart: "32px",
+        li: {
+            margin: "16px 0",
+        },
+    }, ul: {
+        marginInlineStart: "-16px",
+    }, a: {
+        color: theme.custom.colors.red,
+        fontWeight: "normal",
+    } })));
+const identity = (x) => x;
+const DEFAULT_FETCH_OPTS = {
+    credentials: "include",
+};
+const parseContent = (summaryString) => {
+    var _a;
+    try {
+        const parsed = JSON.parse(summaryString);
+        const content = (_a = parsed[0]) === null || _a === void 0 ? void 0 : _a.content;
+        const unescaped = content
+            .replace(/\\n/g, "\n")
+            .replace(/\\"/g, '"')
+            .replace(/\\'/g, "'");
+        return unescaped;
+    }
+    catch (e) {
+        console.warn("Could not parse summary:", e);
+        return summaryString;
+    }
+};
+const useContentFetch = (contentUrl) => {
+    const [response, setResponse] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (!contentUrl)
+            return;
+        const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                const response = yield fetch(contentUrl);
+                const result = yield response.json();
+                const parsedSummary = parseContent(result.summary);
+                setResponse({
+                    summary: parsedSummary,
+                    flashcards: result.flashcards,
+                });
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error("Failed to fetch"));
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetchData();
+    }, [contentUrl]);
+    return { response, error, loading };
+};
+const ChatComponent = ({ payload, transformBody, fetchOpts, }) => {
+    if (!payload)
+        return null;
+    return (React.createElement(StyledAiChat, { chatId: payload.chatId, askTimTitle: payload.askTimTitle, conversationStarters: payload.conversationStarters, initialMessages: payload.initialMessages, requestOpts: {
+            transformBody: (messages) => (Object.assign(Object.assign({}, payload.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages))),
+            apiUrl: payload.apiUrl,
+            fetchOpts: Object.assign(Object.assign({}, DEFAULT_FETCH_OPTS), fetchOpts),
+        } }));
+};
+const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className, fetchOpts, target, }) => {
+    var _a, _b;
+    const [open, setOpen] = useState(false);
+    const [payload, setPayload] = useState(null);
+    const [tab, setTab] = useState("chat");
+    const paperRef = useRef(null);
+    const { response } = useContentFetch((_a = payload === null || payload === void 0 ? void 0 : payload.summary) === null || _a === void 0 ? void 0 : _a.apiUrl);
+    const [_wasKeyboardFocus, setWasKeyboardFocus] = useState(false);
+    const mouseInteracted = useRef(false);
+    const handleMouseDown = () => {
+        mouseInteracted.current = true;
+    };
+    const handleFocus = () => {
+        if (!mouseInteracted.current) {
+            setWasKeyboardFocus(true);
+        }
+        mouseInteracted.current = false;
+    };
+    useEffect(() => {
+        const cb = (event) => {
+            if (event.origin !== messageOrigin) {
+                if (process.env.NODE_ENV === "development") {
+                    console.warn(`RemoteTutorDrawer: received message from unexpected origin: ${event.origin}`);
+                }
+                return;
+            }
+            if (event.data.type === "smoot-design::tutor-drawer-open" &&
+                event.data.payload.target === target) {
+                setOpen(true);
+                setPayload(event.data.payload);
+            }
+        };
+        window.addEventListener("message", cb);
+        return () => {
+            window.removeEventListener("message", cb);
+        };
+    }, [messageOrigin, target]);
+    if (!payload) {
+        return null;
+    }
+    const { blockType, chat } = payload;
+    const hasTabs = blockType === "video";
+    return (React.createElement(Drawer, { className: className, PaperProps: {
+            ref: paperRef,
+            sx: {
+                width: "900px",
+                maxWidth: "100%",
+                boxSizing: "border-box",
+                scrollbarGutter: "stable",
+                padding: hasTabs ? "0 25px 24px 40px" : "24px 25px 24px 40px",
+                ".MitAiChat--title": {
+                    paddingTop: "0px",
+                },
+            },
+        }, anchor: "right", open: open, onClose: () => setOpen(false) },
+        React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
+            React.createElement(RiCloseLine, null)),
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts })) : null,
+        blockType === "video" ? (React.createElement(TabContext, { value: tab },
+            React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (_event, val) => setTab(val) },
+                React.createElement(TabButton, { value: "chat", label: "Chat" }),
+                React.createElement(TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus }),
+                React.createElement(TabButton, { value: "summary", label: "Summary" })),
+            React.createElement(StyledTabPanel, { value: "chat" },
+                React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts })),
+            React.createElement(StyledTabPanel, { value: "flashcards" },
+                React.createElement(FlashcardsScreen, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus })),
+            React.createElement(StyledTabPanel, { value: "summary" },
+                React.createElement(Typography, { variant: "h4", component: "h4" }),
+                React.createElement(StyledHTML, null,
+                    React.createElement(Markdown, { rehypePlugins: [rehypeRaw] }, (_b = response === null || response === void 0 ? void 0 : response.summary) !== null && _b !== void 0 ? _b : ""))))) : null));
+};
+export { RemoteTutorDrawer };

package/dist/esm/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RemoteTutorDrawer } from "./RemoteTutorDrawer";
+declare const meta: Meta<typeof RemoteTutorDrawer>;
+export default meta;
+type Story = StoryObj<typeof RemoteTutorDrawer>;
+export declare const ProblemStory: Story;
+export declare const VideoStory: Story;