From 39b06a76ce66ba1c05e5524a14ac81dab3a394fc Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 28 Nov 2024 18:55:44 +0530
Subject: [PATCH] feat: add inreplyto

---
 .../components-next/message/Message.vue       |  5 +++
 .../message/Messages.story.vue                |  8 ++++
 .../components-next/message/bubbles/Base.vue  | 37 ++++++++++++++++++-
 .../message/fixtures/textWithMedia.js         | 10 +++--
 4 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 51bbb8e06..98c9ce7c4 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -123,6 +123,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
 });
 
 /**
@@ -229,6 +233,7 @@ const componentToRender = computed(() => {
 
 provideMessageContext({
   variant,
+  inReplyTo: props.inReplyTo,
   orientation,
   isMyMessage,
 });
diff --git a/app/javascript/dashboard/components-next/message/Messages.story.vue b/app/javascript/dashboard/components-next/message/Messages.story.vue
index 62e2ec373..4b78b202a 100644
--- a/app/javascript/dashboard/components-next/message/Messages.story.vue
+++ b/app/javascript/dashboard/components-next/message/Messages.story.vue
@@ -21,6 +21,13 @@ const shouldGroupWithNext = index => {
   // Check if messages are in the same minute by rounding down to nearest minute
   return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
 };
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
 </script>
 
 <template>
@@ -30,6 +37,7 @@ const shouldGroupWithNext = index => {
         <Message
           :current-user-id="1"
           :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
           v-bind="message"
         />
       </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
index 28b3610bc..76f27f0e8 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Base.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -1,9 +1,15 @@
 <script setup>
 import { computed } from 'vue';
+
+import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
+import { useI18n } from 'vue-i18n';
+
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS } from '../constants';
 
-const { variant, orientation } = useMessageContext();
+const { variant, orientation, inReplyTo } = useMessageContext();
+const { t } = useI18n();
 
 const varaintBaseMap = {
   [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
@@ -32,10 +38,39 @@ const messageClass = computed(() => {
 
   return classToApply;
 });
+
+const scrollToMessage = () => {
+  emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+    messageId: this.message.id,
+  });
+};
+
+const previewMessage = computed(() => {
+  if (!inReplyTo) return '';
+
+  const { content, attachments } = inReplyTo;
+
+  if (content) return content;
+  if (attachments.length) {
+    const [{ fileType } = {}] = inReplyTo.attachments;
+    return t(`CHAT_LIST.ATTACHMENTS.${fileType}.CONTENT`);
+  }
+
+  return '';
+});
 </script>
 
 <template>
   <div class="max-w-md text-sm" :class="messageClass">
+    <div
+      v-if="inReplyTo"
+      class="bg-n-alpha-black1 rounded-lg p-2"
+      @click="scrollToMessage"
+    >
+      <span class="line-clamp-2">
+        {{ previewMessage }}
+      </span>
+    </div>
     <slot />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js b/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
index deca7ca19..c7aceae36 100644
--- a/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
+++ b/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
@@ -129,10 +129,10 @@ export default camelcaseKeys(
       status: 'read',
       content_type: 'text',
       processed_message_content:
-        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for?",
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
       id: 5301,
       content:
-        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for?",
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
       account_id: 2,
       inbox_id: 486,
       message_type: 1,
@@ -140,7 +140,9 @@ export default camelcaseKeys(
       updated_at: '2024-11-27T12:32:43.458Z',
       private: false,
       source_id: null,
-      content_attributes: {},
+      content_attributes: {
+        in_reply_to: 5296,
+      },
       sender_type: 'User',
       sender_id: 1,
       external_source_ids: {},
@@ -185,7 +187,7 @@ export default camelcaseKeys(
       source_id: null,
       content_type: 'text',
       content_attributes: {
-        in_reply_to: null,
+        in_reply_to: 5301,
       },
       sender_type: 'Contact',
       sender_id: 599,