### UI Kit for Web

Mirrorfly UIKit Sdk is a set of prebuilt UI components that allows you to easily integrate an in-app chat with all the essential messaging features.

### Requirements
The requirements for chat SDK for React Web App are:
- React Version 16.0 or above
- Node Version v14.17.4 or above

### Things to be Noted Before Making a Start
#### SDK License Key

> Before integrating CONTUS MirrorFly Chat SDK, you need to have a SDK license key for your MirrorFly application. This SDK needs to be authenticated by the MirrorFly server using the license key for further processing. 

Follow the below steps to get your license key:

**Step 1:**  Let’s Create an Account - Sign up into MirrorFly Console page (https://console.mirrorfly.com/register)  for free MirrorFly account

**Step 2:** Create an account with your basic details including your name, organization details, work email, and contact number

**Step 3:** Once you’re in! You get access to your MirrorFly account ‘Overview page’ where you can find a license key.

**Step 4:** You can copy the license key from the ‘Application info’ section

### Integrate the Chat SDK

> Install mirrorfly-uikit (https://www.npmjs.com/package/mirrorfly-uikit) npm package by terminal command 'npm i mirrorfly-uikit'. Now the node_modules will have a mirrorfly-uikit folder and package.json is added with the mirrorfly-uikit dependency.

**Step 1:** Create a new React project or Open an existing project.

**Step 2:** Open terminal and install mirrorfly-uikit with npm command 'npm i mirrorfly-uikit' and check package.json whether the dependency is added with mirrorfly-uikit as mentioned below. 

   ```jsx
   "dependencies": {
    "mirrorfly-uikit": "^1.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    }
   ```

**Step 3:** Import ChatApp component from the mirrorfly-uikit package in node modules.

**Step 4:** Import bundle.css from the mirrorfly-uikit package in node modules .

   ```jsx
   import { ChatApp } from "mirrorfly-uikit/dist"
   import "mirrorfly-uikit/dist/assets/scss/bundle.css"
    function App() {
    return (
        <>
        <ChatApp 
            width="100%" // custom width for parent container
            height ="100%" // custom height for parent container
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            enableDeviceSize={false}  // Default value false, if you added width or height enableDeviceSize will change false 
         />
        </>
        );
    }
    export default App;
   ```
You have to give **custom height and width values** for your container or props orelse set **enableDeviceSize** as true, it will automatically set height and width based on device size.

The Mirrorfly UI component is customizable on theme model. On a default Mirrorfly webchat app holds has 2 themes **light** and **dark** theme. Customized themes that fit your requirment can also be created by providing *colorSet* and *iconSet*.

#### Setup the default theme
UIKit for web's Light or Dark theme can be changed using **theme** prop.

### Light theme

Light theme is a default theme which is rendered without the declaration of **theme** or passing  *theme='light'*.

```jsx
        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            theme='light'
         />
```

### Dark theme
The Dark theme can be applied by passing *theme='dark'* in ChatApp component

```jsx
        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            theme='dark'
         />
```


### Basic colorSet Property

**colorSet** Prop is a style property which is provided with the list of variables where the seperate component layouts color can be changed. On a basic level of colorSet object the colors of the component can be changed.

<!-- **Note :** To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names. -->

```jsx
        const customColorSet={
            mfBoxLayoutBg: "#0ab7921f",
            mfThemeColor: "#00a884",
            mfThemeColorBright: "#0ab792",
            mfThemeColorDark: "#008069",
            mfThemeColorRgb: "0,128,105",
            mfHeadingBg: "#008069",
            mfBgcStartchatBannerLink: "#0ab792"
        }

        <ChatApp 
            licenseKey="********************" 
            userIdentifier="**************"
            apiUrl ="*******************"
            isSandBox={true} // if you are a sandbox user it is true
            colorSet={customColorSet}
            />
```

#### Changed colorSet Props

#### Basic colorSet Variables

The following table lists the style components of each Components used.

|    Components   | colorSet Variables  |
| -------------|---------|
|Chatapp Background Color| `mfBoxLayoutBg` |
|Overall Theme color | `mfThemeColor` | 
|Bright theme color usage  | `mfThemeColorBright` |
|Dark theme color usage | `mfThemeColorDark` |
|Theme color in rgb | `mfThemeColorRgb` |
|General All Heading BG color | `mfHeadingBg` |
|Chatapp Banner colorSet | `mfBgcStartchatBannerLink` |

### ColorSet
The ColorSet is the set of colors provided by UIKit for Web and is fully customizable.

```jsx
const customColorSet={
    boxLayoutBg: "#D8DBE3",
    parentTopGap: " 0px",
    maxParentheight: " calc(100vh - var(--parent-top-gap))",
    themeColor: " rgba(0, 168, 132,1)",
    themeColorBright: " #0cc19a",
    themeColorDark: " #0c7c64",
    themeColorRGB: " 0, 168, 132",
    headingBackground: " var(--mf-theme-color)",
    themeColorHighlight: " rgba(var(--mf-theme-color-rgb, 0.8))",
    listHoverBg: " rgba(var(--mf-theme-color-rgb), 0.09)",
    chatBadge: " rgba(var(--mf-theme-color-rgb), 0.2)",
    recentChatlistBGC: "white",
    primaryDark: "  #000000",
    secondaryDark: " #181818",
    secondaryLight: " #333333",
    dangerHightlight: " #e24848",
    chatSubDetails: " #73777e",
    textLight: " var(--mf-theme-color)",
    chatUserGroupName: " var(--mf-theme-color-dark)",
    
    // chat properties
    borderCommon: "#efefef",
    userStatusSent: " #808080",
    userStatusReceive: " #ffa500",
    chatBubbleLinkColor: " var(--mf-theme-color)",
    userStatusSeen: " rgb(0, 226, 75)",
    recentChatIcon: " rgb(118, 118, 118)",
    chatBubbleSenderStarIcon: " #fff",
    chatBubbleReceiverStarIcon: " #fff",
    chatBubbleReceiverBg: " #fff",
    chatBubbleReceiverText: " #444343",
    chatBubbleSenderBg: " var(--mf-theme-color-bright)",
    chatBubbleSenderText: " White",
    chatBadgeText: " var(--mf-secondary-light)",
    searchInputBg: " #f1f3f4",
    attachmentBg: " rgba(var(--mf-theme-color-rgb), 0.08)",
    attachmentIconBg: " #0f2a5f",
    msgTime: " var(--mf-secondary-light)",
    sendMessageTime: " #949494",
    revMessageTime: " #fff",
    recentChatConversionBg: " #fff",
    chatConversionBg: "#fff",

    // Icons color
    iconsContactinfo: " #313131",
    iconsDropdownOptions: " rgba(var(--mf-theme-color-rgb), 0.9)",
    iconsRecentchatHeader: " #828282",
    attachmentDropdownOptions: " rgba(var(--mf-theme-color-rgb), 0.9)",
    iconsContactinfoDanger: " var(--mf-danger-hightlight)",

    // active inactive option
    optionActive: " var(--mf-theme-color)",
    optionActiveLight: " var(--mf-theme-color-rgb, 0.5)",
    bgHoverCircle: "#f1f3f4",
    attachmentColorIcon: " #fff"
}

```

### Custom Chat Conversation

  If you need chat conversation page alone initialize customconversation in ChatApp component.
  
  ```jsx
   const customConversation = {
    conversationValue : true,
    userId:"xxxxxxx"
   }
   <ChatApp 
    licenseKey="********************" 
    userIdentifier="**************"
    apiUrl ="*******************"
    isSandBox={true} // if you are a sandbox user it is true
    customConversation={customConversation}
   />
  ```

For more detailed explaination please out https://www.mirrorfly.com/docs/UIKit/web/Customization/theme