@mitodl/smoot-design 0.0.0-0a23f44

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/AiChatContext.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { UseChatHelpers } from "@ai-sdk/react";
+import type { AiChatMessage, AiChatContextProps } from "./types";
+/**
+ * All of `@ai-sdk/react`'s [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat)
+ * results, plus the initial messages.
+ */
+type AiChatContextResult = UseChatHelpers & {
+    initialMessages: AiChatMessage[] | null;
+};
+/**
+ * Provides AiChatContext to its children. Within this provider, you can consume
+ * the AiChatContext using the `useAiChat` hook.
+ */
+declare const AiChatProvider: React.FC<AiChatContextProps>;
+/**
+ * Returns the AiChatContext, which includes all results from `@ai-sdk/react`'s
+ * [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook as
+ * well as the initial messages.
+ *
+ * In addition to customizing the fetcher, using a context allows us to avoid
+ * this issue https://github.com/vercel/ai/issues/3266 since the caller no
+ * longer needs to provide the initial messages.
+ */
+declare const useAiChat: () => AiChatContextResult;
+export { useAiChat, AiChatProvider };

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

@@ -0,0 +1,106 @@
+"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());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiChatProvider = exports.useAiChat = void 0;
+const React = require("react");
+const react_1 = require("@ai-sdk/react");
+const react_2 = require("react");
+const retryingFetch_1 = require("../../utils/retryingFetch");
+const identity = (x) => x;
+const getFetcher = (requestOpts) => (url, opts) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    if (typeof (opts === null || opts === void 0 ? void 0 : opts.body) !== "string") {
+        console.error("Unexpected body type.");
+        return (0, retryingFetch_1.default)(url, opts);
+    }
+    const messages = JSON.parse(opts === null || opts === void 0 ? void 0 : opts.body).messages;
+    const transformBody = (_a = requestOpts.transformBody) !== null && _a !== void 0 ? _a : identity;
+    const options = Object.assign(Object.assign(Object.assign(Object.assign({}, opts), { body: JSON.stringify(transformBody(messages)) }), requestOpts.fetchOpts), { headers: Object.assign(Object.assign(Object.assign({}, opts === null || opts === void 0 ? void 0 : opts.headers), { "Content-Type": "application/json" }), (_b = requestOpts.fetchOpts) === null || _b === void 0 ? void 0 : _b.headers) });
+    return (0, retryingFetch_1.default)(url, options);
+});
+const AiChatContext = (0, react_2.createContext)(null);
+/**
+ * Provides AiChatContext to its children. Within this provider, you can consume
+ * the AiChatContext using the `useAiChat` hook.
+ */
+const AiChatProvider = ({ initialMessages: _initialMessages, requestOpts, chatId, parseContent, children, }) => {
+    const initialMessages = (0, react_2.useMemo)(() => {
+        var _a;
+        return ((_a = _initialMessages === null || _initialMessages === void 0 ? void 0 : _initialMessages.map((message, i) => (Object.assign(Object.assign({}, message), { id: `initial-${i}` })))) !== null && _a !== void 0 ? _a : []);
+    }, [_initialMessages]);
+    const fetcher = (0, react_2.useMemo)(() => getFetcher(requestOpts), [requestOpts]);
+    const _a = (0, react_1.useChat)({
+        api: requestOpts.apiUrl,
+        streamProtocol: "text",
+        fetch: fetcher,
+        onFinish: (message) => {
+            var _a;
+            if (!requestOpts.onFinish)
+                return;
+            if (message.role === "assistant" || message.role === "user") {
+                (_a = requestOpts.onFinish) === null || _a === void 0 ? void 0 : _a.call(requestOpts, message);
+            }
+            else {
+                console.info("Unexpected message role.", message);
+            }
+        },
+        initialMessages,
+        id: chatId,
+    }), { messages: unparsed } = _a, others = __rest(_a, ["messages"]);
+    const messages = (0, react_2.useMemo)(() => {
+        const initial = initialMessages === null || initialMessages === void 0 ? void 0 : initialMessages.map((m) => m.id);
+        return unparsed.map((m) => {
+            if (m.role === "assistant" && !(initial === null || initial === void 0 ? void 0 : initial.includes(m.id))) {
+                const content = parseContent ? parseContent(m.content) : m.content;
+                return Object.assign(Object.assign({}, m), { content });
+            }
+            return m;
+        });
+    }, [parseContent, unparsed, initialMessages]);
+    return (React.createElement(AiChatContext.Provider
+    /**
+     * Ensure that child state is reset when chatId changes.
+     */
+    , { 
+        /**
+         * Ensure that child state is reset when chatId changes.
+         */
+        key: chatId, value: Object.assign({ initialMessages, messages }, others) }, children));
+};
+exports.AiChatProvider = AiChatProvider;
+/**
+ * Returns the AiChatContext, which includes all results from `@ai-sdk/react`'s
+ * [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook as
+ * well as the initial messages.
+ *
+ * In addition to customizing the fetcher, using a context allows us to avoid
+ * this issue https://github.com/vercel/ai/issues/3266 since the caller no
+ * longer needs to provide the initial messages.
+ */
+const useAiChat = () => {
+    const context = React.useContext(AiChatContext);
+    if (!context) {
+        throw new Error("useAiChatContext must be used within an AiChatProvider");
+    }
+    return context;
+};
+exports.useAiChat = useAiChat;

package/dist/cjs/components/AiChat/AiChatContext.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChatProvider } from "./AiChatContext";
+/**
+ * AiChatProvider provides state and functions for managing chat. The higher-level
+ * `AiChat` component is a wrapper around this provider and the `AiChatDisplay`,
+ *  roughly.
+ *
+ * If you need to access chat state outside of the chat display, you can use
+ * `AiChatProvider` directly.
+ */
+declare const meta: Meta<typeof AiChatProvider>;
+export default meta;
+type Story = StoryObj<typeof AiChatProvider>;
+export declare const StreamingResponses: Story;

package/dist/cjs/components/AiChat/AiChatContext.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamingResponses = void 0;
+const React = require("react");
+const AiChat_1 = require("./AiChat");
+const AiChatContext_1 = require("./AiChatContext");
+const styled_1 = require("@emotion/styled");
+const api_1 = require("./test-utils/api");
+const Typography_1 = require("@mui/material/Typography");
+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 Container = styled_1.default.div({
+    width: "100%",
+    height: "400px",
+    position: "relative",
+});
+const MessageCounter = () => {
+    const { messages } = (0, AiChatContext_1.useAiChat)();
+    return (React.createElement(Typography_1.default, { variant: "subtitle1" },
+        "Message count: ",
+        messages.length,
+        " (Provided by ",
+        React.createElement("code", null, "AiChatContext"),
+        ")"));
+};
+/**
+ * AiChatProvider provides state and functions for managing chat. The higher-level
+ * `AiChat` component is a wrapper around this provider and the `AiChatDisplay`,
+ *  roughly.
+ *
+ * If you need to access chat state outside of the chat display, you can use
+ * `AiChatProvider` directly.
+ */
+const meta = {
+    title: "smoot-design/AI/AiChatContext",
+    component: AiChatContext_1.AiChatProvider,
+    parameters: {
+        msw: { handlers: api_1.handlers },
+    },
+    render: (args) => {
+        return (React.createElement(AiChatContext_1.AiChatProvider, Object.assign({}, args),
+            React.createElement(MessageCounter, null),
+            React.createElement(Container, null,
+                React.createElement(AiChat_1.AiChatDisplay, { entryScreenEnabled: false, conversationStarters: STARTERS, placeholder: "Type your message here", askTimTitle: "Ask TIM" }))));
+    },
+    decorators: (Story) => {
+        return (React.createElement(Container, null,
+            React.createElement(Story, null)));
+    },
+    args: {
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        initialMessages: INITIAL_MESSAGES,
+    },
+    argTypes: {
+        initialMessages: {
+            control: { type: "object", disable: true },
+        },
+        requestOpts: {
+            control: { type: "object", disable: true },
+            table: { readonly: true }, // See above
+        },
+    },
+};
+exports.default = meta;
+exports.StreamingResponses = {};

package/dist/cjs/components/AiChat/AiChatMarkdown.stories.d.ts

@@ -0,0 +1,15 @@
+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 Typical: Story;
+export declare const Textual: Story;
+export declare const Math: Story;
+export declare const SimpleOrderedList: Story;
+export declare const SimpleUnorderedList: Story;
+export declare const NestedOrderedList: Story;
+export declare const NestedUnorderedList: Story;
+export declare const NestedOrderedUnorderedList: Story;
+export declare const NestedUnorderedOrderedList: Story;
+export declare const UnexpectedList: Story;