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

@@ -23,11 +23,27 @@
           </span>
         </span>
         <bubble-actions
+          :id="data.id"
+          :sender="data.sender"
+          :is-a-tweet="isATweet"
           :is-email="isEmailContentType"
-          :readable-time="readableTime"
           :is-private="data.private"
+          :message-type="data.message_type"
+          :readable-time="readableTime"
+          :source-id="data.source_id"
         />
       </p>
+
+      <div v-if="isATweet && isIncoming && sender" class="sender--info">
+        <woot-thumbnail
+          :src="sender.thumbnail"
+          :username="sender.name"
+          size="16px"
+        />
+        <div class="sender--available-name">
+          {{ sender.available_name || sender.name }}
+        </div>
+      </div>
     </div>
   </li>
 </template>
@@ -40,6 +56,8 @@ import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import BubbleActions from './bubble/Actions';
+import { MESSAGE_TYPE } from 'shared/constants/messageTypes';
+
 export default {
   components: {
     BubbleActions,
@@ -53,6 +71,10 @@ export default {
       type: Object,
       required: true,
     },
+    isATweet: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -61,7 +83,10 @@ export default {
   },
   computed: {
     message() {
-      return this.formatMessage(this.data.content);
+      return this.formatMessage(this.data.content, this.isATweet);
+    },
+    sender() {
+      return this.data.sender || {};
     },
     contentType() {
       const {
@@ -78,6 +103,9 @@ export default {
     isBubble() {
       return [0, 1, 3].includes(this.data.message_type);
     },
+    isIncoming() {
+      return this.data.message_type === MESSAGE_TYPE.INCOMING;
+    },
     hasAttachments() {
       return !!(this.data.attachments && this.data.attachments.length > 0);
     },
@@ -90,7 +118,7 @@ export default {
       return false;
     },
     sentByMessage() {
-      const { sender } = this.data;
+      const { sender } = this;
 
       return this.data.message_type === 1 && !this.isHovered && sender
         ? {
@@ -128,4 +156,15 @@ export default {
     padding: 0;
   }
 }
+
+.sender--info {
+  display: flex;
+  align-items: center;
+  padding: var(--space-smaller) 0;
+
+  .sender--available-name {
+    font-size: var(--font-size-mini);
+    margin-left: var(--space-smaller);
+  }
+}
 </style>