feat: allow showing in-reply-to message

2023-10-10 19:18:33 +05:30
parent cbae95422d
commit a2af5e25e1
3 changed files with 55 additions and 0 deletions
@@ -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>
@@ -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"
@@ -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>