contentoh-components-library 21.3.19 → 21.3.20

package/dist/components/organisms/Chat/ContentChat/index.js

@@ -0,0 +1,1466 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentChat = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _reactHowler = _interopRequireDefault(require("react-howler"));
+
+var _styles = require("./styles");
+
+var _react = require("react");
+
+var _NotFound = require("../../../atoms/NotFound");
+
+var _Header = require("../Header");
+
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
+var _Loading = require("../../../atoms/Loading");
+
+var _ContainerItems = require("../ContainerItems");
+
+var _Footer = require("../Footer");
+
+var _ChatLists = require("../ChatLists");
+
+var _CustomIcon = require("../../../atoms/CustomIcon");
+
+var _handle_http = require("../../../../global-files/handle_http");
+
+var _utils = require("../../../../global-files/utils");
+
+var _newMessage = _interopRequireDefault(require("../../../../assets/sounds/newMessage.mp3"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ContentChat = function ContentChat(props) {
+  var chatType = props.chatType,
+      chatContainerType = props.chatContainerType,
+      dataChat = props.dataChat,
+      showBtnClose = props.showBtnClose,
+      onClickBtnClose = props.onClickBtnClose,
+      showPopUpChat = props.showPopUpChat;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      companies = _useState2[0],
+      setCompanies = _useState2[1];
+  /* {
+  companyId: {
+  name: string,
+  statusChat: string  => current | open | closed
+  items: [{..}] ,
+  enabledLoadMore: boolean
+  },
+  ...
+  } chat orderProduct */
+
+
+  var _useState3 = (0, _react.useState)({
+    items: undefined,
+    enabledLoadMore: false,
+    statusChat: undefined
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      singleChat = _useState4[0],
+      setSingleChat = _useState4[1]; // chat merchantProduct o ticket
+
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      activeCompanyId = _useState6[0],
+      setActiveCompanyId = _useState6[1]; // number
+
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      allUsers = _useState8[0],
+      setAllUsers = _useState8[1]; // {...}
+
+
+  var _useState9 = (0, _react.useState)({
+    id: undefined,
+    companyId: undefined
+  }),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      currentUser = _useState10[0],
+      setCurrentUser = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({
+    status: undefined,
+    version: undefined
+  }),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      currentArticle = _useState12[0],
+      setCurrentArticle = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      lastUpdateDate = _useState14[0],
+      setLastUpdateDate = _useState14[1]; // string
+
+
+  var _useState15 = (0, _react.useState)(true),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      isLoading = _useState16[0],
+      setIsLoading = _useState16[1]; // boolean
+
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      showChatsList = _useState18[0],
+      setShowChatsList = _useState18[1]; // boolean
+
+
+  var _useState19 = (0, _react.useState)(),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      processUpdateID = _useState20[0],
+      setProcessUpdateID = _useState20[1]; // number
+
+
+  var _useState21 = (0, _react.useState)(0),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      startUpdate = _useState22[0],
+      setStartUpdate = _useState22[1]; // number
+
+
+  var _useState23 = (0, _react.useState)(0),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      runUpdate = _useState24[0],
+      setRunUpdate = _useState24[1]; // number
+
+
+  var _useState25 = (0, _react.useState)({
+    existError: false,
+    code: undefined,
+    message: undefined,
+    errorDetail: undefined
+  }),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      errorChat = _useState26[0],
+      setErrorChat = _useState26[1];
+
+  var _useState27 = (0, _react.useState)({
+    startDate: undefined,
+    // Date()
+    lastDate: undefined // Date()
+
+  }),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      errorUpdate = _useState28[0],
+      setErrorUpdate = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(false),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      playSound = _useState30[0],
+      setPlaySound = _useState30[1]; // matar update al desmontar el componente del chat
+
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (processUpdateID !== undefined) clearTimeout(processUpdateID);
+    };
+  }, []); // al cargar el componente
+
+  (0, _react.useEffect)(function () {
+    if (dataChat) {
+      stopUpdate();
+
+      if (dataChat.code) {
+        setErrorChat({
+          existError: true,
+          code: dataChat.code,
+          message: dataChat.message,
+          errorDetail: dataChat.errorDetail
+        });
+        setIsLoading(false);
+        return;
+      }
+
+      if (chatType === "merchant_product") getInitialMerchantProduct();else if (chatType === "order_product") getInitialOrderProduct();else getInitialTicket();
+    }
+  }, [dataChat, showPopUpChat]); // comenzar temporizador del update de 20s
+
+  (0, _react.useEffect)(function () {
+    //return;   -- descomentarizar para hacer pruebas sin update
+    if (startUpdate == 0) return;
+    var processID = setTimeout(function () {
+      setRunUpdate(function (prev) {
+        return prev + 1;
+      });
+    }, 5000);
+    setProcessUpdateID(processID);
+    return function () {
+      return clearTimeout(processID);
+    };
+  }, [startUpdate]); // ejecutar update
+
+  (0, _react.useEffect)(function () {
+    // if (runUpdate == 0) return;
+    if (chatType === "merchant_product") {
+      if (singleChat.items) getUpdateLatestMerchantProduct();else getInitialMerchantProduct();
+    } else if (chatType === "order_product") {
+      if (companies) getUpdateLatestOrderProduct();else getInitialOrderProduct();
+    } else {
+      if (singleChat.items) getUpdateLatestTicket(true);else getInitialTicket();
+    }
+  }, [runUpdate]);
+  /*=======================================================================
+                PETICION GET INICIAL SEGUN EL TIPO DE CHAT
+  ======================================================================= */
+
+  var getInitialMerchantProduct = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var paramsQuery, paramsHeaders, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              paramsQuery = {
+                getType: "initial",
+                id: JSON.stringify(dataChat.id),
+                version: JSON.stringify(dataChat.version)
+              };
+              paramsHeaders = {
+                Authorization: dataChat.userToken
+              };
+              _context.next = 4;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsQuery, paramsHeaders);
+
+            case 4:
+              response = _context.sent;
+
+              if (response.body) {
+                _context.next = 9;
+                break;
+              }
+
+              setErrorChat({
+                existError: true,
+                code: 400,
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+              setIsLoading(false);
+              return _context.abrupt("return");
+
+            case 9:
+              // success
+              setCurrentUser({
+                id: response.body.data.currentUserId,
+                companyId: response.body.data.currentCompanyId
+              });
+              setLastUpdateDate(response.body.data.lastUpdateDate);
+              setAllUsers(response.body.users);
+              setSingleChat({
+                items: response.body.items,
+                enabledLoadMore: response.body.items.length === 50
+              });
+              setErrorChat({
+                existError: false
+              });
+              setIsLoading(false);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getInitialMerchantProduct() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var getInitialOrderProduct = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var paramsQuery, paramsHeaders, response, companiesList, companiesIdList, companyActive, _i, _companiesIdList, companyId;
+
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              clearTimeout(processUpdateID); // finalizamos el temporizador
+
+              paramsQuery = {
+                getType: "initial",
+                id: JSON.stringify(dataChat.id),
+                orderId: JSON.stringify(dataChat.orderId),
+                retailerId: JSON.stringify(dataChat.retailerId)
+              };
+              paramsHeaders = {
+                Authorization: dataChat.userToken
+              };
+              _context2.next = 5;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsQuery, paramsHeaders);
+
+            case 5:
+              response = _context2.sent;
+              setStartUpdate(function (prev) {
+                return prev + 1;
+              }); // TEMPORAL
+
+              if (response.body) {
+                _context2.next = 11;
+                break;
+              }
+
+              setErrorChat({
+                existError: true,
+                code: 400,
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+              setIsLoading(false);
+              return _context2.abrupt("return");
+
+            case 11:
+              // success
+              setCurrentUser({
+                id: response.body.data.currentUserId,
+                companyId: response.body.data.currentCompanyId
+              });
+              setLastUpdateDate(response.body.data.lastUpdateDate);
+              setCurrentArticle({
+                status: response.body.data.status,
+                version: response.body.data.version
+              });
+              setAllUsers(response.body.users);
+              companiesList = response.body.companies;
+              companiesIdList = Object.keys(companiesList);
+
+              // encontrar el chat inicial a cargar y si se debe permitir cargar mas
+              for (_i = 0, _companiesIdList = companiesIdList; _i < _companiesIdList.length; _i++) {
+                companyId = _companiesIdList[_i];
+
+                if (companiesList[companyId].items.length < 50) {
+                  companiesList[companyId].enabledLoadMore = false;
+                } else {
+                  companiesList[companyId].enabledLoadMore = true;
+                }
+
+                if (companiesList[companyId].statusChat === "current") {
+                  companyActive = Number(companyId);
+                }
+              }
+
+              if (!companyActive && companiesIdList.length) {
+                companyActive = Number(companiesIdList[0]);
+              }
+
+              setCompanies(companiesList);
+              if (companyActive) setActiveCompanyId(companyActive);
+              setErrorChat({
+                existError: false
+              });
+              setIsLoading(false);
+
+            case 23:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function getInitialOrderProduct() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var getInitialTicket = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _dataChat$currentUser, _dataChat$currentUser2, _dataChat$currentUser3, _dataChat$currentUser4;
+
+      var dataUser, paramsQuery, response;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              stopUpdate(); // finalizamos el temporizador
+
+              dataUser = {
+                id: (_dataChat$currentUser = dataChat.currentUser) === null || _dataChat$currentUser === void 0 ? void 0 : _dataChat$currentUser.id,
+                companyId: (_dataChat$currentUser2 = dataChat.currentUser) === null || _dataChat$currentUser2 === void 0 ? void 0 : _dataChat$currentUser2.companyId,
+                isUserTech: (_dataChat$currentUser3 = dataChat.currentUser) === null || _dataChat$currentUser3 === void 0 ? void 0 : _dataChat$currentUser3.isUserTech
+              };
+              paramsQuery = {
+                id: JSON.stringify(dataChat.id),
+                getType: "initial",
+                currentUser: (0, _utils.encodeUriJson)(dataUser),
+                currentItemsFront: (0, _utils.encodeUriJson)(getItemsIdSingleChat())
+              };
+              _context3.next = 5;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_TICKETS_CHAT_ENDPOINT, paramsQuery, {
+                Authorization: (_dataChat$currentUser4 = dataChat.currentUser) === null || _dataChat$currentUser4 === void 0 ? void 0 : _dataChat$currentUser4.token
+              });
+
+            case 5:
+              response = _context3.sent;
+              // programar update en 20s
+              setStartUpdate(function (prev) {
+                return prev + 1;
+              });
+
+              if (response.body) {
+                _context3.next = 11;
+                break;
+              }
+
+              setErrorChat({
+                existError: true,
+                code: 400,
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+              setIsLoading(false);
+              return _context3.abrupt("return");
+
+            case 11:
+              // success
+              setLastUpdateDate(response.body.data.lastUpdateDate);
+              setAllUsers(response.body.users);
+              setSingleChat({
+                items: response.body.items,
+                enabledLoadMore: response.body.items.length === 50,
+                statusChat: dataChat.statusChat
+              });
+              setErrorChat({
+                existError: false
+              });
+              setIsLoading(false);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function getInitialTicket() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  /*=======================================================================
+                PETICION GET LOAD_MORE SEGUN EL TIPO DE CHAT
+  ======================================================================= */
+
+
+  var getLoadMoreMerchantProduct = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var date, paramsQuery, response, newSingleChat;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              clearTimeout(processUpdateID); // finalizamos el temporizador
+
+              date = singleChat.items[singleChat.items.length - 1].date;
+              paramsQuery = {
+                getType: "loadMore",
+                id: JSON.stringify(dataChat.id),
+                version: JSON.stringify(dataChat.version),
+                date: encodeURIComponent(date)
+              };
+              _context4.next = 5;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsQuery);
+
+            case 5:
+              response = _context4.sent;
+
+              if (response.body) {
+                _context4.next = 8;
+                break;
+              }
+
+              return _context4.abrupt("return", {
+                title: response.message,
+                message: response.errorDetail
+              });
+
+            case 8:
+              // success
+              // actualizar la lista de los users
+              updateAllUsers(response.body.users); // actualizar los items del chat
+
+              newSingleChat = (0, _objectSpread3.default)({}, singleChat);
+              newSingleChat.items = addOldItemsChat(newSingleChat.items, response.body.items);
+              newSingleChat.enabledLoadMore = response.body.items.length === 50;
+              setSingleChat(newSingleChat);
+
+            case 13:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function getLoadMoreMerchantProduct() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var getLoadMoreOrderProduct = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var company, date, paramsQuery, response;
+      return _regenerator.default.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              clearTimeout(processUpdateID); // finalizamos el temporizador
+
+              company = companies[activeCompanyId];
+              date = company.items[company.items.length - 1].date;
+              paramsQuery = {
+                getType: "loadMore",
+                id: JSON.stringify(dataChat.id),
+                orderId: JSON.stringify(dataChat.orderId),
+                version: JSON.stringify(currentArticle.version),
+                currentCompanyId: JSON.stringify(currentUser.companyId),
+                date: encodeURIComponent(date),
+                othersCompanyId: JSON.stringify([activeCompanyId])
+              };
+              _context5.next = 6;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsQuery);
+
+            case 6:
+              response = _context5.sent;
+
+              if (response.body) {
+                _context5.next = 9;
+                break;
+              }
+
+              return _context5.abrupt("return", {
+                title: response.message,
+                message: response.errorDetail
+              });
+
+            case 9:
+              // success
+              // actualizar la lista de los users
+              updateAllUsers(response.body.users); // actualizar los items del chat y la lista de users
+
+              company.items = addOldItemsChat(company.items, response.body.items);
+              company.enabledLoadMore = response.body.items.length === 50;
+              setCompanies(function (prev) {
+                return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, (0, _defineProperty2.default)({}, activeCompanyId, company));
+              });
+
+            case 13:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+
+    return function getLoadMoreOrderProduct() {
+      return _ref5.apply(this, arguments);
+    };
+  }(); // este GET obtiene la lista de compañoas con las que se puede chatear
+
+
+  var getLoadMoreTicket = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+      var _dataChat$currentUser5, _dataChat$currentUser6, _dataChat$currentUser7, _dataChat$currentUser8;
+
+      var date, dataUser, paramsQuery, response, newSingleChat;
+      return _regenerator.default.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              stopUpdate(); // finalizamos el temporizador
+
+              date = singleChat.items[singleChat.items.length - 1].date;
+              dataUser = {
+                id: (_dataChat$currentUser5 = dataChat.currentUser) === null || _dataChat$currentUser5 === void 0 ? void 0 : _dataChat$currentUser5.id,
+                companyId: (_dataChat$currentUser6 = dataChat.currentUser) === null || _dataChat$currentUser6 === void 0 ? void 0 : _dataChat$currentUser6.companyId,
+                isUserTech: (_dataChat$currentUser7 = dataChat.currentUser) === null || _dataChat$currentUser7 === void 0 ? void 0 : _dataChat$currentUser7.isUserTech
+              };
+              paramsQuery = {
+                id: JSON.stringify(dataChat.id),
+                getType: "loadMore",
+                date: encodeURIComponent(date),
+                currentUser: (0, _utils.encodeUriJson)(dataUser),
+                currentItemsFront: (0, _utils.encodeUriJson)(getItemsIdSingleChat())
+              };
+              _context6.next = 6;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_TICKETS_CHAT_ENDPOINT, paramsQuery, {
+                Authorization: (_dataChat$currentUser8 = dataChat.currentUser) === null || _dataChat$currentUser8 === void 0 ? void 0 : _dataChat$currentUser8.token
+              });
+
+            case 6:
+              response = _context6.sent;
+              //programar update en 20s
+              setStartUpdate(function (prev) {
+                return prev + 1;
+              });
+
+              if (response.body) {
+                _context6.next = 10;
+                break;
+              }
+
+              return _context6.abrupt("return", {
+                title: response.message,
+                message: response.errorDetail
+              });
+
+            case 10:
+              // success
+              // actualizar la lista de los users
+              updateAllUsers(response.body.users); // actualizar los items del chat
+
+              newSingleChat = (0, _objectSpread3.default)({}, singleChat);
+              newSingleChat.items = addOldItemsChat(newSingleChat.items, response.body.items);
+              newSingleChat.enabledLoadMore = response.body.items.length === 50;
+              setSingleChat(newSingleChat);
+
+            case 15:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    }));
+
+    return function getLoadMoreTicket() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  /*=======================================================================
+                PETICION GET UPDATE_LATEST SEGUN EL TIPO DE CHAT
+  ======================================================================= */
+
+
+  var getUpdateLatestMerchantProduct = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+      var paramsQuery, response, newSingleChat;
+      return _regenerator.default.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              paramsQuery = {
+                getType: "updateLatest",
+                id: JSON.stringify(dataChat.id),
+                version: JSON.stringify(dataChat.version),
+                date: encodeURIComponent(lastUpdateDate)
+              };
+              _context7.next = 3;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsQuery);
+
+            case 3:
+              response = _context7.sent;
+
+              if (response.body) {
+                _context7.next = 7;
+                break;
+              }
+
+              console.log("ERROR updateLatest:", {
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+              return _context7.abrupt("return");
+
+            case 7:
+              // success
+              setLastUpdateDate(response.body.data.lastUpdateDate); // actualizar la lista de los users
+
+              updateAllUsers(response.body.users); // actualizar los items del chat
+
+              newSingleChat = (0, _objectSpread3.default)({}, singleChat);
+              newSingleChat.items = addNewItemsChat(newSingleChat.items, response.body.items);
+              setSingleChat(newSingleChat);
+
+            case 12:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7);
+    }));
+
+    return function getUpdateLatestMerchantProduct() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+
+  var getUpdateLatestOrderProduct = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+      var paramsQuery, response, companiesList;
+      return _regenerator.default.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              paramsQuery = {
+                getType: "updateLatest",
+                id: JSON.stringify(dataChat.id),
+                orderId: JSON.stringify(dataChat.orderId),
+                retailerId: JSON.stringify(dataChat.retailerId),
+                version: JSON.stringify(currentArticle.version),
+                status: currentArticle.status,
+                currentCompanyId: JSON.stringify(currentUser.companyId),
+                othersCompanyId: encodeURIComponent(JSON.stringify(Object.keys(companies))),
+                date: encodeURIComponent(lastUpdateDate)
+              };
+              _context8.next = 3;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsQuery);
+
+            case 3:
+              response = _context8.sent;
+
+              if (response.body) {
+                _context8.next = 7;
+                break;
+              }
+
+              console.log("ERROR update: ", {
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+              return _context8.abrupt("return");
+
+            case 7:
+              // success
+              // cuando cambie la lista de chats por un cambio de version o estatus
+              if (response.body.data.status) {
+                setIsLoading(true);
+                setTimeout(function () {
+                  setLastUpdateDate(response.body.data.lastUpdateDate);
+                  setCurrentArticle({
+                    status: response.body.data.status,
+                    version: response.body.data.version
+                  });
+                  setAllUsers(response.body.users);
+                  var companiesList = response.body.companies;
+                  var companiesIdList = Object.keys(companiesList);
+                  var companyActive; // encontrar el chat inicial a cargar y si se debe permitir cargar mas
+
+                  for (var _i2 = 0, _companiesIdList2 = companiesIdList; _i2 < _companiesIdList2.length; _i2++) {
+                    var companyId = _companiesIdList2[_i2];
+
+                    if (companiesList[companyId].items.length < 50) {
+                      companiesList[companyId].enabledLoadMore = false;
+                    } else {
+                      companiesList[companyId].enabledLoadMore = true;
+                    }
+
+                    if (companiesList[companyId].statusChat === "current") {
+                      companyActive = Number(companyId);
+                    }
+                  }
+
+                  if (!companyActive && companiesIdList.length) {
+                    companyActive = Number(companiesIdList[0]);
+                  }
+
+                  setCompanies(companiesList);
+                  if (companyActive) setActiveCompanyId(companyActive);
+                  setErrorChat({
+                    existError: false
+                  });
+                  setIsLoading(false);
+                }, 2000);
+              } // cuando se hizo un update de los mismos chats
+              else {
+                setLastUpdateDate(response.body.data.lastUpdateDate); // actualizar la lista de los users
+
+                updateAllUsers(response.body.users); // actualizar los items de los chats
+
+                companiesList = (0, _objectSpread3.default)({}, companies);
+                Object.keys(response.body.companies).forEach(function (companyId) {
+                  companiesList[companyId].items = addNewItemsChat(companiesList[companyId].items, response.body.companies[companyId].items);
+                });
+                setCompanies(companiesList);
+              }
+
+            case 8:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee8);
+    }));
+
+    return function getUpdateLatestOrderProduct() {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+
+  var getUpdateLatestTicket = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
+      var _dataChat$currentUser9, _dataChat$currentUser10, _dataChat$currentUser11, _dataChat$currentUser12;
+
+      var fromUpdate,
+          dataUser,
+          paramsQuery,
+          response,
+          newSingleChat,
+          _args9 = arguments;
+      return _regenerator.default.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              fromUpdate = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : false;
+              dataUser = {
+                id: (_dataChat$currentUser9 = dataChat.currentUser) === null || _dataChat$currentUser9 === void 0 ? void 0 : _dataChat$currentUser9.id,
+                companyId: (_dataChat$currentUser10 = dataChat.currentUser) === null || _dataChat$currentUser10 === void 0 ? void 0 : _dataChat$currentUser10.companyId,
+                isUserTech: (_dataChat$currentUser11 = dataChat.currentUser) === null || _dataChat$currentUser11 === void 0 ? void 0 : _dataChat$currentUser11.isUserTech
+              };
+              paramsQuery = {
+                id: JSON.stringify(dataChat.id),
+                getType: "updateLatest",
+                date: encodeURIComponent(lastUpdateDate),
+                currentUser: (0, _utils.encodeUriJson)(dataUser),
+                currentItemsFront: (0, _utils.encodeUriJson)(getItemsIdSingleChat())
+              };
+              _context9.next = 5;
+              return (0, _handle_http.fetchGET)(process.env.REACT_APP_TICKETS_CHAT_ENDPOINT, paramsQuery, {
+                Authorization: (_dataChat$currentUser12 = dataChat.currentUser) === null || _dataChat$currentUser12 === void 0 ? void 0 : _dataChat$currentUser12.token
+              });
+
+            case 5:
+              response = _context9.sent;
+              //programar update en 20s
+              setStartUpdate(function (prev) {
+                return prev + 1;
+              });
+
+              if (response.body) {
+                _context9.next = 11;
+                break;
+              }
+
+              if (errorUpdate.startDate) {
+                setErrorUpdate(function (prev) {
+                  return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, {
+                    lastDate: new Date()
+                  });
+                });
+              } else {
+                setErrorUpdate(function (prev) {
+                  return {
+                    startDate: new Date()
+                  };
+                });
+              }
+
+              console.log("ERROR updateLatest:", {
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+              return _context9.abrupt("return");
+
+            case 11:
+              // limpiar error update
+              if (errorUpdate.startDate) {
+                setErrorUpdate({});
+              } // success
+
+
+              setLastUpdateDate(response.body.data.lastUpdateDate); // actualizar la lista de los users
+
+              updateAllUsers(response.body.users); // actualizar los items del chat
+
+              if (!(response.body.items.length === 0)) {
+                _context9.next = 16;
+                break;
+              }
+
+              return _context9.abrupt("return");
+
+            case 16:
+              newSingleChat = (0, _objectSpread3.default)({}, singleChat);
+              newSingleChat.items = addNewItemsChat(newSingleChat.items, response.body.items, fromUpdate);
+              newSingleChat.statusChat = response.body.data.statusChat;
+              setSingleChat(newSingleChat);
+
+            case 20:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9);
+    }));
+
+    return function getUpdateLatestTicket() {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  /*=======================================================================
+            FUNCION QUE EJECUTA EL MICROSERVICIO CREATE-ITEM 
+  Este metodo recibe los items que queremos agregar al chat.
+  requiere:
+    => items: [ { type , value } , ... ] 
+  NOTA: si se quiere agregar un mensaje mandar un array con un object
+  example: [ { 
+    type: "message" , 
+    value: "mi mensaje" 
+  } ]
+  ======================================================================= */
+
+
+  var createItemsChat = /*#__PURE__*/function () {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10() {
+      var items,
+          _iterator,
+          _step,
+          item,
+          errorCreate,
+          _args10 = arguments;
+
+      return _regenerator.default.wrap(function _callee10$(_context10) {
+        while (1) {
+          switch (_context10.prev = _context10.next) {
+            case 0:
+              items = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : [];
+
+              if (!(items.length === 0)) {
+                _context10.next = 3;
+                break;
+              }
+
+              return _context10.abrupt("return", {
+                message: "No se especifico ningun mensaje, imagen o archivo nuevo " + "que se quiera enviar al chat",
+                errorDetail: "Reporta esto a TI"
+              });
+
+            case 3:
+              _iterator = (0, _createForOfIteratorHelper2.default)(items);
+              _context10.prev = 4;
+
+              _iterator.s();
+
+            case 6:
+              if ((_step = _iterator.n()).done) {
+                _context10.next = 14;
+                break;
+              }
+
+              item = _step.value;
+
+              if (["message", "img", "file"].includes(item.type)) {
+                _context10.next = 10;
+                break;
+              }
+
+              return _context10.abrupt("return", {
+                message: "Uno de los elementos que se quiere enviar al chat " + "no es un tipo valido \"".concat(item.type, "\""),
+                errorDetail: "Reporta esto a TI"
+              });
+
+            case 10:
+              if (!(0, _utils.isStringEmpty)(item.value)) {
+                _context10.next = 12;
+                break;
+              }
+
+              return _context10.abrupt("return", {
+                message: "Uno de los elementos que se quiere enviar al chat " + "contiene un valor vacio",
+                errorDetail: "Reporta esto a TI"
+              });
+
+            case 12:
+              _context10.next = 6;
+              break;
+
+            case 14:
+              _context10.next = 19;
+              break;
+
+            case 16:
+              _context10.prev = 16;
+              _context10.t0 = _context10["catch"](4);
+
+              _iterator.e(_context10.t0);
+
+            case 19:
+              _context10.prev = 19;
+
+              _iterator.f();
+
+              return _context10.finish(19);
+
+            case 22:
+              stopUpdate(); // finalizamos el temporizador
+              // enviar items a la BD
+
+              if (!(chatType === "merchant_product")) {
+                _context10.next = 29;
+                break;
+              }
+
+              _context10.next = 26;
+              return createItemsMerchantProduct(items);
+
+            case 26:
+              errorCreate = _context10.sent;
+              _context10.next = 38;
+              break;
+
+            case 29:
+              if (!(chatType === "order_product")) {
+                _context10.next = 35;
+                break;
+              }
+
+              _context10.next = 32;
+              return createItemsOrderProduct(items);
+
+            case 32:
+              errorCreate = _context10.sent;
+              _context10.next = 38;
+              break;
+
+            case 35:
+              _context10.next = 37;
+              return createItemsTicket(items);
+
+            case 37:
+              errorCreate = _context10.sent;
+
+            case 38:
+              if (!(chatType === "merchant_product")) {
+                _context10.next = 43;
+                break;
+              }
+
+              _context10.next = 41;
+              return getUpdateLatestMerchantProduct();
+
+            case 41:
+              _context10.next = 50;
+              break;
+
+            case 43:
+              if (!(chatType === "order_product")) {
+                _context10.next = 48;
+                break;
+              }
+
+              _context10.next = 46;
+              return getUpdateLatestOrderProduct();
+
+            case 46:
+              _context10.next = 50;
+              break;
+
+            case 48:
+              _context10.next = 50;
+              return getUpdateLatestTicket();
+
+            case 50:
+              if (!errorCreate) {
+                _context10.next = 52;
+                break;
+              }
+
+              return _context10.abrupt("return", errorCreate);
+
+            case 52:
+            case "end":
+              return _context10.stop();
+          }
+        }
+      }, _callee10, null, [[4, 16, 19, 22]]);
+    }));
+
+    return function createItemsChat() {
+      return _ref10.apply(this, arguments);
+    };
+  }();
+
+  var createItemsMerchantProduct = /*#__PURE__*/function () {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11() {
+      var items,
+          paramsBody,
+          response,
+          _args11 = arguments;
+      return _regenerator.default.wrap(function _callee11$(_context11) {
+        while (1) {
+          switch (_context11.prev = _context11.next) {
+            case 0:
+              items = _args11.length > 0 && _args11[0] !== undefined ? _args11[0] : [];
+              paramsBody = {
+                id: JSON.stringify(dataChat.id),
+                version: JSON.stringify(dataChat.version),
+                userId: JSON.stringify(currentUser.id),
+                items: JSON.stringify(items)
+              };
+              _context11.next = 4;
+              return (0, _handle_http.fetchPOST)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsBody);
+
+            case 4:
+              response = _context11.sent;
+
+              if (response.body) {
+                _context11.next = 7;
+                break;
+              }
+
+              return _context11.abrupt("return", {
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+
+            case 7:
+            case "end":
+              return _context11.stop();
+          }
+        }
+      }, _callee11);
+    }));
+
+    return function createItemsMerchantProduct() {
+      return _ref11.apply(this, arguments);
+    };
+  }();
+
+  var createItemsOrderProduct = /*#__PURE__*/function () {
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
+      var items,
+          paramsBody,
+          response,
+          _args12 = arguments;
+      return _regenerator.default.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              items = _args12.length > 0 && _args12[0] !== undefined ? _args12[0] : [];
+              paramsBody = {
+                id: JSON.stringify(dataChat.id),
+                version: JSON.stringify(currentArticle.version),
+                userId: JSON.stringify(currentUser.id),
+                items: JSON.stringify(items),
+                orderId: JSON.stringify(dataChat.orderId),
+                sentCompanyId: JSON.stringify(currentUser.companyId),
+                receivedCompanyId: JSON.stringify(activeCompanyId)
+              };
+              _context12.next = 4;
+              return (0, _handle_http.fetchPOST)(process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT, paramsBody);
+
+            case 4:
+              response = _context12.sent;
+
+              if (response.body) {
+                _context12.next = 7;
+                break;
+              }
+
+              return _context12.abrupt("return", {
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+
+            case 7:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    }));
+
+    return function createItemsOrderProduct() {
+      return _ref12.apply(this, arguments);
+    };
+  }();
+
+  var createItemsTicket = /*#__PURE__*/function () {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13() {
+      var items,
+          paramsBody,
+          response,
+          _args13 = arguments;
+      return _regenerator.default.wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              items = _args13.length > 0 && _args13[0] !== undefined ? _args13[0] : [];
+              paramsBody = {
+                id: JSON.stringify(dataChat.id),
+                userId: JSON.stringify(dataChat.currentUser.id),
+                items: JSON.stringify(items)
+              };
+              _context13.next = 4;
+              return (0, _handle_http.fetchPOST)(process.env.REACT_APP_TICKETS_CHAT_ENDPOINT, paramsBody);
+
+            case 4:
+              response = _context13.sent;
+
+              if (response.body) {
+                _context13.next = 7;
+                break;
+              }
+
+              return _context13.abrupt("return", {
+                message: response.message,
+                errorDetail: response.errorDetail
+              });
+
+            case 7:
+            case "end":
+              return _context13.stop();
+          }
+        }
+      }, _callee13);
+    }));
+
+    return function createItemsTicket() {
+      return _ref13.apply(this, arguments);
+    };
+  }();
+  /*=======================================================================
+                        SECCION DE FUNCIONES
+  ======================================================================= */
+
+
+  var isSingleChat = function isSingleChat() {
+    if (chatType === "merchant_product" || chatType === "ticket") {
+      return true;
+    }
+
+    if (companies && Object.keys(companies).length < 2) return true;else return false;
+  };
+
+  var getItemsIdSingleChat = function getItemsIdSingleChat() {
+    var itemsId = {};
+
+    if (Array.isArray(singleChat.items)) {
+      singleChat.items.forEach(function (item) {
+        if ((0, _utils.isValidNaturalNumber)(item.id)) itemsId[item.id] = true;
+      });
+    }
+
+    return itemsId;
+  };
+
+  var getChatCompany = function getChatCompany() {
+    if (chatType === "merchant_product" || chatType === "ticket") {
+      return undefined;
+    }
+
+    if (companies && companies[activeCompanyId]) {
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, companies[activeCompanyId]), {}, {
+        id: activeCompanyId
+      });
+    }
+
+    return undefined;
+  };
+
+  var addOldItemsChat = function addOldItemsChat() {
+    var currentItems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var newItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var items = currentItems.slice();
+    var itemsId = {};
+    items.forEach(function (item) {
+      itemsId[item.id] = true;
+    });
+    newItems.forEach(function (item) {
+      if (!itemsId[item.id]) {
+        items.push(item);
+        itemsId[item.id] = true;
+      }
+    });
+    return items;
+  };
+
+  var addNewItemsChat = function addNewItemsChat() {
+    var currentItems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var newItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var fromUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var itemsId = {};
+    currentItems.forEach(function (item) {
+      itemsId[item.id] = item;
+    });
+    var thereAreNewItems = false;
+    newItems.forEach(function (newitem) {
+      if (!itemsId[newitem.id]) {
+        itemsId[newitem.id] = newitem;
+        thereAreNewItems = true;
+      }
+    });
+
+    if (thereAreNewItems && fromUpdate) {
+      setPlaySound(true);
+      setTimeout(function () {
+        setPlaySound(false);
+      }, 5000);
+    }
+
+    return Object.values(itemsId).sort(function (a, b) {
+      if (a.id < b.id) return 1;
+      if (a.id > b.id) return -1;
+      return 0;
+    });
+  };
+
+  var updateAllUsers = function updateAllUsers() {
+    var newUsers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var currentUsers = (0, _objectSpread3.default)({}, allUsers);
+    Object.keys(newUsers).forEach(function (userId) {
+      if (!currentUsers[userId]) {
+        currentUsers[userId] = newUsers[userId];
+      }
+    });
+    setAllUsers(currentUsers);
+  };
+
+  var stopUpdate = function stopUpdate() {
+    if (processUpdateID !== undefined) {
+      clearTimeout(processUpdateID);
+      setProcessUpdateID(undefined);
+    }
+  };
+
+  var renderBodyChat = function renderBodyChat() {
+    if (isLoading) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
+
+    if (errorChat.existError) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotFound.NotFound, {
+        code: errorChat.code,
+        message: errorChat.message,
+        details: errorChat.errorDetail
+      });
+    } // cuando se quiere ver la lista de chats
+
+
+    if (showChatsList) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatLists.ChatLists, {
+        companies: companies,
+        currentCompanyId: currentUser === null || currentUser === void 0 ? void 0 : currentUser.companyId,
+        onClickCompany: function onClickCompany(companyIdSelected) {
+          setActiveCompanyId(Number(companyIdSelected));
+          setShowChatsList(false);
+        }
+      });
+    } // mostrar chat?
+
+
+    var items;
+    var enabledLoadMore;
+
+    if (["merchant_product", "ticket"].includes(chatType)) {
+      items = singleChat.items;
+      enabledLoadMore = singleChat.enabledLoadMore;
+    } // ORDER_PRODUCT
+    else if (companies) {
+      // caso 0 chats
+      if (Object.keys(companies).length === 0) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "container-chatEmpty",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "icon-chat",
+            transparent: true,
+            size: 35,
+            icon: _freeSolidSvgIcons.faComments,
+            type: "gray"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            children: "De acuerdo al estatus del producto, tu compa\xF1ia no tiene disponible ningun chat abierto o cerrado"
+          })]
+        });
+      } // caso 1 o mas chats
+
+
+      if (companies[activeCompanyId]) {
+        items = companies[activeCompanyId].items;
+        enabledLoadMore = companies[activeCompanyId].enabledLoadMore;
+      }
+    }
+
+    if (items) {
+      var _getChatCompany, _getChatCompany2;
+
+      var containerItems = null;
+
+      if (items.length) {
+        containerItems = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContainerItems.ContainerItems, {
+          items: items,
+          users: allUsers,
+          showBtnLoadMore: enabledLoadMore,
+          chatType: chatType,
+          activeCompanyId: activeCompanyId,
+          currentUser: ["merchant_product", "order_product"].includes(chatType) ? currentUser : dataChat.currentUser,
+          onClickBtnLoadMore: chatType === "merchant_product" ? getLoadMoreMerchantProduct : chatType === "order_product" ? getLoadMoreOrderProduct : getLoadMoreTicket
+        });
+      } else {
+        containerItems = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "container-chatEmpty",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
+            className: "icon-chat",
+            size: 35,
+            icon: _freeSolidSvgIcons.faComments,
+            type: "gray",
+            transparent: true
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            children: "Este chat no tiene mensajes"
+          })]
+        });
+      }
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [containerItems, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.Footer, {
+          chatType: chatType,
+          dataChat: chatType === "merchant_product" ? {
+            id: dataChat.id,
+            version: dataChat.version
+          } : chatType === "order_product" ? {
+            id: dataChat.id,
+            version: currentArticle.version
+          } : chatType === "ticket" ? {
+            id: dataChat.id
+          } : undefined,
+          chatCompany: getChatCompany(),
+          statusChat: chatType === "order_product" ? (_getChatCompany = getChatCompany()) === null || _getChatCompany === void 0 ? void 0 : _getChatCompany.statusChat : chatType === "ticket" ? singleChat.statusChat : undefined,
+          messageDisabled: chatType === "order_product" ? "La conversaci\xF3n con ".concat((_getChatCompany2 = getChatCompany()) === null || _getChatCompany2 === void 0 ? void 0 : _getChatCompany2.name, " ha finalizado") : chatType === "ticket" ? "Ticket cerrado" : "La conversaci\xF3n ha finalizado",
+          createItemsChat: createItemsChat,
+          errorUpdate: errorUpdate
+        })]
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      children: [(chatContainerType !== "fixed" || !isSingleChat()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.Header, {
+        showBtnClose: showBtnClose,
+        onClickBtnClose: onClickBtnClose,
+        showChatsList: showChatsList,
+        chatCompany: getChatCompany(),
+        multipleCompanies: !isSingleChat(),
+        onClickBtnChooseChat: function onClickBtnChooseChat() {
+          setShowChatsList(true);
+        }
+      }), renderBodyChat()]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHowler.default, {
+      src: _newMessage.default,
+      playing: playSound
+    })]
+  });
+};
+
+exports.ContentChat = ContentChat;