Merge pull request #1195 from dm3-org/1193-new-msg-layout

1193 new msg layout

packages/messenger-widget/README.md

@@ -475,14 +475,17 @@ Example :
          push: false,
       },
       profile: {
-         dm3: boolean | {
+         dm3: {
             cloud: false,
             optimism: true,
          },
-         self: boolean | {
+         self: {
             gnosis: true,
             ens: false,
          }
+      },
+      settings: {
+         messageView: true,
       }
    }
    disableDialogOptions: {

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

@@ -13,6 +13,7 @@ import { MessageInputBox } from '../MessageInputBox/MessageInputBox';
 import { scrollToBottomOfChat } from './scrollToBottomOfChat';
 import { ModalContext } from '../../context/ModalContext';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import { MessagePropsModel } from '../../interfaces/utils';
 
 export function Chat() {
     const { account } = useContext(AuthContext);
@@ -46,6 +47,50 @@ export function Chat() {
         }
     };
 
+    // This function adds a property called showProfile which is of type boolean
+    // It helps to indicate whether a profile preview has to be shown with message or not
+    // It also adds a property isFirstMsgofDay which indicates its a first message of particular day
+    const formatMessages = (
+        messageList: MessageModel[],
+    ): MessagePropsModel[] => {
+        // The message list is reversed and then property is added because the pagination library
+        // reverses the message list and then it is visible.
+        // So to keep profile preview updated list is reversed
+        const list = messageList.reverse().map((m, index) => {
+            // the sender or current message
+            const currentMsgSender = m.envelop.message.metadata?.from;
+            // the sender of message before the current message
+            const lastMsgSender = index
+                ? messageList[index - 1].envelop.message.metadata?.from
+                : '';
+            // the date on which current message was sent
+            const currentMsgDate = new Date(
+                Number(m.envelop.message.metadata?.timestamp),
+            ).getDate();
+            // the date on which last message was sent
+            const lastMsgDate = index
+                ? new Date(
+                      Number(
+                          messageList[index - 1].envelop.message.metadata
+                              ?.timestamp,
+                      ),
+                  ).getDate()
+                : 0;
+            return {
+                ...m,
+                // if its not a first message and last 2 messages sender is same then no need to show
+                // profile for this message otherwise show profile
+                showProfile: !(index && currentMsgSender === lastMsgSender),
+                // if the index is 0, then its first message of specific date, so set to true
+                // otherwise check 2 dates, if they are same then its not first msg else it is first msg of day
+                isFirstMsgOfDay: !index ? true : lastMsgDate !== currentMsgDate,
+            };
+        });
+
+        // after setting the property, the list is returned back in actual order
+        return list.reverse();
+    };
+
     useEffect(() => {
         if (!selectedContact) {
             return;
@@ -59,7 +104,9 @@ export function Chat() {
         if (!selectedContact) {
             return [];
         }
-        return getMessages(selectedContact.contactDetails.account.ensName!);
+        return formatMessages(
+            getMessages(selectedContact.contactDetails.account.ensName!),
+        );
     }, [getMessages, selectedContact]);
 
     // handles messages list
@@ -192,7 +239,10 @@ export function Chat() {
                         >
                             {messages.length > 0 &&
                                 messages.map(
-                                    (messageModel: MessageModel, index) => (
+                                    (
+                                        messageModel: MessagePropsModel,
+                                        index,
+                                    ) => (
                                         <div key={index} className="mt-2">
                                             <Message
                                                 message={
@@ -221,6 +271,12 @@ export function Chat() {
                                                 indicator={
                                                     messageModel.indicator
                                                 }
+                                                showProfile={
+                                                    messageModel.showProfile
+                                                }
+                                                isFirstMsgOfDay={
+                                                    messageModel.isFirstMsgOfDay
+                                                }
                                             />
                                         </div>
                                     ),

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

@@ -163,47 +163,6 @@ input::placeholder {
     border-radius: 6px;
 }
 
-/* Customized CSS for radio button */
-.radio {
-    input[type="radio"] {
-      opacity: 0;
-      + .radio-label {
-        &:before {
-          content: '';
-          background: #1F2029;
-          border-radius: 100%;
-          border: 1px solid var(--text-primary-color);
-          display: inline-block;
-          width: 1.4em;
-          height: 1.4em;
-          position: relative;
-          top: -0.2em;
-          margin-right: 1em; 
-          vertical-align: top;
-          cursor: pointer;
-          text-align: center;
-          transition: all 250ms ease;
-        }
-      }
-      &:checked {
-        + .radio-label {
-          &:before {
-            background-color: var(--configure-profile-modal-background-color);
-            box-shadow: inset 0 0 0 4px #1F2029;
-          }
-        }
-      }
-      &:focus {
-        + .radio-label {
-          &:before {
-            outline: none;
-            border-color: var(--configure-profile-modal-background-color);
-          }
-        }
-      }
-    }
-  }
-
   .ens-components-container{
     padding: 1.25rem;
   }
@@ -307,17 +266,6 @@ input::placeholder {
         margin-left: -11px;
     }
 
-    .radio {
-        input[type="radio"] {
-          opacity: 0;
-          + .radio-label {
-            &:before {
-              width: 2em !important;
-            }
-          }
-        }
-    }
-
     .dm3-prof-select-type{
         font-size: 12px;
     }

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

@@ -1,12 +1,15 @@
 .content-style {
     padding: 10px;
-    max-width: 38rem;
     margin-right: 0.4rem;
     font-size: 14px;
     word-break: break-word;
     hyphens: auto;
 }
 
+.old-content-style {
+    max-width: 38rem;
+}
+
 .action-container {
     height: fit-content;
     width: fit-content;
@@ -80,10 +83,14 @@
     background-color: var(--scrollbar-background-color);
 }
 
-.contact-reacted-msg {
+.old-contact-reacted-msg {
     border-bottom-left-radius: 0px !important;
 }
 
+.contact-reacted-msg {
+    border-bottom-right-radius: 0px !important;
+}
+
 .own-reacted-msg {
     border-bottom-right-radius: 0px !important;
 }
@@ -150,10 +157,45 @@
     color: var(--text-primary-color);
 }
 
+.chat-profile-pic{
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 3px;
+}
+
+.msg-group-head {
+    display: flex;
+    flex-direction: row;
+    color: #FFFFFF;
+    font-size: 13px;
+    margin-bottom: 0.7rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+.msg-group-head:before,
+.msg-group-head:after {
+    content: "";
+    flex: 1 1;
+    border-bottom: 1px solid #FFFFFF;
+    margin: auto;
+}
+
+.msg-group-head:before {
+    margin-right: 5px;
+}
+
+.msg-group-head:after {
+    margin-left: 5px;
+}
+
 /* =================== Mobile Responsive CSS =================== */
 @media only screen and (max-width: 800px) {
     .content-style {
         font-size: 12px;
+    }
+
+    .old-content-style{
         max-width: 19rem;
     }
 
@@ -164,4 +206,4 @@
     .msg div .content-style + .msg-action-container {
         visibility: visible;
     }
-}
+}