@esvndev/es-react-template-chat 0.0.75 → 0.0.77

package/dist/index.js

@@ -17,6 +17,8 @@ var esTemplateHelp = require('@esvndev/es-template-help');
 var constants = require('@src/domain/constants');
 var isNullOrUndefined$2 = require('@src/utility/hooks/isNullOrUndefined');
 var avatarDefault = require('@core/assets/images/avatars/avatar-blank.png');
+require('@draft-js-plugins/mention/lib/plugin.css');
+require('@draft-js-plugins/emoji/lib/plugin.css');
 var reactRouterDom = require('react-router-dom');
 var reactRedux = require('react-redux');
 
@@ -21518,6 +21520,85 @@ function commonjsRequire (path) {
 	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
 
+var classnames$1 = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = '';
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (arg) {
+				classes = appendClass(classes, parseValue(arg));
+			}
+		}
+
+		return classes;
+	}
+
+	function parseValue (arg) {
+		if (typeof arg === 'string' || typeof arg === 'number') {
+			return arg;
+		}
+
+		if (typeof arg !== 'object') {
+			return '';
+		}
+
+		if (Array.isArray(arg)) {
+			return classNames.apply(null, arg);
+		}
+
+		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+			return arg.toString();
+		}
+
+		var classes = '';
+
+		for (var key in arg) {
+			if (hasOwn.call(arg, key) && arg[key]) {
+				classes = appendClass(classes, key);
+			}
+		}
+
+		return classes;
+	}
+
+	function appendClass (value, newClass) {
+		if (!newClass) {
+			return value;
+		}
+	
+		if (value) {
+			return value + ' ' + newClass;
+		}
+	
+		return value + newClass;
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames$1));
+
+var classnames = classnames$1.exports;
+
 var vi = {exports: {}};
 
 var dayjs_min = {exports: {}};
@@ -29463,85 +29544,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 var PropTypes = propTypes$s.exports;
 
-var classnames$1 = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-/* global define */
-
-(function () {
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames () {
-		var classes = '';
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (arg) {
-				classes = appendClass(classes, parseValue(arg));
-			}
-		}
-
-		return classes;
-	}
-
-	function parseValue (arg) {
-		if (typeof arg === 'string' || typeof arg === 'number') {
-			return arg;
-		}
-
-		if (typeof arg !== 'object') {
-			return '';
-		}
-
-		if (Array.isArray(arg)) {
-			return classNames.apply(null, arg);
-		}
-
-		if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-			return arg.toString();
-		}
-
-		var classes = '';
-
-		for (var key in arg) {
-			if (hasOwn.call(arg, key) && arg[key]) {
-				classes = appendClass(classes, key);
-			}
-		}
-
-		return classes;
-	}
-
-	function appendClass (value, newClass) {
-		if (!newClass) {
-			return value;
-		}
-	
-		if (value) {
-			return value + ' ' + newClass;
-		}
-	
-		return value + newClass;
-	}
-
-	if (module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else {
-		window.classNames = classNames;
-	}
-}());
-}(classnames$1));
-
-var classnames = classnames$1.exports;
-
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$9(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty$9(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -36703,6 +36705,14 @@ var SvgLogOut = function (_a) {
         React__namespace.createElement("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" })));
 };
 
+var SvgMail = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "mail_svg__feather mail_svg__feather-mail", "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
+        React__namespace.createElement("path", { d: "m22 6-10 7L2 6" })));
+};
+
 var SvgMessageCircle = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "message-circle_svg__feather message-circle_svg__feather-message-circle", "aria-labelledby": titleId }, props),
@@ -36710,6 +36720,13 @@ var SvgMessageCircle = function (_a) {
         React__namespace.createElement("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })));
 };
 
+var SvgMessageSquare = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "message-square_svg__feather message-square_svg__feather-message-square", "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })));
+};
+
 var SvgPaperclip = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "paperclip_svg__feather paperclip_svg__feather-paperclip", "aria-labelledby": titleId }, props),
@@ -36717,6 +36734,13 @@ var SvgPaperclip = function (_a) {
         React__namespace.createElement("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })));
 };
 
+var SvgPhoneCall = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
+    return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "phone-call_svg__feather phone-call_svg__feather-phone-call", "aria-labelledby": titleId }, props),
+        title ? React__namespace.createElement("title", { id: titleId }, title) : null,
+        React__namespace.createElement("path", { d: "M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" })));
+};
+
 var SvgPlus = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest(_a, ["title", "titleId"]);
     return (React__namespace.createElement("svg", __assign$1({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "plus_svg__feather plus_svg__feather-plus", "aria-labelledby": titleId }, props),
@@ -71778,6 +71802,30 @@ module.exports = exports['default'];
 
 var PerfectScrollbar = /*@__PURE__*/getDefaultExportFromCjs(lib.exports);
 
+const UserProfileSidebar = (props) => {
+    // ** Props
+    const { user, handleUserSidebarRight, userSidebarRight } = props;
+    const { t } = reactI18next.useTranslation();
+    const userAvatar = (user && user.avatar) ? user.avatar : DEFAULT_AVATAR;
+    return (jsxRuntime.jsxs("div", { className: classnames('user-profile-sidebar', { show: userSidebarRight === true }), children: [jsxRuntime.jsxs("header", { className: 'user-profile-header', children: [jsxRuntime.jsx("span", { className: 'close-icon', onClick: handleUserSidebarRight, children: jsxRuntime.jsx(SvgX, { fontSize: 14 }) }), jsxRuntime.jsxs("div", { className: 'header-profile-sidebar', children: [jsxRuntime.jsx(AvatarDefault, { className: 'box-shadow-1 avatar-border', size: 'xl', status: user.status === 1 ? 'online' : 'offline', img: userAvatar, imgHeight: '70', imgWidth: '70', color: 'light-secondary' }), jsxRuntime.jsx("h4", { className: 'chat-user-name', children: user.name }), jsxRuntime.jsx("span", { className: 'user-post', children: user.code })] })] }), jsxRuntime.jsx(PerfectScrollbar, { className: 'user-profile-sidebar-area', options: { wheelPropagation: false }, children: jsxRuntime.jsxs("div", { className: 'personal-info', children: [jsxRuntime.jsx("h6", { className: 'section-label mb-1 mt-3', children: t('Personal Information') }), jsxRuntime.jsxs("ul", { className: 'list-unstyled', children: [jsxRuntime.jsxs("li", { className: 'mb-1', children: [jsxRuntime.jsx(SvgMail, { className: 'me-75', fontSize: 17 }), jsxRuntime.jsx("span", { className: 'align-middle', children: user?.email })] }), jsxRuntime.jsxs("li", { className: 'mb-1', children: [jsxRuntime.jsx(SvgPhoneCall, { className: 'me-50', fontSize: 17 }), jsxRuntime.jsx("span", { className: 'align-middle', children: user?.phone })] })] })] }) })] }));
+};
+
+const DateHeader = React.memo(({ label }) => (jsxRuntime.jsx("div", { className: "d-flex justify-content-center", children: jsxRuntime.jsx("div", { style: {
+            backgroundColor: "rgba(0,0,0,0.2)",
+            padding: "2px 15px",
+            borderRadius: "6px"
+        }, children: jsxRuntime.jsx("p", { className: "m-0", style: { textAlign: "center", color: "#fff" }, children: label }) }) })));
+DateHeader.displayName = 'DateHeader';
+const ChatLog = (props) => {
+    // ** Props & Store
+    // const clipboard = useClipboard()
+    const { contactId, chatRoomId } = useChat();
+    const containerChatRef = React.useRef(null);
+    return (jsxRuntime.jsx("div", { id: "chat-app-window", className: "chat-app-window", ref: containerChatRef, children: jsxRuntime.jsxs("div", { className: classnames("start-chat-area", {
+                "d-none": contactId || chatRoomId
+            }), children: [jsxRuntime.jsx("div", { className: "start-chat-icon mb-1", children: jsxRuntime.jsx(SvgMessageSquare, {}) }), jsxRuntime.jsx("h4", { className: "sidebar-toggle start-chat-text", children: "B\u1EAFt \u0111\u1EA7u tr\u00F2 chuy\u1EC7n" })] }) }));
+};
+
 var __extends$4 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -75813,14 +75861,16 @@ const AppChat = () => {
         return { innerWidth, innerHeight };
     };
     // ** States
-    React.useState({});
+    const [user, setUser] = React.useState({});
     const [sidebar, setSidebar] = React.useState(false);
-    React.useState(false);
-    React.useState(false);
+    const [sidebarRight, setSidebarRight] = React.useState(false);
+    const [userSidebarRight, setUserSidebarRight] = React.useState(false);
     const [userSidebarLeft, setUserSidebarLeft] = React.useState(false);
     const [dataProfile, setDataProfile] = React.useState({});
     const handleSidebar = () => setSidebar(!sidebar);
+    const handleSidebarRight = () => setSidebarRight(!sidebarRight);
     const handleUserSidebarLeft = () => setUserSidebarLeft(!userSidebarLeft);
+    const handleUserSidebarRight = () => setUserSidebarRight(!userSidebarRight);
     const [openModal, setOpenModal] = React.useState(false);
     const [typeOpenModalAdd, setTypeOpenModalAdd] = React.useState(false);
     const [tagFilter, setTagFilter] = React.useState('');
@@ -75830,14 +75880,22 @@ const AppChat = () => {
     const [openModalGroup, setOpenModalGroup] = React.useState(false);
     const [windowSize, setWindowSize] = React.useState(getWindowSize());
     const [dataInfo, setDataInfo] = React.useState({});
-    //const [dataItem, setDataItem] = useState<any>({})
+    React.useState({});
     const [search, setSearch] = React.useState('');
     const [currentPage, setCurrentPage] = React.useState(1);
     const [contact, setContact] = React.useState([]);
+    // ** Set user function for Right Sidebar
+    const handleUser = (obj) => setUser(obj);
     const handleModal = () => setOpenModal(!openModal);
     const handleModalGroup = () => setOpenModalGroup(!openModalGroup);
     const handleModalAddUserGroup = () => setOpenModalAddUserGroup(!openModalAddUserGroup);
     const handleModalGroupInfo = () => setOpenModalGroupInfo(!openModalGroupInfo);
+    const handleOverlayClick = () => {
+        setSidebar(false);
+        setUserSidebarRight(false);
+        setUserSidebarLeft(false);
+        setSidebarRight(false);
+    };
     React.useEffect(() => {
         if (typeChat !== 'CONTACT') {
             getData();
@@ -75876,7 +75934,7 @@ const AppChat = () => {
             order: '',
             pageNumber: 1,
             pageSize: 20,
-            tag: tagFilter || undefined
+            tag: tagFilter
         };
         getHistoryApi(paging);
     };
@@ -75893,6 +75951,23 @@ const AppChat = () => {
             .then((rs) => setDataInfo(rs))
             .catch((ex) => console.log(ex));
     };
+    const getMessageByGroup = async (param, pageNumber) => {
+        if (chatRoomId === param) {
+            const paging = {
+                keyword: '',
+                filter: '',
+                order: 'createdDate;asc',
+                pageNumber,
+                pageSize: 25
+            };
+            try {
+                await connection.invoke('GetMessageByGroupHistory', chatRoomId, paging);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    };
     const getMessageByContact = async (param, pageNumber) => {
         const paging = {
             keyword: '',
@@ -75920,6 +75995,14 @@ const AppChat = () => {
             .then((rs) => setContact(rs.items))
             .catch((ex) => console.log(ex));
     };
+    const sendMessage = async (id, message) => {
+        try {
+            await connection.invoke("SendMessage", id, message);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
     const joinRoom = async (id) => {
         try {
             await connection.invoke("JoinRoom", id);
@@ -75952,6 +76035,22 @@ const AppChat = () => {
             console.error(e);
         }
     };
+    const chatGetType = async (chatRoomId, userId, keyword, type, startDate, endDate, pageNumber, pageSize) => {
+        try {
+            await connection.invoke("ChatGetType", chatRoomId, userId, keyword, type, startDate, endDate, pageNumber, pageSize);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    const chatGetGroupCreateDate = async (chatRoomId, userId, keyword, type, startDate, endDate, pageNumber, pageSize) => {
+        try {
+            await connection.invoke("ChatGetGroupCreateDate", chatRoomId, userId, keyword, type, startDate, endDate, pageNumber, pageSize);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
     const removeChatRoom = async (chatRoomId) => {
         try {
             await connection.invoke("RemoveChatRoom", chatRoomId);
@@ -75960,6 +76059,14 @@ const AppChat = () => {
             console.error(e);
         }
     };
+    const approveUpdateStatus = async (id, chatRoomId, status) => {
+        try {
+            await connection.invoke("ApproveUpdateStatus", id, chatRoomId, status);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
     const editGroupName = async (chatRoomId, chatRoomName) => {
         try {
             await connection.invoke("EditGroupName", chatRoomId, chatRoomName);
@@ -75968,6 +76075,22 @@ const AppChat = () => {
             console.error(e);
         }
     };
+    const pinMessage = async (chatRoomId, messageId) => {
+        try {
+            await connection.invoke("PinMessage", chatRoomId, messageId);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    const getPinnedMessages = async (chatRoomId) => {
+        try {
+            await connection.invoke("GetPinnedMessages", chatRoomId);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
     const editGroupAvatar = async (chatRoomId, chatRoomAvatar) => {
         try {
             await connection.invoke("EditGroupAvatar", chatRoomId, chatRoomAvatar);
@@ -75985,7 +76108,14 @@ const AppChat = () => {
         loadCldr(require(`@src/assets/cldr-data/main/${lang}/ca-gregorian.json`), require(`@src/assets/cldr-data/main/${lang}/numbers.json`), require(`@src/assets/cldr-data/main/${lang}/timeZoneNames.json`), require("@src/assets/supplemental/numberingSystems.json"));
         setCulture(lang); // Change the Grid culture
     }, [lang]);
-    return (jsxRuntime.jsx(React.Fragment, { children: jsxRuntime.jsxs(LexicalComposer, { initialConfig: editorConfig(['@'], '', false, [EmojiNode], mentionItems), children: [jsxRuntime.jsx(SidebarLeft, { setSearch: setSearch, activeId: active, onTagFilterChange: setTagFilter, onFilterTabChange: setFilterTab, typeChat: typeChat, dataContact: contact, dataProfile: dataProfile, data: [...listHistory]?.sort((a, b) => new Date(b?.createdDate || 0).getTime() - new Date(a?.createdDate || 0).getTime()), sidebar: sidebar, handleSidebar: handleSidebar, userSidebarLeft: userSidebarLeft, handleUserSidebarLeft: handleUserSidebarLeft, joinRoom: joinRoom, leaveRoom: leaveRoom, JoinRoomContact: JoinRoomContact, chatRoomMemberUnreadMessages: chatRoomMemberUnreadMessages, removeChatRoom: removeChatRoom, currentPage: currentPage, setCurrentPage: setCurrentPage, dataHistory: listHistory, active: active, handleModal: handleModal, handleModalGroup: handleModalGroup, handleModalAddUserGroup: handleModalAddUserGroup }), openModal && jsxRuntime.jsx(ModalComponent, { dataProfile: dataProfile, openModal: openModal, handleModal: handleModal, windowSize: windowSize }), openModalAddUserGroup && jsxRuntime.jsx(ModalAddUserGroupComponent, { dataHistory: listHistory, active: active, openModalAddUserGroup: openModalAddUserGroup, handleModalAddUserGroup: handleModalAddUserGroup, windowSize: windowSize }), openModalGroup && jsxRuntime.jsx(ModalGroupComponent, { dataHistory: listHistory, active: active, openModalGroup: openModalGroup, handleModalGroup: handleModalGroup, windowSize: windowSize, typeOpenModalAdd: typeOpenModalAdd }), openModalGroupInfo && jsxRuntime.jsx(ModalGroupInfo, { editGroupName: editGroupName, editGroupAvatar: editGroupAvatar, openModalGroupInfo: openModalGroupInfo, handleModalGroupInfo: handleModalGroupInfo, windowSize: windowSize, groupChatUsers: groupChatUsers })] }) }));
+    return (jsxRuntime.jsx(React.Fragment, { children: jsxRuntime.jsxs(LexicalComposer, { initialConfig: editorConfig(['@'], '', false, [EmojiNode], mentionItems), children: [jsxRuntime.jsx(SidebarLeft, { setSearch: setSearch, activeId: active, onTagFilterChange: setTagFilter, onFilterTabChange: setFilterTab, typeChat: typeChat, dataContact: contact, dataProfile: dataProfile, data: [...listHistory]?.sort((a, b) => new Date(b?.createdDate || 0).getTime() - new Date(a?.createdDate || 0).getTime()), sidebar: sidebar, handleSidebar: handleSidebar, userSidebarLeft: userSidebarLeft, handleUserSidebarLeft: handleUserSidebarLeft, joinRoom: joinRoom, leaveRoom: leaveRoom, JoinRoomContact: JoinRoomContact, chatRoomMemberUnreadMessages: chatRoomMemberUnreadMessages, removeChatRoom: removeChatRoom, currentPage: currentPage, setCurrentPage: setCurrentPage, dataHistory: listHistory, active: active, handleModal: handleModal, handleModalGroup: handleModalGroup, handleModalAddUserGroup: handleModalAddUserGroup }), jsxRuntime.jsx("div", { className: classnames('content-right content-chat', {
+                        'content-chat-with-sidebar-right': sidebarRight
+                    }), children: jsxRuntime.jsx("div", { className: "content-wrapper", children: jsxRuntime.jsxs("div", { className: "content-body", children: [jsxRuntime.jsx("div", { className: classnames("body-content-overlay", {
+                                        show: userSidebarRight || sidebar || userSidebarLeft || sidebarRight
+                                    }), onClick: handleOverlayClick }), jsxRuntime.jsx(ChatLog, { connectHub: sendMessage, dataHistory: listHistory, dataInfo: dataInfo, dataProfile: dataProfile, handleUser: handleUser, handleSidebar: handleSidebar, handleSidebarRight: handleSidebarRight, userSidebarLeft: userSidebarLeft, handleUserSidebarRight: handleUserSidebarRight, chatGetType: chatGetType, chatGetGroupCreateDate: chatGetGroupCreateDate, approveUpdateStatus: approveUpdateStatus, currentPage: currentPage, setCurrentPage: setCurrentPage, getMessageByGroup: getMessageByGroup, getMessageByContact: getMessageByContact, messageByGroup: messageByGroup, pinMessage: pinMessage, getPinnedMessages: getPinnedMessages, 
+                                    //handleModalAdministrative={handleModalAdministrative}
+                                    //setDataItem={setDataItem}
+                                    handleModalAddUserGroup: handleModalAddUserGroup, handleModalGroup: handleModalGroup, typeOpenModalAdd: typeOpenModalAdd, setTypeOpenModalAdd: setTypeOpenModalAdd }), jsxRuntime.jsx(UserProfileSidebar, { user: user, userSidebarRight: userSidebarRight, handleUserSidebarRight: handleUserSidebarRight })] }) }) }), openModal && jsxRuntime.jsx(ModalComponent, { dataProfile: dataProfile, openModal: openModal, handleModal: handleModal, windowSize: windowSize }), openModalAddUserGroup && jsxRuntime.jsx(ModalAddUserGroupComponent, { dataHistory: listHistory, active: active, openModalAddUserGroup: openModalAddUserGroup, handleModalAddUserGroup: handleModalAddUserGroup, windowSize: windowSize }), openModalGroup && jsxRuntime.jsx(ModalGroupComponent, { dataHistory: listHistory, active: active, openModalGroup: openModalGroup, handleModalGroup: handleModalGroup, windowSize: windowSize, typeOpenModalAdd: typeOpenModalAdd }), openModalGroupInfo && jsxRuntime.jsx(ModalGroupInfo, { editGroupName: editGroupName, editGroupAvatar: editGroupAvatar, openModalGroupInfo: openModalGroupInfo, handleModalGroupInfo: handleModalGroupInfo, windowSize: windowSize, groupChatUsers: groupChatUsers })] }) }));
 };
 
 registerLicense('ORg4AjUWIQA/Gnt2VVhiQlFadVlJXmJWf1FpTGpQdk5yd19DaVZUTX1dQl9hSXlTckVmXHtfcHNVRGM=');