Conversation Section

The Conversation component majorly consists of Chat Header Section, Chat Converstion Section and Message Conversation section.

Chat Header Section#

The chat header component is completely customized with the providing colorset. The default Profile Header is mentioned below and it can be completely customized.

light-theme

On customizing the conversation component the ChatApp is fed with the prop colorSet with variables

Conversation ComponentVariablesUsage
Conversation Component Header Background ColormfConversationHeaderBgFor changing the background color for the Conversation Header
Conversation Component Name colormfSecondaryDarkFor changing the text color for the Conversation Header Name
Font Family for Conversation NamemfMediumFor changing the font of the Conversation name
Conversation Component Lastseen colormfChatSubDetailsFor changing the text color for the Conversation Header Lastseen
Font Family for Conversation LastseenmfRegularFor changing the font of the Conversation Lastseen
function App() {
const customColorSet={
mfConversationHeaderBg:"#383d61",
mfSecondaryDark:"#fff",
mfMedium:"monospace",
mfChatSubDetails:"#fff",
mfRegular:"fantasy"
}
return (
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
iconSet={filledColorIcons}
colorSet={customColorSet}
/>
);
}

Customized Profile Header#

As the componenet is customized with above mentioned variables, the below image is the customized Conversation Component Header.

light-theme

Chat Converstion Section#

The Conversation Chat Component is completely customized with the providing colorset. The default Recent Chat is mentioned below and it can be completely customized.

light-theme

On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables

Recent Chat ComponentVariablesUsage
Received Chat Bubble Background ColormfChatBubbleReceiverBgFor changing the background color for the Received Chat Bubble Background
Received Chat Bubble text ColormfChatBubbleReceiverTextFor changing the text color for the Received Chat Bubble text
Received Chat Bubble time text ColormfSendMessageTimeFor changing the text color for the Received Chat Bubble time text
Sender Chat Bubble Background ColormfChatBubbleSenderBgFor changing the background color for the Sender Chat Bubble Background
Sender Chat Bubble text ColormfChatBubbleSenderTextFor changing the text color for the Sender Chat Bubble text
Sender Chat Bubble time text ColormfRevMessageTimeFor changing the text color for the Sender Chat Bubble time text
Chat Conversation Date Badge background colormfChatBadgeBgFor changing the color of Chat Conversation Date Badge background
Chat Conversation Date Badge textmfChatBadgeTextFor changing the color of Chat Conversation Date Badge text
function App() {
const customColorSet={
mfChatBubbleReceiverBg:"#383d61",
mfChatBubbleReceiverText:"#fff",
mfSendMessageTime:"#fff",
mfChatBubbleSenderBg:"#9ebc66",
mfChatBubbleSenderText:"#000",
mfRevMessageTime:"#000",
mfChatBadgeBg:"rgb(0 0 0 / 20%)",
mfChatBadgeText:"#45gu63"
}
return (
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
colorSet={customColorSet}
/>
);
}

Customized Conversation Chat Component#

As the componenet is customized with above mentioned variables, the below image is the customized Conversation Chat Component.

light-theme

Message Conversation section#

The Message Conversation section is completely customized with the providing iconSet and colorset. The default Contacts is mentioned below and it can be completely customized.

light-theme light-theme

On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables

Recent Chat ComponentVariablesUsage
Message Input background ColormfMessageInputbgFor changing the background color for the Message Input background Color
Message Input text ColormfClrTypingAreaFor changing the background color for the Message Input text Color
Message Input Audio Icon ColormfChatinputIconsFor changing the background color for the Message Input Audio Icon Color
Message Input Send button Background ColormfWhiteFor changing the color Message Input Send button Background Color
Message Input text FontmfRegularFor changing the Message Input text Font
Message Input Smile Iconmf_IconSmileFor changing the Message Input Smile Icon
Message Input Attachment Iconmf_AttachmentFor changing the Message Input Attachment Icon
Message Input Send Message Iconmf_SendMessageFor changing the Send Message Icon
function App() {
const customColorSet={
mfMessageInputbg:"#383d61",
mfClrTypingArea:"#fff",
mfChatinputIcons:"#c40000",
mfWhite:"#383d61",
mfRegular:"monospace"
}
const filledColorIcons={
mf_IconSmile: <svg id="prefix__Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88">
<path d="M45.54 2.11A61.42 61.42 0 112.11 77.34 61.42 61.42 0 0145.54 2.11z" fill-rule="evenodd" fill="#fbd433" />
<path fill-rule="evenodd" fill="#141518"
d="M45.78 32.27c4.3 0 7.79 5 7.79 11.27s-3.49 11.27-7.79 11.27S38 49.77 38 43.54s3.48-11.27 7.78-11.27zM77.1 32.27c4.3 0 7.78 5 7.78 11.27S81.4 54.81 77.1 54.81s-7.79-5-7.79-11.27 3.49-11.27 7.79-11.27z" />
<path
d="M28.8 70.82a39.65 39.65 0 008.83 8.41 42.72 42.72 0 0025 7.53 40.44 40.44 0 0024.12-8.12 35.75 35.75 0 007.49-7.87.22.22 0 01.31 0L97 73.14a.21.21 0 010 .29 45.87 45.87 0 01-14.11 15.15A37.67 37.67 0 0162.83 95a39 39 0 01-20.68-5.55A50.52 50.52 0 0125.9 73.57a.23.23 0 010-.28l2.52-2.5a.22.22 0 01.32 0z" />
</svg>,
mf_Attachment: <FcLandscape />,
mf_SendMessage: <svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1" viewBox="0 0 48 48" enable-background="new 0 0 48 48" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M37,39H11l-6,6V11c0-3.3,2.7-6,6-6h26c3.3,0,6,2.7,6,6v22C43,36.3,40.3,39,37,39z"></path><g fill="var(--mf-theme-color)"><circle cx="24" cy="22" r="3"></circle><circle cx="34" cy="22" r="3"></circle><circle cx="14" cy="22" r="3"></circle></g></svg>,
}
return (
<ChatApp
lisenseKey="********************"
userIdentifier="**************"
apiUrl ="*******************"
isSandBox={true} // if you are a sandbox user it is true
iconSet={filledColorIcons}
colorSet={customColorSet}
/>
);
}

Customized Message Conversation Component#

As the componenet is customized with above mentioned variables, the below image is the customized Message Conversation Component.

light-theme light-theme