From f9317708daf9a5b3a526c632b31b517be14acadf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 21 Apr 2024 14:24:26 +0530
Subject: [PATCH] fix: scroll to message and highlight on click

---
 frontend/src/components/WhatsAppArea.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/WhatsAppArea.vue b/frontend/src/components/WhatsAppArea.vue
index 8ec6b474..88903c26 100644
--- a/frontend/src/components/WhatsAppArea.vue
+++ b/frontend/src/components/WhatsAppArea.vue
@@ -15,6 +15,7 @@
       >
         <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)"
         />
@@ -209,4 +210,15 @@ function messageOptions(message) {
     // },
   ]
 }
+
+function scrollToMessage(name) {
+  const element = document.getElementById(name)
+  element.scrollIntoView({ behavior: 'smooth' })
+
+  // Highlight the message
+  element.classList.add('bg-yellow-100')
+  setTimeout(() => {
+    element.classList.remove('bg-yellow-100')
+  }, 1000)
+}
 </script>