contentoh-components-library 21.5.78 → 21.5.81

package/src/contexts/AiProductEdition.jsx

@@ -2,14 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { createContext } from "react";
 import axios from "axios";
 
-import AttributeSchema from "../ai/schemas/attribute.schema.js";
-import DescriptionSchema from "../ai/schemas/description.schema.js";
-
-import { GoogleGenAI } from "@google/genai";
-import { generateDescriptionPrompt } from "../ai/prompts/description.prompt";
-import { generateAttributePrompt } from "../ai/prompts/attribute.prompt";
-
-const GeminiApiKey = process.env.REACT_APP_GEMINI_API_KEY;
+import { useProviderProductEdition } from "../components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx";
 
 export const AiProductEdition = createContext();
 
@@ -23,22 +16,36 @@ export const useAiProductEdition = () => {
 
 export const AiProductEditionProvider = ({
   children,
-  isCreatorsEdition = true,
-  productSelected = null,
-  activeRetailer
+  isCreatorsEdition = false,
+  user = {},
+  token = ""
 }) => {
 
   const isCreators = isCreatorsEdition;
 
+  const {
+    state,
+  } = useProviderProductEdition();
+
+  const productSelected = state.product;
+  const activeRetailer = state.active_retailer;
+  const datasheetInputs = state.datasheets_inputs?.[1];
+  const imagesData = state.images_values;
+
   const [product, setProduct] = useState(null);
 
-  const [suggestions, setSuggestions] = useState({});
+  const [parsedDatasheet, setParsedDatasheet] = useState([]);
+  const [parsedImages, setParsedImages] = useState([]);
 
+  const [suggestions, setSuggestions] = useState({});
   const [currentSuggestion, setCurrentSuggestion] = useState({});
 
-  const ai = new GoogleGenAI({ apiKey: GeminiApiKey });
+  const [isAiAvailable, setIsAiAvailable] = useState(false);
+
+  const [inputsGeneratedWithAi, setInputsGeneratedWithAi] = useState({});
+  const [inputsUsingAi, setInputsUsingAi] = useState({});
+
 
-  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
   function setCurrentSuggestionValue({
     inputId,
@@ -59,22 +66,31 @@ export const AiProductEditionProvider = ({
   }
 
   async function regenerateProductSuggestions ({
-    inputId,
     inputName,
     currentValue,
     description,
     maxChar,
-    type
+    type,
+
+    articleId,
+    versionId,
+    descriptionId,
+    attributeId
   }) {
 
-    if(!inputId || !description || !maxChar || !type) return console.log("Error: No se obtuvieron los parametros obligatorios");
+    if(!description || !maxChar || !type) return console.log("Error: No se obtuvieron los parametros obligatorios");
 
     const newSuggestions = await generateProductSuggestions({
       inputName,
       currentValue,
       description,
       maxChar,
-      type
+      type,
+
+      articleId,
+      versionId,
+      descriptionId,
+      attributeId
     });
 
     if(!Array.isArray(newSuggestions) || newSuggestions.length === 0)
@@ -91,22 +107,26 @@ export const AiProductEditionProvider = ({
     currentValue = "",
     description = "",
     maxChar = 100,
-    type = "description"
+    type = 'description',
+
+    articleId,
+    versionId,
+    descriptionId,
+    attributeId
   }) {
 
     try {
 
-      if(!product) {
+      if(!isAiAvailable) return;
+
+      if(!product)
         throw new Error("El producto no está definido");
-      }
 
-      console.log({
-        inputName,
-        currentValue,
-        description,
-        maxChar,
-        type
-      });
+      if(!Array.isArray(parsedDatasheet) || parsedDatasheet.length === 0)
+        throw new Error("No es encontró la ficha técnica");
+
+      if(!Array.isArray(parsedImages) || parsedImages.length === 0)
+        throw new Error("No se encontraron imágenes para la cadena seleccionada");
 
       const {
         upc,
@@ -115,50 +135,37 @@ export const AiProductEditionProvider = ({
         category
       } = product;
 
-      if (!upc || !description || !productName || !category || !retailer) {
+      if (!upc || !description || !productName || !category || !retailer || !articleId || !versionId || (!descriptionId && !attributeId))
         throw new Error("Faltan parámetros obligatorios para generar sugerencias de IA");
-      }
 
-      const prompt = type === "description" ? generateDescriptionPrompt({
+      const payload = {
         upc,
-        inputName,
-        description,
-        name: productName,
-        category,
-        currentValue,
-        retailer,
-        maxChar
-      }) : generateAttributePrompt({
-        upc,
-        inputName,
-        description,
-        name: productName,
-        category,
+        attributeTitle: inputName,
+        attributeDescription: description,
+        productName,
         currentValue,
-        retailer,
-        maxChar
-      })
-
-      const schema = type === "description" ? DescriptionSchema : AttributeSchema;
-
-      const response = await generateContentWithRetry({
-        model: "gemini-2.5-flash",
-        contents: [
-          {
-            role: "user",
-            parts: [{ text: prompt }]
-          }
-        ],
-        config: {
-          responseMimeType: "application/json",
-          responseSchema : schema,
-          temperature: 0.1
+        categoryName: category,
+        retailerName: retailer,
+        datasheet: parsedDatasheet,
+        images: parsedImages,
+        maxChar: maxChar,
+
+        articleId,
+        retailerId: activeRetailer?.id_retailer,
+        versionId,
+        descriptionId,
+        attributeId
+      }
+
+      const { data } = await axios.post(process.env.REACT_APP_GENERATE_AI_ATTRIBUTES, payload, {
+        headers: {
+          Authorization: token
         }
       });
 
-      const normalizedResponse = JSON.parse(response.text);
+      const results = JSON.parse(data?.body)?.data ?? [];
 
-      const results = normalizedResponse?.["results"];
+      console.log({results});
 
       if(!results)
         throw new Error("No se encontraron resultados");
@@ -174,34 +181,7 @@ export const AiProductEditionProvider = ({
 
   }
 
-  async function generateContentWithRetry(modelParams, retries = 5, backoff = 1000) {
-      try {
-
-        const failoverModel = "gemini-2.5-flash";
-
-        const model = retries > 3 ? "gemini-2.5-flash-lite" : failoverModel;
-
-        return await ai.models.generateContent({
-          ...modelParams,
-          model: model
-        });
-      } catch (error) {
-
-        const isOverloaded = error.status === 503 || error.message?.includes("overloaded");
-
-        if (retries > 0 && isOverloaded) {
-          console.warn(`⚠️ Modelo saturado (503). Reintentando en ${backoff}ms... (Quedan ${retries} intentos)`);
-
-          await delay(backoff);
-
-          return generateContentWithRetry(modelParams, retries - 1, backoff * 2);
-        }
-
-        // Si no es error de sobrecarga o se acabaron los intentos, lanzamos el error real
-        throw error;
-      }
-    }
-
+  // Verificamos si los servicios de ficha técnica e imágenes estan completos
   useEffect(() => {
 
     if (!productSelected) return;
@@ -223,6 +203,23 @@ export const AiProductEditionProvider = ({
       category
     } = currentCategory;
 
+    //Checamos si el servicio de ficha técnica e imagenes esta completo
+    const currentRetailerPercentages = productSelected?.percentages?.find(retailer => retailer?.id_retailer === activeRetailer?.id_retailer);
+
+    if(!currentRetailerPercentages) return console.log("Error: No hay porcentajes disponibles");
+
+    const {
+      required: datasheetRequiredPercent,
+    } = currentRetailerPercentages?.datasheet;
+
+    const {
+      required: imagesRequiredPercent,
+    } = currentRetailerPercentages?.images;
+
+    const aiServiceAvailable = (datasheetRequiredPercent >= 100) && (imagesRequiredPercent >= 100) && user?.id_role === 7;
+
+    setIsAiAvailable(aiServiceAvailable);
+
     setProduct({
       upc,
       productName,
@@ -232,19 +229,64 @@ export const AiProductEditionProvider = ({
 
   }, [productSelected]);
 
+  // Inicializamos la ficha técnica con el objetivo de posteriormente pasarlo a la generación con IA
+  useEffect(() => {
+
+    if (!datasheetInputs) return;
+
+    const datasheetToArray = Object.values(datasheetInputs);
+
+    const normalizedDatasheet = datasheetToArray.map(attribute => ({
+      description: attribute?.description,
+      name: attribute?.name,
+      type: attribute?.type,
+      value: attribute?.value
+    }));
+
+    setParsedDatasheet(normalizedDatasheet);
+
+  }, [datasheetInputs]);
+
+  // Inicializamos las imágenes con el objetivo de posteriormente pasarlo a la generación con IA
+  useEffect(() => {
+
+    const currentRetailerImageInputs = imagesData?.inputsByRetailer?.[0]?.filter(input => input?.id_retailer === activeRetailer?.id_retailer);
+
+    if(!Array.isArray(currentRetailerImageInputs) || currentRetailerImageInputs.length === 0) return console.log('No existen imágenes para la cadena seleccionada')
+
+    const allProductImages = imagesData?.values;
+
+    if(!Array.isArray(allProductImages) || allProductImages.length === 0) return console.log("No existen imágenes para el producto");
+
+    //Obtenemos las imágenes para el retailer seleccionado
+    const currentParsedImages = allProductImages.filter(image => {
+
+      const imageId = image?.image_id;
+      const foundedImage = currentRetailerImageInputs.some(retailerImage => retailerImage?.id_image === imageId);
+
+      return foundedImage;
+    });
+
+    setParsedImages(currentParsedImages);
+
+  }, [imagesData]);
+
   return (
     <AiProductEdition.Provider
       value={{
         isCreators: isCreators,
         suggestions,
         currentSuggestion,
+        isAiAvailable,
+        inputsGeneratedWithAi,
+        inputsUsingAi,
 
-
-
-        generateProductSuggestions,
-        regenerateProductSuggestions,
+        setInputsUsingAi,
+        setInputsGeneratedWithAi,
         setSuggestions,
         setCurrentSuggestionValue,
+        generateProductSuggestions,
+        regenerateProductSuggestions,
         clearCurrentSuggestions,
 
       }}

package/src/ai/prompts/attribute.prompt.js

@@ -1,46 +0,0 @@
-export const generateAttributePrompt = ({
-  upc = 0,
-  inputName = "",
-  description = "",
-  currentValue = "",
-  name = "",
-  category = "",
-  retailer = "",
-  maxChar = 100,
-}) => {
-
-  return `
-    Eres un especialista en la generación, optimización, mejora y captura de atributos de la ficha técnica de productos para catálogos en línea.
-    Tu tarea es crear atributos claros, concisos y relevantes que resalten las características y beneficios del producto, utilizando un lenguaje preciso y adaptado al público objetivo.
-
-    Datos del producto:
-    - UPC: ${upc}
-    - Nombre del producto: ${name}
-    - Categoría: ${category}
-    - Nombre del atributo: ${inputName}
-    - Requerimiento del atributo: ${description}
-    - Valor actual del atributo: ${currentValue}
-    - Cadena comercial dirigida: ${retailer}
-
-    Instrucciones:
-    1. Analiza el nombre del producto y la categoría para entender su contexto.
-    2. Analiza la descripción del atributo actual del producto.
-    3. Identifica la información clave del atributo que sean relevantes y útiles para los clientes potenciales.
-    4. Genera una lista de atributos que:
-      - Cumplan con la descripcion del atributo proporcionada, no inventes datos o cambies el contexto de lo que pide la descripción del atributo.
-      - Sean claros y fáciles de entender.
-      - Destaquen las características y beneficios clave del producto.
-      - Utilicen un lenguaje preciso y adaptado al público objetivo.
-      - Mantengan un tono profesional y coherente con la marca.
-      - Aumenten la probabilidad de compra del producto.
-      - No excedan los ${maxChar} caracteres en total.
-      - Si existe ejemplo en la descripción del atributo, sigue el mismo formato para generar los atributos.
-    5. No incluyas emojis ni signos especiales (*/+´!¡?¿)
-    6. No repitas el encabezado: ${inputName}
-    7. No incluyas call to action, ejemplo: "!Compra ya!" "!Da click!" "!Apurate!"
-
-    Asegúrate de que los atributos generados cumplan con todas las instrucciones proporcionadas.
-
-    No lo olvides, el objetivo principal es mejorar la captura de atributos para la ficha técnica del producto para atraer, convencer y dar la información completa a los clientes potenciales que puedan realizar una compra.
-  `
-}

package/src/ai/prompts/description.prompt.js

@@ -1,52 +0,0 @@
-// Cadena y Proveedor
-
-/**
- * La cadena ${cadena} tiene estas reglas ${reglas} para el tipo de descripcion que es: ${descripcion}
-*/
-
-export const generateDescriptionPrompt = ({
-  upc = 0,
-  inputName = "",
-  description = "",
-  currentValue = "",
-  name = "",
-  category = "",
-  retailer = "",
-  maxChar = 100,
-}) => {
-
-  return `
-    Eres un especialista en la generación, optimización y mejora de descripciones de productos para catálogos en línea.
-    Tu tarea es crear descripciones claras, concisas y atractivas que resalten las características y beneficios del producto, utilizando un lenguaje persuasivo y adaptado al público objetivo.
-
-    Datos del producto:
-    - UPC: ${upc}
-    - Nombre del producto: ${name}
-    - Categoría: ${category}
-    - Encabezado de la descripción: ${inputName}
-    - Requerimiento de la descripcion: ${description}
-    - Descripcion actual del producto: ${currentValue}
-    - Cadena comercial dirigida: ${retailer}
-
-    Instrucciones:
-    1. Analiza la descripción actual del producto en caso de tenerla.
-    2. Identifica áreas de mejora, como claridad, concisión, atractivo y relevancia.
-    3. Genera una descripción que:
-      - Sea clara y fácil de entender.
-      - Destaque las características y beneficios clave del producto.
-      - Utilice un lenguaje persuasivo y adaptado al público objetivo.
-      - Mantenga un tono profesional y coherente con la marca.
-      - No exceda los ${maxChar} caracteres.
-      - Aumente la probabilidad de compra del producto, utilizando persuasión en la necesidad de compra del producto.
-    4. No incluyas emojis ni signos especiales (*/+´!¡?¿)
-    5. No repitas el encabezado: ${inputName}
-    6. No incluyas call to action, ejemplo: "!Compra ya!" "!Da click!" "!Apurate!"
-
-
-    Asegúrate de que la descripción generada cumpla con todas las instrucciones proporcionadas.
-
-    No lo olvides, el objetivo principal es mejorar la descripción del producto para atraer y convencer a los clientes potenciales de realizar una compra. Eres un experto en marketing y redacción persuasiva.
-
-    Nota: No estas hablando con los clientes, estas descripciones irán en la tienda de E-commerce de la cadena comercial. No realices saludos, despedidas, sugerencias
-  `
-}

package/src/ai/schemas/attribute.schema.js

@@ -1,23 +0,0 @@
-const schema = {
-  type: "object",
-  properties: {
-    results: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          label: { type: "string" },
-          value: { type: "string" }
-        }
-      },
-      maxItems: 3
-    },
-    compliance_warnings: {
-      type: "array",
-      items: { type: "string" }
-    }
-  },
-  required: ["results"]
-}
-
-export default schema;

package/src/ai/schemas/description.schema.js

@@ -1,19 +0,0 @@
-const schema = {
-  type: "object",
-  properties: {
-    results: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          value: { type: "string" }
-        }
-      },
-      minItems: 1,
-      maxItems: 3
-    }
-  },
-  required: ["results"]
-}
-
-export default schema;