added new msg layout with functionality

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,36 @@ 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
+    const addShowProfileProperty = (
+        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 != 0 &&
+                messageList[index - 1].envelop.message.metadata?.from;
+            // 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
+            return {
+                ...m,
+                showProfile:
+                    index != 0 && currentMsgSender === lastMsgSender
+                        ? false
+                        : true,
+            };
+        });
+
+        // after setting the property, the list is returned back in actual order
+        return list.reverse();
+    };
+
     useEffect(() => {
         if (!selectedContact) {
             return;
@@ -59,7 +90,9 @@ export function Chat() {
         if (!selectedContact) {
             return [];
         }
-        return getMessages(selectedContact.contactDetails.account.ensName!);
+        return addShowProfileProperty(
+            getMessages(selectedContact.contactDetails.account.ensName!),
+        );
     }, [getMessages, selectedContact]);
 
     // handles messages list
@@ -192,7 +225,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 +257,9 @@ export function Chat() {
                                                 indicator={
                                                     messageModel.indicator
                                                 }
+                                                showProfile={
+                                                    messageModel.showProfile
+                                                }
                                             />
                                         </div>
                                     ),

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

@@ -150,6 +150,12 @@
     color: var(--text-primary-color);
 }
 
+.chat-profile-pic{
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 3px;
+}
+
 /* =================== Mobile Responsive CSS =================== */
 @media only screen and (max-width: 800px) {
     .content-style {

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

@@ -13,10 +13,20 @@ import { ReplyMessagePreview } from './ReplyMessagePreview';
 import { MessageReactions } from './MessageReactions';
 import { Action } from './Action';
 import { MessageDetail } from './MessageDetail';
+import { ProfilePreview } from './ProfilePreview';
+import { AuthContext } from '../../context/AuthContext';
+import { ConversationContext } from '../../context/ConversationContext';
+import { DM3UserProfileContext } from '../../context/DM3UserProfileContext';
 
 export function Message(props: MessageProps) {
     const { messageView } = useContext(UiViewContext);
 
+    const { displayName } = useContext(AuthContext);
+
+    const { selectedContact } = useContext(ConversationContext);
+
+    const { accountProfilePicture } = useContext(DM3UserProfileContext);
+
     return (
         <span
             id={props.envelop.metadata?.messageHash}
@@ -27,6 +37,22 @@ export function Message(props: MessageProps) {
                     : 'ms-2 justify-content-start',
             )}
         >
+            {/* Profile preview before every message content to show the actual sender of it */}
+            {props.showProfile && (
+                <ProfilePreview
+                    name={
+                        props.ownMessage
+                            ? (displayName as string)
+                            : (selectedContact?.name as string)
+                    }
+                    picture={
+                        props.ownMessage
+                            ? accountProfilePicture
+                            : (selectedContact?.image as string)
+                    }
+                />
+            )}
+
             <div className="d-flex">
                 <div className={getMessageStyleClasses(props, messageView)}>
                     {/* Reply message preview */}

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

@@ -0,0 +1,20 @@
+import './Message.css';
+
+export interface ProfilePreviewProps {
+    picture: string;
+    name: string;
+}
+
+export function ProfilePreview(props: ProfilePreviewProps) {
+    return (
+        <div className="d-flex align-items-center">
+            <img
+                className="chat-profile-pic mb-1 pointer-cursor"
+                src={props.picture}
+            />
+            <div className="ms-2 font-size-12 font-weight-800 pointer-cursor">
+                {props.name.length > 16 ? props.name.slice(0, 16) : props.name}
+            </div>
+        </div>
+    );
+}

packages/messenger-widget/src/components/Message/bl.ts

@@ -61,7 +61,7 @@ export const getMessageStyleClasses = (
                   messageView.messageData?.envelop.message.signature ===
                       props.envelop.message.signature
                 ? 'msg-editing-active'
-                : 'ms-3 own-msg-background own-msg-text'
+                : 'own-msg-background own-msg-text'
             : !props.message &&
               props.envelop.message.metadata.type ===
                   MessageActionType.DELETE &&

packages/messenger-widget/src/components/RightHeader/NormalView.tsx

@@ -1,17 +1,16 @@
 import './RightHeader.css';
-import { useContext, useEffect, useState } from 'react';
+import { useContext } from 'react';
 import humanIcon from '../../assets/images/human.svg';
 import menuIcon from '../../assets/images/menu.svg';
 import { AuthContext } from '../../context/AuthContext';
-import { useMainnetProvider } from '../../hooks/mainnetprovider/useMainnetProvider';
-import { getAvatarProfilePic } from '../../utils/ens-utils';
 import { RightViewSelected } from '../../utils/enum-type-utils';
 import { ConversationContext } from '../../context/ConversationContext';
 import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
 import { UiViewContext } from '../../context/UiViewContext';
+import { DM3UserProfileContext } from '../../context/DM3UserProfileContext';
 
 export function NormalView() {
-    const { account, displayName } = useContext(AuthContext);
+    const { displayName } = useContext(AuthContext);
 
     const { setSelectedContactName } = useContext(ConversationContext);
 
@@ -20,33 +19,14 @@ export function NormalView() {
     const { setSelectedRightView, selectedRightView } =
         useContext(UiViewContext);
 
-    const mainnetProvider = useMainnetProvider();
-
-    // state to store profile pic of signed in user
-    const [profilePic, setProfilePic] = useState<string>('');
-
-    // fetched profile pic of signed in user
-    const fetchAndSetProfilePic = async () => {
-        setProfilePic(
-            await getAvatarProfilePic(
-                mainnetProvider,
-                account?.ensName as string,
-                dm3Configuration.addressEnsSubdomain,
-            ),
-        );
-    };
+    const { accountProfilePicture } = useContext(DM3UserProfileContext);
 
     // method to set profile page and set contact
     const updateView = () => {
         setSelectedRightView(RightViewSelected.Profile);
         setSelectedContactName(undefined);
     };
 
-    // loads the profile pic on page render
-    useEffect(() => {
-        fetchAndSetProfilePic();
-    }, []);
-
     return (
         <div
             className={(dm3Configuration.showContacts
@@ -82,7 +62,11 @@ export function NormalView() {
                     {displayName}
                 </span>
                 <img
-                    src={profilePic ? profilePic : humanIcon}
+                    src={
+                        accountProfilePicture
+                            ? accountProfilePicture
+                            : humanIcon
+                    }
                     alt="menu"
                     className="me-2 pointer-cursor border-radius-3 default-profile-pic"
                     onClick={() => updateView()}

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

@@ -1,11 +1,39 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { MobileView } from './MobileView';
 import { NormalView } from './NormalView';
 import { MOBILE_SCREEN_WIDTH } from '../../utils/common-utils';
 import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
+import { DM3UserProfileContext } from '../../context/DM3UserProfileContext';
+import { useMainnetProvider } from '../../hooks/mainnetprovider/useMainnetProvider';
+import { AuthContext } from '../../context/AuthContext';
+import { getAvatarProfilePic } from '../../utils/ens-utils';
 
 export function RightHeader() {
-    const { screenWidth } = useContext(DM3ConfigurationContext);
+    const { account } = useContext(AuthContext);
+
+    const { screenWidth, dm3Configuration } = useContext(
+        DM3ConfigurationContext,
+    );
+
+    const { setAccountProfilePicture } = useContext(DM3UserProfileContext);
+
+    const mainnetProvider = useMainnetProvider();
+
+    // fetched profile pic of signed in user
+    const fetchAndSetProfilePic = async () => {
+        setAccountProfilePicture(
+            await getAvatarProfilePic(
+                mainnetProvider,
+                account?.ensName as string,
+                dm3Configuration.addressEnsSubdomain,
+            ),
+        );
+    };
+
+    // loads the profile pic on page render
+    useEffect(() => {
+        fetchAndSetProfilePic();
+    }, []);
 
     return (
         <>

packages/messenger-widget/src/context/DM3UserProfileContext.tsx

@@ -22,6 +22,8 @@ export type DM3UserProfileContextType = {
     isProfileUpdatedForAddrName: boolean;
     isProfileUpdatedForDm3Name: boolean;
     isProfileUpdatedForEnsName: boolean;
+    accountProfilePicture: string;
+    setAccountProfilePicture: (pic: string) => void;
 };
 
 export const DM3UserProfileContext =
@@ -45,6 +47,8 @@ export const DM3UserProfileContext =
         isProfileUpdatedForAddrName: true,
         isProfileUpdatedForDm3Name: true,
         isProfileUpdatedForEnsName: true,
+        accountProfilePicture: '',
+        setAccountProfilePicture: (pic: string) => {},
     });
 
 export const DM3UserProfileContextProvider = ({
@@ -70,6 +74,8 @@ export const DM3UserProfileContextProvider = ({
         isProfileUpdatedForDm3Name,
         isProfileUpdatedForEnsName,
         setNodeName,
+        accountProfilePicture,
+        setAccountProfilePicture,
     } = useDm3UserProfile();
 
     return (
@@ -92,6 +98,8 @@ export const DM3UserProfileContextProvider = ({
                 isProfileUpdatedForDm3Name,
                 isProfileUpdatedForEnsName,
                 setNodeName,
+                accountProfilePicture,
+                setAccountProfilePicture,
             }}
         >
             {children}

packages/messenger-widget/src/hooks/userProfile/useDm3UserProfile.tsx

@@ -32,6 +32,7 @@ import {
     fetchChainIdFromServiceName,
     NAME_SERVICES,
 } from '../../components/ConfigureProfile/bl';
+import profPicture from '../../assets/images/human.svg';
 
 export interface INodeDetails {
     dsNames: string[];
@@ -100,6 +101,9 @@ export const useDm3UserProfile = () => {
         ensName: null,
     });
 
+    const [accountProfilePicture, setAccountProfilePicture] =
+        useState<string>(profPicture);
+
     // adds DS nodes in local storage of browser
     const setDsNodesInLocalStorage = (data: INodeDetails) => {
         // fetch data from local storage
@@ -751,5 +755,7 @@ export const useDm3UserProfile = () => {
         isProfileUpdatedForAddrName,
         isProfileUpdatedForDm3Name,
         isProfileUpdatedForEnsName,
+        accountProfilePicture,
+        setAccountProfilePicture,
     };
 };

packages/messenger-widget/src/interfaces/props.ts

@@ -25,6 +25,7 @@ export interface MessageProps {
     isLastMessage?: boolean;
     hideFunction?: string;
     indicator?: MessageIndicator;
+    showProfile?: boolean;
 }
 
 export interface MessageAction {

packages/messenger-widget/src/interfaces/utils.ts

@@ -3,6 +3,9 @@ import { Contact } from './context';
 import humanIcon from '../assets/images/human.svg';
 import { Socket } from 'socket.io-client';
 import { DefaultEventsMap } from 'socket.io/dist/typed-events';
+import { Envelop } from '@dm3-org/dm3-lib-messaging';
+import { MessageIndicator, MessageSource } from '../hooks/messages/useMessage';
+import { StorageEnvelopContainer as StorageEnvelopContainerNew } from '@dm3-org/dm3-lib-storage';
 
 export interface Connection {
     socket?: Socket<DefaultEventsMap, DefaultEventsMap>;
@@ -50,6 +53,14 @@ export interface IAttachmentPreview {
     isImage: boolean;
 }
 
+export type MessagePropsModel = StorageEnvelopContainerNew & {
+    reactions: Envelop[];
+    replyToMessageEnvelop?: Envelop;
+    source: MessageSource;
+    indicator?: MessageIndicator;
+    showProfile?: boolean;
+};
+
 export const getEmptyContact = (
     ensName: string,
     message: string | undefined,