From 654c0c29d7a8ca094ba5d5599234b68cb362ccbd Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Mon, 4 Oct 2021 12:15:10 +0200
Subject: [PATCH] Add multiline input support (#34)

---
 .../src/components/Chat/ChatInput.tsx         | 23 +++++++++++++++----
 .../src/components/Chat/ChatMessages.tsx      |  1 +
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 2ebfbde5..6a608b7c 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -58,13 +58,19 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
         />
       </AddPictureBtn>
       <Input
-        type="text"
         theme={theme}
         placeholder={"Message"}
         value={content}
-        onChange={(e) => setContent(e.target.value)}
-        onKeyPress={(e) => {
-          if (e.key == "Enter") {
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+          const target = e.target;
+          target.style.height = "40px";
+          target.style.height = `${Math.min(target.scrollHeight, 160)}px`;
+          setContent(target.value);
+        }}
+        onKeyPress={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+          if (e.key == "Enter" && !e.getModifierState("Shift")) {
+            e.preventDefault();
+            (e.target as HTMLTextAreaElement).style.height = "40px";
             addMessage(content);
             setContent("");
           }
@@ -94,7 +100,7 @@ const InputWrapper = styled.div`
   position: relative;
 `;
 
-const Input = styled.input<ThemeProps>`
+const Input = styled.textarea<ThemeProps>`
   width: 100%;
   height: 40px;
   background: ${({ theme }) => theme.inputColor};
@@ -102,9 +108,16 @@ const Input = styled.input<ThemeProps>`
   border: 1px solid ${({ theme }) => theme.inputColor};
   color: ${({ theme }) => theme.textPrimaryColor};
   margin-left: 10px;
+  padding-top: 9px;
+  padding-bottom: 9px;
   padding-left: 12px;
   padding-right: 112px;
   outline: none;
+  resize: none;
+
+  font-family: Inter;
+  font-style: normal;
+  font-weight: normal;
   font-size: 15px;
   line-height: 22px;
 
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 24ded732..149dbfc5 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -141,5 +141,6 @@ const TimeWrapper = styled.div<ThemeProps>`
 const MessageText = styled.div<ThemeProps>`
   overflow-wrap: anywhere;
   width: 100%;
+  white-space: pre;
   color: ${({ theme }) => theme.textPrimaryColor};
 `;