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

@@ -9,13 +9,13 @@
     }"
   >
     <home
-      v-if="!showUnreadView"
+      v-if="showHomePage"
       :has-fetched="hasFetched"
       :unread-message-count="unreadMessageCount"
       :show-popout-button="showPopoutButton"
     />
     <unread
-      v-else
+      :show-unread-view="showUnreadView"
       :has-fetched="hasFetched"
       :unread-message-count="unreadMessageCount"
       :hide-message-bubble="hideMessageBubble"
@@ -50,6 +50,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showCampaignView: {
+      type: Boolean,
+      default: false,
+    },
     hideMessageBubble: {
       type: Boolean,
       default: false,
@@ -63,5 +67,10 @@ export default {
       default: false,
     },
   },
+  computed: {
+    showHomePage() {
+      return !this.showUnreadView && !this.showCampaignView;
+    },
+  },
 };
 </script>

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() {