@mitodl/smoot-design 0.0.0-7bc0c0f

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

@@ -0,0 +1,211 @@
+"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) {
+        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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// This was giving false positives
+/* eslint-disable testing-library/await-async-utils */
+const react_1 = require("@testing-library/react");
+const user_event_1 = require("@testing-library/user-event");
+const AiChat_1 = require("./AiChat");
+const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+const React = require("react");
+const en_1 = require("@faker-js/faker/locale/en");
+const msw_1 = require("msw");
+const node_1 = require("msw/node");
+const counter = jest.fn(); // use jest.fn as counter because it resets on each test
+const API_URL = "http://localhost:4567/test";
+const server = (0, node_1.setupServer)(msw_1.http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+    const count = counter.mock.calls.length;
+    counter();
+    return msw_1.HttpResponse.text(`AI Response ${count}`);
+})));
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+jest.mock("react-markdown", () => {
+    return {
+        __esModule: true,
+        default: ({ children }) => React.createElement("div", null, children),
+    };
+});
+const msg = {
+    ai: (text) => `Assistant said: ${text}`,
+    you: (text) => `You said: ${text}`,
+};
+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 (0, react_1.waitFor)(() => {
+        const result = cb();
+        expect(result).toHaveLength(count);
+        return result;
+    });
+});
+describe("AiChat", () => {
+    beforeEach(() => {
+        const MockObserverInstance = {
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        };
+        global.ResizeObserver = jest
+            .fn()
+            .mockImplementation(() => MockObserverInstance);
+    });
+    const setup = (props = {}) => {
+        const initialMessages = [
+            { role: "assistant", content: en_1.faker.lorem.sentence() },
+        ];
+        const conversationStarters = [
+            { content: en_1.faker.lorem.sentence() },
+            { content: en_1.faker.lorem.sentence() },
+        ];
+        const view = (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, placeholder: "Type a message...", entryScreenEnabled: false }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
+        const rerender = (newProps) => {
+            view.rerender(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: API_URL }, entryScreenEnabled: false }, newProps)));
+        };
+        return { initialMessages, conversationStarters, rerender };
+    };
+    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 = en_1.faker.helpers.arrayElement([0, 1]);
+        yield user_event_1.default.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_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.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("Messages persist if chat has same chatId", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rerender } = setup({ chatId: "test-123" });
+        const starterEls = getConversationStarters();
+        const chosen = en_1.faker.helpers.arrayElement([0, 1]);
+        yield user_event_1.default.click(starterEls[chosen]);
+        yield whenCount(getMessages, 3);
+        // New chat ... starters should be shown
+        rerender({ chatId: "test-345" });
+        expect(getConversationStarters().length).toBeGreaterThan(0);
+        yield whenCount(getMessages, 1);
+        // existing chat ... starters should not be shown, messages should be restored
+        rerender({ chatId: "test-123" });
+        expect(getConversationStarters().length).toBe(0);
+        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: en_1.faker.lorem.sentence() };
+        const transformBody = jest.fn(() => fakeBody);
+        const { initialMessages } = setup({
+            requestOpts: { apiUrl: API_URL, transformBody },
+        });
+        yield user_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.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(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: en_1.faker.lorem.sentence() };
+        const transformBody = jest.fn(() => fakeBody);
+        const { initialMessages, conversationStarters } = setup({
+            requestOpts: { apiUrl: API_URL, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        yield user_event_1.default.click(getConversationStarters()[0]);
+        yield whenCount(getMessages, initialMessages.length + 2);
+        yield user_event_1.default.click(react_1.screen.getByPlaceholderText("Type a message..."));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Send" }));
+        yield whenCount(getMessages, initialMessages.length + 4);
+        const messagesTexts = getMessages().map((el) => el.textContent);
+        expect(messagesTexts).toEqual([
+            msg.ai(initialMessages[0].content),
+            msg.you(conversationStarters[0].content),
+            msg.ai("Parsed: AI Response 0"),
+            msg.you("User message"),
+            msg.ai("Parsed: AI Response 1"),
+        ]);
+    }));
+    test("Passes extra attributes to root", () => {
+        const fakeBody = { message: en_1.faker.lorem.sentence() };
+        const transformBody = jest.fn(() => fakeBody);
+        setup({
+            requestOpts: { apiUrl: API_URL, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        expect(react_1.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(msw_1.http.post(API_URL, () => __awaiter(void 0, void 0, void 0, function* () {
+            return new msw_1.HttpResponse(null, { status: 500 });
+        })));
+        yield user_event_1.default.click(getConversationStarters()[0]);
+        const alert = yield react_1.screen.findByRole("alert");
+        expect(alert).toHaveTextContent("An unexpected error has occurred");
+    }));
+    test("Shows the entry screen if entryScreenEnabled is true", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+        });
+        yield expect(react_1.screen.getByText("Entry Screen Title")).toBeInTheDocument();
+    }));
+    test("User can submit a prompt from the entry screen", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [],
+        });
+        yield user_event_1.default.click(react_1.screen.getByRole("textbox"));
+        yield user_event_1.default.paste("User message");
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Send" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("User message");
+    }));
+    test("User can click starter on the entry screen to submit a prompt", () => __awaiter(void 0, void 0, void 0, function* () {
+        setup({
+            entryScreenEnabled: true,
+            entryScreenTitle: "Entry Screen Title",
+            initialMessages: [],
+            conversationStarters: [{ content: "Starter 1" }],
+        });
+        yield user_event_1.default.click(react_1.screen.getByRole("button", { name: "Starter 1" }));
+        const messages = getMessages();
+        expect(messages[0]).toHaveTextContent("Starter 1");
+    }));
+});

package/dist/cjs/components/AiChat/ChatTitle.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type ChatTitleProps = {
+    askTimTitle?: string;
+    externalScroll?: boolean;
+    className?: string;
+};
+declare const ChatTitle: ({ askTimTitle, externalScroll, className, }: ChatTitleProps) => React.JSX.Element | null;
+export { ChatTitle };

package/dist/cjs/components/AiChat/ChatTitle.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatTitle = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const Typography_1 = require("@mui/material/Typography");
+const react_1 = require("@remixicon/react");
+const Container = styled_1.default.div(({ externalScroll, theme }) => (Object.assign({ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", gap: "16px", color: theme.custom.colors.white, borderRadius: "8px 8px 0 0" }, (externalScroll && {
+    position: "sticky",
+    top: 0,
+    padding: "32px 0 26px",
+    zIndex: 2,
+    backgroundColor: theme.custom.colors.white,
+    borderRadius: 0,
+}))));
+const AskTimTitle = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.custom.colors.darkGray2,
+    img: {
+        width: "24px",
+        height: "24px",
+    },
+    svg: {
+        fill: theme.custom.colors.red,
+        width: "24px",
+        height: "24px",
+    },
+}));
+const ChatTitle = ({ askTimTitle, externalScroll, className, }) => {
+    if (!askTimTitle)
+        return null;
+    return (React.createElement(Container, { externalScroll: externalScroll, className: className },
+        React.createElement(AskTimTitle, null,
+            React.createElement(react_1.RiSparkling2Line, null),
+            React.createElement(Typography_1.default, { variant: "body1" },
+                "Ask",
+                React.createElement("strong", null, "TIM"),
+                "\u00A0",
+                askTimTitle))));
+};
+exports.ChatTitle = ChatTitle;

package/dist/cjs/components/AiChat/EntryScreen.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+type EntryScreenProps = {
+    title?: string;
+    conversationStarters?: {
+        content: string;
+    }[];
+    onPromptSubmit: (prompt: string) => void;
+    className?: string;
+};
+declare const EntryScreen: ({ title, conversationStarters, className, onPromptSubmit, }: EntryScreenProps) => React.JSX.Element;
+export { EntryScreen };

package/dist/cjs/components/AiChat/EntryScreen.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntryScreen = void 0;
+const React = require("react");
+const react_1 = require("@remixicon/react");
+const styled_1 = require("@emotion/styled");
+const Typography_1 = require("@mui/material/Typography");
+const Input_1 = require("../Input/Input");
+const TimLogo_1 = require("./TimLogo");
+const react_2 = require("react");
+const Container = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "16px",
+    padding: "114px 32px 24px",
+    [theme.breakpoints.down("md")]: {
+        padding: "114px 16px 24px",
+        width: "100%",
+    },
+    boxSizing: "border-box",
+    position: "absolute",
+    zIndex: 1,
+    background: "white",
+    bottom: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+}));
+const TimLogoBox = styled_1.default.div(({ theme }) => ({
+    position: "relative",
+    padding: "16px",
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "8px",
+    "svg:first-child": {
+        fill: theme.custom.colors.red,
+        position: "absolute",
+        top: "-10px",
+        left: "-10px",
+    },
+}));
+const StyledTimLogo = (0, styled_1.default)(TimLogo_1.default)({
+    width: "40px",
+    height: "40px",
+    display: "block",
+});
+const Title = (0, styled_1.default)(Typography_1.default)({
+    textAlign: "center",
+    padding: "0 40px",
+});
+const StyledInput = (0, styled_1.default)(Input_1.Input)({
+    borderRadius: "8px",
+    margin: "8px 0 24px 0",
+    flexShrink: 0,
+    "button:focus-visible": {
+        outlineOffset: "-1px",
+        borderRadius: "7px",
+    },
+});
+const SendIcon = (0, styled_1.default)(react_1.RiSendPlaneFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+    "button:disabled &": {
+        fill: theme.custom.colors.silverGray,
+    },
+}));
+const Starters = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    gap: "16px",
+    width: "100%",
+    [theme.breakpoints.down("sm")]: {
+        flexDirection: "column",
+    },
+}));
+const Starter = styled_1.default.button(({ theme }) => ({
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    borderRadius: "8px",
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    padding: "12px 16px",
+    color: theme.custom.colors.darkGray2,
+    backgroundColor: "transparent",
+    textAlign: "left",
+    [theme.breakpoints.down("sm")]: {
+        padding: "12px 36px",
+    },
+    ":hover": {
+        cursor: "pointer",
+        borderColor: "transparent",
+        color: theme.custom.colors.white,
+        backgroundColor: theme.custom.colors.darkGray1,
+    },
+}));
+const EntryScreen = ({ title, conversationStarters, className, onPromptSubmit, }) => {
+    const [prompt, setPrompt] = (0, react_2.useState)("");
+    const onPromptChange = (e) => {
+        setPrompt(e.target.value);
+    };
+    const onPromptKeyDown = (e) => {
+        if (e.key === "Enter" && prompt) {
+            onPromptSubmit(prompt);
+        }
+        else {
+            setPrompt(prompt);
+        }
+    };
+    return (React.createElement(Container, { className: className, "data-testid": "ai-chat-entry-screen" },
+        React.createElement(TimLogoBox, null,
+            React.createElement(react_1.RiSparkling2Line, null),
+            React.createElement(StyledTimLogo, null)),
+        title ? React.createElement(Title, { variant: "h4" }, title) : null,
+        React.createElement(StyledInput, { fullWidth: true, size: "chat", onChange: onPromptChange, onKeyDown: onPromptKeyDown, inputProps: {
+                "aria-label": "Ask a question",
+            }, endAdornment: React.createElement(Input_1.AdornmentButton, { "aria-label": "Send", onClick: () => onPromptSubmit(prompt) },
+                React.createElement(SendIcon, null)), responsive: true }),
+        React.createElement(Starters, null, conversationStarters === null || conversationStarters === void 0 ? void 0 : conversationStarters.map(({ content }, index) => (React.createElement(Starter, { key: index, onClick: () => onPromptSubmit(content), tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                    onPromptSubmit(content);
+                }
+            } },
+            React.createElement(Typography_1.default, { variant: "body2" }, content)))))));
+};
+exports.EntryScreen = EntryScreen;

package/dist/cjs/components/AiChat/TimLogo.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare const TimLogo: ({ className }: {
+    className?: string;
+}) => React.JSX.Element;
+export default TimLogo;

package/dist/cjs/components/AiChat/TimLogo.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const TimLogo = ({ className }) => (React.createElement("svg", { className: className, width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("g", { clipPath: "url(#clip0_16894_46778)" },
+        React.createElement("path", { d: "M32.5546 5.17074C33.7099 6.67302 32.4042 7.80224 32.2498 7.94865L32.9819 8.97157C33.7621 8.23748 34.8612 6.35612 33.4291 4.49682C32.7933 3.67046 31.8246 3.32347 30.6251 3.49396C29.7868 3.6143 29.1209 3.95327 29.0928 3.96731L29.6102 4.74753C29.9974 4.57504 31.6059 3.93321 32.5546 5.16873V5.17074Z", fill: "#40464C" }),
+        React.createElement("path", { d: "M8.63481 5.04446L9.0881 4.22412C9.06002 4.21209 8.36805 3.92728 7.52163 3.87513C6.31219 3.80292 5.37351 4.22412 4.80589 5.10062C3.52825 7.07023 4.7738 8.85532 5.61219 9.52523L6.25803 8.44616C6.09356 8.31177 4.69959 7.29086 5.73053 5.70033C6.57895 4.3926 8.23166 4.90406 8.63079 5.04446H8.63481Z", fill: "#40464C" }),
+        React.createElement("path", { d: "M25.1577 7.25851C25.1778 7.25851 25.1978 7.25851 25.2179 7.25851C27.4382 7.29862 28.6296 8.96136 28.6296 8.96136L29.129 8.81896C29.109 8.75076 28.9144 8.12297 28.3468 7.48315C27.8133 6.88344 26.8425 6.16138 25.2399 6.1333C25.2119 6.1333 25.1858 6.1333 25.1577 6.1333C22.7168 6.1333 21.6056 8.07483 21.3589 9.11179L22.4721 9.37053C22.4941 9.28428 23.0216 7.2565 25.1577 7.2565V7.25851Z", fill: "#40464C" }),
+        React.createElement("path", { d: "M9.90619 9.34454C9.92625 9.2583 10.4357 7.23252 12.5898 7.23252C12.6099 7.23252 12.63 7.23252 12.65 7.23252C14.8703 7.27063 15.9213 8.97549 15.9213 8.97549L16.5612 8.79498C16.5411 8.72478 16.3465 8.09899 15.7789 7.46118C15.2454 6.86147 14.2746 6.13941 12.6721 6.11133C12.646 6.11133 12.6179 6.11133 12.5898 6.11133C10.1489 6.11133 9.03772 8.05286 8.79102 9.08982L9.90619 9.34655V9.34454Z", fill: "#40464C" }),
+        React.createElement("path", { d: "M19.6383 26.256L19.1973 26.269L19.363 31.8525L19.804 31.8394L19.6383 26.256Z", fill: "#40464C" }),
+        React.createElement("path", { d: "M14.1281 38.5777C14.786 38.9107 16.2321 39.4201 16.2321 39.4201L16.8318 39.5906L17.4616 39.725L17.8748 39.7912C17.8748 39.7912 19.0702 39.9336 19.704 39.9336C19.7562 39.9336 19.8103 39.9336 19.8625 39.9336C20.9255 39.9236 22.7748 39.6508 22.7748 39.6508L23.2782 39.5525L24.3031 39.2837L24.6461 39.1614L26.3068 38.5015L26.5977 38.3451L27.1994 37.984L27.4842 37.7754C27.4842 37.7754 28.6114 36.9411 29.0326 36.5359C29.4137 36.1689 29.6905 35.7797 29.8931 35.3987C30.3323 35.2482 31.6862 34.7689 33.1443 34.0187C33.732 33.7821 34.7429 33.0981 34.8091 33.054C38.0985 30.8718 39.7712 28.3907 39.9718 25.6429C40.3729 20.1592 36.6684 16.9922 35.6836 16.218C35.6415 14.8 35.469 13.0871 35.0137 11.318C35.6054 10.7163 36.173 9.95213 36.4518 9.02148C36.9472 7.36275 36.881 5.67595 36.2612 4.27195C35.5733 2.70949 34.2715 1.60234 32.4945 1.06681C30.6272 0.503205 28.6515 1.0989 27.2616 1.76079C25.1215 0.767959 22.6424 0.166244 19.9989 0.0238384C16.7235 -0.152665 13.8012 0.661656 11.3843 2.11179C9.95424 1.46394 7.56945 0.781999 5.46144 1.60635C3.73251 2.28428 2.52507 3.49373 1.96347 5.10432C1.46004 6.55245 1.52823 8.23925 2.15602 9.85385C2.56519 10.9028 3.50988 11.9338 4.33022 12.6378C4.0093 14.2404 3.89297 15.7366 3.8669 16.922C2.79584 17.8306 -1.06115 21.5793 0.276664 27.3718C0.936544 30.2279 2.92421 32.6528 6.02705 34.3858C6.36201 34.5723 6.709 34.7508 7.06 34.9173L8.38778 35.503C9.49494 35.9562 10.4898 36.2852 11.0012 36.4456C11.5528 36.931 12.1645 37.4004 12.8284 37.8316L14.1281 38.5797V38.5777ZM3.45572 9.54899C1.84714 6.20345 3.8328 3.63012 6.13536 2.72955C8.15111 1.9413 10.9029 3.49974 12.0201 4.09143L11.982 3.05648C14.2104 1.73271 16.9141 0.946468 19.9427 1.10893C22.151 1.22727 24.243 1.68457 26.0922 2.43672L26.2687 3.57195C27.3338 2.89201 29.8449 1.61437 31.9168 2.24016C34.2856 2.95419 36.199 5.26678 35.136 8.82292C34.765 10.0665 33.4472 11.2378 32.8696 11.6931L33.9827 12.1544C34.5945 15.2994 34.2796 18.1856 34.1372 19.1684C33.2426 18.8495 32.0612 18.5607 30.5209 18.3962C30.4547 16.6773 30.1117 12.9106 28.3126 11.2278C27.6106 10.5719 26.7621 10.2289 25.7894 10.2129C24.8186 10.1988 23.9862 10.5137 23.3304 11.1536C22.3716 12.0902 21.5332 13.5885 21.3948 15.8369C21.3447 16.6432 21.3587 17.3813 21.3868 17.9289C20.6186 17.7945 19.7943 17.7223 18.984 17.7203L18.5929 17.7143C17.951 17.7323 17.3714 17.7845 16.8479 17.8607C16.7717 16.1979 16.3926 12.9727 14.6516 11.3662C13.9577 10.7263 13.1213 10.3954 12.1605 10.3794C11.1978 10.3653 10.3815 10.6722 9.73362 11.294C7.87432 13.0831 7.72188 17.1005 7.73592 18.4684C6.76516 18.5767 5.99095 18.7432 5.3772 18.9297C5.27691 18.0191 5.08637 15.5501 5.56975 12.7561L6.26573 12.012C5.65399 11.6028 4.09755 10.8687 3.45974 9.54297L3.45572 9.54899ZM26.4673 13.0008C24.1888 13.1432 24.3011 17.0123 24.3914 18.2197C23.8017 18.2398 23.2842 18.2678 22.8691 18.2939C22.7708 16.4948 22.8951 13.1773 24.2189 11.8856C24.6261 11.4885 25.1155 11.296 25.7152 11.296C25.7312 11.296 25.7473 11.296 25.7613 11.296C26.4091 11.306 26.9567 11.5286 27.4341 11.9759C27.9636 12.4713 28.3968 13.2415 28.7177 14.2424C28.2464 13.4702 27.5364 12.9346 26.4653 13.0008H26.4673ZM27.7931 18.2718L26.9427 18.2257C26.4553 18.2057 25.9779 18.1956 25.5146 18.1896C25.4524 17.614 25.3601 15.9893 26.3309 15.9613C27.6607 15.9232 27.8051 17.4916 27.7931 18.2718ZM14.2364 18.2718L13.386 18.2257C12.8986 18.2057 12.4213 18.1956 11.958 18.1896C11.8958 17.614 11.8035 15.9893 12.7743 15.9613C14.1041 15.9232 14.2485 17.4916 14.2364 18.2718ZM19.2628 25.34C19.7903 25.4463 21.6436 25.9257 23.3143 26.7019C23.2662 27.2675 23.1579 28.1701 22.9112 29.0807C22.5722 30.3342 21.6596 32.2256 21.3347 32.8775C21.0318 32.8915 20.5224 32.9116 20.1252 32.9176C19.5355 32.9256 18.8777 32.9397 18.5347 32.9457C18.1596 32.4242 17.0886 30.8878 16.3946 29.4296C15.9192 28.4328 15.6204 27.5302 15.4599 26.9767C16.8439 26.1082 18.9358 25.4403 19.2628 25.338V25.34ZM10.7325 18.342C10.5881 18.342 10.4416 18.342 10.2892 18.342C9.94221 18.342 9.61528 18.3481 9.30038 18.3601C9.17001 16.7094 9.21614 13.3458 10.6081 12.006C11.0193 11.6109 11.5187 11.4203 12.1325 11.4324C12.7723 11.4424 13.3118 11.659 13.7832 12.0942C14.3528 12.6197 14.8101 13.4641 15.135 14.5713C14.6757 13.6868 13.9396 13.0389 12.7683 13.1111C10.4075 13.2556 10.6462 17.3913 10.7325 18.342ZM38.8686 25.4343C38.644 30.7454 31.6521 33.1182 30.3905 33.5093C30.4065 33.07 30.3524 32.7872 30.3524 32.7872C30.3303 32.8474 28.1561 38.7622 19.8525 38.8445C19.8023 38.8445 19.7562 38.8445 19.706 38.8445C13.3118 38.8445 7.3769 32.0411 7.3769 32.0411C7.68979 32.6027 8.24939 33.4712 9.04967 34.4319C7.42905 33.9686 2.62536 32.1855 1.45201 27.097C0.475229 22.8609 2.56719 19.9125 3.88495 18.5406C3.90902 19.0942 3.94311 19.4412 3.94712 19.5114L3.95114 19.5455C3.25716 19.9446 3.1308 20.2455 3.1308 20.2455C3.16088 20.2334 6.46229 19.387 10.2792 19.4251C11.5067 19.4372 12.4614 19.4833 13.1935 19.5415C13.0089 19.8102 12.9187 20.083 12.9167 20.3417C12.9127 21.4649 15.2393 21.8902 16.5089 22.3354C17.4015 22.6483 18.1536 22.9712 18.5848 23.1678C18.5909 23.6492 18.5989 24.287 18.6009 24.7944C17.7364 25.0251 15.7488 25.6288 14.4972 26.5795L14.439 26.6317C14.445 26.6618 14.5233 27.0108 14.6958 27.5603C13.8754 27.7308 12.9067 27.8471 11.7935 27.8451C7.76801 27.8411 5.18465 26.1844 5.18465 26.1844C5.26287 26.2967 7.17633 28.9282 11.7935 28.9322C12.1786 28.9322 12.5456 28.9182 12.8986 28.8941C13.1915 29.4918 13.713 30.7133 14.4811 31.7984C15.5362 33.2866 16.9562 34.6365 19.8585 34.6365C23.7857 34.6365 25.9779 32.4202 27.1292 29.1649C27.2977 29.1649 27.4641 29.1609 27.6326 29.1549C27.9174 29.1448 28.2022 29.1268 28.4891 29.1007C32.8595 28.6996 34.5925 26.9004 34.6647 26.8222C34.6647 26.8222 30.4406 27.8291 28.3908 28.0176C26.8945 28.156 25.4203 28.0417 24.0845 27.8191C24.2209 26.9145 24.243 26.2285 24.245 26.1423L24.251 26.1343C22.6444 25.3179 20.7209 24.9048 19.8043 24.7403C19.8003 24.1386 19.7903 23.3704 19.7843 22.893C20.1513 22.7005 20.6206 22.4738 21.1461 22.2612C23.0496 21.489 24.8427 21.2624 24.8748 20.0349C24.8828 19.746 24.7645 19.4813 24.5478 19.2406C26.1785 19.2226 28.2745 19.2567 30.2441 19.4592C34.1973 19.8644 36.7025 20.767 36.7185 20.775C36.7185 20.775 36.4598 20.3297 35.5211 19.7962V19.7822C35.5351 19.6859 35.6415 18.9297 35.6776 17.7704C36.9873 18.9979 39.0291 21.5492 38.8646 25.4302L38.8686 25.4343Z", fill: "#40464C" })),
+    React.createElement("defs", null,
+        React.createElement("clipPath", { id: "clip0_16894_46778" },
+            React.createElement("rect", { width: "40", height: "39.9338", fill: "white" })))));
+exports.default = TimLogo;

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

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

package/dist/cjs/components/AiChat/test-utils/api.js

@@ -0,0 +1,125 @@
+"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) {
+        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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handlers = void 0;
+const msw_1 = require("msw");
+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.
+<!-- Comment! -->
+`,
+    `
+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.
+<!-- Comment! -->
+`,
+    `
+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.
+<!-- Comment! -->
+`,
+    `Here are some courses on quantum computing that offer certificates:
+
+1. [Introduction to Quantum Computing](https://xpro.mit.edu/courses/course-v1:xPRO+QCFx1/)
+   - **Description**: This is the first course in the Quantum Computing Fundamentals professional certificate program. You can earn a Professional Certificate and CEUs by completing both courses in the program. Alternatively, you can take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+2. [Practical Realities of Quantum Computation and Quantum Communication](https://xpro.mit.edu/courses/course-v1:xPRO+QCRx1/)
+   - **Description**: This course is part of the Quantum Computing Realities professional certificate program. Completing both courses in the program will earn you a Professional Certificate and CEUs. You can also take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+These courses are part of professional certificate programs, and you can choose to complete the entire program or take individual courses for certification.`,
+];
+const rand = (min, max) => {
+    // min and max included
+    return Math.floor(Math.random() * (max - min + 1) + min);
+};
+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);
+                }
+            }, 100);
+        },
+        cancel() {
+            if (timerId) {
+                clearInterval(timerId);
+            }
+        },
+    });
+};
+const handlers = [
+    msw_1.http.post("http://localhost:4567/streaming", (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+        yield (0, msw_1.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 msw_1.HttpResponse("Internal Server Error", {
+                    status: 500,
+                });
+            }
+        }
+        return new msw_1.HttpResponse(body, {
+            headers: {
+                "Content-Type": "text/plain",
+            },
+        });
+    })),
+    msw_1.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 (0, msw_1.delay)(800);
+        return msw_1.HttpResponse.json({ message });
+    })),
+];
+exports.handlers = handlers;

package/dist/cjs/components/AiChat/types.d.ts

@@ -0,0 +1,82 @@
+import { RefAttributes } from "react";
+type Role = "assistant" | "user";
+type AiChatMessage = {
+    id: string;
+    content: string;
+    role: Role;
+};
+type RequestOpts = {
+    apiUrl: string;
+    /**
+     * Transforms array of chat messages into request body. Messages
+     * are ordered oldest to newest.
+     *
+     * JSON.stringify is applied to the return value.
+     */
+    transformBody?: (messages: AiChatMessage[]) => unknown;
+    /**
+     * Extra options to pass to fetch.
+     */
+    fetchOpts?: RequestInit;
+    onFinish?: (message: AiChatMessage) => void;
+};
+type AiChatProps = {
+    /**
+     * Changing the `chatId` will reset the chat. Changing the `chatId` to a
+     * previously used value will restore the session state.
+     */
+    chatId?: string;
+    /**
+     * If provided, renders the "AskTIM" title motif followed by the text.
+     */
+    askTimTitle?: string;
+    /**
+     * Placeholder message for chat input.
+     */
+    placeholder?: string;
+    className?: string;
+    /**
+     * Set to false to disable the entry screen and load the chat immediately.
+     * Defaults to true.
+     */
+    entryScreenEnabled?: boolean;
+    /**
+     * Title to display on the entry screen, also the initial assistant message if not overridden by `initialMessages`.
+     */
+    entryScreenTitle?: string;
+    /**
+     * Initial messages to display on the chat. If not provided, the entry screen title will be used as the initial message.
+     */
+    initialMessages?: Omit<AiChatMessage, "id">[];
+    /**
+     * Prompt suggestions for the user, clickable on the entry screen or in the chat if the entry screen is not enabled.
+     */
+    conversationStarters?: {
+        content: string;
+    }[];
+    /**
+     * Options for making requests to the AI service.
+     */
+    requestOpts: RequestOpts;
+    parseContent?: (content: unknown) => string;
+    /**
+     * A message to display while the component is in a loading state.
+     *
+     * Identical consecutive messages may not be read on some screen readers.
+     */
+    srLoadingMessages?: {
+        delay: number;
+        text: string;
+    }[];
+    /**
+     * If provided, element to use for rendering avatar images.
+     * By default, the theme's ImageAdater is used.
+     */
+    ImgComponent?: React.ElementType;
+    /**
+     * Where the scroll container is provided by the component,
+     * the AiChat will scroll to the bottom as chat messages are added.
+     */
+    scrollElement?: HTMLElement | null;
+} & RefAttributes<HTMLDivElement>;
+export type { RequestOpts, AiChatProps, AiChatMessage };

package/dist/cjs/components/AiChat/types.js

@@ -0,0 +1,3 @@
+"use strict";
+// Some of these are based on (compatible, but simplified / restricted) versions of ai/react types.
+Object.defineProperty(exports, "__esModule", { value: true });