@mitodl/smoot-design 0.0.0-0a23f44

package/dist/cjs/utils/retryingFetch.test.js

@@ -0,0 +1,48 @@
+"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 retryingFetch_1 = require("./retryingFetch");
+const msw_1 = require("msw");
+const node_1 = require("msw/node");
+const counter = jest.fn(); // use jest.fn as counter because it resets on each test
+const NETWORK_SUCCESS_URL = "http://localhost:3456/success";
+const NETWORK_ERROR_URL = "http://localhost:3456/error";
+const server = (0, node_1.setupServer)(msw_1.http.get(NETWORK_SUCCESS_URL, (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+    var _b;
+    counter();
+    const url = new URL(request.url);
+    const status = +((_b = url.searchParams.get("status")) !== null && _b !== void 0 ? _b : 200);
+    return msw_1.HttpResponse.text(`Status ${status}`, { status });
+})), msw_1.http.get(NETWORK_ERROR_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+    counter();
+    return msw_1.HttpResponse.error();
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+describe("retryingFetch", () => {
+    beforeAll(() => { });
+    test.each([200, 201, 202, 367, 400, 401, 403])("should not retry on %s", (status) => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield (0, retryingFetch_1.default)(`${NETWORK_SUCCESS_URL}?status=${status}`);
+        expect(yield result.text()).toBe(`Status ${status}`);
+        expect(counter).toHaveBeenCalledTimes(1);
+    }));
+    test.each([429, 500, 501, 502, 503])("should retry on %s", (status) => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield (0, retryingFetch_1.default)(`${NETWORK_SUCCESS_URL}?status=${status}`);
+        expect(yield result.text()).toBe(`Status ${status}`);
+        expect(counter).toHaveBeenCalledTimes(4);
+    }));
+    test("should retry on error", () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield (0, retryingFetch_1.default)(NETWORK_ERROR_URL).catch((err) => err);
+        expect(result).toBeInstanceOf(Error);
+        expect(counter).toHaveBeenCalledTimes(4);
+    }));
+});

package/dist/cjs/utils/useDevCheckStable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Emits `console.error` if two subsequent values of `jsonSerializable` serialize
+ * to the same thing but are different references.
+ *
+ * This hook does NOT run in production.
+ */
+declare const useDevCheckStable: (jsonSerializable: unknown, msg?: string) => void;
+export { useDevCheckStable };

package/dist/cjs/utils/useDevCheckStable.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDevCheckStable = void 0;
+const react_1 = require("react");
+/**
+ * Emits `console.error` if two subsequent values of `jsonSerializable` serialize
+ * to the same thing but are different references.
+ *
+ * This hook does NOT run in production.
+ */
+const useDevCheckStable = (jsonSerializable, msg = "The value has changed. This may cause unnecessary re-renders") => {
+    if (process.env.NODE_ENV !== "production") {
+        /**
+         * Calling hooks conditionally based on env vars is not really a problem.
+         * In a given environment, the hook will always run or always not run.
+         */
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const valRef = (0, react_1.useRef)(jsonSerializable);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useEffect)(() => {
+            const sameJson = JSON.stringify(valRef.current) === JSON.stringify(jsonSerializable);
+            const differentRefs = valRef.current !== jsonSerializable;
+            if (!sameJson || differentRefs) {
+                console.error(`useDevCheckStable: ${msg}`, valRef.current, jsonSerializable);
+            }
+        }, [jsonSerializable, msg]);
+    }
+};
+exports.useDevCheckStable = useDevCheckStable;

package/dist/cjs/utils/useInterval.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calls a function at a specified interval.
+ *
+ * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+declare const useInterval: (callback: () => void, delay: number | null) => void;
+export { useInterval };

package/dist/cjs/utils/useInterval.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+const react_1 = require("react");
+/**
+ * Calls a function at a specified interval.
+ *
+ * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+const useInterval = (callback, delay) => {
+    const savedCallback = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    (0, react_1.useEffect)(() => {
+        if (delay !== null) {
+            const id = setInterval(() => { var _a; return (_a = savedCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedCallback); }, delay);
+            return () => clearInterval(id);
+        }
+        else {
+            return () => { };
+        }
+    }, [delay]);
+};
+exports.useInterval = useInterval;

package/dist/esm/VERSION.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file is auto-generated at build time.
+ * Run node ./scripts/set_version.js to update the version.
+ * Do not update this file manually.
+ *
+ * NOTES:
+ * - In development, VERSION will always be "0.0.0"
+ * - The version should not simply be imported from package.json. This would
+ *   result in all of the package.json being included in the bundled code, which
+ *   is not desired.
+ */
+export declare const VERSION = "0.0.0-0a23f44";

package/dist/esm/VERSION.js

@@ -0,0 +1,12 @@
+/**
+ * This file is auto-generated at build time.
+ * Run node ./scripts/set_version.js to update the version.
+ * Do not update this file manually.
+ *
+ * NOTES:
+ * - In development, VERSION will always be "0.0.0"
+ * - The version should not simply be imported from package.json. This would
+ *   result in all of the package.json being included in the bundled code, which
+ *   is not desired.
+ */
+export const VERSION = "0.0.0-0a23f44";

package/dist/esm/ai.d.ts

@@ -0,0 +1,3 @@
+export { AiChat, AiChatDisplay } from "./components/AiChat/AiChat";
+export { AiChatProvider, useAiChat } from "./components/AiChat/AiChatContext";
+export type { AiChatMessage, AiChatContextProps, AiChatDisplayProps, AiChatProps, } from "./components/AiChat/types";

package/dist/esm/ai.js

@@ -0,0 +1,2 @@
+export { AiChat, AiChatDisplay } from "./components/AiChat/AiChat";
+export { AiChatProvider, useAiChat } from "./components/AiChat/AiChatContext";

package/dist/esm/bundles/AiDrawer/AiDrawer.d.ts

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import type { AiChatProps, AiChatMessage } from "../../components/AiChat/types";
+type AiDrawerInitMessage = {
+    type: "smoot-design::ai-drawer-open" | "smoot-design::tutor-drawer-open";
+    payload: {
+        blockType?: "problem" | "video";
+        target?: string;
+        /**
+         * If the title begins "AskTIM", it is styled as the AskTIM logo.
+         */
+        title?: string;
+        chat: {
+            chatId?: AiChatProps["chatId"];
+            conversationStarters?: AiChatProps["conversationStarters"];
+            initialMessages?: AiChatProps["initialMessages"];
+            apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+            requestBody?: Record<string, unknown>;
+            entryScreenEnabled?: AiChatProps["entryScreenEnabled"];
+            entryScreenTitle?: AiChatProps["entryScreenTitle"];
+        };
+        summary?: {
+            apiUrl: string;
+        };
+    };
+};
+type AiDrawerProps = {
+    className?: string;
+    /**
+     * Transform the body of the request before sending it to the server.
+     * Its result will be merged with the per-message requestBody opt, with
+     * transformBody taking precedence.
+     *
+     * *This cannot be supplied via message events since the function is not serializable.*
+     *
+     */
+    transformBody?: (messages: AiChatMessage[]) => Iterable<unknown>;
+    /**
+     * Fetch options to be passed to the fetch call.
+     *
+     * NOTE: By default, the credentials are set to "include" to enable thread-
+     * identifying cookies.
+     */
+    fetchOpts?: AiChatProps["requestOpts"]["fetchOpts"];
+    /**
+     * Pass to target a specific drawer instance where multiple are on the page.
+     */
+    /** @deprecated The AiDrawerManager now handles multiple AiDrawer instance removing the need to target */
+    target?: string;
+    payload?: AiDrawerInitMessage["payload"];
+    open?: boolean;
+    onClose?: () => void;
+};
+declare const AiDrawer: FC<AiDrawerProps>;
+export { AiDrawer };
+export type { AiDrawerProps, AiDrawerInitMessage };

package/dist/esm/bundles/AiDrawer/AiDrawer.js

@@ -0,0 +1,259 @@
+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());
+    });
+};
+// @format
+import * as React from "react";
+import { useEffect, useState, useRef, useMemo } from "react";
+import styled from "@emotion/styled";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { RiCloseLine, RiSparkling2Line } 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";
+import { VERSION } from "../../VERSION";
+const Header = styled.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.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 = styled(ActionButton)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.lightGray2,
+    "&&:hover": {
+        backgroundColor: theme.custom.colors.red,
+        color: theme.custom.colors.white,
+    },
+    zIndex: 3,
+    flexShrink: 0,
+}));
+const StyledTabButtonList = styled(TabButtonList)(({ theme }) => ({
+    padding: "0 0 16px",
+    backgroundColor: theme.custom.colors.white,
+    position: "sticky",
+    top: "88px",
+    zIndex: 2,
+    overflow: "visible",
+}));
+const StyledTabPanel = styled(TabPanel)({
+    padding: "0",
+    height: "calc(100% - 138px)",
+    position: "relative",
+});
+const StyledAiChat = styled(AiChat)(({ hasTabs, theme }) => ({
+    ".MitAiChat--entryScreenContainer": {
+        padding: hasTabs ? "114px 0 24px" : "168px 32px 24px",
+        [theme.breakpoints.down("md")]: {
+            padding: hasTabs ? "114px 0 24px" : "168px 16px 24px",
+        },
+    },
+    ".MitAiChat--chatScreenContainer": {
+        padding: hasTabs ? 0 : "0 32px",
+        [theme.breakpoints.down("md")]: {
+            padding: hasTabs ? 0 : "0 16px",
+        },
+    },
+    ".MitAiChat--messagesContainer": {
+        paddingTop: hasTabs ? "8px" : "88px",
+    },
+}));
+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 useContentFetch = (contentUrl) => {
+    const [response, setResponse] = 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();
+                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 (error) {
+                console.error("Error fetching content", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetchData();
+    }, [contentUrl]);
+    return { response, loading };
+};
+const DEFAULT_PROBLEM_INITIAL_MESSAGES = [
+    {
+        role: "assistant",
+        content: "Let's try to work on this problem together. It would be great to hear how you're thinking about solving it. Can you walk me through the approach you're considering?",
+    },
+];
+const DEFAULT_VIDEO_ENTRY_SCREEN_TITLE = "What do you want to know about this video?";
+const DEFAULT_VIDEO_STARTERS = [
+    { content: "What are the most important concepts introduced in the video?" },
+    {
+        content: "What examples are used to illustrate concepts covered in the video?",
+    },
+    { content: "What are the key terms introduced in this video?" },
+];
+const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, initialMessages, hasTabs, needsMathJax, }) => {
+    if (!payload)
+        return null;
+    return (React.createElement(StyledAiChat, { key: payload.chatId, chatId: payload.chatId, conversationStarters: conversationStarters, initialMessages: initialMessages, scrollElement: scrollElement, entryScreenEnabled: entryScreenEnabled, entryScreenTitle: entryScreenTitle, 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, useMathJax: needsMathJax }));
+};
+const randomItems = (array, count) => {
+    const shuffled = [...array].sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, count);
+};
+const AiDrawer = ({ transformBody = identity, className, fetchOpts, payload, open, onClose, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [tab, setTab] = useState("chat");
+    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;
+    };
+    const [scrollElement, setScrollElement] = useState(null);
+    const paperRefCallback = (node) => {
+        if (node) {
+            setScrollElement(node);
+        }
+    };
+    useEffect(() => {
+        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 ||
+            (((_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 React.createElement("div", { "data-testid": "ai-drawer-waiting" });
+    }
+    const { title, blockType, chat } = payload;
+    const hasTabs = blockType === "video";
+    return (React.createElement(Drawer, { "data-smoot-version": VERSION, className: className, PaperProps: {
+            ref: paperRefCallback,
+            sx: {
+                width: "900px",
+                maxWidth: "100%",
+                boxSizing: "border-box",
+                padding: {
+                    xs: "0 16px",
+                    md: "0 32px",
+                },
+            },
+        }, anchor: "right", open: open, onClose: onClose, role: "dialog", "aria-modal": "true", keepMounted: true },
+        React.createElement(Header, null,
+            React.createElement(Title, null,
+                title ? React.createElement(RiSparkling2Line, null) : null,
+                React.createElement(Typography, { variant: "body1", component: "h1" }, (title === null || title === void 0 ? void 0 : title.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                    "Ask",
+                    React.createElement("strong", null, "TIM"),
+                    title.replace("AskTIM", ""))) : (title))),
+            React.createElement(CloseButton, { variant: "text", size: "medium", onClick: onClose, "aria-label": "Close" },
+                React.createElement(RiCloseLine, null))),
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_b = chat === null || chat === void 0 ? void 0 : chat.entryScreenEnabled) !== null && _b !== void 0 ? _b : false, entryScreenTitle: chat.entryScreenTitle, initialMessages: chat.initialMessages || DEFAULT_PROBLEM_INITIAL_MESSAGES, hasTabs: hasTabs, needsMathJax: true })) : null,
+        blockType === "video" ? (React.createElement(TabContext, { value: tab },
+            React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (e, tab) => setTab(tab) },
+                React.createElement(TabButton, { value: "chat", label: "Chat" }),
+                ((_c = response === null || response === void 0 ? void 0 : response.flashcards) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus })) : null,
+                React.createElement(TabButton, { value: "summary", label: "Summary" })),
+            React.createElement(StyledTabPanel, { value: "chat", keepMounted: true },
+                React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_d = chat === null || chat === void 0 ? void 0 : chat.entryScreenEnabled) !== null && _d !== void 0 ? _d : true, entryScreenTitle: (_e = chat.entryScreenTitle) !== null && _e !== void 0 ? _e : DEFAULT_VIDEO_ENTRY_SCREEN_TITLE, conversationStarters: conversationStarters, initialMessages: chat.initialMessages, hasTabs: hasTabs, needsMathJax: false })),
+            ((_f = response === null || response === void 0 ? void 0 : response.flashcards) === null || _f === void 0 ? void 0 : _f.length) ? (React.createElement(StyledTabPanel, { value: "flashcards" },
+                React.createElement(FlashcardsScreen, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus }))) : null,
+            React.createElement(StyledTabPanel, { value: "summary" },
+                React.createElement(Typography, { variant: "h4", component: "h4" }),
+                React.createElement(StyledHTML, null,
+                    React.createElement(Markdown, { rehypePlugins: [rehypeRaw] }, (_g = response === null || response === void 0 ? void 0 : response.summary) !== null && _g !== void 0 ? _g : ""))))) : null));
+};
+export { AiDrawer };

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiDrawer } from "./AiDrawer";
+declare const meta: Meta<typeof AiDrawer>;
+export default meta;
+type Story = StoryObj<typeof AiDrawer>;
+export declare const ProblemStory: Story;
+export declare const ProblemDefaultInitialMessagesStory: Story;
+export declare const EntryScreenStory: Story;
+/**
+ * The chat entry screen is shown by default for the video blocks Tutor drawer.
+ */
+export declare const VideoStory: Story;
+/**
+ * Where conversation starters are not provided, they will be selected at random from the returned flashcard questions
+ * or from `DEFAULT_VIDEO_STARTERS` provided.
+ */
+export declare const FlashcardConversationStartersStory: Story;