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/shared/constants/busEvents.js

@@ -0,0 +1,3 @@
+export const BUS_EVENTS = {
+  SET_TWEET_REPLY: 'SET_TWEET_REPLY',
+};

app/javascript/shared/constants/messageTypes.js

@@ -0,0 +1,6 @@
+export const MESSAGE_TYPE = {
+  INCOMING: 0,
+  OUTGOING: 1,
+  ACTIVITY: 2,
+  TEMPLATE: 3,
+};

app/javascript/shared/helpers/MessageFormatter.js

@@ -1,13 +1,32 @@
 import { escapeHtml } from './HTMLSanitizer';
+const TWITTER_USERNAME_REGEX = /(^|[^@\w])@(\w{1,15})\b/g;
+const TWITTER_USERNAME_REPLACEMENT =
+  '$1<a href="http://twitter.com/$2" target="_blank" rel="noreferrer nofollow noopener">@$2</a>';
+
+const TWITTER_HASH_REGEX = /(^|\s)#(\w+)/g;
+const TWITTER_HASH_REPLACEMENT =
+  '$1<a href="https://twitter.com/hashtag/$2" target="_blank" rel="noreferrer nofollow noopener">#$2</a>';
 
 class MessageFormatter {
-  constructor(message) {
+  constructor(message, isATweet = false) {
     this.message = escapeHtml(message || '') || '';
+    this.isATweet = isATweet;
   }
 
   formatMessage() {
     const linkifiedMessage = this.linkify();
-    return linkifiedMessage.replace(/\n/g, '<br>');
+    const messageWithNextLines = linkifiedMessage.replace(/\n/g, '<br>');
+    if (this.isATweet) {
+      const messageWithUserName = messageWithNextLines.replace(
+        TWITTER_USERNAME_REGEX,
+        TWITTER_USERNAME_REPLACEMENT
+      );
+      return messageWithUserName.replace(
+        TWITTER_HASH_REGEX,
+        TWITTER_HASH_REPLACEMENT
+      );
+    }
+    return messageWithNextLines;
   }
 
   linkify() {

app/javascript/shared/helpers/specs/MessageFormatter.spec.js

@@ -10,4 +10,26 @@ describe('#MessageFormatter', () => {
       );
     });
   });
+
+  describe('tweets', () => {
+    it('should return the same string if not tags or @mentions', () => {
+      const message = 'Chatwoot is an opensource tool';
+      expect(new MessageFormatter(message).formattedMessage).toEqual(message);
+    });
+
+    it('should add links to @mentions', () => {
+      const message =
+        '@chatwootapp is an opensource tool thanks @longnonexistenttwitterusername';
+      expect(new MessageFormatter(message, true).formattedMessage).toEqual(
+        '<a href="http://twitter.com/chatwootapp" target="_blank" rel="noreferrer nofollow noopener">@chatwootapp</a> is an opensource tool thanks @longnonexistenttwitterusername'
+      );
+    });
+
+    it('should add links to #tags', () => {
+      const message = '#chatwootapp is an opensource tool';
+      expect(new MessageFormatter(message, true).formattedMessage).toEqual(
+        '<a href="https://twitter.com/hashtag/chatwootapp" target="_blank" rel="noreferrer nofollow noopener">#chatwootapp</a> is an opensource tool'
+      );
+    });
+  });
 });

app/javascript/shared/mixins/alertMixin.js

@@ -1,4 +1,3 @@
-/* global bus */
 export default {
   methods: {
     showAlert(message) {

app/javascript/shared/mixins/messageFormatterMixin.js

@@ -2,8 +2,8 @@ import MessageFormatter from '../helpers/MessageFormatter';
 
 export default {
   methods: {
-    formatMessage(message) {
-      const messageFormatter = new MessageFormatter(message);
+    formatMessage(message, isATweet) {
+      const messageFormatter = new MessageFormatter(message, isATweet);
       return messageFormatter.formattedMessage;
     },
     truncateMessage(description = '') {