contentoh-components-library 21.5.99 → 21.6.0

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

@@ -7,6 +7,11 @@ import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
 import InfoIcon from "../../../assets/images/sliderToolTip/infoIcon.svg";
 import { SliderToolTip } from "../../atoms/SliderToolTip";
 import { Tooltip } from "../../atoms/Tooltip";
+
+import { useAiProductEdition } from "../../../contexts/AiProductEdition";
+import AiGenerationIcon from "../../../assets/images/Icons/ia-icon.png";
+
+
 export const TagAndInput = ({
   inputType,
   label,
@@ -26,6 +31,7 @@ export const TagAndInput = ({
   inputRows,
   maxChar,
   required,
+  aiGenerated,
   optionList,
   description,
   inputOnChange,
@@ -43,6 +49,188 @@ export const TagAndInput = ({
     boxOnboardingData || []
   );
 
+  const {
+    isCreators,
+    generateProductSuggestions,
+    regenerateProductSuggestions,
+    suggestions,
+    setSuggestions,
+    currentSuggestion,
+    setCurrentSuggestionValue,
+    isAiAvailable,
+    inputsGeneratedWithAi,
+    setInputsGeneratedWithAi,
+    inputsUsingAi,
+    setInputsUsingAi
+  } = useAiProductEdition();
+
+  const isBenefitInput = label?.toLowerCase().includes("beneficios");
+
+  const [isAiGenerationLoading, setIsAiGenerationLoading] = useState(false);
+  const [isAiActive, setIsAiActive] = useState(false);
+  const [isAiRegenerationLoading, setIsAiRegenerationLoading] = useState(false);
+  const [isAiGenerated, setIsAiGenerated] = useState(false);
+
+  const [errorMessage, setErrorMessage] = useState("");
+
+  async function handlerAiGeneration({
+    type
+  }) {
+
+    if(isAiGenerationLoading || !isAiAvailable) return;
+
+    if(isAiActive) {
+      setIsAiActive(false);
+      return;
+    }
+
+    //Si ya tiene sugerencias generadas, se las mostramos
+    const currentSuggestions = suggestions?.[inputId];
+
+    if(Array.isArray(currentSuggestions) && currentSuggestions.length > 0)
+      return setIsAiActive(true);
+
+    setErrorMessage("");
+    setIsAiGenerationLoading(true);
+
+    const aiSuggestions = await generateProductSuggestions({
+      inputName: label,
+      currentValue: value,
+      description: description,
+      maxChar: maxChar ?? 99,
+      type: type,
+      // Informacion del producto
+      articleId: articleId,
+      versionId: version,
+      descriptionId: !isBenefitInput ? inputId : null,
+      attributeId: isBenefitInput ? inputId : null
+    });
+
+    if(!aiSuggestions && aiSuggestions.length === 0) {
+      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;
+    }
+
+    setSuggestions(prev => ({
+      ...prev,
+      [inputId]: aiSuggestions
+    }));
+
+
+    setIsAiActive(true);
+    setIsAiGenerationLoading(false);
+
+  }
+
+  async function handlerRegenerateSuggestions({
+    type = "description"
+  }) {
+
+    if(isAiRegenerationLoading) return;
+
+    setErrorMessage("");
+    setIsAiRegenerationLoading(true);
+
+    const currentSuggestions = suggestions?.[inputId];
+
+    const aiSuggestions = await regenerateProductSuggestions({
+      inputName: label,
+      currentValue: value,
+      description: description,
+      maxChar: maxChar ?? 99,
+      type: type,
+      //Información del producto
+      articleId,
+      versionId: version,
+      descriptionId: !isBenefitInput ? inputId : null,
+      attributeId: isBenefitInput ? inputId : null
+    });
+
+    if(!aiSuggestions && aiSuggestions.length === 0) {
+      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;
+    }
+
+    setSuggestions(prev => ({
+      ...prev,
+      [inputId]: [
+        ...currentSuggestions,
+        ...aiSuggestions
+      ]
+    }))
+
+    setIsAiRegenerationLoading(false);
+
+  }
+
+  const handleChangeSuggestion = ({
+    action = "next" // "prev" o "next"
+  }) => {
+
+    const inputSuggestions = suggestions?.[inputId];
+
+    if(!inputSuggestions || !Array.isArray(inputSuggestions)) return console.log("Error: No existe la sugerencia");
+
+    const currentIndex = currentSuggestion?.[inputId]?.index;
+
+    if(!currentIndex && currentIndex != 0) return console.log("Error: No existe un indice en la sugerencia actual");
+
+    switch(action) {
+      case "prev":
+
+        if(currentIndex === 0) return;
+
+        const prevIndex = currentIndex - 1;
+
+        setCurrentSuggestionValue({
+          inputId,
+          index: prevIndex,
+          value: inputSuggestions[prevIndex]?.value
+        })
+
+        break;
+
+      case "next":
+
+        if(currentIndex === inputSuggestions.length - 1) return;
+
+        const nextIndex = currentIndex + 1;
+
+        setCurrentSuggestionValue({
+          inputId,
+          index: nextIndex,
+          value: inputSuggestions[nextIndex]?.value
+        })
+
+        break;
+
+      default:
+        break;
+    }
+
+  }
+
   useEffect(() => {
     const temp = {};
     let maxBoxId = 0;
@@ -63,10 +251,64 @@ export const TagAndInput = ({
       );
     }
   }, []);
+
   useEffect(() => {
     onChange && onChange(boxOnboardingList);
   }, [boxOnboardingList]);
 
+  useEffect(() => {
+
+    if(!isCreators) return;
+
+    const currentDescriptionUpdate = Array.isArray(updatedDescriptions)
+      ? updatedDescriptions.find(desc => desc?.attributeId === inputId)
+      : null;
+
+    const currentDatasheetUpdate = Array.isArray(updatedDatasheets)
+      ? updatedDatasheets.find(data => data?.attributeId === inputId)
+      : null;
+
+    let calculatedIsAiGenerated = aiGenerated;
+
+    if (currentDescriptionUpdate) {
+      calculatedIsAiGenerated = currentDescriptionUpdate.aiSuggestionAccepted;
+    } else if (currentDatasheetUpdate) {
+      calculatedIsAiGenerated = currentDatasheetUpdate.aiSuggestionAccepted;
+    }
+
+    setInputsGeneratedWithAi(prev => ({
+      ...prev,
+      [`${inputId}-${inputType}-${version}`]: {
+        inputType,
+        inputId,
+        version,
+        isAiGenerated: !!calculatedIsAiGenerated,
+        label
+      }
+    }));
+
+  }, [updatedDescriptions, updatedDatasheets, aiGenerated, inputId]);
+
+  useEffect(() => {
+
+    if(!isCreators) return;
+
+    setIsAiGenerated(!!inputsGeneratedWithAi[`${inputId}-${inputType}-${version}`]?.isAiGenerated);
+  }, [inputsGeneratedWithAi]);
+
+  useEffect(() => {
+
+    if(!isCreators) return;
+
+    setInputsUsingAi(prev => ({
+      ...prev,
+      [`${inputId}-${inputType}-${version}`]: {
+        using: isAiActive
+      }
+    }))
+
+  }, [isAiActive])
+
   return (
     <Container
       inputType={inputType}
@@ -75,28 +317,45 @@ export const TagAndInput = ({
     >
       {label?.length && (
         <div className="title-container">
-          <ScreenHeader
-            text={label}
-            headerType={"input-name-header"}
-            color={color}
-          />
-          {description && (
-            <Tooltip
-              componentTooltip={
-                <>
-                  <p>{description}</p>
-                </>
-              }
-              children={
-                  <img
-                    src={InfoIcon}
-                    alt="info icon"
-                    className={'icon_information'}
-                  />
-              }
-              classNameTooltip={"container-tooltip"}
+          <div className="titles">
+            <ScreenHeader
+              text={label}
+              headerType={"input-name-header"}
+              color={color}
             />
-          )}
+            {description && (
+              <Tooltip
+                componentTooltip={
+                  <>
+                    <p>{description}</p>
+                  </>
+                }
+                children={
+                    <img
+                      src={InfoIcon}
+                      alt="info icon"
+                      className={'icon_information'}
+                    />
+                }
+                classNameTooltip={"container-tooltip"}
+              />
+            )}
+          </div>
+          {
+              isCreators && isAiGenerated ? (
+              <div className="ai-generated">
+                <img src={AiGenerationIcon} />
+                <p>Atributo generado con IA</p>
+              </div>
+            ) : null
+          }
+        </div>
+      )}
+      {errorMessage && (
+        <div
+          className="error-message-container"
+        >
+          <p>{errorMessage}</p>
         </div>
       )}
       <GeneralInput
@@ -123,6 +382,19 @@ export const TagAndInput = ({
         inputOnChange={inputOnChange}
         onKeyDown={onKeyDown}
         auditClass={auditClass}
+        // AI Generation
+        hasAiGeneration={isCreators}
+        isBenefitInput={isBenefitInput}
+        isAiGenerationLoading={isAiGenerationLoading}
+        isAiRegenerationLoading={isAiRegenerationLoading}
+        isAiActive={isAiActive}
+        setIsAiActive={setIsAiActive}
+        isAiAvailable={isAiAvailable}
+        aiGenerated={aiGenerated}
+        // aiSuggestions={aiSuggestions}
+        handlerAiGeneration={handlerAiGeneration}
+        handlerRegenerateSuggestions={handlerRegenerateSuggestions}
+        handleChangeSuggestion={handleChangeSuggestion}
         onChange={(e) => {
           setBoxOnboardingList((prev) => {
             return prev.map((box, i) => {
@@ -133,6 +405,7 @@ export const TagAndInput = ({
             });
           });
         }}
+
       />
     </Container>
   );

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

@@ -7,26 +7,55 @@ export const Container = styled.div`
 
     display: flex;
     align-items: center;
-    gap: .5rem;
+    justify-content: space-between;
 
-    .icon_information{
-      width: 1.35rem;
-      height: 1.35rem;
-      filter: brightness(.35);
+    font-family: ${FontFamily.Raleway};
+
+    .titles{
+      display: flex;
+      gap: .5rem;
+      align-items: center;
     }
 
-    .tooltip {
-      display: none;
-      position: absolute;
-      background-color: ${GlobalColors.white};
-      color: ${({ color }) => (color ? color : GlobalColors.s5)};
-      font-family: ${FontFamily.Raleway};
-      font-size: 14px;
-      line-height: 19px;
-      left: 0;
-      top: 0;
-      height: fit-content;
-      transition: display 2s;
+      .icon_information{
+        width: 1.35rem;
+        height: 1.35rem;
+        filter: brightness(.35);
+        margin-top: 10px;
+      }
+
+      .tooltip {
+        display: none;
+        position: absolute;
+        background-color: ${GlobalColors.white};
+        color: ${({ color }) => (color ? color : GlobalColors.s5)};
+        font-size: 14px;
+        line-height: 19px;
+        left: 0;
+        top: 0;
+        height: fit-content;
+        transition: display 2s;
+      }
+
+    .ai-generated{
+
+      display: flex;
+      align-items: items-center;
+      gap: .5rem;
+      font-size: 11px;
+      background-color: rgba(224, 57, 167, 0.025);
+      border: 1px solid rgba(224, 57, 167, 0.1);
+      padding: .25rem .5rem;
+      border-radius: 5px;
+      margin-left: 0.5rem;
+      margin-top: 7px;
+      cursor: default;
+
+      > img {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+
     }
 
     &:hover {
@@ -34,6 +63,8 @@ export const Container = styled.div`
         display: block;
       }
     }
+
+
   }
 
   & > :first-child {
@@ -44,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;
+
+  }
 `;