@mitodl/smoot-design 3.3.0 → 3.4.1

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,66 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import * as React from "react";
+import { AiChatDrawer } from "./RemoteAiChatDrawer";
+import invariant from "tiny-invariant";
+import { handlers } from "../../components/AiChat/test-utils/api";
+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" })));
+    },
+    parameters: {
+        msw: {
+            handlers,
+        },
+    },
+};
+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 };

package/dist/esm/components/AiChat/AiChat.js

@@ -21,6 +21,7 @@ import classNames from "classnames";
 import { SrAnnouncer } from "../SrAnnouncer/SrAnnouncer";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 import Typography from "@mui/material/Typography";
+import { Alert } from "../Alert/Alert";
 const classes = {
     root: "MitAiChat--root",
     title: "MitAiChat--title",
@@ -162,7 +163,7 @@ const AiChatInternal = function AiChat(_a) {
         const prefix = Math.random().toString().slice(2);
         return initMsgs.map((m, i) => (Object.assign(Object.assign({}, m), { id: `initial-${prefix}-${i}` })));
     }, [initMsgs]);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, } = useAiChat(requestOpts, {
+    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, error, } = useAiChat(requestOpts, {
         initialMessages: initialMessages,
         id: chatId,
     });
@@ -178,7 +179,7 @@ const AiChatInternal = function AiChat(_a) {
         });
     }, [parseContent, unparsed, initialMessages]);
     const showStarters = messages.length === initialMessages.length;
-    const waiting = !showStarters && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
+    const waiting = !showStarters && !error && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
     const stoppable = isLoading && ((_c = messages[messages.length - 1]) === null || _c === void 0 ? void 0 : _c.role) !== "user";
     const scrollToBottom = () => {
         var _a;
@@ -204,7 +205,8 @@ const AiChatInternal = function AiChat(_a) {
                 } }, m.content))))) : null,
             waiting ? (React.createElement(MessageRow, { className: classNames(classes.messageRow, classes.messageRowAssistant), key: "loading" },
                 React.createElement(Message, null,
-                    React.createElement(RiMoreFill, null)))) : null),
+                    React.createElement(RiMoreFill, null)))) : null,
+            error ? (React.createElement(Alert, { severity: "error", closable: true }, "An unexpected error has occurred.")) : null),
         React.createElement("form", { onSubmit: (e) => {
                 e.preventDefault();
                 if (isLoading && stoppable) {

package/dist/esm/components/AiChat/AiChat.stories.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { AiChat } from "./AiChat";
-import { mockJson, mockStreaming } from "./story-utils";
 import styled from "@emotion/styled";
 import { fn } from "@storybook/test";
+import { handlers } from "./test-utils/api";
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const TEST_API_JSON = "http://localhost:4567/json";
 const INITIAL_MESSAGES = [
@@ -31,6 +31,9 @@ const Container = styled.div({
 const meta = {
     title: "smoot-design/AI/AiChat",
     component: AiChat,
+    parameters: {
+        msw: { handlers },
+    },
     render: (args) => React.createElement(AiChat, Object.assign({}, args)),
     decorators: (Story) => {
         return (React.createElement(Container, null,
@@ -55,18 +58,6 @@ const meta = {
             table: { readonly: true }, // See above
         },
     },
-    beforeEach: () => {
-        const originalFetch = window.fetch;
-        window.fetch = (url, opts) => {
-            if (url === TEST_API_STREAMING) {
-                return mockStreaming();
-            }
-            else if (url === TEST_API_JSON) {
-                return mockJson();
-            }
-            return originalFetch(url, opts);
-        };
-    },
 };
 export default meta;
 export const StreamingResponses = {};

package/dist/esm/components/AiChat/AiChat.test.js

@@ -15,17 +15,18 @@ import { AiChat } from "./AiChat";
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider";
 import * as React from "react";
 import { faker } from "@faker-js/faker/locale/en";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
 const counter = jest.fn(); // use jest.fn as counter because it resets on each test
-const mockFetch = jest.mocked(jest.fn(() => {
+const API_URL = "http://localhost:4567/test";
+const server = setupServer(http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
     const count = counter.mock.calls.length;
     counter();
-    return Promise.resolve(new Response(`AI Response ${count}`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    }));
-}));
-window.fetch = mockFetch;
+    return HttpResponse.text(`AI Response ${count}`);
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
 jest.mock("react-markdown", () => {
     return {
         __esModule: true,
@@ -58,9 +59,9 @@ describe("AiChat", () => {
             { content: faker.lorem.sentence() },
             { content: faker.lorem.sentence() },
         ];
-        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider });
+        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider });
         const rerender = (newProps) => {
-            view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
+            view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL } }, newProps)));
         };
         return { initialMessages, conversationStarters, rerender };
     };
@@ -106,11 +107,11 @@ describe("AiChat", () => {
         yield whenCount(getMessages, 3);
     }));
     test("transformBody is called before sending requests", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockFetch = jest.spyOn(window, "fetch");
         const fakeBody = { message: faker.lorem.sentence() };
-        const apiUrl = faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         const { initialMessages } = setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
         });
         yield user.click(screen.getByPlaceholderText("Type a message..."));
         yield user.paste("User message");
@@ -120,16 +121,15 @@ describe("AiChat", () => {
             expect.objectContaining({ content: "User message", role: "user" }),
         ]);
         expect(mockFetch).toHaveBeenCalledTimes(1);
-        expect(mockFetch).toHaveBeenCalledWith(apiUrl, expect.objectContaining({
+        expect(mockFetch).toHaveBeenCalledWith(API_URL, expect.objectContaining({
             body: JSON.stringify(fakeBody),
         }));
     }));
     test("parseContent is called on the API-received message content", () => __awaiter(void 0, void 0, void 0, function* () {
         const fakeBody = { message: faker.lorem.sentence() };
-        const apiUrl = faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         const { initialMessages, conversationStarters } = setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
             parseContent: jest.fn((content) => `Parsed: ${content}`),
         });
         yield user.click(getConversationStarters()[0]);
@@ -149,12 +149,20 @@ describe("AiChat", () => {
     }));
     test("Passes extra attributes to root", () => {
         const fakeBody = { message: faker.lorem.sentence() };
-        const apiUrl = faker.internet.url();
         const transformBody = jest.fn(() => fakeBody);
         setup({
-            requestOpts: { apiUrl, transformBody },
+            requestOpts: { apiUrl: API_URL, transformBody },
             parseContent: jest.fn((content) => `Parsed: ${content}`),
         });
         expect(screen.getByTestId("ai-chat")).toBeInTheDocument();
     });
+    test("If the API returns an error, an alert is shown", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup();
+        server.use(http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+            return new HttpResponse(null, { status: 500 });
+        })));
+        yield user.click(getConversationStarters()[0]);
+        const alert = yield screen.findByRole("alert");
+        expect(alert).toHaveTextContent("An unexpected error has occurred");
+    }));
 });

package/dist/esm/components/AiChat/test-utils/api.d.ts

@@ -0,0 +1,2 @@
+declare const handlers: import("msw").HttpHandler[];
+export { handlers };

package/dist/{cjs/components/AiChat/story-utils.js → esm/components/AiChat/test-utils/api.js}

@@ -1,4 +1,3 @@
-"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) {
@@ -8,8 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockJson = exports.mockStreaming = void 0;
+import { http, HttpResponse, delay } from "msw";
 const SAMPLE_RESPONSES = [
     `For exploring AI applications in business, I recommend the following course from MIT:
 
@@ -45,59 +43,67 @@ const rand = (min, max) => {
     // min and max included
     return Math.floor(Math.random() * (max - min + 1) + min);
 };
-const mockStreaming = function mockApi() {
-    return __awaiter(this, void 0, void 0, function* () {
-        let timerId;
-        const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-        const chunks = response.split(" ").reduce((acc, word) => {
-            const last = acc[acc.length - 1];
-            if (acc.length === 0) {
-                acc.push(word);
-            }
-            else if (Math.random() < 0.75) {
-                acc[acc.length - 1] = `${last} ${word}`;
-            }
-            else {
-                acc.push(` ${word}`);
-            }
-            return acc;
-        }, []);
-        const num = chunks.length;
-        let i = 0;
-        yield new Promise((resolve) => setTimeout(resolve, 800));
-        const body = new ReadableStream({
-            start(controller) {
-                timerId = setInterval(() => {
-                    const msg = new TextEncoder().encode(chunks[i]);
-                    controller.enqueue(msg);
-                    i++;
-                    if (i === num) {
-                        controller.close();
-                        clearInterval(timerId);
-                    }
-                }, 100);
-            },
-            cancel() {
-                if (timerId) {
+const getReadableStream = () => {
+    let timerId;
+    const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+    const chunks = response.split(" ").reduce((acc, word) => {
+        const last = acc[acc.length - 1];
+        if (acc.length === 0) {
+            acc.push(word);
+        }
+        else if (Math.random() < 0.75) {
+            acc[acc.length - 1] = `${last} ${word}`;
+        }
+        else {
+            acc.push(` ${word}`);
+        }
+        return acc;
+    }, []);
+    const num = chunks.length;
+    let i = 0;
+    return new ReadableStream({
+        start(controller) {
+            timerId = setInterval(() => {
+                const msg = new TextEncoder().encode(chunks[i]);
+                controller.enqueue(msg);
+                i++;
+                if (i === num) {
+                    controller.close();
                     clearInterval(timerId);
                 }
-            },
-        });
-        return Promise.resolve(new Response(body, {
-            headers: {
-                "Content-Type": "text/event-stream",
-            },
-        }));
+            }, 100);
+        },
+        cancel() {
+            if (timerId) {
+                clearInterval(timerId);
+            }
+        },
     });
 };
-exports.mockStreaming = mockStreaming;
-const mockJson = () => __awaiter(void 0, void 0, void 0, function* () {
-    const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-    yield new Promise((res) => setTimeout(res, 1000));
-    return Promise.resolve(new Response(JSON.stringify({ message }), {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    }));
-});
-exports.mockJson = mockJson;
+const handlers = [
+    http.post("http://localhost:4567/streaming", (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+        yield delay(600);
+        const body = getReadableStream();
+        const requestBody = yield request.json();
+        if (Array.isArray(requestBody)) {
+            const last = requestBody[requestBody.length - 1];
+            const { content } = last;
+            if (content === "error") {
+                return new HttpResponse("Internal Server Error", {
+                    status: 500,
+                });
+            }
+        }
+        return new HttpResponse(body, {
+            headers: {
+                "Content-Type": "text/plain",
+            },
+        });
+    })),
+    http.post("http://localhost:4567/json", () => __awaiter(void 0, void 0, void 0, function* () {
+        const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+        yield delay(800);
+        return HttpResponse.json({ message });
+    })),
+];
+export { handlers };

package/dist/esm/components/Alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { AlertColor } from "@mui/material/Alert";
+type AlertProps = {
+    visible?: boolean;
+    closable?: boolean;
+    className?: string;
+    severity?: AlertColor;
+    /**
+     * Alert Content
+     */
+    children?: React.ReactNode;
+};
+declare const Alert: React.FC<AlertProps>;
+export { Alert };
+export type { AlertProps };

package/dist/esm/components/Alert/Alert.js

@@ -0,0 +1,59 @@
+"use client";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { default as MuiAlert } from "@mui/material/Alert";
+const getColor = (theme, severity) => {
+    return {
+        info: theme.custom.colors.blue,
+        success: theme.custom.colors.green,
+        warning: theme.custom.colors.orange,
+        error: theme.custom.colors.lightRed,
+    }[severity];
+};
+const AlertStyled = styled(MuiAlert)(({ theme, severity }) => ({
+    padding: "11px 16px",
+    borderRadius: 4,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: getColor(theme, severity),
+    background: "#FFF",
+    ".MuiAlert-message": Object.assign(Object.assign({}, theme.typography.body2), { color: theme.custom.colors.darkGray2, alignSelf: "center" }),
+    "> div": {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    ".MuiAlert-icon": {
+        marginRight: 8,
+        svg: {
+            width: 16,
+            fill: getColor(theme, severity),
+        },
+    },
+    button: {
+        padding: 0,
+        ":hover": {
+            margin: 0,
+            background: "none",
+        },
+    },
+}));
+const Hidden = styled.span({ display: "none" });
+const Alert = ({ visible = true, severity = "info", closable, children, className, }) => {
+    const [_visible, setVisible] = React.useState(visible);
+    const id = React.useId();
+    const onCloseClick = () => {
+        setVisible(false);
+    };
+    React.useEffect(() => {
+        setVisible(visible);
+    }, [visible]);
+    if (!_visible) {
+        return null;
+    }
+    return (React.createElement(AlertStyled, { severity: severity, onClose: closable ? onCloseClick : undefined, role: "alert", "aria-describedby": id, className: className },
+        children,
+        React.createElement(Hidden, { id: id },
+            severity,
+            " message")));
+};
+export { Alert };

package/dist/esm/components/Alert/Alert.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Basic: Story;
+export declare const Closable: Story;
+export declare const Variants: Story;

package/dist/esm/components/Alert/Alert.stories.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Alert } from "./Alert";
+import Stack from "@mui/material/Stack";
+const meta = {
+    title: "smoot-design/Alert",
+    component: Alert,
+};
+export default meta;
+export const Basic = {
+    args: {
+        severity: "info",
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Closable = {
+    args: {
+        severity: "warning",
+        closable: true,
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Closable alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Variants = {
+    argTypes: {
+        severity: {
+            table: {
+                disable: true,
+            },
+        },
+        closable: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => (React.createElement(Stack, { direction: "column", gap: 2, sx: { my: 2 } },
+        React.createElement(Alert, Object.assign({}, args, { severity: "info" }), "Alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "info" }), "Closable alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "success" }), "Alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "success" }), "Closable alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "warning" }), "Alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "warning" }), "Closable alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "error" }), "Alert with severity \"error\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "error" }), "Closable alert with severity \"error\""))),
+};