@mitodl/smoot-design 0.0.0-a2e4e1e → 0.0.0-cf541fb

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

@@ -248,11 +248,11 @@ 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(react_2.RiSparkling2Line, null) : null,
-                React.createElement(Typography_1.default, { variant: "body1", component: "h2" }, ((_b = payload.title) === null || _b === void 0 ? void 0 : _b.includes("AskTIM")) ? (React.createElement(React.Fragment, null,
+                React.createElement(Typography_1.default, { 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))),

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

@@ -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" }))),

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",
@@ -65,6 +65,9 @@ const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)(({ exte
     padding: "14px 0",
     overflow: externalScroll ? "visible" : "auto",
     gap: "16px",
+    [`> .${classes.messageRowAssistant}:first-child`]: {
+        marginTop: "16px",
+    },
 }));
 const MessageRow = styled_1.default.div({
     display: "flex",
@@ -78,7 +81,7 @@ const MessageRow = styled_1.default.div({
     },
     position: "relative",
 });
-const Message = styled_1.default.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_1.default.div(({ theme }) => (Object.assign(Object.assign({ color: theme.custom.colors.darkGray2, backgroundColor: theme.custom.colors.white }, theme.typography.body2), { "p:first-of-type": {
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
@@ -94,9 +97,8 @@ const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign
     }, 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,
     } })));
@@ -131,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";
@@ -184,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;
             }
@@ -244,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,22 @@
+import * as React from "react";
+import { UseChatHelpers } from "@ai-sdk/react";
+import type { AiChatMessage, AiChatContextProps } from "./types";
+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.
+ *
+ * This is largely a wrapper around `useChat` from `@ai-sdk/react`, but it also provides
+ * the initial messages and a custom fetcher.
+ *
+ * Using a context avoids 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.
+ *
+ * This is largely a wrapper around `useChat` from `@ai-sdk/react`, but it also provides
+ * the initial messages and a custom fetcher.
+ *
+ * Using a context avoids 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: {

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

@@ -245,11 +245,11 @@ 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))),

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" }))),

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 };