contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,82 +1,120 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContainerItems = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _react = require("react");
+
 var _data = require("../../../../global-files/data");
+
 var _ImageTooltip = require("../../../molecules/ImageTooltip");
+
 var _utils = require("../../../../global-files/utils");
+
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+
 var _CustomIcon = require("../../../atoms/CustomIcon");
+
 var _ButtonV = require("../../../atoms/ButtonV2");
+
 var _ButtonDownloadFile = require("../../../molecules/ButtonDownloadFile");
+
 var _Modal = require("../../Modal");
+
 var _Tooltip = require("../../../atoms/Tooltip");
+
 var _material = require("@mui/material");
+
 var _ImagePreview = require("../../../atoms/ImagePreview");
+
 var _Status = require("../../../atoms/Status");
+
 var _handle_userTech = require("../../../../global-files/handle_userTech");
+
 var _awsAmplify = require("aws-amplify");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const ContainerItems = props => {
-  const {
-    items /* [
-          { id , date , type , value , userId } ,
-          ...
-          ] */,
-    users /* {
-          id: { name , companyId } ,
-          ...
-          } */,
-    currentUser,
-    // { id , companyId , ... }
-    activeCompanyId,
-    // number
-    chatType,
-    // string
-    showBtnLoadMore,
-    // boolean
-    onClickBtnLoadMore,
-    // () => {}
-    ticketCompany // id de la comañía que creó el ticket
-  } = props;
-  const [scrollHeight, setScrollHeight] = (0, _react.useState)(0);
-  const [btnLoadMoreLoading, setBtnLoadMoreLoading] = (0, _react.useState)(false);
-  const [customItems, setCustomItems] = (0, _react.useState)([]);
-  const [modalAlert, setModalAlert] = (0, _react.useState)({
+
+var ContainerItems = function ContainerItems(props) {
+  var items = props.items,
+      users = props.users,
+      currentUser = props.currentUser,
+      activeCompanyId = props.activeCompanyId,
+      chatType = props.chatType,
+      showBtnLoadMore = props.showBtnLoadMore,
+      onClickBtnLoadMore = props.onClickBtnLoadMore,
+      ticketCompany = props.ticketCompany;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      scrollHeight = _useState2[0],
+      setScrollHeight = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      btnLoadMoreLoading = _useState4[0],
+      setBtnLoadMoreLoading = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      customItems = _useState6[0],
+      setCustomItems = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({
     show: false,
     title: "",
     message: ""
-  });
-  const containerList = (0, _react.useRef)(null);
-  const containerItems = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
+  }),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      modalAlert = _useState8[0],
+      setModalAlert = _useState8[1];
+
+  var containerList = (0, _react.useRef)(null);
+  var containerItems = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
     if (!items) return;
     if (["merchant_product", "order_product", "product_status"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
   }, [items]);
-  (0, _react.useEffect)(() => {
-    const containerScroll = document.getElementById("ulItems");
-    if (customItems.length) setTimeout(() => {
+  (0, _react.useEffect)(function () {
+    var containerScroll = document.getElementById("ulItems");
+    if (customItems.length) setTimeout(function () {
       containerScroll.lastElementChild.scrollIntoView({
         block: "start"
       });
     }, 1);
   }, [customItems]);
-  const updateScroll = () => {
-    const containerScroll = document.getElementById("containerItems");
+
+  var updateScroll = function updateScroll() {
+    var containerScroll = document.getElementById("containerItems");
+
     if (containerScroll) {
-      const newScrollHeight = containerScroll.scrollHeight + 15;
-      const positionScroll = newScrollHeight - scrollHeight;
+      var newScrollHeight = containerScroll.scrollHeight + 15;
+      var positionScroll = newScrollHeight - scrollHeight;
+
       if (newScrollHeight !== scrollHeight) {
         containerScroll.scrollTop = positionScroll;
         setScrollHeight(newScrollHeight);
       }
     }
   };
-  const renderGrayLabel = (text, key) => {
+
+  var renderGrayLabel = function renderGrayLabel(text, key) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
       in: true,
       timeout: 600,
@@ -93,7 +131,8 @@ const ContainerItems = props => {
       })
     }, key !== null && key !== void 0 ? key : "");
   };
-  const renderStatusService = (text, key) => {
+
+  var renderStatusService = function renderStatusService(text, key) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
       in: true,
       timeout: 600,
@@ -104,7 +143,8 @@ const ContainerItems = props => {
       })
     }, key !== null && key !== void 0 ? key : "");
   };
-  const renderStatusArticle = (text, key) => {
+
+  var renderStatusArticle = function renderStatusArticle(text, key) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
       in: true,
       timeout: 600,
@@ -115,16 +155,18 @@ const ContainerItems = props => {
       })
     }, key !== null && key !== void 0 ? key : "");
   };
-  const renderStatusTicket = item => {
+
+  var renderStatusTicket = function renderStatusTicket(item) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       className: "item-statusTicket",
       children: item.value
     });
   };
-  const renderStatusItem = item => {
-    const splitText = item.value.split("|");
-    let message = [];
-    splitText.forEach((text, i) => {
+
+  var renderStatusItem = function renderStatusItem(item) {
+    var splitText = item.value.split("|");
+    var message = [];
+    splitText.forEach(function (text, i) {
       if (i === 1 || i === 3) message.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
         statusType: text
       }));else message.push(text);
@@ -134,7 +176,8 @@ const ContainerItems = props => {
       children: message
     });
   };
-  const renderStatusTicketNeutral = item => {
+
+  var renderStatusTicketNeutral = function renderStatusTicketNeutral(item) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
       componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
         children: users[item.userId].name
@@ -147,28 +190,32 @@ const ContainerItems = props => {
       children: item.value
     });
   };
-  const renderMessage = (item, differentCompany) => {
+
+  var renderMessage = function renderMessage(item, differentCompany) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
       className: "item-message ".concat(differentCompany ? "different-company" : ""),
       children: [" ", item.value, " "]
     });
   };
-  const renderComment = item => {
+
+  var renderComment = function renderComment(item) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
       className: "item-comment",
       children: [" ", item.value, " "]
     });
   };
-  const renderImg = item => {
+
+  var renderImg = function renderImg(item) {
     var _value$width, _value$height, _value$width2, _value$height2;
-    const value = (0, _utils.decodeJSON)(item.value);
-    const originalImgURL = "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value.key);
-    // dimensiones de la imagen a mostrar en el chat
-    const imgHeight = (0, _utils.getResizeImgHeight)((_value$width = value.width) !== null && _value$width !== void 0 ? _value$width : 400, (_value$height = value.height) !== null && _value$height !== void 0 ? _value$height : 400, 400);
-    const imgURL = (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value.key, 400, imgHeight);
-    // dimensiones de la imagen a mostrar en modal full
-    const modalImgHeight = (0, _utils.getResizeImgHeight)((_value$width2 = value.width) !== null && _value$width2 !== void 0 ? _value$width2 : screen.width, (_value$height2 = value.height) !== null && _value$height2 !== void 0 ? _value$height2 : screen.height, screen.width);
-    const modalImgURL = (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value.key, screen.width, modalImgHeight);
+
+    var value = (0, _utils.decodeJSON)(item.value);
+    var originalImgURL = "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value.key); // dimensiones de la imagen a mostrar en el chat
+
+    var imgHeight = (0, _utils.getResizeImgHeight)((_value$width = value.width) !== null && _value$width !== void 0 ? _value$width : 400, (_value$height = value.height) !== null && _value$height !== void 0 ? _value$height : 400, 400);
+    var imgURL = (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value.key, 400, imgHeight); // dimensiones de la imagen a mostrar en modal full
+
+    var modalImgHeight = (0, _utils.getResizeImgHeight)((_value$width2 = value.width) !== null && _value$width2 !== void 0 ? _value$width2 : screen.width, (_value$height2 = value.height) !== null && _value$height2 !== void 0 ? _value$height2 : screen.height, screen.width);
+    var modalImgURL = (0, _utils.getImageURL)(process.env.REACT_APP_IMAGES_BUCKET, value.key, screen.width, modalImgHeight);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "item-img",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreview.ImagePreview, {
@@ -230,9 +277,10 @@ const ContainerItems = props => {
         </Tooltip>
          */
   };
-  const renderFile = (item, ownMessage) => {
-    const value = (0, _utils.decodeJSON)(item.value);
-    const url = "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value.key);
+
+  var renderFile = function renderFile(item, ownMessage) {
+    var value = (0, _utils.decodeJSON)(item.value);
+    var url = "".concat(process.env.REACT_APP_IMAGES_ENDPOINT, "/").concat(value.key);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "item-file",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDownloadFile.ButtonDownloadFile, {
@@ -241,12 +289,14 @@ const ContainerItems = props => {
         type: ownMessage ? "black" : "white",
         transparent: true,
         url: url,
-        onDownload: error => {
-          error && setModalAlert(prev => ({
-            show: true,
-            title: error.message,
-            message: error.details
-          }));
+        onDownload: function onDownload(error) {
+          error && setModalAlert(function (prev) {
+            return {
+              show: true,
+              title: error.message,
+              message: error.details
+            };
+          });
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
         componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
@@ -261,8 +311,9 @@ const ContainerItems = props => {
       })]
     });
   };
-  const getUserCreatedItem = (ownMessage, item, lastUserId) => {
-    const differentCompany = currentUser.companyId !== users[item.userId].companyId;
+
+  var getUserCreatedItem = function getUserCreatedItem(ownMessage, item, lastUserId) {
+    var differentCompany = currentUser.companyId !== users[item.userId].companyId;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
       id: "itemScroll-" + item.id,
       direction: ownMessage ? "left" : "right",
@@ -295,7 +346,8 @@ const ContainerItems = props => {
       })
     }, "item-" + item.id);
   };
-  const getItemNeutral = item => {
+
+  var getItemNeutral = function getItemNeutral(item) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
       in: true,
       timeout: 600,
@@ -306,77 +358,96 @@ const ContainerItems = props => {
       })
     }, "item-" + item.id);
   };
-  const renderItems = () => {
-    let jsxItems = [];
-    let date = undefined;
-    let countDate = 1;
-    for (const item of items) {
-      // manejo de las etiquetas fechas
-      if (!date) {
-        date = (0, _utils.getFullDate)(new Date(item.date));
-        jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
-      } else {
-        let newDate = (0, _utils.getFullDate)(new Date(item.date));
-        if (newDate !== date) {
-          jsxItems.push(renderGrayLabel(newDate, "itemDate-".concat(countDate++)));
-          date = newDate;
-        }
-      }
 
-      // elementos que van alineados al centro
-      switch (item.type) {
-        case "statusArticle":
-          jsxItems.push(renderStatusArticle(item.value, "item-".concat(item.id)));
-          break;
-        case "statusService":
-          jsxItems.push(renderStatusService(item.value, "item-".concat(item.id)));
-          break;
-      }
+  var renderItems = function renderItems() {
+    var jsxItems = [];
+    var date = undefined;
+    var countDate = 1;
+
+    var _iterator = (0, _createForOfIteratorHelper2.default)(items),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+
+        // manejo de las etiquetas fechas
+        if (!date) {
+          date = (0, _utils.getFullDate)(new Date(item.date));
+          jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
+        } else {
+          var newDate = (0, _utils.getFullDate)(new Date(item.date));
+
+          if (newDate !== date) {
+            jsxItems.push(renderGrayLabel(newDate, "itemDate-".concat(countDate++)));
+            date = newDate;
+          }
+        } // elementos que van alineados al centro
+
+
+        switch (item.type) {
+          case "statusArticle":
+            jsxItems.push(renderStatusArticle(item.value, "item-".concat(item.id)));
+            break;
+
+          case "statusService":
+            jsxItems.push(renderStatusService(item.value, "item-".concat(item.id)));
+            break;
+        } // acomodo del item (left o right)
 
-      // acomodo del item (left o right)
-      let ownMessage = false;
-      // CHAT MERCHANT ARTICLE
-      if (currentUser.id === item.userId) {
-        ownMessage = true;
-      }
 
-      // renderizar tipo de item
-      jsxItems.push(getUserCreatedItem(ownMessage, item));
+        var ownMessage = false; // CHAT MERCHANT ARTICLE
+
+        if (currentUser.id === item.userId) {
+          ownMessage = true;
+        } // renderizar tipo de item
+
+
+        jsxItems.push(getUserCreatedItem(ownMessage, item));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
+
     setCustomItems(jsxItems);
   };
-  const renderItemsTicket = () => {
-    let jsxItems = [];
-    let date = undefined;
-    let countDate = 1;
-    let lastUserId = undefined;
-
-    // recorrido de los items (del mas viejo al mas reciente)
-    for (let index = items.length - 1; index >= 0; index--) {
-      const item = items[index];
-      // manejo de las etiquetas fechas
+
+  var renderItemsTicket = function renderItemsTicket() {
+    var jsxItems = [];
+    var date = undefined;
+    var countDate = 1;
+    var lastUserId = undefined; // recorrido de los items (del mas viejo al mas reciente)
+
+    for (var index = items.length - 1; index >= 0; index--) {
+      var item = items[index]; // manejo de las etiquetas fechas
+
       if (!date) {
         date = (0, _utils.getFullDate)(new Date(item.date));
+
         if (item.type === "statusTicket") {
           [ticketCompany, 254].includes(currentUser.companyId) && jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
         } else {
           jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
         }
+
         lastUserId = undefined;
       } else {
-        let newDate = (0, _utils.getFullDate)(new Date(item.date));
+        var newDate = (0, _utils.getFullDate)(new Date(item.date));
+
         if (newDate !== date) {
           if (item.type === "statusTicket") {
             [ticketCompany, 254].includes(currentUser.companyId) && jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
           } else {
             jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
           }
+
           date = newDate;
           lastUserId = undefined;
         }
-      }
+      } // elementos que van alineados al centro
 
-      // elementos que van alineados al centro
       /*
       switch (item.type) {
         case "statusTicket":
@@ -385,19 +456,23 @@ const ContainerItems = props => {
           continue;
       }
       */
-
       // acomodo del item (left o right)
-      let ownMessage = false;
+
+
+      var ownMessage = false;
+
       if (currentUser.id === item.userId) {
         ownMessage = true;
-      }
+      } // renderizar tipo de item
+
 
-      // renderizar tipo de item
       jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId, index === 0));
       lastUserId = item.userId;
     }
+
     setCustomItems(jsxItems);
   };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       id: "containerItems",
@@ -413,20 +488,49 @@ const ContainerItems = props => {
           icon: _freeSolidSvgIcons.faRedoAlt,
           iconPosition: "start",
           isLoading: btnLoadMoreLoading,
-          onClick: async event => {
-            setBtnLoadMoreLoading(true);
-            if (onClickBtnLoadMore) {
-              const responseError = await onClickBtnLoadMore();
-              if (responseError) {
-                setModalAlert({
-                  show: true,
-                  title: responseError.title,
-                  message: responseError.message
-                });
-              }
-            }
-            setBtnLoadMoreLoading(false);
-          }
+          onClick: /*#__PURE__*/function () {
+            var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
+              var responseError;
+              return _regenerator.default.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      setBtnLoadMoreLoading(true);
+
+                      if (!onClickBtnLoadMore) {
+                        _context.next = 6;
+                        break;
+                      }
+
+                      _context.next = 4;
+                      return onClickBtnLoadMore();
+
+                    case 4:
+                      responseError = _context.sent;
+
+                      if (responseError) {
+                        setModalAlert({
+                          show: true,
+                          title: responseError.title,
+                          message: responseError.message
+                        });
+                      }
+
+                    case 6:
+                      setBtnLoadMoreLoading(false);
+
+                    case 7:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            }));
+
+            return function (_x) {
+              return _ref.apply(this, arguments);
+            };
+          }()
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         id: "ulItems",
@@ -438,11 +542,15 @@ const ContainerItems = props => {
       title: modalAlert.title,
       message: modalAlert.message,
       icon: "info",
-      onClickBtnDefault: event => setModalAlert(prev => ({
-        ...prev,
-        show: false
-      }))
+      onClickBtnDefault: function onClickBtnDefault(event) {
+        return setModalAlert(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
+            show: false
+          });
+        });
+      }
     })]
   });
 };
+
 exports.ContainerItems = ContainerItems;

package/dist/components/organisms/Chat/ContainerItems/styles.js

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: 100%;\n  flex-grow: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n  background: white;\n  padding: 15px 11px;\n  overflow: auto;\n  //border: 1px solid red;\n\n  .btn-loadMore {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    flex-grow: 2;\n\n    .container-btnLoadMore {\n      border-radius: 10px;\n      .button {\n        padding: 5px 10px;\n        border: none;\n        gap: 10px;\n        font-family: ", ";\n        .icon,\n        .iconLoading {\n          font-size: 10px;\n        }\n      }\n    }\n  }\n\n  @media (max-width: 768px) { \n    width: 90%;\n  }\n\n  // lista de items\n  > ul {\n    --marginUserValue: 10px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n\n    // items cambio de estatus general del article\n    // items cambio de estatus en servicio del article\n    .label-statusArticle,\n    .label-statusService {\n      width: 100%;\n      padding: 10px;\n      border-radius: 10px;\n      display: grid;\n      place-items: center;\n      cursor: default;\n\n      text-align: left;\n      font-family: ", ", sans-serif;\n      color: white;\n      font-size: 12px;\n\n      .label {\n        text-align: left;\n        font-family: ", ", sans-serif;\n        color: white;\n        font-size: 12px;\n        white-space: pre-wrap;\n        cursor: inherit;\n      }\n    }\n    .label-statusArticle {\n      background-color: #85bc5b;\n    }\n    .label-statusService {\n      background-color: #8a6caa;\n    }\n\n    // cada item dentro de la lista (fechas|message|img|file|status...)\n    li {\n      width: 90%;\n      padding: 0px;\n      margin: 16px 0px 0px 0px;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      flex-wrap: nowrap;\n      gap: var(--marginUserValue);\n      align-items: center;\n      align-self: flex-start;\n      //border: 1px solid blue;\n\n      & > label:first-child,\n      .item-img {\n        margin: 0px 0px 0px 44px;\n      }\n\n      &.sameUser {\n        margin: 2px 0px 0px 0px;\n        /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n      }\n\n      // items gray label (para fechas)\n      &.label-gray {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n        .separator {\n          flex-grow: 2;\n          min-width: 35px;\n          border: 0.3px solid #f0f0f0;\n        }\n        label {\n          padding: 4px 15px;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: #b3b3b3;\n          font-size: 10px;\n        }\n      }\n\n      // container ImageTooltip del user de un item\n      .container-imgUser {\n        display: grid;\n        place-items: center;\n        width: 34px;\n        min-width: min-content;\n        border-radius: 50%;\n        overflow: hidden;\n        align-self: flex-start;\n        margin: 0;\n      }\n      .icon-imgUser.fill {\n        padding: 0px;\n        width: 34px;\n        height: 34px;\n        color: #9d9d9d;\n        border-color: #9d9d9d;\n        border-width: 2px;\n      }\n      .tooltip-imgUser {\n        .label-nameUser {\n          font-family: ", ", sans-serif;\n          color: #262626;\n          font-size: 12px;\n          text-align: center;\n        }\n      }\n\n      // items de tipo message, comment y file\n      .item-message,\n      .item-comment,\n      .item-file,\n      .item-statusTicket,\n      .item-statusItem {\n        border-radius: 10px;\n        padding: 10px;\n        font-family: ", ", sans-serif;\n        font-size: 12px;\n        text-align: left;\n        white-space: pre-line;\n        color: white;\n        word-break: break-word;\n      }\n      .item-message,\n      .item-comment,\n      .item-file {\n        background-color: #8386ee;\n      }\n      .item-statusTicket,\n      .item-statusItem {\n        background-color: #85bc5b;\n      }\n\n      .item-statusItem {\n        display: flex;\n        gap: 3px;\n        align-items: center;\n      }\n\n      .item-message {\n        &.different-company {\n          border: 1px solid #e33aa9;\n        }\n      }\n      /*\n      .item-comment {\n        background-color: #5e61b2;\n      }\n      */\n\n      // items de tipo img\n      .item-img {\n        display: grid;\n        place-items: center;\n        background-color: #f7f7f7;\n        border-radius: 10px;\n        overflow: hidden;\n        max-width: 60%;\n        max-height: 300px;\n\n        .container-ImagePreview {\n          max-height: inherit;\n\n          > .img {\n            max-height: inherit;\n          }\n\n          .label-nameImg {\n            .iconDefaultImg {\n              border-radius: 0px;\n              border: none;\n              padding: 0px;\n              color: #8386ee;\n            }\n          }\n        }\n      }\n\n      // items de tipo file\n      .item-file {\n        width: auto;\n        max-width: 70%;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 6px;\n\n        .btnDownloadFileItem {\n          width: 28px;\n          min-width: 28px;\n          height: 28px;\n          min-height: 28px;\n        }\n\n        // nameFile solo 1 linea\n        .label-nameFileShort {\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          flex-grow: 2;\n          cursor: default;\n          font-family: ", ", sans-serif;\n          font-size: 12px;\n          text-align: center;\n          color: white;\n        }\n      }\n\n      // label hora del item\n      .label-time {\n        min-width: fit-content;\n        color: #c7c7c7;\n        font-family: ", ", sans-serif;\n        font-size: 9px;\n      }\n\n      & > .label-time:first-child {\n        display: none;\n      }\n\n      // items del currentUser\n      &.own-message {\n        align-self: flex-end;\n        flex-direction: row-reverse;\n\n        /* &.sameUser {\n          padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n        } */\n\n        .item-message,\n        .item-comment {\n          color: #262626;\n        }\n        .item-message,\n        .item-comment,\n        .item-file {\n          background-color: #f0f0f0;\n        }\n\n        & > .item-message:first-child {\n          margin: 0px 40px 0px 0px;\n        }\n        /*\n        .item-comment {\n          background-color: #d7d7d7;\n        }\n        */\n\n        // items de tipo img\n        .item-img {\n          .container-ImagePreview {\n            .label-nameImg {\n              .iconDefaultImg {\n                color: #c9c7c7;\n              }\n            }\n          }\n        }\n\n        // items de tipo file\n        .item-file {\n          .btnDownloadFileItem {\n            .iconFile,\n            .container-btnDownload .buttonMUI .icon {\n              color: #262626;\n            }\n          }\n\n          // nameFile solo 1 linea\n          .label-nameFileShort {\n            color: #262626;\n          }\n        }\n      }\n\n      // items neutrales (center aligned)\n      &.itemNeutral {\n        width: 100%;\n\n        .itemStatus {\n          width: 100%;\n          padding: 10px;\n          border-radius: 10px;\n          display: grid;\n          place-items: center;\n          cursor: default;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: white;\n          font-size: 12px;\n          line-height: 1.2;\n          white-space: pre-wrap;\n\n          &.ticket {\n            color: white;\n            background-color: #85bc5b;\n          }\n        }\n      }\n    }\n  }\n\n  .content-chat {\n    ::-webkit-scrollbar {\n      width: 0;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: 100%;\n  flex-grow: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n  background: white;\n  padding: 15px 11px;\n  overflow: auto;\n  //border: 1px solid red;\n\n  .btn-loadMore {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    flex-grow: 2;\n\n    .container-btnLoadMore {\n      border-radius: 10px;\n      .button {\n        padding: 5px 10px;\n        border: none;\n        gap: 10px;\n        font-family: ", ";\n        .icon,\n        .iconLoading {\n          font-size: 10px;\n        }\n      }\n    }\n  }\n\n  @media (max-width: 768px) { \n    width: 90%;\n  }\n\n  // lista de items\n  > ul {\n    --marginUserValue: 10px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 0px;\n\n    // items cambio de estatus general del article\n    // items cambio de estatus en servicio del article\n    .label-statusArticle,\n    .label-statusService {\n      width: 100%;\n      padding: 10px;\n      border-radius: 10px;\n      display: grid;\n      place-items: center;\n      cursor: default;\n\n      text-align: left;\n      font-family: ", ", sans-serif;\n      color: white;\n      font-size: 12px;\n\n      .label {\n        text-align: left;\n        font-family: ", ", sans-serif;\n        color: white;\n        font-size: 12px;\n        white-space: pre-wrap;\n        cursor: inherit;\n      }\n    }\n    .label-statusArticle {\n      background-color: #85bc5b;\n    }\n    .label-statusService {\n      background-color: #8a6caa;\n    }\n\n    // cada item dentro de la lista (fechas|message|img|file|status...)\n    li {\n      width: 90%;\n      padding: 0px;\n      margin: 16px 0px 0px 0px;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      flex-wrap: nowrap;\n      gap: var(--marginUserValue);\n      align-items: center;\n      align-self: flex-start;\n      //border: 1px solid blue;\n\n      & > label:first-child,\n      .item-img {\n        margin: 0px 0px 0px 44px;\n      }\n\n      &.sameUser {\n        margin: 2px 0px 0px 0px;\n        /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n      }\n\n      // items gray label (para fechas)\n      &.label-gray {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n        .separator {\n          flex-grow: 2;\n          min-width: 35px;\n          border: 0.3px solid #f0f0f0;\n        }\n        label {\n          padding: 4px 15px;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: #b3b3b3;\n          font-size: 10px;\n        }\n      }\n\n      // container ImageTooltip del user de un item\n      .container-imgUser {\n        display: grid;\n        place-items: center;\n        width: 34px;\n        min-width: min-content;\n        border-radius: 50%;\n        overflow: hidden;\n        align-self: flex-start;\n        margin: 0;\n      }\n      .icon-imgUser.fill {\n        padding: 0px;\n        width: 34px;\n        height: 34px;\n        color: #9d9d9d;\n        border-color: #9d9d9d;\n        border-width: 2px;\n      }\n      .tooltip-imgUser {\n        .label-nameUser {\n          font-family: ", ", sans-serif;\n          color: #262626;\n          font-size: 12px;\n          text-align: center;\n        }\n      }\n\n      // items de tipo message, comment y file\n      .item-message,\n      .item-comment,\n      .item-file,\n      .item-statusTicket,\n      .item-statusItem {\n        border-radius: 10px;\n        padding: 10px;\n        font-family: ", ", sans-serif;\n        font-size: 12px;\n        text-align: left;\n        white-space: pre-line;\n        color: white;\n        word-break: break-word;\n      }\n      .item-message,\n      .item-comment,\n      .item-file {\n        background-color: #8386ee;\n      }\n      .item-statusTicket,\n      .item-statusItem {\n        background-color: #85bc5b;\n      }\n\n      .item-statusItem {\n        display: flex;\n        gap: 3px;\n        align-items: center;\n      }\n\n      .item-message {\n        &.different-company {\n          border: 1px solid #e33aa9;\n        }\n      }\n      /*\n      .item-comment {\n        background-color: #5e61b2;\n      }\n      */\n\n      // items de tipo img\n      .item-img {\n        display: grid;\n        place-items: center;\n        background-color: #f7f7f7;\n        border-radius: 10px;\n        overflow: hidden;\n        max-width: 60%;\n        max-height: 300px;\n\n        .container-ImagePreview {\n          max-height: inherit;\n\n          > .img {\n            max-height: inherit;\n          }\n\n          .label-nameImg {\n            .iconDefaultImg {\n              border-radius: 0px;\n              border: none;\n              padding: 0px;\n              color: #8386ee;\n            }\n          }\n        }\n      }\n\n      // items de tipo file\n      .item-file {\n        width: auto;\n        max-width: 70%;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 6px;\n\n        .btnDownloadFileItem {\n          width: 28px;\n          min-width: 28px;\n          height: 28px;\n          min-height: 28px;\n        }\n\n        // nameFile solo 1 linea\n        .label-nameFileShort {\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          flex-grow: 2;\n          cursor: default;\n          font-family: ", ", sans-serif;\n          font-size: 12px;\n          text-align: center;\n          color: white;\n        }\n      }\n\n      // label hora del item\n      .label-time {\n        min-width: fit-content;\n        color: #c7c7c7;\n        font-family: ", ", sans-serif;\n        font-size: 9px;\n      }\n\n      & > .label-time:first-child {\n        display: none;\n      }\n\n      // items del currentUser\n      &.own-message {\n        align-self: flex-end;\n        flex-direction: row-reverse;\n\n        /* &.sameUser {\n          padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n        } */\n\n        .item-message,\n        .item-comment {\n          color: #262626;\n        }\n        .item-message,\n        .item-comment,\n        .item-file {\n          background-color: #f0f0f0;\n        }\n\n        & > .item-message:first-child {\n          margin: 0px 40px 0px 0px;\n        }\n        /*\n        .item-comment {\n          background-color: #d7d7d7;\n        }\n        */\n\n        // items de tipo img\n        .item-img {\n          .container-ImagePreview {\n            .label-nameImg {\n              .iconDefaultImg {\n                color: #c9c7c7;\n              }\n            }\n          }\n        }\n\n        // items de tipo file\n        .item-file {\n          .btnDownloadFileItem {\n            .iconFile,\n            .container-btnDownload .buttonMUI .icon {\n              color: #262626;\n            }\n          }\n\n          // nameFile solo 1 linea\n          .label-nameFileShort {\n            color: #262626;\n          }\n        }\n      }\n\n      // items neutrales (center aligned)\n      &.itemNeutral {\n        width: 100%;\n\n        .itemStatus {\n          width: 100%;\n          padding: 10px;\n          border-radius: 10px;\n          display: grid;\n          place-items: center;\n          cursor: default;\n          text-align: center;\n          font-family: ", ", sans-serif;\n          color: white;\n          font-size: 12px;\n          line-height: 1.2;\n          white-space: pre-wrap;\n\n          &.ticket {\n            color: white;\n            background-color: #85bc5b;\n          }\n        }\n      }\n    }\n  }\n\n  .content-chat {\n    ::-webkit-scrollbar {\n      width: 0;\n    }\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
+
+exports.Container = Container;