@interware/content-generator 0.1.1

package/dist/_chunks/App-6ntGE8c-.js

@@ -0,0 +1,702 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const admin = require("@strapi/strapi/admin");
+const designSystem = require("@strapi/design-system");
+const reactRouterDom = require("react-router-dom");
+const reactIntl = require("react-intl");
+const react = require("react");
+const reactRedux = require("react-redux");
+const index = require("./index-Dcpjhvs5.js");
+const icons = require("@strapi/icons");
+const getTranslation = require("./getTranslation-AfxwBFKN.js");
+const formik = require("formik");
+const Yup = require("yup");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Yup__namespace = /* @__PURE__ */ _interopNamespace(Yup);
+const useDialog = (id) => {
+  const dispatch = reactRedux.useDispatch();
+  const state = reactRedux.useSelector((state2) => state2.content_generator_commonDialog.open[id] ?? false);
+  return {
+    open: state,
+    openDialog: () => dispatch(index.openDialog(id)),
+    closeDialog: () => dispatch(index.closeDialog(id))
+  };
+};
+const useArticles = () => {
+  const { get } = admin.useFetchClient();
+  const getArticles = react.useCallback(
+    async (config) => {
+      return get("/strapi-content-generator-gemini/posts", config);
+    },
+    [get]
+  );
+  return {
+    getArticles
+  };
+};
+const useGenerateContent = () => {
+  const { post } = admin.useFetchClient();
+  const generateContent = react.useCallback(
+    async (data, config) => {
+      return post("/strapi-content-generator-gemini/generate-article", data, config);
+    },
+    [post]
+  );
+  const generateImage = react.useCallback(
+    async (data, config) => {
+      return post("/strapi-content-generator-gemini/generate-image", data, config);
+    },
+    [post]
+  );
+  return {
+    generateContent,
+    generateImage
+  };
+};
+const usePublishLinkedIn = () => {
+  const { post } = admin.useFetchClient();
+  const publishToLinkedIn = react.useCallback(
+    async (data, config) => {
+      return post("/strapi-content-generator-gemini/publish-linkedin", data, config);
+    },
+    [post]
+  );
+  return {
+    publishToLinkedIn
+  };
+};
+const PublishingTableComponent = ({
+  posts,
+  currentPost,
+  loadingImage,
+  loadingPublishLinkedIn,
+  onClickAction
+}) => {
+  const rows = react.useMemo(() => {
+    const opciones = {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    };
+    return posts.map((post) => {
+      const fecha = post.fecha_publicacion ? new Date(post.fecha_publicacion).toLocaleDateString("es-ES", opciones) : "No definida";
+      return {
+        id: post.documentId,
+        fecha,
+        titulo: post.titulo && post.titulo.length > 30 ? `${post.titulo.slice(0, 30)}…` : post.titulo,
+        autor: `${post.autor?.nombre ?? ""} ${post.autor?.apellidos ?? ""}`,
+        linkedInURL: post.linkedInPostId,
+        hasImage: Boolean(post.image)
+      };
+    });
+  }, [posts]);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 7, rowCount: rows.length + 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Fecha de publicación" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Blog Title" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Autor" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fa-brands fa-linkedin" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "LinkedIn" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: rows.map((row) => {
+      const buttonLoadingImage = loadingImage && currentPost.current === row.id;
+      const buttonLoadingPublishingLinkediN = loadingPublishLinkedIn && currentPost.current === row.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: row.fecha }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: row.titulo }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: row.autor }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            disabled: row.linkedInURL,
+            onClick: () => onClickAction(row.id, "publish-to-linked-in-dialog"),
+            loading: buttonLoadingPublishingLinkediN,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
+            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: buttonLoadingImage ? "publicando" : "publicar" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            disabled: row.hasImage,
+            onClick: () => onClickAction(row.id, "generate-image-dialog"),
+            loading: buttonLoadingImage,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Image, {}),
+            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: buttonLoadingImage ? "generando" : "generar" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.LinkButton,
+          {
+            href: `/admin/content-manager/collection-types/api::articulo.articulo/${row.id}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "ver" })
+          }
+        ) })
+      ] }, row.id);
+    }) })
+  ] }) });
+};
+const PublishingTable = react.memo(PublishingTableComponent);
+const DialogCommon = ({
+  id,
+  title = "Confirmación",
+  children,
+  cancelText = "Cancelar",
+  confirmText = "Confirmar",
+  onCancelAction,
+  onConfirmAction
+}) => {
+  const { open } = useDialog(id);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Header, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Body, { children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Cancel, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { fullWidth: true, variant: "tertiary", onClick: onCancelAction, children: cancelText }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Action, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { fullWidth: true, variant: "danger", onClick: onConfirmAction, children: confirmText }) })
+    ] })
+  ] }) });
+};
+const GenerateImageDialog = ({ onCancelAction, onConfirmAction }) => {
+  const [imageInstructions, setImageInstructions] = react.useState("");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogCommon,
+    {
+      id: "generate-image-dialog",
+      title: "Generar imágen con Gemini",
+      cancelText: "Cancelar",
+      confirmText: "Confirmar",
+      onCancelAction,
+      onConfirmAction: () => {
+        onConfirmAction(imageInstructions);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", justifyContent: "center", width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "¿Deseas generar la imágen para el artículo ahora?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "No te preocupes, también puedes hacerlo más adelante." })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Field.Root,
+          {
+            id: "image-instructions",
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Instrucciones adicionales" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Textarea,
+                {
+                  name: "image-instructions",
+                  value: imageInstructions,
+                  placeholder: "Instrucciones adicionales para generar la imágen",
+                  onChange: (e) => {
+                    const { value } = e.target;
+                    setImageInstructions(value);
+                  },
+                  resizable: false,
+                  rows: 3
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
+const HomeContainer = () => {
+  const [posts, setPosts] = react.useState([]);
+  const [loadingImage, setIsLoadingImage] = react.useState(false);
+  const [loadingPublishingToLinkedIn, setIsLoadingPublishingToLinkedIn] = react.useState(false);
+  const currentPostRef = react.useRef("");
+  const { formatMessage } = reactIntl.useIntl();
+  const { openDialog: openImageGenerateDialog, closeDialog: closeImageGenerateDialog } = useDialog("generate-image-dialog");
+  const { openDialog: openPublishToLinkedInDialog, closeDialog: closePublishToLinkedInDialog } = useDialog("publish-to-linked-in-dialog");
+  const { getArticles } = useArticles();
+  const { generateImage } = useGenerateContent();
+  const { publishToLinkedIn } = usePublishLinkedIn();
+  const { toggleNotification } = admin.useNotification();
+  const fetchPosts = react.useCallback(async () => {
+    let isMounted = true;
+    try {
+      const { data } = await getArticles({
+        params: {
+          populate: {
+            image: { fields: ["url", "caption", "alternativeText"] },
+            autor: { fields: ["nombre", "apellidos"] }
+          },
+          sort: ["createdAt:desc"]
+        }
+      });
+      if (isMounted) {
+        setPosts(data);
+      }
+    } catch (error) {
+      console.error("Error fetching posts:", error);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [getArticles]);
+  react.useEffect(() => {
+    fetchPosts();
+  }, [fetchPosts]);
+  const onConfirmGenerateImage = react.useCallback(
+    async (imageInstructions) => {
+      closeImageGenerateDialog();
+      setIsLoadingImage(true);
+      try {
+        await generateImage({
+          articleId: currentPostRef.current,
+          imageInstructions
+        });
+        fetchPosts();
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: `${index.PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Imagen generada con éxito"
+          })
+        });
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: `${index.PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Ocurrió un error al generar la imagen"
+          })
+        });
+      } finally {
+        setIsLoadingImage(false);
+      }
+    },
+    [generateImage, closeImageGenerateDialog, setIsLoadingImage]
+  );
+  const onConfirmPublishToLinedIn = react.useCallback(
+    async () => {
+      closePublishToLinkedInDialog();
+      setIsLoadingPublishingToLinkedIn(true);
+      try {
+        await publishToLinkedIn({ articleId: currentPostRef.current });
+        fetchPosts();
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: `${index.PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Artículo publicado en LinkedIn con éxito"
+          })
+        });
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: `${index.PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Ocurrió un error al publicar el artículo en LinkedIn"
+          })
+        });
+      } finally {
+        setIsLoadingPublishingToLinkedIn(false);
+      }
+    },
+    [publishToLinkedIn, closeImageGenerateDialog, setIsLoadingPublishingToLinkedIn]
+  );
+  const onCancel = react.useCallback((dialogId) => {
+    currentPostRef.current = "";
+    switch (dialogId) {
+      case "generate-image-dialog":
+        closeImageGenerateDialog();
+      case "publish-to-linked-in-dialog":
+        closePublishToLinkedInDialog();
+      default:
+        return;
+    }
+  }, [closeImageGenerateDialog, closePublishToLinkedInDialog]);
+  const onClickAction = react.useCallback(
+    (postId, dialogId) => {
+      currentPostRef.current = postId;
+      switch (dialogId) {
+        case "generate-image-dialog":
+          openImageGenerateDialog();
+        case "publish-to-linked-in-dialog":
+          openPublishToLinkedInDialog();
+      }
+    },
+    [openImageGenerateDialog, openPublishToLinkedInDialog]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogCommon,
+      {
+        id: "publish-to-linked-in-dialog",
+        title: "Publicar en LinkedIn",
+        confirmText: "Publicar",
+        onCancelAction: () => onCancel("publish-to-linked-in-dialog"),
+        onConfirmAction: onConfirmPublishToLinedIn,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "¿Seguro que deseas publicar este artículo en LinkedIn?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "¡Esta acción es irreversible desde esta plataforma!" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateImageDialog, { onConfirmAction: onConfirmGenerateImage, onCancelAction: () => onCancel("generate-image-dialog") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: formatMessage({ id: getTranslation.getTranslation("plugin.name") }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "end", alignItems: "end", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini/generate-content", children: "Generar nuevo artículo" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        PublishingTable,
+        {
+          posts,
+          loadingImage,
+          loadingPublishLinkedIn: loadingPublishingToLinkedIn,
+          currentPost: currentPostRef,
+          onClickAction
+        }
+      ) })
+    ] })
+  ] });
+};
+const HomePage = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: formatMessage({ id: getTranslation.getTranslation("plugin.name") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(HomeContainer, {})
+  ] }) });
+};
+const useCategories = () => {
+  const { get } = admin.useFetchClient();
+  const getCategories = react.useCallback(
+    async (config) => {
+      return get("/strapi-content-generator-gemini/categories", config);
+    },
+    [get]
+  );
+  return {
+    getCategories
+  };
+};
+const useUsers = () => {
+  const { get } = admin.useFetchClient();
+  const getUsers = react.useCallback(
+    async (config) => {
+      return get("/strapi-content-generator-gemini/users", config);
+    },
+    [get]
+  );
+  return {
+    getUsers
+  };
+};
+const validationSchema = Yup__namespace.object().shape({
+  titulo: Yup__namespace.string().notRequired(),
+  autor: Yup__namespace.string().required("Este campo es obligatorio"),
+  categoria: Yup__namespace.string().required("Este campo es obligatorio"),
+  keywords: Yup__namespace.string().notRequired(),
+  instrucciones: Yup__namespace.string().notRequired()
+});
+const initialValues = {
+  titulo: "",
+  autor: "",
+  categoria: "",
+  keywords: "",
+  instrucciones: ""
+};
+const Form = ({ onSubmit, categorias, users }) => {
+  const formik$1 = formik.useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit
+  });
+  const { values, errors, touched, isValid, dirty, isSubmitting, handleChange, setFieldValue, handleSubmit } = formik$1;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, margin: 6, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "titulo",
+        error: touched.titulo && errors.titulo ? errors.titulo : void 0,
+        hint: "Ej: Las 10 mejores tendencias en IA para 2026",
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Título" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              name: "titulo",
+              label: "Título",
+              placeholder: "Título sugerido para el blog",
+              onChange: handleChange,
+              type: "text",
+              value: values.titulo
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "categoria",
+        error: touched.categoria && errors.categoria ? errors.categoria : void 0,
+        hint: "Puedes agregar más desde el Content Type: Categorías",
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Categoría" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Combobox,
+            {
+              name: "categoria",
+              placeholder: "Selecciona o escribe una categoría",
+              value: values.categoria,
+              onChange: (v) => setFieldValue("categoria", v),
+              onCreateOption: (v) => {
+                setFieldValue("categoria", v);
+              },
+              required: true,
+              children: categorias.map((c) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: c.documentId, children: c.categoria }, c.documentId))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "autor",
+        error: touched.autor && errors.autor ? errors.autor : void 0,
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Autor" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Combobox,
+            {
+              name: "autor",
+              placeholder: "Selecciona o escribe una categoría",
+              value: values.autor,
+              onChange: (v) => setFieldValue("autor", v),
+              onCreateOption: (v) => {
+                setFieldValue("autor", v);
+              },
+              required: true,
+              children: users.map((c) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: c.documentId, children: c.nombre_completo }, c.documentId))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "keywords",
+        error: touched.keywords && errors.keywords ? errors.keywords : void 0,
+        width: "100%",
+        hint: "Ej: Innovación, Desarrollo, AI",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Palabras clave" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              name: "keywords",
+              id: "keywords",
+              placeholder: "Palabras clave separadas por comas",
+              onChange: handleChange,
+              value: values.keywords
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        id: "instrucciones",
+        error: touched.instrucciones && errors.instrucciones ? errors.instrucciones : void 0,
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Instrucciones adicionales" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Textarea,
+            {
+              name: "instrucciones",
+              placeholder: "Escribe algunas instrucciones adicionales para el generador de contenido...",
+              onChange: handleChange,
+              value: values.instrucciones,
+              rows: 8
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { width: "100%", justifyContent: { initial: "end" }, alignItems: { initial: "end" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Button,
+      {
+        disabled: !(isValid && dirty) || isSubmitting,
+        loading: isSubmitting,
+        type: "submit",
+        children: "Generar contenido"
+      }
+    ) }) })
+  ] }) }) });
+};
+const GenerateContentContainer = () => {
+  const [documentId, setDocumentId] = react.useState("");
+  const [categorias, setCategorias] = react.useState([]);
+  const [users, setUsers] = react.useState([]);
+  const { getCategories } = useCategories();
+  const { getUsers } = useUsers();
+  const navigate = reactRouterDom.useNavigate();
+  const { closeDialog, openDialog } = useDialog("generate-image-dialog");
+  const { generateContent, generateImage } = useGenerateContent();
+  const { formatMessage } = reactIntl.useIntl();
+  const { toggleNotification } = admin.useNotification();
+  const onSubmit = react.useCallback(
+    async (values, { setSubmitting }) => {
+      try {
+        const { data } = await generateContent(values);
+        setDocumentId(data.documentId);
+        openDialog();
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: `${index.PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Artículo generado con éxito"
+          })
+        });
+      } catch (error) {
+        console.error("Error generating content:", error);
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: `${index.PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Ocurrió un error al generar el artículo"
+          })
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [generateContent, openDialog]
+  );
+  const goToArticle = react.useCallback(() => {
+    navigate(
+      `/content-manager/collection-types/api::articulo.articulo/${documentId}`
+    );
+  }, [navigate, documentId]);
+  const onConfirmGenerateImage = react.useCallback(
+    async (imageInstructions) => {
+      try {
+        await generateImage({
+          articleId: documentId,
+          imageInstructions
+        });
+        goToArticle();
+      } catch (err) {
+        console.error("Error generating image:", err);
+      } finally {
+        closeDialog();
+      }
+    },
+    [generateImage, documentId, closeDialog, goToArticle]
+  );
+  const onCancelGenerateImage = react.useCallback(() => {
+    closeDialog();
+    goToArticle();
+  }, [closeDialog, goToArticle]);
+  const fetchCategories = react.useCallback(async () => {
+    let isMounted = true;
+    try {
+      const { data } = await getCategories();
+      if (isMounted) {
+        setCategorias(data);
+      }
+    } catch (error) {
+      console.error("Error fetching posts:", error);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [getCategories]);
+  const fetchUsers = react.useCallback(async () => {
+    let isMounted = true;
+    try {
+      const { data } = await getUsers({
+        params: {
+          filters: {
+            blocked: {
+              $eq: false
+            }
+          }
+        }
+      });
+      console.log("🚀 ~ GenerateContentContainer ~ data:", data.length);
+      if (isMounted) {
+        setUsers(data);
+      }
+    } catch (error) {
+      console.error("Error fetching posts:", error);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [getUsers]);
+  react.useEffect(() => {
+    fetchCategories();
+    fetchUsers();
+  }, [fetchCategories]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateImageDialog, { onCancelAction: onCancelGenerateImage, onConfirmAction: onConfirmGenerateImage }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar nuevo artículo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { alignItems: "end", width: "100%", justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini", children: "Regresar" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form, { categorias, users, onSubmit }) })
+    ] })
+  ] });
+};
+const GenerateContent = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar nuevo artículo" }),
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateContentContainer, {})
+  ] });
+};
+const App = () => {
+  const { allowedActions, isLoading } = admin.useRBAC(index.pluginPermissions);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: [...index.pluginPermissions.access], children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { locale: "es-MX", children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-content", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateContent, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+  ] }) }) });
+};
+exports.App = App;