Merge pull request #85 from aplijobs/enhancement/support-multiline-qu…

…ick-replies

Enhancement | Support multi-line text in Interactive Messages

app/javascript/shared/components/ChatOptions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chat-bubble agent" :class="$dm('bg-white', 'dark:bg-slate-700')">
     <div
-      v-dompurify-html="formatMessage(message, false)"
+      v-dompurify-html="formattedMessage"
       class="message-content"
       :class="$dm('text-black-900', 'dark:text-slate-50')"
     />
@@ -13,13 +13,19 @@ import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
-  mixins: [messageFormatterMixin, darkModeMixin],
+  mixins: [darkModeMixin, messageFormatterMixin],
   props: {
     message: {
       type: String,
       default: '',
     },
   },
+  computed: {
+    formattedMessage() {
+      const messageWithLineBreak = this.message.replace(/\\n/g,'\n')
+      return this.formatMessage(messageWithLineBreak)
+    }
+  }
 };
 </script>