@mitodl/smoot-design 6.2.2 → 6.3.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,10 +166,10 @@ 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, }) => {
     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),
@@ -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 })) : 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 })),
             ((_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,6 +1,6 @@
 "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");
@@ -54,6 +54,7 @@ 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" }))),
@@ -76,6 +77,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("react-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/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");
@@ -19,15 +19,15 @@ 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 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 EntryScreen_1 = require("./EntryScreen");
 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 } = _a, others = __rest(_a, ["conversationStarters", "askTimTitle", "entryScreenEnabled", "entryScreenTitle", "srLoadingMessages", "placeholder", "className", "scrollElement", "ref"]) // 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;
             }
@@ -246,4 +217,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/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/types.d.ts

@@ -20,12 +20,24 @@ type RequestOpts = {
     fetchOpts?: RequestInit;
     onFinish?: (message: AiChatMessage) => void;
 };
-type AiChatProps = {
+type AiChatContextProps = {
     /**
      * Changing the `chatId` will reset the chat. Changing the `chatId` to a
      * previously used value will restore the session state.
      */
     chatId?: string;
+    /**
+     * Options for making requests to the AI service.
+     */
+    requestOpts: RequestOpts;
+    parseContent?: (content: unknown) => string;
+    /**
+     * Initial messages to display on the chat. If not provided, the entry screen title will be used as the initial message.
+     */
+    initialMessages?: Omit<AiChatMessage, "id">[];
+    children?: React.ReactNode;
+};
+type AiChatDisplayProps = {
     /**
      * If provided, renders the "AskTIM" title motif followed by the text.
      */
@@ -44,21 +56,12 @@ type AiChatProps = {
      * Title to display on the entry screen, also the initial assistant message if not overridden by `initialMessages`.
      */
     entryScreenTitle?: string;
-    /**
-     * Initial messages to display on the chat. If not provided, the entry screen title will be used as the initial message.
-     */
-    initialMessages?: Omit<AiChatMessage, "id">[];
     /**
      * Prompt suggestions for the user, clickable on the entry screen or in the chat if the entry screen is not enabled.
      */
     conversationStarters?: {
         content: string;
     }[];
-    /**
-     * Options for making requests to the AI service.
-     */
-    requestOpts: RequestOpts;
-    parseContent?: (content: unknown) => string;
     /**
      * A message to display while the component is in a loading state.
      *
@@ -79,4 +82,5 @@ type AiChatProps = {
      */
     scrollElement?: HTMLElement | null;
 } & RefAttributes<HTMLDivElement>;
-export type { RequestOpts, AiChatProps, AiChatMessage };
+type AiChatProps = AiChatContextProps & AiChatDisplayProps;
+export type { RequestOpts, AiChatMessage, AiChatContextProps, AiChatDisplayProps, AiChatProps, };

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

@@ -1,3 +1,3 @@
 "use strict";
-// Some of these are based on (compatible, but simplified / restricted) versions of ai/react types.
+// Some of these are based on (compatible, but simplified / restricted) versions of @ai-sdk/react types.
 Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,4 +1,4 @@
-import { UseChatOptions } from "ai/react";
+import { UseChatOptions } from "@ai-sdk/react";
 import type { RequestOpts } from "./types";
 declare const useAiChat: (requestOpts: RequestOpts, opts: UseChatOptions) => import("@ai-sdk/react").UseChatHelpers & {
     addToolResult: ({ toolCallId, result, }: {

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAiChat = void 0;
-const react_1 = require("ai/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* () {

package/dist/cjs/components/LinkAdapter/LinkAdapter.js

@@ -29,6 +29,6 @@ const LinkAdapter = React.forwardRef(function LinkAdapter(_a, ref) {
     var { Component } = _a, props = __rest(_a, ["Component"]);
     const theme = (0, react_1.useTheme)();
     const LinkComponent = Component !== null && Component !== void 0 ? Component : theme.custom.LinkAdapter;
-    return React.createElement(PlainLink, Object.assign({ as: LinkComponent, ref: ref }, props));
+    return (React.createElement(PlainLink, Object.assign({ as: LinkComponent, ref: ref }, props), props.children));
 });
 exports.LinkAdapter = LinkAdapter;

package/dist/cjs/components/TabButtons/TabButtonList.js

@@ -77,7 +77,7 @@ const TabButtonInner = React.forwardRef(
 TabButtonInner.displayName = "TabButtonInner";
 const TabLinkInner = React.forwardRef((props, ref) => {
     const { className } = props, others = __rest(props, ["className"]);
-    return React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
+    return (React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }), props.children));
 });
 TabLinkInner.displayName = "TabLinkInner";
 /**

package/dist/esm/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/esm/ai.js

@@ -1 +1,2 @@
-export { AiChat } from "./components/AiChat/AiChat";
+export { AiChat, AiChatDisplay } from "./components/AiChat/AiChat";
+export { AiChatProvider, useAiChat } from "./components/AiChat/AiChatContext";

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

@@ -35,7 +35,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, { variant: "h5" }, screen === 0 ? `Q: ${content.question}` : `Answer: ${content.answer}`)));
 });
 Flashcard.displayName = "Flashcard";

package/dist/esm/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: {