[Enhancement] Format messages in widget (#268)

* Use message formatter in widget

* Rename the variable

app/javascript/shared/helpers/MessageFormatter.js

@@ -0,0 +1,27 @@
+class MessageFormatter {
+  constructor(message) {
+    this.message = message || '';
+  }
+
+  formatMessage() {
+    const linkifiedMessage = this.linkify();
+    return linkifiedMessage.replace(/\n/g, '<br>');
+  }
+
+  linkify() {
+    if (!this.message) {
+      return '';
+    }
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    return this.message.replace(
+      urlRegex,
+      url => `<a href="${url}" target="_blank">${url}</a>`
+    );
+  }
+
+  get formattedMessage() {
+    return this.formatMessage();
+  }
+}
+
+export default MessageFormatter;

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

@@ -0,0 +1,13 @@
+import MessageFormatter from '../MessageFormatter';
+
+describe('#MessageFormatter', () => {
+  describe('content with links', () => {
+    it('should format correctly', () => {
+      const message =
+        'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com';
+      expect(new MessageFormatter(message).formattedMessage).toEqual(
+        'Chatwoot is an opensource tool<br>See more at <a href="https://www.chatwoot.com" target="_blank">https://www.chatwoot.com</a>'
+      );
+    });
+  });
+});

app/javascript/shared/mixins/messageFormatterMixin.js

@@ -0,0 +1,10 @@
+import MessageFormatter from '../helpers/MessageFormatter';
+
+export default {
+  methods: {
+    formatMessage(message) {
+      const messageFormatter = new MessageFormatter(message);
+      return messageFormatter.formattedMessage;
+    },
+  },
+};