@mitodl/smoot-design 3.5.0 → 3.7.0

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AiChatMessage } from "../../components/AiChat/types";
 import type { AiChatProps } from "../../components/AiChat/AiChat";
 type ChatInitMessage = {
     type: "smoot-design::chat-open";
@@ -8,6 +9,7 @@ type ChatInitMessage = {
         conversationStarters?: AiChatProps["conversationStarters"];
         initialMessages: AiChatProps["initialMessages"];
         apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+        requestBody?: Record<string, unknown>;
     };
 };
 type AiChatDrawerProps = {
@@ -19,9 +21,20 @@ type AiChatDrawerProps = {
     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
+     * transformBody taking precedence.
+     *
      * *This cannot be supplied via message events since the function is not serializable.*
+     *
      */
-    transformBody?: AiChatProps["requestOpts"]["transformBody"];
+    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"];
 };
 declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
 export { AiChatDrawer };

package/dist/cjs/bundles/RemoteAiChatDrawer/RemoteAiChatDrawer.js

@@ -4,7 +4,11 @@ exports.AiChatDrawer = void 0;
 const React = require("react");
 const AiChat_1 = require("../../components/AiChat/AiChat");
 const Drawer_1 = require("@mui/material/Drawer");
-const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
+const identity = (x) => x;
+const DEFAULT_FETCH_OPTS = {
+    credentials: "include",
+};
+const AiChatDrawer = ({ messageOrigin, transformBody = identity, className, fetchOpts, }) => {
     const [open, setOpen] = React.useState(false);
     const [chatSettings, setChatSettings] = React.useState(null);
     React.useEffect(() => {
@@ -20,7 +24,6 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 setChatSettings(event.data.payload);
             }
         };
-        console.log("Attaching listener");
         window.addEventListener("message", cb);
         return () => {
             window.removeEventListener("message", cb);
@@ -28,7 +31,7 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
     }, [messageOrigin]);
     return (React.createElement(Drawer_1.default, { className: className, PaperProps: {
             sx: {
-                width: "600px",
+                width: "900px",
                 maxWidth: "100%",
                 boxSizing: "border-box",
                 padding: "24px 40px",
@@ -37,8 +40,11 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 },
             },
         }, anchor: "right", open: open, onClose: () => setOpen(false) }, chatSettings ? (React.createElement(AiChat_1.AiChat, Object.assign({}, chatSettings, { requestOpts: {
-            transformBody,
+            transformBody: (messages) => {
+                return Object.assign(Object.assign({}, chatSettings.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages));
+            },
             apiUrl: chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.apiUrl,
+            fetchOpts: Object.assign(Object.assign({}, DEFAULT_FETCH_OPTS), fetchOpts),
         }, onClose: () => setOpen(false) }))) : null));
 };
 exports.AiChatDrawer = AiChatDrawer;

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

@@ -1,3 +1,7 @@
 import type { AiChatDrawerProps } from "./RemoteAiChatDrawer/RemoteAiChatDrawer";
+/**
+ * Renders the AiChatDrawer in an shadow DOM in order to isolate the drawer
+ * styles from external stylesheets.
+ */
 declare const init: (opts: AiChatDrawerProps) => void;
 export { init };

package/dist/cjs/bundles/remoteAiChatDrawer.js

@@ -5,11 +5,36 @@ const React = require("react");
 const client_1 = require("react-dom/client");
 const RemoteAiChatDrawer_1 = require("./RemoteAiChatDrawer/RemoteAiChatDrawer");
 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
+ * styles from external stylesheets.
+ */
 const init = (opts) => {
-    const root = document.createElement("div");
-    root.id = "smoot-chat-drawer-root";
-    document.body.append(root);
-    (0, client_1.createRoot)(root).render(React.createElement(ThemeProvider_1.ThemeProvider, null,
-        React.createElement(RemoteAiChatDrawer_1.AiChatDrawer, Object.assign({}, opts))));
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const shadowContainer = container.attachShadow({ mode: "open" });
+    const shadowRootEl = document.createElement("div");
+    shadowRootEl.id = "smoot-chat-drawer-root";
+    shadowContainer.append(shadowRootEl);
+    // See https://mui.com/material-ui/customization/shadow-dom/
+    // Ensure style tags are rendered in shadow root
+    const cache = (0, cache_1.default)({
+        key: "css",
+        prepend: true,
+        container: shadowContainer,
+    });
+    const theme = (0, ThemeProvider_1.createTheme)({
+        components: {
+            // Ensure modals, etc, are rendered in shadow root
+            MuiPopover: { defaultProps: { container: shadowRootEl } },
+            MuiPopper: { defaultProps: { container: shadowRootEl } },
+            MuiModal: { defaultProps: { container: shadowRootEl } },
+        },
+    });
+    (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)))));
 };
 exports.init = init;

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AiChatMessage } from "../../components/AiChat/types";
 import type { AiChatProps } from "../../components/AiChat/AiChat";
 type ChatInitMessage = {
     type: "smoot-design::chat-open";
@@ -8,6 +9,7 @@ type ChatInitMessage = {
         conversationStarters?: AiChatProps["conversationStarters"];
         initialMessages: AiChatProps["initialMessages"];
         apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+        requestBody?: Record<string, unknown>;
     };
 };
 type AiChatDrawerProps = {
@@ -19,9 +21,20 @@ type AiChatDrawerProps = {
     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
+     * transformBody taking precedence.
+     *
      * *This cannot be supplied via message events since the function is not serializable.*
+     *
      */
-    transformBody?: AiChatProps["requestOpts"]["transformBody"];
+    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"];
 };
 declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
 export { AiChatDrawer };

package/dist/esm/bundles/RemoteAiChatDrawer/RemoteAiChatDrawer.js

@@ -1,7 +1,11 @@
 import * as React from "react";
 import { AiChat } from "../../components/AiChat/AiChat";
 import Drawer from "@mui/material/Drawer";
-const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
+const identity = (x) => x;
+const DEFAULT_FETCH_OPTS = {
+    credentials: "include",
+};
+const AiChatDrawer = ({ messageOrigin, transformBody = identity, className, fetchOpts, }) => {
     const [open, setOpen] = React.useState(false);
     const [chatSettings, setChatSettings] = React.useState(null);
     React.useEffect(() => {
@@ -17,7 +21,6 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 setChatSettings(event.data.payload);
             }
         };
-        console.log("Attaching listener");
         window.addEventListener("message", cb);
         return () => {
             window.removeEventListener("message", cb);
@@ -25,7 +28,7 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
     }, [messageOrigin]);
     return (React.createElement(Drawer, { className: className, PaperProps: {
             sx: {
-                width: "600px",
+                width: "900px",
                 maxWidth: "100%",
                 boxSizing: "border-box",
                 padding: "24px 40px",
@@ -34,8 +37,11 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 },
             },
         }, anchor: "right", open: open, onClose: () => setOpen(false) }, chatSettings ? (React.createElement(AiChat, Object.assign({}, chatSettings, { requestOpts: {
-            transformBody,
+            transformBody: (messages) => {
+                return Object.assign(Object.assign({}, chatSettings.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages));
+            },
             apiUrl: chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.apiUrl,
+            fetchOpts: Object.assign(Object.assign({}, DEFAULT_FETCH_OPTS), fetchOpts),
         }, onClose: () => setOpen(false) }))) : null));
 };
 export { AiChatDrawer };

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

@@ -1,3 +1,7 @@
 import type { AiChatDrawerProps } from "./RemoteAiChatDrawer/RemoteAiChatDrawer";
+/**
+ * Renders the AiChatDrawer in an shadow DOM in order to isolate the drawer
+ * styles from external stylesheets.
+ */
 declare const init: (opts: AiChatDrawerProps) => void;
 export { init };

package/dist/esm/bundles/remoteAiChatDrawer.js

@@ -1,12 +1,37 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { AiChatDrawer } from "./RemoteAiChatDrawer/RemoteAiChatDrawer";
-import { ThemeProvider } from "../components/ThemeProvider/ThemeProvider";
+import { ThemeProvider, createTheme, } from "../components/ThemeProvider/ThemeProvider";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
+/**
+ * Renders the AiChatDrawer in an shadow DOM in order to isolate the drawer
+ * styles from external stylesheets.
+ */
 const init = (opts) => {
-    const root = document.createElement("div");
-    root.id = "smoot-chat-drawer-root";
-    document.body.append(root);
-    createRoot(root).render(React.createElement(ThemeProvider, null,
-        React.createElement(AiChatDrawer, Object.assign({}, opts))));
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const shadowContainer = container.attachShadow({ mode: "open" });
+    const shadowRootEl = document.createElement("div");
+    shadowRootEl.id = "smoot-chat-drawer-root";
+    shadowContainer.append(shadowRootEl);
+    // See https://mui.com/material-ui/customization/shadow-dom/
+    // Ensure style tags are rendered in shadow root
+    const cache = createCache({
+        key: "css",
+        prepend: true,
+        container: shadowContainer,
+    });
+    const theme = createTheme({
+        components: {
+            // Ensure modals, etc, are rendered in shadow root
+            MuiPopover: { defaultProps: { container: shadowRootEl } },
+            MuiPopper: { defaultProps: { container: shadowRootEl } },
+            MuiModal: { defaultProps: { container: shadowRootEl } },
+        },
+    });
+    createRoot(shadowRootEl).render(React.createElement(CacheProvider, { value: cache },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(AiChatDrawer, Object.assign({}, opts)))));
 };
 export { init };