contentoh-components-library 21.5.78 → 21.5.81

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

@@ -9,6 +9,7 @@ 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 = ({
@@ -30,6 +31,7 @@ export const TagAndInput = ({
   inputRows,
   maxChar,
   required,
+  aiGenerated,
   optionList,
   description,
   inputOnChange,
@@ -54,7 +56,12 @@ export const TagAndInput = ({
     suggestions,
     setSuggestions,
     currentSuggestion,
-    setCurrentSuggestionValue
+    setCurrentSuggestionValue,
+    isAiAvailable,
+    inputsGeneratedWithAi,
+    setInputsGeneratedWithAi,
+    inputsUsingAi,
+    setInputsUsingAi
   } = useAiProductEdition();
 
   const isBenefitInput = label?.toLowerCase().includes("beneficios");
@@ -62,12 +69,13 @@ export const TagAndInput = ({
   const [isAiGenerationLoading, setIsAiGenerationLoading] = useState(false);
   const [isAiActive, setIsAiActive] = useState(false);
   const [isAiRegenerationLoading, setIsAiRegenerationLoading] = useState(false);
+  const [isAiGenerated, setIsAiGenerated] = useState(false);
 
   async function handlerAiGeneration({
     type
   }) {
 
-    if(isAiGenerationLoading) return;
+    if(isAiGenerationLoading || !isAiAvailable) return;
 
     if(isAiActive) {
       setIsAiActive(false);
@@ -87,7 +95,12 @@ export const TagAndInput = ({
       currentValue: value,
       description: description,
       maxChar: maxChar ?? 99,
-      type: type
+      type: type,
+      // Informacion del producto
+      articleId: articleId,
+      versionId: version,
+      descriptionId: !isBenefitInput ? inputId : null,
+      attributeId: isBenefitInput ? inputId : null
     });
 
     if(!aiSuggestions && aiSuggestions.length === 0) {
@@ -118,14 +131,24 @@ export const TagAndInput = ({
     const currentSuggestions = suggestions?.[inputId];
 
     const aiSuggestions = await regenerateProductSuggestions({
-      inputId,
       inputName: label,
       currentValue: value,
-      description,
-      maxChar,
-      type
+      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) {
+      console.log("Error: No se recibieron sugerencias de IA");
+      setIsAiRegenerationLoading(false);
+      return;
+    }
+
     setSuggestions(prev => ({
       ...prev,
       [inputId]: [
@@ -205,10 +228,60 @@ export const TagAndInput = ({
       );
     }
   }, []);
+
   useEffect(() => {
     onChange && onChange(boxOnboardingList);
   }, [boxOnboardingList]);
 
+  useEffect(() => {
+
+    if(Array.isArray(updatedDescriptions)) {
+
+      const currentDescriptionUpdate = updatedDescriptions.find(
+        description => description?.attributeId === inputId
+      );
+
+      const calculatedIsAiGenerated = currentDescriptionUpdate
+        ? !!currentDescriptionUpdate.aiSuggestionAccepted
+        : aiGenerated;
+
+      setInputsGeneratedWithAi(prev => ({
+        ...prev,
+        [`${inputId}-${inputType}-${version}`]: {
+          inputType,
+          inputId,
+          version,
+          isAiGenerated: calculatedIsAiGenerated,
+          label
+        }
+      }))
+
+    }
+
+    if(Array.isArray(updatedDatasheets) && updatedDatasheets.length > 0) {
+      console.log({isAiGenerated, updatedDatasheets});
+    }
+
+  }, [updatedDescriptions, updatedDatasheets, aiGenerated, inputId]);
+
+
+  useEffect(() => {
+
+    setIsAiGenerated(!!inputsGeneratedWithAi[`${inputId}-${inputType}-${version}`]?.isAiGenerated);
+
+  }, [inputsGeneratedWithAi]);
+
+  useEffect(() => {
+
+    setInputsUsingAi(prev => ({
+      ...prev,
+      [`${inputId}-${inputType}-${version}`]: {
+        using: isAiActive
+      }
+    }))
+
+  }, [isAiActive])
+
   return (
     <Container
       inputType={inputType}
@@ -217,28 +290,38 @@ 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>
       )}
       <GeneralInput
@@ -272,6 +355,8 @@ export const TagAndInput = ({
         isAiRegenerationLoading={isAiRegenerationLoading}
         isAiActive={isAiActive}
         setIsAiActive={setIsAiActive}
+        isAiAvailable={isAiAvailable}
+        aiGenerated={aiGenerated}
         // aiSuggestions={aiSuggestions}
         handlerAiGeneration={handlerAiGeneration}
         handlerRegenerateSuggestions={handlerRegenerateSuggestions}

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 {

package/src/components/organisms/FullTabsMenu/index.js

@@ -1,7 +1,7 @@
 import { Container } from "./styles";
 import { TabsMenu } from "../../molecules/TabsMenu/index";
 import { StatusAsignationInfo } from "../../molecules/StatusAsignationInfo/index";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,

package/src/components/organisms/InputGroup/index.js

@@ -219,6 +219,7 @@ export const InputGroup = ({
                   inputPlaceHolder={input?.placeholder}
                   articleId={articleId}
                   isRequired={dataInputs[input]?.required}
+                  aiGenerated={dataInputs[input]?.ai_generated}
                   updatedDatasheets={updatedDatasheets}
                   setUpdatedDatasheets={setUpdatedDatasheets}
                   maxChar={
@@ -277,6 +278,7 @@ export const InputGroup = ({
                         : input?.value
                     }
                     isRequired={input.required}
+                    aiGenerated={input?.ai_generated}
                     disabled={input.id===44186||input.id===44187?false:input?.isApproved}
                     maxChar={input.max_chars}
                     inputPlaceHolder={input?.placeholder}
@@ -352,6 +354,7 @@ export const InputGroup = ({
                     inputPlaceHolder={input?.placeholder}
                     articleId={articleId}
                     isRequired={dataInputs[input]?.required}
+                    aiGenerated={dataInputs[input]?.ai_generated}
                     updatedDatasheets={updatedDatasheets}
                     setUpdatedDatasheets={setUpdatedDatasheets}
                     maxChar={
@@ -413,6 +416,7 @@ export const InputGroup = ({
                         : input?.value
                     }
                     isRequired={input.required}
+                    aiGenerated={input?.ai_generated}
                     maxChar={input.max_chars}
                     inputPlaceHolder={input?.placeholder}
                     updatedDescriptions={updatedDescriptions}