contentoh-components-library 21.5.86 → 21.5.87

package/dist/components/molecules/TagAndInput/index.js

@@ -117,13 +117,18 @@ var TagAndInput = function TagAndInput(_ref) {
       isAiGenerated = _useState10[0],
       setIsAiGenerated = _useState10[1];
 
+  var _useState11 = (0, _react.useState)(""),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      errorMessage = _useState12[0],
+      setErrorMessage = _useState12[1];
+
   function handlerAiGeneration(_x) {
     return _handlerAiGeneration.apply(this, arguments);
   }
 
   function _handlerAiGeneration() {
     _handlerAiGeneration = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
-      var type, currentSuggestions, aiSuggestions;
+      var type, currentSuggestions, aiSuggestions, errorMsg;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -158,8 +163,9 @@ var TagAndInput = function TagAndInput(_ref) {
               return _context.abrupt("return", setIsAiActive(true));
 
             case 9:
+              setErrorMessage("");
               setIsAiGenerationLoading(true);
-              _context.next = 12;
+              _context.next = 13;
               return generateProductSuggestions({
                 inputName: label,
                 currentValue: value,
@@ -173,26 +179,38 @@ var TagAndInput = function TagAndInput(_ref) {
                 attributeId: isBenefitInput ? inputId : null
               });
 
-            case 12:
+            case 13:
               aiSuggestions = _context.sent;
 
               if (!(!aiSuggestions && aiSuggestions.length === 0)) {
-                _context.next = 17;
+                _context.next = 19;
+                break;
+              }
+
+              errorMsg = "Error: No se recibieron sugerencias de IA";
+              console.log(errorMsg);
+              setIsAiGenerationLoading(false);
+              return _context.abrupt("return");
+
+            case 19:
+              if (!(aiSuggestions !== null && aiSuggestions !== void 0 && aiSuggestions.error)) {
+                _context.next = 24;
                 break;
               }
 
-              console.log("Error: No se recibieron sugerencias de IA");
+              console.log('Error: ', aiSuggestions.error);
+              setErrorMessage(aiSuggestions.error);
               setIsAiGenerationLoading(false);
               return _context.abrupt("return");
 
-            case 17:
+            case 24:
               setSuggestions(function (prev) {
                 return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, inputId, aiSuggestions));
               });
               setIsAiActive(true);
               setIsAiGenerationLoading(false);
 
-            case 20:
+            case 27:
             case "end":
               return _context.stop();
           }
@@ -208,7 +226,7 @@ var TagAndInput = function TagAndInput(_ref) {
 
   function _handlerRegenerateSuggestions() {
     _handlerRegenerateSuggestions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref3) {
-      var _ref3$type, type, currentSuggestions, aiSuggestions;
+      var _ref3$type, type, currentSuggestions, aiSuggestions, errorMsg;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -224,9 +242,10 @@ var TagAndInput = function TagAndInput(_ref) {
               return _context2.abrupt("return");
 
             case 3:
+              setErrorMessage("");
               setIsAiRegenerationLoading(true);
               currentSuggestions = suggestions === null || suggestions === void 0 ? void 0 : suggestions[inputId];
-              _context2.next = 7;
+              _context2.next = 8;
               return regenerateProductSuggestions({
                 inputName: label,
                 currentValue: value,
@@ -240,25 +259,42 @@ var TagAndInput = function TagAndInput(_ref) {
                 attributeId: isBenefitInput ? inputId : null
               });
 
-            case 7:
+            case 8:
               aiSuggestions = _context2.sent;
 
               if (!(!aiSuggestions && aiSuggestions.length === 0)) {
-                _context2.next = 12;
+                _context2.next = 15;
+                break;
+              }
+
+              errorMsg = "Error: No se recibieron sugerencias de IA";
+              console.log(errorMsg);
+              setErrorMessage(errorMsg);
+              setIsAiRegenerationLoading(false);
+              return _context2.abrupt("return");
+
+            case 15:
+              console.log({
+                aiSuggestionsRenew: aiSuggestions
+              });
+
+              if (!(aiSuggestions !== null && aiSuggestions !== void 0 && aiSuggestions.error)) {
+                _context2.next = 21;
                 break;
               }
 
-              console.log("Error: No se recibieron sugerencias de IA");
+              console.log('Error: ', aiSuggestions.error);
+              setErrorMessage(aiSuggestions.error);
               setIsAiRegenerationLoading(false);
               return _context2.abrupt("return");
 
-            case 12:
+            case 21:
               setSuggestions(function (prev) {
                 return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, prev), {}, (0, _defineProperty2.default)({}, inputId, [].concat((0, _toConsumableArray2.default)(currentSuggestions), (0, _toConsumableArray2.default)(aiSuggestions))));
               });
               setIsAiRegenerationLoading(false);
 
-            case 14:
+            case 23:
             case "end":
               return _context2.stop();
           }
@@ -403,6 +439,11 @@ var TagAndInput = function TagAndInput(_ref) {
           children: "Atributo generado con IA"
         })]
       }) : null]
+    }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "error-message-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: errorMessage
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GeneralInput, {
       inputId: inputId,
       inputType: inputType,

package/dist/components/molecules/TagAndInput/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    font-family: ", ";\n\n    .titles{\n      display: flex;\n      gap: .5rem;\n      align-items: center;\n    }\n\n      .icon_information{\n        width: 1.35rem;\n        height: 1.35rem;\n        filter: brightness(.35);\n        margin-top: 10px;\n      }\n\n      .tooltip {\n        display: none;\n        position: absolute;\n        background-color: ", ";\n        color: ", ";\n        font-size: 14px;\n        line-height: 19px;\n        left: 0;\n        top: 0;\n        height: fit-content;\n        transition: display 2s;\n      }\n\n    .ai-generated{\n\n      display: flex;\n      align-items: items-center;\n      gap: .5rem;\n      font-size: 11px;\n      background-color: rgba(224, 57, 167, 0.025);\n      border: 1px solid rgba(224, 57, 167, 0.1);\n      padding: .25rem .5rem;\n      border-radius: 5px;\n      margin-left: 0.5rem;\n      margin-top: 7px;\n      cursor: default;\n\n      > img {\n        width: 0.75rem;\n        height: 0.75rem;\n      }\n\n    }\n\n    &:hover {\n      .tooltip {\n        display: block;\n      }\n    }\n\n\n  }\n\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n  & + * {\n    margin-top: ", "px;\n  }\n"])), _variables.FontFamily.Raleway, _variables.GlobalColors.white, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    font-family: ", ";\n\n    .titles{\n      display: flex;\n      gap: .5rem;\n      align-items: center;\n    }\n\n      .icon_information{\n        width: 1.35rem;\n        height: 1.35rem;\n        filter: brightness(.35);\n        margin-top: 10px;\n      }\n\n      .tooltip {\n        display: none;\n        position: absolute;\n        background-color: ", ";\n        color: ", ";\n        font-size: 14px;\n        line-height: 19px;\n        left: 0;\n        top: 0;\n        height: fit-content;\n        transition: display 2s;\n      }\n\n    .ai-generated{\n\n      display: flex;\n      align-items: items-center;\n      gap: .5rem;\n      font-size: 11px;\n      background-color: rgba(224, 57, 167, 0.025);\n      border: 1px solid rgba(224, 57, 167, 0.1);\n      padding: .25rem .5rem;\n      border-radius: 5px;\n      margin-left: 0.5rem;\n      margin-top: 7px;\n      cursor: default;\n\n      > img {\n        width: 0.75rem;\n        height: 0.75rem;\n      }\n\n    }\n\n    &:hover {\n      .tooltip {\n        display: block;\n      }\n    }\n\n\n  }\n\n  & > :first-child {\n    & + * {\n      margin-top: ", "px;\n    }\n  }\n  & + * {\n    margin-top: ", "px;\n  }\n\n  .error-message-container {\n\n    font-family: \"Raleway\";\n    font-size: 12px;\n    font-weight: 500;\n    color: #E1251B;\n    margin-bottom: 8px;\n    margin-top: 0;\n\n  }\n"])), _variables.FontFamily.Raleway, _variables.GlobalColors.white, function (_ref) {
   var color = _ref.color;
   return color ? color : _variables.GlobalColors.s5;
 }, function (_ref2) {

package/dist/contexts/AiProductEdition.js

@@ -96,6 +96,36 @@ var AiProductEditionProvider = function AiProductEditionProvider(_ref) {
       inputsUsingAi = _useState16[0],
       setInputsUsingAi = _useState16[1];
 
+  var MAX_CREDITS = 10;
+  var COOLDOWN_MS = 5 * 60 * 1000;
+  var RATE_LIMIT_KEY = "ai_generation_limit_data";
+
+  var checkAndManageRateLimit = function checkAndManageRateLimit(currentArticleId) {
+    var now = Date.now();
+    var storedData = localStorage.getItem(RATE_LIMIT_KEY);
+    var allRateData = storedData ? JSON.parse(storedData) : {};
+    var productTimestamps = allRateData[currentArticleId] || [];
+    productTimestamps = productTimestamps.filter(function (timestamp) {
+      return now - timestamp < COOLDOWN_MS;
+    });
+
+    if (productTimestamps.length >= MAX_CREDITS) {
+      allRateData[currentArticleId] = productTimestamps;
+      localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(allRateData));
+      return {
+        allowed: false,
+        message: "Has alcanzado el limite de intentos frecuentes para este producto. Por favor, espera unos minutos."
+      };
+    }
+
+    productTimestamps.push(now);
+    allRateData[currentArticleId] = productTimestamps;
+    localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(allRateData));
+    return {
+      allowed: true
+    };
+  };
+
   function setCurrentSuggestionValue(_ref2) {
     var inputId = _ref2.inputId,
         index = _ref2.index,
@@ -149,25 +179,35 @@ var AiProductEditionProvider = function AiProductEditionProvider(_ref) {
             case 5:
               newSuggestions = _context.sent;
 
-              if (!(!Array.isArray(newSuggestions) || newSuggestions.length === 0)) {
+              if (!(newSuggestions !== null && newSuggestions !== void 0 && newSuggestions.error)) {
                 _context.next = 8;
                 break;
               }
 
-              return _context.abrupt("return", console.log("Error: No se obtuvieron nuevas sugerencias"));
+              return _context.abrupt("return", {
+                error: newSuggestions.error
+              });
 
             case 8:
-              if (newSuggestions) {
+              if (!(!Array.isArray(newSuggestions) || newSuggestions.length === 0)) {
                 _context.next = 10;
                 break;
               }
 
-              return _context.abrupt("return", console.log("Error: No exiten resultados nuevos"));
+              return _context.abrupt("return", console.log("Error: No se obtuvieron nuevas sugerencias"));
 
             case 10:
+              if (newSuggestions) {
+                _context.next = 12;
+                break;
+              }
+
+              return _context.abrupt("return", console.log("Error: No exiten resultados nuevos"));
+
+            case 12:
               return _context.abrupt("return", newSuggestions);
 
-            case 11:
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -184,7 +224,7 @@ var AiProductEditionProvider = function AiProductEditionProvider(_ref) {
 
   function _generateProductSuggestions() {
     _generateProductSuggestions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref4) {
-      var _ref4$inputName, inputName, _ref4$currentValue, currentValue, _ref4$description, description, _ref4$maxChar, maxChar, _ref4$type, type, articleId, versionId, descriptionId, attributeId, _state$product, _JSON$parse$data, _JSON$parse, upc, productName, retailer, category, version, payload, _yield$axios$post, data, results, _error$message;
+      var _ref4$inputName, inputName, _ref4$currentValue, currentValue, _ref4$description, description, _ref4$maxChar, maxChar, _ref4$type, type, articleId, versionId, descriptionId, attributeId, _state$product, _JSON$parse$data, _JSON$parse, rateLimitStatus, upc, productName, retailer, category, version, payload, _yield$axios$post, data, results, _error$message;
 
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
@@ -201,41 +241,54 @@ var AiProductEditionProvider = function AiProductEditionProvider(_ref) {
               return _context2.abrupt("return");
 
             case 4:
+              rateLimitStatus = checkAndManageRateLimit(articleId);
+
+              if (rateLimitStatus.allowed) {
+                _context2.next = 7;
+                break;
+              }
+
+              return _context2.abrupt("return", {
+                error: rateLimitStatus.message,
+                isRateLimitInfo: true
+              });
+
+            case 7:
               if (product) {
-                _context2.next = 6;
+                _context2.next = 9;
                 break;
               }
 
               throw new Error("El producto no está definido");
 
-            case 6:
+            case 9:
               if (!(!Array.isArray(parsedDatasheet) || parsedDatasheet.length === 0)) {
-                _context2.next = 8;
+                _context2.next = 11;
                 break;
               }
 
               throw new Error("No es encontró la ficha técnica");
 
-            case 8:
+            case 11:
               if (!(!Array.isArray(parsedImages) || parsedImages.length === 0)) {
-                _context2.next = 10;
+                _context2.next = 13;
                 break;
               }
 
               throw new Error("No se encontraron imágenes para la cadena seleccionada");
 
-            case 10:
+            case 13:
               upc = product.upc, productName = product.productName, retailer = product.retailer, category = product.category;
               version = state === null || state === void 0 ? void 0 : (_state$product = state.product) === null || _state$product === void 0 ? void 0 : _state$product.version;
 
               if (!(!upc || !description || !productName || !category || !retailer || !articleId || !version || !descriptionId && !attributeId)) {
-                _context2.next = 14;
+                _context2.next = 17;
                 break;
               }
 
               throw new Error("Faltan parámetros obligatorios para generar sugerencias de IA");
 
-            case 14:
+            case 17:
               payload = {
                 upc: upc,
                 attributeTitle: inputName,
@@ -253,42 +306,42 @@ var AiProductEditionProvider = function AiProductEditionProvider(_ref) {
                 descriptionId: descriptionId,
                 attributeId: attributeId
               };
-              _context2.next = 17;
+              _context2.next = 20;
               return _axios.default.post(process.env.REACT_APP_GENERATE_AI_ATTRIBUTES, payload, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 17:
+            case 20:
               _yield$axios$post = _context2.sent;
               data = _yield$axios$post.data;
               results = (_JSON$parse$data = (_JSON$parse = JSON.parse(data === null || data === void 0 ? void 0 : data.body)) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.data) !== null && _JSON$parse$data !== void 0 ? _JSON$parse$data : [];
 
               if (results) {
-                _context2.next = 22;
+                _context2.next = 25;
                 break;
               }
 
               throw new Error("No se encontraron resultados");
 
-            case 22:
+            case 25:
               return _context2.abrupt("return", results);
 
-            case 25:
-              _context2.prev = 25;
+            case 28:
+              _context2.prev = 28;
               _context2.t0 = _context2["catch"](1);
               console.log("Error generating AI suggestions:", _context2.t0);
               return _context2.abrupt("return", {
                 error: (_error$message = _context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.message) !== null && _error$message !== void 0 ? _error$message : "Error generating AI suggestions"
               });
 
-            case 29:
+            case 32:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[1, 25]]);
+      }, _callee2, null, [[1, 28]]);
     }));
     return _generateProductSuggestions.apply(this, arguments);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.86",
+  "version": "21.5.87",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/molecules/TagAndInput/index.js

@@ -71,6 +71,8 @@ export const TagAndInput = ({
   const [isAiRegenerationLoading, setIsAiRegenerationLoading] = useState(false);
   const [isAiGenerated, setIsAiGenerated] = useState(false);
 
+  const [errorMessage, setErrorMessage] = useState("");
+
   async function handlerAiGeneration({
     type
   }) {
@@ -88,6 +90,7 @@ export const TagAndInput = ({
     if(Array.isArray(currentSuggestions) && currentSuggestions.length > 0)
       return setIsAiActive(true);
 
+    setErrorMessage("");
     setIsAiGenerationLoading(true);
 
     const aiSuggestions = await generateProductSuggestions({
@@ -104,7 +107,15 @@ export const TagAndInput = ({
     });
 
     if(!aiSuggestions && aiSuggestions.length === 0) {
-      console.log("Error: No se recibieron sugerencias de IA");
+      const errorMsg = "Error: No se recibieron sugerencias de IA";
+      console.log(errorMsg);
+      setIsAiGenerationLoading(false);
+      return;
+    }
+
+    if(aiSuggestions?.error) {
+      console.log('Error: ', aiSuggestions.error);
+      setErrorMessage(aiSuggestions.error);
       setIsAiGenerationLoading(false);
       return;
     }
@@ -126,6 +137,7 @@ export const TagAndInput = ({
 
     if(isAiRegenerationLoading) return;
 
+    setErrorMessage("");
     setIsAiRegenerationLoading(true);
 
     const currentSuggestions = suggestions?.[inputId];
@@ -144,7 +156,18 @@ export const TagAndInput = ({
     });
 
     if(!aiSuggestions && aiSuggestions.length === 0) {
-      console.log("Error: No se recibieron sugerencias de IA");
+      const errorMsg = "Error: No se recibieron sugerencias de IA";
+      console.log(errorMsg);
+      setErrorMessage(errorMsg);
+      setIsAiRegenerationLoading(false);
+      return;
+    }
+
+    console.log({aiSuggestionsRenew: aiSuggestions})
+
+    if(aiSuggestions?.error) {
+      console.log('Error: ', aiSuggestions.error);
+      setErrorMessage(aiSuggestions.error);
       setIsAiRegenerationLoading(false);
       return;
     }
@@ -320,6 +343,13 @@ export const TagAndInput = ({
           }
         </div>
       )}
+      {errorMessage && (
+        <div
+          className="error-message-container"
+        >
+          <p>{errorMessage}</p>
+        </div>
+      )}
       <GeneralInput
         inputId={inputId}
         inputType={inputType}

package/src/components/molecules/TagAndInput/styles.js

@@ -75,4 +75,15 @@ export const Container = styled.div`
   & + * {
     margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
   }
+
+  .error-message-container {
+
+    font-family: "Raleway";
+    font-size: 12px;
+    font-weight: 500;
+    color: #E1251B;
+    margin-bottom: 8px;
+    margin-top: 0;
+
+  }
 `;

package/src/contexts/AiProductEdition.jsx

@@ -45,7 +45,39 @@ export const AiProductEditionProvider = ({
   const [inputsGeneratedWithAi, setInputsGeneratedWithAi] = useState({});
   const [inputsUsingAi, setInputsUsingAi] = useState({});
 
+  const MAX_CREDITS = 10;
+  const COOLDOWN_MS = 5 * 60 * 1000;
+  const RATE_LIMIT_KEY = "ai_generation_limit_data";
 
+  const checkAndManageRateLimit = (currentArticleId) => {
+    const now = Date.now();
+    const storedData = localStorage.getItem(RATE_LIMIT_KEY);
+
+    let allRateData = storedData ? JSON.parse(storedData) : {};
+
+    let productTimestamps = allRateData[currentArticleId] || [];
+
+    productTimestamps = productTimestamps.filter(timestamp => (now - timestamp) < COOLDOWN_MS);
+
+    if (productTimestamps.length >= MAX_CREDITS) {
+
+      allRateData[currentArticleId] = productTimestamps;
+      localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(allRateData));
+
+      return {
+        allowed: false,
+        message: "Has alcanzado el limite de intentos frecuentes para este producto. Por favor, espera unos minutos."
+      };
+    }
+
+
+    productTimestamps.push(now);
+    allRateData[currentArticleId] = productTimestamps;
+
+    localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(allRateData));
+
+    return { allowed: true };
+  };
 
   function setCurrentSuggestionValue({
     inputId,
@@ -93,6 +125,10 @@ export const AiProductEditionProvider = ({
       attributeId
     });
 
+    if(newSuggestions?.error) return {
+      error: newSuggestions.error
+    }
+
     if(!Array.isArray(newSuggestions) || newSuggestions.length === 0)
       return console.log("Error: No se obtuvieron nuevas sugerencias");
 
@@ -119,6 +155,15 @@ export const AiProductEditionProvider = ({
 
       if(!isAiAvailable) return;
 
+      const rateLimitStatus = checkAndManageRateLimit(articleId);
+
+      if (!rateLimitStatus.allowed) {
+        return {
+          error: rateLimitStatus.message,
+          isRateLimitInfo: true
+        };
+      }
+
       if(!product)
         throw new Error("El producto no está definido");