@mitodl/smoot-design 3.7.0 → 4.0.0

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

@@ -1,18 +1,26 @@
-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?: {
+            contentUrl: string;
+        };
     };
 };
-type AiChatDrawerProps = {
+type RemoteTutorDrawerProps = {
+    blockType?: "problem" | "video";
     className?: string;
     /**
      * The origin of the messages that will be received to open the chat.
@@ -35,7 +43,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/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.js

@@ -0,0 +1,182 @@
+"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 });
+exports.RemoteTutorDrawer = void 0;
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const react_markdown_1 = require("react-markdown");
+const rehype_raw_1 = require("rehype-raw");
+const react_2 = require("@remixicon/react");
+const Drawer_1 = require("@mui/material/Drawer");
+const TabButtonList_1 = require("../../components/TabButtons/TabButtonList");
+const Typography_1 = require("@mui/material/Typography");
+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 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,
+}));
+const StyledTabButtonList = (0, styled_1.default)(TabButtonList_1.TabButtonList)(({ theme }) => ({
+    padding: "80px 0 16px",
+    backgroundColor: theme.custom.colors.white,
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    overflow: "visible",
+}));
+const StyledTabPanel = (0, styled_1.default)(TabPanel_1.default)({
+    padding: "0",
+    height: "calc(100% - 138px)",
+});
+const StyledAiChat = (0, styled_1.default)(AiChat_1.AiChat)({
+    ".MitAiChat--title": {
+        paddingTop: "8px",
+    },
+});
+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": {
+        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 = (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 [loading, setLoading] = (0, react_1.useState)(false);
+    (0, react_1.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 parsedContent = parseContent(result.content);
+                setSummary(parsedContent);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err : new Error("Failed to fetch"));
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetchData();
+    }, [contentUrl]);
+    return { summary, 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;
+    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);
+    (0, react_1.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_1.default, { 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(react_2.RiCloseLine, null)),
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts })) : 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: "summary", label: "Summary" })),
+            React.createElement(StyledTabPanel, { value: "chat" },
+                React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts })),
+            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));
+};
+exports.RemoteTutorDrawer = RemoteTutorDrawer;

package/dist/cjs/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;