diff --git a/web/chat/chat-input-text-area.react.js b/web/chat/chat-input-text-area.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/chat-input-text-area.react.js
@@ -0,0 +1,111 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import css from './chat-input-bar.css';
+
+type BaseProps = {
+  +send?: () => mixed,
+  +escape?: () => void,
+  +focus: boolean,
+  +currentText: string,
+};
+type Props = {
+  ...BaseProps,
+};
+
+class ChatInputTextArea extends React.PureComponent<Props> {
+  textarea: ?HTMLTextAreaElement;
+
+  componentDidMount() {
+    this.updateHeight();
+    this.focusAndUpdateText();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { currentText } = this.props;
+    const { currentText: prevText } = prevProps;
+    if (currentText !== prevText) {
+      this.updateHeight();
+    }
+  }
+
+  updateHeight() {
+    const textarea = this.textarea;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      const newHeight = Math.min(textarea.scrollHeight, 150);
+      textarea.style.height = `${newHeight}px`;
+    }
+  }
+
+  render() {
+    return (
+      <div className={css.inputBarTextInput}>
+        <textarea
+          rows="1"
+          placeholder="Type your message"
+          value={this.props.currentText}
+          onKeyDown={this.onKeyDown}
+          ref={this.textareaRef}
+          autoFocus
+        />
+      </div>
+    );
+  }
+
+  textareaRef = (textarea: ?HTMLTextAreaElement) => {
+    this.textarea = textarea;
+    if (textarea) {
+      textarea.focus();
+    }
+  };
+
+  focusAndUpdateText = () => {
+    if (!this.props.focus) {
+      return;
+    }
+
+    // We need to call focus() first on Safari, otherwise the cursor
+    // ends up at the start instead of the end for some reason
+    const { textarea } = this;
+    invariant(textarea, 'textarea should be set');
+    textarea.focus();
+
+    // We reset the textarea to an empty string at the start so that the cursor
+    // always ends up at the end, even if the text doesn't actually change
+    textarea.value = '';
+    const { currentText } = this.props;
+    if (currentText) {
+      textarea.value = currentText;
+    }
+
+    // The above strategies make sure the cursor is at the end,
+    // but we also need to make sure that we're scrolled to the bottom
+    textarea.scrollTop = textarea.scrollHeight;
+  };
+
+  onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (!this.props.escape) {
+        return;
+      }
+      this.props.escape();
+    } else if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      if (!this.props.send) {
+        return;
+      }
+      this.props.send();
+    }
+  };
+}
+
+const ConnectedChatInputTextArea: React.ComponentType<BaseProps> =
+  React.memo<BaseProps>(function ConnectedChatInputBar(props) {
+    return <ChatInputTextArea {...props} />;
+  });
+
+export default ConnectedChatInputTextArea;
diff --git a/web/chat/edit-message-input.css b/web/chat/edit-message-input.css
new file mode 100644
--- /dev/null
+++ b/web/chat/edit-message-input.css
@@ -0,0 +1,98 @@
+div.inputBar {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border-color);
+}
+div.inputBarWrapper {
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+div.editMessage {
+  padding: 10px;
+  background-color: var(--shades-black-90);
+  border-radius: 8px;
+}
+
+div.bottomRow {
+  padding-top: 10px;
+  display: flex;
+}
+
+div.buttons {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+div > textarea {
+  resize: none;
+}
+
+div.iconContainer {
+  color: var(--error);
+  align-items: center;
+}
+
+div.iconContainer > svg {
+  height: 16px;
+  align-items: center;
+  display: flex;
+}
+div.failedText {
+  font-size: 13px;
+  white-space: nowrap;
+  flex: 1;
+  align-items: center;
+  display: flex;
+}
+
+div.errorColor {
+  color: var(--error);
+}
+
+div.whiteColor {
+  color: var(--fg);
+  margin-left: 2px;
+}
+
+div.failedText > div {
+  display: inline-block;
+  margin-right: 2px;
+}
+
+div.buttons > button {
+  padding: 4px;
+  border-radius: 4px;
+  border: none;
+  background: none;
+  color: var(--fg);
+  white-space: nowrap;
+  flex: 1;
+  align-items: center;
+}
+
+.saveButton {
+  margin-left: 8px;
+}
+
+div.inputBarTextInput {
+  display: flex;
+  background: var(--text-input-bg);
+  border-radius: 4px;
+  padding: 8px;
+  align-items: center;
+  flex-grow: 1;
+}
+div.inputBarTextInput > textarea {
+  flex: 1;
+  display: flex;
+  border: none;
+  resize: none;
+  background: var(--text-input-bg);
+  color: var(--fg);
+}
+div.inputBarTextInput > textarea:focus {
+  outline: none;
+}