@mitodl/smoot-design 3.4.1 → 3.6.0

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AiChatMessage } from "../../components/AiChat/types";
 import type { AiChatProps } from "../../components/AiChat/AiChat";
 type ChatInitMessage = {
     type: "smoot-design::chat-open";
@@ -8,6 +9,7 @@ type ChatInitMessage = {
         conversationStarters?: AiChatProps["conversationStarters"];
         initialMessages: AiChatProps["initialMessages"];
         apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+        requestBody?: Record<string, unknown>;
     };
 };
 type AiChatDrawerProps = {
@@ -19,9 +21,13 @@ type AiChatDrawerProps = {
     messageOrigin: string;
     /**
      * Transform the body of the request before sending it to the server.
+     * Its result will be merged with the per-message requestBody opt, with
+     * transformBody taking precedence.
+     *
      * *This cannot be supplied via message events since the function is not serializable.*
+     *
      */
-    transformBody?: AiChatProps["requestOpts"]["transformBody"];
+    transformBody?: (messages: AiChatMessage[]) => Iterable<unknown>;
 };
 declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
 export { AiChatDrawer };

package/dist/cjs/bundles/RemoteAiChatDrawer/RemoteAiChatDrawer.js

@@ -4,7 +4,8 @@ exports.AiChatDrawer = void 0;
 const React = require("react");
 const AiChat_1 = require("../../components/AiChat/AiChat");
 const Drawer_1 = require("@mui/material/Drawer");
-const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
+const identity = (x) => x;
+const AiChatDrawer = ({ messageOrigin, transformBody = identity, className, }) => {
     const [open, setOpen] = React.useState(false);
     const [chatSettings, setChatSettings] = React.useState(null);
     React.useEffect(() => {
@@ -20,7 +21,6 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 setChatSettings(event.data.payload);
             }
         };
-        console.log("Attaching listener");
         window.addEventListener("message", cb);
         return () => {
             window.removeEventListener("message", cb);
@@ -37,7 +37,9 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 },
             },
         }, anchor: "right", open: open, onClose: () => setOpen(false) }, chatSettings ? (React.createElement(AiChat_1.AiChat, Object.assign({}, chatSettings, { requestOpts: {
-            transformBody,
+            transformBody: (messages) => {
+                return Object.assign(Object.assign({}, chatSettings.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages));
+            },
             apiUrl: chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.apiUrl,
         }, onClose: () => setOpen(false) }))) : null));
 };

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

@@ -35,6 +35,7 @@ const classes = {
     messageRowAssistant: "MitAiChat--messageRowAssistant",
     message: "MitAiChat--message",
     input: "MitAiChat--input",
+    bottomSection: "MitAiChat--bottomSection",
 };
 const ChatContainer = styled_1.default.div({
     width: "100%",
@@ -67,10 +68,9 @@ const MessagesContainer = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)({
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    paddingTop: "14px",
-    paddingBottom: "24px",
+    padding: "14px 0",
     overflow: "auto",
-    gap: "24px",
+    gap: "16px",
 });
 const MessageRow = styled_1.default.div({
     display: "flex",
@@ -88,16 +88,18 @@ const Message = styled_1.default.div(({ theme }) => (Object.assign(Object.assign
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
+    }, "ol, ul": {
+        paddingInlineStart: "32px",
+        li: {
+            margin: "16px 0",
+        },
+    }, ul: {
+        marginInlineStart: "-16px",
     }, a: {
         color: theme.custom.colors.red,
         fontWeight: "normal",
     }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
-        border: `1px solid ${theme.custom.colors.lightGray2}`,
-        borderRadius: "0px 8px 8px 8px",
-        svg: {
-            fill: theme.custom.colors.silverGrayDark,
-            display: "block",
-        },
+        padding: "12px 16px 12px 0",
     }, [`.${classes.messageRowUser} &`]: {
         borderRadius: "8px 0px 8px 8px",
         backgroundColor: theme.custom.colors.lightGray1,
@@ -118,20 +120,18 @@ const RobotIcon = (0, styled_1.default)(react_1.RiRobot2Line)({
     width: "40px",
     height: "40px",
 });
-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 BottomSection = styled_1.default.div({
+    paddingTop: "12px",
+});
 const Disclaimer = (0, styled_1.default)(Typography_1.default)(({ theme }) => ({
     color: theme.custom.colors.silverGrayDark,
-    marginTop: "16px",
+    marginTop: "14px",
     textAlign: "center",
 }));
 const ChatTitle = (0, styled_1.default)(({ title, askTimTitle, onClose, className }) => {
@@ -210,23 +210,24 @@ const AiChatInternal = function AiChat(_a) {
                 React.createElement(Message, null,
                     React.createElement(react_1.RiMoreFill, null)))) : null,
             error ? (React.createElement(Alert_1.Alert, { severity: "error", closable: true }, "An unexpected error has occurred.")) : null),
-        React.createElement("form", { onSubmit: (e) => {
-                e.preventDefault();
-                if (isLoading && stoppable) {
-                    stop();
-                }
-                else {
-                    scrollToBottom();
-                    handleSubmit(e);
-                }
-            } },
-            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) => {
+        React.createElement(BottomSection, { className: classes.bottomSection },
+            React.createElement("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    if (isLoading && stoppable) {
+                        stop();
+                    }
+                    else {
                         scrollToBottom();
                         handleSubmit(e);
-                    } },
-                    React.createElement(StyledSendButton, null))) })),
-        React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect."),
+                    }
+                } },
+                React.createElement(Input_1.Input, { 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", onClick: (e) => {
+                            scrollToBottom();
+                            handleSubmit(e);
+                        } },
+                        React.createElement(StyledSendButton, null))) })),
+            React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect.")),
         React.createElement(SrAnnouncer_1.SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
 const AiChat = (props) => (

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

@@ -9,3 +9,7 @@ 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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JsonResponses = exports.StreamingResponses = void 0;
+exports.MarkdownStyling = exports.JsonResponses = exports.StreamingResponses = void 0;
 const React = require("react");
 const AiChat_1 = require("./AiChat");
 const styled_1 = require("@emotion/styled");
@@ -77,3 +77,38 @@ exports.JsonResponses = {
         },
     },
 };
+const DEMO_MARKDOWN = `This shows default markdown styling. Here's a list:
+- Item 1 lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+- Item 2
+- Item 3
+    - Item 3.1
+    - Item 3.2
+- Item 4
+    1. Item 4.1
+    2. Item 4.2
+    3. Item 4.3
+
+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: {
+        title: "Markdown Styles",
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        initialMessages: [
+            {
+                role: "assistant",
+                content: DEMO_MARKDOWN,
+            },
+        ],
+    },
+};

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

@@ -41,6 +41,19 @@ Here are some courses on linear algebra that you can explore:
 These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
 <!-- Comment! -->
 `,
+    `Here are some courses on quantum computing that offer certificates:
+
+1. [Introduction to Quantum Computing](https://xpro.mit.edu/courses/course-v1:xPRO+QCFx1/)
+   - **Description**: This is the first course in the Quantum Computing Fundamentals professional certificate program. You can earn a Professional Certificate and CEUs by completing both courses in the program. Alternatively, you can take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+2. [Practical Realities of Quantum Computation and Quantum Communication](https://xpro.mit.edu/courses/course-v1:xPRO+QCRx1/)
+   - **Description**: This course is part of the Quantum Computing Realities professional certificate program. Completing both courses in the program will earn you a Professional Certificate and CEUs. You can also take this course individually for a certificate of completion and CEUs.
+   - **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.`,
 ];
 const rand = (min, max) => {
     // min and max included

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

@@ -25,7 +25,7 @@ const responsiveSize = {
     small: "small",
     medium: "small",
     large: "medium",
-    chat: "medium",
+    chat: "chat",
     hero: "large",
 };
 const sizeStyles = ({ size, theme, multiline }) => (0, react_1.css)([
@@ -87,12 +87,14 @@ const sizeStyles = ({ size, theme, multiline }) => (0, react_1.css)([
     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,
+        borderColor: theme.custom.colors.silverGrayLight,
+        "&:hover:not(.Mui-disabled), &.Mui-focused, :hover:not(.Mui-disabled):not(.Mui-focused)": {
+            boxShadow: "0px 8px 20px 0px rgba(120, 147, 172, 0.10)",
+            borderColor: theme.custom.colors.silverGray,
             outline: "none",
+            svg: {
+                fill: theme.custom.colors.lightRed,
+            },
         },
         ".Mit-AdornmentButton": {
             padding: "0 16px",

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AiChatMessage } from "../../components/AiChat/types";
 import type { AiChatProps } from "../../components/AiChat/AiChat";
 type ChatInitMessage = {
     type: "smoot-design::chat-open";
@@ -8,6 +9,7 @@ type ChatInitMessage = {
         conversationStarters?: AiChatProps["conversationStarters"];
         initialMessages: AiChatProps["initialMessages"];
         apiUrl: AiChatProps["requestOpts"]["apiUrl"];
+        requestBody?: Record<string, unknown>;
     };
 };
 type AiChatDrawerProps = {
@@ -19,9 +21,13 @@ type AiChatDrawerProps = {
     messageOrigin: string;
     /**
      * Transform the body of the request before sending it to the server.
+     * Its result will be merged with the per-message requestBody opt, with
+     * transformBody taking precedence.
+     *
      * *This cannot be supplied via message events since the function is not serializable.*
+     *
      */
-    transformBody?: AiChatProps["requestOpts"]["transformBody"];
+    transformBody?: (messages: AiChatMessage[]) => Iterable<unknown>;
 };
 declare const AiChatDrawer: React.FC<AiChatDrawerProps>;
 export { AiChatDrawer };

package/dist/esm/bundles/RemoteAiChatDrawer/RemoteAiChatDrawer.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { AiChat } from "../../components/AiChat/AiChat";
 import Drawer from "@mui/material/Drawer";
-const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
+const identity = (x) => x;
+const AiChatDrawer = ({ messageOrigin, transformBody = identity, className, }) => {
     const [open, setOpen] = React.useState(false);
     const [chatSettings, setChatSettings] = React.useState(null);
     React.useEffect(() => {
@@ -17,7 +18,6 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 setChatSettings(event.data.payload);
             }
         };
-        console.log("Attaching listener");
         window.addEventListener("message", cb);
         return () => {
             window.removeEventListener("message", cb);
@@ -34,7 +34,9 @@ const AiChatDrawer = ({ messageOrigin, transformBody, className, }) => {
                 },
             },
         }, anchor: "right", open: open, onClose: () => setOpen(false) }, chatSettings ? (React.createElement(AiChat, Object.assign({}, chatSettings, { requestOpts: {
-            transformBody,
+            transformBody: (messages) => {
+                return Object.assign(Object.assign({}, chatSettings.requestBody), transformBody === null || transformBody === void 0 ? void 0 : transformBody(messages));
+            },
             apiUrl: chatSettings === null || chatSettings === void 0 ? void 0 : chatSettings.apiUrl,
         }, onClose: () => setOpen(false) }))) : null));
 };

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

@@ -32,6 +32,7 @@ const classes = {
     messageRowAssistant: "MitAiChat--messageRowAssistant",
     message: "MitAiChat--message",
     input: "MitAiChat--input",
+    bottomSection: "MitAiChat--bottomSection",
 };
 const ChatContainer = styled.div({
     width: "100%",
@@ -64,10 +65,9 @@ const MessagesContainer = styled(ScrollSnap)({
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    paddingTop: "14px",
-    paddingBottom: "24px",
+    padding: "14px 0",
     overflow: "auto",
-    gap: "24px",
+    gap: "16px",
 });
 const MessageRow = styled.div({
     display: "flex",
@@ -85,16 +85,18 @@ const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ color:
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
+    }, "ol, ul": {
+        paddingInlineStart: "32px",
+        li: {
+            margin: "16px 0",
+        },
+    }, ul: {
+        marginInlineStart: "-16px",
     }, a: {
         color: theme.custom.colors.red,
         fontWeight: "normal",
     }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
-        border: `1px solid ${theme.custom.colors.lightGray2}`,
-        borderRadius: "0px 8px 8px 8px",
-        svg: {
-            fill: theme.custom.colors.silverGrayDark,
-            display: "block",
-        },
+        padding: "12px 16px 12px 0",
     }, [`.${classes.messageRowUser} &`]: {
         borderRadius: "8px 0px 8px 8px",
         backgroundColor: theme.custom.colors.lightGray1,
@@ -115,20 +117,18 @@ const RobotIcon = styled(RiRobot2Line)({
     width: "40px",
     height: "40px",
 });
-const StyledInput = styled(Input)(({ theme }) => ({
-    backgroundColor: theme.custom.colors.lightGray1,
-    borderRadius: "8px",
-    border: `1px solid ${theme.custom.colors.lightGray2}`,
-}));
 const StyledSendButton = styled(RiSendPlaneFill)(({ theme }) => ({
     fill: theme.custom.colors.red,
 }));
 const StyledStopButton = styled(RiStopFill)(({ theme }) => ({
     fill: theme.custom.colors.red,
 }));
+const BottomSection = styled.div({
+    paddingTop: "12px",
+});
 const Disclaimer = styled(Typography)(({ theme }) => ({
     color: theme.custom.colors.silverGrayDark,
-    marginTop: "16px",
+    marginTop: "14px",
     textAlign: "center",
 }));
 const ChatTitle = styled(({ title, askTimTitle, onClose, className }) => {
@@ -207,23 +207,24 @@ const AiChatInternal = function AiChat(_a) {
                 React.createElement(Message, null,
                     React.createElement(RiMoreFill, null)))) : null,
             error ? (React.createElement(Alert, { severity: "error", closable: true }, "An unexpected error has occurred.")) : null),
-        React.createElement("form", { onSubmit: (e) => {
-                e.preventDefault();
-                if (isLoading && stoppable) {
-                    stop();
-                }
-                else {
-                    scrollToBottom();
-                    handleSubmit(e);
-                }
-            } },
-            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(AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
-                    React.createElement(StyledStopButton, null))) : (React.createElement(AdornmentButton, { "aria-label": "Send", type: "submit", disabled: !input, onClick: (e) => {
+        React.createElement(BottomSection, { className: classes.bottomSection },
+            React.createElement("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    if (isLoading && stoppable) {
+                        stop();
+                    }
+                    else {
                         scrollToBottom();
                         handleSubmit(e);
-                    } },
-                    React.createElement(StyledSendButton, null))) })),
-        React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect."),
+                    }
+                } },
+                React.createElement(Input, { fullWidth: true, size: "chat", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: isLoading ? (React.createElement(AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
+                        React.createElement(StyledStopButton, null))) : (React.createElement(AdornmentButton, { "aria-label": "Send", type: "submit", onClick: (e) => {
+                            scrollToBottom();
+                            handleSubmit(e);
+                        } },
+                        React.createElement(StyledSendButton, null))) })),
+            React.createElement(Disclaimer, { variant: "body3" }, "AI-generated content may be incorrect.")),
         React.createElement(SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
 const AiChat = (props) => (

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

@@ -9,3 +9,7 @@ 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;

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

@@ -74,3 +74,38 @@ export const JsonResponses = {
         },
     },
 };
+const DEMO_MARKDOWN = `This shows default markdown styling. Here's a list:
+- Item 1 lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+- Item 2
+- Item 3
+    - Item 3.1
+    - Item 3.2
+- Item 4
+    1. Item 4.1
+    2. Item 4.2
+    3. Item 4.3
+
+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.
+ */
+export const MarkdownStyling = {
+    args: {
+        title: "Markdown Styles",
+        requestOpts: { apiUrl: TEST_API_STREAMING },
+        initialMessages: [
+            {
+                role: "assistant",
+                content: DEMO_MARKDOWN,
+            },
+        ],
+    },
+};

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

@@ -38,6 +38,19 @@ Here are some courses on linear algebra that you can explore:
 These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
 <!-- Comment! -->
 `,
+    `Here are some courses on quantum computing that offer certificates:
+
+1. [Introduction to Quantum Computing](https://xpro.mit.edu/courses/course-v1:xPRO+QCFx1/)
+   - **Description**: This is the first course in the Quantum Computing Fundamentals professional certificate program. You can earn a Professional Certificate and CEUs by completing both courses in the program. Alternatively, you can take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+2. [Practical Realities of Quantum Computation and Quantum Communication](https://xpro.mit.edu/courses/course-v1:xPRO+QCRx1/)
+   - **Description**: This course is part of the Quantum Computing Realities professional certificate program. Completing both courses in the program will earn you a Professional Certificate and CEUs. You can also take this course individually for a certificate of completion and CEUs.
+   - **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.`,
 ];
 const rand = (min, max) => {
     // min and max included

package/dist/esm/components/Input/Input.js

@@ -22,7 +22,7 @@ const responsiveSize = {
     small: "small",
     medium: "small",
     large: "medium",
-    chat: "medium",
+    chat: "chat",
     hero: "large",
 };
 const sizeStyles = ({ size, theme, multiline }) => css([
@@ -84,12 +84,14 @@ const sizeStyles = ({ size, theme, multiline }) => css([
     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,
+        borderColor: theme.custom.colors.silverGrayLight,
+        "&:hover:not(.Mui-disabled), &.Mui-focused, :hover:not(.Mui-disabled):not(.Mui-focused)": {
+            boxShadow: "0px 8px 20px 0px rgba(120, 147, 172, 0.10)",
+            borderColor: theme.custom.colors.silverGray,
             outline: "none",
+            svg: {
+                fill: theme.custom.colors.lightRed,
+            },
         },
         ".Mit-AdornmentButton": {
             padding: "0 16px",