@mitodl/smoot-design 0.0.0-preview215f7ae3fa

package/dist/cjs/story-utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gitLink = exports.enumValues = void 0;
+/**
+ * A type helper just to make sure an array contains union values.
+ */
+const enumValues = (obj) => {
+    return Object.keys(obj);
+};
+exports.enumValues = enumValues;
+const gitLink = (filepath) => {
+    if (!filepath.startsWith("src/")) {
+        throw new Error(`Invalid filepath: ${filepath}\nShould start with "src/"`);
+    }
+    return `https://github.com/mitodl/smoot-design/blob/${process.env.STORYBOOK_GIT_SHA}/${filepath}`;
+};
+exports.gitLink = gitLink;

package/dist/cjs/utils/composeRefs.d.ts

@@ -0,0 +1,7 @@
+import type { MutableRefObject, ForwardedRef, RefCallback } from "react";
+/**
+ * Compose 2+ refs. Useful when a reusable component needs a ref itself, but
+ * consumers may also need the ref.
+ */
+declare const composeRefs: <T>(...refs: (ForwardedRef<T> | MutableRefObject<T | undefined> | RefCallback<T>)[]) => RefCallback<T>;
+export { composeRefs };

package/dist/cjs/utils/composeRefs.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeRefs = void 0;
+/**
+ * Compose 2+ refs. Useful when a reusable component needs a ref itself, but
+ * consumers may also need the ref.
+ */
+const composeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        });
+    };
+};
+exports.composeRefs = composeRefs;

package/dist/cjs/utils/composeRefs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/utils/composeRefs.test.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const composeRefs_1 = require("./composeRefs");
+const react_1 = require("@testing-library/react");
+describe("composeRefs", () => {
+    test("Composing object + fn ref", () => {
+        const objRef1 = { current: null };
+        const objRef2 = { current: null };
+        const fnRef1 = jest.fn();
+        const fnRef2 = jest.fn();
+        (0, react_1.render)(React.createElement("div", { "data-testid": "my-div", ref: (0, composeRefs_1.composeRefs)(objRef1, objRef2, fnRef1, fnRef2) }));
+        const el = react_1.screen.getByTestId("my-div");
+        expect(objRef1.current).toBe(el);
+        expect(objRef2.current).toBe(el);
+        expect(fnRef1).toHaveBeenCalledWith(el);
+        expect(fnRef2).toHaveBeenCalledWith(el);
+    });
+});

package/dist/cjs/utils/useDevCheckStable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Emits `console.error` if two subsequent values of `jsonSerializable` serialize
+ * to the same thing but are different references.
+ *
+ * This hook does NOT run in production.
+ */
+declare const useDevCheckStable: (jsonSerializable: unknown, msg?: string) => void;
+export { useDevCheckStable };

package/dist/cjs/utils/useDevCheckStable.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDevCheckStable = void 0;
+const react_1 = require("react");
+/**
+ * Emits `console.error` if two subsequent values of `jsonSerializable` serialize
+ * to the same thing but are different references.
+ *
+ * This hook does NOT run in production.
+ */
+const useDevCheckStable = (jsonSerializable, msg = "The value has changed. This may cause unnecessary re-renders") => {
+    if (process.env.NODE_ENV !== "production") {
+        /**
+         * Calling hooks conditionally based on env vars is not really a problem.
+         * In a given environment, the hook will always run or always not run.
+         */
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const valRef = (0, react_1.useRef)(jsonSerializable);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useEffect)(() => {
+            const sameJson = JSON.stringify(valRef.current) === JSON.stringify(jsonSerializable);
+            const differentRefs = valRef.current !== jsonSerializable;
+            if (!sameJson || differentRefs) {
+                console.error(`useDevCheckStable: ${msg}`, valRef.current, jsonSerializable);
+            }
+        }, [jsonSerializable, msg]);
+    }
+};
+exports.useDevCheckStable = useDevCheckStable;

package/dist/cjs/utils/useInterval.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calls a function at a specified interval.
+ *
+ * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+declare const useInterval: (callback: () => void, delay: number | null) => void;
+export { useInterval };

package/dist/cjs/utils/useInterval.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+const react_1 = require("react");
+/**
+ * Calls a function at a specified interval.
+ *
+ * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+const useInterval = (callback, delay) => {
+    const savedCallback = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    (0, react_1.useEffect)(() => {
+        if (delay !== null) {
+            const id = setInterval(() => { var _a; return (_a = savedCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedCallback); }, delay);
+            return () => clearInterval(id);
+        }
+        else {
+            return () => { };
+        }
+    }, [delay]);
+};
+exports.useInterval = useInterval;

package/dist/esm/ai.d.ts

@@ -0,0 +1,2 @@
+export { AiChat } from "./components/AiChat/AiChat";
+export type { AiChatProps } from "./components/AiChat/AiChat";

package/dist/esm/ai.js

@@ -0,0 +1 @@
+export { AiChat } from "./components/AiChat/AiChat";

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

@@ -0,0 +1,6 @@
+import type { AiChatProps } from "../ai";
+type CreateChatOptions = {
+    root: HTMLElement;
+} & AiChatProps;
+declare const aiChat: (opts: CreateChatOptions) => void;
+export { aiChat };

package/dist/esm/bundles/aiChat.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { AiChat } from "../ai";
+import { ThemeProvider } from "../index";
+const aiChat = (opts) => {
+    const root = opts.root;
+    createRoot(root).render(React.createElement(ThemeProvider, null,
+        React.createElement(AiChat, Object.assign({}, opts))));
+};
+export { aiChat };

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { AiChatProps } from "./types";
+declare const AiChat: React.FC<AiChatProps>;
+export { AiChat };
+export type { AiChatProps };

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

@@ -0,0 +1,147 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import Skeleton from "@mui/material/Skeleton";
+import { Input } from "../Input/Input";
+import { ActionButton } from "../Button/ActionButton";
+import { RiSendPlaneFill } from "@remixicon/react";
+import { useAiChat } from "./utils";
+import Markdown from "react-markdown";
+import { ScrollSnap } from "../ScrollSnap/ScrollSnap";
+import classNames from "classnames";
+import { SrAnnouncer } from "../SrAnnouncer/SrAnnouncer";
+const ChatContainer = styled.div(({ theme }) => ({
+    width: "100%",
+    height: "100%",
+    border: `1px solid ${theme.custom.colors.silverGrayLight}`,
+    backgroundColor: theme.custom.colors.lightGray1,
+    display: "flex",
+    flexDirection: "column",
+}));
+const MessagesContainer = styled(ScrollSnap)({
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    padding: "24px",
+    paddingBottom: "0px",
+    overflow: "auto",
+});
+const MessageRow = styled.div(({ reverse }) => [
+    {
+        margin: "8px 0",
+        display: "flex",
+        width: "100%",
+        flexDirection: reverse ? "row-reverse" : "row",
+    },
+]);
+const Avatar = styled.div({});
+const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, borderRadius: "24px", padding: "4px 16px" }, theme.typography.body2), { "p:first-of-type": {
+        marginTop: 0,
+    }, "p:last-of-type": {
+        marginBottom: 0,
+    }, a: {
+        color: theme.custom.colors.mitRed,
+        textDecoration: "none",
+    }, "a:hover": {
+        color: theme.custom.colors.red,
+        textDecoration: "underline",
+    } })));
+const StarterContainer = styled.div({
+    alignSelf: "flex-end",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+});
+const Starter = styled.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, borderRadius: "24px", padding: "4px 16px" }, theme.typography.body2), { cursor: "pointer", "&:hover": {
+        backgroundColor: theme.custom.colors.lightGray1,
+    } })));
+const Controls = styled.div(({ theme }) => ({
+    display: "flex",
+    justifyContent: "space-around",
+    padding: "12px 24px",
+    backgroundColor: theme.custom.colors.white,
+}));
+const Form = styled.form(() => ({
+    display: "flex",
+    width: "80%",
+    gap: "12px",
+    alignItems: "center",
+}));
+const DotsContainer = styled.span(({ theme }) => ({
+    display: "inline-flex",
+    gap: "4px",
+    ".MuiSkeleton-root": {
+        backgroundColor: theme.custom.colors.silverGray,
+    },
+}));
+const Dots = () => {
+    return (React.createElement(DotsContainer, null,
+        React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" }),
+        React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" }),
+        React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" })));
+};
+const classes = {
+    root: "MitAiChat--root",
+    conversationStarter: "MitAiChat--conversationStarter",
+    messagesContainer: "MitAiChat--messagesContainer",
+    messageRow: "MitAiChat--messageRow",
+    message: "MitAiChat--message",
+    avatar: "MitAiChat--avatar",
+    input: "MitAiChat--input",
+};
+const AiChat = function AiChat({ className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, }) {
+    var _a;
+    const [showStarters, setShowStarters] = React.useState(true);
+    const messagesRef = React.useRef(null);
+    const initialMessages = React.useMemo(() => {
+        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, } = useAiChat(requestOpts, {
+        initialMessages: initialMessages,
+    });
+    const messages = React.useMemo(() => {
+        const initial = initialMessages.map((m) => m.id);
+        return unparsed.map((m) => {
+            if (m.role === "assistant" && !initial.includes(m.id)) {
+                const content = parseContent ? parseContent(m.content) : m.content;
+                return Object.assign(Object.assign({}, m), { content });
+            }
+            return m;
+        });
+    }, [parseContent, unparsed, initialMessages]);
+    const waiting = !showStarters && ((_a = messages[messages.length - 1]) === null || _a === void 0 ? void 0 : _a.role) === "user";
+    const scrollToBottom = () => {
+        var _a;
+        (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
+            behavior: "instant",
+            top: messagesRef.current.scrollHeight,
+        });
+    };
+    const lastMsg = messages[messages.length - 1];
+    return (React.createElement(ChatContainer, { className: classNames(className, classes.root) },
+        React.createElement(MessagesContainer, { className: classes.messagesContainer, ref: messagesRef },
+            messages.map((m) => (React.createElement(MessageRow, { key: m.id, reverse: m.role === "user", "data-chat-role": m.role, className: classes.messageRow },
+                React.createElement(Avatar, null),
+                React.createElement(Message, { className: classes.message },
+                    React.createElement(Markdown, null, m.content))))),
+            showStarters ? (React.createElement(StarterContainer, null, conversationStarters === null || conversationStarters === void 0 ? void 0 : conversationStarters.map((m) => (React.createElement(Starter, { className: classes.conversationStarter, key: m.content, onClick: () => {
+                    setShowStarters(false);
+                    scrollToBottom();
+                    append({ role: "user", content: m.content });
+                } }, m.content))))) : null,
+            waiting ? (React.createElement(MessageRow, { key: "loading" },
+                React.createElement(Avatar, { className: classes.avatar }),
+                React.createElement(Message, null,
+                    React.createElement(Dots, null)))) : null),
+        React.createElement(Controls, null,
+            React.createElement(Form, { onSubmit: (e) => {
+                    setShowStarters(false);
+                    scrollToBottom();
+                    handleSubmit(e);
+                } },
+                React.createElement(Input, { className: classes.input, placeholder: "Type a message...", name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange }),
+                React.createElement(ActionButton, { "aria-label": "Send", type: "submit", disabled: isLoading || !input },
+                    React.createElement(RiSendPlaneFill, null)))),
+        React.createElement(SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
+};
+export { AiChat };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChat } from "./AiChat";
+declare const meta: Meta<typeof AiChat>;
+export default meta;
+type Story = StoryObj<typeof AiChat>;
+export declare const StreamingResponses: Story;
+/**
+ * Here `AiChat` is used with a non-streaming JSON API. The JSON is converted
+ * to text via `parseContent`.
+ */
+export declare const JsonResponses: Story;

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { AiChat } from "./AiChat";
+import { mockJson, mockStreaming } from "./story-utils";
+import styled from "@emotion/styled";
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const TEST_API_JSON = "http://localhost:4567/json";
+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 Container = styled.div({
+    width: "100%",
+    height: "350px",
+});
+const meta = {
+    title: "smoot-design/AiChat",
+    component: AiChat,
+    render: (args) => React.createElement(AiChat, Object.assign({}, args)),
+    decorators: (Story) => {
+        return (React.createElement(Container, null,
+            React.createElement(Story, null)));
+    },
+    args: {
+        initialMessages: INITIAL_MESSAGES,
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        conversationStarters: STARTERS,
+    },
+    argTypes: {
+        conversationStarters: {
+            control: { type: "object", disable: true },
+        },
+        initialMessages: {
+            control: { type: "object", disable: true },
+        },
+        requestOpts: {
+            control: { type: "object", disable: true },
+            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 = {};
+/**
+ * Here `AiChat` is used with a non-streaming JSON API. The JSON is converted
+ * to text via `parseContent`.
+ */
+export const JsonResponses = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_JSON },
+        parseContent: (content) => {
+            return JSON.parse(content).message;
+        },
+    },
+};

package/dist/esm/components/AiChat/AiChat.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,128 @@
+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());
+    });
+};
+// This was giving false positives
+/* eslint-disable testing-library/await-async-utils */
+import { render, screen, waitFor } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import { AiChat } from "./AiChat";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider";
+import * as React from "react";
+import { faker } from "@faker-js/faker/locale/en";
+const counter = jest.fn(); // use jest.fn as counter because it resets on each test
+const mockFetch = jest.mocked(jest.fn(() => {
+    const count = counter.mock.calls.length;
+    counter();
+    return Promise.resolve(new Response(`AI Response ${count}`, {
+        headers: {
+            "Content-Type": "application/json",
+        },
+    }));
+}));
+window.fetch = mockFetch;
+jest.mock("react-markdown", () => {
+    return {
+        __esModule: true,
+        default: ({ children }) => React.createElement("div", null, children),
+    };
+});
+const getMessages = () => {
+    return Array.from(document.querySelectorAll(".MitAiChat--message"));
+};
+const getConversationStarters = () => {
+    return Array.from(document.querySelectorAll("button.MitAiChat--conversationStarter"));
+};
+const whenCount = (cb, count) => __awaiter(void 0, void 0, void 0, function* () {
+    return yield waitFor(() => {
+        const result = cb();
+        expect(result).toHaveLength(count);
+        return result;
+    });
+});
+describe("AiChat", () => {
+    const setup = (props = {}) => {
+        const initialMessages = [
+            { role: "assistant", content: faker.lorem.sentence() },
+        ];
+        const conversationStarters = [
+            { content: faker.lorem.sentence() },
+            { content: faker.lorem.sentence() },
+        ];
+        render(React.createElement(AiChat, Object.assign({ initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider });
+        return { initialMessages, conversationStarters };
+    };
+    test("Clicking conversation starters and sending chats", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { initialMessages, conversationStarters } = setup();
+        const scrollBy = jest.spyOn(HTMLElement.prototype, "scrollBy");
+        const initialMessageEls = getMessages();
+        expect(initialMessageEls.length).toBe(1);
+        expect(initialMessageEls[0]).toHaveTextContent(initialMessages[0].content);
+        const starterEls = getConversationStarters();
+        expect(starterEls.length).toBe(2);
+        expect(starterEls[0]).toHaveTextContent(conversationStarters[0].content);
+        expect(starterEls[1]).toHaveTextContent(conversationStarters[1].content);
+        const chosen = faker.helpers.arrayElement([0, 1]);
+        yield user.click(starterEls[chosen]);
+        expect(scrollBy).toHaveBeenCalled();
+        scrollBy.mockReset();
+        const messageEls = yield whenCount(getMessages, 3);
+        expect(messageEls[0]).toHaveTextContent(initialMessages[0].content);
+        expect(messageEls[1]).toHaveTextContent(conversationStarters[chosen].content);
+        expect(messageEls[2]).toHaveTextContent("AI Response 0");
+        yield user.click(screen.getByPlaceholderText("Type a message..."));
+        yield user.paste("User message");
+        yield user.click(screen.getByRole("button", { name: "Send" }));
+        expect(scrollBy).toHaveBeenCalled();
+        const afterSending = yield whenCount(getMessages, 5);
+        expect(afterSending[3]).toHaveTextContent("User message");
+        expect(afterSending[4]).toHaveTextContent("AI Response 1");
+    }));
+    test("transformBody is called before sending requests", () => __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 } = setup({
+            requestOpts: { apiUrl, transformBody },
+        });
+        yield user.click(screen.getByPlaceholderText("Type a message..."));
+        yield user.paste("User message");
+        yield user.click(screen.getByRole("button", { name: "Send" }));
+        expect(transformBody).toHaveBeenCalledWith([
+            expect.objectContaining(initialMessages[0]),
+            expect.objectContaining({ content: "User message", role: "user" }),
+        ]);
+        expect(mockFetch).toHaveBeenCalledTimes(1);
+        expect(mockFetch).toHaveBeenCalledWith(apiUrl, 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 },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        yield user.click(getConversationStarters()[0]);
+        yield whenCount(getMessages, initialMessages.length + 2);
+        yield user.click(screen.getByPlaceholderText("Type a message..."));
+        yield user.paste("User message");
+        yield user.click(screen.getByRole("button", { name: "Send" }));
+        yield whenCount(getMessages, initialMessages.length + 4);
+        const messagesTexts = getMessages().map((el) => el.textContent);
+        expect(messagesTexts).toEqual([
+            initialMessages[0].content,
+            conversationStarters[0].content,
+            "Parsed: AI Response 0",
+            "User message",
+            "Parsed: AI Response 1",
+        ]);
+    }));
+});

package/dist/esm/components/AiChat/story-utils.d.ts

@@ -0,0 +1,3 @@
+declare const mockStreaming: () => Promise<Response>;
+declare const mockJson: () => Promise<Response>;
+export { mockStreaming, mockJson };

package/dist/esm/components/AiChat/story-utils.js

@@ -0,0 +1,96 @@
+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());
+    });
+};
+const SAMPLE_RESPONSES = [
+    `For exploring AI applications in business, I recommend the following course from MIT:
+
+1. **[Machine Learning, Modeling, and Simulation Principles](https://xpro.mit.edu/courses/course-v1:xPRO+MLx1/)**: Offered by MIT xPRO, this course is part of the program "Machine Learning, Modeling, and Simulation: Engineering Problem-Solving in the Age of AI." It focuses on the principles of machine learning and how they can be applied to solve engineering problems, which is highly relevant for business applications of AI.
+
+This course is not free, but it provides a certification upon completion, which can be valuable for professionals looking to apply AI in business contexts. It covers essential concepts that can help you understand how AI can be leveraged to improve business processes and decision-making.
+`,
+    `
+To understand global warming, I recommend the following resources from MIT:
+
+1. **[Global Warming Science](https://www.edx.org/learn/global-warming/massachusetts-institute-of-technology-global-warming-science)**: This course offered by MITx covers the physics, chemistry, biology, and geology of the earth’s climate system. It's a comprehensive introduction to the scientific principles underlying global warming.
+
+2. **[Global Warming Science](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+12.340x+1T2020/about)**: Another offering of the same course by MITx, available through the Open Learning Library. It provides the same in-depth exploration of the earth's climate system.
+
+These courses are free and provide a solid foundation in understanding the scientific aspects of global warming. They are suitable for anyone interested in the topic, regardless of prior knowledge.
+`,
+    `
+Here are some courses on linear algebra that you can explore:
+
+1. **[Linear Algebra (MIT OpenCourseWare)](https://openlearninglibrary.mit.edu/courses/course-v1:OCW+18.06SC+2T2019/about)**: This course covers matrix theory and linear algebra, emphasizing topics useful in various disciplines such as physics, economics, social sciences, natural sciences, and engineering. It parallels the combination of theory and applications in Professor Strang's textbook "Introduction to Linear Algebra." This course is free and available through MIT OpenCourseWare.
+
+2. **[Mathematical Methods for Quantitative Finance (MITx)](https://www.edx.org/learn/finance/massachusetts-institute-of-technology-mathematical-methods-for-quantitative-finance)**: This course covers the mathematical foundations essential for financial engineering and quantitative finance, including linear algebra, optimization, probability, stochastic processes, statistics, and applied computational techniques in R. It is free and offers certification upon completion.
+
+3. **[Quantum Information Science I, Part 1 (MITx)](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+8.370.1x+1T2018/about)**: While primarily focused on quantum information science, this course requires some knowledge of linear algebra and is suitable for those interested in quantum mechanics. It is free and available through MITx.
+
+These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
+`,
+];
+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, 1500));
+        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);
+                    }
+                }, 250);
+            },
+            cancel() {
+                if (timerId) {
+                    clearInterval(timerId);
+                }
+            },
+        });
+        return Promise.resolve(new Response(body, {
+            headers: {
+                "Content-Type": "text/event-stream",
+            },
+        }));
+    });
+};
+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, 2000));
+    return Promise.resolve(new Response(JSON.stringify({ message }), {
+        headers: {
+            "Content-Type": "application/json",
+        },
+    }));
+});
+export { mockStreaming, mockJson };