From 873e67363d8f040994c6535a4ce4a18eba0194bf Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 12 Dec 2024 13:25:44 +0530
Subject: [PATCH] feat: add bubble names

---
 .../dashboard/components-next/message/bubbles/Activity.vue   | 4 ++--
 .../components-next/message/bubbles/Attachments.vue          | 2 +-
 .../dashboard/components-next/message/bubbles/Audio.vue      | 2 +-
 .../components-next/message/bubbles/BaseAttachment.vue       | 5 ++++-
 .../components-next/message/bubbles/Email/Index.vue          | 2 +-
 .../components-next/message/bubbles/InstagramStory.vue       | 2 +-
 .../dashboard/components-next/message/bubbles/Text.vue       | 2 +-
 .../components-next/message/bubbles/Unsupported.vue          | 2 +-
 8 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Activity.vue b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
index 6da4c7eb9..72fa1a3b9 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
@@ -10,7 +10,7 @@ defineProps({
 </script>
 
 <template>
-  <BaseBubble class="px-2 py-0.5">
-    <span v-html="content" />
+  <BaseBubble class="px-2 py-0.5" data-bubble-name="activity">
+    <span v-dompurify-html="content" />
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
index 1dcdf21d7..af3593d82 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
@@ -24,7 +24,7 @@ defineProps({
 </script>
 
 <template>
-  <BaseBubble class="grid gap-2 bg-transparent">
+  <BaseBubble class="grid gap-2 bg-transparent" data-bubble-name="attachments">
     <AttachmentChips :attachments="attachments" class="gap-1" />
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
index ca45bd71a..eed369abc 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
@@ -35,7 +35,7 @@ const attachment = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="bg-transparent">
+  <BaseBubble class="bg-transparent" data-bubble-name="audio">
     <AudioChip
       :attachment="attachment"
       class="p-2 text-n-slate-12 bg-n-alpha-3"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
index a2d215721..45880d521 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -27,7 +27,10 @@ const senderName = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="overflow-hidden grid gap-4 min-w-64 p-0">
+  <BaseBubble
+    class="overflow-hidden grid gap-4 min-w-64 p-0"
+    data-bubble-name="attachment"
+  >
     <slot name="before" />
     <div class="grid gap-3 px-3 pt-3 z-20">
       <div
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index df1abe04c..2dc701a1f 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -63,7 +63,7 @@ const textToShow = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="w-full overflow-hidden">
+  <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
     <EmailMeta :status :sender :content-attributes />
     <section
       ref="contentContainer"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
index 4ab38740b..7e34a0169 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -61,7 +61,7 @@ const onVideoLoadError = () => {
 </script>
 
 <template>
-  <BaseBubble class="p-3 overflow-hidden">
+  <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
     <div v-if="content" class="mb-2" v-html="formattedContent" />
     <img
       v-if="!hasImgStoryError"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index b269264e1..29fdff768 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -42,7 +42,7 @@ const formattedContent = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="p-3 grid gap-3">
+  <BaseBubble class="p-3 grid gap-3" data-bubble-name="text">
     <span v-if="content" v-html="formattedContent" />
     <AttachmentChips :attachments="attachments" class="gap-2" />
   </BaseBubble>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
index 775703587..a4304d181 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
@@ -3,7 +3,7 @@ import BaseBubble from './Base.vue';
 </script>
 
 <template>
-  <BaseBubble class="p-3 text-sm">
+  <BaseBubble class="p-3 text-sm" data-bubble-name="unsupported">
     {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
   </BaseBubble>
 </template>