[Enhancement] Format messages in widget (#268)

* Use message formatter in widget

* Rename the variable

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

@@ -42,6 +42,7 @@
 </template>
 <script>
 /* eslint-disable no-named-as-default */
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import getEmojiSVG from '../emoji/utils';
 import timeMixin from '../../../mixins/time';
 import BubbleText from './bubble/Text';
@@ -56,7 +57,7 @@ export default {
     BubbleMap,
     BubbleAudio,
   },
-  mixins: [timeMixin],
+  mixins: [timeMixin, messageFormatterMixin],
   props: {
     data: {
       type: Object,
@@ -70,8 +71,7 @@ export default {
   },
   computed: {
     message() {
-      const linkifiedMessage = this.linkify(this.data.content);
-      return linkifiedMessage.replace(/\n/g, '<br>');
+      return this.formatMessage(this.data.content);
     },
     alignBubble() {
       return this.data.message_type === 1 ? 'right' : 'left';
@@ -106,14 +106,6 @@ export default {
   },
   methods: {
     getEmojiSVG,
-    linkify(text) {
-      if (!text) return text;
-      const urlRegex = /(https?:\/\/[^\s]+)/g;
-      return text.replace(
-        urlRegex,
-        url => `<a href="${url}" target="_blank">${url}</a>`
-      );
-    },
   },
 };
 </script>

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;
+    },
+  },
+};

app/javascript/widget/components/AgentMessageBubble.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="chat-bubble agent">
-    {{ message }}
-  </div>
+  <div class="chat-bubble agent" v-html="formatMessage(message)"></div>
 </template>
 
 <script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
 export default {
   name: 'AgentMessageBubble',
+  mixins: [messageFormatterMixin],
   props: {
     message: String,
   },

app/javascript/widget/components/UserMessageBubble.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="chat-bubble user">
-    {{ message }}
-  </div>
+  <div class="chat-bubble user" v-html="formatMessage(message)"></div>
 </template>
 
 <script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
 export default {
   name: 'UserMessageBubble',
+  mixins: [messageFormatterMixin],
   props: {
     message: String,
   },
@@ -28,6 +29,11 @@ export default {
   line-height: 1.5;
   max-width: 80%;
   padding: $space-small $space-two;
+  text-align: left;
+
+  a {
+    color: $color-white;
+  }
 
   &.user {
     border-bottom-right-radius: $space-smaller;