contentoh-components-library 21.2.105 → 21.3.0

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

@@ -0,0 +1,841 @@
+"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;