@interware/content-generator 0.1.4 → 0.2.0

package/dist/_chunks/{App-Bt1yydY9.js → App-DCuBRwX8.js}

@@ -4,12 +4,12 @@ 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 index = require("./index-BVGbP3E-.js");
 const reactIntl = require("react-intl");
 const react = require("react");
 const reactRedux = require("react-redux");
-const index = require("./index-JZA3FSFH.js");
 const icons = require("@strapi/icons");
-const getTranslation = require("./getTranslation-DA3AxQPb.js");
+const getTranslation = require("./getTranslation-CacX7ZX5.js");
 const formik = require("formik");
 const Yup = require("yup");
 function _interopNamespace(e) {
@@ -30,6 +30,51 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const Yup__namespace = /* @__PURE__ */ _interopNamespace(Yup);
+const links = [
+  {
+    label: "Generador de contenido con IA",
+    required: "access",
+    subLinks: [
+      {
+        id: 1,
+        label: "Generador de contenido",
+        to: "/admin/plugins/strapi-content-generator-gemini",
+        required: "access"
+      },
+      {
+        id: 2,
+        label: "Generador de imágenes",
+        to: "/admin/plugins/strapi-content-generator-gemini/generate-images",
+        required: "access"
+      }
+    ]
+  }
+];
+const Navigation = () => {
+  const location = reactRouterDom.useLocation();
+  const { allowedActions, isLoading } = admin.useRBAC(index.pluginPermissions);
+  if (isLoading) return null;
+  const canAccess = (required) => {
+    if (!required) return true;
+    if (required === "access") return allowedActions.canAccess;
+    return false;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SubNav, { "aria-label": "Generador de contenido SubNav", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavHeader, { label: "MKT" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavSections, { children: links.filter((section) => canAccess(section.required)).map(({ label, subLinks }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavSection, { label, children: subLinks.filter((subLink) => canAccess(subLink.required)).map((subLink) => {
+      const active = location.pathname === subLink.to.replace(/^\/admin/, "");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.SubNavLink,
+        {
+          href: subLink.to,
+          active,
+          children: subLink.label
+        },
+        subLink.id
+      );
+    }) }, label)) })
+  ] });
+};
 const useDialog = (id) => {
   const dispatch = reactRedux.useDispatch();
   const state = reactRedux.useSelector((state2) => state2.content_generator_commonDialog.open[id] ?? false);
@@ -113,11 +158,24 @@ const usePublishLinkedIn = () => {
     publishToLinkedIn
   };
 };
+const usePublishFacebook = () => {
+  const { post } = admin.useFetchClient();
+  const publishToFacebook = react.useCallback(
+    async (data, config) => {
+      return post("/strapi-content-generator-gemini/publish-facebook", data, config);
+    },
+    [post]
+  );
+  return {
+    publishToFacebook
+  };
+};
 const PublishingTableComponent = ({
   posts,
   currentPost,
   loadingImage,
   loadingPublishLinkedIn,
+  loadingPublishingToFacebook,
   onClickAction
 }) => {
   const rows = react.useMemo(() => {
@@ -132,8 +190,8 @@ const PublishingTableComponent = ({
         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,
+        linkedInURL: post.linkedInPostId ? `https://www.linkedin.com/feed/update/${post.linkedInPostId}` : "",
+        facebookURL: post.facebookPostId ? `https://www.facebook.com/${post.facebookPostId}` : "",
         hasImage: Boolean(post.image)
       };
     });
@@ -142,29 +200,60 @@ const PublishingTableComponent = ({
     /* @__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, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fa-brands fa-facebook" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Facebook" })
+      ] }) }),
       /* @__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;
+      const buttonLoadingImage = (loadingImage && currentPost.current) === row.id;
+      const buttonLoadingPublishingLinkedIn = (loadingPublishLinkedIn && currentPost.current) === row.id;
+      const buttonLoadingPublishingFacebook = (loadingPublishingToFacebook && 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(
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: !row.linkedInURL ? /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Button,
           {
             disabled: row.linkedInURL,
             onClick: () => onClickAction(row.id, "publish-to-linked-in-dialog"),
-            loading: buttonLoadingPublishingLinkediN,
+            loading: buttonLoadingPublishingLinkedIn,
             startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
-            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: buttonLoadingImage ? "publicando" : "publicar" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: buttonLoadingPublishingLinkedIn ? "publicando" : "publicar" })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.LinkButton,
+          {
+            variant: "success-light",
+            href: row.linkedInURL,
+            isExternal: true,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
+            children: "visitar"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: !row.facebookURL ? /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            disabled: row.facebookURL,
+            onClick: () => onClickAction(row.id, "publish-to-facebook-dialog"),
+            loading: buttonLoadingPublishingFacebook,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
+            children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: buttonLoadingPublishingFacebook ? "publicando" : "publicar" })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.LinkButton,
+          {
+            variant: "success-light",
+            href: row.facebookURL,
+            isExternal: true,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
+            children: "visitar"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -258,13 +347,16 @@ const HomeContainer = () => {
   const [posts, setPosts] = react.useState([]);
   const [loadingImage, setIsLoadingImage] = react.useState(false);
   const [loadingPublishingToLinkedIn, setIsLoadingPublishingToLinkedIn] = react.useState(false);
+  const [loadingPublishingToFacebook, setIsLoadingPublishingToFacebook] = 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 { openDialog: openPublishToFacebookDialog, closeDialog: closePublishToFacebookDialog } = useDialog("publish-to-facebook-dialog");
   const { getArticles } = useArticles();
   const { generateImage } = useGenerateContent();
   const { publishToLinkedIn } = usePublishLinkedIn();
+  const { publishToFacebook } = usePublishFacebook();
   const { toggleNotification } = admin.useNotification();
   const fetchPosts = react.useCallback(async () => {
     let isMounted = true;
@@ -322,33 +414,65 @@ const HomeContainer = () => {
     },
     [generateImage, closeImageGenerateDialog, setIsLoadingImage]
   );
-  const onConfirmPublishToLinedIn = react.useCallback(
-    async () => {
-      closePublishToLinkedInDialog();
-      setIsLoadingPublishingToLinkedIn(true);
+  const onConfirmPublish = react.useCallback(
+    async (type) => {
+      const isLinkedIn = type === "linkedin";
+      const isFacebook = type === "facebook";
+      if (isLinkedIn) {
+        closePublishToLinkedInDialog();
+        setIsLoadingPublishingToLinkedIn(true);
+      }
+      if (isFacebook) {
+        closePublishToFacebookDialog();
+        setIsLoadingPublishingToFacebook(true);
+      }
       try {
-        await publishToLinkedIn({ articleId: currentPostRef.current });
+        switch (type) {
+          case "linkedin":
+            await publishToLinkedIn({ articleId: currentPostRef.current });
+            break;
+          case "facebook":
+            await publishToFacebook({ articleId: currentPostRef.current });
+            break;
+          default:
+            return;
+        }
         fetchPosts();
         toggleNotification({
           type: "success",
           message: formatMessage({
-            id: `${index.PLUGIN_ID}.config.load.error`,
-            defaultMessage: "Artículo publicado en LinkedIn con éxito"
+            id: `${index.PLUGIN_ID}.config.publish.success.${type}`,
+            defaultMessage: type === "linkedin" ? "Artículo publicado en LinkedIn con éxito" : "Artículo publicado en Facebook 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"
+            id: `${index.PLUGIN_ID}.config.publish.error.${type}`,
+            defaultMessage: type === "linkedin" ? "Ocurrió un error al publicar el artículo en LinkedIn" : "Ocurrió un error al publicar el artículo en Facebook"
           })
         });
       } finally {
-        setIsLoadingPublishingToLinkedIn(false);
+        if (isLinkedIn) {
+          setIsLoadingPublishingToLinkedIn(false);
+        }
+        if (isFacebook) {
+          setIsLoadingPublishingToFacebook(false);
+        }
       }
     },
-    [publishToLinkedIn, closeImageGenerateDialog, setIsLoadingPublishingToLinkedIn]
+    [
+      publishToLinkedIn,
+      publishToFacebook,
+      closePublishToLinkedInDialog,
+      closePublishToFacebookDialog,
+      setIsLoadingPublishingToLinkedIn,
+      setIsLoadingPublishingToFacebook,
+      fetchPosts,
+      toggleNotification,
+      formatMessage
+    ]
   );
   const onCancel = react.useCallback((dialogId) => {
     currentPostRef.current = "";
@@ -359,10 +483,13 @@ const HomeContainer = () => {
       case "publish-to-linked-in-dialog":
         closePublishToLinkedInDialog();
         break;
+      case "publish-to-facebook-dialog":
+        closePublishToFacebookDialog();
+        break;
       default:
         return;
     }
-  }, [closeImageGenerateDialog, closePublishToLinkedInDialog]);
+  }, [closeImageGenerateDialog, closePublishToLinkedInDialog, closePublishToFacebookDialog]);
   const onClickAction = react.useCallback(
     (postId, dialogId) => {
       currentPostRef.current = postId;
@@ -373,9 +500,12 @@ const HomeContainer = () => {
         case "publish-to-linked-in-dialog":
           openPublishToLinkedInDialog();
           break;
+        case "publish-to-facebook-dialog":
+          openPublishToFacebookDialog();
+          break;
       }
     },
-    [openImageGenerateDialog, openPublishToLinkedInDialog]
+    [openImageGenerateDialog, openPublishToLinkedInDialog, openPublishToFacebookDialog]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -385,13 +515,27 @@ const HomeContainer = () => {
         title: "Publicar en LinkedIn",
         confirmText: "Publicar",
         onCancelAction: () => onCancel("publish-to-linked-in-dialog"),
-        onConfirmAction: onConfirmPublishToLinedIn,
+        onConfirmAction: () => onConfirmPublish("linkedin"),
         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(
+      DialogCommon,
+      {
+        id: "publish-to-facebook-dialog",
+        title: "Publicar en Facebook",
+        confirmText: "Publicar",
+        onCancelAction: () => onCancel("publish-to-facebook-dialog"),
+        onConfirmAction: () => onConfirmPublish("facebook"),
+        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 Facebook?" }),
+          /* @__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: [
@@ -405,6 +549,7 @@ const HomeContainer = () => {
           posts,
           loadingImage,
           loadingPublishLinkedIn: loadingPublishingToLinkedIn,
+          loadingPublishingToFacebook,
           currentPost: currentPostRef,
           onClickAction
         }
@@ -447,14 +592,14 @@ 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(),
+  temperatura: Yup__namespace.string().notRequired(),
   instrucciones: Yup__namespace.string().notRequired()
 });
 const initialValues = {
   titulo: "",
   autor: "",
   categoria: "",
-  keywords: "",
+  temperatura: "0.2",
   instrucciones: ""
 };
 const Form = ({ onSubmit, categorias, users }) => {
@@ -545,25 +690,30 @@ const Form = ({ onSubmit, categorias, users }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(
       designSystem.Field.Root,
       {
-        id: "keywords",
-        error: touched.keywords && errors.keywords ? errors.keywords : void 0,
+        id: "temperatura",
+        error: touched.temperatura && errors.temperatura ? errors.temperatura : 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.Label, { children: "Temperatura" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                name: "temperatura",
+                value: values.temperatura,
+                type: "range",
+                min: "0",
+                max: "2",
+                step: "0.05",
+                onChange: handleChange,
+                style: { width: "100%" }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100px", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Input, { value: values.temperatura, readOnly: true }) })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
         ]
       }
@@ -583,7 +733,8 @@ const Form = ({ onSubmit, categorias, users }) => {
               placeholder: "Escribe algunas instrucciones adicionales para el generador de contenido...",
               onChange: handleChange,
               value: values.instrucciones,
-              rows: 8
+              resizable: false,
+              rows: 10
             }
           )
         ]
@@ -722,15 +873,361 @@ const GenerateContent = () => {
     /* @__PURE__ */ jsxRuntime.jsx(GenerateContentContainer, {})
   ] });
 };
+const useImages$1 = () => {
+  const { get, del } = admin.useFetchClient();
+  const getImages = react.useCallback(
+    async () => {
+      return await get("/strapi-content-generator-gemini/images");
+    },
+    [get]
+  );
+  const deleteImage = react.useCallback(
+    async (config) => {
+      return await del("/strapi-content-generator-gemini/delete-image", config);
+    },
+    [del]
+  );
+  return {
+    getImages,
+    deleteImage
+  };
+};
+const PRINCIPAL_KEY = "principal";
+const ModalImagesSizes = ({
+  open,
+  setOpen,
+  image,
+  handleDownload
+}) => {
+  const [selectedImages, setSelectedImages] = react.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const formats = react.useMemo(
+    () => Object.entries(image?.formats ?? {}),
+    [image?.formats]
+  );
+  const toggleImageSelection = react.useCallback((key) => {
+    setSelectedImages((prev) => {
+      const next = new Set(prev);
+      next.has(key) ? next.delete(key) : next.add(key);
+      return next;
+    });
+  }, []);
+  const isPrincipalSelected = react.useMemo(
+    () => selectedImages.has(PRINCIPAL_KEY),
+    [selectedImages]
+  );
+  const isDownloadDisabled = react.useMemo(
+    () => selectedImages.size === 0,
+    [selectedImages]
+  );
+  const handleClose = react.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  react.useEffect(() => {
+    if (!open) {
+      setSelectedImages(/* @__PURE__ */ new Set());
+    }
+  }, [open]);
+  if (!image) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Modal.Root,
+    {
+      id: "modal-image-formats",
+      open,
+      onOpenChange: handleClose,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Descargar imágenes" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Card,
+            {
+              id: "modal-principal",
+              onClick: () => toggleImageSelection(PRINCIPAL_KEY),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: isPrincipalSelected }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: image.url })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: "Principal" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: `${image.width}x${image.height}` })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: image.mime })
+                ] })
+              ]
+            }
+          ) }),
+          formats.map(([format, img]) => {
+            const isSelected = selectedImages.has(format);
+            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Card,
+              {
+                id: `modal-${format}`,
+                onClick: () => toggleImageSelection(format),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: isSelected }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: img.url })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: format }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: `${img.width}x${img.height}` })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: image.mime })
+                  ] })
+                ]
+              }
+            ) }, format);
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClose, children: "Cancelar" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              disabled: isDownloadDisabled,
+              onClick: () => {
+                handleDownload(selectedImages);
+              },
+              children: "Descargar"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const ImagesContext = react.createContext(void 0);
+const ImagesProvider = ({ children }) => {
+  const { getImages, deleteImage } = useImages$1();
+  const { openDialog, closeDialog } = useDialog("dialog-delete-image");
+  const { formatMessage } = reactIntl.useIntl();
+  const { toggleNotification } = admin.useNotification();
+  const [images, setImages] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [open, setOpen] = react.useState(false);
+  const currentImageRef = react.useRef();
+  const fetchImages = react.useCallback(async () => {
+    let isMounted = true;
+    try {
+      const { data } = await getImages();
+      if (isMounted) {
+        setImages(data);
+      }
+    } catch (error) {
+      console.error("Error fetching images:", error);
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [getImages]);
+  const handleDeleteImage = async () => {
+    closeDialog();
+    try {
+      await deleteImage({ params: { documentId: currentImageRef.current?.documentId } });
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Imagen eliminada con éxito"
+        })
+      });
+      fetchImages();
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al eliminar la imagen"
+        })
+      });
+    }
+  };
+  const onCancelAction = react.useCallback((action) => {
+    switch (action) {
+      case "delete":
+        closeDialog();
+        break;
+      case "download":
+        setOpen(false);
+        break;
+      default:
+        return;
+    }
+    currentImageRef.current = void 0;
+    closeDialog();
+  }, [openDialog]);
+  const onClickAction = react.useCallback((image, action) => {
+    currentImageRef.current = image;
+    switch (action) {
+      case "delete":
+        openDialog();
+        break;
+      case "download":
+        setOpen(true);
+        break;
+      default:
+        return;
+    }
+  }, [openDialog, setOpen]);
+  const downloadImage = async (url, filename) => {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const objectUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = objectUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(objectUrl);
+  };
+  const handleDownload = async (selectedKeys) => {
+    const image = currentImageRef.current;
+    if (!image) return;
+    setOpen(false);
+    const keys = Array.isArray(selectedKeys) ? selectedKeys : Array.from(selectedKeys);
+    const extension = image.ext?.replace(".", "") ?? "jpg";
+    const formats = image.formats;
+    const items = keys.map((key) => {
+      if (key === "principal") {
+        return {
+          url: image.url,
+          filename: `image-principal-${image.documentId}.${extension}`
+        };
+      }
+      const formatImage = formats?.[key];
+      if (!formatImage) return null;
+      return {
+        url: formatImage.url,
+        filename: `image-${key}-${image.documentId}.${extension}`
+      };
+    }).filter(Boolean);
+    for (const item of items) {
+      await downloadImage(item.url, item.filename);
+    }
+  };
+  react.useEffect(() => {
+    fetchImages();
+  }, [fetchImages]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    currentImageRef.current && /* @__PURE__ */ jsxRuntime.jsx(
+      ModalImagesSizes,
+      {
+        open,
+        setOpen,
+        image: currentImageRef.current,
+        handleDownload
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogCommon,
+      {
+        title: "Eliminar imagen",
+        id: "dialog-delete-image",
+        onConfirmAction: handleDeleteImage,
+        onCancelAction: () => onCancelAction("delete"),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "¿Seguro que deseas eliminar esta imagen?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Esta acción es irreversible" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ImagesContext.Provider, { value: { images, onClickAction }, children })
+  ] });
+};
+const useImages = () => {
+  const context = react.useContext(ImagesContext);
+  if (!context) {
+    throw new Error("useImages must be used within an ImagesProvider");
+  }
+  return context;
+};
+const Image = ({ image }) => {
+  const { onClickAction } = useImages();
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Card, { id: image.id, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardAction, { position: "end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.IconButton,
+          {
+            label: "Descargar",
+            onClick: () => {
+              onClickAction(image, "download");
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Download, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.IconButton,
+          {
+            label: "Eliminar",
+            onClick: () => {
+              onClickAction(image, "delete");
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: image.url, style: { borderTopLeftRadius: "4px", borderTopRightRadius: "4px" } })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: `${image.caption?.replace("generada por IA", "").slice(0, 80)}...` }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: `${image.width}X${image.height}` })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: image.mime })
+    ] })
+  ] });
+};
+const Images = () => {
+  const { images } = useImages();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, margin: 6, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: images.map((image) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Image, { image }) }, image.id);
+  }) }) });
+};
+const GenerateImagesContainer = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ImagesProvider, { children: /* @__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 imagenes con IA" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Images, {}) })
+  ] }) }) });
+};
+const GenerateImages = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar imagenes con IA" }),
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateImagesContainer, {})
+  ] });
+};
 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, {}) })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: [...index.pluginPermissions.access], children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { locale: "es-MX", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr",
+        width: "100%",
+        height: "100vh"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Navigation, {}),
+        /* @__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, {}) }),
+          allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-images", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateImages, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+        ] })
+      ] })
+    }
+  ) }) }) });
 };
 exports.App = App;