@messenger-box/platform-browser 0.0.1-alpha.16 → 0.0.1-alpha.17

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.17](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.16...v0.0.1-alpha.17) (2021-10-05)
+
+**Note:** Version bump only for package @messenger-box/platform-browser
+
+
+
+
+
 ## [0.0.1-alpha.16](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.15...v0.0.1-alpha.16) (2021-10-04)
 
 **Note:** Version bump only for package @messenger-box/platform-browser

package/lib/components/messenger/avatar/index.d.ts

@@ -0,0 +1,9 @@
+declare type IAvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+declare type IProps = {
+    text?: string;
+    url?: string | any;
+    size?: IAvatarSize;
+    username?: string;
+};
+export declare const Avatar: ({ url, size, text, username }: IProps) => JSX.Element;
+export {};

package/lib/components/messenger/avatar/style.d.ts

@@ -0,0 +1,78 @@
+export declare const styleSheet: {
+    avatarStyles: () => {
+        display: string;
+        alignItems: string;
+        '& .Avatar': {
+            '-webkit-user-select': string;
+            '-moz-user-select': string;
+            '-ms-user-select': string;
+            'user-select': string;
+            verticalAlign: string;
+        };
+        '& .Avatar, .Avatar:focus, .Avatar.a11y--focused': {
+            borderRadius: string;
+        };
+        '& .Avatar.Avatar-xs': {
+            width: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        '& .Avatar.Avatar-sm': {
+            width: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        '& .Avatar.Avatar-md': {
+            width: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        '& .Avatar.Avatar-lg': {
+            width: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        '& .Avatar.Avatar-xl': {
+            width: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        '& .Avatar.Avatar-xxl': {
+            width: string;
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
+        '& .Avatar.Avatar-plain': {
+            position: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            background: string;
+        };
+        '& .Avatar.Avatar-plain::before': {
+            position: string;
+            display: string;
+            width: string;
+            height: string;
+            alignItems: string;
+            justifyContent: string;
+            borderRadius: string;
+            color: string;
+            content: string;
+        };
+        '& .username': {
+            marginBottom: string;
+            marginLeft: string;
+        };
+        '& .username p': {
+            marginBottom: string;
+            marginLeft: string;
+        };
+    };
+};

package/lib/components/messenger/mock.d.ts

@@ -3,3 +3,15 @@ export declare const messagesData: {
     loginUser: boolean;
     message: string;
 }[];
+export declare const userProfile: {
+    displayName: string;
+    isBusy: boolean;
+    user: {
+        username: string;
+    };
+    isShared: boolean;
+    disablePopover: boolean;
+    displayUsername: boolean;
+    hasMention: boolean;
+    hideStatus: boolean;
+}[];

package/lib/components/messenger/style.d.ts

@@ -0,0 +1,10 @@
+export declare const styleSheet: {
+    messengerStyles: () => {
+        display: string;
+        '& .message--box-outer': {
+            position: string;
+            bottom: string;
+            width: string;
+        };
+    };
+};

package/lib/index.js

@@ -87,6 +87,138 @@ module.exports =
 /************************************************************************/
 /******/ ({
 
+/***/ "./src/components/messenger/avatar/index.tsx":
+/*!***************************************************!*\
+  !*** ./src/components/messenger/avatar/index.tsx ***!
+  \***************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
+const classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "classnames"));
+const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
+const style_1 = __webpack_require__(/*! ./style */ "./src/components/messenger/avatar/style.ts");
+exports.Avatar = ({ url, size = 'md', text, username }) => {
+    const { css } = react_fela_1.useFela();
+    const classes = classnames_1.default(`Avatar Avatar-${size}`);
+    if (text) {
+        return (react_1.default.createElement("div", { className: css(style_1.styleSheet.avatarStyles) },
+            react_1.default.createElement("div", { className: classes + ` Avatar-plain`, "data-content": text })));
+    }
+    return (react_1.default.createElement("div", { className: css(style_1.styleSheet.avatarStyles) },
+        react_1.default.createElement("img", { src: url, className: classes, alt: "" }),
+        react_1.default.createElement("div", { className: "username" },
+            react_1.default.createElement("h4", null, username),
+            react_1.default.createElement("p", null, "6:40"))));
+};
+
+
+/***/ }),
+
+/***/ "./src/components/messenger/avatar/style.ts":
+/*!**************************************************!*\
+  !*** ./src/components/messenger/avatar/style.ts ***!
+  \**************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleSheet = void 0;
+exports.styleSheet = {
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    avatarStyles: () => ({
+        display: 'flex',
+        alignItems: 'center',
+        '& .Avatar': {
+            '-webkit-user-select': 'none',
+            /* Chrome all / Safari all */
+            '-moz-user-select': 'none',
+            /* Firefox all */
+            '-ms-user-select': 'none',
+            /* IE 10+ */
+            'user-select': 'none',
+            verticalAlign: 'sub',
+        },
+        '& .Avatar, .Avatar:focus, .Avatar.a11y--focused': {
+            borderRadius: '50%',
+        },
+        '& .Avatar.Avatar-xs': {
+            width: '20px',
+            minWidth: '20px',
+            height: '20px',
+            fontSize: '9.5px',
+        },
+        '& .Avatar.Avatar-sm': {
+            width: '24px',
+            minWidth: '24px',
+            height: '24px',
+            fontSize: '10px',
+        },
+        '& .Avatar.Avatar-md': {
+            width: '32px',
+            minWidth: '32px',
+            height: '32px',
+            fontSize: '12px',
+        },
+        '& .Avatar.Avatar-lg': {
+            width: '36px',
+            minWidth: '36px',
+            height: '36px',
+            fontSize: '14px',
+        },
+        '& .Avatar.Avatar-xl': {
+            width: '50px',
+            minWidth: '50px',
+            height: '50px',
+            fontSize: '18px',
+        },
+        '& .Avatar.Avatar-xxl': {
+            width: '128px',
+            minWidth: '128px',
+            height: '128px',
+            fontSize: '44px',
+        },
+        '& .Avatar.Avatar-plain': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'red',
+        },
+        '& .Avatar.Avatar-plain::before': {
+            position: 'absolute',
+            display: 'inline-flex',
+            width: '100%',
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            color: 'rgba(0, 1, 0, )',
+            content: 'attr(data-content)',
+        },
+        '& .username': {
+            marginBottom: '30px',
+            marginLeft: '10px',
+        },
+        '& .username p': {
+            marginBottom: '30px',
+            marginLeft: '10px',
+        },
+    }),
+};
+
+
+/***/ }),
+
 /***/ "./src/components/messenger/index.tsx":
 /*!********************************************!*\
   !*** ./src/components/messenger/index.tsx ***!
@@ -121,7 +253,10 @@ const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 const antd_1 = __webpack_require__(/*! antd */ "antd");
 const index_1 = __webpack_require__(/*! ./messagesList/index */ "./src/components/messenger/messagesList/index.tsx");
 const mock_1 = __webpack_require__(/*! ./mock */ "./src/components/messenger/mock.ts");
+const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
+const style_1 = __webpack_require__(/*! ./style */ "./src/components/messenger/style.ts");
 exports.MessengerComponent = () => {
+    const { css } = react_fela_1.useFela();
     const [enterValue, setEnterValue] = react_1.useState('');
     const [userMessagesList, setUserMessagesList] = react_1.useState(mock_1.messagesData);
     const handleEnterButton = (e) => {
@@ -135,11 +270,13 @@ exports.MessengerComponent = () => {
         ]);
         setEnterValue('');
     };
-    return (react_1.default.createElement(antd_1.Row, { gutter: [24, 6] },
-        react_1.default.createElement(antd_1.Col, { md: 24 },
-            react_1.default.createElement(index_1.MessagesList, { userMessagesList: userMessagesList })),
-        react_1.default.createElement(antd_1.Col, { md: 24 },
-            react_1.default.createElement(antd_1.Input, { value: enterValue, onChange: (e) => { var _a; return setEnterValue((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, onPressEnter: (e) => handleEnterButton(e), placeholder: "Please Enter" }))));
+    return (react_1.default.createElement("div", { className: css(style_1.styleSheet.messengerStyles) },
+        react_1.default.createElement(antd_1.Row, { gutter: [24, 6] },
+            react_1.default.createElement(antd_1.Card, { style: { width: '100%', marginBottom: '100px' } },
+                react_1.default.createElement(antd_1.Col, { md: 24 },
+                    react_1.default.createElement(index_1.MessagesList, { userMessagesList: userMessagesList }))),
+            react_1.default.createElement(antd_1.Col, { md: 24, className: "message--box-outer" },
+                react_1.default.createElement(antd_1.Input, { value: enterValue, onChange: (e) => { var _a; return setEnterValue((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); }, onPressEnter: (e) => handleEnterButton(e), placeholder: "Please Enter" })))));
 };
 
 
@@ -161,14 +298,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessagesList = void 0;
 const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 const antd_1 = __webpack_require__(/*! antd */ "antd");
+const avatar_1 = __webpack_require__(/*! ../avatar */ "./src/components/messenger/avatar/index.tsx");
 exports.MessagesList = ({ userMessagesList }) => {
-    return (react_1.default.createElement(antd_1.Row, null, userMessagesList === null || userMessagesList === void 0 ? void 0 : userMessagesList.map((item, index) => {
+    return (react_1.default.createElement(antd_1.Row, { gutter: [24, 6] }, userMessagesList === null || userMessagesList === void 0 ? void 0 : userMessagesList.map((item, index) => {
         if (!item.loginUser) {
             return (react_1.default.createElement(antd_1.Col, { md: 24, key: index, style: { textAlign: 'right' } },
                 react_1.default.createElement("p", null, item === null || item === void 0 ? void 0 : item.message)));
         }
         else {
             return (react_1.default.createElement(antd_1.Col, { md: 24, key: index },
+                react_1.default.createElement(avatar_1.Avatar, { url: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80', size: 'lg', username: 'admin' }),
                 react_1.default.createElement("p", null, item === null || item === void 0 ? void 0 : item.message)));
         }
     })));
@@ -187,7 +326,7 @@ exports.MessagesList = ({ userMessagesList }) => {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messagesData = void 0;
+exports.userProfile = exports.messagesData = void 0;
 exports.messagesData = [
     {
         id: 1,
@@ -210,6 +349,44 @@ exports.messagesData = [
         message: 'I am fine!',
     },
 ];
+exports.userProfile = [
+    {
+        displayName: 'nickname',
+        isBusy: false,
+        user: { username: 'Admin' },
+        isShared: true,
+        disablePopover: true,
+        displayUsername: true,
+        hasMention: false,
+        hideStatus: false,
+    },
+];
+
+
+/***/ }),
+
+/***/ "./src/components/messenger/style.ts":
+/*!*******************************************!*\
+  !*** ./src/components/messenger/style.ts ***!
+  \*******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleSheet = void 0;
+exports.styleSheet = {
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    messengerStyles: () => ({
+        display: 'inharit',
+        '& .message--box-outer': {
+            position: 'fixed',
+            bottom: '10%',
+            width: '84.7%',
+        },
+    }),
+};
 
 
 /***/ }),
@@ -463,6 +640,17 @@ module.exports = require("antd");
 
 /***/ }),
 
+/***/ "classnames":
+/*!*****************************!*\
+  !*** external "classnames" ***!
+  \*****************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("classnames");
+
+/***/ }),
+
 /***/ "react":
 /*!************************!*\
   !*** external "react" ***!
@@ -474,6 +662,17 @@ module.exports = require("react");
 
 /***/ }),
 
+/***/ "react-fela":
+/*!*****************************!*\
+  !*** external "react-fela" ***!
+  \*****************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("react-fela");
+
+/***/ }),
+
 /***/ "react-intl":
 /*!*****************************!*\
   !*** external "react-intl" ***!

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/messenger/index.tsx","webpack:///./src/components/messenger/messagesList/index.tsx","webpack:///./src/components/messenger/mock.ts","webpack:///./src/compute.tsx","webpack:///./src/containers/Dashboard.tsx","webpack:///./src/containers/Messenger.tsx","webpack:///./src/index.tsx","webpack:///./src/module.ts","webpack:///./src/utils/index.ts","webpack:///external \"@adminide-stack/platform-browser/lib/components\"","webpack:///external \"@common-stack/client-react\"","webpack:///external \"antd\"","webpack:///external \"react\"","webpack:///external \"react-intl\""],"names":[],"mappings":";;QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClFA,wEAA4C;AAC5C,uDAAuC;AACvC,qHAAoD;AACpD,uFAAsC;AAIzB,0BAAkB,GAAO,GAAG,EAAE;IACvC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,gBAAQ,CAAS,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,CAAiB,mBAAY,CAAC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,EAAE;QAC5B,mBAAmB,CAAC;YAChB,GAAG,gBAAgB;YACnB;gBACI,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE;gBACjB,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,UAAU;aACtB;SACJ,CAAC,CAAC;QACH,aAAa,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACH,8BAAC,UAAG,IAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAChB,8BAAC,UAAG,IAAC,EAAE,EAAE,EAAE;YACP,8BAAC,oBAAY,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,CAClD;QACN,8BAAC,UAAG,IAAC,EAAE,EAAE,EAAE;YACP,8BAAC,YAAK,IACF,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE,WAAC,oBAAa,OAAC,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,KAAK,CAAC,KACrD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACzC,WAAW,EAAC,cAAc,GAC5B,CACA,CACJ,CACT,CAAC;AACN,CAAC,CAAC;;;;;;;;;;;;;;;;;;;ACrCF,2EAAkC;AAClC,uDAAgC;AAMnB,oBAAY,GAAe,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC7D,OAAO,CACH,8BAAC,UAAG,QACC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,IAAiB,EAAE,KAAa,EAAE,EAAE;QACxD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACjB,OAAO,CACH,8BAAC,UAAG,IAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE;gBAClD,yCAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAK,CACpB,CACT,CAAC;SACL;aAAM;YACH,OAAO,CACH,8BAAC,UAAG,IAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK;gBACnB,yCAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAK,CACpB,CACT,CAAC;SACL;IACL,CAAC,EACC,CACT,CAAC;AACN,CAAC,CAAC;;;;;;;;;;;;;;;;AC3BW,oBAAY,GAAG;IACxB;QACI,EAAE,EAAE,CAAC;QACL,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,QAAQ;KACpB;IACD;QACI,EAAE,EAAE,CAAC;QACL,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,MAAM;KAClB;IACD;QACI,EAAE,EAAE,CAAC;QACL,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,cAAc;KAC1B;IACD;QACI,EAAE,EAAE,CAAC;QACL,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,YAAY;KACxB;CACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBF,sEAA+B;AAI/B,mJAAgF;AAEhF,2EAA4C;AAC5C,yEAA0C;AAE1C,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,+DAAQ,8DAAwB,GAAC,CAAC,CAAC;AACrE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,+DAAQ,8DAAwB,GAAC,CAAC,CAAC;AAExD,yBAAiB,GAAG,GAAG,EAAE;IAClC,OAAO,CACH,oBAAC,0BAAa;QAEV,oBAAC,yBAAY,IAAC,MAAM,EAAC,IAAI;YACrB,oBAAC,SAAS,OAAG,CACF,CACH,CACnB,CAAC;AACN,CAAC,CAAC;AAEW,0BAAkB,GAAU;AACrC,IAAI;AACJ,oBAAoB;AACpB,8BAA8B;AAC9B,wBAAwB;AACxB,sDAAsD;AACtD,sCAAsC;AACtC,wBAAwB;AACxB,yBAAyB;AACzB,qCAAqC;AACrC,mBAAmB;AACnB,KAAK;CACR,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,WAAW,CAAC,CAAC;AAE7C,MAAM,cAAc,GAAG,yBAAiB,CAAC,0BAAkB,EAAE,sBAAsB,CAAC,CAAC;AAC5E,wCAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxCvB,sEAA+B;AAE/B,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,OAAO,qEAA6B,CAAC;AACzC,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNzB,sEAA+B;AAE/B,iHAA8D;AAE9D,MAAM,SAAS,GAAa,GAAG,EAAE;IAC7B,OAAO,CACH;QACI,oBAAC,8BAAkB,OAAG,CACvB,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC;;;;;;;;;;;;;;;;;;ACZzB,yFAAsC;AAEtC,2GAAqD;AAErD,kBAAe,IAAI,sBAAO,CAAC,gBAAc,CAAC,CAAC;;;;;;;;;;;;;;;ACJ3C,sDAAsD;AACtD,2GAAqD;AACrD,4EAA8D;AAE9D,kBAAe,IAAI,sBAAO,CAAC;IACvB,WAAW,EAAE,wBAAc;IAC3B,YAAY,EAAE;QACV,kCAAkC;QAClC,8CAA8C;QAC9C,mCAAmC;KACtC;IACD,oBAAoB,EAAE;QAClB;YACI,IAAI,EAAE,uBAAuB;YAC7B,MAAM,EAAE,2BAAiB;SAC5B;KACJ;CACJ,CAAC,CAAC;;;;;;;;;;;;;;;;ACjBU,yBAAiB,GAAG,CAAC,gBAAgB,EAAE,cAAc,EAAE,EAAE,CAClE,gBAAgB;KACX,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;IACV,IAAI,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE;QACzC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,OAAO;YACH,CAAC,IAAI,CAAC,EAAE,IAAI;SACf,CAAC;KACL;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;KACD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;;;;;;;;;;;;ACXlC,4E;;;;;;;;;;;ACAA,uD;;;;;;;;;;;ACAA,iC;;;;;;;;;;;ACAA,kC;;;;;;;;;;;ACAA,uC","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","import React, { FC, useState } from 'react';\nimport { Col, Row, Input } from 'antd';\nimport { MessagesList } from './messagesList/index';\nimport { messagesData } from './mock';\nimport { IMessageList } from './types/message';\n\n\nexport const MessengerComponent: FC = () => {\n    const [enterValue, setEnterValue] = useState<string>('');\n    const [userMessagesList, setUserMessagesList] = useState<IMessageList[]>(messagesData);\n    const handleEnterButton = (e) => {\n        setUserMessagesList([\n            ...userMessagesList,\n            {\n                id: Math.random(),\n                loginUser: true,\n                message: enterValue,\n            },\n        ]);\n        setEnterValue('');\n    };\n\n    return (\n        <Row gutter={[24, 6]}>\n            <Col md={24}>\n                <MessagesList userMessagesList={userMessagesList} />\n            </Col>\n            <Col md={24}>\n                <Input\n                    value={enterValue}\n                    onChange={(e: any) => setEnterValue(e?.target?.value)}\n                    onPressEnter={(e) => handleEnterButton(e)}\n                    placeholder=\"Please Enter\"\n                />\n            </Col>\n        </Row>\n    );\n};\n","import React, { FC } from 'react';\nimport { Col, Row } from 'antd';\nimport { IMessageList } from '../types/message';\n\ninterface IProps {\n    userMessagesList: IMessageList[]\n}\nexport const MessagesList: FC<IProps> = ({ userMessagesList }) => {\n    return (\n        <Row>\n            {userMessagesList?.map((item:IMessageList, index: number) => {\n                if (!item.loginUser) {\n                    return (\n                        <Col md={24} key={index} style={{ textAlign: 'right' }}>\n                            <p>{item?.message}</p>\n                        </Col>\n                    );\n                } else {\n                    return (\n                        <Col md={24} key={index}>\n                            <p>{item?.message}</p>\n                        </Col>\n                    );\n                }\n            })}\n        </Row>\n    );\n};\n","export const messagesData = [\n    {\n        id: 1,\n        loginUser: true,\n        message: 'Hello!',\n    },\n    {\n        id: 2,\n        loginUser: false,\n        message: 'Hey!',\n    },\n    {\n        id: 3,\n        loginUser: true,\n        message: 'How are you!',\n    },\n    {\n        id: 4,\n        loginUser: false,\n        message: 'I am fine!',\n    },\n];\n","import * as React from 'react';\nimport { IMenuPosition } from '@common-stack/client-react';\nimport { FileOutlined } from '@ant-design/icons';\nimport { userIsAuthenticatedRedir } from '@adminide-stack/user-auth0-browser';\nimport { DashboardFill } from '@adminide-stack/platform-browser/lib/components';\nimport { IPreDefineAccountPermissions, ConfigurationTarget } from '@adminide-stack/core';\nimport { getFilteredRoutes } from './utils';\nimport { IntlProvider } from 'react-intl';\n\nconst Dashboard = React.lazy(() => import('./containers/Dashboard'));\nconst Messenger = React.lazy(() => import('./containers/Messenger'));\n\nexport const DashboardProvider = () => {\n    return (\n        <DashboardFill>\n            {/* <Dashboard/> */}\n            <IntlProvider locale=\"en\">\n                <Messenger />\n            </IntlProvider>\n        </DashboardFill>\n    );\n};\n\nexport const messengerPageStore: any[] = [\n    // {\n    //     exact: false,\n    //     icon: <FileOutlined />,\n    //     key: 'dashboard',\n    //     component: userIsAuthenticatedRedir(Dashboard),\n    //     position: IMenuPosition.MIDDLE,\n    //     tab: 'Dashboard',\n    //     name: 'Dashboard',\n    //     path: '/:orgName/o/dashboard',\n    //     priority: 1,\n    // },\n];\n\nconst selectedRoutesAndMenus = ['dashboard'];\n\nconst filteredRoutes = getFilteredRoutes(messengerPageStore, selectedRoutesAndMenus);\nexport { filteredRoutes };\n","import * as React from 'react';\n\nconst Dashboard: React.FC = () => {\n    return <> This is Dashboard page </>;\n};\n\nexport default Dashboard;\n","import * as React from 'react';\nimport { PostViewPage } from './../components/post/index';\nimport { MessengerComponent } from './../components/messenger'\n\nconst Messenger: React.FC = () => {\n    return (\n        <>\n            <MessengerComponent />\n        </>\n    );\n};\n\nexport default Messenger;\n","import PlatformModule from './module';\n\nimport { Feature } from '@common-stack/client-react';\n\nexport default new Feature(PlatformModule);\n","/* eslint-disable import/no-extraneous-dependencies */\nimport { Feature } from '@common-stack/client-react';\nimport { filteredRoutes, DashboardProvider } from './compute';\n\nexport default new Feature({\n    routeConfig: filteredRoutes,\n    stylesInsert: [\n        'bootstrap/dist/css/bootstrap.css',\n        'jasny-bootstrap/dist/css/jasny-bootstrap.css',\n        'font-awesome/css/font-awesome.css',\n    ],\n    componentFillPlugins: [\n        {\n            name: 'report-fill-component',\n            render: DashboardProvider,\n        },\n    ],\n});\n","export const getFilteredRoutes = (accountPageStore, selectedRoutes) =>\n    accountPageStore\n        .map((item) => {\n            if (selectedRoutes.indexOf(item.key) !== -1) {\n                const { path } = item;\n                return {\n                    [path]: item,\n                };\n            }\n            return null;\n        })\n        .filter((valid) => valid);\n","module.exports = require(\"@adminide-stack/platform-browser/lib/components\");","module.exports = require(\"@common-stack/client-react\");","module.exports = require(\"antd\");","module.exports = require(\"react\");","module.exports = require(\"react-intl\");"],"sourceRoot":""}
+{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/messenger/avatar/index.tsx","webpack:///./src/components/messenger/avatar/style.ts","webpack:///./src/components/messenger/index.tsx","webpack:///./src/components/messenger/messagesList/index.tsx","webpack:///./src/components/messenger/mock.ts","webpack:///./src/components/messenger/style.ts","webpack:///./src/compute.tsx","webpack:///./src/containers/Dashboard.tsx","webpack:///./src/containers/Messenger.tsx","webpack:///./src/index.tsx","webpack:///./src/module.ts","webpack:///./src/utils/index.ts","webpack:///external \"@adminide-stack/platform-browser/lib/components\"","webpack:///external \"@common-stack/client-react\"","webpack:///external \"antd\"","webpack:///external \"classnames\"","webpack:///external \"react\"","webpack:///external \"react-fela\"","webpack:///external \"react-intl\""],"names":[],"mappings":"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","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","import React from 'react';\nimport classNames from 'classnames';\n\nimport { useFela } from 'react-fela';\nimport { styleSheet } from './style';\n\ntype IAvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\ntype IProps = {\n    text?: string;\n    url?: string | any;\n    size?: IAvatarSize;\n    username?: string;\n};\n\nexport const Avatar = ({ url, size = 'md', text, username }: IProps) => {\n    const { css } = useFela();\n    const classes = classNames(`Avatar Avatar-${size}`);\n\n    if (text) {\n        return (\n            <div className={css(styleSheet.avatarStyles as any)}>\n                <div className={classes + ` Avatar-plain`} data-content={text} />\n            </div>\n        );\n    }\n    return (\n        <div className={css(styleSheet.avatarStyles as any)}>\n            <img src={url} className={classes} alt=\"\" />\n            <div className=\"username\"> \n                <h4>{username}</h4>\n                <p>6:40</p>\n            </div>\n        </div>\n    );\n};\n","export const styleSheet = {\n    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n    avatarStyles: () => ({\n        display: 'flex',\n        alignItems: 'center',\n        '& .Avatar': {\n            '-webkit-user-select': 'none',\n            /* Chrome all / Safari all */\n            '-moz-user-select': 'none',\n            /* Firefox all */\n            '-ms-user-select': 'none',\n            /* IE 10+ */\n            'user-select': 'none',\n            verticalAlign: 'sub',\n        },\n        '& .Avatar, .Avatar:focus, .Avatar.a11y--focused': {\n            borderRadius: '50%',\n        },\n        '& .Avatar.Avatar-xs': {\n            width: '20px',\n            minWidth: '20px',\n            height: '20px',\n            fontSize: '9.5px',\n        },\n        '& .Avatar.Avatar-sm': {\n            width: '24px',\n            minWidth: '24px',\n            height: '24px',\n            fontSize: '10px',\n        },\n        '& .Avatar.Avatar-md': {\n            width: '32px',\n            minWidth: '32px',\n            height: '32px',\n            fontSize: '12px',\n        },\n        '& .Avatar.Avatar-lg': {\n            width: '36px',\n            minWidth: '36px',\n            height: '36px',\n            fontSize: '14px',\n        },\n        '& .Avatar.Avatar-xl': {\n            width: '50px',\n            minWidth: '50px',\n            height: '50px',\n            fontSize: '18px',\n        },\n        '& .Avatar.Avatar-xxl': {\n            width: '128px',\n            minWidth: '128px',\n            height: '128px',\n            fontSize: '44px',\n        },\n        '& .Avatar.Avatar-plain': {\n            position: 'relative',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            background: 'red',\n        },\n        '& .Avatar.Avatar-plain::before': {\n            position: 'absolute',\n            display: 'inline-flex',\n            width: '100%',\n            height: '100%',\n            alignItems: 'center',\n            justifyContent: 'center',\n            borderRadius: '50%',\n            color: 'rgba(0, 1, 0, )',\n            content: 'attr(data-content)',\n        },\n        '& .username': {\n            marginBottom: '30px',\n            marginLeft: '10px',\n        },\n        '& .username p': {\n            marginBottom: '30px',\n            marginLeft: '10px',\n        },\n    }),\n};\n","import React, { FC, useState } from 'react';\nimport { Col, Row, Input, Card } from 'antd';\nimport { MessagesList } from './messagesList/index';\nimport { messagesData } from './mock';\nimport { IMessageList } from './types/message';\nimport { useFela } from 'react-fela';\nimport { styleSheet } from './style';\n\nexport const MessengerComponent: FC = () => {\n    const { css } = useFela();\n    const [enterValue, setEnterValue] = useState<string>('');\n    const [userMessagesList, setUserMessagesList] = useState<IMessageList[]>(messagesData);\n    const handleEnterButton = (e) => {\n        setUserMessagesList([\n            ...userMessagesList,\n            {\n                id: Math.random(),\n                loginUser: true,\n                message: enterValue,\n            },\n        ]);\n        setEnterValue('');\n    };\n\n    return (\n        <div className={css(styleSheet.messengerStyles as any)}>\n            <Row gutter={[24, 6]}>\n                <Card style={{ width: '100%', marginBottom: '100px' }}>\n                    <Col md={24}>\n                        <MessagesList userMessagesList={userMessagesList} />\n                    </Col>\n                </Card>\n                    <Col md={24} className=\"message--box-outer\">\n                        <Input\n                            value={enterValue}\n                            onChange={(e: any) => setEnterValue(e?.target?.value)}\n                            onPressEnter={(e) => handleEnterButton(e)}\n                            placeholder=\"Please Enter\"\n                        />\n                    </Col>\n            </Row>\n        </div>\n    );\n};\n","import React, { FC } from 'react';\nimport { Col, Row } from 'antd';\nimport { IMessageList } from '../types/message';\nimport { Avatar} from '../avatar'\n\ninterface IProps {\n    userMessagesList: IMessageList[];\n}\nexport const MessagesList: FC<IProps> = ({ userMessagesList }) => {\n    return (    \n        <Row gutter={[24, 6]}>\n            {userMessagesList?.map((item: IMessageList, index: number) => {\n                if (!item.loginUser) {\n                    return (\n                        <Col md={24} key={index} style={{ textAlign: 'right' }}>\n                            <p>{item?.message}</p>\n                        </Col>\n                    );\n                } else {\n                    return (\n                        <Col md={24} key={index}>\n                            <Avatar url='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80' size='lg' username='admin'/>\n                            <p>{item?.message}</p>\n                        </Col>\n                    );\n                }\n            })}\n        </Row>\n    );\n};\n","export const messagesData = [\n    {\n        id: 1,\n        loginUser: true,\n        message: 'Hello!',\n    },\n    {\n        id: 2,\n        loginUser: false,\n        message: 'Hey!',\n    },\n    {\n        id: 3,\n        loginUser: true,\n        message: 'How are you!',\n    },\n    {\n        id: 4,\n        loginUser: false,\n        message: 'I am fine!',\n    },\n];\n\nexport const userProfile = [\n    {\n        displayName: 'nickname',\n        isBusy: false,\n        user: { username: 'Admin' },\n        isShared: true,\n        disablePopover: true,\n        displayUsername: true,\n        hasMention: false,\n        hideStatus: false,\n    },\n];\n","export const styleSheet = {\n    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\n    messengerStyles: () => ({\n        display: 'inharit',\n        '& .message--box-outer': {\n            position: 'fixed',\n            bottom: '10%',\n            width: '84.7%',\n        },\n    }),\n};\n","import * as React from 'react';\nimport { IMenuPosition } from '@common-stack/client-react';\nimport { FileOutlined } from '@ant-design/icons';\nimport { userIsAuthenticatedRedir } from '@adminide-stack/user-auth0-browser';\nimport { DashboardFill } from '@adminide-stack/platform-browser/lib/components';\nimport { IPreDefineAccountPermissions, ConfigurationTarget } from '@adminide-stack/core';\nimport { getFilteredRoutes } from './utils';\nimport { IntlProvider } from 'react-intl';\n\nconst Dashboard = React.lazy(() => import('./containers/Dashboard'));\nconst Messenger = React.lazy(() => import('./containers/Messenger'));\n\nexport const DashboardProvider = () => {\n    return (\n        <DashboardFill>\n            {/* <Dashboard/> */}\n            <IntlProvider locale=\"en\">\n                <Messenger />\n            </IntlProvider>\n        </DashboardFill>\n    );\n};\n\nexport const messengerPageStore: any[] = [\n    // {\n    //     exact: false,\n    //     icon: <FileOutlined />,\n    //     key: 'dashboard',\n    //     component: userIsAuthenticatedRedir(Dashboard),\n    //     position: IMenuPosition.MIDDLE,\n    //     tab: 'Dashboard',\n    //     name: 'Dashboard',\n    //     path: '/:orgName/o/dashboard',\n    //     priority: 1,\n    // },\n];\n\nconst selectedRoutesAndMenus = ['dashboard'];\n\nconst filteredRoutes = getFilteredRoutes(messengerPageStore, selectedRoutesAndMenus);\nexport { filteredRoutes };\n","import * as React from 'react';\n\nconst Dashboard: React.FC = () => {\n    return <> This is Dashboard page </>;\n};\n\nexport default Dashboard;\n","import * as React from 'react';\nimport { PostViewPage } from './../components/post/index';\nimport { MessengerComponent } from './../components/messenger'\n\nconst Messenger: React.FC = () => {\n    return (\n        <>\n            <MessengerComponent />\n        </>\n    );\n};\n\nexport default Messenger;\n","import PlatformModule from './module';\n\nimport { Feature } from '@common-stack/client-react';\n\nexport default new Feature(PlatformModule);\n","/* eslint-disable import/no-extraneous-dependencies */\nimport { Feature } from '@common-stack/client-react';\nimport { filteredRoutes, DashboardProvider } from './compute';\n\nexport default new Feature({\n    routeConfig: filteredRoutes,\n    stylesInsert: [\n        'bootstrap/dist/css/bootstrap.css',\n        'jasny-bootstrap/dist/css/jasny-bootstrap.css',\n        'font-awesome/css/font-awesome.css',\n    ],\n    componentFillPlugins: [\n        {\n            name: 'report-fill-component',\n            render: DashboardProvider,\n        },\n    ],\n});\n","export const getFilteredRoutes = (accountPageStore, selectedRoutes) =>\n    accountPageStore\n        .map((item) => {\n            if (selectedRoutes.indexOf(item.key) !== -1) {\n                const { path } = item;\n                return {\n                    [path]: item,\n                };\n            }\n            return null;\n        })\n        .filter((valid) => valid);\n","module.exports = require(\"@adminide-stack/platform-browser/lib/components\");","module.exports = require(\"@common-stack/client-react\");","module.exports = require(\"antd\");","module.exports = require(\"classnames\");","module.exports = require(\"react\");","module.exports = require(\"react-fela\");","module.exports = require(\"react-intl\");"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@messenger-box/platform-browser",
-  "version": "0.0.1-alpha.16",
+  "version": "0.0.1-alpha.17",
   "description": "Sample core for higher packages to depend on",
   "license": "ISC",
   "author": "CDMBase LLC",
@@ -64,5 +64,5 @@
   "typescript": {
     "definition": "lib/index.d.ts"
   },
-  "gitHead": "8b1812cc805ac1c2264ce58f4ba59daa24b97249"
+  "gitHead": "94fd90e6112304d90cb9895de90798a56cb0563a"
 }

package/src/components/messenger/avatar/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { useFela } from 'react-fela';
+import { styleSheet } from './style';
+
+type IAvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+type IProps = {
+    text?: string;
+    url?: string | any;
+    size?: IAvatarSize;
+    username?: string;
+};
+
+export const Avatar = ({ url, size = 'md', text, username }: IProps) => {
+    const { css } = useFela();
+    const classes = classNames(`Avatar Avatar-${size}`);
+
+    if (text) {
+        return (
+            <div className={css(styleSheet.avatarStyles as any)}>
+                <div className={classes + ` Avatar-plain`} data-content={text} />
+            </div>
+        );
+    }
+    return (
+        <div className={css(styleSheet.avatarStyles as any)}>
+            <img src={url} className={classes} alt="" />
+            <div className="username"> 
+                <h4>{username}</h4>
+                <p>6:40</p>
+            </div>
+        </div>
+    );
+};

package/src/components/messenger/avatar/style.ts

@@ -0,0 +1,82 @@
+export const styleSheet = {
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    avatarStyles: () => ({
+        display: 'flex',
+        alignItems: 'center',
+        '& .Avatar': {
+            '-webkit-user-select': 'none',
+            /* Chrome all / Safari all */
+            '-moz-user-select': 'none',
+            /* Firefox all */
+            '-ms-user-select': 'none',
+            /* IE 10+ */
+            'user-select': 'none',
+            verticalAlign: 'sub',
+        },
+        '& .Avatar, .Avatar:focus, .Avatar.a11y--focused': {
+            borderRadius: '50%',
+        },
+        '& .Avatar.Avatar-xs': {
+            width: '20px',
+            minWidth: '20px',
+            height: '20px',
+            fontSize: '9.5px',
+        },
+        '& .Avatar.Avatar-sm': {
+            width: '24px',
+            minWidth: '24px',
+            height: '24px',
+            fontSize: '10px',
+        },
+        '& .Avatar.Avatar-md': {
+            width: '32px',
+            minWidth: '32px',
+            height: '32px',
+            fontSize: '12px',
+        },
+        '& .Avatar.Avatar-lg': {
+            width: '36px',
+            minWidth: '36px',
+            height: '36px',
+            fontSize: '14px',
+        },
+        '& .Avatar.Avatar-xl': {
+            width: '50px',
+            minWidth: '50px',
+            height: '50px',
+            fontSize: '18px',
+        },
+        '& .Avatar.Avatar-xxl': {
+            width: '128px',
+            minWidth: '128px',
+            height: '128px',
+            fontSize: '44px',
+        },
+        '& .Avatar.Avatar-plain': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'red',
+        },
+        '& .Avatar.Avatar-plain::before': {
+            position: 'absolute',
+            display: 'inline-flex',
+            width: '100%',
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            color: 'rgba(0, 1, 0, )',
+            content: 'attr(data-content)',
+        },
+        '& .username': {
+            marginBottom: '30px',
+            marginLeft: '10px',
+        },
+        '& .username p': {
+            marginBottom: '30px',
+            marginLeft: '10px',
+        },
+    }),
+};

package/src/components/messenger/index.tsx

@@ -1,11 +1,13 @@
 import React, { FC, useState } from 'react';
-import { Col, Row, Input } from 'antd';
+import { Col, Row, Input, Card } from 'antd';
 import { MessagesList } from './messagesList/index';
 import { messagesData } from './mock';
 import { IMessageList } from './types/message';
-
+import { useFela } from 'react-fela';
+import { styleSheet } from './style';
 
 export const MessengerComponent: FC = () => {
+    const { css } = useFela();
     const [enterValue, setEnterValue] = useState<string>('');
     const [userMessagesList, setUserMessagesList] = useState<IMessageList[]>(messagesData);
     const handleEnterButton = (e) => {
@@ -21,18 +23,22 @@ export const MessengerComponent: FC = () => {
     };
 
     return (
-        <Row gutter={[24, 6]}>
-            <Col md={24}>
-                <MessagesList userMessagesList={userMessagesList} />
-            </Col>
-            <Col md={24}>
-                <Input
-                    value={enterValue}
-                    onChange={(e: any) => setEnterValue(e?.target?.value)}
-                    onPressEnter={(e) => handleEnterButton(e)}
-                    placeholder="Please Enter"
-                />
-            </Col>
-        </Row>
+        <div className={css(styleSheet.messengerStyles as any)}>
+            <Row gutter={[24, 6]}>
+                <Card style={{ width: '100%', marginBottom: '100px' }}>
+                    <Col md={24}>
+                        <MessagesList userMessagesList={userMessagesList} />
+                    </Col>
+                </Card>
+                    <Col md={24} className="message--box-outer">
+                        <Input
+                            value={enterValue}
+                            onChange={(e: any) => setEnterValue(e?.target?.value)}
+                            onPressEnter={(e) => handleEnterButton(e)}
+                            placeholder="Please Enter"
+                        />
+                    </Col>
+            </Row>
+        </div>
     );
 };

package/src/components/messenger/messagesList/index.tsx

@@ -1,14 +1,15 @@
 import React, { FC } from 'react';
 import { Col, Row } from 'antd';
 import { IMessageList } from '../types/message';
+import { Avatar} from '../avatar'
 
 interface IProps {
-    userMessagesList: IMessageList[]
+    userMessagesList: IMessageList[];
 }
 export const MessagesList: FC<IProps> = ({ userMessagesList }) => {
-    return (
-        <Row>
-            {userMessagesList?.map((item:IMessageList, index: number) => {
+    return (    
+        <Row gutter={[24, 6]}>
+            {userMessagesList?.map((item: IMessageList, index: number) => {
                 if (!item.loginUser) {
                     return (
                         <Col md={24} key={index} style={{ textAlign: 'right' }}>
@@ -18,6 +19,7 @@ export const MessagesList: FC<IProps> = ({ userMessagesList }) => {
                 } else {
                     return (
                         <Col md={24} key={index}>
+                            <Avatar url='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80' size='lg' username='admin'/>
                             <p>{item?.message}</p>
                         </Col>
                     );

package/src/components/messenger/mock.ts

@@ -20,3 +20,16 @@ export const messagesData = [
         message: 'I am fine!',
     },
 ];
+
+export const userProfile = [
+    {
+        displayName: 'nickname',
+        isBusy: false,
+        user: { username: 'Admin' },
+        isShared: true,
+        disablePopover: true,
+        displayUsername: true,
+        hasMention: false,
+        hideStatus: false,
+    },
+];

package/src/components/messenger/style.ts

@@ -0,0 +1,11 @@
+export const styleSheet = {
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    messengerStyles: () => ({
+        display: 'inharit',
+        '& .message--box-outer': {
+            position: 'fixed',
+            bottom: '10%',
+            width: '84.7%',
+        },
+    }),
+};