refactor: simplify component loading

app/javascript/react-components/src/components/ChatwootConversation.jsx

@@ -1,4 +1,3 @@
-import { useState, useCallback } from 'react';
 import { useChatwoot } from './ChatwootProvider';
 import { ChatwootMessageListWrapper } from './ChatwootMessageListWrapper';
 
@@ -6,36 +5,11 @@ export const ChatwootConversation = ({
   conversationId,
   className = '',
   style = {},
-  onError = null,
-  onLoad = null,
   ...otherProps
 }) => {
   // Ensure we're inside a ChatwootProvider
   useChatwoot(); // This will throw if not in Provider context
 
-  const [, setIsLoaded] = useState(false);
-  const [, setError] = useState(null);
-
-  // Validate required props
-  if (!conversationId) {
-    throw new Error('ChatwootConversation: conversationId is required');
-  }
-
-  const handleLoad = useCallback(() => {
-    setIsLoaded(true);
-    setError(null);
-    onLoad?.();
-  }, [onLoad]);
-
-  const handleError = useCallback(
-    err => {
-      setError(err.message);
-      setIsLoaded(false);
-      onError?.(err);
-    },
-    [onError]
-  );
-
   return (
     <div
       className={`chatwoot-conversation ${className}`}
@@ -46,13 +20,7 @@ export const ChatwootConversation = ({
         ...style,
       }}
     >
-      <ChatwootMessageListWrapper
-        conversationId={conversationId}
-        onLoad={handleLoad}
-        onError={handleError}
-        className="h-full w-full"
-        {...otherProps}
-      />
+      <ChatwootMessageListWrapper className="h-full w-full" {...otherProps} />
     </div>
   );
 };

app/javascript/react-components/src/components/ChatwootProvider.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { registerVueWebComponents } from '../vue-components/registerWebComponents';
 import store from '../../../dashboard/store';
 import constants from '../../../dashboard/constants/globals';
@@ -15,10 +15,11 @@ export const ChatwootProvider = ({
   userToken,
   websocketURL,
   pubsubToken,
+  conversationId,
   children,
 }) => {
   const isInitialized = useRef(false);
-  const originalGlobals = useRef({});
+  const [initializationComplete, setInitializationComplete] = useState(false);
 
   // Validate required props
   if (!baseURL) {
@@ -33,6 +34,7 @@ export const ChatwootProvider = ({
     baseURL: baseURL.replace(/\/$/, ''), // Remove trailing slash
     userToken,
     accountId,
+    conversationId,
     websocketURL: websocketURL,
     pubsubToken: pubsubToken,
   };
@@ -48,6 +50,7 @@ export const ChatwootProvider = ({
     window.__WOOT_ACCESS_TOKEN__ = config.userToken;
     window.__WEBSOCKET_URL__ = config.websocketURL;
     window.__PUBSUB_TOKEN__ = config.pubsubToken;
+    window.__WOOT_CONVERSATION_ID__ = config.conversationId;
     window.__WOOT_ISOLATED_SHELL__ = true;
     /* eslint-enable no-underscore-dangle */
 
@@ -62,18 +65,14 @@ export const ChatwootProvider = ({
     // Initialize user in store and ActionCable
     store.dispatch('setUser').then(() => {
       vueActionCable.init(store, config.pubsubToken);
+      setInitializationComplete(true);
     });
   }
 
   useEffect(() => {
     if (isInitialized.current) return;
 
-    console.log('setting up chatwoot globals');
-    try {
-      initializeChatwootGlobals();
-    } catch (error) {
-      console.error('Error initializing Chatwoot globals:', error);
-    }
+    initializeChatwootGlobals();
     isInitialized.current = true;
   }, [
     config.baseURL,
@@ -82,6 +81,10 @@ export const ChatwootProvider = ({
     config.pubsubToken,
   ]);
 
+  if (!initializationComplete) {
+    return null;
+  }
+
   return (
     <ChatwootContext.Provider value={config}>
       {children}

app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue

@@ -1,30 +1,5 @@
 <script setup>
-import { watch } from 'vue';
 import MessageList from '../../../ui/MessageList.vue';
-
-// Props that become Web Component attributes
-const props = defineProps({
-  conversationId: {
-    type: [String, Number],
-    required: true,
-  },
-});
-
-function updateConversationId() {
-  if (props.conversationId) {
-    // eslint-disable-next-line no-underscore-dangle
-    window.__WOOT_CONVERSATION_ID__ = Number(props.conversationId);
-  }
-}
-
-// Watch for conversation ID changes
-watch(
-  () => props.conversationId,
-  () => updateConversationId,
-  {
-    immediate: true,
-  }
-);
 </script>
 
 <template>
@@ -36,31 +11,4 @@ watch(
 @import '../../../dashboard/assets/scss/app.scss';
 @import 'vue-multiselect/dist/vue-multiselect.css';
 @import 'floating-vue/dist/style.css';
-
-.chatwoot-message-list-container {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-}
-
-.chatwoot-loading,
-.chatwoot-error {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chatwoot-message-list {
-  height: 100%;
-  width: 100%;
-}
-
-/* Ensure proper containment */
-.chatwoot-message-list-container {
-  contain: layout style;
-}
 </style>