feat: Ability to reply to specific tweets (#1117)

Ability to choose a specific tweet to reply to

Fixes #982
Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -5,7 +5,7 @@
       :is-contact-panel-open="isContactPanelOpen"
       @contactPanelToggle="onToggleContactPanel"
     />
-    <div v-if="!currentChat.can_reply" class="messenger-policy--banner">
+    <div v-if="!currentChat.can_reply" class="banner messenger-policy--banner">
       <span>
         {{ $t('CONVERSATION.CANNOT_REPLY') }}
         <a
@@ -17,6 +17,23 @@
         </a>
       </span>
     </div>
+
+    <div v-if="isATweet" class="banner">
+      <span v-if="!selectedTweetId">
+        {{ $t('CONVERSATION.LAST_INCOMING_TWEET') }}
+      </span>
+      <span v-else>
+        {{ $t('CONVERSATION.REPLYING_TO') }}
+        {{ selectedTweet }}
+      </span>
+      <button
+        v-if="selectedTweetId"
+        class="banner-close-button"
+        @click="removeTweetSelection"
+      >
+        <i v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')" class="ion-close" />
+      </button>
+    </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
         <li class="spinner--container">
@@ -27,6 +44,7 @@
         v-for="message in getReadMessages"
         :key="message.id"
         :data="message"
+        :is-a-tweet="isATweet"
       />
       <li v-show="getUnreadCount != 0" class="unread--toast">
         <span>
@@ -37,6 +55,7 @@
         v-for="message in getUnReadMessages"
         :key="message.id"
         :data="message"
+        :is-a-tweet="isATweet"
       />
     </ul>
     <div class="conversation-footer">
@@ -52,6 +71,7 @@
       </div>
       <ReplyBox
         :conversation-id="currentChat.id"
+        :in-reply-to="selectedTweetId"
         @scrollToMessage="scrollToBottom"
       />
     </div>
@@ -59,7 +79,6 @@
 </template>
 
 <script>
-/* global bus */
 import { mapGetters } from 'vuex';
 
 import ConversationHeader from './ConversationHeader';
@@ -67,6 +86,7 @@ import ReplyBox from './ReplyBox';
 import Message from './Message';
 import conversationMixin from '../../../mixins/conversations';
 import { getTypingUsersText } from '../../../helper/commons';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
@@ -93,6 +113,7 @@ export default {
       isLoadingPrevious: true,
       heightBeforeLoad: null,
       conversationPanel: null,
+      selectedTweetId: null,
     };
   },
 
@@ -151,6 +172,36 @@ export default {
     shouldLoadMoreChats() {
       return !this.listLoadingStatus && !this.isLoadingPrevious;
     },
+
+    conversationType() {
+      const { additional_attributes: additionalAttributes } = this.currentChat;
+      const type = additionalAttributes ? additionalAttributes.type : '';
+      return type || '';
+    },
+
+    isATweet() {
+      return this.conversationType === 'tweet';
+    },
+
+    selectedTweet() {
+      if (this.selectedTweetId) {
+        const { messages = [] } = this.getMessages;
+        const [selectedMessage = {}] = messages.filter(
+          message => message.id === this.selectedTweetId
+        );
+        return selectedMessage.content || '';
+      }
+      return '';
+    },
+  },
+
+  watch: {
+    currentChat(newChat, oldChat) {
+      if (newChat.id === oldChat.id) {
+        return;
+      }
+      this.selectedTweetId = null;
+    },
   },
 
   created() {
@@ -158,6 +209,10 @@ export default {
       setTimeout(() => this.scrollToBottom(), 0);
       this.makeMessagesRead();
     });
+
+    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, selectedTweetId => {
+      this.selectedTweetId = selectedTweetId;
+    });
   },
 
   mounted() {
@@ -220,23 +275,37 @@ export default {
     makeMessagesRead() {
       this.$store.dispatch('markMessagesRead', { id: this.currentChat.id });
     },
+    removeTweetSelection() {
+      this.selectedTweetId = null;
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.messenger-policy--banner {
-  background: var(--r-400);
+.banner {
+  background: var(--b-500);
   color: var(--white);
   font-size: var(--font-size-mini);
   padding: var(--space-slab) var(--space-normal);
   text-align: center;
+  position: relative;
 
   a {
     text-decoration: underline;
     color: var(--white);
     font-size: var(--font-size-mini);
   }
+
+  &.messenger-policy--banner {
+    background: var(--r-400);
+  }
+
+  .banner-close-button {
+    cursor: pointer;
+    margin-left: var(--space--two);
+    color: var(--white);
+  }
 }
 
 .spinner--container {