@mitodl/smoot-design 1.2.1 → 3.0.0

package/dist/cjs/components/ImageAdapter/ImageAdapter.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * ImageAdapterPropsOverrides can be used with module augmentation to provide
+ * extra props to ButtonLink.
+ *
+ * For example, in a NextJS App, you might set `next/image` as your default
+ * image implementation, and use ImageAdapterPropsOverrides to provide
+ * `next/image`-specific props.
+ */
+interface ImageAdapterPropsOverrides {
+}
+type ImageAdapterProps = React.ComponentProps<"img"> & {
+    Component?: React.ElementType;
+} & ImageAdapterPropsOverrides;
+/**
+ * Overrideable Image component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
+ * - else, renders as `img` tag
+ */
+declare const ImageAdapter: React.ForwardRefExoticComponent<Omit<ImageAdapterProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export { ImageAdapter };
+export type { ImageAdapterPropsOverrides, ImageAdapterProps };

package/dist/cjs/components/ImageAdapter/ImageAdapter.js

@@ -0,0 +1,30 @@
+"use strict";
+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.ImageAdapter = void 0;
+const React = require("react");
+const react_1 = require("@emotion/react");
+/**
+ * Overrideable Image component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
+ * - else, renders as `img` tag
+ */
+const ImageAdapter = React.forwardRef(function ImageAdapter(_a, ref) {
+    var _b;
+    var { Component } = _a, props = __rest(_a, ["Component"]);
+    const theme = (0, react_1.useTheme)();
+    const ImgComponent = (_b = Component !== null && Component !== void 0 ? Component : theme.custom.ImgAdapter) !== null && _b !== void 0 ? _b : "img";
+    return React.createElement(ImgComponent, Object.assign({ ref: ref }, props));
+});
+exports.ImageAdapter = ImageAdapter;

package/dist/cjs/components/LinkAdapter/LinkAdapter.d.ts

@@ -20,4 +20,4 @@ type LinkAdapterProps = React.ComponentProps<"a"> & {
  */
 declare const LinkAdapter: React.ForwardRefExoticComponent<Omit<LinkAdapterProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export { LinkAdapter };
-export type { LinkAdapterPropsOverrides };
+export type { LinkAdapterPropsOverrides, LinkAdapterProps };

package/dist/cjs/components/ThemeProvider/ThemeProvider.d.ts

@@ -6,9 +6,7 @@ import type { ThemeOptions, Theme } from "@mui/material/styles";
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-declare const createTheme: (options?: {
-    custom: Partial<ThemeOptions["custom"]>;
-}) => Theme;
+declare const createTheme: (options?: ThemeOptions) => Theme;
 type ThemeProviderProps = {
     children?: React.ReactNode;
     theme?: Theme;

package/dist/cjs/components/ThemeProvider/ThemeProvider.js

@@ -7,6 +7,7 @@ const typography = require("./typography");
 const buttons = require("./buttons");
 const chips = require("./chips");
 const colors_1 = require("./colors");
+const deepmerge_1 = require("@mui/utils/deepmerge");
 const custom = {
     colors: colors_1.colors,
     dimensions: {
@@ -48,13 +49,6 @@ const defaultThemeOptions = {
     components: {
         MuiButtonBase: buttons.buttonBaseComponent,
         MuiTypography: typography.component,
-        MuiTabPanel: {
-            styleOverrides: {
-                root: {
-                    padding: "0px",
-                },
-            },
-        },
         MuiMenu: {
             styleOverrides: { paper: { borderRadius: "4px" } },
         },
@@ -76,7 +70,9 @@ const defaultThemeOptions = {
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-const createTheme = (options) => (0, styles_1.createTheme)(Object.assign(Object.assign({}, defaultThemeOptions), { custom: Object.assign(Object.assign({}, defaultThemeOptions.custom), options === null || options === void 0 ? void 0 : options.custom) }));
+const createTheme = (options) => {
+    return (0, styles_1.createTheme)((0, deepmerge_1.default)(defaultThemeOptions, options));
+};
 exports.createTheme = createTheme;
 const defaultTheme = createTheme();
 /**

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

@@ -22,7 +22,6 @@ type Story = StoryObj<typeof ThemeProvider>;
  * </ThemeProvider>
  * ```
  *
- *
  * ### Custom Link Adapter
  * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
  * components render links. These links are native anchor tags by default. In
@@ -53,6 +52,12 @@ type Story = StoryObj<typeof ThemeProvider>;
  *   }
  * }
  * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
  */
 export declare const LinkAdapterOverride: Story;
 export default meta;

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

@@ -53,7 +53,6 @@ const meta = {
  * </ThemeProvider>
  * ```
  *
- *
  * ### Custom Link Adapter
  * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
  * components render links. These links are native anchor tags by default. In
@@ -84,6 +83,12 @@ const meta = {
  *   }
  * }
  * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
  */
 exports.LinkAdapterOverride = {
     args: {

package/dist/cjs/components/ThemeProvider/breakpoints.js

@@ -14,7 +14,6 @@ const BREAKPOINT_VALUES = {
 exports.BREAKPOINT_VALUES = BREAKPOINT_VALUES;
 const { breakpoints } = (0, styles_1.createTheme)({
     breakpoints: BREAKPOINT_VALUES,
-    // @ts-expect-error only using breakpoints
     custom: {},
 });
 exports.breakpoints = breakpoints;

package/dist/cjs/components/ThemeProvider/typography.js

@@ -168,7 +168,6 @@ const component = {
 exports.component = component;
 const { typography } = (0, styles_1.createTheme)({
     typography: globalSettings,
-    // @ts-expect-error: we only care about typography from this theme
     custom: {},
 });
 exports.typography = typography;

package/dist/cjs/index.d.ts

@@ -1,6 +1,5 @@
 export { default as styled } from "@emotion/styled";
 export { css, Global } from "@emotion/react";
-export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
 export { Button, ButtonLink } from "./components/Button/Button";
 export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button";

package/dist/cjs/index.js

@@ -1,14 +1,12 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisuallyHidden = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.NextJsAppRouterCacheProvider = exports.Global = exports.css = exports.styled = void 0;
+exports.VisuallyHidden = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.Global = exports.css = exports.styled = void 0;
 var styled_1 = require("@emotion/styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.default; } });
 var react_1 = require("@emotion/react");
 Object.defineProperty(exports, "css", { enumerable: true, get: function () { return react_1.css; } });
 Object.defineProperty(exports, "Global", { enumerable: true, get: function () { return react_1.Global; } });
-var v15_appRouter_1 = require("@mui/material-nextjs/v15-appRouter");
-Object.defineProperty(exports, "NextJsAppRouterCacheProvider", { enumerable: true, get: function () { return v15_appRouter_1.AppRouterCacheProvider; } });
 var ThemeProvider_1 = require("./components/ThemeProvider/ThemeProvider");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
 Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return ThemeProvider_1.createTheme; } });

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

@@ -1,40 +1,93 @@
+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 styled from "@emotion/styled";
 import Skeleton from "@mui/material/Skeleton";
 import { Input } from "../Input/Input";
 import { ActionButton } from "../Button/ActionButton";
-import { RiSendPlaneFill } from "@remixicon/react";
+import { RiCloseLine, RiRobot2Line, RiSendPlaneFill } from "@remixicon/react";
 import { useAiChat } from "./utils";
 import Markdown from "react-markdown";
 import { ScrollSnap } from "../ScrollSnap/ScrollSnap";
 import classNames from "classnames";
 import { SrAnnouncer } from "../SrAnnouncer/SrAnnouncer";
-const ChatContainer = styled.div(({ theme }) => ({
+import mascot from "../../../static/images/mit_mascot_tim.png";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
+import { ImageAdapter } from "../ImageAdapter/ImageAdapter";
+import Typography from "@mui/material/Typography";
+const classes = {
+    root: "MitAiChat--root",
+    conversationStarter: "MitAiChat--conversationStarter",
+    messagesContainer: "MitAiChat--messagesContainer",
+    messageRow: "MitAiChat--messageRow",
+    messageRowUser: "MitAiChat--messageRowUser",
+    messageRowAssistant: "MitAiChat--messageRowAssistant",
+    message: "MitAiChat--message",
+    avatar: "MitAiChat--avatar",
+    input: "MitAiChat--input",
+};
+const ChatContainer = styled.div({
     width: "100%",
     height: "100%",
-    border: `1px solid ${theme.custom.colors.silverGrayLight}`,
-    backgroundColor: theme.custom.colors.lightGray1,
     display: "flex",
     flexDirection: "column",
-}));
-const MessagesContainer = styled(ScrollSnap)({
+});
+const MessagesContainer = styled(ScrollSnap)(({ theme }) => ({
     display: "flex",
     flexDirection: "column",
     flex: 1,
     padding: "24px",
-    paddingBottom: "0px",
+    paddingBottom: "12px",
     overflow: "auto",
+    gap: "24px",
+    backgroundColor: theme.custom.colors.lightGray1,
+    borderColor: theme.custom.colors.silverGrayLight,
+    borderStyle: "solid",
+    borderWidth: "0 1px",
+}));
+const MessageRow = styled.div({
+    display: "flex",
+    width: "100%",
+    gap: "10px",
+    [`&.${classes.messageRowUser}`]: {
+        flexDirection: "row-reverse",
+    },
+    "> *": {
+        minWidth: 0,
+    },
+    position: "relative",
 });
-const MessageRow = styled.div(({ reverse }) => [
-    {
-        margin: "8px 0",
-        display: "flex",
-        width: "100%",
-        flexDirection: reverse ? "row-reverse" : "row",
+const Avatar = styled.div(({ theme }) => ({
+    flexShrink: 0,
+    borderRadius: "50%",
+    backgroundColor: theme.custom.colors.white,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    img: {
+        width: "66%",
+    },
+    width: "32px",
+    height: "32px",
+    position: "absolute",
+    top: "-16px",
+    [`.${classes.messageRowAssistant} &`]: {
+        left: "-10px",
+    },
+    [`.${classes.messageRowUser} &`]: {
+        right: "16px",
     },
-]);
-const Avatar = styled.div({});
-const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, borderRadius: "24px", padding: "4px 16px" }, theme.typography.body2), { "p:first-of-type": {
+}));
+const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, padding: "12px" }, theme.typography.body2), { "p:first-of-type": {
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
@@ -44,27 +97,32 @@ const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ border:
     }, "a:hover": {
         color: theme.custom.colors.red,
         textDecoration: "underline",
+    }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
+        borderRadius: "0 12px 12px 12px",
+    }, [`.${classes.messageRowUser} &`]: {
+        borderRadius: "12px 0 12px 12px",
     } })));
 const StarterContainer = styled.div({
     alignSelf: "flex-end",
+    alignItems: "end",
     display: "flex",
     flexDirection: "column",
-    gap: "4px",
+    gap: "12px",
 });
-const Starter = styled.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, borderRadius: "24px", padding: "4px 16px" }, theme.typography.body2), { cursor: "pointer", "&:hover": {
+const Starter = styled.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, padding: "8px 16px" }, theme.typography.subtitle3), { cursor: "pointer", "&:hover": {
         backgroundColor: theme.custom.colors.lightGray1,
-    } })));
-const Controls = styled.div(({ theme }) => ({
-    display: "flex",
-    justifyContent: "space-around",
-    padding: "12px 24px",
-    backgroundColor: theme.custom.colors.white,
-}));
-const Form = styled.form(() => ({
-    display: "flex",
-    width: "80%",
-    gap: "12px",
-    alignItems: "center",
+    }, borderRadius: "100vh" })));
+const InputStyled = styled(Input)({
+    borderRadius: "0 0 8px 8px",
+});
+const ActionButtonStyled = styled(ActionButton)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.red,
+    flexShrink: 0,
+    marginRight: "24px",
+    marginLeft: "12px",
+    "&:hover:not(:disabled)": {
+        backgroundColor: theme.custom.colors.mitRed,
+    },
 }));
 const DotsContainer = styled.span(({ theme }) => ({
     display: "inline-flex",
@@ -79,18 +137,37 @@ const Dots = () => {
         React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" }),
         React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" })));
 };
-const classes = {
-    root: "MitAiChat--root",
-    conversationStarter: "MitAiChat--conversationStarter",
-    messagesContainer: "MitAiChat--messagesContainer",
-    messageRow: "MitAiChat--messageRow",
-    message: "MitAiChat--message",
-    avatar: "MitAiChat--avatar",
-    input: "MitAiChat--input",
-};
-const AiChat = function AiChat({ className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, }) {
-    var _a;
-    const [showStarters, setShowStarters] = React.useState(true);
+const CloseButton = styled(ActionButton)(({ theme }) => ({
+    color: "inherit",
+    backgroundColor: theme.custom.colors.red,
+    "&:hover:not(:disabled)": {
+        backgroundColor: theme.custom.colors.mitRed,
+    },
+}));
+const RobotIcon = styled(RiRobot2Line)({
+    width: "40px",
+    height: "40px",
+});
+const ChatTitle = styled(({ title, onClose, className }) => {
+    return (React.createElement("div", { className: className },
+        React.createElement(RobotIcon, null),
+        React.createElement(Typography, { flex: 1, variant: "h5" }, title),
+        onClose ? (React.createElement(CloseButton, { variant: "text", onClick: onClose, "aria-label": "Close chat" },
+            React.createElement(RiCloseLine, null))) : null));
+})(({ theme }) => ({
+    backgroundColor: theme.custom.colors.red,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "12px 24px",
+    gap: "16px",
+    color: theme.custom.colors.white,
+    borderRadius: "8px 8px 0 0",
+}));
+const AiChatInternal = function AiChat(_a) {
+    var _b;
+    var { chatId, className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, title, onClose, ImgComponent, placeholder = "Type a message..." } = _a, others = __rest(_a, ["chatId", "className", "conversationStarters", "requestOpts", "initialMessages", "parseContent", "srLoadingMessages", "title", "onClose", "ImgComponent", "placeholder"]) // Could contain data attributes
+    ;
     const messagesRef = React.useRef(null);
     const initialMessages = React.useMemo(() => {
         const prefix = Math.random().toString().slice(2);
@@ -98,6 +175,7 @@ const AiChat = function AiChat({ className, conversationStarters, requestOpts, i
     }, [initMsgs]);
     const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, } = useAiChat(requestOpts, {
         initialMessages: initialMessages,
+        id: chatId,
     });
     const messages = React.useMemo(() => {
         const initial = initialMessages.map((m) => m.id);
@@ -109,7 +187,8 @@ const AiChat = function AiChat({ className, conversationStarters, requestOpts, i
             return m;
         });
     }, [parseContent, unparsed, initialMessages]);
-    const waiting = !showStarters && ((_a = messages[messages.length - 1]) === null || _a === void 0 ? void 0 : _a.role) === "user";
+    const showStarters = messages.length === initialMessages.length;
+    const waiting = !showStarters && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
     const scrollToBottom = () => {
         var _a;
         (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
@@ -118,30 +197,43 @@ const AiChat = function AiChat({ className, conversationStarters, requestOpts, i
         });
     };
     const lastMsg = messages[messages.length - 1];
-    return (React.createElement(ChatContainer, { className: classNames(className, classes.root) },
+    return (React.createElement(ChatContainer, Object.assign({ className: classNames(className, classes.root) }, others),
+        React.createElement(ChatTitle, { title: title, onClose: onClose }),
         React.createElement(MessagesContainer, { className: classes.messagesContainer, ref: messagesRef },
-            messages.map((m) => (React.createElement(MessageRow, { key: m.id, reverse: m.role === "user", "data-chat-role": m.role, className: classes.messageRow },
-                React.createElement(Avatar, null),
+            messages.map((m) => (React.createElement(MessageRow, { key: m.id, "data-chat-role": m.role, className: classNames(classes.messageRow, {
+                    [classes.messageRowUser]: m.role === "user",
+                    [classes.messageRowAssistant]: m.role === "assistant",
+                }) },
+                m.role === "assistant" ? (React.createElement(Avatar, { className: classes.avatar },
+                    React.createElement(ImageAdapter, { src: mascot, alt: "", Component: ImgComponent }))) : null,
                 React.createElement(Message, { className: classes.message },
-                    React.createElement(Markdown, null, m.content))))),
+                    React.createElement(VisuallyHidden, null, m.role === "user" ? "You said: " : "Assistant said: "),
+                    React.createElement(Markdown, { skipHtml: true }, 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: () => {
-                    setShowStarters(false);
                     scrollToBottom();
                     append({ role: "user", content: m.content });
                 } }, m.content))))) : null,
-            waiting ? (React.createElement(MessageRow, { key: "loading" },
-                React.createElement(Avatar, { className: classes.avatar }),
+            waiting ? (React.createElement(MessageRow, { className: classNames(classes.messageRow, classes.messageRowAssistant), key: "loading" },
+                React.createElement(Avatar, { className: classes.avatar },
+                    React.createElement(ImageAdapter, { src: mascot, alt: "", Component: ImgComponent })),
                 React.createElement(Message, null,
                     React.createElement(Dots, null)))) : null),
-        React.createElement(Controls, null,
-            React.createElement(Form, { onSubmit: (e) => {
-                    setShowStarters(false);
-                    scrollToBottom();
-                    handleSubmit(e);
-                } },
-                React.createElement(Input, { className: classes.input, placeholder: "Type a message...", name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange }),
-                React.createElement(ActionButton, { "aria-label": "Send", type: "submit", disabled: isLoading || !input },
-                    React.createElement(RiSendPlaneFill, null)))),
+        React.createElement("form", { onSubmit: (e) => {
+                scrollToBottom();
+                handleSubmit(e);
+            } },
+            React.createElement(InputStyled, { fullWidth: true, size: "hero", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: React.createElement(ActionButtonStyled, { size: "large", "aria-label": "Send", type: "submit", disabled: isLoading || !input },
+                    React.createElement(RiSendPlaneFill, null)) })),
         React.createElement(SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
+const AiChat = (props) => (
+/**
+ * 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 chnge the key, this will force React to make a new component
+ * not sharing any of the old state.
+ */
+React.createElement(AiChatInternal, Object.assign({ key: props.chatId }, props)));
 export { AiChat };

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { AiChat } from "./AiChat";
 import { mockJson, mockStreaming } from "./story-utils";
 import styled from "@emotion/styled";
+import { fn } from "@storybook/test";
 const TEST_API_STREAMING = "http://localhost:4567/streaming";
 const TEST_API_JSON = "http://localhost:4567/json";
 const INITIAL_MESSAGES = [
@@ -17,10 +18,10 @@ const STARTERS = [
 ];
 const Container = styled.div({
     width: "100%",
-    height: "350px",
+    height: "500px",
 });
 const meta = {
-    title: "smoot-design/AiChat",
+    title: "smoot-design/ai/AiChat",
     component: AiChat,
     render: (args) => React.createElement(AiChat, Object.assign({}, args)),
     decorators: (Story) => {
@@ -31,6 +32,8 @@ const meta = {
         initialMessages: INITIAL_MESSAGES,
         requestOpts: { apiUrl: TEST_API_STREAMING },
         conversationStarters: STARTERS,
+        title: "Chat with AI",
+        onClose: fn(),
     },
     argTypes: {
         conversationStarters: {

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

@@ -32,6 +32,10 @@ jest.mock("react-markdown", () => {
         default: ({ children }) => React.createElement("div", null, children),
     };
 });
+const msg = {
+    ai: (text) => `Assistant said: ${text}`,
+    you: (text) => `You said: ${text}`,
+};
 const getMessages = () => {
     return Array.from(document.querySelectorAll(".MitAiChat--message"));
 };
@@ -54,8 +58,11 @@ describe("AiChat", () => {
             { content: faker.lorem.sentence() },
             { content: faker.lorem.sentence() },
         ];
-        render(React.createElement(AiChat, Object.assign({ initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider });
-        return { initialMessages, conversationStarters };
+        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider });
+        const rerender = (newProps) => {
+            view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
+        };
+        return { initialMessages, conversationStarters, rerender };
     };
     test("Clicking conversation starters and sending chats", () => __awaiter(void 0, void 0, void 0, function* () {
         const { initialMessages, conversationStarters } = setup();
@@ -83,6 +90,21 @@ describe("AiChat", () => {
         expect(afterSending[3]).toHaveTextContent("User message");
         expect(afterSending[4]).toHaveTextContent("AI Response 1");
     }));
+    test("Messages persist if chat has same chatId", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rerender } = setup({ chatId: "test-123" });
+        const starterEls = getConversationStarters();
+        const chosen = faker.helpers.arrayElement([0, 1]);
+        yield user.click(starterEls[chosen]);
+        yield whenCount(getMessages, 3);
+        // New chat ... starters should be shown
+        rerender({ chatId: "test-345" });
+        expect(getConversationStarters().length).toBeGreaterThan(0);
+        yield whenCount(getMessages, 1);
+        // existing chat ... starters should not be shown, messages should be restored
+        rerender({ chatId: "test-123" });
+        expect(getConversationStarters().length).toBe(0);
+        yield whenCount(getMessages, 3);
+    }));
     test("transformBody is called before sending requests", () => __awaiter(void 0, void 0, void 0, function* () {
         const fakeBody = { message: faker.lorem.sentence() };
         const apiUrl = faker.internet.url();
@@ -118,11 +140,21 @@ describe("AiChat", () => {
         yield whenCount(getMessages, initialMessages.length + 4);
         const messagesTexts = getMessages().map((el) => el.textContent);
         expect(messagesTexts).toEqual([
-            initialMessages[0].content,
-            conversationStarters[0].content,
-            "Parsed: AI Response 0",
-            "User message",
-            "Parsed: AI Response 1",
+            msg.ai(initialMessages[0].content),
+            msg.you(conversationStarters[0].content),
+            msg.ai("Parsed: AI Response 0"),
+            msg.you("User message"),
+            msg.ai("Parsed: AI Response 1"),
         ]);
     }));
+    test("Passes extra attributes to root", () => {
+        const fakeBody = { message: faker.lorem.sentence() };
+        const apiUrl = faker.internet.url();
+        const transformBody = jest.fn(() => fakeBody);
+        setup({
+            requestOpts: { apiUrl, transformBody },
+            parseContent: jest.fn((content) => `Parsed: ${content}`),
+        });
+        expect(screen.getByTestId("ai-chat")).toBeInTheDocument();
+    });
 });

package/dist/esm/components/AiChat/story-utils.js

@@ -13,6 +13,7 @@ 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.
+<!-- Comment! -->
 `,
     `
 To understand global warming, I recommend the following resources from MIT:
@@ -22,6 +23,7 @@ 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.
+<!-- Comment! -->
 `,
     `
 Here are some courses on linear algebra that you can explore:
@@ -33,6 +35,7 @@ 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.
+<!-- Comment! -->
 `,
 ];
 const rand = (min, max) => {
@@ -58,7 +61,7 @@ const mockStreaming = function mockApi() {
         }, []);
         const num = chunks.length;
         let i = 0;
-        yield new Promise((resolve) => setTimeout(resolve, 1500));
+        yield new Promise((resolve) => setTimeout(resolve, 800));
         const body = new ReadableStream({
             start(controller) {
                 timerId = setInterval(() => {
@@ -69,7 +72,7 @@ const mockStreaming = function mockApi() {
                         controller.close();
                         clearInterval(timerId);
                     }
-                }, 250);
+                }, 100);
             },
             cancel() {
                 if (timerId) {
@@ -86,7 +89,7 @@ const mockStreaming = function mockApi() {
 };
 const mockJson = () => __awaiter(void 0, void 0, void 0, function* () {
     const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
-    yield new Promise((res) => setTimeout(res, 2000));
+    yield new Promise((res) => setTimeout(res, 1000));
     return Promise.resolve(new Response(JSON.stringify({ message }), {
         headers: {
             "Content-Type": "application/json",