contentoh-components-library 21.5.94 → 21.5.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.94",
+  "version": "21.5.96",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -12,6 +12,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@google/genai": "^1.35.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
@@ -51,7 +52,8 @@
     "styled-components": "^5.3.9",
     "swiper": "^8.4.4",
     "uuid": "^8.3.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "zod": "^4.3.5"
   },
   "scripts": {
     "start": "start-storybook  -p 6006",

package/src/ai/utils/compare-strings.js

@@ -0,0 +1,45 @@
+
+//Calcula el porcentaje de similitud entre la descripción generada por IA y la versión editada por el usuario.
+
+export function getTextSimilarityPercentage(originalText, candidateText) {
+
+  if(!originalText || !candidateText) return;
+
+  const normalize = (text) => {
+    return text
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, ' ');
+  };
+
+  const source = normalize(originalText);
+  const target = normalize(candidateText);
+
+  if (source === target) return 100;
+  if (source.length === 0 || target.length === 0) return 0;
+
+  const sourceLength = source.length;
+  const targetLength = target.length;
+  const distanceMatrix = Array(targetLength + 1).fill(null).map(() => []);
+
+  for (let i = 0; i <= sourceLength; i++) distanceMatrix[0][i] = i;
+  for (let j = 0; j <= targetLength; j++) distanceMatrix[j][0] = j;
+
+  for (let j = 1; j <= targetLength; j++) {
+    for (let i = 1; i <= sourceLength; i++) {
+      const substitutionCost = (source[i - 1] === target[j - 1]) ? 0 : 1;
+
+      distanceMatrix[j][i] = Math.min(
+        distanceMatrix[j - 1][i] + 1,
+        distanceMatrix[j][i - 1] + 1,
+        distanceMatrix[j - 1][i - 1] + substitutionCost
+      );
+    }
+  }
+
+  const editDistance = distanceMatrix[targetLength][sourceLength];
+  const maxLength = Math.max(sourceLength, targetLength);
+  const similarityScore = 1 - (editDistance / maxLength);
+
+  return similarityScore * 100;
+}

package/src/assets/images/Icons/loading.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="283" height="283" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g>
+  <path stroke-width="10" stroke="#e13aa7" fill="none" d="M50 27A23 23 0 1 0 69.9785248320784 38.604450626054636"></path>
+  <path fill="#e13aa7" d="M49 15L49 39L61 27L49 15"></path>
+  <animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="0.9803921568627451s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform>
+</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>

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

@@ -38,6 +38,10 @@ export const Container = styled.button`
     background-color: #603888;
   }
 
+  &.general-pink-button {
+    background-color: #E33AA9;
+  }
+
   &.general-transparent-button {
     background-color: transparent;
     border: 1px solid #503d66;

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

@@ -3,6 +3,16 @@ import { Container } from "./styles";
 import { InputFormatter } from "../InputFormatter";
 import { CheckBox } from "../CheckBox";
 
+import AiGenerationIcon from "../../../assets/images/Icons/ia-icon.png";
+import LoadingIcon from "../../../assets/images/Icons/loading.svg";
+import ArrowIcon from "../../../assets/images/Icons/arrow.png";
+import CancelIcon from "../../../assets/images/Icons/cancel.png";
+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,
   inputId,
@@ -27,45 +37,68 @@ export const GeneralInput = ({
   disabled,
   onKeyDown,
   auditClass,
+
+  //AI Generation
+  hasAiGeneration = false,
+  isBenefitInput = false,
+  isAiGenerationLoading = false,
+  isAiRegenerationLoading=false,
+  isAiActive = false,
+  isAiAvailable = false,
+  aiGenerated = false,
+
+  setIsAiActive = () => {},
+  handlerAiGeneration = () => {},
+  handlerRegenerateSuggestions = () => {},
+  handleChangeSuggestion = () => {}
+
 }) => {
+
+  const {
+    isCreators,
+    suggestions,
+    currentSuggestion,
+    setCurrentSuggestionValue
+  } = useAiProductEdition();
+
   const [textValue, setTextValue] = useState({
     value: inputValue,
   });
   const [requiredEmpty, setRequiredEmpty] = useState(false);
 
-  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 [aiSuggestionAccepted, setAiSuggestionAccepted] = useState(false);
+  const [valueAccepted, setValueAccepted] = useState(inputValue);
+
+  const updateParentData = (generalValue, isAiAccepted, newBaseValue = null) => {
+    setTextValue({ value: generalValue });
+
+    const baseToCompare = newBaseValue !== null ? newBaseValue : valueAccepted;
+
+    const similarity = getTextSimilarityPercentage(baseToCompare, generalValue);
+
+    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) {
@@ -73,16 +106,72 @@ 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);
     }
   };
 
+  useEffect(() => {
+
+    if(!isCreators) return;
+
+    if(Object.keys(suggestions).length === 0) return;
+
+    if(currentSuggestion?.[inputId]) return
+
+
+    const firstSuggestion = suggestions?.[inputId]?.[0];
+
+    if(!firstSuggestion) return;
+
+    setCurrentSuggestionValue({
+      inputId,
+      index: 0,
+      value: firstSuggestion?.value
+    });
+
+  }, [suggestions]);
+
+  useEffect(() => {
+    if(!isAiActive || !isCreators) return;
+    setAiSuggestionAccepted(false);
+  }, [isAiActive]);
+
+  useEffect(() => {
+    if(!isCreators) return;
+    if(!isAiActive && !aiSuggestionAccepted) {
+      setTextValue({ value: valueAccepted });
+    }
+  }, [suggestions, isAiActive]);
+
   useEffect(() => {
     setRequiredEmpty(
       isRequired &&
@@ -90,14 +179,26 @@ export const GeneralInput = ({
     );
   }, [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);
-  };
+  // 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
+
+  const handleAcceptSuggestion = (suggestionValue) => {
+      if(!suggestionValue || !isCreators) return;
+
+      setValueAccepted(suggestionValue);
+      setAiSuggestionAccepted(true);
+      setIsAiActive(false);
+
+      updateParentData(suggestionValue, true, suggestionValue);
+  }
 
   return (
     <Container isRequired={requiredEmpty} className={auditClass}>
@@ -124,33 +225,113 @@ export const GeneralInput = ({
           disabled={disabled}
         />
       ) : inputType !== "textarea" ? (
-        <input
-          type={inputType}
-          disabled={disabled}
-          id={inputId}
-          size={inputSize}
-          className="general-input"
-          placeholder={inputPlaceholder}
-          value={textValue.value}
-          onInput={(e) => onHandleChange(e)}
-          maxLength={maxChar}
-          required={isRequired}
-          onKeyDown={onKeyDown}
-          onWheel={numberInputOnWheelPreventChange}
-        />
+        <div>
+          <InputContainer className={hasAiGeneration ? "ai-generation" : ""}>
+            <input
+              type={inputType}
+              disabled={disabled}
+              id={inputId}
+              size={inputSize}
+              className={`general-input ${isAiActive && isBenefitInput && "ia-input"}`}
+              placeholder={inputPlaceholder}
+              value={isAiActive ? (
+                currentSuggestion?.[inputId]?.value
+              ) : textValue.value}
+              onInput={(e) => onHandleChange(e)}
+              maxLength={maxChar}
+              required={isRequired}
+              onKeyDown={onKeyDown}
+              // onWheel={numberInputOnWheelPreventChange}
+            />
+            {
+
+              hasAiGeneration && isBenefitInput && (
+                <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} />
+                </div>
+              )
+
+            }
+          </InputContainer>
+          <BottomContainer className={isAiActive ? "with-ai" : ""}>
+            {
+              isAiActive && (
+                <div className="ai-options">
+
+                  <OptionsContainer>
+                    <div className={
+                      `arrow ${currentSuggestion?.[inputId]?.index === 0 && "disabled"}`
+                    } onClick={() => {
+                      handleChangeSuggestion({ action: "prev" })
+                    }}>
+                      <img src={ArrowIcon} alt="" />
+                    </div>
+                    <p>
+                      {(currentSuggestion?.[inputId]?.index + 1) || 1}
+                      /
+                      {suggestions?.[inputId]?.length}
+                    </p>
+                    <div className={`arrow right ${currentSuggestion?.[inputId]?.index === suggestions?.[inputId]?.length - 1 && "disabled"}`} onClick={() => {
+
+                    }}>
+                      <img onClick={() => {
+                        handleChangeSuggestion({ action: "next" })
+                      }} src={ArrowIcon} alt="ai icon" />
+                    </div>
+                  </OptionsContainer>
+
+                  <ButtonsContainer>
+
+                    <div className={`reload-suggestions ${isAiRegenerationLoading && "loading"}`} onClick={() => {
+                      handlerRegenerateSuggestions({
+                        type: "attribute"
+                      });
+                    }}>
+                      <img className="" src={isAiRegenerationLoading ? LoadingIcon : ReloadIcon} />
+                    </div>
+
+                    <div className="accept-suggestion" onClick={() => {
+                      handleAcceptSuggestion(currentSuggestion?.[inputId]?.value);
+                    }}>
+                      <p>Aceptar sugerencia</p>
+                    </div>
+
+                  </ButtonsContainer>
+
+                </div>
+              )
+            }
+          </BottomContainer>
+        </div>
       ) : (
         <InputFormatter
           name={inputName}
-          inputId={inputId}
-          placeholder={inputPlaceholder}
-          mainValue={textValue.value}
-          onChange={onHandleChange}
-          articleId={articleId}
-          updatedDescriptions={updatedDescriptions}
-          setUpdatedDescriptions={setUpdatedDescriptions}
-          maxChar={maxChar}
-          isRequired={isRequired}
-          disabled={disabled}
+            inputId={inputId}
+            placeholder={inputPlaceholder}
+            mainValue={textValue.value}
+            onChange={onHandleChange}
+            articleId={articleId}
+            updatedDescriptions={updatedDescriptions}
+            setUpdatedDescriptions={setUpdatedDescriptions}
+            maxChar={maxChar}
+            isRequired={isRequired}
+            disabled={disabled}
+            hasAiGeneration={hasAiGeneration && inputId != 'commentary-box'}
+            isAiAvailable={isAiAvailable}
+            aiGenerated={aiGenerated}
+            handlerAiGeneration={() => {
+              handlerAiGeneration({ type: "description" })
+            }}
+            handlerRegenerateSuggestions={() => {
+              handlerRegenerateSuggestions({ type: "description" })
+            }}
+            handleChangeSuggestion={handleChangeSuggestion}
+            isAiGenerationLoading={isAiGenerationLoading}
+            isAiRegenerationLoading={isAiRegenerationLoading}
+            isAiActive={isAiActive}
+            setIsAiActive={setIsAiActive}
         />
       )}
       {/* <p>{description}</p> */}

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

@@ -84,3 +84,84 @@ export const Container = styled.div`
     background: lightgray;
   }
 `;
+
+export const InputContainer = styled.div`
+
+  &.ai-generation {
+    position: relative;
+
+    cursor: pointer;
+
+    .ia-input {
+      padding-right: 2.5rem;
+    }
+
+    .icon_container {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      padding: 4px;
+
+      border-radius: 50%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        background: linear-gradient(
+          120deg,
+          #ffffff 10%,
+          #ffe0f4 50%,
+          #ffffff 90%
+        );
+        background-size: 200% 200%;
+
+        animation: ai-shimmer 3s ease-in-out infinite alternate;
+        z-index: -1;
+      }
+
+      &.ai-available::before{
+
+        background: gray;
+        background-size: 200% 200%;
+
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        position: relative;
+        z-index: 2;
+      }
+
+      img.loading {
+        width: 20px;
+        height: 20px;
+      }
+
+    }
+  }
+
+  @keyframes ai-shimmer {
+    0% {
+      background-position: 0% 50%;
+    }
+    100% {
+      background-position: 100% 50%;
+    }
+  }
+
+`;