@interware/content-generator 0.1.1

package/dist/_chunks/App-CUBxywy1.mjs

@@ -0,0 +1,684 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFetchClient, useNotification, Page, useRBAC } from "@strapi/strapi/admin";
+import { Box, Table, Thead, Tr, Th, Typography, Flex, Tbody, Td, Button, LinkButton, Dialog, Grid, Field, Textarea, TextInput, Combobox, ComboboxOption, DesignSystemProvider } from "@strapi/design-system";
+import { useNavigate, Routes, Route } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { useCallback, memo, useMemo, useState, useRef, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { c as closeDialog, o as openDialog, P as PLUGIN_ID, p as pluginPermissions } from "./index-CkkBgYlg.mjs";
+import { Play, Image } from "@strapi/icons";
+import { g as getTranslation } from "./getTranslation-Di36t3DD.mjs";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+const useDialog = (id) => {
+  const dispatch = useDispatch();
+  const state = useSelector((state2) => state2.content_generator_commonDialog.open[id] ?? false);
+  return {
+    open: state,
+    openDialog: () => dispatch(openDialog(id)),
+    closeDialog: () => dispatch(closeDialog(id))
+  };
+};
+const useArticles = () => {
+  const { get } = useFetchClient();
+  const getArticles = useCallback(
+    async (config) => {
+      return get("/strapi-content-generator-gemini/posts", config);
+    },
+    [get]
+  );
+  return {
+    getArticles
+  };
+};
+const useGenerateContent = () => {
+  const { post } = useFetchClient();
+  const generateContent = useCallback(
+    async (data, config) => {
+      return post("/strapi-content-generator-gemini/generate-article", data, config);
+    },
+    [post]
+  );
+  const generateImage = useCallback(
+    async (data, config) => {
+      return post("/strapi-content-generator-gemini/generate-image", data, config);
+    },
+    [post]
+  );
+  return {
+    generateContent,
+    generateImage
+  };
+};
+const usePublishLinkedIn = () => {
+  const { post } = useFetchClient();
+  const publishToLinkedIn = 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 = 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__ */ jsx(Box, { padding: 6, width: "100%", children: /* @__PURE__ */ jsxs(Table, { colCount: 7, rowCount: rows.length + 1, children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Fecha de publicación" }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Blog Title" }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Autor" }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx("i", { className: "fa-brands fa-linkedin" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "LinkedIn" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Th, {}),
+      /* @__PURE__ */ jsx(Th, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => {
+      const buttonLoadingImage = loadingImage && currentPost.current === row.id;
+      const buttonLoadingPublishingLinkediN = loadingPublishLinkedIn && currentPost.current === row.id;
+      return /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: row.fecha }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: row.titulo }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: row.autor }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: row.linkedInURL,
+            onClick: () => onClickAction(row.id, "publish-to-linked-in-dialog"),
+            loading: buttonLoadingPublishingLinkediN,
+            startIcon: /* @__PURE__ */ jsx(Play, {}),
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: buttonLoadingImage ? "publicando" : "publicar" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: row.hasImage,
+            onClick: () => onClickAction(row.id, "generate-image-dialog"),
+            loading: buttonLoadingImage,
+            startIcon: /* @__PURE__ */ jsx(Image, {}),
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: buttonLoadingImage ? "generando" : "generar" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            href: `/admin/content-manager/collection-types/api::articulo.articulo/${row.id}`,
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "ver" })
+          }
+        ) })
+      ] }, row.id);
+    }) })
+  ] }) });
+};
+const PublishingTable = memo(PublishingTableComponent);
+const DialogCommon = ({
+  id,
+  title = "Confirmación",
+  children,
+  cancelText = "Cancelar",
+  confirmText = "Confirmar",
+  onCancelAction,
+  onConfirmAction
+}) => {
+  const { open } = useDialog(id);
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { children: title }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+      /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "tertiary", onClick: onCancelAction, children: cancelText }) }),
+      /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "danger", onClick: onConfirmAction, children: confirmText }) })
+    ] })
+  ] }) });
+};
+const GenerateImageDialog = ({ onCancelAction, onConfirmAction }) => {
+  const [imageInstructions, setImageInstructions] = useState("");
+  return /* @__PURE__ */ jsx(
+    DialogCommon,
+    {
+      id: "generate-image-dialog",
+      title: "Generar imágen con Gemini",
+      cancelText: "Cancelar",
+      confirmText: "Confirmar",
+      onCancelAction,
+      onConfirmAction: () => {
+        onConfirmAction(imageInstructions);
+      },
+      children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", justifyContent: "center", width: "100%", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "¿Deseas generar la imágen para el artículo ahora?" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "No te preocupes, también puedes hacerlo más adelante." })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsxs(
+          Field.Root,
+          {
+            id: "image-instructions",
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: "Instrucciones adicionales" }),
+              /* @__PURE__ */ jsx(
+                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] = useState([]);
+  const [loadingImage, setIsLoadingImage] = useState(false);
+  const [loadingPublishingToLinkedIn, setIsLoadingPublishingToLinkedIn] = useState(false);
+  const currentPostRef = useRef("");
+  const { formatMessage } = 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 } = useNotification();
+  const fetchPosts = 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]);
+  useEffect(() => {
+    fetchPosts();
+  }, [fetchPosts]);
+  const onConfirmGenerateImage = useCallback(
+    async (imageInstructions) => {
+      closeImageGenerateDialog();
+      setIsLoadingImage(true);
+      try {
+        await generateImage({
+          articleId: currentPostRef.current,
+          imageInstructions
+        });
+        fetchPosts();
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: `${PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Imagen generada con éxito"
+          })
+        });
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: `${PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Ocurrió un error al generar la imagen"
+          })
+        });
+      } finally {
+        setIsLoadingImage(false);
+      }
+    },
+    [generateImage, closeImageGenerateDialog, setIsLoadingImage]
+  );
+  const onConfirmPublishToLinedIn = useCallback(
+    async () => {
+      closePublishToLinkedInDialog();
+      setIsLoadingPublishingToLinkedIn(true);
+      try {
+        await publishToLinkedIn({ articleId: currentPostRef.current });
+        fetchPosts();
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: `${PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Artículo publicado en LinkedIn con éxito"
+          })
+        });
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: `${PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Ocurrió un error al publicar el artículo en LinkedIn"
+          })
+        });
+      } finally {
+        setIsLoadingPublishingToLinkedIn(false);
+      }
+    },
+    [publishToLinkedIn, closeImageGenerateDialog, setIsLoadingPublishingToLinkedIn]
+  );
+  const onCancel = useCallback((dialogId) => {
+    currentPostRef.current = "";
+    switch (dialogId) {
+      case "generate-image-dialog":
+        closeImageGenerateDialog();
+      case "publish-to-linked-in-dialog":
+        closePublishToLinkedInDialog();
+      default:
+        return;
+    }
+  }, [closeImageGenerateDialog, closePublishToLinkedInDialog]);
+  const onClickAction = useCallback(
+    (postId, dialogId) => {
+      currentPostRef.current = postId;
+      switch (dialogId) {
+        case "generate-image-dialog":
+          openImageGenerateDialog();
+        case "publish-to-linked-in-dialog":
+          openPublishToLinkedInDialog();
+      }
+    },
+    [openImageGenerateDialog, openPublishToLinkedInDialog]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsxs(Flex, { direction: "column", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "¿Seguro que deseas publicar este artículo en LinkedIn?" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "¡Esta acción es irreversible desde esta plataforma!" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(GenerateImageDialog, { onConfirmAction: onConfirmGenerateImage, onCancelAction: () => onCancel("generate-image-dialog") }),
+    /* @__PURE__ */ jsxs(Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: formatMessage({ id: getTranslation("plugin.name") }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "end", alignItems: "end", width: "100%", children: /* @__PURE__ */ jsx(LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini/generate-content", children: "Generar nuevo artículo" }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(
+        PublishingTable,
+        {
+          posts,
+          loadingImage,
+          loadingPublishLinkedIn: loadingPublishingToLinkedIn,
+          currentPost: currentPostRef,
+          onClickAction
+        }
+      ) })
+    ] })
+  ] });
+};
+const HomePage = () => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage({ id: getTranslation("plugin.name") }) }),
+    /* @__PURE__ */ jsx(HomeContainer, {})
+  ] }) });
+};
+const useCategories = () => {
+  const { get } = useFetchClient();
+  const getCategories = useCallback(
+    async (config) => {
+      return get("/strapi-content-generator-gemini/categories", config);
+    },
+    [get]
+  );
+  return {
+    getCategories
+  };
+};
+const useUsers = () => {
+  const { get } = useFetchClient();
+  const getUsers = useCallback(
+    async (config) => {
+      return get("/strapi-content-generator-gemini/users", config);
+    },
+    [get]
+  );
+  return {
+    getUsers
+  };
+};
+const validationSchema = Yup.object().shape({
+  titulo: Yup.string().notRequired(),
+  autor: Yup.string().required("Este campo es obligatorio"),
+  categoria: Yup.string().required("Este campo es obligatorio"),
+  keywords: Yup.string().notRequired(),
+  instrucciones: Yup.string().notRequired()
+});
+const initialValues = {
+  titulo: "",
+  autor: "",
+  categoria: "",
+  keywords: "",
+  instrucciones: ""
+};
+const Form = ({ onSubmit, categorias, users }) => {
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit
+  });
+  const { values, errors, touched, isValid, dirty, isSubmitting, handleChange, setFieldValue, handleSubmit } = formik;
+  return /* @__PURE__ */ jsx(Box, { background: "neutral0", padding: 6, margin: 6, width: "100%", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxs(
+      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__ */ jsx(Field.Label, { children: "Título" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "titulo",
+              label: "Título",
+              placeholder: "Título sugerido para el blog",
+              onChange: handleChange,
+              type: "text",
+              value: values.titulo
+            }
+          ),
+          /* @__PURE__ */ jsx(Field.Error, {}),
+          /* @__PURE__ */ jsx(Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxs(
+      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__ */ jsx(Field.Label, { children: "Categoría" }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(ComboboxOption, { value: c.documentId, children: c.categoria }, c.documentId))
+            }
+          ),
+          /* @__PURE__ */ jsx(Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "autor",
+        error: touched.autor && errors.autor ? errors.autor : void 0,
+        width: "100%",
+        required: true,
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Autor" }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(ComboboxOption, { value: c.documentId, children: c.nombre_completo }, c.documentId))
+            }
+          ),
+          /* @__PURE__ */ jsx(Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "keywords",
+        error: touched.keywords && errors.keywords ? errors.keywords : void 0,
+        width: "100%",
+        hint: "Ej: Innovación, Desarrollo, AI",
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Palabras clave" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "keywords",
+              id: "keywords",
+              placeholder: "Palabras clave separadas por comas",
+              onChange: handleChange,
+              value: values.keywords
+            }
+          ),
+          /* @__PURE__ */ jsx(Field.Hint, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        id: "instrucciones",
+        error: touched.instrucciones && errors.instrucciones ? errors.instrucciones : void 0,
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Instrucciones adicionales" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              name: "instrucciones",
+              placeholder: "Escribe algunas instrucciones adicionales para el generador de contenido...",
+              onChange: handleChange,
+              value: values.instrucciones,
+              rows: 8
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Flex, { width: "100%", justifyContent: { initial: "end" }, alignItems: { initial: "end" }, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: !(isValid && dirty) || isSubmitting,
+        loading: isSubmitting,
+        type: "submit",
+        children: "Generar contenido"
+      }
+    ) }) })
+  ] }) }) });
+};
+const GenerateContentContainer = () => {
+  const [documentId, setDocumentId] = useState("");
+  const [categorias, setCategorias] = useState([]);
+  const [users, setUsers] = useState([]);
+  const { getCategories } = useCategories();
+  const { getUsers } = useUsers();
+  const navigate = useNavigate();
+  const { closeDialog: closeDialog2, openDialog: openDialog2 } = useDialog("generate-image-dialog");
+  const { generateContent, generateImage } = useGenerateContent();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const onSubmit = useCallback(
+    async (values, { setSubmitting }) => {
+      try {
+        const { data } = await generateContent(values);
+        setDocumentId(data.documentId);
+        openDialog2();
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: `${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: `${PLUGIN_ID}.config.load.error`,
+            defaultMessage: "Ocurrió un error al generar el artículo"
+          })
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [generateContent, openDialog2]
+  );
+  const goToArticle = useCallback(() => {
+    navigate(
+      `/content-manager/collection-types/api::articulo.articulo/${documentId}`
+    );
+  }, [navigate, documentId]);
+  const onConfirmGenerateImage = useCallback(
+    async (imageInstructions) => {
+      try {
+        await generateImage({
+          articleId: documentId,
+          imageInstructions
+        });
+        goToArticle();
+      } catch (err) {
+        console.error("Error generating image:", err);
+      } finally {
+        closeDialog2();
+      }
+    },
+    [generateImage, documentId, closeDialog2, goToArticle]
+  );
+  const onCancelGenerateImage = useCallback(() => {
+    closeDialog2();
+    goToArticle();
+  }, [closeDialog2, goToArticle]);
+  const fetchCategories = 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 = 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]);
+  useEffect(() => {
+    fetchCategories();
+    fetchUsers();
+  }, [fetchCategories]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GenerateImageDialog, { onCancelAction: onCancelGenerateImage, onConfirmAction: onConfirmGenerateImage }),
+    /* @__PURE__ */ jsxs(Grid.Root, { padding: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Generar nuevo artículo" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { m: 12, children: /* @__PURE__ */ jsx(Flex, { alignItems: "end", width: "100%", justifyContent: "end", children: /* @__PURE__ */ jsx(LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini", children: "Regresar" }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Form, { categorias, users, onSubmit }) })
+    ] })
+  ] });
+};
+const GenerateContent = () => {
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: "Generar nuevo artículo" }),
+    /* @__PURE__ */ jsx(GenerateContentContainer, {})
+  ] });
+};
+const App = () => {
+  const { allowedActions, isLoading } = useRBAC(pluginPermissions);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions: [...pluginPermissions.access], children: /* @__PURE__ */ jsx(DesignSystemProvider, { locale: "es-MX", children: /* @__PURE__ */ jsxs(Routes, { children: [
+    allowedActions.canAccess && /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
+    allowedActions.canAccess && /* @__PURE__ */ jsx(Route, { path: "/generate-content", element: /* @__PURE__ */ jsx(GenerateContent, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] }) }) });
+};
+export {
+  App
+};