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

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

app/javascript/widget/views/Unread.vue

@@ -12,12 +12,14 @@
     </div>
     <div class="unread-messages">
       <unread-message
-        v-for="(message, index) in unreadMessages"
+        v-for="(message, index) in allMessages"
         :key="message.id"
+        :message-type="message.messageType"
         :message-id="message.id"
         :show-sender="!index"
         :sender="message.sender"
         :message="getMessageContent(message)"
+        :campaign-id="message.campaignId"
       />
     </div>
 
@@ -60,10 +62,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    showUnreadView: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
       unreadMessages: 'conversation/getUnreadTextMessages',
+      campaign: 'campaign/getActiveCampaign',
     }),
     showCloseButton() {
       return this.unreadMessageCount && this.hideMessageBubble;
@@ -72,6 +79,19 @@ export default {
       const [firstMessage] = this.unreadMessages;
       return firstMessage.sender || {};
     },
+    allMessages() {
+      if (this.showUnreadView) {
+        return this.unreadMessages;
+      }
+      const { sender, id: campaignId, message: content } = this.campaign;
+      return [
+        {
+          content,
+          sender,
+          campaignId,
+        },
+      ];
+    },
   },
   methods: {
     openFullView() {