@mitodl/smoot-design 0.0.0-0a23f44

package/dist/esm/bundles/AiDrawer/AiDrawerManager.test.js

@@ -0,0 +1,243 @@
+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());
+    });
+};
+import { act, render, screen } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import { AiDrawerManager } from "./AiDrawerManager";
+import { ThemeProvider } from "../../components/ThemeProvider/ThemeProvider";
+import * as React from "react";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+jest.mock("../../components/AiChat/Markdown", () => {
+    return {
+        __esModule: true,
+        default: ({ children }) => React.createElement("div", null, children),
+    };
+});
+jest.mock("better-react-mathjax", () => ({
+    MathJaxContext: ({ children }) => (React.createElement(React.Fragment, null, children)),
+}));
+const TEST_API_STREAMING = "http://localhost:4567/test";
+const CONTENT_FILE_URL = "http://localhost:4567/api/v1/contentfiles/1";
+const CONTENT_RESPONSE = {
+    count: 1,
+    next: null,
+    previous: null,
+    results: [
+        {
+            id: 1,
+            summary: "This is a test summary",
+            flashcards: [
+                {
+                    question: "Test question 1?",
+                    answer: "Test answer 1",
+                },
+                {
+                    question: "Test question 2?",
+                    answer: "Test answer 2",
+                },
+                {
+                    question: "Test question 3?",
+                    answer: "Test answer 3",
+                },
+            ],
+        },
+    ],
+};
+class MockResizeObserver {
+    constructor() {
+        this.observe = jest.fn();
+        this.unobserve = jest.fn();
+        this.disconnect = jest.fn();
+    }
+}
+global.ResizeObserver = MockResizeObserver;
+describe("AiDrawerManager", () => {
+    const server = setupServer(http.post(TEST_API_STREAMING, () => __awaiter(void 0, void 0, void 0, function* () {
+        return HttpResponse.text("AI Response");
+    })), http.get(CONTENT_FILE_URL, () => {
+        return HttpResponse.json(CONTENT_RESPONSE);
+    }));
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+    afterEach(() => {
+        server.resetHandlers();
+    });
+    afterAll(() => server.close());
+    const setup = (message) => __awaiter(void 0, void 0, void 0, function* () {
+        server.listen();
+        render(React.createElement(AiDrawerManager, { messageOrigin: "http://localhost:6006" }), {
+            wrapper: ThemeProvider,
+        });
+        yield screen.findByTestId("ai-drawer-manager-waiting");
+        const event = new MessageEvent("message", {
+            data: message,
+            origin: "http://localhost:6006",
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            window.dispatchEvent(event);
+            yield new Promise((resolve) => setTimeout(resolve, 100));
+        }));
+    });
+    test("Problem drawer opens showing title", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "problem",
+                title: "Drawer Title",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+            },
+        });
+        screen.getByRole("heading", { name: "Drawer Title" });
+    }));
+    test("Video drawer opens showing chat entry screen and tabs", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "video",
+                chat: {
+                    entryScreenTitle: "Entry screen title",
+                    apiUrl: TEST_API_STREAMING,
+                    conversationStarters: [
+                        { content: "Prompt 1" },
+                        { content: "Prompt 2" },
+                        { content: "Prompt 3" },
+                    ],
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        screen.getByText("Entry screen title");
+        screen.getByRole("tab", { name: "Chat" });
+        screen.getByRole("tab", { name: "Flashcards" });
+        screen.getByRole("tab", { name: "Summary" });
+        screen.getByRole("button", { name: "Prompt 1" });
+        screen.getByRole("button", { name: "Prompt 2" });
+        screen.getByRole("button", { name: "Prompt 3" });
+    }));
+    test("Video drawer chat entry screen selects starters from flashcards", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "video",
+                chat: {
+                    entryScreenTitle: "Entry screen title",
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        screen.getByRole("button", { name: "Test question 1?" });
+        screen.getByRole("button", { name: "Test question 2?" });
+        screen.getByRole("button", { name: "Test question 3?" });
+    }));
+    test("Video drawer chat entry screen shows default starters where no flashcards are available", server.boundary(() => __awaiter(void 0, void 0, void 0, function* () {
+        const contentResponse = JSON.parse(JSON.stringify(CONTENT_RESPONSE));
+        contentResponse.results[0].flashcards = null;
+        server.use(http.get(CONTENT_FILE_URL, () => {
+            return HttpResponse.json(contentResponse);
+        }));
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "video",
+                chat: {
+                    entryScreenTitle: "Entry screen title",
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        screen.getByRole("button", {
+            name: "What are the most important concepts introduced in the video?",
+        });
+        screen.getByRole("button", {
+            name: "What examples are used to illustrate concepts covered in the video?",
+        });
+        screen.getByRole("button", {
+            name: "What are the key terms introduced in this video?",
+        });
+    })));
+    test("Video drawer chat entry screen displays default title", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "video",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        screen.getByText("What do you want to know about this video?");
+    }));
+    test("Flashcard shows content and can be click navigated", server.boundary(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "video",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        yield user.click(screen.getByRole("tab", { name: "Flashcards" }));
+        yield user.click(screen.getByText("Q: Test question 1?"));
+        screen.getByText("Answer: Test answer 1");
+        yield user.click(screen.getByRole("button", { name: "Next card" }));
+        yield user.click(screen.getByText("Q: Test question 2?"));
+        screen.getByText("Answer: Test answer 2");
+        yield user.click(screen.getByRole("button", { name: "Previous card" }));
+        screen.getByText("Q: Test question 1?");
+    })));
+    test("Flashcard shows content and can be keyboard navigated and cycles", server.boundary(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield setup({
+            type: "smoot-design::ai-drawer-open",
+            payload: {
+                blockType: "video",
+                chat: {
+                    apiUrl: TEST_API_STREAMING,
+                },
+                summary: {
+                    apiUrl: CONTENT_FILE_URL,
+                },
+            },
+        });
+        yield user.click(screen.getByRole("tab", { name: "Flashcards" }));
+        screen.getByText("Q: Test question 1?");
+        yield user.keyboard("{enter}");
+        screen.getByText("Answer: Test answer 1");
+        yield user.keyboard("{arrowright}");
+        screen.getByText("Q: Test question 2?");
+        yield user.keyboard("{enter}");
+        screen.getByText("Answer: Test answer 2");
+        yield user.keyboard("{arrowleft}");
+        screen.getByText("Q: Test question 1?");
+        yield user.keyboard("{arrowleft}");
+        screen.getByText("Q: Test question 3?");
+        yield user.keyboard("{arrowright}");
+        yield user.keyboard("{arrowright}");
+        yield user.keyboard("{arrowright}");
+        screen.getByText("Q: Test question 3?");
+    })));
+});

package/dist/esm/bundles/AiDrawer/FlashcardsScreen.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type Flashcard = {
+    question: string;
+    answer: string;
+};
+export declare const FlashcardsScreen: ({ flashcards, wasKeyboardFocus, }: {
+    flashcards?: Flashcard[];
+    wasKeyboardFocus: boolean;
+}) => React.JSX.Element | null;

package/dist/esm/bundles/AiDrawer/FlashcardsScreen.js

@@ -0,0 +1,83 @@
+import { ActionButton } from "../../components/Button/ActionButton";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react";
+const Container = styled.div ``;
+const FlashcardContainer = styled.div(({ theme }) => ({
+    display: "flex",
+    height: 300,
+    padding: 40,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    borderRadius: 8,
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    marginTop: "8px",
+    cursor: "pointer",
+    textAlign: "center",
+}));
+const Navigation = styled.div({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "24px",
+});
+const Page = styled.div(({ theme }) => (Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2)));
+const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) => {
+    const [screen, setScreen] = useState(0);
+    useEffect(() => setScreen(0), [content]);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            setScreen(screen === 0 ? 1 : 0);
+        }
+    };
+    return (React.createElement(FlashcardContainer, { ref: ref, onClick: () => setScreen(screen === 0 ? 1 : 0), onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": ariaLabel, role: "button" },
+        React.createElement(Typography, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
+});
+Flashcard.displayName = "Flashcard";
+export const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
+    const [cardIndex, setCardIndex] = useState(0);
+    const containerRef = useRef(null);
+    const flashcardRef = useRef(null);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        if (!flashcards)
+            return;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            wasKeyboardFocus) {
+            return;
+        }
+        if (e.key === "ArrowRight") {
+            setCardIndex((prevIndex) => (prevIndex + 1) % flashcards.length);
+        }
+        else if (e.key === "ArrowLeft") {
+            setCardIndex((prevIndex) => (prevIndex - 1 + flashcards.length) % flashcards.length);
+        }
+    }, [flashcards, wasKeyboardFocus]);
+    useEffect(() => {
+        var _a;
+        (_a = flashcardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cardIndex]);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    if (!(flashcards === null || flashcards === void 0 ? void 0 : flashcards.length)) {
+        return null;
+    }
+    return (React.createElement(Container, { ref: containerRef },
+        React.createElement(Flashcard, { ref: flashcardRef, content: flashcards[cardIndex], "aria-label": `Flashcard ${cardIndex + 1} of ${flashcards.length}` }),
+        React.createElement(Navigation, null,
+            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small", "aria-label": "Previous card" },
+                React.createElement(RiArrowLeftLine, { "aria-hidden": true })),
+            React.createElement(Page, null,
+                cardIndex + 1,
+                " / ",
+                flashcards.length),
+            React.createElement(ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small", "aria-label": "Next card" },
+                React.createElement(RiArrowRightLine, { "aria-hidden": true })))));
+};

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

@@ -0,0 +1,6 @@
+import type { AiDrawerManagerProps } from "./AiDrawer/AiDrawerManager";
+/**
+ * Renders the AiDrawerManager to the page.
+ */
+declare const init: (opts: AiDrawerManagerProps) => void;
+export { init };

package/dist/esm/bundles/aiDrawerManager.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { AiDrawerManager } from "./AiDrawer/AiDrawerManager";
+import { ThemeProvider, createTheme, } from "../components/ThemeProvider/ThemeProvider";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
+import { MathJaxContext } from "better-react-mathjax";
+/**
+ * Renders the AiDrawerManager to the page.
+ */
+const init = (opts) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    container.id = "smoot-chat-drawer-root";
+    const cache = createCache({
+        key: "css",
+        prepend: true,
+        container: container,
+    });
+    const theme = createTheme({
+        components: {
+            MuiPopover: { defaultProps: { container: container } },
+            MuiPopper: { defaultProps: { container: container } },
+            MuiModal: { defaultProps: { container: container } },
+        },
+    });
+    createRoot(container).render(React.createElement(CacheProvider, { value: cache },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(MathJaxContext, null,
+                React.createElement(AiDrawerManager, Object.assign({}, opts))))));
+    // Ensure mathjax context menu is rendered above the drawer
+    // Mathjax context menu is appended to end of body.
+    const style = document.createElement("style");
+    style.textContent = `
+    .CtxtMenu_MenuFrame {
+      z-index: ${theme.zIndex.drawer + 100} !important;
+    }
+  `;
+    document.head.appendChild(style);
+};
+export { init };

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

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

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

@@ -0,0 +1,263 @@
+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;
+};
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import Typography from "@mui/material/Typography";
+import classNames from "classnames";
+import { RiSendPlaneFill, RiStopFill } from "@remixicon/react";
+import { Input, AdornmentButton } from "../Input/Input";
+import { EntryScreen } from "./EntryScreen";
+import { ScrollSnap } from "../ScrollSnap/ScrollSnap";
+import { SrAnnouncer } from "../SrAnnouncer/SrAnnouncer";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
+import { Alert } from "../Alert/Alert";
+import { ChatTitle } from "./ChatTitle";
+import { AiChatProvider, useAiChat } from "./AiChatContext";
+import { useScrollSnap } from "../ScrollSnap/useScrollSnap";
+import Markdown from "./Markdown";
+import EllipsisIcon from "./EllipsisIcon";
+const classes = {
+    root: "MitAiChat--root",
+    title: "MitAiChat--title",
+    entryScreenContainer: "MitAiChat--entryScreenContainer",
+    conversationStarter: "MitAiChat--conversationStarter",
+    chatScreenContainer: "MitAiChat--chatScreenContainer",
+    messagesContainer: "MitAiChat--messagesContainer",
+    messageRow: "MitAiChat--messageRow",
+    messageRowUser: "MitAiChat--messageRowUser",
+    messageRowAssistant: "MitAiChat--messageRowAssistant",
+    message: "MitAiChat--message",
+    input: "MitAiChat--input",
+    bottomSection: "MitAiChat--bottomSection",
+};
+const Container = styled.div();
+const ChatScreen = styled.div(({ externalScroll, theme }) => (Object.assign({ padding: "16px 32px 0", [theme.breakpoints.down("md")]: {
+        padding: "16px 16px 0",
+    }, boxSizing: "border-box", background: "white", position: "absolute", bottom: 0, top: 0, left: 0, right: 0, zIndex: 1 }, (externalScroll && {
+    padding: "0 32px",
+    [theme.breakpoints.down("md")]: {
+        padding: "0 16px",
+    },
+}))));
+const ChatContainer = styled.div(({ externalScroll }) => ({
+    width: "100%",
+    height: externalScroll ? "auto" : "100%",
+    minHeight: externalScroll ? "100%" : "auto",
+    display: "flex",
+    flexDirection: "column",
+}));
+const MessagesContainer = styled(ScrollSnap)(({ externalScroll }) => ({
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    padding: "14px 0",
+    overflow: externalScroll ? "visible" : "auto",
+    gap: "16px",
+    [`> .${classes.messageRowAssistant}:first-child`]: {
+        marginTop: "16px",
+    },
+}));
+const MessageRow = styled.div({
+    display: "flex",
+    width: "100%",
+    gap: "10px",
+    [`&.${classes.messageRowUser}`]: {
+        flexDirection: "row-reverse",
+    },
+    "> *": {
+        minWidth: 0,
+    },
+    position: "relative",
+});
+const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white }, theme.typography.body2), { "p:first-of-type": {
+        marginTop: 0,
+    }, "p:last-of-type": {
+        marginBottom: 0,
+    }, "ol,ul": {
+        paddingInlineStart: "16px",
+        margin: "12px 0 12px 4px",
+    }, "ol > li, ul > li": {
+        margin: "12px 0",
+        "ol,ul": {
+            margin: "12px 0 12px 4px",
+        },
+        li: {
+            margin: "6px 0",
+        },
+    }, ul: {
+        paddingInlineStart: 0,
+        "> li": {
+            listStyleType: "none",
+            position: "relative",
+            "&::before": {
+                content: '"–"',
+                position: "absolute",
+                left: 0,
+                color: "#888",
+                marginRight: "8px",
+            },
+            paddingLeft: "16px",
+        },
+    }, "ol + ul": {
+        marginLeft: "24px",
+        li: {
+            margin: "6px 0",
+        },
+    }, a: {
+        color: theme.custom.colors.red,
+        fontWeight: "normal",
+    }, borderRadius: "12px", [`.${classes.messageRowUser} &`]: {
+        padding: "12px 16px",
+        borderRadius: "8px 0px 8px 8px",
+        backgroundColor: theme.custom.colors.lightGray1,
+    } })));
+const StarterContainer = styled.div({
+    alignSelf: "flex-end",
+    alignItems: "end",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+});
+const Starter = styled.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.lightGray2}`, backgroundColor: theme.custom.colors.white, padding: "8px 16px" }, theme.typography.body3), { cursor: "pointer", boxSizing: "border-box", "&:hover": {
+        color: theme.custom.colors.white,
+        backgroundColor: theme.custom.colors.silverGrayDark,
+        borderColor: "transparent",
+    }, borderRadius: "8px" })));
+const StyledSendButton = styled(RiSendPlaneFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const StyledStopButton = styled(RiStopFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const BottomSection = styled.div(({ externalScroll, theme }) => (Object.assign(Object.assign({ padding: "12px 0 16px" }, (externalScroll && {
+    position: "sticky",
+    bottom: 0,
+    background: theme.custom.colors.white,
+})), { "button:focus-visible": {
+        outlineOffset: "-1px",
+        borderRadius: "7px",
+    } })));
+const Disclaimer = styled(Typography)(({ theme }) => ({
+    color: theme.custom.colors.silverGrayDark,
+    marginTop: "16px",
+    textAlign: "center",
+}));
+const StyledEllipsisIcon = styled(EllipsisIcon)(({ theme }) => ({
+    ellipse: {
+        fill: theme.custom.colors.darkGray2,
+    },
+    width: "24px",
+    height: "24px",
+}));
+const AiChatDisplay = (_a) => {
+    var _b, _c;
+    var { conversationStarters, askTimTitle, entryScreenEnabled = true, entryScreenTitle, srLoadingMessages, placeholder = "", className, scrollElement, ref, useMathJax = false } = _a, others = __rest(_a, ["conversationStarters", "askTimTitle", "entryScreenEnabled", "entryScreenTitle", "srLoadingMessages", "placeholder", "className", "scrollElement", "ref", "useMathJax"]) // Could contain data attributes
+    ;
+    const containerRef = useRef(null);
+    const messagesContainerRef = useRef(null);
+    const chatScreenRef = useRef(null);
+    const promptInputRef = useRef(null);
+    const { messages, input, handleInputChange, handleSubmit, append, isLoading, stop, error, initialMessages, status, } = useAiChat();
+    useScrollSnap({
+        scrollElement: scrollElement || messagesContainerRef.current,
+        contentElement: scrollElement ? messagesContainerRef.current : null,
+        threshold: 200,
+    });
+    const [showEntryScreen, setShowEntryScreen] = useState(entryScreenEnabled);
+    useEffect(() => {
+        var _a, _b;
+        if (!showEntryScreen) {
+            (_b = (_a = promptInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input")) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [showEntryScreen]);
+    useEffect(() => {
+        if (messages.some((m) => m.role === "user" || ["submitted", "streaming"].includes(status))) {
+            setShowEntryScreen(false);
+        }
+    }, [messages, status]);
+    const showStarters = messages.length === ((initialMessages === null || initialMessages === void 0 ? void 0 : initialMessages.length) || 0);
+    const waiting = !showStarters && !error && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
+    const stoppable = isLoading && ((_c = messages[messages.length - 1]) === null || _c === void 0 ? void 0 : _c.role) !== "user";
+    const scrollToBottom = () => {
+        const element = scrollElement || messagesContainerRef.current;
+        element === null || element === void 0 ? void 0 : element.scrollBy({
+            behavior: "instant",
+            top: element === null || element === void 0 ? void 0 : element.scrollHeight,
+        });
+    };
+    const lastMsg = messages[messages.length - 1];
+    const externalScroll = !!scrollElement;
+    return (React.createElement(Container, { className: className, ref: containerRef }, showEntryScreen ? (React.createElement(EntryScreen, { className: classes.entryScreenContainer, title: entryScreenTitle, conversationStarters: conversationStarters, onPromptSubmit: (prompt) => {
+            if (prompt.trim() === "") {
+                return;
+            }
+            setShowEntryScreen(false);
+            append({ role: "user", content: prompt });
+        } })) : (React.createElement(ChatScreen, { className: classes.chatScreenContainer, "data-testid": "ai-chat-screen", externalScroll: externalScroll, ref: chatScreenRef },
+        React.createElement(ChatContainer, Object.assign({ className: classNames(className, classes.root), externalScroll: externalScroll }, others),
+            React.createElement(ChatTitle, { askTimTitle: askTimTitle, externalScroll: externalScroll, className: classNames(className, classes.title) }),
+            React.createElement(MessagesContainer, { className: classes.messagesContainer, externalScroll: externalScroll, ref: messagesContainerRef },
+                messages.map((m, i) => {
+                    // Our Markdown+Mathjax has issues when rendering streaming display math
+                    // Force a re-render of the last (streaming) message when it's done loading.
+                    const key = i === messages.length - 1 && isLoading
+                        ? `isLoading-${m.id}`
+                        : m.id;
+                    return (React.createElement(MessageRow, { key: key, "data-chat-role": m.role, className: classNames(classes.messageRow, {
+                            [classes.messageRowUser]: m.role === "user",
+                            [classes.messageRowAssistant]: m.role === "assistant",
+                        }) },
+                        React.createElement(Message, { className: classes.message },
+                            React.createElement(VisuallyHidden, { as: m.role === "user" ? "h5" : "h6" }, m.role === "user" ? "You said: " : "Assistant said: "),
+                            React.createElement(Markdown, { enableMathjax: useMathJax }, 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: () => {
+                        scrollToBottom();
+                        append({ role: "user", content: m.content });
+                    } }, m.content))))) : null,
+                waiting ? (React.createElement(MessageRow, { className: classNames(classes.messageRow, classes.messageRowAssistant), key: "loading" },
+                    React.createElement(Message, null,
+                        React.createElement(StyledEllipsisIcon, null)))) : null,
+                error ? (React.createElement(Alert, { severity: "error", closable: true }, "An unexpected error has occurred.")) : null),
+            React.createElement(BottomSection, { externalScroll: externalScroll, className: classes.bottomSection },
+                React.createElement("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        if (isLoading && stoppable) {
+                            stop();
+                        }
+                        else {
+                            scrollToBottom();
+                            handleSubmit(e);
+                        }
+                    } },
+                    React.createElement(Input, { ref: promptInputRef, fullWidth: true, size: "chat", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, inputProps: {
+                            "aria-label": "Ask a question",
+                        }, endAdornment: isLoading ? (React.createElement(AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
+                            React.createElement(StyledStopButton, null))) : (React.createElement(AdornmentButton, { "aria-label": "Send", type: "submit", onClick: (e) => {
+                                if (input.trim() === "") {
+                                    e.preventDefault();
+                                    return;
+                                }
+                                scrollToBottom();
+                                handleSubmit(e);
+                            } },
+                            React.createElement(StyledSendButton, null))) })),
+                React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect.")),
+            React.createElement(SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: (lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.role) === "assistant" ? lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.content : "" }))))));
+};
+const AiChat = (_a) => {
+    var { requestOpts, initialMessages, chatId, parseContent } = _a, displayProps = __rest(_a, ["requestOpts", "initialMessages", "chatId", "parseContent"]);
+    return (React.createElement(AiChatProvider, { requestOpts: requestOpts, chatId: chatId, initialMessages: initialMessages, parseContent: parseContent },
+        React.createElement(AiChatDisplay, Object.assign({}, displayProps))));
+};
+export { AiChatDisplay, AiChat };

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

@@ -0,0 +1,17 @@
+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;
+/**
+ * Where a scrollable container exists in the including component, it can be passed in
+ * for the AiChat component to use in place of its own height constrained message container
+ * overflow scroll. This is useful for cases such as use inside a modal or drawer.
+ */
+export declare const ScrollContainer: Story;