@mitodl/smoot-design 6.2.2 → 6.4.0

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/Markdown.d.ts

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

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeMathjax from "rehype-mathjax/browser";
+import remarkMath from "remark-math";
+import { MathJax } from "better-react-mathjax";
+const Markdown = ({ children, enableMathjax }) => {
+    const remarkPlugins = enableMathjax ? [remarkMath] : undefined;
+    const rehypePlugins = enableMathjax ? [rehypeMathjax] : undefined;
+    const markdown = (React.createElement(ReactMarkdown, { skipHtml: true, remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins }, children));
+    return enableMathjax ? React.createElement(MathJax, null, markdown) : markdown;
+};
+export default Markdown;

package/dist/esm/components/AiChat/test-utils/api.js

@@ -14,6 +14,15 @@ const SAMPLE_RESPONSES = [
 1. **[Machine Learning, Modeling, and Simulation Principles](https://xpro.mit.edu/courses/course-v1:xPRO+MLx1/)**: Offered by MIT xPRO, this course is part of the program "Machine Learning, Modeling, and Simulation: Engineering Problem-Solving in the Age of AI." It focuses on the principles of machine learning and how they can be applied to solve engineering problems, which is highly relevant for business applications of AI.
 
 This course is not free, but it provides a certification upon completion, which can be valuable for professionals looking to apply AI in business contexts. It covers essential concepts that can help you understand how AI can be leveraged to improve business processes and decision-making.
+Here is some inline  math: $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$
+
+And some block math:
+\n
+
+$$
+x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}
+$$
+
 <!-- Comment! -->
 `,
     `
@@ -24,6 +33,15 @@ To understand global warming, I recommend the following resources from MIT:
 2. **[Global Warming Science](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+12.340x+1T2020/about)**: Another offering of the same course by MITx, available through the Open Learning Library. It provides the same in-depth exploration of the earth's climate system.
 
 These courses are free and provide a solid foundation in understanding the scientific aspects of global warming. They are suitable for anyone interested in the topic, regardless of prior knowledge.
+Here is some inline  math: $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$
+
+And some block math:
+\n
+
+$$
+x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}
+$$
+
 <!-- Comment! -->
 `,
     `
@@ -36,6 +54,16 @@ Here are some courses on linear algebra that you can explore:
 3. **[Quantum Information Science I, Part 1 (MITx)](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+8.370.1x+1T2018/about)**: While primarily focused on quantum information science, this course requires some knowledge of linear algebra and is suitable for those interested in quantum mechanics. It is free and available through MITx.
 
 These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
+
+Here is some inline  math: $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$
+
+And some block math:
+\n
+
+$$
+x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}
+$$
+
 <!-- Comment! -->
 `,
     `Here are some courses on quantum computing that offer certificates:
@@ -50,7 +78,18 @@ These courses provide a comprehensive introduction to linear algebra and its app
    - **Offered by**: MIT xPRO
    - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
 
-These courses are part of professional certificate programs, and you can choose to complete the entire program or take individual courses for certification.`,
+These courses are part of professional certificate programs, and you can choose to complete the entire program or take individual courses for certification.
+
+
+Here is some inline  math: $x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$
+
+And some block math:
+\n
+
+$$
+x = \\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}
+$$
+`,
 ];
 const rand = (min, max) => {
     // min and max included

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.
      *
@@ -78,5 +81,11 @@ type AiChatProps = {
      * the AiChat will scroll to the bottom as chat messages are added.
      */
     scrollElement?: HTMLElement | null;
+    /**
+     * If true, the chat will display math equations using MathJax.
+     * Defaults to false.
+     */
+    useMathJax?: boolean;
 } & 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";
 /**