@mitodl/smoot-design 0.0.0-1967631

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,105 @@
+"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 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 window.fetch(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 fetch(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/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/Markdown.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type MarkdownProps = {
+    children?: string;
+    enableMathjax?: boolean;
+};
+declare const Markdown: React.FC<MarkdownProps>;
+export default Markdown;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_markdown_1 = require("react-markdown");
+const browser_1 = require("rehype-mathjax/browser");
+const remark_math_1 = require("remark-math");
+const better_react_mathjax_1 = require("better-react-mathjax");
+const Markdown = ({ children, enableMathjax }) => {
+    const remarkPlugins = enableMathjax ? [remark_math_1.default] : undefined;
+    const rehypePlugins = enableMathjax ? [browser_1.default] : undefined;
+    const markdown = (React.createElement(react_markdown_1.default, { skipHtml: true, remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins }, children));
+    return enableMathjax ? React.createElement(better_react_mathjax_1.MathJax, null, markdown) : markdown;
+};
+exports.default = Markdown;

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;