feat: Add multiline input to AI chat (#191)

jonkafton · web-flow · commit a8456f7e0ad5 · 2025-10-09T23:13:15.000+02:00
diff --git a/README.md b/README.md
@@ -1,7 +1,15 @@
-# smoot-design
+# @mitodl/smoot-design
 
 Design system components for MITODL Projects
 
+![NPM Version](https://img.shields.io/npm/v/@mitodl/smoot-design)
+
+![NPM Last Update](https://img.shields.io/npm/last-update/@mitodl/smoot-design?label=npm+last+update)
+
+![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/@mitodl/smoot-design)
+
+![GitHub branch status](https://img.shields.io/github/checks-status/mitodl/smoot-design/main)
+
 ## Development and Release
 
 All PR titles and commits to `main` should use the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) format. During release, the types of commits included since the last release inform what sort of version bump should be made. For example, bugfixes yield a new patch version, whereas breaking changes trigger a major version bump.
diff --git a/src/bundles/AiDrawer/AiDrawerManager.test.tsx b/src/bundles/AiDrawer/AiDrawerManager.test.tsx
@@ -423,7 +423,7 @@ describe("AiDrawerManager", () => {
       },
     )
 
-    await user.keyboard("{Escape}")
+    await user.click(screen.getByRole("button", { name: "Close" }))
     assertTrackingEvent({
       event_type: `${eventPrefix}.${TrackingEventType.Close}`,
       event_data: { blockUsageKey },
diff --git a/src/components/AiChat/AiChat.tsx b/src/components/AiChat/AiChat.tsx
@@ -610,13 +610,24 @@ const AiChatDisplay: FC<AiChatDisplayProps> = ({
                 <Input
                   ref={promptInputRef}
                   fullWidth
+                  multiline
+                  maxRows={20}
                   size="chat"
                   className={classes.input}
                   placeholder={placeholder}
                   name="message"
                   sx={{ flex: 1 }}
                   value={input}
                   onChange={handleInputChange}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" && !event.shiftKey) {
+                      event.preventDefault()
+                      if (input.trim() && !isLoading) {
+                        const form = event.currentTarget.closest("form")
+                        form?.requestSubmit()
+                      }
+                    }
+                  }}
                   inputProps={{
                     "aria-label": "Ask a question",
                   }}
diff --git a/src/components/AiChat/EntryScreen.tsx b/src/components/AiChat/EntryScreen.tsx
@@ -139,6 +139,8 @@ const EntryScreen = ({
       <StyledInput
         fullWidth
         size="chat"
+        multiline
+        maxRows={20}
         name="prompt"
         onChange={onPromptChange}
         inputProps={{
@@ -150,6 +152,13 @@ const EntryScreen = ({
           </AdornmentButton>
         }
         responsive
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault()
+            const form = event.currentTarget.closest("form")
+            form?.requestSubmit()
+          }
+        }}
       />
       <Starters>
         {conversationStarters?.map(({ content }, index) => (
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
@@ -10,6 +10,17 @@ import { fn } from "storybook/test"
 import { enumValues } from "../../story-utils"
 import Typography from "@mui/material/Typography"
 
+const StatefulInput = (props: InputProps) => {
+  const [value, setValue] = React.useState(props.value || "")
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+    props.onChange?.(event)
+  }
+
+  return <Input {...props} value={value} onChange={handleChange} />
+}
+
 const SIZES = enumValues<NonNullable<InputProps["size"]>>({
   small: true,
   medium: true,
@@ -76,10 +87,10 @@ export const Sizes: Story = {
   render: (args) => {
     return (
       <Stack direction="row" gap={1}>
-        <Input size="small" {...args} />
-        <Input size="medium" {...args} />
-        <Input size="large" {...args} />
-        <Input size="hero" {...args} />
+        <StatefulInput size="small" {...args} />
+        <StatefulInput size="medium" {...args} />
+        <StatefulInput size="large" {...args} />
+        <StatefulInput size="hero" {...args} />
       </Stack>
     )
   },
@@ -112,7 +123,7 @@ export const Adornments: Story = {
           SIZES.map((size) => {
             return (
               <Grid size={{ xs: 3 }} key={`${i}-${size}`}>
-                <Input {...args} size={size} {...props} />
+                <StatefulInput {...args} size={size} {...props} />
               </Grid>
             )
           }),
@@ -126,6 +137,50 @@ export const Adornments: Story = {
   },
 }
 
+export const Multiline: Story = {
+  render: (args) => {
+    return (
+      <Stack direction="column" gap={1}>
+        <StatefulInput
+          size="small"
+          {...args}
+          multiline
+          endAdornment={ADORNMENTS.SearchIcon}
+        />
+        <StatefulInput
+          size="medium"
+          {...args}
+          multiline
+          endAdornment={ADORNMENTS.SearchIcon}
+        />
+        <StatefulInput
+          size="large"
+          {...args}
+          multiline
+          endAdornment={ADORNMENTS.SearchIcon}
+        />
+        <StatefulInput
+          size="hero"
+          {...args}
+          multiline
+          endAdornment={ADORNMENTS.SearchIcon}
+        />
+        <StatefulInput
+          size="chat"
+          {...args}
+          value={`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`}
+          multiline
+          endAdornment={ADORNMENTS.SearchIcon}
+        />
+      </Stack>
+    )
+  },
+}
+
 const PageStyles = styled.div(`
   input {
     background-color: red;
@@ -159,19 +214,19 @@ export const StatesAndParentStyleResistance: Story = {
             <Typography>Placeholder</Typography>
           </Grid>
           <Grid size={{ xs: 8 }}>
-            <Input {...args} value="" />
+            <StatefulInput {...args} value="" />
           </Grid>
           <Grid size={{ xs: 4 }}>
             <Typography>Default</Typography>
           </Grid>
           <Grid size={{ xs: 8 }}>
-            <Input {...args} />
+            <StatefulInput {...args} />
           </Grid>
           <Grid size={{ xs: 4 }}>
             <Typography>Initially Focused</Typography>
           </Grid>
           <Grid size={{ xs: 8 }}>
-            <Input
+            <StatefulInput
               // This is a story just demonstrating the autofocus prop
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus
@@ -182,19 +237,19 @@ export const StatesAndParentStyleResistance: Story = {
             <Typography>Error</Typography>
           </Grid>
           <Grid size={{ xs: 8 }}>
-            <Input {...args} error />
+            <StatefulInput {...args} error />
           </Grid>
           <Grid size={{ xs: 4 }}>
             <Typography>Disabled</Typography>
           </Grid>
           <Grid size={{ xs: 8 }}>
-            <Input {...args} disabled />
+            <StatefulInput {...args} disabled />
           </Grid>
           <Grid size={{ xs: 4 }}>
             <Typography>Password</Typography>
           </Grid>
           <Grid size={{ xs: 8 }}>
-            <Input {...args} type="password" />
+            <StatefulInput {...args} type="password" />
           </Grid>
         </Grid>
       </PageStyles>
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -83,6 +83,13 @@ const sizeStyles = ({ size, theme, multiline }: SizeStyleProps) =>
       !multiline && {
         height: "56px",
       },
+    size === "chat" &&
+      multiline && {
+        "& textarea": {
+          paddingTop: "16px",
+          paddingBottom: "16px",
+        },
+      },
     size === "hero" &&
       !multiline && {
         height: "72px",
@@ -128,6 +135,51 @@ const sizeStyles = ({ size, theme, multiline }: SizeStyleProps) =>
         width: "72px",
       },
     },
+    multiline && {
+      ".Mit-AdornmentButton": {
+        alignSelf: "flex-end",
+      },
+    },
+    (multiline && !size) ||
+      (size === "small" && {
+        ".Mit-AdornmentButton": {
+          padding: "8px",
+          margin: "4px",
+          borderRadius: "4px",
+        },
+      }),
+    multiline &&
+      size === "medium" && {
+        ".Mit-AdornmentButton": {
+          padding: "10px",
+          margin: "4px",
+          borderRadius: "4px",
+        },
+      },
+    multiline &&
+      size === "large" && {
+        ".Mit-AdornmentButton": {
+          padding: "12px",
+          margin: "4px",
+          borderRadius: "4px",
+        },
+      },
+    multiline &&
+      size === "hero" && {
+        ".Mit-AdornmentButton": {
+          padding: "24px",
+          margin: "8px",
+          borderRadius: "4px",
+        },
+      },
+    multiline &&
+      size === "chat" && {
+        ".Mit-AdornmentButton": {
+          padding: "10px",
+          margin: "8px",
+          borderRadius: "4px",
+        },
+      },
   ])
 
 /**
@@ -245,6 +297,7 @@ const AdornmentButtonStyled = styled.button(({ theme, disabled }) => ({
   flexShrink: 0,
   justifyContent: "center",
   alignItems: "center",
+  alignSelf: "stretch",
   // background and border
   border: "none",
   background: "transparent",
@@ -270,7 +323,6 @@ const AdornmentButtonStyled = styled.button(({ theme, disabled }) => ({
   ".MuiInputBase-root.Mui-disabled &": {
     color: "inherit",
   },
-  height: "100%",
 }))
 
 const noFocus: React.MouseEventHandler = (e) => e.preventDefault()
diff --git a/src/components/TextField/TextField.stories.tsx b/src/components/TextField/TextField.stories.tsx

Original file line number	Diff line number	Diff line change
`@@ -423,7 +423,7 @@ describe("AiDrawerManager", () => {`
`423`	`423`	`},`
`424`	`424`	`)`
`425`	`425`
`426`		`- await user.keyboard("{Escape}")`
	`426`	`+ await user.click(screen.getByRole("button", { name: "Close" }))`
`427`	`427`	`assertTrackingEvent({`
`428`	`428`	event_type: `${eventPrefix}.${TrackingEventType.Close}`,
`429`	`429`	`event_data: { blockUsageKey },`