feat: add dyte bubble

app/javascript/dashboard/components-next/message/Message.vue

@@ -23,6 +23,7 @@ import AttachmentsBubble from './bubbles/Attachments.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
 import ContactBubble from './bubbles/Contact.vue';
+import DyteBubble from './bubbles/Dyte.vue';
 const LocationBubble = defineAsyncComponent(
   () => import('./bubbles/Location.vue')
 );
@@ -79,6 +80,7 @@ import MessageMeta from './MessageMeta.vue';
  * @property {string} content - The message content
  */
 
+// eslint-disable-next-line vue/define-macros-order
 const props = defineProps({
   id: { type: Number, required: true },
   messageType: {
@@ -250,6 +252,10 @@ const componentToRender = computed(() => {
     return UnsupportedBubble;
   }
 
+  if (props.contentAttributes.type === 'dyte') {
+    return DyteBubble;
+  }
+
   if (props.contentAttributes.imageType === 'story_mention') {
     return InstagramStoryBubble;
   }

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -1,4 +1,3 @@
-<!-- AttachmentBubble.vue -->
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -47,9 +46,11 @@ const senderName = computed(() => {
             })
           }}
         </div>
-        <div class="truncate text-sm text-n-slate-11">
-          {{ content }}
-        </div>
+        <slot>
+          <div v-if="content" class="truncate text-sm text-n-slate-11">
+            {{ content }}
+          </div>
+        </slot>
       </div>
     </div>
     <div v-if="action" class="px-3 pb-3">

app/javascript/dashboard/components-next/message/bubbles/Dyte.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, ref } from 'vue';
+import DyteAPI from 'dashboard/api/integrations/dyte';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+const props = defineProps({
+  contentAttributes: {
+    type: String,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const meetingData = computed(() => {
+  return useCamelCase(props.contentAttributes.data);
+});
+
+const isLoading = ref(false);
+const dyteAuthToken = ref('');
+
+const meetingLink = computed(() => {
+  return buildDyteURL(meetingData.value.roomName, dyteAuthToken.value);
+});
+
+const joinTheCall = async () => {
+  isLoading.value = true;
+  try {
+    const { data: { authResponse: { authToken } = {} } = {} } =
+      await DyteAPI.addParticipantToMeeting(meetingData.value.messageId);
+    dyteAuthToken.value = authToken;
+  } catch (err) {
+    useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const leaveTheRoom = () => {
+  this.dyteAuthToken = '';
+};
+const action = computed(() => ({
+  label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
+  onClick: joinTheCall,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-video-camera-fill"
+    icon-bg-color="bg-[#2781F6]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
+    :action="action"
+  >
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+    <div v-else>
+      {{ '' }}
+    </div>
+  </BaseAttachmentBubble>
+</template>
+
+<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: 10rem;
+  }
+}
+</style>

app/javascript/dashboard/components-next/message/stories/Bubbles.story.vue

@@ -290,6 +290,27 @@ const igReel = computed(() =>
     ...baseSenderData.value,
   })
 );
+
+const dyte = computed(() => {
+  return getMessage({
+    messageType: 1,
+    contentType: 'integrations',
+    contentAttributes: {
+      type: 'dyte',
+      data: {
+        meetingId: 'f16bebe6-08b9-4593-899a-849f59c47397',
+        roomName: 'zcufnc-adbjcg',
+      },
+    },
+    senderId: 1,
+    sender: {
+      id: 1,
+      name: 'Shivam Mishra',
+      availableName: 'Shivam Mishra',
+      type: 'user',
+    },
+  });
+});
 </script>
 
 <template>
@@ -331,7 +352,7 @@ const igReel = computed(() =>
     </Variant>
 
     <!-- Files and Attachments -->
-    <Variant title="Attachments Only">
+    <Variant title="Multiple Attachments">
       <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
         <Message :current-user-id="1" v-bind="attachmentsOnly" />
       </div>
@@ -341,8 +362,6 @@ const igReel = computed(() =>
         <Message :current-user-id="1" v-bind="singleFile" />
       </div>
     </Variant>
-
-    <!-- Contact & Location -->
     <Variant title="Contact">
       <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
         <Message :current-user-id="1" v-bind="contact" />
@@ -353,6 +372,11 @@ const igReel = computed(() =>
         <Message :current-user-id="1" v-bind="location" />
       </div>
     </Variant>
+    <Variant title="Dyte Video">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="dyte" />
+      </div>
+    </Variant>
 
     <!-- Platform Specific -->
     <Variant title="Email">