From c6feea9f6d3ff7da053051fd94ca4ffdb5734d6e Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Sun, 24 Nov 2019 00:29:55 +0530
Subject: [PATCH] [Enhancement] Format messages in widget (#268)

* Use message formatter in widget

* Rename the variable
---
 .../widgets/conversation/Message.vue          | 14 +++-------
 .../shared/helpers/MessageFormatter.js        | 27 +++++++++++++++++++
 .../helpers/specs/MessageFormatter.spec.js    | 13 +++++++++
 .../shared/mixins/messageFormatterMixin.js    | 10 +++++++
 .../widget/components/AgentMessageBubble.vue  |  7 ++---
 .../widget/components/UserMessageBubble.vue   | 12 ++++++---
 6 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 app/javascript/shared/helpers/MessageFormatter.js
 create mode 100644 app/javascript/shared/helpers/specs/MessageFormatter.spec.js
 create mode 100644 app/javascript/shared/mixins/messageFormatterMixin.js

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 59283b4c1..818eef088 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/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>
diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js
new file mode 100644
index 000000000..32aeef48f
--- /dev/null
+++ b/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;
diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js
new file mode 100644
index 000000000..f6ffb34f8
--- /dev/null
+++ b/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>'
+      );
+    });
+  });
+});
diff --git a/app/javascript/shared/mixins/messageFormatterMixin.js b/app/javascript/shared/mixins/messageFormatterMixin.js
new file mode 100644
index 000000000..4c6cb0c1d
--- /dev/null
+++ b/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;
+    },
+  },
+};
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 6d270dc85..54319761a 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/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,
   },
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index d964c5f0a..2a570bfdc 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/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;