contentoh-components-library 21.5.99 → 21.6.0

package/dist/components/atoms/GeneralButton/styles.js

@@ -47,7 +47,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-pink-button {\n    background-color: #E33AA9;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.buttonFont;
 }, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.color_gray, _saveIconHover.default, _variables.GlobalColors.color_pink, _variables.GlobalColors.color_pink, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.color_purple, _variables.GlobalColors.color_purple, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
 

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

@@ -17,9 +17,27 @@ var _InputFormatter = require("../InputFormatter");
 
 var _CheckBox = require("../CheckBox");
 
+var _iaIcon = _interopRequireDefault(require("../../../assets/images/Icons/ia-icon.png"));
+
+var _loading = _interopRequireDefault(require("../../../assets/images/Icons/loading.svg"));
+
+var _arrow = _interopRequireDefault(require("../../../assets/images/Icons/arrow.png"));
+
+var _cancel = _interopRequireDefault(require("../../../assets/images/Icons/cancel.png"));
+
+var _reload = _interopRequireDefault(require("../../../assets/images/Icons/reload.png"));
+
+var _AiProductEdition = require("../../../contexts/AiProductEdition");
+
+var _styles2 = require("../InputFormatter/styles");
+
+var _compareStrings = require("../../../ai/utils/compare-strings");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GeneralInput = function GeneralInput(_ref) {
+  var _currentSuggestion$in, _currentSuggestion$in2, _currentSuggestion$in3, _suggestions$inputId2, _currentSuggestion$in4, _suggestions$inputId3;
+
   var inputType = _ref.inputType,
       inputId = _ref.inputId,
       inputName = _ref.inputName,
@@ -44,7 +62,35 @@ var GeneralInput = function GeneralInput(_ref) {
       inputOnChange = _ref.inputOnChange,
       disabled = _ref.disabled,
       onKeyDown = _ref.onKeyDown,
-      auditClass = _ref.auditClass;
+      auditClass = _ref.auditClass,
+      _ref$hasAiGeneration = _ref.hasAiGeneration,
+      hasAiGeneration = _ref$hasAiGeneration === void 0 ? false : _ref$hasAiGeneration,
+      _ref$isBenefitInput = _ref.isBenefitInput,
+      isBenefitInput = _ref$isBenefitInput === void 0 ? false : _ref$isBenefitInput,
+      _ref$isAiGenerationLo = _ref.isAiGenerationLoading,
+      isAiGenerationLoading = _ref$isAiGenerationLo === void 0 ? false : _ref$isAiGenerationLo,
+      _ref$isAiRegeneration = _ref.isAiRegenerationLoading,
+      isAiRegenerationLoading = _ref$isAiRegeneration === void 0 ? false : _ref$isAiRegeneration,
+      _ref$isAiActive = _ref.isAiActive,
+      isAiActive = _ref$isAiActive === void 0 ? false : _ref$isAiActive,
+      _ref$isAiAvailable = _ref.isAiAvailable,
+      isAiAvailable = _ref$isAiAvailable === void 0 ? false : _ref$isAiAvailable,
+      _ref$aiGenerated = _ref.aiGenerated,
+      aiGenerated = _ref$aiGenerated === void 0 ? false : _ref$aiGenerated,
+      _ref$setIsAiActive = _ref.setIsAiActive,
+      setIsAiActive = _ref$setIsAiActive === void 0 ? function () {} : _ref$setIsAiActive,
+      _ref$handlerAiGenerat = _ref.handlerAiGeneration,
+      _handlerAiGeneration = _ref$handlerAiGenerat === void 0 ? function () {} : _ref$handlerAiGenerat,
+      _ref$handlerRegenerat = _ref.handlerRegenerateSuggestions,
+      _handlerRegenerateSuggestions = _ref$handlerRegenerat === void 0 ? function () {} : _ref$handlerRegenerat,
+      _ref$handleChangeSugg = _ref.handleChangeSuggestion,
+      handleChangeSuggestion = _ref$handleChangeSugg === void 0 ? function () {} : _ref$handleChangeSugg;
+
+  var _useAiProductEdition = (0, _AiProductEdition.useAiProductEdition)(),
+      isCreators = _useAiProductEdition.isCreators,
+      suggestions = _useAiProductEdition.suggestions,
+      currentSuggestion = _useAiProductEdition.currentSuggestion,
+      setCurrentSuggestionValue = _useAiProductEdition.setCurrentSuggestionValue;
 
   var _useState = (0, _react.useState)({
     value: inputValue
@@ -58,28 +104,27 @@ var GeneralInput = function GeneralInput(_ref) {
       requiredEmpty = _useState4[0],
       setRequiredEmpty = _useState4[1];
 
-  var onHandleChange = function onHandleChange(evt) {
-    if (validateInput) {
-      setTextValue({
-        value: validateInput(evt, position, inputsArray)
-      });
-    } else if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
-      var generalValue;
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      aiSuggestionAccepted = _useState6[0],
+      setAiSuggestionAccepted = _useState6[1];
 
-      if ((optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0) {
-        var valueSelected = evt.target.value;
-        generalValue = valueSelected;
-        setTextValue({
-          value: generalValue
-        });
-      } else {
-        generalValue = inputType === "checkbox" ? evt.target.checked : evt.target.value;
-        setTextValue({
-          value: generalValue
-        });
-      }
+  var _useState7 = (0, _react.useState)(inputValue),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      valueAccepted = _useState8[0],
+      setValueAccepted = _useState8[1];
 
-      var dataSave = updatedDatasheets === null || updatedDatasheets === void 0 ? void 0 : updatedDatasheets.slice();
+  var updateParentData = function updateParentData(generalValue, isAiAccepted) {
+    var newBaseValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    setTextValue({
+      value: generalValue
+    });
+    var baseToCompare = newBaseValue !== null ? newBaseValue : valueAccepted;
+    var similarity = (0, _compareStrings.getTextSimilarityPercentage)(baseToCompare, generalValue);
+    var generatedWithAi = (isAiAccepted || aiGenerated) && similarity >= 50;
+
+    if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
+      var dataSave = (updatedDatasheets === null || updatedDatasheets === void 0 ? void 0 : updatedDatasheets.slice()) || [];
 
       if ((dataSave === null || dataSave === void 0 ? void 0 : dataSave.length) > 0) {
         var index = dataSave.findIndex(function (e) {
@@ -87,25 +132,52 @@ var GeneralInput = function GeneralInput(_ref) {
         });
 
         if (index !== -1) {
-          if (generalValue !== inputValue) dataSave[index].value = generalValue;else dataSave.splice(index, 1);
+          if (generalValue !== inputValue) {
+            dataSave[index].value = generalValue;
+            dataSave[index].aiSuggestionAccepted = generatedWithAi;
+          } else {
+            dataSave.splice(index, 1);
+          }
         } else {
-          dataSave.push({
-            articleId: articleId,
-            attributeId: inputId,
-            value: generalValue
-          });
+          if (generalValue !== inputValue) {
+            dataSave.push({
+              articleId: articleId,
+              attributeId: inputId,
+              value: generalValue,
+              aiSuggestionAccepted: generatedWithAi
+            });
+          }
         }
       } else {
         if (generalValue !== inputValue) {
           dataSave.push({
             articleId: articleId,
             attributeId: inputId,
-            value: generalValue
+            value: generalValue,
+            aiSuggestionAccepted: generatedWithAi
           });
         }
       }
 
       setUpdatedDatasheets(dataSave);
+    }
+  };
+
+  var onHandleChange = function onHandleChange(evt) {
+    if (validateInput) {
+      setTextValue({
+        value: validateInput(evt, position, inputsArray)
+      });
+    } else if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
+      var generalValue;
+
+      if ((optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0) {
+        generalValue = evt.target.value;
+      } else {
+        generalValue = inputType === "checkbox" ? evt.target.checked : evt.target.value;
+      }
+
+      updateParentData(generalValue, aiSuggestionAccepted);
     } else {
       setTextValue({
         value: evt.target.value
@@ -115,20 +187,52 @@ var GeneralInput = function GeneralInput(_ref) {
   };
 
   (0, _react.useEffect)(function () {
-    var _textValue$value;
+    var _suggestions$inputId;
 
-    setRequiredEmpty(isRequired && (((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0 || textValue.value === undefined));
-  }, [textValue]);
+    if (!isCreators) return;
+    if (Object.keys(suggestions).length === 0) return;
+    if (currentSuggestion !== null && currentSuggestion !== void 0 && currentSuggestion[inputId]) return;
+    var firstSuggestion = suggestions === null || suggestions === void 0 ? void 0 : (_suggestions$inputId = suggestions[inputId]) === null || _suggestions$inputId === void 0 ? void 0 : _suggestions$inputId[0];
+    if (!firstSuggestion) return;
+    setCurrentSuggestionValue({
+      inputId: inputId,
+      index: 0,
+      value: firstSuggestion === null || firstSuggestion === void 0 ? void 0 : firstSuggestion.value
+    });
+  }, [suggestions]);
+  (0, _react.useEffect)(function () {
+    if (!isAiActive || !isCreators) return;
+    setAiSuggestionAccepted(false);
+  }, [isAiActive]);
+  (0, _react.useEffect)(function () {
+    if (!isCreators) return;
 
-  var numberInputOnWheelPreventChange = function numberInputOnWheelPreventChange(e) {
-    // Prevent the input value change
-    e.target.blur(); // Prevent the page/container scrolling
+    if (!isAiActive && !aiSuggestionAccepted) {
+      setTextValue({
+        value: valueAccepted
+      });
+    }
+  }, [suggestions, isAiActive]);
+  (0, _react.useEffect)(function () {
+    var _textValue$value;
 
-    e.stopPropagation(); // Refocus immediately, on the next tick (after the current function is done)
+    setRequiredEmpty(isRequired && (((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0 || textValue.value === undefined));
+  }, [textValue]); // const numberInputOnWheelPreventChange = (e) => {
+  //   // Prevent the input value change
+  //   e.target.blur();
+  //   // Prevent the page/container scrolling
+  //   e.stopPropagation();
+  //   // Refocus immediately, on the next tick (after the current function is done)
+  //   setTimeout(() => e.target.focus(), 0);
+  // };
+  //AI Generation
 
-    setTimeout(function () {
-      return e.target.focus();
-    }, 0);
+  var handleAcceptSuggestion = function handleAcceptSuggestion(suggestionValue) {
+    if (!suggestionValue || !isCreators) return;
+    setValueAccepted(suggestionValue);
+    setAiSuggestionAccepted(true);
+    setIsAiActive(false);
+    updateParentData(suggestionValue, true, suggestionValue);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
@@ -157,21 +261,94 @@ var GeneralInput = function GeneralInput(_ref) {
       },
       defaultChecked: textValue.value === "true" ? true : false,
       disabled: disabled
-    }) : inputType !== "textarea" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      type: inputType,
-      disabled: disabled,
-      id: inputId,
-      size: inputSize,
-      className: "general-input",
-      placeholder: inputPlaceholder,
-      value: textValue.value,
-      onInput: function onInput(e) {
-        return onHandleChange(e);
-      },
-      maxLength: maxChar,
-      required: isRequired,
-      onKeyDown: onKeyDown,
-      onWheel: numberInputOnWheelPreventChange
+    }) : inputType !== "textarea" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.InputContainer, {
+        className: hasAiGeneration ? "ai-generation" : "",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: inputType,
+          disabled: disabled,
+          id: inputId,
+          size: inputSize,
+          className: "general-input ".concat(isAiActive && isBenefitInput && "ia-input"),
+          placeholder: inputPlaceholder,
+          value: isAiActive ? currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in = currentSuggestion[inputId]) === null || _currentSuggestion$in === void 0 ? void 0 : _currentSuggestion$in.value : textValue.value,
+          onInput: function onInput(e) {
+            return onHandleChange(e);
+          },
+          maxLength: maxChar,
+          required: isRequired,
+          onKeyDown: onKeyDown // onWheel={numberInputOnWheelPreventChange}
+
+        }), hasAiGeneration && isBenefitInput && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "icon_container ".concat(isAiAvailable ? "ai-available" : '', " ").concat(isAiActive ? 'ai-active' : ''),
+          title: !isAiAvailable ? 'Debes de completar ficha técnica e imágenes para desbloquear la generación con IA' : '',
+          onClick: function onClick() {
+            _handlerAiGeneration({
+              type: "attribute"
+            });
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            className: "".concat(isAiGenerationLoading ? 'loading' : ''),
+            src: isAiGenerationLoading ? _loading.default : isAiActive ? _cancel.default : _iaIcon.default
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles2.BottomContainer, {
+        className: isAiActive ? "with-ai" : "",
+        children: isAiActive && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "ai-options",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.OptionsContainer, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "arrow ".concat((currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in2 = currentSuggestion[inputId]) === null || _currentSuggestion$in2 === void 0 ? void 0 : _currentSuggestion$in2.index) === 0 && "disabled"),
+              onClick: function onClick() {
+                handleChangeSuggestion({
+                  action: "prev"
+                });
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _arrow.default,
+                alt: ""
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+              children: [(currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in3 = currentSuggestion[inputId]) === null || _currentSuggestion$in3 === void 0 ? void 0 : _currentSuggestion$in3.index) + 1 || 1, "/", suggestions === null || suggestions === void 0 ? void 0 : (_suggestions$inputId2 = suggestions[inputId]) === null || _suggestions$inputId2 === void 0 ? void 0 : _suggestions$inputId2.length]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "arrow right ".concat((currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in4 = currentSuggestion[inputId]) === null || _currentSuggestion$in4 === void 0 ? void 0 : _currentSuggestion$in4.index) === (suggestions === null || suggestions === void 0 ? void 0 : (_suggestions$inputId3 = suggestions[inputId]) === null || _suggestions$inputId3 === void 0 ? void 0 : _suggestions$inputId3.length) - 1 && "disabled"),
+              onClick: function onClick() {},
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                onClick: function onClick() {
+                  handleChangeSuggestion({
+                    action: "next"
+                  });
+                },
+                src: _arrow.default,
+                alt: "ai icon"
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles2.ButtonsContainer, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "reload-suggestions ".concat(isAiRegenerationLoading && "loading"),
+              onClick: function onClick() {
+                _handlerRegenerateSuggestions({
+                  type: "attribute"
+                });
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                className: "",
+                src: isAiRegenerationLoading ? _loading.default : _reload.default
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "accept-suggestion",
+              onClick: function onClick() {
+                var _currentSuggestion$in5;
+
+                handleAcceptSuggestion(currentSuggestion === null || currentSuggestion === void 0 ? void 0 : (_currentSuggestion$in5 = currentSuggestion[inputId]) === null || _currentSuggestion$in5 === void 0 ? void 0 : _currentSuggestion$in5.value);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                children: "Aceptar sugerencia"
+              })
+            })]
+          })]
+        })
+      })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
       name: inputName,
       inputId: inputId,
@@ -183,7 +360,25 @@ var GeneralInput = function GeneralInput(_ref) {
       setUpdatedDescriptions: setUpdatedDescriptions,
       maxChar: maxChar,
       isRequired: isRequired,
-      disabled: disabled
+      disabled: disabled,
+      hasAiGeneration: hasAiGeneration && inputId != 'commentary-box',
+      isAiAvailable: isAiAvailable,
+      aiGenerated: aiGenerated,
+      handlerAiGeneration: function handlerAiGeneration() {
+        _handlerAiGeneration({
+          type: "description"
+        });
+      },
+      handlerRegenerateSuggestions: function handlerRegenerateSuggestions() {
+        _handlerRegenerateSuggestions({
+          type: "description"
+        });
+      },
+      handleChangeSuggestion: handleChangeSuggestion,
+      isAiGenerationLoading: isAiGenerationLoading,
+      isAiRegenerationLoading: isAiRegenerationLoading,
+      isAiActive: isAiActive,
+      setIsAiActive: setIsAiActive
     })
   });
 };

package/dist/components/atoms/GeneralInput/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.InputContainer = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _variables = require("../../../global-files/variables");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 5px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  &.audit-class {\n    input,\n    .quill {\n      border: 1px solid #8a6caa;\n      background-color: #ededfc;\n    }\n  }\n\n  .btnReviewState {\n    display: \"flex\";\n    flex-direction: \"column\";\n    border: 1px solid lightgray;\n    border-radius: 3px;\n    z-index: 1000;\n    /* position: absolute; */\n  }\n\n  .btnReviewState button {\n    border: none;\n    background: white;\n    border-radius: 3px;\n  }\n  .btnReviewState button:hover {\n    background: lightgray;\n  }\n"])), function (_ref) {
   var isRequired = _ref.isRequired;
@@ -26,4 +26,8 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
 }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray);
 
-exports.Container = Container;
+exports.Container = Container;
+
+var InputContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n  &.ai-generation {\n    position: relative;\n\n    cursor: pointer;\n\n    .ia-input {\n      padding-right: 2.5rem;\n    }\n\n    .icon_container {\n      position: absolute;\n      right: 10px;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 20px;\n      height: 20px;\n      padding: 4px;\n\n      border-radius: 50%;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n\n        background: linear-gradient(\n          120deg,\n          #ffffff 10%,\n          #ffe0f4 50%,\n          #ffffff 90%\n        );\n        background-size: 200% 200%;\n\n        animation: ai-shimmer 3s ease-in-out infinite alternate;\n        z-index: -1;\n      }\n\n      &.ai-available::before{\n\n        background: gray;\n        background-size: 200% 200%;\n\n      }\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        position: relative;\n        z-index: 2;\n      }\n\n      img.loading {\n        width: 20px;\n        height: 20px;\n      }\n\n    }\n  }\n\n  @keyframes ai-shimmer {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n\n"])));
+
+exports.InputContainer = InputContainer;