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.
On customizing the conversation component the ChatApp is fed with the prop colorSet with variables
| Conversation Component | Variables | Usage |
|---|---|---|
| Conversation Component Header Background Color | mfConversationHeaderBg | For changing the background color for the Conversation Header |
| Conversation Component Name color | mfSecondaryDark | For changing the text color for the Conversation Header Name |
| Font Family for Conversation Name | mfMedium | For changing the font of the Conversation name |
| Conversation Component Lastseen color | mfChatSubDetails | For changing the text color for the Conversation Header Lastseen |
| Font Family for Conversation Lastseen | mfRegular | For changing the font of the Conversation Lastseen |
Customized Profile Header#
As the componenet is customized with above mentioned variables, the below image is the customized Conversation Component Header.
customColorset={
mfConversationHeaderBg :"#4B7DF6"
mfSecondaryDark:"white"
mfMedium:"sans-serif"
mfChatSubDetails:"white"
mfRegular:"sans-serif"
}
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.
On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables
| Recent Chat Component | Variables | Usage |
|---|---|---|
| Received Chat Bubble Background Color | mfChatBubbleReceiverBg | For changing the background color for the Received Chat Bubble Background |
| Received Chat Bubble text Color | mfChatBubbleReceiverText | For changing the text color for the Received Chat Bubble text |
| Received Chat Bubble time text Color | mfSendMessageTime | For changing the text color for the Received Chat Bubble time text |
| Sender Chat Bubble Background Color | mfChatBubbleSenderBg | For changing the background color for the Sender Chat Bubble Background |
| Sender Chat Bubble text Color | mfChatBubbleSenderText | For changing the text color for the Sender Chat Bubble text |
| Sender Chat Bubble time text Color | mfRevMessageTime | For changing the text color for the Sender Chat Bubble time text |
| Chat Conversation Date Badge background color | mfChatBadgeBg | For changing the color of Chat Conversation Date Badge background |
| Chat Conversation Date Badge text | mfChatBadgeText | For changing the color of Chat Conversation Date Badge text |
Customized Conversation Chat Component#
customColorset={
mfChatBubbleReceiverBg: "#fff"
mfChatBubbleReceiverText: "#444343"
mfRevMessageTime: "#000"
mfChatBubbleSenderBg: "#4B7DF6"
mfChatBubbleSenderText: "#fff"
mfSendMessageTime: "#000"
mfChatBadgeBg: "#dde2ef"
mfChatBadgeText:"#3c4452"
}As the componenet is customized with above mentioned variables, the below image is the customized Conversation Chat Component.
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.
On customizing the profile header the ChatApp is fed with the prop colorSet and iconSet with variables
| Recent Chat Component | Variables | Usage |
|---|---|---|
| Message Input background Color | mfMessageInputbg | For changing the background color for the Message Input background Color |
| Message Input text Color | mfClrTypingArea | For changing the background color for the Message Input text Color |
| Message Input Audio Icon Color | mfChatinputIcons | For changing the background color for the Message Input Audio Icon Color |
| Message Input Send button Background Color | mfWhite | For changing the color Message Input Send button Background Color |
| Message Input text Font | mfRegular | For changing the Message Input text Font |
| Message Input Smile Icon | mf_IconSmile | For changing the Message Input Smile Icon |
| Message Input Attachment Icon | mf_Attachment | For changing the Message Input Attachment Icon |
| Message Input Send Message Icon | mf_SendMessage | For changing the Send Message Icon |
Customized Message Conversation Component#
As the componenet is customized with above mentioned variables, the below image is the customized Message Conversation Component.
customColorset={
mfMessageInputbg :"#fff"
mfWhite :"#fff"
mfClrTypingArea:"#fff"
mfRegular:"sans-serif"
}