@strapi/content-type-builder 5.25.0 → 5.27.0

package/dist/admin/components/AIChat/components/FullScreenImage.js

@@ -0,0 +1,190 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var styledComponents = require('styled-components');
+var animations = require('./animations.js');
+var Base64Image = require('./Base64Image.js');
+
+const FullScreenImageContext = /*#__PURE__*/ React.createContext(undefined);
+/* -------------------------------------------------------------------------------------------------
+ * Styles
+ * -----------------------------------------------------------------------------------------------*/ const setOpacity = (hex, alpha)=>`${hex}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
+const Overlay = styledComponents.styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
+  pointer-events: auto; /* Explicitly enable pointer events */
+  background: ${(props)=>setOpacity(props.theme.colors.neutral800, 0.2)};
+`;
+const ImageWrapper = styledComponents.styled.div`
+  max-width: 80vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto; /* Explicitly enable pointer events */
+  position: relative;
+  animation: ${animations.ANIMATIONS.scaleIn} 0.3s ease;
+`;
+const StyledImg = styledComponents.styled(Base64Image.Base64Img)`
+  max-width: 100%;
+  max-height: 90vh;
+  object-fit: contain;
+  pointer-events: auto; /* Explicitly enable pointer events */
+`;
+/* -------------------------------------------------------------------------------------------------
+ * Modal
+ * -----------------------------------------------------------------------------------------------*/ // Use the existing FullScreenImage as our modal component
+const ImageModal = ({ src, alt, onClose })=>{
+    const overlayRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    // Close on ESC key press
+    React.useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if (e.key === 'Escape') {
+                // Stop propagation to prevent closing parent modals
+                e.preventDefault();
+                e.stopPropagation();
+                onClose?.();
+                // The next 3 lines are critical: they completely stop the event
+                e.stopImmediatePropagation();
+                e.cancelBubble = true; // For older browsers
+                return false;
+            }
+        };
+        // Use capture phase to intercept event before it reaches other components
+        window.addEventListener('keydown', handleKeyDown, true);
+        return ()=>window.removeEventListener('keydown', handleKeyDown, true);
+    }, [
+        onClose
+    ]);
+    // Setup click handlers
+    React.useEffect(()=>{
+        const handleOverlayClick = (e)=>{
+            // Only close if clicking directly on the overlay (not its children)
+            if (e.target === overlayRef.current) {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose?.();
+            }
+        };
+        const handleWrapperClick = (e)=>{
+            // Stop propagation for clicks on the image wrapper
+            e.stopPropagation();
+        };
+        const overlay = overlayRef.current;
+        const wrapper = wrapperRef.current;
+        if (overlay) {
+            overlay.addEventListener('click', handleOverlayClick);
+        }
+        if (wrapper) {
+            wrapper.addEventListener('click', handleWrapperClick);
+        }
+        return ()=>{
+            if (overlay) {
+                overlay.removeEventListener('click', handleOverlayClick);
+            }
+            if (wrapper) {
+                wrapper.removeEventListener('click', handleWrapperClick);
+            }
+        };
+    }, [
+        onClose
+    ]);
+    // Using createPortal to render directly at document body level
+    return /*#__PURE__*/ reactDom.createPortal(/*#__PURE__*/ jsxRuntime.jsx(Overlay, {
+        ref: overlayRef,
+        children: /*#__PURE__*/ jsxRuntime.jsx(ImageWrapper, {
+            ref: wrapperRef,
+            children: /*#__PURE__*/ jsxRuntime.jsx(StyledImg, {
+                src: src,
+                alt: alt
+            })
+        })
+    }), document.body);
+};
+/* -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/ // Root component that provides context
+const Root = ({ children, src, alt, onClose, defaultOpen = false })=>{
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    const open = ()=>setIsOpen(true);
+    const close = ()=>{
+        setIsOpen(false);
+        onClose?.();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(FullScreenImageContext.Provider, {
+        value: {
+            isOpen,
+            open,
+            close,
+            src,
+            alt
+        },
+        children: [
+            children,
+            isOpen && /*#__PURE__*/ jsxRuntime.jsx(ImageModal, {
+                src: src,
+                alt: alt,
+                onClose: close
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Hooks
+ * -----------------------------------------------------------------------------------------------*/ // Hook to use the context
+const useFullScreenImage = ()=>{
+    const context = React.useContext(FullScreenImageContext);
+    if (!context) {
+        throw new Error('useFullScreenImage must be used within a FullScreenImage.Root');
+    }
+    return context;
+};
+/* -------------------------------------------------------------------------------------------------
+ * Trigger
+ * -----------------------------------------------------------------------------------------------*/ // Trigger component that opens the full screen image
+const Trigger = ({ children, asChild = false })=>{
+    const { open } = useFullScreenImage();
+    const handleClick = (e)=>{
+        e.stopPropagation();
+        open();
+    };
+    if (asChild) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            onClick: handleClick,
+            style: {
+                cursor: 'pointer',
+                display: 'contents'
+            },
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        onClick: handleClick,
+        style: {
+            cursor: 'pointer'
+        },
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Export
+ * -----------------------------------------------------------------------------------------------*/ const FullScreenImage = {
+    Root,
+    Trigger
+};
+
+exports.FullScreenImage = FullScreenImage;
+exports.setOpacity = setOpacity;
+//# sourceMappingURL=FullScreenImage.js.map

package/dist/admin/components/AIChat/components/FullScreenImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenImage.js","sources":["../../../../../admin/src/components/AIChat/components/FullScreenImage.tsx"],"sourcesContent":["import { useEffect, useRef, createContext, useContext, useState, ReactNode } from 'react';\n\nimport { createPortal } from 'react-dom';\nimport { styled } from 'styled-components';\n\nimport { ANIMATIONS } from './animations';\nimport { Base64Img } from './Base64Image';\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FullScreenImageContextType {\n  isOpen: boolean;\n  open: () => void;\n  close: () => void;\n  src: string;\n  alt: string;\n}\n\nconst FullScreenImageContext = createContext<FullScreenImageContextType | undefined>(undefined);\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FullScreenImageProps {\n  src: string;\n  alt: string;\n  onClose?: () => void;\n}\n\ninterface FullScreenImageRootProps extends FullScreenImageProps {\n  children: ReactNode;\n  defaultOpen?: boolean;\n}\n\ninterface FullScreenImageTriggerProps {\n  children: ReactNode;\n  asChild?: boolean;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Styles\n * -----------------------------------------------------------------------------------------------*/\nexport const setOpacity = (hex: string, alpha: number) =>\n  `${hex}${Math.floor(alpha * 255)\n    .toString(16)\n    .padStart(2, '0')}`;\n\nconst Overlay = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 500;\n  pointer-events: auto; /* Explicitly enable pointer events */\n  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};\n`;\n\nconst ImageWrapper = styled.div`\n  max-width: 80vw;\n  max-height: 90vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto; /* Explicitly enable pointer events */\n  position: relative;\n  animation: ${ANIMATIONS.scaleIn} 0.3s ease;\n`;\n\nconst StyledImg = styled(Base64Img)`\n  max-width: 100%;\n  max-height: 90vh;\n  object-fit: contain;\n  pointer-events: auto; /* Explicitly enable pointer events */\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Modal\n * -----------------------------------------------------------------------------------------------*/\n\n// Use the existing FullScreenImage as our modal component\nconst ImageModal = ({ src, alt, onClose }: FullScreenImageProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  // Close on ESC key press\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        // Stop propagation to prevent closing parent modals\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.();\n\n        // The next 3 lines are critical: they completely stop the event\n        e.stopImmediatePropagation();\n        e.cancelBubble = true; // For older browsers\n        return false;\n      }\n    };\n\n    // Use capture phase to intercept event before it reaches other components\n    window.addEventListener('keydown', handleKeyDown, true);\n    return () => window.removeEventListener('keydown', handleKeyDown, true);\n  }, [onClose]);\n\n  // Setup click handlers\n  useEffect(() => {\n    const handleOverlayClick = (e: MouseEvent) => {\n      // Only close if clicking directly on the overlay (not its children)\n      if (e.target === overlayRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.();\n      }\n    };\n\n    const handleWrapperClick = (e: MouseEvent) => {\n      // Stop propagation for clicks on the image wrapper\n      e.stopPropagation();\n    };\n\n    const overlay = overlayRef.current;\n    const wrapper = wrapperRef.current;\n\n    if (overlay) {\n      overlay.addEventListener('click', handleOverlayClick);\n    }\n\n    if (wrapper) {\n      wrapper.addEventListener('click', handleWrapperClick);\n    }\n\n    return () => {\n      if (overlay) {\n        overlay.removeEventListener('click', handleOverlayClick);\n      }\n\n      if (wrapper) {\n        wrapper.removeEventListener('click', handleWrapperClick);\n      }\n    };\n  }, [onClose]);\n\n  // Using createPortal to render directly at document body level\n  return createPortal(\n    <Overlay ref={overlayRef}>\n      <ImageWrapper ref={wrapperRef}>\n        <StyledImg src={src} alt={alt} />\n      </ImageWrapper>\n    </Overlay>,\n    document.body\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\n// Root component that provides context\nconst Root = ({ children, src, alt, onClose, defaultOpen = false }: FullScreenImageRootProps) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  const open = () => setIsOpen(true);\n  const close = () => {\n    setIsOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <FullScreenImageContext.Provider value={{ isOpen, open, close, src, alt }}>\n      {children}\n      {isOpen && <ImageModal src={src} alt={alt} onClose={close} />}\n    </FullScreenImageContext.Provider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hooks\n * -----------------------------------------------------------------------------------------------*/\n\n// Hook to use the context\nconst useFullScreenImage = () => {\n  const context = useContext(FullScreenImageContext);\n  if (!context) {\n    throw new Error('useFullScreenImage must be used within a FullScreenImage.Root');\n  }\n  return context;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Trigger\n * -----------------------------------------------------------------------------------------------*/\n\n// Trigger component that opens the full screen image\nconst Trigger = ({ children, asChild = false }: FullScreenImageTriggerProps) => {\n  const { open } = useFullScreenImage();\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    open();\n  };\n\n  if (asChild) {\n    return (\n      <div onClick={handleClick} style={{ cursor: 'pointer', display: 'contents' }}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div onClick={handleClick} style={{ cursor: 'pointer' }}>\n      {children}\n    </div>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Export\n * -----------------------------------------------------------------------------------------------*/\n\nexport const FullScreenImage = {\n  Root,\n  Trigger,\n};\n"],"names":["FullScreenImageContext","createContext","undefined","setOpacity","hex","alpha","Math","floor","toString","padStart","Overlay","styled","div","props","theme","colors","neutral800","ImageWrapper","ANIMATIONS","scaleIn","StyledImg","Base64Img","ImageModal","src","alt","onClose","overlayRef","useRef","wrapperRef","useEffect","handleKeyDown","e","key","preventDefault","stopPropagation","stopImmediatePropagation","cancelBubble","window","addEventListener","removeEventListener","handleOverlayClick","target","current","handleWrapperClick","overlay","wrapper","createPortal","_jsx","ref","document","body","Root","children","defaultOpen","isOpen","setIsOpen","useState","open","close","_jsxs","Provider","value","useFullScreenImage","context","useContext","Error","Trigger","asChild","handleClick","onClick","style","cursor","display","FullScreenImage"],"mappings":"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"}

package/dist/admin/components/AIChat/components/FullScreenImage.mjs

@@ -0,0 +1,187 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, createContext, useRef, useEffect, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { styled } from 'styled-components';
+import { ANIMATIONS } from './animations.mjs';
+import { Base64Img } from './Base64Image.mjs';
+
+const FullScreenImageContext = /*#__PURE__*/ createContext(undefined);
+/* -------------------------------------------------------------------------------------------------
+ * Styles
+ * -----------------------------------------------------------------------------------------------*/ const setOpacity = (hex, alpha)=>`${hex}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
+  pointer-events: auto; /* Explicitly enable pointer events */
+  background: ${(props)=>setOpacity(props.theme.colors.neutral800, 0.2)};
+`;
+const ImageWrapper = styled.div`
+  max-width: 80vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto; /* Explicitly enable pointer events */
+  position: relative;
+  animation: ${ANIMATIONS.scaleIn} 0.3s ease;
+`;
+const StyledImg = styled(Base64Img)`
+  max-width: 100%;
+  max-height: 90vh;
+  object-fit: contain;
+  pointer-events: auto; /* Explicitly enable pointer events */
+`;
+/* -------------------------------------------------------------------------------------------------
+ * Modal
+ * -----------------------------------------------------------------------------------------------*/ // Use the existing FullScreenImage as our modal component
+const ImageModal = ({ src, alt, onClose })=>{
+    const overlayRef = useRef(null);
+    const wrapperRef = useRef(null);
+    // Close on ESC key press
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if (e.key === 'Escape') {
+                // Stop propagation to prevent closing parent modals
+                e.preventDefault();
+                e.stopPropagation();
+                onClose?.();
+                // The next 3 lines are critical: they completely stop the event
+                e.stopImmediatePropagation();
+                e.cancelBubble = true; // For older browsers
+                return false;
+            }
+        };
+        // Use capture phase to intercept event before it reaches other components
+        window.addEventListener('keydown', handleKeyDown, true);
+        return ()=>window.removeEventListener('keydown', handleKeyDown, true);
+    }, [
+        onClose
+    ]);
+    // Setup click handlers
+    useEffect(()=>{
+        const handleOverlayClick = (e)=>{
+            // Only close if clicking directly on the overlay (not its children)
+            if (e.target === overlayRef.current) {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose?.();
+            }
+        };
+        const handleWrapperClick = (e)=>{
+            // Stop propagation for clicks on the image wrapper
+            e.stopPropagation();
+        };
+        const overlay = overlayRef.current;
+        const wrapper = wrapperRef.current;
+        if (overlay) {
+            overlay.addEventListener('click', handleOverlayClick);
+        }
+        if (wrapper) {
+            wrapper.addEventListener('click', handleWrapperClick);
+        }
+        return ()=>{
+            if (overlay) {
+                overlay.removeEventListener('click', handleOverlayClick);
+            }
+            if (wrapper) {
+                wrapper.removeEventListener('click', handleWrapperClick);
+            }
+        };
+    }, [
+        onClose
+    ]);
+    // Using createPortal to render directly at document body level
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(Overlay, {
+        ref: overlayRef,
+        children: /*#__PURE__*/ jsx(ImageWrapper, {
+            ref: wrapperRef,
+            children: /*#__PURE__*/ jsx(StyledImg, {
+                src: src,
+                alt: alt
+            })
+        })
+    }), document.body);
+};
+/* -------------------------------------------------------------------------------------------------
+ * Root
+ * -----------------------------------------------------------------------------------------------*/ // Root component that provides context
+const Root = ({ children, src, alt, onClose, defaultOpen = false })=>{
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const open = ()=>setIsOpen(true);
+    const close = ()=>{
+        setIsOpen(false);
+        onClose?.();
+    };
+    return /*#__PURE__*/ jsxs(FullScreenImageContext.Provider, {
+        value: {
+            isOpen,
+            open,
+            close,
+            src,
+            alt
+        },
+        children: [
+            children,
+            isOpen && /*#__PURE__*/ jsx(ImageModal, {
+                src: src,
+                alt: alt,
+                onClose: close
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Hooks
+ * -----------------------------------------------------------------------------------------------*/ // Hook to use the context
+const useFullScreenImage = ()=>{
+    const context = useContext(FullScreenImageContext);
+    if (!context) {
+        throw new Error('useFullScreenImage must be used within a FullScreenImage.Root');
+    }
+    return context;
+};
+/* -------------------------------------------------------------------------------------------------
+ * Trigger
+ * -----------------------------------------------------------------------------------------------*/ // Trigger component that opens the full screen image
+const Trigger = ({ children, asChild = false })=>{
+    const { open } = useFullScreenImage();
+    const handleClick = (e)=>{
+        e.stopPropagation();
+        open();
+    };
+    if (asChild) {
+        return /*#__PURE__*/ jsx("div", {
+            onClick: handleClick,
+            style: {
+                cursor: 'pointer',
+                display: 'contents'
+            },
+            children: children
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        onClick: handleClick,
+        style: {
+            cursor: 'pointer'
+        },
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Export
+ * -----------------------------------------------------------------------------------------------*/ const FullScreenImage = {
+    Root,
+    Trigger
+};
+
+export { FullScreenImage, setOpacity };
+//# sourceMappingURL=FullScreenImage.mjs.map

package/dist/admin/components/AIChat/components/FullScreenImage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenImage.mjs","sources":["../../../../../admin/src/components/AIChat/components/FullScreenImage.tsx"],"sourcesContent":["import { useEffect, useRef, createContext, useContext, useState, ReactNode } from 'react';\n\nimport { createPortal } from 'react-dom';\nimport { styled } from 'styled-components';\n\nimport { ANIMATIONS } from './animations';\nimport { Base64Img } from './Base64Image';\n\n/* -------------------------------------------------------------------------------------------------\n * Context\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FullScreenImageContextType {\n  isOpen: boolean;\n  open: () => void;\n  close: () => void;\n  src: string;\n  alt: string;\n}\n\nconst FullScreenImageContext = createContext<FullScreenImageContextType | undefined>(undefined);\n\n/* -------------------------------------------------------------------------------------------------\n * Types\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FullScreenImageProps {\n  src: string;\n  alt: string;\n  onClose?: () => void;\n}\n\ninterface FullScreenImageRootProps extends FullScreenImageProps {\n  children: ReactNode;\n  defaultOpen?: boolean;\n}\n\ninterface FullScreenImageTriggerProps {\n  children: ReactNode;\n  asChild?: boolean;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Styles\n * -----------------------------------------------------------------------------------------------*/\nexport const setOpacity = (hex: string, alpha: number) =>\n  `${hex}${Math.floor(alpha * 255)\n    .toString(16)\n    .padStart(2, '0')}`;\n\nconst Overlay = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 500;\n  pointer-events: auto; /* Explicitly enable pointer events */\n  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};\n`;\n\nconst ImageWrapper = styled.div`\n  max-width: 80vw;\n  max-height: 90vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto; /* Explicitly enable pointer events */\n  position: relative;\n  animation: ${ANIMATIONS.scaleIn} 0.3s ease;\n`;\n\nconst StyledImg = styled(Base64Img)`\n  max-width: 100%;\n  max-height: 90vh;\n  object-fit: contain;\n  pointer-events: auto; /* Explicitly enable pointer events */\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Modal\n * -----------------------------------------------------------------------------------------------*/\n\n// Use the existing FullScreenImage as our modal component\nconst ImageModal = ({ src, alt, onClose }: FullScreenImageProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  // Close on ESC key press\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        // Stop propagation to prevent closing parent modals\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.();\n\n        // The next 3 lines are critical: they completely stop the event\n        e.stopImmediatePropagation();\n        e.cancelBubble = true; // For older browsers\n        return false;\n      }\n    };\n\n    // Use capture phase to intercept event before it reaches other components\n    window.addEventListener('keydown', handleKeyDown, true);\n    return () => window.removeEventListener('keydown', handleKeyDown, true);\n  }, [onClose]);\n\n  // Setup click handlers\n  useEffect(() => {\n    const handleOverlayClick = (e: MouseEvent) => {\n      // Only close if clicking directly on the overlay (not its children)\n      if (e.target === overlayRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.();\n      }\n    };\n\n    const handleWrapperClick = (e: MouseEvent) => {\n      // Stop propagation for clicks on the image wrapper\n      e.stopPropagation();\n    };\n\n    const overlay = overlayRef.current;\n    const wrapper = wrapperRef.current;\n\n    if (overlay) {\n      overlay.addEventListener('click', handleOverlayClick);\n    }\n\n    if (wrapper) {\n      wrapper.addEventListener('click', handleWrapperClick);\n    }\n\n    return () => {\n      if (overlay) {\n        overlay.removeEventListener('click', handleOverlayClick);\n      }\n\n      if (wrapper) {\n        wrapper.removeEventListener('click', handleWrapperClick);\n      }\n    };\n  }, [onClose]);\n\n  // Using createPortal to render directly at document body level\n  return createPortal(\n    <Overlay ref={overlayRef}>\n      <ImageWrapper ref={wrapperRef}>\n        <StyledImg src={src} alt={alt} />\n      </ImageWrapper>\n    </Overlay>,\n    document.body\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Root\n * -----------------------------------------------------------------------------------------------*/\n\n// Root component that provides context\nconst Root = ({ children, src, alt, onClose, defaultOpen = false }: FullScreenImageRootProps) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  const open = () => setIsOpen(true);\n  const close = () => {\n    setIsOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <FullScreenImageContext.Provider value={{ isOpen, open, close, src, alt }}>\n      {children}\n      {isOpen && <ImageModal src={src} alt={alt} onClose={close} />}\n    </FullScreenImageContext.Provider>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Hooks\n * -----------------------------------------------------------------------------------------------*/\n\n// Hook to use the context\nconst useFullScreenImage = () => {\n  const context = useContext(FullScreenImageContext);\n  if (!context) {\n    throw new Error('useFullScreenImage must be used within a FullScreenImage.Root');\n  }\n  return context;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Trigger\n * -----------------------------------------------------------------------------------------------*/\n\n// Trigger component that opens the full screen image\nconst Trigger = ({ children, asChild = false }: FullScreenImageTriggerProps) => {\n  const { open } = useFullScreenImage();\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    open();\n  };\n\n  if (asChild) {\n    return (\n      <div onClick={handleClick} style={{ cursor: 'pointer', display: 'contents' }}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div onClick={handleClick} style={{ cursor: 'pointer' }}>\n      {children}\n    </div>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Export\n * -----------------------------------------------------------------------------------------------*/\n\nexport const FullScreenImage = {\n  Root,\n  Trigger,\n};\n"],"names":["FullScreenImageContext","createContext","undefined","setOpacity","hex","alpha","Math","floor","toString","padStart","Overlay","styled","div","props","theme","colors","neutral800","ImageWrapper","ANIMATIONS","scaleIn","StyledImg","Base64Img","ImageModal","src","alt","onClose","overlayRef","useRef","wrapperRef","useEffect","handleKeyDown","e","key","preventDefault","stopPropagation","stopImmediatePropagation","cancelBubble","window","addEventListener","removeEventListener","handleOverlayClick","target","current","handleWrapperClick","overlay","wrapper","createPortal","_jsx","ref","document","body","Root","children","defaultOpen","isOpen","setIsOpen","useState","open","close","_jsxs","Provider","value","useFullScreenImage","context","useContext","Error","Trigger","asChild","handleClick","onClick","style","cursor","display","FullScreenImage"],"mappings":"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"}

package/dist/admin/components/AIChat/components/ImagePreview.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+var animations = require('./animations.js');
+var Base64Image = require('./Base64Image.js');
+var FullScreenImage = require('./FullScreenImage.js');
+
+const ImageContainer = styledComponents.styled(designSystem.Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  width: 100%;
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+  cursor: pointer;
+`;
+const StyledImg = styledComponents.styled(Base64Image.Base64Img)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  // make it appear gracefully when first rendering
+  animation: ${animations.ANIMATIONS.fadeIn} 0.3s ease;
+`;
+const CardContainer = styledComponents.styled(designSystem.Card)`
+  height: 100%;
+  width: 100%;
+  ${({ $selected, theme })=>$selected ? `
+      border: 2px solid ${theme.colors.primary600};
+      outline: 0px solid transparent;
+    ` : `
+      border: 2px solid transparent;
+      outline: 1px solid ${theme.colors.neutral200};
+    `}
+  transition: all 0.2s ease-in-out;
+`;
+const ImagePreview = ({ imageUrl, imageName, selected = false, onSelect })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(FullScreenImage.FullScreenImage.Root, {
+        src: imageUrl,
+        alt: imageName,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+            role: "button",
+            $selected: selected,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardHeader, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardCheckbox, {
+                            checked: selected,
+                            onCheckedChange: onSelect
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAction, {
+                            position: "end",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(FullScreenImage.FullScreenImage.Trigger, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    label: "Preview",
+                                    type: "button",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Expand, {})
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(ImageContainer, {
+                            onClick: onSelect,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(StyledImg, {
+                                src: imageUrl,
+                                alt: imageName
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardBody, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardContent, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTitle, {
+                            children: imageName
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.ImagePreview = ImagePreview;
+//# sourceMappingURL=ImagePreview.js.map

package/dist/admin/components/AIChat/components/ImagePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.js","sources":["../../../../../admin/src/components/AIChat/components/ImagePreview.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardAction,\n  CardTitle,\n  IconButton,\n} from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { ANIMATIONS } from './animations';\nimport { Base64Img } from './Base64Image';\nimport { FullScreenImage } from './FullScreenImage';\n\ninterface Base64ImageProps {\n  imageUrl: string;\n  imageName: string;\n  selected?: boolean;\n  onSelect?: (selected: boolean) => void;\n}\n\nconst ImageContainer = styled(Box)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 160px;\n  width: 100%;\n  border-radius: 4px 4px 0 0;\n  overflow: hidden;\n  cursor: pointer;\n`;\n\nconst StyledImg = styled(Base64Img)`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // make it appear gracefully when first rendering\n  animation: ${ANIMATIONS.fadeIn} 0.3s ease;\n`;\n\nconst CardContainer = styled(Card)<{ $selected?: boolean }>`\n  height: 100%;\n  width: 100%;\n  ${({ $selected, theme }) =>\n    $selected\n      ? `\n      border: 2px solid ${theme.colors.primary600};\n      outline: 0px solid transparent;\n    `\n      : `\n      border: 2px solid transparent;\n      outline: 1px solid ${theme.colors.neutral200};\n    `}\n  transition: all 0.2s ease-in-out;\n`;\n\nexport const ImagePreview = ({\n  imageUrl,\n  imageName,\n  selected = false,\n  onSelect,\n}: Base64ImageProps) => {\n  return (\n    <FullScreenImage.Root src={imageUrl} alt={imageName}>\n      <CardContainer role=\"button\" $selected={selected}>\n        <CardHeader>\n          <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          <CardAction position=\"end\">\n            <FullScreenImage.Trigger>\n              <IconButton label=\"Preview\" type=\"button\">\n                <Expand />\n              </IconButton>\n            </FullScreenImage.Trigger>\n          </CardAction>\n          <ImageContainer onClick={onSelect}>\n            <StyledImg src={imageUrl} alt={imageName} />\n          </ImageContainer>\n        </CardHeader>\n\n        <CardBody>\n          <CardContent>\n            <CardTitle>{imageName}</CardTitle>\n          </CardContent>\n        </CardBody>\n      </CardContainer>\n    </FullScreenImage.Root>\n  );\n};\n"],"names":["ImageContainer","styled","Box","StyledImg","Base64Img","ANIMATIONS","fadeIn","CardContainer","Card","$selected","theme","colors","primary600","neutral200","ImagePreview","imageUrl","imageName","selected","onSelect","_jsx","FullScreenImage","Root","src","alt","_jsxs","role","CardHeader","CardCheckbox","checked","onCheckedChange","CardAction","position","Trigger","IconButton","label","type","Expand","onClick","CardBody","CardContent","CardTitle"],"mappings":";;;;;;;;;;AAyBA,MAAMA,cAAAA,GAAiBC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;;;;AASlC,CAAC;AAED,MAAMC,SAAAA,GAAYF,uBAAOG,CAAAA,qBAAAA,CAAU;;;;;;aAMtB,EAAEC,qBAAAA,CAAWC,MAAM,CAAC;AACjC,CAAC;AAED,MAAMC,aAAAA,GAAgBN,uBAAOO,CAAAA,iBAAAA,CAA8B;;;EAGzD,EAAE,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAE,GACrBD,YACI;AACgB,wBAAA,EAAEC,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE9C,IAAA,CAAC,GACG;;AAEiB,yBAAA,EAAEF,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;AAC/C,IAAA,CAAC;;AAEL,CAAC;AAEYC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,QAAQ,EACRC,SAAS,EACTC,QAAW,GAAA,KAAK,EAChBC,QAAQ,EACS,GAAA;IACjB,qBACEC,cAAA,CAACC,gCAAgBC,IAAI,EAAA;QAACC,GAAKP,EAAAA,QAAAA;QAAUQ,GAAKP,EAAAA,SAAAA;AACxC,QAAA,QAAA,gBAAAQ,eAACjB,CAAAA,aAAAA,EAAAA;YAAckB,IAAK,EAAA,QAAA;YAAShB,SAAWQ,EAAAA,QAAAA;;8BACtCO,eAACE,CAAAA,uBAAAA,EAAAA;;sCACCP,cAACQ,CAAAA,yBAAAA,EAAAA;4BAAaC,OAASX,EAAAA,QAAAA;4BAAUY,eAAiBX,EAAAA;;sCAClDC,cAACW,CAAAA,uBAAAA,EAAAA;4BAAWC,QAAS,EAAA,KAAA;oDACnBZ,cAAA,CAACC,gCAAgBY,OAAO,EAAA;AACtB,gCAAA,QAAA,gBAAAb,cAACc,CAAAA,uBAAAA,EAAAA;oCAAWC,KAAM,EAAA,SAAA;oCAAUC,IAAK,EAAA,QAAA;AAC/B,oCAAA,QAAA,gBAAAhB,cAACiB,CAAAA,YAAAA,EAAAA,EAAAA;;;;sCAIPjB,cAACnB,CAAAA,cAAAA,EAAAA;4BAAeqC,OAASnB,EAAAA,QAAAA;AACvB,4BAAA,QAAA,gBAAAC,cAAChB,CAAAA,SAAAA,EAAAA;gCAAUmB,GAAKP,EAAAA,QAAAA;gCAAUQ,GAAKP,EAAAA;;;;;8BAInCG,cAACmB,CAAAA,qBAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAnB,cAACoB,CAAAA,wBAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAApB,cAACqB,CAAAA,sBAAAA,EAAAA;AAAWxB,4BAAAA,QAAAA,EAAAA;;;;;;;AAMxB;;;;"}

package/dist/admin/components/AIChat/components/ImagePreview.mjs

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Card, CardHeader, CardCheckbox, CardAction, IconButton, CardBody, CardContent, CardTitle } from '@strapi/design-system';
+import { Expand } from '@strapi/icons';
+import { styled } from 'styled-components';
+import { ANIMATIONS } from './animations.mjs';
+import { Base64Img } from './Base64Image.mjs';
+import { FullScreenImage } from './FullScreenImage.mjs';
+
+const ImageContainer = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  width: 100%;
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+  cursor: pointer;
+`;
+const StyledImg = styled(Base64Img)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  // make it appear gracefully when first rendering
+  animation: ${ANIMATIONS.fadeIn} 0.3s ease;
+`;
+const CardContainer = styled(Card)`
+  height: 100%;
+  width: 100%;
+  ${({ $selected, theme })=>$selected ? `
+      border: 2px solid ${theme.colors.primary600};
+      outline: 0px solid transparent;
+    ` : `
+      border: 2px solid transparent;
+      outline: 1px solid ${theme.colors.neutral200};
+    `}
+  transition: all 0.2s ease-in-out;
+`;
+const ImagePreview = ({ imageUrl, imageName, selected = false, onSelect })=>{
+    return /*#__PURE__*/ jsx(FullScreenImage.Root, {
+        src: imageUrl,
+        alt: imageName,
+        children: /*#__PURE__*/ jsxs(CardContainer, {
+            role: "button",
+            $selected: selected,
+            children: [
+                /*#__PURE__*/ jsxs(CardHeader, {
+                    children: [
+                        /*#__PURE__*/ jsx(CardCheckbox, {
+                            checked: selected,
+                            onCheckedChange: onSelect
+                        }),
+                        /*#__PURE__*/ jsx(CardAction, {
+                            position: "end",
+                            children: /*#__PURE__*/ jsx(FullScreenImage.Trigger, {
+                                children: /*#__PURE__*/ jsx(IconButton, {
+                                    label: "Preview",
+                                    type: "button",
+                                    children: /*#__PURE__*/ jsx(Expand, {})
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(ImageContainer, {
+                            onClick: onSelect,
+                            children: /*#__PURE__*/ jsx(StyledImg, {
+                                src: imageUrl,
+                                alt: imageName
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(CardBody, {
+                    children: /*#__PURE__*/ jsx(CardContent, {
+                        children: /*#__PURE__*/ jsx(CardTitle, {
+                            children: imageName
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { ImagePreview };
+//# sourceMappingURL=ImagePreview.mjs.map

package/dist/admin/components/AIChat/components/ImagePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.mjs","sources":["../../../../../admin/src/components/AIChat/components/ImagePreview.tsx"],"sourcesContent":["import {\n  Box,\n  Card,\n  CardBody,\n  CardCheckbox,\n  CardContent,\n  CardHeader,\n  CardAction,\n  CardTitle,\n  IconButton,\n} from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nimport { ANIMATIONS } from './animations';\nimport { Base64Img } from './Base64Image';\nimport { FullScreenImage } from './FullScreenImage';\n\ninterface Base64ImageProps {\n  imageUrl: string;\n  imageName: string;\n  selected?: boolean;\n  onSelect?: (selected: boolean) => void;\n}\n\nconst ImageContainer = styled(Box)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 160px;\n  width: 100%;\n  border-radius: 4px 4px 0 0;\n  overflow: hidden;\n  cursor: pointer;\n`;\n\nconst StyledImg = styled(Base64Img)`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  // make it appear gracefully when first rendering\n  animation: ${ANIMATIONS.fadeIn} 0.3s ease;\n`;\n\nconst CardContainer = styled(Card)<{ $selected?: boolean }>`\n  height: 100%;\n  width: 100%;\n  ${({ $selected, theme }) =>\n    $selected\n      ? `\n      border: 2px solid ${theme.colors.primary600};\n      outline: 0px solid transparent;\n    `\n      : `\n      border: 2px solid transparent;\n      outline: 1px solid ${theme.colors.neutral200};\n    `}\n  transition: all 0.2s ease-in-out;\n`;\n\nexport const ImagePreview = ({\n  imageUrl,\n  imageName,\n  selected = false,\n  onSelect,\n}: Base64ImageProps) => {\n  return (\n    <FullScreenImage.Root src={imageUrl} alt={imageName}>\n      <CardContainer role=\"button\" $selected={selected}>\n        <CardHeader>\n          <CardCheckbox checked={selected} onCheckedChange={onSelect} />\n          <CardAction position=\"end\">\n            <FullScreenImage.Trigger>\n              <IconButton label=\"Preview\" type=\"button\">\n                <Expand />\n              </IconButton>\n            </FullScreenImage.Trigger>\n          </CardAction>\n          <ImageContainer onClick={onSelect}>\n            <StyledImg src={imageUrl} alt={imageName} />\n          </ImageContainer>\n        </CardHeader>\n\n        <CardBody>\n          <CardContent>\n            <CardTitle>{imageName}</CardTitle>\n          </CardContent>\n        </CardBody>\n      </CardContainer>\n    </FullScreenImage.Root>\n  );\n};\n"],"names":["ImageContainer","styled","Box","StyledImg","Base64Img","ANIMATIONS","fadeIn","CardContainer","Card","$selected","theme","colors","primary600","neutral200","ImagePreview","imageUrl","imageName","selected","onSelect","_jsx","FullScreenImage","Root","src","alt","_jsxs","role","CardHeader","CardCheckbox","checked","onCheckedChange","CardAction","position","Trigger","IconButton","label","type","Expand","onClick","CardBody","CardContent","CardTitle"],"mappings":";;;;;;;;AAyBA,MAAMA,cAAAA,GAAiBC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;;;;AASlC,CAAC;AAED,MAAMC,SAAAA,GAAYF,MAAOG,CAAAA,SAAAA,CAAU;;;;;;aAMtB,EAAEC,UAAAA,CAAWC,MAAM,CAAC;AACjC,CAAC;AAED,MAAMC,aAAAA,GAAgBN,MAAOO,CAAAA,IAAAA,CAA8B;;;EAGzD,EAAE,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAE,GACrBD,YACI;AACgB,wBAAA,EAAEC,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;AAE9C,IAAA,CAAC,GACG;;AAEiB,yBAAA,EAAEF,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;AAC/C,IAAA,CAAC;;AAEL,CAAC;AAEYC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,QAAQ,EACRC,SAAS,EACTC,QAAW,GAAA,KAAK,EAChBC,QAAQ,EACS,GAAA;IACjB,qBACEC,GAAA,CAACC,gBAAgBC,IAAI,EAAA;QAACC,GAAKP,EAAAA,QAAAA;QAAUQ,GAAKP,EAAAA,SAAAA;AACxC,QAAA,QAAA,gBAAAQ,IAACjB,CAAAA,aAAAA,EAAAA;YAAckB,IAAK,EAAA,QAAA;YAAShB,SAAWQ,EAAAA,QAAAA;;8BACtCO,IAACE,CAAAA,UAAAA,EAAAA;;sCACCP,GAACQ,CAAAA,YAAAA,EAAAA;4BAAaC,OAASX,EAAAA,QAAAA;4BAAUY,eAAiBX,EAAAA;;sCAClDC,GAACW,CAAAA,UAAAA,EAAAA;4BAAWC,QAAS,EAAA,KAAA;oDACnBZ,GAAA,CAACC,gBAAgBY,OAAO,EAAA;AACtB,gCAAA,QAAA,gBAAAb,GAACc,CAAAA,UAAAA,EAAAA;oCAAWC,KAAM,EAAA,SAAA;oCAAUC,IAAK,EAAA,QAAA;AAC/B,oCAAA,QAAA,gBAAAhB,GAACiB,CAAAA,MAAAA,EAAAA,EAAAA;;;;sCAIPjB,GAACnB,CAAAA,cAAAA,EAAAA;4BAAeqC,OAASnB,EAAAA,QAAAA;AACvB,4BAAA,QAAA,gBAAAC,GAAChB,CAAAA,SAAAA,EAAAA;gCAAUmB,GAAKP,EAAAA,QAAAA;gCAAUQ,GAAKP,EAAAA;;;;;8BAInCG,GAACmB,CAAAA,QAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAnB,GAACoB,CAAAA,WAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAApB,GAACqB,CAAAA,SAAAA,EAAAA;AAAWxB,4BAAAA,QAAAA,EAAAA;;;;;;;AAMxB;;;;"}