From 5d64079a5e907ac214fe3ab8e89cb166249b8df3 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 10 Jun 2025 17:31:42 +0530
Subject: [PATCH] feat: simplify provider and vue wrapper

---
 .../src/components/ChatwootProvider.jsx       | 53 ++---------
 .../ChatwootMessageListWebComponent.vue       | 94 +------------------
 2 files changed, 11 insertions(+), 136 deletions(-)

diff --git a/app/javascript/react-components/src/components/ChatwootProvider.jsx b/app/javascript/react-components/src/components/ChatwootProvider.jsx
index e4d285bcc..722606ec4 100644
--- a/app/javascript/react-components/src/components/ChatwootProvider.jsx
+++ b/app/javascript/react-components/src/components/ChatwootProvider.jsx
@@ -33,46 +33,11 @@ export const ChatwootProvider = ({
     baseURL: baseURL.replace(/\/$/, ''), // Remove trailing slash
     userToken,
     accountId,
-    websocketURL: websocketURL || `${baseURL.replace('http', 'ws')}/cable`,
-    pubsubToken: pubsubToken || userToken, // Fallback to userToken if pubsubToken not provided
+    websocketURL: websocketURL,
+    pubsubToken: pubsubToken,
   };
 
-  function storeOriginalGlobals() {
-    /* eslint-disable no-underscore-dangle */
-    originalGlobals.current = {
-      __WOOT_API_HOST__: window.__WOOT_API_HOST__,
-      __WOOT_ACCESS_TOKEN__: window.__WOOT_ACCESS_TOKEN__,
-      __WEBSOCKET_URL__: window.__WEBSOCKET_URL__,
-      __PUBSUB_TOKEN__: window.__PUBSUB_TOKEN__,
-      __WOOT_USER_ID__: window.__WOOT_USER_ID__,
-      __WOOT_ISOLATED_SHELL__: window.__WOOT_ISOLATED_SHELL__,
-      __CHATWOOT_STORE__: window.__CHATWOOT_STORE__,
-      WootConstants: window.WootConstants,
-      axios: window.axios,
-    };
-    /* eslint-enable no-underscore-dangle */
-  }
-
-  function cleanupChatwootGlobals() {
-    // Restore original globals
-    Object.entries(originalGlobals.current).forEach(([key, value]) => {
-      if (value !== undefined) {
-        window[key] = value;
-      } else {
-        delete window[key];
-      }
-    });
-
-    // Disconnect ActionCable
-    if (vueActionCable.connection) {
-      vueActionCable.connection.disconnect();
-    }
-  }
-
   function initializeChatwootGlobals() {
-    // Store original globals for cleanup
-    storeOriginalGlobals();
-
     // Register Web Components
     registerVueWebComponents();
 
@@ -91,7 +56,6 @@ export const ChatwootProvider = ({
 
     // Set up global objects
     // eslint-disable-next-line no-underscore-dangle
-    window.__CHATWOOT_STORE__ = store;
     window.WootConstants = constants;
     window.axios = createAxios(axios);
 
@@ -104,14 +68,13 @@ export const ChatwootProvider = ({
   useEffect(() => {
     if (isInitialized.current) return;
 
-    initializeChatwootGlobals();
+    console.log('setting up chatwoot globals');
+    try {
+      initializeChatwootGlobals();
+    } catch (error) {
+      console.error('Error initializing Chatwoot globals:', error);
+    }
     isInitialized.current = true;
-
-    // Cleanup on unmount
-    // eslint-disable-next-line  consistent-return
-    return () => {
-      cleanupChatwootGlobals();
-    };
   }, [
     config.baseURL,
     config.userToken,
diff --git a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
index 252e75e19..fbe0c31e0 100644
--- a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
+++ b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { watch } from 'vue';
 import MessageList from '../../../ui/MessageList.vue';
 
 // Props that become Web Component attributes
@@ -10,33 +10,6 @@ const props = defineProps({
   },
 });
 
-// Internal state
-const isInitialized = ref(false);
-const error = ref(null);
-
-async function waitForGlobalInitialization() {
-  // Wait for global Chatwoot objects to be available
-  let attempts = 0;
-  const maxAttempts = 5000; // 5 seconds max wait
-
-  while (attempts < maxAttempts) {
-    // eslint-disable-next-line no-underscore-dangle
-    if (window.__CHATWOOT_STORE__ && window.WootConstants) {
-      return;
-    }
-
-    // eslint-disable-next-line no-await-in-loop
-    await new Promise(resolve => {
-      // eslint-disable-next-line no-promise-executor-return
-      return setTimeout(resolve, 100);
-    });
-
-    attempts += 1;
-  }
-
-  throw new Error('Chatwoot global initialization timed out');
-}
-
 function updateConversationId() {
   if (props.conversationId) {
     // eslint-disable-next-line no-underscore-dangle
@@ -44,27 +17,10 @@ function updateConversationId() {
   }
 }
 
-onMounted(async () => {
-  try {
-    // Wait for global initialization (done by Provider)
-    await waitForGlobalInitialization();
-
-    isInitialized.value = true;
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    console.error('Failed to initialize MessageList:', err);
-    error.value = err.message;
-  }
-});
-
 // Watch for conversation ID changes
 watch(
   () => props.conversationId,
-  () => {
-    if (isInitialized.value) {
-      updateConversationId();
-    }
-  },
+  () => updateConversationId,
   {
     immediate: true,
   }
@@ -72,51 +28,7 @@ watch(
 </script>
 
 <template>
-  <div class="chatwoot-message-list-container">
-    <!-- Loading state -->
-    <div v-if="!isInitialized && !error" class="chatwoot-loading">
-      <div class="flex items-center justify-center h-full">
-        <div class="text-center">
-          <div
-            class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-2"
-          />
-          <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
-          <p class="text-sm text-gray-600">Loading conversation...</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Error state -->
-    <div v-else-if="error" class="chatwoot-error">
-      <div class="flex items-center justify-center h-full">
-        <div class="text-center p-4">
-          <div class="text-red-500 mb-2">
-            <svg
-              class="w-8 h-8 mx-auto"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.732 15.5c-.77.833.192 2.5 1.732 2.5z"
-              />
-            </svg>
-          </div>
-          <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
-          <p class="text-sm text-gray-600">Failed to load conversation</p>
-          <p class="text-xs text-gray-400 mt-1">{{ error }}</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Main MessageList component -->
-    <div v-else-if="isInitialized" class="chatwoot-message-list">
-      <MessageList />
-    </div>
-  </div>
+  <MessageList />
 </template>
 
 <style>