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>

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

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);

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={{