Chat markdown

packages/messenger-widget/package.json

@@ -36,6 +36,7 @@
     "localforage": "^1.10.0",
     "nacl": "^0.1.3",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-markdown": "^9.0.1",
     "react-scripts": "5.0.0",
     "rimraf": "^5.0.5",
     "socket.io-client": "^4.7.5",

packages/messenger-widget/src/components/Message/Message.css

@@ -150,6 +150,11 @@
     color: var(--text-primary-color);
 }
 
+/* Disables margin bottom of paragraph tag by default 1rem coming from markdown library*/
+.markdown-msg p{
+    margin-bottom: 0rem;
+}
+
 /* =================== Mobile Responsive CSS =================== */
 @media only screen and (max-width: 800px) {
     .content-style {

packages/messenger-widget/src/components/Message/Message.tsx

@@ -13,6 +13,7 @@ import { ReplyMessagePreview } from './ReplyMessagePreview';
 import { MessageReactions } from './MessageReactions';
 import { Action } from './Action';
 import { MessageDetail } from './MessageDetail';
+import Markdown from 'react-markdown';
 
 export function Message(props: MessageProps) {
     const { messageView } = useContext(UiViewContext);
@@ -28,7 +29,12 @@ export function Message(props: MessageProps) {
             )}
         >
             <div className="d-flex">
-                <div className={getMessageStyleClasses(props, messageView)}>
+                <div
+                    className={
+                        getMessageStyleClasses(props, messageView) +
+                        'mb-0 markdown-msg'
+                    }
+                >
                     {/* Reply message preview */}
                     <ReplyMessagePreview {...props} />
 
@@ -46,16 +52,18 @@ export function Message(props: MessageProps) {
                         )}
 
                     {/* actual message */}
-                    {props.message
-                        ? props.message
-                        : props.envelop.message.attachments &&
-                          props.envelop.message.attachments.length > 0 &&
-                          props.envelop.message.metadata.type !==
-                              MessageActionType.DELETE
-                        ? ''
-                        : props.ownMessage
-                        ? 'You deleted this message.'
-                        : 'This message was deleted.'}
+                    {props.message ? (
+                        <Markdown>{props.message}</Markdown>
+                    ) : props.envelop.message.attachments &&
+                      props.envelop.message.attachments.length > 0 &&
+                      props.envelop.message.metadata.type !==
+                          MessageActionType.DELETE ? (
+                        ''
+                    ) : props.ownMessage ? (
+                        'You deleted this message.'
+                    ) : (
+                        'This message was deleted.'
+                    )}
                 </div>
                 {/* action 3 dots */}
                 <Action {...props} />

packages/messenger-widget/src/components/MessageInputBox/MessageInputBox.css

@@ -24,6 +24,8 @@
     padding-top: 0rem;
     padding-bottom: 0rem;
     background: none;
+    resize: none;
+    height: 1.5rem;
 }
 
 .reply-msg-active {

packages/messenger-widget/src/components/MessageInputField/MessageInputField.tsx

@@ -20,13 +20,13 @@ export function MessageInputField(props: MessageDataProps) {
         messageData: undefined,
     };
 
-    function setMessageContent(e: React.ChangeEvent<HTMLInputElement>) {
+    function setMessageContent(e: string) {
         // if message action is edit and message length is 0, update message action
-        if (!e.target.value.length) {
+        if (!e.length) {
             setMessageView(resetMessageView);
             props.setFiles([]);
         }
-        props.setMessageText(e.target.value);
+        props.setMessageText(e);
     }
 
     async function submit(event: React.FormEvent<HTMLFormElement>) {
@@ -77,18 +77,15 @@ export function MessageInputField(props: MessageDataProps) {
                 submit(event)
             }
         >
-            <input
+            <textarea
                 data-testid="msg-input"
                 id="msg-input"
                 className="text-input-field width-fill height-fill font-size-14"
                 value={props.message}
-                type="text"
                 autoComplete="off"
                 placeholder="Write a message..."
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setMessageContent(e)
-                }
-            ></input>
+                onChange={(e) => setMessageContent(e.target.value)}
+            ></textarea>
         </form>
     );
 }