@interware/content-generator 0.1.3 → 0.2.0

package/dist/_chunks/{App-BO5dp398.mjs → App-Cbkccs2K.mjs}

@@ -1,15 +1,60 @@
-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 { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRBAC, useFetchClient, useNotification, Page } from "@strapi/strapi/admin";
+import { SubNav, SubNavHeader, SubNavSections, SubNavSection, SubNavLink, Box, Table, Thead, Tr, Th, Typography, Flex, Tbody, Td, Button, LinkButton, Dialog, Grid, Field, Textarea, TextInput, Combobox, ComboboxOption, Modal, Card, CardHeader, CardCheckbox, CardAsset, CardBody, CardContent, CardTitle, CardSubtitle, CardBadge, CardAction, IconButton, DesignSystemProvider } from "@strapi/design-system";
+import { useLocation, useNavigate, Routes, Route } from "react-router-dom";
+import { p as pluginPermissions, c as closeDialog, o as openDialog, P as PLUGIN_ID } from "./index-B2RuvYul.mjs";
 import { useIntl } from "react-intl";
-import { useCallback, memo, useMemo, useState, useRef, useEffect } from "react";
+import { useCallback, memo, useMemo, useState, useRef, useEffect, createContext, useContext } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { c as closeDialog, o as openDialog, P as PLUGIN_ID, p as pluginPermissions } from "./index-CMQYbwsn.mjs";
-import { Play, Image } from "@strapi/icons";
-import { g as getTranslation } from "./getTranslation-CIMKEgGr.mjs";
+import { Play, ExternalLink, Image as Image$1, Download, Trash } from "@strapi/icons";
+import { g as getTranslation } from "./getTranslation-B97xbmEl.mjs";
 import { useFormik } from "formik";
 import * as Yup from "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 = useLocation();
+  const { allowedActions, isLoading } = useRBAC(pluginPermissions);
+  if (isLoading) return null;
+  const canAccess = (required) => {
+    if (!required) return true;
+    if (required === "access") return allowedActions.canAccess;
+    return false;
+  };
+  return /* @__PURE__ */ jsxs(SubNav, { "aria-label": "Generador de contenido SubNav", children: [
+    /* @__PURE__ */ jsx(SubNavHeader, { label: "MKT" }),
+    /* @__PURE__ */ jsx(SubNavSections, { children: links.filter((section) => canAccess(section.required)).map(({ label, subLinks }) => /* @__PURE__ */ jsx(SubNavSection, { label, children: subLinks.filter((subLink) => canAccess(subLink.required)).map((subLink) => {
+      const active = location.pathname === subLink.to.replace(/^\/admin/, "");
+      return /* @__PURE__ */ jsx(
+        SubNavLink,
+        {
+          href: subLink.to,
+          active,
+          children: subLink.label
+        },
+        subLink.id
+      );
+    }) }, label)) })
+  ] });
+};
 const useDialog = (id) => {
   const dispatch = useDispatch();
   const state = useSelector((state2) => state2.content_generator_commonDialog.open[id] ?? false);
@@ -31,17 +76,48 @@ const useArticles = () => {
     getArticles
   };
 };
+const REQUEST_TIMEOUT = 12e4;
 const useGenerateContent = () => {
   const { post } = useFetchClient();
   const generateContent = useCallback(
     async (data, config) => {
-      return post("/strapi-content-generator-gemini/generate-article", data, config);
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => {
+        controller.abort();
+      }, REQUEST_TIMEOUT);
+      try {
+        return await post(
+          "/strapi-content-generator-gemini/generate-article",
+          data,
+          {
+            ...config,
+            signal: controller.signal
+          }
+        );
+      } finally {
+        clearTimeout(timeoutId);
+      }
     },
     [post]
   );
   const generateImage = useCallback(
     async (data, config) => {
-      return post("/strapi-content-generator-gemini/generate-image", data, config);
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => {
+        controller.abort();
+      }, REQUEST_TIMEOUT);
+      try {
+        return await post(
+          "/strapi-content-generator-gemini/generate-image",
+          data,
+          {
+            ...config,
+            signal: controller.signal
+          }
+        );
+      } finally {
+        clearTimeout(timeoutId);
+      }
     },
     [post]
   );
@@ -62,11 +138,24 @@ const usePublishLinkedIn = () => {
     publishToLinkedIn
   };
 };
+const usePublishFacebook = () => {
+  const { post } = useFetchClient();
+  const publishToFacebook = 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 = useMemo(() => {
@@ -81,8 +170,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)
       };
     });
@@ -91,29 +180,60 @@ const PublishingTableComponent = ({
     /* @__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, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx("i", { className: "fa-brands fa-facebook" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Facebook" })
+      ] }) }),
       /* @__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;
+      const buttonLoadingImage = (loadingImage && currentPost.current) === row.id;
+      const buttonLoadingPublishingLinkedIn = (loadingPublishLinkedIn && currentPost.current) === row.id;
+      const buttonLoadingPublishingFacebook = (loadingPublishingToFacebook && 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(
+        /* @__PURE__ */ jsx(Td, { children: !row.linkedInURL ? /* @__PURE__ */ jsx(
           Button,
           {
             disabled: row.linkedInURL,
             onClick: () => onClickAction(row.id, "publish-to-linked-in-dialog"),
-            loading: buttonLoadingPublishingLinkediN,
+            loading: buttonLoadingPublishingLinkedIn,
+            startIcon: /* @__PURE__ */ jsx(Play, {}),
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: buttonLoadingPublishingLinkedIn ? "publicando" : "publicar" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            variant: "success-light",
+            href: row.linkedInURL,
+            isExternal: true,
+            startIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
+            children: "visitar"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Td, { children: !row.facebookURL ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: row.facebookURL,
+            onClick: () => onClickAction(row.id, "publish-to-facebook-dialog"),
+            loading: buttonLoadingPublishingFacebook,
             startIcon: /* @__PURE__ */ jsx(Play, {}),
-            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: buttonLoadingImage ? "publicando" : "publicar" })
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: buttonLoadingPublishingFacebook ? "publicando" : "publicar" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            variant: "success-light",
+            href: row.facebookURL,
+            isExternal: true,
+            startIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
+            children: "visitar"
           }
         ) }),
         /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
@@ -122,7 +242,7 @@ const PublishingTableComponent = ({
             disabled: row.hasImage,
             onClick: () => onClickAction(row.id, "generate-image-dialog"),
             loading: buttonLoadingImage,
-            startIcon: /* @__PURE__ */ jsx(Image, {}),
+            startIcon: /* @__PURE__ */ jsx(Image$1, {}),
             children: /* @__PURE__ */ jsx(Typography, { variant: "pi", children: buttonLoadingImage ? "generando" : "generar" })
           }
         ) }),
@@ -207,13 +327,16 @@ const HomeContainer = () => {
   const [posts, setPosts] = useState([]);
   const [loadingImage, setIsLoadingImage] = useState(false);
   const [loadingPublishingToLinkedIn, setIsLoadingPublishingToLinkedIn] = useState(false);
+  const [loadingPublishingToFacebook, setIsLoadingPublishingToFacebook] = 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 { openDialog: openPublishToFacebookDialog, closeDialog: closePublishToFacebookDialog } = useDialog("publish-to-facebook-dialog");
   const { getArticles } = useArticles();
   const { generateImage } = useGenerateContent();
   const { publishToLinkedIn } = usePublishLinkedIn();
+  const { publishToFacebook } = usePublishFacebook();
   const { toggleNotification } = useNotification();
   const fetchPosts = useCallback(async () => {
     let isMounted = true;
@@ -271,33 +394,65 @@ const HomeContainer = () => {
     },
     [generateImage, closeImageGenerateDialog, setIsLoadingImage]
   );
-  const onConfirmPublishToLinedIn = useCallback(
-    async () => {
-      closePublishToLinkedInDialog();
-      setIsLoadingPublishingToLinkedIn(true);
+  const onConfirmPublish = 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: `${PLUGIN_ID}.config.load.error`,
-            defaultMessage: "Artículo publicado en LinkedIn con éxito"
+            id: `${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: `${PLUGIN_ID}.config.load.error`,
-            defaultMessage: "Ocurrió un error al publicar el artículo en LinkedIn"
+            id: `${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 = useCallback((dialogId) => {
     currentPostRef.current = "";
@@ -308,10 +463,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 = useCallback(
     (postId, dialogId) => {
       currentPostRef.current = postId;
@@ -322,9 +480,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -334,13 +495,27 @@ const HomeContainer = () => {
         title: "Publicar en LinkedIn",
         confirmText: "Publicar",
         onCancelAction: () => onCancel("publish-to-linked-in-dialog"),
-        onConfirmAction: onConfirmPublishToLinedIn,
+        onConfirmAction: () => onConfirmPublish("linkedin"),
         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(
+      DialogCommon,
+      {
+        id: "publish-to-facebook-dialog",
+        title: "Publicar en Facebook",
+        confirmText: "Publicar",
+        onCancelAction: () => onCancel("publish-to-facebook-dialog"),
+        onConfirmAction: () => onConfirmPublish("facebook"),
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: "¿Seguro que deseas publicar este artículo en Facebook?" }),
+          /* @__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: [
@@ -354,6 +529,7 @@ const HomeContainer = () => {
           posts,
           loadingImage,
           loadingPublishLinkedIn: loadingPublishingToLinkedIn,
+          loadingPublishingToFacebook,
           currentPost: currentPostRef,
           onClickAction
         }
@@ -396,14 +572,14 @@ 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(),
+  temperatura: Yup.string().notRequired(),
   instrucciones: Yup.string().notRequired()
 });
 const initialValues = {
   titulo: "",
   autor: "",
   categoria: "",
-  keywords: "",
+  temperatura: "0.2",
   instrucciones: ""
 };
 const Form = ({ onSubmit, categorias, users }) => {
@@ -494,25 +670,30 @@ const Form = ({ onSubmit, categorias, users }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, s: 12, m: 6, children: /* @__PURE__ */ jsxs(
       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__ */ 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.Label, { children: "Temperatura" }),
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+            /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                name: "temperatura",
+                value: values.temperatura,
+                type: "range",
+                min: "0",
+                max: "2",
+                step: "0.05",
+                onChange: handleChange,
+                style: { width: "100%" }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Box, { width: "100px", children: /* @__PURE__ */ jsx(Field.Input, { value: values.temperatura, readOnly: true }) })
+          ] }),
           /* @__PURE__ */ jsx(Field.Hint, {})
         ]
       }
@@ -532,7 +713,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
             }
           )
         ]
@@ -639,7 +821,6 @@ const GenerateContentContainer = () => {
           }
         }
       });
-      console.log("🚀 ~ GenerateContentContainer ~ data:", data.length);
       if (isMounted) {
         setUsers(data);
       }
@@ -672,16 +853,362 @@ const GenerateContent = () => {
     /* @__PURE__ */ jsx(GenerateContentContainer, {})
   ] });
 };
+const useImages$1 = () => {
+  const { get, del } = useFetchClient();
+  const getImages = useCallback(
+    async () => {
+      return await get("/strapi-content-generator-gemini/images");
+    },
+    [get]
+  );
+  const deleteImage = 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] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const formats = useMemo(
+    () => Object.entries(image?.formats ?? {}),
+    [image?.formats]
+  );
+  const toggleImageSelection = useCallback((key) => {
+    setSelectedImages((prev) => {
+      const next = new Set(prev);
+      next.has(key) ? next.delete(key) : next.add(key);
+      return next;
+    });
+  }, []);
+  const isPrincipalSelected = useMemo(
+    () => selectedImages.has(PRINCIPAL_KEY),
+    [selectedImages]
+  );
+  const isDownloadDisabled = useMemo(
+    () => selectedImages.size === 0,
+    [selectedImages]
+  );
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  useEffect(() => {
+    if (!open) {
+      setSelectedImages(/* @__PURE__ */ new Set());
+    }
+  }, [open]);
+  if (!image) return null;
+  return /* @__PURE__ */ jsx(
+    Modal.Root,
+    {
+      id: "modal-image-formats",
+      open,
+      onOpenChange: handleClose,
+      children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+        /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Descargar imágenes" }) }),
+        /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { m: 3, children: /* @__PURE__ */ jsxs(
+            Card,
+            {
+              id: "modal-principal",
+              onClick: () => toggleImageSelection(PRINCIPAL_KEY),
+              children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardCheckbox, { checked: isPrincipalSelected }),
+                  /* @__PURE__ */ jsx(CardAsset, { src: image.url })
+                ] }),
+                /* @__PURE__ */ jsxs(CardBody, { children: [
+                  /* @__PURE__ */ jsxs(CardContent, { children: [
+                    /* @__PURE__ */ jsx(CardTitle, { children: "Principal" }),
+                    /* @__PURE__ */ jsx(CardSubtitle, { children: `${image.width}x${image.height}` })
+                  ] }),
+                  /* @__PURE__ */ jsx(CardBadge, { children: image.mime })
+                ] })
+              ]
+            }
+          ) }),
+          formats.map(([format, img]) => {
+            const isSelected = selectedImages.has(format);
+            return /* @__PURE__ */ jsx(Grid.Item, { m: 3, children: /* @__PURE__ */ jsxs(
+              Card,
+              {
+                id: `modal-${format}`,
+                onClick: () => toggleImageSelection(format),
+                children: [
+                  /* @__PURE__ */ jsxs(CardHeader, { children: [
+                    /* @__PURE__ */ jsx(CardCheckbox, { checked: isSelected }),
+                    /* @__PURE__ */ jsx(CardAsset, { src: img.url })
+                  ] }),
+                  /* @__PURE__ */ jsxs(CardBody, { children: [
+                    /* @__PURE__ */ jsxs(CardContent, { children: [
+                      /* @__PURE__ */ jsx(CardTitle, { children: format }),
+                      /* @__PURE__ */ jsx(CardSubtitle, { children: `${img.width}x${img.height}` })
+                    ] }),
+                    /* @__PURE__ */ jsx(CardBadge, { children: image.mime })
+                  ] })
+                ]
+              }
+            ) }, format);
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+          /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleClose, children: "Cancelar" }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: isDownloadDisabled,
+              onClick: () => {
+                handleDownload(selectedImages);
+              },
+              children: "Descargar"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const ImagesContext = createContext(void 0);
+const ImagesProvider = ({ children }) => {
+  const { getImages, deleteImage } = useImages$1();
+  const { openDialog: openDialog2, closeDialog: closeDialog2 } = useDialog("dialog-delete-image");
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const [images, setImages] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const currentImageRef = useRef();
+  const fetchImages = 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 () => {
+    closeDialog2();
+    try {
+      await deleteImage({ params: { documentId: currentImageRef.current?.documentId } });
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Imagen eliminada con éxito"
+        })
+      });
+      fetchImages();
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al eliminar la imagen"
+        })
+      });
+    }
+  };
+  const onCancelAction = useCallback((action) => {
+    switch (action) {
+      case "delete":
+        closeDialog2();
+        break;
+      case "download":
+        setOpen(false);
+        break;
+      default:
+        return;
+    }
+    currentImageRef.current = void 0;
+    closeDialog2();
+  }, [openDialog2]);
+  const onClickAction = useCallback((image, action) => {
+    currentImageRef.current = image;
+    switch (action) {
+      case "delete":
+        openDialog2();
+        break;
+      case "download":
+        setOpen(true);
+        break;
+      default:
+        return;
+    }
+  }, [openDialog2, 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);
+    }
+  };
+  useEffect(() => {
+    fetchImages();
+  }, [fetchImages]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    currentImageRef.current && /* @__PURE__ */ jsx(
+      ModalImagesSizes,
+      {
+        open,
+        setOpen,
+        image: currentImageRef.current,
+        handleDownload
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DialogCommon,
+      {
+        title: "Eliminar imagen",
+        id: "dialog-delete-image",
+        onConfirmAction: handleDeleteImage,
+        onCancelAction: () => onCancelAction("delete"),
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
+          /* @__PURE__ */ jsx(Typography, { children: "¿Seguro que deseas eliminar esta imagen?" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Esta acción es irreversible" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(ImagesContext.Provider, { value: { images, onClickAction }, children })
+  ] });
+};
+const useImages = () => {
+  const context = useContext(ImagesContext);
+  if (!context) {
+    throw new Error("useImages must be used within an ImagesProvider");
+  }
+  return context;
+};
+const Image = ({ image }) => {
+  const { onClickAction } = useImages();
+  return /* @__PURE__ */ jsxs(Card, { id: image.id, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs(CardAction, { position: "end", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Descargar",
+            onClick: () => {
+              onClickAction(image, "download");
+            },
+            children: /* @__PURE__ */ jsx(Download, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Eliminar",
+            onClick: () => {
+              onClickAction(image, "delete");
+            },
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(CardAsset, { src: image.url, style: { borderTopLeftRadius: "4px", borderTopRightRadius: "4px" } })
+    ] }),
+    /* @__PURE__ */ jsxs(CardBody, { children: [
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: `${image.caption?.replace("generada por IA", "").slice(0, 80)}...` }),
+        /* @__PURE__ */ jsx(CardSubtitle, { children: `${image.width}X${image.height}` })
+      ] }),
+      /* @__PURE__ */ jsx(CardBadge, { children: image.mime })
+    ] })
+  ] });
+};
+const Images = () => {
+  const { images } = useImages();
+  return /* @__PURE__ */ jsx(Box, { background: "neutral0", padding: 6, margin: 6, width: "100%", children: /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: images.map((image) => {
+    return /* @__PURE__ */ jsx(Grid.Item, { m: 3, children: /* @__PURE__ */ jsx(Image, { image }) }, image.id);
+  }) }) });
+};
+const GenerateImagesContainer = () => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ImagesProvider, { children: /* @__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 imagenes con IA" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Images, {}) })
+  ] }) }) });
+};
+const GenerateImages = () => {
+  return /* @__PURE__ */ jsxs(Page.Main, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: "Generar imagenes con IA" }),
+    /* @__PURE__ */ jsx(GenerateImagesContainer, {})
+  ] });
+};
 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, {}) })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions: [...pluginPermissions.access], children: /* @__PURE__ */ jsx(DesignSystemProvider, { locale: "es-MX", children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr",
+        width: "100%",
+        height: "100vh"
+      },
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Navigation, {}),
+        /* @__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, {}) }),
+          allowedActions.canAccess && /* @__PURE__ */ jsx(Route, { path: "/generate-images", element: /* @__PURE__ */ jsx(GenerateImages, {}) }),
+          /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+        ] })
+      ] })
+    }
+  ) }) }) });
 };
 export {
   App