@gem-sdk/core 1.41.2-staging.0 → 1.42.0-dev.60

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -10,6 +10,7 @@ var ShopContext = require('../contexts/ShopContext.js');
 require('@gem-sdk/adapter-shopify');
 require('swr');
 require('swr/mutation');
+require('swr/infinite');
 require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
 var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
@@ -17,6 +18,9 @@ var Tooltip = require('./toolbar/Tooltip.js');
 var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
 var Resize = require('./resize/Resize.js');
 var useToolbarPostPurchase = require('../hooks/useToolbarPostPurchase.js');
+var constant = require('./constant.js');
+var AIContentGenerator = require('./ai-generator/AIContentGenerator.js');
+var AIGenContentLoading = require('./ai-generator/AIGenContentLoading.js');
 require('../helpers/convert.js');
 
 const SECTION_LIMIT = 25;
@@ -30,6 +34,7 @@ const isSection = (el)=>{
 };
 const ComponentToolbarPreview = (props)=>{
     const isThemeSection = props.isThemeSection;
+    const isShopifySection = props.isShopifySection;
     const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
     const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
     const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -175,7 +180,8 @@ const ComponentToolbarPreview = (props)=>{
             bubbles: true,
             detail: {
                 componentUid: props.uid,
-                isThemeSection: isThemeSection
+                isThemeSection,
+                isShopifySection
             }
         });
         window.dispatchEvent(event);
@@ -191,7 +197,8 @@ const ComponentToolbarPreview = (props)=>{
             bubbles: true,
             detail: {
                 componentUid: props.uid,
-                isThemeSection: isThemeSection
+                isThemeSection,
+                isShopifySection
             }
         });
         window.dispatchEvent(event);
@@ -240,6 +247,9 @@ const ComponentToolbarPreview = (props)=>{
         return false;
     };
     const getSectionName = ()=>{
+        if (isShopifySection) {
+            return `Shopify section: ${props.name}`;
+        }
         const checkRenamedSection = props.name && props.name === `Section ${props.uid}`;
         if (getSectionNumber() >= SECTION_LIMIT - 5) {
             return `${checkRenamedSection ? 'Section' : props?.name} ${getIndexSection() + 1}/${SECTION_LIMIT}`;
@@ -256,6 +266,7 @@ const ComponentToolbarPreview = (props)=>{
                 "data-toolbar": true,
                 "data-toolbar-section": props.tag == 'Section',
                 "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-toolbar-shopify-section": props.tag == 'Section' && !!isShopifySection,
                 "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -298,9 +309,39 @@ const ComponentToolbarPreview = (props)=>{
                                     ]
                                 })
                             }),
-                            props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                 "data-toolbar-name": true,
-                                children: getSectionName()
+                                children: [
+                                    getSectionName(),
+                                    props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                        "data-toolbar-visibility": true,
+                                        width: "20",
+                                        height: "20",
+                                        viewBox: "0 0 20 20",
+                                        fill: "none",
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M13.1252 9.99773C13.1243 8.27226 11.7248 6.87423 9.99935 6.87506C8.27386 6.87561 6.87518 8.27455 6.87518 10.0001C6.87518 11.7259 8.27429 13.1251 10.0002 13.1251C11.7257 13.1251 13.125 11.727 13.1252 10.0011V9.99773ZM9.99985 8.12506C11.035 8.12451 11.8746 8.96322 11.8752 9.99839V10.0004C11.8752 11.0357 11.0359 11.8751 10.0002 11.8751C8.96465 11.8751 8.12518 11.0356 8.12518 10.0001C8.12518 8.96472 8.96451 8.12533 9.99985 8.12506Z",
+                                                fill: "#F9F9F9"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M9.99885 4.37593C5.66421 4.37604 2.80603 7.64523 1.79548 9.00983C1.35636 9.60279 1.35918 10.4 1.80012 10.9902C2.81706 12.3514 5.69374 15.6241 9.99886 15.6241C14.3806 15.6241 17.2194 12.3452 18.2168 10.9808C18.6473 10.392 18.6442 9.60472 18.211 9.01902C17.2056 7.65938 14.3429 4.37583 9.99885 4.37593ZM2.80002 9.75374C3.77049 8.44326 6.30207 5.62602 9.99888 5.62593C13.7041 5.62585 16.24 8.45598 17.206 9.76225C17.3146 9.9091 17.3149 10.0965 17.2077 10.2431C16.254 11.5477 13.7416 14.3741 9.99886 14.3741C6.33149 14.3741 3.78173 11.5541 2.80152 10.242C2.69021 10.0931 2.69001 9.90229 2.80002 9.75374Z",
+                                                fill: "#F9F9F9"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M18.0763 3.26988C18.3415 3.58809 18.2985 4.06101 17.9803 4.32619L2.98032 16.8262C2.66211 17.0914 2.18919 17.0484 1.92402 16.7302C1.65884 16.412 1.70184 15.939 2.02004 15.6739L17.02 3.17385C17.3383 2.90868 17.8112 2.95167 18.0763 3.26988Z",
+                                                fill: "#F9F9F9"
+                                            })
+                                        ]
+                                    })
+                                ]
                             }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-name": true,
                                 children: toolbarName()
@@ -380,7 +421,10 @@ const ComponentToolbarPreview = (props)=>{
                             ]
                         }, parent.uid);
                     }),
-                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
+                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
+                        ...props
+                    }),
+                    !props.isShopifySection && constant.ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(AIContentGenerator.AIContentGenerator, {
                         ...props
                     }),
                     props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -454,6 +498,7 @@ const ComponentToolbarPreview = (props)=>{
                 "data-outline": true,
                 "data-outline-section": props.tag == 'Section',
                 "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-outline-shopify-section": props.tag == 'Section' && !!isShopifySection,
                 "data-outline-limit": getIndexSection() >= SECTION_LIMIT
             }, 'outline-' + props.uid),
             props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -500,12 +545,15 @@ const ComponentToolbarPreview = (props)=>{
                     })
                 ]
             }),
+            constant.ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(AIGenContentLoading.AIGenContentLoading, {
+                ...props
+            }),
             /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
                 ...props
             })
         ]
     });
 };
-var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview);
+var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview); /* gem-lint/disallow-import-from-package-path */
 
 exports.default = ComponentToolbarPreview$1;

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -14,8 +14,10 @@ require('swr');
 require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
 var shop = require('../hooks/shop.js');
+require('swr/infinite');
 require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
+var cls = require('../helpers/cls.js');
 require('../helpers/convert.js');
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
@@ -41,6 +43,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     if (props.tag === 'Section' && props.isThemeSection) {
         customProps['data-theme-section'] = true;
     }
+    if (props.tag === 'Section' && props.isShopifySection) {
+        customProps['data-shopify-section'] = true;
+        customProps['data-toolbar-wrap'] = true;
+    }
     // Build editor configs
     if (props.editorConfigs) {
         const editorConfigs = props.editorConfigs;
@@ -95,6 +101,40 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         'data-component-label': props.label,
         'data-not-droppable': isNotDroppable(props.tag)
     };
+    const ShopifySection = ({ name, visibility })=>{
+        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: cls.cls('gp-flex gp-items-center gp-justify-center gp-gap-[8px] gp-bg-[#F4F4F4] gp-p-[16px] gp-border gp-border-[#D6D6D6]', {
+                'gp-opacity-60': !visibility
+            }),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                            d: "M19.1475 5.16194C19.1416 5.1148 19.1197 5.0713 19.0857 5.03911C19.0516 5.00692 19.0076 4.9881 18.9614 4.98597C18.8835 4.98597 17.3469 4.95397 17.3469 4.95397C17.3469 4.95397 16.0588 3.67419 15.9342 3.5311C15.8104 3.40312 15.5619 3.43512 15.4684 3.46711L14.8166 3.67508C14.7361 3.40491 14.6323 3.14259 14.5067 2.89121C14.0566 1.99536 13.3727 1.51544 12.5659 1.51544C12.5044 1.51544 12.4577 1.51544 12.3954 1.53144C12.3642 1.49945 12.3486 1.46745 12.3175 1.45145C11.9608 1.06752 11.5107 0.875552 10.967 0.891549C9.92824 0.923543 8.88772 1.70741 8.03419 3.08318C7.44467 4.05901 6.99453 5.27392 6.8543 6.21776C5.65969 6.6017 4.82087 6.87365 4.79057 6.87365C4.18461 7.06562 4.16903 7.08161 4.09199 7.67351C4.06082 8.12144 2.47754 20.7415 2.47754 20.7415L15.7636 23.1091L21.522 21.6374C21.5064 21.6374 19.1631 5.27392 19.1475 5.16194ZM14.1492 3.89904C13.8062 4.00572 13.4648 4.11772 13.1251 4.23498C13.1251 3.69108 13.0472 2.92321 12.8143 2.28331C13.6064 2.41129 13.9942 3.33914 14.1492 3.89904ZM12.4265 4.44206C11.7279 4.66602 10.9679 4.90598 10.207 5.14594C10.4243 4.29808 10.8277 3.46623 11.3245 2.90632C11.533 2.66965 11.7863 2.47913 12.069 2.34641C12.3806 2.9712 12.4421 3.85105 12.4265 4.44206ZM10.9982 1.61143C11.2466 1.61143 11.4483 1.65942 11.6197 1.7874C11.3127 1.95192 11.0387 2.17444 10.8121 2.44329C10.1455 3.17916 9.63305 4.31408 9.43135 5.4179C8.79423 5.62586 8.17356 5.81783 7.61521 5.9938C7.98744 4.25009 9.39933 1.65942 10.9982 1.61143Z",
+                            fill: "#95BF47"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                            d: "M18.9647 4.94709C18.8851 4.94709 17.3155 4.91503 17.3155 4.91503C17.3155 4.91503 15.9981 3.63242 15.8716 3.48812C15.8261 3.43951 15.7635 3.41074 15.6973 3.40796V23.1094L21.5828 21.6344L19.1709 5.12345C19.1399 5.01122 19.0444 4.94709 18.9647 4.94709Z",
+                            fill: "#5E8E3E"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                            d: "M13.0575 8.51577L12.3029 10.8908C12.3029 10.8908 11.4602 10.5663 10.4599 10.6253C8.98595 10.6991 8.98595 11.4809 8.98595 11.6727C9.07404 12.7348 12.39 12.9709 12.5828 15.4631C12.7238 17.4251 11.3545 18.7675 9.35396 18.8708C6.96778 18.9733 5.65137 17.7939 5.65137 17.7939L6.16032 15.9794C6.16032 15.9794 7.49435 16.8203 8.5465 16.7613C9.23162 16.7318 9.4949 16.245 9.45967 15.9204C9.35396 14.5337 6.65165 14.6223 6.47645 12.3365C6.33551 10.4188 7.82712 8.48626 11.1265 8.30924C12.4076 8.23548 13.0575 8.51577 13.0575 8.51577Z",
+                            fill: "white"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    className: "gp-text-[#212121] gp-text-[14px] gp-leading-[24px] gp-font-medium",
+                    children: name
+                })
+            ]
+        });
+    };
     if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [
@@ -109,7 +149,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     builderAttrs,
                     advanced,
                     children: [
-                        children.props['children'],
+                        props.isShopifySection ? /*#__PURE__*/ jsxRuntime.jsx(ShopifySection, {
+                            name: props.name ?? '',
+                            visibility: !!props.isShopifyVisibility
+                        }) : children.props['children'],
                         /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.default, {
                             ...props
                         })

package/dist/cjs/components/Render.liquid.js

@@ -9,11 +9,13 @@ require('zustand');
 require('swr');
 require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
+require('swr/infinite');
 require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
 require('react-transition-group');
 require('@gem-sdk/core');
 var constant = require('./constant.js');
+require('classnames');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var convert = require('../helpers/convert.js');
 var render = require('../helpers/render.js');

package/dist/cjs/components/RenderCustomCode.js

@@ -11,10 +11,12 @@ require('swr');
 require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
 var shop = require('../hooks/shop.js');
+require('swr/infinite');
 require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
 require('react-transition-group');
 require('@gem-sdk/core');
+require('classnames');
 require('../helpers/convert.js');
 
 const RenderCustomCode = ({ uid, advanced })=>{

package/dist/cjs/components/ai-generator/AIContentGenerator.js

@@ -0,0 +1,205 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AIIcon = require('./icons/AIIcon.js');
+var CloseIcon = require('./icons/CloseIcon.js');
+var ShowMoreIcon = require('./icons/ShowMoreIcon.js');
+var PickProduct = require('./components/PickProduct.js');
+var ToneAndVoice = require('./components/ToneAndVoice.js');
+var classNames = require('classnames');
+var useListenEventGenerate = require('./hooks/useListenEventGenerate.js');
+var useGettingGenerateRequest = require('./hooks/useGettingGenerateRequest.js');
+var useFlipPopup = require('./hooks/useFlipPopup.js');
+var useCheckingProductInside = require('./hooks/useCheckingProductInside.js');
+
+const AIContentGenerator = ({ ...props })=>{
+    const [isShowPopup, setIsShowPopup] = react.useState(false);
+    const [isShowMore, setIsShowMore] = react.useState(false);
+    const genTool = react.useRef(null);
+    const genPopup = react.useRef(null);
+    const genPopupHeader = react.useRef(null);
+    const genButtonWrapper = react.useRef(null);
+    const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, bodyMaxHeight: popupBodyMaxHeight } = useFlipPopup.useFlipPopup(isShowPopup, {
+        genTool,
+        genPopup,
+        genPopupHeader,
+        genButtonWrapper
+    });
+    const { isGenerating, onGenerate, onOpenProductElementSettings } = useListenEventGenerate.useListenEventGenerate({
+        uid: props.uid,
+        tag: String(props.tag)
+    });
+    const { getRequestBody, prompt, changeProductName, changePrompt, changeTone } = useGettingGenerateRequest.useGettingGenerateRequest();
+    const { productElement, checkSectionHasProduct } = useCheckingProductInside.useCheckingProductInside(genTool);
+    const togglePopup = ()=>{
+        setIsShowPopup(!isShowPopup);
+    };
+    const hidePopup = ()=>{
+        setIsShowPopup(false);
+    };
+    const onChangePrompt = (e)=>{
+        changePrompt(e.target.value);
+    };
+    const onActiveComponent = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.componentUid !== props.uid) {
+            hidePopup();
+            return;
+        }
+        checkSectionHasProduct();
+    }, [
+        props.uid,
+        checkSectionHasProduct
+    ]);
+    const toggleShowMore = ()=>{
+        setIsShowMore(!isShowMore);
+    };
+    const handleGenerateContent = ()=>{
+        const body = getRequestBody();
+        onGenerate(body);
+        hidePopup();
+    };
+    const handleOpenProductSetting = ()=>{
+        onOpenProductElementSettings(productElement.uid ?? '');
+    };
+    react.useEffect(()=>{
+        if (!isGenerating) {
+            hidePopup();
+        }
+    }, [
+        isGenerating
+    ]);
+    react.useEffect(()=>{
+        if (productElement.productId) {
+            setIsShowMore(false);
+            return;
+        }
+        setIsShowMore(true);
+    }, [
+        productElement
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('editor:active-component', onActiveComponent);
+        return ()=>{
+            window.removeEventListener('editor:active-component', onActiveComponent);
+        };
+    }, [
+        onActiveComponent
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "gp-relative",
+        ref: genTool,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-gen-content-toolbar gp-border-r-[#6a6a6a] gp-border-r gp-pr-1 gp-mr-1",
+                children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                    className: classNames({
+                        'gp-bg-[#3B3B3B]': isShowPopup
+                    }, 'gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium'),
+                    onClick: togglePopup,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {}),
+                        "AI Content"
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: classNames({
+                    'gp-hidden': !isShowPopup,
+                    'gp-right-0': props.tag === 'Section' || popupPositionX === 'right',
+                    'gp-left-0': popupPositionX === 'left' && props.tag !== 'Section',
+                    'gp-top-8': popupPositionY === 'top',
+                    'gp-bottom-8': popupPositionY === 'bottom',
+                    '!gp-visible': !isValidatingFlipPopup
+                }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
+                ref: genPopup,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",
+                        ref: genPopupHeader,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: "gp-font-medium gp-text-sm",
+                                children: "Write with GemAI"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                className: "gp-p-2 gp-cursor-pointer hover:gp-bg-[#3B3B3B] gp-rounded-md",
+                                onClick: hidePopup,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(CloseIcon.CloseIcon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: classNames({
+                            'gp-overflow-auto': popupBodyMaxHeight !== null
+                        }, 'gp-pt-2 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
+                        style: {
+                            maxHeight: popupBodyMaxHeight !== null ? `${popupBodyMaxHeight}px` : 'auto'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "gp-mb-4",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "gp-text-xs",
+                                    children: "What would you like to describe here?"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "gp-mb-4 gp-flex",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("textarea", {
+                                    className: "gp-p-2 gp-bg-[#333333] gp-rounded-lg gp-w-full gp-text-xs gp-text-white placeholder:gp-text-[#AAAAAA] gp-resize-none focus-visible:gp-outline-none",
+                                    placeholder: "e.g: generate feature benefits",
+                                    rows: 4,
+                                    value: prompt,
+                                    onChange: onChangePrompt
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: classNames({
+                                    'gp-hidden': !isShowMore
+                                }, 'gp-mb-4 gp-gap-4 gp-flex gp-flex-col'),
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(ToneAndVoice.ToneAndVoice, {
+                                        changeToneAndVoice: changeTone
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(PickProduct.PickProduct, {
+                                        changeProductName: changeProductName,
+                                        openProductSetting: handleOpenProductSetting,
+                                        productId: productElement.productId
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                    className: "gp-flex gp-justify-center gp-items-center gp-w-full gp-bg-[#333333] gp-py-2 gp-rounded-lg gp-gap-2 gp-text-xs gp-font-medium",
+                                    onClick: toggleShowMore,
+                                    children: [
+                                        "Show more",
+                                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                            className: classNames({
+                                                'gp-rotate-180': isShowMore
+                                            }),
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(ShowMoreIcon.ShowMoreIcon, {})
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "gp-p-4",
+                        ref: genButtonWrapper,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
+                            onClick: handleGenerateContent,
+                            children: isGenerating ? 'Generating...' : 'Generate'
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.AIContentGenerator = AIContentGenerator;

package/dist/cjs/components/ai-generator/AIGenContentLoading.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AIIcon = require('./icons/AIIcon.js');
+
+function getRandomArbitrary(min, max) {
+    const randomNum = Math.random();
+    return randomNum * (max - min) + min;
+}
+const AIGenContentLoading = ({ ...props })=>{
+    const [isGenerating, setIsGenerating] = react.useState(false);
+    const [time, setTime] = react.useState(0);
+    const interval = react.useRef(null);
+    const onGenerateContentStatus = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.generatingUid !== props.uid) {
+            return;
+        }
+        if (detail.status === 'loading') {
+            setIsGenerating(true);
+            return;
+        }
+        if (detail.status === 'success') {
+            setIsGenerating(false);
+            return;
+        }
+    }, [
+        props.uid
+    ]);
+    react.useEffect(()=>{
+        if (isGenerating) {
+            handleFakeLoading();
+        } else {
+            setTime(0);
+        }
+        return ()=>{
+            interval.current && clearInterval(interval.current);
+        };
+    }, [
+        isGenerating
+    ]);
+    const handleFakeLoading = ()=>{
+        setTime(0);
+        interval.current = setInterval(()=>{
+            setTime((time)=>{
+                const randomNum = getRandomArbitrary(0, 6);
+                return time >= 580 ? time : time + randomNum;
+            });
+        }, 50);
+    };
+    react.useEffect(()=>{
+        window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
+        return ()=>{
+            window.removeEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
+        };
+    }, [
+        onGenerateContentStatus
+    ]);
+    return isGenerating ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "gp-absolute gp-top-0 gp-left-0 gp-w-full gp-h-full gp-bg-white gp-bg-opacity-70 gp-flex gp-justify-center gp-items-center gp-z-100 gp-gap-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",
+                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: `gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md`,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",
+                            style: {
+                                width: `${time / 600 * 100}%`
+                            }
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {})
+        ]
+    }) : null;
+};
+
+exports.AIGenContentLoading = AIGenContentLoading;