contentoh-components-library 21.3.1 → 21.3.3

package/dist/components/atoms/ChatPopUp/index.js

@@ -1,841 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChatPopUp = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _styles = require("./styles");
-
-var _react = require("react");
-
-var _iconChat = _interopRequireDefault(require("../../../assets/images/chatPopup/iconChat.svg"));
-
-var _close = _interopRequireDefault(require("../../../assets/images/chatPopup/close.svg"));
-
-var _send = _interopRequireDefault(require("../../../assets/images/chatPopup/send.svg"));
-
-var _iconPlus = _interopRequireDefault(require("../../../assets/images/chatPopup/iconPlus.svg"));
-
-var _upload_file = _interopRequireDefault(require("../../../assets/images/chatPopup/upload_file.svg"));
-
-var _defaultProfile = _interopRequireDefault(require("../../../assets/images/chatPopup/defaultProfile.png"));
-
-var _defaultImage = _interopRequireDefault(require("../../../assets/images/chatPopup/defaultImage.png"));
-
-var _Spinner = _interopRequireDefault(require("../../../assets/images/chatPopup/Spinner.gif"));
-
-var _doc = _interopRequireDefault(require("../../../assets/images/chatPopup/doc.svg"));
-
-var _xls = _interopRequireDefault(require("../../../assets/images/chatPopup/xls.svg"));
-
-var _document = _interopRequireDefault(require("../../../assets/images/chatPopup/document.svg"));
-
-var _svgIcon = _interopRequireDefault(require("../../../assets/images/chatPopup/svgIcon.svg"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
-var _awsSdk = _interopRequireDefault(require("aws-sdk"));
-
-var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
-
-var _uuid = require("uuid");
-
-var _handlersChat = require("./utils/handlersChat");
-
-var _data = require("../../../global-files/data");
-
-var _Tooltip = require("../Tooltip");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
-var REGION = "us-east-1";
-
-var Buffer = require("buffer/").Buffer;
-
-_awsSdk.default.config.update({
-  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
-  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3
-});
-
-var myBucket = new _awsSdk.default.S3({
-  params: {
-    Bucket: S3_BUCKET
-  },
-  region: REGION
-});
-
-var ChatPopUp = function ChatPopUp(_ref) {
-  var props = _ref.props;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      items = _useState4[0],
-      setItems = _useState4[1]; // items que vienen de la BD
-
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      customItems = _useState6[0],
-      setCustomItems = _useState6[1]; // JSX acorde al tipo de los items
-
-
-  var _useState7 = (0, _react.useState)(0),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      current_id_company = _useState8[0],
-      setCurrent_id_company = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(""),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      valueInput = _useState10[0],
-      setValueInput = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      processUpdateID = _useState12[0],
-      setProcessUpdateID = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(0),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      countUpdate = _useState14[0],
-      setCountUpdate = _useState14[1];
-
-  var arrayIMG = {
-    data: {
-      ext: [],
-      nameFile: []
-    }
-  };
-  var Authorization = props.chat_authorization;
-  var prop_id_article = props.chat_id_article;
-  var prop_version_article = props.chat_version_article;
-  (0, _react.useEffect)(function () {
-    //setItems([])
-    getInitial();
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (!items) return;
-    renderItems(); //console.log("update en 10s");
-    //const processUpdate = setTimeout( () => {
-    //	setCountUpdate( (prev) => prev+1 )
-    //} , 25000 )
-    //setProcessUpdateID(processUpdate);
-  }, [items]); // implementar update cada 30s
-
-  (0, _react.useEffect)(function () {
-    if (countUpdate == 0) return;
-    getUpdate();
-  }, [countUpdate]);
-
-  var renderItems = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var jsxItems, date, countDate, _iterator, _step, item, newDate;
-
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              jsxItems = [];
-              date = undefined;
-              countDate = 1;
-              _iterator = (0, _createForOfIteratorHelper2.default)(items);
-
-              try {
-                for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                  item = _step.value;
-
-                  if (!date) {
-                    date = getFullDate(new Date(item.creation_date));
-                  } else {
-                    newDate = getFullDate(new Date(item.creation_date));
-
-                    if (newDate != date) {
-                      jsxItems.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                        className: "group-date",
-                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                          children: date
-                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {})]
-                      }, "itemDate-" + countDate++));
-                      date = newDate;
-                    }
-                  } // manejo de los tipos items
-
-
-                  if (item.user.id_company == current_id_company) {
-                    jsxItems.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-                      className: "own-message",
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.CustomTooltip, {
-                        className: "tooltip-userName",
-                        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-                          children: item.user.name
-                        }),
-                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                          className: "profile",
-                          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
-                            src: (0, _data.getProfilePicture)(item.user.id, 24, 24),
-                            fallbackImage: _defaultProfile.default,
-                            initialImage: _Spinner.default,
-                            alt: "profile"
-                          })
-                        })
-                      }), item.value_type == "txt" ? renderTXT(item) : item.value_type == "img" ? renderIMG(item) : renderFILE(item), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                        className: "date",
-                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                          children: getTime(item.creation_date)
-                        })
-                      })]
-                    }, "item-" + item.id));
-                  } else {
-                    jsxItems.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-                      className: "",
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.CustomTooltip, {
-                        className: "tooltip-userName",
-                        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-                          children: item.user.name
-                        }),
-                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                          className: "profile",
-                          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
-                            src: (0, _data.getProfilePicture)(item.user.id, 24, 24),
-                            fallbackImage: _defaultProfile.default,
-                            initialImage: _Spinner.default,
-                            alt: "profile"
-                          })
-                        })
-                      }), item.value_type == "txt" ? renderTXT(item) : item.value_type == "img" ? renderIMG(item) : renderFILE(item), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                        className: "date",
-                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                          children: getTime(item.creation_date)
-                        })
-                      })]
-                    }, "item-" + item.id));
-                  }
-                }
-              } catch (err) {
-                _iterator.e(err);
-              } finally {
-                _iterator.f();
-              }
-
-              if (date) {
-                jsxItems.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                  className: "group-date",
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-                    children: date
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {})]
-                }, "itemDate-" + countDate++));
-              }
-
-              setCustomItems(jsxItems);
-
-            case 7:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function renderItems() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  var getBase64 = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(file) {
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              return _context2.abrupt("return", new Promise(function (resolve) {
-                var reader = new FileReader();
-                reader.addEventListener("loadend", function () {
-                  var base64 = reader.result.replace(/^data:\w+\/\w+.*;base64,/, "");
-                  resolve(base64);
-                });
-                reader.readAsDataURL(file);
-              }));
-
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function getBase64(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-
-  var createPreview = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(file) {
-      var base64IMG, ext, fileB, params;
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              if (!(file.type.split("/")[0] === "image" || file.type.split("/")[0] === "application" || file.type.split("/")[0] === "text")) {
-                _context3.next = 12;
-                break;
-              }
-
-              _context3.next = 3;
-              return getBase64(file);
-
-            case 3:
-              base64IMG = _context3.sent;
-              ext = file.name.split(".")[file.name.split(".").length - 1];
-              arrayIMG.data.ext.push(ext);
-              arrayIMG.data.nameFile.push(file.name.split(".")[0]);
-              fileB = Buffer.from(base64IMG, "base64");
-              params = {
-                ACL: "public-read",
-                Body: fileB,
-                Bucket: S3_BUCKET,
-                Key: "".concat(prop_id_article, "/").concat(prop_version_article, "/chat/").concat(arrayIMG.data.nameFile[0], "-").concat((0, _uuid.v4)(), ".").concat(arrayIMG.data.ext[0])
-              };
-              _context3.next = 11;
-              return myBucket.putObject(params).promise();
-
-            case 11:
-              if (file.type.split("/")[0] === "image") {
-                if (arrayIMG.data.ext[0] === "svg") {
-                  onClickInsertar("file", params.Key);
-                } else onClickInsertar("img", params.Key);
-              } else if (file.type.split("/")[0] === "application" || file.type.split("/")[0] === "text") {
-                onClickInsertar("file", params.Key);
-              }
-
-            case 12:
-              arrayIMG.data.ext.shift();
-              arrayIMG.data.nameFile.shift();
-
-            case 14:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    }));
-
-    return function createPreview(_x2) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-
-  var getTime = function getTime(time) {
-    var fecha = (0, _moment.default)(time).format("LT");
-    var fechaHoy = new Date();
-
-    if ((0, _moment.default)(time).format("L") === (0, _moment.default)(fechaHoy).format("L")) {
-      return (0, _moment.default)(time).format("LT");
-    } else return fecha;
-  };
-
-  var renderTXT = function renderTXT(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "body-message",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: item.value
-      })
-    });
-  };
-
-  var renderIMG = function renderIMG(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "img-file",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: "https://content-management-images.s3.amazonaws.com/".concat(item.value),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
-          src: "https://content-management-images.s3.amazonaws.com/".concat(item.value),
-          fallbackImage: _defaultImage.default,
-          initialImage: _Spinner.default,
-          alt: item.value
-        })
-      })
-    });
-  };
-
-  var renderFILE = function renderFILE(item) {
-    var ext = item.value.split(".")[item.value.split(".").length - 1];
-    var imgFile;
-
-    if (ext === "docx" || ext === "doc" || ext === "docs") {
-      imgFile = _doc.default;
-    } else if (ext === "xls" || ext === "xlsx" || ext === "csv" || ext === "tsv") {
-      imgFile = _xls.default;
-    } else if (ext === "svg") {
-      imgFile = _svgIcon.default;
-    } else if (ext === "pdf") {
-      imgFile = "https://eu-phoenix.eu/wp-content/uploads/2022/03/pdf-icon.svg";
-    } else imgFile = _document.default;
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "body-message",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: "https://content-management-images.s3.amazonaws.com/".concat(item.value),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: imgFile,
-            alt: item.value
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: item.value.split("/")[3]
-          })]
-        })
-      })
-    });
-  };
-
-  var getInitial = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-      var response;
-      return _regenerator.default.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              _context4.next = 2;
-              return (0, _handlersChat.getBD)(prop_id_article, prop_version_article, "initial", "", Authorization);
-
-            case 2:
-              response = _context4.sent;
-
-              if (!response.body) {
-                // console.log("=====================");
-                // console.log("ERROR INITIAL");
-                // console.log("=====================");
-                // console.log(response);
-                console.log("Unable to retrieve company and user from database, please report this to TI");
-                setItems([]);
-              } else {
-                // console.log("=====================");
-                // console.log("ITEMS INICIALES");
-                // console.log("=====================");
-                // console.log(response.body.items);
-                setCurrent_id_company(response.body.current_id_company);
-                setItems(response.body.items);
-              }
-
-            case 4:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-
-    return function getInitial() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-
-  var getUpdate = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-      var _currentItems$0$creat, _currentItems$;
-
-      var currentItems, dateItem, response, newItems;
-      return _regenerator.default.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              currentItems = items.slice();
-              dateItem = (_currentItems$0$creat = (_currentItems$ = currentItems[0]) === null || _currentItems$ === void 0 ? void 0 : _currentItems$.creation_date) !== null && _currentItems$0$creat !== void 0 ? _currentItems$0$creat : "";
-              response = {};
-
-              if (!(dateItem == "")) {
-                _context5.next = 9;
-                break;
-              }
-
-              _context5.next = 6;
-              return getInitial();
-
-            case 6:
-              return _context5.abrupt("return");
-
-            case 9:
-              _context5.next = 11;
-              return (0, _handlersChat.getBD)(prop_id_article, prop_version_article, "update_latest", dateItem, Authorization);
-
-            case 11:
-              response = _context5.sent;
-
-            case 12:
-              if (!response.body) {
-                // console.log("=====================");
-                // console.log("ERROR UPDATE LATEST");
-                // console.log("=====================");
-                console.log("Unable to retrieve company and user from database, please report this to TI");
-                setItems(currentItems);
-              } else {
-                // console.log("=====================");
-                // console.log("ITEMS DEL UPDATE LATEST");
-                // console.log("=====================");
-                // console.log(response.body.items);
-                newItems = response.body.items;
-                newItems = newItems.concat(currentItems);
-                setItems(newItems);
-              } // setCountUpdate((prev) => prev + 1);
-
-
-            case 13:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    }));
-
-    return function getUpdate() {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-
-  var getFullDate = function getFullDate() {
-    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
-    var dateString = "";
-
-    switch (date.getDay()) {
-      case 0:
-        dateString += "Dom ";
-        break;
-
-      case 1:
-        dateString += "Lun ";
-        break;
-
-      case 2:
-        dateString += "Mar ";
-        break;
-
-      case 3:
-        dateString += "Mie ";
-        break;
-
-      case 4:
-        dateString += "Jue ";
-        break;
-
-      case 5:
-        dateString += "Vie ";
-        break;
-
-      case 6:
-        dateString += "Sab ";
-        break;
-
-      default:
-        dateString += "-- ";
-        break;
-    }
-
-    dateString += date.getDate() + " ";
-
-    switch (date.getMonth() + 1) {
-      case 1:
-        dateString += "Ene ";
-        break;
-
-      case 2:
-        dateString += "Feb ";
-        break;
-
-      case 3:
-        dateString += "Mar ";
-        break;
-
-      case 4:
-        dateString += "Abr ";
-        break;
-
-      case 5:
-        dateString += "May ";
-        break;
-
-      case 6:
-        dateString += "Jun ";
-        break;
-
-      case 7:
-        dateString += "Jul ";
-        break;
-
-      case 8:
-        dateString += "Ago ";
-        break;
-
-      case 9:
-        dateString += "Sep ";
-        break;
-
-      case 10:
-        dateString += "Oct ";
-        break;
-
-      case 11:
-        dateString += "Nov ";
-        break;
-
-      case 12:
-        dateString += "Dic ";
-        break;
-    }
-
-    dateString += date.getFullYear();
-    return dateString;
-  };
-
-  var onClickLoadMore = /*#__PURE__*/function () {
-    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
-      var _currentItems$creatio, _currentItems;
-
-      var currentItems, dateItem, response, newItems;
-      return _regenerator.default.wrap(function _callee6$(_context6) {
-        while (1) {
-          switch (_context6.prev = _context6.next) {
-            case 0:
-              clearTimeout(processUpdateID);
-              currentItems = items.slice();
-              dateItem = (_currentItems$creatio = (_currentItems = currentItems[currentItems.length - 1]) === null || _currentItems === void 0 ? void 0 : _currentItems.creation_date) !== null && _currentItems$creatio !== void 0 ? _currentItems$creatio : "";
-              response = {};
-
-              if (!(dateItem == "")) {
-                _context6.next = 10;
-                break;
-              }
-
-              _context6.next = 7;
-              return getInitial();
-
-            case 7:
-              return _context6.abrupt("return");
-
-            case 10:
-              _context6.next = 12;
-              return (0, _handlersChat.getBD)(prop_id_article, prop_version_article, "load_more", dateItem, Authorization);
-
-            case 12:
-              response = _context6.sent;
-
-            case 13:
-              if (!response.body) {
-                // console.log("=====================");
-                // console.log("ERROR LOAD MORE");
-                // console.log("=====================");
-                console.log("Unable to retrieve company and user from database, please report this to TI");
-                setItems(currentItems);
-              } else {
-                // console.log("=====================");
-                // console.log("ITEMS DEL LOAD MORE");
-                // console.log("=====================");
-                // console.log(response.body.items);
-                newItems = currentItems.concat(response.body.items);
-                setItems(newItems);
-              }
-
-            case 14:
-            case "end":
-              return _context6.stop();
-          }
-        }
-      }, _callee6);
-    }));
-
-    return function onClickLoadMore() {
-      return _ref7.apply(this, arguments);
-    };
-  }();
-
-  var onClickInsertar = /*#__PURE__*/function () {
-    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(valueType, valueInput) {
-      var currentItems, response;
-      return _regenerator.default.wrap(function _callee7$(_context7) {
-        while (1) {
-          switch (_context7.prev = _context7.next) {
-            case 0:
-              clearTimeout(processUpdateID);
-              currentItems = items.slice();
-              _context7.next = 4;
-              return (0, _handlersChat.createItemBD)(prop_id_article, prop_version_article, valueType, valueInput, Authorization);
-
-            case 4:
-              response = _context7.sent;
-
-              if (response.body) {
-                _context7.next = 10;
-                break;
-              }
-
-              // console.log("=====================");
-              // console.log("ERROR INSERTAR");
-              // console.log("=====================");
-              console.log("Unable to retrieve company and user from database, please report this to TI");
-              setItems(currentItems);
-              _context7.next = 18;
-              break;
-
-            case 10:
-              setValueInput("");
-
-              if (!((currentItems === null || currentItems === void 0 ? void 0 : currentItems.length) == 0)) {
-                _context7.next = 16;
-                break;
-              }
-
-              _context7.next = 14;
-              return getInitial();
-
-            case 14:
-              _context7.next = 18;
-              break;
-
-            case 16:
-              _context7.next = 18;
-              return getUpdate();
-
-            case 18:
-            case "end":
-              return _context7.stop();
-          }
-        }
-      }, _callee7);
-    }));
-
-    return function onClickInsertar(_x3, _x4) {
-      return _ref8.apply(this, arguments);
-    };
-  }();
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _iconChat.default,
-        alt: "chat icon",
-        className: "icon-chat",
-        onClick: function onClick() {
-          setShowMenu(!showMenu);
-        }
-      })
-    }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
-      id: "div-slider",
-      showMenu: showMenu,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: function onClick() {
-          setShowMenu(false);
-        },
-        className: "close",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: _close.default,
-          alt: "close-chat"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "content-chat",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-          onClick: /*#__PURE__*/function () {
-            var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(event) {
-              return _regenerator.default.wrap(function _callee8$(_context8) {
-                while (1) {
-                  switch (_context8.prev = _context8.next) {
-                    case 0:
-                      return _context8.abrupt("return", onClickLoadMore());
-
-                    case 1:
-                    case "end":
-                      return _context8.stop();
-                  }
-                }
-              }, _callee8);
-            }));
-
-            return function (_x5) {
-              return _ref9.apply(this, arguments);
-            };
-          }(),
-          className: "cargar-mas",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _iconPlus.default,
-            alt: "Cargar m\xE1s"
-          }), "cargar m\xE1s"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-          id: "myListChat",
-          children: customItems
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "input-chat",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          className: "send-message",
-          placeholder: "Escribe Aqu\xED...",
-          id: "id-input-message",
-          onKeyDown: function onKeyDown(e) {
-            switch (e.key) {
-              case "Enter":
-                onClickInsertar("txt", valueInput);
-                break;
-
-              default:
-                break;
-            }
-          },
-          value: valueInput,
-          onChange: function onChange(event) {
-            return setValueInput(event.target.value);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-          type: "file",
-          id: "file",
-          accept: "image/*,text/*,application/*",
-          className: "add-picture-input",
-          onChange: function onChange(e) {
-            createPreview(document.getElementById("file").files[0]);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          htmlFor: "file",
-          className: "upload",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _upload_file.default,
-            alt: "send chat"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
-            return _regenerator.default.wrap(function _callee9$(_context9) {
-              while (1) {
-                switch (_context9.prev = _context9.next) {
-                  case 0:
-                    return _context9.abrupt("return", onClickInsertar("txt", valueInput));
-
-                  case 1:
-                  case "end":
-                    return _context9.stop();
-                }
-              }
-            }, _callee9);
-          })),
-          className: "send",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: _send.default,
-            alt: "send chat"
-          })
-        })]
-      })]
-    })]
-  });
-};
-
-exports.ChatPopUp = ChatPopUp;