@mitodl/smoot-design 6.2.2 → 6.4.0

package/dist/cjs/ai.d.ts

@@ -1,3 +1,3 @@
-export { AiChat } from "./components/AiChat/AiChat";
-export type { AiChatProps } from "./components/AiChat/AiChat";
-export type { AiChatMessage } from "./components/AiChat/types";
+export { AiChat, AiChatDisplay } from "./components/AiChat/AiChat";
+export { AiChatProvider, useAiChat } from "./components/AiChat/AiChatContext";
+export type { AiChatMessage, AiChatContextProps, AiChatDisplayProps, AiChatProps, } from "./components/AiChat/types";

package/dist/cjs/ai.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AiChat = void 0;
+exports.useAiChat = exports.AiChatProvider = exports.AiChatDisplay = exports.AiChat = void 0;
 var AiChat_1 = require("./components/AiChat/AiChat");
 Object.defineProperty(exports, "AiChat", { enumerable: true, get: function () { return AiChat_1.AiChat; } });
+Object.defineProperty(exports, "AiChatDisplay", { enumerable: true, get: function () { return AiChat_1.AiChatDisplay; } });
+var AiChatContext_1 = require("./components/AiChat/AiChatContext");
+Object.defineProperty(exports, "AiChatProvider", { enumerable: true, get: function () { return AiChatContext_1.AiChatProvider; } });
+Object.defineProperty(exports, "useAiChat", { enumerable: true, get: function () { return AiChatContext_1.useAiChat; } });

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

@@ -38,7 +38,7 @@ const Flashcard = React.forwardRef(({ content, "aria-label": ariaLabel }, ref) =
             setScreen(screen === 0 ? 1 : 0);
         }
     };
-    return (React.createElement(FlashcardContainer, { ref: ref, onClick: () => setScreen(screen === 0 ? 1 : 0), onKeyDown: handleKeyDown, tabIndex: 0, "aria-label": ariaLabel },
+    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";

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.d.ts

@@ -1,6 +1,5 @@
 import { FC } from "react";
-import { AiChatMessage } from "../../components/AiChat/types";
-import type { AiChatProps } from "../../components/AiChat/AiChat";
+import type { AiChatProps, AiChatMessage } from "../../components/AiChat/types";
 type RemoteTutorDrawerInitMessage = {
     type: "smoot-design::tutor-drawer-open";
     payload: {

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.js

@@ -152,6 +152,12 @@ const useContentFetch = (contentUrl) => {
     }, [contentUrl]);
     return { response, loading };
 };
+const DEFAULT_PROBLEM_INITIAL_MESSAGES = [
+    {
+        role: "assistant",
+        content: "Let's try to work on this problem together. It would be great to hear how you're thinking about solving it. Can you walk me through the approach you're considering?",
+    },
+];
 const DEFAULT_VIDEO_ENTRY_SCREEN_TITLE = "What do you want to know about this video?";
 const DEFAULT_VIDEO_STARTERS = [
     { content: "What are the most important concepts introduced in the video?" },
@@ -160,14 +166,14 @@ const DEFAULT_VIDEO_STARTERS = [
     },
     { content: "What are the key terms introduced in this video?" },
 ];
-const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, hasTabs, }) => {
+const ChatComponent = ({ payload, transformBody, fetchOpts, scrollElement, entryScreenEnabled, entryScreenTitle, conversationStarters, initialMessages, hasTabs, needsMathJax, }) => {
     if (!payload)
         return null;
-    return (React.createElement(StyledAiChat, { chatId: payload.chatId, conversationStarters: conversationStarters, initialMessages: payload.initialMessages, scrollElement: scrollElement, entryScreenEnabled: entryScreenEnabled, entryScreenTitle: entryScreenTitle, requestOpts: {
+    return (React.createElement(StyledAiChat, { chatId: payload.chatId, conversationStarters: conversationStarters, initialMessages: initialMessages, scrollElement: scrollElement, entryScreenEnabled: entryScreenEnabled, entryScreenTitle: entryScreenTitle, requestOpts: {
             transformBody: (messages) => (Object.assign(Object.assign({}, payload.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages))),
             apiUrl: payload.apiUrl,
             fetchOpts: Object.assign(Object.assign({}, DEFAULT_FETCH_OPTS), fetchOpts),
-        }, hasTabs: hasTabs }));
+        }, hasTabs: hasTabs, useMathJax: needsMathJax }));
 };
 const randomItems = (array, count) => {
     const shuffled = [...array].sort(() => 0.5 - Math.random());
@@ -258,14 +264,14 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
                     payload.title.replace("AskTIM", ""))) : (payload.title))),
             React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
                 React.createElement(react_2.RiCloseLine, null))),
-        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_d = (_c = payload.chat) === null || _c === void 0 ? void 0 : _c.entryScreenEnabled) !== null && _d !== void 0 ? _d : false, entryScreenTitle: payload.chat.entryScreenTitle, hasTabs: hasTabs })) : null,
+        blockType === "problem" ? (React.createElement(ChatComponent, { payload: chat, transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_d = (_c = payload.chat) === null || _c === void 0 ? void 0 : _c.entryScreenEnabled) !== null && _d !== void 0 ? _d : false, entryScreenTitle: payload.chat.entryScreenTitle, initialMessages: payload.chat.initialMessages || DEFAULT_PROBLEM_INITIAL_MESSAGES, hasTabs: hasTabs, needsMathJax: true })) : null,
         blockType === "video" ? (React.createElement(TabContext_1.default, { value: tab },
             React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (e, tab) => setTab(tab) },
                 React.createElement(TabButtonList_1.TabButton, { value: "chat", label: "Chat" }),
                 ((_e = response === null || response === void 0 ? void 0 : response.flashcards) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TabButtonList_1.TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus })) : null,
                 React.createElement(TabButtonList_1.TabButton, { value: "summary", label: "Summary" })),
             React.createElement(StyledTabPanel, { value: "chat", keepMounted: true },
-                React.createElement(ChatComponent, { payload: Object.assign({}, chat), transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_g = (_f = payload.chat) === null || _f === void 0 ? void 0 : _f.entryScreenEnabled) !== null && _g !== void 0 ? _g : true, entryScreenTitle: (_h = payload.chat.entryScreenTitle) !== null && _h !== void 0 ? _h : DEFAULT_VIDEO_ENTRY_SCREEN_TITLE, conversationStarters: conversationStarters, hasTabs: hasTabs })),
+                React.createElement(ChatComponent, { payload: Object.assign({}, chat), transformBody: transformBody, fetchOpts: fetchOpts, scrollElement: scrollElement, entryScreenEnabled: (_g = (_f = payload.chat) === null || _f === void 0 ? void 0 : _f.entryScreenEnabled) !== null && _g !== void 0 ? _g : true, entryScreenTitle: (_h = payload.chat.entryScreenTitle) !== null && _h !== void 0 ? _h : DEFAULT_VIDEO_ENTRY_SCREEN_TITLE, conversationStarters: conversationStarters, initialMessages: payload.chat.initialMessages, hasTabs: hasTabs, needsMathJax: false })),
             ((_j = response === null || response === void 0 ? void 0 : response.flashcards) === null || _j === void 0 ? void 0 : _j.length) ? (React.createElement(StyledTabPanel, { value: "flashcards" },
                 React.createElement(FlashcardsScreen_1.FlashcardsScreen, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus }))) : null,
             React.createElement(StyledTabPanel, { value: "summary" },

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof RemoteTutorDrawer>;
 export default meta;
 type Story = StoryObj<typeof RemoteTutorDrawer>;
 export declare const ProblemStory: Story;
+export declare const ProblemDefaultInitialMessagesStory: Story;
 export declare const EntryScreenStory: Story;
 /**
  * The chat entry screen is shown by default for the video blocks Tutor drawer.

package/dist/cjs/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashcardConversationStartersStory = exports.VideoStory = exports.EntryScreenStory = exports.ProblemStory = void 0;
+exports.FlashcardConversationStartersStory = exports.VideoStory = exports.EntryScreenStory = exports.ProblemDefaultInitialMessagesStory = exports.ProblemStory = void 0;
 /* eslint-disable react-hooks/rules-of-hooks */
 const React = require("react");
 const tiny_invariant_1 = require("tiny-invariant");
 const msw_1 = require("msw");
 const api_1 = require("../../components/AiChat/test-utils/api");
 const RemoteTutorDrawer_1 = require("./RemoteTutorDrawer");
+const better_react_mathjax_1 = require("better-react-mathjax");
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const CONTENT_FILE_URL = "http://localhost:4567/api/v1/contentfiles/?edx_module_id=1";
 const INITIAL_MESSAGES = [
@@ -54,9 +55,11 @@ const IFrame = ({ payload }) => {
 };
 const meta = {
     title: "smoot-design/AI/RemoteTutorDrawer",
+    component: RemoteTutorDrawer_1.RemoteTutorDrawer,
     render: ({ target }, { parameters: { payload } }) => (React.createElement(React.Fragment, null,
         React.createElement(IFrame, { payload: payload }),
-        React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, { target: target, messageOrigin: "http://localhost:6006" }))),
+        React.createElement(better_react_mathjax_1.MathJaxContext, null,
+            React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, { target: target, messageOrigin: "http://localhost:6006" })))),
 };
 exports.default = meta;
 exports.ProblemStory = {
@@ -76,6 +79,22 @@ exports.ProblemStory = {
         },
     },
 };
+exports.ProblemDefaultInitialMessagesStory = {
+    args: {
+        target: "problem-frame-default-initial-messages",
+    },
+    parameters: {
+        payload: {
+            blockType: "problem",
+            target: "problem-frame-default-initial-messages",
+            title: "AskTIM for help with Problem: Derivatives 1.1",
+            chat: {
+                apiUrl: TEST_API_STREAMING,
+                conversationStarters: STARTERS,
+            },
+        },
+    },
+};
 exports.EntryScreenStory = {
     args: {
         target: "entry-screen-frame",

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

@@ -16,6 +16,12 @@ const ThemeProvider_1 = require("../../components/ThemeProvider/ThemeProvider");
 const React = require("react");
 const msw_1 = require("msw");
 const node_1 = require("msw/node");
+jest.mock("../../components/AiChat/Markdown", () => {
+    return {
+        __esModule: true,
+        default: ({ children }) => React.createElement("div", null, children),
+    };
+});
 const TEST_API_STREAMING = "http://localhost:4567/test";
 const CONTENT_FILE_URL = "http://localhost:4567/api/v1/contentfiles/1";
 const CONTENT_RESPONSE = {

package/dist/cjs/bundles/remoteTutorDrawer.js

@@ -7,6 +7,7 @@ const RemoteTutorDrawer_1 = require("./RemoteTutorDrawer/RemoteTutorDrawer");
 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 RemoteTutorDrawer in an shadow DOM in order to isolate the drawer
  * styles from external stylesheets.
@@ -35,6 +36,8 @@ const init = (opts) => {
     });
     (0, client_1.createRoot)(shadowRootEl).render(React.createElement(react_1.CacheProvider, { value: cache },
         React.createElement(ThemeProvider_1.ThemeProvider, { theme: theme },
-            React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, Object.assign({}, opts)))));
+            React.createElement(better_react_mathjax_1.MathJaxContext, null,
+                React.createElement(RemoteTutorDrawer_1.RemoteTutorDrawer, Object.assign({}, opts))),
+            ",")));
 };
 exports.init = init;

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

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

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AiChat = void 0;
+exports.AiChat = exports.AiChatDisplay = void 0;
 const React = require("react");
 const react_1 = require("react");
 const styled_1 = require("@emotion/styled");
@@ -20,14 +20,14 @@ const classnames_1 = require("classnames");
 const react_2 = require("@remixicon/react");
 const Input_1 = require("../Input/Input");
 const EntryScreen_1 = require("./EntryScreen");
-const react_markdown_1 = require("react-markdown");
 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 utils_1 = require("./utils");
+const AiChatContext_1 = require("./AiChatContext");
 const useScrollSnap_1 = require("../ScrollSnap/useScrollSnap");
+const Markdown_1 = require("./Markdown");
 const classes = {
     root: "MitAiChat--root",
     title: "MitAiChat--title",
@@ -133,47 +133,27 @@ const Disclaimer = (0, styled_1.default)(Typography_1.default)(({ theme }) => ({
     marginTop: "16px",
     textAlign: "center",
 }));
-const AiChat = (_a) => {
+const AiChatDisplay = (_a) => {
     var _b, _c;
-    var { entryScreenTitle, entryScreenEnabled = true, conversationStarters, initialMessages: _initialMessages, askTimTitle, requestOpts, parseContent, srLoadingMessages, placeholder = "", className, scrollElement, chatId, ref } = _a, others = __rest(_a, ["entryScreenTitle", "entryScreenEnabled", "conversationStarters", "initialMessages", "askTimTitle", "requestOpts", "parseContent", "srLoadingMessages", "placeholder", "className", "scrollElement", "chatId", "ref"]) // Could contain data attributes
+    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 [showEntryScreen, setShowEntryScreen] = (0, react_1.useState)(entryScreenEnabled);
     const chatScreenRef = (0, react_1.useRef)(null);
-    const [initialMessages, setInitialMessages] = (0, react_1.useState)();
     const promptInputRef = (0, react_1.useRef)(null);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, error, } = (0, utils_1.useAiChat)(requestOpts, {
-        initialMessages,
-        id: chatId,
-    });
+    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,
     });
-    (0, react_1.useEffect)(() => {
-        if (_initialMessages) {
-            const prefix = Math.random().toString().slice(2);
-            setInitialMessages(_initialMessages.map((m, i) => (Object.assign(Object.assign({}, m), { id: `initial-${prefix}-${i}` }))));
-        }
-    }, [_initialMessages]);
+    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 messages = (0, react_1.useMemo)(() => {
-        const initial = initialMessages === null || initialMessages === void 0 ? void 0 : initialMessages.map((m) => m.id);
-        return unparsed.map((m) => {
-            if (m.role === "assistant" && !(initial === null || initial === void 0 ? void 0 : initial.includes(m.id))) {
-                const content = parseContent ? parseContent(m.content) : m.content;
-                return Object.assign(Object.assign({}, m), { content });
-            }
-            return m;
-        });
-    }, [parseContent, unparsed, initialMessages]);
     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";
@@ -186,16 +166,7 @@ const AiChat = (_a) => {
     };
     const lastMsg = messages[messages.length - 1];
     const externalScroll = !!scrollElement;
-    return (React.createElement(Container, { className: className, ref: containerRef, 
-        /**
-         * Changing the `useChat` chatId seems to persist some state between
-         * hook calls. This can cause strange effects like loading API responses
-         * for previous chatId into new chatId.
-         *
-         * To avoid this, let's change the key, this will force React to make a new component
-         * not sharing any of the old state.
-         */
-        key: chatId }, showEntryScreen ? (React.createElement(EntryScreen_1.EntryScreen, { className: classes.entryScreenContainer, title: entryScreenTitle, conversationStarters: conversationStarters, onPromptSubmit: (prompt) => {
+    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;
             }
@@ -205,13 +176,20 @@ const AiChat = (_a) => {
         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) => (React.createElement(MessageRow, { key: m.id, "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(react_markdown_1.default, { skipHtml: true }, m.content))))),
+                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 });
@@ -246,4 +224,10 @@ const AiChat = (_a) => {
                 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.js

@@ -6,6 +6,7 @@ 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 = [
@@ -39,8 +40,9 @@ const meta = {
     },
     render: (args) => React.createElement(AiChat_1.AiChat, Object.assign({}, args)),
     decorators: (Story, context) => {
-        return (React.createElement(Container, null,
-            React.createElement(Story, { key: String(context.args.entryScreenEnabled) })));
+        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?",
@@ -111,6 +113,17 @@ 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.
@@ -126,6 +139,7 @@ exports.MarkdownStyling = {
                 content: DEMO_MARKDOWN,
             },
         ],
+        useMathJax: true,
     },
 };
 const ScrollComponent = (args) => {

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { UseChatHelpers } from "@ai-sdk/react";
+import type { AiChatMessage, AiChatContextProps } from "./types";
+/**
+ * All of `@ai-sdk/react`'s [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat)
+ * results, plus the initial messages.
+ */
+type AiChatContextResult = UseChatHelpers & {
+    initialMessages: AiChatMessage[] | null;
+};
+/**
+ * Provides AiChatContext to its children. Within this provider, you can consume
+ * the AiChatContext using the `useAiChat` hook.
+ */
+declare const AiChatProvider: React.FC<AiChatContextProps>;
+/**
+ * Returns the AiChatContext, which includes all results from `@ai-sdk/react`'s
+ * [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook as
+ * well as the initial messages.
+ *
+ * In addition to customizing the fetcher, using a context allows us to avoid
+ * this issue https://github.com/vercel/ai/issues/3266 since the caller no
+ * longer needs to provide the initial messages.
+ */
+declare const useAiChat: () => AiChatContextResult;
+export { useAiChat, AiChatProvider };

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

@@ -0,0 +1,105 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiChatProvider = exports.useAiChat = void 0;
+const React = require("react");
+const react_1 = require("@ai-sdk/react");
+const react_2 = require("react");
+const identity = (x) => x;
+const getFetcher = (requestOpts) => (url, opts) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    if (typeof (opts === null || opts === void 0 ? void 0 : opts.body) !== "string") {
+        console.error("Unexpected body type.");
+        return window.fetch(url, opts);
+    }
+    const messages = JSON.parse(opts === null || opts === void 0 ? void 0 : opts.body).messages;
+    const transformBody = (_a = requestOpts.transformBody) !== null && _a !== void 0 ? _a : identity;
+    const options = Object.assign(Object.assign(Object.assign(Object.assign({}, opts), { body: JSON.stringify(transformBody(messages)) }), requestOpts.fetchOpts), { headers: Object.assign(Object.assign(Object.assign({}, opts === null || opts === void 0 ? void 0 : opts.headers), { "Content-Type": "application/json" }), (_b = requestOpts.fetchOpts) === null || _b === void 0 ? void 0 : _b.headers) });
+    return fetch(url, options);
+});
+const AiChatContext = (0, react_2.createContext)(null);
+/**
+ * Provides AiChatContext to its children. Within this provider, you can consume
+ * the AiChatContext using the `useAiChat` hook.
+ */
+const AiChatProvider = ({ initialMessages: _initialMessages, requestOpts, chatId, parseContent, children, }) => {
+    const initialMessages = (0, react_2.useMemo)(() => {
+        var _a;
+        return ((_a = _initialMessages === null || _initialMessages === void 0 ? void 0 : _initialMessages.map((message, i) => (Object.assign(Object.assign({}, message), { id: `initial-${i}` })))) !== null && _a !== void 0 ? _a : []);
+    }, [_initialMessages]);
+    const fetcher = (0, react_2.useMemo)(() => getFetcher(requestOpts), [requestOpts]);
+    const _a = (0, react_1.useChat)({
+        api: requestOpts.apiUrl,
+        streamProtocol: "text",
+        fetch: fetcher,
+        onFinish: (message) => {
+            var _a;
+            if (!requestOpts.onFinish)
+                return;
+            if (message.role === "assistant" || message.role === "user") {
+                (_a = requestOpts.onFinish) === null || _a === void 0 ? void 0 : _a.call(requestOpts, message);
+            }
+            else {
+                console.info("Unexpected message role.", message);
+            }
+        },
+        initialMessages,
+        id: chatId,
+    }), { messages: unparsed } = _a, others = __rest(_a, ["messages"]);
+    const messages = (0, react_2.useMemo)(() => {
+        const initial = initialMessages === null || initialMessages === void 0 ? void 0 : initialMessages.map((m) => m.id);
+        return unparsed.map((m) => {
+            if (m.role === "assistant" && !(initial === null || initial === void 0 ? void 0 : initial.includes(m.id))) {
+                const content = parseContent ? parseContent(m.content) : m.content;
+                return Object.assign(Object.assign({}, m), { content });
+            }
+            return m;
+        });
+    }, [parseContent, unparsed, initialMessages]);
+    return (React.createElement(AiChatContext.Provider
+    /**
+     * Ensure that child state is reset when chatId changes.
+     */
+    , { 
+        /**
+         * Ensure that child state is reset when chatId changes.
+         */
+        key: chatId, value: Object.assign({ initialMessages, messages }, others) }, children));
+};
+exports.AiChatProvider = AiChatProvider;
+/**
+ * Returns the AiChatContext, which includes all results from `@ai-sdk/react`'s
+ * [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook as
+ * well as the initial messages.
+ *
+ * In addition to customizing the fetcher, using a context allows us to avoid
+ * this issue https://github.com/vercel/ai/issues/3266 since the caller no
+ * longer needs to provide the initial messages.
+ */
+const useAiChat = () => {
+    const context = React.useContext(AiChatContext);
+    if (!context) {
+        throw new Error("useAiChatContext must be used within an AiChatProvider");
+    }
+    return context;
+};
+exports.useAiChat = useAiChat;

package/dist/cjs/components/AiChat/AiChatContext.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChatProvider } from "./AiChatContext";
+/**
+ * AiChatProvider provides state and functions for managing chat. The higher-level
+ * `AiChat` component is a wrapper around this provider and the `AiChatDisplay`,
+ *  roughly.
+ *
+ * If you need to access chat state outside of the chat display, you can use
+ * `AiChatProvider` directly.
+ */
+declare const meta: Meta<typeof AiChatProvider>;
+export default meta;
+type Story = StoryObj<typeof AiChatProvider>;
+export declare const StreamingResponses: Story;

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamingResponses = void 0;
+const React = require("react");
+const AiChat_1 = require("./AiChat");
+const AiChatContext_1 = require("./AiChatContext");
+const styled_1 = require("@emotion/styled");
+const api_1 = require("./test-utils/api");
+const Typography_1 = require("@mui/material/Typography");
+const TEST_API_STREAMING = "http://localhost:4567/streaming";
+const INITIAL_MESSAGES = [
+    {
+        content: "Hi! What are you interested in learning about?",
+        role: "assistant",
+    },
+];
+const STARTERS = [
+    { content: "I'm interested in quantum computing" },
+    { content: "I want to understand global warming. " },
+    { content: "I am curious about AI applications for business" },
+];
+const Container = styled_1.default.div({
+    width: "100%",
+    height: "400px",
+    position: "relative",
+});
+const MessageCounter = () => {
+    const { messages } = (0, AiChatContext_1.useAiChat)();
+    return (React.createElement(Typography_1.default, { variant: "subtitle1" },
+        "Message count: ",
+        messages.length,
+        " (Provided by ",
+        React.createElement("code", null, "AiChatContext"),
+        ")"));
+};
+/**
+ * AiChatProvider provides state and functions for managing chat. The higher-level
+ * `AiChat` component is a wrapper around this provider and the `AiChatDisplay`,
+ *  roughly.
+ *
+ * If you need to access chat state outside of the chat display, you can use
+ * `AiChatProvider` directly.
+ */
+const meta = {
+    title: "smoot-design/AI/AiChatContext",
+    component: AiChatContext_1.AiChatProvider,
+    parameters: {
+        msw: { handlers: api_1.handlers },
+    },
+    render: (args) => {
+        return (React.createElement(AiChatContext_1.AiChatProvider, Object.assign({}, args),
+            React.createElement(MessageCounter, null),
+            React.createElement(Container, null,
+                React.createElement(AiChat_1.AiChatDisplay, { entryScreenEnabled: false, conversationStarters: STARTERS, placeholder: "Type your message here", askTimTitle: "Ask TIM" }))));
+    },
+    decorators: (Story) => {
+        return (React.createElement(Container, null,
+            React.createElement(Story, null)));
+    },
+    args: {
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        initialMessages: INITIAL_MESSAGES,
+    },
+    argTypes: {
+        initialMessages: {
+            control: { type: "object", disable: true },
+        },
+        requestOpts: {
+            control: { type: "object", disable: true },
+            table: { readonly: true }, // See above
+        },
+    },
+};
+exports.default = meta;
+exports.StreamingResponses = {};

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

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

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

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