akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: simplify provider and vue wrapper

Browse Source
This commit is contained in:
Shivam Mishra
2025-06-10 17:31:42 +05:30
parent 82e296b152
commit 5d64079a5e
2 changed files with 11 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/react-components/src/components/ChatwootProvider.jsx
+8 -45
View File
@@ -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,
app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
+3 -91
View File
@@ -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>