@mitodl/smoot-design 3.3.0 → 3.4.0

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { AiChatProps } from "../../components/AiChat/AiChat";
+type ChatInitMessage = {
+    type: "smoot-design::chat-open";
+    payload: {
+        chatId?: AiChatProps["chatId"];
+        askTimTitle?: AiChatProps["title"];
+        conversationStarters?: AiChatProps["conversationStarters"];
+        initialMessages: AiChatProps["initialMessages"];
+        apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+    };
+};
+type AiChatDrawerProps = {
+    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.
+     * *This cannot be supplied via message events since the function is not serializable.*
+     */
+    transformBody?: AiChatProps["requestOpts"]["transformBody"];
+};
+declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
+export { AiChatDrawer };
+export type { AiChatDrawerProps, ChatInitMessage };

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 [open, setOpen] = React.useState(false);
+    const [chatSettings, setChatSettings] = React.useState(null);
+    React.useEffect(() => {
+        const cb = (event) => {
+            if (event.origin !== messageOrigin) {
+                if (process.env.NODE_ENV === "development") {
+                    console.warn(`AiChatDrawer: received message from unexpected origin: ${event.origin}`);
+                }
+                return;
+            }
+            if (event.data.type === "smoot-design::chat-open") {
+                setOpen(true);
+                setChatSettings(event.data.payload);
+            }
+        };
+        console.log("Attaching listener");
+        window.addEventListener("message", cb);
+        return () => {
+            window.removeEventListener("message", cb);
+        };
+    }, [messageOrigin]);
+    return (React.createElement(Drawer_1.default, { className: className, PaperProps: {
+            sx: {
+                width: "600px",
+                maxWidth: "100%",
+                boxSizing: "border-box",
+                padding: "24px 40px",
+                ".MitAiChat--title": {
+                    paddingTop: "0px",
+                },
+            },
+        }, anchor: "right", open: open, onClose: () => setOpen(false) }, chatSettings ? (React.createElement(AiChat_1.AiChat, Object.assign({}, chatSettings, { requestOpts: {
+            transformBody,
+            apiUrl: chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.apiUrl,
+        }, onClose: () => setOpen(false) }))) : null));
+};
+exports.AiChatDrawer = AiChatDrawer;

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

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

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamingResponses = void 0;
+/* eslint-disable react-hooks/rules-of-hooks */
+const React = require("react");
+const RemoteAiChatDrawer_1 = require("./RemoteAiChatDrawer");
+const tiny_invariant_1 = require("tiny-invariant");
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const INITIAL_MESSAGES = [
+    {
+        content: "Hi! What are you interested in learning about?",
+        role: "assistant",
+    },
+];
+const STARTERS = [
+    { content: "I'm interested in quantum computing" },
+    { content: "I want to understand global warming. " },
+    { content: "I am curious about AI applications for business" },
+];
+const meta = {
+    title: "smoot-design/AI/RemoteAiChatDrawer",
+    component: RemoteAiChatDrawer_1.AiChatDrawer,
+    render: () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("iframe", { width: "600px", height: "300px", ref: (el) => {
+                    var _a;
+                    if (!el)
+                        return;
+                    const doc = el.contentDocument;
+                    const parent = (_a = el.contentWindow) === null || _a === void 0 ? void 0 : _a.parent;
+                    (0, tiny_invariant_1.default)(doc && parent);
+                    const button = doc.createElement("button");
+                    button.textContent = "Trigger chat (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"] = "225px";
+                    const message = {
+                        type: "smoot-design::chat-open",
+                        payload: {
+                            askTimTitle: "for help with Problem: Derivatives 1.1",
+                            apiUrl: TEST_API_STREAMING,
+                            initialMessages: INITIAL_MESSAGES,
+                            conversationStarters: STARTERS,
+                        },
+                    };
+                    textarea.value = JSON.stringify(message, null, 2);
+                    button.addEventListener("click", () => {
+                        parent.postMessage(JSON.parse(textarea.value));
+                    });
+                }, title: "button frame" }),
+            React.createElement(RemoteAiChatDrawer_1.AiChatDrawer, { messageOrigin: "http://localhost:6006" })));
+    },
+};
+exports.default = meta;
+exports.StreamingResponses = {};

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

@@ -0,0 +1,3 @@
+import type { AiChatDrawerProps } from "./RemoteAiChatDrawer/RemoteAiChatDrawer";
+declare const init: (opts: AiChatDrawerProps) => void;
+export { init };

package/dist/cjs/bundles/remoteAiChatDrawer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = void 0;
+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 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))));
+};
+exports.init = init;

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { AiChatProps } from "../../components/AiChat/AiChat";
+type ChatInitMessage = {
+    type: "smoot-design::chat-open";
+    payload: {
+        chatId?: AiChatProps["chatId"];
+        askTimTitle?: AiChatProps["title"];
+        conversationStarters?: AiChatProps["conversationStarters"];
+        initialMessages: AiChatProps["initialMessages"];
+        apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+    };
+};
+type AiChatDrawerProps = {
+    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.
+     * *This cannot be supplied via message events since the function is not serializable.*
+     */
+    transformBody?: AiChatProps["requestOpts"]["transformBody"];
+};
+declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
+export { AiChatDrawer };
+export type { AiChatDrawerProps, ChatInitMessage };

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { AiChat } from "../../components/AiChat/AiChat";
+import Drawer from "@mui/material/Drawer";
+const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
+    const [open, setOpen] = React.useState(false);
+    const [chatSettings, setChatSettings] = React.useState(null);
+    React.useEffect(() => {
+        const cb = (event) => {
+            if (event.origin !== messageOrigin) {
+                if (process.env.NODE_ENV === "development") {
+                    console.warn(`AiChatDrawer: received message from unexpected origin: ${event.origin}`);
+                }
+                return;
+            }
+            if (event.data.type === "smoot-design::chat-open") {
+                setOpen(true);
+                setChatSettings(event.data.payload);
+            }
+        };
+        console.log("Attaching listener");
+        window.addEventListener("message", cb);
+        return () => {
+            window.removeEventListener("message", cb);
+        };
+    }, [messageOrigin]);
+    return (React.createElement(Drawer, { className: className, PaperProps: {
+            sx: {
+                width: "600px",
+                maxWidth: "100%",
+                boxSizing: "border-box",
+                padding: "24px 40px",
+                ".MitAiChat--title": {
+                    paddingTop: "0px",
+                },
+            },
+        }, anchor: "right", open: open, onClose: () => setOpen(false) }, chatSettings ? (React.createElement(AiChat, Object.assign({}, chatSettings, { requestOpts: {
+            transformBody,
+            apiUrl: chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.apiUrl,
+        }, onClose: () => setOpen(false) }))) : null));
+};
+export { AiChatDrawer };

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

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

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

@@ -0,0 +1,60 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import * as React from "react";
+import { AiChatDrawer } from "./RemoteAiChatDrawer";
+import invariant from "tiny-invariant";
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const INITIAL_MESSAGES = [
+    {
+        content: "Hi! What are you interested in learning about?",
+        role: "assistant",
+    },
+];
+const STARTERS = [
+    { content: "I'm interested in quantum computing" },
+    { content: "I want to understand global warming. " },
+    { content: "I am curious about AI applications for business" },
+];
+const meta = {
+    title: "smoot-design/AI/RemoteAiChatDrawer",
+    component: AiChatDrawer,
+    render: () => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("iframe", { width: "600px", height: "300px", ref: (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 = "Trigger chat (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"] = "225px";
+                    const message = {
+                        type: "smoot-design::chat-open",
+                        payload: {
+                            askTimTitle: "for help with Problem: Derivatives 1.1",
+                            apiUrl: TEST_API_STREAMING,
+                            initialMessages: INITIAL_MESSAGES,
+                            conversationStarters: STARTERS,
+                        },
+                    };
+                    textarea.value = JSON.stringify(message, null, 2);
+                    button.addEventListener("click", () => {
+                        parent.postMessage(JSON.parse(textarea.value));
+                    });
+                }, title: "button frame" }),
+            React.createElement(AiChatDrawer, { messageOrigin: "http://localhost:6006" })));
+    },
+};
+export default meta;
+export const StreamingResponses = {};

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

@@ -0,0 +1,3 @@
+import type { AiChatDrawerProps } from "./RemoteAiChatDrawer/RemoteAiChatDrawer";
+declare const init: (opts: AiChatDrawerProps) => void;
+export { init };

package/dist/esm/bundles/remoteAiChatDrawer.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { AiChatDrawer } from "./RemoteAiChatDrawer/RemoteAiChatDrawer";
+import { ThemeProvider } from "../components/ThemeProvider/ThemeProvider";
+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))));
+};
+export { init };