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

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AiChat = void 0;
+exports.AiChat = exports.AiChatDisplay = void 0;
 const React = require("react");
 const react_1 = require("react");
 const styled_1 = require("@emotion/styled");
@@ -20,14 +20,14 @@ const classnames_1 = require("classnames");
 const react_2 = require("@remixicon/react");
 const Input_1 = require("../Input/Input");
 const EntryScreen_1 = require("./EntryScreen");
-const react_markdown_1 = require("react-markdown");
 const ScrollSnap_1 = require("../ScrollSnap/ScrollSnap");
 const SrAnnouncer_1 = require("../SrAnnouncer/SrAnnouncer");
 const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
 const Alert_1 = require("../Alert/Alert");
 const ChatTitle_1 = require("./ChatTitle");
-const utils_1 = require("./utils");
+const AiChatContext_1 = require("./AiChatContext");
 const useScrollSnap_1 = require("../ScrollSnap/useScrollSnap");
+const Markdown_1 = require("./Markdown");
 const classes = {
     root: "MitAiChat--root",
     title: "MitAiChat--title",
@@ -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,25 +81,45 @@ 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,
-    }, "ol, ul": {
+    }, "ol,ul": {
         paddingInlineStart: "16px",
-        marginLeft: "6px",
-        "ol, ul": {
-            marginLeft: 0,
+        margin: "12px 0 12px 4px",
+    }, "ol > li, ul > li": {
+        margin: "12px 0",
+        "ol,ul": {
+            margin: "12px 0 12px 4px",
         },
         li: {
-            margin: "16px 0",
+            margin: "6px 0",
+        },
+    }, ul: {
+        paddingInlineStart: 0,
+        "> li": {
+            listStyleType: "none",
+            position: "relative",
+            "&::before": {
+                content: '"–"',
+                position: "absolute",
+                left: 0,
+                color: "#888",
+                marginRight: "8px",
+            },
+            paddingLeft: "16px",
+        },
+    }, "ol + ul": {
+        marginLeft: "24px",
+        li: {
+            margin: "6px 0",
         },
     }, 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 +154,32 @@ const Disclaimer = (0, styled_1.default)(Typography_1.default)(({ theme }) => ({
     marginTop: "16px",
     textAlign: "center",
 }));
-const AiChat = (_a) => {
+const AiChatDisplay = (_a) => {
     var _b, _c;
-    var { entryScreenTitle, entryScreenEnabled = true, conversationStarters, initialMessages: _initialMessages, askTimTitle, requestOpts, parseContent, srLoadingMessages, placeholder = "", className, scrollElement, chatId, ref } = _a, others = __rest(_a, ["entryScreenTitle", "entryScreenEnabled", "conversationStarters", "initialMessages", "askTimTitle", "requestOpts", "parseContent", "srLoadingMessages", "placeholder", "className", "scrollElement", "chatId", "ref"]) // Could contain data attributes
+    var { conversationStarters, askTimTitle, entryScreenEnabled = true, entryScreenTitle, srLoadingMessages, placeholder = "", className, scrollElement, ref, useMathJax = false } = _a, others = __rest(_a, ["conversationStarters", "askTimTitle", "entryScreenEnabled", "entryScreenTitle", "srLoadingMessages", "placeholder", "className", "scrollElement", "ref", "useMathJax"]) // Could contain data attributes
     ;
     const containerRef = (0, react_1.useRef)(null);
     const messagesContainerRef = (0, react_1.useRef)(null);
-    const [showEntryScreen, setShowEntryScreen] = (0, react_1.useState)(entryScreenEnabled);
     const chatScreenRef = (0, react_1.useRef)(null);
-    const [initialMessages, setInitialMessages] = (0, react_1.useState)();
     const promptInputRef = (0, react_1.useRef)(null);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, error, } = (0, utils_1.useAiChat)(requestOpts, {
-        initialMessages,
-        id: chatId,
-    });
+    const { messages, input, handleInputChange, handleSubmit, append, isLoading, stop, error, initialMessages, status, } = (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]);
+    (0, react_1.useEffect)(() => {
+        if (messages.some((m) => m.role === "user" || ["submitted", "streaming"].includes(status))) {
+            setShowEntryScreen(false);
+        }
+    }, [messages, status]);
     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 +192,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;
             }
@@ -203,13 +202,20 @@ const AiChat = (_a) => {
         React.createElement(ChatContainer, Object.assign({ className: (0, classnames_1.default)(className, classes.root), externalScroll: externalScroll }, others),
             React.createElement(ChatTitle_1.ChatTitle, { askTimTitle: askTimTitle, externalScroll: externalScroll, className: (0, classnames_1.default)(className, classes.title) }),
             React.createElement(MessagesContainer, { className: classes.messagesContainer, externalScroll: externalScroll, ref: messagesContainerRef },
-                messages.map((m) => (React.createElement(MessageRow, { key: m.id, "data-chat-role": m.role, className: (0, classnames_1.default)(classes.messageRow, {
-                        [classes.messageRowUser]: m.role === "user",
-                        [classes.messageRowAssistant]: m.role === "assistant",
-                    }) },
-                    React.createElement(Message, { className: classes.message },
-                        React.createElement(VisuallyHidden_1.VisuallyHidden, { as: m.role === "user" ? "h5" : "h6" }, m.role === "user" ? "You said: " : "Assistant said: "),
-                        React.createElement(react_markdown_1.default, { skipHtml: true }, m.content))))),
+                messages.map((m, i) => {
+                    // Our Markdown+Mathjax has issues when rendering streaming display math
+                    // Force a re-render of the last (streaming) message when it's done loading.
+                    const key = i === messages.length - 1 && isLoading
+                        ? `isLoading-${m.id}`
+                        : m.id;
+                    return (React.createElement(MessageRow, { key: key, "data-chat-role": m.role, className: (0, classnames_1.default)(classes.messageRow, {
+                            [classes.messageRowUser]: m.role === "user",
+                            [classes.messageRowAssistant]: m.role === "assistant",
+                        }) },
+                        React.createElement(Message, { className: classes.message },
+                            React.createElement(VisuallyHidden_1.VisuallyHidden, { as: m.role === "user" ? "h5" : "h6" }, m.role === "user" ? "You said: " : "Assistant said: "),
+                            React.createElement(Markdown_1.default, { enableMathjax: useMathJax }, m.content))));
+                }),
                 showStarters ? (React.createElement(StarterContainer, null, conversationStarters === null || conversationStarters === void 0 ? void 0 : conversationStarters.map((m) => (React.createElement(Starter, { className: classes.conversationStarter, key: m.content, onClick: () => {
                         scrollToBottom();
                         append({ role: "user", content: m.content });
@@ -244,4 +250,10 @@ const AiChat = (_a) => {
                 React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect.")),
             React.createElement(SrAnnouncer_1.SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: (lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.role) === "assistant" ? lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.content : "" }))))));
 };
+exports.AiChatDisplay = AiChatDisplay;
+const AiChat = (_a) => {
+    var { requestOpts, initialMessages, chatId, parseContent } = _a, displayProps = __rest(_a, ["requestOpts", "initialMessages", "chatId", "parseContent"]);
+    return (React.createElement(AiChatContext_1.AiChatProvider, { requestOpts: requestOpts, chatId: chatId, initialMessages: initialMessages, parseContent: parseContent },
+        React.createElement(AiChatDisplay, Object.assign({}, displayProps))));
+};
 exports.AiChat = AiChat;

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

@@ -9,10 +9,6 @@ export declare const StreamingResponses: Story;
  * to text via `parseContent`.
  */
 export declare const JsonResponses: Story;
-/**
- * This story shows the component's builtin markdown styling.
- */
-export declare const MarkdownStyling: Story;
 /**
  * Where a scrollable container exists in the including component, it can be passed in
  * for the AiChat component to use in place of its own height constrained message container

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollContainer = exports.MarkdownStyling = exports.JsonResponses = exports.StreamingResponses = void 0;
+exports.ScrollContainer = exports.JsonResponses = exports.StreamingResponses = void 0;
 const React = require("react");
 const AiChat_1 = require("./AiChat");
 const styled_1 = require("@emotion/styled");
 const api_1 = require("./test-utils/api");
 const react_1 = require("react");
+const better_react_mathjax_1 = require("better-react-mathjax");
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const TEST_API_JSON = "http://localhost:4567/json";
 const INITIAL_MESSAGES = [
@@ -39,8 +40,9 @@ const meta = {
     },
     render: (args) => React.createElement(AiChat_1.AiChat, Object.assign({}, args)),
     decorators: (Story, context) => {
-        return (React.createElement(Container, null,
-            React.createElement(Story, { key: String(context.args.entryScreenEnabled) })));
+        return (React.createElement(better_react_mathjax_1.MathJaxContext, null,
+            React.createElement(Container, null,
+                React.createElement(Story, { key: String(context.args.entryScreenEnabled) }))));
     },
     args: {
         entryScreenTitle: "What do you want to learn from MIT?",
@@ -77,57 +79,6 @@ exports.JsonResponses = {
         },
     },
 };
-const DEMO_MARKDOWN = `This shows default markdown styling. Here's are some lists:
-- Item 1
-- Item 2 - an unordered list (bullets)
-    - Point A
-    - Point B
-- Item 3 - an ordered list (numbers)
-    1. Item 3.1
-    2. Item 3.2
-    3. Item 3.3
-
-Sometimes, unordered lists are nested within ordered lists:
-1. Item 1
-    - Item 1.1
-    - Item 1.2
-2. Item 2
-    - Item 2.1
-    - Item 2.2
-
-Sometimes, ordered lists are nested within unordered lists:
-- Item 1
-    1. Item 1.1
-    2. Item 1.2
-- Item 2
-    1. Item 2.1
-    2. Item 2.2
-
-Here is a longer paragraph and **bold text** and *italic text*. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-sed do eiusmod tempor [incididunt](https://mit.edu) ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-
-And some inline code, \`\`<inline></inline>\`\` and code block:
-\`\`\`
-def f(x):
-    print(x)
-\`\`\`
-`;
-/**
- * This story shows the component's builtin markdown styling.
- */
-exports.MarkdownStyling = {
-    args: {
-        requestOpts: { apiUrl: TEST_API_STREAMING },
-        entryScreenEnabled: false,
-        conversationStarters: [],
-        initialMessages: [
-            {
-                role: "assistant",
-                content: DEMO_MARKDOWN,
-            },
-        ],
-    },
-};
 const ScrollComponent = (args) => {
     const ref = (0, react_1.useRef)(null);
     const [scrollElement, setScrollElement] = (0, react_1.useState)(null);

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,106 @@
+"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 retryingFetch_1 = require("../../utils/retryingFetch");
+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 (0, retryingFetch_1.default)(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 (0, retryingFetch_1.default)(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/AiChatMarkdown.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AiChat } from "./AiChat";
+declare const meta: Meta<typeof AiChat>;
+export default meta;
+type Story = StoryObj<typeof AiChat>;
+export declare const Typical: Story;
+export declare const Textual: Story;
+export declare const Math: Story;
+export declare const SimpleOrderedList: Story;
+export declare const SimpleUnorderedList: Story;
+export declare const NestedOrderedList: Story;
+export declare const NestedUnorderedList: Story;
+export declare const NestedOrderedUnorderedList: Story;
+export declare const NestedUnorderedOrderedList: Story;
+export declare const UnexpectedList: Story;