From a2af5e25e10ea20f5524af95f74cc2add3660bae Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 9 Oct 2023 15:11:08 +0530
Subject: [PATCH] feat: allow showing in-reply-to message

---
 .../widgets/conversation/Message.vue          | 30 +++++++++++++++++++
 .../widgets/conversation/MessagesView.vue     |  3 ++
 .../widgets/conversation/bubble/ReplyTo.vue   | 22 ++++++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 35feab802..3c8cad407 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -34,6 +34,11 @@
             :url="storyUrl"
           />
         </blockquote>
+        <bubble-reply-to
+          v-if="inReplyTo"
+          :content="inReplyTo.content"
+          @click="navigateToMessage"
+        />
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -141,6 +146,7 @@ import BubbleLocation from './bubble/Location.vue';
 import BubbleMailHead from './bubble/MailHead.vue';
 import BubbleText from './bubble/Text.vue';
 import BubbleContact from './bubble/Contact.vue';
+import BubbleReplyTo from './bubble/ReplyTo.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
 import instagramImageErrorPlaceholder from './instagramImageErrorPlaceholder.vue';
@@ -165,6 +171,7 @@ export default {
     BubbleMailHead,
     BubbleText,
     BubbleContact,
+    BubbleReplyTo,
     ContextMenu,
     Spinner,
     instagramImageErrorPlaceholder,
@@ -175,6 +182,10 @@ export default {
       type: Object,
       required: true,
     },
+    currentChat: {
+      type: Object,
+      required: true,
+    },
     isATweet: {
       type: Boolean,
       default: false,
@@ -271,6 +282,18 @@ export default {
         ) + botMessageContent
       );
     },
+    inReplyTo() {
+      const replyToMessageId = this.data.content_attributes?.in_reply_to;
+
+      if (!replyToMessageId) return null;
+
+      return this.currentChat?.messages.find(message => {
+        if (message.id === replyToMessageId) {
+          return true;
+        }
+        return false;
+      });
+    },
     contextMenuEnabledOptions() {
       return {
         copy: this.hasText,
@@ -522,6 +545,13 @@ export default {
         this.showBackgroundHighlight = false;
       }, HIGHLIGHT_TIMER);
     },
+    navigateToMessage() {
+      this.$nextTick(() => {
+        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+          messageId: this.inReplyTo?.id,
+        });
+      });
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 5da5408e4..4eb4ae554 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -34,6 +34,7 @@
         :has-instagram-story="hasInstagramStory"
         :is-web-widget-inbox="isAWebWidgetInbox"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :current-chat="currentChat"
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span>
@@ -55,6 +56,8 @@
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :current-chat="currentChat"
       />
       <conversation-label-suggestion
         v-if="shouldShowLabelSuggestions"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
new file mode 100644
index 000000000..3d2d65022
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from 'vue';
+import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
+
+const { content } = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const cleanedContent = computed(() => extractTextFromMarkdown(content));
+</script>
+
+<template>
+  <div
+    class="p-2 -mx-2 overflow-hidden rounded-md bg-woot-600 line-clamp-3 min-w-[15rem] mb-2 cursor-pointer"
+    @click="$emit('click')"
+  >
+    {{ cleanedContent }}
+  </div>
+</template>