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/Message.vue

@@ -1,8 +1,5 @@
 <template>
-  <li
-    v-if="hasAttachments || data.content || isEmailContentType"
-    :class="alignBubble"
-  >
+  <li v-if="shouldRenderMessage" :class="alignBubble">
     <div :class="wrapClass">
       <div v-tooltip.top-start="messageToolTip" :class="bubbleClass">
         <bubble-mail-head
@@ -17,6 +14,11 @@
           :is-email="isEmailContentType"
           :display-quoted-button="displayQuotedButton"
         />
+        <bubble-integration
+          :message-id="data.id"
+          :content-attributes="contentAttributes"
+          :inbox-id="data.inbox_id"
+        />
         <span
           v-if="isPending && hasAttachments"
           class="chat-bubble has-attachment agent"
@@ -111,14 +113,14 @@
 </template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import BubbleActions from './bubble/Actions';
+import BubbleFile from './bubble/File';
+import BubbleImage from './bubble/Image';
+import BubbleIntegration from './bubble/Integration.vue';
+import BubbleLocation from './bubble/Location';
 import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
-import BubbleImage from './bubble/Image';
-import BubbleFile from './bubble/File';
 import BubbleVideo from './bubble/Video.vue';
-import BubbleActions from './bubble/Actions';
-import BubbleLocation from './bubble/Location';
-
 import Spinner from 'shared/components/Spinner';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu';
 
@@ -130,12 +132,13 @@ import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 export default {
   components: {
     BubbleActions,
-    BubbleText,
-    BubbleImage,
     BubbleFile,
-    BubbleVideo,
-    BubbleMailHead,
+    BubbleImage,
+    BubbleIntegration,
     BubbleLocation,
+    BubbleMailHead,
+    BubbleText,
+    BubbleVideo,
     ContextMenu,
     Spinner,
   },
@@ -169,6 +172,14 @@ export default {
     };
   },
   computed: {
+    shouldRenderMessage() {
+      return (
+        this.hasAttachments ||
+        this.data.content ||
+        this.isEmailContentType ||
+        this.isAnIntegrationMessage
+      );
+    },
     emailMessageContent() {
       const {
         html_content: { full: fullHTMLContent } = {},
@@ -274,6 +285,9 @@ export default {
     isTemplate() {
       return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
     },
+    isAnIntegrationMessage() {
+      return this.contentType === 'integrations';
+    },
     emailHeadAttributes() {
       return {
         email: this.contentAttributes.email,