@redneckz/wildless-cms-uni-blocks 0.14.774 → 0.14.776

package/bundle/bundle.umd.js

@@ -5017,19 +5017,19 @@
         default: 'w-6 h-6',
         large: 'w-12 h-12',
     };
-    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel = 'Меню второго уровня', image, data, onClick, version, }) => {
+    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel = 'Меню второго уровня', image, data, onClick, version, isLoading, }) => {
         const grayBg = isGrayBg && !isRounded ? 'bg-main-divider' : '';
         const bgColor = version === 'transparent' ? 'backdrop-opacity-30 bg-white/30' : grayBg;
         return (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit', bgColor, isRounded
                 ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-                : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getAspectsAttributes(data), children: jsx(Img, { image: image, className: style('h-full', {
+                : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getAspectsAttributes(data), children: isLoading ? (jsx("div", { className: "w-full h-full rounded-full border-4 border-r-transparent animate-spin text-primary-main" })) : (jsx(Img, { image: image, className: style('h-full', {
                     'bg-main-divider/20 rounded-full': isRounded,
-                }), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) }));
+                }), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" })) }));
     });
 
     const getNS = (_) => globalThis[_];
     const initializeExternalNS = (namespaceName, url, isModule = false) => {
-        const script = document.getElementById(url);
+        const script = globalThis.document.getElementById(url);
         if (script) {
             const ns = getNS(namespaceName);
             if (ns) {
@@ -5045,7 +5045,7 @@
         }
         else {
             return new Promise((resolve, reject) => {
-                const newScript = document.createElement('script');
+                const newScript = globalThis.document.createElement('script');
                 newScript.src = url;
                 newScript.async = true;
                 newScript.id = url;
@@ -5058,15 +5058,19 @@
                 newScript.addEventListener('error', (error) => {
                     reject(error);
                 });
-                document.head.appendChild(newScript);
+                globalThis.document.head.appendChild(newScript);
             });
         }
     };
     const initializeExternalStylesheet = (url = '') => {
-        const link = document.createElement('link');
-        link.href = url;
-        link.rel = 'stylesheet';
-        document.head.appendChild(link);
+        const link = globalThis.document.getElementById(url);
+        if (!link) {
+            const newLink = globalThis.document.createElement('link');
+            newLink.href = url;
+            newLink.id = url;
+            newLink.rel = 'stylesheet';
+            globalThis.document.head.appendChild(newLink);
+        }
     };
     function useExternalNS(namespaceName, url, unmountNS = true) {
         const [externalNS, setExternalNS] = useState(undefined);
@@ -5084,9 +5088,9 @@
             return () => {
                 isMounted = false;
                 if (unmountNS) {
-                    const script = document.getElementById(url);
+                    const script = globalThis.document.getElementById(url);
                     if (script) {
-                        document.head.removeChild(script);
+                        globalThis.document.head.removeChild(script);
                     }
                     setExternalNS(undefined);
                 }
@@ -5104,35 +5108,57 @@
         business: '/webchat',
     };
     const useChatBot = (chat) => {
+        const [isLoading, setIsLoading] = useState(false);
         useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
         const chatUrl = CHATBOT_URL[chat ?? ''];
-        return async (ev) => {
+        const load = useCallback((ev) => {
             if (!chatUrl) {
                 return;
             }
-            if (chat !== 'personal') {
-                initializeExternalStylesheet(`${chatUrl}/bundle.css`);
-                const businessChat = (await initializeExternalNS(CHAT_NAMESPACE, `${chatUrl}/bundle.js`, true));
-                if (businessChat?.render) {
-                    businessChat.render(CHAT_FRAME_ID, true);
-                }
+            setIsLoading(true);
+            if (chat === 'business') {
+                renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
             }
             else {
-                const target = ev.target;
-                if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
-                    target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
-                }
-                const chatFrame = document.getElementById(CHAT_FRAME_ID);
-                if (!chatFrame) {
-                    initializeExternalNS(CHAT_NAMESPACE, chatUrl);
-                }
+                renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
             }
-        };
+        }, [chatUrl, chat]);
+        return { load, isLoading };
+    };
+    const renderPersonalChatBot = async (ev, chatUrl) => {
+        const target = ev.target;
+        if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
+            target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
+        }
+        const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+        if (!chatFrame) {
+            await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+        }
+    };
+    const renderBusinessChatBot = async (chatUrl) => {
+        const businessChat = (await initializeExternalNS(CHAT_NAMESPACE, `${chatUrl}/bundle.js`, true));
+        initializeExternalStylesheet(`${chatUrl}/bundle.css`);
+        const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+        if (chatFrame) {
+            businessChat?.chatOpen?.();
+        }
+        else {
+            createChatFrame();
+            businessChat?.render?.(CHAT_FRAME_ID, true);
+        }
+    };
+    const createChatFrame = () => {
+        const chatFrame = globalThis.document.createElement('div');
+        chatFrame.id = CHAT_FRAME_ID;
+        chatFrame.style.position = 'fixed';
+        chatFrame.style.right = '0';
+        chatFrame.style.bottom = '0';
+        globalThis.document.body.appendChild(chatFrame);
     };
 
     const HeaderChatBotButton = JSX(({ chat = 'personal', iconVersion, className, ariaLabel = 'Чат', version }) => {
-        const load = useChatBot(chat);
-        return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: ariaLabel, onClick: load, buttonSize: "large", isGrayBg: true, version: version }));
+        const { load, isLoading } = useChatBot(chat);
+        return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: ariaLabel, onClick: load, buttonSize: "large", isGrayBg: true, version: version, isLoading: isLoading }));
     });
 
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, data, ...rest }) => {
@@ -7012,7 +7038,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.773";
+    const packageVersion = "0.14.775";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;