From 453d7ad9fc3b2d1ef3a63e4d7d866eee6d80291c Mon Sep 17 00:00:00 2001
From: Jatin <72418976+Jatin-MYST@users.noreply.github.com>
Date: Sat, 5 Aug 2023 09:22:32 +0930
Subject: [PATCH] fix: Update options interactive messages formatting in web
 widget (#7437)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 app/javascript/shared/components/ChatOptions.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index 3a994a583..40298df37 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,11 +1,11 @@
 <template>
-  <div
-    class="options-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
+  <div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
     <div class="card-body">
-      <h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
-        {{ title }}
+      <h4 class="title text-black-900 dark:text-slate-50">
+        <div
+          v-dompurify-html="formatMessage(title, false)"
+          class="message-content text-black-900 dark:text-slate-50"
+        />
       </h4>
       <ul
         v-if="!hideFields"
@@ -26,13 +26,13 @@
 
 <script>
 import ChatOption from 'shared/components/ChatOption';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
   components: {
     ChatOption,
   },
-  mixins: [darkModeMixin],
+  mixins: [messageFormatterMixin],
   props: {
     title: {
       type: String,