74db16158d
Dyte is sunsetting its existing infrastructure after the Cloudflare acquisition, so this migrates Chatwoot’s video call integration to Cloudflare RealtimeKit. The integration now uses Cloudflare Account ID, RealtimeKit App ID, and a Cloudflare API token with Realtime Admin permissions. Meeting creation and participant token generation now call Cloudflare’s RealtimeKit APIs, while the existing Chatwoot call experience remains unchanged for agents and customers. This also adds setup-time credential validation, so admins get clearer errors when the API token is invalid, the Cloudflare account or permissions are incorrect, or the RealtimeKit App ID does not belong to the selected account. Fixes https://linear.app/chatwoot/issue/PLA-176/migrate-dyte-integration-to-cloudflare-realtimekit **How to test** 1. Go to Settings → Integrations → Cloudflare RealtimeKit. 2. Add a Cloudflare Account ID, RealtimeKit App ID, and API token with Realtime Admin permissions. 3. Confirm the integration saves successfully with valid credentials. 4. Try invalid credentials and confirm the error identifies whether the token, account/permissions, or app ID is wrong. 5. Start a video call from a conversation and confirm the RealtimeKit meeting opens. --------- Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com> Co-authored-by: Sony Mathew <sony@chatwoot.com>
72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import DyteAPI from 'dashboard/api/integrations/dyte';
|
|
import { useAlert } from 'dashboard/composables';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
|
|
export default {
|
|
components: {
|
|
NextButton,
|
|
},
|
|
props: {
|
|
conversationId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return { isLoading: false };
|
|
},
|
|
computed: {
|
|
...mapGetters({ appIntegrations: 'integrations/getAppIntegrations' }),
|
|
isVideoIntegrationEnabled() {
|
|
return this.appIntegrations.find(
|
|
integration => integration.id === 'dyte' && !!integration.hooks.length
|
|
);
|
|
},
|
|
},
|
|
mounted() {
|
|
if (!this.appIntegrations.length) {
|
|
this.$store.dispatch('integrations/get');
|
|
}
|
|
},
|
|
methods: {
|
|
createErrorMessage(error) {
|
|
const responseError = error?.response?.data?.error;
|
|
if (typeof responseError === 'string') return responseError;
|
|
|
|
return (
|
|
responseError?.error?.message ||
|
|
responseError?.message ||
|
|
this.$t('INTEGRATION_SETTINGS.DYTE.CREATE_ERROR')
|
|
);
|
|
},
|
|
async onClick() {
|
|
this.isLoading = true;
|
|
try {
|
|
await DyteAPI.createAMeeting(this.conversationId);
|
|
} catch (error) {
|
|
useAlert(this.createErrorMessage(error));
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- eslint-disable-next-line vue/no-root-v-if -->
|
|
<template>
|
|
<NextButton
|
|
v-if="isVideoIntegrationEnabled"
|
|
v-tooltip.top-end="
|
|
$t('INTEGRATION_SETTINGS.DYTE.START_VIDEO_CALL_HELP_TEXT')
|
|
"
|
|
icon="i-ph-video-camera"
|
|
slate
|
|
faded
|
|
sm
|
|
@click="onClick"
|
|
/>
|
|
</template>
|