contentoh-components-library 21.2.102 → 21.2.104

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

@@ -1,569 +0,0 @@
-"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 _jsxRuntime = require("react/jsx-runtime");
-
-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;
-
-  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: ""
-  }),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      modalAlert = _useState8[0],
-      setModalAlert = _useState8[1];
-
-  var containerList = (0, _react.useRef)(null);
-  /*
-  useEffect(() => {
-    //console.log("new observer");
-    const observer = new MutationObserver((mutationList) => {
-      updateScroll();
-    });
-    const itemsList = document.getElementById("ulItems");
-    const observerOptions = {
-      attributes: false,
-      childList: true,
-      subtree: false,
-      characterData: false,
-      attributeOldValue: false,
-      characterDataOldValue: false,
-    };
-    observer.observe(itemsList, observerOptions);
-     return () => {
-      observer.disconnect();
-      //console.log("remove observer");
-    };
-  }, [scrollHeight]);
-  */
-
-  (0, _react.useEffect)(function () {
-    if (!items) return;
-    if (chatType === "merchant_product") renderItems();else if (chatType === "order_product") renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
-  }, [items]);
-
-  var updateScroll = function updateScroll() {
-    var containerScroll = document.getElementById("containerItems");
-
-    if (containerScroll) {
-      var newScrollHeight = containerScroll.scrollHeight + 15;
-      var positionScroll = newScrollHeight - scrollHeight;
-      /*
-      console.log("========");
-      console.log("old:", scrollHeight);
-      console.log("new:", newScrollHeight);
-      console.log("pos:", positionScroll);
-      console.log("========");
-      */
-
-      if (newScrollHeight !== scrollHeight) {
-        containerScroll.scrollTop = positionScroll;
-        setScrollHeight(newScrollHeight);
-      }
-    }
-  };
-
-  var renderGrayLabel = function renderGrayLabel(text, key) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
-      in: true,
-      timeout: 600,
-      container: containerList.current,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-        className: "label-gray",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "separator"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: text
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "separator"
-        })]
-      })
-    }, key !== null && key !== void 0 ? key : "");
-  };
-
-  var renderStatusService = function renderStatusService(text, key) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
-      in: true,
-      timeout: 600,
-      container: containerList.current,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "label-statusService",
-        children: text
-      })
-    }, key !== null && key !== void 0 ? key : "");
-  };
-
-  var renderStatusArticle = function renderStatusArticle(text, key) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
-      in: true,
-      timeout: 600,
-      container: containerList.current,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "label-statusArticle",
-        children: text
-      })
-    }, key !== null && key !== void 0 ? key : "");
-  };
-
-  var renderStatusTicket = function renderStatusTicket(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      className: "item-statusTicket",
-      children: item.value
-    });
-  };
-
-  var renderStatusTicketNeutral = function renderStatusTicketNeutral(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-      componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: users[item.userId].name
-      }),
-      className: "itemStatus ticket",
-      position: "topCenter",
-      addArrow: false,
-      transitionType: "zoom",
-      followCursor: false,
-      children: item.value
-    });
-  };
-
-  var renderMessage = function renderMessage(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: "item-message",
-      children: [" ", item.value, " "]
-    });
-  };
-
-  var renderComment = function renderComment(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-      className: "item-comment",
-      children: [" ", item.value, " "]
-    });
-  };
-
-  var renderImg = function renderImg(item) {
-    var _value$width, _value$height, _value$width2, _value$height2;
-
-    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); //console.log("newHeight imgURL:", imgHeight);
-
-    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); //console.log("height full:", modalImgHeight);
-
-    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, {
-        className: "container-ImagePreview",
-        width: "100%",
-        sizeLoading: 35,
-        colorLoading: undefined,
-        imgURL: imgURL,
-        modalImgURL: modalImgURL,
-        downloadImgURL: originalImgURL,
-        imageName: value.name,
-        showButtonDownload: true,
-        componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            children: value.name
-          }),
-          className: "label-nameImg",
-          position: "topCenter",
-          addArrow: false,
-          transitionType: "zoom",
-          followCursor: false,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
-            className: "iconDefaultImg",
-            type: "white",
-            size: 60,
-            borderType: "rectangle",
-            icon: _freeSolidSvgIcons.faImage
-          })
-        }),
-        componentDefaultModal: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            children: value.name
-          }),
-          className: "label-nameImgModal",
-          position: "topCenter",
-          addArrow: false,
-          transitionType: "zoom",
-          followCursor: false,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
-            className: "iconDefaultImgModal",
-            type: "white",
-            size: 100,
-            borderType: "rectangle",
-            icon: _freeSolidSvgIcons.faImage
-          })
-        })
-      })
-    });
-    /*
-    <Tooltip
-          componentTooltip={<label>{value.name}</label>}
-          className="label-nameFileShort"
-          position={"topCenter"}
-          addArrow={false}
-          transitionType={"zoom"}
-          followCursor={false}
-        >
-          {value.name}
-        </Tooltip>
-         */
-  };
-
-  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, {
-        className: "btnDownloadFileItem",
-        size: 22,
-        type: ownMessage ? "black" : "white",
-        transparent: true,
-        url: url,
-        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", {
-          children: value.name
-        }),
-        className: "label-nameFileShort",
-        position: "topCenter",
-        addArrow: false,
-        transitionType: "zoom",
-        followCursor: false,
-        children: value.name
-      })]
-    });
-  };
-
-  var getUserCreatedItem = function getUserCreatedItem(ownMessage, item, lastUserId) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
-      id: "itemScroll",
-      direction: ownMessage ? "left" : "right",
-      in: true,
-      timeout: 500,
-      container: containerList.current,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-        className: (ownMessage ? "own-message " : "") + (lastUserId == item.userId ? "sameUser" : ""),
-        children: [lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
-          className: "container-imgUser",
-          sizeLoading: 25,
-          colorLoading: undefined,
-          src: (0, _data.getProfilePicture)(item.userId, 34, 34),
-          componentDefault: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomIcon.CustomIcon, {
-            className: "icon-imgUser",
-            type: "whiteS2",
-            size: 17,
-            borderType: "circle",
-            icon: _freeSolidSvgIcons.faUser
-          }),
-          classNameTooltip: "tooltip-imgUser",
-          componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            className: "label-nameUser",
-            children: users[item.userId].name
-          })
-        }), item.type === "message" ? renderMessage(item) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          className: "label-time",
-          children: (0, _utils.getTime)(item.date)
-        })]
-      })
-    }, "item-" + item.id);
-  };
-
-  var getItemNeutral = function getItemNeutral(item) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Zoom, {
-      in: true,
-      timeout: 600,
-      container: containerList.current,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        className: "itemNeutral",
-        children: item.type === "statusTicket" ? renderStatusTicketNeutral(item) : null
-      })
-    }, "item-" + item.id);
-  };
-
-  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));
-        } else {
-          var newDate = (0, _utils.getFullDate)(new Date(item.date));
-
-          if (newDate !== date) {
-            jsxItems.push(renderGrayLabel(date, "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)));
-            continue;
-
-          case "statusService":
-            jsxItems.push(renderStatusService(item.value, "item-".concat(item.id)));
-            continue;
-        } // acomodo del item (left o right)
-
-
-        var ownMessage = false; // CHAT MERCHANT ARTICLE
-
-        if (chatType === "merchant_product") {
-          if (currentUser.companyId == users[item.userId].companyId) {
-            ownMessage = true;
-          }
-        } // CHAT ORDER ARTICLE
-        else if (chatType === "order_product") {
-          if (currentUser.companyId == users[item.userId].companyId) {
-            if (activeCompanyId && activeCompanyId == currentUser.companyId) {
-              if (item.userId == currentUser.id) {
-                ownMessage = true;
-              }
-            } else {
-              ownMessage = true;
-            }
-          }
-        } // renderizar tipo de item
-
-
-        jsxItems.push(getUserCreatedItem(ownMessage, item));
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-
-    if (date) jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate), "label-date"));
-    setCustomItems(jsxItems);
-  };
-
-  var renderItemsTicket = function renderItemsTicket() {
-    var jsxItems = [];
-    var date = undefined;
-    var countDate = 1;
-    var lastUserId = undefined; //console.log("isUserTech:", currentUser.isUserTech);
-    // 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));
-        jsxItems.push(renderGrayLabel(date, "itemDate-".concat(countDate++)));
-        lastUserId = undefined;
-      } else {
-        var newDate = (0, _utils.getFullDate)(new Date(item.date));
-
-        if (newDate !== date) {
-          jsxItems.push(renderGrayLabel(newDate, "itemDate-".concat(countDate++)));
-          date = newDate;
-          lastUserId = undefined;
-        }
-      } // elementos que van alineados al centro
-
-      /*
-      switch (item.type) {
-        case "statusTicket":
-          jsxItems.push(getItemNeutral(item));
-          lastUserId = undefined;
-          continue;
-      }
-      */
-      // acomodo del item (left o right)
-
-
-      var ownMessage = false; // user tech
-
-      if (currentUser.isUserTech) {
-        if (users[item.userId].isUserTech) ownMessage = true;
-      } // user normal
-      else {
-        if (!users[item.userId].isUserTech) {
-          if (currentUser.companyId == users[item.userId].companyId) {
-            ownMessage = true;
-          }
-        } else if (currentUser.id == item.userId) {
-          ownMessage = true;
-        }
-      } // renderizar tipo de item
-      //console.log(lastUserId + "<>" + item.userId);
-
-
-      jsxItems.push(getUserCreatedItem(ownMessage, item, lastUserId));
-      lastUserId = item.userId;
-    }
-
-    setCustomItems(jsxItems);
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-      id: "containerItems",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "btn-loadMore",
-        children: showBtnLoadMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
-          className: "container-btnLoadMore",
-          type: "purple",
-          label: "cargar más",
-          size: 10,
-          borderType: "oval",
-          icon: _freeSolidSvgIcons.faRedoAlt,
-          iconPosition: "start",
-          isLoading: btnLoadMoreLoading,
-          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",
-        ref: containerList,
-        children: customItems
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
-      show: modalAlert.show,
-      title: modalAlert.title,
-      message: modalAlert.message,
-      icon: "info",
-      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,20 +0,0 @@
-"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;
-
-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  // 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      &.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      }\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        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        margin: 0;\n      }\n      .item-message,\n      .item-comment,\n      .item-file {\n        background-color: #8386ee;\n      }\n      .item-statusTicket {\n        background-color: #85bc5b;\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      // 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-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;