@mitodl/smoot-design 0.0.0-355a925

package/dist/esm/bundles/RemoteTutorDrawer/RemoteTutorDrawer.test.js

@@ -0,0 +1,239 @@
+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 { RemoteTutorDrawer } from "./RemoteTutorDrawer";
+import { ThemeProvider } from "../../components/ThemeProvider/ThemeProvider";
+import * as React from "react";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+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("RemoteTutorDrawer", () => {
+    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(RemoteTutorDrawer, { "data-testid": "remote-tutor-drawer", messageOrigin: "http://localhost:6006", target: "ai-chat" }), { wrapper: ThemeProvider });
+        yield screen.findByTestId("remote-tutor-drawer-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::tutor-drawer-open",
+            payload: {
+                blockType: "problem",
+                target: "ai-chat",
+                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::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                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::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                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::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                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::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                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::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                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::tutor-drawer-open",
+            payload: {
+                blockType: "video",
+                target: "ai-chat",
+                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/remoteTutorDrawer.d.ts

@@ -0,0 +1,7 @@
+import type { RemoteTutorDrawerProps } from "./RemoteTutorDrawer/RemoteTutorDrawer";
+/**
+ * Renders the RemoteTutorDrawer in an shadow DOM in order to isolate the drawer
+ * styles from external stylesheets.
+ */
+declare const init: (opts: RemoteTutorDrawerProps) => void;
+export { init };

package/dist/esm/bundles/remoteTutorDrawer.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { RemoteTutorDrawer } from "./RemoteTutorDrawer/RemoteTutorDrawer";
+import { ThemeProvider, createTheme, } from "../components/ThemeProvider/ThemeProvider";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
+/**
+ * Renders the RemoteTutorDrawer in an shadow DOM in order to isolate the drawer
+ * styles from external stylesheets.
+ */
+const init = (opts) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const shadowContainer = container.attachShadow({ mode: "open" });
+    const shadowRootEl = document.createElement("div");
+    shadowRootEl.id = "smoot-chat-drawer-root";
+    shadowContainer.append(shadowRootEl);
+    // See https://mui.com/material-ui/customization/shadow-dom/
+    // Ensure style tags are rendered in shadow root
+    const cache = createCache({
+        key: "css",
+        prepend: true,
+        container: shadowContainer,
+    });
+    const theme = createTheme({
+        components: {
+            // Ensure modals, etc, are rendered in shadow root
+            MuiPopover: { defaultProps: { container: shadowRootEl } },
+            MuiPopper: { defaultProps: { container: shadowRootEl } },
+            MuiModal: { defaultProps: { container: shadowRootEl } },
+        },
+    });
+    createRoot(shadowRootEl).render(React.createElement(CacheProvider, { value: cache },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(RemoteTutorDrawer, Object.assign({}, opts)))));
+};
+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,222 @@
+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, RiMoreFill } from "@remixicon/react";
+import { Input, AdornmentButton } from "../Input/Input";
+import Markdown from "react-markdown";
+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 { EntryScreen } from "./EntryScreen";
+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",
+        marginLeft: "6px",
+        "ol, ul": {
+            marginLeft: 0,
+        },
+        li: {
+            margin: "16px 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 AiChatDisplay = (_a) => {
+    var _b, _c;
+    var { conversationStarters, askTimTitle, entryScreenEnabled = true, entryScreenTitle, srLoadingMessages, placeholder = "", className, scrollElement, ref } = _a, others = __rest(_a, ["conversationStarters", "askTimTitle", "entryScreenEnabled", "entryScreenTitle", "srLoadingMessages", "placeholder", "className", "scrollElement", "ref"]) // 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, } = 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]);
+    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) => (React.createElement(MessageRow, { key: m.id, "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, { skipHtml: true }, 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(RiMoreFill, 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,21 @@
+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;
+/**
+ * This story shows the component's builtin markdown styling.
+ */
+export declare const MarkdownStyling: 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;