From 15a2f6841c891d9a290939371e0bc5531d6d5fe6 Mon Sep 17 00:00:00 2001
From: Arjona99 <sebasarjona@outlook.com>
Date: Wed, 17 May 2023 16:13:56 -0600
Subject: [PATCH 1/2] Replace \\n for \n tu support line break formatting

---
 .../shared/components/ChatOptions.vue         | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index d73e00c5bcd82..e9b0a51283f95 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,13 +1,10 @@
 <template>
-  <div
-    class="options-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <div class="card-body">
-      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
-        {{ title }}
-      </h4>
-    </div>
+  <div class="chat-bubble agent" :class="$dm('bg-white', 'dark:bg-slate-700')">
+    <div
+      v-dompurify-html="formattedMessage"
+      class="message-content"
+      :class="$dm('text-black-900', 'dark:text-slate-50')"
+    />
   </div>
 </template>
 
@@ -22,6 +19,12 @@ export default {
       default: '',
     },
   },
+  computed: {
+    formattedMessage() {
+      const messageWithLineBreak = this.message.replace(/\\n/g,'\n')
+      return this.formatMessage(messageWithLineBreak)
+    }
+  }
 };
 </script>
 

From 292d377bce7d32959e0307df9b9b7385628d6e71 Mon Sep 17 00:00:00 2001
From: Arjona99 <sebasarjona@outlook.com>
Date: Wed, 17 May 2023 16:17:20 -0600
Subject: [PATCH 2/2] solve merge conflicts

---
 app/javascript/shared/components/ChatOptions.vue        | 5 +++--
 app/javascript/widget/components/AgentMessageBubble.vue | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index e9b0a51283f95..2f93658f547ea 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -10,11 +10,12 @@
 
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
-  mixins: [darkModeMixin],
+  mixins: [darkModeMixin, messageFormatterMixin],
   props: {
-    title: {
+    message: {
       type: String,
       default: '',
     },
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index ac596e8c43325..810c097e4d6c8 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -25,7 +25,7 @@
       />
     </div>
     <div v-if="isOptions">
-      <chat-options :title="message" />
+      <chat-options :message="message" />
     </div>
     <chat-form
       v-if="isForm && !messageContentAttributes.submitted_values"