From 1d46260b3b8c15a089f9bdc353e32d4667860aa8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 23 Apr 2024 11:07:33 +0530
Subject: [PATCH] fix: show name on reply to message with some style changes

---
 frontend/src/components/Activities.vue   |  6 ++++++
 frontend/src/components/WhatsAppArea.vue | 22 +++++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 0b6fcffb..33b29bf3 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -979,6 +979,12 @@ const whatsappMessages = createListResource({
         if (repliedMessage) {
           message.reply_message = repliedMessage.message
           message.reply_to = repliedMessage.name
+          message.reply_to_type = repliedMessage.type
+          message.reply_to_from =
+            (repliedMessage.from &&
+              getContact(doc.value.data.mobile_no)?.full_name) ||
+            getLeadContact(doc.value.data.mobile_no)?.full_name ||
+            repliedMessage.from
         }
       })
 
diff --git a/frontend/src/components/WhatsAppArea.vue b/frontend/src/components/WhatsAppArea.vue
index 88903c26..c320c6cf 100644
--- a/frontend/src/components/WhatsAppArea.vue
+++ b/frontend/src/components/WhatsAppArea.vue
@@ -16,9 +16,25 @@
         <div
           v-if="whatsapp.is_reply"
           @click="() => scrollToMessage(whatsapp.reply_to)"
-          class="mb-1 cursor-pointer rounded-md border-0 border-l-4 border-green-500 bg-gray-200 px-2 py-4"
-          v-html="formatWhatsAppMessage(whatsapp.reply_message)"
-        />
+          class="mb-1 cursor-pointer rounded border-0 border-l-4 bg-gray-200 p-2 text-gray-600"
+          :class="
+            whatsapp.reply_to_type == 'Incoming'
+              ? 'border-green-500'
+              : 'border-blue-400'
+          "
+        >
+          <div
+            class="mb-1 text-sm font-bold"
+            :class="
+              whatsapp.reply_to_type == 'Incoming'
+                ? 'text-green-500'
+                : 'text-blue-400'
+            "
+          >
+            {{ whatsapp.reply_to_from || __('You') }}
+          </div>
+          {{ formatWhatsAppMessage(whatsapp.reply_message) }}
+        </div>
         <div class="inline-flex gap-2">
           <div
             class="absolute -right-0.5 -top-0.5 flex cursor-pointer gap-1 rounded-full bg-white pb-2 pl-2 pr-1.5 pt-1.5 opacity-0 group-hover/message:opacity-100"