From c9b70dc10d14596e2f88fb6209157e0fafbc4486 Mon Sep 17 00:00:00 2001
From: +shyfire131 <116033104+shyfire131@users.noreply.github.com>
Date: Sun, 21 May 2023 14:25:12 -0600
Subject: [PATCH] Add support for multiline chat (#595)

* Support newlines for sender

- add multiline prop
- default behavior is not to submit the form when enter is hit, so listen for keypresses and trigger a synthetic button click when enter is hit
- however shift+enter is reserved for newlines, so we also check for those

* Support newlines for receiver

If decrypted message containes newlines, split and render on multiple lines

* Also add newline support for turtle mode senders

* Styling adjustment for send button

* Implement styling feedback

---------

Co-authored-by: +shyfire131 <shyfire131@shyfire131.net>
---
 .../TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx | 7 +++++++
 .../TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx | 7 +++++++
 .../TradeBox/EncryptedChat/MessageCard/index.tsx         | 9 ++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
index 672c6c3e..0747ada1 100644
--- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
+++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
@@ -312,6 +312,13 @@ const EncryptedSocketChat: React.FC<Props> = ({
                 label={t('Type a message')}
                 variant='standard'
                 size='small'
+                multiline
+                maxRows={3}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    onButtonClicked(e);
+                  }
+                }}
                 helperText={
                   connected
                     ? peerPubKey
diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx
index 1d00cdfd..35cb7cda 100644
--- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx
+++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx
@@ -299,6 +299,13 @@ const EncryptedTurtleChat: React.FC<Props> = ({
                 label={t('Type a message')}
                 variant='standard'
                 size='small'
+                multiline
+                maxRows={3}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    onButtonClicked(e);
+                  }
+                }}
                 value={value}
                 onChange={(e) => {
                   setValue(e.target.value);
diff --git a/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx
index 6e0e12f5..318ce0e8 100644
--- a/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx
+++ b/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx
@@ -126,7 +126,14 @@ const MessageCard: React.FC<Props> = ({ message, isTaker, userConnected, baseUrl
               {message.encryptedMessage}{' '}
             </a>
           ) : (
-            message.plainTextMessage
+            <>
+              {message.plainTextMessage.split('\n').map((messageLine, idx) => (
+                <span key={idx}>
+                  {messageLine}
+                  <br />
+                </span>
+              ))}
+            </>
           )
         }
         subheaderTypographyProps={{