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/bubble/Actions.vue

@@ -13,12 +13,32 @@
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
     />
+    <i
+      v-if="isATweet && isIncoming"
+      v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
+      class="icon ion-reply cursor-pointer"
+      @click="onTweetReply"
+    />
+    <a :href="linkToTweet" target="_blank" rel="noopener noreferrer nofollow">
+      <i
+        v-if="isATweet && isIncoming"
+        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
+        class="icon ion-android-open cursor-pointer"
+      />
+    </a>
   </div>
 </template>
 
 <script>
+import { MESSAGE_TYPE } from 'shared/constants/messageTypes';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
 export default {
   props: {
+    sender: {
+      type: Object,
+      default: () => ({}),
+    },
     readableTime: {
       type: String,
       default: '',
@@ -31,6 +51,41 @@ export default {
       type: Boolean,
       default: true,
     },
+    isATweet: {
+      type: Boolean,
+      default: true,
+    },
+    messageType: {
+      type: Number,
+      default: 1,
+    },
+    sourceId: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: [String, Number],
+      default: '',
+    },
+  },
+  computed: {
+    isIncoming() {
+      return MESSAGE_TYPE.INCOMING === this.messageType;
+    },
+    screenName() {
+      const { additional_attributes: additionalAttributes = {} } =
+        this.sender || {};
+      return additionalAttributes?.screen_name || '';
+    },
+    linkToTweet() {
+      const { screenName, sourceId } = this;
+      return `https://twitter.com/${screenName}/status/${sourceId}`;
+    },
+  },
+  methods: {
+    onTweetReply() {
+      bus.$emit(BUS_EVENTS.SET_TWEET_REPLY, this.id);
+    },
   },
 };
 </script>
@@ -65,6 +120,13 @@ export default {
 
   i {
     line-height: 1.4;
+    padding-right: var(--space-small);
+    padding-left: var(--space-small);
+    color: var(--s-900);
+  }
+
+  a {
+    color: var(--s-900);
   }
 }