@mitodl/smoot-design 0.0.0-1967631

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

@@ -0,0 +1,233 @@
+"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 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",
+        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_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 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, } = (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]);
+    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(react_2.RiMoreFill, 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,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;

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

@@ -0,0 +1,257 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollContainer = exports.MarkdownStyling = 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 DEMO_MARKDOWN = `This shows default markdown styling. Here's are some lists:
+- Item 1
+- Item 2 - an unordered list (bullets)
+    - Point A
+    - Point B
+- Item 3 - an ordered list (numbers)
+    1. Item 3.1
+    2. Item 3.2
+    3. Item 3.3
+
+Sometimes, unordered lists are nested within ordered lists:
+1. Item 1
+    - Item 1.1
+    - Item 1.2
+2. Item 2
+    - Item 2.1
+    - Item 2.2
+
+Sometimes, ordered lists are nested within unordered lists:
+- Item 1
+    1. Item 1.1
+    2. Item 1.2
+- Item 2
+    1. Item 2.1
+    2. Item 2.2
+
+Here is a longer paragraph and **bold text** and *italic text*. Lorem ipsum dolor sit amet, consectetur adipiscing elit
+sed do eiusmod tempor [incididunt](https://mit.edu) ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+
+And some inline code, \`\`<inline></inline>\`\` and code block:
+\`\`\`
+def f(x):
+    print(x)
+\`\`\`
+
+And some inline  math: $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$
+
+And some block math:
+\n
+
+$$
+x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}
+$$
+
+Math is rendered using MathJax only if the useMathJax prop is set to true.
+`;
+/**
+ * This story shows the component's builtin markdown styling.
+ */
+exports.MarkdownStyling = {
+    args: {
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        entryScreenEnabled: false,
+        conversationStarters: [],
+        initialMessages: [
+            {
+                role: "assistant",
+                content: DEMO_MARKDOWN,
+            },
+        ],
+        useMathJax: true,
+    },
+};
+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 {};