@mitodl/smoot-design 3.0.1 → 3.2.0

package/dist/cjs/ai.d.ts

@@ -1,2 +1,3 @@
 export { AiChat } from "./components/AiChat/AiChat";
 export type { AiChatProps } from "./components/AiChat/AiChat";
+export type { AiChatMessage } from "./components/AiChat/types";

package/dist/cjs/bundles/aiChat.d.ts

@@ -0,0 +1,6 @@
+import type { AiChatProps } from "../ai";
+type CreateChatOptions = {
+    root: HTMLElement;
+} & AiChatProps;
+declare const aiChat: (opts: CreateChatOptions) => void;
+export { aiChat };

package/dist/cjs/bundles/aiChat.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiChat = void 0;
+const React = require("react");
+const client_1 = require("react-dom/client");
+const ai_1 = require("../ai");
+const index_1 = require("../index");
+const aiChat = (opts) => {
+    const root = opts.root;
+    (0, client_1.createRoot)(root).render(React.createElement(index_1.ThemeProvider, null,
+        React.createElement(ai_1.AiChat, Object.assign({}, opts))));
+};
+exports.aiChat = aiChat;

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

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AiChat = void 0;
 const React = require("react");
 const styled_1 = require("@emotion/styled");
-const Skeleton_1 = require("@mui/material/Skeleton");
 const Input_1 = require("../Input/Input");
 const ActionButton_1 = require("../Button/ActionButton");
 const react_1 = require("@remixicon/react");
@@ -23,19 +22,17 @@ const react_markdown_1 = require("react-markdown");
 const ScrollSnap_1 = require("../ScrollSnap/ScrollSnap");
 const classnames_1 = require("classnames");
 const SrAnnouncer_1 = require("../SrAnnouncer/SrAnnouncer");
-const mit_mascot_tim_png_1 = require("../../../static/images/mit_mascot_tim.png");
 const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
-const ImageAdapter_1 = require("../ImageAdapter/ImageAdapter");
 const Typography_1 = require("@mui/material/Typography");
 const classes = {
     root: "MitAiChat--root",
+    title: "MitAiChat--title",
     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_1.default.div({
@@ -44,19 +41,30 @@ const ChatContainer = styled_1.default.div({
     display: "flex",
     flexDirection: "column",
 });
-const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)(({ theme }) => ({
+const AskTimTitle = styled_1.default.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.custom.colors.darkGray2,
+    img: {
+        width: "24px",
+        height: "24px",
+    },
+    svg: {
+        fill: theme.custom.colors.red,
+        width: "24px",
+        height: "24px",
+    },
+}));
+const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)({
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    padding: "24px",
-    paddingBottom: "12px",
+    paddingTop: "14px",
+    paddingBottom: "24px",
     overflow: "auto",
     gap: "24px",
-    backgroundColor: theme.custom.colors.lightGray1,
-    borderColor: theme.custom.colors.silverGrayLight,
-    borderStyle: "solid",
-    borderWidth: "0 1px",
-}));
+});
 const MessageRow = styled_1.default.div({
     display: "flex",
     width: "100%",
@@ -69,45 +77,25 @@ const MessageRow = styled_1.default.div({
     },
     position: "relative",
 });
-const Avatar = styled_1.default.div(({ theme }) => ({
-    flexShrink: 0,
-    borderRadius: "50%",
-    backgroundColor: theme.custom.colors.white,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    img: {
-        width: "66%",
-        // This is the default, but NextJS adds a height attribute to images
-        // The attr is useful for aspect ratio, but we want the actual CSS size to
-        // be auto.
-        height: "auto",
-    },
-    width: "32px",
-    height: "32px",
-    position: "absolute",
-    top: "-16px",
-    [`.${classes.messageRowAssistant} &`]: {
-        left: "-10px",
-    },
-    [`.${classes.messageRowUser} &`]: {
-        right: "16px",
-    },
-}));
-const Message = styled_1.default.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": {
+const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign({ backgroundColor: theme.custom.colors.white, padding: "12px 16px" }, theme.typography.body2), { "p:first-of-type": {
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
     }, a: {
-        color: theme.custom.colors.mitRed,
-        textDecoration: "none",
-    }, "a:hover": {
         color: theme.custom.colors.red,
-        textDecoration: "underline",
+        fontWeight: "normal",
     }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
-        borderRadius: "0 12px 12px 12px",
+        border: `1px solid ${theme.custom.colors.lightGray2}`,
+        color: theme.custom.colors.darkGray2,
+        borderRadius: "0px 8px 8px 8px",
+        svg: {
+            fill: theme.custom.colors.silverGrayDark,
+            display: "block",
+        },
     }, [`.${classes.messageRowUser} &`]: {
-        borderRadius: "12px 0 12px 12px",
+        borderRadius: "8px 0px 8px 8px",
+        color: theme.custom.colors.white,
+        backgroundColor: theme.custom.colors.silverGrayDark,
     } })));
 const StarterContainer = styled_1.default.div({
     alignSelf: "flex-end",
@@ -116,74 +104,63 @@ const StarterContainer = styled_1.default.div({
     flexDirection: "column",
     gap: "12px",
 });
-const Starter = styled_1.default.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,
-    }, borderRadius: "100vh" })));
-const InputStyled = (0, styled_1.default)(Input_1.Input)({
-    borderRadius: "0 0 8px 8px",
-});
-const ActionButtonStyled = (0, styled_1.default)(ActionButton_1.ActionButton)(({ theme }) => ({
-    backgroundColor: theme.custom.colors.red,
-    flexShrink: 0,
-    marginRight: "24px",
-    marginLeft: "12px",
-    "&:hover:not(:disabled)": {
-        backgroundColor: theme.custom.colors.mitRed,
-    },
-}));
-const DotsContainer = styled_1.default.span(({ theme }) => ({
-    display: "inline-flex",
-    gap: "4px",
-    ".MuiSkeleton-root": {
-        backgroundColor: theme.custom.colors.silverGray,
-    },
-}));
-const Dots = () => {
-    return (React.createElement(DotsContainer, null,
-        React.createElement(Skeleton_1.default, { variant: "circular", width: "8px", height: "8px" }),
-        React.createElement(Skeleton_1.default, { variant: "circular", width: "8px", height: "8px" }),
-        React.createElement(Skeleton_1.default, { variant: "circular", width: "8px", height: "8px" })));
-};
-const CloseButton = (0, styled_1.default)(ActionButton_1.ActionButton)(({ theme }) => ({
-    color: "inherit",
-    backgroundColor: theme.custom.colors.red,
-    "&:hover:not(:disabled)": {
-        backgroundColor: theme.custom.colors.mitRed,
-    },
-}));
+const Starter = styled_1.default.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.lightGray2}`, backgroundColor: theme.custom.colors.white, padding: "8px 16px" }, theme.typography.body3), { cursor: "pointer", boxSizing: "border-box", "&:hover": {
+        color: theme.custom.colors.white,
+        backgroundColor: theme.custom.colors.silverGrayDark,
+        borderColor: "transparent",
+    }, borderRadius: "8px" })));
 const RobotIcon = (0, styled_1.default)(react_1.RiRobot2Line)({
     width: "40px",
     height: "40px",
 });
-const ChatTitle = (0, styled_1.default)(({ title, onClose, className }) => {
+const StyledInput = (0, styled_1.default)(Input_1.Input)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.lightGray1,
+    borderRadius: "8px",
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+}));
+const StyledSendButton = (0, styled_1.default)(react_1.RiSendPlaneFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const StyledStopButton = (0, styled_1.default)(react_1.RiStopFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const ChatTitle = (0, styled_1.default)(({ title, askTimTitle, onClose, className }) => {
     return (React.createElement("div", { className: className },
-        React.createElement(RobotIcon, null),
-        React.createElement(Typography_1.default, { flex: 1, variant: "h5" }, title),
-        onClose ? (React.createElement(CloseButton, { variant: "text", onClick: onClose, "aria-label": "Close chat" },
+        askTimTitle ? (React.createElement(AskTimTitle, null,
+            React.createElement(react_1.RiSparkling2Line, null),
+            React.createElement(Typography_1.default, { variant: "body1" },
+                "Ask",
+                React.createElement("strong", null, "TIM"),
+                "\u00A0",
+                askTimTitle))) : null,
+        title ? (React.createElement(React.Fragment, null,
+            React.createElement(RobotIcon, null),
+            React.createElement(Typography_1.default, { flex: 1, variant: "h5" }, title))) : null,
+        onClose ? (React.createElement(ActionButton_1.ActionButton, { variant: "text", edge: "none", onClick: onClose, "aria-label": "Close chat" },
             React.createElement(react_1.RiCloseLine, null))) : null));
 })(({ theme }) => ({
-    backgroundColor: theme.custom.colors.red,
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    padding: "12px 24px",
+    padding: "12px 0",
     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
+    var _b, _c;
+    var { chatId, className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, title, askTimTitle, onClose, ImgComponent, placeholder = "", ref } = _a, others = __rest(_a, ["chatId", "className", "conversationStarters", "requestOpts", "initialMessages", "parseContent", "srLoadingMessages", "title", "askTimTitle", "onClose", "ImgComponent", "placeholder", "ref"]) // Could contain data attributes
     ;
     const messagesRef = React.useRef(null);
     const initialMessages = React.useMemo(() => {
         const prefix = Math.random().toString().slice(2);
         return initMsgs.map((m, i) => (Object.assign(Object.assign({}, m), { id: `initial-${prefix}-${i}` })));
     }, [initMsgs]);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, } = (0, utils_1.useAiChat)(requestOpts, {
+    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, } = (0, utils_1.useAiChat)(requestOpts, {
         initialMessages: initialMessages,
         id: chatId,
     });
+    React.useImperativeHandle(ref, () => ({ append }), [append]);
     const messages = React.useMemo(() => {
         const initial = initialMessages.map((m) => m.id);
         return unparsed.map((m) => {
@@ -196,6 +173,7 @@ const AiChatInternal = function AiChat(_a) {
     }, [parseContent, unparsed, initialMessages]);
     const showStarters = messages.length === initialMessages.length;
     const waiting = !showStarters && ((_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";
     const scrollToBottom = () => {
         var _a;
         (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
@@ -205,14 +183,12 @@ const AiChatInternal = function AiChat(_a) {
     };
     const lastMsg = messages[messages.length - 1];
     return (React.createElement(ChatContainer, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, others),
-        React.createElement(ChatTitle, { title: title, onClose: onClose }),
+        React.createElement(ChatTitle, { title: title, askTimTitle: askTimTitle, onClose: onClose, className: (0, classnames_1.default)(className, classes.title) }),
         React.createElement(MessagesContainer, { className: classes.messagesContainer, ref: messagesRef },
             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",
                 }) },
-                m.role === "assistant" ? (React.createElement(Avatar, { className: classes.avatar },
-                    React.createElement(ImageAdapter_1.ImageAdapter, { src: mit_mascot_tim_png_1.default, alt: "", Component: ImgComponent }))) : null,
                 React.createElement(Message, { className: classes.message },
                     React.createElement(VisuallyHidden_1.VisuallyHidden, null, m.role === "user" ? "You said: " : "Assistant said: "),
                     React.createElement(react_markdown_1.default, { skipHtml: true }, m.content))))),
@@ -221,16 +197,24 @@ const AiChatInternal = function AiChat(_a) {
                     append({ role: "user", content: m.content });
                 } }, m.content))))) : null,
             waiting ? (React.createElement(MessageRow, { className: (0, classnames_1.default)(classes.messageRow, classes.messageRowAssistant), key: "loading" },
-                React.createElement(Avatar, { className: classes.avatar },
-                    React.createElement(ImageAdapter_1.ImageAdapter, { src: mit_mascot_tim_png_1.default, alt: "", Component: ImgComponent })),
                 React.createElement(Message, null,
-                    React.createElement(Dots, null)))) : null),
+                    React.createElement(react_1.RiMoreFill, null)))) : null),
         React.createElement("form", { onSubmit: (e) => {
-                scrollToBottom();
-                handleSubmit(e);
+                e.preventDefault();
+                if (isLoading && stoppable) {
+                    stop();
+                }
+                else {
+                    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(react_1.RiSendPlaneFill, null)) })),
+            React.createElement(StyledInput, { fullWidth: true, size: "chat", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: isLoading ? (React.createElement(Input_1.AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
+                    React.createElement(StyledStopButton, null))) : (React.createElement(Input_1.AdornmentButton, { "aria-label": "Send", type: "submit", disabled: !input, onClick: (e) => {
+                        scrollToBottom();
+                        handleSubmit(e);
+                    } },
+                    React.createElement(StyledSendButton, null))) })),
         React.createElement(SrAnnouncer_1.SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
 const AiChat = (props) => (
@@ -239,7 +223,7 @@ const AiChat = (props) => (
  * 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
+ * To avoid this, let's change 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)));

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

@@ -13,6 +13,14 @@ const INITIAL_MESSAGES = [
         content: "Hi! What are you interested in learning about?",
         role: "assistant",
     },
+    {
+        content: "I need to brush up on my Calculus",
+        role: "user",
+    },
+    {
+        content: "Great! Do you want to start with the basics, like limits and derivatives, or jump into more advanced topics like integrals and series? Let me know how I can help!",
+        role: "assistant",
+    },
 ];
 const STARTERS = [
     { content: "I'm interested in quantum computing" },
@@ -21,7 +29,7 @@ const STARTERS = [
 ];
 const Container = styled_1.default.div({
     width: "100%",
-    height: "500px",
+    height: "800px",
 });
 const meta = {
     title: "smoot-design/ai/AiChat",
@@ -35,7 +43,7 @@ const meta = {
         initialMessages: INITIAL_MESSAGES,
         requestOpts: { apiUrl: TEST_API_STREAMING },
         conversationStarters: STARTERS,
-        title: "Chat with AI",
+        askTimTitle: "to recommend a course",
         onClose: (0, test_1.fn)(),
     },
     argTypes: {
@@ -71,6 +79,7 @@ exports.StreamingResponses = {};
  */
 exports.JsonResponses = {
     args: {
+        title: "Chat with AI",
         requestOpts: { apiUrl: TEST_API_JSON },
         parseContent: (content) => {
             return JSON.parse(content).message;

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

@@ -60,7 +60,7 @@ describe("AiChat", () => {
             { content: en_1.faker.lorem.sentence() },
             { content: en_1.faker.lorem.sentence() },
         ];
-        const view = (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
+        const view = (0, react_1.render)(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider_1.ThemeProvider });
         const rerender = (newProps) => {
             view.rerender(React.createElement(AiChat_1.AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
         };

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

@@ -1,5 +1,5 @@
 type Role = "assistant" | "user";
-type ChatMessage = {
+type AiChatMessage = {
     id: string;
     content: string;
     role: Role;
@@ -12,12 +12,12 @@ type RequestOpts = {
      *
      * JSON.stringify is applied to the return value.
      */
-    transformBody?: (messages: ChatMessage[]) => unknown;
+    transformBody?: (messages: AiChatMessage[]) => unknown;
     /**
      * Extra options to pass to fetch.
      */
     fetchOpts?: RequestInit;
-    onFinish?: (message: ChatMessage) => void;
+    onFinish?: (message: AiChatMessage) => void;
 };
 type AiChatProps = {
     /**
@@ -30,15 +30,19 @@ type AiChatProps = {
      */
     title?: string;
     /**
-     * Plaeholder message for chat input
+     * If provided, renders the "AskTIM" title motif followed by the text.
+     */
+    askTimTitle?: string;
+    /**
+     * Placeholder message for chat input
      */
     placeholder?: string;
     /**
-     * Fired when "Close" button within title bar is clicked.
+     * Sends an initial user prompt on first load
      */
     onClose?: () => void;
     className?: string;
-    initialMessages: Omit<ChatMessage, "id">[];
+    initialMessages: Omit<AiChatMessage, "id">[];
     conversationStarters?: {
         content: string;
     }[];
@@ -61,5 +65,11 @@ type AiChatProps = {
      * By default, the theme's ImageAdater is used.
      */
     ImgComponent?: React.ElementType;
+    /**
+     * Provide a ref to the chat component to access the `append` method.
+     */
+    ref?: React.Ref<{
+        append: (message: Omit<AiChatMessage, "id">) => void;
+    }>;
 };
-export type { RequestOpts, AiChatProps, ChatMessage };
+export type { RequestOpts, AiChatProps, AiChatMessage };

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

@@ -13,7 +13,7 @@ type ImageAdapterProps = React.ComponentProps<"img"> & {
     Component?: React.ElementType;
 } & ImageAdapterPropsOverrides;
 /**
- * Overrideable Image component.
+ * Overridable 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

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

@@ -15,7 +15,7 @@ exports.ImageAdapter = void 0;
 const React = require("react");
 const react_1 = require("@emotion/react");
 /**
- * Overrideable Image component.
+ * Overridable 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

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { InputBaseProps } from "@mui/material/InputBase";
 import type { Theme } from "@mui/material/styles";
-type Size = "small" | "medium" | "large" | "hero";
+type Size = "small" | "medium" | "large" | "chat" | "hero";
 type CustomInputProps = {
     /**
      * If true, the input will display one size smaller at mobile breakpoint.
@@ -34,6 +34,7 @@ declare const baseInputStyles: (theme: Theme) => {
     borderWidth: string;
     borderStyle: string;
     borderRadius: string;
+    overflow: string;
     "&.Mui-disabled": {
         backgroundColor: string;
     };

package/dist/cjs/components/Input/Input.js

@@ -25,11 +25,12 @@ const responsiveSize = {
     small: "small",
     medium: "small",
     large: "medium",
+    chat: "medium",
     hero: "large",
 };
 const sizeStyles = ({ size, theme, multiline }) => (0, react_1.css)([
     (size === "small" || size === "medium") && Object.assign({}, theme.typography.body2),
-    (size === "large" || size === "hero") && Object.assign({ ".remixicon": {
+    (size === "large" || size === "chat" || size === "hero") && Object.assign({ ".remixicon": {
             width: "24px",
             height: "24px",
         } }, theme.typography.body1),
@@ -49,6 +50,10 @@ const sizeStyles = ({ size, theme, multiline }) => (0, react_1.css)([
         !multiline && {
         height: "48px",
     },
+    size === "chat" &&
+        !multiline && {
+        height: "56px",
+    },
     size === "hero" &&
         !multiline && {
         height: "72px",
@@ -79,6 +84,20 @@ const sizeStyles = ({ size, theme, multiline }) => (0, react_1.css)([
             width: "48px",
         },
     },
+    size === "chat" && {
+        padding: "0 16px",
+        borderRadius: "8px",
+        "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
+            borderColor: theme.custom.colors.silverGrayLight,
+        },
+        "&.Mui-focused": {
+            borderColor: theme.custom.colors.silverGrayLight,
+            outline: "none",
+        },
+        ".Mit-AdornmentButton": {
+            padding: "0 16px",
+        },
+    },
     size === "hero" && {
         padding: "0 24px",
         ".Mit-AdornmentButton": {
@@ -96,6 +115,7 @@ const baseInputStyles = (theme) => ({
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "4px",
+    overflow: "hidden",
     "&.Mui-disabled": {
         backgroundColor: theme.custom.colors.lightGray1,
     },
@@ -171,16 +191,19 @@ const Input = (0, styled_1.default)(InputBase_1.default, {
     },
 ]);
 exports.Input = Input;
-const AdornmentButtonStyled = styled_1.default.button(({ theme }) => (Object.assign(Object.assign({}, theme.typography.button), { 
+const AdornmentButtonStyled = styled_1.default.button(({ theme, disabled }) => (Object.assign(Object.assign({}, theme.typography.button), { 
     // display
     display: "flex", flexShrink: 0, justifyContent: "center", alignItems: "center", 
     // background and border
     border: "none", background: "transparent", transition: `background ${theme.transitions.duration.short}ms`, 
     // cursor
-    cursor: "pointer", ":disabled": {
+    cursor: disabled ? "default" : "pointer", ":disabled": {
         cursor: "default",
+        svg: {
+            fill: theme.custom.colors.silverGray,
+        },
     }, ":hover": {
-        background: "rgba(0, 0, 0, 0.06)",
+        background: disabled ? "inherit" : "rgba(0, 0, 0, 0.06)",
     }, color: theme.custom.colors.silverGray, ".MuiInputBase-root:hover &": {
         color: "inherit",
     }, ".MuiInputBase-root.Mui-focused &": {

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

@@ -13,6 +13,7 @@ const SIZES = (0, story_utils_1.enumValues)({
     small: true,
     medium: true,
     large: true,
+    chat: true,
     hero: true,
 });
 const ADORNMENTS = {

package/dist/cjs/components/ScrollSnap/ScrollSnap.js

@@ -24,7 +24,7 @@ const Scroller = styled_1.default.div({
  * content is added, unless the user has scrolled up.
  */
 const ScrollSnap = React.forwardRef(function ScrollSnap({ children, threshold = 2, className }, ref) {
-    const el = React.useRef();
+    const el = React.useRef(null);
     // `content` a delayed version of children to allow measuring scroll position
     // using the old children.
     const [content, setContent] = React.useState(children);

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

@@ -13,6 +13,7 @@ const SIZES = (0, story_utils_1.enumValues)({
     small: true,
     medium: true,
     large: true,
+    chat: true,
     hero: true,
 });
 const ADORNMENTS = {

package/dist/cjs/utils/composeRefs.test.js

@@ -5,8 +5,8 @@ const composeRefs_1 = require("./composeRefs");
 const react_1 = require("@testing-library/react");
 describe("composeRefs", () => {
     test("Composing object + fn ref", () => {
-        const objRef1 = { current: null };
-        const objRef2 = { current: null };
+        const objRef1 = React.createRef();
+        const objRef2 = React.createRef();
         const fnRef1 = jest.fn();
         const fnRef2 = jest.fn();
         (0, react_1.render)(React.createElement("div", { "data-testid": "my-div", ref: (0, composeRefs_1.composeRefs)(objRef1, objRef2, fnRef1, fnRef2) }));

package/dist/cjs/utils/useInterval.js

@@ -8,7 +8,7 @@ const react_1 = require("react");
  * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
  */
 const useInterval = (callback, delay) => {
-    const savedCallback = (0, react_1.useRef)();
+    const savedCallback = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         savedCallback.current = callback;
     }, [callback]);

package/dist/esm/ai.d.ts

@@ -1,2 +1,3 @@
 export { AiChat } from "./components/AiChat/AiChat";
 export type { AiChatProps } from "./components/AiChat/AiChat";
+export type { AiChatMessage } from "./components/AiChat/types";

package/dist/esm/bundles/aiChat.d.ts

@@ -0,0 +1,6 @@
+import type { AiChatProps } from "../ai";
+type CreateChatOptions = {
+    root: HTMLElement;
+} & AiChatProps;
+declare const aiChat: (opts: CreateChatOptions) => void;
+export { aiChat };

package/dist/esm/bundles/aiChat.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { AiChat } from "../ai";
+import { ThemeProvider } from "../index";
+const aiChat = (opts) => {
+    const root = opts.root;
+    createRoot(root).render(React.createElement(ThemeProvider, null,
+        React.createElement(AiChat, Object.assign({}, opts))));
+};
+export { aiChat };