Sidebar

The Sidebar component majorly consists of Profile Header, Recent Chat Section and Contacts section.

Profile Header#

The profile header component is completely customized with the providing icons and colorset. The default Profile Header 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

Profile Header Component	Variables	Usage
Profile Header Background Color	`mfRecentchatHeaderBg`	For changing the background color for the Profile Header
Profile Name color	`mfProfileImgName`	For changing the text color for the Profile Header
CallLogs Icon usage	`mf_CallLogs`	For changing the calllog Icon
New Chat Icon usage	`mf_NewGroup`	For changing the New Chat Icon
Dot Menu Icon usage	`mf_DotMenu`	For changing the Dot Menu Icon
Font Family for Profile Name	`mfSemibold`	For changing the font of the profile name

function App() {

  const customColorSet={
    mfRecentchatHeaderBg:"#baf54c",
    mfProfileImgName:"#0782e0",
    mfSemibold:"monospace"

  }
  const filledColorIcons={
    mf_CallLogs: <FcCallback />, // from any icon packages
    mf_NewChat: <FcSms />, // from any icon packages
    mf_DotMenu: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="24" fill="none" stroke="#3F51B5" stroke-miterlimit="10" stroke-width="16"/><circle cx="128" cy="48" r="24" fill="none" stroke="#2196F3" stroke-miterlimit="10" stroke-width="16"/><circle cx="128" cy="208" r="24" fill="none" stroke="#009688" stroke-miterlimit="10" stroke-width="16"/></svg>,
  }

  return (        
      <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            iconSet={filledColorIcons}
            colorSet={customColorSet}
        />
          );
    }

Customized Profile Header#

const customColorset={
  mfRecentchatHeaderBg:"#DCDCDC",
  mfProfileImgName:"#000000",
  mfSemibold:"sans-serif"
}

Contus User 1

hex

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

light-theme

Recent Chat Component#

The Recent 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 Component	Variables	Usage
Recent Chat Background Color	`mfWhite`	For changing the background color for the Recent Chat Component
Recent Chat Name Color	`mfSecondaryDark`	For changing the text color for the Recent Chat Name
Recent Chat Message Color	`mfChatSubDetails`	For changing the text color for the Recent Chat Message
Unread Count Badge Color	`mfThemeColorBright`	For changing the Unread Count Badge Color
Recent Chat Name Font	`mfMedium`	For changing the Recent Chat Name Font
Recent Chat Message Font	`mfRegular`	For changing the font of the Recent Chat Message Font
Recent Chat Border Common Color	`mfBorderCommon`	For changing the font of the Recent Chat Border Common Color
Recent Chat list Hover Color	`mfListHoverBg`	For changing the font of the Recent Chat list Hover Color

function App() {

  const customColorSet={
    mfWhite:"#baf54c",
    mfSecondaryDark:"#0782e0",
    mfChatSubDetails:"#36383b",
    mfThemeColorBright:"#476e90",
    mfMedium:"monospace",
    mfRegular:"fantasy",
    mfBorderCommon:"#1c0707",
    mfListHoverBg:"#3b4625"
  }

  return (        
      <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            iconSet={filledColorIcons}
            colorSet={customColorSet}
        />
          );
    }

Customized Recent Chat Component#

customColorset={
    mfWhite:"#DCDCDC"
    mfSecondaryDark:"#272726"
    mfChatSubDetails:"#808080"
    mfMedium:"sans-serif"
    mfRegular: "sans-serif"
}

hex

Harini

11:20am

Message from testing 2

Reiman

10:00am

Message from testing 1

Rizwan

yesterday

Message from testing 4

Kadhar

yesterday

Message from testing 3

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

light-theme

New Chat (or) Contacts Component#

The Contacts Component is completely customized with the providing colorset. The default Contacts 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 Component	Variables	Usage
New Chat Background Color	`mfBgcRecentChatlistHeader`	For changing the background color for the New Chat Component's Header
New Chat Background Color	`mfMenuName`	For changing the background color for the New Chat Component's Headers Name Color
New Chat Background Color	`mfWhite`	For changing the background color for the New Chat Component
New Chat Name Color	`mfSecondaryDark`	For changing the text color for the New Chat Name
New Chat Message Color	`mfChatSubDetails`	For changing the text color for the New Chat Message
New Chat Name Font	`mfMedium`	For changing the New Chat Name Font
New Chat Message Font	`mfRegular`	For changing the font of the New Chat Message Font
New Chat Border Common Color	`mfBorderCommon`	For changing the font of the New Chat Border Common Color
New Chat list Hover Color	`mfListHoverBg`	For changing the font of the New Chat list Hover Color

function App() {

  const customColorSet={
    mfBgcRecentChatlistHeader:"#baf54c",
    mfMenuName:"#0782e0",
    mfWhite:"#baf54c",
    mfSecondaryDark:"#0782e0",
    mfChatSubDetails:"#36383b",
    mfThemeColorBright:"#476e90",
    mfMedium:"monospace",
    mfRegular:"fantasy",
    mfBorderCommon:"#1c0707",
    mfListHoverBg:"#3b4625"
  }

  return (        
      <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            iconSet={filledColorIcons}
            colorSet={customColorSet}
        />
          );
    }

Customized New Chat Component#

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

light-theme

const customColorset={
    mfBgcRecentChatlistHeader:"#4B7DF6"
    mfMenuName:"white"
    mfWhite:"#DCDCDC"
    mfSecondaryDark:"#272726"
    mfChatSubDetails:"#808080"
    mfMedium:"sans-serif"
    mfRegular:"sans-serif"
 }

New Chat

hex

Reimann

Message from testing 2

Samuel

Message from testing 1

Rizwan

Message from testing 4

Kadhar

Message from testing 3