feat: Add the support for video calls with Dyte in the live-chat widget (#6208)

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

app/controllers/api/v1/widget/integrations/dyte_controller.rb

@@ -0,0 +1,36 @@
+class Api::V1::Widget::Integrations::DyteController < Api::V1::Widget::BaseController
+  before_action :set_message
+
+  def add_participant_to_meeting
+    if @message.content_type != 'integrations'
+      return render json: {
+        error: I18n.t('errors.dyte.invalid_message_type')
+      }, status: :unprocessable_entity
+    end
+
+    response = dyte_processor_service.add_participant_to_meeting(
+      @message.content_attributes['data']['meeting_id'],
+      @conversation.contact
+    )
+    render_response(response)
+  end
+
+  private
+
+  def render_response(response)
+    render json: response, status: response[:error].blank? ? :ok : :unprocessable_entity
+  end
+
+  def dyte_processor_service
+    Integrations::Dyte::ProcessorService.new(account: @web_widget.inbox.account, conversation: @conversation)
+  end
+
+  def set_message
+    @message = @web_widget.inbox.messages.find(permitted_params[:message_id])
+    @conversation = @message.conversation
+  end
+
+  def permitted_params
+    params.permit(:website_token, :message_id)
+  end
+end

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

@@ -14,16 +14,16 @@ export default {
   mixins: [inboxMixin],
   props: {
     messageId: {
-      type: Number,
-      required: true,
+      type: [String, Number],
+      default: 0,
     },
     contentAttributes: {
       type: Object,
       default: () => ({}),
     },
     inboxId: {
-      type: Number,
-      required: true,
+      type: [String, Number],
+      default: 0,
     },
   },
   computed: {

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

@@ -30,8 +30,7 @@
 </template>
 <script>
 import DyteAPI from 'dashboard/api/integrations/dyte';
-
-const DYTE_MEETING_LINK = 'https://app.dyte.in/meeting/stage/';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
 import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
@@ -51,7 +50,7 @@ export default {
   },
   computed: {
     meetingLink() {
-      return `${DYTE_MEETING_LINK}${this.meetingData.room_name}?authToken=${this.dyteAuthToken}&showSetupScreen=true&disableVideoBackground=true`;
+      return buildDyteURL(this.meetingData.room_name, this.dyteAuthToken);
     },
   },
   methods: {

app/javascript/sdk/IFrameHelper.js

@@ -56,7 +56,8 @@ export const IFrameHelper = {
       widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
     }
     iframe.src = widgetUrl;
-
+    iframe.allow =
+      'camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;';
     iframe.id = 'chatwoot_live_chat_widget';
     iframe.style.visibility = 'hidden';
 

app/javascript/shared/components/FluentIcon/icons.json

@@ -13,5 +13,10 @@
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
   "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
   "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z",
-  "sign-out-outline": ["M8.502 11.5a1.002 1.002 0 1 1 0 2.004 1.002 1.002 0 0 1 0-2.004Z", "M12 4.354v6.651l7.442-.001L17.72 9.28a.75.75 0 0 1-.073-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073 2.997 2.997a.75.75 0 0 1 .073.976l-.073.084-2.996 3.004a.75.75 0 0 1-1.134-.975l.072-.085 1.713-1.717-7.431.001L12 19.25a.75.75 0 0 1-.88.739l-8.5-1.502A.75.75 0 0 1 2 17.75V5.75a.75.75 0 0 1 .628-.74l8.5-1.396a.75.75 0 0 1 .872.74Zm-1.5.883-7 1.15V17.12l7 1.236V5.237Z", "M13 18.501h.765l.102-.006a.75.75 0 0 0 .648-.745l-.007-4.25H13v5.001ZM13.002 10 13 8.725V5h.745a.75.75 0 0 1 .743.647l.007.102.007 4.251h-1.5Z"]
+  "video-add-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-1.063c.154-.478.255-.98.294-1.5h.769a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6h-8.5A1.75 1.75 0 0 0 3.5 7.75v3.982A6.517 6.517 0 0 0 2 12.81V7.75A3.25 3.25 0 0 1 5.25 4.5h8.5Zm6.75 3.073L17 9.674v4.651l3.5 2.1V7.573ZM12 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM7 18l.001 2.503a.5.5 0 1 1-1 0V18H3.496a.5.5 0 0 1 0-1H6v-2.5a.5.5 0 1 1 1 0V17h2.497a.5.5 0 0 1 0 1H7Z",
+  "sign-out-outline": [
+    "M8.502 11.5a1.002 1.002 0 1 1 0 2.004 1.002 1.002 0 0 1 0-2.004Z",
+    "M12 4.354v6.651l7.442-.001L17.72 9.28a.75.75 0 0 1-.073-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073 2.997 2.997a.75.75 0 0 1 .073.976l-.073.084-2.996 3.004a.75.75 0 0 1-1.134-.975l.072-.085 1.713-1.717-7.431.001L12 19.25a.75.75 0 0 1-.88.739l-8.5-1.502A.75.75 0 0 1 2 17.75V5.75a.75.75 0 0 1 .628-.74l8.5-1.396a.75.75 0 0 1 .872.74Zm-1.5.883-7 1.15V17.12l7 1.236V5.237Z",
+    "M13 18.501h.765l.102-.006a.75.75 0 0 0 .648-.745l-.007-4.25H13v5.001ZM13.002 10 13 8.725V5h.745a.75.75 0 0 1 .743.647l.007.102.007 4.251h-1.5Z"
+  ]
 }

app/javascript/shared/helpers/IntegrationHelper.js

@@ -0,0 +1,5 @@
+const DYTE_MEETING_LINK = 'https://app.dyte.in/meeting/stage/';
+
+export const buildDyteURL = (roomName, dyteAuthToken) => {
+  return `${DYTE_MEETING_LINK}${roomName}?authToken=${dyteAuthToken}&showSetupScreen=true&disableVideoBackground=true`;
+};

app/javascript/widget/api/integration.js

@@ -0,0 +1,12 @@
+import { API } from 'widget/helpers/axios';
+import { buildSearchParamsWithLocale } from '../helpers/urlParamsHelper';
+
+export default {
+  addParticipantToDyteMeeting: messageId => {
+    const search = buildSearchParamsWithLocale(window.location.search);
+    const urlData = {
+      url: `/api/v1/widget/integrations/dyte/add_participant_to_meeting${search}`,
+    };
+    return API.post(urlData.url, { message_id: messageId });
+  },
+};

app/javascript/widget/components/AgentMessageBubble.vue

@@ -17,6 +17,12 @@
         :message-id="messageId"
         :message-content-attributes="messageContentAttributes"
       />
+
+      <integration-card
+        v-if="isIntegrations"
+        :message-id="messageId"
+        :meeting-data="messageContentAttributes.data"
+      />
     </div>
     <div v-if="isOptions">
       <chat-options
@@ -63,6 +69,7 @@ import ChatArticle from './template/Article';
 import EmailInput from './template/EmailInput';
 import CustomerSatisfaction from 'shared/components/CustomerSatisfaction';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import IntegrationCard from './template/IntegrationCard';
 
 export default {
   name: 'AgentMessageBubble',
@@ -73,6 +80,7 @@ export default {
     ChatOptions,
     EmailInput,
     CustomerSatisfaction,
+    IntegrationCard,
   },
   mixins: [messageFormatterMixin, darkModeMixin],
   props: {
@@ -107,6 +115,9 @@ export default {
     isCSAT() {
       return this.contentType === 'input_csat';
     },
+    isIntegrations() {
+      return this.contentType === 'integrations';
+    },
   },
   methods: {
     onResponse(messageResponse) {

app/javascript/widget/components/template/IntegrationCard.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <button
+      class="button join-call-button"
+      color-scheme="secondary"
+      :is-loading="isLoading"
+      :style="{
+        background: widgetColor,
+        borderColor: widgetColor,
+        color: textColor,
+      }"
+      @click="joinTheCall"
+    >
+      <fluent-icon icon="video-add" class="mr-2" />
+      {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
+    </button>
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="button small join-call-button leave-room-button"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+import IntegrationAPIClient from 'widget/api/integration';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { getContrastingTextColor } from '@chatwoot/utils';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    FluentIcon,
+  },
+  props: {
+    messageId: {
+      type: Number,
+      required: true,
+    },
+    meetingData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
+  },
+  computed: {
+    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+    meetingLink() {
+      return buildDyteURL(this.meetingData.room_name, this.dyteAuthToken);
+    },
+  },
+  methods: {
+    async joinTheCall() {
+      this.isLoading = true;
+      try {
+        const {
+          data: { authResponse: { authToken = '' } = {} } = {},
+        } = await IntegrationAPIClient.addParticipantToDyteMeeting(
+          this.messageId
+        );
+        this.dyteAuthToken = authToken;
+      } catch (error) {
+        // Ignore Error for now
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    leaveTheRoom() {
+      this.dyteAuthToken = '';
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.video-call--container {
+  position: fixed;
+  top: 72px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: 100;
+
+  iframe {
+    width: 100%;
+    height: calc(100% - 72px);
+
+    border: 0;
+  }
+}
+
+.join-call-button {
+  margin: $space-small 0;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.leave-room-button {
+  position: absolute;
+  top: 0;
+  right: $space-small;
+}
+</style>

app/javascript/widget/i18n/locale/en.json

@@ -86,5 +86,11 @@
     "BUTTON_TEXT": "Request a conversation transcript",
     "SEND_EMAIL_SUCCESS": "The chat transcript was sent successfully",
     "SEND_EMAIL_ERROR": "There was an error, please try again"
+  },
+  "INTEGRATIONS": {
+    "DYTE": {
+      "CLICK_HERE_TO_JOIN": "Click here to join",
+      "LEAVE_THE_ROOM": "Leave the call"
+    }
   }
 }

config/routes.rb

@@ -217,6 +217,13 @@ Rails.application.routes.draw do
         end
         resources :inbox_members, only: [:index]
         resources :labels, only: [:create, :destroy]
+        namespace :integrations do
+          resource :dyte, controller: 'dyte', only: [] do
+            collection do
+              post :add_participant_to_meeting
+            end
+          end
+        end
       end
     end
 

spec/controllers/api/v1/widget/integrations/dyte_controller_spec.rb

@@ -0,0 +1,74 @@
+require 'rails_helper'
+
+RSpec.describe '/api/v1/widget/integrations/dyte', type: :request do
+  let(:account) { create(:account) }
+  let(:web_widget) { create(:channel_widget, account: account) }
+  let(:contact) { create(:contact, account: account, email: nil) }
+  let(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: web_widget.inbox) }
+  let(:conversation) { create(:conversation, contact: contact, account: account, inbox: web_widget.inbox, contact_inbox: contact_inbox) }
+  let(:payload) { { source_id: contact_inbox.source_id, inbox_id: web_widget.inbox.id } }
+  let(:token) { ::Widget::TokenService.new(payload: payload).generate_token }
+  let(:message) { create(:message, conversation: conversation, account: account, inbox: conversation.inbox) }
+  let!(:integration_message) do
+    create(:message, content_type: 'integrations',
+                     content_attributes: { type: 'dyte', data: { meeting_id: 'm_id' } },
+                     conversation: conversation, account: account, inbox: conversation.inbox)
+  end
+
+  before do
+    create(:integrations_hook, :dyte, account: account)
+  end
+
+  describe 'POST /api/v1/widget/integrations/dyte/add_participant_to_meeting' do
+    context 'when token is invalid' do
+      it 'returns error' do
+        post add_participant_to_meeting_api_v1_widget_integrations_dyte_url,
+             params: { website_token: web_widget.website_token },
+             as: :json
+
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+
+    context 'when token is valid' do
+      context 'when message is not an integration message' do
+        it 'returns error' do
+          post add_participant_to_meeting_api_v1_widget_integrations_dyte_url,
+               headers: { 'X-Auth-Token' => token },
+               params: { website_token: web_widget.website_token, message_id: message.id },
+               as: :json
+
+          expect(response).to have_http_status(:unprocessable_entity)
+          response_body = JSON.parse(response.body)
+          expect(response_body['error']).to eq('Invalid message type. Action not permitted')
+        end
+      end
+
+      context 'when message is an integration message' do
+        before do
+          stub_request(:post, 'https://api.cluster.dyte.in/v1/organizations/org_id/meetings/m_id/participant')
+            .to_return(
+              status: 200,
+              body: { success: true, data: { authResponse: { userAdded: true, id: 'random_uuid', auth_token: 'json-web-token' } } }.to_json,
+              headers: { 'Content-Type' => 'application/json' }
+            )
+        end
+
+        it 'returns authResponse' do
+          post add_participant_to_meeting_api_v1_widget_integrations_dyte_url,
+               headers: { 'X-Auth-Token' => token },
+               params: { website_token: web_widget.website_token, message_id: integration_message.id },
+               as: :json
+
+          expect(response).to have_http_status(:success)
+          response_body = JSON.parse(response.body)
+          expect(response_body['authResponse']).to eq(
+            {
+              'userAdded' => true, 'id' => 'random_uuid', 'auth_token' => 'json-web-token'
+            }
+          )
+        end
+      end
+    end
+  end
+end