From 25258417de4f7b7c8ef1d068a4b4cd3097b8347a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 8 Jan 2025 18:17:50 +0530
Subject: [PATCH] fix: v4 ui issues (#10652)

This PR has the following fixes

1. Remove leading `:` in inbox view push message content
2. Styles for block quotes in text
3. Better condition for checking bot message
4. Use dompurify
---
 app/javascript/dashboard/components-next/Inbox/InboxCard.vue  | 4 ++++
 app/javascript/dashboard/components-next/message/Message.vue  | 3 ++-
 .../components-next/message/bubbles/InstagramStory.vue        | 2 +-
 .../components-next/message/bubbles/Text/FormattedContent.vue | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
index 056c4c2d8..2f3d7fd53 100644
--- a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
@@ -80,6 +80,10 @@ const messageClasses = computed(() => ({
 }));
 
 const formatPushMessage = message => {
+  if (message.startsWith(': ')) {
+    return message.slice(2);
+  }
+
   return message.replace(/^([^:]+):/g, (match, name) => {
     return `<span class="${messageClasses.value.emphasis}">${name}:</span>`;
   });
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 04eb8d8a4..fb3769e88 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -152,7 +152,8 @@ const variant = computed(() => {
   if (props.contentAttributes?.isUnsupported)
     return MESSAGE_VARIANTS.UNSUPPORTED;
 
-  if (!props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT) {
+  const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
+  if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
     return MESSAGE_VARIANTS.BOT;
   }
 
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
index 83872b320..b6532a837 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -38,7 +38,7 @@ const onVideoLoadError = () => {
 
 <template>
   <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
-    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
     <img
       v-if="!hasImgStoryError"
       class="rounded-lg max-w-80"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
index f9be00e7b..8fa7f6e3d 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
@@ -26,6 +26,6 @@ const formattedContent = computed(() => {
 <template>
   <span
     v-dompurify-html="formattedContent"
-    class="[&_.link]:text-n-slate-11 [&_.link]:underline [&>p:last-child]:mb-0 [&>ul]:list-inside [&>ol]:list-inside [&>dl]:list-inside [&>ol]:list-decimal [&>ul]:list-disc"
+    class="[&_.link]:text-n-slate-11 [&_.link]:underline [&>p:last-child]:mb-0 [&>ul]:list-inside [&>ol]:list-inside [&>dl]:list-inside [&>ol]:list-decimal [&>ul]:list-disc [&>blockquote]:border-l-4 [&>blockquote]:border-n-alpha-black1 [&>blockquote]:pl-2"
   />
 </template>