@mitodl/smoot-design 6.2.1 → 6.3.0

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: {

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

@@ -149,6 +149,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?" },
@@ -157,10 +163,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),
@@ -245,24 +251,24 @@ const RemoteTutorDrawer = ({ messageOrigin, transformBody = identity, className,
                     md: "0 32px",
                 },
             },
-        }, anchor: "right", open: open, onClose: () => setOpen(false) },
+        }, anchor: "right", open: open, onClose: () => setOpen(false), role: "dialog", "aria-modal": "true" },
         React.createElement(Header, null,
             React.createElement(Title, null,
                 payload.title ? React.createElement(RiSparkling2Line, null) : null,
-                React.createElement(Typography, { variant: "body1", component: "h2" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                React.createElement(Typography, { variant: "body1", component: "h1" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
                     "Ask",
                     React.createElement("strong", null, "TIM"),
                     payload.title.replace("AskTIM", ""))) : (payload.title))),
             React.createElement(CloseButton, { variant: "text", size: "medium", onClick: () => setOpen(false), "aria-label": "Close" },
                 React.createElement(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, { value: tab },
             React.createElement(StyledTabButtonList, { styleVariant: "chat", onChange: (e, tab) => setTab(tab) },
                 React.createElement(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(TabButton, { value: "flashcards", label: "Flashcards", onMouseDown: handleMouseDown, onFocus: handleFocus })) : null,
                 React.createElement(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, { flashcards: response === null || response === void 0 ? void 0 : response.flashcards, wasKeyboardFocus: _wasKeyboardFocus }))) : null,
             React.createElement(StyledTabPanel, { value: "summary" },

package/dist/esm/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/esm/bundles/RemoteTutorDrawer/RemoteTutorDrawer.stories.js

@@ -51,6 +51,7 @@ const IFrame = ({ payload }) => {
 };
 const meta = {
     title: "smoot-design/AI/RemoteTutorDrawer",
+    component: RemoteTutorDrawer,
     render: ({ target }, { parameters: { payload } }) => (React.createElement(React.Fragment, null,
         React.createElement(IFrame, { payload: payload }),
         React.createElement(RemoteTutorDrawer, { target: target, messageOrigin: "http://localhost:6006" }))),
@@ -73,6 +74,22 @@ export const ProblemStory = {
         },
     },
 };
+export const 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,
+            },
+        },
+    },
+};
 export const EntryScreenStory = {
     args: {
         target: "entry-screen-frame",

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

@@ -14,6 +14,12 @@ import { ThemeProvider } from "../../components/ThemeProvider/ThemeProvider";
 import * as React from "react";
 import { http, HttpResponse } from "msw";
 import { setupServer } from "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/esm/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/esm/components/AiChat/AiChat.js

@@ -10,21 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from "react";
-import { useEffect, useRef, useState, useMemo } from "react";
+import { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import Typography from "@mui/material/Typography";
 import classNames from "classnames";
 import { RiSendPlaneFill, RiStopFill, RiMoreFill } from "@remixicon/react";
 import { Input, AdornmentButton } from "../Input/Input";
-import { EntryScreen } from "./EntryScreen";
 import Markdown from "react-markdown";
 import { ScrollSnap } from "../ScrollSnap/ScrollSnap";
 import { SrAnnouncer } from "../SrAnnouncer/SrAnnouncer";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 import { Alert } from "../Alert/Alert";
 import { ChatTitle } from "./ChatTitle";
-import { useAiChat } from "./utils";
+import { AiChatProvider, useAiChat } from "./AiChatContext";
 import { useScrollSnap } from "../ScrollSnap/useScrollSnap";
+import { EntryScreen } from "./EntryScreen";
 const classes = {
     root: "MitAiChat--root",
     title: "MitAiChat--title",
@@ -62,6 +62,9 @@ const MessagesContainer = styled(ScrollSnap)(({ externalScroll }) => ({
     padding: "14px 0",
     overflow: externalScroll ? "visible" : "auto",
     gap: "16px",
+    [`> .${classes.messageRowAssistant}:first-child`]: {
+        marginTop: "16px",
+    },
 }));
 const MessageRow = styled.div({
     display: "flex",
@@ -75,7 +78,7 @@ const MessageRow = styled.div({
     },
     position: "relative",
 });
-const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white, padding: "12px 16px" }, theme.typography.body2), { "p:first-of-type": {
+const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white }, theme.typography.body2), { "p:first-of-type": {
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
@@ -91,9 +94,8 @@ const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ color:
     }, a: {
         color: theme.custom.colors.red,
         fontWeight: "normal",
-    }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
-        padding: "12px 16px 12px 0",
-    }, [`.${classes.messageRowUser} &`]: {
+    }, borderRadius: "12px", [`.${classes.messageRowUser} &`]: {
+        padding: "12px 16px",
         borderRadius: "8px 0px 8px 8px",
         backgroundColor: theme.custom.colors.lightGray1,
     } })));
@@ -128,47 +130,27 @@ const Disclaimer = styled(Typography)(({ 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 = useRef(null);
     const messagesContainerRef = useRef(null);
-    const [showEntryScreen, setShowEntryScreen] = useState(entryScreenEnabled);
     const chatScreenRef = useRef(null);
-    const [initialMessages, setInitialMessages] = useState();
     const promptInputRef = useRef(null);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, error, } = useAiChat(requestOpts, {
-        initialMessages,
-        id: chatId,
-    });
+    const { messages, input, handleInputChange, handleSubmit, append, isLoading, stop, error, initialMessages, } = useAiChat();
     useScrollSnap({
         scrollElement: scrollElement || messagesContainerRef.current,
         contentElement: scrollElement ? messagesContainerRef.current : null,
         threshold: 200,
     });
-    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] = useState(entryScreenEnabled);
     useEffect(() => {
         var _a, _b;
         if (!showEntryScreen) {
             (_b = (_a = promptInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input")) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [showEntryScreen]);
-    const messages = 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";
@@ -181,16 +163,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, { className: classes.entryScreenContainer, title: entryScreenTitle, conversationStarters: conversationStarters, onPromptSubmit: (prompt) => {
+    return (React.createElement(Container, { className: className, ref: containerRef }, showEntryScreen ? (React.createElement(EntryScreen, { className: classes.entryScreenContainer, title: entryScreenTitle, conversationStarters: conversationStarters, onPromptSubmit: (prompt) => {
             if (prompt.trim() === "") {
                 return;
             }
@@ -241,4 +214,9 @@ const AiChat = (_a) => {
                 React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect.")),
             React.createElement(SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: (lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.role) === "assistant" ? lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.content : "" }))))));
 };
-export { AiChat };
+const AiChat = (_a) => {
+    var { requestOpts, initialMessages, chatId, parseContent } = _a, displayProps = __rest(_a, ["requestOpts", "initialMessages", "chatId", "parseContent"]);
+    return (React.createElement(AiChatProvider, { requestOpts: requestOpts, chatId: chatId, initialMessages: initialMessages, parseContent: parseContent },
+        React.createElement(AiChatDisplay, Object.assign({}, displayProps))));
+};
+export { AiChatDisplay, AiChat };

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

@@ -0,0 +1,101 @@
+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;
+};
+import * as React from "react";
+import { useChat } from "@ai-sdk/react";
+import { useMemo, createContext } from "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 = 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 = 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 = useMemo(() => getFetcher(requestOpts), [requestOpts]);
+    const _a = 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 = 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));
+};
+/**
+ * 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;
+};
+export { useAiChat, AiChatProvider };

package/dist/esm/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/esm/components/AiChat/AiChatContext.stories.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { AiChatDisplay } from "./AiChat";
+import { AiChatProvider, useAiChat } from "./AiChatContext";
+import styled from "@emotion/styled";
+import { handlers } from "./test-utils/api";
+import Typography from "@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.div({
+    width: "100%",
+    height: "400px",
+    position: "relative",
+});
+const MessageCounter = () => {
+    const { messages } = useAiChat();
+    return (React.createElement(Typography, { 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: AiChatProvider,
+    parameters: {
+        msw: { handlers },
+    },
+    render: (args) => {
+        return (React.createElement(AiChatProvider, Object.assign({}, args),
+            React.createElement(MessageCounter, null),
+            React.createElement(Container, null,
+                React.createElement(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
+        },
+    },
+};
+export default meta;
+export const StreamingResponses = {};

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

@@ -1,2 +1,2 @@
-// 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.
 export {};

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useChat } from "ai/react";
+import { useChat } from "@ai-sdk/react";
 import { useMemo } from "react";
 const identity = (x) => x;
 const getFetcher = (requestOpts) => (url, opts) => __awaiter(void 0, void 0, void 0, function* () {

package/dist/esm/components/LinkAdapter/LinkAdapter.js

@@ -26,6 +26,6 @@ const LinkAdapter = React.forwardRef(function LinkAdapter(_a, ref) {
     var { Component } = _a, props = __rest(_a, ["Component"]);
     const theme = 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));
 });
 export { LinkAdapter };

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

@@ -73,7 +73,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";
 /**