feat: Create campaign conversation only if user interacts with the bubble (#2335)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/UnreadMessage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chat-bubble-wrap">
-    <div class="chat-bubble agent">
+    <button class="chat-bubble agent" @click="onClickMessage">
       <div v-if="showSender" class="row--agent-block">
         <thumbnail
           :src="avatarUrl"
@@ -12,7 +12,7 @@
         <span class="company--name"> {{ companyName }}</span>
       </div>
       <div class="message-content" v-html="formatMessage(message, false)"></div>
-    </div>
+    </button>
   </div>
 </template>
 
@@ -38,6 +38,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    campaignId: {
+      type: Number,
+      default: null,
+    },
   },
   computed: {
     companyName() {
@@ -76,6 +80,11 @@ export default {
     isSenderExist(sender) {
       return sender && !isEmptyObject(sender);
     },
+    onClickMessage() {
+      if (this.campaignId) {
+        bus.$emit('on-campaign-view-clicked', this.campaignId);
+      }
+    },
   },
 };
 </script>
@@ -84,7 +93,9 @@ export default {
 .chat-bubble {
   max-width: 85%;
   padding: $space-normal;
+  cursor: pointer;
 }
+
 .row--agent-block {
   align-items: center;
   display: flex;