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

package/bundle/bundle.umd.js

@@ -5017,14 +5017,14 @@
         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[_];
@@ -5108,28 +5108,31 @@
         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;
             }
+            setIsLoading(true);
             if (chat === 'business') {
-                await renderBusinessChatBot(chatUrl);
+                renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
             }
             else {
-                renderPersonalChatBot(ev, chatUrl);
+                renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
             }
-        };
+        }, [chatUrl, chat]);
+        return { load, isLoading };
     };
-    const renderPersonalChatBot = (ev, chatUrl) => {
+    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) {
-            initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+            await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
         }
     };
     const renderBusinessChatBot = async (chatUrl) => {
@@ -5154,8 +5157,8 @@
     };
 
     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 }) => {
@@ -7035,7 +7038,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.774";
+    const packageVersion = "0.14.775";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;