@mitodl/smoot-design 0.0.0-0a23f44

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashcardsScreen = void 0;
+const ActionButton_1 = require("../../components/Button/ActionButton");
+const Typography_1 = require("@mui/material/Typography");
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const react_2 = require("@remixicon/react");
+const Container = styled_1.default.div ``;
+const FlashcardContainer = styled_1.default.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_1.default.div({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    marginTop: "24px",
+});
+const Page = styled_1.default.div(({ theme }) => (Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2)));
+const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) => {
+    const [screen, setScreen] = (0, react_1.useState)(0);
+    (0, react_1.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_1.default, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
+});
+Flashcard.displayName = "Flashcard";
+const FlashcardsScreen = ({ flashcards, wasKeyboardFocus, }) => {
+    const [cardIndex, setCardIndex] = (0, react_1.useState)(0);
+    const containerRef = (0, react_1.useRef)(null);
+    const flashcardRef = (0, react_1.useRef)(null);
+    const handleKeyDown = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = flashcardRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cardIndex]);
+    (0, react_1.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_1.ActionButton, { onClick: () => setCardIndex(cardIndex - 1), disabled: cardIndex === 0, variant: "secondary", color: "secondary", size: "small", "aria-label": "Previous card" },
+                React.createElement(react_2.RiArrowLeftLine, { "aria-hidden": true })),
+            React.createElement(Page, null,
+                cardIndex + 1,
+                " / ",
+                flashcards.length),
+            React.createElement(ActionButton_1.ActionButton, { onClick: () => setCardIndex(cardIndex + 1), disabled: cardIndex === flashcards.length - 1, variant: "secondary", color: "secondary", size: "small", "aria-label": "Next card" },
+                React.createElement(react_2.RiArrowRightLine, { "aria-hidden": true })))));
+};
+exports.FlashcardsScreen = FlashcardsScreen;

package/dist/cjs/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/cjs/bundles/aiDrawerManager.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = void 0;
+const React = require("react");
+const client_1 = require("react-dom/client");
+const AiDrawerManager_1 = require("./AiDrawer/AiDrawerManager");
+const ThemeProvider_1 = require("../components/ThemeProvider/ThemeProvider");
+const react_1 = require("@emotion/react");
+const cache_1 = require("@emotion/cache");
+const better_react_mathjax_1 = require("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 = (0, cache_1.default)({
+        key: "css",
+        prepend: true,
+        container: container,
+    });
+    const theme = (0, ThemeProvider_1.createTheme)({
+        components: {
+            MuiPopover: { defaultProps: { container: container } },
+            MuiPopper: { defaultProps: { container: container } },
+            MuiModal: { defaultProps: { container: container } },
+        },
+    });
+    (0, client_1.createRoot)(container).render(React.createElement(react_1.CacheProvider, { value: cache },
+        React.createElement(ThemeProvider_1.ThemeProvider, { theme: theme },
+            React.createElement(better_react_mathjax_1.MathJaxContext, null,
+                React.createElement(AiDrawerManager_1.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);
+};
+exports.init = init;

package/dist/cjs/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/cjs/components/AiChat/AiChat.js

@@ -0,0 +1,267 @@
+"use strict";
+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.AiChat = exports.AiChatDisplay = void 0;
+const React = require("react");
+const react_1 = require("react");
+const styled_1 = require("@emotion/styled");
+const Typography_1 = require("@mui/material/Typography");
+const classnames_1 = require("classnames");
+const react_2 = require("@remixicon/react");
+const Input_1 = require("../Input/Input");
+const EntryScreen_1 = require("./EntryScreen");
+const ScrollSnap_1 = require("../ScrollSnap/ScrollSnap");
+const SrAnnouncer_1 = require("../SrAnnouncer/SrAnnouncer");
+const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
+const Alert_1 = require("../Alert/Alert");
+const ChatTitle_1 = require("./ChatTitle");
+const AiChatContext_1 = require("./AiChatContext");
+const useScrollSnap_1 = require("../ScrollSnap/useScrollSnap");
+const Markdown_1 = require("./Markdown");
+const EllipsisIcon_1 = require("./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_1.default.div();
+const ChatScreen = styled_1.default.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_1.default.div(({ externalScroll }) => ({
+    width: "100%",
+    height: externalScroll ? "auto" : "100%",
+    minHeight: externalScroll ? "100%" : "auto",
+    display: "flex",
+    flexDirection: "column",
+}));
+const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.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_1.default.div({
+    display: "flex",
+    width: "100%",
+    gap: "10px",
+    [`&.${classes.messageRowUser}`]: {
+        flexDirection: "row-reverse",
+    },
+    "> *": {
+        minWidth: 0,
+    },
+    position: "relative",
+});
+const Message = styled_1.default.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_1.default.div({
+    alignSelf: "flex-end",
+    alignItems: "end",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+});
+const Starter = styled_1.default.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 = (0, styled_1.default)(react_2.RiSendPlaneFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const StyledStopButton = (0, styled_1.default)(react_2.RiStopFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const BottomSection = styled_1.default.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 = (0, styled_1.default)(Typography_1.default)(({ theme }) => ({
+    color: theme.custom.colors.silverGrayDark,
+    marginTop: "16px",
+    textAlign: "center",
+}));
+const StyledEllipsisIcon = (0, styled_1.default)(EllipsisIcon_1.default)(({ 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 = (0, react_1.useRef)(null);
+    const messagesContainerRef = (0, react_1.useRef)(null);
+    const chatScreenRef = (0, react_1.useRef)(null);
+    const promptInputRef = (0, react_1.useRef)(null);
+    const { messages, input, handleInputChange, handleSubmit, append, isLoading, stop, error, initialMessages, status, } = (0, AiChatContext_1.useAiChat)();
+    (0, useScrollSnap_1.useScrollSnap)({
+        scrollElement: scrollElement || messagesContainerRef.current,
+        contentElement: scrollElement ? messagesContainerRef.current : null,
+        threshold: 200,
+    });
+    const [showEntryScreen, setShowEntryScreen] = (0, react_1.useState)(entryScreenEnabled);
+    (0, react_1.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]);
+    (0, react_1.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_1.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: (0, classnames_1.default)(className, classes.root), externalScroll: externalScroll }, others),
+            React.createElement(ChatTitle_1.ChatTitle, { askTimTitle: askTimTitle, externalScroll: externalScroll, className: (0, classnames_1.default)(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: (0, classnames_1.default)(classes.messageRow, {
+                            [classes.messageRowUser]: m.role === "user",
+                            [classes.messageRowAssistant]: m.role === "assistant",
+                        }) },
+                        React.createElement(Message, { className: classes.message },
+                            React.createElement(VisuallyHidden_1.VisuallyHidden, { as: m.role === "user" ? "h5" : "h6" }, m.role === "user" ? "You said: " : "Assistant said: "),
+                            React.createElement(Markdown_1.default, { 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: (0, classnames_1.default)(classes.messageRow, classes.messageRowAssistant), key: "loading" },
+                    React.createElement(Message, null,
+                        React.createElement(StyledEllipsisIcon, null)))) : null,
+                error ? (React.createElement(Alert_1.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_1.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(Input_1.AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
+                            React.createElement(StyledStopButton, null))) : (React.createElement(Input_1.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_1.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 : "" }))))));
+};
+exports.AiChatDisplay = AiChatDisplay;
+const AiChat = (_a) => {
+    var { requestOpts, initialMessages, chatId, parseContent } = _a, displayProps = __rest(_a, ["requestOpts", "initialMessages", "chatId", "parseContent"]);
+    return (React.createElement(AiChatContext_1.AiChatProvider, { requestOpts: requestOpts, chatId: chatId, initialMessages: initialMessages, parseContent: parseContent },
+        React.createElement(AiChatDisplay, Object.assign({}, displayProps))));
+};
+exports.AiChat = AiChat;

package/dist/cjs/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;

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

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollContainer = exports.JsonResponses = exports.StreamingResponses = void 0;
+const React = require("react");
+const AiChat_1 = require("./AiChat");
+const styled_1 = require("@emotion/styled");
+const api_1 = require("./test-utils/api");
+const react_1 = require("react");
+const better_react_mathjax_1 = require("better-react-mathjax");
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const TEST_API_JSON = "http://localhost:4567/json";
+const INITIAL_MESSAGES = [
+    {
+        content: "Hi! What are you interested in learning about?",
+        role: "assistant",
+    },
+    {
+        content: "I need to brush up on my Calculus",
+        role: "user",
+    },
+    {
+        content: "Great! Do you want to start with the basics, like limits and derivatives, or jump into more advanced topics like integrals and series? Let me know how I can help!",
+        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: "800px",
+});
+const meta = {
+    title: "smoot-design/AI/AiChat",
+    component: AiChat_1.AiChat,
+    parameters: {
+        msw: { handlers: api_1.handlers },
+    },
+    render: (args) => React.createElement(AiChat_1.AiChat, Object.assign({}, args)),
+    decorators: (Story, context) => {
+        return (React.createElement(better_react_mathjax_1.MathJaxContext, null,
+            React.createElement(Container, null,
+                React.createElement(Story, { key: String(context.args.entryScreenEnabled) }))));
+    },
+    args: {
+        entryScreenTitle: "What do you want to learn from MIT?",
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        conversationStarters: STARTERS,
+        askTimTitle: "to recommend a course",
+    },
+    argTypes: {
+        conversationStarters: {
+            control: { type: "object", disable: true },
+        },
+        initialMessages: {
+            control: { type: "object", disable: true },
+        },
+        requestOpts: {
+            control: { type: "object", disable: true },
+            table: { readonly: true }, // See above
+        },
+    },
+};
+exports.default = meta;
+exports.StreamingResponses = {};
+/**
+ * Here `AiChat` is used with a non-streaming JSON API. The JSON is converted
+ * to text via `parseContent`.
+ */
+exports.JsonResponses = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_JSON },
+        initialMessages: INITIAL_MESSAGES,
+        entryScreenEnabled: false,
+        parseContent: (content) => {
+            return JSON.parse(content).message;
+        },
+    },
+};
+const ScrollComponent = (args) => {
+    const ref = (0, react_1.useRef)(null);
+    const [scrollElement, setScrollElement] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setScrollElement(ref.current);
+    }, []);
+    return (React.createElement("div", { style: {
+            height: "800px",
+            overflowY: "scroll",
+            border: "2px solid #e0e6ea",
+            position: "relative",
+        }, ref: ref },
+        React.createElement(AiChat_1.AiChat, Object.assign({}, args, { scrollElement: scrollElement }))));
+};
+/**
+ * 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.
+ */
+exports.ScrollContainer = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        entryScreenEnabled: false,
+        conversationStarters: [],
+        initialMessages: [
+            {
+                content: "Hi! What are you interested in learning about?",
+                role: "assistant",
+            },
+            {
+                content: "I'm looking for a course in computer science, but I'm not sure where to start.",
+                role: "user",
+            },
+            {
+                content: "I can help you find the right course! Could you tell me about your background? Have you done any programming before, and what are your goals?",
+                role: "assistant",
+            },
+            {
+                content: "I've done some basic Python programming, and I'm interested in AI and machine learning. I work full-time though, so I need something flexible.",
+                role: "user",
+            },
+            {
+                content: "Given your background and interests, I have a few recommendations:\n\n1. 6.0001 - Introduction to Computer Science and Programming in Python\n2. 6.0002 - Introduction to Computational Thinking and Data Science\n3. 6.036 - Introduction to Machine Learning\n\nAll these courses offer flexible online options. Would you like more details about any of these?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, could you tell me more about the machine learning course? What are the prerequisites?",
+                role: "user",
+            },
+            {
+                content: "6.036 (Introduction to Machine Learning) requires:\n\n- Basic Python programming\n- Linear algebra fundamentals\n- Basic probability and statistics\n- Calculus I\n\nThe course covers:\n- Supervised learning\n- Neural networks\n- Deep learning basics\n- 12 weeks of content\n- 10-12 hours per week commitment\n\nGiven your Python background, you might need to brush up on math concepts first. Would you like me to suggest some preparatory courses?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, what math courses would you recommend I take first?",
+                role: "user",
+            },
+            {
+                content: "Here are the recommended math prerequisites:\n\n1. 18.01 - Single Variable Calculus\n2. 18.06 - Linear Algebra\n3. 6.041 - Probability\n\nYou can take these online through our OpenCourseWare platform. Each course takes about 8-12 weeks. Would you like to start with any of these? I can provide more details about the course format and materials.",
+                role: "assistant",
+            },
+            {
+                content: "How long would it take to complete all the prerequisites before starting the ML course?",
+                role: "user",
+            },
+            {
+                content: "If you study part-time (10-15 hours per week):\n\n- Calculus: 12 weeks\n- Linear Algebra: 10 weeks\n- Probability: 8 weeks\n\nYou could complete them in:\n1. Sequential order: 7-8 months total\n2. Parallel study (2 courses at a time): 4-5 months\n\nMany students take Calculus and Linear Algebra together. Would you like to see a suggested study schedule?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, a study schedule would be helpful. Also, are there any costs involved?",
+                role: "user",
+            },
+            {
+                content: "Here's the breakdown:\n\nCosts:\n- OpenCourseWare materials: Free\n- Optional verified certificate: $49-99 per course\n- Full ML course with certificate: $149\n\nSuggested Schedule (15 hrs/week):\nMonths 1-3:\n- Calculus (8 hrs/week)\n- Linear Algebra (7 hrs/week)\n\nMonths 4-5:\n- Probability (10 hrs/week)\n\nMonths 6-8:\n- ML course (12 hrs/week)\n\nWould you like me to help you enroll in any of these courses?",
+                role: "assistant",
+            },
+            {
+                content: "Can I start with just the Calculus course first to see how it goes?",
+                role: "user",
+            },
+            {
+                content: "Absolutely! That's a smart approach. 18.01 (Single Variable Calculus) has:\n\n- Flexible start dates\n- Self-paced learning\n- Video lectures\n- Practice problems\n- Online discussion forums\n- 24/7 access to materials\n\nYou can enroll right now and start today. Would you like the enrollment link and first week's syllabus?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, please share the enrollment link. Also, will I have access to any tutoring support?",
+                role: "user",
+            },
+            {
+                content: "Yes! You'll have several support options:\n\n1. Teaching Assistants (TAs) available via:\n   - Discussion forums\n   - Weekly online office hours\n   - Email support\n\n2. Study Groups:\n   - Optional virtual study groups\n   - Peer-to-peer learning\n   - Weekly problem-solving sessions\n\nHere's your enrollment link: [Course Registration Link]\n\nWould you like me to connect you with a TA to discuss your study plan?",
+                role: "assistant",
+            },
+            {
+                content: "Not right now, but I might later. What happens if I find the course too difficult?",
+                role: "user",
+            },
+            {
+                content: "Don't worry! We have several options if you find the course challenging:\n\n1. You can:\n   - Pause your progress anytime\n   - Retake modules as needed\n   - Switch to a more basic math course\n   - Get extra tutoring support\n\n2. We also offer a 2-week trial period with a full refund if you decide it's not the right fit.\n\nWould you like to start with some preliminary practice problems to assess your readiness?",
+                role: "assistant",
+            },
+            {
+                content: "Yes, that would be helpful. Can you send me some practice problems?",
+                role: "user",
+            },
+            {
+                content: "I'll send you our Calculus readiness assessment. It covers:\n\n- Basic algebra\n- Functions and graphs\n- Trigonometry basics\n- Pre-calculus concepts\n\nYou can access it here: [Assessment Link]\n\nTake your time with it - there's no time limit. Once you complete it, I can provide personalized recommendations for where to start. Would you like to try it now?",
+                role: "assistant",
+            },
+        ],
+    },
+    render: (args) => React.createElement(ScrollComponent, Object.assign({}, args)),
+};

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

@@ -0,0 +1 @@
+export {};