@mitodl/smoot-design 0.0.0-a2e4e1e → 0.0.0-bafccd3

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-bafccd3";

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-bafccd3";

package/dist/esm/ai.d.ts

@@ -1,3 +1,3 @@
-export { AiChat } from "./components/AiChat/AiChat";
-export type { AiChatProps } from "./components/AiChat/AiChat";
-export type { AiChatMessage } from "./components/AiChat/types";
+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

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

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

@@ -1,8 +1,7 @@
 import { FC } from "react";
-import { AiChatMessage } from "../../components/AiChat/types";
-import type { AiChatProps } from "../../components/AiChat/AiChat";
-type RemoteTutorDrawerInitMessage = {
-    type: "smoot-design::tutor-drawer-open";
+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;
@@ -24,13 +23,8 @@ type RemoteTutorDrawerInitMessage = {
         };
     };
 };
-type RemoteTutorDrawerProps = {
+type AiDrawerProps = {
     className?: string;
-    /**
-     * The origin of the messages that will be received to open the chat.
-     * The drawer will ignore all message events not from this origin.
-     */
-    messageOrigin: 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
@@ -50,8 +44,12 @@ type RemoteTutorDrawerProps = {
     /**
      * 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 RemoteTutorDrawer: FC<RemoteTutorDrawerProps>;
-export { RemoteTutorDrawer };
-export type { RemoteTutorDrawerProps, RemoteTutorDrawerInitMessage };
+declare const AiDrawer: FC<AiDrawerProps>;
+export { AiDrawer };
+export type { AiDrawerProps, AiDrawerInitMessage };

package/dist/esm/bundles/{RemoteTutorDrawer/RemoteTutorDrawer.js → AiDrawer/AiDrawer.js}

@@ -22,6 +22,7 @@ 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",
@@ -149,6 +150,12 @@ const useContentFetch = (contentUrl) => {
     }, [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?" },
@@ -157,23 +164,21 @@ const DEFAULT_VIDEO_STARTERS = [
     },
     { content: "What are the key terms introduced in this video?" },
 ];
-const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, hasTabs, }) => {
+const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, initialMessages, hasTabs, needsMathJax, }) => {
     if (!payload)
         return null;
-    return (React.createElement(StyledAiChat, { chatId: payload.chatId, conversationStarters: conversationStarters, initialMessages: payload.initialMessages, scrollElement: scrollElement, entryScreenEnabled: entryScreenEnabled, entryScreenTitle: entryScreenTitle, requestOpts: {
+    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 }));
+        }, hasTabs: hasTabs, useMathJax: needsMathJax }));
 };
 const randomItems = (array, count) => {
     const shuffled = [...array].sort(() => 0.5 - Math.random());
     return shuffled.slice(0, count);
 };
-const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className, fetchOpts, target, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const [open, setOpen] = useState(false);
-    const [payload, setPayload] = useState(null);
+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);
@@ -193,25 +198,6 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
             setScrollElement(node);
         }
     };
-    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]);
     useEffect(() => {
         var _a;
         (_a = scrollElement === null || scrollElement === void 0 ? void 0 : scrollElement.scrollTo) === null || _a === void 0 ? void 0 : _a.call(scrollElement, {
@@ -230,11 +216,11 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
                 : DEFAULT_VIDEO_STARTERS));
     }, [payload, response]);
     if (!payload) {
-        return React.createElement("div", { "data-testid": "remote-tutor-drawer-waiting" });
+        return React.createElement("div", { "data-testid": "ai-drawer-waiting" });
     }
-    const { blockType, chat } = payload;
+    const { title, blockType, chat } = payload;
     const hasTabs = blockType === "video";
-    return (React.createElement(Drawer, { "data-testid": "remote-tutor-drawer", className: className, PaperProps: {
+    return (React.createElement(Drawer, { "data-smoot-version": VERSION, className: className, PaperProps: {
             ref: paperRefCallback,
             sx: {
                 width: "900px",
@@ -245,29 +231,29 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
                     md: "0 32px",
                 },
             },
-        }, anchor: "right", open: open, onClose: () => setOpen(false) },
+        }, anchor: "right", open: open, onClose: onClose, role: "dialog", "aria-modal": "true", keepMounted: true },
         React.createElement(Header, null,
             React.createElement(Title, null,
-                payload.title ? React.createElement(RiSparkling2Line, null) : 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,
+                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"),
-                    payload.title.replace("AskTIM", ""))) : (payload.title))),
-            React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
+                    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: (_d = (_c = payload.chat) === null || _c === void 0 ? void 0 : _c.entryScreenEnabled) !== null && _d !== void 0 ? _d : false, entryScreenTitle: payload.chat.entryScreenTitle, hasTabs: hasTabs })) : 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" }),
-                ((_e = response === null || response === void 0 ? void 0 : response.flashcards) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus })) : null,
+                ((_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: Object.assign({}, chat), transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_g = (_f = payload.chat) === null || _f === void 0 ? void 0 : _f.entryScreenEnabled) !== null && _g !== void 0 ? _g : true, entryScreenTitle: (_h = payload.chat.entryScreenTitle) !== null && _h !== void 0 ? _h : DEFAULT_VIDEO_ENTRY_SCREEN_TITLE, conversationStarters: conversationStarters, hasTabs: hasTabs })),
-            ((_j = response === null || response === void 0 ? void 0 : response.flashcards) === null || _j === void 0 ? void 0 : _j.length) ? (React.createElement(StyledTabPanel, { value: "flashcards" },
+                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] }, (_k = response === null || response === void 0 ? void 0 : response.summary) !== null && _k !== void 0 ? _k : ""))))) : null));
+                    React.createElement(Markdown, { rehypePlugins: [rehypeRaw] }, (_g = response === null || response === void 0 ? void 0 : response.summary) !== null && _g !== void 0 ? _g : ""))))) : null));
 };
-export { RemoteTutorDrawer };
+export { AiDrawer };

package/dist/esm/bundles/{RemoteTutorDrawer/RemoteTutorDrawer.stories.d.ts → AiDrawer/AiDrawer.stories.d.ts}

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { RemoteTutorDrawer } from "./RemoteTutorDrawer";
-declare const meta: Meta<typeof RemoteTutorDrawer>;
+import { AiDrawer } from "./AiDrawer";
+declare const meta: Meta<typeof AiDrawer>;
 export default meta;
-type Story = StoryObj<typeof RemoteTutorDrawer>;
+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.

package/dist/esm/bundles/{RemoteTutorDrawer/RemoteTutorDrawer.stories.js → AiDrawer/AiDrawer.stories.js}

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from "react";
-import invariant from "tiny-invariant";
 import { http, HttpResponse } from "msw";
 import { handlers } from "../../components/AiChat/test-utils/api";
-import { RemoteTutorDrawer, } from "./RemoteTutorDrawer";
+import { AiDrawer } from "./AiDrawer";
+import { MathJaxContext } from "better-react-mathjax";
+import Button from "@mui/material/Button";
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const CONTENT_FILE_URL = "http://localhost:4567/api/v1/contentfiles/?edx_module_id=1";
 const INITIAL_MESSAGES = [
@@ -17,50 +18,22 @@ const STARTERS = [
     { content: "I want to understand global warming. " },
     { content: "I am curious about AI applications for business" },
 ];
-const buildIFrame = (payload) => (el) => {
-    var _a;
-    if (!el)
-        return;
-    const doc = el.contentDocument;
-    const parent = (_a = el.contentWindow) === null || _a === void 0 ? void 0 : _a.parent;
-    invariant(doc && parent);
-    const button = doc.createElement("button");
-    button.textContent = "Open drawer (send message to parent)";
-    doc.body.appendChild(button);
-    const div = doc.createElement("div");
-    doc.body.appendChild(div);
-    const label = doc.createElement("label");
-    label.textContent = "Message Data:";
-    div.appendChild(label);
-    const textarea = doc.createElement("textarea");
-    div.append(textarea);
-    textarea.style["display"] = "block";
-    textarea.style["width"] = "100%";
-    textarea.style["height"] = "500px";
-    const message = {
-        type: "smoot-design::tutor-drawer-open",
-        payload,
-    };
-    textarea.value = JSON.stringify(message, null, 2);
-    button.addEventListener("click", () => {
-        parent.postMessage(JSON.parse(textarea.value));
-    });
-};
-const IFrame = ({ payload }) => {
-    return (React.createElement("iframe", { width: "100%", height: "600px", ref: buildIFrame(payload), title: "button frame" }));
-};
 const meta = {
-    title: "smoot-design/AI/RemoteTutorDrawer",
-    render: ({ target }, { parameters: { payload } }) => (React.createElement(React.Fragment, null,
-        React.createElement(IFrame, { payload: payload }),
-        React.createElement(RemoteTutorDrawer, { target: target, messageOrigin: "http://localhost:6006" }))),
+    title: "smoot-design/AI/AiDrawer",
+    component: AiDrawer,
+    render: ({ payload }) => {
+        const [open, setOpen] = React.useState(false);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { variant: "outlined", onClick: () => setOpen(true) }, "Open Drawer"),
+            React.createElement("p", null, "Message data:"),
+            React.createElement("pre", null, JSON.stringify({ payload }, null, 2)),
+            React.createElement(MathJaxContext, null,
+                React.createElement(AiDrawer, { payload: payload, open: open, onClose: () => setOpen(false) }))));
+    },
 };
 export default meta;
 export const ProblemStory = {
     args: {
-        target: "problem-frame",
-    },
-    parameters: {
         payload: {
             blockType: "problem",
             target: "problem-frame",
@@ -73,11 +46,21 @@ export const ProblemStory = {
         },
     },
 };
-export const EntryScreenStory = {
+export const ProblemDefaultInitialMessagesStory = {
     args: {
-        target: "entry-screen-frame",
+        payload: {
+            blockType: "problem",
+            target: "problem-frame-default-initial-messages",
+            title: "AskTIM for help with Problem: Derivatives 1.1",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                conversationStarters: STARTERS,
+            },
+        },
     },
-    parameters: {
+};
+export const EntryScreenStory = {
+    args: {
         payload: {
             blockType: "problem",
             target: "entry-screen-frame",
@@ -96,9 +79,6 @@ export const EntryScreenStory = {
  */
 export const VideoStory = {
     args: {
-        target: "video-frame",
-    },
-    parameters: {
         payload: {
             blockType: "video",
             target: "video-frame",
@@ -110,6 +90,8 @@ export const VideoStory = {
                 apiUrl: CONTENT_FILE_URL,
             },
         },
+    },
+    parameters: {
         msw: {
             handlers: [
                 http.get(CONTENT_FILE_URL, () => {
@@ -126,9 +108,6 @@ export const VideoStory = {
  */
 export const FlashcardConversationStartersStory = {
     args: {
-        target: "starters-frame",
-    },
-    parameters: {
         payload: {
             blockType: "video",
             target: "starters-frame",
@@ -139,6 +118,8 @@ export const FlashcardConversationStartersStory = {
                 apiUrl: CONTENT_FILE_URL,
             },
         },
+    },
+    parameters: {
         msw: {
             handlers: [
                 http.get(CONTENT_FILE_URL, () => {

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { AiDrawerProps } from "./AiDrawer";
+type AiDrawerManagerProps = {
+    /**
+     * The origin of the messages that will be received to open the chat.
+     * The drawer will ignore all message events not from this origin.
+     */
+    messageOrigin: string;
+} & AiDrawerProps;
+declare const AiDrawerManager: ({ className, messageOrigin, transformBody, fetchOpts, target, }: AiDrawerManagerProps) => React.JSX.Element;
+export { AiDrawerManager };
+export type { AiDrawerManagerProps };

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { AiDrawer } from "./AiDrawer";
+import { MathJaxContext } from "better-react-mathjax";
+const hashPayload = (payload) => {
+    const str = JSON.stringify(payload);
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) + hash + str.charCodeAt(i);
+        hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36);
+};
+const AiDrawerManager = ({ className, messageOrigin, transformBody, fetchOpts, target, }) => {
+    const [drawerStates, setDrawerStates] = useState({});
+    useEffect(() => {
+        const cb = (event) => {
+            if (event.origin !== messageOrigin) {
+                if (process.env.NODE_ENV === "development") {
+                    console.warn(`AiDrawerManager: received message from unexpected origin: ${event.origin}`);
+                }
+                return;
+            }
+            if ([
+                "smoot-design::ai-drawer-open",
+                "smoot-design::tutor-drawer-open", // legacy
+            ].includes(event.data.type)) {
+                const key = hashPayload(event.data.payload);
+                event.data.payload.chat.chatId = event.data.payload.chat.chatId || key;
+                setDrawerStates((prev) => (Object.assign(Object.assign({}, prev), { [key]: { key, open: false, payload: event.data.payload } })));
+                requestAnimationFrame(() => {
+                    setDrawerStates((prev) => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, prev[key]), { open: true }) })));
+                });
+            }
+        };
+        window.addEventListener("message", cb);
+        return () => {
+            window.removeEventListener("message", cb);
+        };
+    }, [messageOrigin, target]);
+    if (Object.values(drawerStates).length === 0) {
+        return React.createElement("div", { "data-testid": "ai-drawer-manager-waiting" });
+    }
+    return (React.createElement(MathJaxContext, null, Object.values(drawerStates).map(({ key, open, payload }) => (React.createElement(AiDrawer, { key: key, className: className, transformBody: transformBody, fetchOpts: fetchOpts, payload: payload, open: open, onClose: () => {
+            setDrawerStates((prev) => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, prev[key]), { open: false }) })));
+        } })))));
+};
+export { AiDrawerManager };

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

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