configured new and old msg layout

Author: Bhupesh-mfsi

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

@@ -17,6 +17,8 @@ import { ProfilePreview } from './ProfilePreview';
 import { AuthContext } from '../../context/AuthContext';
 import { ConversationContext } from '../../context/ConversationContext';
 import { DM3UserProfileContext } from '../../context/DM3UserProfileContext';
+import { SettingsContext } from '../../context/SettingsContext';
+import { MsgViewType } from '../../hooks/settings/useSettings';
 
 export function Message(props: MessageProps) {
     const { messageView } = useContext(UiViewContext);
@@ -27,6 +29,8 @@ export function Message(props: MessageProps) {
 
     const { accountProfilePicture } = useContext(DM3UserProfileContext);
 
+    const { msgViewSelected } = useContext(SettingsContext);
+
     return (
         <span
             id={props.envelop.metadata?.messageHash}
@@ -38,20 +42,22 @@ export function Message(props: MessageProps) {
             )}
         >
             {/* 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)
-                    }
-                />
-            )}
+            {msgViewSelected.viewType === MsgViewType.NEW &&
+                props.showProfile && (
+                    <ProfilePreview
+                        name={
+                            props.ownMessage
+                                ? (displayName as string)
+                                : (selectedContact?.name as string)
+                        }
+                        picture={
+                            props.ownMessage
+                                ? accountProfilePicture
+                                : (selectedContact?.image as string)
+                        }
+                        ownMessage={props.ownMessage}
+                    />
+                )}
 
             <div className="d-flex">
                 <div className={getMessageStyleClasses(props, messageView)}>

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

@@ -1,18 +1,49 @@
+import { useContext } from 'react';
 import './Message.css';
+import { UiViewContext } from '../../context/UiViewContext';
+import { RightViewSelected } from '../../utils/enum-type-utils';
+import { closeContactMenu } from '../../utils/common-utils';
+import { ConversationContext } from '../../context/ConversationContext';
 
 export interface ProfilePreviewProps {
     picture: string;
     name: string;
+    ownMessage: boolean;
 }
 
 export function ProfilePreview(props: ProfilePreviewProps) {
+    const { setSelectedRightView } = useContext(UiViewContext);
+    const { setSelectedContactName } = useContext(ConversationContext);
+
+    // method to open the profile of selected account
+    const openProfile = () => {
+        // if our own profile icon is clicked
+        if (props.ownMessage) {
+            // select and open profile component
+            setSelectedRightView(RightViewSelected.Profile);
+            // unselect the contact
+            setSelectedContactName(undefined);
+            return;
+        }
+        // open contact info of the selected contact
+        setSelectedRightView(RightViewSelected.ContactInfo);
+        // close the contact menu
+        closeContactMenu();
+    };
+
     return (
         <div className="d-flex align-items-center">
+            {/* profile picture of the account or contact selected */}
             <img
                 className="chat-profile-pic mb-1 pointer-cursor"
                 src={props.picture}
+                onClick={() => openProfile()}
             />
-            <div className="ms-2 font-size-12 font-weight-800 pointer-cursor">
+            {/* Name of the account or contact selected */}
+            <div
+                className="ms-2 font-size-12 font-weight-800 pointer-cursor"
+                onClick={() => openProfile()}
+            >
                 {props.name.length > 16 ? props.name.slice(0, 16) : props.name}
             </div>
         </div>

packages/messenger-widget/src/hooks/settings/useSettings.tsx

@@ -12,16 +12,21 @@ export type SettingsDataType = {
     messageView: string;
 };
 
+export enum MsgViewType {
+    OLD = 'OLD',
+    NEW = 'NEW',
+}
+
 // available message view options
 export const MSG_VIEW_OPTIONS = [
     {
         name: 'Old message view',
-        viewType: 'OLD',
+        viewType: MsgViewType.OLD,
         isEnabled: true,
     },
     {
         name: 'New message view',
-        viewType: 'NEW',
+        viewType: MsgViewType.NEW,
         isEnabled: true,
     },
 ];