@mitodl/smoot-design 4.0.0 → 6.0.0

package/dist/cjs/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/cjs/bundles/RemoteTutorDrawer/FlashcardsScreen.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashcardsScreen = void 0;
+const ActionButton_1 = require("../../components/Button/ActionButton");
+const Typography_1 = require("@mui/material/Typography");
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const react_2 = require("@remixicon/react");
+const Container = styled_1.default.div ``;
+const FlashcardContainer = styled_1.default.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_1.default.div({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "24px",
+});
+const Page = styled_1.default.div(({ theme }) => (Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2)));
+const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) => {
+    const [screen, setScreen] = (0, react_1.useState)(0);
+    (0, react_1.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_1.default, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
+});
+Flashcard.displayName = "Flashcard";
+const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
+    const [cardIndex, setCardIndex] = (0, react_1.useState)(0);
+    const containerRef = (0, react_1.useRef)(null);
+    const flashcardRef = (0, react_1.useRef)(null);
+    const handleKeyDown = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = flashcardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cardIndex]);
+    (0, react_1.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_1.ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small" },
+                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(react_2.RiArrowRightLine, { "aria-hidden": true })))));
+};
+exports.FlashcardsScreen = FlashcardsScreen;

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

@@ -6,21 +6,23 @@ type RemoteTutorDrawerInitMessage = {
     payload: {
         blockType?: "problem" | "video";
         target?: string;
+        /**
+         * If the title begins "AskTIM", it is styled as the AskTIM logo.
+         */
+        title?: string;
         chat: {
             chatId?: AiChatProps["chatId"];
-            askTimTitle?: AiChatProps["title"];
             conversationStarters?: AiChatProps["conversationStarters"];
             initialMessages: AiChatProps["initialMessages"];
             apiUrl: AiChatProps["requestOpts"]["apiUrl"];
             requestBody?: Record<string, unknown>;
         };
         summary?: {
-            contentUrl: string;
+            apiUrl: string;
         };
     };
 };
 type RemoteTutorDrawerProps = {
-    blockType?: "problem" | "video";
     className?: string;
     /**
      * The origin of the messages that will be received to open the chat.

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

@@ -23,34 +23,72 @@ const TabContext_1 = require("@mui/lab/TabContext");
 const TabPanel_1 = require("@mui/lab/TabPanel");
 const AiChat_1 = require("../../components/AiChat/AiChat");
 const ActionButton_1 = require("../../components/Button/ActionButton");
+const FlashcardsScreen_1 = require("./FlashcardsScreen");
+const Header = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "4px",
+    color: theme.custom.colors.white,
+    position: "sticky",
+    top: 0,
+    padding: "32px 0 16px 0",
+    zIndex: 2,
+    backgroundColor: theme.custom.colors.white,
+    borderRadius: 0,
+}));
+const Title = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.custom.colors.darkGray2,
+    img: {
+        width: "24px",
+        height: "24px",
+    },
+    svg: {
+        fill: theme.custom.colors.red,
+        width: "24px",
+        height: "24px",
+        flexShrink: 0,
+    },
+    overflow: "hidden",
+    p: {
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+    },
+}));
 const CloseButton = (0, styled_1.default)(ActionButton_1.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,
+    zIndex: 3,
+    flexShrink: 0,
 }));
 const StyledTabButtonList = (0, styled_1.default)(TabButtonList_1.TabButtonList)(({ theme }) => ({
-    padding: "80px 0 16px",
+    padding: "0 0 16px",
     backgroundColor: theme.custom.colors.white,
     position: "sticky",
-    top: 0,
-    zIndex: 1,
+    top: "84px",
+    zIndex: 2,
     overflow: "visible",
 }));
 const StyledTabPanel = (0, styled_1.default)(TabPanel_1.default)({
     padding: "0",
     height: "calc(100% - 138px)",
+    position: "relative",
 });
-const StyledAiChat = (0, styled_1.default)(AiChat_1.AiChat)({
-    ".MitAiChat--title": {
-        paddingTop: "8px",
+const StyledAiChat = (0, styled_1.default)(AiChat_1.AiChat)(({ hasTabs }) => ({
+    ".MitAiChat--chatScreenContainer": {
+        padding: hasTabs ? 0 : "0 25px 0 40px",
     },
-});
+    ".MitAiChat--messagesContainer": {
+        paddingTop: hasTabs ? 0 : "88px",
+    },
+}));
 const StyledHTML = styled_1.default.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": {
@@ -70,25 +108,8 @@ const identity = (x) => x;
 const DEFAULT_FETCH_OPTS = {
     credentials: "include",
 };
-const parseContent = (contentString) => {
-    var _a;
-    try {
-        const parsed = JSON.parse(contentString);
-        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 content:", e);
-        return contentString;
-    }
-};
 const useContentFetch = (contentUrl) => {
-    const [summary, setSummary] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)(null);
+    const [response, setResponse] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (!contentUrl)
@@ -98,11 +119,20 @@ const useContentFetch = (contentUrl) => {
             try {
                 const response = yield fetch(contentUrl);
                 const result = yield response.json();
-                const parsedContent = parseContent(result.content);
-                setSummary(parsedContent);
+                if (!result.results) {
+                    throw new Error("Unexpected response");
+                }
+                const [contentFile] = result.results;
+                if (!contentFile) {
+                    throw new Error("No result found");
+                }
+                setResponse({
+                    summary: contentFile.summary,
+                    flashcards: contentFile.flashcards,
+                });
             }
-            catch (err) {
-                setError(err instanceof Error ? err : new Error("Failed to fetch"));
+            catch (error) {
+                console.error("Error fetching content", error);
             }
             finally {
                 setLoading(false);
@@ -110,24 +140,40 @@ const useContentFetch = (contentUrl) => {
         });
         fetchData();
     }, [contentUrl]);
-    return { summary, error, loading };
+    return { response, loading };
 };
-const ChatComponent = ({ payload, transformBody, fetchOpts, }) => {
+const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, hasTabs, }) => {
     if (!payload)
         return null;
-    return (React.createElement(StyledAiChat, { chatId: payload.chatId, askTimTitle: payload.askTimTitle, conversationStarters: payload.conversationStarters, initialMessages: payload.initialMessages, requestOpts: {
+    return (React.createElement(StyledAiChat, { chatId: payload.chatId, conversationStarters: payload.conversationStarters, initialMessages: payload.initialMessages, entryScreenEnabled: false, scrollElement: scrollElement, 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),
-        } }));
+        }, hasTabs: hasTabs }));
 };
 const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className, fetchOpts, target, }) => {
-    var _a;
+    var _a, _b, _c;
     const [open, setOpen] = (0, react_1.useState)(false);
     const [payload, setPayload] = (0, react_1.useState)(null);
     const [tab, setTab] = (0, react_1.useState)("chat");
-    const paperRef = (0, react_1.useRef)(null);
-    const { summary } = useContentFetch((_a = payload === null || payload === void 0 ? void 0 : payload.summary) === null || _a === void 0 ? void 0 : _a.contentUrl);
+    const { response } = useContentFetch((_a = payload === null || payload === void 0 ? void 0 : payload.summary) === null || _a === void 0 ? void 0 : _a.apiUrl);
+    const [_wasKeyboardFocus, setWasKeyboardFocus] = (0, react_1.useState)(false);
+    const mouseInteracted = (0, react_1.useRef)(false);
+    const handleMouseDown = () => {
+        mouseInteracted.current = true;
+    };
+    const handleFocus = () => {
+        if (!mouseInteracted.current) {
+            setWasKeyboardFocus(true);
+        }
+        mouseInteracted.current = false;
+    };
+    const [scrollElement, setScrollElement] = (0, react_1.useState)(null);
+    const paperRefCallback = (node) => {
+        if (node) {
+            setScrollElement(node);
+        }
+    };
     (0, react_1.useEffect)(() => {
         const cb = (event) => {
             if (event.origin !== messageOrigin) {
@@ -153,30 +199,37 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
     const { blockType, chat } = payload;
     const hasTabs = blockType === "video";
     return (React.createElement(Drawer_1.default, { className: className, PaperProps: {
-            ref: paperRef,
+            ref: paperRefCallback,
             sx: {
                 width: "900px",
                 maxWidth: "100%",
                 boxSizing: "border-box",
                 scrollbarGutter: "stable",
-                padding: hasTabs ? "0 25px 24px 40px" : "24px 25px 24px 40px",
-                ".MitAiChat--title": {
-                    paddingTop: "0px",
-                },
+                padding: "0 25px 0 40px",
             },
         }, anchor: "right", open: open, onClose: () => setOpen(false) },
-        React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
-            React.createElement(react_2.RiCloseLine, null)),
-        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts })) : null,
+        React.createElement(Header, null,
+            React.createElement(Title, null,
+                React.createElement(react_2.RiSparkling2Line, 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,
+                    "Ask",
+                    React.createElement("strong", null, "TIM"),
+                    payload.title.replace("AskTIM", ""))) : (payload.title))),
+            React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
+                React.createElement(react_2.RiCloseLine, null))),
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, hasTabs: hasTabs })) : null,
         blockType === "video" ? (React.createElement(TabContext_1.default, { value: tab },
             React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (_event, val) => setTab(val) },
                 React.createElement(TabButtonList_1.TabButton, { value: "chat", label: "Chat" }),
+                React.createElement(TabButtonList_1.TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus }),
                 React.createElement(TabButtonList_1.TabButton, { value: "summary", label: "Summary" })),
             React.createElement(StyledTabPanel, { value: "chat" },
-                React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts })),
+                React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, hasTabs: hasTabs })),
+            React.createElement(StyledTabPanel, { value: "flashcards" },
+                React.createElement(FlashcardsScreen_1.FlashcardsScreen, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus })),
             React.createElement(StyledTabPanel, { value: "summary" },
                 React.createElement(Typography_1.default, { variant: "h4", component: "h4" }),
                 React.createElement(StyledHTML, null,
-                    React.createElement(react_markdown_1.default, { rehypePlugins: [rehype_raw_1.default] }, summary))))) : null));
+                    React.createElement(react_markdown_1.default, { rehypePlugins: [rehype_raw_1.default] }, (_c = response === null || response === void 0 ? void 0 : response.summary) !== null && _c !== void 0 ? _c : ""))))) : null));
 };
 exports.RemoteTutorDrawer = RemoteTutorDrawer;