contentoh-components-library 21.5.78 → 21.5.81

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

@@ -11,6 +11,7 @@ import ReloadIcon from "../../../assets/images/Icons/reload.png";
 
 import { useAiProductEdition } from "../../../contexts/AiProductEdition";
 import { InputContainer, BottomContainer, OptionsContainer, ButtonsContainer } from "../InputFormatter/styles";
+import { getTextSimilarityPercentage } from "../../../ai/utils/compare-strings";
 
 export const GeneralInput = ({
   inputType,
@@ -43,11 +44,14 @@ export const GeneralInput = ({
   isAiGenerationLoading = false,
   isAiRegenerationLoading=false,
   isAiActive = false,
-  // aiSuggestions = null,
+  isAiAvailable = false,
+  aiGenerated = false,
+
   setIsAiActive = () => {},
   handlerAiGeneration = () => {},
   handlerRegenerateSuggestions = () => {},
   handleChangeSuggestion = () => {}
+
 }) => {
 
   const {
@@ -64,40 +68,34 @@ export const GeneralInput = ({
   const [aiSuggestionAccepted, setAiSuggestionAccepted] = useState(false);
   const [valueAccepted, setValueAccepted] = useState(textValue);
 
+  const updateParentData = (generalValue, isAiAccepted) => {
+    setTextValue({ value: generalValue });
 
-  const onHandleChange = (evt) => {
-    if (validateInput) {
-      setTextValue({ value: validateInput(evt, position, inputsArray) });
-    } else if (
-      updatedDatasheets ||
-      updatedDescriptions ||
-      inputType === "textarea"
-    ) {
-      let generalValue;
-      if (optionList?.length > 0) {
-        let valueSelected = evt.target.value;
-        generalValue = valueSelected;
-        setTextValue({ value: generalValue });
-      } else {
-        generalValue =
-          inputType === "checkbox" ? evt.target.checked : evt.target.value;
-        setTextValue({
-          value: generalValue,
-        });
-      }
-      let dataSave = updatedDatasheets?.slice();
+    const similarity = getTextSimilarityPercentage(valueAccepted, inputValue);
+
+    const generatedWithAi = (isAiAccepted) || aiGenerated && similarity >= 50;
+
+    if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
+      let dataSave = updatedDatasheets?.slice() || [];
 
       if (dataSave?.length > 0) {
         const index = dataSave.findIndex((e) => e.attributeId === inputId);
         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) {
@@ -105,10 +103,32 @@ export const GeneralInput = ({
             articleId: articleId,
             attributeId: inputId,
             value: generalValue,
+            aiSuggestionAccepted: generatedWithAi,
           });
         }
       }
       setUpdatedDatasheets(dataSave);
+    }
+  };
+
+  const onHandleChange = (evt) => {
+    if (validateInput) {
+      setTextValue({ value: validateInput(evt, position, inputsArray) });
+    } else if (
+      updatedDatasheets ||
+      updatedDescriptions ||
+      inputType === "textarea"
+    ) {
+      let generalValue;
+      if (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 });
       inputOnChange && inputOnChange(evt);
@@ -136,12 +156,11 @@ export const GeneralInput = ({
 
   }, [suggestions]);
 
-  useEffect(() => {
-
-    // Comprueba cuando la función de IA se cierra y no se acepto una sugerencia
-    // Devuelve el valor inicial
-    if(!isAiActive && !aiSuggestionAccepted) return setTextValue(valueAccepted);
-
+useEffect(() => {
+    if(!isAiActive && !aiSuggestionAccepted) {
+      const restoredValue = typeof valueAccepted === 'object' ? valueAccepted.value : valueAccepted;
+      setTextValue({ value: restoredValue });
+    }
   }, [suggestions, isAiActive]);
 
   useEffect(() => {
@@ -163,13 +182,13 @@ export const GeneralInput = ({
   //AI Generation
 
   const handleAcceptSuggestion = (suggestionValue) => {
-
     if(!suggestionValue) return;
 
-    setTextValue({ value: suggestionValue })
-    setValueAccepted(suggestionValue);
+    setValueAccepted({ value: suggestionValue });
     setAiSuggestionAccepted(true);
     setIsAiActive(false);
+
+    updateParentData(suggestionValue, true);
   }
 
   return (
@@ -218,10 +237,10 @@ export const GeneralInput = ({
             {
 
               hasAiGeneration && isBenefitInput && (
-                <div className="icon_container" onClick={() => {
+                <div className={`icon_container ${isAiAvailable ? "ai-available" : ''} ${isAiActive ? 'ai-active' : ''}`} title={!isAiAvailable ? 'Debes de completar ficha técnica e imágenes para desbloquear la generación con IA' : ''} onClick={() => {
                   handlerAiGeneration({ type: "attribute" })
                 }}>
-                  <img className={isAiGenerationLoading ? "loading" : ""} src={isAiGenerationLoading ? LoadingIcon : isAiActive ? CancelIcon : AiGenerationIcon} />
+                  <img className={`${isAiGenerationLoading ? 'loading' : ''}`} src={isAiGenerationLoading ? LoadingIcon : isAiActive ? CancelIcon : AiGenerationIcon} />
                 </div>
               )
 
@@ -290,7 +309,9 @@ export const GeneralInput = ({
             maxChar={maxChar}
             isRequired={isRequired}
             disabled={disabled}
-            hasAiGeneration={hasAiGeneration}
+            hasAiGeneration={hasAiGeneration && inputId != 'commentary-box'}
+            isAiAvailable={isAiAvailable}
+            aiGenerated={aiGenerated}
             handlerAiGeneration={() => {
               handlerAiGeneration({ type: "description" })
             }}
@@ -301,7 +322,7 @@ export const GeneralInput = ({
             isAiGenerationLoading={isAiGenerationLoading}
             isAiRegenerationLoading={isAiRegenerationLoading}
             isAiActive={isAiActive}
-          setIsAiActive={setIsAiActive}
+            setIsAiActive={setIsAiActive}
         />
       )}
       {/* <p>{description}</p> */}

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

@@ -132,6 +132,13 @@ export const InputContainer = styled.div`
         z-index: -1;
       }
 
+      &.ai-available::before{
+
+        background: gray;
+        background-size: 200% 200%;
+
+      }
+
       img {
         width: 100%;
         height: 100%;

package/src/components/atoms/InputFormatter/index.js

@@ -9,9 +9,10 @@ import LoadingIcon from "../../../assets/images/Icons/loading.svg";
 import CancelIcon from "../../../assets/images/Icons/cancel.png";
 import ReloadIcon from "../../../assets/images/Icons/reload.png";
 
-
 import { useAiProductEdition } from "../../../contexts/AiProductEdition";
 
+import { getTextSimilarityPercentage } from "../../../ai/utils/compare-strings";
+
 export const InputFormatter = ({
   mainValue = "",
   inputId,
@@ -27,6 +28,9 @@ export const InputFormatter = ({
   isAiGenerationLoading = false,
   isAiRegenerationLoading=false,
   isAiActive = false,
+  isAiAvailable = false,
+  aiGenerated = false,
+
   setIsAiActive = () => {},
   handlerAiGeneration = () => {},
   handlerRegenerateSuggestions = () => {},
@@ -72,7 +76,6 @@ export const InputFormatter = ({
   };
 
   const onChange = (valueInput, h) => {
-
     let value = "";
     try {
       if (h.getLength() - 1 <= maxLength) {
@@ -96,32 +99,49 @@ export const InputFormatter = ({
     setCharsCounter(h.getLength() - 1);
     value = valueFormater(value);
 
-    if (updatedDescriptions) {
-      let idInput = inputId;
-      let dataSave = updatedDescriptions?.slice();
-      if (dataSave?.length > 0) {
-        const index = dataSave.findIndex((e) => e.attributeId === idInput);
-        if (index !== -1) {
-          if (value !== mainValue) dataSave[index].value = value;
-          else dataSave.splice(index, 1);
+    updateParentDescriptions(value, aiSuggestionAccepted);
+  };
+
+  const updateParentDescriptions = (finalValue, isAiAccepted) => {
+    if (!updatedDescriptions) return;
+
+    let idInput = inputId;
+    let dataSave = updatedDescriptions?.slice();
+
+    const similarity = getTextSimilarityPercentage(valueAccepted, inputValue);
+
+    const generatedWithAi = (isAiAccepted) || aiGenerated && similarity >= 50;
+
+    if (dataSave?.length > 0) {
+      const index = dataSave.findIndex((e) => e.attributeId === idInput);
+      if (index !== -1) {
+        if (finalValue !== mainValue) {
+          dataSave[index].value = finalValue;
+          dataSave[index].aiSuggestionAccepted = generatedWithAi;
         } else {
-          dataSave.push({
-            articleId: articleId,
-            attributeId: idInput,
-            value: value,
-          });
+          dataSave.splice(index, 1);
         }
       } else {
-        if (value !== mainValue) {
+        if (finalValue !== mainValue) {
           dataSave.push({
             articleId: articleId,
             attributeId: idInput,
-            value: value,
+            value: finalValue,
+            aiSuggestionAccepted: generatedWithAi,
           });
         }
       }
-      setUpdatedDescriptions(dataSave);
+    } else {
+      if (finalValue !== mainValue) {
+        dataSave.push({
+          articleId: articleId,
+          attributeId: idInput,
+          value: finalValue,
+          aiSuggestionAccepted: generatedWithAi,
+        });
+      }
     }
+    setUpdatedDescriptions(dataSave);
   };
 
   const getSelection = (range, a, b) => {
@@ -136,14 +156,19 @@ export const InputFormatter = ({
 
   //AI Generation
   const handleAcceptSuggestion = (suggestionValue) => {
-
-    if(!suggestionValue) return;
+    if (!suggestionValue) return;
 
     setInputValue(suggestionValue);
     setValueAccepted(suggestionValue);
     setAiSuggestionAccepted(true);
     setIsAiActive(false);
-  }
+
+    // Formateamos el valor sugerido igual que en el onChange
+    const formattedSuggestion = valueFormater(suggestionValue);
+
+    // Disparamos la actualización enviando "true" directamente
+    updateParentDescriptions(formattedSuggestion, true);
+  };
 
   useEffect(() => {
 
@@ -161,6 +186,7 @@ export const InputFormatter = ({
     setAiSuggestionAccepted(false);
 
   }, [isAiActive]);
+
   //End Ai Generation
 
   return (
@@ -181,7 +207,9 @@ export const InputFormatter = ({
               currentSuggestion?.[inputId]?.value
             ) : getValue(inputValue)}
             readOnly={isAiActive || disabled}
-            modules={{ toolbar: ["bold"] }}
+            modules={{
+              toolbar: false,
+            }}
             onKeyPress={(e) => {
               if (charsCounter >= maxLength && e.key !== "Backspace") {
                 e.preventDefault();
@@ -210,7 +238,7 @@ export const InputFormatter = ({
         }
         {
           hasAiGeneration && (
-            <div className={`icon_container ${isAiActive && "ai-active"}`} onClick={handlerAiGeneration}>
+            <div className={`icon_container ${isAiActive ? "ai-active" : ''} ${isAiAvailable ? "ai-available" : ''}`} title={!isAiAvailable ? 'Debes de completar ficha técnica e imágenes para desbloquear la generación con IA' : ''} onClick={handlerAiGeneration}>
               <img className={isAiGenerationLoading ? "loading" : ""} src={isAiGenerationLoading ? LoadingIcon : isAiActive ? CancelIcon : AiGenerationIcon} />
             </div>
           )

package/src/components/atoms/InputFormatter/styles.js

@@ -62,13 +62,11 @@ export const Container = styled.div`
     margin-top: 5px;
   }
 `;
-
 export const InputContainer = styled.div`
 
   &.ai-generation {
-    position: relative;
 
-    cursor: pointer;
+    position: relative;
 
     > input[type=text] {
       padding-right: 2.5rem;
@@ -87,6 +85,8 @@ export const InputContainer = styled.div`
       height: 22.5px;
       padding: 4px;
 
+      cursor: not-allowed;
+
       border-radius: 50%;
       overflow: hidden;
       display: flex;
@@ -94,10 +94,6 @@ export const InputContainer = styled.div`
       justify-content: center;
       z-index: 1;
 
-      &.ai-active::before {
-        background: #FB4141;
-      }
-
       &::before {
         content: '';
         position: absolute;
@@ -106,6 +102,18 @@ export const InputContainer = styled.div`
         width: 100%;
         height: 100%;
 
+        background: gray;
+        background-size: 200% 200%;
+
+        animation: ai-shimmer 3s ease-in-out infinite alternate;
+        z-index: -1;
+      }
+
+      &.ai-available {
+        cursor: pointer;
+      }
+
+      &.ai-available::before{
         background: linear-gradient(
           120deg,
           #4285F4 20%,
@@ -113,9 +121,40 @@ export const InputContainer = styled.div`
           #4285F4 80%
         );
         background-size: 200% 200%;
+      }
 
-        animation: ai-shimmer 3s ease-in-out infinite alternate;
-        z-index: -1;
+      &.ai-available::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.75;
+
+        background: linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0) 40%,
+          rgba(255, 255, 255, 0.8) 50%,
+          rgba(255, 255, 255, 0) 60%,
+          rgba(255, 255, 255, 0) 100%
+        );
+
+        transform: scale(2) translate(-100%, -100%);
+        z-index: 3;
+
+        animation: ai-glint 3s infinite ease-in-out;
+      }
+
+      &.ai-available img.loading ~ ::after {
+        animation: none;
+        display: none;
+      }
+
+      &.ai-active::after {
+        animation: none;
+        display: none;
       }
 
       img {
@@ -132,6 +171,11 @@ export const InputContainer = styled.div`
         height: 22.5px;
       }
 
+      &.ai-active::before {
+        background: oklch(57.7% 0.245 27.325);
+      }
+
+
     }
   }
 
@@ -144,8 +188,16 @@ export const InputContainer = styled.div`
     }
   }
 
-`;
+  @keyframes ai-glint {
+    0% {
+      transform: scale(2) translate(-100%, -100%);
+    }
+    70%, 100% {
+      transform: scale(2) translate(100%, 100%);
+    }
+  }
 
+`;
 export const BottomContainer = styled.div`
 
   display: flex;

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

@@ -13,6 +13,7 @@ import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
 import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
 import { FinancedCompanies } from "./FinancedCompanies";
 import { GlobalColors } from "../../../global-files/variables";
+import { useAiProductEdition } from "../../../contexts/AiProductEdition";
 
 export const StatusAsignationInfo = ({
   status = "-",
@@ -37,6 +38,10 @@ export const StatusAsignationInfo = ({
   const [assignationType, setAssignationType] = useState("facilitator");
   const isFinanced = FinancedCompanies.includes(user?.id_company);
 
+  const {
+    inputsUsingAi
+  } = useAiProductEdition();
+
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
       document.removeEventListener("click", closeAsignations, false);
@@ -93,7 +98,10 @@ export const StatusAsignationInfo = ({
       {showSaveButton && !isFinanced && (
         <Button
           buttonType={"circular-button save-button"}
-          onClick={onClickSave}
+          onClick={() => {
+            if(Object.values(inputsUsingAi).some(input => !!input?.using)) return console.warn("Para guardar se debe de dejar de usar la generación con IA");
+            onClickSave();
+          }}
         />
       )}
       {imagesSection && (