contentoh-components-library 21.2.105 → 21.2.106

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

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

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