feat: Add video call option with Dyte in the dashboard (#6207)

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue

@@ -0,0 +1,39 @@
+<template>
+  <dyte-video-call
+    v-if="showDyteIntegration"
+    :message-id="messageId"
+    :meeting-data="contentAttributes.data"
+  />
+</template>
+<script>
+import DyteVideoCall from './integrations/Dyte.vue';
+import inboxMixin from 'shared/mixins/inboxMixin';
+
+export default {
+  components: { DyteVideoCall },
+  mixins: [inboxMixin],
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    contentAttributes: {
+      type: Object,
+      default: () => ({}),
+    },
+    inboxId: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    showDyteIntegration() {
+      const isEnabledOnTheInbox = this.isAPIInbox || this.isAWebWidgetInbox;
+      return isEnabledOnTheInbox && this.contentAttributes.type === 'dyte';
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.inboxId);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      icon="video-add"
+      class="join-call-button"
+      :is-loading="isLoading"
+      @click="joinTheCall"
+    >
+      {{ $t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </woot-button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <woot-button
+        size="small"
+        variant="smooth"
+        color-scheme="secondary"
+        class="join-call-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+import DyteAPI from 'dashboard/api/integrations/dyte';
+
+const DYTE_MEETING_LINK = 'https://app.dyte.in/meeting/stage/';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    meetingData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
+  },
+  computed: {
+    meetingLink() {
+      return `${DYTE_MEETING_LINK}${this.meetingData.room_name}?authToken=${this.dyteAuthToken}&showSetupScreen=true&disableVideoBackground=true`;
+    },
+  },
+  methods: {
+    async joinTheCall() {
+      this.isLoading = true;
+      try {
+        const {
+          data: { authResponse: { authToken } = {} } = {},
+        } = await DyteAPI.addParticipantToMeeting(this.messageId);
+        this.dyteAuthToken = authToken;
+      } catch (err) {
+        this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    leaveTheRoom() {
+      this.dyteAuthToken = '';
+    },
+  },
+};
+</script>
+<style lang="scss">
+.join-call-button {
+  margin: var(--space-small) 0;
+}
+
+.video-call--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-high);
+  padding: var(--space-smaller);
+  background: var(--b-800);
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  button {
+    position: absolute;
+    top: var(--space-smaller);
+    right: 16rem;
+  }
+}
+</style>