From 78ebe7e6ba77463f6dfd6532d17f2829c17c71b7 Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Thu, 6 Nov 2025 13:46:41 +0100
Subject: [PATCH] Enhance RocketChat livechat widget initialization with state
 persistence

- Improved the initialization process to ensure the RocketChat widget is only set up once, preventing redundant initializations.
- Added functionality to mark the widget iframe for persistence across page transitions, enhancing user experience during navigation.
- Updated event listeners to maintain the persistence marker after DOM updates, ensuring consistent behavior of the livechat widget.
---
 src/layouts/Layout.astro | 87 +++++++++++++++++++---------------------
 1 file changed, 41 insertions(+), 46 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 99d593f..0a53062 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -89,30 +89,21 @@ const { language, textDirection } = I18N;
     <BackToTop />
     
     <script is:inline>
-      // Initialize RocketChat livechat widget
+      // Initialize RocketChat livechat widget with state persistence
       (function() {
-        // Prevent multiple initializations
-        if (window.rocketChatInitialized) {
-          return;
-        }
-        
-        window.rocketChatInitialized = true;
-        
-        // Initialize RocketChat API
-        window.RocketChat = function(c) {
-          if (window.RocketChat._) {
-            window.RocketChat._.push(c);
-          } else {
-            window.RocketChat._ = [c];
-          }
-        };
-        
-        if (!window.RocketChat._) {
+        // Initialize RocketChat API only once
+        if (!window.RocketChat) {
+          window.RocketChat = function(c) {
+            if (window.RocketChat._) {
+              window.RocketChat._.push(c);
+            } else {
+              window.RocketChat._ = [c];
+            }
+          };
           window.RocketChat._ = [];
+          window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
         }
         
-        window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
-        
         function loadRocketChatScript() {
           // Check if script is already loaded
           if (document.querySelector('script[src*="rocketchat-livechat"]')) {
@@ -131,47 +122,51 @@ const { language, textDirection } = I18N;
             
             script.onerror = function() {
               // Silently fail - don't show errors to users
-              window.rocketChatInitialized = false;
-            };
-            
-            script.onload = function() {
-              // Script loaded successfully
             };
             
             firstScript.parentNode.insertBefore(script, firstScript);
           } catch (e) {
             // Silently fail - don't show errors to users
-            window.rocketChatInitialized = false;
+          }
+        }
+        
+        function markWidgetForPersistence() {
+          // Find and mark the widget iframe to persist across page transitions
+          const widgetFrame = document.querySelector('iframe[src*="livechat"]');
+          
+          if (widgetFrame && !widgetFrame.hasAttribute('data-astro-transition-persist')) {
+            // Mark iframe as persistent so Astro keeps it during transitions
+            widgetFrame.setAttribute('data-astro-transition-persist', 'rocketchat');
+            
+            // Also mark the parent container if it exists
+            const widgetContainer = widgetFrame.closest('[class*="rocketchat"], [id*="rocketchat"]');
+            if (widgetContainer && !widgetContainer.hasAttribute('data-astro-transition-persist')) {
+              widgetContainer.setAttribute('data-astro-transition-persist', 'rocketchat-container');
+            }
           }
         }
         
         // Load on initial page load
         if (document.readyState === 'loading') {
-          document.addEventListener('DOMContentLoaded', loadRocketChatScript);
+          document.addEventListener('DOMContentLoaded', function() {
+            loadRocketChatScript();
+            // Mark widget for persistence after it loads
+            setTimeout(markWidgetForPersistence, 1500);
+          });
         } else {
           loadRocketChatScript();
+          setTimeout(markWidgetForPersistence, 1500);
         }
         
-        // Reinitialize after Astro View Transitions
+        // Handle Astro View Transitions - just ensure persistence marker is set
+        document.addEventListener('astro:page-load', function() {
+          // Re-check that the widget has persistence marker after page load
+          setTimeout(markWidgetForPersistence, 100);
+        });
+        
         document.addEventListener('astro:after-swap', function() {
-          // Reset initialization flag to allow reload
-          window.rocketChatInitialized = false;
-          
-          // Small delay to ensure DOM is ready
-          setTimeout(function() {
-            if (window.RocketChat && window.RocketChat.livechat) {
-              // Widget already exists, just ensure it's visible
-              try {
-                window.RocketChat.livechat.maximizeWidget();
-              } catch (e) {
-                // If maximizeWidget fails, widget might need full reload
-                loadRocketChatScript();
-              }
-            } else {
-              // Widget doesn't exist, load it
-              loadRocketChatScript();
-            }
-          }, 100);
+          // Re-check that the widget has persistence marker after DOM swap
+          setTimeout(markWidgetForPersistence, 100);
         });
       })();
     </script>